/* ── TOKENS ── */
:root {
  --c-bg:        #000000;
  --c-surface:   #0c0c14;
  --c-surface2:  #101020;
  --c-border:    rgba(255,255,255,0.07);
  --c-border2:   rgba(255,255,255,0.12);
  --c-text:      #ffffff;
  --c-text-dim:  rgba(255,255,255,0.45);
  --c-violet:    #8b5cf6;
  --c-violet-d:  #6d28d9;
  --c-blue:      #3b82f6;
  --c-blue-d:    #1d4ed8;
  --grad-main:   linear-gradient(135deg, var(--c-violet), var(--c-blue));
  --grad-text:   linear-gradient(135deg, #c084fc 0%, #818cf8 50%, #60a5fa 100%);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display:block; }

/* ── UTILITIES ── */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── ICON SVG ── */
.icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-svg svg { width:100%; height:100%; }

/* ── ICON IMG (Web_icons SVG files via <img>) ── */
.icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.icon-img.violet {
  filter: brightness(0) saturate(100%) invert(50%) sepia(80%) saturate(500%) hue-rotate(240deg) brightness(120%);
}

/* ── SCROLL PROGRESS BAR ── */
#scrollProgress {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--c-violet) 0%, var(--c-blue) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 10000;
  pointer-events: none;
}

/* ── 3D SECTION REVEAL ── */
.s3d {
  opacity: 0;
  transform: perspective(1200px) rotateX(12deg) translateY(60px);
  transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out);
}
.s3d.s3d-in {
  opacity: 1;
  transform: perspective(1200px) rotateX(0deg) translateY(0);
}

/* ── SECTION COMMON ── */
.sec-label {
  font-size:10px; font-weight:700; letter-spacing:5px; text-transform:uppercase;
  color:var(--c-violet); margin-bottom:18px;
}
.sec-title {
  font-size: clamp(36px, 4.5vw, 62px);
  font-weight:800; letter-spacing:-3px; line-height:1.05;
}
.sec-body {
  font-size:16px; line-height:1.85;
  color:var(--c-text-dim); font-weight:300;
}
.sec-sub {
  font-size:16px; color:var(--c-text-dim); line-height:1.7;
  max-width:480px; margin:0 auto;
}
.sec-header { text-align:center; padding:0 24px; margin-bottom:72px; }
.sec-header .sec-title { margin-top:16px; margin-bottom:20px; }

/* ── SPLIT LAYOUT ── */
.split-inner {
  max-width:1160px; margin:0 auto; padding:0 60px;
  display:grid; gap:80px; align-items:center;
}
.split-inner.left-img  { grid-template-columns:0.5fr 1.5fr; }
.split-inner.right-img { grid-template-columns:1.5fr 0.5fr; }
.text-block { display:flex; flex-direction:column; gap:0; }
.text-block .sec-label { margin-bottom:18px; }
.text-block .sec-title { margin-bottom:28px; }

/* ── ANIMATIONS ── */
@keyframes fadeUp  { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes orbPulse {
  0%,100% { opacity:.7; transform:translate(-50%,-54%) scale(1); }
  50%     { opacity:1;  transform:translate(-50%,-54%) scale(1.1); }
}
@keyframes popIn {
  from { opacity:0; transform:scale(0.82) translateY(18px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes stepIn {
  from { opacity:0; transform:translateY(44px) scale(0.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cellIn {
  from { opacity:0; transform:scale(0.9) translateY(28px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity:0; transform:translateY(50px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.slide-from-left  { opacity:0; transform:translateX(-70px) scale(0.96); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.slide-from-right { opacity:0; transform:translateX(70px)  scale(0.96); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.slide-from-left.visible, .slide-from-right.visible { opacity:1; transform:translateX(0) scale(1); }
.d1 { transition-delay:0.10s; }
.d2 { transition-delay:0.20s; }
.d3 { transition-delay:0.30s; }
.d4 { transition-delay:0.40s; }
.d5 { transition-delay:0.50s; }
.d6 { transition-delay:0.60s; }

/* ── CUSTOM CURSOR ── */
body { cursor: none; }
a, button, [role="button"] { cursor: none; }
#cursorDot {
  position:fixed; width:8px; height:8px;
  background:#fff; border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width 0.2s, height 0.2s, background 0.2s;
  will-change:left,top;
}
#cursorRing {
  position:fixed; width:36px; height:36px;
  border:1.5px solid rgba(139,92,246,0.75);
  border-radius:50%;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  will-change:left,top;
  transition:width 0.2s var(--ease-out), height 0.2s var(--ease-out),
             border-color 0.2s, opacity 0.3s;
}
body.cursor-hover #cursorDot  { width:12px; height:12px; background:var(--c-violet); }
body.cursor-hover #cursorRing { width:52px; height:52px; border-color:rgba(139,92,246,0.5); }
@media (hover:none) { #cursorDot, #cursorRing { display:none; } body { cursor:auto; } }

/* ── NEON HOVER SPOT ── */
.neon-spot {
  position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  opacity:0; transition:opacity 0.4s;
  background:radial-gradient(
    circle at var(--sx,50%) var(--sy,50%),
    rgba(255,255,255,0.09) 0%,
    rgba(139,92,246,0.06) 30%,
    transparent 65%
  );
}
.neon-spot.lit { opacity:1; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .s3d { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .slide-from-left, .slide-from-right { opacity: 1; transform: none; }
  #scrollProgress { transition: none; }
}

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  .split-inner.left-img,
  .split-inner.right-img { grid-template-columns:1fr; gap:44px; padding:0 20px; }
}