/* ============================================================
   THEME
============================================================ */
:root{
  --bg:#09070f;
  --bg-soft:#100c1c;
  --panel:rgba(255,255,255,0.026);
  --panel-2:rgba(255,255,255,0.05);
  --border:rgba(255,255,255,0.085);
  --border-soft:rgba(255,255,255,0.05);
  --text:#f4f2f9;
  --muted:#a39db8;
  --faint:rgba(255,255,255,0.42);
  --g1:#7b6cff;   /* indigo-violet */
  --g2:#a855f7;   /* violet */
  --g3:#d946ef;   /* fuchsia */
  --g4:#ec4899;   /* pink */
  --grad:linear-gradient(120deg,var(--g1),var(--g3),var(--g4));
  --grad-soft:linear-gradient(120deg,rgba(123,108,255,.18),rgba(217,70,239,.14),rgba(236,72,153,.14));
  --glow:rgba(168,85,247,0.45);
  --fh:'Michroma',sans-serif;  /* main headings */
  --fd:'Raleway',sans-serif;   /* sub headings */
  --fb:'Raleway',sans-serif;   /* body / everything else */
  --pad-x:clamp(1.15rem,5vw,4.5rem);
  --section-y:clamp(4.5rem,11vw,10rem);
  --radius:22px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--fb);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:none;line-height:1.6;}
@media (hover:none){body{cursor:auto;}}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
::selection{background:var(--g3);color:#fff;}

/* themed scrollbar */
html{scrollbar-width:thin;scrollbar-color:var(--g2) var(--bg-soft);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--bg-soft);}
::-webkit-scrollbar-thumb{background:var(--grad);background-size:100% 200%;border-radius:8px;border:2px solid var(--bg-soft);}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(120deg,var(--g1),var(--g4));}
::-webkit-scrollbar-corner{background:var(--bg-soft);}

.grad{background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 7s ease infinite;}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ============================================================
   ATMOSPHERE (no grid pattern)
============================================================ */
.grain{position:fixed;inset:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");background-size:220px 220px;opacity:0.045;pointer-events:none;z-index:9990;mix-blend-mode:overlay;will-change:transform;animation:grain .8s steps(3) infinite;}
@keyframes grain{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-3%,-2%,0)}50%{transform:translate3d(2%,3%,0)}75%{transform:translate3d(-1%,2%,0)}100%{transform:translate3d(3%,-1%,0)}}
.bg-fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.bg-fx .glow{position:absolute;border-radius:50%;filter:blur(60px);}
.bg-fx .g-a{top:-12%;right:-8%;width:55vw;height:55vw;background:radial-gradient(circle,rgba(168,85,247,0.18),transparent 65%);}
.bg-fx .g-b{bottom:-18%;left:-12%;width:50vw;height:50vw;background:radial-gradient(circle,rgba(236,72,153,0.12),transparent 65%);}
.bg-fx .g-c{top:40%;left:45%;width:40vw;height:40vw;background:radial-gradient(circle,rgba(123,108,255,0.08),transparent 70%);}

/* ============================================================
   CURSOR
============================================================ */
.cursor-dot{width:9px;height:9px;background:var(--grad);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 14px 2px var(--glow),0 0 5px rgba(255,255,255,.85);transition:width .22s ease,height .22s ease,background .3s;}
.cursor-ring{width:36px;height:36px;border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,var(--g1),var(--g3),var(--g4),var(--g2),var(--g1));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));animation:cursorSpin 3.4s linear infinite;transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1),opacity .25s ease;opacity:.9;filter:drop-shadow(0 0 6px var(--glow));}
@keyframes cursorSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
body.hovering .cursor-ring{width:58px;height:58px;opacity:1;animation-duration:1.5s;}
body.hovering .cursor-dot{width:6px;height:6px;}
@media (hover:none){.cursor-dot,.cursor-ring{display:none;}}

/* ============================================================
   LOADING
============================================================ */
#loading{position:fixed;inset:0;background:var(--bg);z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;transition:opacity .9s ease,visibility .9s ease;}
#loading.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.load-glow{display:none;}
@keyframes pulseGlow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.12)}}
.load-logo-wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.4rem;margin-bottom:2.2rem;}
.load-logo{width:clamp(120px,28vw,180px);height:auto;object-fit:contain;}
.load-word{font-family:var(--fd);font-size:clamp(1rem,2.8vw,1.3rem);letter-spacing:.4em;text-transform:uppercase;font-weight:600;margin-right:-.4em;}
.load-word strong{font-weight:900;}
.load-greet{display:block;font-family:var(--fd);font-size:clamp(14px,3vw,18px);font-weight:800;letter-spacing:.16em;text-transform:uppercase;text-align:center;margin-bottom:.45rem;}
.load-motto{position:relative;z-index:2;font-size:clamp(10px,2vw,12.5px);letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:2.2rem;text-align:center;}
.load-line-wrap{position:relative;z-index:2;width:clamp(150px,55vw,300px);margin-bottom:1.2rem;}
.load-track{width:100%;height:2px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;}
.load-fill{height:100%;width:0%;background:var(--grad);box-shadow:0 0 14px var(--glow);transition:width .12s linear;}
.load-pct{font-family:var(--fd);font-size:11px;letter-spacing:.3em;color:var(--faint);text-align:right;margin-top:.55rem;}
.load-bottom{position:absolute;bottom:1.6rem;left:0;right:0;display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;padding:0 1rem;z-index:2;}
.load-bottom span{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,0.3);}

