/* ============================================================
   index.css — styles for the landing page only: hero, pillars,
   the featured project, stories, the closing CTA, the newsletter
   block and the partners strip, plus the decorative atmosphere
   layered on top of them.

   The shared shell lives in base.css (tokens, reset) and
   chrome.css (header, footer, panel, buttons).
   ============================================================ */

/* ===================== PAGE TOKENS ===================== */
:root{
  --maxw: 1180px;   /* wide landing-page measure; base.css holds the shared tokens */
}

/* Decorative avatar initial: use the brighter accent so it reads on the dark tint */
html[data-theme="dark"] .app .avatar{ color: var(--accent); }

/* ===================== RESET (page-specific) ===================== */
/* Shared reset lives in base.css; these are the landing page's own
   typographic defaults, which the document pages deliberately don't share. */
body{ line-height:1.6; }
.app{ background:var(--bg); color:var(--ink); min-height:100vh; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.08; letter-spacing:-0.015em; margin:0; }
p{ margin:0; text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }

/* ===================== LAYOUT ===================== */
.section{ padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--alt{ background:var(--surface); border-block:1px solid var(--border); }
.eyebrow{
  font-family:var(--font-body); font-weight:700; font-size:0.82rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-text); margin-bottom:0.9rem;
}
.section-head{ max-width:60ch; margin-bottom:clamp(2rem,5vw,3.2rem); }
.section-title{ font-size:clamp(1.8rem, 4vw, 2.7rem); margin-bottom:0.9rem; }
.section-lead{ font-size:1.12rem; color:var(--muted); max-width:58ch; }

/* ===================== HERO ===================== */
.hero{ padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem,7vw,5.5rem); }
.hero__inner{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__title{ font-size:clamp(2.3rem, 6vw, 4rem); margin-bottom:1.1rem; }
.hero__lead{ font-size:clamp(1.1rem,2vw,1.3rem); color:var(--muted); max-width:50ch; margin-bottom:1.8rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:0.8rem; }

/* ===================== ABOUT / PILLARS ===================== */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.6rem); }
.pillar{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem 1.5rem; }
.section--alt .pillar{ background:var(--bg); }
.pillar__num{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--accent-strong); display:inline-block; margin-bottom:0.8rem; }
.pillar__title{ font-size:1.25rem; margin-bottom:0.5rem; }
.pillar__body{ color:var(--muted); }

/* ===================== FEATURED PROJECT ===================== */
.feature{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(1.5rem,4vw,3rem); align-items:stretch; }
/* media cell stretches to the row height (set by the text column); the cover is a
   square sized off that height, so it fills the section's height and stays square */
