/* ============================================================
   ReplyTools — every call, answered
   Electric-blue on near-black. Ultra-condensed grotesk + mono.
   ============================================================ */

:root{
  /* — surface — */
  --bg:        #080809;
  --bg-2:      #0c0c0f;
  --bg-3:      #111116;
  --line:      rgba(255,255,255,.085);
  --line-2:    rgba(255,255,255,.14);

  /* — ink — */
  --ink:       #f3f1ec;
  --ink-dim:   rgba(243,241,236,.58);
  --ink-faint: rgba(243,241,236,.34);
  --ink-ghost: rgba(243,241,236,.14);

  /* — accent: electric blue — */
  --acc:       #2f6bff;
  --acc-hi:    #5e90ff;
  --acc-deep:  #1547c8;
  --acc-glow:  rgba(47,107,255,.55);
  --acc-soft:  rgba(47,107,255,.13);
  --on-acc:    #f6f9ff;

  /* — type — */
  --f-display: "Anton", "Archivo", sans-serif;
  --f-grotesk: "Archivo", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* — motion — */
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --dur:       .9s;

  --gut: clamp(20px, 5.5vw, 96px);
  --maxw: 1560px;
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
html,body{ background:var(--bg); }
body{
  font-family:var(--f-grotesk);
  color:var(--ink);
  line-height:1.5;
  font-size:clamp(15px,1.05vw,17px);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.01em;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }
::selection{ background:var(--acc); color:var(--on-acc); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:none; }
canvas{ display:block; }

/* ---------- atmosphere: grain + mesh + vignette ---------- */
#grain{
  position:fixed; inset:-150%; z-index:9000; pointer-events:none;
  width:400%; height:400%;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 16%{transform:translate(-6%,4%)}
  33%{transform:translate(4%,-7%)} 50%{transform:translate(-5%,6%)}
  66%{transform:translate(7%,3%)} 83%{transform:translate(-3%,-5%)}
  100%{transform:translate(0,0)}
}
#mesh{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 18% 12%, rgba(47,107,255,.12), transparent 60%),
    radial-gradient(50vw 50vw at 86% 78%, rgba(120,90,255,.07), transparent 62%),
    radial-gradient(70vw 60vw at 50% 120%, rgba(47,107,255,.07), transparent 60%);
  filter:blur(20px); opacity:.9;
  animation:meshdrift 26s ease-in-out infinite alternate;
}
@keyframes meshdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.08)}
  100%{transform:translate3d(3%,-2%,0) scale(1.04)}
}
#vignette{
  position:fixed; inset:0; z-index:8000; pointer-events:none;
  background:radial-gradient(130% 110% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%);
}

/* ---------- custom cursor ---------- */
#cur,#cur-dot{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  border-radius:50%; will-change:transform; }
#cur{
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid var(--acc);
  transition:width .3s var(--ease), height .3s var(--ease),
    margin .3s var(--ease), background .3s, border-color .3s, opacity .3s;
  mix-blend-mode:normal;
}
#cur-dot{
  width:4px; height:4px; margin:-2px 0 0 -2px;
  background:var(--acc);
  transition:opacity .3s, transform .2s;
}
#cur.is-hover{ width:42px; height:42px; margin:-21px 0 0 -21px;
  background:var(--acc-soft); border-color:transparent; }
#cur.is-press{ width:18px; height:18px; margin:-9px 0 0 -9px; }
@media (hover:none){ #cur,#cur-dot{ display:none; } }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }
.eyebrow{
  font-family:var(--f-mono); font-size:clamp(10px,.78vw,12px);
  letter-spacing:.28em; text-transform:uppercase; color:var(--acc);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--acc); display:inline-block; }
.eyebrow.no-tick::before{ display:none; }

/* mask/unmask reveal */
.mask{ overflow:hidden; display:block; }
.mask > *{ display:block; transform:translateY(110%);
  transition:transform 1s var(--ease); transition-delay:var(--d,0s); }
.in .mask > *, .mask.in > *{ transform:translateY(0); }

.rise{ opacity:0; transform:translateY(34px); filter:blur(6px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease),
    filter .9s var(--ease-out); transition-delay:var(--d,0s); }
.in .rise, .rise.in{ opacity:1; transform:none; filter:blur(0); }

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:6000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut); mix-blend-mode:normal;
  transition:background .5s var(--ease), backdrop-filter .5s, padding .5s var(--ease),
    border-color .5s;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(8,8,9,.62); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  padding-block:13px; border-bottom-color:var(--line);
}
.brand{ font-family:var(--f-mono); font-size:14px; letter-spacing:-.02em;
  font-weight:500; display:flex; align-items:center; gap:9px; }
.brand b{ font-weight:700; color:var(--acc); }
.brand .brand-mk{ height:22px; width:auto; display:block; flex:none;
  filter:drop-shadow(0 0 10px var(--acc-glow)); }
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.55);opacity:.55} }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,2.2vw,40px); }
.nav-links a:not(.btn){
  font-family:var(--f-mono); font-size:12px; letter-spacing:.04em;
  color:var(--ink-dim); position:relative; padding:4px 0;
  transition:color .35s var(--ease);
}
.nav-links a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--acc); transform:scaleX(0);
  transform-origin:right; transition:transform .45s var(--ease); }
