/* ============================================================
   elcodo — Liquid Joy (light theme overrides)
   Loaded AFTER elcodo.css + elcodo.sections.css.
   Palette taken straight from the pixel logo:
   navy #004890 · blue #003098 · green #009830
   orange #FF9830 · pink #FF0068 · periwinkle #6868FF
   ============================================================ */

body {
  /* brand pixels */
  --c-navy:   #004890;
  --c-blue:   #003098;
  --c-green:  #009830;
  --c-orange: #FF9830;
  --c-pink:   #FF0068;
  --c-peri:   #6868FF;

  /* surfaces — warm paper white */
  --bg-0: oklch(0.985 0.006 90);
  --bg-1: oklch(0.97 0.008 90);
  --bg-2: oklch(0.955 0.01 90);
  --ink:  oklch(0.27 0.03 272);
  --ink-dim: oklch(0.45 0.022 272);
  --ink-faint: oklch(0.58 0.016 272);
  --hairline: oklch(0.25 0.03 272 / 0.10);

  /* default accent pair: pink → periwinkle */
  --a1: var(--c-pink);
  --a2: var(--c-peri);
  --a-mid: var(--c-orange);
  --glow: oklch(0.66 0.24 5 / 0.28);

  /* spark color for canvas FX (replaces white) */
  --spark: var(--c-orange);

  /* glass — milk glass on light */
  --glass-fill: oklch(1 0 0 / 0.52);
  --glass-stroke: oklch(0.3 0.04 272 / 0.10);
  --glass-hi: oklch(1 0 0 / 0.95);
}

/* accent variants, re-tuned to the logo palette ------------------- */
body[data-accent="spectrum"] {
  --a1: var(--c-pink); --a2: var(--c-peri); --a-mid: var(--c-orange);
  --glow: oklch(0.66 0.24 5 / 0.28);
}
body[data-accent="violet"] {
  --a1: var(--c-peri); --a2: var(--c-blue); --a-mid: var(--c-navy);
  --glow: oklch(0.6 0.2 277 / 0.30);
}
body[data-accent="green"] {
  --a1: var(--c-green); --a2: var(--c-orange); --a-mid: var(--c-green);
  --glow: oklch(0.62 0.17 150 / 0.28);
}

/* ============================================================
   ambient field — sunny, airy
   ============================================================ */
body::before {
  background:
    radial-gradient(55vmax 55vmax at 16% 6%,  oklch(0.92 0.05 277 / 0.55), transparent 62%),
    radial-gradient(50vmax 50vmax at 88% 18%, oklch(0.94 0.05 5   / 0.50), transparent 62%),
    radial-gradient(62vmax 62vmax at 55% 104%, oklch(0.95 0.05 75 / 0.55), transparent 62%),
    var(--bg-0);
}
body::after { opacity: 0.035; mix-blend-mode: multiply; }

::selection { background: oklch(0.85 0.09 5 / 0.5); color: var(--ink); }

/* blobs — joyful candy colours, normal blend on light ------------- */
.blob { mix-blend-mode: normal; opacity: 0.42; filter: blur(56px) saturate(1.1); }
.blob.b1 { background: radial-gradient(circle at 35% 35%, oklch(0.78 0.13 277), transparent 70%); }
.blob.b2 { background: radial-gradient(circle at 60% 40%, oklch(0.82 0.12 5), transparent 70%); }
.blob.b3 { background: radial-gradient(circle at 50% 50%, oklch(0.88 0.10 80), transparent 68%); }

/* ============================================================
   glass primitive — milk glass, soft colored shadow
   ============================================================ */
.glass {
  box-shadow:
    0 1px 0 0 var(--glass-hi) inset,
    0 -1px 0 0 oklch(0.3 0.04 272 / 0.06) inset,
    0 24px 70px -28px oklch(0.45 0.10 290 / 0.35);
}
.glass::before {
  background: linear-gradient(150deg, oklch(1 0 0 / 0.7), transparent 45%);
}
.glass::after { opacity: 0.30; }

/* ============================================================
   nav
   ============================================================ */
