:root{
  --gold:#ffffff;
  --gold-weak:#ffffff;

  /* Apple-inspired neutrals */
  --ink:#000000;           /* pure black */
  --ink-2:#1D1D1F;         /* Apple dark text */
  --gray-1:#515154;        /* Apple secondary text */
  --gray-2:#6E6E73;        /* Tertiary text */

  --bg-dark:#000000;       /* hero / dark panels */
  --bg-light:#050505;      /* main page background */
  --bg-light-2:#F5F5F7;    /* alternating panels */

  /* Liquid Glass panel tokens */
  --lg-radius: 24px;
  --lg-bg-top: rgba(255,255,255,0.60);
  --lg-bg-bot: rgba(255,255,255,0.34);
  --lg-edge-tint: rgba(255,255,255,0.85);
  --lg-edge-shadow: rgba(0,0,0,0.10);
  --lg-stroke: rgba(255,255,255,0.66);
  --lg-stroke-dim: rgba(255,255,255,0.40);
  --lg-glow: rgba(255,255,255,0.25);

  /* Keep previous tokens for compatibility */
  --muted:#b7b7b7;
  --glass-bg:rgba(255,255,255,0.04);
  --glass-bord:rgba(0,0,0,0.08);
  --radius:18px;
  --max:1100px;

  /* IMPORTANT: match the real header height */
  --topbar-h: 125px;

  /* Liquid Glass BUTTON tokens */
  --btn-bg: linear-gradient(180deg, rgba(20,20,23,0.38), rgba(20,20,23,0.24)),
            radial-gradient(120% 180% at 0% 0%, rgba(232,213,154,0.18) 0%, rgba(232,213,154,0) 60%);
  --btn-bg-hover: linear-gradient(180deg, rgba(20,20,23,0.46), rgba(20,20,23,0.30)),
                  radial-gradient(120% 180% at 0% 0%, rgba(232,213,154,0.22) 0%, rgba(232,213,154,0) 60%);
  --btn-border: rgba(255,255,255,0.28);
  --btn-border-hover: rgba(255,255,255,0.40);
  --btn-text: #fff;
  --btn-shadow-inset: inset 0 1px 1px rgba(255,255,255,0.30);
  --btn-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 10px rgba(232,213,154,0.08);
  --btn-shadow-hover: 0 6px 14px rgba(0,0,0,0.28), 0 0 14px rgba(232,213,154,0.14);
  --btn-radius: 35px;
  --btn-font: 'Orbitron', sans-serif;
  --btn-size-y: 12px;
  --btn-size-x: 18px;
  --btn-font-size: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  color:var(--ink-2);
  background: var(--bg-light);
  font:400 16px/1.6 'Orbitron', sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; /* prevent sideways scroll on small screens */
}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}
h1,h2,h3,h4{font-family:'Orbitron', sans-serif; letter-spacing:.02em}
h1{font-size:clamp(28px, 4.5vw, 56px); margin:12px 0}
h2{font-size:clamp(24px, 3vw, 38px); margin:0 0 12px}
h3{font-size:clamp(18px, 2.2vw, 24px); margin:0 0 8px}
p{margin:0 0 12px}
.small{font-size:.9rem}
.muted{color:var(--gray-2)}

.link{color:#06c; text-decoration:none}
.link:hover{opacity:.85}

/* =========================
   BUTTONS — Liquid Glass
   ========================= */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn
){
  display:inline-block;
  padding: var(--btn-size-y) var(--btn-size-x);
  border-radius: var(--btn-radius);
  font-weight: bold;
  font-family: var(--btn-font);
  font-size: var(--btn-font-size);
  line-height: 1;
  cursor: pointer;
  color: var(--btn-text);
  text-decoration: none;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: var(--btn-shadow-inset), var(--btn-shadow);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease,
    opacity .2s;
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn):hover{
  transform: translateY(-1px) scale(1.03);
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.40), var(--btn-shadow-hover);
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn):active{
  transform: scale(0.98);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.22), 0 1px 4px rgba(0,0,0,0.32);
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"], .btn):focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.2), var(--btn-shadow);
}
.btn--ghost{
  background: linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.24));
  color: var(--ink-2);
  border: 1px solid rgba(0,0,0,0.14);
}
.btn--sm{ padding:8px 12px; font-size:.92rem }