.nav-links a:not(.btn):hover{ color:var(--ink); }
.nav-links a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:760px){ .nav-links a:not(.btn){ display:none; } }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-grotesk); font-weight:600; font-size:14.5px; letter-spacing:.005em;
  padding:14px 28px; border-radius:100px; border:1px solid var(--line-2);
  color:var(--ink); overflow:hidden; will-change:transform;
  /* stacked hard edges = visible slab thickness; soft drop = float */
  box-shadow:
    0 1px 0 #22222a, 0 2px 0 #1c1c23, 0 3px 0 #16161c,
    0 4px 0 #111115, 0 5px 0 #0c0c10,
    0 16px 24px -8px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition:color .4s var(--ease), border-color .4s var(--ease),
    box-shadow .45s var(--ease),
    transform .68s cubic-bezier(.22,1.45,.36,1);
}
/* cursor-tracked shiny rim — catches light along the edge as it moves */
.btn::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit; padding:1.5px;
  background:radial-gradient(130px 130px at var(--mx,50%) var(--my,-20%),
    rgba(255,255,255,.96), var(--acc) 40%, transparent 74%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
}
.btn:hover::after{ opacity:1; }
/* while the cursor is engaged, follow fast & tight; on release the base
   spring transition above eases it home with a little overshoot */
.btn.is-mag{ transition:color .4s var(--ease), border-color .4s var(--ease),
  transform .16s cubic-bezier(.2,.8,.3,1); }
.btn .lbl{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.6em;
  white-space:nowrap;
  transition:transform .6s cubic-bezier(.22,1.45,.36,1); }
.btn .fill{ position:absolute; inset:0; z-index:1; background:var(--acc);
  border-radius:100px; transform:scale(0); transform-origin:center;
  transition:transform .55s var(--ease); }
.btn:hover{ color:#0a0a0a; border-color:var(--acc); }
.btn:hover .fill{ transform:scale(1.6); }
.btn .arrow{ transition:transform .4s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--primary{ background:var(--acc); color:var(--on-acc); border-color:var(--acc);
  box-shadow:
    0 1px 0 var(--acc-deep), 0 2px 0 var(--acc-deep), 0 3px 0 var(--acc-deep),
    0 4px 0 var(--acc-deep), 0 5px 0 var(--acc-deep),
    0 18px 30px -8px var(--acc-glow),
    inset 0 1px 0 rgba(255,255,255,.55); }
.btn--primary .fill{ background:#fff; }
.btn--primary:hover{ color:#0a0a0a; }
.btn--ghost{ background:transparent; }
.btn--lg{ padding:20px 40px; font-size:16.5px; }

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:120px var(--gut) 80px; overflow:hidden;
}
#scene{ position:absolute; inset:0; z-index:0; }
#scene canvas{ display:block; width:100% !important; height:100% !important; }
#hero .hero-inner{ position:relative; z-index:3; max-width:1280px;
  display:flex; flex-direction:column; align-items:center; gap:clamp(15px,1.9vw,26px); }
#hero .hero-grad{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(46% 52% at 50% 50%, transparent 38%, rgba(8,8,9,.26) 82%); }

.hero-eyebrow{ opacity:0; transform:translateY(14px); }
.hero-eyebrow.in{ opacity:1; transform:none; transition:.9s var(--ease) .1s; }

.logotype{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(54px, 12.4vw, 200px); line-height:.84;
  letter-spacing:-.012em; text-transform:lowercase;
  display:flex; flex-wrap:nowrap; justify-content:center;
  white-space:nowrap; max-width:100%;
}
.logotype .ch{ display:inline-block; transform:translateY(115%) rotate(7deg);
  opacity:0; will-change:transform,opacity;
  transition:transform 1.05s var(--ease) var(--cd,0s), opacity .85s var(--ease) var(--cd,0s); }
.logotype .ch.lit{ color:var(--acc); }
.logotype.in .ch{ transform:translateY(0) rotate(0); opacity:1; }

.hero-vp{
  font-size:clamp(16px,1.5vw,23px); max-width:48ch; color:var(--ink-dim);
  line-height:1.45; text-wrap:balance;
}
.hero-vp b{ color:var(--ink); font-weight:600; }
.hero-cta{ display:flex; gap:clamp(20px,2.4vw,40px); flex-wrap:wrap; justify-content:center; }

.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; color:var(--ink-faint);
  text-transform:uppercase; }
.scroll-cue .bar{ width:1px; height:46px; background:var(--line-2); overflow:hidden; position:relative; }
.scroll-cue .bar::after{ content:""; position:absolute; inset:0; background:var(--acc);
  animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ---------- hero: live-demo focus ---------- */
.logotype.logotype--sm{ font-size:clamp(20px,2.5vw,30px) !important; line-height:1;
  letter-spacing:.012em; margin-bottom:clamp(6px,1vw,12px); opacity:.92; }
.logotype--sm .ch{ text-shadow:none !important; }

.hero-head{ font-family:var(--f-display); font-weight:400; text-transform:none;
  font-size:clamp(30px,5.1vw,72px); line-height:.96; letter-spacing:-.015em;
  text-wrap:balance; max-width:none; }
.hero-head .o{ color:var(--ink-dim); }

.hero-actions{ display:flex; flex-direction:column; align-items:center;
  gap:clamp(16px,1.9vw,24px); margin-top:clamp(6px,1vw,14px); }

.live-chip{ color:var(--ink-dim); letter-spacing:.2em; }
.live-dot{ width:8px; height:8px; border-radius:50%; background:#2ee06a; flex:none;
  box-shadow:0 0 0 0 rgba(46,224,106,.55); animation:livePulse 2.2s var(--ease) infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(46,224,106,.5); }
  70%{ box-shadow:0 0 0 7px rgba(46,224,106,0); } 100%{ box-shadow:0 0 0 0 rgba(46,224,106,0); } }

/* focal call button */
.call-btn{ position:relative; display:inline-flex; align-items:center; gap:clamp(14px,1.5vw,20px);
  padding:clamp(16px,1.7vw,22px) clamp(24px,2.4vw,38px); border-radius:100px; cursor:pointer;
  background:var(--acc); color:var(--on-acc); text-decoration:none; isolation:isolate;
  box-shadow:0 1px 0 var(--acc-deep), 0 3px 0 var(--acc-deep),
    0 22px 46px -12px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.call-btn:hover{ transform:translateY(-3px);
  box-shadow:0 1px 0 var(--acc-deep), 0 4px 0 var(--acc-deep),
    0 30px 60px -10px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.6); }
.call-btn:active{ transform:translateY(-1px); }

.call-rings{ position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; }
.call-rings i{ position:absolute; inset:0; border-radius:inherit; border:1.5px solid var(--acc);
  opacity:0; animation:callRing 2.6s var(--ease) infinite; }
.call-rings i:nth-child(2){ animation-delay:.85s; }
.call-rings i:nth-child(3){ animation-delay:1.7s; }
@keyframes callRing{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.55); opacity:0; } }

