/* ===================================================================
   AlienWave Tech Solutions — styles.css  (v2 · premium)
   Privately-held holding company · deep teal system
   =================================================================== */

:root{
  --ink:        #04141a;
  --ink-2:      #071f27;
  --deep:       #004858;
  --teal:       #005568;
  --accent:     #1f97b0;
  --accent-2:   #3fbcc9;
  --white:      #ffffff;
  --paper:      #f3f8f9;
  --line:       #e3edef;
  --text:       #0d2a31;
  --text-soft:  #47606a;
  --text-invert:#e2f2f6;
  --text-invert-soft:#8fb3bc;

  --radius:20px; --radius-sm:13px;
  --shadow:0 30px 70px -28px rgba(0,64,78,.5);
  --shadow-sm:0 14px 40px -16px rgba(0,64,78,.4);
  --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --grad:linear-gradient(120deg,var(--accent) 0%,var(--accent-2) 100%);
  --grad-deep:linear-gradient(150deg,#004858 0%,#006078 55%,#00323d 100%);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* page-to-page horizontal slide (new page slides in from the right) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .4s var(--ease,cubic-bezier(.22,1,.36,1)) both}
::view-transition-new(root){animation:vtIn .4s var(--ease,cubic-bezier(.22,1,.36,1)) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
body{
  font-family:'Urbanist',system-ui,-apple-system,sans-serif;
  color:var(--text);background:var(--ink);
  line-height:1.68;letter-spacing:.014em;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
h1,h2,h3,h4,.brand-text{font-family:'Outfit',sans-serif;line-height:1.12;letter-spacing:.01em}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px}
/* Project hero containers: admin-controllable side space + width (so content can
   sit tighter to the left/edges). Defaults match the normal container. */
.project-hero .container{max-width:var(--proj-maxw,var(--maxw));padding-left:var(--proj-pad-x,26px);padding-right:var(--proj-pad-x,26px)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* grain overlay */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:var(--grad);
  box-shadow:0 0 14px rgba(31,151,176,.7);transition:width .1s linear}

/* custom cursor */
.cursor-dot,.cursor-ring{display:none !important;position:fixed;top:0;left:0;z-index:9997;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);mix-blend-mode:difference}
.cursor-dot{width:7px;height:7px;background:#fff}
.cursor-ring{width:38px;height:38px;border:1.5px solid rgba(255,255,255,.6);transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s}
.cursor-ring.hover{width:64px;height:64px;background:rgba(31,151,176,.14);border-color:transparent;mix-blend-mode:normal}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button{cursor:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  padding:15px 28px;border-radius:100px;position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s;white-space:nowrap}
.btn svg{transition:transform .35s var(--ease)}
.btn-primary{background:var(--grad);color:#012;box-shadow:0 14px 34px -10px rgba(31,151,176,.6)}
.btn-primary:hover{box-shadow:0 22px 48px -12px rgba(31,151,176,.8)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--white);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:11px 22px;font-size:14px}
.btn-block{width:100%;justify-content:center;margin-top:6px}

.kicker{display:inline-flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.kicker em{font-style:normal;color:var(--accent);font-size:12px;
  background:rgba(31,151,176,.1);border:1px solid rgba(31,151,176,.24);border-radius:6px;padding:3px 8px;letter-spacing:.05em}
.kicker.light{color:var(--accent)}
.section-dark .kicker{color:var(--accent-2)}

/* ===================================================================
   HEADER
   =================================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 0;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease)}
.site-header.scrolled{background:rgba(4,20,26,.75);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.06);padding:13px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 2px 12px rgba(31,151,176,.5))}
/* two logo variants: light (white) on dark headers, dark (black) on light headers */
.brand-mark-dark{display:none;filter:none}
.site-header.on-light .brand-mark-light{display:none}
.site-header.on-light .brand-mark-dark{display:inline-block}
.nx-icon-img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.brand-text{display:inline-block;font-size:21px;font-weight:700;color:var(--white);letter-spacing:.03em;line-height:1.02}
.brand-text span{color:var(--accent)}
.brand-tag{display:block;font-family:'Outfit',sans-serif;font-size:8.5px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--text-invert-soft);margin-top:3px}
.site-header.on-light .brand-tag{color:var(--text-soft)}
/* ===== primary nav — mobile-first: fullscreen overlay (opens via hamburger) ===== */
.main-nav{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(120% 120% at 50% 26%,#063947 0%,#04141a 62%,#020c0f 100%);
  opacity:0;visibility:hidden;transform:scale(1.03);
  transition:opacity .5s var(--ease),visibility .5s,transform .6s var(--ease)}
.main-nav.open{opacity:1;visibility:visible;transform:none}
.nav-link{display:flex;align-items:baseline;gap:16px;padding:8px 0;color:var(--text-invert-soft);
  transition:color .3s var(--ease),transform .35s var(--ease)}
.nav-link .nl-num{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--accent);opacity:.7;transition:opacity .3s}
.nav-link .nl-label{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:0em;font-size:clamp(1.8rem,7.4vw,2.8rem);line-height:1.05}
.nav-link:hover,.nav-link.active{color:#fff}
.nav-link:hover{transform:translateX(4px)}
.nav-link:hover .nl-num,.nav-link.active .nl-num{opacity:1}
.header-actions{display:flex;align-items:center;gap:14px}
.nav-group{display:flex;align-items:center;gap:14px}
.nav-toggle{display:flex;flex-direction:column;gap:5px;padding:8px;z-index:101}
body.nav-open{overflow:hidden}
.nav-toggle span{width:24px;height:2px;background:var(--white);border-radius:2px;transition:.3s var(--ease)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===================================================================
   HERO
   =================================================================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  padding:150px 0 90px;background:radial-gradient(130% 120% at 78% 8%,#063947 0%,var(--ink) 52%,#020c0f 100%)}
.hero-bg{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.mesh{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.mesh-1{width:44vw;height:44vw;max-width:600px;max-height:600px;background:radial-gradient(circle,rgba(31,151,176,.5),transparent 68%);top:-8%;right:2%;animation:drift1 16s ease-in-out infinite}
.mesh-2{width:38vw;height:38vw;max-width:520px;max-height:520px;background:radial-gradient(circle,rgba(63,188,201,.34),transparent 68%);bottom:-12%;left:-6%;animation:drift2 20s ease-in-out infinite}
.mesh-3{width:30vw;height:30vw;max-width:420px;max-height:420px;background:radial-gradient(circle,rgba(0,88,112,.6),transparent 66%);top:32%;left:38%;animation:drift3 24s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,50px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-40px)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,30px) scale(1.12)}}

.hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;width:100%}
.hero-left{max-width:640px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13.5px;font-weight:500;color:var(--text-invert-soft);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:8px 8px 8px 16px;border-radius:100px;margin-bottom:30px;backdrop-filter:blur(6px)}
.hero-eyebrow em{font-style:normal;background:rgba(31,151,176,.12);border-radius:100px;padding:4px 12px;letter-spacing:.14em}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(31,151,176,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,151,176,.6)}70%{box-shadow:0 0 0 11px rgba(31,151,176,0)}100%{box-shadow:0 0 0 0 rgba(31,151,176,0)}}

.hero-title{font-size:clamp(2.6rem,5.6vw,4.7rem);font-weight:700;color:var(--white);margin-bottom:26px;letter-spacing:-.012em}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line-in{display:block;transform:translateY(110%);opacity:0;
  animation:lineUp 1s var(--ease) forwards}
.hero-title .line:nth-child(1) .line-in{animation-delay:.15s}
.hero-title .line:nth-child(2) .line-in{animation-delay:.32s}
.hero-title .line:nth-child(3) .line-in{animation-delay:.49s}
.hero-title em{font-style:normal}
@keyframes lineUp{to{transform:translateY(0);opacity:1}}

.hero-sub{font-size:clamp(1.05rem,1.5vw,1.24rem);color:var(--text-invert-soft);max-width:560px;margin-bottom:38px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px}
.hero-metrics{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.metric strong{display:block;font-family:'Outfit',sans-serif;font-size:2.5rem;font-weight:700;color:var(--white);line-height:1}
.metric span{font-size:13px;color:var(--text-invert-soft)}
.metric-div{width:1px;height:40px;background:linear-gradient(transparent,rgba(255,255,255,.2),transparent)}

/* orbital ecosystem */
.hero-visual{position:relative;z-index:3;display:grid;place-items:center;min-height:440px}
.orbital{position:relative;width:min(38vw,420px);aspect-ratio:1;transform-style:preserve-3d;
  transform:rotateX(62deg) rotateZ(0deg);animation:orbSpin 40s linear infinite}
@keyframes orbSpin{to{transform:rotateX(62deg) rotateZ(360deg)}}
.orb-glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(31,151,176,.35),transparent 65%);filter:blur(24px);transform:rotateX(-62deg)}
.orb-core{position:absolute;top:50%;left:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%) rotateX(-62deg);
  display:grid;place-items:center;z-index:5}
.orb-core img{width:100%;filter:drop-shadow(0 0 26px rgba(31,151,176,.7));animation:coreFloat 5s ease-in-out infinite}
@keyframes coreFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.orb-ring{position:absolute;top:50%;left:50%;border:1px solid rgba(255,255,255,.12);border-radius:50%;transform:translate(-50%,-50%)}
.orb-ring.ring-1{width:52%;aspect-ratio:1;border-color:rgba(31,151,176,.3)}
.orb-ring.ring-2{width:76%;aspect-ratio:1;border-color:rgba(63,188,201,.22)}
.orb-ring.ring-3{width:100%;aspect-ratio:1;border-color:rgba(255,255,255,.09)}
.orb-node{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 16px var(--accent);display:grid;place-items:center;
  transform:rotate(var(--a)) translateX(var(--r,0)) rotate(calc(-1 * var(--a)))}
