:root{
  color-scheme:light;

  --primary:#0066FF;
  --on-primary:#FFFFFF;

  --primary-container:#D9E2FF;
  --on-primary-container:#001A41;

  --secondary:#6750A4;
  --on-secondary:#FFFFFF;

  --secondary-container:#EADDFF;
  --on-secondary-container:#21005D;

  --surface:#F8F9FF;
  --surface-container-low:#F1F3FA;
  --surface-container:#EBEDF5;
  --surface-container-high:#E1E4EC;

  --on-surface:#191B20;
  --on-surface-variant:#44474F;

  --outline:#74777F;
  --outline-variant:#C4C6D0;

  --star:#FFB300;

  --shape-sm:14px;
  --shape-md:20px;
  --shape-lg:28px;
  --shape-xl:32px;

  --elev-1:
    0 1px 3px rgba(25,27,32,.14),
    0 1px 2px rgba(25,27,32,.08);

  --elev-2:
    0 3px 8px rgba(25,27,32,.16),
    0 1px 3px rgba(25,27,32,.10);
}


/* ---------- Base ---------- */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:'Roboto','Roboto Flex',system-ui,-apple-system,sans-serif;
  background:#FCFCFB;
  color:var(--on-surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
}

h1,
h2,
h3{
  padding:0;
}

h1{
  color:#000;
}


/* ---------- Accessibility ---------- */

.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  z-index:100;
  background:var(--primary);
  color:var(--on-primary);
  padding:10px 16px;
  border-radius:0 0 8px 0;
}

.skip-link:focus{
  left:0;
}

a:focus-visible,
button:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:2px;
  border-radius:4px;
}


/* ---------- Main wrapper ---------- */

.wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}


/* ---------- Top App Bar ---------- */

header{
  position:sticky;
  top:0;
  z-index:20;

  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);

  background:rgba(248,249,255,.92);
  border-bottom:1px solid var(--outline-variant);
}

.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;

  text-decoration:none;
  font-weight:700;
  font-size:18px;
}

.brand-mark{
  width:36px;
  height:36px;

  border-radius:var(--shape-sm);

  background:var(--primary);
  color:var(--on-primary);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:16px;
  font-weight:700;
}


/* ---------- Navigation ---------- */

nav.links{
  display:flex;
  align-items:center;
  gap:4px;
}

nav.links a{
  font-size:14px;
  font-weight:500;
  text-decoration:none;

  color:var(--on-surface-variant);

  padding:9px 14px;
  border-radius:100px;

  transition:
    background .15s ease,
    color .15s ease;
}

nav.links a:hover{
  background:var(--surface-container-high);
  color:var(--on-surface);
}

.nav-cta{
  background:var(--primary);
  color:var(--on-primary) !important;
  padding:10px 18px !important;
}

.nav-cta:hover{
  background:var(--primary) !important;
  filter:brightness(1.08);
}


/* ---------- Mobile menu ---------- */

#menuBtn{
  display:none;

  width:44px;
  height:44px;

  border:0;
  border-radius:50%;

  background:transparent;

  cursor:pointer;

  flex-direction:column;
  justify-content:center;
  align-items:center;

  gap:4px;
}

#menuBtn span{
  width:20px;
  height:2px;

  background:var(--on-surface);
  border-radius:2px;
}

#menuBtn:hover{
  background:var(--surface-container-high);
}


/* ---------- Hero ---------- */

.hero{
  padding:56px 0 24px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;

  gap:40px;
  align-items:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  background:var(--secondary-container);
  color:var(--secondary);

  font-size:13px;
  font-weight:600;

  padding:6px 14px;
  border-radius:100px;

  margin-bottom:18px;
}

h1{
  font-family:'Roboto Flex','Roboto',sans-serif;

  font-variation-settings:
    'opsz' 40,
    'wght' 700;

  font-weight:700;

  font-size:clamp(32px,4.6vw,48px);
  line-height:1.1;

  letter-spacing:-.01em;

  margin:0 0 18px;
}

h1 .accent{
  color:var(--primary);

  background:linear-gradient(
    90deg,
    #0066FF,
    #6750A4
  );

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;
}

.lede{
  max-width:520px;

  margin:0 0 30px;

  font-size:18px;
  line-height:1.6;

  color:var(--on-surface-variant);
}


/* ---------- CTA ---------- */

.cta-row{
  display:flex;
  flex-wrap:wrap;

  align-items:center;

  gap:14px;
}

