/* ================= CSI AI100K – DARK AI NEON THEME ================= */
:root{
  --bg:#05070f;
  --bg-2:#0b1020;
  --glass:rgba(16,22,45,.55);
  --glass-2:rgba(16,22,45,.35);
  --text:#e9eeff;
  --muted:#a9b4d4;
  --brand:#29a3ff;      /* neon cyan-blue */
  --brand-2:#00ffe1;    /* aqua neon */
  --accent:#ffd43b;     /* electric yellow accent */
  --border:rgba(180,210,255,.08);
  --ring:#20ffe3;
  --shadow:0 14px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;background:var(--bg);color:var(--text);scroll-behavior:smooth}

/* Animated AI backdrop: moving gradient + grid scan */
.backdrop{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(60vmax 45vmax at 10% -10%, rgba(0,170,255,.18), transparent 60%),
   radial-gradient(60vmax 50vmax at 110% 10%, rgba(0,255,200,.12), transparent 60%),
   linear-gradient(180deg, var(--bg), var(--bg-2) 60%, var(--bg) 100%);
  filter:saturate(115%) contrast(110%);
  animation: hue 16s linear infinite;
}
@keyframes hue{0%{filter:hue-rotate(0deg) saturate(115%) contrast(110%)}100%{filter:hue-rotate(20deg) saturate(115%) contrast(110%)}}

/* scanning grid overlay */
.scan{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(transparent 95%, rgba(41,163,255,.08) 96%),
    linear-gradient(90deg, transparent 95%, rgba(41,163,255,.08) 96%);
  background-size: 100% 18px, 18px 100%;
  mask: linear-gradient(transparent, black 20%, black 80%, transparent);
  animation: scan-move 8s linear infinite;
}
@keyframes scan-move{
  0%{background-position:0 0, 0 0}
  100%{background-position:0 18px, 18px 0}
}

