/* ═══════════════════════════════════════════════════════════
   landing.css — редизайн лендинга «Явность» (2026-06)
   Тёплый бренд, повзрослевший: золото + тёмно-синий на кремовом.
   Шрифты: Manrope (заголовки) + Inter (текст). Скоупится под .lnd.
   ═══════════════════════════════════════════════════════════ */

.lnd {
  --bg: #FFFDF7;
  --bg2: #FFF7E8;
  --ink: #16263D;
  --ink2: #4A5A6E;
  --muted: #8A94A3;
  --gold: #F2B01E;
  --gold2: #FFD449;
  --gold-pale: #FFF4D6;
  --gold-pale2: #FFE9B8;
  --card: #FFFFFF;
  --line: #EFE7D6;
  --sky: #E8F2FB;
  --sky-ink: #3E78C0;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow-sm: 0 2px 10px rgba(22,38,61,.06);
  --shadow: 0 12px 36px rgba(22,38,61,.10);
  --shadow-gold: 0 12px 30px rgba(242,176,30,.34);
  --maxw: 1180px;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.lnd h1, .lnd h2, .lnd h3, .lnd .l-logo, .lnd .l-price-amt { font-family: 'Manrope', 'Inter', sans-serif; }
.lnd * { box-sizing: border-box; }
.lnd .l-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.lnd section { position: relative; }

/* ── Buttons ── */
.lnd .l-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/1 'Manrope', sans-serif; cursor: pointer; border: none;
  padding: 16px 28px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color: #2A2012; box-shadow: var(--shadow-gold); transition: transform .18s, box-shadow .18s;
}
.lnd .l-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(242,176,30,.46); }
.lnd .l-btn-ghost {
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
.lnd .l-btn-ghost:hover { box-shadow: var(--shadow); }
.lnd .l-btn-sm { padding: 11px 20px; font-size: 14px; }
.lnd .l-btn-block { width: 100%; }

/* ── Header ── */
.lnd-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,253,247,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.lnd-header .l-wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.lnd .l-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: .3px; color: var(--ink); text-decoration: none; }
.lnd .l-logo-dot { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold2), var(--gold)); box-shadow: 0 4px 12px rgba(242,176,30,.4); }
.lnd .l-nav { display: flex; gap: 26px; margin-left: 18px; }
.lnd .l-nav a { color: var(--ink2); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .15s; }
.lnd .l-nav a:hover { color: var(--gold); }
.lnd .l-header-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lnd .l-link { color: var(--ink2); text-decoration: none; font-weight: 600; font-size: 15px; }
.lnd .l-link:hover { color: var(--ink); }

/* ── Hero ── */
.lnd-hero { padding: 64px 0 72px; background: radial-gradient(1100px 520px at 78% -8%, var(--gold-pale) 0%, transparent 60%), var(--bg); overflow: hidden; }
.lnd-hero .l-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.lnd .l-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px 7px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink2); box-shadow: var(--shadow-sm); }
.lnd .l-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242,176,30,.18); }
.lnd .l-h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.04; letter-spacing: -1.2px; font-weight: 800; margin: 22px 0 0; }
.lnd .l-hl { color: var(--gold); }
.lnd-hero p.l-sub { font-size: 19px; line-height: 1.55; color: var(--ink2); margin: 22px 0 0; max-width: 520px; }
.lnd .l-hero-cta { display: flex; align-items: center; gap: 18px; margin-top: 32px; flex-wrap: wrap; }
.lnd .l-cta-note { color: var(--muted); font-size: 14px; }
.lnd .l-social { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--ink2); font-size: 14.5px; }
.lnd .l-social b { color: var(--ink); }
.lnd .l-dots { display: flex; }
.lnd .l-dots span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -10px; }
.lnd .l-dots span:first-child { margin-left: 0; }

