/* ── ATMOSPHERE ── */
    body { background:#0a0a0c; color:#cbd5e1; overflow-x:hidden; }

    /* Scanlines */
    .scanlines {
      position:fixed; inset:0; pointer-events:none; z-index:200;
      background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
      opacity:.55;
    }

    /* Grid pattern */
    .bg-grid {
      position:fixed; inset:0; pointer-events:none; z-index:0;
      background-size:44px 44px;
      background-image:
        linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
    }

    /* Camera flashes */
    @keyframes cam-flash {
      0%,93%,100% { opacity:0; transform:scale(1); }
      94% { opacity:.12; transform:scale(1.6); }
      96% { opacity:0; transform:scale(1); }
      98% { opacity:.04; transform:scale(1.25); }
    }
    .flash {
      position:fixed; width:55vw; height:55vw; border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.8) 0%, transparent 70%);
      pointer-events:none; z-index:1; opacity:0; mix-blend-mode:overlay;
    }
    .flash-tl { top:-27vw; left:-27vw; animation:cam-flash 15s infinite 3s; }
    .flash-br { bottom:-27vw; right:-27vw; animation:cam-flash 22s infinite 12s; }

    /* Particles */
    .particle-wrap { position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
    .particle {
      position:absolute; width:2px; opacity:0; border-radius:2px;
      background:linear-gradient(180deg, transparent 0%, #8B2BE2 50%, #00D4FF 100%);
      animation:fall linear infinite;
    }
    @keyframes fall {
      0%   { transform:translateY(-120px); opacity:0; }
      10%  { opacity:.35; }
      90%  { opacity:.35; }
      100% { transform:translateY(105vh); opacity:0; }
    }

    /* Typewriter cursor */
    .cursor {
      display:inline-block; width:2px; height:1em;
      background:#00D4FF; margin-left:3px; vertical-align:text-bottom;
      animation:blink 1s step-end infinite;
    }
    @keyframes blink { 50% { opacity:0; } }

    /* Glass panel */
    .glass {
      background:rgba(255,255,255,0.025);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      border:1px solid rgba(139,43,226,0.22);
    }
    .glass-c { border-color:rgba(0,212,255,0.22); }

    /* Scrollbar */
    ::-webkit-scrollbar { width:7px; }
    ::-webkit-scrollbar-track { background:#0a0a0c; }
    ::-webkit-scrollbar-thumb { background:#2a2035; border-radius:4px; }
    ::-webkit-scrollbar-thumb:hover { background:#8B2BE2; }

    /* ── NAV ── */
    #main-nav {
      position:fixed; top:0; left:0; right:0; z-index:150;
      height:68px;
      background:rgba(10,10,12,0.82);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(139,43,226,0.15);
      display:flex; align-items:center;
      padding:0 48px; gap:0;
      transition:padding .25s;
    }
    .nav-logo-wrap { display:flex; align-items:center; gap:10px; text-decoration:none; }
    .nav-logo-img { height:24px; display:block; }
    .nav-links-wrap { display:flex; align-items:center; gap:28px; margin-left:auto; }
    .nav-link {
      color:rgba(203,213,225,.55); text-decoration:none; font-size:13px;
      font-family:'Inter',sans-serif; letter-spacing:.02em;
      transition:color .15s;
    }
    .nav-link:hover { color:#e2e8f0; }
    .nav-renew {
      color:#a855f7 !important;
      border:1px solid rgba(139,43,226,.4);
      padding:6px 13px; border-radius:6px; font-size:12px;
    }
    .nav-renew:hover { background:rgba(139,43,226,.12) !important; border-color:#8B2BE2 !important; }
    .nav-cta {
      background:#8B2BE2; color:#fff !important;
      padding:8px 20px; border-radius:7px; font-size:13px; font-weight:600;
      min-height:44px; display:inline-flex; align-items:center;
      transition:background .18s, box-shadow .18s;
    }
    .nav-cta:hover { background:#9d3cfa; box-shadow:0 0 24px rgba(139,43,226,.5); }

    /* ── HERO ── */
    .hero-section {
      min-height:100vh;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; padding:130px 24px 90px;
      position:relative;
    }
    .hero-glow {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-55%);
      width:780px; height:600px; border-radius:50%;
      background:radial-gradient(circle, rgba(139,43,226,.18) 0%, transparent 65%);
      pointer-events:none;
      filter:blur(8px);
    }
    .hero-badge {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(139,43,226,.08); border:1px solid rgba(139,43,226,.3);
      border-radius:24px; padding:5px 14px 5px 10px;
      font-family:'Space Mono',monospace; font-size:11px;
      color:#a855f7; letter-spacing:.1em; text-transform:uppercase;
      margin-bottom:32px;
    }
    .ping-dot { position:relative; display:flex; width:8px; height:8px; }
    .ping-dot span:first-child {
      position:absolute; inset:0; border-radius:50%;
      background:#00D4FF; opacity:.6;
      animation:ping 1.2s cubic-bezier(0,0,.2,1) infinite;
    }
    .ping-dot span:last-child {
      position:relative; width:8px; height:8px; border-radius:50%; background:#00D4FF;
    }
    @keyframes ping { 75%,100% { transform:scale(1.8); opacity:0; } }

    .hero-h1 {
      font-family:'Syne',sans-serif;
      font-size:clamp(42px,6.5vw,88px);
      font-weight:800; line-height:1.05; letter-spacing:-.02em;
      color:#fff; margin-bottom:24px;
    }
    .hero-h1 .grad {
      background:linear-gradient(90deg, #fff 20%, #8B2BE2 55%, #00D4FF 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .hero-sub {
      font-size:18px; color:rgba(203,213,225,.6);
      margin-bottom:40px; min-height:32px;
      display:flex; align-items:center; justify-content:center;
    }
    .hero-btns {
      display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
    }
    .btn-primary {
      display:inline-flex; align-items:center; gap:8px;
      background:#8B2BE2; color:#fff;
      padding:13px 28px; border-radius:10px; min-height:48px;
      font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
      text-decoration:none;
      transition:background .18s, box-shadow .18s, transform .15s;
      box-shadow:0 0 30px rgba(139,43,226,.35);
    }
    .btn-primary:hover { background:#9d3cfa; box-shadow:0 0 50px rgba(139,43,226,.6); transform:translateY(-1px); }
    .btn-secondary {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(255,255,255,.04); color:#e2e8f0;
      padding:13px 28px; border-radius:10px; min-height:48px;
      font-family:'Inter',sans-serif; font-size:14px; font-weight:500;
      text-decoration:none;
      border:1px solid rgba(255,255,255,.12);
      transition:border-color .18s, background .18s;
    }
    .btn-secondary:hover { border-color:rgba(0,212,255,.5); background:rgba(0,212,255,.06); }

    /* ── STATS BAR ── */
    .stats-bar {
      position:relative; z-index:10;
      max-width:1080px; margin:0 auto 80px;
      padding:0 24px;
    }
    .stats-inner {
      display:flex; align-items:center; justify-content:space-between;
      flex-wrap:wrap; gap:0;
      background:rgba(255,255,255,.02);
      backdrop-filter:blur(12px);
      border:1px solid rgba(139,43,226,.2);
      border-radius:16px; overflow:hidden;
    }
    .stat-item {
      flex:1; min-width:160px; text-align:center;
      padding:28px 20px;
      border-right:1px solid rgba(255,255,255,.06);
    }
    .stat-item:last-child { border-right:none; }
    .stat-val {
      font-family:'Space Mono',monospace;
      font-size:clamp(26px,3.5vw,40px); font-weight:700;
      color:#fff; line-height:1; margin-bottom:6px;
    }
    .stat-val .nc { color:#00D4FF; }
    .stat-val .nv { color:#8B2BE2; }
    .stat-label {
      font-size:10px; text-transform:uppercase; letter-spacing:.14em;
      color:rgba(148,163,184,.55); font-weight:600;
    }

    /* ── SECTION SHARED ── */
    .section-wrap { position:relative; z-index:10; max-width:1100px; margin:0 auto; padding:0 24px 100px; }
    .section-eyebrow {
      font-family:'Space Mono',monospace;
      font-size:11px; text-transform:uppercase; letter-spacing:.2em;
      color:#a855f7; margin-bottom:14px;
    }
    .section-h2 {
      font-family:'Syne',sans-serif;
      font-size:clamp(28px,4vw,50px); font-weight:800;
      color:#fff; line-height:1.1; margin-bottom:12px;
    }
    .section-h2 .nv { color:#8B2BE2; }
    .section-h2 .nc { color:#00D4FF; }
    .section-sub-text {
      font-size:15px; color:rgba(148,163,184,.7);
      max-width:520px; line-height:1.7; margin-bottom:56px;
    }

    /* ── FEATURES BENTO v2 ── */
    .bento-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-auto-rows:240px;
      gap:12px;
    }
    .bento-card {
      position:relative; overflow:hidden; border-radius:14px;
      display:flex; flex-direction:column;
      transition:transform .22s, box-shadow .25s;
      cursor:default;
    }
    .bento-card:hover {
      transform:translateY(-4px);
      box-shadow:0 22px 55px rgba(0,0,0,.6), 0 0 0 1px rgba(139,43,226,.3);
    }
    .bento-card.span2 { grid-column:span 2; }
    .bento-card.span3 { grid-column:span 3; }

    /* Shimmer sweep on hover */
    .bento-card::before {
      content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none; z-index:0;
      background:linear-gradient(105deg,transparent 35%,rgba(139,43,226,.22) 50%,rgba(0,212,255,.16) 60%,transparent 70%);
      background-size:250% 100%; opacity:0; transition:opacity .3s;
      animation:bShimmer 2.4s linear infinite;
    }
    .bento-card:hover::before { opacity:1; }
    @keyframes bShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

    /* Ambient glow overlay */
    .bento-card::after {
      content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
      background:linear-gradient(135deg,rgba(139,43,226,.06) 0%,rgba(0,212,255,.04) 100%);
      opacity:0; transition:opacity .25s;
    }
    .bento-card:hover::after { opacity:1; }

    /* Mouse-tracking glow blob */
    .mglow {
      position:absolute; width:240px; height:240px; border-radius:50%;
      background:radial-gradient(circle,rgba(139,43,226,.2) 0%,transparent 70%);
      transform:translate(-50%,-50%); pointer-events:none; z-index:1;
      transition:opacity .3s; opacity:0;
    }
    .bento-card:hover .mglow { opacity:1; }

    /* Scanline sweep */
    .bscan {
      position:absolute; left:0; right:0; height:50px; pointer-events:none; z-index:1;
      background:linear-gradient(180deg,transparent,rgba(0,212,255,.055),transparent);
      animation:bscanAnim 3.8s linear infinite;
    }
    @keyframes bscanAnim { 0%{top:-50px} 100%{top:calc(100% + 50px)} }

    /* Window chrome bar */
    .bwin {
      display:flex; align-items:center; gap:7px; flex-shrink:0;
      padding:8px 12px 7px;
      border-bottom:1px solid rgba(255,255,255,.055);
      background:rgba(0,0,0,.28); position:relative; z-index:3;
    }
    .bwin-dots { display:flex; gap:4px; }
    .bwin-dots span { width:8px; height:8px; border-radius:50%; display:block; }
    .bwin-lbl {
      font-family:'Space Mono',monospace; font-size:8.5px; color:rgba(148,163,184,.35);
      flex:1; text-align:center; letter-spacing:.05em; text-transform:uppercase;
      overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    }
    .bwin-tag {
      font-family:'Space Mono',monospace; font-size:8px; font-weight:700;
      letter-spacing:.06em; padding:2px 6px; border-radius:3px; white-space:nowrap; flex-shrink:0;
    }
    .bwin-tag.live { background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.28); color:#22c55e; }
    .bwin-tag.ai   { background:rgba(139,43,226,.14); border:1px solid rgba(139,43,226,.3);  color:#a855f7; }
    .bwin-tag.sync { background:rgba(0,212,255,.1);   border:1px solid rgba(0,212,255,.24);   color:#00D4FF; }

    /* Live pulsing dot */
    .ldot { width:5px; height:5px; border-radius:50%; background:#22c55e; display:inline-block; margin-right:3px; animation:ldotP 1.8s ease-in-out infinite; flex-shrink:0; }
    @keyframes ldotP { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 50%{box-shadow:0 0 0 4px rgba(34,197,94,0)} }

    /* Card body */
    .bbody {
      flex:1; padding:11px 12px 12px;
      display:flex; flex-direction:column; gap:7px;
      position:relative; z-index:2; overflow:hidden;
    }

    /* Card header */
    .bhead { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .bico {
      width:28px; height:28px; border-radius:7px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
    }
    .bico.vi { background:rgba(139,43,226,.15); border:1px solid rgba(139,43,226,.28); }
    .bico.cy { background:rgba(0,212,255,.12);  border:1px solid rgba(0,212,255,.25);  }
    .bico.wh { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
    .bico.gr { background:rgba(34,197,94,.1);    border:1px solid rgba(34,197,94,.22);  }
    .bico.or { background:rgba(251,146,60,.1);   border:1px solid rgba(251,146,60,.2);  }
    .btitle { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; color:#fff; line-height:1.2; }
    .bsub { font-size:10px; color:rgba(148,163,184,.55); line-height:1.45; }

    /* Data rows */
    .brow {
      display:flex; align-items:center; gap:7px;
      padding:5px 8px; border-radius:6px; min-height:27px;
      background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.048);
      font-family:'Space Mono',monospace; font-size:9.5px;
      transition:background .18s, border-color .18s;
    }
    .brow:hover { background:rgba(255,255,255,.048); border-color:rgba(139,43,226,.2); }
    .bl { color:rgba(148,163,184,.65); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .bv { color:#fff; white-space:nowrap; font-family:'Space Mono',monospace; font-size:9.5px; }

    /* Status badges */
    .bstat {
      font-size:7.5px; font-weight:700; letter-spacing:.05em;
      padding:2px 6px; border-radius:3px; white-space:nowrap; flex-shrink:0;
    }
    .bstat.ok   { background:rgba(0,212,255,.1);   border:1px solid rgba(0,212,255,.22);   color:#00D4FF; }
    .bstat.pend { background:rgba(245,158,11,.1);  border:1px solid rgba(245,158,11,.22);  color:#f59e0b; }
    .bstat.go   { background:rgba(34,197,94,.1);   border:1px solid rgba(34,197,94,.22);   color:#22c55e; }
    .bstat.nv   { background:rgba(139,43,226,.1);  border:1px solid rgba(139,43,226,.28);  color:#a855f7; }

    /* Progress bar */
    .bpw { height:4px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; }
    .bpf { height:100%; border-radius:2px; transition:width 1.1s ease; }
    .bpf.nv { background:linear-gradient(90deg,#8B2BE2,#a855f7); }
    .bpf.cy { background:linear-gradient(90deg,#00D4FF,#38bdf8); }
    .bpf.gr { background:linear-gradient(90deg,#22c55e,#4ade80); }
    .bpf.or { background:linear-gradient(90deg,#f59e0b,#fbbf24); }

    /* EQ bars */
    .beq { display:flex; align-items:flex-end; gap:3px; height:34px; flex-shrink:0; }
    .beq-b { flex:1; background:rgba(139,43,226,.12); border-radius:2px 2px 0 0; position:relative; overflow:hidden; }
    .beq-f { position:absolute; bottom:0; left:0; right:0; border-radius:2px 2px 0 0; transition:height .38s ease; }
    .beq-f.nv { background:linear-gradient(180deg,#a855f7,#8B2BE2); }
    .beq-f.cy { background:linear-gradient(180deg,#38bdf8,#00D4FF); }

    /* Floor plan grid */
    .bfloor { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; flex:1; }
    .bmesa {
      border-radius:5px; border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.025); display:flex; align-items:center; justify-content:center;
      font-family:'Space Mono',monospace; font-size:7px; color:rgba(148,163,184,.4);
      cursor:pointer; transition:all .18s;
    }
    .bmesa:hover { border-color:rgba(0,212,255,.5); background:rgba(0,212,255,.08); color:#00D4FF; }
    .bmesa.ro   { border-radius:50%; }
    .bmesa.occ  { background:rgba(139,43,226,.12); border-color:rgba(139,43,226,.32); color:#a855f7; }
    .bmesa.sel  { background:rgba(0,212,255,.14); border-color:rgba(0,212,255,.55); color:#00D4FF; box-shadow:0 0 10px rgba(0,212,255,.25); }

    /* Typing cursor */
    .bcur { display:inline-block; width:1.5px; height:.8em; background:#00D4FF; margin-left:1px; vertical-align:text-bottom; animation:blink 1s step-end infinite; }

    /* Chips */
    .bchip { font-family:'Space Mono',monospace; font-size:8.5px; padding:3px 7px; border-radius:4px; white-space:nowrap; }
    .bchip.nv { background:rgba(139,43,226,.12); border:1px solid rgba(139,43,226,.25); color:#a855f7; }
    .bchip.cy { background:rgba(0,212,255,.1);   border:1px solid rgba(0,212,255,.22);  color:#00D4FF; }
    .bchip.wh { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#94a3b8; }
    .bchip.gr { background:rgba(34,197,94,.1);    border:1px solid rgba(34,197,94,.22);  color:#22c55e; }

    /* Pop-in animation */
    @keyframes popIn { from{opacity:0;transform:translateY(7px) scale(.97)} to{opacity:1;transform:none} }
    .pop-in { animation:popIn .28s ease forwards; }

    /* ── DEMO SECTION ── */
    .demo-section { position:relative; z-index:10; padding:0 24px 100px; }
    .demo-wrap { max-width:1100px; margin:0 auto; }

    .role-grid {
      display:grid; grid-template-columns:1fr 1fr;
      gap:14px; max-width:720px; margin:0 auto 28px;
    }
    .role-card {
      background:rgba(255,255,255,.025);
      border:2px solid rgba(255,255,255,.1);
      border-radius:14px; padding:26px 22px;
      cursor:pointer; transition:border-color .2s, transform .2s, background .2s;
      text-align:left;
    }
    .role-card:hover { border-color:#8B2BE2; transform:translateY(-2px); background:rgba(139,43,226,.07); }
    .role-card.active { border-color:#8B2BE2; background:rgba(139,43,226,.12); box-shadow:0 0 30px rgba(139,43,226,.2); }
    .role-icon { font-size:30px; margin-bottom:12px; }
    .role-name { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; color:#fff; margin-bottom:6px; }
    .role-desc { font-size:12px; color:rgba(148,163,184,.65); line-height:1.6; margin-bottom:12px; }
    .role-cta { font-size:12px; color:#a855f7; }
    .role-card:hover .role-cta, .role-card.active .role-cta { text-decoration:underline; }

    .demo-frame-wrap { max-width:1100px; margin:0 auto; border-radius:14px; overflow:hidden; border:1px solid rgba(139,43,226,.25); box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(139,43,226,.1); }
    .browser-bar {
      background:#111114; padding:10px 16px;
      display:flex; align-items:center; gap:10px;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .browser-dots { display:flex; gap:6px; flex-shrink:0; }
    .browser-dots span { width:11px; height:11px; border-radius:50%; }
    .browser-url {
      flex:1; background:rgba(255,255,255,.05); border-radius:5px;
      padding:4px 14px; font-family:'Space Mono',monospace; font-size:11px;
      color:rgba(148,163,184,.5); text-align:center;
    }
    .browser-badge {
      font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
      letter-spacing:.06em; color:#a855f7;
      background:rgba(139,43,226,.15); border:1px solid rgba(139,43,226,.3);
      border-radius:4px; padding:3px 9px; white-space:nowrap; flex-shrink:0;
    }
    .browser-open {
      display:flex; align-items:center; gap:5px;
      color:rgba(148,163,184,.55); font-size:11px; text-decoration:none;
      border:1px solid rgba(255,255,255,.1); border-radius:4px; padding:3px 9px;
      transition:all .15s; white-space:nowrap; flex-shrink:0;
    }
    .browser-open:hover { color:#a855f7; border-color:#8B2BE2; }

    .demo-loading, .demo-error {
      background:#0a0a0c; height:260px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:12px; color:rgba(148,163,184,.6); font-size:13px;
    }
    .demo-spin {
      width:28px; height:28px;
      border:2px solid rgba(255,255,255,.08); border-top-color:#8B2BE2;
      border-radius:50%; animation:_sp .7s linear infinite;
    }
    @keyframes _sp { to { transform:rotate(360deg); } }

    #demo-placeholder {
      max-width:1100px; margin:0 auto; border-radius:12px;
      border:1px dashed rgba(139,43,226,.25); height:120px;
      display:flex; align-items:center; justify-content:center;
      gap:10px; color:rgba(148,163,184,.5); font-size:13px;
    }

    /* ── HOW IT WORKS ── */
    .steps-grid {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:24px; max-width:860px; margin:0 auto;
    }
    .step-card {
      background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08);
      border-radius:16px; padding:32px 24px; text-align:center;
      transition:border-color .2s;
    }
    .step-card:hover { border-color:rgba(139,43,226,.35); }
    .step-num {
      width:48px; height:48px; border-radius:50%; margin:0 auto 18px;
      background:rgba(139,43,226,.12); border:1px solid rgba(139,43,226,.3);
      display:flex; align-items:center; justify-content:center;
      font-family:'Space Mono',monospace; font-size:18px; font-weight:700; color:#a855f7;
    }
    .step-title { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; color:#fff; margin-bottom:8px; }
    .step-desc { font-size:13px; color:rgba(148,163,184,.65); line-height:1.65; }

    /* ── CTA BAND ── */
    .cta-band {
      position:relative; z-index:10;
      margin:0 24px 80px;
      max-width:1052px; margin-left:auto; margin-right:auto;
      background:linear-gradient(135deg, rgba(139,43,226,.14) 0%, rgba(139,43,226,.05) 100%);
      border:1px solid rgba(139,43,226,.2);
      border-radius:20px; padding:80px 32px; text-align:center;
      overflow:hidden;
    }
    .cta-band::before {
      content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
      width:500px; height:300px; border-radius:50%;
      background:radial-gradient(circle, rgba(139,43,226,.22) 0%, transparent 70%);
      pointer-events:none;
    }
    .cta-h2 {
      font-family:'Syne',sans-serif; font-size:clamp(26px,4vw,46px);
      font-weight:800; color:#fff; line-height:1.15; margin-bottom:12px;
      position:relative;
    }
    .cta-h2 .nv { color:#a855f7; }
    .cta-sub { font-size:15px; color:rgba(148,163,184,.65); margin-bottom:36px; position:relative; }
    .cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }

    /* ── FOOTER ── */
    .main-footer {
      position:relative; z-index:10;
      border-top:1px solid rgba(255,255,255,.07);
      background:#0a0a0c;
      padding:40px 48px 30px;
      display:flex; align-items:center; justify-content:space-between;
      flex-wrap:wrap; gap:20px;
    }
    .footer-links { display:flex; gap:22px; }
    .footer-links a { color:rgba(148,163,184,.5); font-size:12px; text-decoration:none; transition:color .15s; }
    .footer-links a:hover { color:#e2e8f0; }
    .footer-copy { font-family:'Space Mono',monospace; font-size:10px; color:rgba(100,116,139,.45); }

    /* ── RESPONSIVE ── */
    @media (max-width:900px) {
      #main-nav { padding:0 20px; }
      .bento-grid { grid-template-columns:repeat(2,1fr); }
      .bento-card.span2 { grid-column:span 1; }
      .bento-card.span3 { grid-column:span 2; }
      .steps-grid { grid-template-columns:1fr; max-width:400px; }
      .main-footer { flex-direction:column; align-items:flex-start; padding:32px 24px 24px; }
    }
    @media (max-width:640px) {
      .nav-hide { display:none; }
      .bento-grid { grid-template-columns:1fr; grid-auto-rows:auto; }
      .bento-card { min-height:200px; }
      .role-grid { grid-template-columns:1fr; max-width:400px; }
      .browser-url { display:none; }
      .browser-badge { display:none; }
      #demo-placeholder { height:90px; font-size:12px; }
    }

    /* ── TABLET: reducir animaciones pesadas ── */
    @media (max-width:768px) {
      .flash { display:none; }           /* camera flashes: off */
      .hero-glow { filter:blur(4px); opacity:.7; } /* glow más suave */
    }

    /* ── STATS BAR: 2×2 en móvil ── */
    @media (max-width:600px) {
      .stats-inner { flex-wrap:wrap; }
      .stat-item {
        flex: 0 0 50%;
        min-width: 0 !important;
        padding: 20px 14px;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,.06);
      }
      .stat-item:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,.06) !important; }
      .stat-item:nth-child(3),
      .stat-item:nth-child(4)    { border-bottom: none; }
    }

    /* ── PHONE ≤480px — mobile-first base ── */
    @media (max-width:480px) {
      #main-nav               { padding:0 14px; height:60px; }
      .hero-section           { padding:88px 16px 56px; }
      .hero-badge             { font-size:10px; padding:4px 12px 4px 8px; margin-bottom:24px; }
      .hero-sub               { font-size:15px; }
      .hero-btns              { flex-direction:column; align-items:stretch; gap:10px; }
      .btn-primary,
      .btn-secondary          { justify-content:center; padding:14px 24px; }
      .stats-bar              { padding:0 14px; margin-bottom:56px; }
      .section-wrap           { padding:0 14px 60px; }
      .section-sub-text       { margin-bottom:36px; }
      .demo-section           { padding:0 14px 60px; }
      .cta-band               { padding:48px 20px; margin:0 14px 60px; border-radius:16px; }
      .main-footer            { padding:24px 14px 18px; }
      .footer-links           { gap:16px; flex-wrap:wrap; }
      /* Eliminar efectos más pesados en 360px para ahorrar batería */
      .scanlines              { display:none; }
      .bg-grid                { display:none; }
      .particle-wrap          { display:none; }
    }