/* ══════════════════════════════════════════════════════════════
   weforads.css — Main shared stylesheet
   Upload to: /www/wwwroot/weforads.com/weforads.css
   Used by:   index.html  |  weforads-contact.html
══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   1. DESIGN TOKENS
══════════════════════════════════════ */
:root {
  --c:      #00e5ff;
  --c2:     #0066ff;
  --c3:     #7c3aed;
  --c-dim:  rgba(0,229,255,0.1);
  --c-glow: rgba(0,229,255,0.4);
  --c2-glow:rgba(0,102,255,0.3);
  --bg:     #030912;
  --bg2:    #050f1e;
  --bg3:    #071628;
  --white:  #f0f9ff;
  --muted:  #2d5a78;
  --border: rgba(0,229,255,0.12);
  --border2:rgba(0,229,255,0.06);
  --pad:    64px;
  --rad:    12px;
}
@media(max-width:1024px){ :root { --pad: 40px; } }
@media(max-width:640px)  { :root { --pad: 20px; } }

/* ══════════════════════════════════════
   2. RESET & BASE
══════════════════════════════════════ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  {
  background:var(--bg); color:var(--white);
  font-family:'Inter', 'DM Sans', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* ══════════════════════════════════════
   3. NOISE OVERLAY
══════════════════════════════════════ */
body::after {
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.03; mix-blend-mode:overlay;
}

/* ══════════════════════════════════════
   4. CANVAS (particles)
══════════════════════════════════════ */
#bgc { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ══════════════════════════════════════
   6. KEYFRAMES
══════════════════════════════════════ */
@keyframes mBreath {
  0%   { opacity:.65; transform:scale(1);    }
  100% { opacity:1;   transform:scale(1.05); }
}
@keyframes gDrift  { to { background-position:64px 64px; } }
@keyframes scan {
  0%  { top:-2px; opacity:0; } 8%  { opacity:1; }
  92% { opacity:.6; }          100% { top:100%; opacity:0; }
}
@keyframes bFloat {
  0%,100% { transform:translateY(0)    scale(1);    }
  33%     { transform:translateY(-32px) scale(1.05); }
  66%     { transform:translateY(16px)  scale(.97);  }
}
@keyframes blink {
  0%,100% { opacity:1;  transform:scale(1);   }
  50%     { opacity:.15; transform:scale(2);  }
}
@keyframes cFloat {
  0%,100% { transform:translateY(0);  }
  50%     { transform:translateY(-10px); }
}
@keyframes rowUp  { to { transform:translateY(0); } }
@keyframes tickGo { to { transform:translateX(-50%); } }
@keyframes spin   { to { transform:rotate(360deg); }  }
@keyframes orbitR { to { transform:rotate(-360deg); } }
@keyframes fup {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}
@keyframes pulse  {
  0%,100% { opacity:1;  transform:scale(1);   }
  50%     { opacity:.2; transform:scale(1.9); }
}
@keyframes shimmer {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
/* iridescent border cycle */
@keyframes holo {
  0%,100% { border-color:rgba(0,229,255,0.14); }
  33%     { border-color:rgba(0,102,255,0.28);  }
  66%     { border-color:rgba(124,58,237,0.2);  }
}
@keyframes glowPulse {
  0%,100% { box-shadow:0 0 20px rgba(0,229,255,0.12), 0 0 60px rgba(0,229,255,0.04); }
  50%     { box-shadow:0 0 40px rgba(0,229,255,0.3),  0 0 100px rgba(0,102,255,0.08); }
}

/* ══════════════════════════════════════
   7. NAVIGATION
══════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:2000;
  height:72px; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  transition:background .4s, border-color .4s;
}
nav.stuck {
  background:rgba(3,9,18,0.9);
  backdrop-filter:blur(32px) saturate(1.5);
  border-bottom:1px solid var(--border2);
  box-shadow:0 1px 0 rgba(0,229,255,0.04), 0 18px 52px rgba(0,0,0,0.7);
}
nav.solid {
  background:rgba(3,9,18,0.88);
  backdrop-filter:blur(32px) saturate(1.5);
  border-bottom:1px solid var(--border2);
}

/* logo */
.nav-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.nav-logo img { height:36px; width:auto; display:block; }
.nav-logo-fb {
  display:none; font-family:'Bebas Neue', sans-serif;
  font-size:22px; letter-spacing:.07em; color:var(--white);
  align-items:center; gap:8px;
}
.nav-logo-fb .wb {
  width:30px; height:30px; border-radius:6px;
  background:linear-gradient(135deg, var(--c), var(--c2));
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; color:var(--bg);
}
.nav-logo-fb span { color:var(--c); }

/* desktop links */
.nav-links { display:flex; align-items:center; gap:34px; list-style:none; }
.nav-links a {
  color:rgba(240,249,255,0.6); text-decoration:none;
  font-family:'Syne', sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  transition:color .25s; position:relative;
}
.nav-links a:not(.pill)::after {
  content:''; position:absolute; bottom:-4px; left:0; right:100%;
  height:1px;
  background:linear-gradient(90deg, var(--c), var(--c2));
  transition:right .35s cubic-bezier(.4,0,.2,1);
}
.nav-links a:not(.pill):hover { color:var(--white); }
.nav-links a:not(.pill):hover::after { right:0; }

/* pill CTA */
.pill {
  background:linear-gradient(135deg, var(--c), var(--c2)) !important;
  color:var(--bg) !important;
  padding:12px 28px !important; border-radius:8px !important;
  font-family:'Inter', 'DM Sans', sans-serif !important;
  font-size:12.5px !important; font-weight:700 !important;
  letter-spacing:.06em !important; overflow:hidden;
  position:relative !important;
  transition:transform .25s, box-shadow .3s !important;
}
.pill::before { display:none; }
.pill:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 0 44px rgba(0,229,255,0.5), 0 0 88px rgba(0,102,255,0.18) !important;
}
.pill::after { display:none !important; }

/* outline variant for Login button — distinct from filled Get Started */
.pill.pill-outline {
  background:transparent !important;
  border:2px solid rgba(0,229,255,.55) !important;
  color:#00e5ff !important;
  text-shadow:0 0 12px rgba(0,229,255,.3);
}
.pill.pill-outline::before { display:none; }
.pill.pill-outline:hover {
  background:rgba(0,229,255,.1) !important;
  border-color:#00e5ff !important;
  color:#fff !important;
  text-shadow:0 0 16px rgba(0,229,255,.5);
}

/* back link */
.nav-back {
  display:flex; align-items:center; gap:8px;
  color:rgba(240,249,255,0.42); text-decoration:none;
  font-family:'Syne', sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; transition:color .25s;
}
.nav-back:hover { color:var(--c); }
.nav-back svg   { transition:transform .25s; }
.nav-back:hover svg { transform:translateX(-3px); }

/* hamburger */
.nav-burger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px; z-index:2100;
}
.nav-burger span {
  display:block; width:24px; height:2px;
  background:var(--white); border-radius:2px;
  transition:transform .35s, opacity .35s, width .35s;
}
.nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; width:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.nav-drawer {
  position:fixed; top:0; right:-100%; width:min(320px,85vw); height:100vh;
  background:rgba(5,15,30,0.98); backdrop-filter:blur(32px);
  border-left:1px solid var(--border2); z-index:2050;
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 40px 40px;
  transition:right .4s cubic-bezier(.16,1,.3,1);
}
.nav-drawer.open { right:0; }
.nav-drawer ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.nav-drawer ul li a {
  display:block; padding:14px 0;
  color:rgba(240,249,255,0.55); text-decoration:none;
  font-family:'Syne', sans-serif; font-size:14px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  border-bottom:1px solid var(--border2);
  transition:color .2s, padding-left .2s;
}
.nav-drawer ul li a:hover { color:var(--c); padding-left:8px; }
.nav-drawer .d-pill {
  display:block; margin-top:28px;
  background:linear-gradient(135deg, var(--c), var(--c2)); color:var(--bg) !important;
  text-align:center; padding:16px !important; border-radius:8px;
  font-family:'Inter', 'DM Sans', sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
}
.nav-overlay {
  display:none; position:fixed; inset:0; z-index:2040;
  background:rgba(0,0,0,0.55);
}
.nav-overlay.open { display:block; }

@media(max-width:860px) {
  .nav-links  { display:none; }
  .nav-burger { display:flex; }
}

/* ══════════════════════════════════════
   8. SHARED BACKGROUND ELEMENTS
══════════════════════════════════════ */
.blob { position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); z-index:1; }

/* ══════════════════════════════════════
   9. SHARED BUTTONS
══════════════════════════════════════ */
.btn-prime {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--c), var(--c2));
  color:var(--bg);
  font-family:'Inter', 'DM Sans', sans-serif; font-weight:700;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:17px 40px; border-radius:8px;
  text-decoration:none; display:inline-block;
  transition:transform .25s, box-shadow .3s;
  white-space:nowrap;
}
.btn-prime::before { display:none; }
.btn-prime:hover {
  transform:translateY(-3px);
  box-shadow:0 0 60px rgba(0,229,255,0.5), 0 0 120px rgba(0,102,255,0.18), 0 24px 48px rgba(0,0,0,0.4);
}

.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  color:rgba(240,249,255,0.6); text-decoration:none;
  font-family:'Inter', 'DM Sans', sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  border:1.5px solid rgba(240,249,255,0.18);
  padding:16px 28px; border-radius:8px;
  transition:all .28s; white-space:nowrap;
}
.btn-ghost:hover { color:var(--white); border-color:rgba(0,229,255,0.32); gap:16px; }
.btn-ghost svg   { transition:transform .25s; }
.btn-ghost:hover svg { transform:translateX(4px); }

/* ══════════════════════════════════════
   10. SCROLL REVEAL
══════════════════════════════════════ */
.rv { opacity:0; transform:translateY(32px); transition:opacity .8s ease, transform .8s ease; }
.rv.on { opacity:1; transform:none; }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }

/* ══════════════════════════════════════
   11. SECTION BASE
══════════════════════════════════════ */
.sec     { padding:110px var(--pad); position:relative; overflow:hidden; }
.sec-alt { background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }
.sec-mid { background:var(--bg2); }

/* glowing divider lines */
.sec::before, .sec-alt::before {
  content:''; display:block; height:1px; width:100%;
  background:linear-gradient(90deg,
    transparent,
    rgba(0,229,255,0.06)  15%,
    rgba(0,229,255,0.22)  50%,
    rgba(0,102,255,0.12)  65%,
    rgba(0,229,255,0.06)  85%,
    transparent);
  margin-bottom:0;
}

.lbl {
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Syne', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--c); margin-bottom:18px;
}
.lbl::before {
  content:''; width:28px; height:1px;
  background:linear-gradient(90deg, var(--c), var(--c2));
}
.sh {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(46px,6vw,88px); line-height:.88;
  letter-spacing:.022em; margin-bottom:22px;
}
.sp { font-size:16.5px; font-weight:400; line-height:1.85; color:rgba(240,249,255,0.62); max-width:520px; }

@media(max-width:768px) { .sec { padding:76px var(--pad); } }
@media(max-width:500px) { .sec { padding:58px var(--pad); } }

