/* ===== Self-hosted fonts (RODO — brak Google Fonts CDN). Variable woff2. ===== */
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("/assets/fonts/hanken.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
/* ============================================================
   Kleova — kleova.co v1 · stylesheet
   Built on tokens.css (source of truth). Premium / peer /
   quiet-luxury / editorial. Mobile-first. "Dużo światła".
   ============================================================ */

:root {
  /* extended neutrals layered on the token base */
  --ink-soft:   #1B2230;   /* slightly lifted dark for layering on ink */
  --ink-line:   #2A3240;   /* hairline on dark */
  --paper-deep: #EFEBE3;   /* recessed paper band */
  --muted-dark: #8B93A3;   /* muted text on dark */
  --muted-dim:  #AEB4C0;   /* body text on dark */

  /* the switchable secondary accent (tweakable: brass | burgundy) */
  --accent:      var(--kleova-brass);
  --accent-deep: var(--kleova-brass-deep);

  /* fluid display scale (Fraunces) */
  --fs-mega:    clamp(3.4rem, 11vw, 8rem);     /* hero wordmark */
  --fs-display: clamp(2.4rem, 5.2vw, 4rem);    /* big statements */
  --fs-h1:      clamp(2rem, 4vw, 3.1rem);
  --fs-h2:      clamp(1.6rem, 2.8vw, 2.4rem);
  --fs-h3:      clamp(1.25rem, 1.8vw, 1.6rem);

  /* rhythm */
  --section-y:  clamp(72px, 11vh, 140px);
  --gutter:     clamp(20px, 6vw, 96px);
  --maxw:       1200px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- accent tweak: burgundy ---------- */
[data-accent="burgundy"] { --accent: var(--kleova-burgundy); --accent-deep: #621F29; }

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--kleova-paper);
  color: var(--kleova-ink);
  font-family: var(--kleova-font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--kleova-font-display);
  font-optical-sizing: auto;
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

/* ---------- layout helpers ---------- */
section[id] { scroll-margin-top: 80px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 7vh, 88px); }

.eyebrow {
  font-family: var(--kleova-font-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.on-dark .eyebrow { color: var(--accent); }

.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--kleova-graphite); max-width: 56ch; }
.muted { color: var(--kleova-muted); }
.serif { font-family: var(--kleova-font-display); }

/* dark sections */
.on-dark { background: var(--kleova-ink); color: var(--kleova-paper); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--kleova-paper); }
.on-dark .lede { color: var(--muted-dim); }
.on-dark .muted { color: var(--muted-dark); }

.band-deep { background: var(--paper-deep); }
.hairline-top { border-top: 1px solid var(--kleova-line); }
.on-dark.hairline-top, .hairline-top.on-dark { border-color: var(--ink-line); }

/* ---------- wordmark ---------- */
.wm {
  font-family: var(--kleova-font-display);
  font-optical-sizing: auto;
  font-weight: 560;
  letter-spacing: 0.01em;
  line-height: 1;
  display: inline-block;
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--kleova-font-text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: var(--kleova-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--kleova-ink); }
.btn--primary:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--kleova-ink); border-color: var(--kleova-line); }
.btn--ghost:hover { border-color: var(--kleova-ink); transform: translateY(-1px); }
.on-dark .btn--ghost { color: var(--kleova-paper); border-color: var(--ink-line); }
.on-dark .btn--ghost:hover { border-color: var(--muted-dim); }
.btn--link {
  background: none; border: none; padding: 0;
  color: var(--accent-deep); font-weight: 600;
  border-bottom: 1px solid transparent; border-radius: 0;
}
.on-dark .btn--link { color: var(--accent); }
.btn--link:hover { border-bottom-color: currentColor; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--kleova-paper) 86%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--kleova-line); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.site-header .wm { font-size: 1.5rem; color: var(--kleova-ink); }
.nav { display: flex; align-items: center; gap: 34px; }
.nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; font-size: 0.9rem; font-weight: 500;
  color: var(--kleova-graphite); letter-spacing: 0.01em;
  position: relative; padding-block: 6px; white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--accent); transition: width .28s var(--ease);
}
.nav-links a:hover { color: var(--kleova-ink); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { padding: 11px 20px; font-size: 0.9rem; }

.hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--kleova-ink); margin: 5px 0; transition: .3s; }

