:root{
  --bg1:#020305; --bg2:#0a0c12;
  --text:#eef2f7; --muted:#9eabc2;
  --glass:rgba(255,255,255,0.06);
  --glass-border:rgba(255,255,255,0.18);
  --gold:#ffd166; --gold-2:#ffcf4a;
}

/* Page layout: footer sticks to bottom if content is short */
html, body { height: 100%; }
body{
  margin:0; color:var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(255,255,255,0.035), transparent 60%),
    radial-gradient(800px 500px at 80% 80%, rgba(255,255,255,0.025), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  display:flex; flex-direction:column; min-height:100vh;
  overflow-x:hidden;
  padding: 0; /* no artificial top padding */
}
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

a { color:inherit; text-decoration:none }
.container{ max-width: 1100px; margin: 0 auto; padding: 0 20px }

.glass{
  background: var(--glass);
  border:1px solid var(--glass-border);
  border-radius:18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 44px rgba(0,0,0,0.45);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  position:relative;
}
.glass::after{
  content:""; position:absolute; inset:1px; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012) 30%, transparent 60%);
  pointer-events:none; mix-blend-mode:screen;
}

/* Header (non-sticky to avoid overlap) */
.head{ position: relative; top:0; z-index:10 }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800 }
.brand img{ width:30px; height:30px; border-radius:50%; object-fit:cover }
.brand-name{ letter-spacing:.2px; opacity:.95 }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:999px; font-weight:800; letter-spacing:.03em; font-size: 14px }
.buy{ background:var(--gold); color:#111; border:none; box-shadow:0 10px 30px rgba(255,209,102,.25) }
.buy:hover{ background:var(--gold-2) }
.ghost{ background:rgba(255,255,255,0.08); border:1px solid var(--glass-border) }

/* Type scale */
.eyebrow{ color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; margin:0 0 8px }
h1{ font-size: clamp(24px, 4.8vw, 40px); line-height:1.12; margin:0 0 10px; font-weight:900 }
h2{ font-size: clamp(20px, 3.6vw, 28px); margin:0 0 8px }
h4{ margin:0 0 6px; font-size: clamp(14px, 2.5vw, 18px) }
.sub{ color:#d5dbea; margin:0 0 14px; max-width:60ch; font-size: clamp(13px, 2.4vw, 16px) }
.inline-link{ color:#ffea8a; text-decoration:underline }

/* Hero */
.hero{ padding: 16px 0 12px }
.hero-frame{ padding: 12px }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:16px; align-items:center }
.hero-left{ padding:14px }
.hero-right{ display:grid; place-items:center; padding:10px }
.hero-right img{ width:100%; max-width:520px; height:auto; border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.5) }

.addr{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px }
.addr .label{ color:#c6cfdf; display:block; font-size:12.5px; margin-bottom:2px }
.addr code{ background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:8px; display:block; overflow:auto }

.cta-row{ display:flex; flex-wrap:wrap; gap:10px }

section{ padding:20px 0 }
.card{ padding:16px }

/* KPIs */
.kpis{ display:grid; grid-template-columns:1fr; gap:12px }
.kpi{ padding:16px; text-align:center }
.kpi .label{ color:#c6cfdf; font-size:13px }
.kpi .value{ font-weight:800; font-size:15px; margin-top:4px }

/* Steps */
.steps{ display:grid; grid-template-columns:1fr; gap:12px }
.step{ display:flex; gap:10px; align-items:flex-start; padding:14px }
.step .num{ flex:0 0 30px; height:30px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid var(--glass-border); font-weight:800; font-size:13px }
.muted{ color:var(--muted); font-size:13px }

/* Roadmap */
.roadwrap{ padding:10px; border-radius:18px }
.road{ display:grid; grid-auto-flow:column; gap:12px; overflow:auto; padding-bottom:6px }
.mile{ min-width:220px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:10px; font-size:13.5px }

/* FAQ */
.faq{ padding:0 }
summary{ cursor:pointer; padding:12px 14px; list-style:none; font-weight:800; display:flex; align-items:center; justify-content:space-between; font-size:14px }
summary::-webkit-details-marker{ display:none }
.faq .content{ padding:0 14px 12px; color:#d4d9e6; font-size:13.5px }

/* Footer pinned bottom, centered */
.foot{ padding: 18px 0 24px }
.foot-inner{ display:flex; justify-content:center; align-items:center }
.foot-inner > *{ max-width: 100%; }

/* Desktop */
@media (min-width:900px){
  .hero{ padding: 22px 0 16px }
  .hero-grid{ grid-template-columns: 1.2fr 1fr; gap:18px }
  .kpis{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .steps{ grid-template-columns:repeat(3, minmax(0,1fr)) }
}

/* Confetti canvas */
#confetti{ position:fixed; inset:0; z-index:5; pointer-events:none; opacity:1; transition:opacity .9s ease } /* place behind header */
#confetti.hide{ opacity:0 }


/* === TOP OFFSET PATCH === */
:root{ --safe-top: env(safe-area-inset-top, 0px); }

/* Make sure content starts below any browser chrome/notch */
main{ padding-top: max(16px, var(--safe-top)); }

/* Extra breathing room for the hero so it never appears clipped */
.hero{ padding-top: clamp(28px, 6vh, 72px); }

/* Ensure the first container cannot be hidden by any accidental overlaps */
.hero .container,
.hero-frame,
.hero-grid,
.hero-left,
.hero-right{ position: relative; z-index: 1; }

/* Constrain hero image height relative to viewport to prevent push-off */
.hero-right img{
  max-height: min(52vh, 520px);
  object-fit: contain;
}

/* Guardrails: reset any accidental negative margins */
body, main, header, .hero, .hero *{ margin-top: max(0px, margin-top); }


/* === UNIVERSAL VIEWPORT-SAFE RULES === */
html{height:100%;}
body{min-height:100dvh;}

/* Start content below any browser chrome/notch on ALL devices */
main{padding-top:max(18px, env(safe-area-inset-top));}

/* Hero always visible without clipping */
.hero{margin-top:0; padding-top:clamp(24px, 6dvh, 72px);}
.hero-right img{max-height:min(52dvh, 520px); width:100%; height:auto; object-fit:contain;}
img,video,canvas{max-width:100%; height:auto; display:block;}

/* Mobile hard-guards */
@media (max-width: 640px){
  .container{padding-left:16px; padding-right:16px;}
  .hero-right img{max-height:42dvh;}
  .nav{padding-top:10px; padding-bottom:10px;}
}

/* Prevent negative margins/positioning from pulling content off-screen */
*{scroll-margin-top:12px;}


/* === RUNTIME TOP OFFSET (HEADER + SAFE AREA) === */
:root{ --header-h: 0px; --top-pad: max(env(safe-area-inset-top, 0px), var(--header-h)); }

/* Ensure content starts below header + safe area on all devices */
main{ padding-top: calc(var(--top-pad) + 16px) !important; }

/* Avoid hero clipping; use stable viewport height */
.hero{ margin-top: 0; padding-top: clamp(16px, 5svh, 48px); }
.hero-right img{ max-height: min(54svh, 520px); width: 100%; height: auto; object-fit: contain; }

/* Stop margin-collapsing at the top */
.head{ overflow: auto; }
body{ padding-top: 0 !important; }
html, body{ scroll-padding-top: calc(var(--top-pad) + 12px); }

/* Anchor/section safety */
.hero, section:first-of-type{ scroll-margin-top: calc(var(--top-pad) + 16px); }


/* === ABSOLUTE FIT-PAGE GUARANTEE === */
:root{ --safe-top: env(safe-area-inset-top, 0px); --header-h: 0px; --dyn-top: 0px; }
main{ padding-top: calc(max(var(--safe-top), var(--header-h)) + var(--dyn-top) + 16px) !important; }
.hero{ margin-top: 0 !important; padding-top: clamp(16px, 5svh, 48px); }
.hero-right img{ max-height: min(50svh, 520px); width:100%; height:auto; object-fit:contain; }
.head{ position: relative !important; } /* ensure not sticky */
html, body{ scroll-padding-top: calc(max(var(--safe-top), var(--header-h)) + 16px); }
section:first-of-type, .hero{ scroll-margin-top: calc(max(var(--safe-top), var(--header-h)) + 16px); }


/* === SMALLER TEXT & BUTTONS OVERRIDES === */
:root{
  --btn-font: 12px;
  --h1-max: 32px;
  --h2-max: 24px;
  --p-max: 15px;
}
/* Body text scale down */
body{ font-size: 14px; }
p, li { font-size: clamp(12px, 2.2vw, var(--p-max)); }
/* Headings smaller */
h1{ font-size: clamp(20px, 4.2vw, var(--h1-max)); }
h2{ font-size: clamp(16px, 3.2vw, var(--h2-max)); }
h4{ font-size: clamp(12px, 2.2vw, 16px); }
/* Subtext & labels */
.sub{ font-size: clamp(12px, 2vw, 14px); }
.eyebrow{ font-size: 0.62rem; }
.addr{ font-size: 12px; }
.addr .label{ font-size: 11.5px; }
/* Buttons tighter */
.btn{ padding: 8px 12px; border-radius: 14px; font-size: var(--btn-font); }
.buy{ box-shadow: 0 6px 18px rgba(255,209,102,.22); }
/* Hero spacing & image constraints slightly tighter */
.hero{ padding-top: clamp(12px, 4svh, 36px); padding-bottom: 10px; }
.hero-right img{ max-height: min(46svh, 460px); }
/* Sections & cards tighter */
section{ padding: 14px 0; }
.card, .kpi, .step{ padding: 12px; }
.kpi .value{ font-size: 14px; }
.kpi .label{ font-size: 12px; }
.step .num{ width: 26px; height: 26px; font-size: 12px; }
/* Footer compact */
.foot{ padding: 12px 0 18px; }


/* === FOOTER THICKNESS ~HALVED === */
.foot{ padding: 6px 0 9px !important; } /* roughly half of previous 12/18 */
.foot-inner{ gap: 6px; }
.foot-inner img, .foot-inner svg{ max-height: 44px; height: auto; width: auto; }


/* ===== FINAL SIZE ADJUSTMENTS (APPLIED IN-PLACE) ===== */
/* This block reduces overall scale and footer height without removing content. */

:root{
  --h1-max: 28px;
  --h2-max: 22px;
  --p-max: 14px;
  --btn-font: 12px;
}

/* Container width a bit narrower for tighter fit */
.container{ max-width: 920px; padding-left: 16px; padding-right: 16px; }

/* Base typography smaller */
html, body{ font-size: 13px; line-height: 1.36; }
p, li{ font-size: clamp(12px, 2.2vw, var(--p-max)); }

/* Headings smaller */
h1{ font-size: clamp(20px, 4.0vw, var(--h1-max)); line-height: 1.12; }
h2{ font-size: clamp(16px, 3.0vw, var(--h2-max)); }
h3{ font-size: clamp(14px, 2.6vw, 18px); }
h4{ font-size: clamp(12px, 2.2vw, 16px); }
.eyebrow{ font-size: 0.62rem; }
.sub{ font-size: clamp(12px, 2.2vw, 14px); }

/* Buttons smaller and tighter */
.btn, .button, a.button, .cta, .primary, .secondary{
  padding: 8px 12px; border-radius: 12px; font-size: var(--btn-font); line-height: 1.1;
}

/* Hero: ensure no clipping at the top and smaller image */
.hero{ margin-top: 0 !important; padding-top: clamp(8px, 2dvh, 16px); padding-bottom: 10px; }
.hero img, .hero-right img{
  max-height: min(40dvh, 420px); width: 100%; height: auto; object-fit: contain;
}

/* Sections/cards spacing smaller */
section{ padding: 14px 0; }
.card, .kpi, .step{ padding: 12px; }
.kpi .label{ font-size: 12px; }
.kpi .value{ font-size: 14px; }
.step .num{ width: 26px; height: 26px; font-size: 12px; }
.addr{ font-size: 12px; }
.addr .label{ font-size: 11.5px; }

/* Footer WAY shorter */
footer, .foot, .site-foot{ padding-top: 6px; padding-bottom: 8px; }
.foot-inner{ gap: 4px; }
footer img, footer svg, .foot-inner img, .foot-inner svg{ max-height: 22px; height: auto; width: auto; }

/* Make sure the page sits fully on-screen (no header overlap) */
.head, header{ position: static; top: auto; }
html, body{ height: 100%; }
body{ min-height: 100dvh; overflow-x: hidden; }
main{ padding-top: clamp(56px, 10dvh, 120px); } /* generous safe space on all devices */
#confetti{ z-index: 0; } /* keep behind content */



/* ===== ULTRA SIZE REDUCTIONS (direct code edit) ===== */
:root{
  --h1-max: 22px;
  --h2-max: 18px;
  --p-max: 12px;
  --btn-font: 11px;
}
/* Containers narrower */
.container{ max-width: 820px; padding-left: 12px; padding-right: 12px; }
/* Base text even smaller */
html, body{ font-size: 12px; line-height: 1.32; }
p, li{ font-size: clamp(11px, 1.9vw, var(--p-max)); }
/* Headings smaller */
h1{ font-size: clamp(16px, 3.2vw, var(--h1-max)); line-height: 1.1; }
h2{ font-size: clamp(14px, 2.6vw, var(--h2-max)); }
h3{ font-size: clamp(12px, 2.2vw, 16px); }
h4{ font-size: clamp(11px, 2vw, 14px); }
.sub{ font-size: clamp(11px, 1.9vw, 13px); }
.eyebrow{ font-size: 0.56rem; }
/* Buttons smaller & tighter */
.btn, .button, a.button, .cta, .primary, .secondary{
  padding: 6px 10px; border-radius: 10px; font-size: var(--btn-font); line-height: 1.05;
}
.buy{ box-shadow: 0 4px 12px rgba(255,209,102,.16); }
/* Hero image constrained further by viewport */
.hero{ margin-top: 0 !important; padding-top: clamp(6px, 1.5dvh, 12px); padding-bottom: 8px; }
.hero img, .hero-right img{ max-height: min(32dvh, 340px); width: 100%; height: auto; object-fit: contain; }
/* Sections/cards tighter */
section{ padding: 10px 0; }
.card, .kpi, .step{ padding: 10px; }
.kpi .label{ font-size: 11px; }
.kpi .value{ font-size: 12.5px; }
.step .num{ width: 20px; height: 20px; font-size: 11px; }
.addr{ font-size: 11.5px; }
.addr .label{ font-size: 11px; }
/* Footer extra thin */
footer, .foot, .site-foot{ padding-top: 4px; padding-bottom: 6px; }
.foot-inner{ gap: 2px; }
footer img, footer svg, .foot-inner img, .foot-inner svg{ max-height: 18px; height: auto; width: auto; }
/* Fit page on all screens */
.head, header{ position: static; top: auto; }
html, body{ height: 100%; }
body{ min-height: 100dvh; overflow-x: hidden; }
main{ padding-top: clamp(44px, 8dvh, 100px); }
#confetti{ z-index: 0; }



/* ===== MICRO SIZE REDUCTIONS + HALF FOOTER (direct code edit) ===== */
:root{
  --h1-max: 18px;
  --h2-max: 16px;
  --p-max: 11px;
  --btn-font: 10px;
}

/* Narrower container */
.container{ max-width: 760px; padding-left: 12px; padding-right: 12px; }

/* Base text smaller */
html, body{ font-size: 11px; line-height: 1.28; }
p, li{ font-size: clamp(10px, 1.7vw, var(--p-max)); }

/* Headings smaller */
h1{ font-size: clamp(14px, 2.8vw, var(--h1-max)); line-height: 1.08; }
h2{ font-size: clamp(13px, 2.4vw, var(--h2-max)); }
h3{ font-size: clamp(12px, 2vw, 15px); }
h4{ font-size: clamp(11px, 1.9vw, 13px); }
.sub{ font-size: clamp(10.5px, 1.8vw, 12px); }
.eyebrow{ font-size: 0.54rem; }

/* Buttons smaller & tighter */
.btn, .button, a.button, .cta, .primary, .secondary{
  padding: 5px 9px; border-radius: 10px; font-size: var(--btn-font); line-height: 1.05;
}
.buy{ box-shadow: 0 3px 10px rgba(255,209,102,.14); }

/* Hero tighter and image smaller by viewport */
.hero{ margin-top: 0 !important; padding-top: clamp(4px, 1.2dvh, 10px); padding-bottom: 8px; }
.hero img, .hero-right img{ max-height: min(28dvh, 300px); width: 100%; height: auto; object-fit: contain; }

/* Sections/cards tighter */
section{ padding: 8px 0; }
.card, .kpi, .step{ padding: 8px; }
.kpi .label{ font-size: 11px; }
.kpi .value{ font-size: 12px; }
.step .num{ width: 18px; height: 18px; font-size: 10px; }
.addr{ font-size: 11px; }
.addr .label{ font-size: 10.5px; }

/* Footer now half the previous ultra height */
footer, .foot, .site-foot{ padding-top: 2px; padding-bottom: 3px; }
.foot-inner{ gap: 1px; }
footer img, footer svg, .foot-inner img, .foot-inner svg{ max-height: 9px; height: auto; width: auto; }

/* Fit page on all screens */
.head, header{ position: static; top: auto; }
html, body{ height: 100%; }
body{ min-height: 100dvh; overflow-x: hidden; }
main{ padding-top: clamp(40px, 7dvh, 88px); }
#confetti{ z-index: 0; }



/* ===== NANO SIZE REDUCTIONS (direct edit) ===== */
:root{
  --h1-max: 16px;
  --h2-max: 14px;
  --p-max: 10.5px;
  --btn-font: 9.5px;
}

/* Containers narrower */
.container{ max-width: 700px; padding-left: 10px; padding-right: 10px; }

/* Base text smaller */
html, body{ font-size: 10.5px; line-height: 1.24; }
p, li{ font-size: clamp(10px, 1.5vw, var(--p-max)); }

/* Headings smaller */
h1{ font-size: clamp(12px, 2.4vw, var(--h1-max)); line-height: 1.06; }
h2{ font-size: clamp(11.5px, 2.2vw, var(--h2-max)); }
h3{ font-size: clamp(11px, 2vw, 13px); }
h4{ font-size: clamp(10.5px, 1.8vw, 12px); }
.sub{ font-size: clamp(10px, 1.6vw, 11.5px); }
.eyebrow{ font-size: 0.5rem; letter-spacing: .08em; }

/* Buttons extra small */
.btn, .button, a.button, .cta, .primary, .secondary{
  padding: 4px 8px; border-radius: 9px; font-size: var(--btn-font); line-height: 1.02;
}
.buy{ box-shadow: 0 2px 8px rgba(255,209,102,.12); }

/* Hero: tighter spacing & smaller image cap */
.hero{ margin-top: 0 !important; padding-top: clamp(2px, 1dvh, 8px); padding-bottom: 6px; }
.hero img, .hero-right img{ max-height: min(24dvh, 260px); width: 100%; height: auto; object-fit: contain; }

/* Sections/cards minimal padding */
section{ padding: 6px 0; }
.card, .kpi, .step{ padding: 6px; }
.kpi .label{ font-size: 10.5px; }
.kpi .value{ font-size: 11.5px; }
.step .num{ width: 16px; height: 16px; font-size: 10px; }
.addr{ font-size: 10.5px; }
.addr .label{ font-size: 10px; }

/* Footer ultra thin */
footer, .foot, .site-foot{ padding-top: 1px; padding-bottom: 2px; }
.foot-inner{ gap: 1px; }
footer img, footer svg, .foot-inner img, .foot-inner svg{ max-height: 7px; height: auto; width: auto; }

/* Keep page fitting the viewport */
.head, header{ position: static; top: auto; }
html, body{ height: 100%; }
body{ min-height: 100dvh; overflow-x: hidden; }
main{ padding-top: clamp(36px, 7dvh, 80px); }
#confetti{ z-index: 0; }



/* ===== LAYOUT WIDER + TEXT LARGER (keep button heights) ===== */
:root{
  --h1-max-up: 34px;
  --h2-max-up: 24px;
  --p-max-up: 15px;
}

/* Make page a little wider and keep it cohesive */
.container{ max-width: 1100px !important; padding-left: 20px !important; padding-right: 20px !important; }
section{ padding: 16px 0 !important; }
.card, .kpi, .step{ padding: 14px !important; }

/* Enlarge general text (buttons not touched) */
html, body{ font-size: 13.5px !important; line-height: 1.4 !important; }
p, li{ font-size: clamp(12px, 2.1vw, var(--p-max-up)) !important; }
h1{ font-size: clamp(20px, 4.0vw, var(--h1-max-up)) !important; line-height: 1.14 !important; }
h2{ font-size: clamp(16px, 3.2vw, var(--h2-max-up)) !important; }
h3{ font-size: clamp(14px, 2.6vw, 20px) !important; }
h4{ font-size: clamp(12px, 2.2vw, 16px) !important; }
.sub{ font-size: clamp(12.5px, 2.2vw, 14.5px) !important; }

/* Keep the hero tight but balanced, image contained */
.hero{ margin-top: 0 !important; padding-top: clamp(10px, 2.2dvh, 18px) !important; padding-bottom: 12px !important; }
.hero-right img, .hero img{ max-height: min(38dvh, 420px) !important; }

/* Maintain the short footer from prior step */
footer, .foot, .site-foot{ padding-top: 2px !important; padding-bottom: 3px !important; }
.foot-inner img, .foot-inner svg{ max-height: 9px !important; height:auto !important; }