/* =====================================================================
   Web-Net — strony internetowe
   Brand palette sampled directly from the Web-Net logo.
   ===================================================================== */

:root{
  /* --- brand ------------------------------------------------------- */
  --navy-900:#04101F;   /* logo background */
  --navy-850:#061627;
  --navy-800:#081B2E;
  --navy-700:#0C2438;
  --navy-600:#123049;

  --blue-700:#0A4FA8;
  --blue-600:#0B63CE;   /* deep blue of the N */
  --blue-500:#1E88FF;   /* primary */
  --blue-400:#3BA9FF;
  --cyan-400:#05B0FF;   /* brightest highlight in the mark */

  --white:#FFFFFF;
  --text:#E8F1FB;
  --muted:#93AAC6;
  --dim:#708BA9;   /* lightened from #6A85A3: the old value scored 4.15:1
                       on --navy-700, under the 4.5:1 WCAG AA floor for body text */
  --line:rgba(120,165,215,.16);
  --line-2:rgba(120,165,215,.30);

  /* --- type -------------------------------------------------------- */
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* a soft-serif display face for the handful of moments that should read
     as composed rather than generated — large emphasis words, big numerals.
     Everything else stays in the geometric sans/mono pair. */
  --serif:'Fraunces',Georgia,serif;

  /* --- space (density 4/10 — standard) ------------------------------ */
  --s-1:.5rem;  --s-2:1rem;   --s-3:1.5rem;
  --s-4:2rem;   --s-5:3rem;   --s-6:4rem;
  --s-7:6rem;   --s-8:8rem;

  --r:14px; --r-lg:20px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.75);
  --glow:0 0 0 1px rgba(30,136,255,.35), 0 12px 40px -10px rgba(11,99,206,.55);

  /* the nav sits ABOVE the mobile menu so its burger stays tappable as the
     close button while the menu is open */
  --z-field:0; --z-body:1; --z-menu:60; --z-nav:70; --z-scrollbar:71; --z-ov:100;
}

*,*::before,*::after{box-sizing:border-box}
/* any display: rule beats the UA stylesheet's [hidden]{display:none}, so
   make the attribute authoritative for every component that sets display */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  color:var(--text);
  background:var(--navy-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
body{opacity:1;transition:opacity .28s ease}
body.pt-leave{opacity:0}
@media (prefers-reduced-motion:reduce){body{transition:none}}

/* a faint grain reads as premium texture rather than a flat gradient fill;
   kept subtle enough (opacity) to never fight content legibility */
body::before{
  content:"";position:fixed;inset:0;z-index:150;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px;border-radius:4px}

.skip{
  position:fixed;top:0;left:0;z-index:200;
  transform:translateY(-120%);
  background:var(--blue-600);color:#fff;
  padding:.75rem 1.25rem;font-family:var(--mono);font-size:.8rem;
  text-decoration:none;transition:transform .2s;
}
.skip:focus{transform:translateY(0)}

/* ---------------------------------------------------------------------
   ambient field
   --------------------------------------------------------------------- */
#field{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:var(--z-field);display:block;
  background:
    radial-gradient(100% 70% at 50% 8%, rgba(11,99,206,.20) 0%, transparent 62%),
    radial-gradient(80% 60% at 85% 85%, rgba(5,176,255,.09) 0%, transparent 60%),
    var(--navy-900);
}
.vignette{
  position:fixed;inset:0;z-index:var(--z-field);pointer-events:none;
  background:radial-gradient(130% 110% at 50% 38%,transparent 45%,rgba(2,8,16,.5) 100%);
}
.scrollbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--z-scrollbar);
  pointer-events:none;background:rgba(255,255,255,.04);
}
.scrollbar__fill{
  display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--blue-500),var(--cyan-400));
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){.scrollbar{display:none}}
main,.nav,.foot,.menu{position:relative;z-index:var(--z-body)}

/* ---------------------------------------------------------------------
   layout primitives
   --------------------------------------------------------------------- */
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.wrap--wide{width:min(1400px,100% - 2.5rem)}
.wrap--narrow{width:min(760px,100% - 2.5rem)}