.btn-filled{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  background:var(--primary);
  color:var(--on-primary);

  font-size:20px;
  font-weight:600;

  text-decoration:none;

  padding:15px 28px;

  border-radius:100px;

  box-shadow:var(--elev-1);

  transition:
    box-shadow .18s ease,
    transform .18s ease,
    filter .18s ease;
}

.btn-filled:hover{
  box-shadow:var(--elev-2);
  transform:translateY(-1px);
  filter:brightness(1.06);
}

.btn-tonal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  background:var(--secondary-container);
  color:var(--secondary);

  font-size:18px;
  font-weight:600;

  text-decoration:none;

  padding:15px 26px;

  border-radius:100px;

  transition:filter .18s ease;
}

.btn-tonal:hover{
  filter:brightness(.97);
}


/* ---------- Hero statistics ---------- */

.stat-row{
  display:flex;

  align-items:center;

  gap:28px;

  margin-top:34px;

  flex-wrap:wrap;
}

.stat{
  min-width:100px;
  min-height:52px;

  display:flex;
  flex-direction:column;

  justify-content:center;
}

.stat b{
  display:block;

  font-family:'Roboto Flex','Roboto',sans-serif;

  font-variation-settings:'wght' 700;

  font-size:24px;

  line-height:28px;

  color:var(--on-surface);
}

.stat span{
  display:block;

  font-size:13.5px;

  line-height:20px;

  color:var(--on-surface-variant);
}

.stat-row > .btn-tonal{
  min-height:40px;

  height:auto;

  padding:10px 15px;

  margin:0;

  line-height:20px;

  white-space:nowrap;
}


/* ---------- Phone mockup ---------- */

.phone-col{
  display:flex;
  justify-content:center;
  align-items:center;
}

.phone{
  position:relative;

  width:min(380px,74vw);

  height:auto;
}


/* ---------- Sections ---------- */

section{
  padding:64px 0;
}

.section-head{
  max-width:800px;

  margin:0 auto 40px;

  text-align:center;
}

.section-head .eyebrow{
  margin-bottom:14px;
}

h2{
  font-family:'Roboto Flex','Roboto',sans-serif;

  font-variation-settings:
    'opsz' 32,
    'wght' 600;

  font-size:clamp(26px,3.2vw,34px);

  line-height:1.2;

  margin:0 0 12px;
}

.section-sub{
  color:var(--on-surface-variant);

  font-size:16px;
  line-height:1.6;
}


/* ---------- Feature grid ---------- */

.grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:20px;
}

.card{
  background:var(--surface-container-low);

  border-radius:var(--shape-lg);

  padding:26px 24px;

  text-align:left;

  box-shadow:var(--elev-1);
}

.card-icon{
  width:44px;
  height:44px;

  border-radius:var(--shape-sm);

  background:var(--primary-container);
  color:var(--on-primary-container);

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:16px;
}

.card h3{
  font-size:17px;

  line-height:1.3;

  margin:0 0 8px;

  font-weight:600;
}

.card p{
  font-size:14.5px;

  line-height:1.55;

  color:var(--on-surface-variant);

  margin:0;
}


/* ---------- Category chips ---------- */

.chip-row{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  justify-content:center;
}

.chip{
  background:var(--surface-container);

  color:var(--on-surface-variant);

  font-size:15px;
  font-weight:500;

  padding:9px 16px;

  border-radius:100px;

  border:1px solid var(--outline-variant);
}


/* ---------- Download band ---------- */

.download-band{
  background:var(--primary);

  color:var(--on-primary);

  border-radius:var(--shape-xl);

  padding:52px 40px;

  display:grid;

  grid-template-columns:1.2fr .8fr;

  gap:32px;

  align-items:center;
}

.download-band h2{
  color:var(--on-primary);
}

.download-band .section-sub{
  color:rgba(255,255,255,.82);
}

.download-band .btn-filled{
  background:var(--surface);
  color:var(--primary);
}

.qr-shot{
  width:min(280px,80vw);

  border-radius:var(--shape-lg);

  box-shadow:var(--elev-2);

  justify-self:center;

  background:var(--surface);

  padding:10px;
}


/* ---------- Add to Home ---------- */

.addhome-grid{
  display:grid;

  grid-template-columns:1fr .8fr;

  gap:36px;

  align-items:center;
}

.addhome-copy{
  text-align:left;
}

.addhome-shot{
  width:100%;
  max-width:320px;

  margin:0 auto;

  border-radius:var(--shape-lg);

  box-shadow:var(--elev-2);
}