.orb-node.alt{background:var(--accent-2);box-shadow:0 0 16px var(--accent-2)}
.orb-node i{font-size:8px;color:#012;font-style:normal}
.ring-1 .orb-node{--r:calc(0.26 * min(38vw,420px))}
.ring-2 .orb-node{--r:calc(0.38 * min(38vw,420px))}
.ring-3 .orb-node{--r:calc(0.50 * min(38vw,420px))}

.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-invert-soft)}
.scroll-line{width:1px;height:44px;background:linear-gradient(var(--accent),transparent);position:relative;overflow:hidden}
.scroll-line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--white);animation:scrolldot 1.8s ease-in-out infinite}
@keyframes scrolldot{0%{top:-50%}100%{top:100%}}

/* ===================================================================
   MARQUEE
   =================================================================== */
.marquee{background:var(--ink-2);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;padding:22px 0}
.marquee-track{display:flex;align-items:center;gap:34px;width:max-content;animation:marq 26s linear infinite}
.marquee-track span{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:600;color:transparent;
  -webkit-text-stroke:1px rgba(143,179,188,.5);white-space:nowrap}
.marquee-track i{color:var(--accent);font-style:normal;font-size:1rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===================================================================
   SECTIONS
   =================================================================== */
.section{padding:var(--section-gap,120px) 0;background:var(--paper);position:relative}
.section:nth-of-type(even){}
#ecosystem,#why,#insights{background:var(--paper)}
.section-dark{background:var(--ink);color:var(--text-invert)}
.section-dark .section-lead,.section-dark p{color:var(--text-invert-soft)}
.section-dark .section-title{color:var(--white)}
.section-head{max-width:720px;margin:0 auto 66px;text-align:center}
.section-head .kicker{justify-content:center}
.section-title{font-size:clamp(2.1rem,3.8vw,3.1rem);font-weight:700;margin-bottom:20px;letter-spacing:-.006em}
.section-lead{font-size:1.12rem;color:var(--text-soft)}

/* spotlight hover for cards */
.spotlight{position:relative;overflow:hidden}
.spotlight::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(31,151,176,.16),transparent 60%)}
.spotlight:hover::after{opacity:1}

/* ecosystem cards */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:38px 32px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.vcard::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.vcard:hover{transform:translateY(-10px);box-shadow:var(--shadow);border-color:transparent}
.vcard:hover::before{transform:scaleX(1)}
.vcard-icon{width:60px;height:60px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(31,151,176,.14),rgba(63,188,201,.14));margin-bottom:22px}
.vcard-icon svg{width:29px;height:29px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vcard h3{font-size:1.32rem;margin-bottom:10px;color:var(--text)}
.vcard p{font-size:.98rem;color:var(--text-soft)}
.vcard-no{position:absolute;top:26px;right:30px;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--line)}

/* about */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.about-media{position:relative}
.about-card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--grad-deep);aspect-ratio:4/4.4;
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:flex-end}
.about-card::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 38%,rgba(31,151,176,.24),transparent 65%)}
.orbit{position:absolute;inset:0;display:grid;place-items:center}
.orbit-ring{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%}
.orbit-ring.r1{width:44%;aspect-ratio:1}
.orbit-ring.r2{width:66%;aspect-ratio:1;border-color:rgba(31,151,176,.24)}
.orbit-ring.r3{width:88%;aspect-ratio:1;border-color:rgba(255,255,255,.08)}
.orbit-core{width:34%;filter:drop-shadow(0 6px 28px rgba(31,151,176,.6));position:relative;z-index:2;animation:coreFloat 6s ease-in-out infinite}
/* founder photo as a circular avatar — sits above the name card, rings animate around it */
.orbit-core.is-avatar{width:46%;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:center 14%;
  align-self:start;margin-top:14%;border:4px solid rgba(255,255,255,.92);background:#fff;
  filter:none;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 28px rgba(31,151,176,.35)}
