/* ═══════════════════════════════════════════════════════════
   w·punkt — demo 2027
   Design tokens → layout → sekcje → motion
   ═══════════════════════════════════════════════════════════ */

@layer tokens, base, layout, components, motion;

/* ─────────── TOKENY ─────────── */
@layer tokens {
  :root {
    --cream:    #EFEDE4;
    --cream-2:  #E5E2D6;
    --paper:    #FFFFFF;
    --navy:     #16204A;
    --navy-2:   #1B2755;
    --blue:     #2145E0;
    --blue-lt:  #4E6DF0;
    --purple:   #A96BE0;
    --pink:     #F45FB8;

    /* ── akcenty przejęte z v-labs.co (ulubiona referencja klientki) ── */
    --vl-purple: #BB85FC;   /* firmowy fiolet v-labs        */
    --vl-plum:   #8C64BD;   /* ciemniejszy koniec gradientu */
    --vl-rose:   #CE6FCB;   /* różowo-fioletowy akcent      */
    --vl-ink:    #0A0A0A;   /* near-black zamiast czerni    */
    --vl-grad:   linear-gradient(112deg, #8C64BD 0%, #BB85FC 100%);
    --vl-teal:   #00BFA6;   /* akcent uzupełniający       */
    --vl-amber:  #FFC107;   /* akcent uzupełniający       */
    --vl-red:    #FC361E;   /* mocny akcent, bardzo rzadko */

    --ink:      var(--navy);
    --ink-60:   color-mix(in oklab, var(--navy) 62%, transparent);
    --ink-38:   color-mix(in oklab, var(--navy) 38%, transparent);
    --line:     color-mix(in oklab, var(--navy) 14%, transparent);

    --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-serif:'Instrument Serif', ui-serif, Georgia, serif;

    /* płynna skala typograficzna */
    --step--1: clamp(.82rem, .78rem + .2vw, .92rem);
    --step-0:  clamp(1rem, .95rem + .25vw, 1.12rem);
    --step-1:  clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
    --step-2:  clamp(1.8rem, 1.4rem + 1.8vw, 3rem);
    --step-3:  clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
    --step-4:  clamp(2.6rem, 1rem + 5.1vw, 6rem);

    --gut:  clamp(1.25rem, 5vw, 5.5rem);
    --sect: clamp(5rem, 12vh, 11rem);
    --r:    clamp(16px, 1.6vw, 28px);

    --ease:      cubic-bezier(.22, 1, .36, 1);
    --ease-io:   cubic-bezier(.65, 0, .35, 1);
    --dur:       .8s;
  }

  @property --shine { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
}

/* ─────────── BAZA ─────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    /* własna kotwica pod sticky nav */
    scroll-padding-top: 6rem;
  }

  body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  body.is-locked { overflow: hidden; }

  h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.035em; line-height: .98; }
  p { margin: 0; text-wrap: pretty; }
  a { color: inherit; text-decoration: none; }
  ul { margin: 0; padding: 0; list-style: none; }
  img, canvas { display: block; max-width: 100%; }

  ::selection { background: var(--blue); color: #fff; }

  :focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
    border-radius: 4px;
  }

  .h2 {
    font-size: var(--step-3);
    max-width: 18ch;
    text-wrap: balance;
  }
  .h2--light { color: var(--cream); max-width: 15ch; }
  .h2--center { margin-inline: auto; text-align: center; max-width: 20ch; }

  .eyebrow {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 1.6rem;
  }
  .eyebrow i { font-style: normal; opacity: .5; }
  .eyebrow--pink { color: var(--pink); }
}