.feature__media{ position:relative; height:100%; width:fit-content; justify-self:center; }
.feature__cover{ height:100%; width:auto; aspect-ratio:1 / 1; max-width:100%; object-fit:cover; display:block; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); }
.kicker{ font-family:var(--font-body); font-weight:700; font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-text); margin-bottom:0.7rem; }
.feature__title{ font-size:clamp(1.6rem,3.5vw,2.3rem); margin-bottom:0.9rem; }
.feature__text{ color:var(--muted); font-size:1.08rem; margin-bottom:1.3rem; }
.feature__list{ display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1.6rem; }
.feature__list li{ display:flex; gap:0.7rem; align-items:flex-start; font-weight:700; }
.tick{ color:var(--accent-text); font-weight:800; }
.status-chip{
  position:absolute; top:0.9rem; left:0.9rem;
  display:inline-flex; align-items:center; gap:0.45rem;
  background:var(--bg); color:var(--ink); border:1px solid var(--border-2);
  padding:0.4rem 0.75rem; border-radius:99px; font-weight:700; font-size:0.85rem;
}
.status-dot{ width:9px; height:9px; border-radius:99px; background:var(--accent); }
.status-chip .status-dot{ animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

.feature__actions{ display:flex; flex-wrap:wrap; gap:0.8rem; }
.feature__note{ margin-top:0.9rem; font-size:0.95rem; color:var(--muted); }
.feature__support{ margin-top:1rem; font-size:0.95rem; color:var(--muted); display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; }
.el-credit{ display:inline-flex; align-items:center; }
.el-credit-prog{ font-weight:700; color:var(--ink); }
.el-inline{ height:1.15em; width:auto; display:block; }
.el-inline--dark{ display:none; }
html[data-theme="dark"] .el-inline--light{ display:none; }
html[data-theme="dark"] .el-inline--dark{ display:block; }
/* high contrast forces a white background -> show the black wordmark */
html[data-contrast="high"] .el-inline--light{ display:block; }
html[data-contrast="high"] .el-inline--dark{ display:none; }

.next-note{
  margin-top:clamp(1.5rem,4vw,2.5rem); display:flex; flex-wrap:wrap; gap:0.5rem 1rem; align-items:baseline;
  padding:1.1rem 1.3rem; border:1px dashed var(--border-2); border-radius:var(--radius); color:var(--muted);
}
.next-note strong{ color:var(--ink); }

/* ===================== STORIES ===================== */
.stories{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.6rem); }
.story{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:1.2rem; }
.story__quote{ margin:0; font-size:1.12rem; font-weight:700; line-height:1.45; }
.story__quote::before{ content:"\201C"; color:var(--accent); font-family:var(--font-display); font-size:1.4em; line-height:0; margin-right:0.05em; }
.story__person{ display:flex; align-items:center; gap:0.75rem; margin-top:auto; }
.avatar{ width:44px; height:44px; border-radius:99px; background:var(--accent-soft); color:var(--accent-strong); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.1rem; border:1px solid var(--border); }
.story__meta{ display:flex; flex-direction:column; }
.story__name{ font-weight:700; }
.story__role{ color:var(--muted); font-size:0.92rem; }
.disclaimer{ margin-top:1.4rem; color:var(--muted); font-size:0.9rem; font-style:italic; }

/* ===================== BOTTOM CTA ===================== */
.cta{ background:var(--accent-tint); border-block:1px solid var(--border); padding-block:clamp(1.6rem,3.5vw,2.6rem) clamp(3.5rem,8vw,6rem); position:relative; overflow:hidden; }
.cta__inner{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; }
.cta__image{
  flex:0 0 auto; width:min(620px,100%); height:auto; aspect-ratio:2448 / 496;
  object-fit:cover; margin:0 auto 1.6rem; display:block; border-radius:16px;
  /* strong left/right feather into the background; top & bottom stay crisp */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 30%, #000 70%, transparent 100%);
  /* light areas melt into the background, dark ink stays — luminance-style blend */
  mix-blend-mode:multiply;
}
html[data-theme="dark"] .cta__image{ mix-blend-mode:screen; }
.cta__title{ font-size:clamp(1.9rem,4.5vw,3rem); margin-bottom:0.9rem; max-width:18ch; }
.cta__body{ color:var(--muted); font-size:1.15rem; max-width:52ch; margin-bottom:1.8rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center; }