.brand-logo {
  height: 188px;
  width: 180px;
  display: block;
}

/* === Topbar (glass) === */
.topbar{
  width: 94vw;
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 22px;
  height: 125px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  font-family: 'Orbitron', sans-serif;
  color: white;
  margin-left: 40px;
  margin-top: 20px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(120, 200, 255, 0.06);
}

/* Navigation (scoped to topbar) */
.topbar .nav{
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar .nav-item{
  text-decoration: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: transform 0.2s ease, color 0.2s ease;
  padding: 8px 12px;
  border-radius: 30px;
  color: white;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 0 6px rgba(120, 200, 255, 0.05);
}

.topbar .nav-item:hover{
  transform: scale(1.19);
  background: rgba(255, 255, 255, 0.12);
  color: #FF9800;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(120, 200, 255, 0.12);
}

.topbar .nav-item i{
  font-size: 18px;
  color: white;
  transition: transform 0.2s ease, color 0.2s ease;
}
.topbar .nav-item i:hover{
  transform: scale(1.1);
  color: #FF9800;
}

/* misc topbar bits trimmed for brevity (unchanged styles) */
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink-2)}
.brand-mark{width:26px; height:26px}
.brand-name{font:700 18px Michroma, Inter, sans-serif; letter-spacing:.04em; color:var(--ink-2)}
.nav{margin-left:auto; display:flex; gap:18px; align-items:center}
.nav a{color: white; text-decoration:none}
.nav a:hover{color:#FEB21A}
.nav-toggle{display:none; margin-left:auto; font-size:22px; background:none; border:none; color:#fff}

/* Desktop → mobile collapse */
@media (max-width:860px){
  .nav{display:none}
  .nav.is-open{
    position:absolute;
    top: calc(var(--topbar-h) - 8px);
    right:12px; left:12px; padding:16px;
    display:flex; flex-direction:column; gap:12px;
    z-index:1000;

    /* glass dropdown */
    background: rgba(16,16,18,0.72);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:16px;
  }
  .nav-toggle{display:block}
  /* prevent background scroll when menu is open (JS toggles .no-scroll) */
  body.no-scroll{ overflow:hidden; }
}

/* HERO */
.hero{
  position:relative; min-height:78vh; display:grid; place-items:center; text-align:center; overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 20%, rgba(0,0,0,.25), rgba(0,0,0,.55) 70%),
    url("images/abstractart.png") center / cover no-repeat;
  color:#fff;
  margin-top: calc(-1 * var(--topbar-h));
  padding-top: var(--topbar-h);
}
.hero-bg .orb{
  position:absolute; border-radius:50%; filter:blur(40px); opacity:.18;
  background:radial-gradient(circle at 30% 30%, var(--gold), transparent 60%);
  animation:float 14s ease-in-out infinite alternate;
}

.hero-lockup { display:block; margin:0 auto; padding:0; line-height:0; max-width:580px; }
.hero-lockup img { display:block; margin:0; padding:0; width:90%; height:auto; }

.orb-1{width:420px; height:420px; top:-80px; left:-80px}
.orb-2{width:360px; height:360px; right:-120px; bottom:-80px; animation-duration:16s}
.orb-3{width:280px; height:280px; left:50%; top:60%; transform:translateX(-50%); animation-duration:18s}
@keyframes float{to{transform:translate3d(20px, -10px, 0) scale(1.05); opacity:.22}}

.hero-lockup{width:min(680px, 70vw); opacity:.95}
.tagline{color:var(--gold-weak)}
.cta-row{display:flex; gap:12px; justify-content:center; margin:14px 0 4px}
.subcopy{color:#e6e6e6}

/* Sections */
.section{padding:64px 0; background:var(--bg-light)}
.section:nth-of-type(even){background:var(--bg-light-2)}
.section-title{text-align:center}
.section-lede{text-align:center; color:var(--gray-1); margin:0 auto 24px; max-width:720px}

/* Cards / Glass containers */
.grid{display:grid; gap:20px}
.cards{grid-template-columns:repeat(3, 1fr)}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

.card,
.glass{
  position:relative;
  border-radius:var(--lg-radius);
  padding:18px;
  overflow:hidden;

  background: linear-gradient(180deg, var(--lg-bg-top), var(--lg-bg-bot));
  border: 1px solid var(--lg-stroke);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);

  box-shadow: 0 14px 34px var(--lg-edge-shadow), inset 0 1px 0 var(--lg-edge-tint);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.card::after,
.glass::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(120% 80% at 50% -20%, var(--lg-glow), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, rgba(0,0,0,.08), transparent 55%);
  mix-blend-mode:soft-light;
}
.card:hover,
.glass:hover{
  transform:translateY(-4px);
  border-color: var(--lg-stroke-dim);
  box-shadow: 0 22px 48px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
.card-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.card-icon{width:32px; height:32px}
.placeholder-icon{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  border:1px dashed rgba(0,0,0,.25); color:#444; font-weight:700;
}
.card-copy{color: #df9400}
.card-badge{
  position:absolute; top:12px; right:12px; font-size:.75rem; letter-spacing:.08em;
  padding:6px 10px; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.42));
  color:var(--ink-2);
  border:1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}
.badge-soon{background:linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.32))}
.card-actions{display:flex; gap:10px; align-items:center; margin-top:10px}