.nav.scrolled {
  background: oklch(0.985 0.006 90 / 0.72);
  border-bottom: 1px solid var(--hairline);
}
.brand img.logo { height: 22px; width: auto; display: block; }
.brand b { color: var(--ink); letter-spacing: 0.04em; }
.foot .brand img.logo { height: 18px; }
.foot .meta { display: inline-flex; align-items: center; gap: 7px; }
.px-heart { display: inline-block; shape-rendering: crispEdges; }
@media (prefers-reduced-motion: no-preference) {
  .foot .meta:hover .px-heart { animation: heart-beat 0.7s ease-in-out infinite; }
}
@keyframes heart-beat { 0%,100% { transform: scale(1); } 30% { transform: scale(1.35); } 50% { transform: scale(1.1); } }
.foot-legal {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.06em; color: var(--ink-faint);
}
.foot-id { display: flex; flex-direction: column; gap: 5px; }
.foot-id span:first-child { color: var(--ink-dim); font-weight: 500; letter-spacing: 0.14em; }
.foot-links { display: flex; flex-direction: column; gap: 5px; text-align: right; }
.foot-legal a { color: var(--ink-dim); text-decoration: none; }
.foot-legal a:hover { color: var(--c-pink); }
@media (max-width: 600px) { .foot-links { text-align: left; } }

/* buttons ---------------------------------------------------------- */
.btn { color: var(--ink); background: oklch(1 0 0 / 0.55); }
.btn:hover { border-color: oklch(0.3 0.04 272 / 0.22); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 0 0 1px oklch(1 0 0 / .2) inset, 0 10px 34px -10px var(--glow);
}
.btn-primary:hover { box-shadow: 0 0 0 1px oklch(1 0 0 / .3) inset, 0 16px 50px -10px var(--glow); }