/* ─────────── ZIARNO + KURSOR ─────────── */
@layer components {
  .grain {
    position: fixed;
    /* zapas tylko na wielkość animowanego przesunięcia — nie 4× viewport */
    inset: -8%;
    z-index: 9000;
    pointer-events: none;
    opacity: .3;
    mix-blend-mode: multiply;
    will-change: transform;
    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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
    animation: grainShift 6s steps(6) infinite;
  }
  @keyframes grainShift {
    0%,100% { transform: translate(0,0) }
    20% { transform: translate(-3%, 2%) }
    40% { transform: translate(2%, -3%) }
    60% { transform: translate(-2%, -2%) }
    80% { transform: translate(3%, 1%) }
  }
  /* na dotyku ziarno zostaje, ale bez animacji — oszczędność GPU/baterii */
  @media (hover: none), (max-width: 640px) {
    .grain { animation: none; opacity: .22; }
  }

  /* celownik — „w punkt" */
  .cursor {
    position: fixed;
    top: 0; left: 0;
    z-index: 9500;
    pointer-events: none;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity .3s;
  }
  .cursor.is-on { opacity: 1; }
  .cursor__ring {
    width: 44px; height: 44px;
    fill: none;
    stroke: #fff;
    stroke-width: 1;
    opacity: .55;
    transition: scale .45s var(--ease), opacity .3s, rotate .6s var(--ease);
  }
  .cursor__dot {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #fff;
    transition: scale .35s var(--ease);
  }
  .cursor__label {
    position: absolute;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    scale: .8;
    transition: opacity .3s, scale .3s var(--ease);
  }
  .cursor.is-hover .cursor__ring { scale: 1.9; opacity: 1; rotate: 45deg; }
  .cursor.is-hover .cursor__dot  { scale: 0; }
  .cursor.is-hover .cursor__label{ opacity: 1; scale: 1; }

  @media (hover: none) { .cursor { display: none } }

  /* pasek postępu */
  .progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 8000;
    pointer-events: none;
  }
  .progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--vl-purple), var(--vl-rose));
    transform-origin: 0 50%;
    scale: var(--p, 0) 1;
  }
}

/* ─────────── INTRO ─────────── */
@layer motion {
  .intro {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9800;
    background: var(--navy);
    place-items: center;
    color: var(--cream);
  }
  .js .intro { display: grid; }

  .intro__mark {
    position: absolute;
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--cream) 22%, transparent);
    display: grid;
    place-items: center;
    animation: introRing 1.6s var(--ease) forwards;
  }
  .intro__dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--blue);
    animation: introDot 1.6s var(--ease) forwards;
  }
  @keyframes introRing { from { scale: .4; opacity: 0 } 60% { scale: 1; opacity: 1 } to { scale: 1; opacity: 1 } }
  @keyframes introDot  { from { scale: 3.2 } to { scale: 1 } }

  .intro__count {
    position: absolute;
    bottom: var(--gut); right: var(--gut);
    font-size: clamp(2.4rem, 8vw, 5rem);
    font-weight: 300;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
  }
  .intro__count i { font-style: normal; opacity: .35; }

  .intro__word {
    position: absolute;
    bottom: var(--gut); left: var(--gut);
    overflow: hidden;
  }
  .intro__word span {
    display: block;
    font-size: var(--step-1);
    letter-spacing: -.03em;
    translate: 0 110%;
    animation: introWord .9s .5s var(--ease) forwards;
  }
  @keyframes introWord { to { translate: 0 0 } }

  .intro.is-done {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s var(--ease);
  }
  body.is-ready .intro { pointer-events: none; }
}

/* ─────────── NAWIGACJA ─────────── */
@layer layout {
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 7000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.1rem var(--gut);
    transition: background .5s var(--ease), backdrop-filter .5s, padding .5s var(--ease),
                box-shadow .5s, translate .5s var(--ease);
  }
  .nav.is-stuck {
    background: color-mix(in oklab, var(--cream) 72%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 1px 0 var(--line);
    padding-block: .75rem;
  }
  .nav.is-hidden { translate: 0 -110%; }

  .brand { display: flex; align-items: center; gap: .7rem; }
  .brand__badge {
    display: grid;
    place-items: center;
    width: 2.2rem; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    transition: rotate .6s var(--ease), scale .4s var(--ease);
  }
  .brand:hover .brand__badge { rotate: 360deg; scale: 1.08; }
  .brand__name { font-weight: 600; font-size: 1.15rem; letter-spacing: -.03em; }
  .brand__name i { font-style: normal; color: var(--blue); }
  .brand--light .brand__name { color: var(--cream); }

  .nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); }
  .nav__links a {
    font-size: var(--step--1);
    font-weight: 500;
    position: relative;
    padding-block: .3rem;
  }
  .nav__links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    scale: 0 1;
    transform-origin: 100% 50%;
    transition: scale .45s var(--ease);
  }
  .nav__links a:hover::after,
  .nav__links a.is-active::after { scale: 1 1; transform-origin: 0 50%; }
  .nav__links a.is-active { color: var(--blue); }

  .burger { display: none; }

  @media (max-width: 860px) {
    .nav__links, .nav > .btn { display: none; }
    .burger {
      display: grid;
      gap: 6px;
      background: none;
      border: 0;
      padding: .6rem;
      cursor: pointer;
    }
    .burger i {
      width: 26px; height: 2px;
      background: var(--ink);
      transition: translate .4s var(--ease), rotate .4s var(--ease);
    }
    body.menu-open .burger i:first-child { translate: 0 4px; rotate: 45deg; }
    body.menu-open .burger i:last-child  { translate: 0 -4px; rotate: -45deg; }
  }

  .menu {
    position: fixed;
    inset: 0;
    z-index: 6800;
    background: var(--navy);
    color: var(--cream);
    display: grid;
    align-content: center;
    gap: 1rem;
    padding: var(--gut);
    clip-path: circle(0% at 100% 0);
    transition: clip-path .8s var(--ease);
  }
  body.menu-open .menu { clip-path: circle(150% at 100% 0); }
  .menu a { font-size: var(--step-2); letter-spacing: -.04em; }
  .menu__cta { color: var(--blue-lt); }
}