.sec{padding-block:var(--s-7)}
@media (min-width:900px){.sec{padding-block:var(--s-8)}}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue-400);
  margin:0 0 var(--s-2);
  display:inline-flex;align-items:center;gap:.55rem;
}
.eyebrow::before{
  content:"";display:inline-block;width:22px;height:1px;
  background:linear-gradient(90deg,var(--cyan-400),transparent);
}
.eyebrow.rv::before{
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s cubic-bezier(.16,1,.3,1) .12s;
}
.eyebrow.rv.is-in::before{transform:scaleX(1)}
.h1{
  font-size:clamp(2.35rem,7.2vw,4.6rem);
  line-height:1.03;letter-spacing:-.035em;font-weight:700;
  margin:0 0 var(--s-3);text-wrap:balance;
}
.h1 em{
  font-family:var(--serif);font-style:italic;font-weight:600;
  color:var(--cyan-400);letter-spacing:-.01em;
}
.h2{
  position:relative;overflow:hidden;
  font-size:clamp(1.8rem,3.9vw,2.9rem);
  line-height:1.12;letter-spacing:-.028em;font-weight:700;
  margin:0 0 var(--s-3);text-wrap:balance;
}
.h2.rv::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);
  transform:translateX(-130%);
}
.h2.rv.is-in::after{animation:sweepOnce .85s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes sweepOnce{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){.h2.rv.is-in::after{animation:none}}
.lede{font-size:clamp(1.05rem,1.9vw,1.3rem);color:var(--muted);max-width:52ch;margin:0 0 var(--s-4)}
.sub{color:var(--muted);max-width:62ch;margin:0 0 var(--s-5)}

/* ---------------------------------------------------------------------
   buttons
   --------------------------------------------------------------------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.85rem 1.6rem;
  border-radius:999px;border:1px solid var(--line-2);
  font-weight:600;font-size:.96rem;text-decoration:none;
  background:rgba(255,255,255,.03);
  transition:background .22s,border-color .22s,transform .22s,box-shadow .22s;
  touch-action:manipulation;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  mix-blend-mode:screen;
  transform:translateX(-130%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.btn:hover::before{transform:translateX(130%)}
.btn:hover{
  border-color:var(--blue-400);background:rgba(30,136,255,.12);transform:translateY(-2px);
  box-shadow:0 14px 34px -18px rgba(11,99,206,.6);
}
.btn:active{transform:translateY(0)}
.btn--primary{
  background:linear-gradient(135deg,var(--blue-600),var(--blue-500) 60%,var(--cyan-400));
  border-color:transparent;color:#fff;box-shadow:var(--glow);
}
.btn--primary:hover{background:linear-gradient(135deg,var(--blue-500),var(--cyan-400));transform:translateY(-2px)}
.btn--ghost{background:transparent}
.btn--sm{min-height:38px;padding:.4rem 1.05rem;font-size:.85rem}
.btn--full{width:100%;margin-top:var(--s-3)}

/* ---------------------------------------------------------------------
   nav
   --------------------------------------------------------------------- */
.nav{
  position:fixed;top:1rem;left:50%;transform:translateX(-50%);
  z-index:var(--z-nav);
  width:min(1400px,100% - 1.5rem);
  display:flex;align-items:center;gap:var(--s-3);
  padding:.5rem .6rem .5rem 1rem;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(6,18,32,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:background .3s,border-color .3s,box-shadow .3s,padding .35s cubic-bezier(.16,1,.3,1),width .35s cubic-bezier(.16,1,.3,1);
}
.nav.is-stuck{
  background:rgba(5,15,27,.92);border-color:var(--line-2);box-shadow:0 10px 40px -18px #000;
  padding-top:.35rem;padding-bottom:.35rem;
  width:min(1160px,100% - 1.5rem);
}

.nav__brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.nav__icon{display:inline-flex;animation:navLogoFloat 3.2s ease-in-out infinite}
/* the globe already turns on its own, so the holder only drifts vertically
   — keeping the old rotate as well made the small mark read as wobbling */
@keyframes navLogoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.nav__brand{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.nav__brand:hover .nav__icon{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){.nav__icon{animation:none}}
.nav__word{font-weight:500;letter-spacing:-.02em;font-size:1.02rem}
.nav__word b{
  font-weight:700;
  background:linear-gradient(120deg,var(--blue-500),var(--cyan-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.nav__links{display:none;margin-inline:auto;gap:.35rem}
@media (min-width:1000px){.nav__links{display:flex}}
.nav__links a{
  position:relative;padding:.5rem .85rem;border-radius:999px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .25s;
}
.nav__links a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.3rem;height:1px;
  background:var(--cyan-400);transform:scaleX(0);transform-origin:center;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__links a.is-active{color:var(--white)}

.nav__end{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.nav__end .btn{white-space:nowrap}
@media (max-width:440px){
  .nav__end{gap:.3rem}
  .nav__brand{gap:.45rem}
  .nav__end .btn{padding:.4rem .65rem;font-size:.8rem}
}
@media (max-width:370px){.nav__end .btn{display:none}}
@media (min-width:1000px){.nav__end{margin-left:0}}

.lang{display:flex;align-items:center;gap:.25rem;font-family:var(--mono);font-size:.74rem;color:var(--dim)}
.lang button{
  background:none;border:0;padding:.35rem .3rem;color:var(--dim);
  letter-spacing:.1em;transition:color .2s;min-height:32px;
}
.lang button:hover{color:var(--text)}
.lang button.is-on{color:var(--cyan-400)}

.burger{
  display:grid;place-content:center;gap:5px;
  width:44px;height:38px;border:1px solid var(--line);border-radius:999px;
  background:transparent;
}
@media (min-width:1000px){.burger{display:none}}
.burger span{display:block;width:16px;height:1.5px;background:var(--text);transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:var(--z-menu);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);
  background:rgba(4,13,24,.97);backdrop-filter:blur(20px);
}
.menu[hidden]{display:none}
.menu a{
  font-size:1.6rem;font-weight:600;letter-spacing:-.02em;
  text-decoration:none;padding:.5rem 1rem;color:var(--text);
}
.menu a:hover{color:var(--cyan-400)}

/* ---------------------------------------------------------------------
   hero
   --------------------------------------------------------------------- */
.hero{
  min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:7rem 1.25rem 6.5rem;position:relative;
}

/* ambient blobs — slow independent drift + cursor parallax, driven by main.js */
.blobs{position:absolute;inset:0;z-index:-1;pointer-events:none}
.blob{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.3;
  will-change:transform;
}
.blob--a{width:min(38vw,520px);height:min(38vw,520px);left:6%;top:6%;background:radial-gradient(circle,var(--blue-600),transparent 70%)}
.blob--b{width:min(30vw,420px);height:min(30vw,420px);right:4%;top:26%;background:radial-gradient(circle,var(--cyan-400),transparent 70%)}
.blob--c{width:min(34vw,460px);height:min(34vw,460px);left:28%;bottom:-8%;background:radial-gradient(circle,var(--blue-500),transparent 70%)}
.blob--d{width:min(22vw,320px);height:min(22vw,320px);right:20%;bottom:8%;opacity:.26;background:radial-gradient(circle,var(--blue-400),transparent 70%)}

/* hero entrance — each line masked by its wrapper, blur+slide+fade in */
.hero__line{overflow:hidden}
.hero__line > *{
  transform:translateY(60px);filter:blur(10px);opacity:0;
  transition:transform 1s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1),opacity .8s ease-out;
}
.hero__line:nth-child(1) > *{transition-delay:.05s}
.hero__line:nth-child(2) > *{transition-delay:.16s}
.hero__line:nth-child(3) > *{transition-delay:.36s}
.hero__line:nth-child(4) > *{transition-delay:.5s}
.hero__line:nth-child(5) > *{transition-delay:.62s}
.hero.is-ready .hero__line > *{transform:none;filter:blur(0);opacity:1}
@media (prefers-reduced-motion:reduce){
  .blob{display:none}
  .hero__line > *{transform:none;filter:none;opacity:1;transition:none}
}
.hero__mark{
  height:clamp(112px,19vh,184px);
  display:grid;place-items:center;margin-bottom:var(--s-3);
}
/* the globe canvas is square and transparent — no blend mode or mask needed */
.globe{display:block;width:100%;height:100%}
.globe--hero{width:clamp(112px,19vh,184px);height:clamp(112px,19vh,184px);
  filter:drop-shadow(0 12px 46px rgba(11,99,206,.45));
  animation:heroLogoFloat 6s ease-in-out infinite}
@keyframes heroLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.globe--hero{animation:none}}

.globe--nav{width:30px;height:30px}
.nav.is-stuck .globe--nav{width:26px;height:26px}
.globe--foot{width:38px;height:38px}

.hero__body{max-width:940px}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-bottom:var(--s-5)}

.stats{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-4) var(--s-5);
}
.stats__item{text-align:center}
.stats__n{
  margin:0;font-family:var(--serif);font-size:2.6rem;font-weight:600;
  font-style:italic;letter-spacing:-.01em;line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.stats__n span:not(.stats__num){
  font-family:var(--mono);font-style:normal;font-size:1rem;font-weight:500;
  letter-spacing:0;margin-left:.2rem;color:var(--cyan-400);
}
.stats__num{font:inherit;color:inherit}
.stats__l{
  margin:.3rem 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);max-width:12em;
}
@media (min-width:600px){
  .stats{gap:0}
  .stats__item{padding:0 var(--s-4);position:relative}
  .stats__item + .stats__item::before{
    content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:1px;
    background:var(--line);
  }
}

.scrollcue{
  position:absolute;bottom:1.75rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
}
.scrollcue i{display:block;width:1px;height:38px;background:linear-gradient(var(--blue-400),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ---------------------------------------------------------------------
   marquee — speed is driven by main.js (base pace + scroll velocity)
   --------------------------------------------------------------------- */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.85rem 0;background:rgba(255,255,255,.015);position:relative;z-index:1;
}
.marquee__track{display:flex;width:max-content;will-change:transform}
/* the gap lives inside the group (plus a trailing one) so a group's own
   width is the exact loop period — measuring the track and halving it
   dropped one gap at the seam and made the belt creep out of phase */
.marquee__group{display:flex;gap:1.5rem;padding-right:1.5rem;flex:none}
.marquee__track span{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}
.marquee__track span.dot{color:var(--cyan-400);letter-spacing:0}

/* reveal-on-scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.is-in{opacity:1;transform:none}

/* ---------------------------------------------------------------------
   grid (still used by pricing / care)
   --------------------------------------------------------------------- */
.grid3{display:grid;gap:var(--s-2);grid-template-columns:1fr}
@media (min-width:760px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.grid3{grid-template-columns:repeat(3,1fr)}}

/* ---------------------------------------------------------------------
   services — icon cards
   --------------------------------------------------------------------- */
.card{
  display:flex;flex-direction:column;position:relative;
  padding:var(--s-4) var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(18,48,73,.45),rgba(8,27,46,.3));
  box-shadow:0 20px 50px -30px rgba(0,0,0,.8);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.card:hover{
  transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 30px 60px -25px rgba(0,0,0,.85);
}
/* cursor-tracked highlight — shared with .plan / .care, position set via
   --mx/--my custom properties written by the pointermove handler in main.js */
.card::after,.plan::after,.care::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s;
  background:linear-gradient(170deg,rgba(70,166,255,.16),rgba(5,176,255,.07));
}
.card:hover::after,.plan:hover::after,.care:hover::after{opacity:1}
.card>*,.plan>*,.care>*{position:relative;z-index:1}
.card__ico{
  display:grid;place-items:center;width:56px;height:56px;margin-bottom:var(--s-3);
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--blue-400);
  background:rgba(30,136,255,.06);
  transition:color .3s,border-color .3s,transform .3s;
}
.card__ico svg{width:26px;height:26px}
.card:hover .card__ico{color:var(--cyan-400);border-color:rgba(5,176,255,.4);transform:scale(1.08) rotate(-4deg)}
.card__t{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:0 0 .5rem;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.card__d{color:var(--muted);font-size:.92rem;margin:0 0 var(--s-3);transition:transform .35s cubic-bezier(.16,1,.3,1) .02s}
.card:hover .card__t,.card:hover .card__d{transform:translateX(4px)}
.card .ticks{margin-bottom:var(--s-3)}
.card .ticks li{
  position:relative;border-left:0;padding-left:1.5rem;
}
.card .ticks li::before{
  content:"";position:absolute;left:0;top:.15em;width:16px;height:16px;
  border-radius:50%;background:rgba(30,136,255,.14);
}
.card .ticks li::after{
  content:"";position:absolute;left:4.5px;top:.42em;width:7px;height:4px;
  border:1.6px solid var(--cyan-400);border-top:0;border-right:0;
  transform:rotate(-45deg);
}
.card__go{
  margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--cyan-400);
}
.card__go i{font-style:normal;transition:transform .25s}
.card__go:hover i{transform:translateX(5px)}

.ticks{list-style:none;margin:0 0 0;padding:0;display:grid;gap:.55rem}
.ticks li{
  border-left:2px solid var(--blue-500);padding-left:.75rem;
  font-size:.88rem;color:var(--muted);line-height:1.45;
}

/* ---------------------------------------------------------------------
   work — floating 3D card space
   --------------------------------------------------------------------- */
.sec--work{padding-bottom:var(--s-6)}
.work{position:relative;margin-top:var(--s-4)}

.work__filters{
  width:min(1120px,100% - 2.5rem);margin:0 auto var(--s-2);
}
.work__flabel{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin:0 0 .6rem;
}
.work__filters ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.work__filters button{
  display:inline-flex;align-items:center;gap:.45rem;
  background:none;border:1px solid transparent;border-radius:999px;
  padding:.5rem .85rem;min-height:40px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);transition:color .2s,border-color .2s,background .2s;
}
.work__filters button i{color:var(--blue-500);transition:transform .2s}
.work__filters button:hover{color:var(--white);border-color:var(--line)}
.work__filters button:hover i{transform:translateX(3px)}
.work__filters button.is-on{color:var(--cyan-400);border-color:rgba(5,176,255,.4);background:rgba(5,176,255,.08)}
.work__ask{
  display:none;margin-top:var(--s-3);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
  border:1px dashed var(--line-2);border-radius:999px;padding:.6rem 1.1rem;
}
@media (min-width:1200px){
  .work{display:block}
  .work__filters{
    position:absolute;left:max(1.25rem,calc(50vw - 560px));bottom:5.5rem;z-index:6;
    width:auto;margin:0;
  }
  .work__filters ul{flex-direction:column;gap:.1rem}
  .work__ask{display:inline-block}
}

