/* ---- Base / Tokens ---- */
:root{
  --bg:#0B1015;
  --bg-2:#0E141B;
  --text:#F5F7FA;
  --muted:rgba(245,247,250,.72);
  --line:rgba(255,255,255,.08);

  /* твои градиенты */
  --g-teal:linear-gradient(135deg,#00AC83 0%,#9BE895 100%);
  --g-cyan:linear-gradient(135deg,#1AA8C7 0%,#00AC83 100%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 100% -20%, rgba(0,172,131,.15), transparent 60%),
    radial-gradient(1000px 600px at -10% 120%, rgba(26,168,199,.17), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #0A0F14 100%);
  line-height:1.6;
}

a{color:inherit;text-decoration:none}

/* ---- Hero ---- */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
  padding:96px min(8vw,120px);
}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.brand__logo{width:32px;height:32px;opacity:.95}
.brand__name{font-weight:700;letter-spacing:.2px;opacity:.9}

.hero__title{
  font-size:clamp(2.2rem,4.6vw,3.6rem);
  line-height:1.12;
  margin:12px 0 12px;
  background:var(--g-cyan);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__subtitle{color:var(--muted);max-width:56ch;margin:0 0 24px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 10px}
.hero__points{margin:18px 0 0; padding:0; list-style:none; color:var(--muted)}
.hero__points li{margin:4px 0}

.btn{
  padding:14px 20px;
  border-radius:14px;
  font-weight:700;
  border:1px solid transparent;
  transition:.18s ease;
}
.btn--primary{
  background:var(--g-teal);
  box-shadow:0 14px 36px rgba(0,172,131,.25);
}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{
  background:transparent;border-color:var(--line)
}
.btn--ghost:hover{border-color:rgba(255,255,255,.35);transform:translateY(-1px)}

.hero__visual{position:relative}
.phone{
  width:min(420px,100%);
  aspect-ratio:9/19.5;
  border-radius:28px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  box-shadow:0 40px 80px rgba(0,0,0,.35);
  overflow:hidden;
  backdrop-filter:saturate(140%) blur(10px);
}
.phone .shot{width:100%;height:100%;object-fit:cover;display:block}

.pill{
  position:absolute;
  padding:18px 20px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  backdrop-filter:blur(12px);
}
.pill--assistant{right:-8px; bottom:16%; width:260px}
.pill--rating{left:-12px; top:12%; display:flex; gap:10px; align-items:center}
.pill__title{font-size:1.02rem}
.pill__meta{color:var(--muted)}
.mic{
  margin-top:14px;
  width:64px;height:64px;border-radius:16px;
  background:var(--g-cyan);
  mask: radial-gradient(circle at 50% 35%, transparent 32px, black 33px) exclude;
}
/* простая «звёздная» заглушка */
.stars{letter-spacing:2px;background:var(--g-teal);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

/* ---- Sections ---- */
.section{
  padding:96px min(8vw,120px);
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.01) 100%);
  border-top:1px solid var(--line);
}
.section__intro{max-width:760px;margin:0 auto 48px;text-align:center}
.section__intro h2{font-size:clamp(1.8rem,3.2vw,2.4rem);margin:0 0 10px}
.section__intro p{color:var(--muted)}

/* Cards / Grid */
.grid{display:grid;gap:22px}
.grid--features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  padding:28px;border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}
.card h3{margin:0 0 8px}

/* Screens */
.section--screens{background:radial-gradient(800px 500px at 10% -10%, rgba(26,168,199,.15), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg))}
.grid--screens{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.screen{
  margin:0;padding:14px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);text-align:center
}
.screen img{width:100%;height:auto;border-radius:12px;display:block;aspect-ratio:9/19.5;object-fit:cover;background:#0F141A}
.screen figcaption{margin-top:8px;color:var(--muted);font-size:.95rem}

/* Steps */
.section--steps{background:radial-gradient(900px 600px at 100% 0%, rgba(0,172,131,.13), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg-2))}
.steps{counter-reset:step;display:grid;gap:18px;list-style:none;margin:0;padding:0}
.steps li{
  display:grid;gap:10px;align-items:start;
  padding:24px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line)
}
.step-number{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-weight:800;background:var(--g-teal)
}

/* Testimonials */
.section--testimonials{background:linear-gradient(180deg, var(--bg-2), var(--bg))}
.grid--testimonials{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.quote{margin:0;padding:28px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line);position:relative}
.quote::before{content:"“";position:absolute;left:14px;top:10px;color:rgba(255,255,255,.08);font-size:3rem}
.quote cite{display:block;margin-top:14px;color:var(--muted);font-style:normal}

/* CTA */
.section--cta{background:
  radial-gradient(1000px 700px at 90% -10%, rgba(0,172,131,.18), transparent 60%),
  radial-gradient(900px 600px at -10% 110%, rgba(26,168,199,.18), transparent 60%),
  linear-gradient(180deg, var(--bg), var(--bg-2));
  padding-bottom:120px;
}
.cta{
  max-width:640px;margin:0 auto;text-align:center;
  padding:48px 36px;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.32)
}
.store-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.store{
  padding:14px 18px;border-radius:14px;font-weight:800;border:1px solid var(--line);min-width:160px;text-align:center
}
.store--apple{background:var(--g-cyan)}
.store--google{background:var(--g-teal)}

/* Footer */
.footer{
  padding:28px min(8vw,120px) 48px;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;
  color:var(--muted);border-top:1px solid var(--line);background:#070A10
}
.footer__links a{margin-left:18px;opacity:.8}
.footer__links a:hover{opacity:1}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr;gap:32px;padding:80px min(6vw,60px)}
  .hero__visual{order:-1;display:grid;justify-items:center}
}
@media (max-width: 560px){
  .hero{padding:64px 5vw}
  .cta{padding:40px 24px}
}