
/* Layout: dark single-theme. Hero waveform -> pinned scroll stage (dots -> DP box -> 3 cards) -> still closing band */
:root{
  --ink:#0b0b0c; --ink-2:#121214; --line:#26262a; --fg:#ecebe6; --mute:#8d8c86;
  --glow:#d9c9a3; --ok:#8fbf9a; --warn:#e0b26a;
  --display:"Instrument Serif",Georgia,serif;
  --body:"Manrope",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--ink);color:var(--fg)}
body{font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1080px;margin:0 auto}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
nav{display:flex;justify-content:space-between;align-items:center;padding-block:22px}
.logo{font-family:var(--display);font-size:24px}
.logo i{color:var(--glow)}
nav a{color:var(--fg);text-decoration:none;font-size:14px;border:1px solid var(--line);padding:8px 14px;border-radius:999px}

/* HERO */
.hero{position:relative;padding-block:56px 40px;overflow:hidden}
#wave{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero .inner{position:relative}
h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,8vw,96px);line-height:1;margin:18px 0 0;text-wrap:balance;letter-spacing:-.01em}
h1 em{color:var(--glow)}
.sub{font-size:clamp(18px,2.2vw,22px);color:var(--fg);opacity:.8;margin:22px 0 0;max-width:30ch}
.hero-space{height:clamp(140px,22vw,220px)}