/* ============================================================
   NAV
============================================================ */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:900;background:rgba(255,255,255,0.05);pointer-events:none;}
.scroll-progress span{display:block;height:100%;width:0;background:var(--grad);background-size:200% 100%;box-shadow:0 0 12px var(--glow);animation:gradShift 7s ease infinite;will-change:width;}
#nav{position:fixed;top:0;left:0;right:0;z-index:800;padding:1rem clamp(1rem,4vw,2.4rem);}
.nav-shell{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1340px;margin:0 auto;transition:background .4s,border-color .4s,padding .4s,box-shadow .4s;border:1px solid transparent;border-radius:18px;padding:.4rem .4rem .4rem .2rem;}
#nav.scrolled .nav-shell{background:rgba(16,12,28,0.7);border-color:var(--border-soft);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 14px 44px rgba(0,0,0,.45);padding:.45rem .45rem .45rem 1rem;}
.nav-logo{display:flex;align-items:flex-end;gap:.6rem;flex-shrink:0;}
.nav-logo-img{height:clamp(22px,4vw,30px);width:auto;object-fit:contain;filter:drop-shadow(0 0 12px var(--glow));}
.nav-logo-text{font-family:var(--fd);font-size:clamp(.72rem,1.6vw,.96rem);letter-spacing:.2em;text-transform:uppercase;font-weight:600;line-height:1;}
.nav-logo-text strong{font-weight:900;}
.nav-links{display:flex;align-items:center;gap:clamp(.5rem,2.4vw,2.1rem);}
.nav-links a{position:relative;isolation:isolate;font-size:13px;letter-spacing:.04em;color:var(--muted);padding:.6rem 1.15rem;border-radius:13px;transition:color .35s ease;white-space:nowrap;}
.nav-links a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad-soft);border:1px solid var(--border-soft);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);box-shadow:0 10px 28px rgba(168,85,247,.22),inset 0 1px 0 rgba(255,255,255,.09);opacity:0;transform:scale(.78);transition:opacity .35s ease,transform .4s cubic-bezier(.34,1.56,.64,1);}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::before{opacity:1;transform:scale(1);}
.nav-links a.active{color:#fff;}
.nav-links a.active::before{opacity:1;transform:scale(1);background:linear-gradient(120deg,rgba(123,108,255,.34),rgba(217,70,239,.26),rgba(236,72,153,.26));box-shadow:0 10px 30px var(--glow),inset 0 1px 0 rgba(255,255,255,.13);}
@media(max-width:880px){.nav-links{display:none;}}
.nav-cta{display:inline-flex;align-items:center;gap:.5rem;font-size:13px;letter-spacing:.02em;font-weight:600;padding:.72rem 1.25rem;border-radius:12px;background:var(--grad);background-size:180% 100%;color:#fff;box-shadow:0 8px 26px var(--glow);transition:background-position .5s,transform .25s;white-space:nowrap;}
.nav-cta:hover{background-position:100% 50%;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:none;background:rgba(255,255,255,0.04);border:1px solid var(--border-soft);padding:11px;border-radius:12px;}
.hamburger span{display:block;width:20px;height:1.5px;background:var(--text);transition:transform .35s,opacity .3s;transform-origin:center;}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media(max-width:880px){.hamburger{display:flex;}}
.mobile-menu{position:fixed;inset:0;background:rgba(9,7,15,0.97);backdrop-filter:blur(20px);z-index:790;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;opacity:0;pointer-events:none;transition:opacity .4s;padding:2rem;}
.mobile-menu.open{opacity:1;pointer-events:all;}
.mobile-menu a{font-family:var(--fh);font-size:clamp(1.7rem,9vw,3rem);font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--muted);transition:color .3s;}
.mobile-menu a:hover,.mobile-menu a.active{color:#fff;}

/* ============================================================
   BUTTONS
============================================================ */
.btn{font-family:var(--fb);display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-size:13.5px;letter-spacing:.01em;font-weight:600;padding:1rem 1.8rem;border-radius:14px;cursor:none;min-height:52px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .35s,background-position .5s,border-color .35s,color .35s;will-change:transform;}
.btn-grad{background:var(--grad);background-size:200% 100%;color:#fff;box-shadow:0 10px 32px var(--glow);}
.btn-grad:hover{background-position:100% 50%;box-shadow:0 16px 44px var(--glow);}
.btn-ghost{background:rgba(255,255,255,0.035);border:1px solid var(--border);color:var(--text);}
.btn-ghost:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.25);}
.btn-arrow{transition:transform .35s;}
.btn:hover .btn-arrow{transform:translateX(4px);}
/* magnetic elements: transform is rAF-driven in JS — keep it off the CSS transition to avoid lag */
[data-magnetic]{transition:background-position .5s ease,box-shadow .35s ease,border-color .35s ease,color .35s ease;will-change:transform;}

/* ============================================================
   LAYOUT HELPERS
============================================================ */
.container{max-width:1340px;margin:0 auto;}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,0.035);border:1px solid var(--border-soft);padding:.5rem 1rem;border-radius:100px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px var(--glow);animation:dotBlink 2.4s ease-in-out infinite;}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.4}}
.sec-tag{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;margin-bottom:1rem;display:inline-flex;align-items:center;gap:.55rem;color:var(--g2);}
.sec-tag::before{content:'';width:20px;height:2px;border-radius:2px;background:var(--grad);}
.sec-title{font-family:var(--fh);font-size:clamp(2.2rem,6.4vw,4.8rem);font-weight:900;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;}

.reveal{opacity:0;transform:translateY(38px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1);}
.reveal.visible{opacity:1;transform:none;}
.reveal-l{opacity:0;transform:translateX(-40px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1);}
.reveal-r{opacity:0;transform:translateX(40px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1);}
.reveal-l.visible,.reveal-r.visible{opacity:1;transform:none;}
.d1{transition-delay:.1s!important}.d2{transition-delay:.2s!important}.d3{transition-delay:.3s!important}.d4{transition-delay:.4s!important}