/* ===================== NEWSLETTER ===================== */
.newsletter__inner{ max-width:680px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; text-align:center; }
.newsletter__inner .section-lead{ margin-inline:auto; }
.nl-form{ display:flex; align-items:flex-end; justify-content:center; flex-wrap:wrap; gap:0.8rem; width:100%; margin-top:1.8rem; }
.nl-field{ flex:1 1 260px; max-width:400px; text-align:left; }
.nl-label{ display:block; font-weight:700; font-size:0.95rem; margin-bottom:0.4rem; }
.nl-input{
  width:100%; min-height:52px; padding:0.7rem 1rem;
  font:inherit; color:var(--ink); background:var(--bg);
  border:2px solid var(--border-2); border-radius:var(--radius);
}
.nl-input:hover{ border-color:var(--ink); }
/* Brevo honeypot field — must exist in the DOM but never be seen or focused */
.nl-hp{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nl-status{ margin-top:1rem; font-weight:700; min-height:1.6em; color:var(--accent-text); }
.nl-status.is-error{ color:var(--ink); }
.nl-consent{ margin-top:0.7rem; font-size:0.88rem; color:var(--muted); max-width:56ch; }

/* ===================== PARTNERS ===================== */
/* Each partner logo sits on its own tile — white by default, which is
   brand-safe for the ElevenLabs wordmark (black-on-white, clear space >=
   logo height), the PZN mark (its native white background) and the Szansa
   mark, and theme-independent. Heavys ships a white-only wordmark, so its
   tile is black instead (.partner-card--dark). */
.partners{ background:var(--bg); border-top:1px solid var(--border); padding-block:clamp(2.5rem,6vw,4rem); }
.partners__title{ font-size:clamp(1.3rem,3vw,1.8rem); text-align:center; margin-bottom:clamp(1.4rem,3.5vw,2.2rem); }
/* auto-fit keeps the tiles balanced: 2x2 on desktop, one per row on phones */
.partners__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(1rem,2.5vw,1.6rem); max-width:800px; margin-inline:auto;
}
.partners__grid > li{ display:flex; }
.partner-card{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center; gap:18px;
  min-height:128px; padding:24px 30px; text-decoration:none;
  background:#fff; border:1px solid var(--border-2); border-radius:14px; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.partner-card:hover{ transform:translateY(-3px); }
.partner-logo{ display:block; width:auto; }
.partner-logo--el{ height:30px; }
.partner-logo--pzn{ height:68px; }
.partner-logo--szansa{ height:70px; }
.partner-logo--heavys{ height:30px; }
/* Heavys supplies the wordmark in white only — it needs a black tile to stay legible */
.partner-card--dark{ background:#000; }
/* tiles are always white in both themes, so the caption needs a fixed dark colour */
.partner-name{ font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.2; color:#1b1f27; text-align:left; }
html[data-contrast="high"] .partner-card{ box-shadow:none; border-color:#000; }
html[data-contrast="high"] .partner-name{ color:#000; }

@media (max-width: 880px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; }
  .feature{ grid-template-columns:1fr; }
  .feature__media{ width:auto; height:auto; }
  .feature__cover{ width:100%; height:auto; }
  .pillars{ grid-template-columns:1fr; }
  .stories{ grid-template-columns:1fr; }
}

/* ============================================================
   AESTHETIC LAYER — "sound made visible"
   Decorative depth, motion and refinements layered on top of the
   accessible base. Every effect here is disabled in high-contrast
   mode and respects reduced-motion, so legibility never regresses.
   Sharp corners and Atkinson Hyperlegible are preserved throughout.
   ============================================================ */

/* --accent-2 and the two glow tokens now live in base.css. */
.app{ position:relative; isolation:isolate; }

/* fixed atmospheric radial glows + a whisper of grain, behind content */
.app::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 55% at 88% -8%, var(--glow-1), transparent 68%),
    radial-gradient(46% 48% at -6% 12%, var(--glow-2), transparent 66%),
    radial-gradient(52% 52% at 50% 118%, var(--glow-1), transparent 72%);
}

.app::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[data-contrast="high"] .app::before,
html[data-contrast="high"] .app::after{ display:none; }

::selection{ background: var(--accent-soft); color: var(--ink); }

html{ scrollbar-color: color-mix(in oklab, var(--accent), transparent 45%) transparent; }

/* eyebrow & kicker become "spark" chips */
.eyebrow, .kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--accent-tint);
  border:1px solid color-mix(in oklab, var(--accent), transparent 80%);
  padding:.42rem .8rem; border-radius:99px; margin-bottom:1rem;
}

.eyebrow::before, .kicker::before{
  content:""; flex:0 0 auto; width:7px; height:7px; border-radius:99px; background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%);
}

/* HERO — soft glow behind the image */
.hero__visual{ position:relative; }

