/* ==========================================================================
   АМСУ. Обучение — главная страница (MVP1)
   Подключается ПОСЛЕ app.css (токены и шрифты берутся оттуда).
   ========================================================================== */

.land{background:var(--bg); color:var(--ink)}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}

/* ---------- navbar ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(11,27,64,.92); backdrop-filter:blur(10px)}
.nav .wrap{display:flex; align-items:center; gap:26px; height:64px}
.nav .links{display:flex; gap:22px; margin-left:8px}
.nav .links a{color:#cfe0ff; font-size:14px; font-weight:500}
.nav .links a:hover{color:#fff}
.nav .spacer{flex:1}
.nav .login{color:#cfe0ff; font-size:14px; font-weight:600}
.btn-cta{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff;
  font-weight:600; font-size:14px; padding:10px 18px; border-radius:var(--r-md);
  box-shadow:0 10px 24px var(--accent-ring); transition:all .15s; border:none}
.btn-cta:hover{background:var(--accent-hover); color:#fff; transform:translateY(-1px)}
.btn-cta.gold{background:var(--gold-500); color:#1b1403; box-shadow:0 10px 24px rgba(232,163,61,.35)}
.btn-cta.gold:hover{background:var(--gold-400)}
.btn-cta.ghost{background:rgba(255,255,255,.1); color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.25)}
.btn-cta.ghost:hover{background:rgba(255,255,255,.18)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:linear-gradient(135deg,var(--hero-from),var(--hero-to)); color:#fff}
#hero-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.9}
.hero .wrap{position:relative; padding-top:84px; padding-bottom:88px; max-width:1180px}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:var(--gold-400)}
.hero h1{font-family:var(--font-display); font-weight:800; font-size:54px; line-height:1.05;
  letter-spacing:-.015em; margin:18px 0 20px; max-width:15ch}
.hero h1 em{font-style:normal; color:var(--gold-400)}
.hero .lead{font-size:19px; line-height:1.55; color:#d7e3ff; max-width:54ch; margin:0 0 30px}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px}
.hero .stats{display:flex; flex-wrap:wrap; gap:40px}
.hero .stat b{display:block; font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1.1}
.hero .stat span{font-size:13.5px; color:#aec4ef}

/* ---------- audience strip ---------- */
.aud{border-bottom:1px solid var(--line); background:var(--bg)}
.aud .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding-top:22px; padding-bottom:22px}
.aud .lbl{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-2); margin-right:6px}
.aud .tag{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-pill);
  background:var(--bg-alt); border:1px solid var(--line); font-size:13.5px; color:var(--ink-2); font-weight:500}
.aud .tag svg{width:15px; height:15px; color:var(--accent)}

/* ---------- generic section ---------- */
.sec{padding:74px 0}
.sec.alt{background:var(--bg-alt)}
.sec-head{margin-bottom:36px; max-width:680px}
.sec-head h2{font-family:var(--font-display); font-weight:800; font-size:34px; line-height:1.12;
  letter-spacing:-.01em; margin:14px 0 10px}
.sec-head p{color:var(--slate); font-size:16.5px; margin:0}
.sec-head .row{display:flex; align-items:flex-end; justify-content:space-between; gap:20px}
.more-link{font-weight:600; font-size:14.5px; white-space:nowrap}

/* ---------- course cards (reuse .card-course from app.css) ---------- */
.land .cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step}
.step{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-xl); padding:24px 22px;
  box-shadow:var(--shadow-sm); position:relative}
.sec.alt .step{box-shadow:var(--shadow-xs)}
.step::before{counter-increment:step; content:"0" counter(step);
  font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--accent);
  background:var(--accent-soft); border-radius:var(--r-pill); padding:4px 12px; display:inline-block; margin-bottom:16px}
.step h3{font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.25; margin:0 0 8px}
.step p{font-size:14px; color:var(--slate); margin:0; line-height:1.55}

/* ---------- formats grid ---------- */
.fmts{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.fmt{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px;
  display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-xs); position:relative}
.fmt .fchip{width:40px; height:40px; border-radius:var(--r-md); display:grid; place-items:center}
.fmt .fchip svg{width:21px; height:21px}
.fmt b{font-size:15px; color:var(--ink)}
.fmt span{font-size:13px; color:var(--slate); line-height:1.45}
.fmt .soon{position:absolute; top:14px; right:14px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--chip-violet-fg); background:var(--chip-violet-bg);
  padding:3px 9px; border-radius:var(--r-pill)}
.fmt .now{position:absolute; top:14px; right:14px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--chip-teal-fg); background:var(--chip-teal-bg);
  padding:3px 9px; border-radius:var(--r-pill)}
.fc-blue{background:var(--chip-blue-bg); color:var(--chip-blue-fg)}
.fc-teal{background:var(--chip-teal-bg); color:var(--chip-teal-fg)}
.fc-amber{background:var(--chip-amber-bg); color:var(--chip-amber-fg)}
.fc-violet{background:var(--chip-violet-bg); color:var(--chip-violet-fg)}

/* ---------- norm trust band ---------- */
.trust{display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center}
.trust .tcard{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-md); padding:22px; max-width:430px}
.trust .tcard .trow{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 0; border-bottom:1px solid var(--line-2); font-size:14px}
.trust .tcard .trow:last-child{border-bottom:none}
.trust .tcard .k{color:var(--slate-2)}
.trust .tcard .v{font-weight:600; color:var(--ink)}
.trust .tcard .v.ok{color:var(--chip-teal-fg)}
.trust ul.checks{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.trust ul.checks li{display:flex; gap:11px; font-size:15px; color:var(--ink-2); line-height:1.5}
.trust ul.checks svg{width:20px; height:20px; flex:0 0 20px; color:var(--chip-teal-fg); margin-top:1px}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--hero-from),var(--hero-to)); border-radius:var(--r-xl);
  color:#fff; padding:46px 48px; display:flex; align-items:center; gap:30px; position:relative; overflow:hidden}
.cta-band::after{content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px; border-radius:50%;
  border:2px solid rgba(255,255,255,.12); box-shadow:0 0 0 36px rgba(255,255,255,.05)}
.cta-band h2{font-family:var(--font-display); font-weight:800; font-size:28px; line-height:1.15; margin:0 0 8px}
.cta-band p{margin:0; color:#d7e3ff; font-size:15px}
.cta-band .cta-actions{margin-left:auto; display:flex; gap:12px; position:relative}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:#9fb0cc; margin-top:74px}
.foot .wrap{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
  padding-top:30px; padding-bottom:30px; font-size:13px}
.foot a{color:#cfe0ff}
.foot .note{max-width:62ch; line-height:1.55}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .fmts{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:1fr}
  .hero h1{font-size:42px}
}
@media (max-width:680px){
  .nav .links{display:none}
  .hero .wrap{padding-top:56px; padding-bottom:60px}
  .hero h1{font-size:33px}
  .hero .stats{gap:24px}
  .sec{padding:52px 0}
  .sec-head h2{font-size:27px}
  .steps,.fmts{grid-template-columns:1fr}
  .cta-band{flex-direction:column; align-items:flex-start; padding:34px 26px}
  .cta-band .cta-actions{margin-left:0}
}