/* ─────────── PRZYCISKI ─────────── */
@layer components {
  .btn {
    --bg: var(--blue);
    --fg: #fff;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .95rem 1.9rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--fg);
    font-weight: 600;
    font-size: var(--step--1);
    isolation: isolate;
    overflow: hidden;
    transition: color .4s var(--ease);
  }
  .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy);
    translate: 0 101%;
    border-radius: 50% 50% 0 0;
    transition: translate .55s var(--ease), border-radius .55s var(--ease);
  }
  .btn:hover::before { translate: 0 0; border-radius: 0; }
  .btn--dark { --bg: var(--navy); }
  .btn--dark::before { background: var(--blue); }
  .btn--lg { padding: 1.15rem 2.6rem; font-size: var(--step-0); }

  .link-arrow {
    position: relative;
    font-weight: 500;
    padding-bottom: .35rem;
  }
  .link-arrow span { display: inline-block; transition: translate .4s var(--ease); }
  .link-arrow:hover span { translate: .35rem 0; }
  .link-arrow::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--purple);
    scale: 1 1;
    transform-origin: 100% 50%;
    transition: scale .4s var(--ease);
  }
  .link-arrow:hover::after { scale: 0 1; }
}

/* ─────────── HERO ─────────── */
@layer layout {
  .hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding: clamp(7rem, 14vh, 10rem) var(--gut) var(--sect);
    overflow: clip;
  }
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero__inner { max-width: min(46ch, 100%); }
  }
  .hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
  }
  .hero__inner {
    position: relative;
    z-index: 2;
    max-width: min(52ch, 100%);
    grid-column: 1;
    /* tekst nie przykrywa animacji na dużych ekranach */
    pointer-events: none;
  }
  .hero__inner a, .hero__inner .hero__cta { pointer-events: auto; }

  .hero__title {
    font-size: var(--step-4);
    letter-spacing: -.055em;
    margin-block: .4rem 2rem;
  }
  .hero__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    padding-right: .08em;
    /* gradient v-labs wpisany w typografię */
    background: var(--vl-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @supports not (background-clip: text) {
    .hero__title em { color: var(--vl-plum); background: none; }
  }
  .hero__lead {
    font-size: var(--step-1);
    color: var(--ink-60);
    max-width: 34ch;
    margin-bottom: 2.6rem;
  }
  .hero__cta { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.5rem); flex-wrap: wrap; }

  .hero__hint {
    position: absolute;
    left: var(--gut); bottom: 2rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-38);
  }
  .hero__hintline {
    width: 64px; height: 1px;
    background: currentColor;
    transform-origin: 0 50%;
    animation: hintPulse 2.4s var(--ease-io) infinite;
  }
  @keyframes hintPulse { 0%,100% { scale: .2 1; opacity: .3 } 50% { scale: 1 1; opacity: 1 } }

  @media (max-width: 860px) { .hero__hint { display: none } }
}

/* ─────────── WSTĄŻKA ─────────── */
@layer components {
  .ribbon {
    background: var(--navy);
    color: var(--cream);
    padding-block: 1.1rem;
    overflow: hidden;
    display: flex;
  }
  .ribbon__track {
    display: flex;
    gap: 2rem;
    white-space: nowrap;
    animation: marquee 34s linear infinite;
    /* prędkość reaguje na scroll (JS ustawia --sp) */
    animation-duration: calc(34s / var(--sp, 1));
  }
  .ribbon__track span {
    font-size: var(--step-1);
    font-weight: 500;
    letter-spacing: -.02em;
    padding-right: 2rem;
  }
  .ribbon__track i { font-style: normal; color: var(--purple); }
  @keyframes marquee { to { translate: -50% 0 } }
  .ribbon:hover .ribbon__track { animation-play-state: paused; }
}