/* nav: przycisk Kontakt z rakietką w stanie zero */
.btn-contact {
  padding: 9px 16px; font-size: 13px;
  display: inline-flex; align-items: center; gap: 9px;
  background: oklch(1 0 0 / 0.7); color: var(--ink); font-weight: 600;
}
.btn-contact:hover { border-color: oklch(0.3 0.04 272 / 0.25); background: oklch(1 0 0 / 0.92); }
.btn-contact .rkt { display: block; image-rendering: pixelated; shape-rendering: crispEdges; }
@media (prefers-reduced-motion: no-preference) {
  .btn-contact .rkt .flame { animation: rkt-idle 0.5s steps(2) infinite; transform-origin: 50% 0; }
}
@keyframes rkt-idle { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

/* rakieta w locie + ślad */
.rkt-fly {
  position: fixed; z-index: 999; pointer-events: none;
  width: 28px; height: 36px; will-change: transform; left: 0; top: 0;
}
.rkt-fly svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.rkt-dot {
  position: fixed; z-index: 998; pointer-events: none;
  width: 5px; height: 5px; left: 0; top: 0;
  animation: rkt-dot-fade 0.55s linear forwards;
}
@keyframes rkt-dot-fade { from { opacity: 0.9; } to { opacity: 0; transform: translateY(-10px); } }

/* ============================================================
   hero
   ============================================================ */
/* eyebrow — pixel boot-row from the logo, not a pill */
.eyebrow {
  background: none; border: none; backdrop-filter: none;
  padding: 0; border-radius: 0;
  color: var(--ink-dim); letter-spacing: 0.16em; text-transform: lowercase;
}
.eyebrow .px { display: inline-flex; gap: 3px; }
.eyebrow .px i {
  width: 9px; height: 9px; display: block;
}
.eyebrow .px i:nth-child(1) { background: var(--c-navy); }
.eyebrow .px i:nth-child(2) { background: var(--c-pink); }
.eyebrow .px i:nth-child(3) { background: var(--c-orange); }
.eyebrow .px i:nth-child(4) { background: var(--c-green); }
.eyebrow .px i:nth-child(5) { background: var(--c-peri); }
@media (prefers-reduced-motion: no-preference) {
  .eyebrow .px i { animation: px-boot calc(3.6s / var(--m,1)) steps(1) infinite; }
  .eyebrow .px i:nth-child(2) { animation-delay: .12s; }
  .eyebrow .px i:nth-child(3) { animation-delay: .24s; }
  .eyebrow .px i:nth-child(4) { animation-delay: .36s; }
  .eyebrow .px i:nth-child(5) { animation-delay: .48s; }
}
@keyframes px-boot {
  0%, 4% { opacity: 0.15; }
  8%, 100% { opacity: 1; }
}

/* tri-colour headline in spectrum mode */
.hero-txt-h1 .hw-run-ink {
  text-shadow: 0 0 54px oklch(0.7 0.2 30 / 0.30);
}
body[data-accent="spectrum"] .hero-txt-h1 .hw-run-ink {
  background: linear-gradient(108deg, var(--c-pink) 8%, var(--c-orange) 46%, var(--c-peri) 92%);
  -webkit-background-clip: text; background-clip: text;
}

/* console — milk glass with candy traffic lights */
.console-bar .dots i:nth-child(1) { background: var(--c-pink); }
.console-bar .dots i:nth-child(2) { background: var(--c-orange); }
.console-bar .dots i:nth-child(3) { background: var(--c-green); }
.console:focus-within {
  border-color: oklch(0.3 0.04 272 / 0.18);
  box-shadow:
    0 1px 0 0 var(--glass-hi) inset,
    0 -1px 0 0 oklch(0.3 0.04 272 / 0.06) inset,
    0 24px 70px -28px oklch(0.45 0.10 290 / 0.35),
    0 14px 56px -16px var(--glow);
}

/* ---------- CAD hero, redrawn for paper ---------- */
.cad-svg .guide { stroke: oklch(0.3 0.05 272 / 0.22); }
.cad-svg .dim path { stroke: oklch(0.3 0.05 272 / 0.30); }
.cad-svg .word { stroke: oklch(0.35 0.05 272 / 0.8); }
.cad-svg.live .w-made { stroke: oklch(0.4 0.04 272 / 0.5); }
.cad-svg.live .w-run { filter: drop-shadow(0 6px 22px var(--glow)); }
.cad-svg .arrow path { stroke: var(--ink-faint); }

/* ============================================================
   clients — colour up on hover, dark wordmarks
   ============================================================ */
/* on paper: every logo becomes an ink silhouette (fixes white Publicis svg) */
.logo-item { opacity: 0.55; filter: none; }
.logo-item:hover { opacity: 0.95; filter: none; }
.logo-item img { filter: brightness(0) opacity(0.85); }
.logo-invert img { filter: brightness(0) opacity(0.85); height: 56px; }
.logo-opteam img { height: 28px; }
.logo-schaeffler img { height: 19px; }
/* stałe złamanie wiersza: Publicis · Schaeffler · Brookfield · mindset / OPTeam · JWT · Atende */
.logo-break { flex-basis: 100%; height: 0; margin: -10px 0 0; }
.logo-row { row-gap: 18px; }
.clients-kicker { line-height: 1.9; }
.clients-kicker small {
  font-size: 10px; letter-spacing: 0.14em; color: var(--ink-faint);
  opacity: 0.8;
}
.logo-atende { flex-direction: column; align-items: center; gap: 5px; }
.logo-atende img { height: 20px; }
.logo-atende small {
  font-family: var(--font-mono); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  line-height: 1;
}

/* RWD logo-strip: ciaśniej i mniejsze znaki na wąskich ekranach */
@media (max-width: 900px) {
  .logo-row { gap: 28px 40px; row-gap: 26px; }
  .logo-item img { height: 24px; }
  .logo-invert img { height: 46px; }
  .logo-atende img { height: 17px; }
  .logo-mindset img { height: 14px; }
  .logo-word { font-size: 20px; }
}
@media (max-width: 520px) {
  .logo-row { gap: 22px 28px; }
  .logo-item img { height: 20px; }
  .logo-invert img { height: 40px; }
  .logo-atende img { height: 14px; }
  .logo-mindset img { height: 12px; }
  .logo-word { font-size: 18px; }
}
.logo-mindset img { height: 17px; }

/* ============================================================
   scope cards — each pillar takes one pixel from the logo
   ============================================================ */
.card { --g: var(--c-navy); }
.cards .card:nth-child(1) { --g: var(--c-navy); }
.cards .card:nth-child(2) { --g: var(--c-pink); }
.cards .card:nth-child(3) { --g: var(--c-green); }
.cards .card:nth-child(4) { --g: var(--c-blue); }
.cards .card:nth-child(5) { --g: var(--c-orange); }
.cards .card:nth-child(6) { --g: var(--c-peri); }
/* 6 filarów: 2 rzędy × 3 karty, wszystkie równe */
.cards { grid-template-columns: repeat(3, 1fr); }
.cards .card { min-height: 0; }
@media (max-width: 1020px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } }

.card .num { color: var(--g); }
/* pixel-step glyph (2×2 checker, like the first logo glyph) */
.card .glyph {
  width: 40px; height: 40px; border-radius: 0;
  background: conic-gradient(var(--g) 0 90deg, transparent 90deg 180deg, var(--g) 180deg 270deg, transparent 270deg 360deg);
  box-shadow: none; opacity: 1;
  transition: transform .5s var(--ease);
}
.card .glyph::after { content: none; }
.card:hover .glyph { transform: rotate(90deg); }
.card .bloom {
  background: radial-gradient(420px 320px at var(--mx,50%) var(--my,0%),
    color-mix(in oklab, var(--g) 16%, transparent), transparent 60%);
  opacity: calc(var(--bloom) * 1);
}

/* ============================================================
   stats — one brand colour each
   ============================================================ */