/* ══════════════════════════════════════
   12. TICKER
══════════════════════════════════════ */
.ticker {
  position:relative; overflow:hidden; z-index:10; padding:15px 0;
  background:rgba(0,229,255,0.015);
  border-top:1px solid rgba(0,229,255,0.06);
  border-bottom:1px solid rgba(0,229,255,0.06);
}
.ticker::before, .ticker::after {
  content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2;
}
.ticker::before { left:0;  background:linear-gradient(90deg, var(--bg), transparent); }
.ticker::after  { right:0; background:linear-gradient(-90deg, var(--bg), transparent); }
.tick-track {
  display:flex; width:max-content;
  animation:tickGo 28s linear infinite;
}
.tick-item {
  display:flex; align-items:center; gap:14px; padding:0 32px;
  white-space:nowrap; font-family:'Syne', sans-serif; font-size:10px;
  font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.tick-gem {
  width:4px; height:4px; background:var(--c); border-radius:50%;
  box-shadow:0 0 6px var(--c); flex-shrink:0;
}

/* ══════════════════════════════════════
   13. HERO (homepage only)
══════════════════════════════════════ */
.hero {
  position:relative; min-height:100vh;
  display:grid; grid-template-columns:1.1fr 0.9fr;
  align-items:center; gap:0;
  padding:110px var(--pad) 90px; overflow:hidden;
}
.h-bg {
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 70% 90% at 80% 50%, rgba(0,102,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 10% 70%, rgba(0,229,255,0.055) 0%, transparent 50%),
    radial-gradient(ellipse 35% 35% at 95% 10%, rgba(124,58,237,0.05) 0%, transparent 55%);
  animation:mBreath 10s ease-in-out infinite alternate;
}
.h-grid {
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(0,229,255,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.024) 1px, transparent 1px);
  background-size:64px 64px; animation:gDrift 40s linear infinite;
  mask-image:radial-gradient(ellipse 85% 85% at 70% 50%, black 0%, transparent 72%);
}
.h-scan {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(0,229,255,0.03) 15%,
    rgba(0,229,255,0.65) 50%,
    rgba(0,102,255,0.2)  65%,
    rgba(0,229,255,0.03) 85%,
    transparent 100%);
  z-index:4; animation:scan 8s ease-in-out infinite;
  box-shadow:0 0 14px rgba(0,229,255,0.45);
}
.ba { width:820px; height:820px; right:-200px; top:-200px; background:rgba(0,102,255,0.05);  animation:bFloat 14s ease-in-out infinite; }
.bb { width:600px; height:600px; left:-40px;   bottom:-130px; background:rgba(0,229,255,0.04); animation:bFloat 18s ease-in-out infinite reverse; }
.bc { width:360px; height:360px; right:30%;    top:54%;       background:rgba(124,58,237,0.04); animation:bFloat 10s ease-in-out infinite; animation-delay:-4s; }

.h-left { position:relative; z-index:10; }
.h-tag {
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 20px; margin-bottom:36px;
  background:rgba(0,229,255,0.04); border:1px solid rgba(0,229,255,0.18);
  border-radius:100px; font-family:'Syne', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--c);
  opacity:0; animation:fup .7s ease .15s forwards;
}
.h-tag-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--c); box-shadow:0 0 8px var(--c);
  animation:pulse 2s ease infinite;
}
.h-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(66px,9vw,144px);
  line-height:.85; letter-spacing:.02em; margin-bottom:26px;
}
.h-title .row { display:block; overflow:hidden; }
.h-title .row span { display:block; transform:translateY(112%); animation:rowUp 1s cubic-bezier(.16,1,.3,1) forwards; }
.h-title .row:nth-child(1) span { animation-delay:.32s; }
.h-title .row:nth-child(2) span {
  animation-delay:.48s;
  background:linear-gradient(90deg, var(--c) 0%, #00b4ff 50%, var(--c2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 50px rgba(0,229,255,0.25));
}
.h-title .row:nth-child(3) span { animation-delay:.64s; -webkit-text-stroke:1.5px rgba(240,249,255,0.16); color:transparent; }

.h-sub {
  font-size:17px; font-weight:400; line-height:1.8;
  color:rgba(240,249,255,0.65); max-width:500px;
  margin-bottom:48px; opacity:0; animation:fup .9s ease .88s forwards;
}
.h-sub strong { font-weight:600; color:rgba(240,249,255,0.92); }
.h-btns {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:52px; opacity:0; animation:fup .9s ease 1.04s forwards;
}
.h-stats {
  display:flex; gap:0; flex-wrap:wrap;
  border-top:1px solid rgba(0,229,255,0.08);
  padding-top:34px; opacity:0; animation:fup .9s ease 1.2s forwards;
}
.h-stat { padding:0 30px 0 0; margin-right:30px; border-right:1px solid rgba(0,229,255,0.08); }
.h-stat:last-child { border-right:none; margin-right:0; padding-right:0; }
.h-stat-n {
  font-family:'Bebas Neue', sans-serif; font-size:40px; line-height:1;
  background:linear-gradient(135deg, #fff 20%, var(--c) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(0,229,255,0.3));
}
.h-stat-l { font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:5px; }

/* hero right / lottie frame */
.h-right { position:relative; z-index:10; display:flex; align-items:center; justify-content:center; }
.h-lframe { position:relative; width:520px; height:520px; display:flex; align-items:center; justify-content:center; }
.orbit { position:absolute; border-radius:50%; }

/* iridescent orbit rings using gradient border trick */
.o1 {
  inset:-20px;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, rgba(0,229,255,0.18), rgba(0,102,255,0.1), rgba(124,58,237,0.12)) border-box;
  border:1px solid transparent; animation:spin 26s linear infinite;
}
.o2 {
  inset:-55px;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(225deg, rgba(0,102,255,0.14), rgba(0,229,255,0.08), rgba(124,58,237,0.1)) border-box;
  border:1px solid transparent; animation:orbitR 40s linear infinite;
}
.o3 {
  inset:-96px;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, rgba(124,58,237,0.1), rgba(0,229,255,0.07), rgba(0,102,255,0.08)) border-box;
  border:1px solid transparent; animation:spin 56s linear infinite;
}
.o1::before, .o2::before, .o3::before {
  content:''; position:absolute; border-radius:50%;
  top:50%; left:-2px; transform:translateY(-50%);
}
.o1::before { width:8px;  height:8px;  background:var(--c);  box-shadow:0 0 14px var(--c), 0 0 28px var(--c); }
.o2::before { width:6px;  height:6px;  background:var(--c2); box-shadow:0 0 12px var(--c2), 0 0 24px var(--c2); }
.o3::before { width:4px;  height:4px;  background:rgba(124,58,237,0.9); box-shadow:0 0 10px rgba(124,58,237,0.9); }

.h-lottie-glow {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at center, rgba(0,102,255,0.1) 0%, rgba(0,229,255,0.05) 40%, transparent 68%);
  animation:mBreath 5s ease-in-out infinite alternate;
}
.mchip {
  position:absolute; z-index:20;
  display:flex; align-items:center; gap:12px;
  background:rgba(5,15,30,0.88); border:1px solid rgba(0,229,255,0.14);
  border-radius:12px; padding:12px 17px;
  backdrop-filter:blur(20px); animation:cFloat 4s ease-in-out infinite;
  transition:border-color .5s; animation:holo 7s ease-in-out infinite, cFloat 4s ease-in-out infinite;
}
.mc-a { top:7%;   right:-5%;  animation-delay:0s; }
.mc-b { bottom:13%; right:-9%; animation-delay:1.6s; }
.mc-c { bottom:24%; left:-11%; animation-delay:2.9s; }
.chip-ic {
  width:34px; height:34px; border-radius:8px;
  background:linear-gradient(135deg, rgba(0,229,255,0.1), rgba(0,102,255,0.08));
  border:1px solid rgba(0,229,255,0.16);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.chip-v  { font-family:'Bebas Neue', sans-serif; font-size:22px; color:var(--c); line-height:1; }
.chip-l  { font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:2px; }

@media(max-width:960px) {
  .hero    { grid-template-columns:1fr; padding-top:100px; padding-bottom:70px; min-height:auto; }
  .h-right { display:none; }
  .h-sub   { max-width:100%; }
  .h-title { font-size:clamp(60px,13vw,108px); }
}
@media(max-width:520px) {
  .h-title { font-size:clamp(50px,16vw,86px); }
  .h-btns  { flex-direction:column; align-items:flex-start; gap:12px; }
  .btn-prime, .btn-ghost { width:100%; text-align:center; justify-content:center; }
  .h-stat-n { font-size:32px; }
  .h-stat   { padding:0 20px 0 0; margin-right:20px; }
}

/* ══════════════════════════════════════
   14. PROCESS SECTION
══════════════════════════════════════ */
.proc-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; margin-top:68px;
  border:1px solid var(--border2); border-radius:var(--rad); overflow:hidden;
  background:rgba(0,229,255,0.04);
  position:relative;
}
/* connector line */
.proc-grid::after {
  content:''; position:absolute;
  top:52px; left:calc(12.5% + 44px); right:calc(12.5% + 44px);
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(0,229,255,0.07) 10%,
    rgba(0,229,255,0.18) 50%,
    rgba(0,102,255,0.1)  70%,
    transparent);
  pointer-events:none; z-index:1;
}
@media(max-width:768px){ .proc-grid::after { display:none; } }

.pc {
  background:var(--bg2); padding:44px 30px 40px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  transition:background .35s;
}
/* animated top bar on hover */
.pc::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--c), var(--c2), transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.pc:hover::before { transform:scaleX(1); }
.pc::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at top center, rgba(0,229,255,0.06) 0%, transparent 65%);
  opacity:0; transition:opacity .4s;
}
.pc:hover::after  { opacity:1; }
.pc:hover { background:rgba(0,229,255,0.02); }
.pc-shine { display:none; } /* replaced by ::before */

.pc-num {
  width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(0,229,255,0.22);
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne', sans-serif; font-size:11px; font-weight:700;
  color:var(--c); letter-spacing:.04em; margin-bottom:20px;
  background:rgba(0,229,255,0.04); flex-shrink:0;
  transition:background .3s, border-color .3s, box-shadow .3s;
  position:relative; z-index:1;
}
.pc:hover .pc-num {
  background:rgba(0,229,255,0.1); border-color:var(--c);
  box-shadow:0 0 22px rgba(0,229,255,0.22);
}
.pc-lot { width:96px; height:96px; margin-left:-8px; margin-bottom:8px; position:relative; z-index:1; }
.pc h3  { font-family:'Syne', sans-serif; font-weight:700; font-size:16px; margin-bottom:10px; position:relative; z-index:1; line-height:1.3; }
.pc p   { font-size:14.5px; font-weight:400; line-height:1.75; color:rgba(240,249,255,0.58); position:relative; z-index:1; }

/* hover lift */
.pc { transition:background .35s, transform .35s cubic-bezier(.22,1,.36,1); }
.pc:hover { transform:translateY(-4px); }

