/* ============================================================================
   HANON × ATMOsphere — TFA landing page
   ATMO design system tokens (institutional blue anchor, no Nebulica → Inter).
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Canonical ATMO design-system tokens.
     Source of truth: atmo-design-system/src/app/globals.css (spec v2.2,
     docs/ATMOSPHERE-DESIGN-SYSTEM.md). Hexes are exact; do not hand-edit —
     re-sync from the repo. This webinar is treated as a formal ATMOsphere
     *institutional surface* (§2.1.1), so the institutional-blue scale is the
     anchor. HANON red is a co-brand accent, outside the ATMO system.
     ---------------------------------------------------------------------- */

  /* Institutional Blue — base-preserving scale (institutional-80 = #104894 exact) */
  --atmo-institutional-10: #f1f7fe;
  --atmo-institutional-20: #d2e3fa;
  --atmo-institutional-30: #adccf6;
  --atmo-institutional-40: #7faff1;
  --atmo-institutional-50: #5193ec;
  --atmo-blue-40: #7abdea;             /* master blue — the light blue in the ATMO logo mark */
  --atmo-institutional-60: #2376e7;
  --atmo-institutional-70: #155ec2;
  --atmo-institutional-80: #104894;
  --atmo-institutional-90: #0b3266;
  --atmo-blue-certification: #00549f; /* certification hero stat — numbers only (§2.12) */

  /* Reds (Berry) — NR CTA / data-viz risk + contrast highlight */
  --atmo-reds-40: #d56a8f;
  --atmo-reds-50: #a11950;
  /* Greens — success / "avoided emissions" */
  --atmo-greens-50: #2ad2a9;
  --atmo-greens-90: #0c5848;
  /* Gold */
  --atmo-gold-50: #d9ae2e;

  /* Cool neutral scale */
  --atmo-cool-10: #f7f8fa;
  --atmo-cool-20: #e6e8ec;
  --atmo-cool-60: #767a84;
  --atmo-cool-80: #353841; /* body text */
  --atmo-cool-90: #1a1c21; /* headings */
  --atmo-white: #ffffff;

  /* ---- page semantic aliases → canonical tokens ------------------------- */
  --blue-90: var(--atmo-institutional-90);
  --blue-80: var(--atmo-institutional-80);
  --blue-70: var(--atmo-institutional-70);
  --blue-60: var(--atmo-institutional-60);
  --blue-10: var(--atmo-institutional-10);
  --certification: var(--atmo-blue-certification);

  --red: var(--atmo-reds-50);
  --red-40: var(--atmo-reds-40);
  --hanon-red: #e2001a;       /* HANON co-brand accent (not an ATMO token) */
  --green: var(--atmo-greens-50);
  --green-90: var(--atmo-greens-90);
  --gold: var(--atmo-gold-50);

  --ink: var(--atmo-cool-90);
  --body: var(--atmo-cool-80);
  --muted: var(--atmo-cool-60);
  --line: var(--atmo-cool-20);
  --bg: var(--atmo-white);
  --bg-soft: var(--atmo-cool-10);

  --radius: 20px;             /* §5 base radius */
  --radius-sm: 12px;
  --maxw: 1120px;
  --font: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";  /* canonical Inter features (§3) */
}
/* Display type — Inter 700 with tight tracking (§3.2); headings are cool-90 (§3.3) */
h1, h2, h3 { color: var(--ink); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h1 { letter-spacing: -0.03em; line-height: 1.05; }
a { color: var(--blue-70); }
::selection { background: var(--atmo-institutional-20); color: var(--atmo-cool-90); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.ink-green { color: var(--green-90); font-weight: 600; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-primary { background: var(--blue-80); color: #fff; }
.btn-primary:hover { background: var(--blue-70); box-shadow: 0 8px 24px rgba(16,72,148,.25); }
.btn-outline { background: transparent; color: var(--blue-80); border-color: var(--blue-80); }
.btn-outline:hover { background: var(--blue-10); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.24); }
.btn-share { background: var(--bg-soft); color: var(--blue-90); border-color: var(--line); }
.btn-share:hover { background: #fff; border-color: var(--blue-60); }

/* ---- header (ATMO Report pattern: navy utility strip + white main bar) --- */
.site-header { position: sticky; top: 0; z-index: 50; }
.util-strip { background: var(--blue-80); }        /* institutional #104894 */
.util-inner { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.util-tagline { color: #fff; font-size: 13.5px; }
.util-tagline b { font-weight: 700; }
.util-actions { display: flex; gap: 10px; }
.util-link {
  color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(255,255,255,.55); border-radius: 8px; padding: 5px 14px;
  transition: background .15s ease;
}
.util-link:hover { background: rgba(255,255,255,.12); }

.main-bar { background: #fff; border-bottom: 1px solid var(--line); }
.main-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.cobrand { display: flex; align-items: center; gap: 14px; }
.logo { font-weight: 800; letter-spacing: .04em; font-size: 18px; line-height: 1; display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink); }
.logo span { font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.logo-hanon { color: var(--hanon-red); }           /* HANON red on white */
.logo-hanon span { color: var(--muted); }
.cobrand-x { color: var(--atmo-cool-40); font-size: 16px; }
.logo-atmo-img { height: 40px; width: auto; display: block; }
.logo-hanon-img { height: 34px; width: auto; display: block; }
.brand-home { display: inline-flex; align-items: center; transition: opacity .15s ease; }
.brand-home:hover { opacity: .72; }
.nav-home { color: var(--muted) !important; }
.nav-home:hover { color: var(--blue-80) !important; }
.main-nav { display: flex; gap: 26px; }
.main-nav a { color: var(--blue-80); font-size: 15px; font-weight: 500; text-decoration: none; transition: opacity .15s ease; }
.main-nav a:hover { opacity: .7; }

/* ---- hero (light editorial wash — ATMO Report) -------------------------- */
.hero {
  background: linear-gradient(180deg, var(--blue-10), #ffffff 72%);
  color: var(--body); padding: 60px 0 56px; border-bottom: 1px solid var(--line);
}
.hero-title { color: var(--blue-80); font-size: clamp(30px, 5vw, 52px); font-weight: 700; max-width: 18ch; margin: 14px 0 0; letter-spacing: -0.03em; line-height: 1.05; }
.hero-title .hl {                                   /* navy phrase, underlined in the logo's light blue */
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--atmo-blue-40);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.08em;
}
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; color: var(--blue-70); margin: 0; }
.hero-lead { font-size: clamp(16px, 2vw, 19px); max-width: 60ch; margin: 22px 0 0; color: var(--body); }
.hero-lead strong { color: var(--blue-80); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }
.hero-authors { margin: 34px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---- stats -------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin: -38px auto 0; position: relative; z-index: 2;
}
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: 0 10px 30px rgba(11,50,102,.08);
}
.stat-num { display: block; font-size: 30px; font-weight: 700; color: var(--certification); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-label { display: block; font-size: 13.5px; color: var(--muted); margin-top: 8px; }

/* ---- sections ----------------------------------------------------------- */
.section { padding: 72px 0; }
.section-title { font-size: clamp(24px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.section-intro { font-size: 17px; color: var(--body); max-width: 64ch; margin: 14px 0 32px; }
.section-explore { background: var(--bg-soft); }
.section-report { background: var(--blue-10); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-report .section-title { color: var(--blue-80); }
.section-report p { color: var(--body); }
.section-report em { color: var(--blue-80); font-style: normal; font-weight: 600; }

/* ---- TFA lifecycle diagram --------------------------------------------- */
.cycle-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: 0 10px 30px rgba(11,50,102,.06); }
.cycle-svg { width: 100%; height: auto; display: block; }
.cnode circle { fill: var(--blue-10); stroke: var(--blue-80); stroke-width: 1.5; }
.cyc-t { fill: var(--blue-90); font-family: var(--font); font-size: 16px; font-weight: 700; text-anchor: middle; }
.cyc-s { fill: var(--muted); font-family: var(--font); font-size: 13px; font-weight: 500; text-anchor: middle; }
.cyc-drop { fill: #fff; font-family: var(--font); font-size: 17px; font-weight: 800; text-anchor: middle; }
.cyc-pill-num { fill: var(--blue-80); font-family: var(--font); font-size: 14px; font-weight: 700; text-anchor: middle; }

/* ---- webinar / video ---------------------------------------------------- */
.eyebrow-dark { color: var(--blue-70); margin-bottom: 6px; }
.event-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0 0 28px; }
.event-meta li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--blue-90); font-variant-numeric: tabular-nums; }
.em-ico { font-size: 16px; }
.em-status { color: var(--green-90); }
.em-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(42,210,169,.22); }

.video-frame { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 50px rgba(11,50,102,.18); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster { position: absolute; inset: 0; display: block; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play {
  position: absolute; inset: 0; margin: auto; width: 78px; height: 78px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(226,0,26,.92); color: #fff; font-size: 26px; padding-left: 6px;
  border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .15s ease, background .15s ease;
}
.video-poster:hover .video-play { transform: scale(1.08); background: var(--hanon-red); }
.video-poster::after {
  content: "Recording link coming soon"; position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(11,50,102,.85)); color: #dce8f6;
  font-size: 13px; font-weight: 600; text-align: center; padding: 28px 12px 12px;
}

/* ---- speakers & hosts --------------------------------------------------- */
.section-people { background: var(--bg-soft); }
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.person {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: 0 10px 30px rgba(11,50,102,.06); position: relative;
}
.avatar {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px; color: #fff; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--a1), var(--a2));
}
.avatar-photo { object-fit: cover; background: var(--blue-10); }
.person-role {
  display: inline-block; margin: 16px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.role-speaker { background: var(--blue-10); color: var(--blue-80); }
.role-host { background: rgba(42,210,169,.16); color: var(--green-90); }
.person h3 { font-size: 19px; margin: 10px 0 4px; }
.person-title { margin: 0; font-size: 14px; color: var(--body); line-height: 1.4; }
.person-org { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--blue-70); }

/* ---- chart -------------------------------------------------------------- */
.chart-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: 0 10px 30px rgba(11,50,102,.06); }
.chart-controls { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.toggle-group { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.toggle {
  border: 0; background: transparent; font-family: var(--font); font-weight: 600; font-size: 14px;
  color: var(--muted); padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: all .15s ease;
}
.toggle:hover { color: var(--blue-80); }
.toggle.is-active { background: var(--blue-80); color: #fff; box-shadow: 0 4px 12px rgba(16,72,148,.25); }
.toggle-avoided { border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; gap: 8px; }
.toggle-avoided[aria-pressed="false"] { opacity: .55; }

.chart-stage { display: grid; grid-template-columns: 1fr 280px; gap: 26px; align-items: start; }
.emissions-svg { width: 100%; height: auto; display: block; }
.bar { transition: y .45s cubic-bezier(.22,1,.36,1), height .45s cubic-bezier(.22,1,.36,1), fill .3s ease; }
.ax-label { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.ax-title { fill: var(--muted); font-size: 12px; font-weight: 600; font-family: var(--font); }
.today-label { fill: var(--blue-80); font-size: 12px; font-weight: 700; font-family: var(--font); }

.chart-readout { background: var(--blue-10); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px; }
.readout-sub { margin: 0; font-size: 13px; font-weight: 600; color: var(--blue-70); }
.readout-num { margin: 6px 0 0; font-size: 40px; font-weight: 700; color: var(--certification); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.readout-mult { margin: 2px 0 14px; font-size: 14px; font-weight: 600; color: var(--red); }
.readout-note { margin: 0; font-size: 14px; color: var(--body); }
.legend { list-style: none; padding: 0; margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex: none; }
.swatch-red { background: var(--red); }
.swatch-green { background: var(--green); }
.swatch-muted { background: var(--red-40); }
.chart-caption { font-size: 12.5px; color: var(--muted); margin: 20px 0 0; }

/* ---- report ------------------------------------------------------------- */
.report-grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; }
.cover-placeholder {
  aspect-ratio: 3/4; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #16365f, #0a2a55); color: #6f8db3; border: 1px dashed rgba(255,255,255,.2);
  font-size: 14px;
}
.cover-img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-sm);
  box-shadow: 0 16px 44px rgba(11,50,102,.18); border: 1px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease;
}
.report-cover a:hover .cover-img { transform: translateY(-3px); box-shadow: 0 22px 56px rgba(11,50,102,.26); }
.report-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 0; }
.report-links-extra { margin: 18px 0 0; font-size: 14px; }
.report-links-extra a { color: var(--blue-70); }

/* ---- share / contact ---------------------------------------------------- */
.share-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.typeform-frame { border-radius: var(--radius); overflow: hidden; }
.typeform-placeholder {
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 60px 24px; text-align: center;
  background: var(--bg-soft); color: var(--body);
}

/* ---- footer ------------------------------------------------------------- */
.site-footer { background: var(--blue-90); color: #cfe0f2; padding: 40px 0; }
.site-footer .muted { color: #9fb8d4; }
.footer-inner p { margin: 0 0 6px; font-size: 14px; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .chart-stage { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; gap: 28px; }
  .report-cover { max-width: 240px; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .main-nav { display: none; }
  .util-actions { gap: 8px; }
  .util-link { padding: 5px 11px; font-size: 12.5px; }
}
@media (max-width: 700px) {
  /* keep the 4-step lifecycle legible: let it scroll instead of shrinking */
  .cycle-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cycle-svg { min-width: 660px; }
  .util-tagline { font-size: 12px; }
}
@media (max-width: 520px) {
  .util-tagline { display: none; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 44px; }
  .section { padding: 52px 0; }
  .chart-controls { flex-direction: column; align-items: stretch; }
  .people-grid { grid-template-columns: 1fr; }
}