/* ===============  Design tokens  =============== */
:root{
  /* Accent palette (kept close to your original) */
  --primary:#2797ff;
  --primary-600:#0b67bc;

  /* Neutral surfaces (clean + modern) */
  --bg:#f7f9fc;              /* page background (very soft, not pure white) */
  --surface:#ffffff;         /* cards / header / footer */
  --surface-alt:#eef2f6;     /* subtle separators */

  /* Text */
  --text:#161c24;
  --text-dim:#556170;

  /* Borders & shadows */
  --line:#e3e9f0;
  --shadow:0 8px 30px rgba(2,13,29,0.06);

  /* Radii & spacing */
  --r-sm:10px;
  --r-lg:18px;
  --sp-1:8px;
  --sp-2:12px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-6:36px;
  --sp-8:56px;
}

/* ===============  Base  =============== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* ===============  Layout  =============== */
.container{
  width:min(1120px, calc(100% - 2rem));
  margin-inline:auto;
}

.site-header{
  position:sticky; top:0; z-index:10;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(8px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

.brand-text{color:var(--text)}

.header-cta .btn-ghost{
  padding:.6rem .9rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  transition:all .2s ease;
  color:var(--text-dim);
}
.header-cta .btn-ghost:hover{
  border-color:var(--primary);
  color:var(--primary);
}

/* ===============  Hero  =============== */
.hero{
  position:relative;
  padding-block: clamp(56px, 8vw, 96px);
}
.hero-grid{
  display:grid; gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
}

.hero-copy{
  display:flex; flex-direction:column; gap: clamp(14px, 2.5vw, 18px);
}
.hero-title{
  margin:0;
  font-size: clamp(28px, 5vw, 46px);
  line-height:1.1;
  letter-spacing:-.02em;
}
.hero-subtitle{
  margin:0;
  color:var(--text-dim);
  font-size: clamp(16px, 2.2vw, 18px);
}

.store-row{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  margin-top:10px;
}
.store-badge img{
  height:54px;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.08));
  transition: transform .12s ease;
}
.store-badge:hover img{ transform: translateY(-2px) }

.doc-inline{ margin-top: 10px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:12px; font-weight:600;
}
.btn-doc{
  padding:.7rem 1rem;
  background:linear-gradient(135deg, var(--primary), var(--primary-600));
  color:#fff; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn-doc:hover{ transform: translateY(-1px); box-shadow:0 10px 34px rgba(2,13,29,0.10) }

/* Decorative hero surface (pure CSS, no images) */
.hero-surface{
  position:relative;
  min-height:280px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
}
@media (max-width:980px){
  .hero-surface{min-height:220px}
}
.glow{
  position:absolute; border-radius:999px; filter: blur(40px);
  opacity:.55; transform: translate(-50%, -50%);
}
.glow.a{ width:360px; height:360px; left:18%; top:30%; background: rgba(39,151,255,.45) }
.glow.b{ width:300px; height:300px; left:68%; top:18%; background: rgba(11,103,188,.35) }
.glow.c{ width:240px; height:240px; left:78%; top:70%; background: rgba(39,151,255,.25) }

/* ===============  Highlights  =============== */
.highlights{
  padding-block: clamp(38px, 6vw, 72px);
  border-top:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0)) ;
}
.highlights-inner{ }
.ticklist{
  list-style:none; display:grid; gap:18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  padding:0; margin:0;
}
@media (max-width:820px){
  .ticklist{ grid-template-columns:1fr }
}
.ticklist li{
  display:grid; grid-template-columns: 28px 1fr; gap:12px;
  padding:16px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface);
}
.tick{
  width:28px; height:28px; border-radius:8px;
  display:inline-grid; place-items:center; font-weight:700;
  color:#fff; background:linear-gradient(135deg, var(--primary), var(--primary-600));
}
.ticklist h3{
  margin:0 0 4px 0; font-size:16px; line-height:1.25;
}
.ticklist p{
  margin:0; color:var(--text-dim); font-size:14.5px;
}

/* ===============  Footer  =============== */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--surface);
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-block:18px;
  flex-wrap:wrap;
}
.footer-links{ display:flex; gap:16px; font-size:14.5px }
.footer-links a{ color:var(--text-dim) }
.footer-links a:hover{ color:var(--primary) }