/* ══════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════ */
:root {
  --accent:    #5A9FE8;
  --accent2:   #A8C8F0;
  --success:   #7BB8F0;
  --warn:      #C8C8C8;
  --bg:        #070707;
  --surface:   #0D0D0D;
  --surface2:  #151515;
  --border:    rgba(255,255,255,0.07);
  --text:      #EFEFEF;
  --muted:     #5A5A5A;
  --display:   'Plus Jakarta Sans', sans-serif;
  --mono:      'JetBrains Mono', monospace;
  --sans:      'DM Sans', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { background:var(--bg); color:var(--text); font-family:var(--sans); overflow-x:hidden; cursor:none; }

/* ── Custom cursor ── */
.cursor-dot  { position:fixed; width:7px; height:7px; background:var(--accent); border-radius:50%; pointer-events:none; z-index:99999; transform:translate(-50%,-50%); transition:transform 0.05s linear; mix-blend-mode:screen; }
.cursor-ring { position:fixed; width:30px; height:30px; border:1px solid rgba(90,159,232,0.45); border-radius:50%; pointer-events:none; z-index:99998; transform:translate(-50%,-50%); transition:transform 0.12s linear,width 0.2s,height 0.2s,border-color 0.2s; }
body:has(a:hover) .cursor-ring, body:has(button:hover) .cursor-ring { width:46px; height:46px; border-color:var(--accent2); }

/* ── Subtle grain overlay ── */
body::after {
  content:''; position:fixed; inset:0; z-index:99990; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.05) 3px,rgba(0,0,0,0.05) 4px);
  animation:scanScroll 16s linear infinite;
}
@keyframes scanScroll { from{background-position:0 0;} to{background-position:0 200px;} }

/* ══════════════════════════════════════════════════════
   WELCOME SCREEN
══════════════════════════════════════════════════════ */
#welcome {
  position:fixed; inset:0; z-index:99995;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#welcome.exit { animation:welcomeExit 1.2s cubic-bezier(0.7,0,1,0.3) forwards; }
@keyframes welcomeExit {
  0%  { opacity:1; transform:scale(1); filter:blur(0); }
  40% { opacity:1; transform:scale(0.95); filter:blur(0); }
  70% { opacity:1; transform:scale(1.5); filter:blur(4px) brightness(3); }
  100%{ opacity:0; transform:scale(3); filter:blur(20px) brightness(0); pointer-events:none; }
}
#wCanvas { display:none; }
.w-floor  { display:none; }
.w-inner {
  position:relative; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0; text-align:center;
}
.w-label {
  font-family:var(--mono); font-size:12px; letter-spacing:7px;
  color:rgba(255,255,255,0.35); text-transform:uppercase; margin-bottom:18px;
  opacity:0; animation:wLabelIn 1s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
}
@keyframes wLabelIn { from{opacity:0;letter-spacing:18px;} to{opacity:1;letter-spacing:7px;} }
.w-title-3d {
  font-family:var(--display); font-weight:800;
  font-size:clamp(52px,12vw,130px);
  color:#fff; letter-spacing:-3px; line-height:1;
  animation:titleFloat 0.9s cubic-bezier(0.16,1,0.3,1) 0.5s both;
}
@keyframes titleFloat { from{opacity:0;transform:translateY(40px) scale(0.92);} to{opacity:1;transform:translateY(0) scale(1);} }
.w-glow-line,.w-glow-dot,.w-bar-wrap,.w-insert { display:none !important; }

/* ══════════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════════ */
#nav {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  z-index:1000; width:min(1200px,calc(100% - 40px));
  background:rgba(7,7,7,0.85); backdrop-filter:blur(24px) saturate(1.2);
  border:1px solid var(--border); border-radius:3px;
  padding:0 24px; display:none;
}
#nav.visible { display:flex; align-items:center; height:56px; justify-content:space-between; animation:navIn 0.5s ease; }
@keyframes navIn { from{opacity:0;transform:translateX(-50%) translateY(-20px);} to{opacity:1;transform:translateX(-50%) translateY(0);} }
#nav.scrolled { background:rgba(7,7,7,0.97); border-color:rgba(90,159,232,0.18); }
.nav-logo { font-family:var(--display); font-size:13px; font-weight:700; color:#fff; letter-spacing:2px; text-decoration:none; display:flex; align-items:center; gap:10px; }
.nav-logo img { height:24px; filter:drop-shadow(0 0 6px var(--accent)); }
.nav-logo-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; animation:navPulse 2s infinite; box-shadow:0 0 6px var(--accent); }
@keyframes navPulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.nav-links { display:flex; gap:4px; }
.nav-links a { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:2px; text-decoration:none; padding:8px 12px; border-radius:2px; transition:color 0.2s,background 0.2s; text-transform:uppercase; position:relative; }
.nav-links a::before { content:attr(data-num); position:absolute; top:-1px; left:4px; font-size:7px; color:var(--accent); opacity:0.5; }
.nav-links a:hover { color:var(--accent); background:rgba(90,159,232,0.05); }
.nav-right { display:flex; align-items:center; gap:16px; }
.lang-toggle { display:flex; gap:2px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:2px; padding:2px; }
.lang-toggle button { font-family:var(--mono); font-size:9px; letter-spacing:1px; background:none; border:none; color:var(--muted); padding:4px 10px; cursor:pointer; border-radius:1px; transition:all 0.15s; }
.lang-toggle button.active { background:var(--accent); color:#fff; }

/* ══════════════════════════════════════════════════════
   SECTION SYSTEM
══════════════════════════════════════════════════════ */
section { position:relative; overflow:hidden; }
.sec-inner { max-width:1400px; margin:0 auto; padding:0 56px; position:relative; z-index:2; }
/* ── Animated elements: base (invisible, shifted down) ── */
.fade-up    { opacity:0; transform:translateY(60px);  transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1); will-change:opacity,transform; backface-visibility:hidden; }
.fade-left  { opacity:0; transform:translateX(-60px); transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1); will-change:opacity,transform; backface-visibility:hidden; }
.fade-right { opacity:0; transform:translateX(60px);  transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1); will-change:opacity,transform; backface-visibility:hidden; }
.fade-scale { opacity:0; transform:scale(0.88);       transition:opacity 0.8s ease,transform 0.8s ease; will-change:opacity,transform; backface-visibility:hidden; }

/* ── Visible state (element entered viewport) ── */
.fade-up.in    { opacity:1; transform:translateY(0); }
.fade-left.in  { opacity:1; transform:translateX(0); }
.fade-right.in { opacity:1; transform:translateX(0); }
.fade-scale.in { opacity:1; transform:scale(1); }

/* ── Exit-top: element scrolled OUT above the viewport (slide upward + fade) ── */
.fade-up.exit-top    { opacity:0; transform:translateY(-38px); transition-delay:0s !important; }
.fade-left.exit-top  { opacity:0; transform:translateX(-38px); transition-delay:0s !important; }
.fade-right.exit-top { opacity:0; transform:translateX(38px);  transition-delay:0s !important; }
.fade-scale.exit-top { opacity:0; transform:scale(0.94);       transition-delay:0s !important; }

/* ── Stagger delays ── */
.d1{transition-delay:0.05s;} .d2{transition-delay:0.15s;} .d3{transition-delay:0.25s;}
.d4{transition-delay:0.35s;} .d5{transition-delay:0.45s;} .d6{transition-delay:0.55s;}

.sec-eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:5px; color:var(--accent); text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:12px; }
.sec-eyebrow::before { content:''; width:24px; height:1px; background:var(--accent); }
.sec-title { font-family:var(--display); font-size:clamp(30px,5vw,58px); font-weight:800; line-height:1.05; letter-spacing:-1.5px; margin-bottom:18px; }
.sec-body { font-size:16px; color:var(--muted); line-height:1.8; max-width:560px; font-weight:300; }