@media(max-width:900px) { .proc-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px) { .proc-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════
   15. KPI BAR
══════════════════════════════════════ */
.kpi-bar {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; border:1px solid var(--border2); border-radius:var(--rad);
  overflow:hidden; background:var(--border2); margin-bottom:64px;
}
.kpi-c {
  background:var(--bg2); padding:26px 36px;
  display:flex; align-items:center; gap:20px;
  transition:background .3s;
}
.kpi-c:hover { background:rgba(0,229,255,0.02); }
.kpi-v {
  font-family:'Bebas Neue', sans-serif; font-size:52px; line-height:1; flex-shrink:0;
  background:linear-gradient(135deg, #fff 15%, var(--c) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px rgba(0,229,255,0.28));
}
.kpi-lbl-h { font-family:'Syne', sans-serif; font-weight:700; font-size:13.5px; }
.kpi-lbl-s { font-size:12px; color:var(--muted); margin-top:4px; font-weight:300; }

@media(max-width:768px) { .kpi-bar { grid-template-columns:1fr; } .kpi-c { padding:20px 24px; } .kpi-v { font-size:42px; } }

/* ══════════════════════════════════════
   16. FEATURES SECTION
══════════════════════════════════════ */
.feat-hdr  { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; margin-bottom:16px; }
.feat-body { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-top:36px; }
.f-list { display:flex; flex-direction:column; gap:4px; }
.fi {
  padding:22px 26px;
  border-left:2px solid transparent; border-radius:0 8px 8px 0;
  cursor:default;
  transition:border-color .28s, background .28s, padding-left .3s, transform .28s;
}
.fi.on, .fi:hover {
  border-left-color:var(--c);
  background:rgba(0,229,255,0.04);
  padding-left:30px; transform:translateX(2px);
}
.fi h4 { font-family:'Syne', sans-serif; font-weight:700; font-size:15px; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.ftag  { font-size:9px; letter-spacing:.1em; font-weight:700; padding:3px 8px; background:rgba(0,229,255,0.1); color:var(--c); border-radius:4px; text-transform:uppercase; }
.fi p  { font-size:13px; font-weight:300; line-height:1.78; color:rgba(240,249,255,0.42); }

.f-right      { display:flex; align-items:center; justify-content:center; position:relative; }
.f-right-glow { position:absolute; inset:0; background:radial-gradient(circle at center, rgba(0,102,255,0.08) 0%, rgba(0,229,255,0.04) 45%, transparent 68%); border-radius:16px; }
.fsc {
  position:absolute; z-index:20;
  background:rgba(5,15,30,0.9); border:1px solid rgba(0,229,255,0.14);
  border-radius:10px; padding:13px 20px; backdrop-filter:blur(16px);
  animation:holo 8s ease-in-out infinite;
}
.fsc.tl { top:9%;   left:-7%;  animation:holo 8s ease-in-out infinite, cFloat 4.5s ease-in-out infinite; }
.fsc.br { bottom:11%; right:-5%; animation:holo 8s ease-in-out infinite, cFloat 5.2s ease-in-out infinite; animation-delay:2.2s; }
.fsc-v  { font-family:'Bebas Neue', sans-serif; font-size:28px; color:var(--c); line-height:1; }
.fsc-l  { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.f-lottie { width:440px; height:440px; position:relative; z-index:1; }

@media(max-width:1000px) { .feat-hdr { grid-template-columns:1fr; } .feat-body { grid-template-columns:1fr; gap:44px; } .f-right { display:none; } }

/* ══════════════════════════════════════
   17. IMPACT SECTION
══════════════════════════════════════ */
.imp-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; margin-top:72px;
  border:1px solid var(--border2); border-radius:var(--rad);
  overflow:hidden; background:var(--border2);
}
.ic { background:var(--bg2); padding:56px 44px; position:relative; overflow:hidden; transition:background .35s, transform .35s; }
.ic-glow { position:absolute; inset:0; background:radial-gradient(ellipse at bottom left, rgba(0,102,255,0.1) 0%, transparent 58%); opacity:0; transition:opacity .4s; }
.ic:hover { background:rgba(0,229,255,0.02); transform:translateY(-4px); }
.ic:hover .ic-glow { opacity:1; }
.ic::before { content:''; position:absolute; top:0; right:0; width:52px; height:52px; background:linear-gradient(225deg, rgba(0,229,255,0.07) 0%, transparent 60%); }
.ic-lot { width:60px; height:60px; margin-left:-5px; margin-bottom:16px; position:relative; z-index:1; }
.ic-val {
  font-family:'Bebas Neue', sans-serif; font-size:90px; line-height:.84;
  display:block; margin-bottom:16px; position:relative; z-index:1;
  background:linear-gradient(135deg, #fff 15%, var(--c) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 28px rgba(0,229,255,0.22));
}
.ic-val sup { font-size:38px; vertical-align:super; line-height:0; }
.ic h4 { font-family:'Syne', sans-serif; font-weight:700; font-size:16px; margin-bottom:10px; position:relative; z-index:1; }
.ic p  { font-size:13px; font-weight:300; line-height:1.78; color:rgba(240,249,255,0.42); position:relative; z-index:1; }

@media(max-width:900px) { .imp-grid { grid-template-columns:1fr; } .ic { padding:38px 32px; } .ic-val { font-size:68px; } }

/* ══════════════════════════════════════
   18. TESTIMONIALS
══════════════════════════════════════ */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:72px; }
.tc {
  background:rgba(5,15,30,0.65);
  border:1px solid rgba(0,229,255,0.1);
  border-radius:var(--rad); padding:34px;
  position:relative; overflow:hidden;
  backdrop-filter:blur(14px);
  transition:transform .38s cubic-bezier(.34,1.2,.64,1), border-color .35s, box-shadow .35s;
  animation:holo 9s ease-in-out infinite;
}
.tc:hover {
  transform:translateY(-10px);
  border-color:rgba(0,229,255,0.24);
  box-shadow:0 32px 80px rgba(0,0,0,0.55), 0 0 60px rgba(0,102,255,0.07);
}
.tc::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(ellipse at top left, rgba(0,229,255,0.05) 0%, transparent 55%);
  opacity:0; transition:opacity .4s;
}
.tc:hover::before { opacity:1; }

/* replace tc-q with more refined quote mark */
.tc-q {
  position:absolute; top:-12px; right:22px;
  font-family:'Bebas Neue', sans-serif; font-size:140px; line-height:1;
  background:linear-gradient(135deg, var(--c), rgba(0,102,255,0.2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 0 18px rgba(0,229,255,0.15));
}
.tc-stars { display:flex; gap:3px; margin-bottom:18px; }
.tc-stars span { color:var(--c); font-size:13px; }
.tc-text { font-size:14.5px; font-weight:300; line-height:1.86; color:rgba(240,249,255,0.68); margin-bottom:26px; font-style:italic; position:relative; z-index:1; }
.tc-auth { display:flex; align-items:center; gap:13px; position:relative; z-index:1; }
.tc-av {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, rgba(0,229,255,0.14), rgba(0,102,255,0.1));
  border:1px solid rgba(0,229,255,0.18); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne', sans-serif; font-weight:700; font-size:12px; color:var(--c);
}
.tc-name { font-family:'Syne', sans-serif; font-weight:700; font-size:14px; }
.tc-role { font-size:11px; color:var(--muted); margin-top:2px; }

@media(max-width:900px) { .testi-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:580px) { .testi-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════
   19. WHY STRIP
══════════════════════════════════════ */
.why-strip {
  padding:80px var(--pad);
  background:var(--bg);
  position:relative; overflow:hidden;
}
.why-strip::before {
  content:''; display:block; height:1px; width:100%;
  background:linear-gradient(90deg,
    transparent,
    rgba(0,229,255,0.06) 15%,
    rgba(0,229,255,0.22) 50%,
    rgba(0,102,255,0.1)  65%,
    rgba(0,229,255,0.06) 85%,
    transparent);
  margin-bottom:0;
}
.why-strip::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 50% 100% at 0%   50%, rgba(0,229,255,0.028) 0%, transparent 55%),
    radial-gradient(ellipse 50% 100% at 100% 50%, rgba(0,102,255,0.028) 0%, transparent 55%);
  pointer-events:none;
}
.why-grid {
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px;
  border:1px solid var(--border2); border-radius:var(--rad);
  overflow:hidden; background:var(--border2);
  position:relative; z-index:2;
}
.why-card {
  background:var(--bg); padding:40px 30px;
  transition:background .3s; position:relative; overflow:hidden;
}
.why-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--c), var(--c2), transparent);
  transform:scaleX(0); transition:transform .4s; transform-origin:center;
}
.why-card:hover { background:rgba(0,229,255,0.02); }
.why-card:hover::after { transform:scaleX(1); }
.why-icon  { font-size:30px; margin-bottom:18px; display:block; filter:drop-shadow(0 0 10px rgba(0,229,255,0.3)); }
.why-title { font-family:'Syne', sans-serif; font-weight:700; font-size:14px; margin-bottom:10px; color:var(--white); }
.why-desc  { font-size:13px; font-weight:300; line-height:1.82; color:rgba(240,249,255,0.4); }

@media(max-width:800px) { .why-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px) { .why-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════
   20. PARTNERS
══════════════════════════════════════ */
.partners {
  background:var(--bg2);
  border-top:1px solid var(--border2); border-bottom:1px solid var(--border2);
  padding:56px var(--pad); text-align:center;
}
.p-lbl { font-family:'Syne', sans-serif; font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:36px; }
.p-row { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.p-nm  {
  font-family:'Syne', sans-serif; font-weight:800; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(240,249,255,0.1);
  padding:10px 20px;
  border:1px solid rgba(240,249,255,0.05);
  border-radius:8px;
  transition:color .28s, background .28s, border-color .28s, transform .28s, box-shadow .28s;
  cursor:default;
}
.p-nm:hover {
  color:rgba(240,249,255,0.65);
  background:rgba(0,229,255,0.04);
  border-color:rgba(0,229,255,0.22);
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,0.35), 0 0 20px rgba(0,229,255,0.08);
}

@media(max-width:500px) { .p-row { gap:10px; } .p-nm { font-size:11px; padding:8px 14px; } }

/* ══════════════════════════════════════
   21. FAQ SECTION
══════════════════════════════════════ */
.faq-sec {
  padding:110px var(--pad);
  background:var(--bg2);
  position:relative;
}
.faq-sec::before {
  content:''; display:block; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(0,229,255,0.06) 15%,
    rgba(0,229,255,0.22) 50%,
    rgba(0,102,255,0.1)  65%,
    rgba(0,229,255,0.06) 85%,
    transparent);
}
.faq-wrap { max-width:820px; margin:0 auto; }
.faq-hdr  { text-align:center; margin-bottom:60px; }
.faq-item {
  border-bottom:1px solid rgba(0,229,255,0.06);
  overflow:hidden;
  border-radius:8px; margin-bottom:4px;
  transition:background .25s;
}
.faq-item:first-of-type { border-top:1px solid rgba(0,229,255,0.06); }
.faq-item.open { background:rgba(0,229,255,0.02); }
.faq-q {
  width:100%; background:none; border:none; cursor:pointer; color:var(--white);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 8px; text-align:left;
  font-family:'Syne', sans-serif; font-size:15px; font-weight:700;
  transition:color .25s;
}
.faq-q:hover { color:var(--c); }
.faq-icon {
  width:30px; height:30px; flex-shrink:0;
  border:1px solid rgba(0,229,255,0.2); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; color:var(--c);
  transition:transform .38s, background .25s, border-color .25s, box-shadow .25s;
}
.faq-item.open .faq-icon {
  transform:rotate(45deg);
  background:rgba(0,229,255,0.08);
  border-color:var(--c);
  box-shadow:0 0 16px rgba(0,229,255,0.18);
}
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .45s cubic-bezier(.4,0,.2,1), padding .35s;
  padding:0;
}
.faq-item.open .faq-a { max-height:300px; padding-bottom:24px; }
.faq-a p { font-size:14.5px; font-weight:300; line-height:1.9; color:rgba(240,249,255,0.5); margin:0; padding:0 8px; }

