/* ADSCHMIEDE — marketing site · "Ink & Signal", motion edition
   Paper white, ink black, one signal red. Editorial, flat, typographic, moving. */
:root{
  --paper:#fafafa; --ink:#161616; --ink-2:#3d3d3d; --ink-3:#6f6f6f; --line:#e4e4e4; --line-2:#cfcfcf;
  --signal:#e8351f; --signal-ink:#b8260f; --white:#fff;
  --sans:"Inter",-apple-system,system-ui,sans-serif; --display:"Inter Tight","Inter",sans-serif; --serif:"Instrument Serif",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --z-top:30; --z-prog:40;
}
*{ box-sizing:border-box; } html{ scroll-behavior:smooth; }
html,body{ overflow-x:clip; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
h1,h2,h3{ text-wrap:balance; }
.container{ max-width:1200px; margin:0 auto; padding:0 32px; }

/* buttons */
.btn{ white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:46px; padding:0 22px; border-radius:999px; border:1px solid var(--ink); background:var(--ink); color:var(--white); font-weight:600; font-size:14.5px; font-family:inherit; cursor:pointer; transition:transform 160ms var(--ease), background 160ms, color 160ms, border-color 160ms; will-change:transform; }
.btn:active{ transform:scale(.97) !important; }
.btn--signal{ background:var(--signal); border-color:var(--signal); }
.btn--signal:hover{ background:var(--signal-ink); border-color:var(--signal-ink); }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--outline:hover{ border-color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.28); }
.btn--ghost:hover{ border-color:var(--white); }
.btn--lg{ height:54px; padding:0 28px; font-size:15.5px; }
.btn .arr{ width:16px; height:16px; transition:transform 200ms var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }

/* scroll progress */
.progress{ position:fixed; top:0; left:0; height:2px; width:100%; background:var(--signal); transform-origin:0 50%; transform:scaleX(0); z-index:var(--z-prog); pointer-events:none; }

