@font-face{font-family:Gilroy;font-weight:400;font-display:swap;src:url(../fonts/gilroy-400.woff2) format("woff2")}
@font-face{font-family:Gilroy;font-weight:500;font-display:swap;src:url(../fonts/gilroy-500.woff2) format("woff2")}
@font-face{font-family:Gilroy;font-weight:600;font-display:swap;src:url(../fonts/gilroy-600.woff2) format("woff2")}
@font-face{font-family:Gilroy;font-weight:700;font-display:swap;src:url(../fonts/gilroy-700.woff2) format("woff2")}
@font-face{font-family:Gilroy;font-weight:800;font-display:swap;src:url(../fonts/gilroy-800.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-display:swap;src:url(../fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}

:root{
  --ink:#0f0f1a;--ink-2:#5a5a7a;--ink-3:#9090b0;
  --violet:#4f46e5;--indigo:#4f46e5;--purple:#7c3aed;--glow:#818cf8;
  --lav:#f0f4ff;--lav-2:#e8ecff;--rose:#d9f4f9;
  --navy:#0a0e1a;--navy-2:#111830;
  --card:rgba(255,255,255,.72);--line:rgba(79,70,229,.14);
  --grad:linear-gradient(135deg,#4f46e5 0%,#6d28d9 50%,#7c3aed 100%);--teal:#06b6d4;--teal-2:#0891b2;--urgent:#ef4444;--high:#f59e0b;--medium:#3b82f6;--low:#6b7280;--line-2:#d8dcf0;
  --shadow:0 30px 80px -30px rgba(79,70,229,.35);
  --serif:"Instrument Serif",Georgia,serif;
  --sans:Gilroy,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--lav);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1200px,92vw);margin-inline:auto}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);background:rgba(255,255,255,.7);border:1px solid var(--line);padding:7px 14px;border-radius:99px;backdrop-filter:blur(8px)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--grad)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.02}
h2{font-size:clamp(40px,5.6vw,76px)}
h2 em,h1 em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:560px}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 16px var(--sans);padding:16px 26px;border-radius:99px;border:0;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.btn.primary{color:#fff;background:var(--grad);box-shadow:0 18px 40px -14px rgba(79,70,229,.7)}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 26px 50px -14px rgba(79,70,229,.8)}
.btn.ghost{background:rgba(255,255,255,.75);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{transform:translateY(-3px)}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* NAV */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;width:min(1100px,92vw);display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 20px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);border-radius:99px;backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 10px 40px -16px rgba(79,70,229,.35);transition:background .3s}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em}
.brand img{width:34px;height:34px}
.brand b{color:var(--violet)}
.nav ul{display:flex;gap:30px;list-style:none;font-weight:600;font-size:15px;color:var(--ink-2)}
.nav ul a{position:relative;padding:6px 0}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad);transition:width .3s}
.nav ul a:hover::after{width:100%}
.nav .btn{padding:11px 22px;font-size:14px}
@media(max-width:820px){.nav ul{display:none}}