.btn { display:inline-flex; align-items:center; gap:10px; padding:14px 30px; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:2px; text-decoration:none; border-radius:2px; transition:all 0.3s ease; position:relative; overflow:hidden; cursor:pointer; border:none; }
.btn-shine::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent); transform:translateX(-100%); transition:transform 0.6s ease; }
.btn-shine:hover::before { transform:translateX(100%); }
.btn-cyan  { background:var(--accent); color:#fff; }
.btn-cyan:hover  { background:#4A8FD8; transform:translateY(-3px); box-shadow:0 8px 30px rgba(90,159,232,0.3); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-3px); }

/* ══════════════════════════════════════════════════════
   TICKER STRIP
══════════════════════════════════════════════════════ */
.ticker-strip {
  display:none; width:100%;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:rgba(90,159,232,0.02); position:relative; overflow:hidden; padding:10px 0;
}
.hero-ticker-label { font-family:var(--display); font-size:9px; font-weight:800; letter-spacing:6px; color:var(--accent); text-align:center; padding:0 0 6px; opacity:0.45; }
.ticker-strip-inner { overflow:hidden; }
.ticker-track { display:flex; gap:0; white-space:nowrap; animation:tickerRun 30s linear infinite; }
.ticker-item { font-family:var(--mono); font-size:10px; letter-spacing:3px; color:var(--muted); padding:0 24px; display:inline-flex; align-items:center; gap:16px; text-transform:uppercase; }
.ticker-item::after { content:'◆'; color:var(--accent); font-size:6px; }
@keyframes tickerRun { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
#hero { min-height:100vh; display:flex; align-items:center; padding:120px 0 100px; }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; }
#hero .sec-inner { width:100%; }
.hero-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center; width:100%; }
.hero-badge { font-family:var(--mono); font-size:9px; letter-spacing:3px; color:var(--success); padding:8px 14px; border:1px solid rgba(90,159,232,0.25); border-radius:2px; display:inline-block; margin-bottom:28px; background:rgba(90,159,232,0.05); }
.hero-title {
  font-family:var(--display); font-size:clamp(36px,7vw,84px); font-weight:800;
  line-height:1.0; margin-bottom:8px; position:relative;
  color:#fff; letter-spacing:-3px;
  text-shadow: 2px 0 rgba(90,159,232,0.5),-2px 0 rgba(90,159,232,0.2);
}
.hero-title.glitch-active { animation:glitchAnim 0.4s steps(1) forwards; }
@keyframes glitchAnim {
  0%  { text-shadow:2px 0 rgba(90,159,232,0.5),-2px 0 rgba(90,159,232,0.2); }
  10% { clip-path:inset(10% 0 60% 0); transform:translateX(-5px); }
  20% { clip-path:inset(50% 0 10% 0); transform:translateX(5px); }
  30% { clip-path:inset(0 0 70% 0);   transform:translateX(-3px); }
  40% { clip-path:inset(60% 0 5% 0);  transform:translateX(3px); }
  60% { clip-path:inset(0 0 0 0);     transform:translateX(0); }
  100%{ text-shadow:2px 0 rgba(90,159,232,0.5),-2px 0 rgba(90,159,232,0.2); clip-path:none; }
}
.hero-title-2 { font-family:var(--display); font-size:clamp(14px,2.5vw,28px); font-weight:400; color:var(--accent); letter-spacing:6px; margin-bottom:24px; }
.hero-desc { font-size:16px; color:var(--muted); line-height:1.85; margin-bottom:36px; max-width:480px; font-weight:300; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats { display:flex; gap:0; border:1px solid var(--border); overflow:hidden; border-radius:2px; }
.stat-box { flex:1; padding:20px 16px; text-align:center; border-right:1px solid var(--border); position:relative; overflow:hidden; transition:background 0.3s; }
.stat-box:last-child { border-right:none; }
.stat-box:hover { background:rgba(90,159,232,0.04); }
.stat-box::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transition:transform 0.4s ease; }
.stat-box:hover::before { transform:scaleX(1); }
.stat-n { font-family:var(--display); font-size:22px; font-weight:800; color:var(--accent); display:block; margin-bottom:6px; }
.stat-l { font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--muted); }

/* ══════════════════════════════════════════════════════
   CINEMATIC 3D IMAGE SYSTEM — PREMIUM EDITION
══════════════════════════════════════════════════════ */

/* ── HERO-RIGHT: Ambient glow orb behind image ── */
.hero-right {
  position: relative;
  z-index: 1;
}

/* ── PERSPECTIVE WRAPPER ── */
.cin-wrap {
  perspective: 1100px;
  perspective-origin: 50% 50%;
  position: relative;
  z-index: 1;
}

/* ── TILTABLE CONTAINER ── */
.cin-tilt {
  transform-style: preserve-3d;
  transition: transform 0.07s linear;
  will-change: transform;
  border-radius: 6px;
  position: relative;
}

/* ── SPECULAR HIGHLIGHT — cinematic lens glare ── */
.cin-tilt::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(
    ellipse 80% 65% at var(--mx, 30%) var(--my, 20%),
    rgba(200,224,255,0.20) 0%,
    rgba(90,159,232,0.10)  35%,
    transparent 65%
  );
}
.cin-tilt:hover::after { opacity: 1; }


/* ── PREVIEW FRAME ── */
.preview-frame {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow:
    0 30px 90px rgba(0,0,0,0.75),
    0 70px 150px rgba(0,0,0,0.45);
  transition: box-shadow 0.55s ease;
}
.cin-tilt:hover .preview-frame {
  box-shadow:
    0 30px 90px rgba(0,0,0,0.88),
    0 70px 150px rgba(0,0,0,0.55);
}

/* Top edge light line + edge vignettes */
.preview-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(90,159,232,0.22) 0px, rgba(90,159,232,0.05) 1px, transparent 3px),
    radial-gradient(ellipse at 50% 100%, rgba(7,7,7,0.62) 0%, transparent 65%),
    radial-gradient(ellipse at 0%   50%, rgba(7,7,7,0.48) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(7,7,7,0.48) 0%, transparent 50%),
    radial-gradient(ellipse at 50%   0%, rgba(7,7,7,0.30) 0%, transparent 45%);
  pointer-events: none;
  z-index: 2;
  border-radius: 6px;
}

/* Scanlines + animated shimmer sweep */
.preview-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 2px,
      rgba(0,0,0,0.055) 2px, rgba(0,0,0,0.055) 3px
    );
  pointer-events: none;
  z-index: 3;
  border-radius: 6px;
  opacity: 0.75;
}

/* ── HERO IMAGE — breathing + power-on entrance ── */
.preview-frame img {
  width: 100%;
  display: block;
  border-radius: 6px;
  filter: brightness(0.92) contrast(1.06) saturate(1.04);
  transition: filter 0.55s ease;
  animation: imgBreath 9s ease-in-out infinite;
}
@keyframes imgBreath {
  0%,100% { filter: brightness(0.92) contrast(1.06) saturate(1.04); }
  50%     { filter: brightness(0.97) contrast(1.07) saturate(1.08); }
}
.cin-tilt:hover .preview-frame img {
  filter: brightness(1.02) contrast(1.09) saturate(1.12);
  animation: none;
}

/* Power-on "screen boot" animation for hero image entrance */
.hero-right.fade-scale.in .preview-frame {
  animation: powerOn 1.4s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
@keyframes powerOn {
  0%   { filter: brightness(0) blur(4px); }
  12%  { filter: brightness(3.5) blur(0px) saturate(0); }
  28%  { filter: brightness(1.4) blur(0px) saturate(0.3); }
  55%  { filter: brightness(1.08) blur(0px) saturate(0.8); }
  100% { filter: brightness(1)   blur(0px) saturate(1); }
}

/* ══════════════════════════════════════════════════════
   STORY
══════════════════════════════════════════════════════ */
#story { padding:160px 0; }
#story-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0.3; }
.story-chapters { display:flex; flex-direction:column; gap:120px; }
.chapter-row { display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
.chapter-row.flip { direction:rtl; }
.chapter-row.flip > * { direction:ltr; }

/* ── Chapter visual — cinematic with clip-path reveal ── */
.chapter-visual {
  position: relative;
  overflow: visible;
}

.chapter-visual .cin-wrap { width: 100%; }
.chapter-visual .cin-tilt { width: 100%; }

.chapter-visual-img-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  transition: box-shadow 0.55s ease;
  /* Clip-path reveal — from left for fade-left, from right for fade-right */
}

/* Clip-path reveal animations triggered by .in state */
.chapter-visual.fade-left  .chapter-visual-img-wrap { clip-path: inset(0 100% 0 0 round 6px); }
.chapter-visual.fade-right .chapter-visual-img-wrap { clip-path: inset(0 0 0 100% round 6px); }
.chapter-visual.fade-left.in  .chapter-visual-img-wrap {
  clip-path: inset(0 0% 0 0% round 6px);
  transition: clip-path 1.05s cubic-bezier(0.16,1,0.3,1) 0.05s, box-shadow 0.55s ease;
}
.chapter-visual.fade-right.in .chapter-visual-img-wrap {
  clip-path: inset(0 0% 0 0% round 6px);
  transition: clip-path 1.05s cubic-bezier(0.16,1,0.3,1) 0.05s, box-shadow 0.55s ease;
}

.cin-tilt:hover .chapter-visual-img-wrap {
  box-shadow: 0 30px 80px rgba(0,0,0,0.80);
}

.chapter-visual-img-wrap img {
  width: 100%;
  display: block;
  border-radius: 6px;
  filter: brightness(0.93) contrast(1.06) saturate(1.02);
  transition: filter 0.6s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1);
  will-change: filter, transform;
}
.cin-tilt:hover .chapter-visual-img-wrap img {
  filter: brightness(0.99) contrast(1.10) saturate(1.06);
  transform: scale(1.018);
}

/* Top edge accent line + edge blend */
.chapter-visual-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(90,159,232,0.20) 0px, rgba(90,159,232,0.06) 1px, transparent 3px),
    radial-gradient(ellipse at 50% 100%, rgba(7,7,7,0.68) 0%, transparent 60%),
    radial-gradient(ellipse at 0%   50%, rgba(7,7,7,0.52) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(7,7,7,0.52) 0%, transparent 50%),
    radial-gradient(ellipse at 50%   0%, rgba(7,7,7,0.34) 0%, transparent 45%);
  pointer-events: none;
  z-index: 2;
  border-radius: 6px;
}
.chapter-visual-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,transparent 0px,transparent 2px,rgba(0,0,0,0.05) 2px,rgba(0,0,0,0.05) 3px);
  pointer-events: none;
  z-index: 3;
  opacity: 0.65;
  border-radius: 6px;
}

/* Chapter info */
.chapter-info {}
.ch-num { font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--accent); margin-bottom:20px; opacity:0.7; }
.ch-title { font-family:var(--display); font-size:clamp(20px,3vw,34px); font-weight:800; line-height:1.1; margin-bottom:20px; letter-spacing:-0.5px; }
.ch-body { font-size:15px; color:var(--muted); line-height:1.9; margin-bottom:28px; font-weight:300; }
.ch-tags { display:flex; gap:8px; flex-wrap:wrap; }
.ch-tag { font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--accent); padding:5px 12px; border:1px solid rgba(90,159,232,0.2); border-radius:2px; background:rgba(90,159,232,0.04); }

