/* DROOU.AI — Design System v2 · "The Eyes" · dark premium */
:root{
  --bg:#030507; --blue:#2aa6ff; --cyan:#00d4ff; --white:#f4f7fb;
  --dim:#8b96a5; --card:#0a0f16; --line:rgba(42,166,255,.14);
  --gold:#c9a24b; --gold2:#e8c56a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:'Poppins',sans-serif;overflow-x:hidden}
::selection{background:var(--blue);color:#fff}
html{scrollbar-width:thin;scrollbar-color:var(--cyan) var(--bg)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--blue),var(--cyan));border-radius:10px;border:2px solid var(--bg);box-shadow:0 0 8px rgba(0,212,255,.35)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--cyan),var(--blue));box-shadow:0 0 14px rgba(0,212,255,.6)}
::-webkit-scrollbar-corner{background:var(--bg)}
img{max-width:100%}
.grad{background:linear-gradient(100deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.en-sub{display:block;font-family:'Poppins';font-size:.5em;font-weight:400;color:var(--dim);letter-spacing:0;margin-top:10px}
.lic{width:30px;height:30px;stroke:var(--cyan);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(0,212,255,.5))}

/* textures */
.zebra{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;background-size:cover;background-repeat:no-repeat;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cdefs%3E%3Cpattern id='p' width='110' height='110' patternUnits='userSpaceOnUse' patternTransform='rotate(108)'%3E%3Crect width='46' height='110' fill='white'/%3E%3C/pattern%3E%3Cfilter id='w' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.017' numOctaves='2' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='120'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='-150' y='-150' width='1100' height='1100' fill='url(%23p)' filter='url(%23w)'/%3E%3C/svg%3E")}
.grain{position:fixed;inset:-100px;z-index:60;pointer-events:none;opacity:.05;animation:grain 8s steps(10) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-40px,20px)}30%{transform:translate(30px,-30px)}50%{transform:translate(-20px,40px)}70%{transform:translate(40px,10px)}90%{transform:translate(-30px,-20px)}}