/* HERO */
.hero{position:relative;min-height:100vh;padding:130px 0 60px;overflow:hidden;background:
 radial-gradient(60% 50% at 85% 10%,rgba(103,232,249,.35),transparent 70%),
 radial-gradient(50% 50% at 5% 30%,rgba(129,140,248,.5),transparent 70%),
 linear-gradient(180deg,#f0f4ff,#e8ecff)}
.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.orb.o1{width:420px;height:420px;background:#c4b5fd;opacity:.55;left:-120px;top:380px}
.orb.o2{width:360px;height:360px;background:#06b6d4;opacity:.38;right:-80px;top:60px}
.dots{position:absolute;width:150px;height:150px;opacity:.6;background-image:radial-gradient(var(--glow) 3px,transparent 4px);background-size:30px 30px;-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 72%);mask-image:radial-gradient(circle,#000 30%,transparent 72%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:20px}
.hero h1{font-size:clamp(54px,8.2vw,124px);margin:22px 0 24px}
.hero .lead{margin-bottom:34px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:38px}
.chip{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2)}
.chip b{color:var(--violet);font-weight:800}
.stage{position:relative;height:min(78vh,760px);min-height:560px}
.arch{--x:0;position:absolute;left:50%;bottom:0;width:min(420px,78%);height:80%;transform:translateX(-50%);border-radius:999px 999px 36px 36px;background:linear-gradient(180deg,#818cf8 0%,#4f46e5 50%,#6d28d9 100%);box-shadow:var(--shadow)}
.arch::after{content:"";position:absolute;inset:14px;border-radius:inherit;border:1.5px solid rgba(255,255,255,.35)}
.hero-man{position:absolute;left:50%;bottom:-40px;height:112%;transform:translateX(-50%);filter:drop-shadow(0 40px 40px rgba(40,30,120,.35))}
.hero-man img{height:100%;width:auto;max-width:none}
.float-chip{position:absolute;z-index:3;width:84px;height:84px;border-radius:26px;background:rgba(255,255,255,.8);border:1px solid #fff;backdrop-filter:blur(12px);box-shadow:0 20px 40px -14px rgba(79,70,229,.45);display:grid;place-items:center}
.float-chip>div{width:58px;height:58px}
.float-chip .bob{display:grid;place-items:center;animation:bob 6s ease-in-out infinite;animation-delay:var(--bd,0s)}
@keyframes bob{50%{transform:translateY(-12px) rotate(3deg)}}
.glass-note{position:absolute;z-index:4;padding:14px 18px;border-radius:20px;background:rgba(255,255,255,.82);border:1px solid #fff;backdrop-filter:blur(14px);box-shadow:0 20px 40px -18px rgba(79,70,229,.5);font-size:13px;color:var(--ink-2)}
.glass-note b{display:block;font:400 28px var(--serif);color:var(--ink);line-height:1}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint span{width:1.5px;height:34px;background:linear-gradient(var(--violet),transparent);animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.stage{height:560px;order:2}.scroll-hint{display:none}.float-chip{width:64px;height:64px;border-radius:20px}.float-chip>div{width:42px;height:42px}}

/* MARQUEE */
.marquee{background:var(--navy);color:#fff;overflow:hidden;padding:20px 0;position:relative;z-index:2}
.marquee-track{display:flex;gap:56px;width:max-content;animation:slide 32s linear infinite;font:400 30px var(--serif);white-space:nowrap}
.marquee-track span{display:flex;align-items:center;gap:56px;opacity:.9}
.marquee-track span::after{content:"✦";color:var(--glow);font-size:18px}
@keyframes slide{to{transform:translateX(-50%)}}

/* STORY */
.story{position:relative;padding:150px 0 80px;background:linear-gradient(180deg,#e8ecff 0%,#f7f9ff 18%,#f7f9ff 100%)}
.sec-head{text-align:center;margin-bottom:90px}
.sec-head h2{margin:18px auto 20px;max-width:900px}
.sec-head .lead{margin:auto}
.story-grid{display:grid;grid-template-columns:1fr 440px;gap:90px;align-items:start}
.steps .step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .6s,transform .6s;transform:translateX(-10px)}
.steps .step.active{opacity:1;transform:none}
.step .num{font:400 20px var(--serif);color:var(--violet);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.step .num::after{content:"";width:60px;height:1.5px;background:var(--violet);opacity:.4}
.step h3{font-size:clamp(36px,4.3vw,58px);margin-bottom:18px}
.step p{font-size:18px;color:var(--ink-2);max-width:480px}
.step ul{list-style:none;margin-top:22px;display:grid;gap:10px}
.step li{display:flex;gap:12px;align-items:center;font-weight:600;font-size:16px}
.step li::before{content:"✓";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;font-size:13px;flex:none}
.step-phone{display:none}
.sticky{position:sticky;top:11vh;height:78vh;display:grid;place-items:center}
.sticky .glow{position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.35),transparent 65%);filter:blur(30px)}

/* PHONE */
.phone{position:relative;width:min(300px,100%);border-radius:14% / 6.6%;padding:2.6%;background:linear-gradient(145deg,#2b2a4a,#0c0b1f);box-shadow:0 50px 90px -30px rgba(40,30,120,.6),inset 0 0 0 1.5px rgba(255,255,255,.15)}
.phone::before{display:none}
.phone .screen{position:relative;width:100%;aspect-ratio:1320/2868;border-radius:12% / 5.5%;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.phone .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1);transform:scale(1.04)}
.phone .screen img.on,.phone .screen img:only-child{opacity:1;transform:none}
.phone.lg{width:min(340px,100%)}
@media(max-width:900px){
 .story-grid{grid-template-columns:1fr;gap:0}.sticky{display:none}
 .steps .step{min-height:auto;opacity:1;transform:none;padding:40px 0 70px;align-items:flex-start}
 .step-phone{display:block;margin-top:34px;width:260px}
}

/* HOW (lottie) */
.how{padding:110px 0 140px;background:#f7f9ff}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:70px}
.how-card{position:relative;padding:38px 32px 36px;border-radius:36px;background:var(--card);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(79,70,229,.45);overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.how-card:hover{transform:translateY(-10px)}
.how-card:nth-child(1){background:linear-gradient(160deg,#dff6fa,#fff 60%)}
.how-card:nth-child(2){background:linear-gradient(160deg,#e8edff,#fff 60%)}
.how-card:nth-child(3){background:linear-gradient(160deg,#ece9ff,#fff 60%)}
.how-card .lot{width:96px;height:96px;margin-bottom:22px;background:#fff;border-radius:28px;display:grid;place-items:center;box-shadow:0 16px 30px -16px rgba(79,70,229,.5)}
.how-card .lot div{width:64px;height:64px}
.how-card h3{font-size:36px;margin-bottom:12px}
.how-card p{color:var(--ink-2);font-size:16.5px}
.how-card .big{position:absolute;right:20px;top:6px;font:400 110px var(--serif);color:rgba(79,70,229,.09);line-height:1}
.types{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:60px}
.type{display:flex;align-items:center;gap:6px;padding:8px 20px 8px 10px;border-radius:99px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:15px;box-shadow:0 12px 24px -16px rgba(79,70,229,.5)}
.type div{width:44px;height:44px}
@media(max-width:900px){.how-grid{grid-template-columns:1fr}}

/* DARK BAND */
.night{position:relative;padding:150px 0 170px;background:radial-gradient(60% 50% at 50% 0%,#1d1b52 0%,transparent 70%),linear-gradient(180deg,#0a0e1a,#111830 60%,#0a0e1a);color:#fff;overflow:hidden}
.night .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#c4b5fd}
.night h2{margin:18px 0 18px}
.night .lead{color:#b4b6d9}
.night-head{text-align:center;margin-bottom:60px}
.night-head .lead{margin:auto}
.stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#c4b5fd,transparent),radial-gradient(1px 1px at 85% 70%,#fff,transparent),radial-gradient(1px 1px at 10% 65%,#fff,transparent);background-size:420px 420px;opacity:.55}
.trio{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,3vw,48px);padding-bottom:40px}
.trio .col{flex:0 1 300px}
.trio .col:nth-child(2){margin-top:90px}
.trio .phone{width:100%;box-shadow:0 60px 100px -30px rgba(0,0,0,.8),0 0 80px -20px rgba(124,58,237,.55),inset 0 0 0 1.5px rgba(255,255,255,.2)}
.theme-pills{display:flex;justify-content:center;gap:12px;margin-top:70px;flex-wrap:wrap;position:relative}
.theme-pills span{padding:12px 24px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);font-weight:600}
.theme-pills span:first-child{background:var(--grad);border-color:transparent}
@media(max-width:820px){.trio{flex-direction:column;align-items:center}.trio .col:nth-child(2){margin-top:0}.trio .col{width:260px;flex:none}}

/* PRICING */
.pricing{padding:140px 0;background:linear-gradient(180deg,#f7f9ff,#e8ecff)}
.toggle{display:inline-flex;margin-top:34px;padding:6px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.toggle button{font:700 15px var(--sans);padding:11px 24px;border-radius:99px;border:0;background:none;color:var(--ink-2);cursor:pointer;transition:.35s}
.toggle button.on{background:var(--grad);color:#fff;box-shadow:0 10px 24px -10px rgba(79,70,229,.8)}
.toggle small{font-weight:700;color:#06b6d4;margin-left:6px}
.toggle button.on small{color:#cffafe}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:34px 28px;border-radius:34px;background:rgba(255,255,255,.8);border:1px solid var(--line);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.plan:hover{transform:translateY(-10px);box-shadow:var(--shadow)}
.plan.hot{background:linear-gradient(160deg,#4f46e5,#6d28d9 55%,#7c3aed);color:#fff;border:0;box-shadow:0 40px 80px -30px rgba(79,70,229,.8)}
.plan .tag{position:absolute;top:-13px;left:28px;background:#fff;color:var(--violet);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:99px;box-shadow:0 10px 20px -8px rgba(0,0,0,.3)}
.plan h3{font:700 20px var(--sans);letter-spacing:0}
.price{font:400 64px var(--serif);margin:14px 0 2px;line-height:1}
.price sup{font-size:26px;vertical-align:top;position:relative;top:10px;margin-right:2px}
.per{font-size:14px;color:var(--ink-3);min-height:21px}
.plan.hot .per{color:#ddd6fe}
.plan ul{list-style:none;margin:24px 0 30px;display:grid;gap:12px;font-size:15px;flex:1}
.plan li{display:flex;gap:10px}
.plan li::before{content:"✓";font-weight:800;color:var(--violet)}
.plan.hot li::before{color:#c4b5fd}
.plan .btn{justify-content:center;width:100%}
.plan.hot .btn{background:#fff;color:var(--indigo)}
.fine{text-align:center;margin-top:34px;font-size:14px;color:var(--ink-3)}
@media(max-width:1020px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.plans{grid-template-columns:1fr}}

/* TRUST */
.trust{padding:140px 0;background:#e8ecff;position:relative;overflow:hidden}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.trust .phones{position:relative;height:620px}
.trust .phones .p1{position:absolute;left:4%;top:0;width:290px}
.trust .phones .p2{position:absolute;right:2%;top:90px;width:260px}
.tlist{display:grid;gap:18px;margin-top:38px}
.titem{display:flex;gap:18px;padding:22px 24px;border-radius:26px;background:rgba(255,255,255,.75);border:1px solid var(--line);transition:transform .4s}
.titem:hover{transform:translateX(8px)}
.titem .ic{flex:none;width:48px;height:48px;border-radius:16px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:22px}
.titem h4{font-size:18px;margin-bottom:2px}
.titem p{font-size:15px;color:var(--ink-2)}
@media(max-width:900px){.trust-grid{grid-template-columns:1fr;gap:40px}.trust .phones{height:540px;order:2}}

/* TEAM */
.team{padding:150px 0 170px;background:linear-gradient(180deg,#e8ecff,#e3f6fb 60%,#f0f4ff);overflow:hidden}
.team-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.team-photo{position:relative}
.team-photo .frame{border-radius:44px 44px 44px 200px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3.3}
.team-photo img{width:100%;height:112%;object-fit:cover;object-position:center top;will-change:transform}
.team-photo .back{position:absolute;inset:-26px 26px 26px -26px;border-radius:44px 44px 44px 200px;background:var(--grad);opacity:.18;z-index:-1}
.team-photo .glass-note{left:-24px;bottom:34px}
.team-photo .glass-note.b2{left:auto;right:-20px;top:36px;bottom:auto}
.team h2{margin:18px 0 22px}
.quote{margin-top:30px;padding:26px 28px;border-radius:28px;background:rgba(255,255,255,.8);border:1px solid var(--line);font:400 26px/1.25 var(--serif)}
.quote small{display:block;margin-top:12px;font:600 14px var(--sans);color:var(--ink-3)}
@media(max-width:900px){.team-grid{grid-template-columns:1fr;gap:50px}.team-photo .glass-note{left:10px}.team-photo .glass-note.b2{right:10px}}

/* CTA */
.cta{position:relative;padding:150px 0;background:var(--navy);color:#fff;text-align:center;overflow:hidden}
.cta .orb.c1{width:520px;height:520px;background:#4f46e5;opacity:.5;left:-160px;top:-100px}
.cta .orb.c2{width:460px;height:460px;background:#06b6d4;opacity:.28;right:-120px;bottom:-140px}
.cta img.logo{width:110px;margin:0 auto 24px;filter:drop-shadow(0 20px 30px rgba(124,58,237,.6))}
.cta h2{font-size:clamp(48px,8vw,116px);margin-bottom:22px;position:relative}
.cta .lead{color:#c4c6e6;margin:0 auto 40px;position:relative}
.stores{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative}
.store{display:flex;align-items:center;gap:14px;padding:14px 28px 14px 22px;border-radius:20px;background:#fff;color:var(--ink);text-align:left;transition:transform .35s}
.store:hover{transform:translateY(-4px)}
.store svg{width:30px;height:30px}
.store small{display:block;font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.04em}
.store b{font-size:19px;line-height:1.1}
footer{background:#0a0e1a;color:#8f90b8;padding:36px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer .brand{color:#fff;font-size:16px}
footer a:hover{color:#fff}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ============ FX: cursor, spotlight, tilt, magnetic, scatter ============ */
.fx-on,.fx-on a,.fx-on button{cursor:none}
#fxTrail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9998}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;will-change:transform}
.cur-dot{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--grad);box-shadow:0 0 18px 4px rgba(129,140,248,.8)}
.cur-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border:1.5px solid rgba(79,70,229,.55);transition:width .35s,height .35s,margin .35s,background .35s,border-color .35s,opacity .3s;mix-blend-mode:normal;display:grid;place-items:center;font:700 11px var(--sans);letter-spacing:.1em;color:#fff;text-transform:uppercase}
.cur-ring.hot{width:86px;height:86px;margin:-43px 0 0 -43px;background:rgba(79,70,229,.14);border-color:rgba(6,182,212,.9);backdrop-filter:blur(2px)}
.cur-ring.view{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--grad);border-color:transparent;opacity:.92}
.cur-ring.press{width:30px;height:30px;margin:-15px 0 0 -15px;background:rgba(6,182,212,.4)}
.dark-cur .cur-ring{border-color:rgba(255,255,255,.6)}
#progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#06b6d4,#4f46e5,#7c3aed);z-index:9997}

/* spotlight + animated conic border on cards */
.spot{position:relative;isolation:isolate;transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .4s}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(129,140,248,.35),rgba(6,182,212,.12) 40%,transparent 65%)}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;opacity:0;transition:opacity .35s;border:2.5px solid transparent;background:conic-gradient(from var(--ang,0deg),#06b6d4,#4f46e5,#7c3aed,#f59e0b,#06b6d4) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;animation:spin 3s linear infinite}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
.spot:hover::before,.spot:hover::after{opacity:1}
.spot .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);background-size:250% 100%;background-position:calc(var(--gx,50)*1%) 0;mix-blend-mode:overlay;z-index:2}
.spot:hover .glare{opacity:1}
.spot > *{transform:translateZ(0)}
.spot:hover .pop{transform:translateZ(46px) scale(1.04)}
.pop{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.how-card.spot:hover .lot{transform:translateZ(60px) rotate(-8deg) scale(1.15);box-shadow:0 30px 40px -14px rgba(79,70,229,.6)}
.how-card .lot{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.plan.spot:hover .price{transform:translateZ(50px) scale(1.08);text-shadow:0 12px 30px rgba(79,70,229,.45)}
.plan .price{transition:transform .4s cubic-bezier(.2,.8,.2,1);transform-origin:left}
.plan.hot.spot:hover .price{text-shadow:0 12px 30px rgba(0,0,0,.35)}
.titem.spot:hover .ic{transform:translateZ(40px) rotate(360deg) scale(1.15);transition:transform .8s}
.titem .ic{transition:transform .5s}

/* 3D phones */
.tilt3d{perspective:1100px}
.phone.live{transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .4s;will-change:transform}
.phone.live:hover{box-shadow:0 70px 110px -30px rgba(79,70,229,.75),0 0 90px -10px rgba(6,182,212,.55),inset 0 0 0 1.5px rgba(255,255,255,.35)}
.phone .screen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 62%);background-size:260% 100%;background-position:calc(var(--gx,50)*1%) 0;opacity:0;transition:opacity .3s;pointer-events:none;z-index:4}
.phone:hover .screen::after{opacity:1}
.phone .ring{position:absolute;inset:-14px;border-radius:14% / 6.6%;border:2px solid rgba(6,182,212,.5);opacity:0;pointer-events:none}
.phone:hover .ring{animation:pulse 1.4s ease-out infinite}
.phone:hover .ring.r2{animation-delay:.45s}
@keyframes pulse{0%{opacity:.9;transform:scale(.98)}100%{opacity:0;transform:scale(1.18)}}

.hero-man{transition:filter .3s}
.scan{position:absolute;left:10%;right:10%;height:3px;top:0;z-index:5;pointer-events:none;border-radius:3px;background:linear-gradient(90deg,transparent,#06b6d4,transparent);box-shadow:0 0 24px 6px rgba(6,182,212,.7);opacity:0}
.stage:hover .scan{opacity:1;animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%{top:6%}50%{top:92%}100%{top:6%}}
.float-chip{transition:box-shadow .3s,background .3s}
.float-chip:hover{box-shadow:0 0 0 6px rgba(6,182,212,.25),0 30px 60px -10px rgba(79,70,229,.7);background:#fff}

/* letter scatter */
.ch{display:inline-block;will-change:transform;transition:transform .18s ease-out,color .18s}
.hero h1,.sec-head h2,.night h2,.team h2,.trust h2,.cta h2{cursor:default}

/* buttons: magnetic + shine */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.btn:hover::after{transform:translateX(120%)}

/* marquee hover */
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{transition:transform .3s,color .3s,text-shadow .3s}
.marquee-track span:hover{transform:scale(1.18) rotate(-3deg);color:#67e8f9;text-shadow:0 0 28px rgba(6,182,212,.9)}

/* step hover */
.step{position:relative}
.step:hover h3{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:.3s}
.step li{transition:transform .3s}
.step li:hover{transform:translateX(12px)}
.pills{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.pills i{font-style:normal;font-weight:700;font-size:13px;padding:6px 14px;border-radius:99px;color:#fff;transition:transform .3s}
.pills i:hover{transform:translateY(-6px) scale(1.12) rotate(-3deg)}
.pills .u{background:var(--urgent)}.pills .h{background:var(--high)}.pills .m{background:var(--medium)}.pills .l{background:var(--low)}

/* canvases */
.netcv{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.night .wrap,.cta .wrap{position:relative;z-index:1}

/* flashlight team photo */
.frame{position:relative}
.frame .dim{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle 170px at var(--fx,50%) var(--fy,50%),transparent 0%,transparent 60%,rgba(10,14,26,.7) 100%);opacity:0;transition:opacity .4s;mix-blend-mode:multiply}
.frame:hover .dim{opacity:1}
.frame:hover img{filter:saturate(1.2) contrast(1.05)}

/* ======= SUB PAGES ======= */
.sub{background:linear-gradient(180deg,#e8ecff,#f0f4ff 40%,#f7f9ff)}
.page-hero{position:relative;padding:170px 0 90px;overflow:hidden;background:radial-gradient(60% 60% at 90% 0,rgba(103,232,249,.35),transparent 70%),radial-gradient(50% 60% at 0 20%,rgba(129,140,248,.45),transparent 70%)}
.page-hero h1{font-size:clamp(52px,8vw,112px);margin:20px 0 18px}
.page-hero .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:-50px;position:relative;z-index:3}
.ccard{padding:30px;border-radius:30px;background:#fff;border:1px solid var(--line-2);box-shadow:0 30px 60px -40px rgba(79,70,229,.5)}
.ccard .ic{width:54px;height:54px;border-radius:18px;background:var(--grad);display:grid;place-items:center;font-size:24px;color:#fff;margin-bottom:18px}
.ccard h3{font:700 20px var(--sans);margin-bottom:6px}
.ccard p{color:var(--ink-2);font-size:15.5px;margin-bottom:14px}
.ccard a.lnk{font-weight:700;color:var(--violet)}
.section{padding:90px 0}
.section h2{font-size:clamp(36px,4.6vw,60px);margin-bottom:12px}
.faq-grid{display:grid;grid-template-columns:260px 1fr;gap:60px;align-items:start}
.cats{position:sticky;top:110px;display:grid;gap:8px}
.cats a{padding:12px 18px;border-radius:16px;font-weight:700;color:var(--ink-2);background:rgba(255,255,255,.6);border:1px solid var(--line-2);transition:.3s}
.cats a:hover{background:var(--grad);color:#fff;transform:translateX(10px);border-color:transparent}
.faq-group{margin-bottom:46px;scroll-margin-top:100px}
.faq-group h3{font:700 14px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:14px}
details{background:#fff;border:1px solid var(--line-2);border-radius:22px;margin-bottom:12px;overflow:hidden;transition:box-shadow .3s,transform .3s}
details:hover{transform:translateX(6px);box-shadow:0 20px 40px -26px rgba(79,70,229,.6)}
summary{list-style:none;padding:20px 26px;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:20px;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 28px/1 var(--serif);color:var(--violet);transition:transform .4s}
details[open] summary::after{transform:rotate(135deg)}
details[open]{border-color:rgba(79,70,229,.4)}
details .ans{padding:0 26px 22px;color:var(--ink-2);font-size:16px}
details .ans ol,details .ans ul{margin:10px 0 0 20px}
details .ans li{margin:4px 0}
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:50px;border-radius:44px;background:linear-gradient(150deg,#0a0e1a,#151e3a);color:#fff;position:relative;overflow:hidden}
.form-wrap h2{margin-bottom:12px}
.form-wrap p{color:#b4b6d9}
.form{display:grid;gap:14px;position:relative;z-index:1}
.form input,.form select,.form textarea{width:100%;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font:500 16px var(--sans);outline:none;transition:.3s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#06b6d4;box-shadow:0 0 0 4px rgba(6,182,212,.25);background:rgba(255,255,255,.12)}
.form select option{color:#0f0f1a}
.form textarea{min-height:130px;resize:vertical}
.form ::placeholder{color:#8f90b8}
@media(max-width:900px){.contact-grid,.faq-grid,.form-wrap{grid-template-columns:1fr}.cats{position:static;grid-auto-flow:column;overflow-x:auto}.form-wrap{padding:30px}}

.policy{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start;padding:70px 0 120px}
.toc{position:sticky;top:110px;padding:24px;border-radius:26px;background:#fff;border:1px solid var(--line-2)}
.toc b{display:block;font:700 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:12px}
.toc a{display:block;padding:7px 12px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--ink-2);transition:.25s}
.toc a:hover,.toc a.on{background:rgba(79,70,229,.1);color:var(--violet);transform:translateX(6px)}
.doc{max-width:780px}
.doc section{margin-bottom:54px;scroll-margin-top:100px}
.doc h2{font-size:clamp(32px,3.6vw,46px);margin-bottom:14px}
.doc h3{font:700 18px var(--sans);margin:22px 0 6px;letter-spacing:0}
.doc p,.doc li{color:var(--ink-2);font-size:16.5px;line-height:1.7}
.doc p{margin-bottom:12px}
.doc ul{margin:8px 0 14px 22px}
.doc li{margin:5px 0}
.doc a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.callout{padding:22px 26px;border-radius:24px;background:linear-gradient(135deg,rgba(79,70,229,.1),rgba(6,182,212,.1));border:1px solid rgba(79,70,229,.25);margin:18px 0}
.callout p:last-child{margin:0}
.tbl{overflow-x:auto;border-radius:22px;border:1px solid var(--line-2);background:#fff;margin:16px 0}
.tbl table{border-collapse:collapse;width:100%;min-width:640px;font-size:14.5px}
.tbl th{background:#e8ecff;text-align:left;padding:13px 16px;font-weight:700;color:var(--ink)}
.tbl td{padding:13px 16px;border-top:1px solid var(--line-2);color:var(--ink-2);vertical-align:top}
.tbl tr{transition:background .2s}.tbl tr:hover td{background:#f0f4ff}
@media(max-width:900px){.policy{grid-template-columns:1fr}.toc{position:static}}

.glass-note.spot{position:absolute}
.netcv{pointer-events:none}
.form-wrap>div{position:relative;z-index:1}

.policy>*,.faq-grid>*,.form-wrap>*{min-width:0}
.doc{min-width:0}

.how-card .glare,.plan .glare,.titem .glare{opacity:0!important}.how-card:hover .glare,.plan:hover .glare,.titem:hover .glare{opacity:.3!important}

.store.soon{opacity:.75;cursor:not-allowed;background:rgba(255,255,255,.85);border:1.5px dashed rgba(79,70,229,.5)}
.store.soon b{color:var(--violet)}
.store.soon:hover{transform:none}

.contact-grid{grid-template-columns:repeat(4,1fr)}@media(max-width:1100px){.contact-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* Launch web app CTA */
.launch-web{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;width:0;min-width:100%;max-width:none;margin:0;padding:12px 14px;border-radius:22px;background:linear-gradient(135deg,#5b52f0 0%,#4f46e5 45%,#6d28d9 100%);color:#fff;text-align:left;border:1px solid rgba(255,255,255,.22);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 28px 56px -18px rgba(79,70,229,.9),0 2px 6px rgba(0,0,0,.25);position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,filter .3s}
.launch-web:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 24px 44px -14px rgba(99,91,255,.9),0 2px 6px rgba(0,0,0,.25)}
.launch-web:active{transform:translateY(0)}
.launch-web:focus-visible{outline:3px solid rgba(165,180,252,.9);outline-offset:3px}
.launch-web .lw-ic,.launch-web .lw-go{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:16px}
.launch-web .lw-ic{background:rgba(255,255,255,.16)}
.launch-web .lw-go{background:#fff;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.launch-web:hover .lw-go{transform:translateX(3px)}
.launch-web svg{width:26px;height:26px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.launch-web .lw-ic svg{stroke:#fff;stroke-width:1.8}
.launch-web .lw-go svg{stroke:#4f46e5;stroke-width:2.2}
.launch-web .lw-t{flex:1;font:800 22px/1.15 var(--sans);letter-spacing:.005em;text-align:center}

.store-group{display:grid;gap:16px;width:fit-content;max-width:100%;margin:0 auto;position:relative}
.store-group .stores{flex-wrap:nowrap}
.store-group .store{flex:1 1 0}
@media(max-width:560px){.store-group{width:100%}.store-group .stores{flex-wrap:wrap}.store-group .store{flex:1 1 100%}}

/* Store buttons (iOS / Google Play) */
.store{position:relative;display:flex;align-items:center;gap:14px;min-width:260px;padding:14px 18px 14px 14px;border-radius:22px;text-align:left;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,filter .3s}
.store .st-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px}
.store .st-ic img{height:28px;width:auto;display:block}
.store .st-tx{flex:1;min-width:0}
.store small{display:block;font:600 11px var(--sans);letter-spacing:.09em;text-transform:uppercase}
.store b{display:block;font:800 21px/1.15 var(--sans);letter-spacing:-.005em;margin-top:2px}
.store.play{background:linear-gradient(135deg,#ffffff 0%,#eef0ff 100%);color:var(--ink);border:1px solid rgba(255,255,255,.9);box-shadow:0 22px 44px -18px rgba(99,102,241,.7),0 2px 6px rgba(0,0,0,.2)}
.store.play .st-ic{background:#fff;box-shadow:0 8px 18px -8px rgba(79,70,229,.45),inset 0 0 0 1px rgba(79,70,229,.1)}
.store.play small{color:var(--ink-3)}
.store.play .st-go{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.store.play .st-go svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.store.play:hover{transform:translateY(-3px);box-shadow:0 30px 52px -18px rgba(129,140,248,.85),0 2px 6px rgba(0,0,0,.2)}
.store.play:hover .st-go{transform:translateX(3px)}
.store.soon{opacity:1;cursor:not-allowed;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1.5px dashed rgba(165,180,252,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.store.soon .st-ic{background:rgba(255,255,255,.92);box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.store.soon .st-ic img{height:28px;filter:brightness(.62)}
.store.soon small{color:#a5b4fc}
.store.soon b{color:#fff}
.store.soon:hover{transform:none}
.store .st-badge{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:rgba(124,58,237,.35);border:1px solid rgba(165,180,252,.4);font:700 11px var(--sans);letter-spacing:.04em;white-space:nowrap;color:#e0e7ff}
.store .st-badge i{width:7px;height:7px;border-radius:50%;background:#67e8f9;box-shadow:0 0 0 0 rgba(103,232,249,.7);animation:soonpulse 1.8s ease-out infinite}
@keyframes soonpulse{0%{box-shadow:0 0 0 0 rgba(103,232,249,.6)}100%{box-shadow:0 0 0 8px rgba(103,232,249,0)}}
@media(max-width:560px){.store{min-width:0}}