.hero__visual::before{
  content:""; position:absolute; inset:-14% -8%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, var(--glow-1), transparent 72%); filter:blur(8px);
}

html[data-contrast="high"] .hero__visual::before{ display:none; }

/* hero image in a softly rounded container, glow behind it */
.hero__media{
  position:relative; z-index:1;
  width:100%; max-width:440px; margin-inline:auto;
  aspect-ratio:4 / 5; border-radius:16px; overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 1px 0 color-mix(in oklab,#fff,transparent 82%) inset, var(--shadow);
}

.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* staggered entrance for the hero on first paint */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
.hero__copy > *{ animation:fadeUp .7s both; }
.hero__copy > *:nth-child(1){ animation-delay:.04s; }
.hero__copy > *:nth-child(2){ animation-delay:.12s; }
.hero__copy > *:nth-child(3){ animation-delay:.20s; }
.hero__copy > *:nth-child(4){ animation-delay:.28s; }
.hero__visual{ animation:fadeUp .8s .18s both; }

/* PILLARS — icon tile, hover lift, gradient top edge, watermark numeral */
.pillar{ position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

.pillar::after{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }

.pillar:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--border-2); }

.pillar:hover::after{ transform:scaleX(1); }

html[data-contrast="high"] .pillar::after{ display:none; }

.pillar__icon{ width:48px; height:48px; border-radius:var(--radius); display:grid; place-items:center; margin-bottom:1.1rem;
  background:var(--accent-tint); color:var(--accent-text); border:1px solid color-mix(in oklab,var(--accent),transparent 82%); }

.pillar__icon svg{ width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.pillar__num{ position:absolute; top:.4rem; right:1rem; margin:0; font-size:2.6rem; line-height:1; pointer-events:none;
  color:color-mix(in oklab, var(--accent), transparent 88%); }

html[data-contrast="high"] .pillar__num{ display:none; }

/* STORIES — watermark quote, hover lift, gradient avatar */
.story{ position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

.story:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--border-2); }

.story > *{ position:relative; z-index:1; }

.story::after{ content:"\201C"; position:absolute; top:-.6rem; right:.7rem; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:6rem; line-height:1;
  color:color-mix(in oklab, var(--accent), transparent 90%); }

html[data-contrast="high"] .story::after{ display:none; }

.avatar{ background:linear-gradient(135deg, var(--accent), var(--accent-strong)); color:var(--on-accent); border:none; box-shadow:0 0 0 1px var(--border); }

html[data-theme="dark"] .app .avatar{ color:var(--on-accent); }

html[data-contrast="high"] .avatar{ background:var(--accent-soft); color:var(--accent-strong); border:1px solid var(--border); box-shadow:none; }

/* NEXT-NOTE — faint accent wash */
.next-note{ background:color-mix(in oklab, var(--accent), transparent 94%); }

html[data-contrast="high"] .next-note{ background:transparent; }

/* CTA — glows live in the background so the image can blend against them */
.cta{ overflow:hidden;
  background:
    radial-gradient(42% 62% at 12% 0%,  var(--glow-1), transparent 60%),
    radial-gradient(46% 70% at 88% 100%, var(--glow-2), transparent 60%),
    var(--accent-tint); }

html[data-contrast="high"] .cta{ background:var(--accent-tint); }

/* SCROLL REVEAL — only when motion is allowed; content is fully visible otherwise */
html.reveals-on:not([data-motion="reduce"]) .reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }

html.reveals-on:not([data-motion="reduce"]) .reveal.is-in{ opacity:1; transform:none; }

html.reveals-on:not([data-motion="reduce"]) .pillars .pillar:nth-child(2),
html.reveals-on:not([data-motion="reduce"]) .stories .story:nth-child(2){ transition-delay:.09s; }

html.reveals-on:not([data-motion="reduce"]) .pillars .pillar:nth-child(3),
html.reveals-on:not([data-motion="reduce"]) .stories .story:nth-child(3){ transition-delay:.18s; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__copy > *, .hero__visual{ animation:none !important; }
}