/* ─────────── O MNIE ─────────── */
@layer layout {
  .about {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    padding: var(--sect) var(--gut);
    max-width: 1400px;
    margin-inline: auto;
  }
  @media (max-width: 760px) { .about { grid-template-columns: 1fr } }

  .orb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cream-2);
    display: grid;
    place-items: center;
    transition: scale .6s var(--ease);
  }
  .orb:hover { scale: 1.04; }
  .orb__core {
    width: 52%; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--vl-grad);
    transition: scale .6s var(--ease), border-radius .6s var(--ease);
  }
  .orb:hover .orb__core { scale: 1.15; border-radius: 32%; }
  .orb__dot {
    position: absolute;
    right: 8%; bottom: 10%;
    width: 14px; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--purple);
    animation: float 5s var(--ease-io) infinite;
  }
  @keyframes float { 0%,100% { translate: 0 0 } 50% { translate: 0 -12px } }

  .about__body { font-size: var(--step-1); color: var(--ink-60); max-width: 56ch; margin-top: 1.4rem; }
}

/* ─────────── DIAGNOZA ─────────── */
@layer layout {
  .diagnosis {
    background: var(--navy);
    color: var(--cream);
    padding: var(--sect) var(--gut);
    border-radius: var(--r);
    margin-inline: clamp(0px, 2vw, 2rem);
    position: relative;
    overflow: clip;
  }
  .diagnosis::after {
    content: '';
    position: absolute;
    width: 60vmax; aspect-ratio: 1;
    right: -20vmax; top: -20vmax;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--vl-plum) 60%, transparent), transparent 65%);
    filter: blur(40px);
    pointer-events: none;
  }
  .diagnosis__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2.5rem, 7vw, 7rem);
    max-width: 1400px;
    margin-inline: auto;
  }
  @media (max-width: 900px) { .diagnosis__grid { grid-template-columns: 1fr } }

  .diagnosis__body {
    margin-top: 1.8rem;
    max-width: 50ch;
    color: color-mix(in oklab, var(--cream) 70%, transparent);
  }

  .diagnosis__stats { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-content: center; }
  .stat { margin: 0; }
  .stat__num {
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    font-weight: 600;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--blue-lt);
    font-variant-numeric: tabular-nums;
  }
  .stat--purple .stat__num { color: var(--purple); }
  .stat__bar {
    height: 2px;
    background: color-mix(in oklab, var(--cream) 16%, transparent);
    margin: 1.2rem 0 1rem;
    overflow: hidden;
  }
  .stat__bar i {
    display: block;
    height: 100%;
    width: var(--w);
    background: var(--blue-lt);
    scale: 0 1;
    transform-origin: 0 50%;
    transition: scale 1.2s .2s var(--ease);
  }
  .stat--purple .stat__bar i { background: var(--vl-grad); }
  .stat.is-in .stat__bar i,
  html:not(.js) .stat__bar i { scale: 1 1; }
  .stat figcaption { color: color-mix(in oklab, var(--cream) 62%, transparent); max-width: 34ch; }
  .stat small { opacity: .6; font-size: .82em; }
}

