.stepup {
  --su-bg:     #05070d;
  --su-bg2:    #0a0e19;
  --su-panel:  #0f1524;
  --su-panel2: #121b2d;
  --su-line:   rgba(255,255,255,.12);
  --su-muted:  rgba(255,255,255,.68);
  --su-soft:   rgba(255,255,255,.48);
  --su-text:   #f5f7fb;
  --su-blue:   #56a8ff;
  --su-cyan:   #6cf4ff;
  --su-violet: #8d6cff;
  --su-orange: #ffb05c;
  --su-red:    #ff6678;
  --su-green:  #72f0a0;
  --su-radius: 28px;
  --su-shadow: 0 24px 80px rgba(0,0,0,.48);
  color: var(--su-text);
  background:
    radial-gradient(circle at 13% 0%,  rgba(86,168,255,.22), transparent 28%),
    radial-gradient(circle at 88% 7%,  rgba(141,108,255,.24), transparent 31%),
    radial-gradient(circle at 53% 49%, rgba(255,176,92,.08), transparent 28%),
    linear-gradient(180deg, #05070d 0%, #080b14 37%, #05070d 100%);
  position: relative;
  overflow: hidden;
}
.stepup .su-noise {
  position:absolute; inset:0; pointer-events:none; opacity:.14; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.stepup .su-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; position: relative; z-index: 1; }
.stepup h1, .stepup h2, .stepup h3, .stepup p { margin: 0; color: inherit; }
.stepup a { color: inherit; text-decoration: none; }

/* HERO */
.stepup .su-hero { padding: 80px 0 70px; display: grid; grid-template-columns: 1.04fr .96fr; gap: 48px; align-items: center; }
.stepup .su-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border:1px solid var(--su-line); border-radius:999px;
  color:var(--su-muted); background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px rgba(255,255,255,.08);
  font-weight:800; font-size:14px;
}
.stepup .su-dot { width:8px; height:8px; border-radius:50%; background:var(--su-green); box-shadow:0 0 18px var(--su-green); }
.stepup .su-hero h1 {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.15;
  letter-spacing: -.04em;
  margin-top: 22px;
  font-weight: 900;
  word-break: keep-all;
  max-width: 14ch;
}
.stepup .su-grad {
  background: linear-gradient(90deg,#fff 0%, #c7f8ff 24%, #9c8cff 64%, #ffca8b 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stepup .su-copy {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  margin-top: 22px;
  letter-spacing: -.015em;
  max-width: 620px;
  font-weight: 500;
  word-break: keep-all;
}
.stepup .su-copy b { color:#fff; font-weight:950; }
.stepup .su-actions { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.stepup .su-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 22px; border-radius:14px; font-weight:900; letter-spacing:-.02em;
  border:1px solid var(--su-line); transition: transform .2s, background .2s, border-color .2s;
  font-size:15.5px;
}
.stepup .su-btn:hover { transform: translateY(-2px); }
.stepup .su-btn-primary { background: linear-gradient(135deg,#fff,#c9f7ff); color:#04070d; border-color:transparent; box-shadow:0 18px 50px rgba(108,244,255,.18); }
.stepup .su-btn-ghost { background: rgba(255,255,255,.045); color:#fff; }
.stepup .su-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:34px; max-width:760px; }
.stepup .su-kpi { padding:18px; border:1px solid var(--su-line); border-radius:18px; background:rgba(255,255,255,.045); }
.stepup .su-kpi strong { font-size:24px; display:block; letter-spacing:-.04em; }
.stepup .su-kpi span { display:block; margin-top:6px; color:var(--su-soft); font-size:13px; line-height:1.35; font-weight:700; }

/* Console (히어로 우측 mock) */
.stepup .su-console {
  position:relative; border:1px solid rgba(255,255,255,.14); border-radius:30px;
  background: linear-gradient(180deg, rgba(18,27,45,.92), rgba(5,7,13,.88));
  box-shadow: var(--su-shadow); padding:20px; overflow:hidden;
}
.stepup .su-console::before {
  content:""; position:absolute; inset:-1px;
  background:
    radial-gradient(circle at 25% 3%, rgba(108,244,255,.25), transparent 30%),
    radial-gradient(circle at 90% 15%, rgba(141,108,255,.24), transparent 36%);
  pointer-events:none;
}
.stepup .su-console-top { display:flex; gap:7px; position:relative; z-index:1; margin-bottom:18px; }
.stepup .su-light { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.3); }
.stepup .su-dash { position:relative; z-index:1; display:grid; gap:13px; }
.stepup .su-dash-card { border:1px solid rgba(255,255,255,.1); background:rgba(5,7,13,.54); border-radius:18px; padding:18px; }
.stepup .su-dash-title { display:flex; justify-content:space-between; gap:12px; color:var(--su-soft); font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.stepup .su-status { color:var(--su-green); }
.stepup .su-dash-main { font-size:24px; font-weight:1000; letter-spacing:-.05em; margin-top:12px; }
.stepup .su-dash-main small { font-size:13px; color:var(--su-muted); font-weight:800; }
.stepup .su-pipeline { display:grid; grid-template-columns:1fr 32px 1fr 32px 1fr; align-items:center; gap:10px; margin-top:14px; }
.stepup .su-pipe { padding:11px; border-radius:12px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); font-size:12.5px; font-weight:900; text-align:center; }
.stepup .su-arrow { text-align:center; color:var(--su-cyan); font-weight:1000; }
.stepup .su-code { font-family:"SFMono-Regular",Consolas,monospace; color:#d6faff; font-size:12.5px; line-height:1.65; white-space:pre-wrap; }
.stepup .su-code em { color:var(--su-orange); font-style:normal; }
.stepup .su-code b { color:var(--su-green); font-weight:700; }

/* Sections */
.stepup .su-section { padding:84px 0; border-top:1px solid rgba(255,255,255,.08); }
.stepup .su-section-head { display:grid; grid-template-columns:.72fr 1fr; gap:42px; align-items:end; margin-bottom:36px; }
.stepup .su-label { color:var(--su-cyan); font-weight:1000; letter-spacing:.12em; text-transform:uppercase; font-size:12.5px; }
.stepup .su-section-head h2 {
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.25;
  letter-spacing: -.035em;
  margin-top: 12px;
  font-weight: 900;
  word-break: keep-all;
}
.stepup .su-section-head p { color:var(--su-muted); font-size:16px; line-height:1.75; letter-spacing:-.015em; font-weight:500; word-break:keep-all; }

/* Cards */
.stepup .su-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stepup .su-card {
  position:relative; padding:24px; border:1px solid var(--su-line); border-radius:var(--su-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow: 0 16px 60px rgba(0,0,0,.22); overflow:hidden;
}
.stepup .su-card::after { content:""; position:absolute; right:-80px; top:-80px; width:180px; height:180px; border-radius:50%; background:rgba(86,168,255,.12); filter:blur(12px); }
.stepup .su-card h3 { font-size:21px; letter-spacing:-.045em; margin-bottom:12px; }
.stepup .su-card p { color:var(--su-muted); line-height:1.75; font-weight:500; letter-spacing:-.015em; font-size:14.5px; word-break:keep-all; }
.stepup .su-num { font-size:12.5px; color:var(--su-soft); font-weight:950; margin-bottom:22px; display:block; }

/* Dark band (인용 + 본문) */
.stepup .su-darkband {
  background: linear-gradient(135deg, rgba(86,168,255,.12), rgba(141,108,255,.11), rgba(255,176,92,.06));
  border:1px solid rgba(255,255,255,.13); border-radius:32px; padding:36px;
  box-shadow: var(--su-shadow);
}
.stepup .su-split { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
.stepup .su-quote {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.35;
  letter-spacing: -.03em;
  font-weight: 900;
  word-break: keep-all;
}
.stepup .su-quote span { color:var(--su-orange); }
.stepup .su-textblock { color:var(--su-muted); font-size:16px; line-height:1.85; font-weight:500; letter-spacing:-.015em; word-break:keep-all; }
.stepup .su-textblock b { color:#fff; font-weight:950; }

/* Compare */
.stepup .su-compare { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.stepup .su-compare-box { padding:28px; border-radius:24px; border:1px solid var(--su-line); background:rgba(255,255,255,.04); }
.stepup .su-compare-box.su-bad { background: linear-gradient(180deg, rgba(255,102,120,.09), rgba(255,255,255,.03)); }
.stepup .su-compare-box.su-good { background: linear-gradient(180deg, rgba(108,244,255,.11), rgba(255,255,255,.03)); }
.stepup .su-compare-box h3 { font-size:22px; margin-bottom:18px; }
.stepup .su-list { display:grid; gap:14px; }
.stepup .su-item { display:flex; gap:12px; color:var(--su-muted); line-height:1.55; font-weight:650; font-size:14.5px; }
.stepup .su-check, .stepup .su-x {
  width:24px; height:24px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center; font-size:13px; font-weight:1000;
}
.stepup .su-check { background:rgba(114,240,160,.17); color:var(--su-green); }
.stepup .su-x { background:rgba(255,102,120,.16); color:var(--su-red); }

/* Timeline */
.stepup .su-timeline { display:grid; gap:18px; }
.stepup .su-step { display:grid; grid-template-columns:120px 1fr; gap:22px; padding:24px; border-radius:24px; border:1px solid var(--su-line); background:rgba(255,255,255,.04); }
.stepup .su-week { color:var(--su-cyan); font-size:20px; font-weight:1000; letter-spacing:-.04em; }
.stepup .su-step h3 { font-size:22px; margin-bottom:10px; letter-spacing:-.045em; }
.stepup .su-step p { color:var(--su-muted); line-height:1.8; font-weight:500; font-size:15px; letter-spacing:-.015em; word-break:keep-all; }
.stepup .su-chips { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }
.stepup .su-chip { font-size:12.5px; font-weight:850; color:rgba(255,255,255,.78); padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045); }

/* Proof */
.stepup .su-proof { display:grid; grid-template-columns:.9fr 1.1fr; gap:18px; }
.stepup .su-metric-big {
  padding:32px; border-radius:28px; border:1px solid var(--su-line);
  background: linear-gradient(180deg, rgba(114,240,160,.11), rgba(255,255,255,.025));
}
.stepup .su-metric-big strong { display:block; font-size:clamp(48px,7vw,96px); line-height:.9; letter-spacing:-.08em; }
.stepup .su-metric-big span { display:block; margin-top:16px; color:var(--su-muted); font-size:17px; line-height:1.55; font-weight:700; }
.stepup .su-proof-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.stepup .su-mini { padding:22px; border:1px solid var(--su-line); border-radius:22px; background:rgba(255,255,255,.04); }
.stepup .su-mini h3 { font-size:19px; margin-bottom:10px; }
.stepup .su-mini p { color:var(--su-muted); line-height:1.55; font-weight:600; font-size:14.5px; }

/* Who */
.stepup .su-who { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.stepup .su-who-card { padding:26px; border-radius:24px; border:1px solid var(--su-line); background:rgba(255,255,255,.04); }
.stepup .su-who-card h3 { font-size:22px; margin-bottom:12px; }
.stepup .su-who-card p { color:var(--su-muted); line-height:1.8; font-weight:500; font-size:15px; letter-spacing:-.015em; word-break:keep-all; }

/* CTA panel */
.stepup .su-cta-panel {
  position:relative; overflow:hidden; text-align:center; padding:60px 30px; border-radius:36px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(108,244,255,.24), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: var(--su-shadow);
}
.stepup .su-cta-panel h2 {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.2;
  letter-spacing: -.035em;
  font-weight: 900;
  word-break: keep-all;
}
.stepup .su-cta-panel p { max-width:720px; margin:22px auto 0; color:var(--su-muted); font-size:16.5px; line-height:1.75; font-weight:500; letter-spacing:-.015em; word-break:keep-all; }
.stepup .su-cta-panel .su-actions { justify-content:center; }

/* FAQ */
.stepup .su-faq { display:grid; gap:12px; }
.stepup .su-faq details { border:1px solid var(--su-line); border-radius:20px; background:rgba(255,255,255,.04); padding:0 22px; }
.stepup .su-faq summary { cursor:pointer; padding:20px 0; font-size:17px; font-weight:900; letter-spacing:-.02em; list-style:none; }
.stepup .su-faq summary::-webkit-details-marker { display:none; }
.stepup .su-faq summary::after { content:"+"; float:right; color:var(--su-cyan); font-weight:1000; transition: transform .2s; }
.stepup .su-faq details[open] summary::after { content:"−"; }
.stepup .su-faq p { color:var(--su-muted); line-height:1.7; font-weight:600; padding:0 0 20px; font-size:15px; }

/* Progress bar */
.stepup .su-progress {
  position:fixed; top:72px; left:0; height:3px; width:0; z-index:50;
  background: linear-gradient(90deg, var(--su-cyan), var(--su-violet), var(--su-orange));
  box-shadow: 0 0 24px rgba(108,244,255,.6);
  transition: width .1s linear;
}

/* OUTCOME 섹션 */
.stepup .su-outcome { display:grid; grid-template-columns:1fr 1.1fr; gap:28px; align-items:stretch; }
.stepup .su-outcome-flow {
  padding:36px 32px; border-radius:28px; border:1px solid var(--su-line);
  background: linear-gradient(180deg, rgba(108,244,255,.08), rgba(141,108,255,.05));
  display:flex; flex-direction:column; gap:14px; justify-content:center;
}
.stepup .su-flow-step {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  font-weight:850; font-size:15.5px; letter-spacing:-.02em;
}
.stepup .su-flow-arrow { text-align:center; color:var(--su-cyan); font-weight:1000; font-size:22px; line-height:0.5; }
.stepup .su-flow-step.su-final {
  background: linear-gradient(135deg, rgba(255,176,92,.22), rgba(255,102,120,.18));
  border-color: rgba(255,176,92,.4);
  font-size:18px;
  color:#ffe2b8;
}
.stepup .su-outcome-list { display:grid; gap:14px; }
.stepup .su-outcome-item {
  padding:22px 24px; border-radius:20px;
  border:1px solid var(--su-line); background:rgba(255,255,255,.04);
}
.stepup .su-outcome-item .su-otag {
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:900; letter-spacing:.04em;
  background:rgba(108,244,255,.18); color:var(--su-cyan);
  margin-bottom:10px;
}
.stepup .su-outcome-item.su-final .su-otag {
  background:rgba(255,176,92,.22); color:var(--su-orange);
}
.stepup .su-outcome-item h3 { font-size:18px; letter-spacing:-.025em; margin-bottom:6px; }
.stepup .su-outcome-item p { color:var(--su-muted); font-size:14.5px; line-height:1.7; font-weight:500; word-break:keep-all; }
.stepup .su-outcome-item.su-final h3 { color:#ffe2b8; font-size:20px; }

/* REAL CASES 섹션 */
.stepup .su-cases { display:grid; grid-template-columns:1.4fr .9fr; gap:22px; }
.stepup .su-cases-grid { display:grid; gap:14px; }
.stepup .su-case {
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  padding:22px 26px; border-radius:20px;
  border:1px solid var(--su-line); background:rgba(255,255,255,.04);
}
.stepup .su-case .su-case-tag {
  display:inline-block; padding:4px 10px; border-radius:6px;
  font-size:11.5px; font-weight:900; letter-spacing:.03em;
  background:rgba(86,168,255,.2); color:var(--su-blue);
  margin-bottom:8px;
}
.stepup .su-case h4 { font-size:17px; letter-spacing:-.025em; margin-bottom:6px; line-height:1.4; }
.stepup .su-case p { color:var(--su-muted); font-size:14px; font-weight:500; }
.stepup .su-case .su-case-arrow {
  font-size:13px; font-weight:900; color:var(--su-green); white-space:nowrap;
}
.stepup .su-case .su-case-arrow span { display:block; color:var(--su-soft); font-size:11px; font-weight:700; margin-bottom:4px; }

/* PROGRAM DETAIL 섹션 (가격 카드) */
.stepup .su-program {
  position:relative; overflow:hidden;
  padding:50px 44px; border-radius:36px;
  background: linear-gradient(135deg, rgba(255,176,92,.16), rgba(141,108,255,.18), rgba(108,244,255,.12));
  border:1px solid rgba(255,176,92,.32);
  box-shadow: var(--su-shadow);
  text-align:center;
}
.stepup .su-program::before {
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(circle at 50% -20%, rgba(255,176,92,.25), transparent 50%);
  pointer-events:none;
}
.stepup .su-program > * { position:relative; z-index:1; }
.stepup .su-program .su-badge {
  display:inline-block; padding:8px 16px; border-radius:999px;
  background:linear-gradient(135deg, #ffb05c, #ff6678); color:#1a0a05;
  font-size:13px; font-weight:1000; letter-spacing:.04em;
  box-shadow:0 8px 24px rgba(255,176,92,.4);
}
.stepup .su-program h2 {
  font-size:clamp(22px,2.8vw,32px);
  margin-top:18px; font-weight:900;
  letter-spacing:-.03em; line-height:1.3; word-break:keep-all;
}
.stepup .su-price-row {
  margin-top:30px;
  display:flex; align-items:baseline; justify-content:center; gap:18px; flex-wrap:wrap;
}
.stepup .su-price-old {
  font-size:24px; color:var(--su-soft);
  text-decoration:line-through; text-decoration-thickness:2px;
  font-weight:700;
}
.stepup .su-price-new {
  font-size:clamp(48px,7vw,80px);
  font-weight:1000; letter-spacing:-.05em;
  background: linear-gradient(135deg,#fff, #ffd87a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stepup .su-price-unit { font-size:18px; color:var(--su-muted); font-weight:700; }
.stepup .su-price-sub {
  margin-top:8px; color:var(--su-muted); font-size:14px; font-weight:600;
}
.stepup .su-program-grid {
  margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  text-align:left;
}
.stepup .su-pgrid-item {
  padding:18px 16px; border-radius:16px;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1);
}
.stepup .su-pgrid-item .su-pi-ico { font-size:20px; }
.stepup .su-pgrid-item h4 { font-size:13.5px; color:var(--su-cyan); font-weight:900; margin-top:8px; letter-spacing:.02em; }
.stepup .su-pgrid-item p { color:var(--su-text); font-size:14.5px; margin-top:4px; font-weight:700; line-height:1.45; }
.stepup .su-program .su-actions { justify-content:center; margin-top:34px; }
.stepup .su-program-note { margin-top:18px; color:var(--su-soft); font-size:13px; font-weight:600; }

@media (max-width: 920px) {
  .stepup .su-outcome { grid-template-columns:1fr; }
  .stepup .su-cases { grid-template-columns:1fr; }
  .stepup .su-case { grid-template-columns:1fr; gap:10px; }
  .stepup .su-program { padding:36px 24px; }
  .stepup .su-program-grid { grid-template-columns:1fr 1fr; }
}

/* Mobile */
@media (max-width: 920px) {
  .stepup .su-hero { padding:50px 0 46px; grid-template-columns:1fr; gap:32px; }
  .stepup .su-section { padding:64px 0; }
  .stepup .su-section-head, .stepup .su-split, .stepup .su-compare, .stepup .su-proof { grid-template-columns:1fr; }
  .stepup .su-cards, .stepup .su-kpis, .stepup .su-proof-grid, .stepup .su-who { grid-template-columns:1fr; }
  .stepup .su-step { grid-template-columns:1fr; gap:8px; }
  .stepup .su-darkband { padding:24px; }
  .stepup .su-actions .su-btn { width:100%; }
  .stepup .su-pipeline { grid-template-columns:1fr; }
  .stepup .su-arrow { transform: rotate(90deg); }
}