@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=Poppins:wght@600;800&display=swap');

:root{
  --ink:#0f172a;          /* charcoal */
  --bg:#f6fafc;           /* off-white */
  --panel:#ffffff;
  --teal:#0ea5e9;         /* teal */
  --maple:#dc2626;        /* maple red */
  --mint:#10b981;         /* mint */
  --slate:#64748b;        /* muted */
  --shadow: 0 24px 70px rgba(2,6,23,.15);
  --radius: 20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 500px at 80% -10%, rgba(14,165,233,.08), transparent), var(--bg); color:var(--ink)}
body{font-family:Manrope, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px;margin:0 auto;padding:24px}

.header{position:relative;background:linear-gradient(180deg,#ffffff 0%, #f1f9ff 100%);border-bottom:1px solid #e5e7eb}
.topnav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:46px;height:46px;border-radius:14px;background:conic-gradient(from 30deg, var(--teal), var(--maple), var(--mint), var(--teal)); box-shadow: 0 10px 30px rgba(14,165,233,.35)}
.brandname{font-family:Poppins, Manrope; font-weight:800; letter-spacing:.3px}

.navlinks{display:flex;gap:14px;align-items:center}
.navlinks a{font-weight:600;color:#0b2742}
.navcta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--teal),var(--maple));color:#fff;padding:10px 14px;border-radius:999px;font-weight:800;box-shadow:0 10px 26px rgba(14,165,233,.25)}

.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center;padding:20px 0}
.hero .headline{font-family:Poppins, Manrope; font-size:clamp(30px,4.6vw,56px); line-height:1.02; margin:10px 0;color:#071327}
.kicker{font-weight:800;letter-spacing:1px;color:#0a3960;text-transform:uppercase;font-size:12px}
.sub{font-size:18px;color:#334155}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;border:0;cursor:pointer;font-weight:900}
.btn.primary{background:linear-gradient(135deg,var(--teal),var(--maple));color:#fff;box-shadow:0 14px 32px rgba(220,38,38,.2)}
.btn.ghost{background:#fff;border:1px solid #e5e7eb;color:#0b2742}
.pricechip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg, rgba(14,165,233,.12), rgba(220,38,38,.12));border:1px solid rgba(14,165,233,.2);font-weight:800;color:#0a3960}

.hero-visual{position:relative}
.hero-visual img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.gradient-ring{position:absolute;inset:auto -20px -20px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(14,165,233,.18), transparent 60%), radial-gradient(circle at 70% 70%, rgba(220,38,38,.18), transparent 60%);filter:blur(18px)}

.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0}
.strip .tile{background:var(--panel);padding:14px;border-radius:16px;border:1px solid #e5e7eb;display:flex;gap:10px;align-items:center;box-shadow:0 10px 24px rgba(2,6,23,.06)}
.icon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--teal),var(--maple))}
.tile b{display:block}

.section{margin:44px 0}
.panel{background:var(--panel);border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}

.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--teal),var(--maple))}
.step{position:relative;margin:0 0 18px 0}
.step::before{content:"";position:absolute;left:-14px;top:7px;width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,var(--teal),var(--maple));box-shadow:0 0 0 6px rgba(14,165,233,.12)}

.syllabus{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.syllabus img{width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow)}

