/* ═══════════════════════════════════════════════════════════════════════
   VBOUNDS — front door. Ported from the arood.ai landing page (R76).

   EXTERNAL FILE ON PURPOSE: this site serves `style-src 'self'`, which refuses
   an inline <style> block as firmly as an inline script. The Google Fonts links
   went for the same reason (`font-src 'self'`), so Inter and Space Mono are
   replaced by system stacks rather than left as references that cannot load.
   ═══════════════════════════════════════════════════════════════════════ */

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html,body{height:100%;}
    body{
      font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
      background:#04040e;color:#fff;
      min-height:100vh;display:flex;
      align-items:center;justify-content:center;
      overflow:hidden;
    }

    #canvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

    .blob{position:fixed;border-radius:50%;filter:blur(130px);opacity:.09;pointer-events:none;z-index:0;}
    .blob-1{width:700px;height:700px;background:#6d28d9;top:-220px;left:-180px;animation:drift 13s ease-in-out infinite alternate;}
    .blob-2{width:500px;height:500px;background:#3730a3;bottom:-160px;right:-120px;animation:drift 11s ease-in-out infinite alternate-reverse;}
    .blob-3{width:380px;height:380px;background:#5b21b6;bottom:15%;left:5%;animation:drift 15s ease-in-out infinite alternate;}
    @keyframes drift{from{transform:translate(0,0) scale(1);}to{transform:translate(35px,25px) scale(1.06);}}

    body::after{
      content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.022;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .wrap{position:relative;z-index:10;width:100%;max-width:520px;padding:1.5rem;}

    .card{
      background:rgba(255,255,255,.032);
      border:1px solid rgba(255,255,255,.07);
      border-radius:28px;padding:2.8rem 2.6rem 2.4rem;
      backdrop-filter:blur(48px) saturate(140%);
      -webkit-backdrop-filter:blur(48px) saturate(140%);
      display:flex;flex-direction:column;align-items:center;text-align:center;
      transform-style:preserve-3d;will-change:transform;position:relative;
    }
    .card::after{
      content:'';position:absolute;top:0;left:20%;right:20%;height:1px;
      background:linear-gradient(90deg,transparent,rgba(200,190,255,.18),transparent);
      pointer-events:none;
    }

    .pill{
      display:inline-flex;align-items:center;gap:.45rem;
      background:rgba(109,40,217,.12);border:1px solid rgba(109,40,217,.28);
      color:#c4b5fd;font-size:.67rem;font-weight:600;letter-spacing:.14em;
      text-transform:uppercase;padding:.4rem .95rem;border-radius:999px;
      margin-bottom:1.6rem;animation:up .9s cubic-bezier(.22,1,.36,1) both;
    }
    .pill-dot{
      width:5px;height:5px;border-radius:50%;background:#a78bfa;
      box-shadow:0 0 5px rgba(167,139,250,.7);animation:ping 2.2s ease infinite;
    }
    @keyframes ping{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.25;transform:scale(.65);}}

    .logo{
      font-size:clamp(2.6rem,5.5vw,3.6rem);font-weight:900;line-height:1;
      letter-spacing:-.04em;margin-bottom:.9rem;
      animation:up .9s cubic-bezier(.22,1,.36,1) .08s both;
    }
    .logo-word{color:#fff;}
    .logo-tld{color:rgba(172,158,230,.82);}

    .tagline{
      font-size:.92rem;color:rgba(255,255,255,.33);font-weight:400;
      line-height:1.7;margin-bottom:1.8rem;
      animation:up .9s cubic-bezier(.22,1,.36,1) .16s both;
    }

    .form-wrap{width:100%;max-width:370px;margin-bottom:1.8rem;animation:up .9s cubic-bezier(.22,1,.36,1) .24s both;}
    form{display:flex;gap:.45rem;width:100%;}
    input[type="email"]{
      flex:1;min-width:0;background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.09);border-radius:12px;
      padding:.78rem 1rem;color:#fff;font-size:.84rem;font-family:inherit;outline:none;
      transition:border-color .2s,background .2s,box-shadow .2s;
    }
    input[type="email"]::placeholder{color:rgba(255,255,255,.2);}
    input[type="email"]:focus{
      border-color:rgba(109,40,217,.65);background:rgba(109,40,217,.07);
      box-shadow:0 0 0 3px rgba(109,40,217,.14);
    }
    .btn{
      background:#5b21b6;border:1px solid rgba(255,255,255,.09);border-radius:12px;
      padding:.78rem 1.3rem;color:rgba(255,255,255,.88);font-size:.84rem;
      font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;
      transition:transform .12s,background .12s;
    }
    .btn:hover{transform:translateY(-2px);background:#6d28d9;}
    .btn:active{transform:translateY(0);}
    .success{
      display:none;align-items:center;justify-content:center;gap:.45rem;width:100%;
      background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2);
      border-radius:12px;padding:.78rem 1.2rem;color:#86efac;
      font-size:.84rem;font-weight:500;animation:up .4s ease both;
    }

    .divider{
      display:flex;align-items:center;gap:.9rem;width:100%;margin-bottom:1.4rem;
      animation:up .9s cubic-bezier(.22,1,.36,1) .3s both;
    }
    .divider-line{flex:1;height:1px;background:rgba(255,255,255,.06);}
    .divider span{
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.58rem;
      color:rgba(255,255,255,.16);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
    }

    /* ══ GAME ══ */
    .game{
      width:100%;display:flex;flex-direction:column;align-items:center;gap:.85rem;
      animation:up .9s cubic-bezier(.22,1,.36,1) .38s both;
    }

    .game-top{
      display:flex;align-items:center;justify-content:space-between;
      width:152px;
    }
    .game-top-label{
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.55rem;
      color:rgba(255,255,255,.18);letter-spacing:.16em;text-transform:uppercase;
    }
    .game-top-label.hi{color:rgba(167,139,250,.45);}

    /* grid wrapper for SVG overlay */
    .grid-wrap{position:relative;width:152px;height:152px;}

    .grid{
      display:grid;grid-template-columns:repeat(3,44px);
      grid-template-rows:repeat(3,44px);gap:10px;
      position:absolute;inset:0;
    }

    /* SVG connection lines overlay */
    #connections{
      position:absolute;inset:0;overflow:visible;
      pointer-events:none;
    }
    .conn-line{
      stroke:rgba(167,139,250,.35);stroke-width:1.5;
      stroke-linecap:round;
      filter:url(#lineGlow);
    }

    .dot{
      width:44px;height:44px;border-radius:50%;
      background:rgba(255,255,255,.042);
      border:1px solid rgba(255,255,255,.07);
      cursor:pointer;position:relative;
      transition:background .08s,box-shadow .08s,border-color .08s,transform .08s;
      animation:idlewave 3s ease-in-out infinite;
    }
    .dot:nth-child(1){animation-delay:0s}.dot:nth-child(2){animation-delay:.15s}
    .dot:nth-child(3){animation-delay:.3s}.dot:nth-child(4){animation-delay:.45s}
    .dot:nth-child(5){animation-delay:.6s}.dot:nth-child(6){animation-delay:.75s}
    .dot:nth-child(7){animation-delay:.9s}.dot:nth-child(8){animation-delay:1.05s}
    .dot:nth-child(9){animation-delay:1.2s}
    @keyframes idlewave{0%,100%{opacity:.45;}50%{opacity:.9;}}
    .grid.active .dot{animation:none;opacity:1;}

    .dot:hover{background:rgba(255,255,255,.09);}

    .dot.lit{
      background:rgba(167,139,250,.8);border-color:rgba(167,139,250,1);
      box-shadow:0 0 26px rgba(167,139,250,.65),0 0 8px rgba(167,139,250,.3) inset;
      transform:scale(.9);animation:none;
    }
    .dot.pressed{
      background:rgba(167,139,250,.5);border-color:rgba(167,139,250,.75);
      box-shadow:0 0 14px rgba(167,139,250,.35);transform:scale(.88);animation:none;
    }
    .dot.wrong{
      background:rgba(239,68,68,.65);border-color:rgba(239,68,68,.9);
      box-shadow:0 0 26px rgba(239,68,68,.55);animation:shake .35s ease both;
    }
    @keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
    .dot.flash{
      background:rgba(74,222,128,.55);border-color:rgba(74,222,128,.85);
      box-shadow:0 0 22px rgba(74,222,128,.5);animation:none;
    }

    /* sequence-length dots */
    .seq-track{
      display:flex;gap:5px;align-items:center;justify-content:center;
      min-height:8px;
    }
    .seq-pip{
      width:6px;height:6px;border-radius:50%;
      background:rgba(255,255,255,.12);
      transition:background .15s,box-shadow .15s;
    }
    .seq-pip.done{
      background:rgba(167,139,250,.7);
      box-shadow:0 0 6px rgba(167,139,250,.5);
    }
    .seq-pip.active{
      background:rgba(255,255,255,.9);
      box-shadow:0 0 8px rgba(255,255,255,.6);
      transform:scale(1.3);
    }

    .game-status{
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.63rem;
      letter-spacing:.12em;color:rgba(255,255,255,.22);
      min-height:1.4em;display:flex;align-items:center;gap:.6rem;
    }
    .game-status b{color:rgba(200,188,255,.65);font-weight:400;}

    .game-over{display:none;flex-direction:column;align-items:center;gap:.65rem;width:100%;}
    .game-over.show{display:flex;}
    .go-signal{
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.58rem;
      color:rgba(239,68,68,.6);letter-spacing:.22em;text-transform:uppercase;
    }
    .go-score{
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.55rem;font-weight:700;
      color:rgba(210,200,255,.88);letter-spacing:.05em;line-height:1;
    }
    .go-sub{
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.58rem;
      color:rgba(255,255,255,.2);letter-spacing:.14em;
    }
    .retry-btn{
      margin-top:.15rem;background:transparent;
      border:1px solid rgba(255,255,255,.1);border-radius:8px;
      padding:.48rem 1.4rem;color:rgba(255,255,255,.4);
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.6rem;letter-spacing:.18em;
      cursor:pointer;transition:border-color .2s,color .2s,background .2s;
    }
    .retry-btn:hover{border-color:rgba(167,139,250,.4);color:rgba(167,139,250,.8);background:rgba(167,139,250,.06);}

    .footer{
      margin-top:1.5rem;font-size:.62rem;letter-spacing:.2em;
      color:rgba(255,255,255,.1);text-transform:uppercase;
      animation:up .9s cubic-bezier(.22,1,.36,1) .5s both;
    }

    @keyframes up{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}

    @media(max-width:480px){
      .card{padding:2.2rem 1.4rem 2rem;}
      form{flex-direction:column;}
    }
  

/* ── PRODUCTS (R76) ──────────────────────────────────────────────────────
   The reason this page exists: Vbounds is a platform and these are the
   engines on it. A flex ROW, so a second product sits beside the first with
   no layout work; it wraps on a narrow screen rather than overflowing.
   Same glass treatment as the card so the boxes read as part of it. */
.products{
  display:flex;flex-wrap:wrap;gap:.6rem;width:100%;
  margin:.1rem 0 .2rem;
}
.product{
  /* min-width:0 is load-bearing, not tidying. A flex item defaults to
     min-width:auto, so it refuses to shrink below its own content — and
     .product-sub is white-space:nowrap, whose min-content width is the WHOLE
     string. On a 375px phone the first card therefore pushed 13px past the
     glass card's right edge while every other element stopped at it. The
     ellipsis could never engage either, because the box simply grew instead. */
  min-width:0;
  flex:1 1 200px;display:flex;align-items:center;gap:.75rem;
  padding:.85rem .95rem;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  text-decoration:none;color:inherit;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.product:hover,.product:focus-visible{
  background:rgba(255,255,255,.055);
  border-color:rgba(168,140,255,.45);
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(95,55,200,.22);
  outline:none;
}
.product-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(135deg,rgba(140,110,255,.9),rgba(90,60,200,.9));
  color:#fff;
}
.product-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.product-name{font-size:12.5px;font-weight:600;letter-spacing:-.01em;}
.product-sub{
  font-size:10.5px;color:rgba(255,255,255,.42);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.product-go{
  margin-left:auto;flex:0 0 auto;
  font-size:15px;color:rgba(168,140,255,.75);
  transition:transform .18s ease;
}
.product:hover .product-go{transform:translateX(3px);}

/* Placeholder slot. Dashed and inert: it states the intent (more engines are
   coming) without pretending to be a link to something that does not exist. */
.product.soon{
  border-style:dashed;border-color:rgba(255,255,255,.09);
  cursor:default;
}
.product.soon:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.09);}
.product.soon .product-mark{background:rgba(255,255,255,.06);color:rgba(255,255,255,.35);}
.product.soon .product-name{color:rgba(255,255,255,.42);font-weight:500;}

@media (prefers-reduced-motion: reduce){
  .product,.product-go{transition:none;}
  .product:hover,.product:focus-visible{transform:none;}
}