: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;

  /* Form highlight */
  --highlight-color: rgba(255, 215, 128, 0.25);

  /* Safe areas */
  --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);
}

*{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 }

/* Logo */
.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: 62px;
  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: 0;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  -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 */
.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 → tablet: keep nav, tighten spacing */
@media (max-width: 860px){
  .topbar{
    width: 100vw;
    margin-left: 0;
    padding: 8px 20px;
    border-radius: 48px;
  }

  .brand-logo{
    height: 120px;
    width: auto;
  }

  .nav{
    margin-left: auto;
    display: flex;
    gap: 14px;
    align-items: center;
  }

  .nav a{
    font-size: 14px;
  }

  .nav-toggle{
    display: none;
  }

  body.no-scroll{
    overflow: auto;
  }
}

/* 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,.35), rgba(0,0,0,.80) 75%);
  color:#fff;
  margin-top: calc(-1 * var(--topbar-h));
  padding-top: var(--topbar-h);
}

/* video layer */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* orb layer above video */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:1;
}

.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;
}

/* content layer above everything */
.hero-inner{
  position:relative;
  z-index:2;
}

.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}

/* Dots navigation (Apple TV style) */
.hero-dot-nav{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:3;
}

.hero-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.4);
  opacity:0.7;
  cursor:pointer;
  padding:0;
  transition:background .2s ease, transform .2s ease, opacity .2s ease;
}

.hero-dot.is-active{
  background:#ffffff;
  opacity:1;
  transform:scale(1.25);
}

.hero-dot:focus-visible{
  outline:2px solid rgba(255,255,255,0.8);
  outline-offset:3px;
}

/* 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}

/* Base form styles */
.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 */
.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 animations */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* PRODUCTS section */
#products {
  position: relative;
  color: #fff;
  background: transparent;
  overflow: hidden;

  min-height: 100vh;
  display: flex;
  align-items: center;
}

#products > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

#products .products-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 10vh;
  object-fit: cover;
  z-index: 0;
  filter: saturate(108%) contrast(104%);
}

#products .products-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  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%);
}

#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 */
#about{
  position: relative;
  color:#fff;
  background: transparent;
  overflow:hidden;

  min-height: 100vh;
  display: flex;
  align-items: center;
}
#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/abstractart.png") 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 cards */
.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 override) */
#contact input[type="text"],
#contact input[type="email"],
#contact select,
#contact 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;
}
#contact input::placeholder,
#contact textarea::placeholder { color: rgba(255, 255, 255, 0.7); }
#contact input:focus,
#contact select:focus,
#contact 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 */
#contactForm select:focus {
  box-shadow: 0 0 0 4px var(--highlight-color);
}

/* Founder social links */
#founder .social a {
  color: #ffffff;
  text-decoration: none;
}
#founder .social a:hover {
  color: #00a2ff;
}

/* Stacked card actions (for mobile) */
.card-actions--stacked {
  flex-direction: column;
  align-items: flex-start;
}
.card-actions--stacked .btn {
  width: 100%;
  max-width: 220px;
}
.card-actions--stacked .link,
.card-actions--stacked .action-sub {
  margin-top: 6px;
}

/* Contact form label color override */
#contact .form label span{
  color:#ffffff;
}

/* Lock page scroll when mobile menu is open (if used) */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ===== iPhone / narrow phones ===== */
@media (max-width: 430px) {
  :root{
    --max: 100vw;
    --topbar-h: 80px;
    --btn-size-y: 10px;
    --btn-size-x: 14px;
    --btn-font-size: 13px;
    --lg-radius: 16px;
  }

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

  /* Topbar: same layout, just scaled down to fit width */
  .topbar{
    width: calc(100vw - 16px);
    height: var(--topbar-h);
    margin: max(8px, var(--safe-top)) auto 8px;
    padding: 8px 10px;
    border-radius: 32px;
    margin-left: 0;
    justify-content: space-between;
  }

  .brand{
    gap: 8px;
  }

  .brand-logo{
    height: 52px;
    width: auto;
  }

  .nav{
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .nav a{
    font-size: 11px;
    padding: 4px 6px;
  }

  .nav-toggle{
    display: none;
  }

  /* 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(22px, 7vw, 30px);
  }

  .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;
  }
}