/* ============================================================
   PAGE HERO (sub-pages)
============================================================ */
.page-hero{position:relative;z-index:2;padding:clamp(8rem,16vw,11rem) var(--pad-x) clamp(2.5rem,6vw,4rem);text-align:center;overflow:hidden;}
.page-hero .crumbs{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1.3rem;}
.page-hero .crumbs a{transition:color .3s;}
.page-hero .crumbs a:hover{color:var(--g3);}
.page-hero .crumbs .sep{opacity:.5;}
.page-hero h1{font-family:var(--fh);font-size:clamp(2.5rem,8.5vw,5.6rem);line-height:1.02;letter-spacing:.01em;text-transform:uppercase;margin:0 auto;max-width:16ch;}
.page-hero .ph-sub{max-width:580px;margin:1.5rem auto 0;color:var(--muted);font-weight:600;line-height:1.7;font-size:clamp(1rem,1.4vw,1.12rem);}
.page-section{padding:0 var(--pad-x) var(--section-y);position:relative;z-index:2;}

/* ============================================================
   HERO
============================================================ */
#hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:clamp(7rem,15vw,9rem) var(--pad-x) clamp(3rem,7vw,5rem);overflow:hidden;}
.hero-inner{position:relative;z-index:5;width:100%;max-width:1340px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:1rem;align-items:center;}
.hero-copy{max-width:760px;}
.hero-eyebrow{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s cubic-bezier(.16,1,.3,1);}
.hero-eyebrow.in{opacity:1;transform:none;}
.hero-h1{font-family:var(--fh);font-size:clamp(2.5rem,7.6vw,5.6rem);font-weight:900;line-height:1.0;letter-spacing:.005em;text-transform:uppercase;margin:1.4rem 0 1.6rem;}
.hero-h1 .line{display:block;overflow:hidden;}
.hero-h1 .line span{display:inline-block;transform:translateY(110%);transition:transform 1.05s cubic-bezier(.16,1,.3,1);}
.hero-h1 .line.in span{transform:translateY(0);}
.hero-sub{font-size:clamp(1rem,1.5vw,1.16rem);color:var(--muted);font-weight:600;max-width:500px;line-height:1.7;margin-bottom:2.1rem;opacity:0;transform:translateY(18px);transition:opacity .9s,transform .9s cubic-bezier(.16,1,.3,1);}
.hero-sub.in{opacity:1;transform:none;}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;opacity:0;transform:translateY(18px);transition:opacity .9s,transform .9s cubic-bezier(.16,1,.3,1);}
.hero-ctas.in{opacity:1;transform:none;}
.hero-mini{display:flex;align-items:center;gap:.85rem;margin-left:.4rem;}
.hero-mini .n{font-family:var(--fh);font-size:1.7rem;font-weight:400;line-height:1;}
.hero-mini .t{font-size:11.5px;color:var(--muted);max-width:120px;line-height:1.35;letter-spacing:.02em;}

/* 3D — full-page particle sphere background */
#hero-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none;opacity:.9;transition:opacity .8s ease;}
body.no3d #hero-canvas{display:none;}

