/* The public page at kongresa.com (www/index.html): a full-width hero with a drawing of a congress hall
   (moving gently; still for reduced motion), then three short sections. Kongresa's own colours, never a
   client's; AA contrast in light and dark. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin-wght-normal.woff2) format('woff2');
}
:root {
  --bg: #FFFFFF; --wash: #F4F6F9; --line: #E2E6EB;
  --ink: #15171C; --ink-2: #4A505B; --ink-3: #5F6570;   /* 16.8:1, 8.0:1, 5.9:1 on white */
  --accent: #2F5B8F;                                    /* 6.9:1 on white */
  --night: #081428;                                     /* the hero's ground */
  --pad: clamp(20px, 5vw, 64px);
  --col: 1120px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1117; --wash: #161A22; --line: #272C35;
    --ink: #F3F4F6; --ink-2: #B9BFC9; --ink-3: #A0A7B2;   /* 16.9:1, 9.9:1, 7.4:1 on --bg */
    --accent: #93B6EA;                                    /* 9.0:1 on --bg */
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a:focus-visible { outline: 3px solid #9CC2FF; outline-offset: 4px; border-radius: 6px; }

/* ---------- the hero: the drawing fills it, the words sit on its darker side ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: #FFFFFF;
  min-height: clamp(560px, 88vh, 900px); display: flex; flex-direction: column; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 20, 40, .94) 0%, rgba(8, 20, 40, .82) 34%, rgba(8, 20, 40, .18) 64%, rgba(8, 20, 40, 0) 80%); }
.bar, .hero-text, main, .foot-in { width: 100%; max-width: var(--col); margin: 0 auto; padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
.bar { padding-top: calc(24px + env(safe-area-inset-top)); }
.mark { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.hero-text { margin-top: auto; margin-bottom: auto; padding-top: 32px; padding-bottom: 56px; }
.hero-text > * { max-width: 30rem; }
.hero-text > h1 { max-width: 34rem; }
.eyebrow { margin: 0 0 14px; color: #A9C8F5; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; }   /* 9.6:1 on the ground */
h1 { margin: 0; font-size: clamp(2.4rem, 4.6vw, 3.75rem); line-height: 1.04; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.lead { margin: 20px 0 0; font-size: clamp(1.125rem, 1.8vw, 1.3rem); line-height: 1.55; color: #D6E0EE; }   /* 13:1 */

/* narrower screens (phones, tablets upright): the words above, the hall below them, sized to the
   width and placed so the screen and the speaker are in view */
@media (max-width: 1080px) {
  .hero { min-height: 0; --art: clamp(300px, 46vw, 480px); }
  .hero-text { margin-top: 0; padding-top: 40px; padding-bottom: calc(var(--art) - 10px); }
  .hero-shade { background: linear-gradient(180deg, rgba(8, 20, 40, .96) 0%, rgba(8, 20, 40, .9) 40%, rgba(8, 20, 40, .25) 66%, rgba(8, 20, 40, 0) 82%); }
  /* at least the full width (no edge shows), slid left just enough to keep the screen and speaker in view */
  .hero-art { inset: auto; bottom: 0; height: var(--art); width: max(100%, calc(var(--art) * 16 / 9));
    left: clamp(calc(100% - max(100%, calc(var(--art) * 16 / 9))), calc(50% - var(--art) * 1.42), 0px); }
}

/* ---------- the hall moving: slow and quiet ---------- */
.hero-art .beam { animation: beam 7s ease-in-out infinite; }
.hero-art .b2 { animation-delay: -2.3s; }
.hero-art .b3 { animation-delay: -4.6s; }
@keyframes beam { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.hero-art .trend { stroke-dasharray: 100; stroke-dashoffset: 0; animation: draw 9s ease-in-out infinite; }
.hero-art .area, .hero-art .trend-dot { animation: show 9s ease-in-out infinite; }
@keyframes draw { 0% { stroke-dashoffset: 100; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes show { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
.hero-art .col { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 9s cubic-bezier(.2, .7, .2, 1) infinite; }
.hero-art .col2 { animation-delay: .25s; } .hero-art .col3 { animation-delay: .5s; } .hero-art .col4 { animation-delay: .75s; }
@keyframes grow { 0% { transform: scaleY(.08); } 30%, 92% { transform: scaleY(1); } 100% { transform: scaleY(.08); } }
.hero-art .ecg { stroke-dasharray: 22 78; animation: run 3.2s linear infinite; }
@keyframes run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.hero-art .live { animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.hero-art .phone { animation: glow 4s ease-in-out infinite; }
.hero-art .phone:nth-of-type(2n) { animation-delay: -1.7s; }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.hero-art .arm { transform-box: fill-box; transform-origin: 100% 100%; animation: point 6s ease-in-out infinite; }
@keyframes point { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero-art * { animation: none !important; }
  .hero-art .ecg { stroke-dasharray: none; }
}

/* ---------- the sections ---------- */
main { flex: 1 0 auto; padding-top: clamp(24px, 5vh, 56px); padding-bottom: clamp(32px, 6vh, 72px); }
.block { padding: clamp(28px, 5vh, 48px) 0; }
.block + .block { border-top: 1px solid var(--line); }
h2 { margin: 0 0 14px; font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
h3 { margin: 14px 0 6px; font-size: 1.0625rem; font-weight: 650; }
p { margin: 0; max-width: 44em; color: var(--ink-2); }

.cards { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.card { padding: 24px; border-radius: 18px; background: var(--wash); border: 1px solid var(--line); }
.card p { font-size: 1rem; }
.icon { width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; max-width: 46em; }
.points li { position: relative; padding-left: 24px; color: var(--ink-2); }
.points li::before { content: ''; position: absolute; left: 3px; top: .58em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.points strong { color: var(--ink); font-weight: 600; }

.foot { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.foot-in > * { margin: 0; }
.foot-in { padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.foot p { font-size: .875rem; color: var(--ink-3); }