/* ══════════════════════════════════════
   22. CTA SECTION
══════════════════════════════════════ */
.cta-sec {
  position:relative; overflow:hidden;
  padding:150px var(--pad); text-align:center; background:var(--bg);
}
.cta-blob {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 65% at 50% 55%,
    rgba(0,102,255,0.08) 0%,
    rgba(0,229,255,0.04) 40%,
    transparent 70%);
  animation:mBreath 9s ease-in-out infinite alternate;
}
.cta-lines {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,229,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.018) 1px, transparent 1px);
  background-size:52px 52px; animation:gDrift 28s linear infinite;
  mask-image:radial-gradient(ellipse 65% 65% at 50% 55%, black 0%, transparent 80%);
}
.cta-topbar {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:600px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,102,255,0.4), var(--c), rgba(0,102,255,0.4), transparent);
}
.cta-topbar::after {
  content:''; position:absolute; top:-42px; left:50%; transform:translateX(-50%);
  width:220px; height:84px;
  background:radial-gradient(ellipse, rgba(0,229,255,0.15) 0%, transparent 70%);
}
.cta-in { position:relative; z-index:1; }
.cta-lot { display:flex; justify-content:center; margin-bottom:4px; }
.cta-ey {
  font-family:'Syne', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--c);
  margin-bottom:20px; display:block;
}
.cta-h {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(58px,10vw,138px); line-height:.85;
  letter-spacing:.022em; margin-bottom:26px;
}
.cta-h em {
  font-style:normal;
  background:linear-gradient(135deg, var(--c), var(--c2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 55px rgba(0,229,255,0.3));
}
.cta-sub {
  font-size:17px; font-weight:300; line-height:1.85;
  color:rgba(240,249,255,0.42); max-width:420px; margin:0 auto 52px;
}
.cta-btns { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }

@media(max-width:520px) {
  .cta-sec  { padding:110px var(--pad); }
  .cta-btns { flex-direction:column; align-items:center; }
  .cta-btns .btn-prime, .cta-btns .btn-ghost { width:100%; max-width:320px; text-align:center; justify-content:center; }
}

/* ══════════════════════════════════════
   23. FOOTER
══════════════════════════════════════ */
footer {
  background:var(--bg);
  border-top:1px solid var(--border2);
  padding:64px var(--pad) 36px;
  position:relative;
}
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(0,229,255,0.12) 15%,
    rgba(0,229,255,0.32) 40%,
    rgba(0,102,255,0.2)  60%,
    rgba(0,229,255,0.12) 85%,
    transparent);
}
.ft    { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px; margin-bottom:52px; }
.ft-lw { margin-bottom:18px; }
.ft-lw img { height:32px; width:auto; }
.ft-lfb { display:none; font-family:'Bebas Neue', sans-serif; font-size:24px; letter-spacing:.07em; color:var(--white); }
.ft-lfb span { color:var(--c); }
.ft-tag { font-size:13px; font-weight:300; line-height:1.85; color:var(--muted); max-width:265px; }
.ft-col h6 { font-family:'Syne', sans-serif; font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(240,249,255,0.22); margin-bottom:18px; }
.ft-col ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.ft-col ul a { font-size:13px; font-weight:300; color:var(--muted); text-decoration:none; transition:color .2s; }
.ft-col ul a:hover { color:var(--white); }
.ft-bot { border-top:1px solid var(--border2); padding-top:26px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.ft-copy { font-size:12px; color:rgba(240,249,255,0.16); font-weight:300; }
.ft-soc  { display:flex; gap:8px; }
.fsoc {
  width:34px; height:34px; border:1px solid rgba(0,229,255,0.08); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); text-decoration:none; font-family:'Syne', sans-serif;
  font-weight:800; font-size:10px;
  transition:border-color .22s, color .22s, box-shadow .22s;
}
.fsoc:hover { border-color:var(--c); color:var(--c); box-shadow:0 0 18px rgba(0,229,255,0.14); }

@media(max-width:900px) { .ft { grid-template-columns:1fr 1fr; gap:40px; } }
@media(max-width:500px) { .ft { grid-template-columns:1fr; gap:32px; } .ft-tag { max-width:100%; } }

/* ══════════════════════════════════════
   24. CONTACT PAGE — PAGE WRAPPER
══════════════════════════════════════ */
.page {
  min-height:100vh; position:relative; overflow:hidden;
  padding:100px var(--pad) 80px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:start;
}
.pg-bg {
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 60% 80% at 25% 40%, rgba(0,229,255,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 85% 70%, rgba(0,102,255,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 30% 30% at 10% 90%, rgba(124,58,237,0.03) 0%, transparent 55%);
  animation:mBreath 9s ease-in-out infinite alternate;
}
.pg-grid {
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(0,229,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.022) 1px, transparent 1px);
  background-size:56px 56px; animation:gDrift 30s linear infinite;
  mask-image:radial-gradient(ellipse 80% 80% at 30% 50%, black 5%, transparent 72%);
}
.scan {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent 2%,
    rgba(0,229,255,0.04) 20%,
    rgba(0,229,255,0.55) 50%,
    rgba(0,102,255,0.15) 65%,
    rgba(0,229,255,0.04) 80%,
    transparent 98%);
  z-index:4; animation:scan 8s ease-in-out infinite;
  box-shadow:0 0 12px rgba(0,229,255,0.4);
}
.page .ba { width:600px; height:600px; left:-100px; top:0;    right:auto; background:rgba(0,229,255,0.035); animation:bFloat 13s ease-in-out infinite; }
.page .bb { width:450px; height:450px; right:-80px; bottom:0; left:auto;  background:rgba(0,102,255,0.04);  animation:bFloat 16s ease-in-out infinite reverse; }

/* ══════════════════════════════════════
   25. CONTACT PAGE — INFO PANEL
══════════════════════════════════════ */
.info-panel { position:relative; z-index:10; padding-top:24px; }
.i-tag {
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 20px; margin-bottom:32px;
  background:rgba(0,229,255,0.04); border:1px solid rgba(0,229,255,0.18);
  border-radius:100px; font-family:'Syne', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--c);
  opacity:0; animation:fup .7s ease .1s forwards;
}
.i-tag-dot { width:6px; height:6px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); animation:blink 2s ease infinite; }
.i-title {
  font-family:'Bebas Neue', sans-serif; font-size:clamp(52px,6vw,96px);
  line-height:.87; letter-spacing:.022em; margin-bottom:20px;
  opacity:0; animation:fup .9s ease .25s forwards;
}
.i-title span {
  background:linear-gradient(135deg, var(--c), var(--c2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 40px rgba(0,229,255,0.2));
}
.i-sub {
  font-size:15.5px; font-weight:300; line-height:1.85;
  color:rgba(240,249,255,0.48); margin-bottom:48px; max-width:420px;
  opacity:0; animation:fup .9s ease .4s forwards;
}
.i-sub strong { font-weight:500; color:rgba(240,249,255,0.82); }
.i-benefits { display:flex; flex-direction:column; gap:18px; margin-bottom:52px; opacity:0; animation:fup .9s ease .55s forwards; }
.ib { display:flex; align-items:flex-start; gap:14px; }
.ib-icon {
  width:40px; height:40px; border-radius:8px; flex-shrink:0;
  background:rgba(0,229,255,0.05); border:1px solid rgba(0,229,255,0.16);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; margin-top:1px;
}
.ib-text h5 { font-family:'Syne', sans-serif; font-weight:700; font-size:13.5px; margin-bottom:3px; }
.ib-text p  { font-size:12.5px; font-weight:300; line-height:1.72; color:rgba(240,249,255,0.42); }
.i-stats { display:flex; gap:0; border-top:1px solid rgba(0,229,255,0.08); padding-top:32px; opacity:0; animation:fup .9s ease .7s forwards; }
.is { padding:0 28px 0 0; margin-right:28px; border-right:1px solid rgba(0,229,255,0.08); }
.is:last-child { border-right:none; margin-right:0; padding-right:0; }
.is-n {
  font-family:'Bebas Neue', sans-serif; font-size:38px; line-height:1;
  background:linear-gradient(135deg, #fff, var(--c));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(0,229,255,0.28));
}
.is-l { font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

/* ══════════════════════════════════════
   26. CONTACT PAGE — FORM CARD
══════════════════════════════════════ */
.form-card {
  position:relative; z-index:10;
  background:rgba(5,15,30,0.8);
  border:1px solid rgba(0,229,255,0.12);
  border-radius:var(--rad); padding:50px 46px;
  backdrop-filter:blur(26px);
  box-shadow:0 32px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,229,255,0.04);
  opacity:0; animation:fup 1s ease .3s forwards;
  animation:holo 10s ease-in-out infinite, fup 1s ease .3s forwards;
}
.form-card::before {
  content:''; position:absolute; top:-1px; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg, transparent, var(--c), var(--c2), transparent);
}
.form-card::after {
  content:''; position:absolute; top:-36px; left:50%; transform:translateX(-50%);
  width:260px; height:72px;
  background:radial-gradient(ellipse, rgba(0,229,255,0.12) 0%, transparent 70%);
  pointer-events:none;
}
.fc-h   { font-family:'Bebas Neue', sans-serif; font-size:clamp(30px,3.5vw,44px); line-height:1; letter-spacing:.03em; margin-bottom:6px; }
.fc-sub { font-size:13px; font-weight:300; color:rgba(240,249,255,0.4); margin-bottom:36px; }

/* form fields */
.fg { margin-bottom:20px; }
.fg label { display:block; margin-bottom:8px; font-family:'Syne', sans-serif; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:rgba(240,249,255,0.52); }
.fg label span { color:#ff4466; margin-left:2px; }
.fi-wrap { position:relative; }

input[type=text], input[type=email], input[type=url], input[type=tel] {
  width:100%; height:50px;
  background:rgba(0,229,255,0.025); border:1px solid rgba(0,229,255,0.1);
  border-radius:6px; color:var(--white);
  font-family:'DM Sans', sans-serif; font-size:14px; font-weight:300;
  padding:0 16px; outline:none;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
input[type=text]:focus, input[type=email]:focus,
input[type=url]:focus, input[type=tel]:focus {
  border-color:rgba(0,229,255,0.42); background:rgba(0,229,255,0.04);
  box-shadow:0 0 0 3px rgba(0,229,255,0.06), 0 0 20px rgba(0,229,255,0.06);
}
input::placeholder { color:var(--muted); }

select {
  width:100%; height:50px;
  background:rgba(0,229,255,0.025); border:1px solid rgba(0,229,255,0.1);
  border-radius:6px; color:var(--white);
  font-family:'DM Sans', sans-serif; font-size:14px; font-weight:300;
  padding:0 42px 0 16px; outline:none;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
select:focus { border-color:rgba(0,229,255,0.42); background:rgba(0,229,255,0.04); box-shadow:0 0 0 3px rgba(0,229,255,0.06); }
select option { background:#05101e; color:var(--white); }
.sel-arr { position:absolute; right:16px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); }

.phone-row { display:grid; grid-template-columns:auto 1fr; gap:0; }
.phone-cc  {
  height:50px; padding:0 14px;
  background:rgba(0,229,255,0.03); border:1px solid rgba(0,229,255,0.1);
  border-right:none; border-radius:6px 0 0 6px;
  color:var(--white); font-family:'DM Sans', sans-serif; font-size:13px;
  outline:none; cursor:pointer; appearance:none; -webkit-appearance:none;
  display:flex; align-items:center; gap:6px;
  transition:border-color .3s, background .3s; white-space:nowrap;
}
.phone-cc:focus { border-color:rgba(0,229,255,0.42); background:rgba(0,229,255,0.04); }
.phone-num { border-radius:0 6px 6px 0 !important; }
.cc-wrap   { position:relative; }
.cc-arr    { position:absolute; right:10px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); }
.fg-row    { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.btn-submit {
  width:100%; height:54px; margin-top:8px;
  background:linear-gradient(135deg, var(--c), var(--c2));
  color:var(--bg);
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border:none; border-radius:6px; cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .25s, box-shadow .3s;
}
.btn-submit::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
  transform:translateX(-100%); transition:transform .56s;
}
.btn-submit:hover::before { transform:translateX(100%); }
.btn-submit:hover {
  transform:translateY(-2px);
  box-shadow:0 0 50px rgba(0,229,255,0.45), 0 20px 44px rgba(0,0,0,0.3);
}
.btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none !important; }
.btn-submit .btn-text { position:relative; z-index:1; }
.btn-submit .btn-spin {
  display:none; position:relative; z-index:1; width:18px; height:18px;
  border:2px solid rgba(2,8,16,0.3); border-top-color:var(--bg);
  border-radius:50%; animation:spin .7s linear infinite; margin:0 auto;
}
.btn-submit.loading .btn-text { display:none; }
.btn-submit.loading .btn-spin { display:block; }

.fc-legal   { text-align:center; margin-top:16px; font-size:11.5px; font-weight:300; color:rgba(240,249,255,0.28); }
.fc-legal a { color:rgba(0,229,255,0.55); text-decoration:none; transition:color .2s; }
.fc-legal a:hover { color:var(--c); }

/* ══════════════════════════════════════
   27. TOAST
══════════════════════════════════════ */
.toast {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  display:flex; align-items:center; gap:14px;
  background:rgba(5,15,30,0.96); border:1px solid rgba(0,229,255,0.22);
  border-radius:12px; padding:16px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55), 0 0 32px rgba(0,229,255,0.07);
  backdrop-filter:blur(22px);
  transform:translateY(110px); opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s;
  max-width:360px;
}
.toast.show     { transform:none; opacity:1; }
.toast-icon     { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
.toast-icon.ok  { background:rgba(0,229,255,0.1);  border:1px solid rgba(0,229,255,0.22); }
.toast-icon.err { background:rgba(255,60,80,0.1);  border:1px solid rgba(255,60,80,0.22); }
.toast-h  { font-family:'Syne', sans-serif; font-weight:700; font-size:13px; margin-bottom:3px; }
.toast-p  { font-size:12px; font-weight:300; color:rgba(240,249,255,0.48); }
.toast-close { margin-left:8px; background:none; border:none; cursor:pointer; color:var(--muted); font-size:18px; line-height:1; flex-shrink:0; transition:color .2s; padding:4px; }
.toast-close:hover { color:var(--white); }

/* ══════════════════════════════════════
   28. CONTACT PAGE RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1000px) {
  .page       { grid-template-columns:1fr; gap:48px; padding-top:90px; }
  .info-panel { padding-top:0; }
  .i-title    { font-size:clamp(44px,9vw,76px); }
}
@media(max-width:580px) {
  .form-card { padding:32px 24px; }
  .i-stats   { gap:12px 0; }
  .is        { padding:0 16px 0 0; margin-right:16px; }
}
@media(max-width:500px) {
  .fg-row { grid-template-columns:1fr; }
}

.pg-foot { position:relative; z-index:10; text-align:center; padding-top:32px; font-size:12px; font-weight:300; color:rgba(240,249,255,0.16); grid-column:1/-1; }

/* ══════════════════════════════════════
   29. SCROLL PROGRESS BAR
══════════════════════════════════════ */
#scroll-bar {
  position:fixed; top:0; left:0; height:2px; z-index:9999;
  background:linear-gradient(90deg, var(--c), var(--c2), var(--c3));
  width:0%; pointer-events:none;
  box-shadow:0 0 10px rgba(0,229,255,0.65), 0 0 24px rgba(0,102,255,0.3);
  transition:width .08s linear;
}


/* ══════════════════════════════════════
   30. RTB BID RACE DASHBOARD (Hero)
══════════════════════════════════════ */

/* Orbit rings */
.orbit { position:absolute; border-radius:50%; border:1px solid rgba(0,229,255,0.06); pointer-events:none; top:50%; left:50%; }
.o1 { width:520px; height:520px; transform:translate(-50%,-50%); animation:orbitSpin 24s linear infinite; }
.o2 { width:390px; height:390px; transform:translate(-50%,-50%); animation:orbitSpin 18s linear infinite reverse; border-color:rgba(0,102,255,0.05); }
.o3 { width:260px; height:260px; transform:translate(-50%,-50%); animation:orbitSpin 11s linear infinite; }
@keyframes orbitSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* Dashboard wrapper */
.ng-dash {
  width:100%; max-width:520px;
  display:flex; flex-direction:column; gap:12px;
  animation:rtbIn .9s cubic-bezier(.16,1,.3,1) .55s both;
  position:relative; z-index:2;
}
@keyframes rtbIn { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }

/* Terminal window */
.ng-terminal {
  background:rgba(5,15,30,0.88);
  border:1px solid rgba(0,229,255,0.14);
  border-radius:14px; overflow:hidden;
  backdrop-filter:blur(24px);
  box-shadow:0 0 0 1px rgba(0,229,255,0.08), 0 32px 80px rgba(0,0,0,0.65), inset 0 1px 0 rgba(0,229,255,0.12);
  position:relative;
}
.ng-terminal::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,0.6),transparent); z-index:10;
}
.ng-terminal::after {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,229,255,0.012) 3px,rgba(0,229,255,0.012) 4px);
  pointer-events:none; z-index:10; border-radius:14px;
}