/* fallback orb when WebGL unavailable */
body.no3d .fallback-orb{display:block;}
.fallback-orb{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(48vh,440px);height:min(48vh,440px);border-radius:50%;background:conic-gradient(from 120deg,var(--g1),var(--g3),var(--g4),var(--g2),var(--g1));z-index:1;filter:blur(4px) saturate(1.1);opacity:.5;box-shadow:0 0 80px var(--glow);animation:orbSpin 14s linear infinite;pointer-events:none;}
@keyframes orbSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.hero-scroll{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:5;opacity:0;transition:opacity 1s ease 1s;}
.hero-scroll.in{opacity:1;}
.hero-scroll span{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);}
.scroll-bar{width:1px;height:30px;background:rgba(255,255,255,0.14);overflow:hidden;}
.scroll-bar::after{content:'';display:block;width:100%;height:100%;background:var(--g2);animation:scrollTick 1.5s linear infinite;}
@keyframes scrollTick{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* ============================================================
   NEURAL HUB (home interactive)
============================================================ */
#hub{position:relative;padding:var(--section-y) var(--pad-x);overflow:hidden;}
.hub-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.7;pointer-events:none;}
.hub-inner{position:relative;z-index:2;}
.hub-head{text-align:center;margin-bottom:clamp(2.4rem,5vw,3.6rem);}
.hub-head .sec-tag{justify-content:center;}
.hub-head h2{margin-bottom:0;}
.hub-head p{color:var(--muted);font-weight:600;max-width:540px;margin:1.1rem auto 0;line-height:1.7;}
.hub-grid{display:grid;grid-template-columns:1fr;gap:1rem;max-width:1180px;margin:0 auto;perspective:1200px;}
@media(min-width:620px){.hub-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.hub-grid{grid-template-columns:repeat(3,1fr);}}
.portal-card{position:relative;display:flex;flex-direction:column;gap:.6rem;background:rgba(16,12,28,0.66);border:1px solid var(--border-soft);border-radius:var(--radius);padding:clamp(1.5rem,2.5vw,2.05rem);overflow:hidden;transform-style:preserve-3d;transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1),border-color .4s,background .4s,box-shadow .4s;will-change:transform,opacity;min-height:200px;}
.portal-card::before{content:'';position:absolute;inset:0;border-radius:var(--radius);padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--bw,0);pointer-events:none;}
.portal-card>*{transform:translateZ(26px);}
.portal-n{position:absolute;top:1.25rem;right:1.4rem;font-family:var(--fd);font-size:.78rem;font-weight:700;letter-spacing:.2em;color:var(--faint);}
.portal-ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft);border:1px solid var(--border-soft);margin-bottom:.3rem;}
.portal-ic svg{width:23px;height:23px;stroke:var(--g3);fill:none;stroke-width:1.5;}
.portal-card h3{font-family:var(--fd);font-size:1.32rem;font-weight:700;letter-spacing:.01em;}
.portal-card p{font-size:.92rem;color:var(--muted);font-weight:600;line-height:1.6;flex:1;}
.portal-go{font-size:12.5px;font-weight:600;letter-spacing:.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-flex;align-items:center;gap:.4rem;transition:gap .3s;}
.portal-go svg{width:13px;height:13px;stroke:var(--g3);fill:none;stroke-width:2;}
.portal-card:hover .portal-go{gap:.75rem;}
.portal-cta{background:var(--grad);background-size:180% 180%;border:none;}
.portal-cta::before{display:none;}
.portal-cta .portal-n,.portal-cta h3{color:#fff;}
.portal-cta p{color:rgba(255,255,255,.9);}
.portal-cta .portal-ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25);}
.portal-cta .portal-ic svg{stroke:#fff;}
.portal-cta .portal-go{background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff;}
.portal-cta .portal-go svg{stroke:#fff;}

/* ============================================================
   ABOUT
============================================================ */
#about{position:relative;z-index:2;}
.about-inner{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center;}
.about-inner{max-width:760px;}
.about-title{font-family:var(--fh);font-size:clamp(2.4rem,7vw,5rem);font-weight:900;line-height:1.02;text-transform:uppercase;letter-spacing:.01em;margin-bottom:2.5rem;}
.about-list{display:flex;flex-direction:column;}
.about-item{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.6rem 0;border-top:1px solid var(--border-soft);}
.about-item:last-child{border-bottom:1px solid var(--border-soft);}
.about-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft);border:1px solid var(--border-soft);}
.about-ic svg{width:20px;height:20px;stroke:var(--g3);fill:none;stroke-width:1.6;}
.about-item h4{font-family:var(--fd);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:.5rem;}
.about-item p{font-size:.92rem;color:var(--muted);font-weight:600;line-height:1.65;max-width:440px;}
/* CSS glossy coil */
.coil-wrap{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.coil{position:relative;width:min(80%,360px);aspect-ratio:1/1;border-radius:50%;background:conic-gradient(from 210deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g2),var(--g1));box-shadow:0 0 90px var(--glow),inset 0 0 60px rgba(0,0,0,.6);animation:orbSpin 20s linear infinite;}
.coil::before{content:'';position:absolute;inset:18%;border-radius:50%;background:var(--bg);box-shadow:inset 0 10px 40px rgba(168,85,247,.35);}
.coil::after{content:'';position:absolute;inset:30%;border-radius:50%;background:conic-gradient(from 30deg,var(--g3),var(--g1),var(--g4),var(--g3));filter:blur(2px);box-shadow:0 0 40px var(--glow);animation:orbSpin 12s linear infinite reverse;}
.coil-spark{position:absolute;width:60%;height:60%;top:20%;left:20%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.6),transparent 40%);border-radius:50%;mix-blend-mode:screen;pointer-events:none;}

