/* Layout: one page at a time over a living night city. Copy left-aligned on a dark scrim,
   the brushed-silver mark as the brightest object; scroll drives depth, light and the product demo. */
:root{
  color-scheme:dark;
  --ink:#090c11;
  --graphite:#0f131a;
  --card:rgba(12,16,23,.93);
  --edge:rgba(196,206,222,.11);
  --edge-strong:rgba(196,206,222,.24);
  --silver:#e8ebf0;
  --steel:#9ea6b2;
  --steel-dim:#7e8694;
  --glint:#a8d6ff;
  --glint-soft:rgba(168,214,255,.16);
  --pulse:#eaf6ff;
  --on-metal:#0b0e14;
  --bar-bg:rgba(7,10,15,.8);
  --field:rgba(255,255,255,.04);
  --wa-bg:#0b141a;
  --wa-head:#1f2c34;
  --wa-bubble:#1f2c34;
  --wa-tick:#53bdeb;
  --metal:linear-gradient(118deg,#8a929e 0%,#f6f8fb 19%,#b6bdc7 35%,#6c7480 50%,#e1e5ea 66%,#9da5b0 82%,#f3f5f8 100%);
  --metal-text:linear-gradient(180deg,#ffffff 0%,#e3e6eb 34%,#a5adb8 64%,#eef0f3 100%);

  --f-sans:"Urbanist","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-plate:"Michroma","Eurostile","Microgramma",ui-sans-serif,sans-serif;
  --r-lg:22px;
  --wrap:1200px;
  --nav-h:72px;
  --tabbar-h:0px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --cur-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><defs><linearGradient id='g' x1='0' y1='0' x2='.6' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='.5' stop-color='%23b4bbc6'/><stop offset='1' stop-color='%23eef1f5'/></linearGradient></defs><path d='M5 3v17.5l4.4-4.2 2.9 6.6 3-1.3-2.9-6.5H18.5z' fill='url(%23g)' stroke='%230b0e14' stroke-width='1.3' stroke-linejoin='round'/></svg>") 5 3,auto;
  --cur-hand:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><defs><linearGradient id='g' x1='0' y1='0' x2='.6' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='.5' stop-color='%23b4bbc6'/><stop offset='1' stop-color='%23eef1f5'/></linearGradient></defs><path d='M8.6 4.3a1.8 1.8 0 0 1 3.6 0V10.6a1.6 1.6 0 0 1 3.2 0v.6a1.5 1.5 0 0 1 3 0v.8a1.3 1.3 0 0 1 2.6 0V17.5c0 3.4-2.6 6-6 6h-1.6c-2.2 0-3.8-1-5-2.7l-3.1-4.4a1.5 1.5 0 0 1 2.3-1.9L8.6 15.6z' fill='url(%23g)' stroke='%230b0e14' stroke-width='1.2' stroke-linejoin='round'/><path d='M12.2 10.6v3.2M15.4 11.2v2.8M18.4 12v2.4' stroke='%230b0e14' stroke-width='.9' stroke-linecap='round'/></svg>") 10 3,pointer;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;cursor:var(--cur-arrow);scroll-padding-top:calc(var(--nav-h) + 16px)}
a,button,select,label[for],.switch{cursor:var(--cur-hand)}
input[type="text"],input[type="email"],textarea{cursor:text}
body{margin:0;background-color:var(--ink);color:var(--silver);font-family:var(--f-sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:var(--tabbar-h);min-height:100svh;display:flex;flex-direction:column;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
[hidden]{display:none!important}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:45;background:var(--ink)}
#city{position:fixed;left:0;top:0;width:100%;height:100lvh;z-index:-1;display:block;background:var(--ink);opacity:0;transition:opacity .7s ease}
#city.ready{opacity:1}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:2px solid var(--glint);outline-offset:3px;border-radius:6px}
h1:focus{outline:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.skip{position:absolute;left:12px;top:-64px;z-index:100;padding:10px 16px;border-radius:12px;background:var(--metal);color:var(--on-metal);font-weight:600;text-decoration:none;transition:top .25s var(--ease)}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* ---------- Top bar ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bar-bg);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--edge)}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;border-radius:8px}
.brand-icon{width:46px;height:25px;display:block;transition:transform .6s var(--spring)}
.brand-word{width:94px;height:16.4px;display:block}
@media (hover:hover){.brand:hover .brand-icon{transform:translateX(-4px) scale(1.06)}}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{position:relative;display:block;padding:8px 14px;border-radius:999px;color:var(--steel);text-decoration:none;font-weight:500;font-size:.95rem;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--metal);transform:scaleX(0);transform-origin:50% 50%;transition:transform .45s var(--ease)}
.nav-links a[aria-current="page"]{color:var(--silver)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){.nav-links a:hover{color:var(--silver)}.nav-links a:hover::after{transform:scaleX(1)}}
.tabbar{display:none}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:0 26px;border-radius:999px;
  font:500 1rem/1 var(--f-sans);letter-spacing:.01em;text-decoration:none;white-space:nowrap;overflow:hidden;border:0;isolation:isolate;
  transition:transform .4s var(--spring),box-shadow .35s var(--ease),border-color .3s,background-color .3s}
