:root{--pink:#FF4D73;--violet:#7D5FFF;--mint:#3DDC97;--ink:#2B2B2B;--slate:#6B7280;--bg:#FDFDFE;}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:24px}.nav{position:sticky;top:0;background:rgba(253,253,254,.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #eee;z-index:10}
.nav .container{display:flex;gap:20px;align-items:center}.nav a.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:800}
.nav img{width:36px;height:36px;border-radius:9px}.nav-links{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}.nav-links a{color:var(--ink);text-decoration:none;font-weight:600}
.hero{padding:60px 0;background:linear-gradient(135deg, rgba(255,77,115,.08), rgba(125,95,255,.08))}.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h1{font-size:56px;line-height:1.02;margin:0 0 12px;font-weight:900}.hero p{font-size:20px;color:var(--slate);margin:0 0 24px}
.cta{display:flex;gap:12px;flex-wrap:wrap}.btn{appearance:none;border:none;border-radius:14px;padding:14px 18px;font-weight:700;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--pink),var(--violet));color:white}.btn-ghost{background:white;border:1px solid #e5e7eb}
.badges{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}.badge{padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;font-size:12px;background:white}
.section{padding:64px 0}.section h2{font-size:36px;margin:0 0 12px}.section p.lead{color:var(--slate);font-size:18px;margin:0 0 24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{border:1px solid #eee;background:white;border-radius:20px;padding:18px}.card h3{margin:4px 0 8px}
.icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--pink),var(--violet));display:inline-grid;place-items:center;color:white;font-weight:900}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;background:#f3f4f6;border:1px solid #e5e7eb;border-bottom-width:3px;padding:2px 6px;border-radius:6px}
.faq{max-width:900px}.faq details{border:1px solid #eee;background:white;border-radius:12px;padding:14px;margin-bottom:12px}
.banner{padding:14px 18px;border-radius:14px;background:#fff;border:1px dashed #e5e7eb}footer{padding:32px 0;border-top:1px solid #eee;color:var(--slate);font-size:14px}
@media (max-width: 900px){.hero .wrap{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.hero h1{font-size:42px}}

/* Hamburger button */
.nav-toggle{
  appearance:none;border:0;background:transparent;cursor:pointer;
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--ink);
  border-radius:2px;position:relative;
}
.nav-toggle span + span{ margin-top:5px; }

/* Desktop: show inline menu, hide hamburger */
@media (min-width: 901px){
  .nav-toggle{ display:none; }
  .nav-links{ display:flex; gap:20px; }
}

/* Mobile: collapsed by default, opens on tap */
@media (max-width: 900px){
  .nav .container{ align-items:center; }
  .nav-links{
    width:100%;
    display:flex; flex-direction:column; gap:0;
    background:#fff; border:1px solid #eee; border-radius:12px;
    overflow:hidden; max-height:0; opacity:0; transform:translateY(-4px);
    transition:max-height .3s ease, opacity .2s ease, transform .2s ease;
    pointer-events:none;           /* prevent focus when closed */
    margin-top:8px;
  }
  .nav-links.open{
    max-height:600px; opacity:1; transform:none; pointer-events:auto;
  }
  .nav-links a{
    display:block; padding:14px 12px; border-top:1px solid #eee; text-decoration:none; color:var(--ink);
  }
  .nav-links a:first-child{ border-top:none; }
}

/* --- Fan-of-3 images (scoped) --- */
.fan3-wrap{max-width:1200px;margin:24px auto 8px;padding:0 16px}
.fan3{position:relative;height:clamp(220px,42vw,420px);display:flex;justify-content:center;align-items:center}
.fan3-img{
  position:absolute; height:100%; width:auto;
  border-radius:18px; background:#0a0a0a;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.25);
  object-fit:cover; image-rendering:auto;
}
.fan3-center{z-index:3; transform:translateY(-2%)}
.fan3-left  {z-index:2; transform:translate(-26%,4%) rotate(-8deg)}
.fan3-right {z-index:2; transform:translate( 26%,4%) rotate( 8deg)}

@media (max-width:900px){
  .fan3{height:clamp(200px,52vw,360px)}
  .fan3-left {transform:translate(-18%,5%) rotate(-7deg)}
  .fan3-right{transform:translate( 18%,5%) rotate( 7deg)}
}
@media (max-width:600px){
  .fan3{height:clamp(180px,64vw,320px)}
  .fan3-left {transform:translate(-10%,6%) rotate(-6deg)}
  .fan3-right{transform:translate( 10%,6%) rotate( 6deg)}
}
/* Vertical animated WebP container */
.vwebp-wrap{max-width:min(420px,46vw);margin:24px auto}
.vwebp{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  border-radius:18px; background:#000;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.25);
}
.vwebp-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; image-rendering:auto; display:block;
}

/* --- Why Invest block (scoped, minimal) --- */
#why-invest .inv-sub { opacity:.85; margin-top:6px }
.inv-bullets .inv-card h3{ margin:0 0 6px; font-size:16px; }
.inv-bullets .inv-card p{ margin:0; opacity:.92; line-height:1.45; }
.inv-callout{margin-top:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:12px}
.inv-formula{
  display:block; margin-top:6px; padding:8px 10px; border-radius:8px;
  background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.15);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:13px; white-space:nowrap; overflow:auto;
}

