:root{
  color-scheme: light dark;
  --primary:#0ea5e9;
  --primary-dark:#0284c7;
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#475569;
  --surface:#f8fafc;
  --border:#e2e8f0;
  --shadow:0 14px 30px rgba(15,23,42,.08);
  --radius:16px;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);line-height:1.6}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block;border-radius:var(--radius)}

.muted{color:var(--muted)}
.center{text-align:center}

/* HERO */
.hero{
  display:grid;gap:2.5rem;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  padding:5rem min(12vw,6rem);
  background:linear-gradient(135deg, rgba(14,165,233,.08), rgba(2,132,199,.08));
}
.hero__badge{
  display:inline-block;padding:.35rem .75rem;border-radius:999px;
  background:rgba(14,165,233,.12);color:var(--primary);font-weight:600;font-size:.9rem
}
.hero h1{margin:.75rem 0 0;font-size:clamp(2.2rem,6vw,3rem);line-height:1.15}
.hero__lead{margin:1rem 0 1.75rem;color:var(--muted)}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem}
.hero__media{position:relative;display:flex;justify-content:center}
.hero__media img{
  width:100%;
  height:auto;
  max-width:520px;       /* щоб не роздувалось на планшетах */
  aspect-ratio:1/1;
}
.hero__media::after{
  content:'';
  position:absolute;inset:1.6rem;border-radius:var(--radius);
  background:rgba(14,165,233,.12);z-index:-1
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.5rem;border-radius:999px;font-weight:700;border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--primary{background:var(--primary);color:#fff;box-shadow:var(--shadow)}
.btn--primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--primary);border-color:rgba(14,165,233,.4)}

/* SECTIONS */
.section{padding:4.5rem min(12vw,6rem)}
.section--alt{background:var(--surface)}
.section__intro{max-width:760px;margin:0 auto 2rem;text-align:center}
.section__intro h2{margin:.25rem 0;font-size:clamp(1.8rem,5vw,2.3rem)}

.grid{display:grid;gap:1.5rem}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* cards */
.card{
  padding:1.5rem;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow)
}
.card h3{margin:0 0 .5rem}

/* TIMELINE */
.timeline{display:grid;gap:1.2rem;list-style:none;padding:0;margin:0}
.timeline__item{display:grid;gap:.9rem;grid-template-columns:auto 1fr;align-items:start}
.timeline__step{
  width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)
}
.timeline__content{
  padding:1.1rem;border-radius:var(--radius);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)
}
.timeline__content h3{margin:.1rem 0 .4rem}

/* FOOTER */
.footer{
  padding:3.5rem min(12vw,6rem);background:#0f172a;color:rgba(255,255,255,.95);
  display:grid;gap:1.5rem
}
.footer__content{display:grid;gap:1rem}
.footer__note{color:rgba(255,255,255,.75);margin:.2rem 0 0}
.footer__nav{display:flex;gap:1rem;flex-wrap:wrap}
.footer__nav a{color:rgba(255,255,255,.85)}
.footer__nav a:hover{color:#fff}
.footer__copyright{color:rgba(255,255,255,.65);margin:0}

/* ===== Mobile tweaks ===== */
@media (max-width:640px){
  .hero{padding:3rem 1rem;gap:1.75rem}
  .hero h1{font-size:clamp(1.7rem,7vw,2.1rem)}
  .hero__lead{font-size:1rem}
  .hero__actions{gap:.75rem}
  .btn{padding:.8rem 1.2rem}

  /* ключові правки для картинки на телефоні */
  .hero__media::after{display:none}             /* прибираємо декоративний інсет */
  .hero__media img{
    max-width:320px;                             /* не більше ширини контенту */
    max-height:42vh;                             /* не займає весь екран по висоті */
    object-fit:contain;                          /* без обрізання */
    margin:0 auto;
  }

  .section{padding:3.25rem 1rem}
  .timeline__item{grid-template-columns:1fr}
  .timeline__step{margin-bottom:.4rem}
}
@media (min-width:641px) and (max-width:980px){
  .hero__media img{max-width:420px}
}