:root {
  --bg: #050505;
  --surface: #0d0d0e;
  --surface-2: #141416;
  --surface-3: #1b1b1e;
  --text: #f5f5f1;
  --text-soft: #c7c7c1;
  --muted: #87878b;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.23);
  --signal: #dfff63;
  --signal-soft: rgba(223,255,99,.12);
  --danger: #ff765e;
  --success: #8be6a7;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
  color-scheme: dark;
  font-family: Arial, Helvetica, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .08;
  pointer-events: none;
}
.ambient-a { top: -250px; left: -200px; background: var(--signal); }
.ambient-b { top: 40vh; right: -260px; background: #7d6cff; }

/* Shared student shell */
.app-shell {
  position: relative;
  width: min(100%, 820px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: calc(94px + var(--safe-bottom));
}
.app-shell.public-mode { width: 100%; max-width: none; padding-bottom: 0; }
.public-mode > .topbar, .public-mode > .bottom-nav { display: none; }
.public-mode > #app { padding: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 13px;
  height: calc(70px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 18px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(5,5,5,.82);
  backdrop-filter: blur(22px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.brand > span:last-child { display: flex; align-items: baseline; gap: 6px; }
.brand strong { font-size: 12px; letter-spacing: -.03em; }
.brand small { padding: 3px 5px; border-radius: 5px; background: var(--text); color: var(--bg); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.brand-mark, .loader-mark { position: relative; display: grid; width: 28px; height: 28px; place-items: center; }
.brand-mark i, .loader-mark i { position: absolute; width: 15px; height: 22px; border: 1px solid var(--text); border-radius: 5px; background: var(--bg); transform: rotate(-14deg) translateX(-4px); }
.brand-mark i:nth-child(2), .loader-mark i:nth-child(2) { transform: none; background: var(--surface-3); }
.brand-mark i:nth-child(3), .loader-mark i:nth-child(3) { transform: rotate(14deg) translateX(4px); background: var(--signal); border-color: var(--signal); }
.top-progress { display: none; align-items: center; gap: 8px; }
.top-progress span { font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.top-progress i { display: block; width: 58px; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.13); }
.top-progress b { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--signal); transition: width .45s cubic-bezier(.16,1,.3,1); }
.avatar-button { position: relative; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-2); font-size: 11px; font-weight: 800; cursor: pointer; }
.avatar-button i { position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border: 2px solid var(--bg); border-radius: 50%; background: var(--success); }

#app { padding: 18px 14px 42px; }
.loading-screen { display: grid; min-height: 72vh; place-content: center; justify-items: center; gap: 18px; color: var(--muted); }
.loading-screen .loader-mark { width: 56px; height: 56px; animation: breathe 1.8s ease-in-out infinite; }
.loading-screen .loader-mark i { width: 27px; height: 40px; border-radius: 8px; }
.loading-screen p { margin: 0; font-size: 12px; font-weight: 700; }
@keyframes breathe { 50% { transform: translateY(-5px) scale(1.04); } }

.page { animation: page-in .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 8px 4px 22px; }
.page-head h1 { margin: 5px 0 0; font-size: clamp(38px, 10vw, 62px); line-height: .92; letter-spacing: -.07em; }
.page-head p { margin: 0; }
.eyebrow, .section-kicker, .modal-kicker, .mono-label {
  margin: 0;
  color: var(--muted);
  font: 800 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-title { margin: 6px 0 0; font-size: 28px; line-height: 1; letter-spacing: -.05em; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 34px 4px 14px; }
.section-heading button { padding: 5px 0; border: 0; background: none; color: var(--text-soft); font-size: 11px; font-weight: 800; cursor: pointer; }

.hero-card { position: relative; min-height: 360px; padding: 28px 24px 24px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(150deg,#151516,#080808 65%); box-shadow: 0 24px 80px rgba(0,0,0,.34); }
.hero-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,transparent 25%,rgba(255,255,255,.07),transparent 60%); transform: translateX(-110%); animation: sheen 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 60%,100% { transform: translateX(110%); } }
.hero-copy { position: relative; z-index: 2; width: 70%; }
.hero-copy h1 { margin: 10px 0 14px; font-size: clamp(46px, 12.5vw, 78px); line-height: .86; letter-spacing: -.08em; }
.hero-copy h1 em { color: var(--signal); font-family: Georgia, serif; font-weight: 400; }
.hero-copy p:not(.eyebrow) { max-width: 34ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.hero-actions { position: absolute; z-index: 3; right: 20px; bottom: 20px; left: 20px; display: flex; align-items: center; gap: 10px; }
.primary-button, .secondary-button, .ghost-button { min-height: 50px; border-radius: 999px; cursor: pointer; transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease; }
.primary-button:hover, .secondary-button:hover, .ghost-button:hover { transform: translateY(-2px); }
.primary-button:active, .secondary-button:active, .ghost-button:active { transform: translateY(0) scale(.99); }
.primary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 20px; border: 0; background: var(--signal); color: var(--bg); font-size: 11px; font-weight: 900; }
.primary-button span { font-size: 18px; line-height: 1; }
.secondary-button { padding: 0 18px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.06); color: var(--text); font-size: 10px; font-weight: 800; }
.ghost-button { min-height: 43px; padding: 0 15px; border: 1px solid var(--line); background: transparent; font-size: 10px; font-weight: 800; }
.hero-stage { position: absolute; top: 10px; right: -50px; width: 190px; height: 250px; transform: rotate(8deg); }
.stage-phone { position: absolute; width: 112px; height: 216px; border: 5px solid #050505; border-radius: 27px; background: linear-gradient(160deg,#2e2e32,#0b0b0c); box-shadow: 0 23px 45px rgba(0,0,0,.45); }
.stage-phone::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 8px; border-radius: 99px; background: #050505; transform: translateX(-50%); }
.stage-phone::after { content: ""; position: absolute; inset: 29px 12px auto; height: 80px; border-radius: 14px; background: var(--signal); box-shadow: 0 94px 0 -10px #36363a,0 128px 0 -14px rgba(255,255,255,.32); }
.stage-phone.one { right: 50px; top: 18px; transform: rotate(-8deg); opacity: .45; }
.stage-phone.two { right: 12px; top: 11px; transform: rotate(7deg); }
.stage-orbit { position: absolute; right: 0; bottom: 6px; display: grid; width: 72px; height: 72px; place-items: center; border-radius: 50%; background: var(--signal); color: #050505; font-size: 31px; }
.stage-orbit::after { content: "↗"; transform: rotate(-8deg); }

.announcement { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text-soft); font-size: 10px; font-weight: 700; }
.announcement i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px var(--signal-soft); }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
.stat-card { min-width: 0; padding: 16px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.stat-card strong { display: block; margin-bottom: 5px; color: var(--signal); font-size: 23px; letter-spacing: -.055em; }
.stat-card span { display: block; color: var(--muted); font-size: 8px; line-height: 1.35; }
.next-card { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: left; cursor: pointer; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.next-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.next-number { display: grid; width: 62px; height: 70px; place-items: center; border-radius: 17px; background: var(--signal); color: var(--bg); font: 26px Georgia,serif; }
.next-card small { display: block; margin-bottom: 5px; color: var(--muted); font: 800 8px ui-monospace,monospace; letter-spacing: .1em; }
.next-card strong { display: block; font-size: 15px; line-height: 1.15; letter-spacing: -.025em; }
.next-card p { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.round-arrow { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.lesson-list { display: grid; gap: 8px; }
.lesson-list.two-column { grid-template-columns: 1fr 1fr; }
.lesson-card { display: grid; grid-template-columns: 43px minmax(0,1fr) 34px; align-items: center; gap: 12px; min-height: 93px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-align: left; cursor: pointer; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.lesson-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.lesson-card.locked { opacity: .52; }
.lesson-card.current { border-color: rgba(223,255,99,.45); background: var(--signal-soft); }
.lesson-card.done .lesson-index { background: var(--signal); color: var(--bg); border-color: var(--signal); }
.lesson-index { display: grid; width: 43px; height: 51px; place-items: center; border: 1px solid var(--line-strong); border-radius: 13px; font: 16px Georgia,serif; }
.lesson-meta { min-width: 0; }
.lesson-meta small { display: block; margin-bottom: 4px; color: var(--muted); font: 800 7px ui-monospace,monospace; letter-spacing: .1em; }
.lesson-meta strong { display: block; font-size: 12px; line-height: 1.2; }
.lesson-meta p { margin: 5px 0 0; color: var(--muted); font-size: 8px; }
.lesson-state { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
.route-banner { position: relative; margin-top: 30px; padding: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg,var(--surface-2),#090909); }
.route-banner h3 { margin: 7px 0; font-size: 27px; letter-spacing: -.05em; }
.route-banner > p:not(.section-kicker) { max-width: 43ch; margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.route-symbol { position: absolute; right: 20px; top: 10px; color: rgba(255,255,255,.06); font-size: 100px; }

.course-progress-card, .project-hero, .profile-card, .buy-card { padding: 21px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.progress-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.progress-top strong { color: var(--signal); font-size: 35px; line-height: 1; letter-spacing: -.06em; }
.progress-top span { color: var(--muted); font-size: 9px; }
.progress-line { height: 5px; margin-top: 17px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.progress-line i { display: block; height: 100%; border-radius: inherit; background: var(--signal); }
.phase-filter { display: flex; gap: 7px; margin: 14px 0; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.phase-filter::-webkit-scrollbar { display: none; }
.phase-filter button { min-height: 35px; padding: 0 13px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: 8px; font-weight: 800; cursor: pointer; }
.phase-filter button.active { border-color: var(--signal); background: var(--signal); color: var(--bg); }
.empty-state { padding: 30px; border: 1px solid var(--line); border-radius: 18px; color: var(--muted); text-align: center; font-size: 11px; }

.lesson-back { margin: 4px 0 14px; padding: 7px 0; border: 0; background: none; color: var(--muted); font-size: 10px; font-weight: 800; cursor: pointer; }
.video-slot { position: relative; min-height: 420px; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: radial-gradient(circle at 72% 23%,rgba(223,255,99,.09),transparent 25%),linear-gradient(145deg,#151517,#080808 68%); }
.video-slot::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 42px 42px; opacity: .16; mask-image: linear-gradient(to bottom,black,transparent 72%); pointer-events: none; }
.slot-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font: 800 8px ui-monospace,monospace; letter-spacing: .08em; }
.video-status { color: var(--text-soft); }
.video-status i, .video-pending i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--danger); }
.video-slot h1 { position: relative; z-index: 2; max-width: 12ch; margin: 55px 0 24px; font-size: clamp(36px,9vw,63px); line-height: .93; letter-spacing: -.065em; }
.video-empty { position: absolute; z-index: 2; right: 22px; bottom: 22px; left: 22px; display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(7,7,7,.72); backdrop-filter: blur(12px); }
.play-placeholder { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--signal); }
.video-empty strong, .video-empty small { display: block; }
.video-empty strong { font-size: 10px; }.video-empty small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.lesson-outcome { display: grid; grid-template-columns: 120px 1fr; gap: 18px; margin: 10px 0; padding: 18px; border: 1px solid rgba(223,255,99,.3); border-radius: 18px; background: var(--signal-soft); }
.lesson-outcome small { color: var(--signal); font: 800 8px ui-monospace,monospace; letter-spacing: .12em; }
.lesson-outcome p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.lesson-tabs { position: sticky; top: calc(71px + env(safe-area-inset-top)); z-index: 20; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 22px 0 10px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: rgba(10,10,10,.9); backdrop-filter: blur(15px); }
.lesson-tabs button { min-height: 39px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 850; cursor: pointer; }
.lesson-tabs button.active { background: var(--text); color: var(--bg); }
.tab-panel { display: none; gap: 10px; }.tab-panel.active { display: grid; }
.content-card { padding: 21px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.content-card h3 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.035em; }
.content-card > p { margin: 0 0 11px; color: var(--text-soft); font-size: 11px; line-height: 1.6; }.content-card > p:last-child { margin-bottom: 0; }
.route-example-card { border-color: rgba(223,255,99,.26); background: linear-gradient(135deg,rgba(223,255,99,.08),var(--surface)); }.route-example-card > span { display:block; margin-bottom:9px; color:var(--signal); font:800 7px ui-monospace,monospace; letter-spacing:.12em; }.route-example-card h3 { margin-bottom:10px; }
.chapter-list, .step-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.chapter-list li, .step-list li { display: grid; grid-template-columns: 33px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 10px; line-height: 1.45; }
.chapter-list li span, .step-list li span { color: var(--muted); font: 800 8px ui-monospace,monospace; }
.check-list { display: grid; gap: 8px; }
.check-item { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); text-align: left; cursor: pointer; }
.check-item i { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; font-style: normal; }
.check-item span { color: var(--text-soft); font-size: 10px; }.check-item.checked i { border-color: var(--signal); background: var(--signal); color: var(--bg); }.check-item.checked span { color: var(--muted); text-decoration: line-through; }
.prompt-box { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #080808; }
.prompt-box pre { margin: 0; padding: 16px; overflow: auto; white-space: pre-wrap; color: #c8c8c1; font: 9px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.prompt-box .primary-button { width: calc(100% - 12px); margin: 0 6px 6px; }
.resource-list { display: grid; gap: 8px; }.resource-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.resource-item > span { display: flex; align-items: center; gap: 10px; }.resource-icon { display: grid; width: 40px; height: 42px; place-items: center; border-radius: 10px; background: var(--signal); color: var(--bg); font: 800 8px ui-monospace,monospace; }.resource-item strong,.resource-item small { display: block; }.resource-item strong { font-size: 10px; }.resource-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }.resource-item > button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.complete-bar { display: grid; grid-template-columns: 1fr 50px; gap: 8px; margin-top: 10px; }.complete-bar .primary-button { width: 100%; }.complete-bar .ghost-button { min-height: 50px; padding: 0; }.done-button { background: var(--success); }

.project-hero h2 { margin: 7px 0; font-size: 28px; letter-spacing: -.05em; }.project-hero > p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.project-form { display: grid; gap: 12px; margin-top: 10px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }.project-form .primary-button { width: 100%; }
.field-label { display: block; margin: 0 0 7px; color: var(--muted); font: 800 8px ui-monospace,monospace; letter-spacing: .1em; text-transform: uppercase; }
.text-input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: #090909; color: var(--text); font-size: 11px; }.text-input::placeholder { color: #58585b; }.text-area { min-height: 105px; padding-top: 13px; resize: vertical; line-height: 1.5; }
.milestone-list { display: grid; gap: 8px; }.milestone-card { display: grid; grid-template-columns: 43px 1fr 32px; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); text-align: left; cursor: pointer; }.mile-index { color: var(--muted); font: 800 9px ui-monospace,monospace; }.milestone-card strong,.milestone-card small { display: block; }.milestone-card strong { font-size: 12px; }.milestone-card small { margin-top: 4px; color: var(--muted); font-size: 9px; }.milestone-card i { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-style: normal; }.milestone-card.done { border-color: rgba(223,255,99,.35); background: var(--signal-soft); }.milestone-card.done i { border-color: var(--signal); background: var(--signal); color: var(--bg); }

.content-intro { max-width: 55ch; margin: -6px 4px 20px; color: var(--muted); font-size: 11px; line-height: 1.55; }.case-stack { display: grid; gap: 10px; }.case-card { position: relative; padding: 23px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }.case-card::after { content: attr(data-number); position: absolute; right: 15px; top: -14px; color: rgba(255,255,255,.035); font-size: 110px; font-weight: 900; letter-spacing: -.1em; }.case-card h2 { position: relative; z-index: 2; margin: 7px 0 9px; font-size: 34px; letter-spacing: -.06em; }.case-card > p:not(.section-kicker) { position: relative; z-index: 2; max-width: 48ch; color: var(--text-soft); font-size: 11px; line-height: 1.5; }.metric-row,.layer-row { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }.metric-row span,.layer-row span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 8px; }.metric-row span { border-color: rgba(223,255,99,.3); color: var(--signal); }.case-lesson { margin: 17px 0 0; padding-top: 17px; border-top: 1px solid var(--line); }

.profile-row { display: flex; align-items: center; gap: 13px; }.profile-avatar { display: grid; width: 55px; height: 55px; flex: 0 0 auto; place-items: center; border-radius: 17px; background: var(--signal); color: var(--bg); font-weight: 900; }.profile-row h2 { margin: 0; font-size: 19px; }.profile-row p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }.access-badge { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); font-size: 9px; }.access-badge span { color: var(--success); }.access-badge strong { color: var(--muted); }.track-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }.track-switch button { min-height: 45px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }.track-switch button.active { background: var(--text); color: var(--bg); }.settings-list { display: grid; gap: 8px; margin-top: 12px; }.settings-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: left; cursor: pointer; }.settings-button > span { display: flex; align-items: center; gap: 10px; }.settings-button i { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--signal); font-style: normal; }.settings-button strong,.settings-button small { display: block; }.settings-button strong { font-size: 10px; }.settings-button small { margin-top: 3px; color: var(--muted); font-size: 8px; }.settings-button b { color: var(--muted); }.buy-card { margin-top: 24px; background: linear-gradient(135deg,var(--surface-2),#090909); }.buy-card h3 { margin: 8px 0; font-size: 28px; letter-spacing: -.05em; }.buy-card > p:not(.section-kicker) { color: var(--muted); font-size: 10px; }.buy-card .primary-button { width: 100%; margin-top: 12px; }
.support-history { display: grid; gap: 9px; }.support-history-card { padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }.support-history-card > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.support-history-card strong { color: var(--signal); font-size: 9px; text-transform: uppercase; }.support-history-card time { color: var(--muted); font-size: 8px; }.support-history-card > p { margin: 10px 0; font-size: 10px; line-height: 1.55; }.support-history-card blockquote { margin: 11px 0 0; padding: 11px 12px; border-left: 2px solid var(--success); border-radius: 0 10px 10px 0; background: var(--surface-2); color: var(--text); font-size: 9px; line-height: 1.55; }.support-history-card blockquote span { display: block; margin-bottom: 5px; color: var(--success); font-size: 7px; font-weight: 900; text-transform: uppercase; }.support-history-card > small,.support-empty { display: block; color: var(--muted); font-size: 8px; line-height: 1.5; }.support-empty { padding: 24px 16px; border: 1px dashed var(--line); border-radius: 16px; text-align: center; }

.bottom-nav { position: fixed; z-index: 45; right: 10px; bottom: var(--safe-bottom); left: 10px; display: grid; grid-template-columns: repeat(5,1fr); width: min(calc(100% - 20px),760px); min-height: 67px; margin: auto; padding: 6px; border: 1px solid var(--line); border-radius: 22px; background: rgba(12,12,13,.88); box-shadow: 0 18px 45px rgba(0,0,0,.45); backdrop-filter: blur(24px); }.bottom-nav button { display: grid; gap: 2px; padding: 5px 2px; place-items: center; border: 0; border-radius: 15px; background: transparent; color: var(--muted); cursor: pointer; }.bottom-nav button.active { background: rgba(255,255,255,.08); color: var(--text); }.bottom-nav button.active .nav-icon { color: var(--signal); }.nav-icon { display: grid; width: 23px; height: 23px; place-items: center; }.nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.bottom-nav small { font-size: 7px; font-weight: 750; }

/* Landing */
.landing-page { min-height: 100vh; background: var(--bg); color: var(--text); }
.landing-nav { position: sticky; z-index: 70; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: calc(72px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) clamp(20px,4vw,64px) 0; border-bottom: 1px solid var(--line); background: rgba(5,5,5,.76); backdrop-filter: blur(24px); }
.landing-brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }.landing-brand > span:last-child { display: flex; align-items: baseline; gap: 6px; }.landing-brand strong { font-size: 12px; letter-spacing: -.03em; }.landing-brand small { color: var(--signal); font: 800 8px ui-monospace,monospace; letter-spacing: .16em; }
.landing-logo { position: relative; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; }.landing-logo i { position: absolute; width: 17px; height: 17px; border-top: 1px solid var(--signal); border-right: 1px solid var(--signal); transform: rotate(45deg); }.landing-logo i:nth-child(2) { width: 26px; height: 26px; border-color: var(--line); animation: logo-spin 12s linear infinite; }.landing-logo b { font: 700 7px ui-monospace,monospace; }.landing-nav nav { display: flex; align-items: center; gap: clamp(18px,3vw,42px); }.landing-nav nav button,.landing-footer > button { padding: 7px 0; border: 0; background: none; color: var(--muted); font-size: 10px; cursor: pointer; transition: color .3s ease; }.landing-nav nav button:hover,.landing-footer > button:hover { color: var(--text); }.nav-enter { justify-self: end; display: inline-flex; align-items: center; gap: 15px; min-height: 40px; padding: 0 17px; border: 1px solid var(--line-strong); border-radius: 99px; background: rgba(255,255,255,.04); font-size: 10px; font-weight: 800; cursor: pointer; }.nav-enter span { color: var(--signal); }
@keyframes logo-spin { to { transform: rotate(405deg); } }
.landing-main { overflow: hidden; }.landing-hero,.landing-section,.landing-final,.landing-footer { width: min(calc(100% - 40px),1280px); margin-inline: auto; }.landing-hero { position: relative; min-height: calc(100svh - 73px); padding: clamp(70px,9vw,138px) 0 34px; }.hero-signal { position: absolute; top: 28px; right: 0; display: flex; align-items: center; gap: 9px; color: var(--muted); font: 800 8px ui-monospace,monospace; letter-spacing: .1em; }.hero-signal i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px var(--signal-soft); animation: pulse 2.4s ease-in-out infinite; }.landing-hero-grid { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(380px,.88fr); align-items: center; gap: clamp(40px,7vw,100px); }.landing-hero-copy h1 { max-width: 920px; margin: 17px 0 27px; font-size: clamp(57px,7.2vw,112px); line-height: .85; letter-spacing: -.078em; font-weight: 760; }.landing-hero-copy h1 em,.landing-section-head h2 em,.landing-final h2 em { color: var(--signal); font-family: Georgia,serif; font-weight: 400; }.landing-lead { max-width: 610px; margin: 0; color: var(--text-soft); font-size: clamp(15px,1.35vw,19px); line-height: 1.55; }.landing-actions { display: flex; align-items: center; gap: 20px; margin-top: 35px; }.signal-button { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; min-height: 58px; padding: 0 23px; overflow: hidden; border: 0; border-radius: 99px; background: var(--signal); color: var(--bg); font-size: 11px; font-weight: 900; cursor: pointer; transition: transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease; }.signal-button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 20%,rgba(255,255,255,.7),transparent 55%); transform: translateX(-120%); animation: signal-shimmer 2.5s ease-in-out infinite; }.signal-button > * { position: relative; z-index: 2; }.signal-button:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(223,255,99,.16); }.signal-button span { font-size: 19px; }.text-button { display: inline-flex; align-items: center; gap: 12px; padding: 12px 0; border: 0; background: none; color: var(--muted); font-size: 10px; cursor: pointer; }.text-button span { color: var(--text); }.product-orbit { position: relative; justify-self: center; width: min(100%,470px); aspect-ratio: 1; }.orbit-line { position: absolute; inset: 7%; border: 1px solid var(--line); border-radius: 50%; animation: orbit-turn 28s linear infinite; }.orbit-line::after { content: ""; position: absolute; top: 9%; left: 10%; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 18px var(--signal); }.orbit-line-b { inset: 21%; border-style: dashed; animation-direction: reverse; animation-duration: 18s; }.orbit-line-b::after { top: auto; right: 8%; bottom: 14%; left: auto; width: 6px; height: 6px; background: var(--text); box-shadow: none; }.product-phone { position: absolute; top: 50%; left: 50%; width: 175px; height: 338px; overflow: hidden; border: 6px solid #020202; border-radius: 38px; box-shadow: 0 30px 90px rgba(0,0,0,.65); }.product-phone::before { content: ""; position: absolute; z-index: 3; top: 8px; left: 50%; width: 54px; height: 13px; border-radius: 99px; background: #030303; transform: translateX(-50%); }.phone-back { display: flex; padding: 42px 20px 20px; flex-direction: column; justify-content: flex-end; background: #27272b; transform: translate(-82%,-55%) rotate(-11deg); color: var(--muted); }.phone-back i { position: absolute; inset: 44px 14px auto; height: 110px; border-radius: 18px; background: repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px); }.phone-back b { color: var(--text); font-size: 29px; letter-spacing: -.06em; }.phone-back span { margin-top: 7px; font: 800 8px ui-monospace,monospace; }.phone-front { z-index: 2; display: flex; padding: 47px 19px 24px; flex-direction: column; background: linear-gradient(155deg,#1d1d20,#080809); transform: translate(-26%,-46%) rotate(8deg); }.phone-front > i { position: absolute; top: 35%; right: -35px; width: 135px; height: 135px; border: 1px solid rgba(223,255,99,.45); border-radius: 50%; box-shadow: inset 0 0 0 25px rgba(223,255,99,.035),inset 0 0 0 47px rgba(223,255,99,.035); }.phone-front > small { color: var(--muted); font: 800 7px ui-monospace,monospace; letter-spacing: .14em; }.phone-front > strong { position: relative; z-index: 2; margin-top: auto; font-size: 35px; line-height: .86; letter-spacing: -.07em; }.phone-progress { display: block; height: 4px; margin-top: 22px; border-radius: 99px; background: rgba(255,255,255,.1); }.phone-progress b { display: block; width: 20%; height: 100%; background: var(--signal); }.orbit-chip { position: absolute; z-index: 4; padding: 8px 11px; border: 1px solid var(--line); border-radius: 99px; background: rgba(10,10,10,.8); color: var(--muted); font: 800 7px ui-monospace,monospace; letter-spacing: .08em; backdrop-filter: blur(10px); }.chip-a { top: 17%; left: 2%; }.chip-b { right: 1%; bottom: 19%; }.orbit-core { position: absolute; z-index: 4; right: 10%; top: 15%; display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: var(--signal); color: var(--bg); font-size: 20px; animation: float 4s ease-in-out infinite; }.proof-rail { display: grid; grid-template-columns: repeat(4,1fr); margin-top: clamp(50px,8vw,100px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.proof-rail div { padding: 22px 18px; border-right: 1px solid var(--line); }.proof-rail div:last-child { border-right: 0; }.proof-rail strong { display: block; color: var(--signal); font: 400 clamp(27px,3vw,43px) Georgia,serif; letter-spacing: -.04em; }.proof-rail span { display: block; margin-top: 4px; color: var(--muted); font: 700 8px ui-monospace,monospace; text-transform: uppercase; }
@keyframes orbit-turn { to { transform: rotate(360deg); } } @keyframes float { 50% { transform: translateY(-10px) rotate(4deg); } } @keyframes pulse { 50% { opacity: .45; } } @keyframes signal-shimmer { 60%,100% { transform: translateX(120%); } }
.landing-section { padding: clamp(90px,11vw,165px) 0 0; }.landing-section-head { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr); align-items: end; gap: 60px; margin-bottom: 48px; }.landing-section-head h2 { margin: 14px 0 0; font-size: clamp(50px,6.3vw,92px); line-height: .9; letter-spacing: -.073em; }.landing-section-head > p:last-child,.program-heading > p { max-width: 490px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }.landing-section-head.compact { display: block; }.landing-video-shell { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); border: 1px solid var(--line); border-radius: 28px; background: var(--surface); overflow: hidden; }.landing-video-screen { position: relative; min-height: 610px; overflow: hidden; background: radial-gradient(circle at 65% 35%,rgba(223,255,99,.1),transparent 20%),#080808; }.video-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 64px 64px; opacity: .24; mask-image: radial-gradient(circle at center,black,transparent 80%); }.video-screen-copy { position: absolute; right: 42px; bottom: 40px; left: 42px; }.play-ring { display: grid; width: 70px; height: 70px; margin-bottom: 42px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--signal); font-size: 23px; }.video-screen-copy p { color: var(--signal); font: 800 8px ui-monospace,monospace; letter-spacing: .12em; }.video-screen-copy strong { display: block; margin-top: 12px; font-size: clamp(35px,4vw,62px); line-height: .92; letter-spacing: -.06em; }.video-screen-copy small { display: block; margin-top: 18px; color: var(--muted); font-size: 10px; }.video-chapters { display: grid; align-content: stretch; margin: 0; padding: 0; border-left: 1px solid var(--line); list-style: none; }.video-chapters li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 15px; padding: 24px; border-bottom: 1px solid var(--line); }.video-chapters li:last-child { border-bottom: 0; }.video-chapters span,.video-chapters i { color: var(--muted); font: 800 8px ui-monospace,monospace; font-style: normal; }.video-chapters p { margin: 0; font-size: 12px; line-height: 1.35; }
.module-system { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr); overflow:hidden; border:1px solid var(--line); border-radius:28px; background:var(--surface); }
.module-preview { position:relative; min-height:540px; overflow:hidden; border-right:1px solid var(--line); background:radial-gradient(circle at 64% 36%,rgba(223,255,99,.1),transparent 22%),#080808; }
.module-grid { position:absolute; inset:0; opacity:.22; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:58px 58px; mask-image:radial-gradient(circle at center,black,transparent 80%); }
.module-screen { position:absolute; inset:auto 34px 34px; display:flex; min-height:310px; padding:30px; flex-direction:column; justify-content:flex-end; border:1px solid var(--line); border-radius:20px; background:rgba(10,10,11,.72); backdrop-filter:blur(14px); }
.module-screen small,.module-screen i { color:var(--muted); font:800 8px ui-monospace,monospace; letter-spacing:.11em; font-style:normal; }
.module-screen strong { max-width:13ch; margin:22px 0 28px; font-size:clamp(32px,3.5vw,50px); line-height:.92; letter-spacing:-.06em; }
.module-screen i { color:var(--signal); }
.module-flow { display:grid; margin:0; padding:0; list-style:none; }
.module-flow li { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:16px; padding:25px; border-bottom:1px solid var(--line); }
.module-flow li:last-child { border-bottom:0; }
.module-flow > li > span { color:var(--signal); font:800 8px ui-monospace,monospace; }
.module-flow strong { display:block; margin-bottom:7px; font-size:15px; letter-spacing:-.025em; }
.module-flow p { margin:0; color:var(--muted); font-size:10px; line-height:1.55; }
.audience-switch { display: grid; grid-template-columns: 1fr 1fr; margin-top: 45px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.audience-switch button { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 20px; min-height: 104px; padding: 0 28px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: background .3s ease,color .3s ease; }.audience-switch button:last-child { border-right: 0; }.audience-switch button.active { background: var(--text); color: var(--bg); }.audience-switch button span { font: 800 8px ui-monospace,monospace; }.audience-switch button strong { font-size: clamp(18px,2vw,29px); letter-spacing: -.045em; }.audience-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(45px,10vw,150px); min-height: 420px; padding: 70px clamp(24px,5vw,70px); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 12% 20%,rgba(223,255,99,.06),transparent 28%); animation: page-in .32s cubic-bezier(.16,1,.3,1) both; }.audience-detail h3 { margin: 13px 0 0; font-size: clamp(39px,5vw,70px); line-height: .92; letter-spacing: -.065em; }.audience-detail > div:last-child > p { max-width: 50ch; margin: 28px 0; color: var(--text-soft); font-size: 15px; line-height: 1.6; }.audience-detail ul,.offer-copy ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.audience-detail li,.offer-copy li { padding: 13px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }.audience-detail li::before,.offer-copy li::before { content: "↗"; margin-right: 10px; color: var(--signal); }
.audience-cta { display:flex; align-items:center; justify-content:space-between; gap:28px; width:100%; min-height:56px; margin-top:28px; padding:0 20px; border:1px solid rgba(223,255,99,.34); border-radius:99px; background:var(--signal-soft); color:var(--text); font-size:10px; font-weight:900; cursor:pointer; transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s ease; }.audience-cta:hover { transform:translateY(-3px); background:rgba(223,255,99,.18); }.audience-cta span { color:var(--signal); font-size:18px; }
.shared-core-note { margin:0; padding:18px clamp(24px,5vw,70px); border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.6; text-align:center; }
.program-heading > div { min-width: 0; }.program-list { border-top: 1px solid var(--line); }.program-item { border-bottom: 1px solid var(--line); }.program-item > button { display: grid; grid-template-columns: 70px minmax(0,1fr) 46px; align-items: center; gap: 25px; width: 100%; min-height: 116px; padding: 18px 10px; border: 0; background: transparent; text-align: left; cursor: pointer; }.program-number { color: var(--muted); font: 400 22px Georgia,serif; }.program-title small,.program-title strong { display: block; }.program-title small { margin-bottom: 7px; color: var(--muted); font: 800 8px ui-monospace,monospace; letter-spacing: .1em; }.program-title strong { font-size: clamp(20px,2.5vw,36px); line-height: 1.08; letter-spacing: -.045em; }.program-item > button > i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 20px; font-style: normal; transition: background .3s ease,color .3s ease; }.program-item.open > button > i { background: var(--signal); color: var(--bg); border-color: var(--signal); }.program-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.16,1,.3,1); }.program-body > div { overflow: hidden; }.program-item.open .program-body { grid-template-rows: 1fr; }.program-body > div { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; padding: 0 81px 0 105px; }.program-item.open .program-body > div { padding-bottom: 35px; }.program-body p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.65; }.program-body ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.program-body li { color: var(--muted); font-size: 10px; }.program-body li::before { content: "·"; margin-right: 9px; color: var(--signal); }.video-pending,.module-output { grid-column: 1/-1; color: var(--muted); font: 800 8px ui-monospace,monospace; letter-spacing: .1em; }.module-output { color:var(--signal); }
.result-stage { display: grid; grid-template-columns: minmax(230px,.34fr) minmax(0,.66fr); min-height: 660px; margin-top: 45px; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }.result-nav { display: grid; border-right: 1px solid var(--line); }.result-nav button { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; padding: 0 25px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; cursor: pointer; }.result-nav button:last-child { border-bottom: 0; }.result-nav button.active { background: var(--signal); color: var(--bg); }.result-nav span { font: 800 8px ui-monospace,monospace; }.result-nav strong { font-size: 13px; }.result-display { position: relative; display: grid; grid-template-columns: minmax(260px,.9fr) minmax(230px,.6fr); align-items: center; gap: clamp(28px,5vw,70px); padding: clamp(34px,6vw,80px); background: radial-gradient(circle at 28% 40%,rgba(223,255,99,.08),transparent 32%),var(--surface); animation: page-in .32s cubic-bezier(.16,1,.3,1) both; }.result-counter { position: absolute; top: 25px; right: 28px; color: var(--muted); font: 800 8px ui-monospace,monospace; }.result-window { position: relative; min-height: 360px; padding: 42px 24px 24px; border: 5px solid #030303; border-radius: 25px; background: linear-gradient(145deg,#2a2a2e,#0b0b0c); box-shadow: 0 30px 80px rgba(0,0,0,.45); transform: rotate(-2deg); }.result-window > span { position: absolute; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: #5b5b5f; }.result-window > span:nth-child(1) { left: 17px; }.result-window > span:nth-child(2) { left: 29px; }.result-window > span:nth-child(3) { left: 41px; }.result-window > div { display: flex; height: 100%; padding: 24px; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: 16px; background: repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 9px); }.result-window small { color: var(--signal); font: 800 8px ui-monospace,monospace; }.result-window strong { margin-top: 12px; font-size: 27px; line-height: 1.05; letter-spacing: -.05em; }.result-window i { margin-top: 25px; color: var(--muted); font: 800 8px ui-monospace,monospace; font-style: normal; }.result-display > div:last-child h3 { margin: 11px 0 15px; font-size: clamp(35px,4vw,58px); letter-spacing: -.06em; }.result-display > div:last-child > p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.landing-case-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.landing-case-card { position: relative; min-height: 535px; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(150deg,var(--surface-2),#080808 72%); transition: transform .35s cubic-bezier(.16,1,.3,1),border-color .35s ease; }.landing-case-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }.landing-case-card::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 230px; height: 230px; border: 1px solid rgba(223,255,99,.18); border-radius: 50%; box-shadow: inset 0 0 0 35px rgba(223,255,99,.02),inset 0 0 0 70px rgba(223,255,99,.02); }.case-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--muted); font: 800 8px ui-monospace,monospace; letter-spacing: .08em; }.case-top span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }.case-top i { max-width: 70%; text-align: right; font-style: normal; }.landing-case-card h3 { margin: 60px 0 12px; font-size: clamp(31px,3vw,47px); letter-spacing: -.06em; }.landing-case-card > p { min-height: 50px; margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.5; }.case-metrics { display: grid; gap: 7px; margin-top: 28px; }.case-metrics span { padding: 10px 11px; border: 1px solid rgba(223,255,99,.24); border-radius: 10px; color: var(--signal); font: 800 8px ui-monospace,monospace; }.case-flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 21px; }.case-flow span { color: var(--muted); font-size: 8px; }.landing-case-card > small { position: absolute; z-index: 2; right: 25px; bottom: 25px; left: 25px; display: block; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.5; }
.case-proof-note { display:grid; grid-template-columns:minmax(210px,.4fr) minmax(0,.6fr); gap:40px; margin-top:12px; padding:24px 26px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.case-proof-note span { color:var(--muted); font:800 8px ui-monospace,monospace; letter-spacing:.1em; }
.case-proof-note span i { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--signal); }
.case-proof-note p { max-width:650px; margin:0; color:var(--text-soft); font-size:11px; line-height:1.55; }
.proof-empty { position: relative; display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; min-height: 480px; padding: clamp(35px,7vw,90px); overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle at 12% 40%,rgba(223,255,99,.08),transparent 24%),var(--surface); }.quote-mark { color: var(--signal); font: 130px/1 Georgia,serif; }.proof-empty h2 { margin: 14px 0 18px; font-size: clamp(39px,5.3vw,76px); line-height: .92; letter-spacing: -.067em; }.proof-empty div > p:last-child { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }.proof-status { position: absolute; right: 30px; bottom: 25px; color: var(--muted); font: 800 8px ui-monospace,monospace; letter-spacing: .1em; }.proof-status i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--signal); }
.offer-card { position: relative; display: grid; grid-template-columns: 1fr minmax(330px,.5fr); min-height: 570px; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); }.offer-card::before { content: ""; position: absolute; inset: 0 40% 0 0; background: radial-gradient(circle at 25% 45%,rgba(223,255,99,.09),transparent 28%); pointer-events: none; }.offer-copy { position: relative; padding: clamp(40px,7vw,90px); }.offer-copy h2 { margin: 14px 0 22px; font-size: clamp(46px,5.5vw,79px); line-height: .9; letter-spacing: -.07em; }.offer-copy > p:not(.mono-label) { max-width: 560px; margin: 0 0 35px; color: var(--text-soft); font-size: 14px; line-height: 1.6; }.offer-copy ul { max-width: 550px; }.offer-price { position: relative; display: flex; padding: 50px; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); background: var(--signal); color: var(--bg); }.offer-price > span { font: 900 8px ui-monospace,monospace; letter-spacing: .12em; }.offer-price > strong { display: block; margin: 20px 0 8px; font: 400 clamp(95px,11vw,165px)/.8 Georgia,serif; letter-spacing: -.08em; }.offer-price > strong small { font-size: .28em; vertical-align: top; }.offer-price > p { margin: 10px 0 35px; color: rgba(5,5,5,.58); font-size: 10px; line-height:1.5; }.offer-price .signal-button { background: var(--bg); color: var(--text); }.offer-demo > strong { font-size:clamp(62px,7vw,104px); letter-spacing:-.065em; }.signal-button.wide { width: 100%; }.offer-login { margin-top: 15px; padding: 8px 0; border: 0; background: none; color: rgba(5,5,5,.62); font-size: 9px; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.format-heading { margin-bottom: 38px; }
.format-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 12px; align-items: stretch; }
.format-card { position: relative; display: flex; min-height: 690px; padding: clamp(30px,4.5vw,58px); overflow: hidden; flex-direction: column; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(150deg,var(--surface-2),#090909 72%); }
.format-card::after { content: ""; position: absolute; z-index: 0; right: -120px; bottom: -150px; width: 390px; height: 390px; border: 1px solid var(--line); border-radius: 50%; box-shadow: inset 0 0 0 58px rgba(255,255,255,.012),inset 0 0 0 116px rgba(255,255,255,.012); pointer-events: none; }
.format-card > * { position: relative; z-index: 1; }
.format-personal { border-color: rgba(223,255,99,.38); background: radial-gradient(circle at 88% 8%,rgba(223,255,99,.13),transparent 24%),linear-gradient(145deg,#171910,#080808 70%); box-shadow: 0 28px 90px rgba(0,0,0,.25); }
.format-personal::after { border-color: rgba(223,255,99,.22); box-shadow: inset 0 0 0 58px rgba(223,255,99,.025),inset 0 0 0 116px rgba(223,255,99,.025); }
.format-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px; }
.format-top span,.format-top i { color: var(--muted); font: 800 8px ui-monospace,monospace; letter-spacing: .1em; font-style: normal; }
.format-personal .format-top i { padding: 9px 11px; border-radius: 99px; background: var(--signal); color: var(--bg); }
.format-card h3 { margin: clamp(48px,6vw,78px) 0 22px; font-size: clamp(46px,5.4vw,76px); line-height: .87; letter-spacing: -.072em; }
.format-card > p { max-width: 56ch; margin: 0 0 30px; color: var(--text-soft); font-size: 13px; line-height: 1.65; }
.format-card ul { display: grid; margin: 0; padding: 0; list-style: none; }
.format-card li { padding: 13px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.45; }
.format-card li::before { content: "↗"; margin-right: 10px; color: var(--signal); }
.format-price { display: grid; gap: 7px; margin-top: auto; padding: 34px 0 24px; }
.format-price small,.format-price span { color: var(--muted); font: 800 8px ui-monospace,monospace; letter-spacing: .09em; }
.format-price strong { max-width: 15ch; font-size: clamp(23px,2.6vw,38px); line-height: 1; letter-spacing: -.05em; }
.format-personal .format-price strong { color: var(--signal); font: 400 clamp(42px,4.8vw,68px)/.9 Georgia,serif; }
.format-button { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 58px; padding: 0 21px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 900; cursor: pointer; transition: transform .3s cubic-bezier(.16,1,.3,1),background .3s ease; }
.format-button:hover { transform: translateY(-3px); }
.format-button span { font-size: 18px; }
.format-personal .format-button { border-color: var(--signal); background: var(--signal); }
.format-note { max-width: 840px; margin: 18px auto 0; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: center; }
.faq-section { display: grid; grid-template-columns: minmax(260px,.45fr) minmax(0,.55fr); gap: clamp(40px,8vw,120px); }.faq-list { border-top: 1px solid var(--line); }.faq-item { border-bottom: 1px solid var(--line); }.faq-item > button { display: grid; grid-template-columns: 35px 1fr 35px; align-items: center; gap: 15px; width: 100%; min-height: 92px; padding: 15px 0; border: 0; background: none; text-align: left; cursor: pointer; }.faq-item > button span,.faq-item > button i { color: var(--muted); font: 800 8px ui-monospace,monospace; font-style: normal; }.faq-item > button i { font-size: 17px; }.faq-item > button strong { font-size: 14px; }.faq-item > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1); }.faq-item > div > p { min-height: 0; margin: 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.65; }.faq-item.open > div { grid-template-rows: 1fr; }.faq-item.open > div > p { padding: 0 50px 26px; }.faq-item.open > button i { color: var(--signal); }
.landing-final { position: relative; display: grid; min-height: 600px; padding: clamp(70px,10vw,130px) 0; place-content: center; justify-items: center; text-align: center; }.landing-final h2 { margin: 17px 0 35px; font-size: clamp(53px,8.2vw,120px); line-height: .87; letter-spacing: -.078em; }.final-orbit { position: absolute; left: 50%; top: 48%; width: min(70vw,720px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }.final-orbit i { position: absolute; inset: 13%; border: 1px dashed var(--line); border-radius: 50%; }.final-orbit i:nth-child(2) { inset: 29%; border-style: solid; }.final-orbit b { position: absolute; right: 10%; top: 16%; display: grid; width: 55px; height: 55px; place-items: center; border-radius: 50%; background: var(--signal); color: var(--bg); font-size: 20px; animation: float 4s ease-in-out infinite; }.landing-final > *:not(.final-orbit) { position: relative; z-index: 2; }.landing-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 120px; border-top: 1px solid var(--line); }.landing-footer p { color: var(--muted); font-size: 9px; }.landing-mobile-dock { display: none; }

/* Dialogs */
dialog { color: var(--text); }.onboarding,.modal { width: min(calc(100% - 24px),530px); margin: auto; padding: 28px; border: 1px solid var(--line-strong); border-radius: 27px; background: #101012; box-shadow: 0 35px 110px rgba(0,0,0,.7); }.onboarding::backdrop,.modal::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(7px); }.onboarding { max-height: calc(100dvh - 30px); overflow: auto; }.onboarding-visual { position: relative; height: 160px; margin: -10px 0 18px; overflow: hidden; }.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%,-50%); }.orbit-one { width: 220px; height: 120px; transform: translate(-50%,-50%) rotate(12deg); }.orbit-two { width: 160px; height: 160px; border-style: dashed; }.phone-stack { position: absolute; left: 50%; top: 50%; display: grid; width: 70px; height: 115px; place-items: center; border: 4px solid #030303; border-radius: 17px; background: var(--surface-3); transform: translate(-50%,-50%) rotate(5deg); box-shadow: 0 20px 45px rgba(0,0,0,.4); }.phone-stack i { position: absolute; width: 36px; height: 53px; border: 1px solid var(--line-strong); border-radius: 8px; transform: rotate(-10deg) translateX(-15px); }.phone-stack i:nth-child(2) { background: var(--signal); transform: rotate(8deg) translateX(15px); }.phone-stack i:nth-child(3) { background: var(--surface); transform: none; }.phone-stack b { z-index: 2; font: 800 8px ui-monospace,monospace; }.onboarding h2,.modal h2 { margin: 9px 0 13px; font-size: clamp(35px,9vw,50px); line-height: .94; letter-spacing: -.065em; }.dialog-lead,.modal > p { margin: 0 0 21px; color: var(--muted); font-size: 11px; line-height: 1.55; }.track-options { display: grid; gap: 8px; }.track-options button { display: grid; grid-template-columns: 37px 1fr 25px; align-items: center; gap: 10px; min-height: 69px; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); text-align: left; cursor: pointer; }.option-index { color: var(--signal); font: 800 8px ui-monospace,monospace; }.track-options strong,.track-options small { display: block; }.track-options strong { font-size: 11px; }.track-options small { margin-top: 4px; color: var(--muted); font-size: 8px; }.track-options i { color: var(--signal); font-style: normal; }.microcopy,.safe-note { margin: 12px 0 0 !important; color: #69696d !important; font-size: 8px !important; text-align: center; }.modal { position: relative; }.modal-close { position: absolute; right: 15px; top: 15px; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }.access-plan-options { display:grid; gap:7px; margin:18px 0 20px; }.access-plan-options button { display:grid; grid-template-columns:1fr 20px; align-items:center; gap:10px; min-height:70px; padding:12px 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); text-align:left; cursor:pointer; }.access-plan-options strong,.access-plan-options small { display:block; }.access-plan-options strong { font-size:11px; }.access-plan-options small { margin-top:4px; color:var(--muted); font-size:8px; line-height:1.45; }.access-plan-options i { display:grid; width:17px; height:17px; place-items:center; border:1px solid var(--line-strong); border-radius:50%; }.access-plan-options button.active { border-color:rgba(223,255,99,.45); background:var(--signal-soft); }.access-plan-options button.active i { border:5px solid var(--signal); }.price-card { display: grid; grid-template-columns: 1fr auto; align-items: end; margin: 18px 0; padding: 17px; border: 1px solid rgba(223,255,99,.28); border-radius: 16px; background: var(--signal-soft); }.price-card span,.price-card small { color: var(--muted); font: 800 8px ui-monospace,monospace; text-transform: uppercase; }.price-card strong { grid-row: 1 / span 2; grid-column: 2; color: var(--signal); font: 38px Georgia,serif; }.modal .primary-button { width: 100%; margin-top: 10px; }.toast { position: fixed; z-index: 100; right: 14px; bottom: calc(94px + var(--safe-bottom)); left: 14px; max-width: 440px; margin: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 800; text-align: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease,transform .25s ease; }.toast.show { opacity: 1; transform: none; }

@media (min-width: 700px) {
  .top-progress { display: flex; }
  #app { padding-inline: 20px; }
}
@media (max-width: 980px) {
  .landing-hero-grid { grid-template-columns: 1fr; }
  .landing-hero-copy { position: relative; z-index: 3; }
  .product-orbit { position: absolute; z-index: 1; right: -130px; top: 90px; width: 470px; opacity: .46; }
  .landing-hero-copy h1 { max-width: 780px; }
  .landing-video-shell { grid-template-columns: 1fr; }.landing-video-screen { min-height: 520px; }.video-chapters { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 0; }.video-chapters li:nth-child(odd) { border-right: 1px solid var(--line); }
  .module-system { grid-template-columns:1fr; }.module-preview { min-height:470px; border-right:0; border-bottom:1px solid var(--line); }.module-flow { grid-template-columns:1fr 1fr; }.module-flow li:nth-child(odd) { border-right:1px solid var(--line); }
  .landing-case-grid { grid-template-columns: 1fr 1fr; }.landing-case-card:last-child { grid-column: 1/-1; min-height: 480px; }
  .result-display { grid-template-columns: 1fr; }.result-window { min-height: 300px; }
  .faq-section { grid-template-columns: 1fr; }
  .format-grid { grid-template-columns: 1fr; }
  .format-card { min-height: 650px; }
}
@media (max-width: 720px) {
  .landing-nav { grid-template-columns: 1fr auto; min-height: calc(62px + env(safe-area-inset-top)); padding-inline: 16px; }.landing-nav nav { display: none; }.nav-enter { min-height: 36px; padding-inline: 14px; }.landing-hero,.landing-section,.landing-final,.landing-footer { width: min(calc(100% - 28px),1280px); }.landing-hero { min-height: calc(100svh - 63px); padding-top: 85px; }.hero-signal { top: 18px; right: auto; left: 0; }.landing-hero-copy h1 { font-size: clamp(50px,14vw,72px); }.landing-lead { max-width: 92%; font-size: 14px; }.landing-actions { align-items: flex-start; flex-direction: column; gap: 4px; }.signal-button { min-height: 54px; }.product-orbit { right: -220px; top: 130px; width: 430px; opacity: .18; }.proof-rail { grid-template-columns: 1fr 1fr; }.proof-rail div:nth-child(2) { border-right: 0; }.proof-rail div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .landing-section { padding-top: 90px; }.landing-section-head,.landing-section-head.program-heading { display: block; margin-bottom: 30px; }.landing-section-head h2 { font-size: clamp(46px,12vw,66px); }.landing-section-head > p:last-child,.program-heading > p { margin-top: 20px; font-size: 11px; }
  .landing-video-shell { border-radius: 20px; }.landing-video-screen { min-height: 460px; }.video-screen-copy { right: 22px; bottom: 24px; left: 22px; }.video-screen-copy strong { font-size: 37px; }.video-chapters { grid-template-columns: 1fr; }.video-chapters li:nth-child(odd) { border-right: 0; }
  .module-system { border-radius:20px; }.module-preview { min-height:340px; }.module-screen { inset:auto 18px 18px; min-height:240px; padding:22px; }.module-screen strong { font-size:35px; }.module-flow { grid-template-columns:1fr 1fr; }.module-flow li { min-height:145px; padding:18px; }.module-flow li:nth-child(odd) { border-right:1px solid var(--line); }
  .audience-switch button { grid-template-columns: 27px 1fr; min-height: 88px; padding: 12px; }.audience-switch button strong { font-size: 14px; }.audience-detail { grid-template-columns: 1fr; gap: 25px; min-height: auto; padding: 38px 20px; }.audience-detail h3 { font-size: 45px; }.audience-detail > div:last-child > p { margin-top: 0; font-size: 12px; }.shared-core-note { padding:16px 20px; text-align:left; }
  .program-item > button { grid-template-columns: 40px minmax(0,1fr) 35px; gap: 10px; min-height: 102px; padding-inline: 0; }.program-number { font-size: 17px; }.program-title strong { font-size: 18px; }.program-item > button > i { width: 34px; height: 34px; }.program-body > div { grid-template-columns: 1fr; gap: 20px; padding: 0 0 0 50px; }.program-item.open .program-body > div { padding-bottom: 28px; }
  .result-stage { grid-template-columns: 1fr; min-height: 0; border-radius: 20px; }.result-nav { grid-template-columns: repeat(6,1fr); border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }.result-nav button { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 5px; min-width: 74px; min-height: 70px; padding: 8px 5px; border-right: 1px solid var(--line); border-bottom: 0; text-align: center; }.result-nav strong { font-size: 9px; }.result-display { padding: 50px 20px 30px; }.result-window { min-height: 280px; }.result-display > div:last-child h3 { font-size: 42px; }
  .landing-case-grid { display:flex; gap:10px; margin-right:-14px; padding-right:36px; padding-bottom:5px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }.landing-case-grid::-webkit-scrollbar { display:none; }.landing-case-card,.landing-case-card:last-child { grid-column:auto; min-width:0; min-height:500px; flex:0 0 86%; scroll-snap-align:start; }.case-proof-note { grid-template-columns:1fr; gap:10px; padding:20px; }
  .proof-empty { grid-template-columns: 1fr; min-height: 560px; padding: 28px; align-content: center; }.quote-mark { font-size: 90px; line-height: .55; }.proof-empty h2 { font-size: 44px; }.proof-status { right: 28px; bottom: 24px; }
  .offer-card { grid-template-columns: 1fr; border-radius: 22px; }.offer-copy { padding: 35px 24px 45px; }.offer-copy h2 { font-size: 49px; }.offer-price { padding: 35px 24px; border-top: 1px solid var(--line); border-left: 0; }.offer-price > strong { font-size: 115px; }.offer-demo > strong { font-size:72px; }.format-card { min-height:0; padding:28px 22px; border-radius:22px; }.format-top { align-items:flex-start; flex-direction:column; gap:10px; }.format-card h3 { margin:50px 0 20px; font-size:49px; }.format-card > p { font-size:11px; }.format-price { margin-top:38px; }.format-price strong { font-size:27px; }.format-personal .format-price strong { font-size:47px; }.format-note { text-align:left; }.faq-item > button strong { font-size: 12px; }.faq-item.open > div > p { padding-left: 50px; padding-right: 10px; }
  .landing-final { min-height: 540px; }.landing-final h2 { font-size: 51px; }.final-orbit { width: 150vw; }.landing-footer { padding-bottom: 95px; flex-wrap: wrap; }.landing-footer p { order: 3; width: 100%; }.landing-mobile-dock { position: fixed; z-index: 65; right: 10px; bottom: var(--safe-bottom); left: 10px; display: block; }.landing-mobile-dock button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 20px; border: 0; border-radius: 99px; background: var(--signal); color: var(--bg); font-size: 11px; font-weight: 900; box-shadow: 0 20px 45px rgba(0,0,0,.5); }
  .lesson-list.two-column { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hero-card { min-height: 410px; }.hero-copy { width: 80%; }.hero-stage { right: -75px; opacity: .56; }.hero-actions { align-items: stretch; flex-direction: column; }.hero-actions .primary-button,.hero-actions .secondary-button { width: 100%; }.stat-card { padding: 13px 10px; }.stat-card strong { font-size: 20px; }.next-card { grid-template-columns: 52px minmax(0,1fr) 32px; gap: 10px; padding: 12px; }.next-number { width: 52px; height: 61px; }.next-card p { display: none; }.video-slot { min-height: 460px; padding: 17px; }.slot-top { align-items: flex-start; flex-direction: column; }.video-slot h1 { margin-top: 48px; }.video-empty { right: 16px; bottom: 16px; left: 16px; }.lesson-outcome { grid-template-columns: 1fr; gap: 8px; }.content-card { padding: 17px; }.complete-bar { position: sticky; z-index: 21; bottom: calc(80px + var(--safe-bottom)); padding: 7px 0; background: linear-gradient(transparent,var(--bg) 22%); }.onboarding,.modal { padding: 22px; }.track-options button { min-height:86px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Agency landing */
.agency-page {
  --agency-width: min(calc(100% - 48px), 1320px);
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 11%, rgba(223,255,99,.075), transparent 23%),
    radial-gradient(circle at 12% 46%, rgba(111,92,255,.045), transparent 22%),
    var(--bg);
  color: var(--text);
}
.agency-page a { color: inherit; text-decoration: none; }
.agency-page a:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.agency-page .mono-label i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 5px var(--signal-soft); }
.agency-page h1,.agency-page h2,.agency-page h3 { text-wrap: balance; }
.agency-page em { color:var(--signal); font-family:Georgia,serif; font-weight:400; font-style:italic; }

.agency-nav {
  position: sticky;
  z-index: 70;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: calc(72px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(24px,calc((100vw - 1320px)/2)) 0;
  border-bottom: 1px solid var(--line);
  background: rgba(5,5,5,.82);
  backdrop-filter: blur(24px);
}
.agency-brand { display:inline-flex; align-items:center; gap:11px; width:max-content; padding:0; border:0; background:none; cursor:pointer; text-align:left; }
.agency-brand > span:last-child { display:flex; align-items:baseline; gap:6px; }
.agency-brand strong { font-size:12px; letter-spacing:-.035em; }
.agency-brand small { padding:4px 6px; border-radius:5px; background:var(--text); color:var(--bg); font-size:7px; font-weight:900; letter-spacing:.14em; }
.agency-logo { position:relative; display:grid; width:31px; height:31px; place-items:center; }
.agency-logo i { position:absolute; width:17px; height:25px; border:1px solid var(--line-strong); border-radius:6px; background:#0b0b0c; transform:rotate(-13deg) translateX(-5px); }
.agency-logo i:nth-child(2) { border-color:var(--signal); background:var(--signal); transform:rotate(13deg) translateX(5px); }
.agency-logo b { z-index:2; color:var(--bg); font:900 6px ui-monospace,monospace; transform:translateX(5px); }
.agency-nav nav { display:flex; align-items:center; gap:30px; }
.agency-nav nav button,.agency-learn-link { padding:8px 0; border:0; background:none; color:var(--muted); font-size:9px; font-weight:850; cursor:pointer; transition:color .25s ease; }
.agency-nav nav button:hover,.agency-learn-link:hover { color:var(--text); }
.agency-nav-actions { display:flex; align-items:center; justify-content:flex-end; gap:18px; }
.agency-nav-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:18px; min-height:44px; padding:0 17px; border-radius:99px; background:var(--signal); color:var(--bg)!important; font-size:9px; font-weight:900; }
.agency-nav-cta span { font-size:14px; }

.agency-main { width:100%; }
.agency-hero,.agency-section,.agency-final,.agency-footer { width:var(--agency-width); margin:0 auto; }
.agency-hero { position:relative; min-height:calc(100svh - 72px); padding:clamp(84px,9vw,138px) 0 0; }
.agency-hero::before { content:""; position:absolute; z-index:0; top:25px; right:0; width:52%; height:76%; border:1px solid rgba(255,255,255,.04); border-radius:50%; transform:rotate(-9deg); pointer-events:none; }
.agency-hero-copy { position:relative; z-index:3; width:min(62%,780px); }
.agency-hero-copy h1 { margin:20px 0 26px; font-size:clamp(64px,7.25vw,111px); line-height:.84; letter-spacing:-.078em; }
.agency-hero-copy h1 em { display:inline-block; margin-top:10px; font-size:.82em; }
.agency-lead { max-width:660px; margin:0; color:var(--text-soft); font-size:clamp(14px,1.25vw,18px); line-height:1.62; }
.agency-actions { display:flex; align-items:center; gap:10px; margin-top:34px; }
.agency-button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:58px; padding:0 23px; border:1px solid transparent; border-radius:99px; font-size:10px; font-weight:900; cursor:pointer; transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s ease,border-color .3s ease; }
.agency-button:hover { transform:translateY(-3px); }
.agency-button span { font-size:18px; }
.agency-button-primary { background:var(--signal); color:var(--bg)!important; }
.agency-button-ghost { border-color:var(--line-strong); background:rgba(255,255,255,.035); color:var(--text); }
.agency-button-dark { width:100%; border-color:#050505; background:#050505; color:var(--text)!important; }
.agency-micro { max-width:570px; margin:17px 0 0; color:#6f6f73; font-size:9px; line-height:1.55; }

.agency-demo { position:absolute; z-index:2; top:clamp(75px,8vw,120px); right:-38px; width:min(47vw,590px); height:590px; overflow:hidden; border:1px solid var(--line); border-radius:36px; background:linear-gradient(145deg,#171719,#09090a 72%); box-shadow:0 45px 140px rgba(0,0,0,.45); }
.agency-demo::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(to bottom,black,transparent 82%); opacity:.65; }
.demo-caption { position:absolute; z-index:4; top:18px; right:22px; left:22px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font:800 7px ui-monospace,monospace; letter-spacing:.09em; }
.demo-caption i { color:var(--signal); font-style:normal; }
.demo-caption b { color:var(--text); }
.demo-channel { position:absolute; z-index:3; top:105px; left:26px; width:245px; height:370px; padding:17px; border:1px solid var(--line-strong); border-radius:24px; background:rgba(16,16,18,.94); transform:rotate(-5deg); box-shadow:0 28px 70px rgba(0,0,0,.48); }
.demo-channel-head { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:9px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.demo-avatar { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; background:#2481cc; color:white; font-size:9px; font-weight:900; }
.demo-channel-head strong,.demo-channel-head small { display:block; }
.demo-channel-head strong { font-size:10px; }.demo-channel-head small { margin-top:3px; color:var(--muted); font-size:7px; }.demo-channel-head > i { color:var(--muted); font-size:8px; font-style:normal; }
.demo-post { display:grid; grid-template-columns:68px 1fr; gap:10px; margin-top:13px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.demo-post > span { height:68px; border-radius:11px; background:linear-gradient(145deg,#a8a39b,#353438); }
.demo-post:nth-of-type(3) > span { background:linear-gradient(145deg,#6d7151,#20231b); }.demo-post:nth-of-type(4) > span { background:linear-gradient(145deg,#8f8176,#302a27); }
.demo-post div { display:grid; align-content:center; gap:7px; }.demo-post b { display:block; height:6px; border-radius:9px; background:rgba(255,255,255,.18); }.demo-post b:nth-child(2) { width:80%; }.demo-post b:nth-child(3) { width:45%; background:rgba(223,255,99,.5); }.demo-post.faded { opacity:.45; }
.demo-phone { position:absolute; z-index:5; right:31px; bottom:39px; width:245px; height:465px; padding:27px 15px 18px; overflow:hidden; border:6px solid #030303; border-radius:39px; background:#f3f0e9; color:#121212; transform:rotate(6deg); box-shadow:0 35px 90px rgba(0,0,0,.56); }
.demo-phone::before { content:""; position:absolute; top:8px; left:50%; width:70px; height:13px; border-radius:99px; background:#030303; transform:translateX(-50%); }
.demo-phone-head { display:grid; grid-template-columns:22px 1fr 22px; align-items:center; min-height:35px; color:#121212; font-size:8px; font-weight:900; text-align:center; }.demo-phone-head i { width:20px; height:20px; border:5px solid #111; border-radius:50%; }.demo-phone-head b { font-size:16px; }
.demo-phone-hero { position:relative; min-height:168px; padding:20px; overflow:hidden; border-radius:21px; background:#dfff63; }.demo-phone-hero::after { content:""; position:absolute; right:-28px; bottom:-35px; width:130px; height:160px; border:1px solid rgba(5,5,5,.25); border-radius:40% 40% 8px 8px; transform:rotate(13deg); box-shadow:inset 0 0 0 24px rgba(5,5,5,.06); }.demo-phone-hero small { font-size:6px; font-weight:900; letter-spacing:.12em; }.demo-phone-hero strong { position:relative; z-index:2; display:block; margin-top:18px; font-size:29px; line-height:.84; letter-spacing:-.065em; }
.demo-products { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }.demo-products > span { display:grid; padding:7px; border-radius:13px; background:white; box-shadow:0 7px 20px rgba(0,0,0,.06); }.demo-products i { height:76px; border-radius:9px; background:linear-gradient(140deg,#c9c2b8,#77706a); }.demo-products span:nth-child(2) i { background:linear-gradient(140deg,#cbd09e,#68694e); }.demo-products b { margin-top:7px; font-size:7px; }.demo-products small { margin-top:4px; color:#797979; font-size:5px; }
.demo-phone-nav { position:absolute; right:15px; bottom:12px; left:15px; display:flex; justify-content:space-around; padding-top:11px; border-top:1px solid rgba(0,0,0,.1); }.demo-phone-nav i { width:13px; height:5px; border-radius:99px; background:#a3a3a3; }.demo-phone-nav i:first-child { background:#111; }
.demo-transform { position:absolute; z-index:8; top:265px; left:49%; display:grid; width:76px; height:76px; place-items:center; border:1px solid rgba(223,255,99,.4); border-radius:50%; background:#090909; transform:translate(-50%,-50%); box-shadow:0 0 0 13px rgba(223,255,99,.06),0 25px 55px rgba(0,0,0,.5); }.demo-transform span { color:var(--signal); font:900 13px ui-monospace,monospace; }.demo-transform i { position:absolute; inset:10px; border:1px dashed rgba(223,255,99,.35); border-radius:50%; animation:agency-spin 12s linear infinite; }.demo-transform b { position:absolute; right:-8px; bottom:3px; display:grid; width:25px; height:25px; place-items:center; border-radius:50%; background:var(--signal); color:#050505; font-size:12px; }
.demo-orbit { position:absolute; right:-90px; top:75px; width:320px; height:320px; border:1px solid rgba(223,255,99,.16); border-radius:50%; box-shadow:inset 0 0 0 58px rgba(223,255,99,.015),inset 0 0 0 116px rgba(223,255,99,.015); }
@keyframes agency-spin { to { transform:rotate(360deg); } }

.agency-facts { position:relative; z-index:9; display:grid; grid-template-columns:repeat(4,1fr); width:100%; margin-top:clamp(76px,10vw,150px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(5,5,5,.72); backdrop-filter:blur(14px); }
.agency-facts div { min-height:106px; padding:23px; border-right:1px solid var(--line); }.agency-facts div:last-child { border-right:0; }.agency-facts strong,.agency-facts span { display:block; }.agency-facts strong { color:var(--signal); font:400 clamp(25px,2.5vw,38px) Georgia,serif; letter-spacing:-.05em; }.agency-facts span { margin-top:8px; color:var(--muted); font-size:8px; line-height:1.4; }

.agency-section { padding:clamp(95px,11vw,160px) 0 0; scroll-margin-top:82px; }
.agency-heading { max-width:1020px; margin-bottom:48px; }.agency-heading h2 { margin:15px 0 0; font-size:clamp(50px,6vw,86px); line-height:.9; letter-spacing:-.07em; }.agency-heading > p:last-child { max-width:620px; margin:25px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
.agency-heading-split { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(270px,.45fr); align-items:end; gap:50px; max-width:none; }.agency-heading-split > p:last-child { margin:0 0 7px; }

.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.problem-grid article { position:relative; min-height:330px; padding:28px; overflow:hidden; border:1px solid var(--line); border-radius:25px; background:linear-gradient(150deg,var(--surface-2),#090909 74%); }.problem-grid article::after { content:""; position:absolute; right:-85px; bottom:-110px; width:245px; height:245px; border:1px solid var(--line); border-radius:50%; box-shadow:inset 0 0 0 42px rgba(255,255,255,.012),inset 0 0 0 84px rgba(255,255,255,.012); }.problem-grid article > span { color:var(--muted); font:800 8px ui-monospace,monospace; }.problem-grid article > i { position:absolute; top:23px; right:25px; color:rgba(255,255,255,.1); font:400 42px Georgia,serif; font-style:normal; }.problem-grid h3 { position:relative; z-index:2; margin:130px 0 16px; font-size:clamp(27px,2.6vw,38px); line-height:.95; letter-spacing:-.055em; }.problem-grid p { position:relative; z-index:2; max-width:31ch; margin:0; color:var(--muted); font-size:11px; line-height:1.6; }

.buyer-path { display:grid; grid-template-columns:repeat(5,1fr); margin:0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:28px; list-style:none; background:var(--surface); }.buyer-path li { position:relative; min-height:235px; padding:24px; border-right:1px solid var(--line); }.buyer-path li:last-child { border-right:0; background:var(--signal); color:var(--bg); }.buyer-path li > span { color:var(--muted); font:800 8px ui-monospace,monospace; }.buyer-path li:last-child > span { color:rgba(5,5,5,.45); }.buyer-path li div { position:absolute; right:24px; bottom:24px; left:24px; }.buyer-path strong,.buyer-path p { display:block; }.buyer-path strong { font-size:17px; letter-spacing:-.03em; }.buyer-path p { margin:8px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }.buyer-path li:last-child p { color:rgba(5,5,5,.6); }.buyer-path li > i { position:absolute; top:24px; right:18px; color:var(--signal); font-style:normal; }.buyer-path li:last-child > i { display:none; }

.product-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); gap:10px; }.product-map { position:relative; min-height:620px; overflow:hidden; border:1px solid var(--line); border-radius:30px; background:radial-gradient(circle at 50% 48%,rgba(223,255,99,.08),transparent 23%),#0c0c0d; }.product-map::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:54px 54px; opacity:.25; mask-image:radial-gradient(circle at center,black,transparent 78%); }.product-map-top { position:absolute; z-index:3; top:24px; right:25px; left:25px; display:flex; justify-content:space-between; color:var(--muted); font:800 7px ui-monospace,monospace; letter-spacing:.1em; }.product-map-top i { color:var(--success); font-style:normal; }.product-map-core { position:absolute; z-index:3; left:50%; top:50%; display:grid; width:132px; height:132px; place-items:center; border:1px solid rgba(223,255,99,.35); border-radius:50%; background:#080808; transform:translate(-50%,-50%); box-shadow:0 0 0 28px rgba(223,255,99,.025),0 0 0 60px rgba(223,255,99,.018); }.product-map-core b { color:var(--signal); font:900 20px ui-monospace,monospace; }.product-map-core span { position:absolute; width:290px; height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); }.product-map-core span:nth-child(2) { transform:rotate(32deg); }.product-map-core span:nth-child(3) { transform:rotate(-32deg); }.map-node { position:absolute; z-index:5; width:190px; padding:17px; border:1px solid var(--line-strong); border-radius:17px; background:rgba(20,20,22,.94); box-shadow:0 20px 45px rgba(0,0,0,.35); }.map-node small,.map-node strong,.map-node i { display:block; }.map-node small { color:var(--signal); font:800 7px ui-monospace,monospace; }.map-node strong { margin-top:13px; font-size:17px; }.map-node i { margin-top:6px; color:var(--muted); font-size:7px; font-style:normal; }.node-catalog { top:100px; left:48px; }.node-request { top:100px; right:48px; }.node-manager { bottom:70px; right:48px; }.node-control { bottom:70px; left:48px; }
.deliverables { display:grid; grid-template-columns:1fr 1fr; align-content:start; overflow:hidden; border:1px solid var(--line); border-radius:30px; background:var(--surface); }.deliverables span { display:grid; grid-template-columns:30px 1fr; align-items:center; gap:8px; min-height:94px; padding:15px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--text-soft); font-size:10px; line-height:1.35; }.deliverables span:nth-child(even) { border-right:0; }.deliverables span:nth-last-child(-n+2) { border-bottom:0; }.deliverables i { color:var(--muted); font:800 7px ui-monospace,monospace; font-style:normal; }.agency-note { margin:14px 0 0; padding:16px 20px; border:1px solid rgba(223,255,99,.18); border-radius:14px; background:var(--signal-soft); color:var(--text-soft); font-size:10px; line-height:1.55; }

.launch-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }.launch-steps article { min-height:310px; padding:24px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(155deg,var(--surface-2),#090909 75%); }.launch-steps article:nth-child(2) { border-color:rgba(223,255,99,.35); background:linear-gradient(155deg,rgba(223,255,99,.12),#090909 75%); }.launch-steps span { color:var(--signal); font:800 8px ui-monospace,monospace; }.launch-steps h3 { margin:140px 0 12px; font-size:20px; line-height:1; letter-spacing:-.045em; }.launch-steps p { margin:0; color:var(--muted); font-size:9px; line-height:1.55; }

.agency-control { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.72fr); gap:10px; }.control-copy { min-height:600px; padding:clamp(35px,5vw,70px); overflow:hidden; border:1px solid rgba(223,255,99,.25); border-radius:30px; background:radial-gradient(circle at 80% 20%,rgba(223,255,99,.11),transparent 24%),linear-gradient(145deg,#171a10,#080808 70%); }.control-copy h2 { margin:18px 0 28px; font-size:clamp(58px,6vw,88px); line-height:.86; letter-spacing:-.075em; }.control-copy > p:last-child { max-width:50ch; margin:0; color:var(--text-soft); font-size:13px; line-height:1.65; }.control-list { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:30px; background:var(--surface); }.control-list article { display:grid; grid-template-columns:48px 1fr; align-items:center; gap:12px; min-height:150px; padding:22px; border-bottom:1px solid var(--line); }.control-list article:last-child { border-bottom:0; }.control-list article > span { color:var(--signal); font:400 24px Georgia,serif; }.control-list strong { display:block; font-size:14px; }.control-list p { margin:7px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }

.price-system { display:grid; grid-template-columns:1.08fr .92fr; gap:10px; }.price-card-main,.price-card-support { display:flex; min-height:610px; padding:clamp(30px,4vw,54px); flex-direction:column; border:1px solid var(--line); border-radius:30px; }.price-card-main { background:var(--signal); color:var(--bg); }.price-card-support { background:linear-gradient(145deg,var(--surface-2),#080808 72%); }.price-card-label { display:flex; align-items:center; justify-content:space-between; gap:18px; font:800 8px ui-monospace,monospace; letter-spacing:.08em; }.price-card-label i { padding:8px 10px; border-radius:99px; background:rgba(5,5,5,.1); font-style:normal; }.price-card-support .price-card-label { color:var(--muted); }.price-card-support .price-card-label i { color:var(--signal); background:var(--signal-soft); }.price-value { display:flex; align-items:flex-end; gap:15px; margin:70px 0 40px; }.price-value strong { font:400 clamp(98px,10vw,155px)/.72 Georgia,serif; letter-spacing:-.085em; }.price-value span { padding-bottom:5px; font-size:9px; font-weight:800; }.price-card-main ul,.price-card-support ul { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; margin:0 0 38px; padding:0; list-style:none; }.price-card-main li,.price-card-support li { padding:13px 0; border-top:1px solid rgba(5,5,5,.16); font-size:10px; line-height:1.4; }.price-card-main li::before,.price-card-support li::before { content:"↗"; margin-right:9px; }.price-card-support li { border-color:var(--line); color:var(--text-soft); }.price-card-support li::before { color:var(--signal); }.price-card-main .agency-button { margin-top:auto; }.price-card-support > p { margin:auto 0 0; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; line-height:1.55; }

.agency-learning { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr); align-items:end; gap:70px; padding-bottom:clamp(95px,11vw,160px); border-bottom:1px solid var(--line); }.agency-learning h2 { margin:15px 0 0; font-size:clamp(48px,5.5vw,78px); line-height:.9; letter-spacing:-.07em; }.agency-learning > div:last-child p { margin:0 0 26px; color:var(--muted); font-size:12px; line-height:1.65; }

.agency-faq { display:grid; grid-template-columns:minmax(300px,.43fr) minmax(0,.57fr); gap:clamp(50px,8vw,120px); padding-bottom:clamp(110px,12vw,180px); }.agency-faq .agency-heading { margin:0; }.agency-faq-list { border-top:1px solid var(--line); }.agency-faq-item { border-bottom:1px solid var(--line); }.agency-faq-item > button { display:grid; grid-template-columns:38px 1fr 36px; align-items:center; gap:15px; width:100%; min-height:94px; padding:15px 0; border:0; background:none; text-align:left; cursor:pointer; }.agency-faq-item > button span,.agency-faq-item > button i { color:var(--muted); font:800 8px ui-monospace,monospace; font-style:normal; }.agency-faq-item > button i { font-size:17px; text-align:center; }.agency-faq-item > button strong { font-size:14px; }.agency-faq-item > div { display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1); }.agency-faq-item > div > p { min-height:0; margin:0; overflow:hidden; color:var(--muted); font-size:11px; line-height:1.65; }.agency-faq-item.open > div { grid-template-rows:1fr; }.agency-faq-item.open > div > p { padding:0 50px 28px; }.agency-faq-item.open > button i { color:var(--signal); }

.agency-final { position:relative; display:grid; min-height:720px; padding:110px 20px; overflow:hidden; place-content:center; justify-items:center; border-top:1px solid var(--line); text-align:center; }.agency-final > *:not(.agency-final-art) { position:relative; z-index:2; }.agency-final h2 { margin:18px 0 23px; font-size:clamp(65px,8.3vw,122px); line-height:.84; letter-spacing:-.08em; }.agency-final > p:not(.mono-label) { max-width:590px; margin:0 0 30px; color:var(--muted); font-size:13px; line-height:1.6; }.agency-final > small { margin-top:17px; color:#656568; font-size:8px; }.agency-final-art { position:absolute; left:50%; top:50%; width:min(70vw,850px); aspect-ratio:1; border:1px solid var(--line); border-radius:50%; transform:translate(-50%,-50%); }.agency-final-art span { position:absolute; inset:15%; border:1px dashed var(--line); border-radius:50%; }.agency-final-art span:nth-child(2) { inset:32%; border-style:solid; }.agency-final-art i { position:absolute; right:8%; top:17%; display:grid; width:70px; height:70px; place-items:center; border-radius:50%; background:var(--signal); color:var(--bg); font-size:25px; font-style:normal; animation:agency-float 4s ease-in-out infinite; }
@keyframes agency-float { 50% { transform:translateY(-10px) rotate(5deg); } }
.agency-footer { display:flex; align-items:center; justify-content:space-between; gap:25px; min-height:120px; border-top:1px solid var(--line); }.agency-footer p { color:var(--muted); font-size:9px; }.agency-footer > button:last-child { padding:8px 0; border:0; background:none; color:var(--muted); font-size:9px; font-weight:800; cursor:pointer; }.agency-mobile-dock { display:none; }

@media (max-width: 1120px) {
  .agency-hero-copy { width:65%; }
  .agency-demo { right:-130px; opacity:.62; }
  .launch-steps { grid-template-columns:repeat(3,1fr); }.launch-steps article:nth-child(n+4) { min-height:260px; }.launch-steps h3 { margin-top:105px; }
  .agency-control { grid-template-columns:1fr; }.control-copy { min-height:500px; }.control-list { grid-template-columns:1fr 1fr; }.control-list article { border-right:1px solid var(--line); }.control-list article:nth-child(even) { border-right:0; }.control-list article:nth-last-child(-n+2) { border-bottom:0; }
}

@media (max-width: 820px) {
  .agency-page { --agency-width:min(calc(100% - 28px),1320px); }
  .agency-nav { grid-template-columns:1fr auto; min-height:calc(64px + env(safe-area-inset-top)); padding-inline:14px; }.agency-nav nav,.agency-learn-link { display:none; }.agency-nav-cta { min-height:44px; padding-inline:14px; }
  .agency-hero { min-height:auto; padding-top:72px; }.agency-hero::before { display:none; }.agency-hero-copy { width:100%; }.agency-hero-copy h1 { font-size:clamp(52px,13vw,76px); }.agency-lead { max-width:92%; font-size:14px; }.agency-actions { align-items:flex-start; flex-direction:column; }.agency-button { min-height:55px; }.agency-micro { max-width:90%; }
  .agency-demo { position:relative; top:auto; right:auto; width:100%; height:540px; margin-top:55px; opacity:1; }.demo-channel { left:18px; }.demo-phone { right:20px; }.demo-transform { left:49%; }
  .agency-facts { grid-template-columns:1fr 1fr; margin-top:14px; }.agency-facts div:nth-child(2) { border-right:0; }.agency-facts div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .agency-section { padding-top:100px; }.agency-heading-split { grid-template-columns:1fr; gap:20px; }.agency-heading h2 { font-size:clamp(46px,11vw,68px); }.agency-heading-split > p:last-child { margin:0; }
  .problem-grid { grid-template-columns:1fr; }.problem-grid article { min-height:260px; }.problem-grid h3 { margin-top:85px; }
  .buyer-path { grid-template-columns:1fr; }.buyer-path li { min-height:124px; border-right:0; border-bottom:1px solid var(--line); }.buyer-path li:last-child { border-bottom:0; }.buyer-path li div { top:50%; bottom:auto; left:75px; transform:translateY(-50%); }.buyer-path li > i { top:50%; transform:translateY(-50%) rotate(90deg); }
  .product-grid { grid-template-columns:1fr; }.product-map { min-height:570px; }.deliverables span { min-height:82px; }
  .launch-steps { grid-template-columns:1fr 1fr; }.launch-steps article,.launch-steps article:nth-child(n+4) { min-height:260px; }.launch-steps article:last-child { grid-column:1/-1; }
  .price-system { grid-template-columns:1fr; }.price-card-main,.price-card-support { min-height:570px; }
  .agency-learning { grid-template-columns:1fr; gap:30px; }.agency-faq { grid-template-columns:1fr; gap:45px; }
  .agency-final { min-height:650px; }.agency-final h2 { font-size:clamp(55px,13vw,82px); }.agency-final-art { width:140vw; }
  .agency-footer { padding-bottom:90px; flex-wrap:wrap; }.agency-footer p { order:3; width:100%; }
  .agency-mobile-dock { position:fixed; z-index:80; right:10px; bottom:var(--safe-bottom); left:10px; display:block; }.agency-mobile-dock a { display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:0 20px; border-radius:99px; background:var(--signal); color:var(--bg); font-size:10px; font-weight:900; box-shadow:0 20px 55px rgba(0,0,0,.55); }
}

@media (max-width: 540px) {
  .agency-brand strong { font-size:11px; }.agency-nav-cta { font-size:8px; }
  .agency-hero { padding-top:58px; }.agency-hero-copy h1 { font-size:clamp(49px,14.5vw,67px); }.agency-hero-copy h1 em { margin-top:8px; }.agency-actions .agency-button { width:100%; }.agency-lead { max-width:100%; font-size:13px; }
  .agency-demo { height:455px; border-radius:24px; }.demo-caption { right:15px; left:15px; }.demo-caption i { display:none; }.demo-channel { top:89px; left:10px; width:196px; height:310px; padding:12px; border-radius:19px; }.demo-channel-head { grid-template-columns:31px 1fr auto; }.demo-avatar { width:31px; height:31px; }.demo-post { grid-template-columns:53px 1fr; }.demo-post > span { height:53px; }.demo-phone { right:8px; bottom:22px; width:192px; height:365px; padding:24px 11px 14px; border-width:5px; border-radius:31px; }.demo-phone-hero { min-height:133px; padding:15px; }.demo-phone-hero strong { font-size:23px; }.demo-products i { height:54px; }.demo-transform { top:214px; width:61px; height:61px; }.demo-transform span { font-size:10px; }
  .agency-facts div { min-height:94px; padding:18px 15px; }.agency-facts strong { font-size:27px; }
  .agency-section { padding-top:86px; }.agency-heading { margin-bottom:32px; }.agency-heading h2 { font-size:clamp(43px,12vw,58px); }.agency-heading > p:last-child { font-size:11px; }
  .problem-grid article { min-height:240px; padding:22px; }.problem-grid h3 { font-size:31px; }
  .buyer-path { border-radius:20px; }.buyer-path li { padding:18px; }.buyer-path li div { left:62px; }.buyer-path li > i { right:13px; }
  .product-map { min-height:500px; border-radius:22px; }.product-map-core { width:100px; height:100px; }.map-node { width:145px; padding:13px; }.map-node strong { font-size:14px; }.node-catalog { top:83px; left:15px; }.node-request { top:83px; right:15px; }.node-manager { right:15px; bottom:58px; }.node-control { left:15px; bottom:58px; }.deliverables { border-radius:22px; }.deliverables span { grid-template-columns:23px 1fr; min-height:82px; padding:12px 9px; font-size:9px; }
  .launch-steps { grid-template-columns:1fr; }.launch-steps article,.launch-steps article:nth-child(n+4) { min-height:220px; }.launch-steps article:last-child { grid-column:auto; }.launch-steps h3 { margin-top:75px; font-size:23px; }
  .control-copy { min-height:480px; padding:30px 22px; border-radius:22px; }.control-copy h2 { font-size:58px; }.control-list { grid-template-columns:1fr; border-radius:22px; }.control-list article { min-height:130px; border-right:0; border-bottom:1px solid var(--line)!important; }.control-list article:last-child { border-bottom:0!important; }
  .price-card-main,.price-card-support { min-height:0; padding:29px 22px; border-radius:22px; }.price-card-label { align-items:flex-start; flex-direction:column; }.price-value { margin:60px 0 32px; }.price-value strong { font-size:105px; }.price-card-main ul,.price-card-support ul { grid-template-columns:1fr; }.price-card-main .agency-button { margin-top:20px; }
  .agency-learning h2 { font-size:49px; }.agency-faq-item > button strong { font-size:12px; }.agency-faq-item.open > div > p { padding-left:53px; padding-right:8px; }
  .agency-final { min-height:590px; padding-inline:5px; }.agency-final h2 { font-size:53px; }.agency-final > p:not(.mono-label) { font-size:11px; }.agency-final .agency-button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-transform i,
  .agency-final-art i { animation:none!important; }
}