/* Header logo sizing */
.site-header .logo {
  max-height: 48px;   /* ideal size for legal / info pages */
  width: auto;
  height: auto;
}

/* Center header content if needed */
.site-header {
  padding: 16px 0;
}
.vwebp,
.vwebp video {
  width: 100%;
  height: 100%;
}

.vweb-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 👈 key line */
}

.fan-video-wrap {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 1200 / 500; /* 👈 keeps correct ratio */
  margin: 0 auto;
}

.fan-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* 👈 no cropping */
}
/* ============================
   WEBM MOBILE/TABLET FIX
   Paste at the END of styles.css
   ============================ */

/* 1) All videos: never crop */
video{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}

/* 2) Vertical preview frames */
.vwebp-wrap{
  width:100%;
  margin:24px auto;
}

/* Keep the phone-frame look, but allow sensible sizing on small screens */
.vwebp{
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  overflow:hidden;
}

/* IMPORTANT: target the class you actually use in HTML: vweb-media */
.vweb-media{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;     /* no zoom/crop */
  object-position:center;
}

/* 3) Hero landscape video */
.fan-video-wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

/* Let the video decide its height naturally on small screens */
.fan-video{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* ============================
   RESPONSIVE OVERRIDES
   ============================ */

/* iPad + mobile */
@media (max-width: 1024px){
  /* Stop the vertical frame becoming too small or too tall */
  .vwebp-wrap{ max-width: min(520px, 92vw); }
  .vweb-media{ max-height: 80vh; }  /* prevents “zoomed” feel */

  /* Landscape hero: keep it visible without taking over the screen */
  .fan-video{ max-height: 55vh; }
}

/* Small phones */
@media (max-width: 600px){
  .vwebp-wrap{ max-width: 92vw; }
  .vweb-media{ max-height: 70vh; }
  .fan-video{ max-height: 45vh; }
}
/* Footer links: don't cut off on mobile */
footer .container > div:last-child{
  display:flex;
  gap:16px;
  flex-wrap:wrap;          /* ✅ allows wrapping */
  align-items:center;
}

@media (max-width:600px){
  footer .container{
    flex-direction:column; /* ✅ stack copyright + links */
    align-items:flex-start;
    gap:10px;
  }

  footer .container > div:last-child{
    gap:12px;
  }
}
/* Waitlist form: stack inputs on mobile */
@media (max-width: 600px){
  #waitlist form > div[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
}
.waitlist-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:12px;
}

@media (max-width:600px){
  .waitlist-grid{
    grid-template-columns:1fr;
  }
}