/* header: full bar that folds into an ink pill once you scroll */
.top{ position:fixed; top:0; left:0; right:0; z-index:var(--z-top); padding:0 32px; pointer-events:none; }
.top__inner{ pointer-events:auto; max-width:1200px; height:76px; margin:0 auto; display:flex; align-items:center; gap:28px; padding:0; border-radius:0; background:rgba(250,250,250,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:max-width 520ms var(--ease), height 520ms var(--ease), transform 520ms var(--ease), background 320ms, border-radius 520ms var(--ease), padding 520ms var(--ease), box-shadow 320ms; }
.top__inner::before{ content:""; position:absolute; left:-32px; right:-32px; top:0; bottom:0; background:inherit; border-bottom:inherit; z-index:-1; backdrop-filter:inherit; transition:opacity 300ms; }
.top__inner{ position:relative; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; letter-spacing:-.03em; font-size:19px; }
.brand__mark{ width:30px; height:30px; border-radius:8px; background:var(--ink); color:var(--white); display:grid; place-items:center; transition:background 300ms, color 300ms; }
.brand__mark svg{ width:17px; height:17px; }
.brand__name{ transition:opacity 200ms, max-width 400ms var(--ease); max-width:200px; overflow:hidden; white-space:nowrap; }
.top__nav{ display:flex; gap:26px; margin-left:auto; font-size:14.5px; font-weight:500; color:var(--ink-2); }
.top__nav a{ position:relative; padding:4px 0; }
.top__nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:currentColor; transition:right 240ms var(--ease); }
.top__nav a:hover::after{ right:0; }
.top__right{ display:flex; align-items:center; gap:18px; }
.top__login{ font-size:14.5px; font-weight:500; color:var(--ink-2); }
.top .btn{ height:40px; padding:0 18px; font-size:14px; }
.top.is-compact .top__inner{ max-width:760px; height:56px; transform:translateY(12px); background:var(--ink); color:var(--white); border-radius:999px; padding:0 8px 0 10px; border-bottom-color:transparent; box-shadow:0 24px 50px -24px rgba(0,0,0,.55); gap:18px; }
.top.is-compact .top__inner::before{ opacity:0; }
.top.is-compact .brand__mark{ background:var(--white); color:var(--ink); }
.top.is-compact .brand__name{ opacity:0; max-width:0; }
.top.is-compact .top__nav{ color:#d6d6d6; }
.top.is-compact .top__login{ display:none; }

/* hero */
.hero{ padding:150px 0 0; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; min-height:calc(100vh - 150px); }
.hero__grid > *{ min-width:0; }
.hero__kicker{ display:inline-flex; align-items:center; gap:10px; margin:0 0 22px; font-family:var(--mono); font-size:13px; color:var(--ink-2); }
.hero__kicker .dot{ width:8px; height:8px; border-radius:50%; background:var(--signal); animation:pulse 2.4s var(--ease-io) infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.5); } }
.h1{ font-family:var(--display); font-weight:800; font-size:clamp(46px,6.2vw,84px); letter-spacing:-.04em; line-height:.98; margin:0 0 26px; }
.h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--signal); }
.ln{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.ln > span, .ln > em{ display:block; }
.js .ln > span, .js .ln > em{ transform:translateY(110%); animation:lineUp 1100ms var(--ease) forwards; }
.js .ln:nth-child(2) > *{ animation-delay:90ms; } .js .ln:nth-child(3) > *{ animation-delay:180ms; } .js .ln:nth-child(4) > *{ animation-delay:270ms; }
@keyframes lineUp{ to{ transform:none; } }
.swap{ display:inline-grid; vertical-align:bottom; overflow:hidden; }
.swap > span{ grid-area:1/1; display:block; transform:translateY(105%); opacity:0; transition:transform 700ms var(--ease), opacity 400ms; white-space:nowrap; }
.swap > span.is-on{ transform:none; opacity:1; }
.swap > span.is-out{ transform:translateY(-105%); opacity:0; }
.lead{ font-size:18.5px; line-height:1.5; color:var(--ink-2); max-width:50ch; margin:0 0 30px; }
.js .lead, .js .hero .cta, .js .hero__models, .js .hero__kicker{ opacity:0; animation:fadeUp 900ms var(--ease) forwards; }
.js .hero__kicker{ animation-delay:0ms; } .js .lead{ animation-delay:360ms; } .js .hero .cta{ animation-delay:480ms; } .js .hero__models{ animation-delay:600ms; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero__models{ margin:28px 0 0; font-family:var(--mono); font-size:12.5px; color:var(--ink-3); }

/* stage: three living frames + product-UI chips, parallax on pointer and scroll */
.stage{ position:relative; height:640px; --mx:0px; --my:0px; --sy:0px; }
.stage__cards{ position:absolute; inset:0; }
.card{ position:absolute; margin:0; aspect-ratio:9/16; border-radius:20px; overflow:hidden; background:#111; color:var(--white); box-shadow:0 60px 90px -44px rgba(0,0,0,.6); transform:translate3d(calc(var(--mx) * var(--depth)), calc(var(--my) * var(--depth) + var(--sy) * var(--depth)), 0) rotate(var(--rot)); will-change:transform; }
.card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card figcaption{ position:absolute; left:0; right:0; bottom:0; padding:56px 16px 16px; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55) 40%, rgba(0,0,0,.88)); display:flex; flex-direction:column; gap:4px; }
.card figcaption b{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:20px; line-height:1; }
.card figcaption small{ font-family:var(--mono); font-size:10.5px; color:#d6d6d6; }
.card--a{ left:0; top:110px; width:190px; z-index:1; }
.card--main{ left:50%; margin-left:-135px; top:10px; width:270px; z-index:3; }
.card--c{ right:0; top:150px; width:190px; z-index:2; }
.js .card{ opacity:0; animation:cardIn 1200ms var(--ease) forwards; }
.js .card--a{ animation-delay:200ms; } .js .card--main{ animation-delay:80ms; } .js .card--c{ animation-delay:320ms; }
@keyframes cardIn{ from{ opacity:0; transform:translate3d(0,40px,0) rotate(var(--rot)) scale(.96); } to{ opacity:1; } }
.chip{ white-space:nowrap; position:absolute; z-index:4; display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; padding:10px 14px 10px 12px; border-radius:14px; background:var(--white); color:var(--ink); font-size:13.5px; font-weight:600; letter-spacing:-.01em; box-shadow:0 18px 40px -18px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.04); transform:translate3d(calc(var(--mx) * var(--depth)), calc(var(--my) * var(--depth) + var(--sy) * var(--depth)), 0); will-change:transform; }
.chip em{ grid-column:2; font-style:normal; font-weight:400; font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.chip > span:first-child{ grid-row:1/3; }
.chip__ok{ width:22px; height:22px; border-radius:50%; background:var(--ink); position:relative; }
.chip__ok::after{ content:""; position:absolute; left:7px; top:4px; width:5px; height:9px; border:solid var(--white); border-width:0 2px 2px 0; transform:rotate(45deg); }
.chip__sw{ width:22px; height:22px; border-radius:6px; background:var(--signal); }
.chip__eur{ font-family:var(--mono); font-size:13px; font-weight:500; padding:4px 8px; border-radius:8px; background:var(--ink); color:var(--white); }
.chip--1{ left:-6px; top:40px; } .chip--2{ right:-10px; top:70px; } .chip--3{ left:30%; bottom:30px; }
.js .chip{ opacity:0; animation:chipIn 900ms var(--ease) forwards; }
.js .chip--1{ animation-delay:900ms; } .js .chip--2{ animation-delay:1150ms; } .js .chip--3{ animation-delay:1400ms; }
@keyframes chipIn{ from{ opacity:0; transform:translate3d(0,14px,0) scale(.92); } to{ opacity:1; } }

/* marquee */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; margin:40px 0 0; padding:18px 0; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:48px; width:max-content; animation:marq 46s linear infinite; font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink-2); white-space:nowrap; }
.marquee__track span::before{ content:"·"; margin-right:48px; color:var(--signal); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* sections */
.section{ padding:140px 0; }
.section--ink{ background:var(--ink); color:var(--white); }
.section--ink .h2{ color:var(--white); } .section--ink .sub{ color:#b8b8b8; }
.h2{ font-family:var(--display); font-weight:800; font-size:clamp(34px,4.6vw,62px); letter-spacing:-.04em; line-height:1.0; margin:0 0 16px; max-width:18ch; }
.h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; }
.sub{ font-size:17px; color:var(--ink-2); max-width:56ch; margin:0; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }

/* feature list: editorial rows */
.rows{ margin-top:64px; border-top:1px solid var(--line); }
.row{ display:grid; grid-template-columns:200px 1fr 1fr; gap:32px; padding:36px 0; border-bottom:1px solid var(--line); align-items:baseline; transition:background 200ms; }
.row .n{ font-family:var(--mono); font-size:13px; color:var(--signal); }
.row h3{ margin:0; font-family:var(--display); font-weight:700; font-size:27px; letter-spacing:-.03em; }
.row p{ margin:0; color:var(--ink-2); font-size:15.5px; }
.row .tag{ display:inline-block; margin-left:10px; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--white); background:var(--signal); vertical-align:middle; font-family:var(--sans); }
.row--img{ grid-template-columns:200px 1fr 1fr 220px; align-items:center; }
.row__img{ display:block; width:220px; aspect-ratio:4/5; border-radius:14px; overflow:hidden; justify-self:end; }
.row__img img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.row--img:hover .row__img img{ transform:scale(1.05); }
.js .rv--clip{ clip-path:inset(0 0 100% 0); transition:clip-path 1100ms var(--ease); }
.js .rv.in .rv--clip{ clip-path:inset(0 0 0 0); }