.work__stage{
  position:relative;
  height:clamp(400px,58vh,600px);
  perspective:1400px;perspective-origin:50% 50%;
  overflow:hidden;
  cursor:grab;touch-action:pan-y;
}
.work__stage.is-drag{cursor:grabbing}
.work__space{
  position:absolute;inset:0;
  transform-style:preserve-3d;
}

.pc{                       /* project card */
  position:absolute;top:50%;left:50%;
  width:clamp(260px,42vw,520px);
  margin:0;
  transform-style:preserve-3d;
  transition:opacity .5s ease;
  will-change:transform,opacity;
}
.pc__btn{
  display:block;width:100%;padding:0;text-align:left;
  background:none;border:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:box-shadow .3s;
}
.pc__shot{
  /* it is a <span> inside the <button>, so it must be told to be a block
     before aspect-ratio and the absolute children mean anything */
  display:block;
  container-type:inline-size;   /* lets the mini page scale in cqw units */
  position:relative;aspect-ratio:16/10;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;background:var(--navy-800);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.pc__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pc__glare{display:block}

/* ---- concept mini page ------------------------------------------------
   A small but real page design rendered inside the card frame. Sized in
   container query units so it scales with the card at every breakpoint.
   --h is the concept's accent hue, set per item in projects.js.
   ---------------------------------------------------------------------- */
.mini{
  display:block;position:absolute;inset:0;
  font-size:14px;font-size:3.1cqw;          /* px first as a safety net */
  background:linear-gradient(168deg,#122C46,#061627 62%,#04101F);
  color:#fff;overflow:hidden;
}
.mini__bar{
  display:flex;align-items:center;gap:.45em;
  height:2.6em;padding-inline:.9em;
  background:rgba(4,16,31,.72);
  border-bottom:1px solid rgba(120,165,215,.14);
}
.mini__bar i{width:.5em;height:.5em;border-radius:50%;background:rgba(255,255,255,.28)}
.mini__body{display:block;padding:1.1em 1.4em}
.mini__nav{display:flex;align-items:center;gap:.7em;margin-bottom:1.5em}
.mini__nav b{
  width:2.6em;height:.75em;border-radius:.2em;margin-right:auto;
  background:linear-gradient(90deg,#fff,hsl(var(--h) 90% 60%));
}
.mini__nav i{width:1.5em;height:.42em;border-radius:.2em;background:rgba(255,255,255,.26)}
.mini__hero{display:block;max-width:82%}
.mini__h{
  display:block;font-weight:700;font-size:1.65em;line-height:1.14;
  letter-spacing:-.025em;margin-bottom:.45em;text-wrap:balance;
}
.mini__s{
  display:block;font-size:.92em;line-height:1.4;
  color:rgba(232,241,251,.66);margin-bottom:1.15em;
}
.mini__cta{
  display:inline-block;padding:.62em 1.25em;border-radius:2em;
  font-size:.86em;font-weight:600;color:#04101F;
  background:linear-gradient(120deg,hsl(var(--h) 92% 62%),hsl(var(--h) 95% 74%));
  box-shadow:0 .5em 1.4em -.5em hsl(var(--h) 90% 50% / .8);
}
.mini__chips{display:flex;gap:.5em;margin-top:1.6em;flex-wrap:wrap}
.mini__chips span{
  font-family:var(--mono);font-size:.68em;letter-spacing:.06em;
  padding:.45em .8em;border-radius:2em;
  border:1px solid rgba(120,165,215,.26);color:rgba(232,241,251,.72);
  white-space:nowrap;
}
/* accent wash so each industry reads as its own design */
.mini::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 108% 8%,hsl(var(--h) 90% 50% / .30) 0%,transparent 62%);
}

.pc__badge{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:999px;
  background:rgba(4,16,31,.82);border:1px solid var(--line-2);color:var(--muted);
  backdrop-filter:blur(6px);
}
.work__note{max-width:70ch;margin-bottom:0}
.pc__glare{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 48%,transparent 62%);
  opacity:0;transition:opacity .4s;
}
.pc__btn:hover .pc__glare{opacity:1}
.pc__cap{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.85rem .2rem 0;
}
.pc__name{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.pc__tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--dim);white-space:nowrap}
.pc.is-out{opacity:0;pointer-events:none}