.container{width:min(1200px,92vw);margin-inline:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Navbar */
.navbar{position:sticky;top:0;z-index:50;background:rgba(8,12,28,.6);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.navbar .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.brand img{width:42px;height:42px;border-radius:10px;background:#ffffff;object-fit:contain; padding:6px; }
.brand span{font-size:18px}
.nav-links{display:flex;gap:16px;flex-wrap:wrap}
.nav-links a{padding:8px 12px;border-radius:12px;border:1px solid transparent}
.nav-links a:is(.active,:hover){
  text-decoration:none; 
  background:linear-gradient(180deg, rgba(41,163,255,.14), rgba(0,255,225,.08));
  border-color:rgba(41,163,255,.18);
  box-shadow:0 0 0 1px rgba(41,163,255,.18) inset, 0 6px 18px rgba(32,255,227,.08);
}

/* Hero */
.hero{padding:96px 0 48px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.card-glass{
  background:linear-gradient(180deg, var(--glass), var(--glass-2));
  border:1px solid var(--border); border-radius:24px; padding:24px; box-shadow:var(--shadow);
  backdrop-filter: blur(12px);
}
h1.hero-title{font-size:clamp(32px,5vw,56px);line-height:1.03;margin:0 0 8px;
  background:linear-gradient(90deg,var(--brand), var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:clamp(15px,2.2vw,18px);margin:0 0 16px}
.badge{display:inline-block;padding:6px 12px;border-radius:999px;font-weight:800;color:#06121e;background:linear-gradient(90deg,var(--accent), #fff1a6); box-shadow:0 8px 20px rgba(255,212,59,.22)}

/* Buttons with neon glow */
.button{display:inline-block;padding:12px 18px;border-radius:14px;font-weight:900;color:#021319;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 10px 26px rgba(32,255,227,.18); border:0}
.button:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(32,255,227,.28)}
.button.secondary{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); color:var(--text); border:1px solid var(--border)}

/* Grids & cards */
.section{padding:54px 0;border-bottom:1px solid var(--border)}
.section h2{font-size:clamp(22px,3vw,34px);margin:0 0 12px}
.lead{color:var(--muted);margin-top:-4px}
.grid{display:grid;gap:18px}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:linear-gradient(180deg, var(--glass), var(--glass-2));border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted)}

/* Hero illustrations */
.hero-illus{position:absolute; right:-80px; top:-40px; width:min(46vw,680px); opacity:.25; filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}

/* Timeline */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:rgba(41,163,255,.25)}
.step{position:relative;margin:14px 0;padding-left:12px}
.step::before{content:"";position:absolute;left:-5px;top:6px;width:12px;height:12px;border-radius:999px;background:var(--brand);box-shadow:0 0 14px var(--brand)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.stat{padding:20px;border-radius:18px;background:linear-gradient(180deg,var(--glass),var(--glass-2));border:1px solid var(--border);text-align:center;backdrop-filter:blur(10px)}
.stat .num{font-size:clamp(28px,4vw,42px);font-weight:900;text-shadow:0 0 20px rgba(41,163,255,.55)}

/* FAQ */
details{background:linear-gradient(180deg,var(--glass),var(--glass-2));border:1px solid var(--border);border-radius:16px;padding:14px 16px}
details + details{margin-top:10px}
details summary{cursor:pointer;font-weight:800}
details p{color:var(--muted)}

/* Footer */
.footer{padding:32px 0 68px;color:var(--muted)}
.footer .row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* Sticky mobile CTA */
@media (max-width:768px){
  .sticky-cta{position:sticky;bottom:0;z-index:55;background:rgba(5,7,15,.7);backdrop-filter:blur(10px);padding:10px;border-top:1px solid var(--border)}
}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(10px);animation:reveal .9s ease forwards}
.reveal:nth-child(1){animation-delay:.1s}.reveal:nth-child(2){animation-delay:.2s}.reveal:nth-child(3){animation-delay:.3s}
@keyframes reveal{to{opacity:1;transform:none}}

hr.faint{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:16px 0 22px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;align-items:start}
@media (max-width:720px){.kv{grid-template-columns:1fr}}

/* ==== v4 robotic UI tweaks ==== */
/* Particle lights (CSS-only) */
.particles{position:fixed; inset:0; pointer-events:none; z-index:-1; background:
 radial-gradient(circle at 20% 30%, rgba(0,255,225,.10) 0 6px, transparent 60px),
 radial-gradient(circle at 80% 20%, rgba(41,163,255,.12) 0 8px, transparent 70px),
 radial-gradient(circle at 70% 70%, rgba(255,212,59,.08) 0 6px, transparent 60px),
 radial-gradient(circle at 30% 80%, rgba(0,255,225,.10) 0 8px, transparent 70px);
 animation: floaty 18s ease-in-out infinite alternate;
}
@keyframes floaty{
  0%{transform:translateY(0) scale(1)}
  100%{transform:translateY(-12px) scale(1.02)}
}

/* Neon frame + parallax hover on hero robot */
.robot-frame{position:relative; display:inline-block; border-radius:18px; padding:10px;
  background:linear-gradient(145deg, rgba(41,163,255,.35), rgba(0,255,225,.18), rgba(255,212,59,.18));
  box-shadow:0 0 24px rgba(41,163,255,.35), inset 0 0 12px rgba(0,255,225,.18);
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.robot-frame:hover{ transform: translateY(-3px) scale(1.01); box-shadow:0 10px 32px rgba(0,0,0,.45), 0 0 30px rgba(0,255,225,.25); }
.robot-img{display:block; width:min(42vw,520px); height:auto; border-radius:12px; filter:saturate(110%) contrast(108%) brightness(103%); 
  box-shadow:0 20px 34px rgba(0,0,0,.55);
}
/* animated reflection sweep */
.robot-frame::after{
  content:""; position:absolute; inset:0; border-radius:18px;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.12) 40%, transparent 60%);
  transform: translateX(-120%); filter: blur(2px);
  animation: sweep 6s ease-in-out infinite;
}
@keyframes sweep{ 0%{transform:translateX(-120%)} 60%{transform:translateX(120%)} 100%{transform:translateX(120%)} }

/* Section illus placement */
.section-illus{max-width:320px; width:36vw; opacity:.9; filter:drop-shadow(0 20px 30px rgba(0,0,0,.5)); border-radius:14px}

/* Hero layout adjustment for image + text */
.hero .container.flex{display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.hero .text{flex:1 1 420px; min-width:300px}
.hero .visual{flex:1 1 380px; display:flex; justify-content:flex-end}

/* ==== v5 components ==== */
/* Countdown banner */
.countdown-banner{position:relative; margin:16px 0 0; border:1px solid var(--border); border-radius:14px; 
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
  padding:12px 14px; display:flex; gap:12px; align-items:center; justify-content:space-between; backdrop-filter: blur(8px);}
.countdown-banner .timer{display:flex; gap:10px; flex-wrap:wrap}
.countdown-banner .cell{min-width:64px; text-align:center; padding:8px 10px; border-radius:10px;
  background:linear-gradient(180deg, var(--glass), var(--glass-2)); border:1px solid var(--border)}
.countdown-banner .num{font-weight:900; font-size:20px}
.countdown-banner .lbl{color:var(--muted); font-size:12px; letter-spacing:.2px}
/* Partner strip */
.partners{overflow:hidden; border:1px solid var(--border); border-radius:16px; background:linear-gradient(180deg, var(--glass), var(--glass-2)); padding:10px; backdrop-filter: blur(8px)}
.partners .track{display:flex; gap:28px; animation: partner-scroll 28s linear infinite; will-change: transform}
.partners img, .partners svg{height:42px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)) brightness(1.1); opacity:.95; transition: transform .25s ease, filter .25s ease}
.partners img:hover, .partners svg:hover{transform: translateY(-2px) scale(1.03); filter: drop-shadow(0 6px 16px rgba(32,255,227,.35)) brightness(1.2)}
@keyframes partner-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Carousel (scroll-snap) */
.carousel{position:relative; border:1px solid var(--border); border-radius:16px; background:linear-gradient(180deg, var(--glass), var(--glass-2)); padding:12px; overflow:auto; display:flex; gap:12px; scroll-snap-type:x mandatory}
.carousel img{height:320px; width:auto; border-radius:14px; box-shadow:0 20px 34px rgba(0,0,0,.55); scroll-snap-align:center}
.carousel::-webkit-scrollbar{height:10px}
.carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08); border-radius:20px}
/* Carousel dots (pure CSS: anchor targets) */
.carousel-dots{display:flex; gap:6px; justify-content:center; margin-top:10px}
.carousel-dots a{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.25);display:inline-block}
.carousel-dots a:hover{background:var(--brand)}
/* Utility */
.mt-20{margin-top:20px}

