/* Flashbox Host — estilos del sitio
   Generado a partir del prototipo de landing page.
*/

  :root{
    --bg:#020207;
    --bg-soft:#050710;
    --panel: rgba(255,255,255,0.045);
    --panel-border: rgba(255,255,255,0.1);
    --text:#f6f7fd;
    --text-dim:#9aa0b4;
    --text-dimmer:#6b7086;
    --blue:#3b82f6;
    --violet:#8b5cf6;
    --cyan:#22d3ee;
    --pink:#ec4899;
    --grad-main: linear-gradient(120deg, var(--blue), var(--violet) 55%, var(--cyan));
    --grad-line: linear-gradient(120deg, var(--cyan), var(--violet));
    --grad-neon: linear-gradient(120deg, var(--cyan), var(--violet) 50%, var(--pink));
    --radius: 20px;
    --ease: cubic-bezier(.16,.84,.44,1);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{
    scroll-behavior:smooth;
    scroll-padding-top:100px;
    overflow-x:hidden;
    width:100%;
    max-width:100%;
  }
  html, body{
    overscroll-behavior-x:none;
    touch-action:pan-y;
  }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    width:100%;
    max-width:100%;
    position:relative;
  }
  h1,h2,h3,.brand{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.02em; }

  ::selection{ background:var(--violet); color:#fff; }

  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  img,svg{ display:block; }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

  /* ---------- background layers ---------- */
  .bg-fixed{
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  }
  .bg-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(139,92,246,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139,92,246,0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
    animation: grid-drift 40s linear infinite;
  }
  @keyframes grid-drift{
    0%{ background-position:0 0, 0 0; }
    100%{ background-position:64px 128px, 64px 128px; }
  }
  .scanbeam{
    position:absolute; top:-30%; left:-20%; width:70%; height:180%;
    background:linear-gradient(100deg, transparent 40%, rgba(34,211,238,.05) 48%, rgba(139,92,246,.09) 50%, rgba(34,211,238,.05) 52%, transparent 60%);
    animation: sweep 9s ease-in-out infinite;
    mix-blend-mode:screen;
  }
  @keyframes sweep{
    0%{ transform:translateX(-30%); }
    50%{ transform:translateX(130%); }
    100%{ transform:translateX(130%); }
  }
  .blob{
    position:absolute; border-radius:50%; filter:blur(90px); opacity:.62;
    animation: float 18s var(--ease) infinite alternate;
  }
  .blob1{ width:520px; height:520px; background:var(--blue); top:-180px; left:-120px; animation-delay:0s; }
  .blob2{ width:460px; height:460px; background:var(--violet); top:120px; right:-160px; animation-duration:22s; }
  .blob3{ width:400px; height:400px; background:var(--cyan); bottom:-160px; left:35%; opacity:.35; animation-duration:26s; }
  @keyframes float{
    0%{ transform:translate(0,0) scale(1); }
    100%{ transform:translate(40px,60px) scale(1.12); }
  }

  #particles{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }

  /* ---------- navbar ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:22px 0; transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
    transform:translateZ(0); -webkit-transform:translateZ(0);
    will-change:transform;
  }
  header.scrolled{
    padding:12px 0;
    background:rgba(2,2,7,0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom:1px solid var(--panel-border);
    box-shadow:0 1px 0 rgba(139,92,246,.15);
  }
  nav{ display:flex; align-items:center; justify-content:space-between; }
  .brand{ display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; }
  .brand .bolt{
    width:34px; height:34px; border-radius:10px;
    background:var(--grad-main); display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 22px rgba(139,92,246,.55);
  }
  .brand .bolt svg{ width:18px; height:18px; }
  .brand .name-grad{
    background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent;
    background-size:200% auto; animation:gradShift 6s linear infinite;
  }
  @keyframes gradShift{
    0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; }
  }

  .nav-links{ display:flex; align-items:center; gap:36px; }
  .nav-links a{
    font-size:14.5px; font-weight:500; color:var(--text-dim); position:relative; padding:4px 0;
    transition:color .25s;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
    background:var(--grad-line); transition:width .3s var(--ease);
  }
  .nav-links a:hover{ color:var(--text); }
  .nav-links a:hover::after{ width:100%; }

  .nav-actions{ display:flex; align-items:center; gap:14px; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 24px; border-radius:100px; font-weight:600; font-size:14.5px;
    cursor:pointer; border:1px solid transparent; position:relative; overflow:hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--grad-main); color:#08090f; box-shadow:0 8px 30px -8px rgba(139,92,246,.65);
    animation: glow-pulse 3.2s ease-in-out infinite;
  }
  @keyframes glow-pulse{
    0%,100%{ box-shadow:0 8px 30px -8px rgba(139,92,246,.65); }
    50%{ box-shadow:0 8px 40px -6px rgba(34,211,238,.75); }
  }
  .btn-primary::before{
    content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform:translateX(-120%) skewX(-20deg); transition:transform .6s;
  }
  .btn-primary:hover::before{ transform:translateX(120%) skewX(-20deg); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(139,92,246,.85); }

  .btn-ghost{
    background:var(--panel); border-color:var(--panel-border); color:var(--text); backdrop-filter:blur(6px);
  }
  .btn-ghost:hover{ border-color:rgba(255,255,255,.28); transform:translateY(-2px); }

  .btn-block{ width:100%; }

  .menu-toggle{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--panel-border); background:var(--panel); align-items:center; justify-content:center; }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
    content:''; display:block; width:16px; height:2px; background:var(--text); position:relative; transition:.3s;
  }
  .menu-toggle span::before{ position:absolute; top:-6px; }
  .menu-toggle span::after{ position:absolute; top:6px; }

  /* ---------- reveal ---------- */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-scale{ opacity:0; transform:scale(.94); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal-scale.in{ opacity:1; transform:scale(1); }

  /* ---------- hero ---------- */
  .hero{
    position:relative; z-index:1; padding:190px 0 120px; overflow:hidden;
  }
  .hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
  .badge{
    display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
    background:var(--panel); border:1px solid var(--panel-border); font-size:13px; font-weight:600; color:var(--text-dim);
    margin-bottom:26px; backdrop-filter:blur(6px);
  }
  .badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulse 1.8s infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

  .hero h1{
    font-size:clamp(38px, 5.4vw, 66px); line-height:1.06; font-weight:700; margin-bottom:22px;
    min-height:2.28em;
  }
  #typedHeadline{ color:#fff; }
  .type-cursor{
    display:inline-block; width:5px; height:0.82em; margin-left:5px; vertical-align:-0.08em;
    background:var(--cyan); border-radius:2px;
    box-shadow:0 0 10px var(--cyan), 0 0 20px rgba(34,211,238,.6);
    animation:cursorBlink .85s steps(1) infinite;
  }
  .type-cursor.solid{ animation:none; opacity:1; }
  @keyframes cursorBlink{ 50%{ opacity:0; } }
  .hero p.lead{
    font-size:18px; line-height:1.65; color:var(--text-dim); max-width:520px; margin-bottom:36px;
  }
  .hero-ctas{ display:flex; gap:16px; margin-bottom:52px; flex-wrap:wrap; }
  .btn-lg{ padding:16px 30px; font-size:15.5px; }

  .stat-row{ display:flex; gap:36px; flex-wrap:wrap; }
  .stat{ min-width:110px; }
  .stat .num{ font-family:'Space Grotesk', sans-serif; font-size:28px; font-weight:700; }
  .stat .lbl{ font-size:12.5px; color:var(--text-dimmer); margin-top:2px; }

  /* hero visual: 3D server hologram */
  .hero-visual{ position:relative; perspective:1700px; height:600px; }
  .server-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform-style:preserve-3d; }

  .server-ring{
    position:absolute; bottom:56px; width:350px; height:96px; border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(34,211,238,.4), rgba(139,92,246,.16) 55%, transparent 75%);
    transform:rotateX(78deg); filter:blur(1px); animation:ringPulse 3.4s ease-in-out infinite;
  }
  .server-ring::after{
    content:''; position:absolute; inset:-10px; border-radius:50%;
    background:conic-gradient(from 0deg, transparent, rgba(34,211,238,.75), transparent 30%, rgba(139,92,246,.75) 60%, transparent 92%);
    animation:ringSpin 7s linear infinite;
    -webkit-mask:radial-gradient(circle, transparent 55%, black 59%, black 63%, transparent 67%);
    mask:radial-gradient(circle, transparent 55%, black 59%, black 63%, transparent 67%);
  }
  @keyframes ringPulse{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }
  @keyframes ringSpin{ to{ transform:rotate(360deg); } }

  .server-beam{
    position:absolute; top:-44px; width:195px; height:300px; left:50%; transform:translateX(-50%);
    background:linear-gradient(180deg, rgba(34,211,238,.16), transparent 75%);
    clip-path:polygon(38% 100%,62% 100%,100% 0,0 0);
    animation:beamPulse 3.4s ease-in-out infinite; pointer-events:none;
  }
  @keyframes beamPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:.85; } }

  .server-tilt{ transform-style:preserve-3d; transition:transform .2s ease-out; }
  .server-spin{ transform-style:preserve-3d; animation:serverSway 9s ease-in-out infinite; }
  @keyframes serverSway{
    0%,100%{ transform:rotateY(-16deg) rotateX(6deg); }
    50%{ transform:rotateY(16deg) rotateX(6deg); }
  }

  .server-3d{ position:relative; width:270px; height:390px; transform-style:preserve-3d; }
  .face{ position:absolute; border-radius:15px; }
  .face.front{
    width:270px; height:390px; transform:translateZ(78px);
    background:linear-gradient(165deg, #23253f, #0a0b14 70%);
    border:1px solid rgba(139,92,246,.5); overflow:hidden;
    box-shadow:0 0 50px rgba(139,92,246,.28) inset, 0 0 100px rgba(34,211,238,.18);
  }
  .face.back{ width:270px; height:390px; transform:translateZ(-78px) rotateY(180deg); background:linear-gradient(165deg,#0e0f1c,#040509); }
  .face.right{ width:156px; height:390px; transform:rotateY(90deg) translateZ(135px); background:linear-gradient(180deg, #1a1b30, #060710); overflow:hidden; }
  .face.left{ width:156px; height:390px; transform:rotateY(-90deg) translateZ(135px); background:linear-gradient(180deg, #0f1019, #030408); overflow:hidden; }
  .face.top{ width:270px; height:156px; transform:rotateX(90deg) translateZ(195px); background:linear-gradient(100deg, #2c2049, #140d22); }
  .face.bottom{ width:270px; height:156px; transform:rotateX(-90deg) translateZ(195px); background:#020207; }

  .slats{ position:absolute; inset:0; background:repeating-linear-gradient(180deg, transparent 0 30px, rgba(255,255,255,.045) 30px 31px); }
  .strip{
    position:absolute; top:18px; bottom:18px; left:50%; width:4px; margin-left:-2px;
    background:var(--grad-neon); border-radius:4px; box-shadow:0 0 16px rgba(139,92,246,.85);
    animation:stripPulse 2.4s ease-in-out infinite;
  }
  @keyframes stripPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
  .badge-mark{
    position:absolute; top:22px; left:22px; width:40px; height:40px; border-radius:11px;
    background:var(--grad-main); display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 26px rgba(139,92,246,.85);
  }
  .badge-mark svg{ width:21px; height:21px; }
  .server-label{ position:absolute; top:29px; left:72px; font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.85); }
  .server-label small{ display:block; font-size:10px; font-weight:500; color:var(--text-dimmer); letter-spacing:.12em; text-transform:uppercase; margin-top:2px; }
  .leds{
    position:absolute; left:22px; right:44px; top:78px; bottom:26px; display:grid;
    grid-template-columns:repeat(3,1fr); gap:22px 14px; align-content:start;
  }
  .leds span{ width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor, 0 0 3px currentColor; animation:ledBlink 2.2s ease-in-out infinite; animation-delay:calc(var(--i) * .18s); }
  .leds span:nth-child(3n+1){ color:var(--cyan); }
  .leds span:nth-child(3n+2){ color:var(--violet); }
  .leds span:nth-child(3n){ color:var(--pink); }
  @keyframes ledBlink{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

  .vents{ position:absolute; inset:20px 14px; background:repeating-linear-gradient(180deg, transparent 0 10px, rgba(255,255,255,.05) 10px 11px); border-radius:6px; }

  .spark{ position:absolute; width:4px; height:4px; border-radius:50%; box-shadow:0 0 8px currentColor; animation:sparkFloat 6s ease-in-out infinite; }
  @keyframes sparkFloat{ 0%,100%{ transform:translate(0,0); opacity:.35; } 50%{ transform:translate(14px,-20px); opacity:1; } }

  .holo-panel{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); width:265px; z-index:2; }
  .holo-panel .mock-metric{ padding:10px 12px; margin-bottom:8px; }
  .holo-panel .m-label{ font-size:11.5px; gap:7px; }
  .holo-panel .m-ico{ width:22px; height:22px; }
  .holo-panel .m-ico svg{ width:12px; height:12px; }
  .holo-panel .m-value{ font-size:12.5px; }
  .holo-panel .mock-top{ margin-bottom:12px; }

  .mock-card{
    position:relative;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--panel-border); border-radius:18px; padding:18px;
    backdrop-filter:blur(20px); box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
    transform-style:preserve-3d; transition:transform .15s ease-out;
  }
  .hud{ position:absolute; width:22px; height:22px; pointer-events:none; }
  .hud.tl{ top:-1px; left:-1px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); border-radius:8px 0 0 0; filter:drop-shadow(0 0 5px var(--cyan)); }
  .hud.tr{ top:-1px; right:-1px; border-top:2px solid var(--violet); border-right:2px solid var(--violet); border-radius:0 8px 0 0; filter:drop-shadow(0 0 5px var(--violet)); }
  .hud.bl{ bottom:-1px; left:-1px; border-bottom:2px solid var(--violet); border-left:2px solid var(--violet); border-radius:0 0 0 8px; filter:drop-shadow(0 0 5px var(--violet)); }
  .hud.br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan); border-radius:0 0 8px 0; filter:drop-shadow(0 0 5px var(--cyan)); }
  .mock-top{ display:flex; align-items:center; gap:8px; margin-bottom:20px; }
  .mock-dot{ width:10px; height:10px; border-radius:50%; }
  .mock-dot:nth-child(1){ background:#ff5f57; }
  .mock-dot:nth-child(2){ background:#febc2e; }
  .mock-dot:nth-child(3){ background:#28c840; }
  .mock-title{ margin-left:8px; font-size:12px; color:var(--text-dimmer); font-family:'Space Grotesk',sans-serif; }

  .mock-metric{
    display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:14px;
    background:rgba(255,255,255,.03); border:1px solid var(--panel-border); margin-bottom:12px;
  }
  .mock-metric:last-child{ margin-bottom:0; }
  .mock-metric .m-label{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-dim); }
  .mock-metric .m-ico{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
  .mock-metric .m-value{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; }
  .bar-track{ height:5px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:4px; }
  .bar-fill{ height:100%; border-radius:6px; background:var(--grad-line); width:0%; transition:width 1.4s var(--ease); }

  .float-chip{
    position:absolute; padding:10px 16px; border-radius:14px; background:rgba(10,12,22,.85);
    border:1px solid var(--panel-border); backdrop-filter:blur(14px); font-size:12.5px; font-weight:600;
    display:flex; align-items:center; gap:8px; box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
    animation:bob 5s ease-in-out infinite;
  }
  .chip-a{ top:26px; right:-8px; animation-delay:.2s; z-index:3; }
  .chip-b{ top:262px; right:-34px; animation-delay:1.1s; z-index:3; }
  @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

  /* ---------- marquee ---------- */
  .marquee-section{ position:relative; z-index:1; padding:14px 0; border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border); background:rgba(255,255,255,.015); }
  .marquee{ display:flex; overflow:hidden; user-select:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
  .marquee-track{ display:flex; gap:56px; padding-right:56px; white-space:nowrap; animation:scroll-x 26s linear infinite; }
  .marquee-track span{ font-size:13.5px; font-weight:600; color:var(--text-dimmer); display:flex; align-items:center; gap:10px; }
  .marquee-track span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--cyan); }
  @keyframes scroll-x{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

  /* ---------- sections generic ---------- */
  section{ position:relative; z-index:1; padding:120px 0; }
  .section-head{ max-width:640px; margin:0 auto 64px; text-align:center; }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; }
  .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:pulse 1.8s infinite; }
  .section-head h2{ font-size:clamp(28px,3.6vw,42px); font-weight:700; line-height:1.16; margin-bottom:16px; }
  .section-head p{ color:var(--text-dim); font-size:16px; line-height:1.6; }

  /* ---------- features ---------- */
  .feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .feat-card{
    padding:30px 26px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--panel-border);
    transition: transform .12s ease-out, border-color .3s, background .3s; transform-style:preserve-3d;
    position:relative; overflow:hidden;
  }
  .feat-card::after{
    content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,.16), transparent 60%);
  }
  .feat-card:hover::after{ opacity:1; }
  .feat-card:hover{ border-color:rgba(139,92,246,.4); background:rgba(255,255,255,.055); }
  .feat-ico{
    width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center;
    background:var(--grad-main); margin-bottom:20px; box-shadow:0 10px 26px -8px rgba(139,92,246,.6);
    animation:icoFloat 4.4s ease-in-out infinite;
  }
  @keyframes icoFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
  .feat-card:nth-child(2) .feat-ico{ animation-delay:.3s; }
  .feat-card:nth-child(3) .feat-ico{ animation-delay:.6s; }
  .feat-card:nth-child(4) .feat-ico{ animation-delay:.9s; }
  .feat-card:nth-child(5) .feat-ico{ animation-delay:1.2s; }
  .feat-card:nth-child(6) .feat-ico{ animation-delay:1.5s; }
  .feat-ico svg{ width:23px; height:23px; stroke:#08090f; }
  .feat-ico.c-blue{ background:linear-gradient(135deg,#3b82f6,#22d3ee); box-shadow:0 10px 26px -8px rgba(59,130,246,.6); }
  .feat-ico.c-violet{ background:linear-gradient(135deg,#8b5cf6,#3b82f6); box-shadow:0 10px 26px -8px rgba(139,92,246,.6); }
  .feat-ico.c-cyan{ background:linear-gradient(135deg,#22d3ee,#8b5cf6); box-shadow:0 10px 26px -8px rgba(34,211,238,.55); }
  .feat-ico.c-pink{ background:linear-gradient(135deg,#ec4899,#8b5cf6); box-shadow:0 10px 26px -8px rgba(236,72,153,.55); }
  .feat-card h3{ font-size:18px; font-weight:600; margin-bottom:10px; }
  .feat-card p{ font-size:14.5px; color:var(--text-dim); line-height:1.6; }

  /* ---------- services ---------- */
  .services-layout{ display:grid; grid-template-columns:340px 1fr; gap:50px; align-items:stretch; }

  .services-visual{ position:relative; perspective:1400px; display:flex; }
  .services-visual::before{
    content:''; position:absolute; inset:-20px; border-radius:26px;
    background:radial-gradient(ellipse at 30% 20%, rgba(139,92,246,.22), transparent 60%);
    filter:blur(14px); animation:ringPulse 4s ease-in-out infinite; pointer-events:none;
  }

  .code-panel{
    position:relative; width:100%; height:100%; min-height:380px; border-radius:20px;
    background:linear-gradient(165deg, #12131f, #05060b 78%);
    border:1px solid rgba(139,92,246,.4); overflow:hidden;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 70px rgba(34,211,238,.14), 0 0 0 1px rgba(255,255,255,.02) inset;
    display:flex; flex-direction:column; transform-style:preserve-3d; transition:transform .15s ease-out;
  }
  .code-top{
    display:flex; align-items:center; gap:8px; padding:16px 18px; flex-shrink:0;
    border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02);
  }
  .code-tab{
    margin-left:8px; font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600;
    color:var(--text-dim); display:flex; align-items:center; gap:6px;
  }
  .code-body{ flex:1; padding:18px 20px; font-family:'Menlo','Consolas',monospace; font-size:12.5px; line-height:1.8; display:flex; overflow:hidden; }
  .code-linenums{ display:flex; flex-direction:column; align-items:flex-end; padding-right:16px; flex-shrink:0; user-select:none; }
  .code-linenums div{ color:rgba(255,255,255,.16); }
  .code-content{ flex:1; min-width:0; }
  .code-line{ white-space:pre; overflow:hidden; text-overflow:ellipsis; color:#e7e9f5; }
  .tok-com{ color:#7d8299; font-style:italic; }
  .tok-kw{ color:#c084fc; }
  .tok-fn{ color:#22d3ee; }
  .tok-str{ color:#f472b6; }
  .code-cursor{
    display:inline-block; width:6px; height:1em; background:var(--cyan); margin-left:1px; vertical-align:-0.15em;
    box-shadow:0 0 8px var(--cyan); animation:cursorBlink .85s steps(1) infinite;
  }

  .service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .service-grid.service-grid--split{ grid-template-columns:repeat(2,1fr); }
  .service-card{
    position:relative; padding:32px 24px; border-radius:var(--radius); background:var(--panel);
    border:1px solid var(--panel-border); overflow:hidden;
    transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
  }
  .service-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-neon); opacity:.85;
  }
  .service-card:hover{ transform:translateY(-8px); border-color:rgba(139,92,246,.5); box-shadow:0 28px 56px -22px rgba(139,92,246,.45); }
  .service-ico{
    width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    margin-bottom:22px; animation:icoFloat 4.8s ease-in-out infinite;
  }
  .service-card:nth-child(2) .service-ico{ animation-delay:.35s; }
  .service-card:nth-child(3) .service-ico{ animation-delay:.7s; }
  .service-card:nth-child(4) .service-ico{ animation-delay:1.05s; }
  .service-ico svg{ width:24px; height:24px; stroke:#ffffff; }
  .service-ico.c-blue{ background:linear-gradient(135deg,#3b82f6,#22d3ee); box-shadow:0 10px 26px -8px rgba(59,130,246,.6); }
  .service-ico.c-violet{ background:linear-gradient(135deg,#8b5cf6,#3b82f6); box-shadow:0 10px 26px -8px rgba(139,92,246,.6); }
  .service-ico.c-cyan{ background:linear-gradient(135deg,#22d3ee,#8b5cf6); box-shadow:0 10px 26px -8px rgba(34,211,238,.55); }
  .service-ico.c-pink{ background:linear-gradient(135deg,#ec4899,#8b5cf6); box-shadow:0 10px 26px -8px rgba(236,72,153,.55); }
  .service-card h3{ font-size:18.5px; font-weight:600; margin-bottom:10px; }
  .service-card p{ font-size:14px; color:var(--text-dim); line-height:1.6; margin-bottom:18px; }
  .service-tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .service-tags span{ font-size:11.5px; padding:5px 11px; border-radius:100px; background:rgba(255,255,255,.05); border:1px solid var(--panel-border); color:var(--text-dimmer); }

  /* ---------- steps ---------- */
  .steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; }
  .step{ position:relative; z-index:1; padding:36px 28px; border-radius:var(--radius); background:#0a0b14; border:1px solid var(--panel-border); }
  .step h3{ font-size:17px; margin-bottom:8px; font-weight:600; }
  .step p{ font-size:14px; color:var(--text-dim); line-height:1.6; }

  .step-track{
    position:absolute; top:58px; left:6%; right:6%; height:2px; z-index:2; pointer-events:none;
    background:linear-gradient(90deg, rgba(34,211,238,.16), rgba(139,92,246,.32), rgba(236,72,153,.16));
  }
  .step-track::after{
    content:''; position:absolute; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%;
    background:var(--cyan); box-shadow:0 0 16px var(--cyan), 0 0 4px #fff;
    animation:trackPulse 4.5s ease-in-out infinite;
  }
  @keyframes trackPulse{
    0%{ left:0%; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; }
  }

  .step-num{
    position:relative; z-index:2; width:44px; height:44px; margin-bottom:20px; perspective:320px;
  }
  .step-cube{ position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:cubeSpin 7s linear infinite; }
  .step:nth-child(2) .step-cube{ animation-delay:-2.3s; }
  .step:nth-child(3) .step-cube{ animation-delay:-4.6s; }
  .step-cube .cf{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:11px;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; backface-visibility:hidden;
  }
  .step-cube .cf.front{
    background:rgba(139,92,246,.16); border:1px solid rgba(139,92,246,.45); color:var(--cyan);
    transform:translateZ(22px); box-shadow:0 0 18px rgba(139,92,246,.35) inset;
  }
  .step-cube .cf.back{ background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.22); transform:translateZ(-22px) rotateY(180deg); }
  .step-cube .cf.right{ background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.28); transform:rotateY(90deg) translateZ(22px); }
  .step-cube .cf.left{ background:rgba(236,72,153,.12); border:1px solid rgba(236,72,153,.28); transform:rotateY(-90deg) translateZ(22px); }
  @keyframes cubeSpin{ to{ transform:rotateY(360deg); } }

  /* ---------- ingest visual (files flowing into server) ---------- */
  .ingest-block{ margin-top:80px; position:relative; }
  .ingest-stream{ position:relative; height:120px; max-width:600px; margin:0 auto; pointer-events:none; }
  .packet{
    position:absolute; left:50%; top:0; padding:8px 15px; border-radius:100px;
    background:rgba(10,12,22,.92); border:1px solid var(--clr,#22d3ee); color:#fff;
    font-size:12px; font-weight:600; font-family:'Space Grotesk',sans-serif; white-space:nowrap;
    box-shadow:0 0 14px var(--clr,#22d3ee);
    animation:packetFall 3.5s cubic-bezier(.4,0,.6,1) infinite;
  }
  @keyframes packetFall{
    0%{ transform:translate(calc(-50% + var(--sx,0px)), -10px) scale(1); opacity:0; }
    14%{ opacity:1; }
    78%{ opacity:1; transform:translate(-50%, 96px) scale(.65); }
    100%{ transform:translate(-50%, 118px) scale(.25); opacity:0; }
  }
  .ingest-server{ position:relative; height:420px; max-width:340px; margin:0 auto; }
  .intake-glow{
    position:absolute; top:36px; left:50%; width:70px; height:18px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(34,211,238,.85), transparent 72%); filter:blur(2px); z-index:3;
    animation:intakePulse 3.5s ease-in-out infinite;
  }
  @keyframes intakePulse{
    0%,82%,100%{ opacity:0; transform:translateX(-50%) scaleX(.5); }
    88%{ opacity:1; transform:translateX(-50%) scaleX(1.4); }
  }
  .ingest-caption{ text-align:center; color:var(--text-dimmer); font-size:13px; margin-top:24px; }

  /* ---------- pricing ---------- */
  .price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
  .price-card{
    padding:36px 28px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--panel-border);
    display:flex; flex-direction:column; transition:transform .35s var(--ease), border-color .35s;
    position:relative;
  }
  .price-card:hover{ transform:translateY(-8px); }
  .price-card.featured{
    background:linear-gradient(180deg, rgba(139,92,246,.14), rgba(59,130,246,.05));
    border:1px solid rgba(139,92,246,.5); box-shadow:0 26px 60px -20px rgba(139,92,246,.45);
  }
  .price-card.featured::before{
    content:''; position:absolute; inset:0; border-radius:var(--radius); padding:1.5px;
    background:conic-gradient(from 0deg, transparent, rgba(34,211,238,.8), transparent 35%, rgba(139,92,246,.8) 65%, transparent 90%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:ringSpin 6s linear infinite; pointer-events:none;
  }
  .price-badge{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:6px 16px; border-radius:100px;
    background:var(--grad-main); color:#08090f; font-size:12px; font-weight:700; white-space:nowrap;
  }
  .plan-name{ font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:600; margin-bottom:6px; }
  .plan-desc{ font-size:13.5px; color:var(--text-dim); margin-bottom:22px; }
  .plan-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:26px; }
  .plan-price .amount{ font-family:'Space Grotesk',sans-serif; font-size:40px; font-weight:700; }
  .plan-price .cur{ font-size:15px; color:var(--text-dim); }
  .plan-price .per{ font-size:13px; color:var(--text-dimmer); }
  .plan-list{ display:flex; flex-direction:column; gap:13px; margin-bottom:30px; flex:1; }
  .plan-list li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-dim); }
  .plan-list svg{ width:16px; height:16px; stroke:var(--cyan); flex-shrink:0; }
  .price-note{ text-align:center; color:var(--text-dimmer); font-size:13px; margin-top:36px; }

  /* ---------- cta banner ---------- */
  .cta-banner{
    border-radius:28px; padding:70px 50px; text-align:center; position:relative; overflow:hidden;
    background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(139,92,246,.22) 50%, rgba(34,211,238,.16));
    border:1px solid var(--panel-border);
  }
  .cta-banner::before{
    content:''; position:absolute; width:400px; height:400px; background:var(--violet); filter:blur(120px); opacity:.35;
    top:-140px; left:50%; transform:translateX(-50%);
    animation:ctaGlow 5s ease-in-out infinite;
  }
  @keyframes ctaGlow{ 0%,100%{ opacity:.28; transform:translateX(-50%) scale(1); } 50%{ opacity:.5; transform:translateX(-50%) scale(1.18); } }
  .cta-banner::after{
    content:''; position:absolute; inset:0; border-radius:28px; padding:1px;
    background:conic-gradient(from 0deg, transparent, rgba(34,211,238,.55), transparent 35%, rgba(139,92,246,.55) 65%, transparent 90%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:ringSpin 8s linear infinite; opacity:.7; pointer-events:none;
  }
  .cta-banner h2{ font-size:clamp(26px,4vw,40px); font-weight:700; margin-bottom:16px; position:relative; }
  .cta-banner p{ color:var(--text-dim); font-size:16px; margin-bottom:32px; position:relative; }
  .cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; }

  /* ---------- footer ---------- */
  footer{ position:relative; z-index:1; padding:70px 0 34px; border-top:1px solid var(--panel-border); }
  .foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; margin-bottom:56px; }
  .foot-brand p{ color:var(--text-dim); font-size:14px; line-height:1.6; margin:16px 0 20px; max-width:280px; }
  .foot-social{ display:flex; gap:10px; }
  .foot-social a{
    width:36px; height:36px; border-radius:10px; background:var(--panel); border:1px solid var(--panel-border);
    display:flex; align-items:center; justify-content:center; transition:.3s;
  }
  .foot-social a:hover{ border-color:var(--violet); transform:translateY(-3px); }
  .foot-social svg{ width:16px; height:16px; }
  .foot-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dimmer); margin-bottom:18px; }
  .foot-col ul{ display:flex; flex-direction:column; gap:12px; }
  .foot-col a{ font-size:14px; color:var(--text-dim); transition:color .25s; }
  .foot-col a:hover{ color:var(--text); }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--panel-border); flex-wrap:wrap; gap:12px; }
  .foot-bottom p{ font-size:13px; color:var(--text-dimmer); }
  .foot-legal{ display:flex; gap:22px; }
  .foot-legal a{ font-size:13px; color:var(--text-dimmer); }
  .foot-legal a:hover{ color:var(--text-dim); }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .hero-inner{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; max-width:460px; margin:0 auto; height:560px; }
    .feat-grid, .steps, .price-grid, .service-grid{ grid-template-columns:1fr 1fr; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .services-layout{ grid-template-columns:1fr; gap:24px; }
    .services-visual{ height:420px; }
    .chip-a{ right:10px; }
    .chip-b{ right:10px; }
  }
  @media (max-width:760px){
    .nav-links{ display:none; }
    .menu-toggle{ display:flex; flex-shrink:0; }
    .nav-actions{ gap:8px; }
    .nav-actions > a.btn-ghost{ display:none; }
    .nav-actions .btn-primary{ padding:10px 16px; font-size:13px; }
    .hero{ padding:150px 0 90px; }
    .feat-grid, .steps, .price-grid, .service-grid{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr; gap:32px; }
    .cta-banner{ padding:50px 26px; }
    .stat-row{ gap:24px; }
    .hero-visual{ height:500px; }
    .server-stage{ transform:scale(.86); }
    .service-grid--split{ grid-template-columns:1fr; }
    .services-visual{ height:360px; }
    .step-track{ display:none; }
  }
  @media (max-width:480px){
    .hero-visual{ height:440px; }
    .server-stage{ transform:scale(.7); }
    .holo-panel{ width:225px; }
  }
  @media (max-width:400px){
    .nav-actions .btn-primary{ display:none; }
  }