/* Bez JavaScriptu nie ma kto rozstawic kart w przestrzeni 3D — kazda zostaje
   w srodku sceny, jedna na drugiej. Karty sa w HTML dla crawlerow, wiec dla
   tych nielicznych odwiedzajacych bez skryptow uklada sie je po prostu
   w kolumne i chowa sterowanie karuzeli, ktore i tak by nie dzialalo. */
html:not(.js) .work__stage{height:auto;overflow:visible;cursor:auto;perspective:none}
html:not(.js) .work__space{position:static;transform-style:flat}
html:not(.js) .pc{position:static;width:100%;max-width:520px;margin:0 auto 28px}
html:not(.js) .work__ctrl{display:none}

.work__empty{text-align:center;color:var(--dim);font-family:var(--mono);font-size:.8rem;padding-top:4rem}

.work__ctrl{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:var(--s-3);
}
.work__ctrl button{
  min-width:48px;min-height:40px;
  border:1px solid var(--line);border-radius:999px;background:transparent;
  font-family:var(--mono);font-size:.78rem;color:var(--muted);
  transition:color .2s,border-color .2s,background .2s;
}
.work__ctrl button:hover{color:var(--cyan-400);border-color:var(--line-2);background:rgba(5,176,255,.07)}
.work__count{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--dim);min-width:72px;text-align:center}

/* ---------------------------------------------------------------------
   process
   --------------------------------------------------------------------- */
.step__n{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.6rem;color:var(--blue-400)}
.step__t{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;margin:.7rem 0 .5rem}
.step__d{color:var(--muted);font-size:.92rem;margin:0 0 var(--s-2)}
.step__w{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);
}

/* ---------------------------------------------------------------------
   process — all four steps are on the page at once, as a plain list. The
   mockup beside them loops on its own timer (see main.js), so nothing here
   depends on scroll position. .is-live is added only when that loop is
   actually running, which is what earns the mockup its column; without it
   (no JS, or prefers-reduced-motion) the list simply stands on its own.
   --------------------------------------------------------------------- */
.pin{margin-top:var(--s-4)}
.pin__cols{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.pin__mockup{display:none}
.pin__stage{display:grid;gap:var(--s-5)}
.pin__step{
  padding:var(--s-3) 0 0;border-top:1px solid var(--line-2);position:relative;
}
.pin__step::after{
  content:"";position:absolute;left:0;top:-1px;width:36px;height:2px;
  background:linear-gradient(90deg,var(--cyan-400),transparent);
}
@media (min-width:760px){.pin__stage{grid-template-columns:repeat(2,1fr);gap:var(--s-3) var(--s-4)}}

/* two columns: the looping mockup on the left, steps 01-04 stacked on the
   right. Below this width there is no room for both, so the mockup drops
   out and the steps fall back to the two-up grid above. */
@media (min-width:980px){
  .pin.is-live .pin__cols{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    align-items:center;gap:var(--s-7);
  }
  .pin.is-live .pin__mockup{display:block}
  .pin.is-live .pin__stage{grid-template-columns:1fr;gap:var(--s-4)}
}

/* ---------------------------------------------------------------------
   proces mockup — the site "building itself" as you scroll through
   the steps; purely decorative (aria-hidden), driven by main.js
   --------------------------------------------------------------------- */
.mock{
  position:relative;width:min(420px,80vw);border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;background:var(--navy-800);box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.mock__bar{display:flex;gap:6px;padding:.8rem .9rem;border-bottom:1px solid var(--line)}
.mock__bar span{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.mock__body{position:relative;height:340px;padding:1.15rem}
.mock__loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
  opacity:1;transition:opacity .4s ease;
}
.mock__loading.is-hidden{opacity:0}
.mock__loading span{width:8px;height:8px;border-radius:50%;background:var(--dim);animation:mockBounce 1.2s ease-in-out infinite}
.mock__loading span:nth-child(2){animation-delay:.15s}
.mock__loading span:nth-child(3){animation-delay:.3s}
@keyframes mockBounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-6px);opacity:1}}