.btn:active{transform:scale(.96)}
.btn-metal{background:var(--metal);background-size:180% 100%;background-position:0% 50%;color:var(--on-metal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.28),0 12px 32px -14px rgba(168,214,255,.45);
  transition:transform .4s var(--spring),box-shadow .35s var(--ease),background-position .9s var(--ease)}
.btn-metal::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s var(--ease)}
.btn-ghost{color:var(--silver);background:rgba(9,12,17,.55);border:1px solid var(--edge-strong)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn-metal:hover{background-position:100% 50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.28),0 20px 44px -14px rgba(168,214,255,.65)}
  .btn-metal:hover::after{transform:translateX(130%)}
  .btn-ghost:hover{border-color:rgba(196,206,222,.5);background:rgba(255,255,255,.06)}
}
.btn:active,.btn:hover:active{transform:scale(.96)}
.btn-sm{min-height:40px;padding:0 18px;font-size:.92rem}
.btn-block{width:100%}

/* ---------- Views ---------- */
main{flex:1;transition:opacity .28s ease}
main.fading{opacity:0}
.view{overflow-x:clip;padding-block:clamp(44px,7vw,96px) clamp(56px,8vw,112px)}
.view-home{padding-block:0 clamp(40px,6vw,80px)}
.page-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.page-head h1{margin:0;font-weight:300;font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.04;letter-spacing:-.03em;color:var(--silver)}
.page-head p{margin:0;color:var(--steel);max-width:30em;font-size:1.08rem;line-height:1.65}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1,.page-head h1,.metal-text{background:var(--metal-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
html.intro .rise{animation:rise .9s var(--ease) var(--d,0s) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}

/* ---------- Home: hero ---------- */
.hero-wrap{position:relative;min-height:calc(100svh - var(--nav-h) - var(--tabbar-h) - env(safe-area-inset-top,0px));display:grid;align-items:center;padding-block:clamp(32px,5vw,64px)}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,80px)}
.hero-copy{display:grid;gap:28px;min-width:0;transform:translateY(calc(var(--out,0) * -80px));opacity:calc(1 - var(--out,0) * 1.4)}
.hero h1{margin:0;font-weight:300;font-size:clamp(2.5rem,5.4vw,4.7rem);line-height:1.02;letter-spacing:-.03em;color:var(--silver)}
.lede{margin:0;color:var(--steel);font-size:clamp(1.06rem,1.35vw,1.2rem);line-height:1.65;max-width:32em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-price{margin:0;color:var(--steel);font-size:.95rem;display:flex;align-items:center;gap:10px}
.hero-price strong{color:var(--silver);font-weight:600}
.ring{flex:none;width:11px;height:11px;border-radius:50%;background:var(--metal);padding:2.5px}
.ring::after{content:"";display:block;width:100%;height:100%;border-radius:50%;background:var(--ink)}
.stage{position:relative;justify-self:center;width:100%;max-width:560px;perspective:900px;
  transform:translateY(calc(var(--out,0) * 60px)) scale(calc(1 + var(--out,0) * .35));opacity:calc(1 - var(--out,0) * 1.2)}
.stage::before{content:"";position:absolute;inset:-14% -8% 0;z-index:-1;background:radial-gradient(closest-side,rgba(9,12,17,.75),rgba(9,12,17,.35) 55%,transparent 75%)}
.mark-tilt{transition:transform .6s var(--ease);transform-style:preserve-3d}
.mark{display:block;width:100%;height:auto;overflow:hidden;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
html.intro .mark{animation:mark-in 1.7s var(--ease) .15s both}
.pulse{fill:none;stroke:var(--pulse);stroke-width:38;stroke-dasharray:110 1000;stroke-dashoffset:110;opacity:.85;animation:travel 4.2s cubic-bezier(.45,.05,.3,1) 1.4s infinite}
.pulse.p2{animation-delay:2.8s}
.pulse.p3{animation-delay:4.2s}
.sheen{animation:sweep 8s var(--ease) 1.2s infinite}
@keyframes mark-in{from{clip-path:inset(0 100% 0 0);opacity:.3}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes travel{0%{stroke-dashoffset:110}62%,100%{stroke-dashoffset:-1000}}
@keyframes sweep{0%{transform:translateX(0)}30%,100%{transform:translateX(1300px)}}
.scroll-cue{position:absolute;left:50%;bottom:clamp(14px,3vh,28px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--steel-dim);font-size:.78rem;letter-spacing:.06em;opacity:calc(1 - var(--out,0) * 4);pointer-events:none}
.scroll-cue i{width:22px;height:34px;border-radius:12px;border:1.5px solid var(--edge-strong);position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--silver);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(11px);opacity:0}}

/* ---------- Home: manifesto (lights up word by word) ---------- */
.manifesto{padding-block:clamp(90px,16vw,200px) clamp(60px,10vw,120px)}
.manifesto p{margin:0;max-width:19em;font-weight:300;font-size:clamp(1.9rem,4.6vw,3.7rem);line-height:1.14;letter-spacing:-.025em;color:var(--silver)}
.manifesto .w{opacity:var(--o,1);transition:opacity .2s linear}
.manifesto .w.hl{color:var(--glint)}

/* ---------- Home: container scroll (21st.dev / Aceternity ContainerScroll) ---------- */
.cs{position:relative;height:280vh}
.cs-sticky{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));height:calc(100svh - var(--nav-h) - var(--tabbar-h) - env(safe-area-inset-top,0px));
  display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.6vh,30px);perspective:1000px;padding-block:12px}