/* ─────────── OFERTA (sticky stack) ─────────── */
@layer layout {
  .offer { padding: var(--sect) var(--gut); max-width: 1200px; margin-inline: auto; }
  .offer__head { text-align: center; margin-bottom: clamp(3rem, 8vh, 6rem); }
  .offer__head .eyebrow { text-align: center; }

  .stack { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }

  .card {
    position: sticky;
    top: calc(7rem + var(--i) * 1.4rem);
    background: var(--paper);
    border-radius: var(--r);
    padding: clamp(1.8rem, 4vw, 3.2rem);
    box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px rgba(22,32,74,.35);
    transition: box-shadow .5s var(--ease), translate .5s var(--ease);
  }
  .card:hover { box-shadow: 0 1px 0 var(--line), 0 40px 70px -40px rgba(22,32,74,.5); }

  .card__shape { width: 44px; aspect-ratio: 1; margin-bottom: 1.6rem; transition: rotate .7s var(--ease), border-radius .7s var(--ease); }
  .card__shape--square { background: var(--blue); border-radius: 12px; }
  .card__shape--circle { background: var(--vl-grad); border-radius: 50%; }
  .card__shape--dome   { background: var(--pink); border-radius: 999px 999px 4px 4px; }
  .card:hover .card__shape--square { rotate: 45deg; border-radius: 50%; }
  .card:hover .card__shape--circle { border-radius: 14px; rotate: -30deg; }
  .card:hover .card__shape--dome   { rotate: 180deg; }

  .card__meta {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: .9rem;
  }
  .card__meta--purple { color: var(--purple); }
  .card__meta--pink   { color: var(--pink); }
  .card__title { font-size: var(--step-2); margin-bottom: 1rem; }
  .card__body  { color: var(--ink-60); max-width: 52ch; }
  .card__list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.8rem;
  }
  .card__list li {
    font-size: var(--step--1);
    padding: .45rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-60);
    transition: border-color .4s, color .4s, background .4s;
  }
  .card:hover .card__list li { border-color: color-mix(in oklab, var(--blue) 30%, transparent); }
  .card__idx {
    position: absolute;
    top: clamp(1.8rem, 4vw, 3.2rem);
    right: clamp(1.8rem, 4vw, 3.2rem);
    font-size: var(--step--1);
    letter-spacing: .1em;
    color: var(--ink-38);
  }
}

/* ─────────── ARTYKUŁY ─────────── */
@layer layout {
  .notes { padding: var(--sect) var(--gut); max-width: 1200px; margin-inline: auto; }
  .notes__head { margin-bottom: clamp(2rem, 5vh, 4rem); }

  .note {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.4rem, 3vw, 2.2rem) 0;
    border-top: 1px solid var(--line);
    cursor: pointer;
    isolation: isolate;
    transition: color .45s var(--ease), padding-inline .45s var(--ease);
  }
  .note:last-child { border-bottom: 1px solid var(--line); }
  .note::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy);
    scale: 1 0;
    transform-origin: 50% 100%;
    transition: scale .5s var(--ease);
  }
  .note:hover { color: var(--cream); padding-inline: clamp(1rem, 2vw, 2rem); }
  .note:hover::before { scale: 1 1; transform-origin: 50% 0; }
  .note__no { font-size: var(--step--1); color: var(--ink-38); transition: color .45s; }
  .note:hover .note__no { color: var(--blue-lt); }
  .note h3 { font-size: var(--step-1); font-weight: 500; letter-spacing: -.03em; }
  .note__meta { font-size: var(--step--1); color: var(--ink-38); transition: color .45s; }
  .note:hover .note__meta { color: color-mix(in oklab, var(--cream) 60%, transparent); }
  .note__go { font-style: normal; transition: translate .45s var(--ease); }
  .note:hover .note__go { translate: .5rem 0; }

  @media (max-width: 640px) {
    .note { grid-template-columns: auto 1fr; }
    .note__meta, .note__go { display: none; }
  }
}

/* ─────────── CTA ─────────── */
@layer layout {
  .cta {
    background: var(--blue);
    color: #fff;
    padding: clamp(5rem, 14vh, 9rem) var(--gut);
    border-radius: var(--r);
    margin: 0 clamp(0px, 2vw, 2rem) clamp(0px, 2vw, 2rem);
    text-align: center;
    position: relative;
    overflow: clip;
  }
  .cta::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from var(--shine), transparent 0 70%, rgba(255,255,255,.16) 85%, transparent 100%);
    animation: shine 8s linear infinite;
    pointer-events: none;
  }
  @keyframes shine { to { --shine: 360deg } }

  .cta__inner { position: relative; max-width: 34ch; margin-inline: auto; display: grid; gap: 1.4rem; justify-items: center; }
  .cta__title { font-size: var(--step-3); letter-spacing: -.05em; }
  .cta__sub { color: rgba(255,255,255,.78); }
  .cta .btn { margin-top: .8rem; }
  .cta .btn--dark::before { background: #fff; }
  .cta .btn--dark:hover { color: var(--navy); }
}