/* nav + wordmark */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 4vw;backdrop-filter:blur(14px);background:rgba(3,5,7,.62);border-bottom:1px solid rgba(255,255,255,.05)}
.wordmark{font-size:30px;font-weight:400;letter-spacing:.5px;display:flex;align-items:center;gap:2px;text-decoration:none;color:var(--white)}
.wordmark .ring{flex:0 0 auto;width:21px;height:21px;border-radius:50%;border:3.5px solid var(--cyan);box-shadow:0 0 12px rgba(0,212,255,.9),inset 0 0 7px rgba(0,212,255,.7);margin:0 1px;position:relative;top:2px;animation:ringPulse 3.2s ease-in-out infinite}
.wordmark .ring:nth-child(3){animation-delay:.4s}
.wordmark.small{font-size:24px}
.wordmark.small .ring{width:17px;height:17px;border-width:3px}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{color:var(--dim);text-decoration:none;font-size:14.5px;font-weight:500;font-family:'Poppins',sans-serif;letter-spacing:.3px;transition:color .25s}
.nav-links a:hover{color:var(--white)}
.nav-links a.active{color:var(--cyan)}
.kdj-nav img{height:36px;display:block}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 32px;border-radius:100px;font-family:'Poppins',sans-serif;font-size:17px;font-weight:600;letter-spacing:.3px;text-decoration:none;transition:all .3s cubic-bezier(.3,1,.4,1);border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#000 !important;box-shadow:0 0 24px rgba(42,166,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(42,166,255,.6)}
.btn-ghost{border-color:rgba(255,255,255,.18);color:var(--white);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(0,212,255,.25)}
.btn-nav{padding:9px 20px;font-size:13.5px}
.navToggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0;margin-left:12px}
.navToggle span{display:block;width:100%;height:2px;background:var(--white);border-radius:2px;transition:transform .3s,opacity .3s}
.navToggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navToggle.open span:nth-child(2){opacity:0}
.navToggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1020px){
  .navToggle{display:flex}
  .nav-links{position:fixed;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(3,5,7,.97);backdrop-filter:blur(14px);max-height:0;overflow:hidden;transition:max-height .35s ease;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-links.open{max-height:80vh;overflow-y:auto}
  .nav-links a.nl{display:block;width:100%;padding:14px 6vw;border-bottom:1px solid rgba(255,255,255,.06);font-size:16px;box-sizing:border-box}
  .nav-links .btn-nav{width:calc(100% - 12vw);justify-content:center;margin:12px 6vw}
}

/* store + qr */
.store{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);text-decoration:none;color:var(--white);transition:all .3s}
.store:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(0,212,255,.2);transform:translateY(-2px)}
.store .si{font-size:24px}
.store .st{text-align:left;line-height:1.15}
.store .st small{display:block;font-size:10px;color:var(--dim);letter-spacing:.5px;text-transform:uppercase;font-family:'Poppins'}
.store .st b{font-size:15px;font-weight:600}
.qr-box{display:inline-flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--card)}
.qr-box .qr{background:#fff;padding:6px;border-radius:8px}
.qr-box span{font-size:11px;color:var(--dim);font-family:'Poppins';letter-spacing:.4px}

/* ===== HERO — Moonshot-style lens marquee ===== */
.hero{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 5vw 60px}
.lensbar{position:relative;width:min(1300px,96vw);height:240px;margin-bottom:4px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ltrack{position:absolute;top:50%;left:0;white-space:nowrap;line-height:1;will-change:transform;
  font-weight:700;font-size:clamp(64px,9vw,118px);letter-spacing:1px;
  color:transparent;-webkit-text-stroke:1.5px rgba(150,215,255,.5);transform-origin:0 50%}
.ltrack .zap{-webkit-text-stroke:0;color:rgba(0,212,255,.35);font-size:.55em;vertical-align:.14em;padding:0 26px}
.lens{position:absolute;top:50%;width:184px;height:184px;margin-top:-92px;border-radius:50%;overflow:hidden;
  backdrop-filter:blur(1.5px) brightness(1.12) saturate(1.25);
  box-shadow:0 0 0 2.5px rgba(200,238,255,.9),0 0 0 4px rgba(0,140,220,.35),
   0 0 38px rgba(0,212,255,.65),0 0 110px rgba(0,212,255,.22),
   inset 0 0 34px rgba(0,212,255,.3),inset 0 0 4px rgba(255,255,255,.55)}
.lens.l1{left:calc(50% - 210px)}
.lens.l2{left:calc(50% + 26px)}
.lens .ltrack{-webkit-text-stroke:0;
  background:linear-gradient(105deg,#e8f8ff,#7fd4ff 40%,#2aa6ff 70%,#00d4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(0,212,255,.5))}
.lens::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.3),transparent 40%),
   radial-gradient(circle at 72% 82%,rgba(0,212,255,.16),transparent 52%),
   radial-gradient(circle at 50% 50%,transparent 58%,rgba(0,60,100,.22) 92%)}
.lens::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
  background:
   radial-gradient(2px 2px at 24% 66%,rgba(255,255,255,.9),transparent 60%),
   radial-gradient(1.5px 1.5px at 70% 20%,rgba(190,240,255,.85),transparent 60%),
   radial-gradient(1.8px 1.8px at 82% 60%,rgba(255,255,255,.7),transparent 60%),
   radial-gradient(1.3px 1.3px at 36% 26%,rgba(160,230,255,.8),transparent 60%);
  filter:blur(.4px);animation:speckTw 4s ease-in-out infinite alternate}
@keyframes speckTw{from{opacity:.5}to{opacity:1}}
@media(max-width:680px){
  .lensbar{height:170px}
  .lens{width:126px;height:126px;margin-top:-63px}
  .lens.l1{left:calc(50% - 146px)}
  .lens.l2{left:calc(50% + 20px)}
}
@keyframes spin{to{transform:rotate(360deg)}}