/* ══════════════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════════════ */
#features { padding:160px 0; }
#feat-canvas { position:absolute; inset:0; width:100%; height:100%; }
.feat-header { text-align:center; margin-bottom:80px; }
.feat-header .sec-body { margin:0 auto; }
.feat-bento { display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:auto; gap:12px; }
.feat-card { background:var(--surface); border:1px solid var(--border); border-radius:3px; padding:36px 32px; position:relative; overflow:hidden; transition:border-color 0.3s,background 0.3s,transform 0.3s; }
.feat-card:hover { border-color:rgba(90,159,232,0.28); background:var(--surface2); transform:translateY(-4px); }
.feat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),rgba(90,159,232,0.2)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease; }
.feat-card:hover::before { transform:scaleX(1); }
.fc1{grid-column:span 5;} .fc2{grid-column:span 4;} .fc3{grid-column:span 3;}
.fc4{grid-column:span 3;} .fc5{grid-column:span 5;} .fc6{grid-column:span 4;}
.fc7{grid-column:span 12;display:flex;align-items:center;gap:60px;border-color:rgba(90,159,232,0.2);background:rgba(90,159,232,0.025);}
.fc7:hover{transform:none;}
.fc8{grid-column:span 6;} .fc9{grid-column:span 6;}
.fc10{grid-column:span 12;display:flex;align-items:center;gap:60px;border-color:rgba(255,255,255,0.1);background:rgba(255,255,255,0.01);}
.fc10:hover{transform:none;border-color:rgba(200,200,200,0.2);}
.fc10::before{background:linear-gradient(90deg,rgba(200,200,200,0.5),rgba(200,200,200,0.1));}
.feat-icon-wrap { width:52px; height:52px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:20px; position:relative; overflow:hidden; flex-shrink:0; }
.fi-acc   { background:rgba(90,159,232,0.08); border:1px solid rgba(90,159,232,0.2); color:var(--accent); }
.fi-white { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.8); }
.fi-soft  { background:rgba(168,200,240,0.07); border:1px solid rgba(168,200,240,0.2); color:var(--accent2); }
.fi-warn  { background:rgba(200,200,200,0.06); border:1px solid rgba(200,200,200,0.15); color:var(--warn); }
.feat-title { font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:0.5px; margin-bottom:10px; }
.feat-desc  { font-size:14px; color:var(--muted); line-height:1.75; font-weight:300; }
.fc7 .feat-icon-wrap,.fc10 .feat-icon-wrap { width:64px; height:64px; font-size:28px; margin-bottom:0; }
.fc7 .feat-title,.fc10 .feat-title { font-size:18px; margin-bottom:10px; }
.feat-pill-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.feat-pill { font-family:var(--mono); font-size:9px; letter-spacing:2px; padding:4px 10px; border:1px solid var(--border); border-radius:1px; color:var(--muted); }
.feat-big-num { font-family:var(--display); font-size:32px; font-weight:800; color:var(--accent); margin-bottom:4px; }
.feat-big-lbl { font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--muted); }

/* ══════════════════════════════════════════════════════
   APIS
══════════════════════════════════════════════════════ */
#apis { padding:160px 0; }
#apis-canvas { position:absolute; inset:0; width:100%; height:100%; }
.api-header { text-align:center; margin-bottom:80px; }
.api-split { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.api-panel { border:1px solid; border-radius:3px; padding:56px 48px; position:relative; overflow:hidden; transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.api-panel:hover { transform:translateY(-8px); }
.api-panel.vel { border-color:rgba(90,159,232,0.2); background:linear-gradient(160deg,rgba(90,159,232,0.04) 0%,var(--surface) 50%); }
.api-panel.xen { border-color:rgba(255,255,255,0.1); background:linear-gradient(160deg,rgba(255,255,255,0.03) 0%,var(--surface) 50%); }
.api-panel::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.api-panel.vel::before { background:linear-gradient(90deg,var(--accent),transparent); }
.api-panel.xen::before { background:linear-gradient(90deg,rgba(255,255,255,0.5),transparent); }
.api-badge-new { font-family:var(--mono); font-size:8px; letter-spacing:2px; display:inline-block; padding:5px 10px; border-radius:2px; margin-bottom:24px; }
.ab-vel { background:rgba(90,159,232,0.08); color:var(--accent); border:1px solid rgba(90,159,232,0.2); }
.ab-xen { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.12); }
.api-name { font-family:var(--display); font-size:36px; font-weight:800; margin-bottom:10px; letter-spacing:-1px; }
.api-vel .api-name { color:var(--accent); } .api-xen .api-name { color:#fff; }
.api-tagline { font-size:15px; color:var(--muted); line-height:1.7; margin-bottom:40px; font-weight:300; }
.api-features { display:flex; flex-direction:column; gap:16px; }
.api-feat { display:flex; align-items:flex-start; gap:14px; }
.api-feat-icon { width:26px; height:26px; border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; margin-top:2px; }
.afi-vel { background:rgba(90,159,232,0.1); color:var(--accent); }
.afi-xen { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.7); }
.api-feat-title { font-family:var(--display); font-size:14px; font-weight:700; margin-bottom:3px; }
.api-feat-desc  { font-size:13px; color:var(--muted); line-height:1.55; font-weight:300; }
.api-panel .api-corners { position:absolute; inset:0; pointer-events:none; }
.api-panel .ca { position:absolute; width:18px; height:18px; }
.api-panel.vel .ca { border-color:var(--accent) !important; }
.api-panel.xen .ca { border-color:rgba(255,255,255,0.3) !important; }
.api-compare { margin-top:60px; border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.api-compare-head { display:grid; grid-template-columns:2fr 1fr 1fr; background:rgba(90,159,232,0.04); border-bottom:1px solid var(--border); }
.ach { font-family:var(--mono); font-size:10px; letter-spacing:3px; padding:16px 20px; }
.ach:not(:last-child) { border-right:1px solid var(--border); }
.api-compare-row { display:grid; grid-template-columns:2fr 1fr 1fr; border-bottom:1px solid var(--border); }
.api-compare-row:last-child { border-bottom:none; }
.api-compare-row:hover { background:rgba(90,159,232,0.02); }
.acr { font-size:14px; padding:14px 20px; font-weight:300; }
.acr:not(:last-child) { border-right:1px solid var(--border); }
.acr.feature { color:var(--muted); } .acr.check { color:var(--success); text-align:center; } .acr.cross { color:rgba(255,100,100,0.5); text-align:center; }

/* ══════════════════════════════════════════════════════
   REQUIREMENTS
══════════════════════════════════════════════════════ */
#requirements { padding:160px 0; }
#req-canvas { position:absolute; inset:0; width:100%; height:100%; }
.req-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:60px; }
.req-col-title { font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:3px; color:var(--accent); margin-bottom:24px; display:flex; align-items:center; gap:10px; }
.req-col-title::after { content:''; flex:1; height:1px; background:var(--border); }
.req-item { display:flex; align-items:center; gap:16px; padding:16px 18px; border:1px solid var(--border); border-radius:2px; margin-bottom:10px; background:var(--surface); transition:border-color 0.3s,background 0.3s; position:relative; overflow:hidden; }
.req-item:hover { border-color:rgba(90,159,232,0.25); background:var(--surface2); }
.req-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transition:transform 0.3s; transform-origin:bottom; }
.req-item:hover::before { transform:scaleY(1); }
.req-icon { width:34px; height:34px; border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; background:rgba(90,159,232,0.06); color:var(--accent); }
.req-info { flex:1; min-width:0; }
.req-label { font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:1px; margin-bottom:3px; }
.req-val   { font-size:13px; color:var(--muted); font-weight:300; }

/* Dependency download button */
.req-dl-btn {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:9px; letter-spacing:2px; font-weight:500;
  color:var(--accent); border:1px solid rgba(90,159,232,0.22);
  background:rgba(90,159,232,0.05); padding:7px 13px; border-radius:2px;
  text-decoration:none; white-space:nowrap; flex-shrink:0;
  transition:all 0.2s ease; cursor:pointer;
}
.req-dl-btn:hover {
  background:rgba(90,159,232,0.14); border-color:rgba(90,159,232,0.5);
  color:#fff; transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(90,159,232,0.2);
}
.req-dl-btn i { font-size:10px; }

.av-notice { margin-top:40px; border:1px solid rgba(200,200,200,0.15); border-radius:2px; padding:24px 28px; background:rgba(200,200,200,0.02); display:flex; gap:16px; align-items:flex-start; }
.av-icon { font-size:18px; color:var(--warn); flex-shrink:0; padding-top:2px; }
.av-title { font-family:var(--display); font-size:12px; font-weight:700; color:var(--warn); margin-bottom:6px; letter-spacing:1px; }
.av-body  { font-size:14px; color:var(--muted); line-height:1.65; font-weight:300; }

