:root{
  --bg:#0a0f14; --bg-2:#0e141a; --fg:#eaf1f8; --muted:#a7b4c3;
  --primary:#0ea5e9; --glass:rgba(255,255,255,.08); --glass-strong:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.15); --shadow:0 8px 30px rgba(0,0,0,.35);
  --container-max:1200px; --gutter:40px; --chip-bob:6px;
  color-scheme: dark light;
}
@media (min-width:1440px){ :root{ --container-max:1280px; --gutter:56px; } }

*{box-sizing:border-box}
html,body{ margin:0; padding:0; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
  /* Add these two lines */
  display: flex;
  flex-direction: column;

  /* Make sure body is at least as tall as the viewport */
  min-height: 100vh;

  /* Your existing body styles below... */
  background:
    radial-gradient(1200px 800px at 70% -10%, #7dd3fc22 0, transparent 60%),
    radial-gradient(1000px 600px at -10% 20%, #34d39922 0, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--fg);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

main {
  /* This makes the main element grow to fill the empty space */
  flex-grow: 1;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:8px 12px; background:#000; color:#fff; border-radius:8px}

.container{ width:min(var(--container-max),92vw); margin:0 auto }
.section{ padding:96px 0 } .section.thin{ padding:56px 0 }
.muted{ color:var(--muted) }

/* ---------------- HERO ---------------- */
.hero{ position:relative; padding:clamp(56px,7vw,100px) 0 clamp(40px,5vw,72px); }
.gradient-bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(600px 300px at 70% 10%, #a7f3d022, transparent 60%),
    radial-gradient(500px 240px at 30% 0%, #93c5fd28, transparent 60%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--gutter); align-items:center;
}
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:28px } }

/* Left copy */
.hero-copy h1{ font-size:clamp(2.2rem,4.2vw,3.6rem); line-height:1.1; margin:0 0 12px; letter-spacing:.2px; }
.lead{ color:#e8eef6; opacity:.95; max-width:60ch; font-size:clamp(1rem,1.2vw,1.125rem); margin-bottom:18px; }

.hero-logo{ width:min(210px,55vw); height:auto; display:block; }
.mb-20{ margin-bottom:20px }

.store-row{ display:flex; align-items:center; gap:16px; margin:18px 0 0; }
.store-row--bottom-gap{ margin-bottom: 26px; }
.store-badge img{ width:180px; height:auto; display:block; }

.hero-points{ margin:22px 0 0; padding-left:18px }
.hero-points li{ margin:10px 0 }

/* Right visual */
.hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center }

/* Phone image (no glass, no crop) */
.device-frame{ position:relative; z-index:1; margin-top:48px; padding:0; border:none; border-radius:28px; overflow:hidden;
  max-width:min(520px,86vw); }
@media (min-width:1200px){ .device-frame{ margin-top:28px } }
@media (min-width:1600px){ .device-frame{ margin-top:8px } }
.device-frame img{ display:inline; width:70%; height:auto; object-fit:contain; border-radius:28px; }

/* Glassy chips */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid var(--border); backdrop-filter: blur(18px) saturate(160%);
  box-shadow:var(--shadow); border-radius:14px;
}
.float-chip{ position:absolute; z-index:3; padding:10px 14px; font-size:.95rem; color:var(--fg); white-space:nowrap; }
.chip-top-right{ top:clamp(-22px,-2.5vw,-10px); right:clamp(0px,1vw,12px); }
.chip-mid-left{ top:clamp(36px,5vw,64px); left:clamp(0px,1vw,12px); }

/* ---------- MOBILE OPTIMIZATION (stacked, centered) ---------- */
@media (max-width:980px){
  .hero-copy{ text-align:center; }
  .lead{ margin-left:auto; margin-right:auto; }
  .store-row{ justify-content:center; }
  .hero-points{ text-align:left; display:inline-block; margin-left:auto; margin-right:auto; }

  /* Make the chips become inline badges above the phone (no overlap) */
  .float-chip{ position:static; display:inline-block; margin:6px 6px 0; }
  .chip-top-right, .chip-mid-left{ top:auto; right:auto; left:auto; }

  /* A small row for chips */
  .hero-visual{ align-items:center; }
  .device-frame{ margin-top:18px; max-width:70vw; }    /* smaller phone */
  .store-badge img{ width:172px; }
}
@media (max-width:560px){
  .hero-copy h1{ font-size: clamp(1.9rem, 7.2vw, 2.4rem); }
  .store-badge img{ width:164px; }
  .device-frame{ max-width:64vw; }
  .float-chip{ font-size:.9rem; padding:8px 12px; }
}
@media (max-width:420px){
  .device-frame{ max-width:60vw; }
  .float-chip{ font-size:.86rem; padding:7px 10px; }
}

/* Animations */
@keyframes float-bob{0%{transform:translateY(0)}50%{transform:translateY(calc(var(--chip-bob)*-1))}100%{transform:translateY(0)}}
@keyframes fade-slide-in{from{opacity:0; transform:translateY(10px) scale(.98)}to{opacity:1; transform:translateY(0) scale(1)}}
.float-enter{ opacity:0; transform:translateY(10px) scale(.98) }
.float-in{ animation: fade-slide-in .45s ease-out both, float-bob 4.6s ease-in-out .45s infinite; }
@media (prefers-reduced-motion:reduce){ .float-in{animation:none} .float-enter{opacity:1; transform:none} }

/* Trust row & footer (unchanged) */
.trust-row{ display:flex; align-items:center; gap:16px; margin-top:22px }
.dots{ display:inline-flex; gap:6px } .dots span{ width:6px; height:6px; border-radius:50%; background:var(--glass-strong) }
.site-footer{ padding:40px 0 68px }
.footer-grid{ display:flex; justify-content:space-between; gap:24px; align-items:center; flex-wrap:wrap }
.footer-links{ display:flex; gap:18px; flex-wrap:wrap }
.footer-brand{ display:flex; align-items:center; gap:12px }
.footer-brand img{ display:block; height:auto }

/* Decorative */
.bg-orb,.bg-rings{ position:fixed; inset:0; pointer-events:none; z-index:0 }
.orb-a{ background: radial-gradient(420px 240px at 10% 20%, #60a5fa22, transparent 65%) }
.orb-b{ background: radial-gradient(420px 240px at 90% 0%, #34d39922, transparent 65%) }
.bg-rings span{ position:absolute; border:1px dashed rgba(255,255,255,.06); border-radius:50% }
.bg-rings span:nth-child(1){ width:600px; height:600px; top:20%; left:10% }
.bg-rings span:nth-child(2){ width:420px; height:420px; top:10%; right:8% }
.bg-rings span:nth-child(3){ width:520px; height:520px; bottom:12%; left:24% }

/* Gradient text */
.gradient-text{
  background: linear-gradient(90deg, #eaf1f8 0%, #bfe2ff 40%, #9ad7ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

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


/* === LOGO SIZE FIX (mobile & tablets) =============================== */
/* Default: keep it compact across the board */
.hero-logo{
  width: clamp(120px, 18vw, 200px); /* phones/tablets stay small, desktop caps at 200px */
  height: auto;
}

/* Tablet: a touch larger than phones, still restrained */
@media (min-width: 768px) and (max-width: 1024px){
  .hero-logo{ width: clamp(140px, 16vw, 190px); }
}

/* Small phones: tiniest treatment */
@media (max-width: 420px){
  .hero-logo{ width: clamp(110px, 32vw, 160px); }
}

/* Big desktop/ultrawide: allow a bit more if you want */
@media (min-width: 1280px){
  .hero-logo{ width: 210px; } /* bump to 210 (or 220) on large screens */
}

/* Slight spacing nudge so the headline doesn't crowd the logo */
.hero-copy h1{ margin-top: 6px; }

@media (min-width: 768px) and (max-width: 1366px){
  .hero-logo{ width: clamp(140px, 12vw, 180px); }
}


/* ======= FULL CENTER ON MOBILE + iPad (≤ 1024px) ======= */
@media (max-width: 1024px){
  /* Center the whole hero block */
  .hero-grid{
    grid-template-columns: 1fr !important;
    justify-items: center;            /* centers children in the grid */
    text-align: center;               /* centers text by default */
    gap: 28px !important;
  }

  .hero-copy{ width: 100%; }

  /* Logo + headline rhythm */
  .hero-logo{ margin-left:auto; margin-right:auto; }
  .hero-copy h1{ margin-top: 8px; }

  /* Lead */
  .lead{ margin-left:auto; margin-right:auto; max-width: 34rem; }

  /* App Store badge */
  .store-row{ justify-content:center !important; }
  .store-badge img{ width: 168px !important; }

  /* Bulleted list centered (with bullets kept clean) */
  .hero-points{
    margin: 22px auto 0 !important;
    padding-left: 0 !important;
    list-style-position: inside;      /* keeps bullets aligned when centered */
    text-align: center !important;    /* ← center the lines too */
    max-width: 36rem;                 /* readable line-length */
  }
  .hero-points li{ margin: 10px 0; }

  /* Chips become stacked badges centered above the phone */
  .hero-visual{ width: 100%; display:flex; flex-direction:column; align-items:center; }
  .float-chip{
    position: static !important;
    display: inline-block;
    margin: 8px 6px 0;
  }
  /* If you prefer them on one line, uncomment:
     .float-chip{ display:inline-block; }
     .hero-visual{ text-align:center; } */

  /* Phone size & centering */
  .device-frame{
    margin-top: 16px !important;
    max-width: 62vw !important;       /* iPad/phones smaller */
  }
}

@media (max-width: 560px){
  .store-badge img{ width: 160px !important; }
  .device-frame{ max-width: 58vw !important; }
}

@media (max-width: 420px){
  .hero-logo{ width: clamp(110px, 28vw, 150px) !important; }
  .float-chip{ font-size: .88rem; padding: 7px 10px; }
  .device-frame{ max-width: 56vw !important; }
}

/* ======= FOOTER CENTERING ON MOBILE (≤ 768px) ======= */
@media (max-width: 768px) {
  .footer-grid {
    flex-direction: column; /* Stack the brand and links vertically */
    align-items: center;    /* Center the stacked items */
    gap: 20px;              /* Add some space between the sections */
  }

  .footer-brand {
    flex-direction: column; /* Also stack the logo and copyright text */
    align-items: center;
    text-align: center;     /* Ensure copyright text is centered */
    gap: 10px;
  }

  .trust-row {
       flex-direction: column; 
          align-items: center;  
  }
}