.mock__el{
  position:absolute;border-radius:5px;background:var(--line-2);
  opacity:0;transform:scaleX(.82);transform-origin:left;
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),background .45s ease;
}
.mock__el.is-built{opacity:1;transform:none}
.mock__el.is-colored{background:linear-gradient(135deg,var(--blue-600),var(--cyan-400))}
.mock__header{top:0;left:0;right:0;height:20px}
.mock__hero{top:40px;left:0;right:0;height:96px;border-radius:8px}
.mock__text{height:9px;background:var(--line-2) !important}
.mock__text--1{top:158px;left:0;width:68%}
.mock__text--2{top:176px;left:0;width:44%}
.mock__card{top:206px;height:70px;width:30%;border-radius:7px}
.mock__card--1{left:0}
.mock__card--2{left:35%}
.mock__card--3{left:70%}
.mock__btn{top:286px;left:0;width:118px;height:32px;border-radius:999px}

.mock__badge{
  position:absolute;top:-7px;right:-7px;width:17px;height:17px;border-radius:50%;
  background:var(--navy-900);border:2px solid var(--navy-800);
  opacity:0;transform:scale(.5);transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.mock__badge::before{
  content:"";position:absolute;inset:2px;border-radius:50%;background:var(--cyan-400);
}
.mock__badge.is-built{opacity:1;transform:scale(1);animation:mockPulse 2s ease-in-out infinite}
@keyframes mockPulse{0%,100%{box-shadow:0 0 0 0 rgba(5,176,255,.5)}50%{box-shadow:0 0 0 6px rgba(5,176,255,0)}}
@media (prefers-reduced-motion:reduce){.mock__badge.is-built{animation:none}.mock__loading span{animation:none}}

/* ---------------------------------------------------------------------
   pricing
   --------------------------------------------------------------------- */
.grid3--price,.grid3--care{align-items:stretch}
/* one care plan: a single card, centred and a little wider than a grid column */
.care-solo{max-width:520px;margin-inline:auto}
.plan,.care{
  display:flex;flex-direction:column;position:relative;
  padding:var(--s-4) var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(18,48,73,.45),rgba(8,27,46,.3));
  box-shadow:0 20px 50px -30px rgba(0,0,0,.8);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.plan:hover,.care:hover{
  transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 30px 60px -25px rgba(0,0,0,.85);
}
.plan--best,.care--best{
  border-color:rgba(30,136,255,.45);
  background:linear-gradient(170deg,rgba(11,99,206,.24),rgba(8,27,46,.4));
  box-shadow:0 0 0 1px rgba(30,136,255,.18),0 30px 70px -30px rgba(11,99,206,.6);
}
@property --border-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.plan--best::before,.care--best::before{
  content:"";position:absolute;inset:-1px;z-index:2;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:conic-gradient(from var(--border-angle,0deg),
    transparent 0 72%, rgba(5,176,255,.9) 85%, rgba(30,136,255,.5) 93%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:borderSweep 7s linear infinite;
}
@keyframes borderSweep{to{--border-angle:360deg}}
@media (prefers-reduced-motion:reduce){.plan--best::before,.care--best::before{animation:none}}
.plan--best:hover,.care--best:hover{
  box-shadow:0 0 0 1px rgba(30,136,255,.3),0 36px 80px -28px rgba(11,99,206,.7);
}
.plan__t{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;
  font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:0 0 .35rem;
}
.care__t{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:0 0 .35rem}
.plan__badge{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan-400);font-weight:500;
}
.plan__badge::before{content:"— "}
.plan__for{color:var(--dim);font-size:.85rem;margin:0 0 var(--s-3);min-height:2.6em}
.plan__p,.care__p{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:2.5rem;letter-spacing:-.01em;margin:0;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--white);
}
.plan__p small{font-family:var(--sans);font-style:normal;font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-right:.35rem}
.plan__p span,.care__p span{
  font-family:var(--mono);font-style:normal;font-size:.78rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-400);margin-left:.3rem;
}
.plan__net{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:.3rem 0 var(--s-3)}
.plan .ticks,.care .ticks{margin-bottom:var(--s-2)}
.plan .btn{margin-top:auto}
.care__p{margin-bottom:var(--s-3);font-size:2.1rem}
.care__note{
  margin:var(--s-3) 0 0;text-align:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--dim);
}
.sec--care{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(6,22,39,.6),transparent);
}

/* ---------------------------------------------------------------------
   faq
   --------------------------------------------------------------------- */
/* narrower than the 1120 wrap so answers stay readable, while the heading
   above still lines up with every other section */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:var(--s-3) 2.5rem var(--s-3) 0;position:relative;
  font-size:1.05rem;font-weight:600;letter-spacing:-.015em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cyan-400)}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:50%;
  width:10px;height:10px;
  border-right:1.5px solid var(--blue-400);border-bottom:1.5px solid var(--blue-400);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq p{margin:0 0 var(--s-3);color:var(--muted);max-width:66ch;font-size:.95rem}

/* ---------------------------------------------------------------------
   contact
   --------------------------------------------------------------------- */
.sec--contact{padding-bottom:var(--s-7)}
.ct{display:grid;gap:var(--s-5)}
@media (min-width:940px){.ct{grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:start}}

.ct__meta{margin:var(--s-4) 0 0;display:grid;gap:var(--s-2)}
.ct__meta div{border-top:1px solid var(--line);padding-top:.75rem}
.ct__meta dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.2rem;
}
.ct__meta dd{margin:0;font-size:1rem}
.ct__meta a{text-decoration:none;border-bottom:1px solid var(--line-2);transition:color .2s,border-color .2s}
.ct__meta a:hover{color:var(--cyan-400);border-color:var(--cyan-400)}

