/* =========================================================
   itMM · AI landing v2 — „Wirtualne miasto — zejście"
   Stylistyka: granat nocy + złoto, szkło nad żywym canvasem,
   serif Playfair w nagłówkach, mono w etykietach.
   Klasy i kontrakty JS zgodne z js/ai.js (reveal, taby, FAQ,
   formularz, custom select) + js/scene.js (scena, HUD, pulpit).
   ========================================================= */

/* ---------- fonty: self-host 400 (LCP), reszta z CDN po load ---------- */
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- tokeny ---------- */
:root{
  --sky-top:#03050b;
  --ink:#eef2f8;
  --ink-dim:#8b94a6;
  --ink-mute:#7a8496;
  --gold:#e9c877;
  --gold-1:#d4af37;
  --gold-3:#f4e2a1;
  --cyan:#6cc8ff;
  --green:#3fdd92;
  --red:#ff6a5e;
  --glass-bd:rgba(212,175,55,.20);
  --line:rgba(255,255,255,.08);
  --grad-gold:linear-gradient(100deg,#d4af37 0%,#e9c877 46%,#f4e2a1 100%);
  --ease:cubic-bezier(.16,.84,.34,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --shadow-soft:0 36px 90px -24px rgba(0,0,0,.82);
  --header-offset:96px;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Space Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
html,body{
  background:#03050b;
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body{
  min-height:100svh;position:relative;
  background:linear-gradient(180deg,var(--sky-top) 0%,#060a14 60%,#0a1120 100%);
  font-size:16px;line-height:1.6;
}
::selection{background:rgba(212,175,55,.32);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.btn.glow:focus-visible{outline:2px solid #fff;outline-offset:3px}

h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.08;text-wrap:balance;text-shadow:0 1px 16px rgba(3,5,11,.65)}
h3{font-weight:600;letter-spacing:.01em}
.gold{
  font-style:italic;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 14px rgba(212,175,55,.18));
}

.skip-link{
  position:fixed;left:14px;top:-60px;z-index:100;
  padding:10px 16px;border-radius:999px;background:#0d1426;border:1px solid var(--glass-bd);
  font-family:var(--mono);font-size:12px;color:var(--gold-3);transition:top .3s;
}
.skip-link:focus-visible{top:14px}

.container{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.container.narrow{max-width:880px}

/* =====================================================================
   SCENA + HUD
   ===================================================================== */
.scene{
  position:fixed;top:0;left:0;right:0;z-index:0;pointer-events:none;overflow:hidden;
  /* 100lvh: pełna wysokość Z UKRYTYM paskiem adresu od startu — przy
     pierwszym scrollu na mobile pasek chowa się i odsłania JUŻ namalowany
     fragment (przedtem: czarny pas do czasu resize) */
  height:100vh;height:100lvh;
  /* gradient zapasowy: gdyby CDN three / dane sceny nie wstały,
     strona stoi na nocnym granacie zamiast na czystej czerni */
  background:linear-gradient(180deg,#0a0f1a 0%,#04060c 60%,#03050b 100%);
}
.scene-poster{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(180deg,#0a0f1a 0%,#04060c 60%,#03050b 100%);
  opacity:1;
  transition:opacity .2s var(--ease-soft), visibility 0s linear .2s;
  will-change:opacity;
  contain:paint;
}
.scene-poster__map{
  position:absolute;inset:-64%;z-index:1;
  background-image:image-set(url("../scene-poster-warm.webp") type("image/webp"), url("../orto-full.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:53% 79%;
  /* origin nisko przy Wiśle/Wawelu: końcówka bitmapowego zoomu ma siadać
     w tym samym rejonie, z którego startuje pierwsza klatka WebGL. */
  transform-origin:55% 86%;
  /* Dłuższy, płaski transform jednego bitmapowego posteru: bez rotacji i z
     mniejszą zmianą skali, żeby nie odsłaniać krawędzi i nie pompować rastra. */
  animation:drone-descent 28s linear both;
  will-change:transform;
}
.scene-poster::before{
  content:"";position:absolute;inset:-9%;z-index:2;pointer-events:none;
  background:
    radial-gradient(82% 66% at 54% 48%, rgba(236,228,204,0) 54%, rgba(226,220,204,.20) 76%, rgba(5,7,12,.40) 100%),
    linear-gradient(180deg, rgba(236,228,204,.10), rgba(5,7,12,.18) 72%, rgba(3,5,11,.34));
}
@media (max-width:980px){
  .scene-poster__map{
    background-image:image-set(
      url("../scene-poster-warm.mobile.webp") type("image/webp"),
      url("../orto-full.mobile.avif") type("image/avif"),
      url("../scene-poster-mobile.webp") type("image/webp"),
      url("../og-image.jpg") type("image/jpeg")
    );
  }
}
html[data-scene-profile="mobile"] .scene-poster__map{
  background-image:image-set(
    url("../scene-poster-warm.mobile.webp") type("image/webp"),
    url("../orto-full.mobile.avif") type("image/avif"),
    url("../scene-poster-mobile.webp") type("image/webp"),
    url("../og-image.jpg") type("image/jpeg")
  );
}
.scene-poster::after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:
    radial-gradient(70% 56% at 54% 44%, rgba(250,192,76,.26), transparent 64%),
    linear-gradient(105deg, rgba(72,42,10,.06), rgba(22,13,5,.24));
  animation:clarity-reveal 6.8s linear forwards;
}
.scene-sky{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(80% 48% at 52% 26%, rgba(255,216,96,.84), rgba(224,122,40,.36) 46%, transparent 72%),
    linear-gradient(180deg, rgba(160,78,24,.62) 0%, rgba(226,136,48,.38) 42%, rgba(7,10,17,0) 100%);
  mix-blend-mode:screen;
  opacity:.28;
  transform:translate3d(0,-2%,0) scale(1.02);
  animation:sky-warmth-lift 9.2s linear forwards;
  will-change:opacity,transform;
}
.scene-clarity{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(82% 58% at 50% 38%, rgba(255,226,168,.18), transparent 62%),
    linear-gradient(180deg, rgba(246,220,166,.14), rgba(28,18,9,.18) 76%, rgba(10,7,4,.30));
  mix-blend-mode:screen;
  opacity:.18;
  animation:clarity-lift 6.8s linear forwards;
  will-change:opacity;
}
.scene-fog{
  position:absolute;inset:-18%;z-index:3;pointer-events:none;
  background:
    radial-gradient(62% 44% at 48% 33%, rgba(255,238,194,.26), transparent 68%),
    radial-gradient(54% 38% at 72% 54%, rgba(222,200,160,.14), transparent 70%),
    linear-gradient(180deg, rgba(252,224,170,.14), rgba(252,224,170,.04) 44%, transparent 72%);
  filter:blur(18px);
  mix-blend-mode:screen;
  opacity:.44;
  transform:translate3d(0,-2%,0) scale(1.04);
  animation:mist-dissolve 6.2s linear forwards;
  will-change:opacity,transform;
}
.scene-clouds{
  position:absolute;inset:-26% -20%;z-index:4;pointer-events:none;
  background:
    linear-gradient(104deg, transparent 0 14%, rgba(240,244,248,.28) 25%, transparent 42%),
    linear-gradient(112deg, transparent 12%, rgba(240,244,248,.22) 36%, transparent 58%),
    linear-gradient(96deg, transparent 41%, rgba(240,244,248,.18) 60%, transparent 78%);
  filter:blur(28px);
  opacity:.42;
  mix-blend-mode:screen;
  transform:translate3d(-10%,3%,0) rotate(-4deg);
  animation:cloud-drift 13s linear infinite, cloud-dissolve 6.4s linear forwards;
  will-change:transform,opacity;
}
.scene-clouds--far{
  inset:-32% -24%;
  opacity:.42;
  filter:blur(42px);
  transform:translate3d(11%,-5%,0) rotate(4deg);
  animation-duration:19s,6.8s;
  animation-direction:reverse,normal;
}
/* lot drona na posterze: płaski, bez rotacji. Zmniejszony zakres skali i
   delikatna końcówka obniżają koszt kompozycji oraz maskują krawędzie rastra. */
@keyframes drone-descent{
  0%{transform:translate3d(-4.6%,-13.2%,0) scale(.60) rotateZ(0deg)}
  14%{transform:translate3d(-4.0%,-11.2%,0) scale(.63) rotateZ(0deg)}
  28%{transform:translate3d(-3.15%,-8.5%,0) scale(.68) rotateZ(0deg)}
  42%{transform:translate3d(-2.25%,-5.4%,0) scale(.75) rotateZ(0deg)}
  56%{transform:translate3d(-1.38%,-2.2%,0) scale(.83) rotateZ(0deg)}
  70%{transform:translate3d(-.66%,.5%,0) scale(.90) rotateZ(0deg)}
  84%{transform:translate3d(-.18%,1.85%,0) scale(.95) rotateZ(0deg)}
  94%{transform:translate3d(0,2.35%,0) scale(.972) rotateZ(0deg)}
  100%{transform:translate3d(0,2.8%,0) scale(.99) rotateZ(0deg)}
}
@keyframes cloud-drift{
  0%{transform:translate3d(-12%,4%,0) rotate(-4deg)}
  100%{transform:translate3d(10%,-3%,0) rotate(-4deg)}
}
@keyframes cloud-dissolve{
  0%{opacity:.50}
  24%{opacity:.42}
  48%{opacity:.31}
  72%{opacity:.20}
  100%{opacity:.10}
}
@keyframes mist-dissolve{
  0%{opacity:.44;transform:translate3d(0,-1%,0) scale(1.04)}
  25%{opacity:.34;transform:translate3d(0,-2.5%,0) scale(1.07)}
  50%{opacity:.22;transform:translate3d(0,-4.5%,0) scale(1.11)}
  75%{opacity:.13;transform:translate3d(0,-6.5%,0) scale(1.15)}
  100%{opacity:.05;transform:translate3d(0,-8%,0) scale(1.18)}
}
@keyframes clarity-reveal{
  0%{opacity:1}
  35%{opacity:.82}
  70%{opacity:.58}
  100%{opacity:.38}
}
@keyframes clarity-lift{
  0%{opacity:.08}
  34%{opacity:.13}
  68%{opacity:.20}
  100%{opacity:.25}
}
@keyframes sky-warmth-lift{
  0%{opacity:.28;transform:translate3d(0,-2%,0) scale(1.02)}
  46%{opacity:.34;transform:translate3d(0,-1.4%,0) scale(1.015)}
  75%{opacity:.42;transform:translate3d(0,-.6%,0) scale(1.006)}
  100%{opacity:.54;transform:translate3d(0,0,0) scale(1)}
}
#scene-canvas{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;
  opacity:1;transition:opacity .2s var(--ease-soft);
}
.js:not(.scene-ready) #scene-canvas{opacity:0}
.scene-ready .scene-poster{opacity:0;visibility:hidden}
.scene-lite #scene-canvas{display:none}
.scene-lite .scene-poster{opacity:1;visibility:visible;transition:none}
.scene-transition-cloud{
  position:absolute;inset:-22%;z-index:4;pointer-events:none;
  background:
    radial-gradient(66% 46% at 50% 36%, rgba(248,249,241,.58), transparent 70%),
    radial-gradient(58% 36% at 70% 58%, rgba(232,226,211,.34), transparent 72%),
    linear-gradient(112deg, transparent 4%, rgba(248,241,221,.32) 36%, transparent 66%);
  filter:blur(24px);
  mix-blend-mode:screen;
  opacity:0;
  transform:translate3d(0,5%,0) scale(1.08);
  will-change:opacity,transform;
}
.scene-ready .scene-transition-cloud{animation:none}
@keyframes webgl-cloud-wipe{
  0%{opacity:.38;transform:translate3d(0,5%,0) scale(1.05)}
  12%{opacity:.97}
  38%{opacity:.97;transform:translate3d(0,1.5%,0) scale(1.12)}
  100%{opacity:0;transform:translate3d(0,-8.5%,0) scale(1.26)}
}
.scene-poster::after{display:none}
.scene-sky,
.scene-clarity,
.scene-fog,
.scene-clouds,
.scene-clouds--far{display:none;animation:none}
.scene-transition-cloud{display:none}
.scene-ready .scene-transition-cloud{animation:none}
@media (prefers-reduced-motion:reduce){
  #scene-canvas,.scene-poster{transition:none}
  .scene-poster__map,.scene-clouds,.scene-fog,.scene-clarity,.scene-sky,.scene-transition-cloud{animation:none}
  .scene-poster__map{transform:translate3d(0,2.8%,0) scale(.99) rotateZ(0deg)}
  .scene-clouds,.scene-fog{opacity:.10}
  .scene-clarity{opacity:.16}
  .scene-sky{opacity:.12;transform:translate3d(0,0,0) scale(1)}
  .scene-transition-cloud{opacity:0}
}
@media (max-width:980px){
  .scene-clouds,.scene-fog,.scene-clarity,.scene-sky,.scene-transition-cloud{animation:none}
  .scene-clouds,.scene-fog{opacity:.10}
  .scene-transition-cloud{display:none}
}
html[data-scene-profile="mobile"] .scene-clouds,
html[data-scene-profile="mobile"] .scene-fog,
html[data-scene-profile="mobile"] .scene-clarity,
html[data-scene-profile="mobile"] .scene-sky,
html[data-scene-profile="mobile"] .scene-transition-cloud{animation:none}
html[data-scene-profile="mobile"] .scene-clouds,
html[data-scene-profile="mobile"] .scene-fog{opacity:.10}
html[data-scene-profile="mobile"] .scene-transition-cloud{display:none}
@media (max-width:980px){
  .scene .grain{mix-blend-mode:normal;opacity:.03}
}
html[data-scene-profile="mobile"] .scene .grain{mix-blend-mode:normal;opacity:.03}
.scene .vignette{
  position:absolute;inset:0;z-index:2;
  background:radial-gradient(130% 102% at 50% 36%, transparent 52%, rgba(0,0,0,.52) 100%);
}
/* bardzo szerokie ekrany: boki panoramy (poza szerokością treści) miękko
   rozmyte — krawędzie danych mapy nie kłują, kadr zachowuje głębię */
@media (min-width:1680px){
  .scene::before,.scene::after{
    content:"";position:absolute;top:0;bottom:0;width:14vw;z-index:2;pointer-events:none;
    backdrop-filter:blur(10px) saturate(.92) brightness(.95);
    -webkit-backdrop-filter:blur(10px) saturate(.92) brightness(.95);
  }
  .scene::before{
    left:0;
    mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 100%);
  }
  .scene::after{
    right:0;
    mask-image:linear-gradient(270deg,#000 0%,#000 30%,transparent 100%);
    -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 30%,transparent 100%);
  }
}
.scene .grain{
  position:absolute;inset:0;z-index:3;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
}

.alti{
  position:fixed;left:clamp(14px,2.4vw,30px);bottom:clamp(16px,3.6vh,34px);z-index:8;
  display:flex;align-items:flex-end;gap:10px;pointer-events:none;
  opacity:0;transform:translateY(8px);transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.alti.on{opacity:1;transform:none}
.alti .rail{position:relative;width:3px;height:74px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.alti .rail i{position:absolute;left:0;right:0;top:0;height:0%;background:linear-gradient(180deg,#f4e2a1,#d4af37);border-radius:2px}
.alti .txt{display:flex;flex-direction:column;gap:3px}
.alti .val{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em;color:#e9dfc2;line-height:1}
.alti .cap{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
@media (max-width:700px){.alti{display:none}}

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg, rgba(3,5,11,.86), rgba(3,5,11,.3) 75%, rgba(3,5,11,0));
  backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);
  border-bottom:1px solid rgba(212,175,55,.07);
  transition:background .4s, transform .45s var(--ease);
}
.site-header.scrolled{background:linear-gradient(180deg, rgba(3,5,11,.94), rgba(3,5,11,.7))}
.header-row{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px}
/* logo projektowane na jasne tło → kremowa plakietka (jak na obecnym landingu) */
.brand-plate{
  display:inline-flex;align-items:center;
  background:linear-gradient(165deg,#f6f1e6,#e9e2d0);
  border-radius:10px;padding:5px 9px;
  box-shadow:0 4px 18px -6px rgba(0,0,0,.6), 0 0 0 1px rgba(244,226,161,.25);
}
.brand-logo{width:104px;height:auto}
.brand-tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#cbb87e;border-left:1px solid rgba(212,175,55,.25);padding-left:12px;
}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font-size:13.5px;color:var(--ink-dim);letter-spacing:.01em;transition:color .3s;
}
.nav a:hover{color:var(--ink)}
.header-cta{margin-left:6px}
.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
  background:rgba(6,10,20,.6);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:18px;height:1.6px;background:#cfd5e0;border-radius:2px;transition:transform .3s,opacity .3s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

@media (max-width:980px){
  .brand-tag{display:none}
  .header-cta{display:none}
  /* ciaśniejszy pasek: mniejsze logo, ściśnięty rytm pionowy */
  .header-row{padding-top:7px;padding-bottom:7px;gap:12px}
  .brand{min-height:38px}
  .brand-plate{padding:4px 7px;border-radius:8px}
  .brand-logo{width:84px}
  .nav-toggle{display:flex;margin-left:auto;width:40px;height:40px}
  .nav{
    position:fixed;left:0;right:0;top:0;z-index:-1;
    flex-direction:column;align-items:stretch;gap:0;
    padding:84px clamp(18px,5vw,40px) 26px;
    background:rgba(3,5,11,.97);border-bottom:1px solid var(--glass-bd);
    transform:translateY(-105%);transition:transform .45s var(--ease);
  }
  .nav a{min-height:52px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.05)}
  .nav-open .nav{transform:none}
}

/* =====================================================================
   PRZYCISKI
   ===================================================================== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:15px;font-weight:600;letter-spacing:.005em;
  padding:15px 25px;border-radius:999px;border:0;cursor:pointer;
  min-height:52px;text-align:center;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s, color .3s, background .3s;
}
.btn.small{min-height:42px;padding:9px 16px;font-size:13px}
.btn.glow{
  color:#1a1406;background:var(--grad-gold);overflow:hidden;isolation:isolate;
  box-shadow:0 14px 40px -12px rgba(212,175,55,.55), 0 2px 0 rgba(255,255,255,.18) inset;
}
.btn.glow::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform:translateX(-130%);transition:transform .9s var(--ease);
}
.btn.glow:hover::before{transform:translateX(130%)}
.btn.glow:hover{transform:translateY(-2px);box-shadow:0 22px 56px -12px rgba(212,175,55,.66), 0 2px 0 rgba(255,255,255,.22) inset}
.btn.glow:active{transform:translateY(0)}
.btn .btn-arrow{transition:transform .35s var(--ease)}
.btn.glow:hover .btn-arrow{transform:translateX(4px)}
.btn.ghost{
  color:#e6d8b3;border:1px solid rgba(212,175,55,.34);
  background:linear-gradient(180deg, rgba(212,175,55,.08), rgba(212,175,55,.02));
}
.btn.ghost:hover{border-color:rgba(212,175,55,.6);color:#f4e2a1;background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(212,175,55,.04));transform:translateY(-1px)}

/* =====================================================================
   SEKCJE / TYPOGRAFIA SEKCJI
   ===================================================================== */
main{position:relative;z-index:10}
main section{position:relative;padding:clamp(72px,11vh,128px) 0}
.section-head{max-width:760px;margin-bottom:clamp(28px,4vw,44px)}
/* scrim jak w hero: miękka ciemna poświata za nagłówkiem sekcji —
   czytelność na jasnych fazach tła (złota godzina/zachód), zanim się ściemni */
.section-head{position:relative}
.section-head::before{
  content:"";position:absolute;inset:-14% -18% -12% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(82% 70% at 36% 44%, rgba(7,10,18,.5) 0%, rgba(7,10,18,.3) 54%, transparent 80%);
}
.section-head h2,h2{font-size:clamp(27px,3.6vw,44px);margin:14px 0 16px}
.section-head p{color:#c4ccd9;font-size:clamp(14.5px,1.5vw,17px);line-height:1.64;text-shadow:0 1px 12px rgba(3,5,11,.8)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:#cbb87e;
  padding:7px 13px;border-radius:999px;
  border:1px solid rgba(212,175,55,.18);background:rgba(8,12,24,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
/* flex:0 0 auto — przy zawiniętym tekście eyebrow flexbox ściskał kropkę w elipsę */
.eyebrow::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 9px 1px rgba(63,221,146,.5);animation:breathe-dot 3.6s ease-in-out infinite}

/* reveal (kontrakt z ai.js: [data-reveal] → .is-visible) */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .95s var(--ease), transform .95s var(--ease)}
.js [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{min-height:calc(100svh - 70px);display:flex;align-items:center;padding-top:clamp(40px,6vh,72px)}
/* scrim czytelności: tło zaczyna się od JASNEJ złotej godziny (WebGL),
   a treść hero jest projektowana pod dark premium — miękka ciemna
   poświata za kolumną tekstu, bez gaszenia panoramy po prawej */
.hero-copy{position:relative}
.hero-copy::before{
  content:"";position:absolute;inset:-12% -16% -10% -22%;z-index:-1;pointer-events:none;
  background:radial-gradient(78% 64% at 38% 42%, rgba(7,10,18,.55) 0%, rgba(7,10,18,.36) 52%, transparent 78%);
}
.hero .lead{text-shadow:0 1px 10px rgba(5,8,14,.7)}
.micro-note{text-shadow:0 1px 8px rgba(5,8,14,.7)}
/* hero po wyniesieniu pulpitu: jedna kolumna treści przy lewej —
   panorama złotej godziny oddycha w prawej części kadru */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;width:100%;
}
.hero-copy{max-width:680px}
.hero-copy .eyebrow{margin-bottom:4px}
.hero h1{font-size:clamp(33px,4.6vw,58px);margin:18px 0 20px;max-width:15ch}
.hero .lead{color:#c4ccd9;font-size:clamp(15px,1.55vw,18px);line-height:1.62;max-width:56ch;margin-bottom:26px}
.cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.micro-note{
  display:inline-block;color:#b9c2d2;font-size:13px;max-width:52ch;margin-bottom:22px;
  padding:9px 13px;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(168deg, rgba(10,15,28,.62), rgba(6,10,20,.55));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.hero-areas{
  display:flex;flex-wrap:wrap;gap:9px;list-style:none;
}
.hero-areas li{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#d3d9e3;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(6,10,20,.42);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:inline-flex;align-items:center;gap:7px;
}
.hero-areas li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.8}

/* wskazówka scrolla */
.descend{
  position:absolute;left:50%;bottom:clamp(14px,3.5vh,34px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-mute);
}
.descend .line{width:1px;height:42px;background:linear-gradient(180deg,rgba(233,200,119,0),rgba(233,200,119,.7));position:relative;overflow:hidden}
.descend .line::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:#f4e2a1;animation:desc 2.6s var(--ease-soft) infinite}
@keyframes desc{0%{top:-40%}70%,100%{top:110%}}
@media (max-height:760px),(max-width:980px){.descend{display:none}}

/* ---------- PULPIT PROCESU (hero-visual) ---------- */
.hero-visual{position:relative;perspective:1500px;perspective-origin:50% 44%;display:flex;justify-content:center}
.stage{position:relative;width:100%;max-width:540px;transform-style:preserve-3d}
.stage .aura{
  position:absolute;inset:-12% -8% -20%;z-index:-1;
  background:radial-gradient(58% 56% at 52% 46%, rgba(212,175,55,.15), rgba(212,175,55,0) 68%),
            radial-gradient(52% 50% at 60% 60%, rgba(108,200,255,.09), rgba(108,200,255,0) 70%);
  filter:blur(12px);opacity:.45;transition:opacity .6s var(--ease);
}
.panel.dash{
  position:relative;transform-style:preserve-3d;
  border-radius:22px;padding:20px 20px 18px;
  /* bez backdrop-filter: panel transformuje się co klatkę nad żywym canvasem */
  background:linear-gradient(168deg, rgba(13,19,36,.92), rgba(6,10,21,.88));
  border:1px solid rgba(212,175,55,.2);
  box-shadow:var(--shadow-soft), 0 0 0 1px rgba(108,200,255,.05) inset, 0 1px 0 rgba(255,255,255,.05) inset;
  will-change:transform;
}
.panel.dash::before{
  content:"";position:absolute;left:18px;right:18px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,226,161,.45),transparent);
}
.panel-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink-mute);text-transform:uppercase}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.status-pill{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#9fb0c4;
  padding:5px 10px;border-radius:999px;border:1px solid rgba(108,200,255,.2);background:rgba(108,200,255,.05);
}
/* spokojne, oddychające światło kontrolne — bez transform:scale (nerwowe „ściskanie") */
.status-dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 10px 2px rgba(63,221,146,.5);animation:breathe-dot 3.6s ease-in-out infinite}
@keyframes breathe-dot{
  0%,100%{opacity:.55;box-shadow:0 0 4px 1px rgba(63,221,146,.30)}
  50%{opacity:1;box-shadow:0 0 13px 3px rgba(63,221,146,.75)}
}
@keyframes pulse-dot{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.metric{
  border-radius:13px;padding:11px 11px 10px;
  background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border:1px solid var(--line);
}
.metric-key{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:6px}
.metric-val{font-size:12.5px;font-weight:600;color:#f0f3f8;line-height:1.3}

.chart{
  border-radius:13px;padding:11px 12px 8px;margin-bottom:12px;
  background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07);
}
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.chart-legend{font-family:var(--mono);font-size:9px;color:var(--gold)}
.spark{display:block;width:100%;height:74px;overflow:visible}
.spark-line{stroke-dasharray:620;stroke-dashoffset:620}
.spark-line.drawn{transition:stroke-dashoffset 1.7s var(--ease-soft);stroke-dashoffset:0}
.spark-area{opacity:0}
.spark-area.drawn{transition:opacity 1.2s var(--ease-soft) .5s;opacity:1}

.flow{
  display:flex;align-items:center;gap:4px;
  border-radius:13px;padding:11px 10px;margin-bottom:12px;
  background:linear-gradient(165deg, rgba(108,200,255,.05), rgba(255,255,255,.008));
  border:1px solid rgba(108,200,255,.14);
}
.flow-step{
  display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;
  opacity:.55;transition:opacity .4s, transform .4s;
}
.flow-step.active{opacity:1;transform:translateY(-2px)}
.flow-ico{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#9fb0c4;
  border:1px solid var(--line);background:rgba(10,16,30,.7);
  transition:color .4s,border-color .4s,box-shadow .4s;
}
.flow-ico svg{width:15px;height:15px}
.flow-step.active .flow-ico{color:#f4e2a1;border-color:rgba(212,175,55,.45);box-shadow:0 0 16px -4px rgba(212,175,55,.6)}
.flow-name{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--ink-mute);text-transform:uppercase}
.flow-step.active .flow-name{color:#e9dfc2}
.flow-link{position:relative;flex:1 1 auto;height:1px;min-width:8px;background:rgba(108,200,255,.22);overflow:visible}
.flow-link::after{
  content:"";position:absolute;top:-1.5px;left:0;width:4px;height:4px;border-radius:50%;
  background:#f4e2a1;box-shadow:0 0 6px rgba(244,226,161,.9);opacity:0;
}
.flow-link.flowing::after{animation:flow-dot 1s var(--ease-soft) forwards}
@keyframes flow-dot{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 4px);opacity:0}}

/* sekcja-dowód pod hero: kompaktowa, pulpit wycentrowany */
.dash-section{padding:clamp(28px,6vh,64px) 0 clamp(56px,9vh,104px)}
main section.dash-section{padding:clamp(28px,6vh,64px) 0 clamp(56px,9vh,104px)}
.dash-intro{margin-inline:auto;margin-bottom:clamp(20px,3.5vh,34px);text-align:center;max-width:640px}
.dash-intro p:not(.eyebrow){margin-inline:auto}
.dash-intro::before{inset:-30% -22% -26% -22%;
  background:radial-gradient(80% 78% at 50% 48%, rgba(7,10,18,.5) 0%, rgba(7,10,18,.3) 54%, transparent 80%)}
.dash-section .hero-visual{max-width:780px;margin-inline:auto}

.dash-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ai-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#d8c386;
  padding:6px 11px;border-radius:999px;border:1px solid var(--glass-bd);background:rgba(212,175,55,.05);
}
.ai-spark{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 1px rgba(233,200,119,.8);animation:pulse-dot 1.5s var(--ease-soft) infinite}
.dash-disclaimer{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink-mute);text-transform:uppercase}

@media (max-width:980px){
  .hero{min-height:auto}
  /* mobile: górny padding sekcji to oddech, nie ćwierć ekranu pustki po dojeździe do kotwicy */
  main section{padding:clamp(20px,3vh,32px) 0}
  main section.dash-section{padding:clamp(14px,2.2vh,24px) 0 clamp(20px,3vh,32px)}
  /* header chowa się przy scrollu w dół (sterowane w ai.js) — pełny kadr na zjazd,
     a kotwice mogą celować tuż pod krawędź ekranu */
  .site-header.nav-hide{transform:translateY(-105%)}
  /* mobile: menu→hero o połowę ciaśniej (sumowały się paddingi sekcji i hero) */
  main section.hero{padding:clamp(14px,2.4vh,24px) 0 clamp(40px,6vh,64px)}
  .hero{padding-top:0}
  .hero-grid{grid-template-columns:1fr}
  .stage{max-width:480px}
  .hero-copy{text-align:center;margin-inline:auto}
  .hero-copy .eyebrow{margin-left:auto;margin-right:auto}
  .hero h1{margin-left:auto;margin-right:auto}
  .hero .lead,.micro-note{margin-left:auto;margin-right:auto}
  .cta{justify-content:center}
  .hero-areas{justify-content:center}
}
@media (max-width:560px){
  .metric-row{grid-template-columns:1fr 1fr}
  .flow{flex-wrap:wrap;justify-content:center}
  .flow-link{display:none}
  .btn.glow{width:100%}
}

/* =====================================================================
   LISTY / DROBNE KOMPONENTY TREŚCI
   ===================================================================== */
.check-list{list-style:none;display:grid;gap:10px;position:relative}
/* scrim jak przy nagłówkach — listy bywają na gołym (jasnym) tle panoramy */
.check-list::before{
  content:"";position:absolute;inset:-10% -8% -10% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(86% 80% at 40% 50%, rgba(7,10,18,.48) 0%, rgba(7,10,18,.28) 56%, transparent 82%);
}
.check-list li{
  position:relative;padding-left:26px;color:#c4ccd9;font-size:14.5px;line-height:1.55;
  text-shadow:0 1px 9px rgba(4,6,12,.7);
}
.check-list li::before{
  content:"✓" / "";position:absolute;left:0;top:1px;
  width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;
  font-size:9.5px;color:var(--gold-3);
  border:1px solid rgba(212,175,55,.35);background:rgba(212,175,55,.07);
}
.audience-list{max-width:780px;gap:12px}
.audience-list li{font-size:15px}

.note-line{
  margin-top:26px;max-width:780px;
  padding:14px 18px;border-radius:14px;
  border:1px solid rgba(255,138,120,.2);
  background:linear-gradient(168deg, rgba(34,15,12,.74), rgba(18,9,9,.7));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#d9c9c4;font-size:13.5px;
}
.note-line strong{color:#f3b9ad;font-weight:600}

.pull-quote{
  position:relative;
  margin:clamp(28px,4vw,44px) auto 0;max-width:30ch;
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,27px);line-height:1.45;
  text-align:center;color:#e6ebf3;text-shadow:0 1px 12px rgba(4,6,12,.75);
  text-wrap:balance;
}

/* =====================================================================
   KARTY (problemy / scenariusze)
   ===================================================================== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cards.usecases{grid-template-columns:repeat(3,1fr)}
.card{
  position:relative;border-radius:18px;padding:20px 18px 22px;
  background:linear-gradient(168deg, rgba(13,19,36,.82), rgba(6,10,21,.76));
  border:1px solid var(--line);
  backdrop-filter:blur(12px) saturate(118%);-webkit-backdrop-filter:blur(12px) saturate(118%);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7);
  transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,226,161,.4),transparent);
  opacity:.5;transition:opacity .5s;
}
.card:hover{transform:translateY(-5px);border-color:var(--glass-bd);box-shadow:0 30px 70px -26px rgba(212,175,55,.28)}
.card:hover::before{opacity:1}
.card h3{font-size:15.5px;margin-bottom:8px;color:#f0f3f8}
.card p{font-size:13px;line-height:1.6;color:var(--ink-dim)}
.card-ico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;color:#f0e3bd;
  background:linear-gradient(150deg, rgba(212,175,55,.2), rgba(212,175,55,.05));
  border:1px solid rgba(212,175,55,.26);
}
.card-ico svg{width:19px;height:19px}
.usecase-tag{
  display:inline-flex;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#d8c386;margin-bottom:12px;
  padding:5px 10px;border-radius:8px;border:1px solid var(--glass-bd);background:rgba(212,175,55,.05);
}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}.cards.usecases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards,.cards.usecases{grid-template-columns:1fr}}

/* =====================================================================
   KTO ZA TYM STOI
   ===================================================================== */
.why-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
.why-head{margin-bottom:0}
.cred{
  margin-top:24px;border-radius:16px;padding:16px 18px;
  background:linear-gradient(165deg, rgba(13,19,36,.7), rgba(6,10,21,.62));
  border:1px solid var(--line);
}
.cred-key{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#cbb87e;margin-bottom:8px}
.cred-text{font-size:13.5px;line-height:1.6;color:var(--ink-dim)}
.cred-text strong{color:#eef2f8}
.why-list{list-style:none;display:grid;gap:11px;padding-top:8px}
.why-list li{
  position:relative;border-radius:14px;padding:15px 16px 15px 44px;
  background:linear-gradient(165deg, rgba(13,19,36,.6), rgba(6,10,21,.52));
  border:1px solid var(--line);
  font-size:14px;color:#dde3ec;
}
.why-list li::before{
  content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #f4e2a1, #d4af37 70%);
  box-shadow:0 0 12px -2px rgba(233,200,119,.8);
}
@media (max-width:920px){.why-grid{grid-template-columns:1fr}}

/* =====================================================================
   ROZWIĄZANIE: transformacja + filary
   ===================================================================== */
.transform{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,2.4vw,28px);align-items:stretch;
  margin-bottom:clamp(26px,4vw,40px);
}
.transform-col{
  border-radius:18px;padding:18px 20px;
  border:1px solid var(--line);
  background:linear-gradient(168deg, rgba(13,19,36,.62), rgba(6,10,21,.56));
}
.transform-col.order{border-color:rgba(212,175,55,.24);background:linear-gradient(168deg, rgba(26,24,14,.5), rgba(10,12,20,.6))}
.transform-label{
  display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:12px;
}
.transform-col.order .transform-label{color:#d8c386}
.transform-col ul{list-style:none;display:grid;gap:8px}
.transform-col li{position:relative;padding-left:18px;font-size:13.5px;color:#c4ccd9}
.transform-col.chaos li::before{content:"×";position:absolute;left:0;color:#b06a60}
.transform-col.order li::before{content:"✓" / "";position:absolute;left:0;color:var(--gold-3);font-size:11px}
.transform-arrow{display:grid;place-items:center;color:var(--gold)}
.transform-arrow svg{width:44px;height:22px;filter:drop-shadow(0 0 10px rgba(233,200,119,.4))}
@media (max-width:760px){
  .transform{grid-template-columns:1fr}
  .transform-arrow svg{transform:rotate(90deg)}
}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pillar{
  position:relative;border-radius:18px;padding:22px 20px;
  background:linear-gradient(168deg, rgba(13,19,36,.66), rgba(6,10,21,.6));
  border:1px solid var(--line);overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s;
}
.pillar:hover{transform:translateY(-4px);border-color:var(--glass-bd)}
.pillar-num{
  display:block;font-family:var(--serif);font-style:italic;font-size:26px;color:rgba(233,200,119,.55);
  margin-bottom:10px;
}
.pillar h3{font-size:17px;margin-bottom:8px;color:#f0f3f8}
.pillar p{font-size:13.5px;line-height:1.6;color:var(--ink-dim)}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}

/* =====================================================================
   TABY: obszary automatyzacji
   ===================================================================== */
.auto{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(14px,2.5vw,26px);
  border-radius:20px;padding:clamp(14px,2.2vw,22px);
  border:1px solid var(--line);
  background:linear-gradient(168deg, rgba(13,19,36,.8), rgba(6,10,21,.74));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.auto-tabs{display:flex;flex-direction:column;gap:7px}
.auto-tab{
  text-align:left;font-size:13.5px;font-weight:500;color:var(--ink-dim);
  padding:13px 16px;border-radius:12px;border:1px solid transparent;
  background:transparent;cursor:pointer;min-height:48px;
  transition:color .3s,border-color .3s,background .3s,transform .3s;
}
.auto-tab:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.auto-tab.is-active{
  color:#f4e2a1;border-color:rgba(212,175,55,.3);
  background:linear-gradient(150deg, rgba(212,175,55,.12), rgba(212,175,55,.03));
  transform:translateX(4px);
}
.auto-panels{position:relative;min-height:260px}
.auto-panel{
  border-radius:14px;padding:18px 20px;
  background:rgba(6,10,21,.45);border:1px solid rgba(255,255,255,.06);
}
.auto-panel h3{font-size:16.5px;margin-bottom:14px;color:#f0f3f8}
@media (max-width:860px){
  .auto{grid-template-columns:1fr}
  .auto-tabs{flex-direction:row;flex-wrap:wrap}
  .auto-tab{flex:1 1 auto;text-align:center;padding:11px 12px}
  .auto-tab.is-active{transform:none}
}

/* =====================================================================
   USŁUGI
   ===================================================================== */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.service{
  position:relative;display:flex;flex-direction:column;gap:14px;
  border-radius:20px;padding:24px 22px;
  background:linear-gradient(168deg, rgba(13,19,36,.82), rgba(6,10,21,.76));
  border:1px solid var(--line);overflow:hidden;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.service:hover{transform:translateY(-5px);border-color:var(--glass-bd);box-shadow:0 30px 70px -26px rgba(212,175,55,.26)}
.service.featured{
  border-color:rgba(212,175,55,.32);
  background:linear-gradient(168deg, rgba(26,24,14,.58), rgba(8,11,20,.66));
  box-shadow:0 0 0 1px rgba(212,175,55,.12), 0 30px 80px -30px rgba(212,175,55,.3);
}
.service-badge{
  position:absolute;top:14px;right:14px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#1a1406;background:var(--grad-gold);padding:5px 10px;border-radius:8px;
  box-shadow:0 8px 20px -8px rgba(212,175,55,.6);
}
.service h3{font-size:18px;color:#f0f3f8;max-width:18ch}
.service-desc{font-size:13.5px;line-height:1.6;color:var(--ink-dim)}
.service .check-list{gap:8px}
.service .check-list li{font-size:13px}
.service-cta{margin-top:auto}
@media (max-width:980px){.services{grid-template-columns:1fr}.service h3{max-width:none}}

/* =====================================================================
   PROCES (oś zejścia)
   ===================================================================== */
.steps{position:relative;list-style:none;max-width:680px;display:grid;gap:0}
.steps::before{
  content:"";position:absolute;left:25px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,rgba(244,226,161,.5),rgba(108,200,255,.22),rgba(244,226,161,.06));
}
.step{position:relative;display:flex;gap:24px;padding:0 0 36px}
.step:last-child{padding-bottom:0}
.step-num{
  flex:0 0 auto;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:19px;color:#f4e2a1;
  background:rgba(6,10,21,.85);border:1px solid rgba(212,175,55,.32);
  box-shadow:0 0 0 5px rgba(3,5,11,.6), 0 0 24px -6px rgba(212,175,55,.35);
  position:relative;z-index:1;
}
.step-body{padding-top:5px}
.step h3{font-size:17px;margin-bottom:7px;color:#f0f3f8;text-shadow:0 1px 10px rgba(3,5,11,.85)}
.step p{font-size:14px;line-height:1.62;color:#a7b0c2;max-width:52ch;text-shadow:0 1px 10px rgba(3,5,11,.85)}

/* =====================================================================
   AUDYT (lead magnet)
   ===================================================================== */
.audit{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);
  border-radius:24px;padding:clamp(24px,4vw,44px);
  border:1px solid rgba(212,175,55,.24);
  background:linear-gradient(168deg, rgba(20,19,12,.8), rgba(7,10,19,.86));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-soft);
  position:relative;overflow:hidden;
}
.audit::before{
  content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,226,161,.5),transparent);
}
.audit-copy h2{margin:14px 0 14px}
.audit-copy p{color:#c4ccd9;font-size:15px;line-height:1.62;margin-bottom:22px;max-width:50ch}
.audit-copy .micro-note{margin:14px 0 0}
.audit-list{
  border-radius:16px;padding:20px;
  background:rgba(5,8,16,.55);border:1px solid var(--line);
  align-self:center;
}
.audit-list .panel-label{display:block;margin-bottom:14px;color:#cbb87e}
@media (max-width:860px){.audit{grid-template-columns:1fr}}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{display:grid;gap:10px}
.faq-item{
  border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(168deg, rgba(13,19,36,.78), rgba(6,10,21,.72));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;transition:border-color .4s;
}
.faq-item:has(.faq-q[aria-expanded="true"]){border-color:rgba(212,175,55,.28)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:17px 18px;background:transparent;border:0;cursor:pointer;text-align:left;
  font-size:15px;font-weight:500;color:#e6ebf3;min-height:56px;
  transition:color .3s;
}
.faq-q:hover{color:#fff}
.faq-icon{position:relative;flex:0 0 auto;width:18px;height:18px}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--gold);border-radius:1px;
  transition:transform .35s var(--ease);
}
.faq-icon::before{width:12px;height:1.6px;transform:translate(-50%,-50%)}
.faq-icon::after{width:1.6px;height:12px;transform:translate(-50%,-50%)}
.faq-q[aria-expanded="true"] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-a{overflow:hidden;transition:height .3s var(--ease-soft)}
.faq-a p{padding:0 18px 18px;font-size:14px;line-height:1.65;color:var(--ink-dim);max-width:65ch}

/* =====================================================================
   KONTAKT (final + formularz)
   ===================================================================== */
.final{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,52px);
  border-radius:26px;padding:clamp(24px,4vw,46px);
  border:1px solid rgba(212,175,55,.22);
  background:linear-gradient(168deg, rgba(13,19,36,.78), rgba(6,10,21,.8));
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.final-aura{
  position:absolute;inset:-20% -10%;pointer-events:none;
  background:radial-gradient(42% 40% at 18% 18%, rgba(212,175,55,.13), transparent 70%),
             radial-gradient(40% 42% at 86% 80%, rgba(108,200,255,.08), transparent 70%);
}
.final-copy{position:relative}
.final-copy h2{margin:14px 0 14px;font-size:clamp(24px,3vw,36px)}
.final-copy>p{color:#c4ccd9;font-size:15px;line-height:1.62;margin-bottom:24px}
.contact-points{list-style:none;display:grid;gap:13px}
.contact-points li{display:grid;gap:3px}
.contact-key{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.contact-points a,.contact-points li>span:last-child{
  font-size:15px;color:#e9dfc2;width:fit-content;
}
.contact-points a{border-bottom:1px solid rgba(212,175,55,.3);transition:color .3s,border-color .3s;min-height:28px;display:inline-flex;align-items:center}
.contact-points a:hover{color:#f4e2a1;border-color:rgba(212,175,55,.7)}

.contact-form{position:relative;display:grid;gap:15px}
.form-hint{font-size:13px;color:var(--ink-mute)}
.field{display:grid;gap:7px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label,.consent span{font-size:13px;color:#c4ccd9}
.field label{font-weight:500;letter-spacing:.01em}
.req{color:var(--gold)}
input[type="text"],input[type="email"],input[type="url"],textarea,select{
  width:100%;padding:13px 15px;border-radius:12px;
  background:rgba(5,8,16,.65);border:1px solid rgba(255,255,255,.12);
  color:var(--ink);font-family:inherit;font-size:14.5px;
  transition:border-color .3s, box-shadow .3s;
  min-height:48px;
}
textarea{resize:vertical;min-height:110px}
input::placeholder,textarea::placeholder{color:#5f6878}
input:focus,textarea:focus,select:focus{outline:none;border-color:rgba(212,175,55,.5);box-shadow:0 0 0 3px rgba(212,175,55,.12)}
input.invalid,textarea.invalid{border-color:rgba(255,106,94,.55)}
.field-error{font-size:12px;color:#ff9a8e;min-height:0}
.field-error:empty{display:none}

.consent{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.consent input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:20px;height:20px;margin-top:2px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(212,175,55,.4);background:rgba(5,8,16,.65);
  display:grid;place-items:center;transition:background .25s,border-color .25s;
}
.consent input::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--grad-gold);transform:scale(0);transition:transform .25s var(--ease)}
.consent input:checked{border-color:rgba(212,175,55,.7)}
.consent input:checked::before{transform:scale(1)}
.consent a{color:#e9dfc2;border-bottom:1px solid rgba(212,175,55,.35)}
.consent a:hover{color:#f4e2a1}

.hp-field{position:absolute !important;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile.is-placeholder{
  font-family:var(--mono);font-size:11px;color:var(--ink-mute);
  border:1px dashed rgba(255,255,255,.15);border-radius:10px;padding:12px 14px;
}
.form-submit{margin-top:4px}
.form-feedback{font-size:13.5px;min-height:1.2em}
.form-feedback.ok{color:#7fe6ad}
.form-feedback.err{color:#ff9a8e}

/* custom dropdown (ai.js .select-ui) */
.select-ui{position:relative}
select.sel-native{
  position:absolute !important;inset:0;opacity:0;pointer-events:none;
}
.select-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-radius:12px;min-height:48px;cursor:pointer;
  background:rgba(5,8,16,.65);border:1px solid rgba(255,255,255,.12);
  font-size:14.5px;color:var(--ink);text-align:left;
  transition:border-color .3s, box-shadow .3s;
}
.select-trigger:hover{border-color:rgba(212,175,55,.35)}
.select-trigger[aria-expanded="true"]{border-color:rgba(212,175,55,.5);box-shadow:0 0 0 3px rgba(212,175,55,.12)}
.select-chevron{
  flex:0 0 auto;width:9px;height:9px;
  border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s;
}
.select-trigger[aria-expanded="true"] .select-chevron{transform:rotate(-135deg) translateY(-2px)}
.select-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
  list-style:none;display:none;max-height:240px;overflow:auto;
  border-radius:14px;padding:6px;
  background:#0a0f1d;border:1px solid rgba(212,175,55,.25);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85);
}
.select-menu.open{display:block}
.select-option{
  padding:11px 12px;border-radius:9px;font-size:13.5px;color:#c4ccd9;cursor:pointer;
}
.select-option.active{background:rgba(212,175,55,.1);color:#f0e3bd}
.select-option[aria-selected="true"]{color:#f4e2a1}
.select-option[aria-selected="true"]::after{content:" ✓"}

@media (max-width:920px){
  .final{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{
  position:relative;z-index:10;
  border-top:1px solid rgba(255,255,255,.06);
  background:transparent;
  padding:clamp(30px,5vw,52px) 0 0;
}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,48px);padding-bottom:30px;
}
.footer-brand p{margin-top:14px;font-size:13px;line-height:1.65;color:var(--ink-mute);max-width:38ch}
.footer-nav{display:grid;gap:4px;align-content:start}
.footer-nav a,.footer-contact a{
  display:inline-flex;align-items:center;min-height:36px;width:fit-content;
  font-size:13.5px;color:var(--ink-dim);transition:color .3s;
}
.footer-nav a:hover,.footer-contact a:hover{color:#f4e2a1}
.footer-contact{display:grid;gap:4px;align-content:start}
.footer-contact span{font-size:13.5px;color:var(--ink-mute);min-height:36px;display:inline-flex;align-items:center}
.footer-base{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:18px;padding-bottom:22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-mute);
}
.footer-base a{color:#cbb87e}
.footer-base a:hover{color:#f4e2a1}
.footer-attrib{font-size:10px;color:var(--ink-mute)}
.footer-attrib a{color:#a99d7e}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr}}

/* =====================================================================
   MOBILE / DOTYK: mniej backdrop-blurów nad żywym canvasem
   ===================================================================== */
@media (pointer:coarse){
  .eyebrow,.hero-areas li,.card,.service,.auto,.audit{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .card{background:linear-gradient(168deg, rgba(13,19,36,.88), rgba(6,10,21,.84))}
  .service{background:linear-gradient(168deg, rgba(13,19,36,.9), rgba(6,10,21,.86))}
  .service.featured{background:linear-gradient(168deg, rgba(26,24,14,.85), rgba(8,11,20,.88))}
  .auto{background:linear-gradient(168deg, rgba(13,19,36,.85), rgba(6,10,21,.82))}
  .audit{background:linear-gradient(168deg, rgba(20,19,12,.88), rgba(7,10,19,.9))}
  .eyebrow{background:rgba(8,12,24,.82)}
  .hero-areas li{background:rgba(6,10,20,.78)}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .status-dot,.ai-spark,.eyebrow::before,.descend .line::after{animation:none}
  .btn.glow::before{display:none}
  .spark-line{stroke-dasharray:none;stroke-dashoffset:0}
  .spark-area{opacity:1}
  .flow-step{opacity:1}
  .faq-a{transition:none}
}