/* ═══════════════════════════════════════════════════════════
   Audience / Для кого — Grammerce (Linear dark redesign)
   Источник дизайна: newHtml/main/Grammerce Для кого.html
   Шапка/футер берутся из examples.css (ex-*); здесь — секции сегмента.
   ═══════════════════════════════════════════════════════════ */

/* reveal-анимация */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* общие */
.a-eyebrow { font-family: var(--c-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--c-accent); margin-bottom: 16px; }
.a-eyebrow.red { color: #FF7A7A; }
.a-eyebrow.cyan { color: #22D3EE; }
.a-center { text-align: center; }
.a-mb36 { margin-bottom: 36px; }
.a-mb40 { margin-bottom: 40px; }
.a-h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 18px; }
.a-h2c { font-size: clamp(26px, 4vw, 42px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin: 0; }
.accent { color: var(--c-accent); }

.a-sec { position: relative; z-index: 5; max-width: 1140px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 24px; }
.a-narrow1 { max-width: 1000px; }
.a-narrow2 { max-width: 900px; padding: clamp(20px, 4vw, 50px) 24px; }
.a-narrow3 { max-width: 1000px; }
.a-narrow4 { max-width: 820px; }
.a-narrow5 { max-width: 560px; }

/* intro */
.a-intro { position: relative; z-index: 5; max-width: 1100px; margin: 0 auto; padding: clamp(34px, 6vw, 70px) 24px 28px; text-align: center; }
.a-intro .a-eyebrow { display: block; }
.a-intro h1 { font-size: clamp(32px, 5.4vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; margin: 0 0 16px; }
.a-intro p { font-size: clamp(15px,2vw,18px); color: var(--c-muted); max-width: 620px; margin: 0 auto; line-height: 1.6; }

/* sticky tabs */
.a-tabwrap { position: sticky; top: 0; z-index: 20; background: rgba(8,9,11,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.kg-tabbar { max-width: 1100px; margin: 0 auto; padding: 14px 24px; display: flex; gap: 10px; justify-content: flex-start; overflow-x: auto; }
.kg-tabbar::-webkit-scrollbar { height: 0; }
.kg-tabbar button { appearance: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-family: 'Onest', sans-serif; font-size: 13.5px; font-weight: 600; padding: 10px 18px; border-radius: 100px; transition: all .2s; background: rgba(255,255,255,0.04); color: var(--c-muted); border: 1px solid rgba(255,255,255,0.1); }
.kg-tabbar button.on { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); color: var(--c-ink); border-color: transparent; }

/* S1 hero */
.kg-two { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.a-hero-grid { grid-template-columns: 1.1fr 0.9fr; }
.a-solution-grid { grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); }
.a-tagbadge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--c-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--c-accent); background: rgba(52,229,164,0.1); border: 1px solid rgba(52,229,164,0.22); padding: 7px 14px; border-radius: 100px; margin-bottom: 22px; }
.a-hero-h1 { font-size: clamp(28px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin: 0 0 18px; }
.a-hero-sub { font-size: clamp(15px,1.9vw,18px); color: var(--c-muted); line-height: 1.62; margin: 0 0 30px; max-width: 540px; }
.a-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.a-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); color: var(--c-ink); font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 12px; transition: transform .2s; }
.a-btn-primary:hover { transform: translateY(-2px); }
.a-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--c-text); font-weight: 500; font-size: 15px; padding: 14px 26px; border-radius: 12px; transition: background .2s; }
.a-btn-ghost:hover { background: rgba(255,255,255,0.1); }
.a-btn-ghost.lg { padding: 15px 30px; }
.a-hero-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: var(--c-faint); }
.a-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }

.kg-two-visual { display: grid; place-items: center; }
.a-mock-phone { position: relative; width: 268px; max-width: 100%; aspect-ratio: 9/18; border-radius: 34px; border: 1px solid rgba(52,229,164,0.25); background: linear-gradient(180deg, rgba(52,229,164,0.06), rgba(255,255,255,0.012)); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8); display: grid; place-items: center; padding: 22px; }
.a-mock-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 90px; height: 7px; border-radius: 100px; background: rgba(255,255,255,0.12); }
.a-mock-inner { text-align: center; color: var(--c-faint-2); }
.a-mock-cap { font-size: 12px; font-family: var(--c-mono); letter-spacing: .04em; line-height: 1.5; }