/* ══════════════════════════════════════════════════════
   DOWNLOAD
══════════════════════════════════════════════════════ */
#download { padding:160px 0; }
#dl-canvas { position:absolute; inset:0; width:100%; height:100%; }
.dl-card { border:1px solid rgba(90,159,232,0.18); border-radius:3px; padding:80px; text-align:center; background:var(--surface); position:relative; overflow:hidden; max-width:800px; margin:0 auto; box-shadow:0 0 80px rgba(90,159,232,0.05); }
.dl-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(90,159,232,0.06) 0%,transparent 70%); pointer-events:none; }
.dl-version { font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--success); margin-bottom:20px; display:inline-block; padding:6px 14px; border:1px solid rgba(90,159,232,0.2); border-radius:2px; background:rgba(90,159,232,0.04); }
.dl-title { font-family:var(--display); font-size:clamp(24px,5vw,56px); font-weight:800; color:#fff; letter-spacing:-2px; margin-bottom:12px; line-height:1.1; }
.dl-title span { color:var(--accent); }
.dl-sub { font-size:16px; color:var(--muted); margin-bottom:40px; font-weight:300; }
.dl-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.dl-info { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
.dl-info-item { font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.dl-info-item i { color:var(--accent); }
.dl-corners .ca { position:absolute; width:24px; height:24px; }
.ca-tl2{top:16px;left:16px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);}
.ca-tr2{top:16px;right:16px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);}
.ca-bl2{bottom:16px;left:16px;border-bottom:2px solid var(--accent);border-left:2px solid var(--accent);}
.ca-br2{bottom:16px;right:16px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);}

.dl-disclaimer { margin-top:40px; border:1px solid rgba(90,159,232,0.15); border-radius:3px; overflow:hidden; text-align:left; background:rgba(90,159,232,0.02); }
.dl-disclaimer-header { display:flex; align-items:center; gap:12px; padding:14px 24px; border-bottom:1px solid rgba(90,159,232,0.1); background:rgba(90,159,232,0.04); font-family:var(--mono); font-size:10px; letter-spacing:3px; color:var(--accent); }
.dl-disclaimer-header i { font-size:12px; opacity:0.8; }
.dl-disclaimer-brand { margin-left:auto; font-size:9px; letter-spacing:2px; color:var(--muted); font-family:var(--mono); }
.dl-disclaimer-body { padding:24px 28px; font-size:13px; color:var(--muted); line-height:1.85; font-weight:300; }
.dl-disclaimer-body p { margin-bottom:14px; }
.dl-disclaimer-body p:last-child { margin-bottom:0; }
.dl-disclaimer-body strong { color:rgba(255,255,255,0.6); font-weight:500; }
.dl-disclaimer-body ul { list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:8px; }
.dl-disclaimer-body ul li { display:flex; align-items:flex-start; gap:10px; padding-left:4px; }
.dl-disclaimer-body ul li::before { content:'—'; color:var(--accent); opacity:0.5; flex-shrink:0; font-size:10px; margin-top:2px; }
.dl-disclaimer-accept { font-size:11px; color:rgba(90,159,232,0.5) !important; letter-spacing:0.3px; border-top:1px solid rgba(255,255,255,0.04); padding-top:14px; margin-top:14px !important; }