/* About / Founder grids */
.about{grid-template-columns:1fr 1fr}
.founder{grid-template-columns:1.2fr .8fr; align-items:center}
@media (max-width:980px){.about,.founder{grid-template-columns:1fr}}
.founder-media img{width:100%; border-radius:var(--lg-radius); display:block}

.swatches{display:flex; gap:10px; margin:6px 0 12px}
.swatch{width:28px; height:28px; border-radius:6px; border:1px solid rgba(0,0,0,.12)}
.swatch--gold{background:var(--gold)}
.swatch--ink{background:var(--ink)}
.swatch--glass{background:var(--bg-light-2)}

.bullets{padding-left:18px; color: #df9400}
.bullets li{margin:6px 0}

.section-cta{background:var(--bg-light)}
.contact{grid-template-columns:1fr .9fr}

.form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:720px){.form .row{grid-template-columns:1fr}}
.form label{display:block; margin-bottom:12px}
.form label span{display:block; font-weight:600; margin-bottom:6px; color:var(--ink-2)}
input,select,textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid #D2D2D7; background:#fff; color:#1d1d1f;
  outline:none; transition:border-color .2s ease, box-shadow .2s;
}
input:focus,select:focus,textarea:focus{border-color:#2997ff; box-shadow:0 0 0 4px rgba(41,151,255,.15)}

.mini-faq .powered{display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--gray-1)}
.mini-faq .powered img{width:24px; height:24px}

.footer{border-top:1px solid rgba(0,0,0,.06); padding:26px 0; background:var(--ink-2); color:#f5f5f7}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.footer-brand{display:flex; align-items:center; gap:10px}
.footer-brand img{width:22px; height:22px}
.footer-nav{display:flex; gap:16px}
.footer-nav a{color:#d2d2d7; text-decoration:none}
.footer-nav a:hover{color:#fff}
.footer-copy{color:#a1a1a6; font-size:.9rem}
@media (max-width:780px){
  .footer-inner{flex-direction:column; align-items:flex-start}
}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Themed sections */
#products{
  position: relative;
  color: #fff;
  background: transparent;
  overflow: hidden;
}
#products::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.55)),
    radial-gradient(120% 120% at 15% 0%, rgba(0,0,0,.35), transparent 60%),
    url("images/blackmanstudy.jpg") center / cover no-repeat;
  filter: saturate(108%) contrast(104%);
  z-index:0;
}
#products > .container{ position: relative; z-index: 1; }
#products .section-title{ color: #fff; }
#products .section-lede{ color: rgba(255,255,255,.88); }
#products .card,
#products .glass{
  background: linear-gradient(180deg, rgba(16,16,18,0.60), rgba(16,16,18,0.36));
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
  color:#f5f5f7;
}
#products .card-badge{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  color:#fff;
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
}

