@import url('fonts.css');

/* ============================================================
   AISAU — v4. «Clinical Editorial».
   Светлый тёплый холст, глубокий изумруд, крупная типографика,
   редакторская сетка. Ничего общего с тёмно-неоновыми v1–v3.
   ============================================================ */
:root {
  --paper:      #f4f1e8;
  --paper-2:    #ece7d9;
  --card:       #faf8f2;
  --ink:        #16140d;
  --ink-2:      #575243;
  --ink-3:      #6b665a;
  --line:       rgba(22,20,13,.14);
  --line-soft:  rgba(22,20,13,.07);
  --accent:     #0e5a43;
  --accent-ink: #0c4c39;
  --accent-hover:#0f6b4f;
  --on-accent:  #f4f1e8;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 72px);
  --nav-h: 74px;
  --gap: clamp(56px, 9vw, 150px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --t-hero: clamp(1.9rem, 0.2rem + 6vw, 6rem);
  --t-h2:   clamp(2rem, 1.1rem + 3.4vw, 4rem);
  --t-h3:   clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --t-lead: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);

  color-scheme: light;
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }

::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---------- Type ---------- */
.display { font-family:'Unbounded', sans-serif; font-weight:800; line-height:.98; letter-spacing:-.03em; text-wrap:balance; }
.h2 { font-family:'Unbounded', sans-serif; font-weight:700; font-size:var(--t-h2); line-height:1.02; letter-spacing:-.02em; text-wrap:balance; }
.kicker {
  font-family:'Geist','Inter',sans-serif; font-weight:600;
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink);
}
.lead { font-size:var(--t-lead); line-height:1.5; color:var(--ink-2); max-width:44ch; }
.muted { color: var(--ink-2); }
.em { color: var(--accent-ink); }