.cs-title{text-align:center;transform:translateY(calc(var(--a,1) * -28px));will-change:transform}
.cs-title h2{margin:0 auto;max-width:16em;font-weight:300;font-size:clamp(1.8rem,4vw,3.3rem);line-height:1.06;letter-spacing:-.025em}
.cs-title p{margin:12px auto 0;color:var(--steel);max-width:34em;font-size:clamp(.98rem,1.3vw,1.1rem)}
.cs-card{--s0:1.05;--s1:1;position:relative;width:min(100%,1024px);margin-inline:auto;height:min(40rem,60svh);
  border:4px solid #5b626d;border-radius:30px;padding:clamp(8px,1.6vw,22px);background:#171a20;
  transform:rotateX(calc((1 - var(--a,1)) * 20deg)) scale(calc(var(--s0) + (var(--s1) - var(--s0)) * var(--a,1)));will-change:transform;
  box-shadow:0 0 #0000004d,0 9px 20px #0000004a,0 37px 37px #00000042,0 84px 50px #00000026,0 149px 60px #0000000a,0 233px 65px #00000003}
.cs-note{margin:0;text-align:center;color:var(--steel-dim);font-size:.82rem}

/* demo inside the card */
.demo{position:relative;height:100%;border-radius:16px;overflow:hidden;background:#0c0f15;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:clamp(12px,2vw,24px);padding:clamp(10px,1.6vw,20px)}
.demo-site{min-width:0;display:flex;flex-direction:column;border-radius:12px;border:1px solid var(--edge-strong);background:#0f131a;overflow:hidden}
.demo-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--edge)}
.demo-bar i{width:7px;height:7px;border-radius:50%;background:var(--edge-strong)}
.demo-bar span{margin-left:6px;flex:1;min-width:0;height:22px;border-radius:999px;background:var(--field);border:1px solid var(--edge);font-size:.72rem;color:var(--steel);display:flex;align-items:center;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-body{flex:1;display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px);padding:clamp(14px,2vw,26px);min-height:0}
.demo-h{margin:0;font-weight:300;font-size:clamp(1.1rem,1.9vw,1.6rem);letter-spacing:-.02em}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,14px)}
.demo-f{display:grid;gap:6px;min-width:0}
.demo-f.wide{grid-column:1 / -1}
.demo-l{font-size:.72rem;color:var(--steel)}
.demo-i{display:flex;align-items:center;min-height:38px;padding:8px 12px;border-radius:10px;border:1px solid var(--edge-strong);background:var(--field);font-size:.86rem;color:var(--silver);min-width:0;overflow:hidden;white-space:nowrap;transition:border-color .3s,box-shadow .3s}
.demo-i.tall{min-height:64px;align-items:flex-start;white-space:normal;line-height:1.4}
.demo-i.typing{border-color:var(--glint);box-shadow:0 0 0 3px var(--glint-soft)}
.demo-i.typing::after{content:"";width:1.5px;height:1.05em;margin-left:2px;background:var(--glint);animation:blink 1s steps(1) infinite;flex:none}
@keyframes blink{50%{opacity:0}}
.demo-btn{position:relative;margin-top:auto;align-self:flex-start;display:inline-grid;min-height:40px;padding:0 20px;border-radius:999px;background:var(--metal);color:var(--on-metal);font-size:.88rem;font-weight:600;place-items:center;overflow:hidden;transition:transform .35s var(--spring),box-shadow .4s}
.demo-btn > span{grid-area:1 / 1;transition:opacity .3s,transform .4s var(--ease)}
.demo-btn .b-sent{opacity:0;transform:translateY(12px)}
.demo.sending .demo-btn{transform:scale(.94)}
.demo.sent .demo-btn{transform:none;box-shadow:0 0 0 4px rgba(168,214,255,.25),0 0 30px rgba(168,214,255,.35)}
.demo.sent .demo-btn .b-idle{opacity:0;transform:translateY(-12px)}
.demo.sent .demo-btn .b-sent{opacity:1;transform:none}
.demo-phone{min-width:0;display:flex;justify-content:center;align-items:center}
.ph{position:relative;height:100%;aspect-ratio:9 / 18.5;max-width:100%;border-radius:30px;border:3px solid #3c424c;background:var(--wa-bg);overflow:hidden;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.ph::before{content:"";position:absolute;top:8px;left:50%;width:30%;height:16px;margin-left:-15%;border-radius:999px;background:#000;z-index:4}
.ph-head{display:flex;align-items:center;gap:10px;padding:34px 12px 10px;background:var(--wa-head);font-size:.74rem}
.ph-av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--metal);color:var(--on-metal);display:grid;place-items:center;font-weight:700;font-size:.8rem}
.ph-head b{display:block;font-size:.8rem}
.ph-head small{color:#8696a0}
.ph-chat{padding:12px 10px;display:grid;gap:8px;align-content:start}
.ph-day{justify-self:center;font-size:.64rem;color:#8696a0;background:#182229;padding:3px 8px;border-radius:6px}
.ph-bubble{position:relative;justify-self:start;max-width:94%;padding:8px 10px 18px;border-radius:0 10px 10px 10px;background:var(--wa-bubble);font-size:.7rem;line-height:1.45;color:#e9edef;
  opacity:0;transform:translateY(16px) scale(.92);transform-origin:0 0;transition:opacity .45s var(--ease),transform .55s var(--spring)}
.ph-time{position:absolute;right:8px;bottom:4px;font-size:.6rem;color:#8696a0}
.ph-banner{position:absolute;left:8px;right:8px;top:30px;z-index:3;padding:9px 11px;border-radius:14px;background:rgba(32,38,46,.96);box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:.68rem;line-height:1.4;color:#e9edef;
  opacity:0;transform:translateY(-140%);transition:transform .6s var(--spring),opacity .3s}
.ph-banner b{font-weight:700}
.ph-banner small{display:block;color:#8696a0;font-size:.6rem;margin-bottom:2px}
.demo.notify .ph-banner{opacity:1;transform:none}
.demo.bubble .ph-banner{opacity:0;transform:translateY(-140%)}
.demo.bubble .ph-bubble{opacity:1;transform:none}

/* ---------- Home: closing call to action ---------- */
.cta-band{padding-block:clamp(70px,12vw,150px) 0}
.cta-inner{position:relative;display:grid;gap:22px;justify-items:start;padding:clamp(28px,5vw,64px);border-radius:28px;border:1px solid var(--edge-strong);
  background:radial-gradient(120% 140% at 100% 0%,rgba(168,214,255,.12),transparent 55%),var(--card);overflow:hidden;
  transform:translateY(calc((1 - var(--q,1)) * 70px)) scale(calc(.94 + var(--q,1) * .06));opacity:calc(var(--q,1) * 1.3 - .2)}
.cta-inner h2{margin:0;max-width:15em;font-weight:300;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.05;letter-spacing:-.025em}
.cta-inner p{margin:0;color:var(--steel);max-width:34em}

/* ---------- Method: scroll timeline ---------- */
.tl{position:relative}
.timeline{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,8vh,96px)}
.tl-track{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;border-radius:2px;background:var(--edge-strong);overflow:hidden}
.tl-fill{position:absolute;inset:0 0 auto;height:calc(var(--fill,1) * 100%);background:linear-gradient(180deg,var(--glint),#ffffff);box-shadow:0 0 14px var(--glint)}
.tl-step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;perspective:1100px}
.tl-dot{grid-column:2;grid-row:1;justify-self:center;width:24px;height:24px;border-radius:50%;background:var(--metal);padding:5.5px;position:relative;z-index:1;transition:box-shadow .5s,transform .5s var(--spring)}
.tl-dot::after{content:"";display:block;width:100%;height:100%;border-radius:50%;background:var(--ink);transition:background .5s}
.tl-step.lit .tl-dot{box-shadow:0 0 0 6px rgba(168,214,255,.12),0 0 24px rgba(168,214,255,.6);transform:scale(1.15)}
.tl-step.lit .tl-dot::after{background:var(--glint)}
.tl-num{grid-row:1;font-family:var(--f-plate);font-size:clamp(3.6rem,8vw,7.5rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(196,206,222,.32);
  transform:translateY(calc((1 - var(--q,1)) * 70px));opacity:calc(var(--q,1) * .9)}
.tl-card{grid-row:1;min-width:0;display:grid;gap:10px;padding:clamp(22px,2.6vw,32px);border-radius:var(--r-lg);border:1px solid var(--edge);background:var(--card);
  transform:translateX(calc((1 - var(--q,1)) * var(--dir) * 90px)) rotateY(calc((1 - var(--q,1)) * var(--dir) * -20deg));opacity:calc(.1 + var(--q,1) * .9);transition:border-color .5s}
.tl-step.lit .tl-card{border-color:rgba(168,214,255,.35)}
.tl-step:nth-child(odd) .tl-card{grid-column:3;transform-origin:0 50%}
.tl-step:nth-child(odd) .tl-num{grid-column:1;justify-self:end}
.tl-step:nth-child(even) .tl-card{grid-column:1;transform-origin:100% 50%}
.tl-step:nth-child(even) .tl-num{grid-column:3;justify-self:start}
.step-n{font-family:var(--f-plate);font-size:.68rem;letter-spacing:.22em;color:var(--steel-dim)}
.tl-card h2{margin:0;font-weight:500;font-size:1.32rem;color:var(--silver)}
.tl-card p{margin:0;color:var(--steel);line-height:1.6}

/* ---------- Plans ---------- */
@property --a2{syntax:"<angle>";inherits:false;initial-value:0deg}
.auto-opt{display:flex;margin-bottom:28px}
.switch{position:relative;display:flex;align-items:center;gap:16px;padding:14px 20px 14px 14px;border-radius:18px;border:1px solid var(--edge-strong);background:var(--card);transition:border-color .3s;max-width:100%}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.track{flex:none;position:relative;width:52px;height:30px;border-radius:999px;background:rgba(196,206,222,.14);border:1px solid var(--edge-strong);transition:background .35s var(--ease)}
.thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:var(--steel);transition:transform .45s var(--spring),width .25s var(--ease),background .35s}
.switch:active .thumb{width:28px}
.switch input:checked + .track{background:var(--metal);border-color:transparent}
.switch input:checked + .track .thumb{transform:translateX(22px);background:var(--on-metal)}
.switch:active input:checked + .track .thumb{transform:translateX(16px)}
.switch input:focus-visible + .track{outline:2px solid var(--glint);outline-offset:3px}
.switch-text{display:grid;gap:2px;min-width:0}
.switch-text strong{font-weight:600;font-size:1rem;color:var(--silver)}
.switch-text small{font-size:.88rem;color:var(--steel);line-height:1.45}
.switch:has(input:checked){border-color:rgba(168,214,255,.5)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;perspective:1400px}
.plan-wrap{position:relative;border-radius:var(--r-lg);padding:1px;background:var(--edge-strong);min-width:0;display:flex;
  transform:translateY(calc((1 - var(--q,1)) * 110px)) rotateX(calc((1 - var(--q,1)) * 32deg)) scale(calc(.9 + var(--q,1) * .1));transform-origin:50% 100%;opacity:calc(var(--q,1) * 1.4 - .3)}
.plan-wrap.static{transition:transform 1s var(--ease) calc(var(--k,0) * 110ms),opacity .8s ease calc(var(--k,0) * 110ms)}
.plan-wrap.featured{background:conic-gradient(from var(--a2),transparent 0deg,transparent 200deg,rgba(168,214,255,.95) 250deg,#ffffff 270deg,rgba(196,206,222,.6) 290deg,transparent 330deg),var(--edge-strong);
  animation:beam 7s linear infinite;box-shadow:0 40px 90px -50px rgba(168,214,255,.55)}
@keyframes beam{to{--a2:360deg}}
.badge{position:absolute;top:-13px;left:28px;z-index:3;height:26px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;
  background:var(--metal);color:var(--on-metal);font-size:.78rem;font-weight:600;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.plan{position:relative;flex:1;border-radius:calc(var(--r-lg) - 1px);background:linear-gradient(180deg,rgba(18,23,32,.97),rgba(11,14,20,.97));
  padding:clamp(28px,3vw,36px) clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:26px;min-width:0;overflow:hidden;isolation:isolate}
.plan::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(214,226,244,.08),transparent 65%)}
@media (hover:hover){.plan:hover::before{opacity:1}}
.plan-head{display:grid;gap:12px}
.plate{margin:0;font-family:var(--f-plate);font-weight:400;font-size:1.02rem;letter-spacing:.3em;text-transform:uppercase;color:var(--silver)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .plate{background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.plan-for{margin:0;color:var(--steel);line-height:1.5}
@media (min-width:981px){.plan-for{min-height:3em}}
.price{display:grid;padding-bottom:24px;border-bottom:1px solid var(--edge)}
.price > *{grid-area:1 / 1;display:flex;align-items:baseline;gap:8px;min-height:3.2rem;transition:opacity .4s var(--ease),transform .5s var(--spring)}
.amount{font-size:clamp(2.6rem,3.6vw,3.2rem);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--silver);font-variant-numeric:tabular-nums}
.amount.quote{font-size:clamp(1.9rem,2.6vw,2.3rem);align-self:center}
.unit{color:var(--steel);font-size:.98rem}
.p-quote{opacity:0;transform:translateY(14px);pointer-events:none}
.with-auto .p-std{opacity:0;transform:translateY(-14px)}
.with-auto .p-quote{opacity:1;transform:none}
.feat{list-style:none;margin:0;padding:0;display:grid;gap:13px;align-content:start;flex:1}
.feat li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;color:var(--silver);font-size:.98rem;line-height:1.45}
.feat svg{width:18px;height:18px;margin-top:1px;stroke:var(--steel)}
.feat svg path{stroke-dasharray:16;stroke-dashoffset:0}
.plan-wrap.armed .feat svg path{stroke-dashoffset:16}
.plan-wrap.armed.in .feat svg path{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease) calc(var(--i,0) * 70ms + 150ms)}
.featured .feat svg{stroke:var(--glint)}
.feat .f-auto{display:none;color:var(--glint)}
.feat .f-auto svg{stroke:var(--glint)}
.with-auto .feat .f-auto{display:grid;animation:rise .5s var(--ease) both}
.cta-quote{display:none}
.with-auto .cta-std{display:none}
.with-auto .cta-quote{display:inline}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact .page-head{grid-template-columns:minmax(0,1fr);margin-bottom:28px}
.channels{display:grid;border-top:1px solid var(--edge)}
.channel{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--edge);min-height:66px}
.ch-k{color:var(--steel);font-size:.92rem}
.ch-v{color:var(--silver);overflow-wrap:anywhere;text-decoration:none}
a.ch-v{text-decoration:underline;text-decoration-color:var(--edge-strong);text-underline-offset:4px;transition:text-decoration-color .3s}
@media (hover:hover){a.ch-v:hover{text-decoration-color:var(--glint)}}
.copy-btn{min-height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--edge-strong);background:var(--field);color:var(--silver);font:500 .86rem/1 var(--f-sans);transition:border-color .3s,background-color .3s,transform .3s var(--spring)}
.copy-btn:active{transform:scale(.94)}
.copy-btn.done{border-color:rgba(168,214,255,.6);background:rgba(168,214,255,.1)}
.panel{border-radius:var(--r-lg);border:1px solid var(--edge-strong);background:linear-gradient(180deg,rgba(18,23,32,.97),rgba(11,14,20,.97));padding:clamp(22px,3vw,36px);display:grid;gap:18px;
  transform:translateY(calc((1 - var(--q,1)) * 60px));opacity:calc(var(--q,1) * 1.3 - .2)}
.field{display:grid;gap:8px;min-width:0}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
label{font-size:.88rem;color:var(--steel);font-weight:500}
input[type="text"],input[type="email"],select,textarea{width:100%;font:400 1rem/1.4 var(--f-sans);color:var(--silver);background:var(--field);border:1px solid var(--edge-strong);border-radius:12px;padding:12px 14px;transition:border-color .25s,box-shadow .25s,background-color .25s;appearance:none;-webkit-appearance:none}
input[type="text"],input[type="email"],select{height:52px}
textarea{min-height:128px;resize:vertical}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%239ea6b2' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
select option{background:var(--graphite);color:var(--silver)}
input::placeholder,textarea::placeholder{color:var(--steel-dim)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--glint);box-shadow:0 0 0 3px var(--glint-soft);background-color:rgba(168,214,255,.04)}
.check{display:flex;align-items:center;gap:12px;font-size:.95rem;color:var(--silver);min-height:44px}
.check input{flex:none;appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border-radius:7px;border:1px solid var(--edge-strong);background:var(--field);display:grid;place-items:center;transition:background .25s,border-color .25s,transform .3s var(--spring)}
.check input::after{content:"";width:10px;height:6px;border-left:2px solid var(--on-metal);border-bottom:2px solid var(--on-metal);transform:translateY(-1px) rotate(-45deg) scale(.4);opacity:0;transition:opacity .2s,transform .35s var(--spring)}
.check input:checked{background:var(--metal);border-color:transparent}
.check input:checked::after{opacity:1;transform:translateY(-1px) rotate(-45deg) scale(1)}
.check input:active{transform:scale(.9)}
.check small{color:var(--steel);font-size:.86rem}
.form-status{margin:0;padding:12px 14px;border-radius:12px;border:1px solid rgba(168,214,255,.35);background:rgba(168,214,255,.06);color:var(--silver);font-size:.92rem;animation:rise .45s var(--ease) both}
.form-status.err{border-color:rgba(255,140,150,.45);background:rgba(255,140,150,.07)}
.privacy{margin:0;color:var(--steel-dim);font-size:.84rem}
.privacy a{color:var(--steel);text-underline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button[disabled]{opacity:.6;pointer-events:none}

/* ---------- Privacy page ---------- */
.legal .page-head{grid-template-columns:minmax(0,1fr);margin-bottom:28px}
.legal-body{max-width:760px;display:grid;gap:14px;padding:clamp(22px,3vw,40px);border-radius:var(--r-lg);border:1px solid var(--edge);background:rgba(11,14,20,.95);color:var(--steel);line-height:1.7}
.legal-body h2{margin:18px 0 0;font-weight:500;font-size:1.22rem;color:var(--silver)}
.legal-body h2:first-child{margin-top:0}
.legal-body p{margin:0}
.legal-body ul{margin:0;padding-left:1.2em;display:grid;gap:8px}
.legal-body strong{color:var(--silver);font-weight:600}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--edge);padding-block:30px;background:var(--bar-bg)}
.foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 40px;align-items:start;color:var(--steel);font-size:.88rem;line-height:1.6}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot address{font-style:normal;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 20px;text-align:right}
.foot address a{color:var(--silver);text-decoration:none;background:linear-gradient(var(--glint),var(--glint)) 0 100% / 0 1px no-repeat;transition:background-size .35s var(--ease)}
@media (hover:hover){.foot address a:hover{background-size:100% 1px}}

