/* ============================================================
   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; }
/* A single long Polish word ("niepełnosprawnościami") is wider than a 320px
   column at hero size. Break inside it rather than widen the page; hyphens:auto
   was tried and split words in headlines that would have fit whole. */
h1,h2,h3{ overflow-wrap:anywhere; }
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 ===================== */
/* overflow-x:clip: the decorative glow behind the image (.hero__visual::before)
   reaches 8% past its box and widened the page on narrow screens. */
.hero{ padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem,7vw,5.5rem); overflow-x:clip; }
/* minmax(0, …) rather than a bare fr: a bare fr floors at the column's
   min-content width, and a 4rem heading full of long Polish compounds has a
   very wide min-content. Without it the text column claimed 790px of 1180px
   and squeezed the illustration down to 194px. */
.hero__inner{ display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
/* Sized so the longest word in the headline fits the text column, because a
   single word cannot wrap inside itself: once it is wider than the column it
   simply spills under the illustration.

   "niepełnosprawnościami" renders about 11x the font size, and the column is
   roughly 40% of the viewport (capped once .wrap hits --maxw). Hence 3.3vw,
   and a max in px rather than rem: the accessibility text control scales rem
   but neither vw nor the column, so a rem cap would break the layout at 130%
   on a wide screen. 50px is still the largest type on the page, and below the
   880px breakpoint the hero is single-column, where the rem minimum applies
   and the heading scales freely again. */
.hero__title{ font-size:clamp(1.75rem, 3.3vw, 50px); line-height:1.14; 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,minmax(0,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:minmax(0, 0.9fr) minmax(0, 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:var(--radius-media); 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:var(--radius-media);
  /* 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-control); 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, the Szansa mark and the CyberSprawni wordmark (black and navy on
   transparent), 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;
  container-type:inline-size;
}
.partners__grid > li{ display:flex; }
/* An odd number of tiles leaves the last one alone in the left column.
   Once the grid is two columns wide (two 280px tracks plus the 1rem gap),
   centre that tile at the width of a single column instead. */
@container (min-width: 576px){
  .partners__grid > li:last-child:nth-child(odd){ grid-column:1 / -1; justify-content:center; }
  .partners__grid > li:last-child:nth-child(odd) > .partner-card{
    flex:0 1 auto; width:calc(50% - clamp(1rem,2.5vw,1.6rem) / 2);
  }
}
.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; }
/* the wordmark is five times wider than tall, so it is capped by width and must shrink on narrow tiles */
.partner-logo--cyber{ width:min(248px,100%); height:auto; }
/* Heavys supplies the wordmark in white only, so 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){
  /* minmax(0,1fr), not 1fr: bare fr floors at min-content, and the longest word
     of the H1 made the hero column 346px wide on a 320px screen (see README). */
  .hero__inner{ grid-template-columns:minmax(0,1fr); }
  .hero__visual{ order:-1; }
  .feature{ grid-template-columns:minmax(0,1fr); }
  .feature__media{ width:auto; height:auto; }
  .feature__cover{ width:100%; height:auto; }
  .pillars{ grid-template-columns:minmax(0,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:480px; margin-inline:auto;
  aspect-ratio:4 / 5; border-radius:var(--radius-media); 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; }
}