.call-ico{ display:grid; place-items:center; width:clamp(38px,3.4vw,46px); height:clamp(38px,3.4vw,46px);
  border-radius:50%; background:rgba(255,255,255,.16); flex:none; }
.call-ico svg{ width:55%; height:55%; animation:callShake 2.6s var(--ease) infinite; transform-origin:center; }
@keyframes callShake{ 0%,72%,100%{ transform:rotate(0); } 76%{ transform:rotate(-13deg); }
  80%{ transform:rotate(11deg); } 84%{ transform:rotate(-8deg); } 88%{ transform:rotate(6deg); } 92%{ transform:rotate(0); } }
.call-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.call-block{ display:flex; flex-direction:column; align-items:center; gap:clamp(9px,1vw,13px); }
.call-hint{ font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--acc-hi);
  background:color-mix(in oklab, var(--acc) 18%, rgba(255,255,255,.02));
  border:1px solid color-mix(in oklab, var(--acc) 42%, transparent);
  padding:6px 15px; border-radius:100px;
  box-shadow:0 0 26px -8px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.06); }
.call-btn.is-static{ cursor:default; pointer-events:none; }
.call-num{ font-family:var(--f-display); font-weight:400; font-size:clamp(22px,2.5vw,34px);
  letter-spacing:.01em; white-space:nowrap; }

.demo-note{ max-width:54ch; color:var(--ink-dim); font-size:clamp(13.5px,1.05vw,15.5px);
  line-height:1.5; text-wrap:pretty; }

/* quiet secondary link */
.hero-sec{ margin-top:4px; display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--f-grotesk); font-size:14.5px; letter-spacing:.005em; text-decoration:none; }
.hero-sec .sec-pre{ color:var(--ink-faint); }
.hero-sec .sec-act{ color:var(--ink-dim); position:relative; transition:color .3s var(--ease); }
.hero-sec .sec-act::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.hero-sec:hover .sec-act{ color:var(--ink); }
.hero-sec:hover .sec-act::after{ transform:scaleX(1); }
.hero-sec .sec-arrow{ color:var(--acc); transition:transform .35s var(--ease); }
.hero-sec:hover .sec-arrow{ transform:translateY(3px); }

@media (prefers-reduced-motion: reduce){
  .call-rings i, .call-ico svg, .live-dot{ animation:none !important; }
}

/* ---------- marquee strip under hero / capabilities ---------- */
.marquee{ display:flex; overflow:hidden; user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee .track{ display:flex; flex-shrink:0; align-items:center;
  animation:scrollx var(--mq,40s) linear infinite; }
.marquee.rev .track{ animation-direction:reverse; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================
   GENERIC SECTION HEADER
   ============================================================ */
.sec-head{ display:flex; flex-direction:column; gap:22px;
  padding-block:clamp(90px,11vw,160px) clamp(40px,5vw,72px); }
.sec-head .idx{ font-family:var(--f-mono); font-size:12px; color:var(--ink-faint);
  letter-spacing:.2em; }
.sec-title{ font-family:var(--f-display); font-weight:400;
  font-size:clamp(40px,7.4vw,118px); line-height:.92; letter-spacing:-.01em;
  text-transform:uppercase; max-width:16ch; }

/* ============================================================
   DEMO / ACME ROOFING
   ============================================================ */
#demo{ border-top:1px solid var(--line); padding-bottom:clamp(20px,4vw,60px); }
#demo .sec-lead b{ color:var(--ink); font-weight:600; }

.demo-call{ display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(28px,4.4vw,70px);
  align-items:center; }
@media (max-width:900px){ .demo-call{ grid-template-columns:1fr; gap:36px; } }

.dc-left{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(15px,1.8vw,22px); }
.dc-badge{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--f-mono);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }
.dc-h{ font-family:var(--f-display); font-weight:400; font-size:clamp(32px,4vw,60px);
  line-height:.96; letter-spacing:-.012em; }
.dc-p{ color:var(--ink-dim); font-size:clamp(15px,1.2vw,17px); line-height:1.5; max-width:42ch; }
.dc-cta{ margin-top:4px; }
.dc-note{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-faint); }
.dc-site{ display:inline-flex; align-items:center; gap:.55em; margin-top:2px;
  font-family:var(--f-grotesk); font-size:14.5px; color:var(--ink-dim); text-decoration:none;
  transition:color .3s var(--ease); }
