:root {
  color-scheme: dark;
  --ink: #09080d;
  --ink-2: #0f0c13;
  --surface: #151119;
  --surface-2: #1c1621;
  --line: #302538;
  --line-bright: #5c3c66;
  --paper: #f7f1f7;
  --muted: #aaa0ad;
  --faint: #756b78;
  --drew: #d946ef;
  --drew-light: #f472d0;
  --violet: #8b7cf6;
  --mint: #4bd4b0;
  --coral: #f28ca9;
  --max: 1180px;
  --gutter: 32px;
  --section: 124px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16, .84, .44, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background:
    radial-gradient(65rem 50rem at 90% 10%, rgba(217, 70, 239, .075), transparent 63%),
    radial-gradient(55rem 46rem at -10% 56%, rgba(139, 124, 246, .045), transparent 70%),
    var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(226, 194, 232, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 194, 232, .025) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, rgba(217, 70, 239, .13) 1px, transparent 1.5px);
  background-size: 24px 24px, 24px 24px, 144px 144px;
  mask-image: linear-gradient(180deg, #000, transparent 92%);
}

[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
::selection { color: #fff; background: rgba(217, 70, 239, .45); }
:focus-visible { outline: 2px solid var(--drew-light); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 12px; left: -999px; z-index: 200; padding: 10px 14px; background: var(--paper); color: var(--ink); font-weight: 700; }
.skip:focus { left: 12px; }
.wrap { width: min(100%, calc(var(--max) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section); }
section[id] { scroll-margin-top: 78px; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; }
h2 { margin-bottom: 24px; font-size: clamp(44px, 6vw, 76px); font-weight: 680; line-height: .98; }
h2 em { color: var(--drew-light); font-style: normal; font-weight: inherit; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; color: #d6bcd9; font: 500 10px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--drew); box-shadow: 8px 0 12px rgba(217,70,239,.45); }
.section-head { max-width: 860px; margin-bottom: 52px; }
.section-head > p:last-child { max-width: 660px; margin-bottom: 0; color: var(--muted); font-size: 17px; }
.section-head.compact { max-width: 700px; }

.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 10px; border: 1px solid #513b59; border-radius: 4px; padding: 0 17px; background: rgba(19,15,23,.78); color: #f5edf6; font-weight: 650; font-size: 13px; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); border-color: #805289; background: #201725; }
.button-primary { border-color: #e06af1; background: var(--drew); color: #1a081c; box-shadow: 0 12px 32px -19px rgba(217,70,239,.9); }
.button-primary:hover { border-color: #f39cfa; background: #e35cf4; box-shadow: 0 16px 36px -18px rgba(217,70,239,.95); }
.button-ghost { background: rgba(12,9,15,.46); backdrop-filter: blur(9px); }
.button-light { border-color: #fff; background: var(--paper); color: #140e17; }
.button-light:hover { border-color: #fff; background: #fff; }
.button-large { min-height: 50px; padding-inline: 21px; font-size: 14px; }
.button-small { min-height: 38px; }
.text-link { display: inline-flex; gap: 9px; align-items: center; color: #e8c3ec; border-bottom: 1px solid rgba(217,70,239,.35); padding-bottom: 3px; font-weight: 600; }
.text-link:hover { color: #fff; border-color: var(--drew); }

/* Drew's hosted-product mark. The desktop identity remains the four-point ✦. */
.frame-mark { position: relative; width: 38px; height: 38px; flex: 0 0 auto; }
.frame-mark i { position: absolute; width: 11px; height: 11px; border-color: var(--drew); }
.frame-mark i:nth-child(1) { top: 2px; left: 2px; border-top: 2px solid; border-left: 2px solid; }
.frame-mark i:nth-child(2) { top: 2px; right: 2px; border-top: 2px solid; border-right: 2px solid; }
.frame-mark i:nth-child(3) { right: 2px; bottom: 2px; border-right: 2px solid; border-bottom: 2px solid; }
.frame-mark i:nth-child(4) { bottom: 2px; left: 2px; border-bottom: 2px solid; border-left: 2px solid; }
.frame-mark b { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border: 1px solid var(--drew-light); transform: translate(-50%,-50%) rotate(45deg); box-shadow: 0 0 12px rgba(217,70,239,.55); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-lockup { display: grid; gap: 2px; }
.brand-lockup strong { font-size: 17px; line-height: 1; letter-spacing: -.04em; }
.brand-lockup small { color: var(--faint); font: 500 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.brand-lockup em { color: #ba84c1; font-style: normal; }
.desktop-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(217,70,239,.6); border-radius: 8px; background: linear-gradient(145deg, rgba(217,70,239,.22), rgba(139,124,246,.1)); color: var(--drew-light); font-size: 24px; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 24px -16px rgba(217,70,239,.85); }
.desktop-mark.large { width: 58px; height: 58px; border-radius: 12px; font-size: 33px; }

.nav { position: fixed; top: 0; right: 0; left: 0; z-index: 100; transition: background .25s, border-color .25s, backdrop-filter .25s; }
.nav.is-scrolled { border-bottom: 1px solid rgba(88,64,96,.6); background: rgba(9,8,13,.82); backdrop-filter: blur(18px); }
.nav-inner { display: flex; min-height: 72px; align-items: center; gap: 30px; }
.nav .brand { margin-right: auto; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links > a:not(.button) { color: #a89eaa; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: color .2s; }
.nav-links > a:not(.button):hover { color: #fff; }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 4px; background: rgba(10,8,13,.8); }
.nav-toggle span { display: block; width: 18px; height: 1px; margin: 4px auto; background: #d9d0dc; }

.hero { position: relative; min-height: 850px; isolation: isolate; display: grid; align-content: end; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-art { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.92) contrast(1.03); }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(6,5,8,.99) 0%, rgba(6,5,8,.94) 32%, rgba(6,5,8,.52) 58%, rgba(6,5,8,.16) 82%), linear-gradient(180deg, rgba(6,5,8,.48), transparent 28%, rgba(6,5,8,.08) 70%, #09080d 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(45rem 35rem at 32% 51%, rgba(217,70,239,.13), transparent 66%); }
.hero-grid { display: grid; min-height: 650px; align-items: center; padding-top: 105px; }
.hero-copy { max-width: 730px; padding-bottom: 52px; }
.hero h1 { margin-bottom: 30px; font-size: clamp(64px, 8.2vw, 112px); font-weight: 720; line-height: .84; letter-spacing: -.07em; }
.hero h1 em { display: inline-block; margin-top: .14em; color: transparent; background: linear-gradient(95deg, #fff 0%, #f1c8ed 35%, #e55bf2 72%, #a68df8 100%); background-clip: text; -webkit-background-clip: text; font-style: normal; font-weight: 720; }
.hero-lede { max-width: 600px; color: #c4b9c6; font-size: 18px; line-height: 1.7; text-shadow: 0 2px 18px #000; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 31px; }
.hero-rail { display: grid; grid-template-columns: repeat(4,1fr); padding-bottom: 24px; }
.hero-rail article { display: flex; gap: 14px; align-items: center; min-height: 78px; border-top: 1px solid rgba(143,88,151,.58); border-right: 1px solid rgba(82,62,89,.55); padding: 15px 19px; background: rgba(10,8,13,.62); backdrop-filter: blur(12px); }
.hero-rail article:first-child { border-left: 1px solid rgba(82,62,89,.55); }
.hero-rail article > span { color: var(--drew); font: 500 9px var(--mono); }
.hero-rail p { display: grid; gap: 2px; margin: 0; line-height: 1.2; }
.hero-rail b { font-size: 13px; }
.hero-rail small { color: var(--faint); font-size: 10px; }

.persona-section { background: linear-gradient(180deg, #0b0910, rgba(13,10,16,.62)); }
.persona-card { display: grid; grid-template-columns: .93fr 1.07fr; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 34px 90px -65px rgba(217,70,239,.68); }
.persona-portrait { position: relative; min-height: 600px; margin: 0; overflow: hidden; }
.persona-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,6,10,.92)); }
.persona-portrait img { width: 100%; height: 100%; object-fit: cover; }
.persona-portrait figcaption { position: absolute; right: 28px; bottom: 26px; left: 28px; z-index: 2; display: flex; gap: 13px; align-items: center; }
.persona-portrait figcaption > span:last-child { display: grid; }
.persona-portrait figcaption b { font-size: 16px; }
.persona-portrait figcaption small { color: #b5abb8; font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.persona-copy { align-self: center; padding: 68px clamp(40px,6vw,78px); }
.persona-copy h2 { font-size: clamp(42px,4.9vw,66px); }
.persona-copy > p:not(.eyebrow) { color: var(--muted); font-size: 16px; }
.principles { margin: 34px 0 0; padding: 0; list-style: none; }
.principles li { display: grid; grid-template-columns: 42px 1fr; gap: 13px; padding: 17px 0; border-top: 1px solid var(--line); }
.principles li > span { color: var(--drew); font: 500 9px var(--mono); }
.principles p { display: grid; gap: 3px; margin: 0; line-height: 1.35; }
.principles b { font-size: 13px; }
.principles small { color: var(--faint); font-size: 11px; }

.method-section { overflow: hidden; }
.method-section::before { content: "TENSION / MOVE / PROOF"; position: absolute; top: 88px; right: -20px; color: rgba(217,70,239,.025); font: 700 clamp(70px,10vw,150px)/1 var(--sans); letter-spacing: -.07em; white-space: nowrap; }
.method-stage { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #0e0b12; }
.method-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }
.method-tabs button { min-height: 70px; border: 0; border-right: 1px solid var(--line); background: #121016; color: #79717c; cursor: pointer; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: color .2s, background .2s; }
.method-tabs button:last-child { border-right: 0; }
.method-tabs button span { margin-right: 10px; color: #5c5360; }
.method-tabs button[aria-selected="true"] { background: linear-gradient(180deg, rgba(217,70,239,.12), rgba(217,70,239,.025)); color: #fff; box-shadow: inset 0 -2px var(--drew); }
.method-tabs button[aria-selected="true"] span { color: var(--drew-light); }
.method-canvas article { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 520px; }
.method-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px,6vw,72px); border-right: 1px solid var(--line); }
.method-copy .label, .card-index { color: #b08eb5; font: 500 9px var(--mono); letter-spacing: .12em; }
.method-copy h3 { margin: 21px 0; font-size: clamp(34px,4vw,54px); line-height: 1; }
.method-copy > p { color: var(--muted); }
.method-copy ul { margin: 23px 0 0; padding: 19px 0 0; border-top: 1px solid var(--line); list-style: none; color: #bcb1be; font: 400 10px/2 var(--mono); }
.method-copy li::before { content: "◇"; margin-right: 9px; color: var(--drew); }
.tension-visual, .move-visual, .proof-visual { position: relative; align-self: center; justify-self: center; width: min(76%, 430px); aspect-ratio: 1; }
.tension-visual { border-bottom: 1px solid #625a66; border-left: 1px solid #625a66; background: radial-gradient(circle at 63% 39%, rgba(217,70,239,.28), transparent 6%, rgba(217,70,239,.08) 7%, transparent 31%), linear-gradient(rgba(217,70,239,.06) 1px, transparent 1px), linear-gradient(90deg,rgba(217,70,239,.06) 1px,transparent 1px); background-size: auto, 28px 28px, 28px 28px; }
.tension-visual .axis { position: absolute; color: #786f7b; font: 500 8px var(--mono); letter-spacing: .14em; }
.tension-visual .axis-x { right: 0; bottom: -26px; }
.tension-visual .axis-y { top: 0; left: -48px; transform: rotate(-90deg); transform-origin: right top; }
.tension-visual .field { position: absolute; top: 17%; right: 13%; bottom: 14%; left: 15%; border: 1px dashed rgba(217,70,239,.38); border-radius: 50%; transform: rotate(-18deg); }
.tension-visual .target { position: absolute; top: 35%; left: 53%; width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid var(--drew); transform: rotate(45deg); color: #fff; background: rgba(217,70,239,.12); box-shadow: 0 0 34px rgba(217,70,239,.18); font: 500 7px var(--mono); }
.tension-visual .target::first-line { transform: rotate(-45deg); }
.tension-visual small { position: absolute; right: 6%; bottom: 5%; color: #8d8390; font: 400 9px/1.5 var(--mono); text-align: right; text-transform: uppercase; }
.move-visual { overflow: hidden; border: 1px solid #57415f; border-radius: 8px; background: #17121b; box-shadow: 0 24px 60px -38px rgba(217,70,239,.8); }
.move-head { display: flex; gap: 5px; height: 10%; align-items: center; padding-inline: 4%; border-bottom: 1px solid var(--line); }
.move-head i { width: 5px; height: 5px; border: 1px solid #7f657f; border-radius: 50%; }
.move-summary { height: 27%; padding: 5%; }
.move-summary b { display: block; width: 37%; height: 26%; margin-bottom: 5%; background: #e8e0e9; }
.move-summary span { display: inline-block; width: 22%; height: 18%; margin-right: 3%; background: #35293b; }
.move-table { border-top: 1px solid var(--line); }
.move-table p { display: grid; grid-template-columns: 1.5fr 1fr .6fr; gap: 7%; height: 46px; align-items: center; margin: 0; padding-inline: 5%; border-bottom: 1px solid var(--line); }
.move-table p.hot { background: rgba(217,70,239,.1); box-shadow: inset 3px 0 var(--drew); }
.move-table p > * { display: block; height: 5px; background: #4b3d50; }
.move-table p i { background: #7a6680; }
.move-table p em { background: var(--drew); }
.move-visual > small { position: absolute; right: 5%; bottom: 4%; color: var(--drew-light); font: 500 7px var(--mono); letter-spacing: .12em; }
.proof-visual { height: auto; aspect-ratio: auto; border: 1px solid #57415f; border-radius: 8px; padding: 7%; background: #17121b; }
.score { display: flex; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 7%; }
.score span { margin-right: auto; color: #9d8fa0; font: 500 8px var(--mono); letter-spacing: .1em; }
.score b { color: var(--drew-light); font-size: 54px; line-height: 1; }
.score small { color: #6e6471; font: 500 9px var(--mono); }
.proof-bars { padding-block: 7%; }
.proof-bars p { display: grid; grid-template-columns: 80px 1fr 25px; gap: 10px; align-items: center; margin: 11px 0; color: #aaa0ad; font: 400 8px var(--mono); }
.proof-bars p i { position: relative; height: 3px; background: #302737; }
.proof-bars p i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg,var(--violet),var(--drew)); }
.proof-bars p b { color: #d8cdd9; text-align: right; }
.proof-visual > em { display: inline-block; border: 1px solid rgba(75,212,176,.45); padding: 7px 10px; color: var(--mint); font: 500 8px var(--mono); letter-spacing: .12em; font-style: normal; }

.studio-section { background: #0c0a0f; }
.studio-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(36px,7vw,84px); align-items: center; }
.studio-copy h2 { font-size: clamp(44px,5.5vw,70px); }
.studio-copy > p:not(.eyebrow) { color: var(--muted); }
.feature-list { margin: 30px 0; padding: 0; list-style: none; }
.feature-list li { display: grid; grid-template-columns: 25px 1fr; gap: 11px; border-top: 1px solid var(--line); padding: 16px 0; }
.feature-list li > span { color: var(--drew); }
.feature-list p { display: grid; gap: 3px; margin: 0; }
.feature-list b { font-size: 13px; }
.feature-list small { color: var(--faint); font-size: 11px; }
.studio-window { overflow: hidden; border: 1px solid #49374f; border-radius: 10px; background: #0d0b10; box-shadow: 0 34px 90px -58px rgba(217,70,239,.85); }
.window-bar { display: flex; height: 60px; align-items: center; gap: 16px; padding: 0 17px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg,#1e1723,#121016); }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border: 1px solid #726377; border-radius: 50%; }
.window-bar > p { display: flex; align-items: center; gap: 9px; margin: 0; }
.desktop-star { color: var(--drew); font-size: 16px; }
.window-bar p b { font-size: 11px; }
.window-bar p small { border-left: 1px solid var(--line); padding-left: 9px; color: #786d7a; font-size: 8px; }
.window-bar > button { margin-left: auto; border: 0; background: none; color: #786d7a; }
.window-body { display: grid; grid-template-columns: 142px 1fr; min-height: 535px; }
.window-body aside { display: flex; flex-direction: column; padding: 23px 12px 14px; border-right: 1px solid var(--line); background: #100d13; }
.window-body aside > small { margin: 0 9px 12px; color: #615867; font: 500 7px var(--mono); letter-spacing: .12em; }
.window-body aside > b { padding: 9px; border-radius: 3px; color: #746a77; font-size: 8px; font-weight: 500; }
.window-body aside > b i { margin-right: 7px; color: #534b56; font: 400 7px var(--mono); font-style: normal; }
.window-body aside > b.active { background: rgba(217,70,239,.1); color: #eacfea; box-shadow: inset 2px 0 var(--drew); }
.window-body aside > b.active i { color: var(--drew); }
.window-body aside > span { flex: 1; }
.window-body aside > p { display: flex; align-items: center; gap: 6px; margin: 0; color: #625a65; font-size: 7px; }
.window-body aside > p i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 7px rgba(75,212,176,.6); }
.direction-board { min-width: 0; padding: 28px 25px 22px; }
.direction-board > header { display: flex; align-items: end; margin-bottom: 24px; }
.direction-board header small { color: var(--drew); font: 500 7px var(--mono); letter-spacing: .12em; }
.direction-board header h3 { margin: 8px 0 0; font-size: 25px; line-height: 1; }
.direction-board header em { margin-left: auto; border: 1px solid var(--line); border-radius: 20px; padding: 5px 8px; color: #706674; font: 400 7px var(--mono); font-style: normal; }
.direction-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.direction-grid article { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 8px 8px 12px; background: #151119; }
.direction-grid article.recommended { border-color: rgba(217,70,239,.7); box-shadow: inset 0 2px var(--drew); }
.recommend { position: absolute; top: -8px; right: 6px; z-index: 2; padding: 3px 5px; background: var(--drew); color: #18051a; font: 600 5px var(--mono); letter-spacing: .1em; }
.mini-ui { position: relative; height: 126px; overflow: hidden; margin-bottom: 12px; background: #0c0a0f; }
.mini-ui > * { position: absolute; display: block; }
.mini-ui.signal span { inset: 13px 12px auto; height: 7px; background: #8f8392; }
.mini-ui.signal i:nth-child(2) { top: 34px; right: 12px; bottom: 13px; left: 12px; border: 1px solid #3c323f; background: repeating-linear-gradient(180deg,transparent 0 14px,#3b303e 15px); }
.mini-ui.signal i:nth-child(3) { top: 50px; right: 12px; left: 12px; height: 16px; background: rgba(217,70,239,.19); box-shadow: inset 2px 0 var(--drew); }
.mini-ui.signal b { right: 18px; bottom: 18px; width: 27px; height: 4px; background: var(--drew); }
.mini-ui.fault { background: linear-gradient(108deg,#151219 0 49%,#2b142d 49% 51%,#0c0a0f 51%); }
.mini-ui.fault span { top: 15px; left: 12px; width: 37%; height: 8px; background: #aaa0ad; }
.mini-ui.fault i:nth-child(2) { top: 38px; bottom: 14px; left: 12px; width: 34%; border: 1px solid #3a303d; }
.mini-ui.fault i:nth-child(3) { top: 22px; right: 12px; width: 32%; height: 57%; border: 1px solid var(--drew); background: rgba(217,70,239,.12); }
.mini-ui.fault b { right: 17px; bottom: 17px; width: 23%; height: 5px; background: var(--drew); }
.mini-ui.ledger span { top: 12px; right: 12px; left: 12px; height: 17px; border: 1px solid #403643; }
.mini-ui.ledger i:nth-child(2) { top: 40px; right: 19px; bottom: 12px; left: 12px; border-left: 2px solid var(--violet); background: repeating-linear-gradient(180deg,#332a36 0 1px,transparent 1px 18px); }
.mini-ui.ledger i:nth-child(3) { top: 51px; left: 21px; width: 55%; height: 5px; background: #756b78; box-shadow: 0 18px #5b505e,0 36px #4a414d; }
.mini-ui.ledger b { right: 12px; bottom: 17px; width: 8px; height: 8px; border: 1px solid var(--mint); transform: rotate(45deg); }
.direction-grid article > small { color: var(--drew); font: 500 6px var(--mono); }
.direction-grid h4 { margin: 4px 0 2px; font-size: 10px; }
.direction-grid p { margin: 0; color: #6f6672; font-size: 7px; line-height: 1.4; }
.decision-strip { display: flex; gap: 14px; align-items: center; margin-top: 14px; border: 1px solid var(--line); padding: 12px; background: rgba(217,70,239,.04); }
.decision-strip p { display: grid; gap: 4px; margin: 0; }
.decision-strip small { color: var(--drew); font: 500 6px var(--mono); letter-spacing: .1em; }
.decision-strip b { font-size: 8px; }
.decision-strip button { margin-left: auto; flex: 0 0 auto; border: 1px solid var(--drew); border-radius: 3px; padding: 8px 9px; background: var(--drew); color: #170619; font-size: 7px; font-weight: 700; }

.system-section { overflow: hidden; }
.system-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.system-grid article { min-height: 385px; border: 1px solid var(--line); border-radius: 10px; padding: 26px; background: linear-gradient(145deg,#17121b,#110e15); }
.system-grid h3 { margin: 30px 0 9px; font-size: 22px; }
.system-grid p { margin: 0; color: var(--faint); font-size: 12px; }
.system-grid code { color: #cba9d0; font: 400 10px var(--mono); }
.swatches { display: flex; height: 128px; align-items: end; gap: 5px; margin-top: 30px; }
.swatches i { flex: 1; height: calc(42% + var(--i, 0%)); border: 1px solid rgba(255,255,255,.08); background: var(--c); }
.swatches i:nth-child(1) { height: 46%; }.swatches i:nth-child(2) { height: 58%; }.swatches i:nth-child(3) { height: 100%; }.swatches i:nth-child(4) { height: 78%; }.swatches i:nth-child(5) { height: 64%; }.swatches i:nth-child(6) { height: 87%; }
.type-specimen { display: flex; height: 128px; align-items: end; gap: 17px; margin-top: 30px; border-bottom: 1px solid var(--line); }
.type-specimen > b { font-size: 94px; line-height: .87; letter-spacing: -.09em; }
.type-specimen > span { display: grid; gap: 7px; padding-bottom: 13px; }
.type-specimen strong { color: var(--drew-light); font-size: 18px; }
.type-specimen small { color: #766d79; font: 500 7px var(--mono); }
.state-stack { display: grid; gap: 8px; height: 128px; align-content: end; margin-top: 30px; }
.state-stack button { min-height: 34px; border: 1px solid #754d7e; border-radius: 3px; background: rgba(217,70,239,.14); color: #efdff0; font-size: 9px; font-weight: 650; }
.state-stack button:first-child { background: var(--drew); color: #1a071c; }
.state-stack button:disabled { border-color: #342b37; background: #19151c; color: #625a65; }
.state-stack button.error { border-color: rgba(242,140,169,.48); background: rgba(242,140,169,.08); color: var(--coral); }

.build-section { background: #0c090f; }
.build-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(44px,7vw,85px); align-items: center; }
.build-panel { overflow: hidden; border: 1px solid #533a5a; border-radius: 10px; background: #121016; box-shadow: 0 34px 90px -60px rgba(217,70,239,.75); }
.build-panel-head, .build-foot { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 18px; border-bottom: 1px solid var(--line); color: #736a76; font: 400 8px var(--mono); }
.build-panel-head span { color: #d6bad9; letter-spacing: .1em; }
.build-panel-head span i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 7px var(--mint); }
.build-score { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; padding: 26px 24px; border-bottom: 1px solid var(--line); }
.build-score > span { display: flex; align-items: baseline; }
.build-score span b { color: var(--drew-light); font-size: 52px; line-height: 1; }
.build-score span small { color: #665e69; font: 500 9px var(--mono); }
.build-score p { display: grid; gap: 4px; margin: 0; }
.build-score strong { font-size: 14px; }
.build-score p small { color: #827986; font-size: 10px; }
.finding { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 16px 21px; border-bottom: 1px solid var(--line); }
.finding-level { align-self: start; margin-top: 2px; font: 500 7px var(--mono); letter-spacing: .1em; }
.finding-level.blocker { color: var(--coral); }.finding-level.tune { color: var(--drew-light); }.finding-level.keep { color: var(--mint); }
.finding p { display: grid; gap: 4px; margin: 0; }
.finding b { font-size: 11px; }
.finding small { color: #776e7a; font-size: 9px; }
.finding code { color: #b59db9; font: inherit; }
.build-foot { border: 0; }
.build-foot b { color: #b59db9; font-size: 7px; }
.build-copy > p:not(.eyebrow) { color: var(--muted); }
.build-copy dl { margin-top: 31px; }
.build-copy dl div { display: grid; grid-template-columns: 90px 1fr; gap: 18px; border-top: 1px solid var(--line); padding: 15px 0; }
.build-copy dt { color: var(--drew-light); font: 500 9px var(--mono); text-transform: uppercase; }
.build-copy dd { margin: 0; color: var(--faint); font-size: 11px; }

.bridge-section { padding-block: 80px; }
.bridge-card { display: grid; grid-template-columns: 70px 1fr auto; gap: 30px; align-items: center; border: 1px solid #795582; border-radius: 14px; padding-block: 52px; background: radial-gradient(50rem 22rem at 75% 30%,rgba(217,70,239,.2),transparent 60%), linear-gradient(135deg,#211329,#17111c); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.bridge-card h2 { margin-bottom: 14px; font-size: clamp(42px,5vw,66px); }
.bridge-card p:not(.eyebrow) { max-width: 600px; margin-bottom: 0; color: #b7aabb; }

.footer { border-top: 1px solid var(--line); background: #070609; }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 126px; align-items: center; gap: 25px; }
.footer-inner > p { margin: 0; color: #655d68; font: 400 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.footer nav { display: flex; justify-content: end; gap: 22px; color: #8e8491; font: 500 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.footer nav a:hover { color: #fff; }

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1040px) {
  :root { --section: 104px; }
  .hero { min-height: 790px; }
  .hero-grid { min-height: 600px; }
  .persona-card { grid-template-columns: 1fr 1fr; }
  .persona-copy { padding: 48px 38px; }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-copy { max-width: 680px; }
  .studio-window { width: min(100%, 760px); margin-inline: auto; }
  .build-grid { grid-template-columns: 1fr 1fr; gap: 42px; }
  .bridge-card { grid-template-columns: 60px 1fr; }
  .bridge-card .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 820px) {
  :root { --gutter: 22px; --section: 88px; }
  .nav { background: rgba(9,8,13,.82); backdrop-filter: blur(16px); }
  .nav-toggle { display: block; }
  .nav-links { position: absolute; top: 64px; right: var(--gutter); left: var(--gutter); display: none; align-items: stretch; border: 1px solid var(--line-bright); border-radius: 6px; padding: 10px; background: rgba(13,10,16,.97); box-shadow: 0 24px 70px rgba(0,0,0,.55); }
  .nav-links.is-open { display: grid; }
  .nav-links > a:not(.button) { padding: 13px 10px; border-bottom: 1px solid var(--line); }
  .hero { min-height: 760px; }
  .hero-shade { background: linear-gradient(90deg,rgba(6,5,8,.96),rgba(6,5,8,.74) 65%,rgba(6,5,8,.35)),linear-gradient(180deg,rgba(6,5,8,.42),transparent 40%,#09080d 100%); }
  .hero-art { object-position: 61% center; }
  .hero-rail { grid-template-columns: repeat(2,1fr); }
  .hero-rail article:nth-child(3) { border-left: 1px solid rgba(82,62,89,.55); }
  .persona-card { grid-template-columns: 1fr; }
  .persona-portrait { min-height: 540px; }
  .method-canvas article { grid-template-columns: 1fr; }
  .method-copy { border-right: 0; border-bottom: 1px solid var(--line); }
  .tension-visual, .move-visual, .proof-visual { margin: 70px auto; }
  .system-grid { grid-template-columns: 1fr; }
  .system-grid article { min-height: 340px; }
  .build-grid { grid-template-columns: 1fr; }
  .build-copy { grid-row: 1; }
  .footer-inner { grid-template-columns: 1fr auto; }
  .footer-inner > p { display: none; }
}

@media (max-width: 600px) {
  :root { --gutter: 17px; --section: 76px; }
  h2 { font-size: 43px; }
  .nav-inner { min-height: 64px; }
  .hero { min-height: 720px; }
  .hero-grid { min-height: 575px; padding-top: 92px; }
  .hero-copy { padding-bottom: 24px; }
  .hero h1 { font-size: clamp(53px,16vw,76px); }
  .hero-lede { font-size: 15px; }
  .hero-actions .button { width: 100%; }
  .hero-rail { padding-inline: 0; padding-bottom: 0; }
  .hero-rail article { min-height: 65px; padding: 11px 13px; }
  .hero-rail article:nth-child(odd) { border-left: 0; }
  .hero-rail article:nth-child(even) { border-right: 0; }
  .hero-rail small { font-size: 8px; }
  .persona-card { border-radius: 10px; }
  .persona-portrait { min-height: 430px; }
  .persona-copy { padding: 39px 24px; }
  .persona-copy h2 { font-size: 41px; }
  .method-tabs button { min-height: 61px; font-size: 8px; }
  .method-tabs button span { display: block; margin: 0 0 4px; }
  .method-copy { padding: 34px 24px; }
  .method-copy h3 { font-size: 36px; }
  .tension-visual, .move-visual, .proof-visual { width: 75%; margin-block: 58px; }
  .window-body { grid-template-columns: 1fr; }
  .window-body aside { display: none; }
  .direction-board { padding: 24px 14px 17px; }
  .direction-grid { gap: 6px; }
  .mini-ui { height: 98px; }
  .direction-grid h4 { font-size: 9px; }
  .direction-grid p { display: none; }
  .decision-strip { align-items: stretch; flex-direction: column; }
  .decision-strip button { width: 100%; margin: 0; }
  .build-panel-head em { display: none; }
  .build-score { grid-template-columns: 95px 1fr; gap: 13px; padding-inline: 17px; }
  .finding { grid-template-columns: 58px 1fr; gap: 9px; padding-inline: 15px; }
  .build-foot b { display: none; }
  .bridge-card { grid-template-columns: 1fr; gap: 19px; padding-block: 39px; }
  .bridge-card .button { grid-column: 1; }
  .bridge-card h2 { font-size: 44px; }
  .footer-inner { grid-template-columns: 1fr; padding-block: 30px; }
  .footer nav { justify-content: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}