.checkout{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:start}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 12px 28px rgba(2,6,23,.08)}
.card.pad{padding:22px}
.form{display:grid;gap:12px}
.input, select, textarea{padding:14px 16px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;outline:none}
.input:focus, select:focus, textarea:focus{border-color:#0ea5e9;box-shadow:0 0 0 4px rgba(14,165,233,.15)}
.notice{font-size:12px;color:#64748b}

.faq{display:grid;gap:12px}
.faq .q{cursor:pointer;padding:14px;border-radius:12px;background:#fff;border:1px solid #e5e7eb}
.faq .a{display:none;padding:12px 14px;color:#334155}

.footer{margin-top:40px;background:#0b1220;color:#e2e8f0;border-radius:18px;padding:24px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:24px}
.footer a{color:#93c5fd}
.small{font-size:13px;color:#9fb1c7}

.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;background:#0b1220;color:#e2e8f0;border:1px solid rgba(148,163,184,.3);border-radius:16px;padding:16px;box-shadow:0 20px 50px rgba(2,6,23,.5);display:none;z-index:99999}
.cookie-actions{display:flex;gap:10px;margin-top:12px}
.cookie-btn{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#111827;color:#fff;cursor:pointer}
.cookie-btn.primary{background:linear-gradient(135deg,var(--teal),var(--maple));border:0}
.modal{position:fixed;inset:0;background:rgba(2,6,23,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:999999}
.modal .dialog{max-width:900px;width:100%;max-height:80vh;overflow:auto;background:#fff;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 30px 60px rgba(2,6,23,.25);padding:20px}
.close-x{background:transparent;border:0;font-size:28px;line-height:1;cursor:pointer;color:#334155}

/* Mobile nav & feature fixes */
.menu-toggle{
  display:none; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px;
  border:1px solid #e5e7eb; background:#fff;
  font-weight:800; cursor:pointer;
}
.menu-toggle:active{transform:translateY(1px)}

@media (max-width: 900px){
  .brandname{font-size:18px}
}

@media (max-width: 768px){
  .topnav{position:relative}
  .menu-toggle{display:inline-flex}

  .navlinks{
    position:absolute; left:16px; right:16px; top:60px;
    display:none; flex-direction:column; gap:10px; padding:12px;
    background:#ffffff; border:1px solid #e5e7eb; border-radius:14px;
    box-shadow:0 20px 40px rgba(2,6,23,.15); z-index:50;
  }
  .navlinks.open{display:flex}
  .navcta{justify-content:center}

  .hero .actions{gap:10px}
  .btn{width:100%}
  .btn.ghost{background:#fff}

  .strip{grid-template-columns:1fr; gap:12px}
  .strip .tile{align-items:flex-start}
  .tile .small{display:block; margin-top:2px; word-break:break-word; overflow-wrap:anywhere}

  .syllabus{grid-template-columns:1fr}
  .checkout{grid-template-columns:1fr}
  #orderForm{width:100%}

  .container{padding:16px}
}

@media (max-width: 380px){
  .brandname{font-size:16px}
}

/* basic image safety */
img{max-width:100%;height:auto;display:block}


/* --- EXTRA MOBILE FIXES (v2-final) --- */
@media (max-width: 768px){
  /* Force hero stack and consistent spacing */
  .hero{display:flex;flex-direction:column;gap:16px}
  .hero-visual{order:3}
  .hero-visual img{width:100%;height:auto;border-radius:20px}
  .hero .headline{margin:6px 0}
  .hero .actions .btn{min-width:0}

  /* Navigation: hide links until toggled */
  .navlinks{display:none !important}
  .navlinks.open{display:flex !important}

  /* Features strip as single column, avoid overflow */
  .strip{grid-template-columns:1fr;gap:12px;margin:22px 0}
  .strip .tile{width:100%;align-items:flex-start;box-shadow:0 8px 18px rgba(2,6,23,.06)}

  /* Syllabus: image below text */
  .syllabus{grid-template-columns:1fr !important;gap:16px}
  .syllabus img{margin-top:6px}

  /* Coach panel: single column, safe image sizing */
  .panel{overflow:hidden}
  .panel img{max-width:100%;height:auto;display:block}

  /* Checkout single column, form full width */
  .checkout{grid-template-columns:1fr !important}
  #orderForm,.checkout .card{width:100%}

  .container{padding:16px}
}

/* Footer clean style on dark bg */
.footer .faq .q,
.footer .faq .a{
  background:transparent !important;
  border:0 !important;
  padding:8px 0 !important;
  color:#e2e8f0 !important;
}
.footer .faq .q{cursor:default}
.footer a{color:#93c5fd !important}
.footer .faq .a{display:none !important} /* collapse descriptions in footer */

/* --- Coach portrait mobile fix --- */
@media (max-width: 768px){
  .panel{display:block !important}
  .panel img{
    display:block;
    max-width:100%;
    height:auto;
    margin:0 auto 16px auto;
    border-radius:16px;
  }
}

/* --- Footer bottom radius fix --- */
@media (max-width: 768px){
  .footer{
    border-radius:18px 18px 0 0; /* только верхние углы */
  }
}