.dc-site span{ color:var(--acc); transition:transform .3s var(--ease); }
.dc-site:hover{ color:var(--ink); }
.dc-site:hover span{ transform:translateX(5px); }

/* transcript */
.dc-right{ display:flex; flex-direction:column; gap:12px; }
.transcript{ border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  box-shadow:0 30px 60px -36px rgba(0,0,0,.8); }
.tr-head{ display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid var(--line); }
.tr-dot{ width:10px; height:10px; border-radius:50%; background:var(--line-2); }
.tr-title{ margin-left:auto; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); }
.tr-body{ padding:clamp(16px,1.6vw,22px); display:flex; flex-direction:column; gap:13px; }
.tr-row{ display:flex; flex-direction:column; gap:5px; max-width:86%; }
.tr-row.caller{ align-self:flex-start; align-items:flex-start; }
.tr-row.ai{ align-self:flex-end; align-items:flex-end; }
.tr-who{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); padding-inline:2px; }
.tr-row.ai .tr-who{ color:var(--acc); }
.tr-row p{ font-size:14px; line-height:1.45; padding:10px 14px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink-dim);
  text-wrap:pretty; }
.tr-row.caller p{ border-bottom-left-radius:5px; }
.tr-row.ai p{ background:var(--acc-soft); border-color:transparent; color:var(--ink);
  border-bottom-right-radius:5px; }
.tr-cap{ font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-faint);
  line-height:1.5; padding-inline:4px; }

/* feature cards */
.demo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.6vw,22px);
  margin-top:clamp(44px,5.5vw,80px); }
@media (max-width:1040px){ .demo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .demo-grid{ grid-template-columns:1fr; } }
.demo-card{ position:relative; border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  padding:clamp(24px,2.4vw,34px); display:flex; flex-direction:column; gap:13px;
  transition:border-color .45s var(--ease), transform .45s var(--ease); }
.demo-card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.dcd-num{ font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; color:var(--acc); }
.dcd-ico{ width:34px; height:34px; color:var(--acc); margin-top:2px; }
.demo-card h4{ font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(20px,2vw,27px); line-height:1; letter-spacing:.005em; }
.demo-card p{ color:var(--ink-dim); font-size:14.5px; line-height:1.5; text-wrap:pretty; }

/* automation pipeline */
.flow{ margin-top:clamp(50px,6vw,90px); padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--line); }
.flow-head{ display:flex; flex-direction:column; gap:10px; margin-bottom:clamp(28px,3vw,42px); }
.flow-kicker{ font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acc); }
.flow-h{ font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,3.2vw,46px); line-height:.96; letter-spacing:-.01em; }
.flow-rail{ list-style:none; display:flex; flex-wrap:nowrap; align-items:stretch;
  justify-content:center; gap:clamp(8px,1vw,16px); perspective:1100px; }
.flow-rail--4{ margin-top:clamp(12px,1.6vw,20px); }
.flow-node{ position:relative; isolation:isolate; flex:1 1 0; min-width:0;
  max-width:clamp(200px,23vw,272px); min-height:clamp(126px,13vw,150px);
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  padding:24px 22px 20px; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  transform-style:preserve-3d; will-change:transform;
  transition:transform .5s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.flow-node > *{ position:relative; z-index:2; }
.flow-node::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; opacity:0;
  background:radial-gradient(320px 320px at var(--mx,50%) var(--my,30%), var(--acc-soft), transparent 70%);
  transition:opacity .5s var(--ease); }
.flow-node::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit; padding:1.4px;
  background:radial-gradient(200px 200px at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.92), var(--acc) 28%, rgba(255,255,255,.04) 64%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; opacity:.22; transition:opacity .5s var(--ease); }
.flow-node:hover{ border-color:transparent; box-shadow:0 30px 60px -34px rgba(0,0,0,.85); }
.flow-node:hover::before{ opacity:1; }
.flow-node:hover::after{ opacity:1; }
.flow-node .fn-ico{ width:30px; height:30px; }
.flow-node .fn-label{ font-family:var(--f-grotesk); font-weight:500; font-size:15px;
  line-height:1.3; color:var(--ink); text-wrap:balance; }
.flow-node .fn-tag{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; padding:3px 9px; border-radius:100px; margin-top:auto; }
.flow-node.auto{ border-color:color-mix(in oklab, var(--acc) 30%, var(--line)); }
.flow-node.auto .fn-ico{ color:var(--acc); }
.flow-node.auto .fn-tag{ color:var(--acc); background:var(--acc-soft); }
.flow-node.you{ border-color:var(--line-2);
  background:linear-gradient(180deg, rgba(255,255,255,.05), var(--bg)); }
.flow-node.you .fn-ico{ color:var(--ink); }
.flow-node.you .fn-tag{ color:var(--bg); background:var(--ink); font-weight:500; }
.flow-arrow{ flex:none; display:flex; align-items:center; justify-content:center; color:var(--acc); }
.flow-arrow svg{ width:clamp(26px,2.6vw,44px); height:auto;
  filter:drop-shadow(0 0 9px var(--acc-glow)); }