/* phone mockup container */
.lnd .l-hero-visual { display: flex; justify-content: center; }
.lnd .l-phone {
  width: 300px; border-radius: 38px; background: #fff; padding: 14px;
  box-shadow: var(--shadow); border: 1px solid var(--line); position: relative;
}
.lnd .l-phone-screen { background: linear-gradient(180deg, var(--gold-pale), #fff 40%); border-radius: 26px; padding: 18px 16px; min-height: 520px; }
.lnd .l-pday { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); font-weight: 600; }
.lnd .l-pcat { font: 800 17px 'Manrope', sans-serif; margin: 14px 0 2px; }
.lnd .l-psub { font-size: 13px; color: var(--ink2); }
.lnd .l-pcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-top: 14px; box-shadow: var(--shadow-sm); }
.lnd .l-plabel { font-size: 10.5px; letter-spacing: .8px; font-weight: 700; color: var(--gold); }
.lnd .l-pquote { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin-top: 8px; font-style: italic; }
.lnd .l-pchips { display: flex; gap: 8px; margin-top: 14px; }
.lnd .l-pchip { flex: 1; text-align: center; background: var(--gold-pale); border-radius: 12px; padding: 9px 4px; font-size: 12px; font-weight: 600; color: #6a5318; }
.lnd .l-pbtn { margin-top: 14px; text-align: center; background: linear-gradient(135deg,var(--gold2),var(--gold)); color: #2A2012; border-radius: 12px; padding: 11px; font-weight: 700; font-size: 13.5px; }

/* ── Section header ── */
.lnd .l-sec { padding: 78px 0; }
.lnd .l-eyebrow { text-align: center; font-size: 12.5px; letter-spacing: 1.6px; font-weight: 700; color: var(--gold); }
.lnd .l-h2 { text-align: center; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.8px; font-weight: 800; margin: 12px auto 0; max-width: 720px; }
.lnd .l-sec-sub { text-align: center; color: var(--ink2); font-size: 17px; line-height: 1.5; margin: 14px auto 0; max-width: 560px; }

/* ── 8 directions ── */
.lnd-dirs { background: var(--bg2); }
.lnd .l-dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.lnd .l-dir { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s; }
.lnd .l-dir:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lnd .l-dir-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--gold-pale); }
.lnd .l-dir h3 { font-size: 17px; font-weight: 700; margin: 14px 0 4px; }
.lnd .l-dir p { font-size: 14px; color: var(--ink2); line-height: 1.45; }