/* ---------- Cookie notice ---------- */
.cookie{position:fixed;z-index:55;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + var(--tabbar-h));max-width:460px;
  display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;border:1px solid var(--edge-strong);background:rgba(11,14,20,.96);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.7);font-size:.9rem;color:var(--steel);animation:cookie-in .6s var(--spring) .8s both}
@keyframes cookie-in{from{opacity:0;transform:translateY(24px)}}
.cookie p{margin:0;line-height:1.5}
.cookie a{color:var(--silver);text-underline-offset:3px}
.cookie .btn{flex:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .plans{grid-template-columns:minmax(0,1fr);max-width:560px;gap:26px}
}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .stage{max-width:420px;justify-self:start;order:-1}
  .contact{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr)}
  .foot address{justify-content:flex-start;text-align:left}
}
@media (max-width:768px){
  .cs{height:240vh}
  .cs-card{--s0:.86;--s1:1;border-width:3px;border-radius:24px;height:min(36rem,58svh)}
  .demo{grid-template-columns:minmax(0,1fr);padding:8px}
  .demo-phone{position:absolute;left:8px;right:8px;bottom:8px;top:auto;height:72%;display:block;transform:translateY(112%);transition:transform .7s var(--spring);z-index:3}
  .ph{height:100%;width:100%;aspect-ratio:auto;border-radius:20px 20px 16px 16px}
  .ph::before{display:none}
  .ph-head{padding-top:12px}
  .ph-banner{top:10px}
  .demo.notify .demo-phone{transform:none}
  .tl-track{left:12px;margin-left:-1px}
  .tl-step{grid-template-columns:24px minmax(0,1fr);column-gap:18px}
  .tl-dot{grid-column:1}
  .tl-step:nth-child(n) .tl-card{grid-column:2;transform-origin:0 50%}
  .tl-step:nth-child(n) .tl-num{grid-column:2;justify-self:end;align-self:start;font-size:3.4rem;margin:-18px 8px 0 0;z-index:0}
  .tl-step{--dir:1 !important}
}
@media (max-width:760px){
  :root{--nav-h:60px;--tabbar-h:calc(64px + env(safe-area-inset-bottom,0px))}
  .nav-links,.nav-cta{display:none}
  .page-head{grid-template-columns:minmax(0,1fr)}
  .tabbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:0 max(6px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-left,0px));
    background:var(--bar-bg);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-top:1px solid var(--edge)}
  .tabbar a{position:relative;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    text-decoration:none;color:var(--steel-dim);font-size:.72rem;font-weight:500;letter-spacing:.02em;transition:color .3s}
  .tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--spring)}
  .tabbar a:active svg{transform:scale(.85)}
  .tabbar a[aria-current="page"]{color:var(--silver)}
  .tabbar a[aria-current="page"] svg{transform:translateY(-2px)}
  .tab-ind{position:absolute;top:0;left:0;height:2px;width:calc((100% - 2 * max(6px,env(safe-area-inset-left,0px))) / 4);margin-left:max(6px,env(safe-area-inset-left,0px));
    background:var(--metal);border-radius:0 0 2px 2px;box-shadow:0 0 12px rgba(232,238,246,.5);transition:transform .5s var(--spring);view-transition-name:tabind}
  .footer{padding-block:22px}
  .scroll-cue{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .field-row{grid-template-columns:minmax(0,1fr)}
  .channel{grid-template-columns:minmax(0,1fr) auto}
  .ch-k{grid-column:1 / -1}
  .hero-actions .btn{flex:1 1 auto}
  .stage{max-width:280px}
  .switch{width:100%}
  .cookie{right:max(12px,env(safe-area-inset-right,0px));left:max(12px,env(safe-area-inset-left,0px));max-width:none;gap:12px;padding:12px 14px;font-size:.8rem;bottom:calc(10px + var(--tabbar-h))}
  .cookie p{line-height:1.4}
  .demo-grid{grid-template-columns:minmax(0,1fr)}
  .demo-f:nth-child(3),.demo-f:nth-child(4){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .pulse,.sheen{display:none}
  .cs{height:auto}
  .cs-sticky{position:relative;height:auto;padding-block:40px}
}

/* cross-document page fade (Chrome, Edge, Safari 18.2+) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:ease}