/* ─────────── STOPKA ─────────── */
@layer layout {
  .footer {
    background: var(--navy);
    color: var(--cream);
    padding: clamp(3rem, 8vh, 5rem) var(--gut) 2rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }
  @media (max-width: 760px) { .footer { grid-template-columns: 1fr } }

  .footer__brand p {
    margin-top: 1.2rem;
    max-width: 34ch;
    color: color-mix(in oklab, var(--cream) 60%, transparent);
    font-size: var(--step--1);
  }
  .footer__cols { display: flex; gap: clamp(2rem, 6vw, 5rem); justify-content: flex-end; }
  @media (max-width: 760px) { .footer__cols { justify-content: flex-start } }
  .footer__cols h4 {
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--cream) 45%, transparent);
    margin-bottom: 1rem;
    font-weight: 500;
  }
  .footer__cols div { display: grid; gap: .55rem; }
  .footer__cols a {
    font-size: var(--step--1);
    color: color-mix(in oklab, var(--cream) 78%, transparent);
    width: fit-content;
    transition: color .35s, translate .35s var(--ease);
  }
  .footer__cols a:hover { color: var(--cream); translate: .3rem 0; }

  .footer__bar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(2rem, 6vh, 4rem);
    padding-top: 1.4rem;
    border-top: 1px solid color-mix(in oklab, var(--cream) 14%, transparent);
    font-size: .78rem;
    color: color-mix(in oklab, var(--cream) 45%, transparent);
    font-variant-numeric: tabular-nums;
  }
}