/* ── Features (alternating) ── */
.lnd .l-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 56px; }
.lnd .l-feat:nth-child(even) .l-feat-media { order: -1; }
.lnd .l-feat-eyebrow { font-size: 12px; letter-spacing: 1.2px; font-weight: 700; color: var(--gold); }
.lnd .l-feat h3 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 10px 0 0; }
.lnd .l-feat p { font-size: 16.5px; line-height: 1.6; color: var(--ink2); margin: 14px 0 0; }
.lnd .l-feat a.l-more { display: inline-block; margin-top: 16px; color: var(--gold); font-weight: 700; text-decoration: none; }
.lnd .l-feat-media { background: linear-gradient(160deg, var(--gold-pale), #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); min-height: 230px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.lnd .l-mini-card { background:#fff; border:1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm); }
.lnd .l-mini-h { font-weight: 700; font-size: 14px; }
.lnd .l-mini-s { font-size: 12.5px; color: var(--ink2); margin-top: 4px; }
.lnd .l-bars { display:flex; align-items:flex-end; gap:8px; height: 70px; margin-top: 6px; }
.lnd .l-bars i { flex:1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--gold2), var(--gold)); display:block; }
.lnd .l-notes { display:flex; gap:8px; flex-wrap:wrap; }
.lnd .l-note { background: var(--gold-pale); border-radius: 10px; padding: 7px 11px; font-size: 12px; font-weight:600; color:#6a5318; }
.lnd .l-breathe { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle, var(--gold2), var(--gold)); display:grid; place-items:center; color:#2A2012; font-weight:800; box-shadow: var(--shadow-gold); animation: lnd-breathe 7s ease-in-out infinite; }
@keyframes lnd-breathe { 0%,100%{transform:scale(.86)} 50%{transform:scale(1.06)} }

/* ── Pricing ── */
.lnd .l-toggle { display:flex; justify-content:center; gap:10px; align-items:center; margin-top: 28px; }
.lnd .l-toggle button { border:1px solid var(--line); background:var(--card); color:var(--ink2); border-radius: 999px; padding: 9px 18px; font-weight:600; font-size:14px; cursor:pointer; font-family:'Inter',sans-serif; }
.lnd .l-toggle button.on { background: var(--ink); color:#fff; border-color: var(--ink); }
.lnd .l-toggle .l-save { color: var(--gold); font-weight:700; font-size:13px; }
.lnd .l-price-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; align-items: stretch; }
.lnd .l-price { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; }
.lnd .l-price.feat { border-color: var(--gold); box-shadow: var(--shadow-gold); position: relative; }
.lnd .l-price-pop { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background: linear-gradient(135deg,var(--gold2),var(--gold)); color:#2A2012; font-weight:700; font-size:12px; padding:5px 14px; border-radius:999px; white-space:nowrap; }
.lnd .l-price-name { font-size:19px; font-weight:800; }
.lnd .l-price-desc { font-size:13.5px; color:var(--ink2); margin-top:4px; min-height: 38px; }
.lnd .l-price-amt { font-size: 40px; font-weight: 800; letter-spacing:-1px; margin: 14px 0 2px; }
.lnd .l-price-amt small { font-size: 15px; font-weight:600; color: var(--muted); }
.lnd .l-price-per { font-size: 13px; color: var(--muted); min-height: 18px; }
.lnd .l-price ul { list-style:none; padding:0; margin: 18px 0; display:flex; flex-direction:column; gap:11px; }
.lnd .l-price li { font-size:14px; color:var(--ink2); display:flex; gap:9px; align-items:flex-start; line-height:1.4; }
.lnd .l-price li::before { content:'✓'; color: var(--gold); font-weight:800; flex-shrink:0; }
.lnd .l-price .l-btn { margin-top:auto; }

/* sessions strip */
.lnd .l-sessions { margin-top: 28px; background: linear-gradient(135deg, var(--sky), #fff); border:1px solid #D7E7F6; border-radius: var(--radius); padding: 26px; }
.lnd .l-sessions h3 { font-size: 20px; font-weight:800; }
.lnd .l-sessions p { color: var(--ink2); font-size:14.5px; margin-top:6px; }
.lnd .l-sess-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:18px; }
.lnd .l-sess { background:#fff; border:1px solid #D7E7F6; border-radius:14px; padding:16px; }
.lnd .l-sess b { display:block; font-size:15px; }
.lnd .l-sess span { font-size:12.5px; color: var(--muted); }
.lnd .l-sess .l-sess-price { font-size:20px; font-weight:800; color: var(--ink); margin-top:8px; font-family:'Manrope',sans-serif; }

/* consent under register handled in app.css; landing CTA band + footer */
.lnd-ctaband { text-align:center; padding: 80px 0; background: radial-gradient(700px 320px at 50% 120%, var(--gold-pale) 0%, transparent 65%), var(--bg2); }
.lnd-ctaband h2 { font-size: clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.6px; }
.lnd-ctaband p { color: var(--ink2); font-size:17px; margin:14px auto 28px; max-width:480px; }

/* ── Footer ── */
.lnd-footer { background: var(--ink); color: #C9D3E0; padding: 56px 0 30px; }
.lnd-footer .l-wrap { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.lnd-footer .l-logo { color:#fff; }
.lnd-footer .l-foot-tag { color:#93A1B5; font-size:14px; line-height:1.6; margin-top:14px; max-width:280px; }
.lnd-footer h4 { color:#fff; font-size:14px; font-weight:700; margin:0 0 14px; font-family:'Manrope',sans-serif; }
.lnd-footer a { display:block; color:#A9B5C5; text-decoration:none; font-size:14px; margin-bottom:10px; }
.lnd-footer a:hover { color:#fff; }
.lnd-foot-legal { border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:22px; font-size:12.5px; color:#7F8DA0; line-height:1.6; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ── Responsive ── */
@media (max-width: 920px) {
  .lnd-hero .l-wrap { grid-template-columns: 1fr; gap: 36px; }
  .lnd .l-hero-visual { order:-1; }
  .lnd .l-nav { display:none; }
  .lnd .l-dir-grid { grid-template-columns: repeat(2,1fr); }
  .lnd .l-feat { grid-template-columns: 1fr; gap: 24px; }
  .lnd .l-feat:nth-child(even) .l-feat-media { order: 0; }
  .lnd .l-price-grid { grid-template-columns: 1fr 1fr; }
  .lnd .l-sess-grid { grid-template-columns: 1fr; }
  .lnd-footer .l-wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .lnd .l-wrap { padding: 0 18px; }
  .lnd .l-dir-grid, .lnd .l-price-grid { grid-template-columns: 1fr; }
  .lnd .l-hero-cta { flex-direction: column; align-items: stretch; }
  .lnd-footer .l-wrap { grid-template-columns: 1fr; }
}

/* ── На лендинге прячем старую шапку и анимированное «небо» ── */
body:has(#viewLanding.active) #mainHeader { display: none !important; }
body:has(#viewLanding.active) #skyBg { display: none !important; }
body:has(#viewLanding.active) { background: #FFFDF7; }

/* billing toggle: показываем мес/год */
.lnd .l-price-grid .l-by { display: none; }
.lnd .l-price-grid.year .l-bm { display: none; }
.lnd .l-price-grid.year .l-by { display: inline; }

/* ═══ Тёмная тема лендинга (переключатель день/ночь) ═══ */
[data-theme="dark"] body:has(#viewLanding.active) { background: #121E2C; }
[data-theme="dark"] .lnd {
  --bg: #121E2C; --bg2: #0E1A27; --ink: #EAF1F8; --ink2: #A7B6C8; --muted: #6C7C8E;
  --card: #1A2B3F; --line: #2A3D54; --gold-pale: #2C2716; --gold-pale2: #3A331E; --sky: #18293C;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.3); --shadow: 0 14px 40px rgba(0,0,0,.45);
}
[data-theme="dark"] .lnd-header { background: rgba(18,30,44,.86); }
[data-theme="dark"] .lnd-hero { background: radial-gradient(1100px 520px at 78% -8%, rgba(242,176,30,.14) 0%, transparent 60%), var(--bg); }
[data-theme="dark"] .lnd .l-toggle button.on { background: var(--gold); color: #2A2012; border-color: var(--gold); }
/* захардкоженные белые карточки → тёмные */
[data-theme="dark"] .lnd .l-pcard,
[data-theme="dark"] .lnd .l-mini-card,
[data-theme="dark"] .lnd .l-phone { background: var(--card); }
[data-theme="dark"] .lnd .l-phone-screen { background: linear-gradient(180deg, #233248, var(--card) 45%); }
[data-theme="dark"] .lnd .l-pchip,
[data-theme="dark"] .lnd .l-note { color: #F0D89A; }
[data-theme="dark"] .lnd .l-feat-media { background: linear-gradient(160deg, #213348, #1A2B3F); }
[data-theme="dark"] .lnd .l-sessions { background: linear-gradient(135deg, #1B3149, #1A2B3F); border-color: #2A3D54; }
[data-theme="dark"] .lnd .l-sess { background: #16273A; border-color: #2A3D54; }
[data-theme="dark"] .lnd-footer { background: #0C1622; }