.form{
  padding:var(--s-4) var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(18,48,73,.45),rgba(8,27,46,.3));
}
.form__row{margin-bottom:var(--s-3)}
.form label{
  display:block;margin-bottom:.4rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.form input,.form select,.form textarea{
  width:100%;min-height:48px;padding:.75rem .9rem;
  font-family:var(--sans);font-size:1rem;color:var(--text);
  background:rgba(4,16,31,.6);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.form textarea{min-height:120px;resize:vertical}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--blue-400) 50%),linear-gradient(135deg,var(--blue-400) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--blue-400);background:rgba(4,16,31,.9);
  box-shadow:0 0 0 4px rgba(30,136,255,.14);
}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:#F2555A}
.hint{margin:.45rem 0 0;font-size:.8rem;color:var(--dim)}
.err{margin:.45rem 0 0;font-size:.82rem;color:#FF8A8E;display:flex;gap:.4rem;align-items:center}
.err::before{content:"!";display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#F2555A;color:#1a0406;font-size:.68rem;font-weight:700;flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__status{margin:var(--s-2) 0 0;font-size:.9rem;min-height:1.4em;text-align:center}
.form__status.is-ok{color:var(--cyan-400)}
.form__status.is-bad{color:#FF8A8E}
.form__privacy{
  margin:.6rem 0 0;font-size:.74rem;line-height:1.5;text-align:center;color:var(--dim);
}

.form__row--consent{margin-bottom:var(--s-2)}
.form .consent{
  display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;
  font-family:var(--sans);font-size:.82rem;letter-spacing:normal;text-transform:none;
  color:var(--muted);line-height:1.5;margin-bottom:0;
}
.consent input{
  flex:0 0 auto;width:18px;height:18px;margin-top:.15rem;appearance:none;
  border:1px solid var(--line-2);border-radius:5px;background:rgba(4,16,31,.6);
  cursor:pointer;transition:border-color .2s,background .2s;position:relative;
}
.consent input:checked{border-color:var(--cyan-400);background:var(--blue-500)}
.consent input:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.consent input[aria-invalid="true"]{border-color:#F2555A}
.consent a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-2)}
.consent a:hover{text-decoration-color:var(--cyan-400)}

/* ---------------------------------------------------------------------
   footer
   --------------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding-block:var(--s-5) var(--s-4);background:linear-gradient(180deg,transparent,rgba(5,15,27,.4))}
.foot__top{
  display:grid;gap:var(--s-4);padding-bottom:var(--s-4);margin-bottom:var(--s-4);
  border-bottom:1px solid var(--line);
  grid-template-columns:1fr;text-align:center;
}
@media (min-width:700px){
  .foot__top{grid-template-columns:1.4fr 1fr 1fr 1fr;text-align:left}
}
.foot__brand{display:flex;flex-direction:column;align-items:center;gap:.6rem}
@media (min-width:700px){.foot__brand{align-items:flex-start}}
/* the wordmark is set in type, not baked into a raster, so the name can
   change without redrawing an image; only the browser-window mark is art */
.foot__logo{
  display:flex;align-items:center;gap:.6rem;margin:0;
  font-size:1.5rem;font-weight:500;letter-spacing:-.02em;
}
.foot__logo canvas{height:38px;width:38px;opacity:.95}
.foot__logo b{
  font-weight:700;
  background:linear-gradient(120deg,var(--blue-500),var(--cyan-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.foot__tag{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--dim)}
.foot__col{display:flex;flex-direction:column;gap:.55rem;align-items:center}
@media (min-width:700px){.foot__col{align-items:flex-start}}
.foot__h{
  margin:0 0 .15rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.foot__col a,.foot__col .foot__btn{
  position:relative;display:inline-block;width:fit-content;
  color:var(--muted);text-decoration:none;font-size:.9rem;
  transition:color .2s;
}
.foot__col .foot__btn{
  padding:0;border:0;background:none;font-family:inherit;line-height:inherit;
  text-align:inherit;cursor:pointer;
}
.foot__col a::after,.foot__col .foot__btn::after{
  content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;
  background:var(--cyan-400);transition:right .3s cubic-bezier(.16,1,.3,1);
}
.foot__col a:hover,.foot__col .foot__btn:hover{color:var(--cyan-400)}
.foot__col a:hover::after,.foot__col .foot__btn:hover::after{right:0}
.foot__bottom{
  display:flex;flex-direction:column;gap:.4rem;align-items:center;text-align:center;
}
@media (min-width:700px){
  .foot__bottom{flex-direction:row;justify-content:space-between;text-align:left}
}
.foot__c{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--dim)}
.foot__c--id{color:var(--dim);max-width:none;line-height:1.7}
@media (min-width:700px){.foot__bottom .foot__c--id{flex-basis:100%;order:-1;margin-bottom:.6rem}}
.foot__c--dim{color:var(--dim)}   /* was rgba(106,133,163,.65) — 2.78:1, under AA */

/* ---------------------------------------------------------------------
   case-study overlay
   --------------------------------------------------------------------- */
.ov{position:fixed;inset:0;z-index:var(--z-ov);display:grid;place-items:center;padding:1.25rem}
.ov[hidden]{display:none}
.ov__scrim{position:absolute;inset:0;background:rgba(2,8,16,.88);backdrop-filter:blur(10px);animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ov__panel{
  position:relative;width:min(1100px,100%);max-height:88svh;overflow:auto;
  display:grid;gap:var(--s-3);
  padding:var(--s-4) var(--s-3);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(12,36,56,.96),rgba(4,16,31,.98));
  box-shadow:var(--shadow);
  animation:pop .35s cubic-bezier(.16,1,.3,1);
}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@media (min-width:900px){.ov__panel{grid-template-columns:1.55fr 1fr;align-items:start;gap:var(--s-4);padding:var(--s-4)}}
.ov__x{
  position:absolute;top:1rem;right:1rem;z-index:2;
  background:rgba(4,16,31,.8);border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem;min-height:40px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--muted);
  transition:color .2s,border-color .2s;
}
.ov__x:hover{color:var(--cyan-400);border-color:var(--cyan-400)}
.ov__media{
  position:relative;container-type:inline-size;aspect-ratio:16/10;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
}
.ov__media img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ov__meta h3{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;margin:0 0 .4rem}
.ov__tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 var(--s-2)}
.ov__d{color:var(--muted);font-size:.95rem;margin:0 0 var(--s-2)}
.ov__res{list-style:none;margin:0 0 var(--s-3);padding:0;display:grid;gap:.4rem}
.ov__res li{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--text);
  border-left:2px solid var(--blue-500);padding-left:.75rem;
}
.ov__rlabel{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin:0 0 .7rem;
}
/* an includes list is prose, not a metric — softer treatment than results */
.ov__res--inc li{
  font-family:var(--sans);font-size:.88rem;letter-spacing:0;color:var(--muted);
  border-left-color:var(--line-2);
}
.ov__link{
  display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan-400);text-decoration:none;
  border-bottom:1px solid var(--line-2);padding-bottom:.2rem;
}
.ov__link:hover{border-color:var(--cyan-400)}

/* ---------------------------------------------------------------------
   floating quote button + expanding panel
   --------------------------------------------------------------------- */