/* ============================================================
   MARQUEE
============================================================ */
#marquee{position:relative;z-index:2;overflow:hidden;display:flex;flex-direction:column;gap:.05rem;padding:clamp(.7rem,1.8vw,1.3rem) 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);background:linear-gradient(180deg,rgba(123,108,255,.06),rgba(217,70,239,.045));-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
#marquee::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(168,85,247,.12),transparent 60%);pointer-events:none;}
.marquee-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:marq 24s linear infinite;}
.marquee-rev{animation:marqRev 30s linear infinite;}
#marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{font-family:var(--fh);font-weight:400;text-transform:uppercase;letter-spacing:.04em;padding:0 1.4rem;font-size:clamp(1.35rem,4.6vw,3.1rem);line-height:1.08;transition:transform .35s cubic-bezier(.16,1,.3,1),filter .35s ease;}
/* row 1 — animated gradient-shimmer fill */
.marquee-track:not(.marquee-rev) .marquee-item:not(.marquee-dot){background:linear-gradient(90deg,var(--g1),var(--g3),var(--g4),var(--g2),var(--g1));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:marqShine 6s linear infinite;}
/* row 2 — outlined ghost text that fills on hover */
.marquee-rev .marquee-item:not(.marquee-dot){color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.20);}
.marquee-rev .marquee-item:not(.marquee-dot):hover{-webkit-text-stroke-color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px var(--glow));}
.marquee-track:not(.marquee-rev) .marquee-item:not(.marquee-dot):hover{transform:scale(1.08) translateY(-2px);filter:drop-shadow(0 0 16px var(--glow));}
.marquee-rev .marquee-item:not(.marquee-dot):hover{transform:scale(1.08) translateY(-2px);}
/* spinning glowing separators */
.marquee-dot{display:inline-block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:.55em;filter:drop-shadow(0 0 8px var(--glow));animation:dotSpin 5s linear infinite;}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes marqRev{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@keyframes marqShine{0%{background-position:0% 0}100%{background-position:220% 0}}
@keyframes dotSpin{to{transform:rotate(360deg)}}

/* ============================================================
   SERVICES
============================================================ */
#services{position:relative;z-index:2;}
.srv-top{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(2.2rem,5vw,3.5rem);}
.srv-top p{max-width:360px;color:var(--muted);font-weight:600;}
.srv-grid{display:grid;grid-template-columns:1fr;gap:1rem;perspective:1200px;}
@media(min-width:680px){.srv-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1060px){.srv-grid{grid-template-columns:repeat(3,1fr);}}
.srv-card{position:relative;background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius);padding:clamp(1.6rem,2.6vw,2.1rem);overflow:hidden;transform-style:preserve-3d;transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1),border-color .4s,background .4s,box-shadow .4s;will-change:transform,opacity;}
.srv-card::before{content:'';position:absolute;inset:0;border-radius:var(--radius);padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--bw,0);pointer-events:none;}
.srv-card>*{transform:translateZ(30px);}
.srv-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.2rem;}
.srv-index{font-family:var(--fd);font-size:clamp(2.6rem,5vw,3.4rem);font-weight:900;line-height:.8;letter-spacing:-.03em;}
.srv-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft);border:1px solid var(--border-soft);}
.srv-ic svg{width:22px;height:22px;stroke:var(--g3);fill:none;stroke-width:1.5;}
.srv-card h4{font-family:var(--fd);font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;letter-spacing:.01em;margin-bottom:.65rem;}
.srv-card p{font-size:.92rem;color:var(--muted);font-weight:600;line-height:1.65;margin-bottom:1.2rem;}
.srv-tags{display:flex;flex-wrap:wrap;gap:.4rem;}
.srv-tag{font-size:11.5px;font-weight:400;color:var(--faint);padding:.34rem .75rem;border:1px solid var(--border-soft);border-radius:100px;transition:color .3s,border-color .3s;}
.srv-card:hover .srv-tag{color:var(--muted);}
.srv-cta-card{background:var(--grad);background-size:180% 180%;border:none;}
.srv-cta-card h4,.srv-cta-card p{color:#fff;}
.srv-cta-card p{opacity:.9;}
.srv-cta-card .srv-index,.srv-cta-card .srv-ic{color:#fff;}
.srv-cta-card .srv-ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25);}
.srv-cta-card .srv-ic svg{stroke:#fff;}

.specialties{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.spec-label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-right:.5rem;}
.spec-pill{font-size:12px;color:var(--muted);padding:.5rem 1rem;border:1px solid var(--border-soft);border-radius:100px;transition:background .35s,color .35s,border-color .35s;}
.spec-pill:hover{background:var(--grad);color:#fff;border-color:transparent;}

/* ============================================================
   IMPACT
============================================================ */
#impact{position:relative;z-index:2;}
.impact-grid{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;}
@media(min-width:760px){.impact-grid{grid-template-columns:repeat(4,1fr);}}
.impact-cell{background:var(--bg);padding:clamp(1.8rem,4vw,3rem) clamp(1.2rem,2.5vw,2rem);text-align:center;transition:background .4s;}
.impact-cell:hover{background:var(--bg-soft);}
.impact-num{font-family:var(--fh);font-size:clamp(2.1rem,5.2vw,3.4rem);font-weight:400;line-height:1;letter-spacing:-.01em;}
.impact-num .suf{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.impact-lbl{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.7rem;}

/* ============================================================
   CLIENTS — TRUSTED BY
============================================================ */
#clients{position:relative;z-index:2;}
.clients-head{text-align:center;padding:0 var(--pad-x);margin-bottom:clamp(2rem,5vw,3.2rem);}
.clients-head .sec-tag{justify-content:center;}
.clients-head p{color:var(--muted);font-weight:600;max-width:560px;margin:1rem auto 0;line-height:1.7;}
.tk{overflow:hidden;position:relative;padding:1.4rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.tk-track{display:inline-flex;align-items:center;white-space:nowrap;animation:tkScroll 34s linear infinite;will-change:transform;}
.tk:hover .tk-track{animation-play-state:paused;}
@keyframes tkScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tk-item{display:inline-flex;align-items:center;justify-content:center;height:clamp(50px,8.5vw,72px);flex-shrink:0;margin-right:clamp(2.8rem,6vw,5.5rem);opacity:.5;transition:opacity .4s,transform .4s,filter .4s;cursor:none;}
.tk-item img{height:100%;width:auto;object-fit:contain;}
.tk-item:hover{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 18px var(--glow));}
.tk-word{font-family:var(--fd);font-weight:900;text-transform:uppercase;font-size:clamp(1.35rem,3vw,2rem);letter-spacing:.01em;color:#e9e6f4;display:inline-flex;align-items:baseline;gap:.45rem;line-height:1;}
.tk-word small{font-family:var(--fb);font-weight:500;font-size:.46em;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;}
.client-grid{max-width:1180px;margin:clamp(2.4rem,5vw,3.5rem) auto 0;padding:0 var(--pad-x);display:grid;grid-template-columns:1fr;gap:1rem;}
@media(min-width:620px){.client-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.client-grid{grid-template-columns:repeat(3,1fr);}}
.client-card{background:var(--panel);border:1px solid var(--border-soft);border-radius:18px;padding:1.4rem 1.5rem;transition:border-color .35s,background .35s,transform .35s;}
.cc-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.65rem;}
.client-card h4{font-family:var(--fd);font-size:1.08rem;font-weight:700;letter-spacing:.01em;}
.cc-tag{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g2);border:1px solid var(--border-soft);border-radius:100px;padding:.28rem .65rem;white-space:nowrap;}
.client-card p{font-size:.88rem;color:var(--muted);font-weight:600;line-height:1.6;margin-bottom:1.1rem;}
.cc-link{font-size:12.5px;font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-flex;align-items:center;gap:.4rem;transition:gap .3s;}
.cc-link svg{width:13px;height:13px;stroke:var(--g3);fill:none;stroke-width:2;}
.cc-link:hover{gap:.7rem;}
.cc-nolink{font-size:11.5px;letter-spacing:.04em;color:var(--faint);display:inline-flex;align-items:center;gap:.4rem;}

/* ============================================================
   PROCESS
============================================================ */
#process{position:relative;z-index:2;}
.process-ambient{position:absolute;width:55vw;height:55vw;max-width:680px;max-height:680px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,0.08),transparent 70%);top:34%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;filter:blur(40px);}
.proc-timeline{position:relative;max-width:940px;margin:0 auto;z-index:2;}
.timeline-bg{display:none;position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,0.07);transform:translateX(-50%);border-radius:2px;}
.timeline-fill{display:none;position:absolute;left:50%;top:0;width:2px;height:0%;background:var(--grad);transform:translateX(-50%);box-shadow:0 0 14px var(--glow);transition:height .15s linear;border-radius:2px;}
@media(min-width:840px){.timeline-bg,.timeline-fill{display:block;}}
.proc-steps{display:flex;flex-direction:column;gap:1rem;position:relative;}
@media(min-width:840px){.proc-steps{gap:2.6rem;}}
.proc-step{position:relative;background:var(--panel);border:1px solid var(--border-soft);border-radius:18px;padding:clamp(1.3rem,2.5vw,1.9rem);opacity:0;transform:translateY(38px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1),border-color .4s,background .4s;will-change:transform,opacity;}
.proc-step.visible{opacity:1;transform:none;}
.proc-step .pnum{font-family:var(--fd);font-size:.82rem;font-weight:700;letter-spacing:.1em;margin-bottom:.5rem;display:inline-flex;align-items:center;gap:.5rem;}
.proc-step .pnum .grad{font-weight:900;}
.proc-step .pnum::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px var(--glow);}
.proc-step h4{font-family:var(--fd);font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:700;margin-bottom:.5rem;letter-spacing:.01em;}
.proc-step p{font-size:.92rem;color:var(--muted);font-weight:600;line-height:1.65;max-width:380px;}
@media(min-width:840px){
  .proc-step{width:calc(50% - 2.6rem);}
  .proc-step:nth-child(even){margin-left:auto;}
  .proc-step::after{content:'';position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--g3);box-shadow:0 0 14px var(--glow);transform:translateY(-50%);}
  .proc-step:nth-child(odd)::after{right:-3.15rem;}
  .proc-step:nth-child(even)::after{left:-3.15rem;}
}