.badge{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:100px;font-family:'Poppins',sans-serif;font-size:14.5px;font-weight:600;color:var(--cyan);border:1px solid rgba(0,212,255,.3);background:rgba(0,212,255,.05);margin-bottom:24px;letter-spacing:.3px}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
h1{font-family:'Poppins',sans-serif;font-size:clamp(40px,6.5vw,88px);font-weight:400;line-height:1.05;letter-spacing:.5px}
.sub{margin-top:20px;color:var(--dim);font-family:'Poppins';font-size:clamp(16px,1.8vw,21px);line-height:1.6}
.cta-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;justify-content:center;align-items:center}
.store-row{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap;justify-content:center;align-items:center}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--dim);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;animation:cueFloat 2.4s ease-in-out infinite}
@keyframes cueFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* marquee */
.marquee{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;background:rgba(10,15,22,.4);white-space:nowrap}
.marquee-track{display:inline-flex;gap:56px;animation:scrollX 30s linear infinite;padding-right:56px}
@keyframes scrollX{to{transform:translateX(-50%)}}
.marquee span{color:var(--dim);font-size:15px;letter-spacing:1px;display:inline-flex;align-items:center;gap:14px;font-weight:500}
.marquee .mring{width:11px;height:11px;border-radius:50%;border:2.5px solid var(--cyan);box-shadow:0 0 8px rgba(0,212,255,.7);display:inline-block}

/* sections */
section{position:relative;z-index:2;padding:110px 6vw;max-width:1280px;margin:0 auto;scroll-margin-top:90px}
.eyebrow{color:var(--cyan);font-family:'Poppins',sans-serif;font-size:14.5px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:'';width:26px;height:1.5px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
h2{font-family:'Poppins',sans-serif;font-size:clamp(30px,4vw,54px);font-weight:400;letter-spacing:.5px;line-height:1.12;max-width:880px}
.sec-sub{color:var(--dim);font-family:'Poppins';font-size:15.5px;margin-top:16px;max-width:640px;line-height:1.7}
.reveal{opacity:0;transform:translateY(44px);transition:all .9s cubic-bezier(.2,.8,.2,1)}
.reveal.on{opacity:1;transform:translateY(0)}

/* ===== AutoFetchoo cinematic v2 ===== */
.af-stage{margin-top:70px;position:relative}
.af-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--cyan) 15%,var(--cyan) 85%,transparent);opacity:.25;transform:translateX(-50%)}
.af-step{display:flex;align-items:center;gap:5vw;margin-bottom:90px;opacity:0;transform:translateY(50px);transition:all 1s cubic-bezier(.2,.8,.2,1)}
.af-step.on{opacity:1;transform:translateY(0)}
.af-step:nth-child(even){flex-direction:row-reverse}
.af-step .visual{flex:1;display:flex;justify-content:center}
.af-step .text{flex:1}
.af-step .text h3{font-size:26px;font-weight:600;margin-bottom:12px}
.af-step .text p{color:var(--dim);font-family:'Poppins';font-size:15px;line-height:1.7}
@media(max-width:820px){.af-step{flex-direction:column!important;gap:26px;text-align:center;margin-bottom:60px}.af-line{display:none}}