.fab{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:81;
  width:56px;height:56px;display:grid;place-items:center;
  border-radius:999px;border:1px solid var(--line-2);color:#fff;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-500) 60%,var(--cyan-400));
  box-shadow:0 14px 34px -12px rgba(11,99,206,.65);
  transition:transform .2s,box-shadow .2s;
}
.fab:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(5,176,255,.7)}
.fab:active{transform:translateY(0)}
.fab__icon{width:24px;height:24px;grid-area:1/1;transition:opacity .2s,transform .2s}
.fab__icon--close{opacity:0;transform:scale(.5) rotate(-45deg)}
.fab.is-open .fab__icon--open{opacity:0;transform:scale(.5) rotate(45deg)}
.fab.is-open .fab__icon--close{opacity:1;transform:none}
@media (max-width:520px){.fab{right:1rem;bottom:1rem;width:52px;height:52px}}

/* the panel unfolds from the button rather than opening as a full-screen
   modal — anchored to the same corner, growing from that corner so it
   visually reads as coming out of the icon */
.qp{
  position:fixed;right:1.25rem;bottom:5.25rem;z-index:80;
  width:min(380px,calc(100vw - 2rem));max-height:min(640px,calc(100svh - 7rem));
  overflow:auto;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(12,36,56,.97),rgba(4,16,31,.99));
  box-shadow:var(--shadow);
  transform-origin:calc(100% - 28px) bottom;
  transform:scale(.85) translateY(12px);opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .22s;
}
.qp.is-open{transform:none;opacity:1;pointer-events:auto}
.qp__in{padding:var(--s-3)}
.qp h3{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .4rem}
.qp__d{color:var(--muted);font-size:.86rem;margin:0 0 var(--s-3)}
.qp__contact{
  margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line);
  display:grid;gap:.6rem;
}
.qp__contact a{
  display:flex;align-items:center;gap:.6rem;
  color:var(--muted);text-decoration:none;font-size:.88rem;
  transition:color .2s;
}
.qp__contact a:hover{color:var(--cyan-400)}
.qp__contact svg{width:18px;height:18px;flex:0 0 auto;color:var(--blue-400)}
@media (max-width:520px){.qp{right:1rem;bottom:4.75rem}}

.legal{padding-top:calc(var(--s-7) + 70px)}
.legal .sub{margin-bottom:0}
.legal__body{margin-top:var(--s-5);display:grid;gap:var(--s-2)}
.legal__body h2{
  margin:var(--s-4) 0 0;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;
  color:var(--text);
}
.legal__body h2:first-child{margin-top:0}
.legal__body p{margin:0;color:var(--muted);line-height:1.7}
.legal__body ul{margin:0;padding-left:1.2rem;display:grid;gap:.5rem;color:var(--muted);line-height:1.7}
.legal__body a{color:var(--cyan-400)}
.legal__body strong{color:var(--text)}

/* ---------------------------------------------------------------------
   reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .scrollcue i{animation:none}
}


/* ---------------------------------------------------------------------
   legal documents — placeholders the owner still has to fill in, and the
   two block types the policies use. .todo is deliberately loud: a legal
   page that ships with [IMIE I NAZWISKO] still in it is worse than no
   page at all, so it should be impossible to miss in review.
   --------------------------------------------------------------------- */
