/* =============================================================
   ARK LABS — ARK CLOUD PAGE STYLES
   Page-specific styles for /products/ark-cloud/.
   Mirrors Nebius Token Factory structure:
   - hero (with supervisor/GPU-cluster animation)
   - large feature headline + value callouts
   - services row
   - models grid
   - community card row
   - benchmark strip
   - code-block callout
   - pricing callout
   - FAQ accordion
   - final CTA
   ============================================================= */

/* ===== HERO ===== */
.ac-hero {
  padding: 72px 60px 72px;
  background: var(--white);
  position: relative; overflow: hidden;
}
.ac-hero::before {
  content: ''; position: absolute; top: -140px; right: -140px;
  width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(0,174,232,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.ac-hero::after {
  content: ''; position: absolute; bottom: -160px; left: -120px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(13,138,106,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.ac-hero-inner {
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 56px;
  position: relative; z-index: 2;
}
.ac-hero-text { flex: 1.05; min-width: 460px; }
.ac-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 20px; font-size: 0.78em; font-weight: 600;
  background: var(--cyan-light); color: var(--cyan-dark); border: 1px solid rgba(0,174,232,0.15);
  margin-bottom: 22px;
}
.ac-hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: ac-pulse 2s infinite; }
.ac-hero h1 {
  font-size: 3.4em; font-weight: 800; line-height: 1.05;
  color: var(--navy); margin-bottom: 22px; letter-spacing: -1.6px;
}
.ac-hero h1 .accent { color: var(--cyan); }
.ac-hero .ac-sub {
  font-size: 1.16em; color: var(--steel); line-height: 1.65;
  max-width: 560px; margin-bottom: 30px;
}
.ac-hero-ctas { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ac-hero-note { font-size: 0.84em; color: var(--steel); margin-bottom: 28px; }
.ac-hero-note strong { color: var(--green); }
.ac-hero-proof {
  display: flex; align-items: center; gap: 22px;
  padding-top: 22px; border-top: 1px solid var(--border-light);
}
.ac-hero-proof-item .n { font-size: 1.4em; font-weight: 800; color: var(--cyan); }
.ac-hero-proof-item .l { font-size: 0.7em; color: var(--steel); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.4; }
.ac-hero-proof-divider { width: 1px; height: 34px; background: var(--border-light); }

/* ===== HERO VISUAL CONTAINER ===== */
.ac-hero-visual { flex: 1; min-width: 460px; position: relative; }

/* ===== HERO ANIMATION =====
   Inference package drops into the ARK Supervisor node, which
   distributes along four connecting lines to four GPU clusters.
   Each cluster lights up and "starts running" once it receives
   the distributed shard.  Pure CSS + SVG, 8s loop.
*/
.ac-anim {
  position: relative;
  width: 540px; height: 520px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}
.ac-anim * { box-sizing: border-box; }

/* --- Falling inference package --- */
.ac-pkg {
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: white; border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  box-shadow: 0 8px 22px rgba(12,35,64,0.10);
  font-size: 0.74em; font-weight: 700;
  color: var(--navy); letter-spacing: 0.3px;
  transform-origin: 50% 100%;
  z-index: 8; opacity: 0;
  animation: ac-pkg-drop 8s cubic-bezier(0.55, 0.05, 0.45, 1) infinite;
}
.ac-pkg .ac-pkg-ico {
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--cyan); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7em; font-weight: 800;
}
.ac-pkg .ac-pkg-kind { color: var(--cyan-dark); font-size: 0.88em; font-weight: 800; }
.ac-pkg .ac-pkg-model { color: var(--navy); }

/* Drop: appears above -> accelerates down -> slight overshoot squish on
   the supervisor's receive slot -> flashes cyan and disappears. */
@keyframes ac-pkg-drop {
  0%   { opacity: 0; transform: translate(-50%, -50px) scale(0.9); filter: none; }
  5%   { opacity: 1; transform: translate(-50%, -30px) scale(1); }
  16%  { opacity: 1; transform: translate(-50%, 140px) scale(1); }
  19%  { opacity: 1; transform: translate(-50%, 172px) scale(1.08, 0.85);
         filter: drop-shadow(0 0 14px rgba(0,174,232,0.65)); }
  21%  { opacity: 1; transform: translate(-50%, 180px) scale(1.25, 0.35);
         filter: drop-shadow(0 0 22px rgba(0,174,232,0.95)); }
  24%  { opacity: 0; transform: translate(-50%, 182px) scale(0.6, 0.15);
         filter: drop-shadow(0 0 0 rgba(0,174,232,0)); }
  100% { opacity: 0; transform: translate(-50%, 182px) scale(0.6, 0.15); }
}

/* --- Central ARK Supervisor NUC-style server --- */
.ac-sup {
  position: absolute; top: 188px; left: 50%; transform: translateX(-50%);
  width: 178px; height: 118px;
  color: white;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #22314b 0%, #131f34 22%, #0c2340 55%, #081a2f 100%);
  border: 1px solid #000;
  box-shadow:
    0 22px 44px rgba(12,35,64,0.28),
    0 2px 0 rgba(255,255,255,0.08) inset,
    0 -2px 0 rgba(0,0,0,0.5) inset,
    0 0 0 1px rgba(0,0,0,0.55);
  z-index: 5;
  overflow: visible;
}
/* Top vent grille (runs across the lid of the NUC) */
.ac-sup-vent {
  position: absolute; top: 4px; left: 14px; right: 14px; height: 8px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.55) 0 2px,
      rgba(255,255,255,0.07) 2px 5px
    );
  border-top: 1px solid rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
}
/* Receive slot on top face — glows cyan on impact */
.ac-sup-slot {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 5px;
  background: #030a15;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 0 0 0 rgba(0,174,232,0) inset;
  animation: ac-slot-glow 8s linear infinite;
  z-index: 6;
}
@keyframes ac-slot-glow {
  0%, 17%   { background: #030a15; box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
  20%       { background: #00AEE8; box-shadow: 0 0 16px rgba(0,174,232,0.95),
                                              0 0 6px rgba(255,255,255,0.7) inset; }
  30%       { background: #0d5f85; box-shadow: 0 0 8px rgba(0,174,232,0.4); }
  42%, 100% { background: #030a15; box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
}

/* Front face of the NUC: mark + info block + status LEDs */
.ac-sup-front {
  position: absolute; top: 18px; left: 10px; right: 10px; bottom: 32px;
  display: flex; align-items: center; gap: 9px;
  padding: 5px 2px;
}
.ac-sup-mark {
  width: 30px; height: 30px; min-width: 30px;
  border-radius: 7px;
  background: linear-gradient(180deg, #00c4ff 0%, #00AEE8 60%, #0088b8 100%);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4),
              0 1px 0 rgba(255,255,255,0.3) inset,
              0 -1px 0 rgba(0,0,0,0.25) inset;
}
.ac-sup-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ac-sup-brand {
  font-size: 0.58em; font-weight: 800; letter-spacing: 1.1px;
  color: white; text-transform: uppercase;
  white-space: nowrap;
}
.ac-sup-model {
  font-size: 0.5em; font-weight: 600; letter-spacing: 0.8px;
  color: #8aa3c2; text-transform: uppercase;
  white-space: nowrap;
}
/* Status LEDs */
.ac-sup-leds { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.ac-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1a1f28;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(255,255,255,0.05);
}
.ac-led-pwr { background: #28c840; box-shadow: 0 0 6px rgba(40,200,64,0.8), 0 0 0 1px rgba(0,0,0,0.7); }
.ac-led-net { background: #febc2e; box-shadow: 0 0 5px rgba(254,188,46,0.7), 0 0 0 1px rgba(0,0,0,0.7);
              animation: ac-led-net 2.5s ease-in-out infinite; }
.ac-led-act { background: #0b1a2b; box-shadow: 0 0 0 1px rgba(0,0,0,0.7);
              animation: ac-led-act 8s linear infinite; }
@keyframes ac-led-net {
  0%, 90%, 100% { background: #febc2e; box-shadow: 0 0 5px rgba(254,188,46,0.7), 0 0 0 1px rgba(0,0,0,0.7); }
  92%, 98%      { background: #5a4310; box-shadow: 0 0 0 1px rgba(0,0,0,0.7); }
}
@keyframes ac-led-act {
  0%, 17%  { background: #0b1a2b; box-shadow: 0 0 0 1px rgba(0,0,0,0.7); }
  20%, 38% { background: #00AEE8; box-shadow: 0 0 6px rgba(0,174,232,0.9), 0 0 0 1px rgba(0,0,0,0.7); }
  42%, 100%{ background: #0b1a2b; box-shadow: 0 0 0 1px rgba(0,0,0,0.7); }
}

/* Bottom strip: faux ports + status label */
.ac-sup-bottom {
  position: absolute; bottom: 4px; left: 10px; right: 10px;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ac-sup-ports { display: flex; gap: 4px; align-items: center; }
.ac-port {
  width: 10px; height: 6px;
  background: #04101e;
  border: 1px solid rgba(0,0,0,0.8);
  border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.ac-port-wide { width: 16px; }
.ac-sup-status {
  font-size: 0.46em; font-weight: 700; letter-spacing: 1.2px;
  color: var(--cyan); text-transform: uppercase;
  white-space: nowrap;
}

/* Scan-line that sweeps across the front face while "processing" */
.ac-sup-scan {
  position: absolute; top: 14px; left: 10px; right: 10px; height: 2px;
  background: linear-gradient(90deg,
    rgba(0,174,232,0) 0%, rgba(0,174,232,0.95) 50%, rgba(0,174,232,0) 100%);
  opacity: 0; pointer-events: none; z-index: 4;
  animation: ac-sup-scan 8s linear infinite;
}
@keyframes ac-sup-scan {
  0%, 19%   { opacity: 0; transform: translateY(0); }
  22%       { opacity: 1; transform: translateY(0); }
  34%       { opacity: 0.9; transform: translateY(60px); }
  38%       { opacity: 0; transform: translateY(64px); }
  100%      { opacity: 0; transform: translateY(0); }
}

/* Radial glow behind the chassis when package arrives */
.ac-sup-burst {
  position: absolute; inset: -18px; border-radius: 16px;
  pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(0,174,232,0.55) 0%, rgba(0,174,232,0.0) 65%);
  opacity: 0;
  animation: ac-sup-burst 8s linear infinite;
}
@keyframes ac-sup-burst {
  0%, 18%   { opacity: 0; transform: scale(0.7); }
  21%       { opacity: 0.95; transform: scale(1.2); }
  30%       { opacity: 0.45; transform: scale(1.3); }
  40%, 100% { opacity: 0; transform: scale(1.0); }
}

/* Concentric shockwave rings expanding from the slot on impact */
.ac-sup-shockwave {
  position: absolute; top: -6px; left: 50%;
  width: 60px; height: 16px;
  margin-left: -30px;
  border: 2px solid rgba(0,174,232,0.9);
  border-radius: 50%;
  pointer-events: none; z-index: 4;
  opacity: 0; transform: scale(0.3);
  animation: ac-shockwave 8s linear infinite;
}
.ac-sup-shockwave-2 {
  border-color: rgba(255,255,255,0.65);
  animation-delay: 0.15s;
}
@keyframes ac-shockwave {
  0%, 18%  { opacity: 0; transform: scale(0.3); }
  21%      { opacity: 1; transform: scale(0.6); }
  28%      { opacity: 0.5; transform: scale(1.8); }
  34%      { opacity: 0; transform: scale(2.6); }
  100%     { opacity: 0; }
}

/* Starburst rays fan out of the receive slot on impact */
.ac-sup-rays {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 46px; pointer-events: none; z-index: 3;
}
.ac-sup-rays line {
  stroke: var(--coral); stroke-width: 1.8; stroke-linecap: round;
  transform-origin: 42px 44px;
  opacity: 0;
  animation: ac-sup-ray 8s linear infinite;
}
@keyframes ac-sup-ray {
  0%, 18%   { opacity: 0; stroke-dashoffset: 18; }
  21%       { opacity: 1; stroke-dashoffset: 0; }
  32%       { opacity: 0.45; }
  42%, 100% { opacity: 0; }
}

/* --- Distribution lines (supervisor -> 4 clusters) --- */
.ac-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.ac-line {
  stroke: #B6C4D6; stroke-width: 1.8; fill: none;
  stroke-dasharray: 5 5;
  animation: ac-line-flow 8s linear infinite;
}
@keyframes ac-line-flow {
  0%, 19%   { stroke: #B6C4D6; }
  22%, 38%  { stroke: rgba(0,174,232,0.9); stroke-width: 2.2; }
  44%, 100% { stroke: #B6C4D6; }
}
/* Travelling pulses along each line */
.ac-pulse {
  r: 4; fill: var(--cyan); opacity: 0;
  filter: drop-shadow(0 0 6px rgba(0,174,232,0.85));
}
.ac-pulse-tl { animation: ac-pulse-tl 8s linear infinite; }
.ac-pulse-tr { animation: ac-pulse-tr 8s linear infinite; }
.ac-pulse-bl { animation: ac-pulse-bl 8s linear infinite; }
.ac-pulse-br { animation: ac-pulse-br 8s linear infinite; }

/* Pulses start at the supervisor (270, 250) in SVG coords and fan outward.
   Cluster anchors (approximate top-center of each cluster):
   TL (105,165), TR (435,165), BL (105,400), BR (435,400)
*/
@keyframes ac-pulse-tl {
  0%, 20%  { transform: translate(270px, 250px); opacity: 0; }
  23%      { opacity: 1; }
  35%      { transform: translate(105px, 165px); opacity: 1; }
  38%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes ac-pulse-tr {
  0%, 20%  { transform: translate(270px, 250px); opacity: 0; }
  23%      { opacity: 1; }
  35%      { transform: translate(435px, 165px); opacity: 1; }
  38%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes ac-pulse-bl {
  0%, 20%  { transform: translate(270px, 310px); opacity: 0; }
  23%      { opacity: 1; }
  35%      { transform: translate(105px, 400px); opacity: 1; }
  38%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes ac-pulse-br {
  0%, 20%  { transform: translate(270px, 310px); opacity: 0; }
  23%      { opacity: 1; }
  35%      { transform: translate(435px, 400px); opacity: 1; }
  38%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* --- GPU clusters (4 corners) --- */
.ac-cluster {
  position: absolute; width: 150px;
  display: flex; flex-direction: column; gap: 5px;
  z-index: 3;
}
.ac-cluster-tl { top: 60px; left: 28px; }
.ac-cluster-tr { top: 60px; right: 28px; }
.ac-cluster-bl { bottom: 40px; left: 28px; }
.ac-cluster-br { bottom: 40px; right: 28px; }
.ac-cluster-label {
  font-size: 0.54em; font-weight: 800; letter-spacing: 1.2px;
  color: var(--navy); text-transform: uppercase;
  display: flex; align-items: center; gap: 5px;
  padding: 2px 0 4px;
  border-bottom: 1px dashed rgba(12,35,64,0.15);
  margin-bottom: 2px;
  white-space: nowrap;
}
.ac-cluster-label .d { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px rgba(13,138,106,0.55); }

/* --- Individual GPU card --- */
.ac-gpu {
  background: white; border: 1.5px solid var(--border);
  border-radius: 8px; padding: 6px 7px;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 6px rgba(12,35,64,0.05);
  animation: ac-gpu-idle 8s linear infinite;
  position: relative;
}
.ac-gpu .ac-fan {
  width: 14px; height: 14px; min-width: 14px; border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 2px, transparent 2px 100%),
    conic-gradient(from 0deg, var(--steel) 0deg 22deg, transparent 22deg 120deg, var(--steel) 120deg 142deg, transparent 142deg 240deg, var(--steel) 240deg 262deg, transparent 262deg 360deg);
  border: 1px solid var(--border);
  animation: ac-fan-spin 2s linear infinite;
  animation-play-state: paused;
}
.ac-gpu .ac-gpu-name {
  font-size: 0.58em; font-weight: 700; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.1px;
}
.ac-gpu .ac-gpu-meta {
  font-size: 0.5em; color: var(--steel); font-weight: 600;
  margin-left: auto; letter-spacing: 0.2px;
}
.ac-gpu .ac-run {
  position: absolute; right: 6px; top: -6px;
  padding: 1px 6px; border-radius: 8px;
  background: var(--cyan); color: white;
  font-size: 0.46em; font-weight: 800; letter-spacing: 0.6px;
  opacity: 0; transform: translateY(3px);
  animation: ac-run-show 8s ease-in-out infinite;
}
@keyframes ac-fan-spin { to { transform: rotate(360deg); } }
@keyframes ac-gpu-idle { 0%,100% { border-color: var(--border); box-shadow: 0 2px 6px rgba(12,35,64,0.05); } }

/* Each cluster "activates" in the 36-62% window after pulses arrive */
.ac-cluster .ac-gpu {
  animation-name: ac-gpu-activate;
}
@keyframes ac-gpu-activate {
  0%, 35%   { border-color: var(--border); box-shadow: 0 2px 6px rgba(12,35,64,0.05); }
  38%, 60%  { border-color: rgba(0,174,232,0.75); box-shadow: 0 6px 16px rgba(0,174,232,0.18); }
  64%, 100% { border-color: var(--border); box-shadow: 0 2px 6px rgba(12,35,64,0.05); }
}
.ac-cluster .ac-gpu .ac-fan {
  animation-play-state: running;
  animation: ac-fan-cycle 8s linear infinite;
}
@keyframes ac-fan-cycle {
  0%, 35%   { transform: rotate(0deg); }
  38%, 60%  { transform: rotate(720deg); }
  64%, 100% { transform: rotate(720deg); }
}
@keyframes ac-run-show {
  0%, 35%   { opacity: 0; transform: translateY(3px); }
  40%, 58%  { opacity: 1; transform: translateY(0); }
  62%, 100% { opacity: 0; transform: translateY(-3px); }
}

/* --- AI agent task row (one per cluster) --- */
.ac-agent {
  display: flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 4px 6px;
  background: linear-gradient(180deg, rgba(12,35,64,0.96) 0%, rgba(8,24,46,0.96) 100%);
  border: 1px solid rgba(0,174,232,0.28);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(12,35,64,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
  animation: ac-agent-box 8s ease-in-out infinite;
}
.ac-agent-dot {
  width: 6px; height: 6px; min-width: 6px; border-radius: 50%;
  background: var(--steel);
  box-shadow: 0 0 0 rgba(0,174,232,0);
  animation: ac-agent-dot 8s ease-in-out infinite;
}
.ac-agent-lbl {
  font-size: 0.46em; font-weight: 800; letter-spacing: 0.8px;
  color: rgba(255,255,255,0.78); text-transform: uppercase;
}
.ac-agent-track {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden; position: relative;
}
.ac-agent-fill {
  position: absolute; inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan) 0%, #6BD6F2 100%);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,174,232,0.65);
  animation: ac-agent-fill 8s ease-in-out infinite;
}
.ac-agent-state {
  position: absolute; right: 6px;
  font-size: 0.44em; font-weight: 800; letter-spacing: 0.7px;
  padding: 1px 4px; border-radius: 4px;
  opacity: 0;
}
.ac-agent-run {
  background: var(--cyan); color: white;
  animation: ac-agent-run 8s ease-in-out infinite;
}
.ac-agent-done {
  background: #0D8A6A; color: white;
  animation: ac-agent-done 8s ease-in-out infinite;
}

/* Per-cluster staggers so agents fire in sequence after distribution */
.ac-cluster-tl .ac-agent,
.ac-cluster-tl .ac-agent-dot,
.ac-cluster-tl .ac-agent-fill,
.ac-cluster-tl .ac-agent-run,
.ac-cluster-tl .ac-agent-done { animation-delay: 0s; }

.ac-cluster-tr .ac-agent,
.ac-cluster-tr .ac-agent-dot,
.ac-cluster-tr .ac-agent-fill,
.ac-cluster-tr .ac-agent-run,
.ac-cluster-tr .ac-agent-done { animation-delay: 0.15s; }

.ac-cluster-bl .ac-agent,
.ac-cluster-bl .ac-agent-dot,
.ac-cluster-bl .ac-agent-fill,
.ac-cluster-bl .ac-agent-run,
.ac-cluster-bl .ac-agent-done { animation-delay: 0.3s; }

.ac-cluster-br .ac-agent,
.ac-cluster-br .ac-agent-dot,
.ac-cluster-br .ac-agent-fill,
.ac-cluster-br .ac-agent-run,
.ac-cluster-br .ac-agent-done { animation-delay: 0.45s; }

@keyframes ac-agent-box {
  0%, 32%   { border-color: rgba(0,174,232,0.15); box-shadow: 0 2px 8px rgba(12,35,64,0.12), inset 0 1px 0 rgba(255,255,255,0.04); }
  38%, 60%  { border-color: rgba(0,174,232,0.7);  box-shadow: 0 4px 14px rgba(0,174,232,0.22), inset 0 1px 0 rgba(255,255,255,0.06); }
  66%, 100% { border-color: rgba(0,174,232,0.15); box-shadow: 0 2px 8px rgba(12,35,64,0.12), inset 0 1px 0 rgba(255,255,255,0.04); }
}
@keyframes ac-agent-dot {
  0%, 32%   { background: var(--steel); box-shadow: 0 0 0 rgba(0,174,232,0); }
  36%       { background: var(--cyan);  box-shadow: 0 0 8px rgba(0,174,232,0.9); }
  38%, 58%  { background: var(--cyan);  box-shadow: 0 0 6px rgba(0,174,232,0.75); }
  60%, 63%  { background: #10B37E;      box-shadow: 0 0 8px rgba(16,179,126,0.9); }
  70%, 100% { background: var(--steel); box-shadow: 0 0 0 rgba(0,174,232,0); }
}
@keyframes ac-agent-fill {
  0%, 36%   { width: 0%;   opacity: 0.9; }
  40%       { width: 8%;   opacity: 1; }
  58%       { width: 100%; opacity: 1; }
  62%       { width: 100%; opacity: 1; }
  68%       { width: 100%; opacity: 0; }
  70%, 100% { width: 0%;   opacity: 0; }
}
@keyframes ac-agent-run {
  0%, 36%   { opacity: 0; }
  40%, 56%  { opacity: 1; }
  58%, 100% { opacity: 0; }
}
@keyframes ac-agent-done {
  0%, 58%   { opacity: 0; }
  60%, 66%  { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* Caption below animation */
.ac-anim-caption {
  position: absolute; bottom: 4px; left: 0; right: 0;
  text-align: center; font-size: 0.74em;
}
.ac-anim-caption .cm { font-weight: 700; color: var(--navy); letter-spacing: -0.1px; }
.ac-anim-caption .cs { font-size: 0.88em; color: var(--steel); margin-top: 2px; }
.ac-anim-caption .cs b { color: var(--cyan); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .ac-pkg, .ac-sup-burst, .ac-sup-rays line,
  .ac-sup-slot, .ac-sup-shockwave, .ac-sup-scan,
  .ac-led, .ac-line, .ac-pulse, .ac-gpu, .ac-fan, .ac-run,
  .ac-agent, .ac-agent-dot, .ac-agent-fill,
  .ac-agent-run, .ac-agent-done {
    animation: none !important;
  }
  .ac-pkg { opacity: 0; }
  .ac-sup-shockwave, .ac-sup-scan, .ac-sup-burst, .ac-sup-rays line { opacity: 0; }
  .ac-led-pwr { background: #28c840; }
  .ac-led-net { background: #febc2e; }
  .ac-led-act { background: #00AEE8; }
  .ac-cluster .ac-gpu { border-color: rgba(0,174,232,0.35); }
  .ac-cluster .ac-gpu .ac-run { opacity: 1; transform: none; }
}

@keyframes ac-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ===== BIG VALUE STRIP (parallel to Nebius "Run open-source AI at production speed") ===== */
.ac-strip {
  background: var(--light-blue); padding: 88px 60px;
}
.ac-strip-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.ac-strip h2 {
  font-size: 2.6em; font-weight: 800; color: var(--navy);
  letter-spacing: -0.6px; line-height: 1.15; margin-bottom: 18px;
}
.ac-strip p {
  font-size: 1.08em; color: var(--steel); line-height: 1.7;
  max-width: 760px; margin: 0 auto 28px;
}
.ac-strip .btn-primary-lg { margin-top: 8px; }

/* ===== FEATURE GRID (6 value cards like Nebius) ===== */
.ac-features { padding: 100px 60px; background: var(--white); }
.ac-features-inner { max-width: 1280px; margin: 0 auto; }
.ac-features-head { text-align: center; margin-bottom: 52px; }
.ac-features-head .section-tag { justify-content: center; margin: 0 auto 16px; display: inline-flex; }
.ac-features-head h2 {
  font-size: 2.4em; font-weight: 800; color: var(--navy);
  letter-spacing: -0.4px; line-height: 1.15; margin-bottom: 14px;
}
.ac-features-head p { font-size: 1.02em; color: var(--steel); line-height: 1.65; max-width: 640px; margin: 0 auto; }
.ac-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.ac-feature-card {
  background: white; border: 1px solid var(--border); border-radius: 14px;
  padding: 28px 30px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex; flex-direction: column; gap: 10px;
}
.ac-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(12,35,64,0.07);
  border-color: rgba(0,174,232,0.3);
}
.ac-feature-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--cyan-light); color: var(--cyan-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2em; font-weight: 800;
}
.ac-feature-card h3 { font-size: 1.06em; font-weight: 700; color: var(--navy); letter-spacing: -0.1px; }
.ac-feature-card p { font-size: 0.92em; color: var(--steel); line-height: 1.65; }

/* ===== SERVICES ROW (Inference, Batch, Post-training) ===== */
.ac-services { padding: 100px 60px; background: var(--bg-warm); }
.ac-services-inner { max-width: 1280px; margin: 0 auto; }
.ac-services-head { text-align: center; margin-bottom: 48px; }
.ac-services-head .section-tag { justify-content: center; display: inline-flex; margin-bottom: 14px; }
.ac-services-head h2 {
  font-size: 2.2em; font-weight: 800; color: var(--navy);
  letter-spacing: -0.4px; line-height: 1.2; margin-bottom: 12px;
}
.ac-services-head p { font-size: 1em; color: var(--steel); line-height: 1.65; max-width: 620px; margin: 0 auto; }
.ac-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ac-service-card {
  background: white; border: 1px solid var(--border); border-radius: 14px;
  padding: 30px; transition: transform 0.2s, box-shadow 0.2s;
}
.ac-service-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(12,35,64,0.07); }
.ac-service-kicker {
  font-size: 0.72em; font-weight: 700; color: var(--cyan);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px;
}
.ac-service-card h3 { font-size: 1.25em; font-weight: 800; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.2px; }
.ac-service-card p { font-size: 0.92em; color: var(--steel); line-height: 1.65; }

/* ===== MODELS SECTION ===== */
.ac-models { padding: 100px 60px; background: var(--white); }
.ac-models-inner { max-width: 1280px; margin: 0 auto; }
.ac-models-head { text-align: center; margin-bottom: 48px; }
.ac-models-head .section-tag { justify-content: center; display: inline-flex; margin-bottom: 14px; }
.ac-models-head h2 { font-size: 2.2em; font-weight: 800; color: var(--navy); letter-spacing: -0.4px; line-height: 1.2; margin-bottom: 12px; }
.ac-models-head p { font-size: 1em; color: var(--steel); line-height: 1.65; max-width: 620px; margin: 0 auto; }
.ac-models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ac-model-col {
  background: var(--light-blue); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px;
}
.ac-model-col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ac-model-col-head .ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--cyan); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9em; font-weight: 800;
}
.ac-model-col h3 { font-size: 1.15em; font-weight: 800; color: var(--navy); letter-spacing: -0.2px; }
.ac-model-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ac-model-row {
  background: white; border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px;
  font-size: 0.88em; font-weight: 600; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center;
}
.ac-model-row .tag {
  font-size: 0.64em; font-weight: 800; letter-spacing: 1px;
  color: var(--cyan-dark); background: var(--cyan-light);
  padding: 2px 7px; border-radius: 6px;
}
.ac-model-col-link {
  font-size: 0.88em; font-weight: 700; color: var(--cyan-dark);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.ac-model-col-link:hover { color: var(--cyan); }

/* ===== COMMUNITY CARD ROW ===== */
.ac-community { padding: 60px 60px 20px; background: var(--white); }
.ac-community-inner {
  max-width: 1280px; margin: 0 auto;
  background: var(--navy); border-radius: 20px;
  padding: 44px; color: white;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center;
  position: relative; overflow: hidden;
}
.ac-community-inner::before {
  content: ''; position: absolute; top: -120px; right: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(0,174,232,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.ac-community-inner .section-tag { color: var(--cyan); }
.ac-community h3 { font-size: 1.7em; font-weight: 800; line-height: 1.2; letter-spacing: -0.3px; margin-bottom: 10px; }
.ac-community p { font-size: 0.98em; color: rgba(255,255,255,0.75); line-height: 1.65; max-width: 480px; }
.ac-community-links { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 2; }
.ac-community-link {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px; padding: 16px 20px;
  color: white; text-decoration: none;
  display: flex; align-items: center; gap: 10px;
  transition: background 0.2s, border-color 0.2s;
  font-weight: 600; font-size: 0.92em;
}
.ac-community-link:hover { background: rgba(0,174,232,0.18); border-color: var(--cyan); }
.ac-community-link .ico {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--cyan); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78em; font-weight: 800;
}

/* ===== BENCHMARK STRIP ===== */
.ac-bench { padding: 100px 60px; background: var(--bg-warm); }
.ac-bench-inner { max-width: 1280px; margin: 0 auto; }
.ac-bench-head { text-align: center; margin-bottom: 48px; }
.ac-bench-head .section-tag { justify-content: center; display: inline-flex; margin-bottom: 14px; }
.ac-bench-head h2 { font-size: 2.2em; font-weight: 800; color: var(--navy); letter-spacing: -0.4px; line-height: 1.2; margin-bottom: 12px; }
.ac-bench-head p { font-size: 1em; color: var(--steel); line-height: 1.65; max-width: 620px; margin: 0 auto; }
.ac-bench-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ac-bench-card {
  background: white; border: 1px solid var(--border); border-radius: 14px;
  padding: 30px 28px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ac-bench-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(12,35,64,0.07); }
.ac-bench-card .big {
  font-size: 2.4em; font-weight: 800; color: var(--cyan);
  line-height: 1; margin-bottom: 6px;
}
.ac-bench-card h4 { font-size: 1.02em; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.ac-bench-card p { font-size: 0.88em; color: var(--steel); line-height: 1.6; }

/* ===== CODE-BLOCK CALLOUT ===== */
.ac-code { padding: 100px 60px; background: var(--white); }
.ac-code-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center;
}
.ac-code-text .section-tag { margin-bottom: 14px; }
.ac-code-text h2 {
  font-size: 2.2em; font-weight: 800; color: var(--navy);
  letter-spacing: -0.4px; line-height: 1.2; margin-bottom: 14px;
}
.ac-code-text p { font-size: 1em; color: var(--steel); line-height: 1.7; margin-bottom: 22px; }
.ac-code-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cyan-dark); text-decoration: none; font-size: 0.94em; }
.ac-code-cta:hover { color: var(--cyan); }

.ac-code-block {
  background: var(--navy-deep); border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 44px rgba(12,35,64,0.15);
  overflow: hidden;
}
.ac-code-head {
  padding: 11px 14px; background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 7px;
}
.ac-code-head .cd { width: 10px; height: 10px; border-radius: 50%; }
.ac-code-head .cd-r { background: #ff5f57; }
.ac-code-head .cd-y { background: #febc2e; }
.ac-code-head .cd-g { background: #28c840; }
.ac-code-head .ct { margin-left: 10px; font-size: 0.72em; color: rgba(255,255,255,0.55); font-weight: 500; }
.ac-code pre {
  margin: 0; padding: 22px 22px 24px;
  font-family: 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
  font-size: 0.82em; line-height: 1.65; color: #D9ECFD;
  overflow-x: auto;
}
.ac-code .k  { color: #E8807A; }   /* keywords */
.ac-code .s  { color: #B8E86B; }   /* strings */
.ac-code .c  { color: #7A8FA6; font-style: italic; }   /* comments */
.ac-code .fn { color: #00AEE8; }   /* function names */
.ac-code .p  { color: #AEC7E0; }   /* params */

/* ===== PRICING CALLOUT ===== */
.ac-price {
  padding: 90px 60px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: white; text-align: center; position: relative; overflow: hidden;
}
.ac-price::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,174,232,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.ac-price-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
.ac-price .section-tag { justify-content: center; display: inline-flex; color: var(--cyan); margin-bottom: 14px; }
.ac-price .section-tag .bar { background: var(--cyan); }
.ac-price h2 {
  font-size: 2.4em; font-weight: 800; color: white;
  line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 14px;
}
.ac-price p { font-size: 1.02em; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 28px; }
.ac-price-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Pricing-section buttons (on dark navy background) */
.ac-price .btn-w {
  padding: 14px 30px; border-radius: 10px; font-size: 1em; font-weight: 700;
  background: white; color: var(--navy); border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; transition: all 0.2s;
}
.ac-price .btn-w:hover {
  background: var(--cyan-light); color: var(--cyan-dark);
  transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,174,232,0.25);
}
.ac-price .btn-od {
  padding: 14px 30px; border-radius: 10px; font-size: 1em; font-weight: 600;
  background: transparent; color: white;
  border: 2px solid rgba(255,255,255,0.3);
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; transition: all 0.2s;
}
.ac-price .btn-od:hover {
  border-color: var(--cyan); color: var(--cyan); background: rgba(0,174,232,0.08);
}

/* ===== FAQ ===== */
.ac-faq { padding: 100px 60px; background: var(--white); }
.ac-faq-inner { max-width: 880px; margin: 0 auto; }
.ac-faq-head { text-align: center; margin-bottom: 48px; }
.ac-faq-head .section-tag { justify-content: center; display: inline-flex; margin-bottom: 14px; }
.ac-faq-head h2 { font-size: 2.2em; font-weight: 800; color: var(--navy); letter-spacing: -0.4px; line-height: 1.2; }
.ac-faq-item {
  background: white; border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 10px;
  transition: border-color 0.2s;
}
.ac-faq-item[open] { border-color: rgba(0,174,232,0.3); }
.ac-faq-item summary {
  list-style: none; cursor: pointer;
  padding: 18px 20px;
  font-size: 1em; font-weight: 700; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.ac-faq-item summary::-webkit-details-marker { display: none; }
.ac-faq-item summary::after {
  content: '+'; font-size: 1.4em; font-weight: 700; color: var(--cyan);
  transition: transform 0.2s;
}
.ac-faq-item[open] summary::after { content: '\2013'; }
.ac-faq-item p {
  padding: 0 20px 20px; font-size: 0.95em; color: var(--steel); line-height: 1.7;
}
.ac-faq-item p + p { padding-top: 10px; }

/* ===== FINAL CTA ===== */
.ac-final {
  padding: 90px 60px;
  background: var(--light-blue);
  text-align: center;
}
.ac-final-inner { max-width: 700px; margin: 0 auto; }
.ac-final h2 {
  font-size: 2.4em; font-weight: 800; color: var(--navy);
  letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 12px;
}
.ac-final p { font-size: 1.05em; color: var(--steel); line-height: 1.7; margin-bottom: 28px; }
.ac-final-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ac-final-links {
  display: flex; gap: 24px; justify-content: center;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.ac-final-links a {
  font-size: 0.9em; font-weight: 600; color: var(--cyan-dark);
  text-decoration: none;
}
.ac-final-links a:hover { color: var(--cyan); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1120px) {
  .ac-anim { transform: scale(0.9); transform-origin: top right; }
}
@media (max-width: 1024px) {
  .ac-hero { padding: 56px 24px; }
  .ac-hero-inner { flex-direction: column; }
  .ac-hero-text, .ac-hero-visual { min-width: 100%; }
  .ac-hero h1 { font-size: 2.6em; }
  .ac-anim { transform: scale(0.82); transform-origin: top center; margin-bottom: -60px; }

  .ac-strip { padding: 56px 24px; }
  .ac-strip h2 { font-size: 2em; }

  .ac-features, .ac-services, .ac-models, .ac-bench, .ac-code,
  .ac-price, .ac-faq, .ac-final, .ac-community {
    padding-left: 24px; padding-right: 24px;
  }
  .ac-features-grid, .ac-services-grid, .ac-bench-grid { grid-template-columns: 1fr 1fr; }
  .ac-models-grid { grid-template-columns: 1fr; }
  .ac-code-inner { grid-template-columns: 1fr; gap: 28px; }
  .ac-community-inner { grid-template-columns: 1fr; padding: 32px; }
}
@media (max-width: 720px) {
  .ac-features-grid, .ac-services-grid, .ac-bench-grid { grid-template-columns: 1fr; }
  .ac-hero-proof { flex-wrap: wrap; gap: 16px; }
  .ac-hero-proof-divider { display: none; }
  /* The hero animation is a 540x520 absolute-layout block. Use `zoom`
     (not transform) so the layout box itself shrinks — no clipping or
     negative-margin tricks needed. zoom works in all modern browsers
     (Firefox 126+, Chrome, Safari, Edge). */
  .ac-hero-visual {
    display: block;
    width: 100%;
    margin-top: 12px;
  }
  .ac-anim {
    zoom: 0.6;
    margin: 0 auto;
  }
  .ac-hero-text { min-width: 0; flex: 1 1 100%; }
  .ac-hero h1 { font-size: 2.1em; letter-spacing: -0.5px; overflow-wrap: anywhere; }
  .ac-hero { padding: 48px 20px; }
}
@media (max-width: 480px) {
  .ac-hero { padding: 36px 16px; }
  .ac-hero h1 { font-size: 1.8em; }
  .ac-strip h2 { font-size: 1.7em; }
  .ac-features, .ac-services, .ac-models, .ac-bench, .ac-code,
  .ac-price, .ac-faq, .ac-final, .ac-community {
    padding-left: 16px; padding-right: 16px;
  }
  /* Tighter zoom at the smallest phone widths. */
  .ac-anim { zoom: 0.52; }
}