:root{
  --bg:#0B0B0C;
  --surface:#151518;
  --surface-2:#1E1E21;
  --text:#F5F5F5;
  --muted:#A3A3A3;
  --line:#2A2A2F;
  --red:#0072FF;
  --red-2:#0072FF;
  --gray-soft:#EAEAEA;
  --radius:14px;
  --radius-sm:10px;
  --shadow: 0 20px 40px rgba(0,0,0,.35);
  --container:1200px;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  max-width:100vw;overflow-x:hidden; /* prevent drawer expanding page */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* Buttons & tags */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:14px 20px;border-radius:999px;font-weight:600;
  transition:.2s ease; border:1px solid transparent;
}
.btn-primary{background:var(--red); color:white; box-shadow:0 10px 30px rgba(0,114,255,.25)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,114,255,.35)}
.btn-ghost{border-color:#2f2f34; color:var(--text); background:transparent}
.btn-ghost:hover{background:#17171a}

.tag{display:inline-flex;gap:.5rem;align-items:center;border:1px solid #2a2a2f;color:var(--muted);padding:8px 12px;border-radius:999px;font-size:.85rem}
.tag .dot{display:inline-block;width:8px;height:8px;border-radius:10px;background:var(--red)}

/* Header */
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(16px);
  background:linear-gradient(180deg, rgba(11,11,12,.9), rgba(11,11,12,.5) 60%, rgba(11,11,12,0));
  border-bottom:1px solid rgba(255,255,255,.04);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:0}
.brand{display:flex;align-items:center;gap:.8rem}
.logo{
  width:38px;height:38px;border-radius:10px;
  background: radial-gradient(80% 80% at 30% 20%, #0072FF 0%, #0072FF 45%, #7A0A0F 100%);
  box-shadow:0 8px 24px rgba(0,114,255,.35), inset 0 1px 2px rgba(255,255,255,.2);
}
.brand h1{font-size:1.05rem;letter-spacing:.6px;margin:0;font-weight:800}

nav.menu{display:flex;gap:22px;align-items:center}
nav.menu a{color:#e1e1e1;font-weight:500}
nav.menu a:hover{color:var(--text)}
.hamburger{display:none;background:none;border:0;color:var(--text);font-size:1.4rem}

/* Hero */
.hero{
  position:relative; padding:96px 0 60px; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(0,114,255,.18), transparent 60%),
    radial-gradient(800px 400px at 10% 10%, rgba(0,114,255,.14), transparent 60%);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{color:var(--muted); letter-spacing:.18em; text-transform:uppercase; font-weight:700; font-size:.78rem}
.h1{font-size:clamp(2.2rem, 4vw + 1rem, 4rem); line-height:1.05; margin:.6rem 0 1rem; font-weight:800}
.h3{margin:.3rem 0 1rem}
.lead{color:#D7D7D9; font-size:1.12rem; line-height:1.7; max-width:56ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-card{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)
}
.stat{display:flex;gap:18px;align-items:center;margin-top:18px;color:var(--muted)}
.stat b{color:var(--text)}

section{padding:72px 0}
.section-header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-header h2{margin:0;font-size:clamp(1.6rem, 1.3rem + 1.3vw, 2.2rem)}
.section-header p{margin:0;color:var(--muted)}

/* Cards & grids */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  position:relative; padding:26px; border-radius:var(--radius);
  background:linear-gradient(180deg, #121214, #0E0E10);
  border:1px solid #242429; transition:.25s ease; overflow:hidden
}
.card:hover{transform:translateY(-6px); border-color:#34343a}
.card:before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(500px 150px at var(--x,80%) -10%, rgba(0,114,255,.15), transparent 60%);
  opacity:.8; transition:.3s ease;
}
.card h3{margin:0 0 10px;font-size:1.2rem}
.card p{color:#C9C9CC; margin:0 0 14px}
.pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:#F3F3F4;background:#121214;border:1px solid #2b2b2f;border-radius:999px;padding:8px 12px}

/* Steps/tiles/cta */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{
  padding:20px;border:1px dashed #2b2b2f;border-radius:var(--radius-sm);
  background:linear-gradient(180deg, #0E0E10, #0B0B0C); color:#D6D6D9
}
.step b{display:inline-block;width:34px;height:34px;border-radius:10px;background:var(--surface-2);
  border:1px solid #2b2b30; display:grid;place-items:center; font-weight:800; margin-bottom:10px; color:#fff}

.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.tile{
  border:1px solid #242429;border-radius:12px;padding:18px;text-align:center;color:#D7D7DA;
  background:linear-gradient(180deg, #121214, #0D0D0F)
}

.cta{
  margin-top:10px; border:1px solid #2b2b2f;border-radius:20px; padding:28px;
  background:
    radial-gradient(900px 300px at 10% 0%, rgba(0,114,255,.12), transparent 60%),
    linear-gradient(180deg, #121214, #0E0E10);
  display:grid;grid-template-columns:1.2fr .8fr; gap:22px; align-items:center
}

/* Forms */
.form-grid{display:grid;gap:10px}
.form-grid input, .form-grid select, .form-grid textarea{
  background:#0E0E10;border:1px solid #2b2b2f;border-radius:12px;padding:14px;color:#fff
}

/* Footer */
footer{padding:48px 0;border-top:1px solid rgba(255,255,255,.06); color:#C7C7CA}
.footgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.footnav{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.footnav a{color:#bdbdc2}
.footnav a:hover{color:#fff}
.foot-blurb{color:#BEBEC2;max-width:60ch;margin-top:10px}
.foot-tags{display:flex;gap:10px;margin-top:12px}
.copyright{color:#9d9da3}

/* Responsiveness */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .cta{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .menu{display:none} /* drawer will override */
  .hamburger{display:block}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .hero{padding-top:72px}
}

/* Brand logo size */
.brand-logo{height:100px !important;width:auto}

/* === Mobile nav layout helper === */
.container.nav { display:flex; align-items:center; justify-content:space-between; }

/* Base menu (desktop) */
nav.menu { display:flex; gap:16px; align-items:center; }

/* ===== Drawer + clickability + transitions ===== */

/* Hamburger button */
.hamburger{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid rgba(255,255,255,.15);
  border-radius:10px;background:transparent;font-size:20px;line-height:1;
  cursor:pointer;z-index:10002;
}

/* Desktop: inline menu, hide hamburger */
@media (min-width:993px){
  .hamburger{display:none;}
  nav.menu{position:static;transform:none;visibility:visible;opacity:1}
}

/* Mobile drawer (RIGHT side) */
@media (max-width:992px){
  .hamburger{display:inline-flex;}

  nav.menu{
    /* Keep it out of flow and off-canvas by default */
    position:fixed; top:0; right:0; bottom:0; left:35%;
    background:rgba(15,15,16,.96); backdrop-filter:blur(4px);
    display:flex !important; flex-direction:column; align-items:flex-start;
    padding:80px 24px 24px; gap:16px;

    transform:translateX(100%);        /* off-canvas */
    visibility:hidden; opacity:0;       /* do not capture taps */
    pointer-events:none;
    transition:transform .28s ease, opacity .2s ease, visibility 0s linear .2s;
    z-index:10001; /* over header/overlay */
  }

  /* Scrim behind drawer */
  body::before{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.4);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:10000;
  }

  /* OPEN state */
  body.nav-open nav.menu{
    transform:translateX(0);
    visibility:visible; opacity:1; pointer-events:auto;
    transition:transform .28s ease, opacity .2s ease;
  }
  body.nav-open::before{opacity:1; pointer-events:auto;}

  /* Keep header below drawer when open; ensure links are tappable */
  header{position:relative; z-index:1;}
  body.nav-open header{z-index:0;}
  nav.menu a{pointer-events:auto;}
}

/* iOS focus zoom fix */
input,select,textarea,button{font-size:16px;}

/* ---------- Friendly reveal animations ---------- */
/* Text */
.reveal-base{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;}
.reveal-in{opacity:1;transform:none;}
/* Images */
.img-reveal-base{opacity:0;transform:scale(.98);transition:opacity .6s ease,transform .6s ease;}
.img-reveal-in{opacity:1;transform:none;}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal-base,.img-reveal-base{transition:none;opacity:1;transform:none;}
}


/* === FINAL MOBILE TAP FIX === */
@media (max-width: 992px){
  /* Highest stacking order */
  .hamburger { z-index: 2147483647 !important; }
  nav.menu   { z-index: 2147483646 !important; pointer-events: auto !important; }
  body::before { z-index: 2147483645 !important; }

  /* When open, background can't capture taps */
  body.nav-open header,
  body.nav-open main,
  body.nav-open footer {
    pointer-events: none !important;
    
    z-index: 988384283842 !important;
  }

  /* …but the drawer itself (and its links) stays clickable */
  body.nav-open nav.menu,
  body.nav-open nav.menu * ,
  body.nav-open .hamburger {
    pointer-events: auto !important;
  }

  /* Hardware-accelerate the drawer to avoid odd stacking on some mobiles */
  nav.menu { transform: translateX(0) translateZ(0); will-change: transform; }
  body:not(.nav-open) nav.menu { transform: translateX(100%) translateZ(0); }
}

/* === MOBILE DRAWER FINAL GUARANTEED TAP FIX === */
@media (max-width: 992px){
  html, body { overflow-x: hidden; }

  /* Add a dedicated overlay element (we will inject it via JS) */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
    z-index: 2147483645;
  }

  /* Drawer must sit above overlay */
  nav.menu {
    z-index: 2147483646 !important;
    pointer-events: auto !important;
  }

  /* Hamburger on top */
  .hamburger { z-index: 2147483647 !important; }

  /* Open state */
  body.nav-open .nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s ease;
  }

  /* Disable background taps while open */
  body.nav-open header,
  body.nav-open main,
  body.nav-open footer {
    pointer-events: none !important;
  }
  body.nav-open nav.menu,
  body.nav-open nav.menu *,
  body.nav-open .hamburger,
  body.nav-open .nav-overlay {
    pointer-events: auto !important;
  }
}


/* === Drawer default hidden/off-canvas (guarantee) === */
@media (max-width: 992px){
  nav.menu{
    position: fixed; top:0; right:0; bottom:0; left:35%;
    transform: translateX(100%) translateZ(0);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: transform .28s ease, opacity .2s ease, visibility 0s linear .2s;
  }
  body.nav-open nav.menu{
    transform: translateX(0) translateZ(0);
    visibility: visible; opacity: 1; pointer-events: auto;
    transition: transform .28s ease, opacity .2s ease;
  }
}

/* === FINAL, WORKING MOBILE MENU FIX — put this at the very end of styles.css === */
@media (max-width: 992px){
  /* Drawer sits above everything; overlay just below it; button on top */
  .hamburger { z-index: 2147483647 !important; }
  nav.menu   { z-index: 2147483646 !important; pointer-events: auto !important; }
  .nav-overlay { z-index: 2147483645 !important; }

  /* IMPORTANT: do NOT block the header — the menu is inside it */
  body.nav-open header { pointer-events: auto !important; }
  /* Block background only in main/footer so nothing steals taps */
  body.nav-open main,
  body.nav-open footer { pointer-events: none !important; }

  /* Make sure the drawer is fully interactive */
  body.nav-open nav.menu,
  body.nav-open nav.menu * { pointer-events: auto !important; 
  }

  /* Ensure no accidental horizontal scroll while the drawer is in/out */
  html, body { overflow-x: hidden !important; }
}