/* S2 pains */
.a-narrative { font-size: clamp(17px,2.3vw,22px); color: #DfE2E6; line-height: 1.6; max-width: 760px; margin: 0 auto; font-weight: 500; }
.kg-pains { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.a-pain { border: 1px solid rgba(255,122,122,0.16); border-radius: 16px; padding: 22px; background: rgba(255,122,122,0.04); display: flex; gap: 13px; align-items: flex-start; }
.a-pain-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,122,122,0.12); border: 1px solid rgba(255,122,122,0.25); display: grid; place-items: center; }
.a-pain span:last-child { font-size: 14.5px; color: var(--c-dim); line-height: 1.5; }
.a-cost { border: 1px solid rgba(255,122,122,0.28); border-radius: 16px; padding: 22px 26px; background: rgba(255,122,122,0.06); display: flex; gap: 14px; align-items: center; }
.a-cost > span:last-child { font-size: 15px; color: var(--c-text); line-height: 1.5; }
.a-cost-tag { flex-shrink: 0; font-family: var(--c-mono); font-size: 11px; letter-spacing: 0.12em; color: #FF7A7A; border: 1px solid rgba(255,122,122,0.3); border-radius: 100px; padding: 6px 12px; }

/* S3 bridge */
.a-bridge { border: 1px solid rgba(52,229,164,0.22); border-radius: 22px; padding: clamp(28px,4vw,46px); background: linear-gradient(135deg, rgba(52,229,164,0.07), rgba(34,211,238,0.05)); text-align: center; }
.a-bridge p { font-size: clamp(18px,2.6vw,26px); font-weight: 600; color: var(--c-text); line-height: 1.45; margin: 0; letter-spacing: -0.01em; }

/* S4 solution */
.a-solution { font-size: clamp(15px,1.9vw,17px); color: var(--c-muted); line-height: 1.65; margin: 0; }
.a-dash { border-radius: 18px; border: 1px dashed rgba(52,229,164,0.3); background: rgba(255,255,255,0.02); aspect-ratio: 16/11; display: grid; place-items: center; overflow: hidden; }
.a-dash-inner { text-align: center; color: var(--c-faint-2); padding: 20px; }

/* S5 steps */
.kg-stepper { display: flex; gap: 12px; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.a-step { flex: 1; min-width: 170px; max-width: 210px; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 22px 18px; background: rgba(255,255,255,0.015); }
.a-step-n { width: 34px; height: 34px; border-radius: 10px; background: rgba(52,229,164,0.12); border: 1px solid rgba(52,229,164,0.25); color: var(--c-accent); font-weight: 700; font-size: 15px; display: grid; place-items: center; margin-bottom: 14px; font-family: var(--c-mono); }
.a-step-l { font-size: 14px; color: var(--c-dim); line-height: 1.45; }
.a-s5sum { display: inline-block; font-size: clamp(15px,2vw,17px); color: var(--c-text); background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.22); border-radius: 14px; padding: 16px 26px; margin: 0; max-width: 720px; line-height: 1.5; }

/* S6 includes */
.a-includes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.a-inc { border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 22px; background: rgba(255,255,255,0.015); display: flex; gap: 13px; align-items: flex-start; }
.a-inc-ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: rgba(52,229,164,0.1); border: 1px solid rgba(52,229,164,0.22); display: grid; place-items: center; }
.a-inc span:last-child { font-size: 14.5px; color: var(--c-dim); line-height: 1.5; }

/* S7 economics */
.kg-econ { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: stretch; }
.a-econ-left { display: flex; flex-direction: column; gap: 14px; }
.a-econ-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; background: rgba(255,255,255,0.015); }
.a-econ-card p { font-size: 15px; color: var(--c-dim); line-height: 1.6; margin: 0; }
.a-econ-label { font-family: var(--c-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--c-faint); margin-bottom: 12px; }
.a-econ-label.accent { color: var(--c-accent); margin-bottom: 16px; }
.a-econ-result { border: 1px solid rgba(52,229,164,0.3); border-radius: 18px; padding: 30px; background: linear-gradient(180deg, rgba(52,229,164,0.08), rgba(255,255,255,0.012)); display: flex; flex-direction: column; justify-content: center; text-align: center; box-shadow: 0 20px 60px -30px rgba(52,229,164,0.45); }
.a-econ-big { font-size: clamp(26px,3.4vw,36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--c-accent); margin-bottom: 14px; }
.a-econ-result p { font-size: 14px; color: var(--c-dim); line-height: 1.55; margin: 0; }

