:root{
  --bg:#0f0f12;
  --card:#16161b;
  --panel:#1c1c22;
  --border:rgba(255,255,255,.08);
  --ink:#f3f3f7;
}

*{box-sizing:border-box;}
html,body{height:100%;}

body{
  margin:0;
  font-family: Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}

/* ===== BACKGROUND GLOW + TRUE OFFSET RECTANGULAR SUBWAY TILE ===== */
.background-glow{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;

  /* SVG tile pattern: 96x56 tiles, second row offset by 48px */
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27192%27%20height%3D%27112%27%20viewBox%3D%270%200%20192%20112%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba(255%2C255%2C255%2C0.06)%27%20stroke-width%3D%271%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%2796%27%20height%3D%2756%27/%3E%3Crect%20x%3D%2796%27%20y%3D%270%27%20width%3D%2796%27%20height%3D%2756%27/%3E%3Crect%20x%3D%27-48%27%20y%3D%2756%27%20width%3D%2796%27%20height%3D%2756%27/%3E%3Crect%20x%3D%2748%27%20y%3D%2756%27%20width%3D%2796%27%20height%3D%2756%27/%3E%3Crect%20x%3D%27144%27%20y%3D%2756%27%20width%3D%2796%27%20height%3D%2756%27/%3E%3C/g%3E%3C/svg%3E");
  background-size:192px 112px;
  background-repeat:repeat;
}

/* Glow blobs layered above tile */
.background-glow::before,
.background-glow::after{
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  filter:blur(90px);
  opacity:.75;
}

.background-glow::before{
  left:-250px;
  bottom:-250px;
  background:
    radial-gradient(circle,
      rgba(124,58,237,.9) 0%,
      rgba(236,72,153,.7) 40%,
      rgba(0,0,0,0) 70%);
}

.background-glow::after{
  right:-300px;
  top:-260px;
  background:
    radial-gradient(circle,
      rgba(59,130,246,.85) 0%,
      rgba(139,92,246,.6) 45%,
      rgba(0,0,0,0) 70%);
}

/* ===== Layout Stage ===== */
.stage{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
}

/* ===== Main Card ===== */
.shell{
  width:min(1120px,100%);
  height:min(740px,92vh);
  background:var(--card);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:
    0 40px 120px rgba(0,0,0,.8),
    0 1px 0 rgba(255,255,255,.04) inset;
  position:relative;
  overflow:hidden;
}

/* ===== NYC Sign Stripe ===== */
.sign-top{ position:relative; z-index:3; }
.sign-spacer{ height:14px; }
.sign-stripe{
  height:3px;
  background:#ffffff;
  opacity:.95;
}

/* ===== Header ===== */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 26px 22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--ink);
}

.bullet-logo{
  width:54px;
  height:54px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.06));
}

.brand-title{
  margin:0;
  font-weight:700;
  letter-spacing:.2px;
  font-size:30px;
  line-height:1;
  color:#ffffff;
}

/* ===== Menu Button ===== */
.menu-btn{
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.15s ease;
}
.menu-btn:hover{
  background:rgba(255,255,255,.12);
}

/* ===== Main CTA Area ===== */
.hero{
  height:calc(100% - 110px);
  display:grid;
  place-items:center;
  padding:28px;
}

.cta-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  width:min(680px,92%);
}

.cta{
  padding:16px 18px;
  border-radius:18px;
  text-decoration:none;
  font-weight:700;
  font-size:17px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:#fff;
  text-align:center;
  transition:.15s ease;
}

.cta:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}

.cta.primary{
  background:linear-gradient(
    90deg,
    rgba(124,58,237,.3),
    rgba(236,72,153,.3),
    rgba(59,130,246,.3)
  );
}

/* ===== Generic page content (for non-home pages) ===== */
.page{
  height:calc(100% - 110px);
  padding:28px;
  overflow:auto;
}

.page h2{
  margin:0 0 10px 0;
  font-size:28px;
  letter-spacing:.2px;
}

.page p{
  margin:0 0 14px 0;
  color:rgba(255,255,255,.85);
  max-width:70ch;
  line-height:1.45;
}

/* ===== Drawer ===== */
.overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:none;
}
.overlay.is-open{display:block;}

.overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
}

.menu-panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:min(380px,85vw);
  background:var(--panel);
  border-left:1px solid var(--border);
  box-shadow:-30px 0 80px rgba(0,0,0,.6);
  transform:translateX(100%);
  transition:transform .25s ease;
  display:flex;
  flex-direction:column;
}

.overlay.is-open .menu-panel{ transform:translateX(0); }

.menu-head{
  display:flex;
  justify-content:space-between;
  padding:20px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-weight:700;
}

.close-btn{
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

.menu-links{
  padding:16px;
  display:grid;
  gap:12px;
}

.menu-link{
  padding:14px 16px;
  border-radius:14px;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:.15s ease;
  font-weight:600;
}
.menu-link:hover{ background:rgba(255,255,255,.1); }

/* ===== Responsive ===== */
@media (max-width:640px){
  .cta-wrap{ grid-template-columns: 1fr; }
}

@media (max-width:520px){
  .nav{ padding:16px 18px 20px; }
  .sign-spacer{ height:12px; }
  .bullet-logo{ width:48px; height:48px; }
  .brand-title{ font-size:24px; }
}