.stats .stat:nth-child(1) { --g: var(--c-navy); }
.stats .stat:nth-child(2) { --g: var(--c-pink); }
.stats .stat:nth-child(3) { --g: var(--c-green); }
.stat .big {
  background: none; -webkit-text-fill-color: var(--g); color: var(--g);
}
.stat .big sup { color: var(--g); -webkit-text-fill-color: var(--g); }
.stat .lbl { color: var(--g); }

/* ============================================================
   CTA
   ============================================================ */
/* ============================================================
   CTA — lekkie szkło: kolor tylko przy krawędziach, tekst na białym
   ============================================================ */
.cta .wrap { position: relative; }
.cta .wrap::before {
  content: ""; position: absolute; inset: -36px -28px; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 42% at 10% 18%, oklch(0.84 0.12 5 / 0.34), transparent 62%),
    radial-gradient(32% 40% at 90% 14%, oklch(0.8 0.11 277 / 0.30), transparent 62%),
    radial-gradient(36% 40% at 55% 96%, oklch(0.88 0.10 75 / 0.34), transparent 62%);
  filter: blur(38px);
}
.cta-card {
  position: relative; z-index: 1;
  background: oklch(1 0 0 / 0.66);
}
.cta-card h2, .cta-card p { position: relative; z-index: 2; }
.cta-glow {
  background:
    radial-gradient(40% 34% at 24% 0%, oklch(0.9 0.07 277 / 0.5), transparent 70%),
    radial-gradient(40% 34% at 76% 0%, oklch(0.92 0.07 5 / 0.5), transparent 70%);
  opacity: 0.7;
}
.cta-card .contact a { color: var(--c-pink); }

/* ============================================================
   kicker / status accents
   ============================================================ */
/* kickery — pikselowy glif zamiast kreski, małe litery jak eyebrow */
.kicker { color: var(--c-pink); text-transform: lowercase; letter-spacing: 0.16em; }
.kicker::before {
  width: 13px; height: 13px; border-radius: 0;
  background: conic-gradient(currentColor 0 90deg, transparent 90deg 180deg, currentColor 180deg 270deg, transparent 270deg 360deg);
}
.manifest .kicker { color: var(--c-pink); }
.scope .kicker { color: var(--c-navy); }
.scale .kicker { color: var(--c-green); }

/* ============================================================
   rytm sekcji — mniej światła, więcej charakteru w nagłówkach
   ============================================================ */
.manifest { padding: 76px 0 92px; }
.scope { padding: 84px 0 96px; }
.scale { padding: 84px 0 90px; }
.cta { padding: 44px 0 100px; }
.scale .stats { margin-top: 52px; }
.scope-head { margin-bottom: 44px; }
.manifest .cols { margin-top: 44px; }

/* jedna szerokość kontenera dla wszystkich sekcji — krawędzie się pokrywają */
.manifest .wrap, .scale .wrap { max-width: var(--maxw); }

/* akcentowane słowo w h2 — kolor sekcji */
h2 em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.manifest h2 em { color: var(--c-pink); }
.scope-head h2 em { color: var(--c-navy); }
.scale h2 em { color: var(--c-green); }
.cta-card h2 em {
  background: linear-gradient(108deg, var(--c-pink) 10%, var(--c-orange) 50%, var(--c-peri) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* flowers fx tuned for light bg */
.fx-flowers .stem { stroke: var(--c-green); filter: drop-shadow(0 1px 4px oklch(0.6 0.15 150 / 0.4)); }
.fx-flowers .leaf { fill: oklch(0.75 0.14 150 / 0.4); stroke: var(--c-green); }
.fx-flowers .petal { fill: oklch(0.8 0.12 5 / 0.5); stroke: var(--c-pink); filter: drop-shadow(0 1px 6px oklch(0.7 0.18 5 / 0.35)); }
.fx-flowers .core { fill: var(--c-orange); filter: drop-shadow(0 0 8px oklch(0.78 0.15 70 / 0.8)); }

/* ============================================================
   dock — light
   ============================================================ */
.dock-toggle {
  background: oklch(1 0 0 / 0.75);
  box-shadow: 0 10px 34px -12px oklch(0.45 0.1 290 / 0.45);
  color: var(--c-pink);
}
.seg button { background: oklch(0.25 0.03 272 / 0.04); color: var(--ink-dim); }
.seg button:hover { color: var(--ink); border-color: oklch(0.25 0.03 272 / 0.2); }
.seg button.on {
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color: #fff;
}
.dock .d-replay { color: var(--ink); background: oklch(0.25 0.03 272 / 0.04); }
.dock .d-replay:hover { border-color: oklch(0.25 0.03 272 / 0.25); }