/* Title bar */
.rtb-bar {
  display:flex; align-items:center; gap:8px;
  padding:13px 18px; border-bottom:1px solid rgba(0,229,255,0.07);
  background:rgba(0,229,255,0.02);
}
.rtb-dot { width:11px; height:11px; border-radius:50%; }
.rtb-dot.r { background:#ff5f57; }
.rtb-dot.y { background:#ffbd2e; }
.rtb-dot.g { background:#28ca41; }
.bw-title {
  flex:1; text-align:center;
  font-family:'Syne',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(240,249,255,0.28);
}
.rtb-live { display:flex; align-items:center; gap:6px; font-family:'Syne',sans-serif; font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#00e5ff; }
.rtb-livdot { width:6px; height:6px; border-radius:50%; background:#00e5ff; box-shadow:0 0 6px #00e5ff; animation:rtbpulse 1.5s ease infinite; }
@keyframes rtbpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.12;transform:scale(2.3)} }

/* Race visualizer area */
.race-viz { position:relative; padding:20px 24px 16px; overflow:hidden; }
.race-bg-grid {
  position:absolute; inset:0; opacity:.7; pointer-events:none;
  background-image:linear-gradient(rgba(0,229,255,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(0,229,255,0.04) 1px,transparent 1px);
  background-size:36px 36px;
}
.race-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid rgba(0,229,255,0.1); }
.race-auction-id { font-family:'Syne',sans-serif; font-size:9px; font-weight:700; letter-spacing:.2em; color:rgba(0,229,255,0.4); text-transform:uppercase; }
.race-status { display:flex; align-items:center; gap:7px; font-family:'Syne',sans-serif; font-size:8.5px; font-weight:700; letter-spacing:.15em; color:rgba(0,229,255,0.6); text-transform:uppercase; }
.race-dot-blink { width:6px; height:6px; border-radius:50%; background:#00e5ff; box-shadow:0 0 8px #00e5ff; animation:raceDotBlink .9s ease-in-out infinite; }
@keyframes raceDotBlink { 0%,100%{opacity:1;} 50%{opacity:.2;} }
.race-floor { font-family:'Syne',sans-serif; font-size:9px; font-weight:700; color:rgba(255,255,255,0.3); letter-spacing:.08em; }
.race-floor span { color:rgba(0,229,255,0.6); }

/* Lanes */
.race-lanes { display:flex; flex-direction:column; gap:8px; }
.race-lane {
  display:grid; grid-template-columns:110px 1fr 54px;
  align-items:center; gap:10px;
  padding:8px 12px; border-radius:10px;
  background:rgba(0,229,255,0.02); border:1px solid rgba(0,229,255,0.04);
  transition:background .5s, border-color .5s, box-shadow .5s;
}
.race-lane.winner {
  background:rgba(var(--lcs),.06) !important;
  border-color:rgba(var(--lcs),.25) !important;
  box-shadow:0 0 24px rgba(var(--lcs),.12);
}
.race-lane.winner .race-ssp-name { color:var(--lc) !important; }
.race-lane-left { display:flex; align-items:center; gap:9px; }
.race-ssp-icon {
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--lc);
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,12,28,0.9); flex-shrink:0; transition:all .4s;
}
.race-lane.winner .race-ssp-icon { transform:scale(1.1); }
.race-ssp-name {
  font-family:'Syne',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.12em; color:rgba(200,225,255,0.55);
  text-transform:uppercase; transition:all .4s; white-space:nowrap;
}

/* Progress bar */
.race-bar-track {
  position:relative; height:12px;
  background:rgba(0,229,255,0.05); border-radius:7px; overflow:hidden;
  border:1px solid rgba(0,229,255,0.08);
}
.race-tick { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.06); }
.race-tick-25 { left:25%; } .race-tick-50 { left:50%; } .race-tick-75 { left:75%; }
.race-bar {
  height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg,rgba(var(--lcs),.7),var(--lc));
  box-shadow:0 0 12px rgba(var(--lcs),.6), inset 0 1px 0 rgba(255,255,255,.2);
  transition:width .9s cubic-bezier(.16,1,.3,1);
  position:relative; overflow:hidden;
}
.race-bar-shine {
  position:absolute; top:0; right:0; width:30px; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:raceShine 2.2s ease-in-out infinite;
}
@keyframes raceShine { 0%{transform:translateX(-40px);opacity:0} 40%{opacity:1} 100%{transform:translateX(40px);opacity:0} }
.race-lane.winner .race-bar::after {
  content:''; position:absolute; right:0; top:-2px; bottom:-2px; width:6px;
  background:rgba(255,255,255,0.9); border-radius:2px;
  box-shadow:0 0 16px var(--lc), 0 0 32px var(--lc);
  animation:barEdgePulse .6s ease-in-out infinite alternate;
}
@keyframes barEdgePulse { 0%{opacity:.7} 100%{opacity:1} }

/* Bid value */
.race-bid-val {
  font-family:'Bebas Neue',sans-serif; font-size:16px; color:var(--lc);
  text-shadow:0 0 10px rgba(var(--lcs),.6); text-align:right;
  letter-spacing:.03em; transition:all .4s; min-width:54px;
}
.race-lane.winner .race-bid-val { font-size:18px; }