/* ==== v7 homepage video background ==== */
.video-hero{position:relative; overflow:hidden}
.video-hero .bg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.35; filter: saturate(115%) contrast(110%) brightness(108%) blur(0.0px);
  z-index:-2;
}
.video-hero .overlay{
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(50% 60% at 10% 0%, rgba(0,170,255,.25), transparent 60%),
              radial-gradient(60% 70% at 100% 10%, rgba(0,255,225,.18), transparent 60%),
              linear-gradient(180deg, rgba(5,7,15,.6), rgba(5,7,15,.85));
}
/* Ensure hero content stays readable atop video */
.hero.video-hero .card-glass{background:linear-gradient(180deg, rgba(16,22,45,.72), rgba(16,22,45,.50));}

/* ==== v8 YouTube background embed ==== */
.hero.video-hero{position:relative; overflow:hidden}
.yt-bg{position:absolute; inset:0; z-index:-3; pointer-events:none; opacity:.55;}
.yt-embed{position:absolute; top:50%; left:50%; width:177.78vh; height:100vh; transform:translate(-50%,-50%);} /* 16:9 cover */
@media (max-aspect-ratio: 16/9){
  .yt-embed{width:100vw; height:56.25vw;}
}
/* strengthen overlay for readability */
.hero.video-hero .overlay{background:
  radial-gradient(50% 60% at 10% 0%, rgba(0,170,255,.25), transparent 60%),
  radial-gradient(60% 70% at 100% 10%, rgba(0,255,225,.18), transparent 60%),
  linear-gradient(180deg, rgba(5,7,15,.75), rgba(5,7,15,.88));
}