/* CALL SNP CLICK — theme tokens (from callsnap.click CSS). Reskin here. */
/* Palette sampled from Alan's snap.click logo (brand-original.jpg) */
:root{--navy:#151730;--ink:#040315;--blue:#9e63e8;--blue-d:#a957c8;--teal:#63c2b5;--cyan:#36e1eb;--purple:#da6bcf;--lilac:#e870c9;--mint:#63c2b5;--ice:#e9dcff;--white:#fbfcfc;
--fh:'Space Grotesk',system-ui,sans-serif;--fb:'Roboto',system-ui,sans-serif;--grad:linear-gradient(110deg,var(--blue),var(--purple) 55%,var(--teal));}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
body{background:var(--ink);color:var(--white);font-family:var(--fb);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--fh);line-height:1.05;letter-spacing:-.02em}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{width:min(1200px,92vw);margin:auto}
.eyebrow{font-family:var(--fh);text-transform:uppercase;letter-spacing:.25em;font-size:.78rem;color:var(--teal)}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:1em 1.8em;border-radius:999px;font-family:var(--fh);font-weight:700;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s;border:0;cursor:pointer;font-size:1rem}
.btn-primary{background:var(--grad);color:var(--ink);box-shadow:0 0 30px #9e63e880}
.btn-primary:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 50px #63c2b5aa}
.btn-ghost{border:1px solid #ffffff40;color:var(--white);backdrop-filter:blur(8px);background:#ffffff0d}
.btn-ghost:hover{border-color:var(--teal);transform:translateY(-3px)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,#ffffff70,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn:hover::after{transform:translateX(120%)}
/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding:1.1rem 0;transition:background .4s,padding .4s}
.nav.scrolled{background:#040315cc;backdrop-filter:blur(14px);padding:.7rem 0;border-bottom:1px solid #ffffff12}
.nav .wrap{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--fh);font-weight:800;font-size:1.25rem;letter-spacing:.04em}
.logo span{color:var(--teal)}
.nav ul{display:flex;gap:2rem;list-style:none;font-size:.92rem}
.nav ul a{position:relative;opacity:.8}.nav ul a:hover{opacity:1}
.nav ul a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .35s}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
/* hero */
.hero{position:relative;min-height:100svh;padding:6rem 0 4rem;display:grid;place-items:center;overflow:hidden;text-align:center}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,#15173040,#040315ee 75%),linear-gradient(to bottom,transparent 60%,var(--ink))}
.hero h1{font-size:clamp(2.6rem,8vw,7rem);font-weight:800;margin:.6rem 0 1.2rem}
.hero h1 .line{display:block;overflow:hidden}.hero h1 .line>span{display:inline-block}
.hero p.lead{max-width:640px;margin:0 auto 2.2rem;font-size:clamp(1rem,1.6vw,1.25rem);color:var(--ice)}
.hero .ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.scroll-cue{position:absolute;bottom:2rem;left:50%;translate:-50% 0;width:26px;height:42px;border:2px solid #ffffff60;border-radius:20px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--teal);animation:cue 1.6s infinite}
@keyframes cue{to{transform:translateY(14px);opacity:0}}
/* marquee */
.marquee{border-block:1px solid #ffffff14;padding:1.2rem 0;overflow:hidden;background:#151730aa;white-space:nowrap}
.marquee .track{display:inline-flex;gap:3rem;font-family:var(--fh);font-size:1.4rem;font-weight:700;animation:mq 30s linear infinite}
.marquee .track span:nth-child(even){color:var(--teal)}
@keyframes mq{to{transform:translateX(-50%)}}
section{position:relative;padding:clamp(5rem,12vw,9rem) 0}
.sec-head{max-width:760px;margin-bottom:3.5rem}
.sec-head h2{font-size:clamp(2.2rem,5vw,4rem);margin:.6rem 0 1rem}
.sec-head p{color:#e9dcffcc}
/* swoop dividers */
.swoop{position:absolute;left:0;width:100%;height:120px;pointer-events:none}
.swoop.top{top:-1px}.swoop.bottom{bottom:-1px;transform:scaleY(-1)}
/* intro art */
.intro .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
.intro .art{border-radius:28px;overflow:hidden;box-shadow:0 40px 100px -30px #9e63e8aa;clip-path:inset(0 0 0 0 round 28px)}
.intro .art img{width:100%;transform:scale(1.2)}
.intro h2{font-size:clamp(2rem,4.4vw,3.4rem);margin:.6rem 0 1.2rem}
.intro p{color:#e9dcffcc;margin-bottom:1rem}
/* services */
.services{background:linear-gradient(180deg,var(--ink),var(--navy) 40%,var(--ink))}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{position:relative;border-radius:24px;background:#ffffff08;border:1px solid #ffffff14;overflow:hidden;transition:transform .4s,border-color .4s,box-shadow .4s;transform-style:preserve-3d;will-change:transform}
.card:hover{border-color:#63c2b580;box-shadow:0 30px 80px -30px #63c2b5aa}
.card .media{aspect-ratio:4/3;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card:hover .media img{transform:scale(1.08)}
.card .body{padding:1.5rem 1.6rem 1.8rem}
.card .num{font-family:var(--fh);font-size:.8rem;color:var(--teal);letter-spacing:.2em}
.card h3{font-size:1.4rem;margin:.4rem 0 .6rem}
.card p{font-size:.95rem;color:#e9dcffbb}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),#9e63e830,transparent 50%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:2}
.card:hover::before{opacity:1}
/* steps */
.steps{overflow:hidden}
.steps-track{display:flex;gap:1.6rem}
.step{flex:0 0 min(420px,80vw);padding:2.4rem;border-radius:24px;background:linear-gradient(160deg,#9e63e822,#da6bcf22);border:1px solid #ffffff18;min-height:320px;display:flex;flex-direction:column;justify-content:space-between}
.step .n{font-family:var(--fh);font-size:5rem;font-weight:800;line-height:1}
.step h3{font-size:1.6rem;margin-bottom:.6rem}.step p{color:#e9dcffcc}
/* stats */
.stats{background:url(img/accent-ribbons.webp) center/cover fixed;isolation:isolate}
.stats::before{content:"";position:absolute;inset:0;background:#040315d0;z-index:-1}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.stat{padding:2rem;border-radius:20px;background:#15173099;border:1px dashed #63c2b580;text-align:center}
.stat .v{font-family:var(--fh);font-size:clamp(2.4rem,4vw,3.6rem);font-weight:800}
.stat .l{color:#e9dcffcc;font-size:.9rem}
.ph-badge{display:inline-block;margin-top:.8rem;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;padding:.25em .8em;border-radius:99px;background:#e870c922;color:var(--lilac);border:1px solid #e870c955}
.ph-note{margin-top:2rem;text-align:center;color:var(--lilac);font-size:.9rem}
/* contact */
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
form{display:grid;gap:1rem;padding:2.2rem;border-radius:24px;background:#ffffff08;border:1px solid #ffffff18}
label{font-size:.85rem;color:var(--ice);display:grid;gap:.4rem}
input,select,textarea{font:inherit;color:var(--white);background:#040315;border:1px solid #ffffff22;border-radius:12px;padding:.85rem 1rem;transition:border-color .3s,box-shadow .3s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px #63c2b533}
.not-wired{font-size:.8rem;color:var(--lilac);border:1px dashed #e870c966;padding:.6rem .9rem;border-radius:10px}
.form-msg{color:var(--mint);font-size:.9rem;min-height:1.2em}
/* footer */
footer{padding:4rem 0 2rem;border-top:1px solid #ffffff14;background:#020110}
footer .grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
footer .big{font-family:var(--fh);font-size:clamp(3rem,12vw,10rem);font-weight:800;line-height:.9;margin-top:3rem;opacity:.9}
footer small{display:block;margin-top:2rem;color:#ffffff70}
.cursor-glow{position:fixed;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,#9e63e822,transparent 60%);pointer-events:none;z-index:0;translate:-50% -50%;left:-500px;top:-500px}
@media (max-width:900px){.nav ul{display:none}.intro .grid,.contact .grid{grid-template-columns:1fr;gap:2.5rem}.svc-grid{grid-template-columns:1fr 1fr}.stat-grid{grid-template-columns:1fr 1fr}.stats{background-attachment:scroll}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}.steps-track{flex-direction:column}.step{flex:auto;min-height:0}.cursor-glow{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero video{display:none}}

/* brand + circuit styling */
.logo{display:inline-flex;align-items:center;gap:.55rem}.logo img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 10px #9e63e8aa)}
.logo span{color:var(--purple);text-shadow:0 0 14px #da6bcf99}
.brand-mark{width:min(300px,62vw);margin:0 auto .4rem;border-radius:28px;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 72%);mask-image:radial-gradient(circle,#000 52%,transparent 72%);filter:drop-shadow(0 0 40px #9e63e880);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{filter:drop-shadow(0 0 70px #da6bcfaa) brightness(1.1)}}
.hero::before{background:radial-gradient(ellipse at center,#04031530,#040315ee 72%),linear-gradient(to bottom,transparent 60%,var(--ink))}
.hero h1{text-shadow:0 0 40px #9e63e855}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.07;background:
 linear-gradient(90deg,var(--blue) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(0deg,var(--blue) 1px,transparent 1px) 0 0/80px 80px;
 -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 75%)}
.services,.contact{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%239e63e8' stroke-opacity='.18' stroke-width='1.2'%3E%3Cpath d='M0 40h60l20 20h60l20-20h80M0 160h40l30 30h90l20-20h60M120 0v40M200 240v-60l-20-20'/%3E%3C/g%3E%3Cg fill='%2336e1eb' fill-opacity='.45'%3E%3Ccircle cx='60' cy='40' r='2.5'/%3E%3Ccircle cx='160' cy='60' r='2.5'/%3E%3Ccircle cx='70' cy='190' r='2.5'/%3E%3C/g%3E%3Cg fill='%23e870c9' fill-opacity='.5'%3E%3Ccircle cx='180' cy='160' r='2.5'/%3E%3Ccircle cx='120' cy='40' r='2'/%3E%3C/g%3E%3C/svg%3E")}
.contact{background-color:var(--ink)}
.card,.step,.stat,form{box-shadow:inset 0 0 0 1px #9e63e822,0 0 40px -20px #da6bcf55}
.card:hover{box-shadow:0 0 0 1px #da6bcf66,0 30px 80px -30px #9e63e8cc}
.step .n,.stat .v{filter:drop-shadow(0 0 18px #9e63e877)}
.marquee .track span:nth-child(even){color:var(--purple);text-shadow:0 0 12px #da6bcf88}
.stats{background-image:url(img/brand-bg.webp)}
footer{background:radial-gradient(ellipse at 50% 120%,#9e63e833,transparent 60%),#020110}
.brand-mark{height:auto;aspect-ratio:800/806;-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 71%);mask-image:radial-gradient(circle,#000 58%,transparent 71%)}
@media (max-width:600px){.logo{font-size:1rem;white-space:nowrap}.logo img{width:30px;height:30px}.brand-mark{width:min(230px,60vw)}}
.brand-mark{border-radius:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 97%,transparent);mask-composite:intersect}

/* ===== MAX PASS LAYER ===== */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
/* P1 preloader */
.preloader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#1b1240,#040315 65%)}
.pl-inner{text-align:center}.pl-inner img{width:110px;height:auto;margin:auto;filter:drop-shadow(0 0 30px #9e63e8);animation:plp 1.2s ease-in-out infinite alternate}
@keyframes plp{to{transform:translateY(-8px) scale(1.04);filter:drop-shadow(0 0 50px #da6bcf)}}
.pl-word{font-family:var(--fh);font-weight:800;letter-spacing:.2em;margin:1rem 0;font-size:1.1rem}.pl-word span{color:var(--purple)}
.pl-bar{width:200px;height:3px;background:#ffffff18;border-radius:3px;overflow:hidden;margin:auto}.pl-bar i{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 12px var(--purple)}
html.no-js .preloader,.reduced .preloader{display:none}
/* P2 canvas bg */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.85}
section,.marquee{z-index:1}
/* P3 progress */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px var(--purple)}
/* P4 cursor */
.c-dot,.c-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:150;border-radius:50%;translate:-50% -50%;opacity:0}
.c-dot{width:8px;height:8px;background:var(--teal);box-shadow:0 0 12px var(--cyan)}
.c-ring{width:38px;height:38px;border:1.5px solid #da6bcfaa;transition:width .3s,height .3s,background .3s,border-color .3s}
.c-ring.hov{width:70px;height:70px;background:#9e63e822;border-color:var(--teal)}
@media (hover:hover) and (pointer:fine){body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}.has-cursor .c-dot,.has-cursor .c-ring{opacity:1}}
/* P5 glow borders */
.card,.stat,form,.phone{--ang:0deg}
.card::after,.stat::after,form::after,.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 60%,var(--blue) 75%,var(--purple) 85%,var(--cyan) 95%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none;opacity:.55;transition:opacity .4s}
.card:hover::after{opacity:1}
@keyframes spin{to{--ang:360deg}}
form,.stat{position:relative}
/* P6 glass */
.step,form,.stat,.nav.scrolled{background:linear-gradient(150deg,#ffffff12,#ffffff04);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.step{position:relative;transition:transform .5s,opacity .5s,border-color .5s;opacity:.45;transform:scale(.94)}
.step.active{opacity:1;transform:scale(1);border-color:#da6bcf88;box-shadow:0 0 60px -15px #9e63e8aa}
.steps-line{height:3px;background:#ffffff14;border-radius:3px;margin:2.5rem auto 0;width:min(1200px,92vw);overflow:hidden}.steps-line i{display:block;height:100%;background:var(--grad);transform-origin:0;transform:scaleX(0)}
/* P7 card depth */
.card{transform-style:preserve-3d}.card .depth{transform:translateZ(40px)}.card .media{transform:translateZ(10px)}
/* P8 marquee polish */
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee.rev{background:transparent;border-top:0}.marquee.rev .track{animation-direction:reverse;font-size:1rem;opacity:.7;letter-spacing:.1em;text-transform:uppercase}
.marquee .track{will-change:transform}
/* P9 demo */
.demo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.demo h2{font-size:clamp(2.2rem,5vw,3.8rem);margin:.6rem 0 1rem}.demo p{color:#e9dcffcc}
.demo-steps{list-style:none;margin-top:2rem;display:grid;gap:.7rem;counter-reset:d}
.demo-steps li{counter-increment:d;padding:.8rem 1.1rem;border-radius:14px;border:1px solid #ffffff14;color:#ffffff88;transition:all .4s}
.demo-steps li::before{content:counter(d,decimal-leading-zero) "  ";font-family:var(--fh);color:var(--teal)}
.demo-steps li.on{color:#fff;border-color:#da6bcf88;background:#9e63e822;transform:translateX(10px)}
.phone{position:relative;width:min(320px,80vw);aspect-ratio:9/18.5;margin:auto;border-radius:42px;background:#0b0820;border:1px solid #ffffff22;box-shadow:0 40px 120px -30px #9e63e8cc,inset 0 0 0 8px #120c2a;padding:18px;overflow:hidden}
.ph-notch{width:90px;height:22px;background:#000;border-radius:0 0 14px 14px;margin:-18px auto 10px}
.ph-screen{display:flex;flex-direction:column;gap:.7rem;font-size:.86rem;height:calc(100% - 20px);position:relative}
.ph-call{text-align:center;padding:1rem;border-radius:18px;background:#ff3b6b22;border:1px solid #ff3b6b55}.ph-call b{display:block;color:#ff7aa0}.ph-call small{opacity:.7}.ph-ico{font-size:1.6rem}
.bub{max-width:82%;padding:.65rem .9rem;border-radius:16px;line-height:1.35}
.bub.out{align-self:flex-end;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border-bottom-right-radius:4px}
.bub.in{align-self:flex-start;background:#ffffff14;border-bottom-left-radius:4px}
.ph-cal{margin-top:auto;padding:.9rem;border-radius:16px;background:#ffffff0d;border:1px solid #63c2b555}
.cal-h{font-family:var(--fh);font-weight:700;margin-bottom:.5rem}.cal-g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.cal-g i{height:26px;border-radius:7px;background:#ffffff10;font-style:normal;font-size:.72rem;display:grid;place-items:center}
.cal-g i.hit{background:var(--teal);color:#040315;font-weight:700;box-shadow:0 0 18px var(--teal)}.cal-ok{color:var(--teal);font-weight:700;margin-top:.5rem;text-align:center}
/* P10 sticky cta + ripple */
.sticky-cta{position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;transform:translateY(150%);transition:transform .5s cubic-bezier(.2,.9,.3,1.3)!important}
.sticky-cta.show{transform:none}
.ripple{position:absolute;border-radius:50%;background:#ffffff66;transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
/* P11 animated mesh */
.mesh{position:absolute;inset:-20%;z-index:-1;pointer-events:none;filter:blur(80px);opacity:.45;background:radial-gradient(30% 30% at 20% 30%,#9e63e8,transparent),radial-gradient(25% 25% at 80% 20%,#da6bcf,transparent),radial-gradient(30% 30% at 60% 80%,#36e1eb55,transparent);animation:mesh 18s ease-in-out infinite alternate}
@keyframes mesh{to{transform:translate3d(5%,-4%,0) rotate(8deg) scale(1.1)}}
.demo,.contact,.services{overflow:hidden}
@media (max-width:900px){.demo-grid{grid-template-columns:1fr}.sticky-cta{left:1rem;right:1rem;justify-content:center}}
@media (prefers-reduced-motion:reduce){.preloader,#fx,.c-dot,.c-ring,.mesh{display:none!important}.step{opacity:1;transform:none}.sticky-cta{transform:none}}

/* flat transparent logo: no masks, glow via drop-shadow */
.brand-mark{border-radius:0;-webkit-mask-image:none;mask-image:none;aspect-ratio:724/767;height:auto;filter:drop-shadow(0 0 18px #9e63e899) drop-shadow(0 0 42px #36e1eb40)}
.logo img{width:auto;height:38px;filter:drop-shadow(0 0 6px #9e63e8cc) drop-shadow(0 0 14px #36e1eb55)}
@media (max-width:600px){.logo img{width:auto;height:30px}}
.pl-inner img{width:auto;height:140px;filter:drop-shadow(0 0 22px #9e63e8) drop-shadow(0 0 40px #36e1eb66)}