/* S8 windows */
.a-windows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.a-win { border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; background: rgba(255,255,255,0.015); overflow: hidden; }
.a-win-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.a-win-bar span { width: 9px; height: 9px; border-radius: 100px; }
.a-win-canvas { aspect-ratio: 4/3; display: grid; place-items: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
.a-win-canvas .a-win-inner { text-align: center; color: var(--c-faint-2); padding: 16px; }
.a-win-title { font-size: 13px; font-weight: 600; color: var(--c-muted); }
.a-win-cap { padding: 16px 18px; font-size: 13.5px; color: var(--c-muted); line-height: 1.5; }

/* S9 objections accordion */
.a-obj-list { display: flex; flex-direction: column; gap: 12px; }
.a-obj { border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; background: rgba(255,255,255,0.015); overflow: hidden; }
.a-obj-q { width: 100%; appearance: none; background: none; border: none; cursor: pointer; color: var(--c-text); font-family: 'Onest', sans-serif; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; font-size: 16px; font-weight: 600; }
.a-obj-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; transition: all .25s; color: var(--c-faint); background: rgba(255,255,255,0.04); }
.a-obj.open .a-obj-ic { color: var(--c-accent); background: rgba(52,229,164,0.12); transform: rotate(180deg); }
.a-obj-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.a-obj.open .a-obj-a { grid-template-rows: 1fr; }
.a-obj-a-inner { overflow: hidden; }
.a-obj-a p { margin: 0; padding: 0 22px 20px; font-size: 14.5px; color: var(--c-muted); line-height: 1.6; }

/* S10 plan */
.a-plan { border: 1px solid rgba(52,229,164,0.35); border-radius: 20px; padding: 32px; background: linear-gradient(180deg, rgba(52,229,164,0.08), rgba(255,255,255,0.012)); box-shadow: 0 0 70px -24px rgba(52,229,164,0.5); position: relative; }
.a-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--c-ink); background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); padding: 5px 16px; border-radius: 100px; }
.a-plan-name { font-size: 19px; font-weight: 700; margin: 0 0 6px; color: var(--c-accent); }
.a-plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 24px; }
.a-plan-price span:first-child { font-size: 36px; font-weight: 800; }
.a-plan-per { font-size: 14px; color: #9DDCC4; }
.a-plan-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.a-plan-feat { display: flex; gap: 10px; font-size: 14.5px; color: var(--c-dim); }
.a-plan-feat svg { flex-shrink: 0; margin-top: 1px; }
.a-plan-cta { display: block; text-align: center; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)); color: var(--c-ink); font-weight: 600; font-size: 15px; padding: 14px; border-radius: 12px; margin-bottom: 16px; transition: transform .2s; }
.a-plan-cta:hover { transform: translateY(-2px); }
.a-plan-setup { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 16px; display: flex; gap: 11px; align-items: flex-start; }
.a-plan-setup-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(34,211,238,0.12); border: 1px solid rgba(34,211,238,0.25); display: grid; place-items: center; }
.a-plan-setup span:last-child { font-size: 13.5px; color: var(--c-muted); line-height: 1.5; }

/* S11 proof */
.a-proof { border: 1px dashed rgba(255,255,255,0.14); border-radius: 18px; padding: 44px 24px; text-align: center; background: rgba(255,255,255,0.012); }
.a-proof-label { font-family: var(--c-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--c-faint); margin-bottom: 14px; }
.a-proof-text { font-size: 15px; color: var(--c-muted); line-height: 1.6; max-width: 540px; margin: 0 auto; }
.a-proof-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.a-proof-row div { width: 150px; height: 90px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }

/* S12 final cta */
.a-final { border: 1px solid rgba(52,229,164,0.22); border-radius: 26px; padding: clamp(36px,5vw,64px); background: linear-gradient(135deg, rgba(52,229,164,0.09), rgba(34,211,238,0.06)); text-align: center; position: relative; overflow: hidden; }
.a-final-glow { position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 70%; height: 80%; background: radial-gradient(circle, rgba(52,229,164,0.18), transparent 70%); filter: blur(40px); pointer-events: none; }
.a-final-trigger { position: relative; font-size: clamp(22px,3.4vw,36px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; margin: 0 auto 30px; max-width: 800px; }
.a-final-btns { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* responsive */
@media (max-width: 880px) {
  .a-hero-grid, .a-solution-grid { grid-template-columns: 1fr; }
  .a-hero-grid .kg-two-visual { order: -1; }
  .kg-stepper { flex-direction: column; align-items: stretch; }
  .a-step { max-width: none; }
  .kg-econ { grid-template-columns: 1fr; }
  .kg-tabbar { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .kg-pains { grid-template-columns: 1fr; }
}