.flow-tag{ margin-top:clamp(28px,3.2vw,44px); text-align:center;
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(22px,2.8vw,40px); line-height:1; letter-spacing:-.01em; }
.flow-tag .o{ color:var(--acc); }
@media (max-width:820px){
  .flow-rail{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; }
  .flow-rail--4{ margin-top:0; }
  .flow-node{ flex:none; width:100%; max-width:none; min-height:0; flex-direction:row; align-items:center; gap:16px; }
  .flow-node .fn-label{ flex:1; }
  .flow-node .fn-tag{ margin-top:0; }
  .flow-arrow svg{ width:30px; transform:rotate(90deg); }
}
.sec-title .o{ color:var(--acc); }
.sec-lead{ max-width:46ch; color:var(--ink-dim); font-size:clamp(15px,1.25vw,19px); }
.sec-lead .lead-trust{ color:var(--ink); font-weight:600; }

/* ============================================================
   SERVICES
   ============================================================ */
#services{ padding-bottom:clamp(60px,8vw,120px); }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .svc-grid{ grid-template-columns:1fr; } }
.svc{
  position:relative; border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  padding:clamp(26px,2.4vw,40px); min-height:clamp(420px,42vw,560px);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; isolation:isolate;
  transition:border-color .5s var(--ease), transform .6s var(--ease);
  will-change:transform;
}
.svc::before{ /* spotlight */
  content:""; position:absolute; inset:0; z-index:0; opacity:0;
  background:radial-gradient(360px 360px at var(--mx,50%) var(--my,30%), var(--acc-soft), transparent 70%);
  transition:opacity .5s var(--ease);
}
/* shiny beveled edge — bright spot tracks the cursor for 3D depth on tilt */
.svc::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  border-radius:inherit; padding:1.4px;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.92), var(--acc) 26%, rgba(255,255,255,.04) 64%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.28; transition:opacity .5s var(--ease);
}
.svc:hover{ border-color:transparent;
  box-shadow:0 36px 70px -34px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.04) inset; }
.svc:hover::before{ opacity:1; }
.svc:hover::after{ opacity:1; }
.svc-stage{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.svc-top{ position:relative; z-index:2; display:flex; align-items:flex-start;
  justify-content:space-between; }
.svc-num{ font-family:var(--f-mono); font-size:12px; color:var(--ink-faint);
  letter-spacing:.16em; }
.svc-ico{ width:46px; height:46px; }
.svc-body{ position:relative; z-index:2; }
.svc h3{ font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,2.7vw,40px); line-height:.96; letter-spacing:-.005em;
  margin-bottom:14px; }
.svc p{ color:var(--ink-dim); font-size:clamp(14px,1.05vw,16px); max-width:34ch; }
.svc .tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.svc .tags span{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--ink-dim); border:1px solid var(--line); border-radius:100px;
  padding:5px 11px; transition:.4s var(--ease); }
.svc:hover .tags span{ border-color:var(--line-2); color:var(--ink); }

/* card-specific reactive canvases */
.svc-stage canvas, .svc-stage svg{ width:100%; height:100%; }
.svc[data-tilt]{ transform-style:preserve-3d; }

/* stage: web — reactive flowing motion lines */
.svc-stage[data-stage="web"] canvas{ opacity:.5; transition:opacity .6s var(--ease); }
.svc[data-svc="web"]:hover .svc-stage canvas{ opacity:1; }

/* stage: software — warping line grid */
.svc-stage[data-stage="software"] svg{ color:var(--acc); opacity:.4; transition:opacity .6s var(--ease); }
.svc[data-svc="software"]:hover .svc-stage svg{ opacity:.92; }

/* stage: ai — node constellation */
.svc-stage[data-stage="ai"] canvas{ opacity:.55; transition:opacity .6s var(--ease); }
.svc[data-svc="ai"]:hover .svc-stage canvas{ opacity:1; }

/* ============================================================
   MANIFESTO / STATS band
   ============================================================ */
#proof{ padding-block:clamp(80px,10vw,150px); border-top:1px solid var(--line);
  margin-top:clamp(60px,8vw,120px); }
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,22px); }
@media (max-width:760px){ .proof-grid{ grid-template-columns:1fr; gap:16px; } }
.stat{ position:relative; display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; text-align:center;
  min-height:clamp(200px,18vw,280px);
  padding:clamp(28px,2.6vw,44px); border-radius:26px; overflow:hidden; isolation:isolate;
  border:0;
  /* clear glass body — faint tint + gentle top light, no grain */
  background:
    radial-gradient(135% 90% at 50% -10%, rgba(255,255,255,.14), rgba(255,255,255,.02) 55%, transparent 78%),
    rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(16px) saturate(185%) brightness(1.06);
  backdrop-filter:blur(16px) saturate(185%) brightness(1.06);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,.55),       /* crisp top edge light */
    inset 0 -1px 1.5px rgba(255,255,255,.18),       /* lower edge light */
    inset 0 26px 40px -28px rgba(255,255,255,.30),  /* inner top sheen */
    inset 0 -34px 48px -32px rgba(0,0,0,.42),        /* refraction shadow at base */
    0 28px 56px -26px rgba(0,0,0,.66);               /* soft cast shadow */
  transform-style:preserve-3d; will-change:transform;
  transition:transform .5s var(--ease), box-shadow .45s var(--ease);
}
.stat::before{ /* refractive edge ring: static bright top/bottom + traveling glint */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  padding:1.4px;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.9) 44%, rgba(255,255,255,.2) 52%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.1) 34%, rgba(255,255,255,.07) 66%, rgba(255,255,255,.5));
  background-size:260% 260%, 100% 100%;
  background-position:160% 0, 0 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:statSheen 8.5s ease-in-out infinite;
}
@keyframes statSheen{ 0%{ background-position:160% 0, 0 0; } 100%{ background-position:-60% 0, 0 0; } }
.stat::after{ /* cursor-tracking specular highlight */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(260px 260px at var(--mx,50%) var(--my,30%),
    rgba(255,255,255,.2), rgba(255,255,255,.05) 36%, transparent 64%);
  opacity:0; mix-blend-mode:screen; transition:opacity .4s var(--ease);
}
.stat:hover{
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,.7),
    inset 0 -1px 1.5px rgba(255,255,255,.24),
    inset 0 26px 42px -28px rgba(255,255,255,.4),
    inset 0 -34px 48px -32px rgba(0,0,0,.42),
    0 42px 70px -28px rgba(0,0,0,.72),
    0 0 46px -8px var(--acc-glow); }