/* Winner banner */
.race-winner {
  display:flex; align-items:center; gap:12px;
  margin-top:14px; padding:12px 18px;
  background:linear-gradient(135deg,rgba(0,229,255,.09),rgba(0,80,255,.06),rgba(0,229,255,.04));
  border:1px solid rgba(0,229,255,.22); border-radius:12px;
  opacity:0; transform:translateY(6px);
  transition:all .5s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 40px rgba(0,229,255,.1), inset 0 1px 0 rgba(0,229,255,.15);
}
.race-winner.show { opacity:1; transform:translateY(0); }
.race-winner-crown { font-size:20px; animation:crownBounce .5s ease-out; }
@keyframes crownBounce { 0%{transform:scale(0) rotate(-20deg)} 70%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }
.race-winner-text { display:flex; flex-direction:column; gap:1px; flex:1; }
.race-winner-name { font-family:'Bebas Neue',sans-serif; font-size:20px; color:#00e5ff; letter-spacing:.06em; text-shadow:0 0 20px rgba(0,229,255,.8); line-height:1; }
.race-winner-label { font-family:'Syne',sans-serif; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(0,229,255,.4); }
.race-winner-cpm { font-family:'Bebas Neue',sans-serif; font-size:26px; color:#fff; letter-spacing:.06em; text-shadow:0 0 20px rgba(0,229,255,.5); }
.race-winner-lift { font-family:'Syne',sans-serif; font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:4px; background:rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.2); color:#00e5ff; white-space:nowrap; }

/* Stats bar */
.rtb-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(0,229,255,.07); border-top:1px solid rgba(0,229,255,.08); margin-top:2px; }
.rtb-stat { background:rgba(5,15,30,.92); padding:11px 10px; text-align:center; transition:background .2s; }
.rtb-stat:hover { background:rgba(0,229,255,.04); }
.rtb-sv { font-family:'Bebas Neue',sans-serif; font-size:20px; line-height:1; background:linear-gradient(135deg,#fff,#00e5ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rtb-sl { font-family:'Syne',sans-serif; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#2d5a78; margin-top:3px; }

/* Bottom chips */
.rtb-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.rtb-chip {
  background:rgba(5,15,30,.78); border:1px solid rgba(0,229,255,.1);
  border-radius:11px; padding:13px 11px; display:flex; align-items:center; gap:10px;
  backdrop-filter:blur(12px); transition:border-color .3s, transform .3s;
}
.rtb-chip:hover { border-color:rgba(0,229,255,.28); transform:translateY(-3px); }
.rtb-chip-ic {
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(0,102,255,.06));
  border:1px solid rgba(0,229,255,.16);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.rtb-chip-v { font-family:'Bebas Neue',sans-serif; font-size:16px; line-height:1; color:#00e5ff; }
.rtb-chip-l { font-family:'Syne',sans-serif; font-size:7px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#2d5a78; margin-top:2px; }

/* ══════════════════════════════════════
   31. PRODUCT CARDS
══════════════════════════════════════ */
.prod-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px; }
@media(max-width:760px) { .prod-cards { grid-template-columns:1fr; } }
.pcard {
  background:rgba(5,15,30,.7); border:1px solid rgba(0,229,255,.1);
  border-radius:14px; padding:36px 32px;
  position:relative; overflow:hidden;
  transition:transform .38s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
  color:inherit; display:block;
}
.pcard::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,#00e5ff,#0066ff,transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.pcard::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at top left,rgba(0,229,255,.05) 0%,transparent 60%);
  opacity:0; transition:opacity .4s;
}
.pcard:hover { transform:translateY(-8px); border-color:rgba(0,229,255,.26); box-shadow:0 28px 72px rgba(0,0,0,.5); }
.pcard:hover::before { transform:scaleX(1); }
.pcard:hover::after { opacity:1; }
.pcard-badge { position:absolute; top:28px; right:28px; font-family:'Bebas Neue',sans-serif; font-size:52px; line-height:1; background:linear-gradient(135deg,rgba(0,229,255,.1),rgba(0,102,255,.05)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pcard-tag { display:inline-flex; align-items:center; gap:8px; font-family:'Syne',sans-serif; font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#00e5ff; margin-bottom:18px; }
.pcard-tagdot { width:5px; height:5px; border-radius:50%; background:#00e5ff; box-shadow:0 0 6px #00e5ff; animation:tagPulse 2s ease infinite; }
.pcard h3 { font-family:'Bebas Neue',sans-serif; font-size:clamp(28px,3.2vw,40px); line-height:.92; letter-spacing:.03em; margin-bottom:12px; position:relative; z-index:1; }
.pcard p { font-size:13.5px; font-weight:300; line-height:1.8; color:rgba(240,249,255,.44); margin-bottom:22px; position:relative; z-index:1; }
.pcard-cta { display:inline-flex; align-items:center; gap:8px; font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#00e5ff; position:relative; z-index:1; transition:gap .25s; }
.pcard:hover .pcard-cta { gap:14px; }
.pcard-cta svg { transition:transform .25s; }
.pcard:hover .pcard-cta svg { transform:translateX(4px); }

/* ══════════════════════════════════════
   32. DIAGONAL HERO BG STRIPE
══════════════════════════════════════ */
.h-diag {
  position:absolute; inset:0; z-index:1; opacity:.04;
  background:repeating-linear-gradient(135deg,rgba(0,229,255,.08) 0px,rgba(0,229,255,.08) 1px,transparent 1px,transparent 60px);
}

/* ══════════════════════════════════════
   33. FAQ INNER
══════════════════════════════════════ */
.faq-a-inner { padding:0 8px 22px; }
.faq-a-inner p { font-size:14.5px; font-weight:300; line-height:1.85; color:rgba(240,249,255,.52); }

/* ══════════════════════════════════════════════════════════════
   34. AD FORMATS PAGE — HERO
   Used by: ad-formats.html
══════════════════════════════════════════════════════════════ */
.af-hero {
  position:relative; min-height:100vh;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:60px;
  padding:120px var(--pad) 90px; overflow:hidden;
}
.af-hero-bg { position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 65% 80% at 85% 50%,rgba(0,102,255,.08) 0%,transparent 55%),radial-gradient(ellipse 45% 55% at 5% 65%,rgba(0,229,255,.055) 0%,transparent 52%),radial-gradient(ellipse 30% 30% at 92% 8%,rgba(124,58,237,.05) 0%,transparent 55%); animation:mBreath 10s ease-in-out infinite alternate; }
.af-hero-grid { position:absolute; inset:0; z-index:1; background-image:linear-gradient(rgba(0,229,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.022) 1px,transparent 1px); background-size:56px 56px; animation:gDrift 38s linear infinite; mask-image:radial-gradient(ellipse 90% 90% at 72% 48%,black 0%,transparent 72%); }
.af-hero-scan { position:absolute; left:0; right:0; height:1px; z-index:4; background:linear-gradient(90deg,transparent 0%,rgba(0,229,255,.03) 15%,rgba(0,229,255,.6) 50%,rgba(0,102,255,.2) 65%,rgba(0,229,255,.03) 85%,transparent); animation:scan 8s ease-in-out infinite; box-shadow:0 0 14px rgba(0,229,255,.45); }

.af-hero-l { position:relative; z-index:10; }
.af-hero-tag { display:inline-flex; align-items:center; gap:10px; padding:7px 20px; margin-bottom:32px; background:rgba(0,229,255,.04); border:1px solid rgba(0,229,255,.18); border-radius:100px; font-family:'Syne',sans-serif; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--c); opacity:0; animation:fup .7s ease .1s forwards; }
.af-hero-dot { width:6px; height:6px; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); animation:pulse 2s ease infinite; }
.af-hero h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(56px,8.5vw,128px); line-height:.86; letter-spacing:.02em; margin-bottom:26px; opacity:0; animation:fup .9s ease .25s forwards; }
.af-hero h1 .cyan { background:linear-gradient(90deg,var(--c) 0%,#00b4ff 50%,var(--c2) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 44px rgba(0,229,255,.25)); }
.af-hero h1 .outline { -webkit-text-stroke:1.5px rgba(240,249,255,.16); color:transparent; }
.af-hero-sub { font-size:16px; font-weight:300; line-height:1.85; color:rgba(240,249,255,.48); max-width:490px; margin-bottom:44px; opacity:0; animation:fup .9s ease .42s forwards; }
.af-hero-sub strong { font-weight:500; color:rgba(240,249,255,.85); }
.af-hero-btns { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:48px; opacity:0; animation:fup .9s ease .58s forwards; }
.af-hero-stats { display:flex; flex-wrap:wrap; row-gap:16px; border-top:1px solid rgba(0,229,255,.08); padding-top:30px; opacity:0; animation:fup .9s ease .72s forwards; }
.af-hstat { padding:0 24px 0 0; margin-right:24px; border-right:1px solid rgba(0,229,255,.08); }
.af-hstat:last-child { border-right:none; margin-right:0; padding-right:0; }
.af-hstat-n { font-family:'Bebas Neue',sans-serif; font-size:34px; line-height:1; background:linear-gradient(135deg,#fff 20%,var(--c) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 12px rgba(0,229,255,.28)); }
.af-hstat-l { font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

.af-hero-r { position:relative; z-index:10; display:flex; align-items:center; justify-content:center; }
.af-breadcrumb { position:absolute; bottom:26px; left:var(--pad); display:flex; align-items:center; gap:10px; z-index:10; font-family:'Syne',sans-serif; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.af-breadcrumb a { text-decoration:none; color:var(--muted); transition:color .2s; }
.af-breadcrumb a:hover { color:var(--c); }
.af-breadcrumb em { color:rgba(0,229,255,.35); font-style:normal; }

@media(max-width:1060px) { .af-hero { grid-template-columns:1fr; padding-top:100px; min-height:auto; padding-bottom:70px; } .af-hero-r { display:none; } .af-hero-sub { max-width:100%; } }
@media(max-width:600px) { .af-hero { padding-top:90px; padding-bottom:56px; } .af-hero h1 { font-size:clamp(44px,14vw,88px); } .af-hero-btns { flex-direction:column; align-items:stretch; } .af-hero-btns .btn-prime,.af-hero-btns .btn-ghost { width:100%; text-align:center; justify-content:center; } .af-hstat { padding:0 14px 0 0; margin-right:14px; min-width:60px; } .af-hstat-n { font-size:26px; } .af-breadcrumb { display:none; } }

/* ── Hero Visualizer ── */
@keyframes adPulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,.15)} 50%{box-shadow:0 0 0 12px rgba(0,229,255,0)} }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes revGrow { from{width:0%} to{width:35%} }

.af-vis { width:100%; max-width:480px; position:relative; }
.af-browser { background:rgba(5,15,30,.8); border:1px solid rgba(0,229,255,.12); border-radius:14px; overflow:hidden; backdrop-filter:blur(20px); box-shadow:0 32px 80px rgba(0,0,0,.5); animation:holo 9s ease-in-out infinite; position:relative; }
.af-browser::before { content:''; position:absolute; top:-1px; left:20%; right:20%; height:1px; background:linear-gradient(90deg,transparent,var(--c),var(--c2),transparent); z-index:2; }
.af-topbar { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border2); background:rgba(3,9,18,.5); }
.af-dots { display:flex; gap:5px; }
.af-dot-r { width:8px; height:8px; border-radius:50%; }
.af-dot-r:nth-child(1) { background:rgba(255,95,87,.6); }
.af-dot-r:nth-child(2) { background:rgba(255,189,46,.6); }
.af-dot-r:nth-child(3) { background:rgba(39,201,63,.6); }
.af-url { flex:1; background:rgba(0,229,255,.04); border:1px solid rgba(0,229,255,.08); border-radius:6px; padding:5px 10px; font-family:'DM Sans',sans-serif; font-size:9px; color:var(--muted); }
.af-page { padding:14px; min-height:280px; position:relative; display:flex; flex-direction:column; gap:10px; }
.af-skel { height:6px; border-radius:3px; background:rgba(240,249,255,.04); }
.af-skel.w80{width:80%}.af-skel.w60{width:60%}.af-skel.w90{width:90%}.af-skel.w70{width:70%}.af-skel.w50{width:50%}
.af-indicator { position:absolute; top:12px; right:12px; z-index:10; display:flex; align-items:center; gap:6px; padding:5px 10px; background:rgba(3,9,18,.85); border:1px solid rgba(0,229,255,.2); border-radius:6px; backdrop-filter:blur(12px); }
.af-ind-dot { width:5px; height:5px; border-radius:50%; background:var(--c); box-shadow:0 0 6px var(--c); animation:pulse 1.8s ease infinite; }
.af-ind-txt { font-family:'Syne',sans-serif; font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c); }
.af-slot-label { font-family:'Syne',sans-serif; font-size:7px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(0,229,255,.4); }
.af-ad-tag { font-family:'Syne',sans-serif; font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(0,229,255,.5); }

.af-slot { border-radius:8px; position:relative; overflow:hidden; transition:all .5s cubic-bezier(.22,1,.36,1); }
.af-slot.active { animation:adPulse 2s ease infinite; }
.af-slot-banner { width:100%; height:42px; background:linear-gradient(135deg,rgba(0,229,255,.06),rgba(0,102,255,.04)); border:1px dashed rgba(0,229,255,.2); display:flex; align-items:center; justify-content:center; gap:6px; }
.af-slot-banner.active { border-color:rgba(0,229,255,.5); background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(0,102,255,.08)); }
.af-slot-native { width:100%; padding:10px; background:rgba(0,229,255,.03); border:1px solid rgba(0,229,255,.08); border-radius:8px; display:flex; gap:10px; align-items:center; }
.af-slot-native.active { border-color:rgba(0,229,255,.3); background:rgba(0,229,255,.06); }
.af-nat-img { width:40px; height:40px; border-radius:6px; background:linear-gradient(135deg,rgba(0,229,255,.1),rgba(0,102,255,.08)); flex-shrink:0; }
.af-nat-txt { flex:1; display:flex; flex-direction:column; gap:4px; }
.af-slot-rect { width:120px; height:100px; background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(0,102,255,.04)); border:1px dashed rgba(124,58,237,.2); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; position:absolute; right:14px; top:80px; }
.af-slot-rect.active { border-color:rgba(124,58,237,.5); background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(0,102,255,.08)); }
.af-slot-sticky { position:absolute; bottom:0; left:0; right:0; height:36px; background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(0,102,255,.06)); border-top:1px solid rgba(0,229,255,.15); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); z-index:5; }
.af-slot-sticky.active { border-color:rgba(0,229,255,.4); background:linear-gradient(135deg,rgba(0,229,255,.15),rgba(0,102,255,.1)); }
.af-cycle { margin-top:12px; text-align:center; font-family:'Syne',sans-serif; font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.af-cycle span { color:var(--c); }

/* ══════════════════════════════════════════════════════════════
   35. AD FORMATS PAGE — FORMAT SHOWCASE
══════════════════════════════════════════════════════════════ */
.af-sec-hdr { text-align:center; max-width:700px; margin:0 auto 64px; }
.af-sec-hdr .sp { margin:0 auto; }
.d5{transition-delay:.5s}

.afmt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1200px; margin:0 auto; }
.afmt-card { background:rgba(5,15,30,.65); border:1px solid var(--border2); border-radius:var(--rad); overflow:hidden; position:relative; transition:transform .42s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s; animation:holo 10s ease-in-out infinite; cursor:default; }
.afmt-card:hover { transform:translateY(-10px); border-color:rgba(0,229,255,.22); box-shadow:0 32px 80px rgba(0,0,0,.5); }
.afmt-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--c),var(--c2),transparent); transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.4,0,.2,1); z-index:2; }
.afmt-card:hover::before { transform:scaleX(1); }
.afmt-card::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top left,rgba(0,229,255,.04) 0%,transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.afmt-card:hover::after { opacity:1; }