@media (max-width: 760px) {
  .nav-links {
    display: none; position: absolute; top: 60px; left: 0; right: 0;
    background: var(--kleova-paper); border-bottom: 1px solid var(--kleova-line);
    flex-direction: column; gap: 0; padding: 6px var(--gutter) 18px;
  }
  .site-header.nav-open .nav-links { display: flex; }
  .site-header.nav-open { border-bottom-color: var(--kleova-line); }
  .nav-links a { padding: 13px 0; font-size: 1rem; border-bottom: 1px solid var(--kleova-line); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav { gap: 12px; }
  .hamburger { display: block; }
  .site-header.nav-open .hamburger span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .site-header.nav-open .hamburger span:nth-child(2){ opacity: 0; }
  .site-header.nav-open .hamburger span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
  .header-inner { height: 60px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero.on-dark { background: var(--kleova-ink); }
.hero-inner { position: relative; z-index: 2; padding-block: clamp(64px, 13vh, 150px) clamp(72px, 13vh, 150px); }
.hero-eyebrow { color: var(--accent); }
.hero-mega {
  font-size: var(--fs-mega);
  color: var(--kleova-brass); /* wordmark stays a locked colorway, never the burgundy accent */
  letter-spacing: 0.005em;
  margin: 0 0 6px;
  line-height: 0.92;
}
.hero-tag {
  font-size: var(--fs-display);
  color: var(--kleova-paper);
  max-width: 17ch;
  margin: 16px 0 0;
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.hero-sub { color: var(--muted-dim); font-size: clamp(1.05rem,1.4vw,1.25rem); max-width: 46ch; margin: 22px 0 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero-note {
  display: flex; align-items: center; gap: 10px;
  margin-top: 30px; color: var(--muted-dark); font-size: 0.92rem;
}
.hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* echo motif (generic — used in waitlist etc.) */
.echo {
  position: absolute; pointer-events: none;
  color: var(--accent);
  stroke: currentColor; fill: none;
  stroke-linecap: round;
}

/* ---------- HERO ART: the "echo" as a full illustration ---------- */
.hero-art {
  position: absolute; pointer-events: none; z-index: 1;
  right: clamp(-180px, -8vw, -40px);
  top: 50%; transform: translateY(-50%);
  width: min(82vh, 720px); height: min(82vh, 720px);
}
.hero-art svg { width: 100%; height: 100%; overflow: visible; }
.hero-art .rip-arc { fill: none; stroke-linecap: round; }
.hero-art .rip-dark { stroke: #2C3340; }
.hero-art .rip-brass { stroke: url(#kvBrass); }
.hero-art .rip-origin { fill: var(--accent); }
.hero-art .rip-glow { fill: url(#kvGlow); }
.hero-art .rip-signal { fill: var(--accent); }

/* breathe + shimmer (subtle, slow) */
.hero-art .rip { transform-origin: 62% 50%; animation: kvBreathe 9s var(--ease) infinite; }
.hero-art .rip-brass { animation: kvShimmer 7s ease-in-out infinite; }
.hero-art .rip-brass.s2 { animation-delay: -2.3s; }
.hero-art .rip-glow { animation: kvPulse 5.5s ease-in-out infinite; transform-origin: 62% 50%; }
.hero-art .rip-signal { animation: kvSignal 6s ease-in-out infinite; }
.hero-art .rip-signal.d2 { animation-delay: -1.6s; }
.hero-art .rip-signal.d3 { animation-delay: -3.4s; }
.hero-art .rip-signal.d4 { animation-delay: -4.7s; }
@keyframes kvBreathe { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.025);} }
@keyframes kvShimmer { 0%,100%{ opacity:.5;} 50%{ opacity:.95;} }
@keyframes kvPulse   { 0%,100%{ opacity:.35; transform: scale(1);} 50%{ opacity:.7; transform: scale(1.15);} }
@keyframes kvSignal  { 0%{ opacity:0; transform: translateX(0);} 12%{opacity:1;} 70%{opacity:.6;} 100%{ opacity:0; transform: translateX(-26px);} }
[data-anim-off] .hero-art *, [data-anim-off] .hero-art { animation: none !important; }
@media (prefers-reduced-motion: reduce){ .hero-art *{ animation: none !important; } }

@media (max-width: 760px) {
  .hero-art { right: -34vw; top: 18%; width: 96vw; height: 96vw; opacity: .9; }
  .hero-tag { max-width: 18ch; }
}

/* light hero: brighten arcs, soften darks */
[data-hero="light"] .hero-art .rip-dark { stroke: #D8D2C5; }

/* --- light hero variant (tweak) --- */
[data-hero="light"] .hero.on-dark { background: var(--kleova-paper); }
[data-hero="light"] .hero .hero-mega { color: var(--kleova-brass-deep); }
[data-hero="light"] .hero .hero-tag { color: var(--kleova-ink); }
[data-hero="light"] .hero .hero-sub { color: var(--kleova-graphite); }
[data-hero="light"] .hero .hero-eyebrow { color: var(--accent-deep); }
[data-hero="light"] .hero .hero-note { color: var(--kleova-muted); }
[data-hero="light"] .hero .echo { opacity: 0.16; color: var(--accent); }
[data-hero="light"] .hero .btn--ghost { color: var(--kleova-ink); border-color: var(--kleova-line); }
[data-hero="light"] .hero .btn--ghost:hover { border-color: var(--kleova-ink); }

/* ============================================================
   SHIFT (statement + IG1)
   ============================================================ */
.statement { font-size: var(--fs-display); max-width: 20ch; }
.statement .accent { color: var(--accent-deep); }
.shift-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 900px) { .shift-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   PILLARS (what Kleova is)
   ============================================================ */
.pillars { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--kleova-line); border: 1px solid var(--kleova-line); border-radius: var(--kleova-radius); overflow: hidden; }
@media (min-width: 820px) { .pillars { grid-template-columns: repeat(3,1fr); } }
.pillar { background: var(--kleova-white); padding: clamp(28px,3vw,42px); display: flex; flex-direction: column; gap: 14px; }
.pillar-mark { width: 42px; height: 42px; color: var(--accent-deep); }
.pillar h3 { font-size: var(--fs-h3); }
.pillar .num { font-family: var(--kleova-font-display); font-size: 0.85rem; color: var(--kleova-muted); letter-spacing: 0.04em; }
.pillar p { color: var(--kleova-graphite); font-size: 1rem; }
.pillar .stat { font-family: var(--kleova-font-display); color: var(--accent-deep); font-size: 1.1rem; margin-top: auto; padding-top: 8px; }

/* ============================================================
   GENERIC infographic frame
   ============================================================ */
.ig {
  background: var(--kleova-white);
  border: 1px solid var(--kleova-line);
  border-radius: var(--kleova-radius);
  padding: clamp(24px, 3.5vw, 48px);
  position: relative;
}
.ig-cap { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kleova-muted); font-weight: 600; }
.ig-title { font-family: var(--kleova-font-display); font-size: var(--fs-h3); margin: 6px 0 0; }

/* ============================================================
   HOW IT WORKS — IG2 (most important)
   ============================================================ */
.flow { display: grid; gap: 0; grid-template-columns: 1fr; counter-reset: step; }
.flow-step {
  display: grid; grid-template-columns: auto 1fr; gap: 22px;
  padding: 26px 0; position: relative;
}
.flow-step:not(:last-child) { border-bottom: 1px solid var(--kleova-line); }
.flow-num {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent-deep);
  font-family: var(--kleova-font-display); font-size: 1.15rem;
  display: grid; place-items: center; flex: none;
}
.flow-step h3 { font-size: 1.2rem; margin-bottom: 4px; }
.flow-step p { color: var(--kleova-graphite); font-size: 0.98rem; }
.flow-rail { position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: var(--kleova-line); z-index: 0; }
.handoff {
  margin-top: 14px;
  background: var(--kleova-ink); color: var(--kleova-paper);
  border-radius: var(--kleova-radius);
  padding: 24px clamp(22px,3vw,34px);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.handoff .label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.handoff .line { font-family: var(--kleova-font-display); font-size: clamp(1.2rem,2vw,1.7rem); }
.handoff .you { color: var(--accent); }
.handoff-divider {
  display:flex; align-items:center; gap:14px; margin: 4px 0 0;
  color: var(--accent-deep); font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:600;
}
.handoff-divider::before, .handoff-divider::after { content:""; height:1px; background: var(--accent); flex:1; opacity:.5; }

/* desktop horizontal flow */
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .flow-step {
    grid-template-columns: 1fr; gap: 16px;
    padding: 0 28px 0 0; border: 0 !important;
    align-content: start;
  }
  .flow-step:not(:last-child)::after {
    content: ""; position: absolute; top: 23px; right: 14px; width: 16px; height: 16px;
    border-top: 1px solid var(--accent); border-right: 1px solid var(--accent);
    transform: rotate(45deg); opacity: .6;
  }
  .flow-rail { top: 23px; bottom: auto; left: 46px; right: 28px; width: auto; height: 1px; }
}

/* ============================================================
   DIFFERENT — IG4 (positioning matrix)
   ============================================================ */
.notlist { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.notpill {
  border: 1px solid var(--kleova-line); border-radius: 100px;
  padding: 8px 16px; font-size: 0.9rem; color: var(--kleova-muted);
  text-decoration: line-through; text-decoration-color: var(--kleova-burgundy, #7B2D3A);
}
.matrix { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
@media (min-width: 720px){ .matrix{ grid-template-columns: repeat(2,1fr);} }
.mx-card {
  border: 1px solid var(--kleova-line); border-radius: var(--kleova-radius);
  padding: 22px 24px; background: var(--kleova-white);
  display: flex; flex-direction: column; gap: 12px;
}
.mx-card.is-kleova { background: var(--kleova-ink); color: var(--kleova-paper); border-color: var(--kleova-ink); }
.mx-card .who { font-family: var(--kleova-font-display); font-size: 1.15rem; }
.mx-card.is-kleova .who { color: var(--accent); }
.mx-attrs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mx-attrs li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--kleova-graphite); }
.mx-card.is-kleova .mx-attrs li { color: var(--muted-dim); }
.mx-attrs .ck { color: var(--accent-deep); flex: none; margin-top: 2px; }
.mx-card.is-kleova .mx-attrs .ck { color: var(--accent); }
.mx-attrs .no { color: var(--kleova-muted); flex: none; margin-top: 2px; opacity:.7; }

/* ============================================================
   PROOF — IG3 (premium dashboard)
   ============================================================ */
.dash { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--kleova-line); border: 1px solid var(--kleova-line); border-radius: var(--kleova-radius); overflow: hidden; }
@media (min-width: 820px){ .dash{ grid-template-columns: repeat(3,1fr);} }
.metric { background: var(--kleova-white); padding: clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:10px; }
.metric .k { font-size: 0.74rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--kleova-muted); font-weight:600; }
.metric .v { font-family: var(--kleova-font-display); font-size: clamp(2.6rem,4vw,3.4rem); color: var(--kleova-ink); line-height:1; }
.metric .v .unit { color: var(--accent-deep); font-size: 0.45em; margin-left: 4px; }
.metric .desc { color: var(--kleova-graphite); font-size: 0.92rem; }
.metric .spark { margin-top: 6px; height: 44px; }
.proof-foot { margin-top: 16px; color: var(--kleova-graphite); font-size: 0.9rem; display:flex; align-items:center; gap:10px;}

/* ============================================================
   WHO IT'S FOR
   ============================================================ */
.who-grid { display:grid; grid-template-columns:1fr; gap: clamp(32px,5vw,64px); align-items:center; }
@media (min-width: 860px){ .who-grid{ grid-template-columns: 1.1fr .9fr;} }
.fitlist { list-style:none; margin: 20px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.fitlist li { display:flex; gap:14px; align-items:flex-start; font-size:1.02rem; }
.fitlist .mk { color: var(--accent-deep); flex:none; margin-top:3px; }
.scarcity {
  border:1px solid var(--kleova-line); border-radius: var(--kleova-radius);
  padding: clamp(26px,3vw,38px); background: var(--kleova-white);
}
.scarcity .big { font-family: var(--kleova-font-display); font-size: var(--fs-h2); color: var(--accent-deep); }
.scarcity .lbl { font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--kleova-muted); font-weight:600; margin-bottom:10px;}

/* ============================================================
   FOUNDERS
   ============================================================ */
.founders-grid { display:grid; grid-template-columns:1fr; gap: clamp(28px,4vw,48px); }
@media (min-width: 720px){ .founders-grid{ grid-template-columns: repeat(2,1fr);} }
.founder { display:flex; flex-direction:column; gap:18px; }
.portrait {
  aspect-ratio: 4/5; border-radius: var(--kleova-radius); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, #ECE7DD 0 14px, #F2EEE6 14px 28px);
  border: 1px solid var(--kleova-line);
  display:grid; place-items:center; position:relative;
}
.portrait .ph { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size:0.8rem; color: var(--kleova-muted); letter-spacing:0.04em; text-align:center; padding:0 16px;}
.portrait picture, .portrait .portrait-img { display:block; width:100%; height:100%; }
.portrait .portrait-img { object-fit:cover; object-position:center top; }
.founder .name { font-family: var(--kleova-font-display); font-size:1.4rem; }
.founder .role { color: var(--accent-deep); font-size:0.88rem; font-weight:600; letter-spacing:0.02em; }
.founder p { color: var(--kleova-graphite); font-size:0.98rem; }

/* ============================================================
   WAITLIST (dark) + FORM
   ============================================================ */
.waitlist.on-dark { background: var(--kleova-ink); position:relative; overflow:hidden; }
.waitlist .echo { right:-12vw; top:-20%; width:min(60vw,560px); height:min(60vw,560px); opacity:.08; }
.form-grid { display:grid; grid-template-columns:1fr; gap: clamp(36px,5vw,72px); position:relative; z-index:2; }
@media (min-width: 900px){ .form-grid{ grid-template-columns: .9fr 1.1fr;} }
.form-card {
  background: var(--ink-soft); border:1px solid var(--ink-line);
  border-radius: var(--kleova-radius); padding: clamp(26px,3vw,40px);
}
.field { margin-bottom: 18px; }
.field label { display:block; font-size:0.82rem; font-weight:600; letter-spacing:0.02em; color: var(--muted-dim); margin-bottom:8px; }
.field .opt { color: var(--muted-dark); font-weight:400; }
.field input[type=text], .field input[type=email], .field select {
  width:100%; padding:13px 14px; font-family:var(--kleova-font-text); font-size:0.98rem;
  background: #0F141C; border:1px solid var(--ink-line); border-radius: var(--kleova-radius);
  color: var(--kleova-paper); transition: border-color .2s;
}
.field input::placeholder { color: #5A6273; }
.field input:focus, .field select:focus { outline:none; border-color: var(--accent); }
.field select { appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B89150' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; }
.field-row { display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; gap:16px;} }

.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { position:relative; }
.chip input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span {
  display:block; padding:10px 16px; border:1px solid var(--ink-line); border-radius:100px;
  font-size:0.9rem; color: var(--muted-dim); cursor:pointer; transition: .2s;
}
.chip input:checked + span { border-color: var(--accent); color: var(--kleova-ink); background: var(--accent); font-weight:600; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset:2px; }

.consent { display:flex; gap:12px; align-items:flex-start; margin: 6px 0 22px; }
.consent input { margin-top:4px; width:16px; height:16px; accent-color: var(--accent); flex:none; }
.consent label { font-size:0.82rem; color: var(--muted-dark); line-height:1.5; }
.consent a { color: var(--muted-dim); text-decoration: underline; text-underline-offset:2px; }
.form-card .btn--primary { width:100%; justify-content:center; }
.field-error { border-color: #C2607A !important; }
.err-msg { color:#D98AA0; font-size:0.78rem; margin-top:6px; display:none; }
.err-msg.show { display:block; }
.alt-talk { margin-top:18px; text-align:center; color: var(--muted-dark); font-size:0.92rem; }
.alt-talk a { color: var(--accent); }

.form-intro h2 { font-size: var(--fs-h1); }
.form-intro .lede { color: var(--muted-dim); }
.assure { list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:13px; }
.assure li { display:flex; gap:12px; align-items:flex-start; color: var(--muted-dim); font-size:0.95rem; }
.assure .mk { color: var(--accent); flex:none; margin-top:3px; }

/* thank-you (inline reveal) */
.thanks { display:none; position:relative; z-index:2; text-align:center; max-width:620px; margin:0 auto; padding: clamp(20px,4vw,40px) 0; }
.thanks.show { display:block; animation: rise .6s var(--ease) both; }
.thanks .mark { width:64px; height:64px; margin:0 auto 24px; color: var(--accent); }
.thanks h2 { font-size: var(--fs-h1); color: var(--kleova-paper); }
.thanks p { color: var(--muted-dim); margin-top:14px; }
.thanks .next { margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@keyframes rise { from { opacity:0; transform: translateY(16px);} to {opacity:1; transform:none;} }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--kleova-line); }
.faq-q {
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding: 24px 40px 24px 0; position:relative;
  font-family: var(--kleova-font-display); font-size: clamp(1.1rem,1.6vw,1.35rem);
  color: var(--kleova-ink); letter-spacing:-0.01em;
}
.faq-q::after {
  content:""; position:absolute; right:4px; top:50%; width:13px; height:13px;
  border-right:1.5px solid var(--accent-deep); border-bottom:1.5px solid var(--accent-deep);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq-item.open .faq-q::after { transform: translateY(-30%) rotate(-135deg); }
.faq-a { max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-a-inner { padding: 0 0 24px; color: var(--kleova-graphite); max-width: 64ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--kleova-ink); color: var(--muted-dim); padding-block: clamp(48px,7vh,80px); }
.footer-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; align-items:flex-start; }
.site-footer .wm { font-size:1.6rem; color: var(--kleova-paper); }
.footer-links { display:flex; gap:26px; flex-wrap:wrap; font-size:0.9rem; }
.footer-links a { text-decoration:none; color: var(--muted-dim); }
.footer-links a:hover { color: var(--accent); }
.disclaimer { margin-top:34px; padding-top:26px; border-top:1px solid var(--ink-line); font-size:0.82rem; color: var(--muted-dark); max-width: 70ch; line-height:1.6; }
.footer-base { margin-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.82rem; color: var(--muted-dark); }
.footer-base .dot { color: var(--accent); }

/* ============================================================
   scroll-reveal
   ============================================================ */
[data-reveal] { opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s;}
[data-reveal][data-delay="2"]{ transition-delay:.16s;}
[data-reveal][data-delay="3"]{ transition-delay:.24s;}
[data-anim-off] [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* draw-on for SVG paths */
.draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 1.3s var(--ease); }
.in .draw, .draw.in { stroke-dashoffset: 0; }
[data-anim-off] .draw { stroke-dashoffset: 0 !important; transition: none !important; }

/* IG1 endpoint dots fade in after lines draw */
.ig1-dot-up, .ig1-dot-down { opacity: 0; transition: opacity .4s var(--ease) 1s; }
.in .ig1-dot-up, .in .ig1-dot-down { opacity: 1; }
[data-anim-off] .ig1-dot-up, [data-anim-off] .ig1-dot-down { opacity: 1 !important; transition: none !important; }

/* IG3 bars grow from baseline */
.spark .bar { transform: scaleY(0); transform-box: fill-box; transform-origin: center bottom; transition: transform .7s var(--ease); }
.in .spark .bar { transform: scaleY(1); }
.spark .bar:nth-child(2){ transition-delay: .07s; }
.spark .bar:nth-child(3){ transition-delay: .14s; }
.spark .bar:nth-child(4){ transition-delay: .21s; }
.spark .bar:nth-child(5){ transition-delay: .28s; }
.spark .bar:nth-child(6){ transition-delay: .35s; }
[data-anim-off] .spark .bar { transform: scaleY(1) !important; transition: none !important; }

/* count-up reserves space */
.countup { font-variant-numeric: tabular-nums; }

/* ============================================================
   DECORATIVE SYSTEM  (graphic flourishes across the layout)
   echo-based, brass/ink, editorial — quiet, never busy
   ============================================================ */

/* sections that host decor need a stacking context + clip */
.section { overflow: clip; }
.section > .wrap { position: relative; z-index: 2; }

/* oversized faint section index numeral (editorial anchor) */
.deco-index {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--kleova-font-display); font-optical-sizing: auto; font-weight: 560;
  font-size: clamp(7rem, 17vw, 17rem); line-height: 1;
  color: var(--kleova-ink); opacity: 0.04;
  top: clamp(-12px, -1vw, 0px); right: clamp(8px, 3vw, 56px);
  letter-spacing: -0.04em;
}
.on-dark .deco-index { color: var(--accent); opacity: 0.07; }
.band-deep .deco-index { color: var(--kleova-ink); opacity: 0.05; }
@media (max-width: 640px){ .deco-index { font-size: 7rem; opacity: 0.035; right: -6px; } }

/* faint echo-arc texture, anchored to a section corner */
.deco-echo {
  position: absolute; z-index: 0; pointer-events: none;
  stroke: var(--accent); fill: none; stroke-linecap: round; stroke-width: 1;
  opacity: 0.10;
}
.deco-echo.left  { left: clamp(-260px,-16vw,-120px); top: 50%; transform: translateY(-50%); width: min(56vh,460px); height: min(56vh,460px); }
.deco-echo.right { right: clamp(-260px,-16vw,-120px); top: 50%; transform: translateY(-50%); width: min(56vh,460px); height: min(56vh,460px); }
.deco-echo.tr    { right: -8%; top: -14%; width: min(40vw,360px); height: min(40vw,360px); }
.on-dark .deco-echo { opacity: 0.16; }
.band-deep .deco-echo { opacity: 0.12; color: var(--accent); }
@media (max-width: 760px){ .deco-echo { opacity: 0.08; } .on-dark .deco-echo { opacity: 0.12; } }

/* deco-corner — samodzielny ornament łuków (line/shift/how). Bez tej reguły SVG
   dziedziczy domyślny fill:black → czarna plama. Cienkie łuki w akcencie. */
.deco-corner svg { fill: none; stroke: var(--accent); stroke-width: 1; stroke-linecap: round; opacity: .4; }
.on-dark .deco-corner svg { opacity: .5; }

/* brass hairline + node divider between sections */
.arc-rule { display: flex; align-items: center; justify-content: center; gap: 16px; padding: clamp(8px,2vh,28px) 0 0; }
.arc-rule .ln { height: 1px; width: clamp(40px, 16vw, 160px); background: linear-gradient(90deg, transparent, var(--kleova-line)); }
.arc-rule .ln.r { background: linear-gradient(90deg, var(--kleova-line), transparent); }
.arc-rule .node { position: relative; width: 26px; height: 26px; flex: none; }
.arc-rule .node svg { width: 100%; height: 100%; stroke: var(--accent); fill: none; stroke-width: 1.2; }
.arc-rule .node .dot { position: absolute; inset: 0; margin: auto; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* a small corner arc flourish for infographic boxes */
.ig { position: relative; }
.ig .deco-corner {
  position: absolute; top: -1px; right: -1px; width: 64px; height: 64px;
  pointer-events: none; opacity: .9;
}
.ig .deco-corner svg { width: 100%; height: 100%; stroke: var(--accent); fill: none; stroke-width: 1; opacity: .5; }

/* ============ Twig prod build additions (Zad. 02/03) ============ */
/* a11y: group label for radio chips (replaces dangling <label>) */
.field .field-grouplabel{ display:block; font-size:0.82rem; font-weight:600; letter-spacing:0.02em; color: var(--muted-dim); margin-bottom:8px; }

/* prose: /privacy, /thank-you, generic pages */
.prose{ color: var(--kleova-ink); line-height:1.7; font-size:1rem; }
.prose h1{ font-family:var(--kleova-font-display); font-weight:600; font-size:var(--fs-h1); line-height:1.15; margin:0 0 18px; letter-spacing:-0.01em; }
.prose h2{ font-family:var(--kleova-font-display); font-weight:600; font-size:1.5rem; margin:32px 0 12px; }
.prose h3{ font-family:var(--kleova-font-display); font-weight:600; font-size:1.2rem; margin:24px 0 10px; }
.prose p{ margin:0 0 16px; }
.prose ul,.prose ol{ margin:0 0 16px 1.2em; }
.prose li{ margin:6px 0; }
.prose a{ color: var(--kleova-brass-deep); text-underline-offset:3px; }
.prose em{ color: var(--muted-dark); }
.prose strong{ color: var(--kleova-ink); }

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,28px); }
@media (min-width:680px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } }
.contact-card{ border:1px solid var(--kleova-line); border-radius:var(--kleova-radius); padding:clamp(22px,3vw,30px); background:var(--kleova-paper); }
.contact-card .role{ color:var(--accent-deep); font-size:0.82rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
.contact-card .name{ font-family:var(--kleova-font-display); font-size:1.5rem; margin:4px 0 18px; }
.contact-rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.contact-rows li{ display:flex; flex-direction:column; gap:2px; }
.contact-k{ font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--kleova-muted); }
.contact-v{ font-size:1.02rem; color:var(--kleova-ink); text-decoration:none; word-break:break-word; }
a.contact-v{ color:var(--kleova-brass-deep); text-underline-offset:3px; }
a.contact-v:hover{ text-decoration:underline; }
.contact-phone{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.contact-phone a{ color:var(--kleova-brass-deep); text-decoration:none; text-underline-offset:3px; }
.contact-phone a:hover{ text-decoration:underline; }
.contact-phone .wa-link{ font-size:0.82rem; color:var(--kleova-muted); }
.contact-reply{ margin:28px 0 0; color:var(--kleova-graphite); font-size:0.98rem; }
.contact-company{ margin-top:clamp(36px,5vw,52px); padding-top:clamp(28px,4vw,40px); border-top:1px solid var(--kleova-line); }
.contact-company-h{ font-family:var(--kleova-font-display); font-size:1.2rem; margin:0 0 4px; }
.contact-company-note{ color:var(--kleova-graphite); font-size:0.95rem; margin:0 0 18px; }
.contact-company .contact-rows{ max-width:360px; }
.contact-reg{ margin-top:28px; font-size:0.84rem; line-height:1.6; color:var(--kleova-muted); }

/* anchor offset under sticky header + form loading state (Zad. 04/B3) */
html{ scroll-padding-top:84px; }
.btn.is-loading{ opacity:.7; pointer-events:none; }

/* ===== Consent banner (Consent Mode v2 — full version, wzorzec lechpack) ===== */
.consent-banner{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--kleova-ink); color:var(--kleova-paper); border-top:1px solid rgba(255,255,255,.10); box-shadow:0 -18px 50px rgba(0,0,0,.35); transform:translateY(110%); transition:transform .4s var(--ease, cubic-bezier(.22,1,.36,1)); }
.consent-banner.is-visible{ transform:translateY(0); }
.consent-banner.hidden{ display:none; }
.consent-inner{ max-width:1180px; margin:0 auto; padding:22px 24px; display:flex; gap:28px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.consent-copy{ flex:1; min-width:0; }
.consent-title{ font-family:var(--kleova-font-display); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--kleova-brass); margin:0 0 8px; }
.consent-desc{ font-size:.86rem; color:#aeb4c0; margin:0; max-width:64ch; line-height:1.55; }
.consent-desc a{ color:var(--kleova-brass); text-underline-offset:2px; }
.consent-details{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.10); display:flex; flex-direction:column; gap:14px; }
.consent-details.hidden{ display:none; }
.consent-cat{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.consent-cat.is-locked{ cursor:not-allowed; }
.consent-checkbox{ margin-top:3px; width:16px; height:16px; flex:none; accent-color:var(--accent); }
.consent-checkbox:disabled{ opacity:.55; }
.consent-cat-text{ flex:1; }
.consent-cat-name{ display:block; font-size:.86rem; font-weight:600; color:var(--kleova-paper); }
.consent-cat-always{ font-size:.72rem; font-weight:400; color:var(--muted-dim); margin-left:4px; }
.consent-cat-desc{ display:block; font-size:.76rem; color:#9aa0ac; margin-top:2px; line-height:1.5; }
.consent-toggle{ display:inline-block; margin-top:14px; background:none; border:0; padding:0; font:inherit; font-size:.78rem; color:var(--kleova-brass); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.consent-toggle:hover{ color:var(--kleova-paper); }
.consent-actions{ display:flex; gap:10px; flex-shrink:0; align-items:center; flex-wrap:wrap; }
.btn--sm{ padding:9px 16px; font-size:.82rem; }
.consent-banner .btn--ghost{ color:var(--kleova-paper); border-color:rgba(255,255,255,.28); }
.consent-banner .btn--ghost:hover{ border-color:rgba(255,255,255,.6); }
@media (max-width:760px){ .consent-inner{ padding:18px 16px; gap:18px; } .consent-actions{ width:100%; } .consent-actions .btn{ flex:1; text-align:center; justify-content:center; } }
.footer-cookie-btn{ background:none; border:0; color:inherit; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; opacity:.85; }
.footer-cookie-btn:hover{ opacity:1; }

/* ============ Multipage subpages (Faza 6) ============ */
.is-subpage .deco-index{ display:none; }
.subhero{ position:relative; overflow:hidden; background:var(--kleova-ink); color:var(--kleova-paper); padding:148px 0 64px; }
.subhero .wrap{ position:relative; z-index:2; }
.subhero .eyebrow{ color:var(--kleova-brass); }
.subhero-h1{ font-family:var(--kleova-font-display); font-weight:600; font-size:clamp(2.3rem,6vw,3.4rem); line-height:1.06; letter-spacing:-0.01em; margin:.3em 0 .25em; color:var(--kleova-paper); max-width:18ch; }
.subhero .lede{ color:var(--muted-dim); max-width:56ch; margin:0; }
.subhero-echo{ position:absolute; right:-90px; top:50%; transform:translateY(-50%); width:360px; height:360px; fill:none; stroke:var(--kleova-brass); stroke-width:1; opacity:.12; z-index:1; }

.cta-band{ position:relative; overflow:hidden; background:var(--kleova-ink); color:var(--kleova-paper); padding:60px 0; }
.cta-band .echo{ position:absolute; right:-60px; bottom:-60px; width:240px; height:240px; fill:none; stroke:var(--kleova-brass); opacity:.10; }
.cta-band-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.cta-band .eyebrow{ color:var(--kleova-brass); }
.cta-band h2{ font-family:var(--kleova-font-display); font-weight:600; font-size:clamp(1.6rem,3.5vw,2.1rem); line-height:1.12; max-width:22ch; margin:.25em 0 0; color:var(--kleova-paper); }
@media (max-width:640px){ .cta-band-inner{ flex-direction:column; align-items:flex-start; } }

/* book form: textarea + date input match field styling (Zad. book) */
.field textarea, .field input[type=date] {
  width:100%; padding:13px 14px; font-family:var(--kleova-font-text); font-size:0.98rem;
  background:#0F141C; border:1px solid var(--ink-line); border-radius:var(--kleova-radius);
  color:var(--kleova-paper); transition:border-color .2s;
}
.field textarea { resize:vertical; min-height:84px; line-height:1.5; }
.field textarea::placeholder { color:#5A6273; }
.field input[type=date]::-webkit-calendar-picker-indicator { filter:invert(0.7) sepia(1) saturate(2) hue-rotate(5deg); cursor:pointer; }
.field input[type=date]:focus, .field textarea:focus { outline:none; border-color:var(--accent); }