.todo{
  background:rgba(255,183,0,.16);color:#FFD166;border:1px dashed rgba(255,183,0,.55);
  border-radius:6px;padding:.05em .45em;font-family:var(--mono);font-size:.86em;
}
.legal__note{
  border:1px solid rgba(255,183,0,.4);background:rgba(255,183,0,.07);
  border-radius:var(--r);padding:var(--s-2) var(--s-3);margin-bottom:var(--s-4);
}
.legal__quote{
  margin:var(--s-3) 0;padding:var(--s-3);border-left:3px solid var(--line-2);
  background:rgba(255,255,255,.02);border-radius:0 var(--r) var(--r) 0;
}
.legal__quote p{margin:0 0 .8rem}
.legal__quote p:last-child{margin-bottom:0}
@media print{.todo{border:1px solid #000;color:#000;background:none}}


/* ---------------------------------------------------------------------
   test-site notice — stated plainly rather than styled to blend in. The
   point is that nobody treats the prices or the placeholder company
   details as a real commercial offer, so it has to survive a skim.
   --------------------------------------------------------------------- */
.sitenote{
  /* the floating quote button is fixed bottom-right and would sit on top
     of the last line once you reach the end of the page, so the notice
     keeps clearance under it rather than being half-covered */
  margin:var(--s-3) 0 var(--s-4);padding:.85rem var(--s-3);
  border:1px dashed rgba(255,183,0,.5);border-radius:var(--r);
  background:rgba(255,183,0,.07);color:#FFD166;
  font-family:var(--mono);font-size:.74rem;line-height:1.75;letter-spacing:.02em;
  text-align:center;
}
.sitenote strong{color:#FFE29A;letter-spacing:.08em;text-transform:uppercase}
@media print{.sitenote{border:1px solid #000;color:#000;background:none}}

@media (max-width:760px){.sitenote{margin-bottom:5rem}}

/* ---------------------------------------------------------------------
   cookie consent — docked to the bottom edge and centred horizontally
   (inset + auto margins, so the entrance animation is free to use
   transform). Accept and Reject share one style on purpose: declining must
   be as easy and as visible as accepting.
   --------------------------------------------------------------------- */
.cookiebar{
  position:fixed;inset:auto 0 1.25rem 0;margin:0 auto;height:fit-content;max-height:calc(100svh - 2.5rem);overflow:auto;
  z-index:90;
  width:min(520px,calc(100vw - 2.5rem));
  display:flex;flex-direction:column;gap:.9rem;
  padding:1.15rem 1.25rem 1.25rem;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(12,36,56,.98),rgba(4,16,31,.99));
  box-shadow:var(--shadow);
  animation:cookieIn .35s cubic-bezier(.16,1,.3,1);
}
.cookiebar[hidden]{display:none}
@keyframes cookieIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cookiebar__t{margin:0;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.cookiebar__d{margin:0;color:var(--muted);font-size:.86rem;line-height:1.6}
.cookiebar__d a{color:var(--cyan-400)}
.cookiebar__btns{display:flex;gap:.6rem}
.cookiebar__btns .btn{flex:1 1 0}
@media (max-width:520px){.cookiebar{width:calc(100vw - 2rem);bottom:1rem}}
@media (prefers-reduced-motion:reduce){.cookiebar{animation:none}}

/* ---------------------------------------------------------------------
   opening screen — the page's own background, then the mark and the name
   emerge out of a soft blur while a thin loading bar fills beneath them.
   When the hold is over and the page has really finished loading
   (intro.js) the bar completes with a flare, and then the page is
   uncovered from the mark outwards: a circular reveal whose glowing edge
   travels to the corners while the mark itself flies to the spot it
   occupies in the hero, so one object carries the eye from the screen into
   the page.
   The rise-in waits for .is-play, which intro.js adds once the mark has been
   drawn and the name's font is in, so nothing pops in half-way through the
   fade. Timing from that moment: mark 0.05 s, name 0.3 s, bar 0.5 s,
   flare 1.6 s, reveal 1.86 s, landed 2.8 s (intro.js mirrors these
   numbers). Where the reveal cannot run (.has-iris is only added when the
   browser supports it) the background dissolves instead. The no-script
   fallback at the end still removes the screen if scripts never start.
   --------------------------------------------------------------------- */
.intro{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;overflow:hidden;
}
/* the background is its own layer so it can be uncovered while the mark above it stays */
.intro::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(130% 110% at 50% 38%,transparent 45%,rgba(2,8,16,.5) 100%),
    radial-gradient(100% 70% at 50% 8%,rgba(11,99,206,.20) 0%,transparent 62%),
    radial-gradient(80% 60% at 85% 85%,rgba(5,176,255,.09) 0%,transparent 60%),
    var(--navy-900);
}
.intro__in{position:relative;display:grid;justify-items:center;gap:1.1rem}
.intro__mark{filter:drop-shadow(0 12px 46px rgba(11,99,206,.5));will-change:transform}
.globe--intro{
  width:clamp(120px,27vmin,200px);height:clamp(120px,27vmin,200px);
  opacity:0;
}
.intro__word{
  margin:0;font-size:clamp(1.7rem,4.6vmin,2.4rem);font-weight:500;letter-spacing:-.02em;
  opacity:0;
}
.intro__word b{
  font-weight:700;
  background:linear-gradient(120deg,var(--blue-500),var(--cyan-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* loading bar: a hairline track with a glowing fill that grows left to right */
.intro__bar{
  position:relative;width:clamp(110px,22vmin,170px);height:2px;border-radius:2px;overflow:hidden;
  background:rgba(120,165,215,.18);opacity:0;margin-top:.2rem;
}
.intro__bar i{
  display:block;width:100%;height:100%;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--blue-500),var(--cyan-400));
  box-shadow:0 0 10px rgba(5,176,255,.7);
}
.intro__bar::after{                      /* the flare: a highlight that runs along the finished bar */
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  transform:translateX(-100%);
}
/* the ring that rides the edge of the circular reveal */
.intro__ring{
  position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;
  pointer-events:none;opacity:0;
  border:2px solid rgba(96,190,255,.75);
  box-shadow:0 0 40px rgba(5,176,255,.5),inset 0 0 40px rgba(5,176,255,.28);
}

/* rise-in: from a soft blur, the name a beat behind the mark, then the bar */
.intro.is-play .globe--intro{animation:introIn .9s cubic-bezier(.22,.61,.36,1) .05s both}
.intro.is-play .intro__word{animation:introWordIn .8s cubic-bezier(.22,.61,.36,1) .3s both}
.intro.is-play .intro__bar{animation:introFade .4s ease .45s both}
.intro.is-play .intro__bar i{animation:introBar 1s cubic-bezier(.3,.6,.3,1) .5s both}

/* the flare: loading is done — the bar shines and the mark's glow swells once */
.intro.is-flare .intro__bar::after{animation:introShine .42s ease-out both}
.intro.is-flare .intro__mark{animation:introGlow .6s ease-out both}

/* the lift: the name and the bar step aside; the background either dissolves
   or (where supported) is uncovered from the mark outwards */
.intro.is-lift::before{animation:introBgOut .9s cubic-bezier(.45,0,.25,1) both}
.intro.is-lift .intro__word,
.intro.is-lift .intro__bar{animation:introWordOut .4s cubic-bezier(.4,0,1,1) both}

/* circular reveal: --iris is the radius of the opening, animated on .intro and
   inherited by the background layer (mask) and by the ring, so the two stay
   locked together. intro.js registers it as a <length> and only then adds
   .has-iris, which also sets --iris-x / --iris-y (the mark's centre) and
   --iris-max (just enough to clear the farthest corner). */
.intro.has-iris::before{
  -webkit-mask-image:radial-gradient(circle at var(--iris-x) var(--iris-y),transparent calc(var(--iris) - 120px),#000 var(--iris));
  mask-image:radial-gradient(circle at var(--iris-x) var(--iris-y),transparent calc(var(--iris) - 120px),#000 var(--iris));
}
.intro.has-iris.is-lift{animation:introIris .9s cubic-bezier(.55,0,.25,1) both}
.intro.has-iris.is-lift::before{animation:none}
.intro.has-iris .intro__ring{
  left:var(--iris-x);top:var(--iris-y);
  width:max(0px,calc(var(--iris) * 2 - 120px));height:max(0px,calc(var(--iris) * 2 - 120px));
  transform:translate(-50%,-50%);
}
.intro.has-iris.is-lift .intro__ring{animation:introRing .9s ease-out both}

/* the hero's own mark stays hidden until the flying one reaches it */
html.is-intro .globe--hero{opacity:0}
html.is-intro,html.is-intro body{overflow:hidden}

@keyframes introIn{
  from{opacity:0;transform:translateY(12px) scale(.94);filter:blur(10px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes introWordIn{
  from{opacity:0;transform:translateY(10px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes introBar{from{transform:scaleX(0)}to{transform:scaleX(.88)}}
@keyframes introShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes introGlow{
  0%,100%{filter:drop-shadow(0 12px 46px rgba(11,99,206,.5))}
  45%{filter:drop-shadow(0 12px 74px rgba(40,170,255,.95))}
}
@keyframes introIris{from{--iris:0px}to{--iris:var(--iris-max)}}
@keyframes introRing{0%{opacity:0}12%{opacity:.95}60%{opacity:.45}100%{opacity:0}}
@keyframes introBgOut{from{opacity:1}to{opacity:0}}
@keyframes introWordOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translateY(-10px);filter:blur(0)}}
@keyframes introFade{from{opacity:0}to{opacity:1}}
@keyframes introFadeOut{from{opacity:1}to{opacity:0}}
@keyframes introLeave{to{opacity:0;visibility:hidden}}

/* scripts never started (html never got .is-intro): the screen just leaves */
html:not(.is-intro) .intro{animation:introLeave .6s ease 1.2s both}

@media (prefers-reduced-motion:reduce){
  /* same screen for visitors who asked for less motion, but fades only:
     nothing slides, scales, blurs, spins or sweeps (no bar, flare or ring) */
  .intro.is-play .globe--intro{animation:introFade .6s ease .05s both}
  .intro.is-play .intro__word{animation:introFade .6s ease .2s both}
  .intro__bar,.intro__ring{display:none}
  .intro.is-lift::before{animation:introBgOut .6s ease both}
  .intro.is-lift .intro__word{animation:introFadeOut .3s ease both}
}