.orbit-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);top:50%;left:50%;margin:-6px}
.orbit-dot.d1{animation:o1 9s linear infinite}
.orbit-dot.d2{width:9px;height:9px;background:var(--accent-2);box-shadow:0 0 12px var(--accent-2);animation:o2 13s linear infinite}
.orbit-dot.d3{width:7px;height:7px;animation:o3 7s linear infinite}
@keyframes o1{from{transform:rotate(0) translateX(78px) rotate(0)}to{transform:rotate(360deg) translateX(78px) rotate(-360deg)}}
@keyframes o2{from{transform:rotate(120deg) translateX(120px) rotate(-120deg)}to{transform:rotate(480deg) translateX(120px) rotate(-480deg)}}
@keyframes o3{from{transform:rotate(240deg) translateX(160px) rotate(-240deg)}to{transform:rotate(600deg) translateX(160px) rotate(-600deg)}}
.about-card-foot{position:relative;z-index:3;margin:22px;padding:16px 22px;background:rgba(4,20,26,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:var(--shadow-sm)}
.about-card-foot strong{display:block;font-family:'Outfit',sans-serif;color:var(--white);font-size:1.15rem}
.about-card-foot span{font-size:13px;color:var(--accent)}
.about-card-foot .fc-headline{display:block;margin-top:4px;color:#cfe9ee;font-size:13.5px;line-height:1.45}
.about-card-foot .fc-company{display:block;margin-top:3px;color:var(--text-soft,#8aa);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.about-copy p{margin-bottom:18px;font-size:1.06rem}
.stat-row{display:flex;gap:40px;flex-wrap:wrap;margin-top:38px;padding-top:34px;border-top:1px solid rgba(255,255,255,.1)}
.stat strong{display:block;font-family:'Outfit',sans-serif;font-size:2.7rem;font-weight:700;color:var(--white);line-height:1}
.stat small{font-size:13px;color:var(--text-invert-soft)}

/* ===================================================================
   Registered worldwide · legal entities across 3 countries
   =================================================================== */
.registered{position:relative;overflow:hidden;
  background:linear-gradient(160deg,#00323f 0%,#012730 58%,#01161c 100%);color:#fff}
.registered .kicker{color:var(--accent-2)}
.registered .section-title{color:#fff}
.registered .section-lead{color:rgba(226,242,246,.72)}
.reg-glow{position:absolute;top:-18%;right:-8%;width:46vw;height:46vw;max-width:620px;max-height:620px;
  border-radius:50%;pointer-events:none;filter:blur(60px);
  background:radial-gradient(circle,rgba(31,151,176,.34),transparent 68%)}
.entity-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:46px}
.entity-card{position:relative;overflow:hidden;padding:26px 24px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:transform .5s var(--ease),border-color .5s,background .5s}
.entity-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.entity-card:hover{transform:translateY(-8px);background:rgba(255,255,255,.06);border-color:rgba(63,188,201,.4)}
.entity-card:hover::before{transform:scaleX(1)}
.entity-card.is-flagship::before{background:linear-gradient(120deg,var(--nx),var(--nx-2))}
.entity-card.is-flagship:hover{border-color:rgba(138,212,0,.42)}
.entity-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.entity-iso{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.06em;
  color:var(--accent-2);background:rgba(63,188,201,.12);border:1px solid rgba(63,188,201,.28)}
.entity-card.is-flagship .entity-iso{color:var(--nx-2);background:rgba(138,212,0,.12);border-color:rgba(138,212,0,.32)}
.entity-flag{flex:none;width:46px;height:31px;border-radius:7px;overflow:hidden;display:block;
  border:1px solid rgba(255,255,255,.22);box-shadow:0 3px 12px rgba(0,0,0,.4)}
.entity-flag svg{width:100%;height:100%;display:block}
.entity-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(226,242,246,.6)}
.entity-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 8px var(--accent-2);animation:regPulse 2.4s ease-in-out infinite}
.entity-card.is-flagship .entity-tag .dot{background:var(--nx);box-shadow:0 0 8px var(--nx)}
.entity-name{font-family:'Outfit',sans-serif;font-size:1.12rem;font-weight:700;color:#fff;
  margin-bottom:8px;line-height:1.2}
.entity-role{font-size:.9rem;color:rgba(226,242,246,.66);line-height:1.45}
.reg-accred{position:relative;display:flex;align-items:center;gap:22px;margin-top:22px;
  padding:20px 24px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.accred-badge{flex:none;width:94px;height:94px;border-radius:14px;display:grid;place-items:center;
  background:#fff;padding:12px;overflow:hidden}
.accred-badge.is-mono{background:linear-gradient(160deg,#f2f9fb,#e2eef1)}
.accred-badge img{max-width:100%;max-height:100%;object-fit:contain}
.accred-mono{display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:1.55rem;letter-spacing:.05em;color:#013a49;line-height:1}
.accred-mono em{font-style:normal;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#0a6a80;font-weight:600}
.accred-body{flex:1}
.accred-eyebrow{color:var(--accent-2);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.accred-body h3{font-family:'Outfit',sans-serif;color:#fff;font-size:1.14rem;font-weight:700;margin:7px 0 8px;line-height:1.25}
.accred-body p{color:rgba(226,242,246,.7);font-size:.92rem;line-height:1.5;max-width:620px}
.accred-link{display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  color:var(--accent-2);font-size:.9rem;font-weight:600;transition:color .3s var(--ease)}
.accred-link:hover{color:#fff}
@media(max-width:600px){.reg-accred{flex-direction:column;align-items:flex-start;gap:16px}}
.reg-note{position:relative;margin-top:22px;font-size:.92rem;color:rgba(226,242,246,.55);max-width:640px}
.entity-grid .reveal:nth-child(2){transition-delay:.08s}
.entity-grid .reveal:nth-child(3){transition-delay:.16s}
.entity-grid .reveal:nth-child(4){transition-delay:.24s}
.entity-grid .reveal:nth-child(5){transition-delay:.32s}
.accred-reg{display:inline-block;margin-top:2px;color:var(--accent-2);font-weight:600;letter-spacing:.01em}
.reg-certs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.reg-cert{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(226,242,246,.72);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:7px 14px}
.reg-cert b{color:#fff;font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:.02em}
.nx-trademark{margin-top:28px;text-align:center;font-size:.82rem;letter-spacing:.02em;color:rgba(226,242,246,.5)}

/* team cards (About) */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:46px}
.team-card{text-align:center;padding:30px 24px;border-radius:var(--radius);background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);transition:transform .5s var(--ease),border-color .5s var(--ease)}
.team-card:hover{transform:translateY(-8px);border-color:rgba(63,188,201,.4)}
.team-photo{width:108px;height:108px;margin:0 auto 18px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--grad-deep);border:2px solid rgba(63,188,201,.32)}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-initial{font-family:'Outfit',sans-serif;font-size:2.4rem;font-weight:700;color:#fff}
.team-name{font-family:'Outfit',sans-serif;font-size:1.3rem;color:#fff;margin-bottom:4px}
.team-role{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);font-weight:600;margin-bottom:14px}
.team-bio{color:rgba(226,242,246,.68);font-size:.95rem;line-height:1.55;max-width:300px;margin:0 auto}
@keyframes regPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:980px){.entity-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.entity-grid{grid-template-columns:1fr}}

/* why */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.why-item{padding:36px 28px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.why-item:hover{transform:translateY(-8px);box-shadow:var(--shadow-sm)}
.why-num{font-family:'Outfit',sans-serif;font-size:2.1rem;font-weight:700;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block;margin-bottom:14px}
.why-item h3{font-size:1.18rem;margin-bottom:10px}
.why-item p{font-size:.95rem;color:var(--text-soft)}

/* ventures */
.venture-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:920px;margin:0 auto}
.venture{background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);padding:44px 40px;transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.venture:hover{transform:translateY(-10px);border-color:rgba(31,151,176,.4);box-shadow:0 34px 66px -30px rgba(0,0,0,.65)}
.venture-flag{width:62px;height:42px;border-radius:8px;overflow:hidden;margin-bottom:16px;
  border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.venture-flag svg{width:100%;height:100%;display:block}
.foot-flags{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin-left:4px}
.foot-flags svg{width:21px;height:14px;border-radius:3px;display:block;box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* ===================================================================
   Flagship projects — grid cards + detail pages
   =================================================================== */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:44px}
.proj-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:30px 28px;border-radius:var(--radius);background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);transition:transform .5s var(--ease),border-color .5s,background .5s}
.proj-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--pa,#3fbcc9);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.proj-card:hover{transform:translateY(-8px);background:rgba(255,255,255,.055);border-color:var(--pa,#3fbcc9)}
.proj-card:hover::before{transform:scaleX(1)}
.proj-cat{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pa,#3fbcc9);font-weight:600}
.proj-card h3{font-family:'Outfit',sans-serif;font-size:1.4rem;color:#fff;margin:12px 0 10px}
.proj-card p{color:rgba(226,242,246,.68);font-size:.96rem;line-height:1.55;flex:1}
.proj-more{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--pa,#3fbcc9);font-weight:600;font-size:.9rem}
.proj-more svg{transition:transform .3s var(--ease)}
.proj-card:hover .proj-more svg{transform:translateX(4px)}
.project-hero{text-align:center}
.proj-hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;text-align:left;max-width:var(--maxw)}
.proj-hero-media img{width:100%;height:auto;border-radius:18px;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -28px rgba(0,0,0,.6);display:block}
@media (max-width:820px){.proj-hero-split{grid-template-columns:1fr;text-align:center;gap:30px}.proj-hero-media{order:-1}}
.proj-back{display:inline-block;margin-bottom:22px;color:var(--text-invert-soft);font-size:.9rem;font-weight:500;transition:color .3s var(--ease)}
.proj-back:hover{color:var(--pa,#3fbcc9)}
.proj-status{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;letter-spacing:.06em;color:var(--text-invert-soft)}
.proj-status-dot{width:8px;height:8px;border-radius:50%;background:var(--pa,#3fbcc9);box-shadow:0 0 10px var(--pa,#3fbcc9)}
.proj-article{max-width:720px;margin:0 auto}
.proj-summary{font-size:1.25rem;line-height:1.5;color:var(--text-invert);font-family:'Outfit',sans-serif;margin-bottom:22px}
.proj-article p{color:var(--text-invert-soft);font-size:1.05rem;line-height:1.7;margin-bottom:16px}
.proj-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* app-store style badges + platform chips (KINERA-style) */
.flagship-platforms{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 2px}
.flagship-platforms span{font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--nx-2);
  background:rgba(138,212,0,.1);border:1px solid rgba(138,212,0,.28);padding:6px 15px;border-radius:100px}
.flagship-stores{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 2px}
.store-badge{display:inline-flex;align-items:center;gap:11px;padding:9px 16px;border-radius:12px;
  background:#0a1510;border:1px solid rgba(255,255,255,.14);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.store-badge:hover{border-color:rgba(138,212,0,.45);transform:translateY(-2px)}
.store-ico{width:22px;height:22px;flex:none}
.store-txt{display:flex;flex-direction:column;line-height:1.15}
.store-txt small{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:rgba(226,242,246,.6)}
.store-txt b{font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;color:#fff}

/* ===== KINERA-style project detail hero ===== */
.proj-kinera{position:relative;overflow:hidden}
.proj-kinera .container{position:relative;z-index:3}
.proj-hero-wrap{max-width:620px;text-align:left}
.proj-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.proj-mark{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;flex:none;overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--pa) 30%,#0a1d22),#0a1d22);
  border:1px solid color-mix(in srgb,var(--pa) 45%,transparent);box-shadow:0 12px 30px -12px var(--pa)}
/* logo shows fully (PNG or SVG), never cropped; transparent logos sit on the accent-tinted badge */
.proj-mark img{width:100%;height:100%;object-fit:contain;padding:5px}
/* full-bleed logo (its own solid background) fills edge-to-edge — set via admin "Logo fit" */
.proj-mark.is-full img{padding:0;object-fit:cover}
.proj-mark b{font-family:'Outfit',sans-serif;font-size:26px;font-weight:800;color:var(--pa)}
.proj-word{font-family:'Outfit',sans-serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:.01em;color:#fff;line-height:1.05}
/* brand logo shown instead of the mark+name when a logo PNG/SVG is uploaded */
.proj-brand.has-logo{gap:0}
.proj-logo{display:block;height:clamp(54px,6vw,78px);width:auto;max-width:min(380px,74vw);object-fit:contain}
@media (max-width:900px){.proj-logo{margin:0}}
.proj-cat{display:block;margin-bottom:6px}
.proj-h1{margin:2px 0 0}
.proj-lead{margin-top:18px}
.proj-tags{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 18px}
.proj-tags span{font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--pa);padding:6px 14px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--pa) 42%,transparent);background:color-mix(in srgb,var(--pa) 12%,transparent)}
.proj-stores{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:4px}
/* round icon-only store buttons (Stage-Coding style) */
.proj-stores .store-badge{width:56px;height:56px;padding:0;border-radius:50%;justify-content:center;
  background:#0a0f12;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 26px -12px rgba(0,0,0,.7);
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.proj-stores .store-badge:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pa) 60%,transparent)}
.proj-stores .store-badge .store-txt{display:none}
.proj-stores .store-ico{width:26px;height:26px}
.proj-kinera.is-light .proj-stores .store-badge{background:#0d1418;border-color:rgba(0,0,0,.14)}
/* "Go to web" CTA button */
.proj-webrow{margin:4px 0 14px}
.proj-web-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;
  background:#0a0f12;color:#fff;border:1px solid rgba(255,255,255,.14);font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;letter-spacing:.02em;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s}
.proj-web-btn:hover{transform:translateY(-2px);border-color:var(--pa);box-shadow:0 14px 30px -14px var(--pa)}
.proj-web-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.proj-web-btn .web-globe{color:var(--pa)}
.proj-web-btn .web-arrow{width:14px;height:14px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.proj-kinera.is-light .proj-web-btn{background:#0d1418;color:#fff;border-color:rgba(0,0,0,.18)}
.proj-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font-family:'Outfit',sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pa)}
.proj-eyebrow .pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--pa);box-shadow:0 0 0 0 var(--pa);animation:pdot 2.2s infinite}
@keyframes pdot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pa) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.proj-hero-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px}
.proj-detail-link{display:inline-flex;align-items:center;gap:7px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;
  color:var(--pa);transition:gap .25s var(--ease)}
.proj-detail-link svg{stroke:currentColor}
.proj-detail-link:hover{gap:12px}
@media (max-width:820px){.proj-hero-foot{justify-content:flex-start}}

/* ----- project hero with app mockups (two-column, KINERA/Stage-Coding style) ----- */
.proj-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:44px;align-items:center;max-width:var(--maxw);margin:0 auto}
.proj-hero-grid .proj-hero-wrap{max-width:560px}
.proj-mockups{position:relative;min-height:460px;z-index:3;transform:scale(var(--mock-scale,1));transform-origin:center}
/* custom drag-editor layout: fixed aspect so admin canvas and live view match 1:1 */
.proj-mockups.mk-custom{aspect-ratio:5/4;min-height:0;height:auto}
.proj-mockups.mk-custom .mockup-card{position:absolute;margin:0;
  left:calc(var(--dx,50)*1%);top:calc(var(--dy,10)*1%);width:calc(var(--dw,46)*1%);transform:rotate(calc(var(--dr,0)*1deg))}
@media (max-width:900px){
  .proj-mockups.mk-custom{aspect-ratio:4/5;max-width:380px}
  .proj-mockups.mk-custom .mockup-card{left:calc(var(--tx,50)*1%);top:calc(var(--ty,10)*1%);width:calc(var(--tw,46)*1%);transform:rotate(calc(var(--tr,0)*1deg))}
}
@media (max-width:600px){
  .proj-mockups.mk-custom{aspect-ratio:9/16;max-width:300px}
  .proj-mockups.mk-custom .mockup-card{left:calc(var(--mx,50)*1%);top:calc(var(--my,10)*1%);width:calc(var(--mw,46)*1%);transform:rotate(calc(var(--mr,0)*1deg))}
}
/* transparent-friendly: no card box — the PNG's own shape shows, shadow follows its alpha */
.mockup-card{position:absolute;margin:0;background:none;border:none;box-shadow:none;border-radius:0;overflow:visible}
.mockup-card img,.mockup-card video{display:block;width:100%;height:auto;border-radius:8px;filter:drop-shadow(0 26px 48px rgba(0,0,0,.5))}
/* single mockup — centered */
.mk-count-1 .mockup-card{position:relative;width:76%;margin:0 auto;inset:auto;transform:none}
/* two mockups — side overlap */
.mk-count-2 .mockup-card.mk-1{width:58%;top:4%;right:2%;z-index:1;transform:rotate(2.5deg)}
.mk-count-2 .mockup-card.mk-2{width:56%;bottom:2%;left:0;z-index:2;transform:rotate(-2deg)}
/* three mockups — fanned cluster */
.mk-count-3 .mockup-card.mk-1{width:50%;top:0;right:4%;z-index:1;transform:rotate(3deg)}
.mk-count-3 .mockup-card.mk-2{width:52%;top:22%;left:0;z-index:3}
.mk-count-3 .mockup-card.mk-3{width:46%;bottom:0;right:14%;z-index:2;transform:rotate(-3deg)}
/* big faded index number */
.proj-bgnum{position:absolute;top:7%;left:2.5%;z-index:0;font-family:'Outfit',sans-serif;font-weight:800;line-height:.8;
  font-size:clamp(130px,22vw,300px);color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--pa) 22%,transparent);opacity:.55;pointer-events:none}
@media (max-width:900px){
  .proj-hero-grid{grid-template-columns:1fr;gap:24px}
  .proj-hero-grid .proj-hero-wrap{max-width:none;text-align:left;margin:0}
  .proj-hero-grid .proj-brand,.proj-hero-grid .proj-tags,.proj-hero-grid .proj-stores,.proj-hero-grid .proj-hero-foot{justify-content:flex-start}
  .proj-mockups{min-height:340px;margin:4px auto 0;max-width:440px}
  .proj-bgnum{font-size:clamp(90px,30vw,150px);top:1%}
}

/* floating isometric shapes */
.proj-shapes{position:absolute;inset:0;z-index:1;pointer-events:none}
.picon{position:absolute;display:block;will-change:transform;opacity:.92}
.picon img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 22px color-mix(in srgb,var(--pa,#7ed321) 34%,transparent))}
.picon-1{width:calc(92px*var(--shape-scale,1));top:9%;right:6%;animation:pfloat 7s var(--ease) infinite}
.picon-2{width:calc(78px*var(--shape-scale,1));top:45%;right:2%;animation:pfloat2 8.5s var(--ease) infinite}
.picon-3{width:calc(86px*var(--shape-scale,1));top:auto;bottom:11%;right:5%;animation:pfloat 9.5s var(--ease) infinite reverse}
.picon-4{width:calc(64px*var(--shape-scale,1));top:12%;right:41%;animation:pfloat2 10s var(--ease) infinite}
.picon-5{width:calc(72px*var(--shape-scale,1));bottom:6%;right:24%;animation:pfloat 11s var(--ease) infinite}
.picon-6{width:calc(60px*var(--shape-scale,1));top:auto;bottom:34%;right:43%;animation:pfloat2 9s var(--ease) infinite reverse}
@keyframes pfloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-22px) rotate(6deg)}}
@keyframes pfloat2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(18px) rotate(-6deg)}}
@media (max-width:820px){
  .proj-hero-wrap{max-width:none;text-align:left;margin:0}
  .proj-brand,.proj-tags,.proj-stores{justify-content:flex-start}
  .picon-2,.picon-4,.picon-6{display:none}
  .picon-1{width:54px;top:4%;right:4%}
  .picon-3{width:50px;top:auto;bottom:4%;right:4%}
  .picon-5{width:46px;bottom:4%;right:26%}
}
@media (prefers-reduced-motion:reduce){.picon{animation:none!important}}

/* ----- page builder stage (every block absolutely positioned per view) ----- */
.proj-staged .container{position:relative;z-index:3}
.proj-stage{position:relative;width:100%;max-width:var(--proj-maxw,var(--maxw));margin:0 auto;aspect-ratio:4/3}
.proj-stage .pblock{position:absolute;left:calc(var(--dx,5)*1%);top:calc(var(--dy,5)*1%);width:calc(var(--dw,40)*1%)}
.proj-stage .pblock-mockups{z-index:3;pointer-events:none}
.proj-stage .pblock-mockups a,.proj-stage .pblock-mockups video{pointer-events:auto}
/* floating icons rendered as positionable builder blocks (draggable in admin) */
.proj-stage .pblock-icon{z-index:1;pointer-events:none;animation:pfloat 8s var(--ease) infinite}
.proj-stage .pblock-icon:nth-of-type(2n){animation:pfloat2 9s var(--ease) infinite}
.proj-stage .pblock-icon .picon-img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--pa,#7ed321) 26%,transparent))}
.proj-stage .pblock .proj-mockups{min-height:0;margin:0}
.proj-stage .proj-brand{margin:0}
/* content scales with its block's width (so resize actually changes logo/buttons) */
.proj-stage .pblock-brand .proj-brand{width:100%;display:block}
.proj-stage .pblock-brand .proj-logo{width:100%;height:auto;max-width:none}
.proj-stage [class*="pblock-store"] .proj-stores{justify-content:flex-start;margin:0}
/* store circles are capped so they always stay ~the Go-to-web pill size,
   no matter how large the block is dragged in the admin builder. Only the badge
   itself is clickable, so a wide/overlapping block never blocks nearby buttons. */
.proj-stage [class*="pblock-store"]{pointer-events:none}
.proj-stage [class*="pblock-store"] .store-badge{width:100%;height:auto;aspect-ratio:1/1;padding:0;max-width:56px;max-height:56px;margin:0;pointer-events:auto}
.proj-stage [class*="pblock-store"] .store-ico{width:46%;height:46%}
.proj-stage .pblock-web{container-type:inline-size}
.proj-stage .pblock-web .proj-web-btn{width:100%;justify-content:center;white-space:nowrap;font-size:clamp(8px,6.5cqw,17px);padding:.65em 1em;gap:.45em;margin:0}
.proj-stage .pblock-web .proj-web-btn svg{width:1.1em;height:1.1em}
.proj-stage .pblock-web .proj-web-btn .web-arrow{width:.95em;height:.95em}
/* text scales with its block width → editor matches live 1:1, and text is resizable */
.proj-stage .pblock{container-type:inline-size}
.proj-stage .pblock-headline .page-hero-title{font-size:clamp(14px,9cqw,58px);line-height:1.05;margin:0;max-width:none}
.proj-stage .pblock-lead .page-hero-sub{font-size:clamp(9px,4cqw,20px);line-height:1.45;margin:0;max-width:none}
.proj-stage .pblock-category .kicker{font-size:clamp(8px,3.2cqw,14px)}
.proj-stage .pblock-eyebrow .proj-eyebrow{font-size:clamp(8px,3cqw,13px)}
.proj-stage .pblock-foot .proj-hero-foot{font-size:clamp(9px,3.2cqw,14px);flex-wrap:wrap;gap:10px;margin:0}
.proj-stage .pblock-tags .proj-tags{margin:0}
.proj-stage .pblock-tags .proj-tags span{font-size:clamp(8px,2.8cqw,13px)}
@media (max-width:900px){
  .proj-stage{aspect-ratio:3/4;width:100%;max-width:var(--maxw)}
  .proj-stage .pblock{left:calc(var(--tx,5)*1%);top:calc(var(--ty,5)*1%);width:calc(var(--tw,40)*1%)}
}
@media (max-width:600px){
  .proj-stage{aspect-ratio:9/16}
  .proj-stage .pblock{left:calc(var(--mx,5)*1%);top:calc(var(--my,5)*1%);width:calc(var(--mw,40)*1%)}
  body.site-decked > section.spanel.proj-staged{align-items:flex-start}
}

/* ----- light / white colour scheme for a project panel (admin: Colour scheme → Light) ----- */
.proj-kinera.is-light{background:radial-gradient(120% 100% at 50% 0%,#ffffff,#e9f1f3);color:var(--text)}
.proj-kinera.is-light .page-hero-title,.proj-kinera.is-light .proj-word{color:var(--ink)}
.proj-kinera.is-light .proj-lead,.proj-kinera.is-light .page-hero-sub{color:var(--text-soft)}
.proj-kinera.is-light .proj-back,.proj-kinera.is-light .proj-status{color:var(--text-soft)}
.proj-kinera.is-light .proj-back:hover{color:var(--pa)}
.proj-kinera.is-light .proj-mark{background:linear-gradient(145deg,color-mix(in srgb,var(--pa) 16%,#fff),#fff);border-color:color-mix(in srgb,var(--pa) 32%,transparent)}
.proj-kinera.is-light .proj-mark b{color:var(--pa)}
.proj-kinera.is-light .proj-tags span{background:color-mix(in srgb,var(--pa) 12%,#fff);border-color:color-mix(in srgb,var(--pa) 34%,transparent)}
.proj-kinera.is-light .mockup-card img,.proj-kinera.is-light .mockup-card video{filter:drop-shadow(0 22px 42px rgba(20,40,50,.28))}

.venture h3{font-size:1.55rem;color:var(--white);margin-bottom:12px}
.venture p{margin-bottom:22px}
.venture-tag{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--accent);
  background:rgba(31,151,176,.1);border:1px solid rgba(31,151,176,.26);padding:6px 15px;border-radius:100px}

/* mission */
.mission{background:var(--grad-deep);padding:100px 0;position:relative;overflow:hidden}
.mission::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 140% at 50% 0%,rgba(31,151,176,.2),transparent 60%)}
.mission-inner{position:relative;text-align:center;max-width:940px;margin:0 auto}
.mission-inner .kicker{justify-content:center}
.mission-text{font-family:'Outfit',sans-serif;font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:500;color:var(--white);line-height:1.32;letter-spacing:-.01em}

/* insights */
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.insight{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.insight:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.insight-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);
  background:rgba(0,88,112,.08);padding:5px 13px;border-radius:100px;margin-bottom:18px}
.insight h3{font-size:1.26rem;margin-bottom:12px;line-height:1.25}
.insight p{font-size:.96rem;color:var(--text-soft);margin-bottom:20px}
.insight-meta{font-size:13px;color:var(--teal);font-weight:600}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:66px;align-items:start}
.contact-copy p{margin-bottom:30px;font-size:1.08rem}
.contact-list{display:flex;flex-direction:column;gap:16px}
.contact-list li{display:flex;align-items:center;gap:14px;font-size:1.02rem;color:var(--text-invert)}
.contact-list a:hover{color:var(--accent)}
.ci{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;background:rgba(31,151,176,.1);border:1px solid rgba(31,151,176,.24)}
.ci svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-form{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:36px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text-invert-soft);margin-bottom:8px}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:14px 16px;color:var(--white);font-size:15px;font-family:inherit;transition:border-color .25s,background .25s}
.field input::placeholder,.field textarea::placeholder{color:#5c7880}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(31,151,176,.06)}
.field textarea{resize:vertical}
.form-note{margin-top:14px;font-size:14px;font-weight:500;color:var(--accent-2);text-align:center}

/* footer */
.footer{background:#020c0f;color:var(--text-invert-soft);padding:76px 0 30px}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:40px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand .brand{margin-bottom:18px}
.footer-brand p{font-size:.96rem;max-width:300px}
.footer-col h4{color:var(--white);font-size:15px;margin-bottom:18px}
.footer-col a{display:block;font-size:.95rem;margin-bottom:11px;transition:color .25s}
.footer-col a:hover{color:var(--accent)}
.footer-news p{font-size:.92rem;margin-bottom:16px}
.news-form{display:flex;gap:8px}
.news-form input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:12px 18px;color:var(--white);font-size:14px;font-family:inherit}
.news-form input:focus{outline:none;border-color:var(--accent)}
.news-form button{width:46px;height:46px;flex:none;border-radius:50%;background:var(--grad);color:#012;display:grid;place-items:center;transition:transform .3s var(--ease)}
.news-form button:hover{transform:scale(1.08)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:26px;font-size:13.5px;flex-wrap:wrap}

/* reveal */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.vgrid .reveal:nth-child(2),.why-grid .reveal:nth-child(2),.insight-grid .reveal:nth-child(2),.venture-grid .reveal:nth-child(2){transition-delay:.09s}
.vgrid .reveal:nth-child(3),.why-grid .reveal:nth-child(3),.insight-grid .reveal:nth-child(3){transition-delay:.18s}
.vgrid .reveal:nth-child(4),.why-grid .reveal:nth-child(4),.venture-grid .reveal:nth-child(4){transition-delay:.27s}
.vgrid .reveal:nth-child(5){transition-delay:.36s}
.vgrid .reveal:nth-child(6){transition-delay:.45s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important}
  .hero-title .line-in{transform:none;opacity:1}
  html{scroll-behavior:auto}
  .cursor-dot,.cursor-ring{display:none}
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .hero-left{max-width:720px}
}
@media (max-width:1000px){
  .vgrid,.insight-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:50px}
  .about-media{max-width:420px;margin:0 auto}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .cursor-dot,.cursor-ring{display:none}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:auto}
  .header-actions .btn{display:none}
  .hero{padding:130px 0 80px}
  .hero-metrics{gap:20px}
  .metric strong{font-size:2rem}
  .section{padding:calc(var(--section-gap,120px) * .7) 0}
  .section-head{margin-bottom:46px}
  .vgrid,.insight-grid,.why-grid,.venture-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media (max-width:400px){
  .container{padding:0 18px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%;justify-content:center}
  .metric-div{display:none}
}

/* ===================================================================
   FLAGSHIP · NUTROX
   =================================================================== */
:root{--nx:#8ad400;--nx-2:#a6e83a;--nx-deep:#5f9e00}
.flagship{position:relative;overflow:hidden;padding:120px 0;
  background:linear-gradient(160deg,#06171a 0%,#0a2418 55%,#04120e 100%)}
.flagship-bg{position:absolute;inset:0;z-index:0}
.fmesh{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.fmesh-1{width:40vw;height:40vw;max-width:520px;max-height:520px;background:radial-gradient(circle,rgba(138,212,0,.4),transparent 68%);top:-10%;right:-4%;animation:drift1 18s ease-in-out infinite}
.fmesh-2{width:32vw;height:32vw;max-width:420px;max-height:420px;background:radial-gradient(circle,rgba(31,151,176,.28),transparent 66%);bottom:-14%;left:-6%;animation:drift2 22s ease-in-out infinite}
.flagship-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

.flag-kicker{color:var(--nx-2)!important}
.nutrox-brand{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.nutrox-mark{position:relative;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,#0e1a08,#132009);border:1.5px solid var(--nx);box-shadow:0 0 26px rgba(138,212,0,.4)}
.nutrox-mark b{font-family:'Outfit',sans-serif;font-size:1.7rem;font-weight:700;color:var(--nx);line-height:1}
.nutrox-mark .spark{position:absolute;top:6px;left:8px;font-size:9px;color:var(--nx-2)}
.nutrox-word{font-family:'Outfit',sans-serif;font-size:2rem;font-weight:700;letter-spacing:.04em;color:#fff}
.nx-text{color:var(--nx);-webkit-text-fill-color:var(--nx);background:none}
.flagship .section-title{color:#fff;text-align:left}
.flagship-lead{color:var(--text-invert-soft);font-size:1.1rem;margin:18px 0 24px;max-width:520px}
.flagship-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.flagship-tags span{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--nx-2);
  background:rgba(138,212,0,.1);border:1px solid rgba(138,212,0,.28);padding:6px 15px;border-radius:100px}
.flagship-points{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}
.flagship-points li{display:flex;align-items:center;gap:12px;color:var(--text-invert);font-size:1rem}
.flagship-points i{width:22px;height:22px;flex:none;border-radius:50%;background:rgba(138,212,0,.15);color:var(--nx);
  display:grid;place-items:center;font-size:11px;font-style:normal;border:1px solid rgba(138,212,0,.3)}
.flagship-cta{display:flex;gap:14px;flex-wrap:wrap}
.store-btn{display:inline-flex;align-items:center;gap:11px;padding:11px 20px;border-radius:14px;
  background:#0c1408;border:1px solid rgba(138,212,0,.35);color:#fff;transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.store-btn:hover{border-color:var(--nx);box-shadow:0 12px 30px -12px rgba(138,212,0,.5)}
.store-btn svg{color:var(--nx)}
.store-btn span{display:flex;flex-direction:column;font-family:'Outfit',sans-serif;font-weight:600;font-size:1rem;line-height:1.1}
.store-btn small{font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-invert-soft)}

/* phone mockups */
.flagship-visual{position:relative;min-height:520px;display:flex;justify-content:center;align-items:center;perspective:1400px}
.phone{position:absolute;width:250px;aspect-ratio:250/520;border-radius:34px;background:#0a0f14;
  border:8px solid #12181f;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05);overflow:hidden}
.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:74px;height:18px;background:#12181f;border-radius:0 0 12px 12px;z-index:5}
.phone-front{transform:translate(-64px,0) rotateY(6deg);z-index:3}
.phone-back{transform:translate(96px,-30px) rotateY(-8deg) scale(.92);z-index:2;opacity:.96}
.pscreen{position:absolute;inset:0;padding:26px 14px 12px;display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(180deg,#0e141a,#0a1710);color:#eaf6de;font-size:11px}
.ps-status{display:flex;justify-content:space-between;font-size:9px;color:#8aa;padding:0 4px}
.ps-ico{letter-spacing:1px}
.ps-head{display:flex;align-items:center;gap:9px;margin-top:2px}
.ps-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,var(--nx),var(--nx-deep));color:#0a1408;
  display:grid;place-items:center;font-weight:700;font-family:'Outfit',sans-serif}
.ps-hi{flex:1;line-height:1.2}
.ps-hi small{color:#7d998a;font-size:8.5px}
.ps-hi strong{display:block;font-size:13px;color:#fff;font-family:'Outfit',sans-serif}
.ps-bell{color:var(--nx-2)}
.ps-days{display:flex;justify-content:space-between;gap:3px;margin:2px 0}
.ps-days span{flex:1;text-align:center;padding:7px 0;border-radius:9px;background:rgba(255,255,255,.04);font-size:9px;color:#9ab}
.ps-days .on{background:linear-gradient(145deg,var(--nx),var(--nx-deep));color:#0a1408;font-weight:700}
.ps-stats{display:flex;gap:6px}
.ps-stat{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:11px;padding:9px 6px;text-align:center}
.ps-stat b{display:block;font-family:'Outfit',sans-serif;font-size:15px;color:var(--nx-2)}
.ps-stat small{font-size:8px;color:#8aa}
.ps-section{font-weight:600;color:#fff;margin-top:2px;font-size:11px}
.ps-photo{position:relative;border-radius:14px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,#1c2a12,#0c3a24 60%,#0a2018);min-height:96px;flex:1}
.ps-photo-a{min-height:150px}
.ps-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 40%,rgba(138,212,0,.18),transparent 60%)}
.ps-play{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);
  display:grid;place-items:center;color:#fff;font-size:11px;z-index:2}
.ps-cap{position:absolute;bottom:9px;left:11px;font-size:11px;font-weight:600;color:#fff;z-index:2}
.ps-chips{display:flex;gap:6px}
.ps-chips span{font-size:8.5px;font-weight:600;color:var(--nx-2);background:rgba(138,212,0,.12);border:1px solid rgba(138,212,0,.25);padding:4px 9px;border-radius:100px}
.ps-nav{display:flex;justify-content:space-around;margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.07)}
.ps-nav i{font-style:normal;color:#6a8;font-size:14px}
.ps-nav .on{color:var(--nx)}
.ps-warm{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.ps-warm-label{font-size:8.5px;letter-spacing:.08em;color:var(--nx-2)}
.ps-timer{font-family:'Outfit',sans-serif;font-size:26px;font-weight:700;color:#fff}
.ps-set{display:flex;justify-content:space-between;font-size:9px;color:#9ab}
.ps-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.ps-bar i{display:block;height:100%;width:52%;background:linear-gradient(90deg,var(--nx),var(--nx-2))}
.ps-instr{font-size:9px;color:#8aa}

@media (max-width:1080px){
  .flagship-inner{grid-template-columns:1fr;gap:60px}
  .flagship-visual{min-height:560px;margin-top:10px}
}
@media (max-width:720px){
  .flagship{padding:84px 0}
  .flagship-visual{min-height:500px;transform:scale(.86)}
  .phone-front{transform:translate(-46px,0) rotateY(6deg)}
  .phone-back{transform:translate(70px,-26px) rotateY(-8deg) scale(.9)}
  .flagship .section-title{text-align:left}
}

/* ===================================================================
   INNER PAGES · page hero, articles, alerts
   =================================================================== */
body.inner-page{background:var(--ink)}
.page-hero{position:relative;overflow:hidden;padding:170px 0 70px;text-align:center;
  background:radial-gradient(120% 130% at 50% 0%,#063947 0%,var(--ink) 58%,#020c0f 100%)}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero .container{position:relative;z-index:2}
.page-hero .kicker{justify-content:center}
.page-hero-title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;color:#fff;letter-spacing:-.008em;max-width:900px;margin:0 auto 18px}
.page-hero-sub{color:var(--text-invert-soft);font-size:1.12rem;max-width:640px;margin:0 auto}

.article-head{max-width:820px;margin:0 auto;text-align:center}
.article-meta{color:var(--accent);font-size:.95rem;font-weight:500;margin-top:6px}
.article-body{max-width:760px;margin:0 auto;font-size:1.12rem;color:var(--text-soft)}
.article-body p{margin-bottom:22px}

.nx-card:hover::before{background:linear-gradient(120deg,var(--nx),var(--nx-2))}
.nx-icon{background:linear-gradient(140deg,rgba(138,212,0,.16),rgba(166,232,58,.14))!important}
.nx-icon svg{stroke:var(--nx-deep)!important}

.form-alert{border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:14px;font-weight:500}
.form-alert.ok{background:rgba(63,188,201,.12);border:1px solid rgba(63,188,201,.32);color:var(--accent-2)}
.form-alert.err{background:rgba(255,120,120,.1);border:1px solid rgba(255,120,120,.3);color:#ff9a9a}
.news-flash{font-size:13px;font-weight:600;margin-bottom:10px;padding:8px 12px;border-radius:9px}
.news-flash.ok{background:rgba(63,188,201,.12);color:var(--accent-2)}
.news-flash.err{background:rgba(255,120,120,.12);color:#ff9a9a}

@media (max-width:720px){
  .page-hero{padding:140px 0 56px}
}

/* ===================================================================
   AUTHENTICITY PASS · calmer visuals, honest Nutrox CTA
   =================================================================== */
/* dial back the "AI demo" glow */
.mesh{opacity:.34}
.fmesh{opacity:.36}
.hero-canvas{opacity:.55}
.spotlight::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(31,151,176,.10),transparent 60%)}
.orb-glow{opacity:.7}
.orbital{animation-duration:60s}
.orb-node{box-shadow:0 0 10px rgba(31,151,176,.6)}
.orb-node.alt{box-shadow:0 0 10px rgba(63,188,201,.6)}

/* limit gradient-text shimmer: keep it, but calmer weight */
.grad-text{-webkit-text-fill-color:transparent}

/* Nutrox green button + honest status note */
.nx-btn{background:linear-gradient(120deg,var(--nx),var(--nx-2))!important;color:#0a1408!important;
  box-shadow:0 14px 34px -12px rgba(138,212,0,.55)!important}
.flagship-note{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-invert-soft);font-weight:500}
.flagship-note i{width:8px;height:8px;border-radius:50%;background:var(--nx);box-shadow:0 0 0 0 rgba(138,212,0,.6);animation:pulse 2s infinite}

/* ===================================================================
   HERO v3 · WebGL shader + oversized editorial type
   =================================================================== */
.hero-gl-section{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding:150px 0 96px;background:#04141a}
.gl-hero{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.gl-hero.gl-fallback{background:radial-gradient(130% 120% at 72% 20%,#00687f 0%,#04141a 60%,#020c0f 100%)}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,20,26,.78) 0%,rgba(4,20,26,.42) 44%,rgba(4,20,26,.04) 74%,transparent 100%),
             linear-gradient(0deg,rgba(4,20,26,.62),transparent 42%)}
.hero-glyph{position:absolute;z-index:1;right:4%;top:50%;transform:translateY(-50%);
  width:min(40vw,460px);opacity:.08;filter:drop-shadow(0 0 40px rgba(31,151,176,.4));pointer-events:none;
  animation:floaty 9s ease-in-out infinite}

.hero-v2{position:relative;z-index:2;max-width:880px}
.hero-xl{font-family:'Outfit',sans-serif;font-weight:700;color:#fff;
  font-size:clamp(3.1rem,9.4vw,8rem);line-height:.94;letter-spacing:-.01em;margin-bottom:30px}
.hero-xl .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-xl .line-in{display:block;transform:translateY(110%);opacity:0;animation:lineUp 1.05s var(--ease) forwards}
.hero-xl .line:nth-child(1) .line-in{animation-delay:.12s}
.hero-xl .line:nth-child(2) .line-in{animation-delay:.28s}
.hero-xl .line:nth-child(3) .line-in{animation-delay:.44s}
.hero-xl em{font-style:normal}
.hero-xl .stroke{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.9);
  background:none;padding-right:.06em}
@supports not (-webkit-text-stroke:2px #fff){.hero-xl .stroke{color:var(--accent)}}

.hero-gl-section .hero-sub{color:#c4dbe1;max-width:560px;margin-bottom:36px;font-size:clamp(1.05rem,1.5vw,1.22rem)}
.hero-gl-section .hero-eyebrow{margin-bottom:28px}
.hero-gl-section .hero-metrics{margin-top:4px}
.hero-gl-section .scroll-hint{color:#a9c6cd}

@media (max-width:720px){
  .hero-gl-section{padding:128px 0 78px;min-height:92svh}
  .hero-glyph{opacity:.06;right:-6%}
  .hero-xl{font-size:clamp(2.7rem,13vw,4rem)}
}

/* ===================================================================
   GSAP scroll layer · let GSAP own reveal timing (no double easing)
   =================================================================== */
/* reveals are IntersectionObserver + CSS driven now, so keep their transition */
/* GSAP sets will-change implicitly; hint the browser for smooth parallax */
.hero-glyph,.about-card,.flagship-visual{will-change:transform}

/* ===================================================================
   INTRO LOADER (home, once per session)
   =================================================================== */
.loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#04141a}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader-mark{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 0 26px rgba(31,151,176,.6));
  animation:loaderPulse 1.4s ease-in-out infinite}
.loader-word{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.45rem;letter-spacing:.16em;color:#fff}
.loader-word b{color:var(--accent)}
.loader-bar{width:180px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--accent))}
@keyframes loaderPulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.09);opacity:1}}
body.loading{overflow:hidden;height:100vh}
.loader{transition:opacity .55s ease,transform .6s cubic-bezier(.76,0,.24,1)}
.loader-out{opacity:0;transform:translateY(-100%)}
.loader-hide{display:none!important}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

/* ---- code-typing boot intro ---- */
.boot-term{width:min(560px,90vw);background:#0a1a22;border:1px solid rgba(63,188,201,.22);border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 50px rgba(31,151,176,.12);overflow:hidden;font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace}
.boot-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.boot-bar .bd{width:11px;height:11px;border-radius:50%;background:#2a3b43}
.boot-bar .bd:nth-child(1){background:#ff5f57}.boot-bar .bd:nth-child(2){background:#febc2e}.boot-bar .bd:nth-child(3){background:#28c840}
.boot-bar em{margin-left:10px;font-style:normal;font-size:.72rem;letter-spacing:.04em;color:rgba(255,255,255,.4)}
.boot-code{margin:0;padding:20px 20px 24px;font-size:clamp(.78rem,2.4vw,.95rem);line-height:1.7;color:#cfe9ee;
  white-space:pre-wrap;word-break:break-word;min-height:160px;text-align:left}
.boot-code .c-prompt{color:var(--accent-2,#3fbcc9)}
.boot-code .c-key{color:#8ad400}
.boot-code .c-str{color:#ffd479}
.boot-code .c-ok{color:#28c840}
.boot-code .cursor{display:inline-block;width:9px;height:1.05em;vertical-align:-2px;background:var(--accent-2,#3fbcc9);
  margin-left:2px;animation:bootBlink 1s steps(1) infinite}
@keyframes bootBlink{50%{opacity:0}}
.boot-brand{display:none;flex-direction:column;align-items:center;gap:18px}
.loader.show-brand .boot-term{display:none}
.loader.show-brand .boot-brand{display:flex}
.boot-skip{position:fixed;right:22px;bottom:20px;z-index:2;background:rgba(255,255,255,.06);color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:7px 16px;font-size:.8rem;font-family:'Outfit',sans-serif;
  letter-spacing:.04em;cursor:pointer;transition:background .2s,color .2s}
.boot-skip:hover{background:rgba(255,255,255,.12);color:#fff}

/* ===================================================================
   ECOSYSTEM · pinned horizontal scroll
   =================================================================== */
.eco-h{padding:110px 0 0;background:var(--paper);position:relative}
.eco-head{text-align:center;margin:0 auto 26px;max-width:740px}
.eco-head .kicker{justify-content:center}
.eco-hint{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);font-weight:600;opacity:.8}
.eco-pin{height:100vh;display:flex;align-items:center;overflow:hidden;padding-bottom:30px}
.eco-track{display:flex;gap:26px;padding:0 max(26px,calc((100vw - 1200px)/2 + 26px));will-change:transform}
.eco-card{flex:0 0 auto;width:360px;min-height:340px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:40px 34px;position:relative;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .4s,box-shadow .4s}
.eco-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.eco-card:hover{box-shadow:var(--shadow);border-color:transparent}
.eco-card:hover::before{transform:scaleX(1)}
.eco-no{position:absolute;top:26px;right:30px;font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:700;color:var(--line)}
.eco-card .vcard-icon{margin-bottom:22px}
.eco-card h3{font-size:1.5rem;margin:4px 0 12px;color:var(--text)}
.eco-card p{font-size:1rem;color:var(--text-soft)}

/* fallback: no GSAP or small screens → horizontal swipe */
html:not(.has-gsap) .eco-pin{height:auto;overflow-x:auto;padding:0 0 44px;scroll-snap-type:x proximity}
html:not(.has-gsap) .eco-card{scroll-snap-align:center}
@media (max-width:900px){
  .eco-h{padding:84px 0 0}
  .eco-pin{height:auto!important;overflow-x:auto;scroll-snap-type:x proximity;padding:0 0 44px}
  .eco-track{gap:18px;padding:0 20px}
  .eco-card{width:82vw;min-height:300px;scroll-snap-align:center}
}

/* ===================================================================
   PAGE TRANSITION · soft fade between pages
   =================================================================== */
.page-fade{position:fixed;inset:0;z-index:10001;display:grid;place-items:center;background:#04141a;
  opacity:1;visibility:visible;transition:opacity .5s ease, visibility .5s ease}
.page-fade.hidden{opacity:0;visibility:hidden;pointer-events:none}
.page-fade-mark{width:60px;height:60px;object-fit:contain;opacity:.9;
  filter:drop-shadow(0 0 22px rgba(31,151,176,.55));animation:loaderPulse 1.4s ease-in-out infinite}
/* next-page hint at the very bottom of a page */
.nextpage-hint{position:fixed;right:24px;bottom:22px;z-index:90;
  display:flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  background:rgba(4,20,26,.55);backdrop-filter:blur(8px);border:1px solid rgba(31,151,176,.28);
  padding:9px 18px;border-radius:100px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .4s,visibility .4s,transform .4s}
.nextpage-hint:hover{border-color:var(--accent);color:#fff}
.nextpage-hint.show{opacity:1;visibility:visible;transform:translateY(0)}
.nextpage-hint b{font-weight:600;color:#fff;text-transform:none;letter-spacing:0}
.nextpage-hint svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:hintBob 1.5s ease-in-out infinite}
@keyframes hintBob{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media(max-width:560px){.nextpage-hint{right:14px;bottom:14px;font-size:11px;padding:8px 14px}}

/* ===================================================================
   VISION DECK · full-screen cross-fading panels
   =================================================================== */
html.deck-on, html.deck-on body{height:100%;overflow:hidden}
.deck-page{background:#04141a}
.deck{position:fixed;inset:0;z-index:1}
/* the home deck is a self-contained fullscreen experience — no footer bleed */
.deck-page .footer{display:none}

/* inner pages as a fade deck — every top-level section becomes a panel */
body.site-decked{overflow:hidden}
body.site-decked > section.spanel{position:fixed;inset:0;z-index:1;display:flex;
  align-items:safe center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;
  overflow-y:auto;overflow-x:hidden;padding:96px 24px 56px;
  transition:opacity .4s var(--ease),visibility .4s var(--ease)}
body.site-decked > section.spanel.active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
/* Builder (page-builder) panels: top-aligned, header-cleared, ZERO scroll — the
   stage's empty lower area is clipped (content sits in the upper part). */
body.site-decked > section.spanel.proj-staged{align-items:flex-start;overflow:hidden;padding:96px 24px 0}
.site-decked .footer,.site-decked .nextpage-hint{display:none}
.panel{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease)}
.panel.active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}

/* panel themes */
.panel-dark{background:radial-gradient(130% 120% at 72% 12%,#063947 0%,#04141a 55%,#020c0f 100%);color:#fff}
.panel-teal{background:var(--grad-deep);color:#fff}
.panel-ink{background:linear-gradient(160deg,#04141a,#020c0f);color:#fff}
.panel-light{background:radial-gradient(120% 100% at 50% 0%,#f6fafb,#e7f0f2);color:var(--text)}

.panel-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.panel-bg .mesh{opacity:.4}
.panel-inner{position:relative;z-index:2;width:100%;max-width:1000px;padding:0 28px;text-align:center}
.panel-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.panel-light .panel-eyebrow{color:var(--teal)}
.panel-eyebrow .pulse-dot{width:8px;height:8px}
.panel-title{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.012em;
  font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:1.02;margin:0 auto;max-width:16ch}
.panel-title .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.panel-sub{font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.55;max-width:640px;margin:28px auto 0;
  color:rgba(226,242,246,.72)}
.panel-light .panel-sub{color:var(--text-soft)}
.panel-cta{margin-top:38px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.panel-index{position:absolute;left:6vw;bottom:8vh;z-index:2;font-family:'Outfit',sans-serif;
  font-size:14px;letter-spacing:.1em;color:rgba(255,255,255,.4)}
.panel-light .panel-index{color:rgba(13,42,49,.4)}
.panel-index b{color:var(--accent)}

/* hero panel keeps the shader */
#panel-hero .gl-hero{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
#panel-hero .emblem-code{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none}
.hero-shimmer{display:block;width:clamp(150px,26vw,210px);height:18px;margin:-4px auto 22px;
  border-radius:100px;background:rgba(6,26,32,.42)}
@media (max-width:640px){.hero-shimmer{width:clamp(140px,44vw,180px);height:16px;margin:-2px auto 18px}}
#panel-hero .hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%,transparent 40%,rgba(4,20,26,.6) 100%),linear-gradient(0deg,rgba(4,20,26,.55),transparent 45%)}

/* dot navigation */
.deck-dots{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:14px}
.deck-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);
  background:transparent;padding:0;cursor:pointer;transition:.3s var(--ease)}
.deck-dot:hover{border-color:var(--accent)}
.deck-dot.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(31,151,176,.7)}
/* dark dots on light panels (e.g. Our Projects) so they stay visible */
body.deck-on-light .deck-dot{border-color:rgba(10,20,25,.45)}
body.deck-on-light .deck-dot:hover{border-color:var(--accent)}
body.deck-on-light .deck-dot.on{background:#0a141a;border-color:#0a141a;box-shadow:0 0 10px rgba(10,20,25,.35)}
html:not(.deck-on) .deck-dots{display:none}

/* header adapts to light panels */
.site-header.on-light .brand-text{color:var(--ink)}
.site-header.on-light .brand-mark{filter:none}
.main-nav.on-light .nav-link,.main-nav.on-light .nav-link .nl-label{color:var(--text-soft)}
.main-nav.on-light .nav-link:hover,.main-nav.on-light .nav-link:hover .nl-label,
.main-nav.on-light .nav-link.active,.main-nav.on-light .nav-link.active .nl-label{color:var(--ink)}
.main-nav.on-light .nl-num{color:var(--teal)}

/* ===== desktop (≥1080px): primary nav becomes a vertical left rail ===== */
@media (min-width:900px){
  .nav-toggle{display:none}
  .brand{margin-right:auto}
  /* one capsule holding the links + the CTA (musavir-style) */
  .nav-group{display:flex;align-items:center;gap:3px;padding:5px 5px 5px 10px;border-radius:100px;
    background:rgba(6,22,28,.62);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px) saturate(1.3)}
  .main-nav{position:static;transform:none;flex-direction:row;align-items:center;gap:2px;
    width:auto;height:auto;padding:0;border:none;border-radius:0;background:none;backdrop-filter:none;opacity:1;visibility:visible}
  .main-nav.open{transform:none}
  .nav-link{flex-direction:row;align-items:center;gap:0;padding:7px 11px;border-radius:100px;
    transition:color .25s var(--ease),background .25s var(--ease)}
  .nav-link:hover{transform:none;background:rgba(255,255,255,.08)}
  .nav-link.active{background:rgba(255,255,255,.13)}
  .nav-link .nl-num{display:none}
  .nav-link .nl-label{font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--text-invert-soft)}
  .nav-link:hover .nl-label,.nav-link.active .nl-label{color:#fff}
  .main-nav.on-light .nav-link .nl-label{color:var(--text-invert-soft)}
  .main-nav.on-light .nav-link:hover .nl-label,.main-nav.on-light .nav-link.active .nl-label{color:#fff}
  .header-actions{margin:0;gap:0}
}
.deck-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:40px}
.deck-foot-nav a{font-size:13px;font-weight:500;letter-spacing:.02em;color:rgba(226,242,246,.8);
  padding:9px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.deck-foot-nav a:hover{color:#fff;border-color:var(--accent);background:rgba(31,151,176,.16);transform:translateY(-2px)}

/* scroll cue on the deck */
.deck-cue{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(226,242,246,.55);pointer-events:none}
.deck-cue .scroll-line{width:1px;height:38px;background:linear-gradient(var(--accent),transparent);position:relative;overflow:hidden}
.deck-cue .scroll-line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:#fff;animation:scrolldot 1.8s ease-in-out infinite}
.panel-light ~ .deck-cue,.deck-cue.on-light{color:rgba(13,42,49,.5)}

@media (max-width:900px){
  .deck-dots{right:14px;gap:11px}
  /* on stacked (phone/tablet) project panels the side dots overlap content — hide them there */
  body.site-decked .deck-dots{display:none}
}
@media (max-width:640px){
  .panel-index{left:24px;bottom:70px}
  .panel-title{font-size:clamp(2rem,10vw,3.2rem)}
}

/* ===================================================================
   IT / tech network canvas
   =================================================================== */
.tech-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.panel-light .panel-inner{position:relative;z-index:2}
/* soft fade so the network reads behind the text */
#panel-connected .panel-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(66% 62% at 50% 48%,rgba(246,250,251,.92),rgba(246,250,251,.5) 62%,transparent 82%)}

/* ===================================================================
   Code stream canvas (live coding · every language)
   =================================================================== */
.code-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
#panel-longterm .panel-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(56% 52% at 50% 50%,rgba(4,20,26,.9),rgba(4,20,26,.55) 66%,transparent)}

/* ===================================================================
   Floating flagship badge (Nutrox seal · uploadable image)
   =================================================================== */
.flagship-seal{position:fixed;top:86px;right:22px;z-index:58;display:block;line-height:0;
  width:clamp(156px,17vw,220px);border-radius:16px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));
  transition:transform .45s var(--ease),filter .45s var(--ease);animation:sealIn 1s .5s both}
.flagship-seal img{width:100%;height:auto;display:block;border-radius:14px}
.flagship-seal .seal-go{position:absolute;top:-9px;left:-9px;width:27px;height:27px;border-radius:50%;
  display:grid;place-items:center;background:var(--nx);color:#0a1a06;
  box-shadow:0 5px 16px rgba(138,212,0,.5);transform:scale(.6);opacity:0;transition:.35s var(--ease)}
.flagship-seal:hover{transform:translateY(-4px) scale(1.03);
  filter:drop-shadow(0 18px 38px rgba(138,212,0,.3))}
.flagship-seal:hover .seal-go{transform:scale(1);opacity:1}
@keyframes sealIn{from{opacity:0;transform:translateX(26px) scale(.9)}to{opacity:1;transform:none}}
@media (max-width:820px){.flagship-seal{width:128px;top:74px;right:14px}}
@media (max-width:560px){.flagship-seal{width:104px;top:68px;right:10px}
  .flagship-seal .seal-go{width:22px;height:22px;top:-7px;left:-7px}}

/* ===================================================================
   HERO EMBLEM · alien head + radiating signal waves ("AlienWave")
   =================================================================== */
.hero-emblem{position:relative;width:204px;height:204px;margin:0 auto 36px;display:grid;place-items:center}
.hero-emblem::before{content:"";position:absolute;width:182px;height:182px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,151,176,.30),transparent 66%);filter:blur(2px);z-index:0}
.emblem-mark{width:96px;height:96px;object-fit:contain;position:relative;z-index:4;
  filter:drop-shadow(0 0 26px rgba(31,151,176,.8));animation:emblemFloat 5s ease-in-out infinite}
.emblem-ring{position:absolute;width:102px;height:102px;border-radius:50%;
  border:1.5px solid rgba(31,151,176,.55);z-index:1;opacity:0;animation:emblemWave 3.3s ease-out infinite}
.emblem-ring:nth-of-type(2){animation-delay:1.1s}
.emblem-ring:nth-of-type(3){animation-delay:2.2s}
.emblem-spin{position:absolute;width:160px;height:160px;border-radius:50%;z-index:1;
  border:1px dashed rgba(31,151,176,.30);animation:spin 16s linear infinite}
.emblem-spin::after{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px var(--accent)}
.emblem-scan{position:absolute;width:144px;height:144px;border-radius:50%;z-index:2;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(31,151,176,.22) 40deg,transparent 70deg);
  animation:spin 6s linear infinite}
@keyframes emblemWave{0%{transform:scale(.7);opacity:.7}80%{opacity:.12}100%{transform:scale(2.7);opacity:0}}
@keyframes emblemFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .emblem-ring,.emblem-spin,.emblem-scan,.emblem-mark{animation:none}
  .emblem-ring{opacity:.3}
}
@media (max-width:640px){.hero-emblem{width:166px;height:166px;margin-bottom:28px}.emblem-mark{width:80px;height:80px}}

/* page builder: left-aligned content */
.proj-stage .pblock{text-align:left}
.proj-stage .pblock .proj-brand,.proj-stage .pblock .proj-tags,.proj-stage .pblock .proj-stores,.proj-stage .pblock .proj-hero-foot{justify-content:flex-start}
.proj-stage .pblock-eyebrow .proj-eyebrow{justify-content:flex-start}

/* ── Social / contact buttons (About founder card + team cards) ───────── */
.social-links{display:flex;flex-wrap:wrap;gap:8px}
.social-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  color:#cfe9ee;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  transition:transform .2s ease,color .2s ease,border-color .2s ease,background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.social-btn svg{width:17px;height:17px;display:block}
.social-btn:hover{
  color:#fff;border-color:var(--accent-2,#3fbcc9);
  background:rgba(63,188,201,.16);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(63,188,201,.22);
}
/* official brand colours so each icon reads as the real logo */
.social-btn.is-linkedin{background:#0a66c2;border-color:#0a66c2;color:#fff}
.social-btn.is-twitter{background:#000;border-color:#000;color:#fff}
.social-btn.is-instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:transparent;color:#fff}
.social-btn.is-github{background:#171515;border-color:#171515;color:#fff}
.social-btn.is-website{background:#0f8a7e;border-color:#0f8a7e;color:#fff}
.social-btn.is-email{background:#ea4335;border-color:#ea4335;color:#fff}
.social-btn.is-linkedin:hover{background:#0a66c2;border-color:#fff;box-shadow:0 6px 16px rgba(10,102,194,.5)}
.social-btn.is-twitter:hover{background:#000;border-color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.social-btn.is-instagram:hover{border-color:#fff;box-shadow:0 6px 16px rgba(220,39,67,.5)}
.social-btn.is-github:hover{background:#171515;border-color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.social-btn.is-website:hover{background:#0f8a7e;border-color:#fff;box-shadow:0 6px 16px rgba(15,138,126,.5)}
.social-btn.is-email:hover{background:#ea4335;border-color:#fff;box-shadow:0 6px 16px rgba(234,67,53,.5)}
/* founder card — sits under name/title inside the glass card */
.about-card-foot .card-socials{margin-top:12px}
/* team cards — centred under the bio */
.team-card .team-socials{margin-top:14px;justify-content:center}

/* ── Our Projects deck: one scroll = next project ─────────────────────────
   A single scroll advances to the next project panel (see deck.js). The
   project heroes use the page-builder stage, which is already sized to fit
   one screen, so no extra layout overrides are needed here. */

/* ===== Legal pages (Privacy / Terms) ===== */
.legal-article{max-width:780px;margin:0 auto}
.legal-article .legal-h{font-family:'Outfit',sans-serif;font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--white);margin:30px 0 10px;letter-spacing:-.005em}
.legal-article .legal-h:first-child{margin-top:0}
.legal-article p{color:var(--text-invert-soft);line-height:1.75;margin:0 0 14px;font-size:1.02rem}
.legal-article a{color:var(--accent-2)}
.legal-article .legal-foot{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.95rem}
.foot-legal-links a{color:inherit;text-decoration:none;opacity:.9}
.foot-legal-links a:hover{color:var(--accent-2);opacity:1}

/* ===== Cookie consent banner ===== */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;max-width:720px;margin:0 auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  background:rgba(8,22,28,.96);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:14px 18px;box-shadow:0 20px 50px rgba(0,0,0,.5);
  transform:translateY(140%);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.cookie-bar.show{transform:translateY(0);opacity:1}
.cookie-bar p{margin:0;color:var(--text-invert-soft);font-size:.9rem;line-height:1.5;flex:1;min-width:220px}
.cookie-bar p a{color:var(--accent-2)}
.cookie-accept{flex:none;background:var(--accent-2,#3fbcc9);color:#06181d;border:none;border-radius:100px;
  padding:10px 24px;font-weight:700;font-size:.9rem;cursor:pointer;transition:transform .2s,filter .2s}
.cookie-accept:hover{transform:translateY(-2px);filter:brightness(1.08)}