.stat:hover::before{ filter:brightness(1.28); }
.stat:hover::after{ opacity:1; }
.stat > *{ position:relative; z-index:1; }
.stat .num{ font-family:var(--f-display); font-weight:400;
  font-size:clamp(58px,6.4vw,112px); line-height:.84; color:var(--ink);
  letter-spacing:-.01em; display:flex; align-items:baseline; justify-content:center; }
.stat .num .suf{ color:var(--acc); font-size:.5em; margin-left:.05em; }
.stat .num .pre{ color:var(--acc); font-size:.58em; margin-right:.04em; align-self:flex-start; line-height:1.1; }
.stat .cap{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em;
  color:var(--ink-dim); text-transform:uppercase; max-width:24ch; margin:0 auto; }

/* ============================================================
   PROCESS
   ============================================================ */
#process{ padding-bottom:clamp(60px,9vw,140px); }
.proc-head{ display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:clamp(28px,5vw,80px); }
.proc-head-text{ display:flex; flex-direction:column; gap:22px; min-width:0; }
.proc-emblem{ width:clamp(300px,36vw,560px); aspect-ratio:1; justify-self:end; overflow:visible; }
.proc-emblem canvas{ width:100%; height:100%; display:block; }
@media (max-width:860px){
  .proc-head{ grid-template-columns:1fr; }
  .proc-emblem{ justify-self:start; width:clamp(200px,54vw,320px); margin-top:6px; }
}
.timeline{ position:relative; margin-top:30px; }
.tl-line{ position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--line); overflow:hidden; }
.tl-line .prog{ position:absolute; left:0; top:0; width:100%; height:0;
  background:linear-gradient(180deg, var(--acc), var(--acc-deep));
  box-shadow:0 0 22px 1px var(--acc-glow); }
.tl-steps{ display:flex; flex-direction:column; }
.tl-step{ position:relative; padding:clamp(30px,4vw,58px) 0 clamp(30px,4vw,58px) clamp(52px,7vw,120px);
  border-bottom:1px solid var(--line); }
.tl-step:last-child{ border-bottom:0; }
.tl-dot{ position:absolute; left:-9px; top:calc(clamp(30px,4vw,58px) + 6px);
  width:20px; height:20px; border-radius:50%; background:var(--bg);
  border:2px solid var(--line-2); transition:.5s var(--ease); }
.tl-step.in .tl-dot{ border-color:var(--acc); background:var(--acc);
  box-shadow:0 0 0 6px var(--acc-soft), 0 0 24px 2px var(--acc-glow); }
.tl-row{ display:grid; grid-template-columns:auto minmax(0,.46fr) minmax(0,1fr);
  gap:clamp(20px,3vw,52px); align-items:start; }
@media (max-width:760px){ .tl-row{ grid-template-columns:1fr; gap:10px; } }
.tl-step .st-no{ font-family:var(--f-mono); font-size:13px; color:var(--acc);
  letter-spacing:.1em; padding-top:.7em; }
.tl-step h3{ font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,72px); line-height:.92; letter-spacing:-.01em; }
.tl-step .st-desc{ max-width:48ch; color:rgba(243,241,236,.76); padding-top:.5em;
  font-size:clamp(15px,1.35vw,21px); line-height:1.5; }
@media (max-width:760px){ .tl-step .st-desc{ padding-top:.4em; } }

/* ============================================================
   CAPABILITIES
   ============================================================ */
#capabilities{ padding-bottom:clamp(70px,9vw,140px); overflow:visible; }
.cap-head{ position:relative; }
.cap-head-text{ position:relative; z-index:2; display:flex; flex-direction:column; gap:22px; min-width:0; }
/* big, boundary-free field: bleeds up into the deadspace above and out to the right */
.cap-wave{ position:absolute; z-index:1; right:clamp(-80px,-3.5vw,-10px); top:50%;
  transform:translateY(-58%); width:clamp(480px,84vw,1320px); height:clamp(340px,44vw,680px);
  pointer-events:auto; }
.cap-wave canvas{ width:100% !important; height:100% !important; display:block; }
@media (max-width:860px){
  .cap-wave{ position:relative; right:auto; top:auto; transform:none; width:100%;
    height:clamp(220px,58vw,380px); margin-top:8px; }
}
/* "disappear" — opposite of the marquee: it vanishes when scrolled over */
.vanish{ display:inline-block;
  transition:opacity .7s var(--ease), filter .7s var(--ease),
    letter-spacing .7s var(--ease), transform .7s var(--ease); }
.vanish:hover{ opacity:0; filter:blur(18px); letter-spacing:.45em;
  transform:translateY(-6px) scale(1.04); }