.afmt-preview { height:180px; background:var(--bg3); border-bottom:1px solid var(--border2); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:16px; transition:transform .3s; }
.afmt-card:hover .afmt-preview { transform:perspective(600px) rotateX(-1deg); }

/* revenue badge inside preview */
.afmt-rev { position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:5px; padding:4px 9px; background:rgba(0,229,255,.06); border:1px solid rgba(0,229,255,.15); border-radius:100px; z-index:2; }
.afmt-rev-dot { width:4px; height:4px; border-radius:50%; background:#00e5b0; box-shadow:0 0 4px #00e5b0; }
.afmt-rev-txt { font-family:'Syne',sans-serif; font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#00e5b0; }

.afmt-body { padding:24px 22px 26px; position:relative; z-index:1; }
.afmt-icon { width:40px; height:40px; border-radius:10px; margin-bottom:14px; background:linear-gradient(135deg,rgba(0,229,255,.1),rgba(0,102,255,.06)); border:1px solid rgba(0,229,255,.16); display:flex; align-items:center; justify-content:center; font-size:17px; }
.afmt-body h3 { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; margin-bottom:8px; line-height:1.3; }
.afmt-body p { font-size:13px; font-weight:300; line-height:1.78; color:rgba(240,249,255,.44); margin-bottom:14px; }
.afmt-specs { display:flex; flex-wrap:wrap; gap:6px; }
.afmt-spec { padding:3px 8px; background:rgba(0,229,255,.05); border:1px solid rgba(0,229,255,.1); border-radius:4px; font-family:'Syne',sans-serif; font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(0,229,255,.55); }

/* mini preview mockups */
.afmk { position:relative; width:100%; height:100%; }
.afmk-label { font-family:'Syne',sans-serif; font-size:6px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,229,255,.3); }
.afmk-banner { width:85%; height:28px; border-radius:4px; background:linear-gradient(90deg,rgba(0,229,255,.08),rgba(0,102,255,.06)); border:1px dashed rgba(0,229,255,.18); display:flex; align-items:center; justify-content:center; margin:auto; }
.afmk-rect { width:50%; height:60px; border-radius:4px; background:linear-gradient(135deg,rgba(0,229,255,.06),rgba(0,102,255,.04)); border:1px dashed rgba(0,229,255,.15); display:flex; align-items:center; justify-content:center; margin:auto; }
.afmk-sky { position:absolute; right:8px; top:8px; bottom:8px; width:24px; border-radius:4px; background:linear-gradient(180deg,rgba(124,58,237,.08),rgba(0,102,255,.04)); border:1px dashed rgba(124,58,237,.15); }

/* display mock */
.afmk-display { display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; height:100%; }

/* sticky mock */
.afmk-sticky { position:relative; width:100%; height:100%; display:flex; flex-direction:column; }
.afmk-sticky-page { flex:1; display:flex; flex-direction:column; gap:4px; padding:8px; justify-content:center; }
.afmk-sticky-bar { height:32px; background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(0,102,255,.06)); border-top:1px solid rgba(0,229,255,.15); display:flex; align-items:center; justify-content:center; gap:6px; position:relative; }
.afmk-sticky-x { width:12px; height:12px; border-radius:50%; background:rgba(240,249,255,.06); border:1px solid rgba(240,249,255,.1); display:flex; align-items:center; justify-content:center; font-size:6px; color:rgba(240,249,255,.25); position:absolute; right:4px; }
.afmk-sticky-top { height:26px; background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(0,102,255,.06)); border-bottom:1px solid rgba(0,229,255,.15); display:flex; align-items:center; justify-content:center; }

/* side rail mock */
.afmk-siderail { position:relative; width:100%; height:100%; display:flex; }
.afmk-siderail-content { flex:1; display:flex; flex-direction:column; gap:4px; padding:8px; justify-content:center; }
.afmk-siderail-bar { width:28px; background:linear-gradient(180deg,rgba(124,58,237,.06),rgba(0,102,255,.04)); border-left:1px solid rgba(124,58,237,.12); display:flex; align-items:center; justify-content:center; }
.afmk-siderail-bar-r { width:28px; background:linear-gradient(180deg,rgba(0,229,255,.06),rgba(0,102,255,.04)); border-right:1px solid rgba(0,229,255,.12); display:flex; align-items:center; justify-content:center; }

/* native mock */
.afmk-native { display:flex; flex-direction:column; gap:8px; padding:8px; height:100%; justify-content:center; }
.afmk-nat-item { display:flex; gap:8px; align-items:center; padding:8px; background:rgba(0,229,255,.03); border:1px solid rgba(0,229,255,.08); border-radius:6px; transition:border-color .3s; }
.afmk-nat-item:hover { border-color:rgba(0,229,255,.2); }
.afmk-nat-thumb { width:32px; height:32px; border-radius:4px; background:linear-gradient(135deg,rgba(0,229,255,.1),rgba(0,102,255,.08)); flex-shrink:0; }
.afmk-nat-lines { flex:1; display:flex; flex-direction:column; gap:3px; }
.afmk-nat-l { height:4px; border-radius:2px; background:rgba(240,249,255,.06); }
.afmk-nat-l.w70{width:70%}.afmk-nat-l.w50{width:50%}.afmk-nat-l.w85{width:85%}
.afmk-nat-badge { font-family:'Syne',sans-serif; font-size:5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,229,255,.35); padding:2px 4px; background:rgba(0,229,255,.05); border-radius:2px; }

/* video mock */
.afmk-video { position:relative; width:85%; height:85%; border-radius:8px; background:rgba(5,15,30,.6); border:1px solid rgba(0,229,255,.1); overflow:hidden; display:flex; align-items:center; justify-content:center; margin:auto; }
.afmk-video::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,102,255,.05),transparent); }
.afmk-play { width:36px; height:36px; border-radius:50%; background:rgba(0,229,255,.12); border:1px solid rgba(0,229,255,.3); display:flex; align-items:center; justify-content:center; position:relative; z-index:1; }
.afmk-play::after { content:''; width:0; height:0; border-style:solid; border-width:6px 0 6px 12px; border-color:transparent transparent transparent var(--c); margin-left:2px; }
.afmk-vid-bar { position:absolute; bottom:0; left:0; right:0; height:20px; background:rgba(3,9,18,.7); display:flex; align-items:center; padding:0 8px; gap:6px; z-index:1; }
.afmk-vid-prog { flex:1; height:3px; background:rgba(240,249,255,.1); border-radius:2px; overflow:hidden; }
.afmk-vid-fill { height:100%; width:35%; background:linear-gradient(90deg,var(--c),var(--c2)); border-radius:2px; animation:revGrow 3s ease infinite; }
.afmk-vid-time { font-family:'Syne',sans-serif; font-size:6px; font-weight:700; color:rgba(240,249,255,.3); letter-spacing:.05em; }

/* interstitial mock */
.afmk-inter { position:relative; width:70%; height:90%; border-radius:8px; background:rgba(0,0,0,.4); border:1px solid rgba(0,229,255,.12); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin:auto; backdrop-filter:blur(4px); }
.afmk-inter-close { position:absolute; top:6px; right:6px; width:16px; height:16px; border-radius:50%; background:rgba(240,249,255,.08); border:1px solid rgba(240,249,255,.15); display:flex; align-items:center; justify-content:center; font-size:8px; color:rgba(240,249,255,.3); }
.afmk-inter-ad { width:75%; height:55%; border-radius:4px; background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(124,58,237,.06)); border:1px dashed rgba(0,229,255,.18); display:flex; align-items:center; justify-content:center; }
.afmk-inter-cta { padding:4px 12px; border-radius:4px; background:linear-gradient(135deg,rgba(0,229,255,.15),rgba(0,102,255,.1)); font-family:'Syne',sans-serif; font-size:6px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c); }