/* cloner: compare slider + live process panel */
.clone{ margin-top:64px; display:grid; grid-template-columns:380px 1fr; gap:48px; align-items:center; }
.cmp{ position:relative; width:100%; aspect-ratio:9/16; border-radius:22px; overflow:hidden; background:#111; user-select:none; touch-action:pan-y; }
.cmp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cmp__other{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--x)) 0 0); }
.cmp__other img{ filter:grayscale(1) contrast(1.05) brightness(.96); }
.cmp__line{ position:absolute; top:0; bottom:0; left:var(--x); width:2px; background:var(--white); transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.2); }
.cmp__knob{ position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:var(--white); color:var(--ink); display:grid; place-items:center; box-shadow:0 10px 30px -10px rgba(0,0,0,.6); }
.cmp__knob svg{ width:20px; height:20px; }
.cmp__tag{ position:absolute; top:14px; padding:6px 10px; border-radius:999px; font-family:var(--mono); font-size:11px; background:rgba(0,0,0,.55); color:var(--white); backdrop-filter:blur(6px); }
.cmp__tag--l{ left:14px; } .cmp__tag--r{ right:14px; background:var(--signal); }
.cmp__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; }
.proc{ border:1px solid rgba(255,255,255,.12); border-radius:20px; background:#1c1c1c; overflow:hidden; font-size:14.5px; }
.proc__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.08); font-family:var(--mono); font-size:12.5px; color:#cfcfcf; }
.proc__url{ display:inline-flex; align-items:center; min-height:20px; }
.caret{ display:inline-block; width:1px; height:14px; margin-left:2px; background:var(--signal); animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.proc__state{ color:#8a8a8a; }
.proc__state.is-ok{ color:var(--white); }
.proc__list{ list-style:none; margin:0; padding:6px 20px; }
.proc__row{ display:grid; grid-template-columns:34px 1fr auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); opacity:0; transform:translateY(8px); transition:opacity 500ms var(--ease), transform 500ms var(--ease); }
.proc.play .proc__row{ opacity:1; transform:none; }
.proc.play .proc__row:nth-child(1){ transition-delay:1100ms; } .proc.play .proc__row:nth-child(2){ transition-delay:1500ms; } .proc.play .proc__row:nth-child(3){ transition-delay:1900ms; }
.proc__row b{ width:34px; height:52px; border-radius:7px; background:#2c2c2c; transition:background 400ms; }
.proc.forged .proc__row b{ background:var(--signal); }
.proc.forged .proc__row:nth-child(1) b{ transition-delay:0ms; } .proc.forged .proc__row:nth-child(2) b{ transition-delay:160ms; } .proc.forged .proc__row:nth-child(3) b{ transition-delay:320ms; }
.proc__row span{ display:flex; flex-direction:column; gap:2px; color:#b8b8b8; font-size:13.5px; }
.proc__row strong{ color:var(--white); font-weight:600; font-size:14.5px; }
.proc__row em{ font-style:normal; font-family:var(--mono); font-size:12px; color:#8a8a8a; }
.proc__foot{ display:flex; align-items:center; gap:16px; padding:16px 20px; font-size:13px; color:#9a9a9a; }
.proc__sum{ margin-left:auto; font-family:var(--mono); font-size:15px; color:var(--white); }
.proc__sum i{ font-style:normal; }
.proc__go{ padding:9px 16px; border-radius:999px; background:var(--white); color:var(--ink); font-weight:600; font-size:13.5px; opacity:.35; transition:opacity 300ms; }
.proc.forged .proc__go{ opacity:1; }

/* how: sticky headline with rolling step number, scroll-activated steps with mini UI mocks */
.how{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.how__sticky{ position:sticky; top:120px; }
.how__num{ margin-top:48px; display:flex; align-items:baseline; gap:12px; font-family:var(--serif); font-style:italic; }
.how__cur{ display:inline-block; font-size:clamp(72px,9vw,120px); line-height:.9; color:var(--signal); letter-spacing:-.02em; }
.how__cur.is-roll{ animation:roll 500ms var(--ease); }
@keyframes roll{ 0%{ transform:translateY(-30%); opacity:0; } 100%{ transform:none; opacity:1; } }
.how__of{ font-size:28px; color:var(--line-2); }
.how__steps{ position:relative; padding-left:40px; }
.rail{ position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line); }
.rail i{ position:absolute; left:0; top:0; width:1px; height:0; background:var(--signal); transition:height 600ms var(--ease); }
.stepx{ padding:28px 0 72px; position:relative; }
.stepx::before{ content:""; position:absolute; left:-44px; top:34px; width:9px; height:9px; border-radius:50%; background:var(--line-2); border:2px solid var(--paper); transition:background 300ms, transform 300ms var(--ease); }
.stepx.is-active::before{ background:var(--signal); transform:scale(1.4); }
.stepx h4{ margin:22px 0 8px; font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.03em; color:var(--ink-3); transition:color 400ms; }
.stepx.is-active h4{ color:var(--ink); }
.stepx p{ margin:0; font-size:15.5px; color:var(--ink-2); max-width:46ch; }
.mock{ border:1px solid var(--line); border-radius:16px; background:var(--white); padding:18px; min-height:150px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.mock__field{ height:46px; border:1px solid var(--line-2); border-radius:10px; display:flex; align-items:center; padding:0 14px; font-family:var(--mono); font-size:13px; color:var(--ink); overflow:hidden; }
.mock__type{ display:inline-block; white-space:nowrap; overflow:hidden; width:0; border-right:1px solid var(--signal); }
.stepx.is-active .mock__type{ animation:type 1400ms steps(26) 200ms forwards; }
@keyframes type{ to{ width:100%; } }
.mock__pills{ display:flex; gap:8px; } .mock__pills span{ padding:6px 12px; border-radius:999px; border:1px solid var(--line-2); font-size:12.5px; font-weight:500; }
.mock__pills span:first-child{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.mock__thumbs{ display:flex; gap:10px; } .mock__thumbs span{ width:54px; height:54px; border-radius:10px; background:#eee; transform:scale(.8); opacity:0; transition:transform 500ms var(--ease), opacity 400ms; }
.mock__thumbs span.is-red{ background:var(--signal); }
.stepx.is-active .mock__thumbs span{ transform:none; opacity:1; }
.stepx.is-active .mock__thumbs span:nth-child(2){ transition-delay:120ms; } .stepx.is-active .mock__thumbs span:nth-child(3){ transition-delay:240ms; }
.mock__lines{ display:flex; flex-direction:column; gap:8px; } .mock__lines i{ display:block; height:8px; border-radius:4px; background:#e6e6e6; width:0; transition:width 700ms var(--ease); }
.stepx.is-active .mock__lines i:nth-child(1){ width:88%; transition-delay:300ms; } .stepx.is-active .mock__lines i:nth-child(2){ width:64%; transition-delay:420ms; } .stepx.is-active .mock__lines i:nth-child(3){ width:76%; transition-delay:540ms; }
.mock__row{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-2); padding:6px 0; border-bottom:1px solid var(--line); opacity:0; transform:translateX(-8px); transition:opacity 400ms, transform 500ms var(--ease); }
.mock__row em{ font-style:normal; font-family:var(--mono); font-size:12.5px; color:var(--ink); }
.mock__row--sum{ border:0; font-weight:600; color:var(--ink); } .mock__row--sum em{ color:var(--signal); }
.stepx.is-active .mock__row{ opacity:1; transform:none; }
.stepx.is-active .mock__row:nth-child(2){ transition-delay:120ms; } .stepx.is-active .mock__row:nth-child(3){ transition-delay:240ms; } .stepx.is-active .mock__row:nth-child(4){ transition-delay:420ms; }
.mock__bar{ height:10px; border-radius:5px; background:#eee; overflow:hidden; } .mock__bar i{ display:block; height:100%; width:0; background:var(--ink); transition:width 1600ms var(--ease-io); }
.stepx.is-active .mock__bar:nth-child(1) i{ width:100%; } .stepx.is-active .mock__bar:nth-child(2) i{ width:100%; transition-delay:200ms; } .stepx.is-active .mock__bar:nth-child(3) i{ width:100%; transition-delay:400ms; }
.mock__done{ font-family:var(--mono); font-size:12.5px; color:var(--signal); opacity:0; transition:opacity 300ms 1800ms; }
.stepx.is-active .mock__done{ opacity:1; }

/* models: white wordmarks on ink, two rows drifting with scroll */
.models{ background:var(--ink); color:var(--white); padding:140px 0 120px; overflow:hidden; }
.models .h2{ color:var(--white); } .models .sub{ color:#b8b8b8; }
.mrows{ margin-top:72px; display:flex; flex-direction:column; gap:8px; }
.mrow[data-dir="-1"]{ padding-left:max(32px, calc((100vw - 1200px) / 2 + 32px)); }
.mrow{ display:flex; gap:.45em; white-space:nowrap; font-family:var(--display); font-weight:800; font-size:clamp(52px,8.6vw,124px); letter-spacing:-.045em; line-height:1.05; color:var(--white); will-change:transform; }
.mrow[data-dir="1"]{ margin-left:-18vw; }
.m{ position:relative; padding-right:.45em; transition:color 300ms; }
.m::before{ content:"/"; position:absolute; right:0; top:0; color:#3a3a3a; font-weight:400; }
.m::after{ content:attr(data-p); position:absolute; left:.08em; top:-.52em; font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:0; color:var(--signal); opacity:0; transform:translateY(6px); transition:opacity 250ms, transform 300ms var(--ease); white-space:nowrap; }
.m:hover{ color:var(--signal); } .m:hover::after{ opacity:1; transform:none; }

/* forge: full-bleed video */
.forge{ position:relative; min-height:620px; display:grid; align-items:end; overflow:hidden; background:var(--ink); color:var(--white); }
.forge__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7; }
.forge__text{ position:relative; padding-top:120px; padding-bottom:64px; }
.forge__panel{ display:inline-block; max-width:640px; padding:36px 40px; border-radius:22px; background:rgba(22,22,22,.58); backdrop-filter:blur(22px) saturate(.9); -webkit-backdrop-filter:blur(22px) saturate(.9); border:1px solid rgba(255,255,255,.1); }
.forge .h2 em{ color:var(--signal); }
.forge .h2{ color:var(--white); margin-bottom:12px; } .forge p{ color:#e6e6e6; font-size:17px; max-width:50ch; margin:0; }

/* pricing */
.price{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.big{ display:flex; align-items:baseline; gap:.04em; font-family:var(--display); font-weight:800; font-size:clamp(84px,14vw,190px); letter-spacing:-.06em; line-height:.86; color:var(--signal); font-variant-numeric:tabular-nums; margin-bottom:20px; }
.big__pct{ font-size:.5em; letter-spacing:-.03em; }
.price table{ width:100%; border-collapse:collapse; font-size:15px; margin-top:12px; }
.price td{ padding:17px 0; border-bottom:1px solid var(--line); }
.price td:last-child{ text-align:right; font-family:var(--mono); font-size:14px; white-space:nowrap; }
.price td:first-child{ color:var(--ink-2); }
.price__us td{ color:var(--ink) !important; font-weight:600; } .price__us td:last-child{ color:var(--signal) !important; }

/* vs Higgsfield */
.vs{ margin-top:120px; border-top:1px solid var(--line); padding-top:56px; }
.vs__head{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:36px; }
.vs__head h3{ margin:0; font-family:var(--display); font-weight:800; font-size:clamp(28px,3.4vw,42px); letter-spacing:-.035em; line-height:1.02; }
.vs__head p{ margin:0; color:var(--ink-2); font-size:16px; max-width:52ch; }
.vs__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -32px; padding:0 32px; }
.vs__table{ width:100%; min-width:760px; border-collapse:collapse; font-size:14.5px; }
.vs__table th{ text-align:left; font-weight:600; padding:0 14px 14px 0; vertical-align:bottom; border-bottom:1px solid var(--ink); font-size:14px; }
.vs__table th small{ display:block; font-weight:400; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.vs__table td{ padding:14px 14px 14px 0; border-bottom:1px solid var(--line); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.vs__table td:first-child{ color:var(--ink); font-weight:500; }
.vs__table td small{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-left:4px; }
.vs__table .vs__us{ color:var(--ink); font-weight:600; background:#f1f1f1; padding-left:14px; }
.vs__table th.vs__us{ background:#f1f1f1; }
.vs__table .vs__row--key td{ font-weight:600; color:var(--ink); }
.vs__table .vs__row--key td.vs__us{ color:var(--signal); }
.vs__note{ margin:18px 0 0; font-size:12.5px; color:var(--ink-3); max-width:90ch; line-height:1.5; }

/* final + giant wordmark */
.final{ position:relative; padding:140px 0 0; text-align:center; background:var(--ink); color:var(--white); overflow:hidden; }
.final .h2{ color:var(--white); margin:0 auto 16px; max-width:16ch; }
.final .sub{ color:#b8b8b8; margin:0 auto 32px; }
.final .cta{ justify-content:center; }
.giant{ position:relative; margin-top:96px; height:.72em; font-family:var(--display); font-weight:800; font-size:clamp(84px,19vw,300px); letter-spacing:-.06em; line-height:1; overflow:hidden; color:var(--white); }
.giant span{ position:absolute; left:50%; top:0; transform:translateX(-50%); white-space:nowrap; }
.giant i{ position:absolute; left:calc(50% + .435em * 4.6); top:.06em; width:.11em; height:.11em; border-radius:50%; background:var(--signal); }
footer{ background:var(--ink); color:#8a8a8a; border-top:1px solid rgba(255,255,255,.1); padding:26px 0; font-size:13.5px; }
footer .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* reveals */
.rv{ opacity:1; transform:none; }
.js .rv{ opacity:0; transform:translateY(22px); filter:blur(5px); transition:opacity 800ms var(--ease), transform 900ms var(--ease), filter 700ms var(--ease); }
.js .rv.in{ opacity:1; transform:none; filter:blur(0); }

/* auth */
.auth{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth__side{ background:var(--ink); color:var(--white); padding:48px; display:flex; flex-direction:column; justify-content:space-between; }
.auth__side .h2{ color:var(--white); font-size:clamp(34px,4vw,56px); }
.auth__side .h2 em{ color:var(--signal); }
.auth__side p{ color:#b8b8b8; max-width:40ch; }
.auth__main{ display:grid; place-items:center; padding:48px 32px; }
.auth__card{ width:100%; max-width:400px; }
.auth h1{ font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-.035em; margin:0 0 6px; }
.auth p.sub{ font-size:15px; margin:0 0 26px; }
.field{ margin-bottom:14px; } .field label{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; }
.input{ width:100%; height:48px; padding:0 14px; border-radius:10px; border:1px solid var(--line-2); background:var(--white); color:var(--ink); font-size:15px; font-family:inherit; outline:none; transition:border-color 150ms, box-shadow 150ms; }
.input:focus{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(22,22,22,.08); }
.auth .btn{ width:100%; margin-top:6px; }
.auth .err{ min-height:18px; color:var(--signal-ink); font-size:13.5px; margin:4px 0 6px; }
.auth .switch{ margin-top:20px; font-size:14px; color:var(--ink-3); }
.auth .switch a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.auth .back{ display:inline-block; margin-top:28px; font-size:13.5px; color:var(--ink-3); }
.hidden{ display:none !important; }

@media (max-width:1100px){ .stage{ height:560px; } .card--main{ width:240px; margin-left:-120px; } .card--a,.card--c{ width:170px; } }
@media (max-width:980px){
  .hero{ padding-top:120px; } .hero__grid{ grid-template-columns:1fr; min-height:0; gap:24px; }
  .stage{ height:520px; max-width:520px; margin:32px auto 0; --sy:0px !important; } .chip--1{ display:none; } .chip--2{ right:0; top:24px; } .chip--3{ left:0; bottom:16px; }
  .row--img{ grid-template-columns:1fr; } .row__img{ width:100%; max-width:320px; justify-self:start; } .row{ grid-template-columns:1fr; gap:8px; }
  .split, .price, .auth, .how, .clone, .vs__head{ grid-template-columns:1fr; }
  .how__sticky{ position:static; } .how__num{ display:none; } .how{ gap:40px; }
  .cmp{ max-width:380px; }
  .auth__side{ display:none; } .top__nav{ display:none; } .top.is-compact .top__inner{ max-width:420px; }
  .mrow{ font-size:clamp(44px,11vw,80px); }
}
@media (max-width:560px){
  .container{ padding:0 20px; } .section{ padding:88px 0; } .top{ padding:0 16px; } .vs{ margin-top:80px; } .vs__scroll{ margin:0 -20px; padding:0 20px; }
  .top__inner{ gap:12px; } .top .btn{ padding:0 14px; font-size:13px; } .top__login{ display:none; }
  .top__inner::before{ left:-16px; right:-16px; }
  .stage{ height:440px; } .card--main{ width:190px; margin-left:-95px; } .card--a,.card--c{ width:130px; top:120px; } .card figcaption b{ font-size:16px; } .card figcaption small{ font-size:9.5px; }
  .chip{ font-size:12px; padding:8px 10px; } .chip em{ display:none; } .chip > span:first-child{ grid-row:auto; } .chip--3{ left:10px; bottom:10px; }
  .h1{ font-size:clamp(40px,12vw,56px); }
  .models{ padding:96px 0 80px; } .mrows{ margin-top:48px; } .mrow[data-dir="-1"]{ padding-left:20px; } .mrow[data-dir="1"]{ margin-left:-4vw; }
  .forge{ min-height:480px; } .forge__panel{ padding:24px 22px; border-radius:16px; } .giant{ margin-top:64px; }
  .stepx{ padding-bottom:56px; } .how__steps{ padding-left:28px; } .stepx::before{ left:-32px; }
}
@media (prefers-reduced-motion:reduce){
  .js .rv{ transition:opacity 300ms; transform:none; filter:none; } .marquee__track{ animation:none; } .btn .arr{ transition:none; }
  .js .ln > span, .js .ln > em, .js .card, .js .chip, .js .lead, .js .hero .cta, .js .hero__models, .js .hero__kicker{ animation:none; opacity:1; transform:none; }
  .hero__kicker .dot{ animation:none; } .js .rv--clip{ clip-path:none; }
  .top__inner{ transition:none; } .card, .chip{ transform:rotate(var(--rot)); }
}