/* Секционный индекс на полях */
.idx {
  font-family:'Geist','Inter',sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.16em; color:var(--ink-3);
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; border-radius:999px; padding:15px 30px; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-fill { background:var(--accent); color:var(--on-accent); }
.btn-fill:hover { background:var(--accent-hover); }
.btn-line { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-line:hover { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.btn-sm { padding:10px 20px; font-size:.9rem; }

.arrow-link {
  display:inline-flex; align-items:center; gap:9px; font-weight:600; color:var(--accent-ink);
  padding-block:4px;
}
.arrow-link svg { transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.header.is-scrolled { border-bottom-color:var(--line); background:color-mix(in srgb, var(--paper) 92%, transparent); }
.header .wrap { height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:11px; font-family:'Unbounded',sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:-.02em; }
.brand img { width:32px; height:32px; border-radius:8px; }
.nav { display:none; gap:30px; }
.nav a { font-size:.95rem; color:var(--ink-2); position:relative; transition:color .3s var(--ease); }
.nav a::after { content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1.5px; background:var(--accent); transition:right .35s var(--ease); }
.nav a:hover { color:var(--ink); }
.nav a:hover::after { right:0; }
.header .btn-sm { display:none; }
.burger { display:inline-flex; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; }
.burger span { width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease), opacity .3s; }
.mnav[aria-expanded="true"] ~ .burger span:nth-child(1),
.burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity:0; }
.burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media (min-width:920px){ .nav{display:flex;} .header .btn-sm{display:inline-flex;} .burger{display:none;} }

.mnav { position:fixed; top:var(--nav-h); left:0; right:0; z-index:49; background:var(--paper); border-bottom:1px solid var(--line); display:grid; gap:2px; padding:16px var(--pad) 26px; }
.mnav[hidden]{ display:none; }
.mnav a { padding:14px 6px; font-size:1.1rem; border-bottom:1px solid var(--line-soft); }
.mnav .btn { margin-top:16px; }
@media (min-width:920px){ .mnav{ display:none !important; } }

/* ============================================================
   Hero
   ============================================================ */
main { padding-top: var(--nav-h); }
.hero { padding-block: clamp(40px, 7vw, 96px) var(--gap); }
.hero-top { display:flex; align-items:baseline; gap:16px; margin-bottom:28px; }
.hero-top .line { flex:1; height:1px; background:var(--line); }
.hero h1 { font-family:'Unbounded',sans-serif; font-weight:800; font-size:var(--t-hero); line-height:.94; letter-spacing:-.035em; margin:0; }
.hero h1 .em { color:var(--accent); }
.hero-sub { margin-top:34px; display:grid; gap:30px; grid-template-columns:1fr; align-items:end; }
@media (min-width:860px){ .hero-sub{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }

.hero-media { margin-top:clamp(40px,6vw,72px); position:relative; border-radius:20px; overflow:hidden; background:var(--paper-2); border:1px solid var(--line-soft); }
.hero-media img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 42%; }
.hero-media figcaption {
  position:absolute; left:18px; bottom:16px; font-family:'Geist',sans-serif; font-size:12px; letter-spacing:.05em;
  color:var(--ink); background:color-mix(in srgb, var(--paper) 78%, transparent); padding:7px 14px; border-radius:999px; backdrop-filter:blur(6px);
}

/* Marquee-лента ключевых слов */
.ticker { overflow:hidden; border-block:1px solid var(--line); margin-top:var(--gap); padding-block:18px; }
.ticker-row { display:flex; gap:0; width:max-content; animation:scroll-x 34s linear infinite; }
.ticker span { font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(1.4rem,1rem+2vw,2.4rem); letter-spacing:-.02em; color:var(--ink); padding-inline:28px; display:inline-flex; align-items:center; gap:28px; }
.ticker span::after { content:''; width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
@keyframes scroll-x { to { transform:translateX(-50%); } }

/* ============================================================
   Section shell
   ============================================================ */
.section { padding-block: calc(var(--gap) / 2); }
.section-head { display:grid; gap:22px; margin-bottom:clamp(40px,5vw,64px); }
@media (min-width:900px){ .section-head{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:end; column-gap:var(--pad); } }
.section-head .kicker { display:inline-flex; align-items:center; gap:12px; }
.section-head .kicker::before { content:attr(data-idx); font-size:.95rem; }

/* ---------- 01 Duties: редакторский нумерованный список ---------- */
.duties { border-top:1px solid var(--ink); }
.duty { display:grid; grid-template-columns:auto 1fr; gap:8px 26px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline; }
@media (min-width:760px){ .duty{ grid-template-columns:64px 1fr 1.1fr; align-items:baseline; } }
.duty-n { font-family:'Unbounded',sans-serif; font-weight:700; font-size:1.1rem; color:var(--accent); }
.duty h3 { font-family:'Unbounded',sans-serif; font-weight:700; font-size:var(--t-h3); letter-spacing:-.01em; }
.duty p { color:var(--ink-2); }
.duty:hover { background:var(--card); }
.duty { transition:background-color .3s var(--ease); border-radius:0; }

/* ---------- 02 Pharmacist ---------- */
.split { display:grid; gap:clamp(32px,5vw,64px); align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); } }
.split.rev > figure { order:-1; }
.split figure { margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--line-soft); background:var(--paper-2); }
.split figure img { width:100%; height:auto; }
.quotes { display:grid; margin:26px 0; border-top:1px solid var(--line); }
.quotes li { padding:15px 0; border-bottom:1px solid var(--line); font-size:1.1rem; font-weight:500; }
.quotes li::before { content:'“'; color:var(--accent); font-weight:700; margin-right:4px; }