/* in-article mock */
.afmk-article { display:flex; flex-direction:column; gap:5px; padding:8px; height:100%; justify-content:center; }
.afmk-article-ad { width:100%; height:40px; border-radius:6px; background:linear-gradient(135deg,rgba(0,229,255,.06),rgba(0,102,255,.04)); border:1px dashed rgba(0,229,255,.15); display:flex; align-items:center; justify-content:center; }

/* responsive mock */
.afmk-responsive { display:flex; align-items:flex-end; justify-content:center; gap:8px; height:100%; padding:16px; }
.afmk-resp-device { border-radius:4px; background:rgba(5,15,30,.5); border:1px solid rgba(0,229,255,.1); display:flex; flex-direction:column; overflow:hidden; }
.afmk-resp-screen { background:rgba(0,229,255,.04); flex:1; display:flex; align-items:center; justify-content:center; padding:4px; }
.afmk-resp-ad { border-radius:2px; background:linear-gradient(135deg,rgba(0,229,255,.1),rgba(0,102,255,.06)); border:1px dashed rgba(0,229,255,.15); display:flex; align-items:center; justify-content:center; width:100%; }

/* parallax mock */
.afmk-parallax { position:relative; width:100%; height:100%; overflow:hidden; }
.afmk-parallax-content { display:flex; flex-direction:column; gap:5px; padding:8px; }
.afmk-parallax-ad { width:100%; height:70px; border-radius:6px; background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(0,229,255,.06)); border:1px solid rgba(124,58,237,.15); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.afmk-parallax-ad::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 0%,rgba(0,229,255,.04) 50%,transparent 100%); animation:floatY 3s ease-in-out infinite; }
.afmk-parallax-arrows { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:2px; }
.afmk-parallax-arr { width:8px; height:8px; border-left:1px solid rgba(0,229,255,.2); border-bottom:1px solid rgba(0,229,255,.2); transform:rotate(-45deg); animation:floatY 2s ease-in-out infinite; }
.afmk-parallax-arr:nth-child(2) { animation-delay:.3s; }
.afmk-parallax-arr:nth-child(3) { animation-delay:.6s; }

@media(max-width:1000px) { .afmt-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .afmt-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════
   36. AD FORMATS PAGE — UNIQUE FEATURES
══════════════════════════════════════════════════════════════ */
.afeat-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1200px; margin:0 auto; }

.afeat-card { background:rgba(5,15,30,.6); border:1px solid var(--border2); border-radius:var(--rad); overflow:hidden; position:relative; transition:transform .38s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s; animation:holo 11s ease-in-out infinite; }
.afeat-card:hover { transform:translateY(-8px); border-color:rgba(0,229,255,.22); box-shadow:0 28px 72px rgba(0,0,0,.5); }
.afeat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--c),var(--c2),transparent); transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.4,0,.2,1); z-index:2; }
.afeat-card:hover::before { transform:scaleX(1); }

.afeat-head { padding:22px 24px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--border2); background:rgba(0,229,255,.015); }
.afeat-badge { width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; background:linear-gradient(135deg,rgba(0,229,255,.1),rgba(0,102,255,.06)); border:1px solid rgba(0,229,255,.16); }
.afeat-head h3 { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; line-height:1.3; }
.afeat-head-sub { font-size:11px; font-weight:300; color:var(--muted); margin-top:3px; }

.afeat-body { padding:24px; }
.afeat-body > p { font-size:13.5px; font-weight:300; line-height:1.82; color:rgba(240,249,255,.48); margin-bottom:20px; }

.afeat-specs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.afeat-sp { padding:12px 14px; background:rgba(0,229,255,.03); border:1px solid rgba(0,229,255,.08); border-radius:8px; }
.afeat-sp-v { font-family:'Bebas Neue',sans-serif; font-size:22px; line-height:1; background:linear-gradient(135deg,#fff 15%,var(--c) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.afeat-sp-l { font-family:'Syne',sans-serif; font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:3px; }

.afeat-tags { display:flex; flex-wrap:wrap; gap:6px; }
.afeat-tag { padding:3px 8px; background:rgba(0,229,255,.05); border:1px solid rgba(0,229,255,.1); border-radius:4px; font-family:'Syne',sans-serif; font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(0,229,255,.55); }

/* feature visual strip */
.afeat-vis { height:4px; border-radius:2px; background:rgba(0,229,255,.06); overflow:hidden; margin-bottom:16px; }
.afeat-vis-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--c),var(--c2)); width:0%; transition:width 1.4s cubic-bezier(.4,0,.2,1); }

@media(max-width:860px) { .afeat-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════
   37. AD FORMATS PAGE — SIZES GRID
══════════════════════════════════════════════════════════════ */
.asz-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:1100px; margin:0 auto; }
.asz-card { background:rgba(5,15,30,.5); border:1px solid var(--border2); border-radius:var(--rad); padding:20px; text-align:center; position:relative; overflow:hidden; transition:all .35s cubic-bezier(.22,1,.36,1); animation:holo 12s ease-in-out infinite; }
.asz-card:hover { transform:translateY(-6px); border-color:rgba(0,229,255,.2); box-shadow:0 20px 56px rgba(0,0,0,.4); }
.asz-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top,rgba(0,229,255,.03) 0%,transparent 55%); opacity:0; transition:opacity .3s; pointer-events:none; }
.asz-card:hover::before { opacity:1; }
.asz-visual { margin:0 auto 14px; border-radius:4px; border:1px dashed rgba(0,229,255,.15); background:rgba(0,229,255,.03); display:flex; align-items:center; justify-content:center; position:relative; z-index:1; transition:border-color .3s; }
.asz-card:hover .asz-visual { border-color:rgba(0,229,255,.3); }
.asz-dim { font-family:'Bebas Neue',sans-serif; font-size:11px; color:rgba(0,229,255,.35); letter-spacing:.04em; }
.asz-name { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; margin-bottom:4px; position:relative; z-index:1; }
.asz-desc { font-size:11px; font-weight:300; color:rgba(240,249,255,.35); position:relative; z-index:1; }
.asz-rev { margin-top:10px; font-family:'Bebas Neue',sans-serif; font-size:16px; color:var(--c); position:relative; z-index:1; }

@media(max-width:860px) { .asz-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:600px) { .asz-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:380px) { .asz-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════
   38. AD FORMATS PAGE — PERFORMANCE BARS
══════════════════════════════════════════════════════════════ */
.aperf-inner { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.aperf-l .sp { margin-bottom:34px; }
.aperf-bars { display:flex; flex-direction:column; gap:15px; }
.aperf-bar { display:flex; flex-direction:column; gap:6px; }
.aperf-lr { display:flex; justify-content:space-between; align-items:center; }
.aperf-lb { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; color:rgba(240,249,255,.5); }
.aperf-vl { font-family:'Bebas Neue',sans-serif; font-size:15px; color:var(--c); }
.aperf-tr { height:8px; background:rgba(0,229,255,.06); border-radius:100px; overflow:hidden; }
.aperf-fi { height:100%; border-radius:100px; width:0%; transition:width 1.4s cubic-bezier(.4,0,.2,1); }
.aperf-bar:nth-child(1) .aperf-fi { background:linear-gradient(90deg,var(--c),#00b4ff); }
.aperf-bar:nth-child(2) .aperf-fi { background:linear-gradient(90deg,var(--c2),#0088ff); }
.aperf-bar:nth-child(3) .aperf-fi { background:linear-gradient(90deg,rgba(124,58,237,.85),#9d5bff); }
.aperf-bar:nth-child(4) .aperf-fi { background:linear-gradient(90deg,#00c896,#00e5b0); }
.aperf-bar:nth-child(5) .aperf-fi { background:linear-gradient(90deg,#ff6b35,#ff9a60); }
.aperf-note { margin-top:20px; padding:13px 15px; background:rgba(0,229,255,.03); border:1px solid rgba(0,229,255,.1); border-radius:10px; font-size:12px; font-weight:300; line-height:1.78; color:rgba(240,249,255,.37); font-style:italic; }
.aperf-note strong { font-style:normal; font-weight:500; color:rgba(240,249,255,.62); }

.aperf-r { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.aperf-card { background:rgba(5,15,30,.7); border:1px solid var(--border2); border-radius:var(--rad); padding:24px 20px; position:relative; overflow:hidden; transition:transform .35s,border-color .35s,box-shadow .35s; animation:holo 11s ease-in-out infinite; }
.aperf-card:hover { transform:translateY(-6px); border-color:rgba(0,229,255,.2); box-shadow:0 24px 60px rgba(0,0,0,.45); }
.aperf-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top left,rgba(0,229,255,.04) 0%,transparent 55%); opacity:0; transition:opacity .3s; }
.aperf-card:hover::before { opacity:1; }
.aperf-v { font-family:'Bebas Neue',sans-serif; font-size:46px; line-height:1; background:linear-gradient(135deg,#fff 15%,var(--c) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 16px rgba(0,229,255,.25)); display:block; margin-bottom:5px; position:relative; z-index:1; }
.aperf-label { font-family:'Syne',sans-serif; font-weight:700; font-size:12px; margin-bottom:4px; position:relative; z-index:1; }
.aperf-sub { font-size:12px; font-weight:300; color:rgba(240,249,255,.35); line-height:1.65; position:relative; z-index:1; }

@media(max-width:960px) { .aperf-inner { grid-template-columns:1fr; gap:52px; } }
@media(max-width:480px) { .aperf-r { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════
   39. AD FORMATS PAGE — DEPLOY STEPS
══════════════════════════════════════════════════════════════ */
.af-deploy-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--border2); border-radius:var(--rad); overflow:hidden; background:rgba(0,229,255,.04); }
.af-step { background:var(--bg2); padding:32px 22px 28px; position:relative; overflow:hidden; transition:background .35s,transform .35s; display:flex; flex-direction:column; }
.af-step::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--c),var(--c2),transparent); transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.af-step:hover::before { transform:scaleX(1); }
.af-step:hover { background:rgba(0,229,255,.02); transform:translateY(-4px); }
.af-step-n { width:28px; height:28px; border-radius:50%; border:1px solid rgba(0,229,255,.22); display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-size:10px; font-weight:700; color:var(--c); background:rgba(0,229,255,.04); margin-bottom:14px; flex-shrink:0; transition:background .3s,box-shadow .3s,border-color .3s; }
.af-step:hover .af-step-n { background:rgba(0,229,255,.1); border-color:var(--c); box-shadow:0 0 18px rgba(0,229,255,.2); }
.af-step-icon { font-size:22px; margin-bottom:12px; }
.af-step h3 { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; margin-bottom:8px; line-height:1.35; }
.af-step p { font-size:13px; font-weight:300; line-height:1.78; color:rgba(240,249,255,.4); }

@media(max-width:860px) { .af-deploy-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px) { .af-deploy-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════
   40. AD FORMATS PAGE — SEC DIVIDER (reusable)
══════════════════════════════════════════════════════════════ */
.af-div { height:1px; background:linear-gradient(90deg,transparent,rgba(0,229,255,.06) 15%,rgba(0,229,255,.22) 50%,rgba(0,102,255,.1) 65%,rgba(0,229,255,.06) 85%,transparent); }