#about{
  position: relative;
  color:#fff;
  background: transparent;
  overflow:hidden;
}
#about::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.30) 45%, rgba(0,0,0,.55)),
    radial-gradient(120% 120% at 10% 0%, rgba(0,0,0,.28), transparent 55%),
    url("images/collegekids.jpg") center / cover no-repeat;
  filter: saturate(108%) contrast(104%);
  z-index:0;
}
#about > .container{ position:relative; z-index:1; }
#about .section-title{ color:#fff; }
#about .section-lede{ color:rgba(255,255,255,.9); }
#about .card,
#about .glass{
  background: linear-gradient(180deg, rgba(16,16,18,0.60), rgba(16,16,18,0.38));
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
  color:#f5f5f7;
}

.hero .card,
.hero .glass{
  background: linear-gradient(180deg, rgba(16,16,18,0.56), rgba(16,16,18,0.36));
  border:1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.12);
  color:#f5f5f7;
}

/* Founder background */
#founder {
  position: relative;
  background-color: transparent;
  color: #fff;
  padding: 64px 0;
  overflow: hidden;
}
#founder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/coffee.jpg") center / cover no-repeat;
  filter: saturate(108%) contrast(104%);
  z-index: 0;
}
#founder > .container { position: relative; z-index: 1; }
#founder .glass {
  background: rgba(0, 0, 0, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--lg-radius);
  padding: 18px;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.418), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
#founder .glass:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.74), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Partner/Contact themed background */
#partner,
#contact,
#partner-with-us {
  position: relative;
  color: #fff;
  background: transparent;
  overflow: hidden;
  padding: 64px 0;
}
.section#partner,
.section#contact,
.section#partner-with-us { background: transparent; }

#partner::before,
#contact::before,
#partner-with-us::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("images/pexels-lastly-874730.jpg") center / cover no-repeat;
  filter: saturate(110%) contrast(105%);
  z-index: 0;
}
#partner > .container,
#contact > .container,
#partner-with-us > .container { position: relative; z-index: 1; }

#partner .glass,
#contact .glass,
#partner-with-us .glass {
  background: rgba(0, 0, 0, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--lg-radius);
  padding: 18px;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
#partner .glass:hover,
#contact .glass:hover,
#partner-with-us .glass:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.74), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Glassy inputs (contact) */
input[type="text"],
input[type="email"],
select,
textarea {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 12px 14px;
  color: #020202;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              0 2px 8px rgba(0, 0, 0, 0.3);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
}
input::placeholder,
textarea::placeholder { color: rgba(255, 255, 255, 0.7); }
input:focus,
select:focus,
textarea:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4),
              0 4px 14px rgba(0, 0, 0, 0.45);
}

/* CTA styles */
.hero .btn--beta {
  background: linear-gradient(180deg, rgba(255,215,128,0.28), rgba(255,215,128,0.18));
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 20px rgba(255, 215, 128, 0.25),
              0 0 16px rgba(255, 215, 128, 0.35);
  color: #fff; font-weight: 700;
}
.hero .btn--beta:hover {
  background: linear-gradient(180deg, rgba(255,215,128,0.38), rgba(255,215,128,0.26));
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px rgba(255, 215, 128, 0.35),
              0 0 20px rgba(255, 215, 128, 0.45);
}
.microproof {
  font-size: 0.85rem; opacity: 0.8; margin-top: 4px; font-style: italic;
  color: rgba(255, 255, 255, 0.78);
}
.card-actions .btn--primary,
.card-actions .btn--beta { flex-shrink: 0; }
.card-actions .btn--primary {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  font-weight: 700;
}
.card-actions .btn--primary:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45),
              0 0 14px rgba(232, 213, 154, 0.25);
}
.card-actions .action-sub {
  font-size: 0.8rem; opacity: 0.7; margin-left: 4px;
  color: rgba(255,255,255,0.65);
}

/* Floating CTA */
.floating-cta {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(180deg, rgba(255,215,128,0.28), rgba(255,215,128,0.18));
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 40px;
  padding: 12px 24px;
  font-family: var(--btn-font);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.32), 0 0 10px rgba(255, 215, 128, 0.25);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  transition: transform .2s ease, box-shadow .2s ease, opacity .3s ease;
  z-index: 999;
}
.floating-cta:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px rgba(255, 215, 128, 0.35);
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease-out, transform .8s ease-out; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Button micro-interactions */
.btn,.btn--primary,.btn--beta{ transition: transform .2s ease, box-shadow .3s ease, background .3s ease; }
.btn:hover,.btn--primary:hover,.btn--beta:hover{ transform: translateY(-1px) scale(1.03); }