.cap-rows{ display:flex; flex-direction:column; gap:clamp(10px,1.4vw,22px);
  margin-top:10px; }
.cap-rows .marquee .track span{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(34px,5vw,84px); line-height:1; letter-spacing:-.01em;
  color:transparent; -webkit-text-stroke:1px var(--ink-ghost);
  padding-inline:clamp(20px,2.4vw,46px); display:inline-flex; align-items:center; gap:clamp(20px,2.4vw,46px);
  transition:color .4s, -webkit-text-stroke-color .4s;
  white-space:nowrap;
}
.cap-rows .marquee .track span::after{ content:"✳"; color:var(--acc); font-size:.34em;
  -webkit-text-stroke:0; }
.cap-rows:hover .marquee .track span{
  color:var(--acc); -webkit-text-stroke-color:transparent; }

/* ============================================================
   FOUNDING OFFER
   ============================================================ */
#founding{ border-top:1px solid var(--line); padding-block:clamp(70px,9vw,130px); }
.fo-card{ position:relative; overflow:hidden; border-radius:24px;
  border:1px solid color-mix(in oklab, var(--acc) 36%, var(--line));
  background:linear-gradient(155deg, color-mix(in oklab, var(--acc) 9%, var(--bg-2)), var(--bg) 64%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,4vw,64px); align-items:center;
  padding:clamp(30px,4vw,60px); }
.fo-glow{ position:absolute; right:-12%; top:-40%; width:60%; aspect-ratio:1; z-index:0; pointer-events:none;
  background:radial-gradient(circle, var(--acc-glow), transparent 62%); filter:blur(20px); opacity:.5; }
.fo-main, .fo-meter{ position:relative; z-index:1; }
@media (max-width:840px){ .fo-card{ grid-template-columns:1fr; gap:30px; } }

.fo-main{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,1.6vw,20px); }
.fo-kicker{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--f-mono);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); }
.fo-pulse{ width:8px; height:8px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 0 var(--acc-glow); animation:foPulse 2.2s var(--ease) infinite; }
@keyframes foPulse{ 0%{ box-shadow:0 0 0 0 var(--acc-glow); } 70%{ box-shadow:0 0 0 8px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.fo-title{ font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(40px,5.4vw,84px); line-height:.9; letter-spacing:-.01em; }
.fo-title .o{ color:var(--acc); }
.fo-lead{ color:var(--ink-dim); font-size:clamp(15px,1.2vw,18px); line-height:1.55; max-width:52ch; }
.fo-lead strong{ color:var(--ink); font-weight:600; }
.fo-note{ color:var(--ink-dim); font-size:clamp(13.5px,1.05vw,15px); line-height:1.5; max-width:52ch; }
.fo-cta{ margin-top:6px; }

.fo-meter{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.4vw,30px); border-radius:18px;
  border:1px solid color-mix(in oklab, var(--acc) 30%, var(--line));
  background:color-mix(in oklab, var(--acc) 7%, rgba(255,255,255,.02)); }
.fo-count{ display:flex; align-items:baseline; gap:.12em; font-family:var(--f-display); line-height:.82; }
.fo-num{ font-size:clamp(76px,9vw,128px); color:var(--acc); letter-spacing:-.02em;
  text-shadow:0 0 40px var(--acc-glow); }
.fo-of{ font-size:clamp(26px,3vw,40px); color:var(--ink-faint); }
.fo-label{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); }
.fo-pips{ display:flex; gap:8px; margin-top:4px; }
.fo-pip{ width:30px; height:7px; border-radius:100px; }
.fo-pip.is-open{ background:var(--acc); box-shadow:0 0 12px var(--acc-glow); }
.fo-pip.is-taken{ background:transparent; border:1px solid var(--line-2); }
.fo-sub{ font-size:12.5px; color:var(--ink-faint); line-height:1.4; max-width:24ch; margin-top:2px; }

/* ============================================================
   CLOSING + FOOTER
   ============================================================ */
#closing{ position:relative; padding-block:clamp(120px,18vw,280px);
  text-align:center; overflow:hidden; border-top:1px solid var(--line); }
#closing .cl-glow{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(90vw,1100px); aspect-ratio:1; z-index:0; pointer-events:none;
  background:radial-gradient(circle, var(--acc-soft), transparent 62%); filter:blur(8px); }
.cl-inner{ position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:clamp(26px,3.2vw,48px); }
.cl-big{ font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(48px,11vw,190px); line-height:.92; letter-spacing:-.015em;
  max-width:none; text-align:center; }
.cl-big .cl-stack{ display:flex; flex-direction:column; align-items:center; }
.cl-big .cl-l1{ display:block; }
.cl-big .cl-l2{ display:block; margin-top:.05em; }
.moves-host{ position:relative; display:inline-block; color:var(--acc); }
.moves-label{ visibility:hidden; }
.moves-host canvas{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:138%; height:1.36em; pointer-events:auto; }
.cl-big .o{ color:var(--acc); }
.cl-sub{ color:var(--ink-dim); max-width:42ch; font-size:clamp(16px,1.4vw,21px); }