/* ============================================================
   PHILOSOPHY
============================================================ */
#philosophy{position:relative;z-index:2;}
.philo-card{max-width:1100px;margin:0 auto;position:relative;border-radius:clamp(22px,3vw,34px);padding:clamp(2.2rem,5vw,4.5rem);overflow:hidden;background:var(--bg-soft);border:1px solid var(--border-soft);}
.philo-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none;}
.philo-card .blob{position:absolute;top:-30%;right:-8%;width:42%;height:160%;background:radial-gradient(circle,rgba(168,85,247,0.25),transparent 70%);filter:blur(45px);}
.philo-quote{position:relative;z-index:2;font-family:var(--fd);font-size:clamp(1.4rem,3.6vw,2.5rem);font-weight:700;line-height:1.25;letter-spacing:-.005em;max-width:800px;}
.philo-meta{position:relative;z-index:2;display:flex;align-items:center;gap:.9rem;margin-top:2.2rem;}
.philo-meta img{height:40px;width:40px;border-radius:11px;padding:6px;background:rgba(255,255,255,0.05);border:1px solid var(--border);filter:drop-shadow(0 0 10px var(--glow));}
.philo-meta .who{font-family:var(--fd);font-weight:700;font-size:.95rem;}
.philo-meta .role{font-size:12px;color:var(--muted);}

/* ============================================================
   CONTACT
============================================================ */
#contact{position:relative;z-index:2;}
.contact-wrap{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:2.6rem;}
@media(min-width:880px){.contact-wrap{flex-direction:row;gap:4.5rem;}.contact-left{width:40%;flex-shrink:0;}.contact-right{flex:1;}}
.contact-left p.lead{color:var(--muted);font-weight:600;font-size:1.05rem;line-height:1.7;margin-bottom:2rem;}
.contact-info{display:flex;flex-direction:column;gap:1.3rem;}
.ci-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:.3rem;}
.ci-val{font-size:1rem;color:var(--muted);transition:color .3s;}
a.ci-val:hover{color:var(--g3);}
.contact-form{display:flex;flex-direction:column;gap:1.7rem;}
.cf-field{position:relative;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s cubic-bezier(.16,1,.3,1);}
.cf-field.visible{opacity:1;transform:none;}
.cf-field input,.cf-field textarea{width:100%;background:var(--panel);border:1px solid var(--border-soft);border-radius:14px;padding:1.05rem 1.1rem;font-family:var(--fb);font-weight:600;color:var(--text);outline:none;resize:none;font-size:max(1rem,16px);transition:border-color .35s,background .35s;}
.cf-field textarea{min-height:130px;}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:transparent;}
.cf-field input:focus,.cf-field textarea:focus{border-color:rgba(168,85,247,0.55);background:var(--panel-2);}
.cf-field label{position:absolute;left:1.1rem;top:1.05rem;font-size:1rem;font-weight:600;color:var(--faint);pointer-events:none;transition:all .3s;}
.cf-field input:focus+label,.cf-field input:not(:placeholder-shown)+label,
.cf-field textarea:focus+label,.cf-field textarea:not(:placeholder-shown)+label{top:-.65rem;left:.8rem;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g3);background:var(--bg);padding:0 .4rem;}
.cf-submit{align-self:flex-start;}
@media(max-width:480px){.cf-submit{width:100%;}}