/* STAGE */
.stage{position:relative;height:320vh}
.pin{position:sticky;top:0;height:100vh;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%}
.stage-copy{position:absolute;top:9vh;left:0;right:0;text-align:center;transition:opacity .4s}
.stage-copy h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,54px);margin:10px 0 0;line-height:1.05}
.stage-copy h2 em{color:var(--glow)}
.box{position:absolute;left:50%;top:54%;width:150px;height:150px;transform:translate(-50%,-50%);
  background:#000;border:1px solid #2e2d2a;border-radius:6px;display:grid;place-items:center;text-align:center;
  box-shadow:0 0 0 1px #000,0 30px 80px -20px rgba(217,201,163,.25);opacity:0}
.box b{font-family:var(--display);font-weight:400;font-size:44px;line-height:1}
.box span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--mute);display:block;margin-top:6px}
.cards{position:absolute;inset:0;pointer-events:none}
.card{position:absolute;left:50%;top:54%;width:min(300px,84vw);background:rgba(22,22,24,.92);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;opacity:0;backdrop-filter:blur(8px)}
.card .top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
.dot{width:8px;height:8px;border-radius:50%}
.card .top .t{margin-left:auto;font-family:var(--mono);font-size:11px}
.card h3{font-size:15px;font-weight:600;margin:8px 0 4px}
.card p{font-size:13.5px;color:#bdbbb4;margin:0}
.card .act{display:flex;gap:8px;margin-top:12px}
.card .act span{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
.card .act span:first-child{background:var(--fg);color:var(--ink);border-color:var(--fg)}

/* STILL */
.still{position:relative;padding-block:120px;overflow:hidden;
  background:radial-gradient(60% 70% at 50% 0%,rgba(217,201,163,.10),transparent 70%),var(--ink)}
.still::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.still .inner{position:relative;z-index:1;text-align:center}
.still h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,6vw,64px);margin:12px 0 0}
.still p{color:var(--mute);margin:14px auto 0;max-width:44ch}
.cta{display:inline-block;margin-top:30px;background:var(--fg);color:var(--ink);text-decoration:none;font-weight:600;padding:14px 24px;border-radius:999px}
.cta:focus-visible,nav a:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
footer{padding-block:30px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.stage{height:auto}.pin{position:relative;height:auto;min-height:100vh}}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/instrument-serif-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:italic;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-italic.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-400.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-500.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600.ttf') format('truetype')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400.ttf') format('truetype')}
body{margin:0}a{color:inherit}button{font:inherit}nav .logo{border:0;padding:0;border-radius:0;font-size:24px}.logo i{font-style:normal}
.business-lead{font-family:var(--display);font-size:clamp(30px,3.7vw,46px);line-height:1.1;margin:0 0 20px;color:var(--fg)}
.hero{padding-top:56px}.scroll-cue{text-decoration:none;display:inline-block;padding:10px 0}.hero-space{height:clamp(125px,18vw,190px)}
.skip{position:fixed;top:8px;left:12px;transform:translateY(-150%);z-index:10;padding:10px;background:var(--fg);color:var(--ink)}.skip:focus{transform:none}
.card .act button{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;min-height:34px}
.card .act button:first-child{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.card .sample-response{font-size:11px;color:var(--glow);line-height:1.5;margin-top:9px}.sample-response:empty{display:none}
.card{pointer-events:auto}.cards{pointer-events:none}.stage.enhanced .card{visibility:hidden}.stage.enhanced .card.is-visible{visibility:visible}
:focus-visible{outline:2px solid var(--glow);outline-offset:4px}.contact-options{display:flex;justify-content:center;gap:22px;margin-top:22px;font-size:13px;color:var(--mute)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px;align-items:center;font-size:12px;color:var(--mute)}.footer-links a{text-decoration:none}.footer-links button{border:0;background:none;color:inherit;cursor:pointer;padding:8px 0;margin-left:auto;font-size:12px}
footer p{margin:0}#wave,#field{pointer-events:none}.stage-copy{pointer-events:none}.box{pointer-events:none}
.motion-static .stage{height:auto}.motion-static .pin{position:relative;height:auto;min-height:0;padding:65px 20px}.motion-static #field{display:none}.motion-static .stage-copy{position:relative;top:auto;opacity:1!important;margin-bottom:35px}.motion-static .box{position:relative;left:auto;top:auto;opacity:1!important;transform:none!important;margin:35px auto}.motion-static .cards{position:relative;display:flex;gap:20px;justify-content:center;align-items:flex-start;flex-wrap:wrap}.motion-static .card{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important;visibility:visible!important;width:300px}
@media(max-width:760px){.inner{max-width:540px}.wrap{padding-inline:24px}.hero{padding-top:45px}.hero-space{height:170px}.business-lead{font-size:34px;margin-bottom:20px}h1{font-size:clamp(52px,11.7vw,78px)}.stage-copy{padding-inline:20px;top:8vh}.stage-copy h2{font-size:clamp(30px,7vw,42px)}.card{width:min(330px,88vw);padding:12px 15px}.card h3{font-size:14px}.card p{font-size:12px}.card .top{font-size:11px}.card .top .t{font-size:10px}.card .act{margin-top:9px}.still{padding-block:90px}.footer-links{gap:17px}.footer-links button{margin-left:0}.motion-static .pin{padding-inline:16px}}
@media(max-height:650px) and (min-width:761px){.stage-copy{top:5vh}.stage-copy h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.stage-copy{transition:none}}
#copyB{opacity:0}
/* One visual sentence: business → dp → digital partner → useful messages. */
@font-face{font-family:'Geist';font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-latin.woff2') format('woff2')}
:root{--body:'Geist',system-ui,sans-serif}
h1{font-size:clamp(60px,8vw,100px);line-height:.98;letter-spacing:-.025em;margin:0;font-kerning:normal}
h1>span,h1>em{display:block}h1 .business-lead{font:inherit;letter-spacing:inherit;line-height:inherit;margin:0 0 .08em;color:var(--fg)}
h1>em{margin-top:.04em;letter-spacing:-.02em}
.hero{padding-top:58px}.hero-space{height:clamp(125px,16vw,180px)}.sub{font-weight:400;letter-spacing:-.025em;line-height:1.5;margin-top:28px}
nav .logo{font-family:var(--body);font-weight:650;font-size:25px;letter-spacing:-1.25px}.stage{height:380svh}
.stage-copy{transition:none}.stage-copy h2{letter-spacing:-.02em;line-height:1.08}.card h3{letter-spacing:-.025em;font-weight:550}.card p{letter-spacing:-.012em;line-height:1.6}.card .top{letter-spacing:-.015em}
.box{--expand:0;width:calc(150px + 370px * var(--expand));max-width:calc(100% - 40px);height:160px;border-color:#292827;border-radius:12px;background:linear-gradient(145deg,#111112,#080809);box-shadow:0 30px 90px -35px #d9c9a32b,0 0 45px -20px #d9c9a315}
.partner-lockup{width:100%}.partner-mark{display:flex;align-items:baseline;justify-content:center;gap:calc(1px + 12px * var(--expand));font-family:var(--body);font-size:64px;font-weight:600;line-height:1.15;letter-spacing:-.065em;white-space:nowrap}
.partner-word{display:flex;align-items:baseline}.partner-tail{display:block;overflow:hidden;opacity:var(--expand);letter-spacing:inherit;text-align:left}
.digital-tail{width:calc(2.02em * var(--expand))}.partner-tail-end{width:calc(2.65em * var(--expand))}
.box .partner-caption{display:block;font-family:var(--mono);font-size:9px;color:var(--mute);letter-spacing:.18em;margin-top:16px;white-space:nowrap}
.motion-static .box{--expand:1;width:520px;max-width:100%;height:160px;display:grid;place-items:center}.motion-static .partner-mark{font-size:clamp(28px,5vw,64px)}
@media(max-width:760px){h1{font-size:clamp(53px,12.3vw,86px);line-height:1.02;letter-spacing:-.025em}h1 .business-lead{font-size:inherit;margin-bottom:.08em}.hero{padding-top:44px}.hero-space{height:145px}.sub{font-size:18px;max-width:25ch}.partner-mark{font-size:clamp(30px,7.5vw,48px)}.box{height:145px;width:calc(135px + 195px * var(--expand))}.box .partner-caption{font-size:8px}.stage{height:360svh}.motion-static .stage{height:auto}}
@media(max-width:350px){h1{font-size:49px}.wrap{padding-inline:20px}.hero-space{height:130px}.partner-mark{font-size:30px}.box .partner-caption{font-size:7px;letter-spacing:.13em}}
@media(prefers-reduced-motion:reduce){.stage{height:auto}}
.box .partner-word,.box .partner-tail{font:inherit;letter-spacing:inherit;color:inherit;margin:0}
.box .partner-word{display:flex}.box .partner-tail{display:block}
/* Claude Signal reference: locally hosted typography, gold identity and messaging demo. */
:root{--body:'Manrope',system-ui,sans-serif;--mute:#aaa89f}
html{scroll-behavior:smooth}
nav .logo{display:flex;align-items:center;min-width:44px;min-height:44px}nav a{min-height:44px}
h1{font-size:clamp(44px,8vw,96px);line-height:1;letter-spacing:-.01em;margin-top:18px}h1 .business-lead,h1>em{margin:0;letter-spacing:inherit}
.hero{padding-top:56px}.hero-space{height:clamp(140px,22vw,220px)}.sub{letter-spacing:normal;margin-top:22px}
.box{background:transparent;border:0;box-shadow:none;height:auto;width:calc(150px + 430px * var(--expand))}.partner-logo{display:block;margin:0 auto 24px;filter:drop-shadow(0 18px 40px #d9b46e40)}
.partner-mark{font-size:clamp(28px,5vw,54px);font-weight:400;letter-spacing:-.03em;gap:calc(1px + 12px * var(--expand))}.digital-tail{width:calc(2.3em * var(--expand))}.partner-tail-end{width:calc(3.35em * var(--expand))}.box .partner-caption{display:none}
.footer-mark{display:block;margin-bottom:16px}
.demo{padding-block:96px 110px}.demo .head{max-width:640px}.demo h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,6vw,62px);line-height:1.02;margin:12px 0 0;text-wrap:balance}.demo h2 em{color:var(--glow)}.demo .lede{color:#c9c7bf;font-size:18px;margin:16px 0 0;max-width:46ch}
.picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}.picker button{font:500 14px var(--body);color:var(--fg);background:transparent;border:1px solid var(--line);padding:10px 16px;min-height:44px;border-radius:999px;cursor:pointer}.picker button[aria-pressed=true]{background:var(--glow);color:var(--ink);border-color:var(--glow)}
.demo-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:center;margin-top:36px}.phone{background:#151517;border:1px solid var(--line);border-radius:32px;padding:18px 14px 22px;min-height:470px;box-shadow:0 40px 90px -40px #d9c9a340}.phone .bar{display:flex;align-items:center;gap:10px;padding:0 6px 14px;border-bottom:1px solid var(--line);margin-bottom:14px}.bar b{font-weight:600;font-size:15px;display:block}.bar small{color:var(--mute);font-size:12px}.thread{display:flex;flex-direction:column;gap:10px}.msg{max-width:86%;padding:10px 13px;border-radius:18px;font-size:15px;line-height:1.4}.msg.dp{background:#232326;border-bottom-left-radius:6px}.msg.you{background:var(--glow);color:var(--ink);align-self:flex-end;border-bottom-right-radius:6px}.when{display:block;font-family:var(--mono);font-size:10.5px;color:#b9b6ad;margin-bottom:3px;letter-spacing:.06em}.steps{display:grid;gap:26px;margin:0;padding:0;list-style:none}.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}.steps .n{font-family:var(--display);font-size:34px;line-height:1;color:var(--glow)}.steps h3{margin:0;font-size:19px;font-weight:600}.steps p{margin:4px 0 0;color:#bdbbb4;max-width:40ch}.saved{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);color:var(--mute);font-size:13px}
.stage:not(.enhanced){height:auto}.stage:not(.enhanced) .pin{position:relative;height:auto;padding:65px 20px}.stage:not(.enhanced) #field{display:none}.stage:not(.enhanced) .stage-copy,.stage:not(.enhanced) .box,.stage:not(.enhanced) .card{position:relative;inset:auto;opacity:1;transform:none;margin:24px auto}.stage:not(.enhanced) .box{--expand:1}.stage:not(.enhanced) .cards{position:relative;display:flex;flex-wrap:wrap;gap:16px}.stage:not(.enhanced) #copyB{opacity:1}
.motion-static .box{height:auto}.card .act button{min-height:44px}
@media(max-width:760px){h1{font-size:clamp(46px,11.7vw,78px)}.hero{padding-top:45px}.demo-grid{grid-template-columns:1fr;gap:40px}.phone{min-height:420px}.demo{padding-block:70px 85px}.partner-mark,.motion-static .partner-mark{font-size:clamp(26px,6.7vw,44px)}.partner-logo{width:110px;height:110px}.box{max-width:calc(100% - 24px)}.stage-copy h2{font-size:clamp(28px,7vw,42px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.motion-static{scroll-behavior:auto}