/* ═══════════ MOTION: odsłony ═══════════ */
@layer motion {
  /* linie nagłówka — maska */
  .hero__title .line { display: block; overflow: hidden; }
  .hero__title .line {
    padding-bottom: .14em;
    margin-bottom: -.14em;
  }
  .js .hero__title .line > span {
    display: block;
    translate: 0 105%;
    transition: translate 1s var(--ease);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  body.is-ready .hero__title .line > span { translate: 0 0; }

  /* słowa dzielone przez JS */
  .split .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .14em;
    margin-bottom: -.14em;
  }
  .js .split .w > i {
    display: inline-block;
    font-style: inherit;
    translate: 0 105%;
    transition: translate .85s var(--ease);
    transition-delay: calc(var(--d, 0) * 45ms);
  }
  .split.is-in .w > i { translate: 0 0; }

  /* proste elementy */
  .js .reveal-line {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .9s var(--ease), translate .9s var(--ease);
  }
  .reveal-line.is-in,
  body.is-ready .hero .reveal-line { opacity: 1; translate: 0 0; }
  body.is-ready .hero .eyebrow    { transition-delay: .15s }
  body.is-ready .hero .hero__lead { transition-delay: .55s }
  body.is-ready .hero .hero__cta  { transition-delay: .7s }

  .js .card, .js .note, .js .orb {
    opacity: 0;
    translate: 0 30px;
    transition: opacity .9s var(--ease), translate .9s var(--ease),
                box-shadow .5s var(--ease), scale .6s var(--ease);
  }
  .card.is-in, .note.is-in, .orb.is-in { opacity: 1; translate: 0 0; }

  /* ── BEZPIECZNIK ──
     Gdyby main.js padł (błąd, blokada, wolna sieć), klasa .js już jest ustawiona,
     więc treść zostałaby ukryta na zawsze. Te animacje odsłaniają ją po 5 s
     niezależnie od JS-u. Strona nie ma prawa zostać pusta. */
  @keyframes failsafeShow  { to { opacity: 1; translate: 0 0 } }
  @keyframes failsafeHide  { to { opacity: 0; visibility: hidden; pointer-events: none } }

  .js .intro { animation: failsafeHide 0s 5s forwards; }
  .js .hero__title .line > span,
  .js .split .w > i,
  .js .reveal-line,
  .js .card, .js .note, .js .orb { animation: failsafeShow 0s 5s forwards; }

  /* ── redukcja ruchu ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    .grain { display: none }
    .reveal-line, .card, .note, .orb { opacity: 1 !important; translate: none !important }
    .hero__title .line > span, .split .w > i { translate: none !important }
    .card { position: static }
  }
}

/* ═══════════════════════════════════════════════════════════
   KOMPOZYCJA GEOMETRYCZNA  (język v-labs × koncept z PDF)
   Płaskie prymitywy, nakładanie z multiply, siatka kropek.
   --a: 0 = rozsypane („szum"), 1 = złożone („w punkt").
   Wartość ustawia JS na scrollu.
   ═══════════════════════════════════════════════════════════ */
@layer layout {
  .compo {
    --a: 0;
    position: relative;
    grid-column: 2;
    z-index: 1;
    justify-self: center;
    width: min(100%, 30rem);
    aspect-ratio: 1;
    isolation: isolate;
  }
  @media (max-width: 900px) {
    .compo { grid-column: 1; width: min(88%, 24rem); margin-top: 2rem; }
  }

  .compo > * {
    position: absolute;
    /* rozsypanie → złożenie: przesunięcie maleje wraz z --a */
    --k: calc(1 - var(--a));
    translate: calc(var(--dx, 0px) * var(--k)) calc(var(--dy, 0px) * var(--k));
    rotate: calc(var(--rz, 0deg) * var(--k));
    opacity: calc(.72 + .28 * var(--a));
    transition: translate .5s var(--ease), rotate .5s var(--ease), opacity .5s;
  }

  /* pierścień — znak „punktu", domyka całość */
  .compo__ring {
    inset: 12% 10% 12% 10%;
    border: 1.5px solid color-mix(in oklab, var(--navy) 45%, transparent);
    border-radius: 50%;
    --dx: -42px; --dy: 36px; --rz: -14deg;
  }

  /* zaokrąglony kwadrat — wprost z konceptu PDF */
  .compo__square {
    left: 6%; top: 20%;
    width: 34%; aspect-ratio: 1;
    background: var(--blue);
    border-radius: 22%;
    --dx: -64px; --dy: -46px; --rz: -18deg;
  }

  /* półkole / kopuła — fiolet v-labs, na multiply nad kwadratem */
  .compo__dome {
    left: 26%; top: 14%;
    width: 40%; aspect-ratio: 2 / 1;
    background: var(--vl-grad);
    border-radius: 999px 999px 0 0;
    mix-blend-mode: multiply;
    --dx: 52px; --dy: -40px; --rz: 20deg;
  }

  /* koło dzielone na dwa tony — sygnaturowy zabieg v-labs */
  .compo__split {
    right: 6%; bottom: 14%;
    width: 42%; aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(90deg,
      var(--pink) 0 50%,
      color-mix(in oklab, var(--pink) 42%, var(--cream)) 50% 100%);
    --dx: 58px; --dy: 50px; --rz: 14deg;
  }

  /* granatowy punkt — środek ciężkości kompozycji */
  .compo__dot {
    left: 44%; top: 46%;
    width: 12%; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--navy);
    --dx: -24px; --dy: 64px;
  }

  /* stos belek o zaokrąglonych końcach */
  .compo__bars {
    right: 6%; top: 20%;
    display: grid;
    gap: .5rem;
    --dx: 46px; --dy: -26px; --rz: 9deg;
  }
  .compo__bars i {
    display: block;
    width: 3.2rem; height: .62rem;
    border-radius: 999px;
    background: var(--vl-teal);
  }
  .compo__bars i:nth-child(2) { width: 2.2rem; background: var(--vl-amber); }
  .compo__bars i:nth-child(3) { width: 2.7rem; background: var(--blue); }

  /* trójkąt-strzałka */
  .compo__tri {
    left: 12%; bottom: 20%;
    width: 0; height: 0;
    border-left: .95rem solid var(--vl-red);
    border-block: .58rem solid transparent;
    --dx: -52px; --dy: 40px; --rz: -28deg;
  }

  /* siatka kropek */
  .compo__dots {
    left: 0; bottom: 6%;
    width: 26%; aspect-ratio: 1 / .8;
    background-image: radial-gradient(color-mix(in oklab, var(--navy) 55%, transparent) 1.6px, transparent 1.7px);
    background-size: 15% 19%;
    --dx: -46px; --dy: 46px;
  }

  /* delikatny oddech po złożeniu */
  .compo__dome, .compo__split, .compo__square { will-change: translate, rotate; }

  @media (prefers-reduced-motion: reduce) {
    .compo { --a: 1 !important; }
    .compo > * { opacity: 1 !important; transition: none; }
  }
}

/* ── POPRAWKA KASKADY WARSTW ──
   Reguła ukrywająca CTA na mobile żyła w @layer layout, a `.btn{display:inline-flex}`
   w @layer components. Components jest PÓŹNIEJ w kolejce warstw, więc wygrywała
   mimo niższej specyficzności — przycisk pokazywał się i zawijał w dwie linie.
   Ukrycie musi być w tej samej (lub późniejszej) warstwie co deklaracja .btn. */
@layer components {
  @media (max-width: 860px) {
    .nav > .btn { display: none; }
  }
}