/* ══════════════════════════════════════════════════════
   DOWNLOAD MODAL
══════════════════════════════════════════════════════ */
.dl-modal-overlay { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,0.75); backdrop-filter:blur(10px) saturate(1.2); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.dl-modal-overlay.open { opacity:1; pointer-events:all; }
.dl-modal { width:min(560px,92vw); background:var(--surface); border:1px solid rgba(90,159,232,0.2); border-radius:4px; position:relative; overflow:hidden; transform:translateY(24px) scale(0.97); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); box-shadow:0 0 0 1px rgba(90,159,232,0.06),0 40px 80px rgba(0,0,0,0.7),0 0 60px rgba(90,159,232,0.05); }
.dl-modal-overlay.open .dl-modal { transform:translateY(0) scale(1); }
.dl-modal::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),rgba(90,159,232,0.3),transparent); }
.dl-modal-header { padding:28px 32px 20px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.dl-modal-eyebrow { font-family:var(--mono); font-size:9px; letter-spacing:4px; color:var(--accent); margin-bottom:8px; }
.dl-modal-title { font-family:var(--display); font-size:20px; font-weight:800; color:#fff; letter-spacing:-0.5px; }
.dl-modal-sub { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:1px; margin-top:4px; }
.dl-modal-close { width:32px; height:32px; border:1px solid var(--border); border-radius:2px; background:none; color:var(--muted); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all 0.2s; margin-top:2px; }
.dl-modal-close:hover { border-color:var(--accent); color:var(--accent); }
.dl-modal-body { padding:24px 32px 32px; display:flex; flex-direction:column; gap:12px; }
.dl-modal-note { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:1px; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.dl-modal-note::before { content:''; width:16px; height:1px; background:var(--border); flex-shrink:0; }
.dl-service { display:flex; align-items:center; gap:20px; padding:18px 22px; border:1px solid var(--border); border-radius:3px; background:var(--surface2); cursor:pointer; text-decoration:none; transition:border-color 0.25s,background 0.25s,transform 0.25s; position:relative; overflow:hidden; }
.dl-service:hover { border-color:rgba(90,159,232,0.35); background:rgba(90,159,232,0.04); transform:translateX(4px); }
.dl-service::after { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:bottom; transition:transform 0.3s ease; }
.dl-service:hover::after { transform:scaleY(1); }
.dl-service-icon { width:44px; height:44px; border-radius:3px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; border:1px solid; }
.dl-service-icon.lv  { background:rgba(255,165,0,0.06);  border-color:rgba(255,165,0,0.2);  color:#FFA500; }
.dl-service-icon.wi  { background:rgba(90,159,232,0.06); border-color:rgba(90,159,232,0.2); color:var(--accent); }
.dl-service-icon.ld  { background:rgba(168,200,240,0.06);border-color:rgba(168,200,240,0.2);color:var(--accent2); }
.dl-service-info { flex:1; min-width:0; }
.dl-service-name { font-family:var(--display); font-size:14px; font-weight:700; color:#fff; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-service-desc { font-size:12px; color:var(--muted); font-weight:300; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-service-arrow { color:var(--muted); font-size:11px; flex-shrink:0; transition:color 0.2s,transform 0.2s; }
.dl-service:hover .dl-service-arrow { color:var(--accent); transform:translateX(3px); }
.dl-modal-footer { padding:16px 32px 20px; border-top:1px solid var(--border); font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:1px; text-align:center; line-height:1.7; }

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
footer { border-top:1px solid var(--border); padding:60px 0 40px; }
.footer-inner { max-width:1400px; margin:0 auto; padding:0 56px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-brand p { font-size:13px; color:var(--muted); line-height:1.75; max-width:280px; margin-bottom:20px; font-weight:300; }
.footer-socials { display:flex; gap:12px; }
.social-btn { width:36px; height:36px; border:1px solid var(--border); border-radius:2px; display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; transition:all 0.2s; font-size:13px; }
.social-btn:hover { border-color:var(--accent); color:var(--accent); }
.footer-col h4 { font-family:var(--mono); font-size:10px; letter-spacing:3px; color:var(--accent); margin-bottom:20px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul a { font-size:13px; color:var(--muted); text-decoration:none; transition:color 0.2s; display:flex; align-items:center; gap:6px; font-weight:300; }
.footer-col ul a::before { content:'›'; color:var(--accent); opacity:0; transition:opacity 0.2s; }
.footer-col ul a:hover { color:var(--text); }
.footer-col ul a:hover::before { opacity:1; }
.footer-bottom { max-width:1400px; margin:0 auto; padding:24px 56px 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-copy { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:1px; }
.footer-brand-logo { display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; text-decoration:none; }
.footer-brand-name { font-family:var(--display); font-size:14px; font-weight:700; color:#fff; letter-spacing:1px; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .hero-grid,.api-split,.req-grid { grid-template-columns:1fr; }
  .chapter-row,.chapter-row.flip { grid-template-columns:1fr; direction:ltr; }
  .feat-bento { grid-template-columns:1fr 1fr; }
  .fc1,.fc2,.fc3,.fc4,.fc5,.fc6,.fc7,.fc8,.fc9 { grid-column:span 1; }
  .fc7,.fc10 { grid-column:span 2; }
  .footer-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .sec-inner { padding:0 20px; }
  .nav-links { display:none; }
  #nav.visible { padding:0 16px; }
  .hero-stats { flex-direction:column; }
  .feat-bento { grid-template-columns:1fr; }
  .fc7,.fc10 { flex-direction:column; grid-column:span 1 !important; }
  .api-split,.req-grid { grid-template-columns:1fr; }
  .dl-card { padding:48px 24px; }
  .footer-inner { grid-template-columns:1fr; padding:0 20px; }
  .footer-bottom { padding:20px 20px 0; }
  .req-item { flex-wrap:wrap; }
  .req-dl-btn { margin-left:auto; }
  .chapter-visual-img-wrap, .chapter-visual-img-wrap img { min-height:unset; }
}

/* ══════════════════════════════════════════════════════
   MATTE BLACK / BRUSHED SILVER THEME
══════════════════════════════════════════════════════ */
:root {
  --accent:#c7cbd1;
  --accent2:#8f959d;
  --success:#d9dde2;
  --warn:#b8bdc4;
  --bg:#050505;
  --surface:#0c0c0d;
  --surface2:#141416;
  --border:rgba(224,228,234,.11);
  --text:#f1f2f3;
  --muted:#858990;
  --glass:rgba(11,11,12,.82);
}

html { scrollbar-color:rgba(190,195,202,.42) #050505; }
body {
  background:
    radial-gradient(circle at 15% 10%,rgba(210,214,220,.055),transparent 30rem),
    radial-gradient(circle at 88% 30%,rgba(130,134,140,.045),transparent 34rem),
    linear-gradient(180deg,#040404 0%,#09090a 48%,#050505 100%);
}
body::before {
  opacity:.56;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
}
body::after {
  opacity:.5;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.008) 3px,rgba(255,255,255,.008) 4px),
    repeating-linear-gradient(90deg,transparent,transparent 7px,rgba(255,255,255,.004) 7px,rgba(255,255,255,.004) 8px);
}
::selection { background:rgba(205,210,217,.25); color:#fff; }

.ambient-orb.a1 { background:#c3c7cc; opacity:.035; }
.ambient-orb.a2 { background:#777c82; opacity:.04; }
.scroll-progress {
  background:linear-gradient(90deg,#5e6268,#f2f3f4,#8c9198);
  box-shadow:0 0 12px rgba(220,224,230,.32);
}

#nav {
  background:linear-gradient(135deg,rgba(18,18,20,.92),rgba(7,7,8,.87));
  border-color:rgba(230,232,236,.13);
  box-shadow:0 18px 60px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.055);
}
#nav.scrolled {
  background:rgba(7,7,8,.95);
  border-color:rgba(210,214,220,.22);
}
.nav-logo img,.footer-brand-logo img {
  filter:grayscale(1) brightness(1.25) drop-shadow(0 0 5px rgba(230,232,236,.24)) !important;
}
.nav-logo-dot {
  background:#d8dbe0;
  box-shadow:0 0 9px rgba(220,224,230,.58);
}
.nav-links a:hover,.nav-links a.active {
  color:#fff;
  background:rgba(225,228,232,.075);
}
.nav-links a.active::after {
  background:linear-gradient(90deg,transparent,#e5e7ea,transparent);
}
.lang-toggle button.active {
  background:linear-gradient(145deg,#d5d8dc,#777c83);
  color:#0a0a0b;
  box-shadow:0 4px 16px rgba(205,210,217,.14);
}

#welcome {
  background:
    radial-gradient(circle at 50% 42%,rgba(215,218,223,.08),transparent 30rem),
    #030303;
}
#welcome::before { background:conic-gradient(from 180deg at 50% 50%,transparent,rgba(220,223,228,.055),transparent 22%); }
.w-title-3d {
  background:linear-gradient(110deg,#fff 10%,#d9dce0 48%,#858a91 88%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:0 0 55px rgba(220,223,228,.11);
}
.w-bootline::after { background:linear-gradient(90deg,transparent,#f0f1f2,#858a90); }

#hero::before {
  background:radial-gradient(circle,rgba(210,214,220,.07),rgba(125,129,135,.025) 44%,transparent 70%);
}
.hero-kicker::before {
  background:#d6d9de;
  box-shadow:0 0 9px rgba(218,221,225,.42);
}
.hero-badge,.dl-version {
  color:#d9dce0;
  border-color:rgba(218,221,225,.16);
  background:rgba(218,221,225,.035);
}
.hero-title {
  background:linear-gradient(105deg,#fff 4%,#d6d9dd 48%,#7d8289 96%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 18px 38px rgba(255,255,255,.055));
}
.hero-title-2 { color:#b7bbc1; }

.btn-cyan {
  background:linear-gradient(145deg,#f0f1f2 0%,#b7bbc0 52%,#777c82 100%);
  color:#080809;
  box-shadow:0 12px 32px rgba(215,218,223,.11),inset 0 1px 0 rgba(255,255,255,.72);
}
.btn-cyan:hover {
  background:linear-gradient(145deg,#fff,#aeb2b8);
  color:#050505;
  box-shadow:0 18px 42px rgba(220,223,228,.18);
}
.btn-ghost { background:rgba(255,255,255,.025); }
.btn-ghost:hover { color:#f2f3f4; border-color:#aeb3ba; }
.proof-chip { background:rgba(12,12,13,.72); }
.proof-chip i,.preview-toolbar .live { color:#d7dae0; }
.preview-toolbar .live::before {
  background:#d7dae0;
  box-shadow:0 0 7px rgba(220,223,228,.45);
}

.preview-frame,.chapter-visual-img-wrap {
  border-color:rgba(225,228,233,.14);
  background:#09090a;
  box-shadow:0 45px 120px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.022),0 0 70px rgba(220,223,228,.035);
}
.preview-frame::before,.chapter-visual-img-wrap::before {
  background:
    linear-gradient(180deg,rgba(230,232,236,.12) 0,rgba(230,232,236,.025) 1px,transparent 3px),
    radial-gradient(ellipse at 50% 100%,rgba(5,5,5,.7),transparent 62%),
    radial-gradient(ellipse at 0 50%,rgba(5,5,5,.55),transparent 50%),
    radial-gradient(ellipse at 100% 50%,rgba(5,5,5,.55),transparent 50%);
}
.preview-toolbar {
  background:linear-gradient(180deg,rgba(28,28,30,.98),rgba(12,12,13,.98));
}
.preview-toolbar .traffic {
  background:#8b8f95;
  box-shadow:14px 0 #b5b8bd,28px 0 #e1e3e6;
}
.preview-frame img,.chapter-visual-img-wrap img {
  filter:grayscale(.78) brightness(.91) contrast(1.08) saturate(.25);
}
.cin-tilt:hover .preview-frame img,.cin-tilt:hover .chapter-visual-img-wrap img {
  filter:grayscale(.55) brightness(.98) contrast(1.1) saturate(.35);
}

.sec-eyebrow,.ch-num,.ch-tag,.ticker-item::after { color:#b9bdc3; }
.sec-eyebrow::before { background:linear-gradient(90deg,transparent,#c8cbd0); }
section::after { background:linear-gradient(90deg,transparent,rgba(220,223,228,.1),transparent); }

.module-link,.feat-card,.req-item {
  background:
    radial-gradient(420px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(230,232,236,.045),transparent 42%),
    linear-gradient(145deg,rgba(19,19,21,.98),rgba(8,8,9,.98));
  border-color:rgba(222,225,230,.095);
}
.module-link::before { background:radial-gradient(circle at 70% 0%,rgba(225,228,232,.08),transparent 55%); }
.module-link:hover,.feat-card:hover,.req-item:hover {
  border-color:rgba(215,218,223,.24);
  box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 35px rgba(225,228,232,.025),inset 0 1px 0 rgba(255,255,255,.05);
}
.module-index,.module-icon,.module-arrow { color:#c3c6cb; }
.module-icon,.feat-icon-wrap,.req-icon {
  border-color:rgba(215,218,223,.14) !important;
  background:rgba(215,218,223,.045) !important;
  color:#c8cbd0 !important;
}
.feat-card::before { background:linear-gradient(90deg,transparent,#777b81,#e1e3e6,#777b81,transparent); }
.feat-pill { color:#8f949b; }
.fc7,.fc10 { background:linear-gradient(110deg,rgba(215,218,223,.055),rgba(9,9,10,.98)); }

.api-panel.vel,.api-panel.xen {
  border-color:rgba(220,223,228,.12);
  background:
    radial-gradient(circle at 12% 0%,rgba(225,228,232,.075),transparent 38%),
    linear-gradient(145deg,#151517,#080809);
}
.api-panel::before,.api-panel.vel::before,.api-panel.xen::before {
  background:linear-gradient(90deg,#d9dce0,rgba(160,164,170,.35),transparent);
}
.api-panel.vel .ca,.api-panel.xen .ca { border-color:rgba(215,218,223,.34) !important; }
.ab-vel,.ab-xen {
  background:rgba(220,223,228,.04);
  border-color:rgba(220,223,228,.14);
  color:#c4c7cc;
}
.api-vel,.api-xen,.api-vel .api-name,.api-xen .api-name { color:#eceef0; }
.afi-vel,.afi-xen { background:rgba(220,223,228,.06); color:#d5d8dc; }
.api-compare { background:rgba(8,8,9,.78); border-color:rgba(220,223,228,.1); }
.api-compare-head { background:rgba(220,223,228,.035); }
.acr.check { color:#d0d3d7; }
.acr.cross { color:#777b81; }

.req-item::before { background:#c8cbd0; }
.req-dl-btn {
  color:#c7cbd0;
  border-color:rgba(215,218,223,.16);
  background:rgba(215,218,223,.035);
}
.req-dl-btn:hover { background:rgba(215,218,223,.11); border-color:rgba(225,228,232,.34); }
.av-notice { background:linear-gradient(135deg,rgba(215,218,223,.04),rgba(9,9,10,.94)); border-color:rgba(215,218,223,.12); }

.dl-card {
  background:
    radial-gradient(circle at 50% 0%,rgba(225,228,232,.085),transparent 43%),
    linear-gradient(145deg,rgba(19,19,21,.98),rgba(7,7,8,.99));
  border-color:rgba(220,223,228,.17);
  box-shadow:0 50px 140px rgba(0,0,0,.58),0 0 80px rgba(220,223,228,.035),inset 0 1px 0 rgba(255,255,255,.055);
}
.dl-title span {
  background:linear-gradient(90deg,#f0f1f2,#858a91);
  -webkit-background-clip:text; background-clip:text;
}
.dl-corners .ca { border-color:#b7bbc1 !important; }
.dl-disclaimer { border-color:rgba(215,218,223,.1); background:rgba(3,3,3,.48); }
.dl-disclaimer-header { background:rgba(215,218,223,.035); border-color:rgba(215,218,223,.08); color:#bfc3c8; }
.dl-service { background:#121214; }
.dl-service:hover { background:rgba(215,218,223,.04); border-color:rgba(215,218,223,.22); }
.dl-service-icon.lv,.dl-service-icon.wi,.dl-service-icon.ld {
  background:rgba(215,218,223,.045);
  border-color:rgba(215,218,223,.14);
  color:#c9ccd1;
}
.dl-service::after { background:#c8cbd0; }
.dl-service:hover .dl-service-arrow { color:#d8dbe0; }

footer { background:rgba(3,3,4,.78); border-color:rgba(220,223,228,.09); }
.social-btn:hover { border-color:#9ca1a8; color:#e1e3e6; }

/* ══════════════════════════════════════════════════════
   SENTENCE PREMIUM VISUAL UPGRADE
══════════════════════════════════════════════════════ */
:root {
  --accent:#5A9FE8;
  --accent2:#A8C8F0;
  --success:#7BB8F0;
  --warn:#C8C8C8;
  --bg:#06080c;
  --surface:#0b0e13;
  --surface2:#121720;
  --border:rgba(140,180,225,.11);
  --text:#f7f9ff;
  --muted:#8790a5;
  --glass:rgba(8,12,18,.76);
  --ease:cubic-bezier(.16,1,.3,1);
}

html { scrollbar-color:rgba(90,159,232,.5) #060810; }
body {
  min-height:100%;
  background:
    radial-gradient(circle at 15% 12%,rgba(65,125,190,.13),transparent 28rem),
    radial-gradient(circle at 88% 28%,rgba(95,145,195,.09),transparent 30rem),
    linear-gradient(180deg,#05070d 0%,#080b10 48%,#05070d 100%);
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,black,transparent 84%);
}
::selection { background:rgba(110,168,255,.32); color:#fff; }

.site-ambient { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.ambient-orb { position:absolute; width:34rem; height:34rem; border-radius:50%; filter:blur(100px); opacity:.12; animation:ambientDrift 18s ease-in-out infinite alternate; }
.ambient-orb.a1 { left:-18rem; top:15vh; background:#3978b8; }
.ambient-orb.a2 { right:-20rem; top:48vh; background:#5a83ad; animation-delay:-7s; }
@keyframes ambientDrift { to { transform:translate3d(5vw,8vh,0) scale(1.12); } }

.scroll-progress {
  position:fixed; z-index:10002; top:0; left:0; width:100%; height:2px;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,#8fc7f5,var(--accent),#bfd8f3);
  box-shadow:0 0 18px rgba(90,159,232,.72);
}

#nav {
  top:18px; width:min(1240px,calc(100% - 32px)); min-height:64px;
  border-radius:18px; padding:0 12px 0 18px;
  background:linear-gradient(135deg,rgba(15,20,32,.86),rgba(7,10,17,.72));
  border-color:rgba(168,190,255,.14);
  box-shadow:0 18px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
}
#nav.visible { height:64px; }
#nav.scrolled { background:rgba(7,10,17,.92); border-color:rgba(110,168,255,.28); box-shadow:0 20px 70px rgba(0,0,0,.5); }
.nav-logo { padding-right:16px; }
.nav-logo img { height:28px; }
.nav-logo-dot { background:var(--success); box-shadow:0 0 12px var(--success); }
.nav-links { gap:2px; padding:5px; border:1px solid rgba(255,255,255,.05); border-radius:12px; background:rgba(255,255,255,.025); }
.nav-links a { border-radius:8px; padding:9px 13px; letter-spacing:1.4px; }
.nav-links a::before { display:none; }
.nav-links a:hover,.nav-links a.active { color:#fff; background:rgba(110,168,255,.12); }
.nav-links a.active::after {
  content:''; position:absolute; left:13px; right:13px; bottom:4px; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.lang-toggle { border-radius:10px; padding:3px; }
.lang-toggle button { border-radius:7px; padding:6px 11px; }
.lang-toggle button.active { background:linear-gradient(135deg,var(--accent),#4f83bd); box-shadow:0 4px 16px rgba(70,125,185,.28); }

#welcome {
  background:
    radial-gradient(circle at 50% 42%,rgba(55,110,170,.18),transparent 28rem),
    #03050a;
}
#welcome::before {
  content:''; position:absolute; inset:-40%;
  background:conic-gradient(from 180deg at 50% 50%,transparent,rgba(90,159,232,.10),transparent 22%);
  animation:welcomeSpin 9s linear infinite;
}
#welcome::after {
  content:''; position:absolute; inset:0; opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(circle at center,black,transparent 68%);
}
@keyframes welcomeSpin { to { transform:rotate(360deg); } }
.w-inner { padding:60px; }
.w-label { color:rgba(255,255,255,.52); }
.w-title-3d {
  background:linear-gradient(110deg,#fff 12%,#b8d4ff 48%,#8fb5d9 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(75,130,185,.22);
}
.w-subtitle { margin-top:22px; font-family:var(--mono); font-size:10px; letter-spacing:4px; color:var(--muted); opacity:0; animation:wLabelIn 1s var(--ease) 1s forwards; }
.w-bootline { width:min(380px,70vw); height:1px; margin-top:26px; overflow:hidden; background:rgba(255,255,255,.08); }
.w-bootline::after { content:''; display:block; width:42%; height:100%; background:linear-gradient(90deg,transparent,var(--accent),#bfd7ee); animation:bootSweep 1.7s var(--ease) .8s both; }
@keyframes bootSweep { from{transform:translateX(-120%)} to{transform:translateX(340%)} }

section::after {
  content:''; position:absolute; left:50%; bottom:0; width:min(1200px,88%); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(148,174,255,.14),transparent);
}
.sec-inner { max-width:1480px; }
.sec-eyebrow { color:#78aee0; letter-spacing:4px; }
.sec-eyebrow::before { width:34px; background:linear-gradient(90deg,transparent,var(--accent)); }
.sec-title { letter-spacing:-2.2px; text-wrap:balance; }
.sec-body { color:var(--muted); }

#hero { min-height:100svh; padding:154px 0 110px; isolation:isolate; }
#hero::before {
  content:''; position:absolute; width:52vw; height:52vw; max-width:780px; max-height:780px; right:-7vw; top:7vh;
  border-radius:50%; background:radial-gradient(circle,rgba(75,135,195,.17),rgba(65,110,155,.07) 42%,transparent 70%);
  filter:blur(14px); animation:heroPulse 7s ease-in-out infinite; z-index:0;
}
@keyframes heroPulse { 50% { transform:scale(1.08); opacity:.76; } }
.hero-grid { grid-template-columns:.82fr 1.18fr; gap:64px; }
.hero-left { position:relative; z-index:3; }
.hero-kicker {
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  color:#aab5cb; font:500 10px/1 var(--mono); letter-spacing:2px;
}
.hero-kicker::before { content:''; width:26px; height:1px; background:var(--success); box-shadow:0 0 12px var(--success); }
.hero-badge {
  border-radius:999px; padding:9px 14px; color:#b9ffea; border-color:rgba(101,240,193,.22);
  background:rgba(101,240,193,.055); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.hero-title {
  font-size:clamp(58px,8vw,116px); letter-spacing:-7px; line-height:.84; margin:18px 0 18px;
  background:linear-gradient(105deg,#fff 5%,#c7dcff 46%,#86afd8 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none; filter:drop-shadow(0 18px 42px rgba(70,120,175,.16));
}
.hero-title.glitch-active { animation:none; }
.hero-title-2 { font-size:clamp(12px,1.7vw,20px); color:#9fc4e8; letter-spacing:5px; }
.hero-desc { max-width:590px; color:#9ca6bb; font-size:17px; }
.btn { border-radius:12px; padding:15px 26px; }
.btn-cyan {
  background:linear-gradient(135deg,#6eb4ff 0%,#4f8dcc 55%,#78a9d8 100%);
  box-shadow:0 12px 32px rgba(70,125,185,.22),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-cyan:hover { background:linear-gradient(135deg,#7cc2ff,#5b95ca); box-shadow:0 18px 42px rgba(70,125,185,.34); }
.btn-ghost { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.11); backdrop-filter:blur(12px); }
.hero-proof { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:-32px; }
.proof-chip {
  display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(255,255,255,.08);
  border-radius:9px; background:rgba(8,12,20,.56); color:#8f99ae; font:9px/1 var(--mono); letter-spacing:1.2px;
}
.proof-chip i { color:var(--success); font-size:8px; }

.hero-right { position:relative; }
.hero-right::before {
  content:'LIVE INTERFACE'; position:absolute; right:12px; top:-30px; color:rgba(168,190,255,.56);
  font:9px/1 var(--mono); letter-spacing:3px;
}
.cin-wrap { perspective:1400px; }
.cin-tilt { border-radius:18px; }
.preview-frame,.chapter-visual-img-wrap {
  border-radius:16px; border:1px solid rgba(166,189,255,.18);
  background:#080b12;
  box-shadow:0 45px 120px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.025),0 0 80px rgba(70,125,185,.10);
}
.preview-frame::before { border-radius:16px; }
.preview-frame::after { border-radius:16px; }
.preview-frame img { border-radius:0 0 16px 16px; }
.preview-toolbar {
  height:40px; display:flex; align-items:center; gap:7px; padding:0 15px;
  border-bottom:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg,rgba(22,28,43,.98),rgba(11,15,24,.96));
  position:relative; z-index:4;
}
.preview-toolbar .traffic { width:7px; height:7px; border-radius:50%; background:#ff6b76; box-shadow:14px 0 #f5c36b,28px 0 #65f0c1; margin-right:28px; }
.preview-toolbar .window-title { color:#7f8aa1; font:9px/1 var(--mono); letter-spacing:1.5px; }
.preview-toolbar .live { margin-left:auto; color:var(--success); font:8px/1 var(--mono); letter-spacing:1.5px; }
.preview-toolbar .live::before { content:''; display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); }

.ticker-strip {
  padding:15px 0; background:rgba(8,11,19,.72); backdrop-filter:blur(18px);
  border-color:rgba(145,172,255,.1);
}
.hero-ticker-label { display:none; }
.ticker-item { color:#69748a; }
.ticker-item::after { color:var(--accent2); }

#story,#features,#apis,#requirements,#download { padding:180px 0; }
.story-chapters { gap:160px; }
.chapter-row { gap:88px; }
.chapter-visual-img-wrap { border-radius:16px; }
.chapter-visual-img-wrap img,.chapter-visual-img-wrap::before,.chapter-visual-img-wrap::after { border-radius:16px; }
.ch-num { display:inline-flex; padding:7px 11px; border-radius:8px; border:1px solid rgba(110,168,255,.16); background:rgba(110,168,255,.05); }
.ch-title { font-size:clamp(30px,3.5vw,52px); letter-spacing:-2px; }
.ch-body { color:#8994aa; font-size:16px; }
.ch-tag { border-radius:8px; padding:7px 11px; }

.feat-bento { gap:16px; }
.feat-card {
  --spot-x:50%; --spot-y:50%; min-height:230px; border-radius:18px; padding:34px;
  background:
    radial-gradient(420px circle at var(--spot-x) var(--spot-y),rgba(110,168,255,.10),transparent 42%),
    linear-gradient(145deg,rgba(17,23,37,.96),rgba(8,12,20,.96));
  border-color:rgba(157,180,245,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .5s var(--ease),border-color .35s,box-shadow .35s;
}
.feat-card:hover { transform:translateY(-8px); border-color:rgba(119,159,255,.32); box-shadow:0 28px 70px rgba(0,0,0,.32),0 0 40px rgba(65,115,170,.08),inset 0 1px 0 rgba(255,255,255,.07); }
.feat-card::before { height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent); }
.feat-card::after {
  content:attr(data-index); position:absolute; right:22px; top:19px;
  color:rgba(155,178,240,.18); font:10px/1 var(--mono); letter-spacing:2px;
}
.feat-icon-wrap { width:48px; height:48px; border-radius:13px; }
.feat-title { font-size:18px; letter-spacing:-.15px; }
.feat-desc { color:#8490a6; }
.feat-pill { border-radius:7px; }
.fc7,.fc10 { min-height:auto; background:linear-gradient(110deg,rgba(42,69,125,.18),rgba(10,14,23,.96)); }

.api-panel { border-radius:20px; padding:58px 50px; min-height:520px; }
.api-panel.vel { background:radial-gradient(circle at 12% 0%,rgba(55,115,175,.18),transparent 37%),linear-gradient(145deg,#101727,#090d16); }
.api-panel.xen { background:radial-gradient(circle at 88% 0%,rgba(90,135,180,.13),transparent 37%),linear-gradient(145deg,#121321,#090d16); }
.api-panel:hover { transform:translateY(-10px) scale(1.01); box-shadow:0 34px 80px rgba(0,0,0,.34); }
.api-badge-new { border-radius:8px; padding:7px 11px; }
.api-name { font-size:48px; letter-spacing:-3px; }
.api-compare { border-radius:18px; border-color:rgba(157,180,245,.12); background:rgba(8,12,20,.7); backdrop-filter:blur(12px); }
.api-compare-head { background:rgba(110,168,255,.055); }

.req-item { border-radius:14px; padding:18px; background:linear-gradient(135deg,rgba(15,21,34,.92),rgba(9,13,22,.92)); }
.req-item:hover { transform:translateX(4px); border-color:rgba(110,168,255,.28); }
.req-icon { width:40px; height:40px; border-radius:11px; }
.req-dl-btn { border-radius:8px; }
.av-notice { border-radius:16px; background:linear-gradient(135deg,rgba(245,195,107,.055),rgba(10,14,23,.9)); }

.dl-card {
  max-width:920px; border-radius:28px; padding:90px;
  background:
    radial-gradient(circle at 50% 0%,rgba(70,130,190,.17),transparent 42%),
    linear-gradient(145deg,rgba(15,21,34,.96),rgba(8,12,20,.98));
  border-color:rgba(126,158,255,.24);
  box-shadow:0 50px 140px rgba(0,0,0,.46),0 0 90px rgba(65,115,170,.09),inset 0 1px 0 rgba(255,255,255,.06);
}
.dl-version { border-radius:999px; color:#a9ffe1; border-color:rgba(101,240,193,.2); background:rgba(101,240,193,.05); }
.dl-title { font-size:clamp(48px,7vw,82px); letter-spacing:-5px; }
.dl-title span { background:linear-gradient(90deg,#6faee5,#9bbddd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dl-disclaimer { border-radius:14px; background:rgba(4,7,13,.45); }
.dl-modal { border-radius:20px; background:linear-gradient(145deg,#111827,#090d16); }
.dl-service { border-radius:13px; }

footer { background:rgba(4,6,11,.66); backdrop-filter:blur(20px); }
.social-btn { border-radius:10px; }

@media(max-width:1100px) {
  .hero-grid { grid-template-columns:1fr; gap:72px; }
  .hero-left { max-width:800px; }
  .hero-title { font-size:clamp(64px,14vw,108px); }
  .hero-right { max-width:900px; }
}
@media(max-width:768px) {
  body { cursor:auto; }
  .cursor-dot,.cursor-ring { display:none; }
  #nav { top:10px; width:calc(100% - 20px); border-radius:14px; }
  #nav.visible { height:58px; }
  .nav-logo span { font-size:11px; }
  .nav-logo img { height:24px; }
  #hero { padding:118px 0 84px; }
  .hero-title { font-size:clamp(48px,16vw,76px); letter-spacing:-4px; }
  .hero-title-2 { letter-spacing:2.8px; }
  .hero-desc { font-size:15px; }
  .hero-btns .btn { flex:1; justify-content:center; min-width:150px; padding:14px 16px; }
  .hero-proof { margin-top:-25px; }
  .hero-right::before { display:none; }
  .preview-toolbar { height:34px; }
  #story,#features,#apis,#requirements,#download { padding:110px 0; }
  .story-chapters { gap:100px; }
  .chapter-row { gap:42px; }
  .feat-card { min-height:0; padding:28px 24px; }
  .fc7,.fc10 { gap:24px; align-items:flex-start; }
  .fc7 > div:last-child,.fc10 > div:last-child { border-left:0 !important; padding:0 !important; text-align:left !important; }
  .api-panel { padding:38px 26px; min-height:0; }
  .api-name { font-size:38px; }
  .api-compare { overflow-x:auto; }
  .api-compare-head,.api-compare-row { min-width:620px; }
  .dl-card { padding:58px 22px; border-radius:22px; }
  .dl-title { letter-spacing:-3px; }
  .dl-disclaimer-header { align-items:flex-start; flex-wrap:wrap; }
  .dl-disclaimer-brand { margin-left:0; width:100%; }
}
@media (hover:none) { .feat-card:hover,.api-panel:hover { transform:none; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Multipage routing layer */
body { min-height:100vh; }
main { min-height:70vh; }
.page-main { padding-top:84px; }
.page-main > section { min-height:calc(100vh - 84px); }
.page-main #story,.page-main #features,.page-main #apis,.page-main #requirements,.page-main #download { padding-top:120px; }
.module-explorer { padding:130px 0 160px; }
.module-explorer .module-head { max-width:720px; margin-bottom:54px; }
.module-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.module-link {
  min-height:240px; padding:28px; display:flex; flex-direction:column; color:var(--text); text-decoration:none;
  border:1px solid var(--border); border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(145deg,rgba(17,23,37,.96),rgba(8,12,20,.96));
  transition:transform .45s var(--ease),border-color .3s,box-shadow .3s;
}
.module-link::before {
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:radial-gradient(circle at 70% 0%,rgba(90,159,232,.16),transparent 55%);
}
.module-link:hover { transform:translateY(-8px); border-color:rgba(90,159,232,.32); box-shadow:0 24px 70px rgba(0,0,0,.34); }
.module-link:hover::before { opacity:1; }
.module-index { font:9px/1 var(--mono); letter-spacing:2px; color:var(--accent); position:relative; }
.module-icon { width:46px; height:46px; margin:34px 0 22px; border-radius:13px; display:grid; place-items:center; color:var(--accent); border:1px solid rgba(90,159,232,.18); background:rgba(90,159,232,.07); position:relative; }
.module-name { font:700 18px/1.2 var(--display); position:relative; }
.module-desc { color:var(--muted); font-size:13px; line-height:1.6; margin-top:9px; position:relative; }
.module-arrow { margin-top:auto; color:var(--accent); font-size:12px; position:relative; transition:transform .25s; }
.module-link:hover .module-arrow { transform:translateX(5px); }
.route-intro { padding:86px 0 0; }
.route-intro-inner { max-width:1480px; margin:0 auto; padding:0 56px; }
.route-path { font:9px/1 var(--mono); letter-spacing:3px; color:var(--accent); }
.route-path a { color:var(--muted); text-decoration:none; }
.route-path span { margin:0 10px; color:rgba(255,255,255,.2); }
.nav-links a.active { color:#fff; background:rgba(90,159,232,.12); }
.footer-copy a { color:inherit; text-decoration:none; }
@media(max-width:1100px) { .module-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px) {
  .page-main { padding-top:68px; }
  .route-intro { padding-top:58px; }
  .route-intro-inner { padding:0 20px; }
  .page-main #story,.page-main #features,.page-main #apis,.page-main #requirements,.page-main #download { padding-top:74px; }
  .module-explorer { padding:90px 0 110px; }
  .module-grid { grid-template-columns:1fr; }
  .module-link { min-height:210px; }
}

/* Final theme authority — intentionally last in the cascade */
:root {
  --accent:#c7cbd1;
  --accent2:#8f959d;
  --success:#d9dde2;
  --warn:#b8bdc4;
  --bg:#050505;
  --surface:#0c0c0d;
  --surface2:#141416;
  --border:rgba(224,228,234,.11);
  --text:#f1f2f3;
  --muted:#858990;
  --glass:rgba(11,11,12,.82);
}
body {
  background:
    radial-gradient(circle at 15% 10%,rgba(210,214,220,.055),transparent 30rem),
    radial-gradient(circle at 88% 30%,rgba(130,134,140,.045),transparent 34rem),
    linear-gradient(180deg,#040404,#09090a 48%,#050505);
}
.ambient-orb.a1 { background:#c3c7cc; opacity:.035; }
.ambient-orb.a2 { background:#777c82; opacity:.04; }
.scroll-progress { background:linear-gradient(90deg,#5e6268,#f2f3f4,#8c9198); box-shadow:0 0 12px rgba(220,224,230,.32); }
#nav { background:linear-gradient(135deg,rgba(18,18,20,.92),rgba(7,7,8,.87)); border-color:rgba(230,232,236,.13); }
#nav.scrolled { background:rgba(7,7,8,.95); border-color:rgba(210,214,220,.22); }
.nav-logo img,.footer-brand-logo img { filter:grayscale(1) brightness(1.25) drop-shadow(0 0 5px rgba(230,232,236,.24)) !important; }
.nav-logo-dot { background:#d8dbe0; box-shadow:0 0 9px rgba(220,224,230,.58); }
.nav-links a:hover,.nav-links a.active { color:#fff; background:rgba(225,228,232,.075); }
.nav-links a.active::after { background:linear-gradient(90deg,transparent,#e5e7ea,transparent); }
.lang-toggle button.active { background:linear-gradient(145deg,#d5d8dc,#777c83); color:#0a0a0b; box-shadow:0 4px 16px rgba(205,210,217,.14); }
#welcome { background:radial-gradient(circle at 50% 42%,rgba(215,218,223,.08),transparent 30rem),#030303; }
#welcome::before { background:conic-gradient(from 180deg at 50% 50%,transparent,rgba(220,223,228,.055),transparent 22%); }
.w-title-3d,.hero-title {
  background:linear-gradient(105deg,#fff 4%,#d6d9dd 48%,#7d8289 96%);
  -webkit-background-clip:text; background-clip:text;
}
.w-title-3d { text-shadow:0 0 55px rgba(220,223,228,.11); }
.w-bootline::after { background:linear-gradient(90deg,transparent,#f0f1f2,#858a90); }
#hero::before { background:radial-gradient(circle,rgba(210,214,220,.07),rgba(125,129,135,.025) 44%,transparent 70%); }
.hero-kicker::before { background:#d6d9de; box-shadow:0 0 9px rgba(218,221,225,.42); }
.hero-badge,.dl-version { color:#d9dce0; border-color:rgba(218,221,225,.16); background:rgba(218,221,225,.035); }
.hero-title { filter:drop-shadow(0 18px 38px rgba(255,255,255,.055)); }
.hero-title-2 { color:#b7bbc1; }
.btn-cyan { background:linear-gradient(145deg,#f0f1f2,#b7bbc0 52%,#777c82); color:#080809; box-shadow:0 12px 32px rgba(215,218,223,.11),inset 0 1px 0 rgba(255,255,255,.72); }
.btn-cyan:hover { background:linear-gradient(145deg,#fff,#aeb2b8); color:#050505; box-shadow:0 18px 42px rgba(220,223,228,.18); }
.btn-ghost:hover { color:#f2f3f4; border-color:#aeb3ba; }
.proof-chip { background:rgba(12,12,13,.72); }
.proof-chip i,.preview-toolbar .live { color:#d7dae0; }
.preview-toolbar .live::before { background:#d7dae0; box-shadow:0 0 7px rgba(220,223,228,.45); }
.preview-frame,.chapter-visual-img-wrap { border-color:rgba(225,228,233,.14); background:#09090a; box-shadow:0 45px 120px rgba(0,0,0,.72),0 0 70px rgba(220,223,228,.035); }
.preview-toolbar { background:linear-gradient(180deg,rgba(28,28,30,.98),rgba(12,12,13,.98)); }
.preview-toolbar .traffic { background:#8b8f95; box-shadow:14px 0 #b5b8bd,28px 0 #e1e3e6; }
.preview-frame img,.chapter-visual-img-wrap img { filter:grayscale(.78) brightness(.91) contrast(1.08) saturate(.25); }
.cin-tilt:hover .preview-frame img,.cin-tilt:hover .chapter-visual-img-wrap img { filter:grayscale(.55) brightness(.98) contrast(1.1) saturate(.35); }
.sec-eyebrow,.ch-num,.ch-tag,.ticker-item::after { color:#b9bdc3; }
.sec-eyebrow::before { background:linear-gradient(90deg,transparent,#c8cbd0); }
section::after { background:linear-gradient(90deg,transparent,rgba(220,223,228,.1),transparent); }
.module-link,.feat-card,.req-item {
  background:
    radial-gradient(420px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(230,232,236,.045),transparent 42%),
    linear-gradient(145deg,rgba(19,19,21,.98),rgba(8,8,9,.98));
  border-color:rgba(222,225,230,.095);
}
.module-link::before { background:radial-gradient(circle at 70% 0%,rgba(225,228,232,.08),transparent 55%); }
.module-link:hover,.feat-card:hover,.req-item:hover { border-color:rgba(215,218,223,.24); box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 35px rgba(225,228,232,.025); }
.module-index,.module-icon,.module-arrow { color:#c3c6cb; }
.module-icon,.feat-icon-wrap,.req-icon { border-color:rgba(215,218,223,.14) !important; background:rgba(215,218,223,.045) !important; color:#c8cbd0 !important; }
.feat-card::before { background:linear-gradient(90deg,transparent,#777b81,#e1e3e6,#777b81,transparent); }
.fc7,.fc10 { background:linear-gradient(110deg,rgba(215,218,223,.055),rgba(9,9,10,.98)); }
.api-panel.vel,.api-panel.xen { border-color:rgba(220,223,228,.12); background:radial-gradient(circle at 12% 0%,rgba(225,228,232,.075),transparent 38%),linear-gradient(145deg,#151517,#080809); }
.api-panel.vel::before,.api-panel.xen::before { background:linear-gradient(90deg,#d9dce0,rgba(160,164,170,.35),transparent); }
.api-panel.vel .ca,.api-panel.xen .ca { border-color:rgba(215,218,223,.34) !important; }
.ab-vel,.ab-xen { background:rgba(220,223,228,.04); border-color:rgba(220,223,228,.14); color:#c4c7cc; }
.api-vel,.api-xen,.api-vel .api-name,.api-xen .api-name { color:#eceef0; }
.afi-vel,.afi-xen { background:rgba(220,223,228,.06); color:#d5d8dc; }
.api-compare { background:rgba(8,8,9,.78); border-color:rgba(220,223,228,.1); }
.api-compare-head { background:rgba(220,223,228,.035); }
.acr.check { color:#d0d3d7; }
.acr.cross { color:#777b81; }
.req-item::before { background:#c8cbd0; }
.req-dl-btn { color:#c7cbd0; border-color:rgba(215,218,223,.16); background:rgba(215,218,223,.035); }
.req-dl-btn:hover { background:rgba(215,218,223,.11); border-color:rgba(225,228,232,.34); }
.av-notice { background:linear-gradient(135deg,rgba(215,218,223,.04),rgba(9,9,10,.94)); border-color:rgba(215,218,223,.12); }
.dl-card { background:radial-gradient(circle at 50% 0%,rgba(225,228,232,.085),transparent 43%),linear-gradient(145deg,rgba(19,19,21,.98),rgba(7,7,8,.99)); border-color:rgba(220,223,228,.17); box-shadow:0 50px 140px rgba(0,0,0,.58),0 0 80px rgba(220,223,228,.035); }
.dl-title span { background:linear-gradient(90deg,#f0f1f2,#858a91); -webkit-background-clip:text; background-clip:text; }
.dl-corners .ca { border-color:#b7bbc1 !important; }
.dl-disclaimer { border-color:rgba(215,218,223,.1); background:rgba(3,3,3,.48); }
.dl-disclaimer-header { background:rgba(215,218,223,.035); border-color:rgba(215,218,223,.08); color:#bfc3c8; }
.dl-service { background:#121214; }
.dl-service:hover { background:rgba(215,218,223,.04); border-color:rgba(215,218,223,.22); }
.dl-service-icon.lv,.dl-service-icon.wi,.dl-service-icon.ld { background:rgba(215,218,223,.045); border-color:rgba(215,218,223,.14); color:#c9ccd1; }
.dl-service::after { background:#c8cbd0; }
.dl-service:hover .dl-service-arrow { color:#d8dbe0; }
footer { background:rgba(3,3,4,.78); border-color:rgba(220,223,228,.09); }
.social-btn:hover { border-color:#9ca1a8; color:#e1e3e6; }