/* step 1 — premium envelope */
.env{width:150px;height:110px;position:relative}
.env .body{position:absolute;inset:0;border:2px solid var(--cyan);border-radius:14px;background:linear-gradient(180deg,rgba(0,212,255,.08),rgba(10,15,22,.9));box-shadow:0 0 30px rgba(0,212,255,.25),inset 0 0 20px rgba(0,212,255,.06)}
.env .flap{position:absolute;top:0;left:0;right:0;height:0;border-left:73px solid transparent;border-right:73px solid transparent;border-top:52px solid rgba(0,212,255,.35);border-radius:14px 14px 0 0;transform-origin:top;transition:transform 1s .4s cubic-bezier(.2,.8,.2,1)}
.af-step.on .env .flap{transform:rotateX(160deg)}
.env .doc{position:absolute;left:18px;right:18px;bottom:12px;height:56px;background:linear-gradient(180deg,#eef4f9,#c9d6e2);border-radius:8px;transition:transform 1s .6s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:6px;padding:10px 12px}
.env .doc i{height:4px;border-radius:4px;background:#8fa6b8;display:block}
.env .doc i:nth-child(2){width:70%}
.af-step.on .env .doc{transform:translateY(-34px)}
.env .ping{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);animation:pingP 1.8s ease-out infinite}
@keyframes pingP{0%{transform:scale(.8)}50%{transform:scale(1.15)}100%{transform:scale(.8)}}

/* step 2 — scan ring with specks + beam */
.scanring{width:150px;height:150px;border-radius:50%;position:relative;
  border:8px solid rgba(80,200,255,.95);
  box-shadow:0 0 30px rgba(0,212,255,.6),inset 0 0 22px rgba(0,212,255,.35);
  animation:ringPulse 3.2s ease-in-out infinite}
.scanring::before{content:'';position:absolute;inset:8px;border-radius:50%;
  background:
   radial-gradient(2px 2px at 30% 30%,rgba(255,255,255,.95),transparent 60%),
   radial-gradient(1.6px 1.6px at 66% 24%,rgba(190,240,255,.9),transparent 60%),
   radial-gradient(2px 2px at 74% 62%,rgba(255,255,255,.85),transparent 60%),
   radial-gradient(1.4px 1.4px at 40% 74%,rgba(160,230,255,.9),transparent 60%),
   radial-gradient(1.8px 1.8px at 52% 48%,rgba(255,255,255,.8),transparent 60%);
  filter:blur(.4px);animation:speckTw 4s ease-in-out infinite alternate}
.scanring::after{content:'';position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 78%,rgba(0,212,255,.55) 92%,transparent 100%);
  animation:spin 3.5s linear infinite;mix-blend-mode:screen}

/* step 3 — entry card */
.entrycard{width:150px;height:120px;border:2px solid var(--cyan);border-radius:16px;background:linear-gradient(180deg,rgba(0,212,255,.07),rgba(10,15,22,.95));box-shadow:0 0 30px rgba(0,212,255,.25);padding:16px;display:flex;flex-direction:column;gap:10px}
.entrycard i{height:9px;border-radius:6px;background:rgba(0,212,255,.28);display:block;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.entrycard i:nth-child(1){transition-delay:.35s}
.entrycard i:nth-child(2){transition-delay:.55s;width:78%}
.entrycard i:nth-child(3){transition-delay:.75s;width:60%}
.entrycard i:nth-child(4){transition-delay:.95s;width:86%}
.af-step.on .entrycard i{transform:scaleX(1)}

/* step 4 — tick glow */
.tickwrap{width:150px;height:150px;border-radius:50%;border:8px solid rgba(80,200,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 0 26px rgba(0,212,255,.45),inset 0 0 20px rgba(0,212,255,.2)}
.tickwrap svg{width:70px;height:70px;stroke:var(--cyan);stroke-width:9;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:110;stroke-dashoffset:110;transition:stroke-dashoffset 1s .4s ease}
.af-step.on .tickwrap svg{stroke-dashoffset:0;filter:drop-shadow(0 0 14px rgba(0,212,255,.95))}
.af-step.on .tickwrap{animation:tickGlow 2.4s .9s ease-in-out infinite}
@keyframes tickGlow{0%,100%{box-shadow:0 0 26px rgba(0,212,255,.45),inset 0 0 20px rgba(0,212,255,.2)}50%{box-shadow:0 0 60px rgba(0,212,255,.95),inset 0 0 30px rgba(0,212,255,.45)}}
.af-end{text-align:center;padding:40px 0 0}
.af-end h3{font-size:clamp(26px,3.4vw,44px);font-weight:700;letter-spacing:-1px}

/* ===== MUSEUM v2 — heritage ===== */
.museum{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.museum{grid-template-columns:1fr}}
.case{border-radius:18px;padding:0;text-align:center;position:relative;overflow:hidden;
  border:2px solid #6d5423;
  background:linear-gradient(180deg,#241a0c,#160f06 55%,#1d1409);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.5),inset 0 0 0 8px rgba(212,175,55,.35),0 18px 50px rgba(0,0,0,.6)}
.case .inner{padding:46px 28px 38px;position:relative}
.case .inner::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:72%;height:120px;background:radial-gradient(ellipse at top,rgba(255,214,130,.22),transparent 72%);pointer-events:none}
.case .inner::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 42%,transparent 55%);pointer-events:none}
.case .obj{height:110px;display:flex;align-items:center;justify-content:center;margin:14px 0 30px}
.case .obj svg{width:96px;height:96px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))}
.case .pedestal{height:12px;margin:0 34px;border-radius:3px 3px 8px 8px;background:linear-gradient(180deg,#5a4420,#2c2010);box-shadow:0 6px 14px rgba(0,0,0,.55)}
.case .plaque{display:inline-block;margin-top:24px;background:linear-gradient(120deg,#8a6a2f,#e8c56a 45%,#8a6a2f);color:#1c1405;font-size:11.5px;font-weight:700;letter-spacing:1.2px;padding:8px 20px;border-radius:4px;font-family:'Poppins',sans-serif;border:1px solid #5c4514;text-transform:uppercase}
.case p{color:#a8977a;font-family:'Poppins',sans-serif;font-style:italic;font-size:13.5px;margin-top:16px;line-height:1.65;padding:0 8px 8px}
.case.live{border-color:rgba(0,212,255,.5);background:linear-gradient(180deg,#04121c,#030b12 55%,#051520);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.5),inset 0 0 0 8px rgba(0,212,255,.3),0 0 46px rgba(0,212,255,.14)}
.case.live .inner::before{background:radial-gradient(ellipse at top,rgba(0,212,255,.25),transparent 72%)}
.case.live .pedestal{background:linear-gradient(180deg,#0a3a52,#052030);box-shadow:0 0 18px rgba(0,212,255,.35)}
.case.live .plaque{background:linear-gradient(120deg,var(--blue),var(--cyan));color:#02131f;border-color:#0a5a78;font-family:'Poppins';font-style:normal}
.case.live p{color:var(--dim);font-family:'Poppins';font-style:normal}
.zhead{position:relative;display:inline-block}
.zhead img{height:130px;display:block;filter:drop-shadow(0 0 18px rgba(0,212,255,.25))}
/* heritage corner ornaments */
.case .inner .orn{position:absolute;width:34px;height:34px;pointer-events:none;opacity:.8}
.case .inner .orn::before,.case .inner .orn::after{content:'';position:absolute;background:linear-gradient(90deg,#8a6a2f,#e8c56a)}
.case .inner .orn::before{width:100%;height:2px;top:0}
.case .inner .orn::after{width:2px;height:100%;top:0}
.case .inner .orn i{position:absolute;width:7px;height:7px;border-radius:50%;border:1.5px solid #e8c56a;top:6px}
.orn.tl{top:12px;left:12px}
.orn.tl::after{left:0}.orn.tl i{left:6px}
.orn.tr{top:12px;right:12px;transform:scaleX(-1)}
.orn.tr::after{left:0}.orn.tr i{left:6px}
.case.live .inner .orn::before,.case.live .inner .orn::after{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.case.live .inner .orn i{border-color:var(--cyan)}
/* scroll-glow for icons */
@keyframes icoGlow{0%{box-shadow:0 0 0 rgba(0,212,255,0)}45%{box-shadow:0 0 34px rgba(0,212,255,.85),inset 0 0 18px rgba(0,212,255,.3)}100%{box-shadow:0 0 16px rgba(0,212,255,.2)}}
.way.on .wic{animation:icoGlow 1.5s .25s ease both}
.b.on .bic{animation:icoGlow 1.5s calc(var(--d,0)*140ms + .25s) ease both}
.s3.on .sic{animation:icoGlow 1.5s .25s ease both}
.ways .way:nth-child(2){transition-delay:.12s}
.ways .way:nth-child(3){transition-delay:.24s}
/* featured news cards */
.newscards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:56px}
.nc{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:36px 30px;transition:all .4s;position:relative;overflow:hidden}
.nc::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1.5px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.nc:hover{transform:translateY(-6px);border-color:rgba(0,212,255,.45);box-shadow:0 16px 44px rgba(0,0,0,.5)}
.nc .mast{font-family:'Poppins',sans-serif;font-weight:700;font-size:24px;color:#fff;border-bottom:2.5px solid var(--cyan);padding-bottom:8px;display:inline-block}
.nc.gn .mast{font-family:'Poppins';font-weight:600}
.nc p{color:var(--dim);font-family:'Poppins';font-size:13.5px;line-height:1.65;margin-top:16px}
.nc .rd{color:var(--cyan);font-size:13px;font-weight:600;margin-top:16px;display:inline-block}
.zhead .eye{position:absolute;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle,#bff0ff 20%,#00d4ff 60%,transparent 75%);box-shadow:0 0 6px 1px rgba(0,212,255,.55);opacity:0;transition:opacity .8s .5s}
.case.on .zhead .eye{opacity:1}
.zhead .eL{left:18.4%;top:43%}
.zhead .eR{right:18.4%;top:43%}

/* ===== 3 ways v2 ===== */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:56px}
.way{background:linear-gradient(180deg,rgba(0,212,255,.05),var(--card) 45%);border:1px solid var(--line);border-radius:22px;padding:38px 30px;text-align:center;transition:all .4s;position:relative;overflow:hidden}
.way::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1.5px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.way:hover{transform:translateY(-6px);border-color:rgba(0,212,255,.45);box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(0,212,255,.1)}
.way .wic{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;border:2px solid rgba(0,212,255,.5);display:flex;align-items:center;justify-content:center;background:rgba(0,212,255,.06);box-shadow:0 0 22px rgba(0,212,255,.2),inset 0 0 14px rgba(0,212,255,.08)}
.way .wic svg{width:34px;height:34px}
.way h3{font-size:18.5px;font-weight:600;margin-bottom:8px}
.way p{color:var(--dim);font-family:'Poppins';font-size:13.5px;line-height:1.6}

/* ===== AutoFetchoo page — 4-step cards ===== */
.af-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:56px}
.af-card{background:linear-gradient(180deg,rgba(0,212,255,.05),var(--card) 45%);border:1px solid var(--line);border-radius:22px;padding:32px 28px;position:relative;overflow:hidden;transition:all .4s;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.af-card::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1.5px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.af-card:hover{transform:translateY(-6px);border-color:rgba(0,212,255,.45);box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(0,212,255,.1)}
.af-num{width:42px;height:42px;border-radius:50%;border:2px solid rgba(0,212,255,.5);display:flex;align-items:center;justify-content:center;background:rgba(0,212,255,.06);box-shadow:0 0 20px rgba(0,212,255,.18),inset 0 0 12px rgba(0,212,255,.08);font-family:'Poppins';font-size:17px;font-weight:700;color:var(--cyan)}
.af-card h3{font-size:18px;font-weight:600}
.af-card p{color:var(--dim);font-family:'Poppins';font-size:13.5px;line-height:1.65;flex:1}
.af-tag{font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--cyan);background:rgba(0,212,255,.08);border:1px solid var(--line);padding:6px 14px;border-radius:100px;white-space:nowrap}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:60px}
.b{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:36px 32px;transition:all .5s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.b:hover{border-color:var(--line);transform:translateY(-4px)}
.b h3{font-size:19px;font-weight:600;margin-bottom:10px}
.b p{color:var(--dim);font-family:'Poppins';font-size:14px;line-height:1.6}
.b .bic{width:54px;height:54px;border-radius:14px;border:1.5px solid rgba(0,212,255,.4);background:rgba(0,212,255,.06);display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 0 16px rgba(0,212,255,.15)}
.b-3{grid-column:span 3}.b-2{grid-column:span 2}
.bento .b.reveal{transition-delay:calc(var(--d,0)*90ms)}
@media(max-width:900px){.b-3,.b-2{grid-column:span 6}}

/* kdj */
.kdj-wrap{margin-top:60px;display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:50px;overflow:hidden;position:relative}
@media(max-width:880px){.kdj-wrap{grid-template-columns:1fr;text-align:center;padding:36px 26px}}
.kdj-host{width:min(250px,58vw);margin:0 auto;filter:drop-shadow(0 0 34px rgba(0,212,255,.3));border-radius:18px}
.kdj-wrap h3{font-size:clamp(24px,3vw,36px);font-weight:700;letter-spacing:-.5px}
.kdj-logo-s{height:74px;margin-bottom:18px;filter:drop-shadow(0 0 18px rgba(0,212,255,.4))}
.kdj-points{display:flex;gap:26px;flex-wrap:wrap;margin:22px 0 30px}
.kdj-points span{color:var(--dim);font-family:'Poppins';font-size:14px;display:inline-flex;gap:8px;align-items:center}
@media(max-width:880px){.kdj-points{justify-content:center}}

/* ===== plans on home ===== */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px;margin-top:60px}
.plan{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:0 0 30px;transition:all .4s;display:flex;flex-direction:column;position:relative;overflow:hidden}
.plan:hover{transform:translateY(-6px);border-color:var(--line)}
.plan.pop{border-color:rgba(0,212,255,.5);box-shadow:0 0 40px rgba(0,212,255,.12)}
.plan .tag{position:absolute;top:14px;right:14px;z-index:2;font-size:11px;color:#000;background:linear-gradient(120deg,var(--blue),var(--cyan));padding:5px 14px;border-radius:100px;font-weight:700;letter-spacing:.5px}
.plan .avatar{height:210px;overflow:hidden;background:#dfe7ee}
.plan .avatar img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.plan:hover .avatar img{transform:scale(1.05)}
.plan .pbody{padding:24px 26px 0;display:flex;flex-direction:column;flex:1}
.plan .pn{font-size:23px;font-weight:700}
.plan .pl{color:var(--dim);font-family:'Poppins';font-size:12.5px;margin-top:3px}
.plan .pp{margin:14px 0 2px;font-size:29px;font-weight:600;letter-spacing:-1px}
.plan .pp small{font-size:13px;color:var(--dim);font-weight:400}
.plan .pm{color:var(--dim);font-family:'Poppins';font-size:12px;margin-bottom:16px}
.plan ul{list-style:none;flex:1}
.plan li{font-family:'Poppins';font-size:13px;color:#c3ccd6;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;gap:8px;align-items:flex-start}
.plan li::before{content:'✓';color:var(--cyan);font-weight:700;flex-shrink:0}
.plan li.afx{color:var(--cyan);font-weight:600}
.plan li.afx::before{content:'⚡'}
.plan .btn{margin:22px 26px 0;justify-content:center}

/* ===== news strip ===== */
.news-feat{margin-top:56px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:44px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
@media(max-width:760px){.news-feat{grid-template-columns:1fr;text-align:center;padding:32px 24px}}
.news-feat .mast{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,40px);color:#fff;border-bottom:3px solid var(--cyan);padding-bottom:8px;white-space:nowrap}
.news-feat p{color:var(--dim);font-family:'Poppins';font-size:15px;line-height:1.7}
.news-marq{margin-top:26px;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.news-track{display:inline-flex;gap:64px;animation:scrollX 26s linear infinite;padding-right:64px}
.news-track span{font-family:'Poppins',sans-serif;font-size:19px;color:#b9c4d0;display:inline-flex;align-items:center;gap:14px}
.news-track .nd{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

/* ===== video testimonial marquee ===== */
.vid-marq{margin-top:56px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vid-track{display:inline-flex;gap:26px;animation:scrollX 48s linear infinite;padding-right:26px}
.vid-track:hover{animation-play-state:paused}
.vcard{width:300px;height:180px;flex-shrink:0;border-radius:18px;border:1px solid var(--line);position:relative;overflow:hidden;background:linear-gradient(135deg,#0b1420,#060b12 60%,#0a1a26)}
.vcard::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(0,212,255,.14),transparent 55%)}
.vcard .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;background:rgba(0,212,255,.15);backdrop-filter:blur(4px);transition:all .3s}
.vcard:hover .play{background:rgba(0,212,255,.45);box-shadow:0 0 26px rgba(0,212,255,.6)}
.vcard .play::after{content:'';margin-left:4px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.vcard .vl{position:absolute;left:16px;bottom:14px;font-family:'Poppins';font-size:12.5px;color:var(--dim);letter-spacing:.4px}
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:30px}
.t{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:34px 30px}
.t .stars{color:#ffc83d;letter-spacing:3px;margin-bottom:16px}
.t p{color:#c3ccd6;font-family:'Poppins';font-size:14.5px;line-height:1.7;font-style:italic}
.t b{display:block;margin-top:18px;font-size:14px;color:var(--white)}
.t small{color:var(--dim);font-family:'Poppins';font-size:12px}

/* security strip */
.sec3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:56px}
.s3{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px 30px;text-align:center}
.s3 .sic{width:60px;height:60px;margin:0 auto 18px;border-radius:50%;border:2px solid rgba(0,212,255,.5);display:flex;align-items:center;justify-content:center;background:rgba(0,212,255,.06);box-shadow:0 0 20px rgba(0,212,255,.18)}
.s3 h3{font-size:17px;font-weight:600;margin-bottom:8px}
.s3 p{color:var(--dim);font-family:'Poppins';font-size:13.5px;line-height:1.6}

/* ===== about page — mission + contact cards ===== */
.about-box{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}
@media(max-width:820px){.about-box{grid-template-columns:1fr}}
.ab{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:40px 36px;position:relative;overflow:hidden}
.ab::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1.5px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.ab h3{font-size:23px;font-weight:600;letter-spacing:-.3px;margin-bottom:18px}
.ab p{color:var(--dim);font-size:15.5px;line-height:1.8;margin-bottom:14px}
.ab p:last-of-type{margin-bottom:0}
.hl{color:var(--cyan);font-weight:600}
.ab-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ab-fact{font-size:12.5px;font-weight:600;color:var(--cyan);background:rgba(0,212,255,.06);border:1px solid var(--line);padding:7px 15px;border-radius:100px}
.ab.contact{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ab.contact .abic{width:56px;height:56px;border-radius:50%;border:2px solid rgba(0,212,255,.5);display:flex;align-items:center;justify-content:center;background:rgba(0,212,255,.06);box-shadow:0 0 20px rgba(0,212,255,.18);margin-bottom:20px}
.ab.contact h3{margin-bottom:10px}
.ab.contact p{margin-bottom:4px}
.ab.contact .mail{color:var(--cyan);text-decoration:none;font-size:14.5px;font-weight:500;margin-top:6px;display:inline-block}
.ab.contact .btn{margin-top:22px}

/* final */
.final{text-align:center;padding:150px 6vw 120px}
.final h2{margin:26px auto 14px;max-width:780px}
.final .sec-sub{margin:0 auto 40px}
.mini-eyes{display:flex;gap:14px;justify-content:center}
.mini-eyes .me{width:44px;height:44px;border-radius:50%;border:5px solid var(--cyan);box-shadow:0 0 26px rgba(0,212,255,.8),inset 0 0 14px rgba(0,212,255,.5);animation:ringPulse 3s ease-in-out infinite}
.mini-eyes .me:last-child{animation-delay:.45s}
@keyframes ringPulse{0%,100%{box-shadow:0 0 10px rgba(0,212,255,.6),inset 0 0 8px rgba(0,212,255,.4)}50%{box-shadow:0 0 30px rgba(0,212,255,1),inset 0 0 16px rgba(0,212,255,.8)}}

/* footer + socials v2 */
footer{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.06);padding:60px 6vw 40px;font-family:'Poppins'}
.f-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media(max-width:800px){.f-grid{grid-template-columns:1fr}}
.f-grid h4{font-family:'Poppins',sans-serif;font-size:16px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:16px;color:var(--white)}
.f-grid a{display:block;color:var(--dim);font-family:'Poppins',sans-serif;text-decoration:none;font-size:15px;padding:5px 0;transition:color .25s}
.f-grid a:hover{color:var(--cyan)}
.f-grid a.wordmark{display:flex !important;font-size:24px !important}
.f-grid a.soc{display:flex !important}
.socials{display:flex;gap:14px;margin-top:22px}
.soc{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;transition:all .3s}
.soc svg{width:20px;height:20px;fill:#c3ccd6;transition:fill .3s}
.soc:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(0,212,255,.45);transform:translateY(-3px)}
.soc:hover svg{fill:var(--cyan)}
.f-bottom{max-width:1280px;margin:44px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--dim);font-size:12.5px}

.wa{position:fixed;right:22px;bottom:22px;z-index:55;width:54px;height:54px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.5);text-decoration:none;transition:transform .3s}
.wa svg{width:28px;height:28px;fill:#fff}
.wa:hover{transform:scale(1.1)}