/* Form highlight */
:root { --highlight-color: rgba(255, 215, 128, 0.25); }
#contactForm select:focus { box-shadow: 0 0 0 4px var(--highlight-color); }

/* ===== iPhone / narrow phones ===== */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 430px) {
  :root{
    --max: 100vw;
    --topbar-h: 88px;        /* shrink sticky header on phones */
    --btn-size-y: 14px;
    --btn-size-x: 16px;
    --btn-font-size: 15px;   /* >=16px prevents iOS zoom on inputs */
    --lg-radius: 18px;
  }

  body { padding-bottom: max(16px, var(--safe-bottom)); }

  /* Topbar becomes full-width tile */
  .topbar{
    width: calc(100vw - 24px);
    height: var(--topbar-h);
    margin: max(8px, var(--safe-top)) auto 8px;
    padding: 10px 14px;
    border-radius: 16px;
  }
  .brand-logo { height: 42px; width: auto; }

  .nav-toggle{
    display: block;
    font-size: 24px;
    color: #fff;
  }
  .nav{ display: none; }
  .nav.is-open{
    position: absolute;
    top: calc(var(--topbar-h) - 8px);
    right: 12px; left: 12px;
    padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 1000;

    border-radius: 16px;
    background: rgba(16,16,18,0.72);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.18);
  }
  .nav a, .topbar .nav-item { padding: 10px 12px; border-radius: 12px; }

  /* Hero spacing aligns with header var */
  .hero{
    min-height: 66vh;
    margin-top: calc(-1 * var(--topbar-h));
    padding-top: var(--topbar-h);
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
  h1.tagline{ font-size: clamp(24px, 8vw, 32px); }
  .cta-row{ flex-wrap: wrap; gap: 10px; }
  .cta-row .btn{ width: 100%; justify-content: center; }

  .section{ padding: 40px 0; }
  .grid{ gap: 14px; }
  .cards{ grid-template-columns: 1fr; }
  .about, .founder, .contact{ grid-template-columns: 1fr; }

  .card, .glass{ padding: 14px; border-radius: 16px; }
  .card-head{ gap: 10px; }
  .card-badge{ top: 10px; right: 10px; }

  .card-copy, .bullets { font-size: 0.96rem; }
  .bullets{ padding-left: 16px; }
  .bullets li{ margin: 4px 0; }

  input, select, textarea{
    font-size: 16px;
    padding: 14px 14px;
    border-radius: 14px;
  }
  .form .row{ grid-template-columns: 1fr; gap: 10px; }

  .footer-inner{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer{ padding-bottom: calc(26px + var(--safe-bottom)); }

  .floating-cta{
    bottom: max(20px, calc(12px + var(--safe-bottom)));
    right: max(16px, var(--safe-right));
    left: auto;
    padding: 12px 18px;
    border-radius: 28px;
    font-size: 15px;
  }
}

/* Landscape narrow */
@media (max-height: 430px) and (orientation: landscape) {
  :root{ --topbar-h: 72px; }
  .topbar{ height: var(--topbar-h); padding: 8px 12px; }
  .brand-logo{ height: 34px; }
  .hero{ min-height: 74vh; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .floating-cta{ bottom: max(14px, var(--safe-bottom)); right: max(14px, var(--safe-right)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* lock page scroll when mobile menu is open */
body.no-scroll {
  overflow: hidden;
  position: fixed;   /* prevents rubber-band scroll on iOS */
  width: 100%;
}

/* --- Mobile: show only the menu button in the topbar --- */
@media (max-width: 430px) {
  /* Hide brand + nav inside the topbar */
  .topbar .brand,
  .topbar .brand-logo,
  .topbar .brand-name,
  .topbar .nav {
    display: none !important;
  }

  /* Keep the bar, align the menu button to the right */
  .topbar {
    justify-content: flex-end;
    width: calc(100vw - 24px); /* keep your existing tile look */
    padding-right: 14px;
  }

  /* Ensure the menu button is visible */
  .nav-toggle {
    display: block !important;
  }
}