/* ---------- contact form ---------- */
.cta-form{ width:100%; max-width:680px; margin-top:8px; text-align:left; }
.cf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.cf-field.cf-full{ grid-column:1 / -1; }
.cf-field > span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim); }
.cf-field input, .cf-field select, .cf-field textarea{
  width:100%; box-sizing:border-box; font-family:var(--f-grotesk); font-size:16px; color:var(--ink);
  background:rgba(255,255,255,.045); border:1px solid var(--line-2); border-radius:12px;
  padding:13px 15px; outline:none; cursor:none; resize:vertical;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.cf-field textarea{ min-height:84px; line-height:1.5; }
.cf-field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232f6bff' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:36px; }
.cf-field select option{ color:#111; background:#fff; }
.cf-field select:invalid{ color:var(--ink-faint); }
.cf-field input::placeholder, .cf-field textarea::placeholder{ color:var(--ink-faint); }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{
  border-color:var(--acc); background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px var(--acc-soft); }
.cf-field.invalid input, .cf-field.invalid select, .cf-field.invalid textarea{
  border-color:#ff4d4d; box-shadow:0 0 0 3px rgba(255,77,77,.14); }
.cf-foot{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:18px; }
.cf-mail{ font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-dim);
  position:relative; transition:color .3s var(--ease); }
.cf-mail::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px;
  background:var(--acc); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.cf-mail:hover{ color:var(--ink); }
.cf-mail:hover::after{ transform:scaleX(1); transform-origin:left; }
.cf-note{ min-height:1.2em; margin-top:12px; font-family:var(--f-mono); font-size:12px;
  letter-spacing:.02em; color:#ff6b6b; }
.cf-success[hidden]{ display:none !important; }
.cf-success{ width:100%; max-width:620px; display:flex; flex-direction:column; align-items:center;
  gap:14px; text-align:center; padding:clamp(30px,4vw,52px);
  background:linear-gradient(155deg, rgba(255,255,255,.085), rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(24px) saturate(170%); backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,.12); border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 30px 54px -30px rgba(0,0,0,.8); }
.cf-success .cf-tick{ width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  background:var(--acc); color:var(--on-acc); font-size:26px; font-weight:700;
  box-shadow:0 0 34px -4px var(--acc-glow); }
.cf-success h3{ font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,3.4vw,48px); line-height:.95; }
.cf-success p{ color:var(--ink-dim); max-width:38ch; font-size:clamp(14px,1.1vw,17px); }
@media (max-width:600px){ .cf-grid{ grid-template-columns:1fr; } }

footer{ border-top:1px solid var(--line); padding-block:clamp(40px,5vw,70px); }
.foot-grid{ display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:34px; }
.foot-brand{ display:flex; align-items:center; gap:clamp(12px,1.5vw,20px); }
.foot-mk{ height:clamp(42px,5vw,72px); width:auto; flex:none; }
.foot-wm{ font-family:var(--f-display); text-transform:none;
  font-size:clamp(30px,4vw,58px); line-height:.9; }
.foot-wm .o{ color:var(--acc); }
.foot-cols{ display:flex; gap:clamp(34px,6vw,90px); flex-wrap:wrap; }
.foot-col{ display:flex; flex-direction:column; gap:11px; }
.foot-col .h{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px; }
.foot-col a, .foot-col span{ font-size:14px; color:var(--ink-dim);
  transition:color .35s var(--ease); width:fit-content; position:relative; }
.foot-col a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:var(--acc); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.foot-col a:hover{ color:var(--ink); }
.foot-col a:hover::after{ transform:scaleX(1); transform-origin:left; }
.foot-base{ display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px; margin-top:clamp(46px,6vw,86px);
  padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint); }

/* ---------- preloader ---------- */
#pre{ position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center; transition:opacity .8s var(--ease), visibility .8s; }
#pre.gone{ opacity:0; visibility:hidden; }
#pre .pl{ font-family:var(--f-mono); font-size:12px; letter-spacing:.3em;
  color:var(--ink-dim); text-transform:uppercase; display:flex; flex-direction:column;
  align-items:center; gap:18px; }
#pre .plbar{ width:160px; height:2px; background:var(--line); overflow:hidden; }
#pre .plbar i{ display:block; height:100%; width:0; background:var(--acc);
  box-shadow:0 0 14px var(--acc-glow); transition:width .3s var(--ease); }
#pre .plnum{ color:var(--acc); }

/* ---------- 3D lettering (Tweaks-toggled) ---------- */
body.threed .logotype{ font-size:clamp(62px,14.2vw,232px); }
body.threed .logotype .ch{
  text-shadow:
    1px 1px 0 #4a4a52, 2px 2px 0 #3d3d45, 3px 3px 0 #313139, 4px 4px 0 #26262d,
    5px 5px 0 #1c1c22, 6px 6px 0 #131318, 7px 7px 0 #0c0c10, 8px 8px 0 #08080b,
    10px 13px 20px rgba(0,0,0,.7);
}
body.threed .sec-title,
body.threed .cl-big,
body.threed .svc h3,
body.threed .tl-step h3,
body.threed .foot-brand{
  text-shadow:
    1px 1px 0 #45454d, 2px 2px 0 #393940, 3px 3px 0 #2d2d34, 4px 4px 0 #222229,
    5px 5px 0 #18181e, 6px 6px 0 #101015, 7px 7px 0 #0a0a0e,
    9px 11px 17px rgba(0,0,0,.62);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rise,.mask>*,.hero-eyebrow{ opacity:1 !important; transform:none !important; filter:none !important; }
  .logotype .ch{ opacity:1 !important; transform:none !important; }
  #grain,#mesh{ animation:none !important; }
  .marquee .track{ animation:none !important; }
  html{ scroll-behavior:auto; }
  body{ cursor:auto; }
  #cur,#cur-dot{ display:none; }
}