/* ---------- 03 Compare ---------- */
.compare { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
@media (min-width:720px){ .compare{ grid-template-columns:1fr 1fr; } }
.compare > div { background:var(--paper); padding:clamp(26px,3.5vw,44px); }
.compare .tag { font-family:'Geist',sans-serif; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.compare h3 { font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(1.4rem,1rem+1.4vw,2rem); margin:12px 0 8px; }
.compare .is-on { background:var(--card); }
.compare .is-on h3 { color:var(--accent); }
.callout { margin-top:28px; padding:clamp(26px,4vw,48px); background:var(--accent); color:var(--on-accent); border-radius:18px; }
.callout p { font-size:var(--t-lead); max-width:56ch; }
.callout p + p { margin-top:14px; font-size:1rem; color:color-mix(in srgb, var(--on-accent) 78%, var(--accent)); }

/* ---------- 04 Market numbers ---------- */
.figs { display:grid; gap:clamp(28px,4vw,56px); border-top:1px solid var(--ink); padding-top:clamp(32px,4vw,52px); }
@media (min-width:820px){ .figs{ grid-template-columns:1fr 1fr; } }
.fig h3 { font-family:'Unbounded',sans-serif; font-weight:700; font-size:var(--t-h3); margin-bottom:26px; }
.fig-row { display:flex; flex-wrap:wrap; gap:26px 44px; margin-bottom:22px; }
.fig-v { font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(2.4rem,1.4rem+3vw,3.8rem); line-height:.9; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.fig-l { margin-top:10px; font-size:.9rem; color:var(--ink-2); max-width:22ch; }
.fig-up   .fig-v { color:var(--accent); }
.fig-up   .fig-v::before { content:'↑ '; font-size:.6em; vertical-align:middle; }
.fig-down .fig-v { color:#a83a1e; }
.fig-down .fig-v::before { content:'↓ '; font-size:.6em; vertical-align:middle; }
.fig p { color:var(--ink-2); }
.src { margin-top:22px; font-size:.8rem; color:var(--ink-3); }

/* ---------- 05 Why now: изумрудный «залитый» блок ---------- */
.drench { background:var(--accent); color:var(--on-accent); border-radius:24px; padding:clamp(40px,6vw,88px); margin-block:var(--gap); }
.drench .grid { display:grid; gap:clamp(28px,4vw,56px); align-items:center; }
@media (min-width:860px){ .drench .grid{ grid-template-columns:auto 1fr; column-gap:clamp(48px,6vw,96px); } }
.drench .one { font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(7rem,4rem+12vw,15rem); line-height:.8; letter-spacing:-.05em; }
.drench .kicker { color:color-mix(in srgb, var(--on-accent) 82%, var(--accent)); }
.drench h2 { font-family:'Unbounded',sans-serif; font-weight:700; font-size:var(--t-h2); line-height:1.02; letter-spacing:-.02em; margin:16px 0 20px; }
.drench p { font-size:var(--t-lead); max-width:52ch; color:color-mix(in srgb, var(--on-accent) 86%, var(--accent)); }
.drench p + p { margin-top:16px; font-size:1rem; }
.drench .one-note { margin-top:16px; max-width:22ch; font-size:.9rem; color:color-mix(in srgb, var(--on-accent) 74%, var(--accent)); }

/* ---------- 06 CTA / pilot ---------- */
.steps { display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); margin:clamp(32px,4vw,52px) 0; }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step { background:var(--paper); padding:26px 0; }
@media (min-width:760px){ .step{ padding:26px clamp(20px,2vw,32px); } .step:first-child{ padding-left:0; } }
.step-n { font-family:'Geist',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.14em; color:var(--accent-ink); }
.step h3 { font-family:'Unbounded',sans-serif; font-weight:700; font-size:1.1rem; margin:12px 0 8px; }
.step p { font-size:.92rem; color:var(--ink-2); }
.cta-form { display:flex; flex-direction:column; gap:12px; max-width:520px; margin-top:8px; }
@media (min-width:540px){ .cta-form{ flex-direction:row; } }
.cta-form input { flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:15px 24px; transition:border-color .3s var(--ease); }
.cta-form input::placeholder { color:var(--ink-3); }
.cta-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cta-form input[aria-invalid="true"] { border-color:#a83a1e; }
.form-note { margin-top:14px; font-size:.9rem; color:#a83a1e; min-height:1.4em; }
.form-note.ok { color:var(--accent-ink); }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top:1px solid var(--line); padding-block:clamp(48px,6vw,80px); margin-top:var(--gap); }
.footer-big { font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(1.6rem,1rem+2.4vw,3rem); line-height:1.05; letter-spacing:-.02em; max-width:16ch; margin-bottom:clamp(40px,5vw,64px); }
.footer-big .em { color:var(--accent); }
.footer-grid { display:grid; gap:26px; }
@media (min-width:700px){ .footer-grid{ grid-template-columns:1fr auto; align-items:end; } }
.footer-brand { display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--ink-2); }
.footer-brand .brand { color:var(--ink); }
.footer-links { display:flex; flex-wrap:wrap; gap:8px 26px; font-size:.92rem; }
.footer-links a { color:var(--ink-2); transition:color .3s var(--ease); }
.footer-links a:hover { color:var(--accent-ink); }

/* ============================================================
   Reveal
   ============================================================ */
.js .rise { opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0ms); }
.js .rise.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .ticker-row { animation:none; }
  .js .rise { opacity:1; transform:none; }
}