.note-chip{
  display:inline-flex;

  align-items:center;

  gap:8px;

  background:rgba(255,255,255,.16);

  font-size:13px;

  padding:7px 14px;

  border-radius:100px;

  margin-top:18px;
}


/* ---------- Footer ---------- */

footer{
  border-top:1px solid var(--outline-variant);

  padding:28px 0;
}

.foot-row{
  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  gap:22px;
}

.foot-row a{
  font-size:13.5px;

  color:var(--on-surface-variant);

  text-decoration:none;
}

.foot-row a:hover{
  color:var(--primary);

  text-decoration:underline;
}


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


/* ---------- Large tablet / small desktop ---------- */

@media (max-width:1024px){

  .wrap{
    padding:0 20px;
  }

  .hero-grid{
    gap:28px;
  }

  .grid{
    grid-template-columns:repeat(2,1fr);

    gap:16px;
  }

  .download-band{
    padding:44px 32px;

    gap:24px;
  }
}


/* ---------- Tablet ---------- */

@media (max-width:860px){

  .hero{
    padding-top:44px;
  }

  .hero-grid{
    grid-template-columns:1fr;

    gap:36px;

    text-align:center;
  }

  .lede{
    margin-left:auto;
    margin-right:auto;
  }

  .cta-row{
    justify-content:center;
  }

  .stat-row{
    justify-content:center;
  }

  .phone-col{
    order:2;
  }

  .phone{
    width:min(360px,70vw);

    margin:0 auto;
  }

  .download-band{
    grid-template-columns:1fr;

    text-align:center;
  }

  .download-band .cta-row{
    justify-content:center;
  }

  .addhome-grid{
    grid-template-columns:1fr;

    text-align:center;
  }

  .addhome-copy{
    text-align:center;
  }

  .addhome-shot{
    margin:0 auto;
  }
}


/* ---------- Mobile ---------- */

@media (max-width:640px){

  .wrap{
    padding:0 16px;
  }

  header{
    background:rgba(248,249,255,.97);
  }

  .bar{
    padding:10px 0;
  }

  #menuBtn{
    display:flex;
  }

  nav.links{
    display:none;

    position:absolute;

    left:0;
    right:0;
    top:100%;

    flex-direction:column;

    align-items:stretch;

    gap:2px;

    background:var(--surface);

    padding:10px 16px 16px;

    box-shadow:var(--elev-2);

    border-radius:
      0 0
      var(--shape-md)
      var(--shape-md);
  }

  nav.links.open{
    display:flex;
  }

  nav.links a{
    text-align:left;

    padding:12px 14px;
  }

  .hero{
    padding:36px 0 20px;
  }

  h1{
    font-size:clamp(30px,9vw,40px);

    line-height:1.12;
  }

  .lede{
    font-size:16px;

    line-height:1.55;

    margin-bottom:24px;
  }

  .cta-row{
    width:100%;

    flex-direction:column;

    align-items:stretch;
  }

  .btn-filled,
  .btn-tonal{
    width:100%;

    justify-content:center;
  }

  .stat-row{
    width:100%;

    gap:16px;

    justify-content:center;

    align-items:center;
  }

  .stat{
    min-width:90px;

    min-height:52px;

    text-align:center;
  }

  .stat-row > .btn-tonal{
    width:auto;

    min-height:40px;
  }

  section{
    padding:48px 0;
  }

  .section-head{
    margin-bottom:28px;
  }

  .grid{
    grid-template-columns:1fr;

    gap:16px;
  }

  .card{
    padding:22px 20px;
  }

  .download-band{
    padding:36px 22px;

    border-radius:var(--shape-lg);
  }

  .qr-shot{
    width:min(260px,80vw);
  }

  .addhome-grid{
    gap:28px;
  }

  .phone{
    width:min(320px,82vw);
  }

  .chip-row{
    gap:8px;
  }

  .chip{
    font-size:14px;

    padding:8px 13px;
  }
}


/* ---------- Small phones ---------- */

@media (max-width:400px){

  .brand{
    font-size:16px;
  }

  .brand-mark{
    width:34px;
    height:34px;
  }

  h1{
    font-size:30px;
  }

  .stat-row{
    gap:12px;
  }

  .stat{
    min-width:82px;
  }

  .stat b{
    font-size:22px;
  }

  .stat span{
    font-size:12.5px;
  }

  .stat-row > .btn-tonal{
    width:100%;
  }
}