/* ============================================================
   FOOTER
============================================================ */
footer{padding:3.2rem var(--pad-x) 2rem;border-top:1px solid var(--border-soft);position:relative;z-index:2;background:rgba(255,255,255,0.012);}
.footer-inner{max-width:1340px;margin:0 auto;}
.footer-top{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;margin-bottom:2.5rem;}
.footer-brand{min-width:200px;flex:1.4;}
.footer-logo{display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem;}
.footer-logo img{height:32px;filter:drop-shadow(0 0 12px var(--glow));}
.footer-logo-text{font-family:var(--fd);font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;}
.footer-logo-text strong{font-weight:900;}
.footer-brand p{color:var(--muted);font-weight:600;font-size:.92rem;max-width:300px;line-height:1.65;margin-bottom:1.2rem;}
.footer-socials{display:flex;gap:.6rem;}
.footer-socials a{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--border-soft);transition:background .3s,border-color .3s,transform .3s;}
.footer-socials a:hover{background:var(--grad);border-color:transparent;transform:translateY(-2px);}
.footer-socials svg{width:15px;height:15px;fill:var(--muted);transition:fill .3s;}
.footer-socials a:hover svg{fill:#fff;}
.footer-col{flex:1;min-width:130px;}
.footer-col-title{font-family:var(--fd);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:1.1rem;}
.footer-col ul li{margin-bottom:.65rem;}
.footer-col ul li a{font-size:13.5px;color:var(--muted);transition:color .3s;}
.footer-col ul li a:hover{color:var(--g3);}
.footer-bottom{padding-top:1.8rem;border-top:1px solid var(--border-soft);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;}
.footer-bottom span{font-size:11.5px;color:var(--faint);}
.footer-bottom-links{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;}
.footer-bottom-links a{font-size:11.5px;color:var(--muted);transition:color .3s;}
.footer-bottom-links a:hover{color:var(--g3);}
.footer-bottom-links .sep{color:var(--border);}

/* ============================================================
   WHATSAPP
============================================================ */
#wa{position:fixed;bottom:1rem;right:1rem;z-index:700;display:flex;flex-direction:column;align-items:flex-end;gap:.65rem;opacity:0;transform:translateY(20px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);pointer-events:none;max-width:calc(100vw - 2rem);}
#wa.show{opacity:1;transform:translateY(0);}
.wa-card{width:min(310px,calc(100vw - 2rem));background:rgba(16,12,28,0.92);border:1px solid var(--border);box-shadow:0 24px 70px rgba(0,0,0,.6);opacity:0;transform:translateY(18px) scale(.95);pointer-events:none;transition:opacity .38s,transform .38s cubic-bezier(.16,1,.3,1);border-radius:18px;overflow:hidden;backdrop-filter:blur(18px);}
.wa-card.open{opacity:1;transform:none;pointer-events:all;}
.wa-head{background:var(--grad);padding:.95rem 1rem;display:flex;align-items:center;gap:.75rem;}
.wa-avatar{width:2.3rem;height:2.3rem;background:rgba(255,255,255,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-avatar svg{width:1.15rem;height:1.15rem;fill:var(--g2);}
.wa-info{flex:1;min-width:0;}
.wa-name{font-family:var(--fd);font-size:13.5px;font-weight:700;letter-spacing:.03em;color:#fff;}
.wa-status{display:flex;align-items:center;gap:.4rem;margin-top:2px;}
.wa-dot{width:6px;height:6px;border-radius:50%;background:#a6ffc0;}
.wa-status span{font-size:11px;color:rgba(255,255,255,0.9);}
.wa-x{background:none;border:none;font-size:1.4rem;line-height:1;color:rgba(255,255,255,0.75);cursor:pointer;padding:.25rem;flex-shrink:0;}
.wa-x:hover{color:#fff;}
.wa-body{padding:1.1rem;}
.wa-bubble-row{display:flex;align-items:flex-end;gap:.5rem;}
.wa-sm-avatar{width:1.9rem;height:1.9rem;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-sm-avatar span{font-family:var(--fd);font-size:8px;font-weight:800;color:#fff;}
.wa-bubble{background:rgba(255,255,255,0.06);border:1px solid var(--border-soft);padding:.7rem .95rem;border-radius:2px 12px 12px 12px;flex:1;}
.wa-bubble p{font-size:13px;color:var(--text);line-height:1.55;}
.wa-time{font-size:10px;color:var(--faint);text-align:right;margin-top:.3rem;}
.wa-cta-area{padding:0 1.1rem 1.1rem;}
.wa-open{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;padding:.9rem;background:var(--grad);background-size:180% 100%;color:#fff;border:none;font-family:var(--fb);font-size:12.5px;letter-spacing:.03em;font-weight:600;cursor:pointer;transition:background-position .4s;border-radius:12px;}
.wa-open:hover{background-position:100% 50%;}
.wa-open svg{width:15px;height:15px;fill:currentColor;}
.wa-secure{text-align:center;font-size:10px;color:var(--faint);margin-top:.65rem;letter-spacing:.08em;}
.wa-row{display:flex;align-items:center;gap:.65rem;}
.wa-trigger{width:3.5rem;height:3.5rem;background:var(--grad);border:none;color:#fff;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;border-radius:50%;transition:transform .2s;box-shadow:0 8px 28px var(--glow);flex-shrink:0;pointer-events:auto;}
.wa-trigger:hover{transform:scale(1.05);}
.wa-trigger svg{width:1.35rem;height:1.35rem;fill:currentColor;position:absolute;transition:opacity .22s,transform .22s;}
.wa-trigger .wa-icon{opacity:1;transform:scale(1);}
.wa-trigger .wa-close{opacity:0;transform:scale(.6) rotate(-45deg);}
.wa-trigger.active .wa-icon{opacity:0;transform:scale(.6);}
.wa-trigger.active .wa-close{opacity:1;transform:scale(1);}
.wa-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(168,85,247,.6);animation:waPulse 2s ease-out infinite;}
@keyframes waPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.65);opacity:0}}
.wa-trigger.active .wa-pulse{display:none;}

/* note: reduced-motion is intentionally NOT suppressed — this is an animation-first brand site */

/* ============================================================
   CARD HOVER — simple, smooth pop + highlight on every box
   (pure CSS, GPU-only: transform + box-shadow. No JS, no lag.)
============================================================ */
@media (hover:hover) and (pointer:fine){
  /* Box hover + entrance is GSAP-driven (see initBoxFX in app.js). These transitions
     are a no-JS fallback only; under html.gsap they're neutralized below. impact-cell
     keeps its own CSS bg hover; philo-card no longer lifts. */
  .portal-card,.srv-card,.client-card,.proc-step,.philo-card,.impact-cell{
    transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .9s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;
  }
  .about-item{border-radius:12px;transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1),background .25s ease;}

  /* contact form fields */
  .cf-field input:hover,.cf-field textarea:hover{border-color:rgba(168,85,247,0.35);background:var(--panel-2);}
}

/* ============================================================
   GSAP-OWNED BOXES — when GSAP loads, app.js adds .gsap to <html>.
   Kill CSS transitions on the boxes GSAP controls so its tweens
   (entrance + hover) aren't double-animated. Falls back to pure
   CSS reveal if GSAP fails to load (flag never added).
============================================================ */
html.gsap .portal-card,html.gsap .srv-card,html.gsap .client-card,html.gsap .proc-step,html.gsap .about-item{transition:none!important;}

/* Page-hero entrance is GSAP-driven. .ganim is set inline in <head> BEFORE paint so the
   header starts hidden (no flash); GSAP fades it in, then removes the flag. A timeout
   failsafe in the head script reveals it if GSAP never loads. */
html.ganim .page-hero .crumbs,html.ganim .page-hero .eyebrow,html.ganim .page-hero h1,html.ganim .page-hero .ph-sub{opacity:0;}

/* ============================================================
   MOBILE & TOUCH — broad device support
   (iPhone/iPad all models, Android: Samsung/Vivo/Oppo/Realme…)
============================================================ */
/* kill iOS font auto-zoom, remove grey tap flash, snappy taps */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}
body{overscroll-behavior-y:none;}
a,button,input,textarea,label,.btn,.spec-pill,.portal-card,.srv-card,.client-card,.proc-step,.nav-cta,.wa-trigger,.footer-socials a,.hamburger,.tk-item{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}

/* respect notch / dynamic island / home indicator / gesture nav bars */
#nav{padding-top:max(1rem,env(safe-area-inset-top));padding-left:max(clamp(1rem,4vw,2.4rem),env(safe-area-inset-left));padding-right:max(clamp(1rem,4vw,2.4rem),env(safe-area-inset-right));}
#wa{bottom:max(1rem,env(safe-area-inset-bottom));right:max(1rem,env(safe-area-inset-right));}
.mobile-menu{padding-top:max(2rem,env(safe-area-inset-top));padding-bottom:max(2rem,env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;}
footer{padding-bottom:max(2rem,env(safe-area-inset-bottom));}
.load-bottom{bottom:max(1.6rem,env(safe-area-inset-bottom));}

/* TOUCH DEVICES: hover effects never fire — give every interactive
   element clear press feedback instead */
@media (hover:none){
  a,button,.btn,.hamburger,.wa-trigger,.spec-pill,.portal-card,.srv-card,.client-card{cursor:pointer;}
  .btn:active,.nav-cta:active,.wa-open:active,.cf-submit:active{transform:scale(.97);}
  .btn-grad:active{box-shadow:0 8px 24px var(--glow);}
  .spec-pill:active{background:var(--grad);color:#fff;border-color:transparent;}
  .portal-card:active,.srv-card:active,.client-card:active,.proc-step:active{border-color:rgba(168,85,247,.5);background:var(--panel-2);}
  .portal-card:active::before,.srv-card:active::before{opacity:.9;}
  .client-card:active{transform:translateY(-2px);}
  .footer-socials a:active{background:var(--grad);border-color:transparent;}
  .footer-socials a:active svg{fill:#fff;}
  .tk-item:active{opacity:1;}
  .nav-links a:active::before,.footer-col ul li a:active,.footer-bottom-links a:active,.cc-link:active,.portal-go:active{opacity:1;color:var(--g3);}
  /* comfortable ≥44px tap targets for small text links */
  .footer-col ul li a,.footer-bottom-links a,.page-hero .crumbs a,.ci-val{display:inline-block;padding:.35rem 0;}
  .footer-col ul li{margin-bottom:.35rem;}
}

/* large phones / small tablets in landscape & portrait keep the CTA;
   compact phones (SE, small Android) declutter the bar */
@media (max-width:520px){
  .nav-cta{display:none;}
  .hero-ctas .btn{width:100%;}
  .hero-mini{margin-left:0;}
}

/* very short landscape (phones turned sideways) — keep menu usable */
@media (hover:none) and (max-height:520px) and (orientation:landscape){
  .mobile-menu{justify-content:flex-start;gap:.9rem;}
  .mobile-menu a{font-size:clamp(1.3rem,7vw,1.9rem);}
}

/* low-end Android: stop the constant grain repaint, lighten blur cost */
@media (max-width:768px){
  .grain{animation:none;opacity:.03;}
}