/*
 * StarCore — dodatki strony głównej, sekcja „Technologia” (2026-09-25, prośby właściciela).
 * Zwykły plik CSS (bez Vite — na hostingu nie ma Node do przebudowy), ładowany <link>-iem przez
 * resources/views/components/site/home/bento.blade.php. Kolory wyłącznie z tokenów strony
 * (--blue, --blue-l, --amber, --amber-l, --txt, --muted, --panel, --line). Wszystkie animacje
 * to czysty CSS; przy prefers-reduced-motion każda scena zatrzymuje się w czytelnym kadrze.
 */

/* ---------- Sekcja i kafelki ---------- */
.bento .wrap>p{font-size:clamp(16px,1.6vw,18px);line-height:1.65;color:var(--muted);max-width:640px;margin-top:14px}
.bento-tile{
  background:linear-gradient(160deg,rgba(46,107,255,.11),rgba(255,255,255,.012) 42%,rgba(245,165,36,.05)),var(--panel);
  border-color:rgba(110,168,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 50px -30px rgba(46,107,255,.5),0 22px 44px -30px rgba(0,0,0,.85);
  transition:border-color .25s ease,box-shadow .25s ease;
}
/* Świecąca obwódka (::before zajmuje kursor-spotlight z transitions.css). */
.bento-tile::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(110,168,255,.55),transparent 38%,transparent 62%,rgba(245,165,36,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.45;transition:opacity .25s ease;
}
.bento-tile:hover{border-color:rgba(110,168,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 32px 60px -28px rgba(46,107,255,.65),0 26px 50px -30px rgba(0,0,0,.9)}
.bento-tile:hover::after{opacity:1}
.bento-body h3{font-size:18px;letter-spacing:-.01em}
.bento-body p{line-height:1.6}
/* ---------- B: szybka i responsywna — jedno urządzenie 3D zmienia się komputer → tablet → telefon (9 s) ---------- */
.resp{display:flex;flex-direction:column;align-items:center;gap:14px}
.resp-stage{position:relative;width:100%;height:236px;perspective:900px;display:flex;align-items:center;justify-content:center}
.resp-device{position:relative;width:300px;height:176px;border-radius:12px;padding:8px;
  background:linear-gradient(160deg,#26345f,#0c1330);border:1px solid rgba(110,168,255,.35);
  box-shadow:0 30px 50px -26px rgba(46,107,255,.75),inset 0 1px 0 rgba(255,255,255,.08);
  transform:rotateY(-16deg) rotateX(8deg);animation:resp-morph 9s cubic-bezier(.65,0,.35,1) infinite,resp-float 6s ease-in-out infinite}
.resp-screen{position:relative;width:100%;height:100%;border-radius:6px;overflow:hidden;padding:8px;display:flex;flex-direction:column;gap:7px;
  background:radial-gradient(120% 80% at 20% 0%,rgba(46,107,255,.28),#070b1c 60%)}
.resp-nav{display:flex;align-items:center;gap:5px}
.resp-nav i{height:5px;border-radius:3px;background:rgba(233,238,251,.25)}
.resp-nav i:first-child{width:26px;background:linear-gradient(90deg,var(--blue-l),var(--amber-l))}
.resp-nav i:nth-child(2){width:18px;margin-left:auto}.resp-nav i:nth-child(3){width:18px}
.resp-hero{display:flex;flex-direction:column;gap:5px;padding:4px 0}
.resp-hero b{display:block;width:70%;height:9px;border-radius:4px;background:rgba(233,238,251,.85)}
.resp-hero em{display:block;width:50%;height:6px;border-radius:3px;background:rgba(233,238,251,.25)}
.resp-hero u{display:block;width:44px;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--blue-l));margin-top:3px}
.resp-cards{display:flex;flex-wrap:wrap;gap:6px}
.resp-cards i{height:34px;border-radius:6px;width:calc(33.3% - 4px);background:rgba(233,238,251,.07);border:1px solid rgba(110,168,255,.22);
  animation:resp-card 9s cubic-bezier(.65,0,.35,1) infinite}
.resp-cards i:nth-child(2){border-color:rgba(245,165,36,.35)}
.resp-load{position:absolute;left:0;top:0;height:3px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--blue-l),#fff,var(--amber-l));
  box-shadow:0 0 12px rgba(110,168,255,.9);animation:resp-load 3s ease-out infinite}
.resp-stand{position:absolute;left:50%;bottom:6px;width:90px;height:8px;margin-left:-45px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(46,107,255,.6),transparent);filter:blur(3px)}
.resp-label{position:relative;height:22px;overflow:hidden;font:700 12px/22px 'Space Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-l);text-align:center;min-width:140px}
.resp-label-list{display:flex;flex-direction:column;animation:resp-label 9s cubic-bezier(.65,0,.35,1) infinite}
.resp-label-list span{height:22px}
.resp-feats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.resp-feats li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font:600 13px/1 'Space Grotesk',sans-serif;
  color:var(--txt);background:rgba(9,14,34,.8);border:1px solid rgba(110,168,255,.28)}
.resp-feats svg{color:var(--amber-l)}
@keyframes resp-morph{
  0%,28%{width:300px;height:176px;border-radius:12px}
  33%,61%{width:176px;height:212px;border-radius:16px}
  66%,94%{width:108px;height:212px;border-radius:20px}
  100%{width:300px;height:176px;border-radius:12px}
}
@keyframes resp-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes resp-card{0%,28%{width:calc(33.3% - 4px)}33%,61%{width:calc(50% - 3px)}66%,94%{width:100%}100%{width:calc(33.3% - 4px)}}
/* Pasek ładowania przelatuje na początku każdej z trzech faz (co 3 s). */
@keyframes resp-load{0%{width:0;opacity:1}14%{width:100%;opacity:1}24%,100%{width:100%;opacity:0}}
@keyframes resp-label{0%,28%{transform:translateY(0)}33%,61%{transform:translateY(-22px)}66%,94%{transform:translateY(-44px)}100%{transform:translateY(-66px)}}
/* Układ (prośby właściciela): każdy kafelek na 2 z 4 kolumn — szybka i responsywna + skrzynki e-mail,
   domeny + wycena, bezpieczeństwo + panel klienta, SEO i języki + sklepy i rezerwacje. */
.bento-b,.bento-c,.bento-e,.bento-f,.bento-g,.bento-h,.bento-i,.bento-j{grid-column:span 2}
/* Szerokie kafelki: sceny panelu i SEO wyśrodkowane, bez rozciągania na całą szerokość. */
.bento-h .panel3d,.bento-i .seo3d{width:100%;max-width:380px;margin-inline:auto}
/* Skrzynki e-mail: scena na całą szerokość kafelka, powiększona. */
.bento-c .mail3d-stage{scale:1.4;margin:44px 0}
@media (max-width:640px){
  .bento-b,.bento-c,.bento-e,.bento-f,.bento-g,.bento-h,.bento-i,.bento-j{grid-column:span 1}
  .bento-c .mail3d-stage{scale:.82;margin:-14px 0}
}
.scene{margin-top:auto;padding-top:16px;position:relative}
.scene *{box-sizing:border-box}

/* ---------- C: skrzynki e-mail — zamknięta koperta, płynne otwieranie (pętla 8 s) ---------- */
.mail3d{display:flex;flex-direction:column;align-items:center;perspective:760px}
.mail3d-stage{position:relative;width:100%;height:214px;transform-style:preserve-3d;animation:mail3d-sway 10s ease-in-out infinite}
.mail3d-chip{
  position:absolute;left:50%;top:62%;translate:-50% -50%;white-space:nowrap;
  font:600 11px/1 'Space Grotesk',sans-serif;color:var(--txt);letter-spacing:.01em;
  padding:5px 9px;border-radius:999px;background:rgba(9,14,34,.86);border:1px solid rgba(110,168,255,.38);
  box-shadow:0 8px 18px -8px rgba(46,107,255,.6);
  animation:mail3d-orbit 16s linear infinite;animation-delay:calc(var(--i) * -4s);
}
.mail3d-chip b{color:var(--blue-l);font-weight:700}
.mail3d-chip:nth-child(2n) b{color:var(--amber-l)}
.mail3d-floor{position:absolute;left:50%;top:50%;width:150px;height:26px;margin:58px 0 0 -75px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(46,107,255,.45),transparent);filter:blur(6px);
  transform:rotateX(80deg);animation:mail3d-floor 10s ease-in-out infinite}
.mail3d-env{position:absolute;left:50%;top:50%;width:150px;height:96px;margin:-34px 0 0 -75px;perspective:420px;
  animation:mail3d-bob 5s ease-in-out infinite}
.mail3d-env>span{position:absolute}
.mail3d-back{inset:0;z-index:0;border-radius:10px;background:linear-gradient(165deg,#1d3270,#0a1330);
  box-shadow:0 22px 34px -14px rgba(46,107,255,.6)}
.mail3d-letter{
  left:11px;right:11px;top:10px;height:76px;z-index:2;border-radius:7px;padding:8px 9px;
  background:linear-gradient(180deg,#f6f8ff,#dde5fb);box-shadow:0 6px 16px -6px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:4px;transform:translateY(8px);
  animation:mail3d-letter 8s infinite;
}
.mail3d-letter-head{display:flex;align-items:center;gap:5px;font:700 11px/1 'Space Grotesk',sans-serif;color:#0b1330}
.mail3d-avatar{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--amber));flex-shrink:0}
.mail3d-letter-addr{font:700 10.5px/1.15 'Space Grotesk',sans-serif;color:var(--blue);white-space:normal;overflow:hidden}
.mail3d-line{display:block;height:4px;border-radius:2px;background:rgba(11,19,48,.14)}
.mail3d-line.short{width:60%}
/* Przód z wycięciem w kształcie V od górnych rogów — klapka dokładnie je zakrywa, więc zamknięta
   koperta nie pokazuje listu. */
.mail3d-front{inset:0;z-index:3;border-radius:10px;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);
  background:linear-gradient(170deg,#2b4cab 0%,#132258 55%,#0c1638 100%)}
.mail3d-front::after{content:'';position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(110,168,255,.35)}
.mail3d-flap{left:0;right:0;top:0;height:64%;z-index:4;border-radius:10px 10px 0 0;transform-origin:50% 0;
  clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,#4a78ff,#1c3690);
  animation:mail3d-flap 8s infinite}
.mail3d-seal{left:50%;top:64%;width:22px;height:22px;margin:-13px 0 0 -11px;z-index:5;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font:700 11px/1 'Space Grotesk',sans-serif;color:#1a1204;
  background:radial-gradient(circle at 35% 30%,var(--amber-l),var(--amber) 70%);box-shadow:0 3px 8px rgba(0,0,0,.45);
  animation:mail3d-seal 8s infinite}
.mail3d-ping{top:-7px;right:-7px;width:16px;height:16px;border-radius:50%;z-index:6;
  background:var(--amber);opacity:0;animation:mail3d-ping 8s ease-out infinite}
.mail3d-domain{margin-top:4px;font:700 16px/1.2 'Space Grotesk',sans-serif;letter-spacing:.01em;
  filter:drop-shadow(0 0 14px rgba(46,107,255,.45))}
@keyframes mail3d-sway{
  0%,100%{transform:rotateX(-20deg) rotateY(-12deg)}
  50%{transform:rotateX(-16deg) rotateY(12deg)}
}
@keyframes mail3d-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes mail3d-floor{0%,100%{opacity:.9}50%{opacity:.6}}
@keyframes mail3d-orbit{
  from{transform:rotateY(0deg) translateZ(118px) rotateY(0deg)}
  to{transform:rotateY(360deg) translateZ(118px) rotateY(-360deg)}
}
/* Klapka: zamknięta 0–18%, otwiera się do 30%, otwarta do 82%, zamyka do 94%. Przy 90° (krawędzią
   do widza) przechodzi za list — to jedyny moment zmiany warstwy, więc nie widać przeskoku. */
@keyframes mail3d-flap{
  0%,18%{transform:rotateX(0deg);z-index:4;filter:brightness(1);animation-timing-function:cubic-bezier(.45,0,.9,.6)}
  24%{transform:rotateX(89deg);z-index:4;filter:brightness(1)}
  24.2%{transform:rotateX(91deg);z-index:1;filter:brightness(1.35);animation-timing-function:cubic-bezier(.1,.4,.55,1)}
  30%,82%{transform:rotateX(180deg);z-index:1;filter:brightness(1.35);animation-timing-function:cubic-bezier(.45,0,.9,.6)}
  88%{transform:rotateX(91deg);z-index:1;filter:brightness(1.35)}
  88.2%{transform:rotateX(89deg);z-index:4;filter:brightness(1);animation-timing-function:cubic-bezier(.1,.4,.55,1)}
  94%,100%{transform:rotateX(0deg);z-index:4;filter:brightness(1)}
}
@keyframes mail3d-letter{
  0%,30%{transform:translateY(8px);animation-timing-function:cubic-bezier(.22,.8,.3,1)}
  46%,70%{transform:translateY(-56px);animation-timing-function:cubic-bezier(.6,0,.75,.4)}
  82%,100%{transform:translateY(8px)}
}
@keyframes mail3d-seal{
  0%,17%{opacity:1;transform:scale(1)}
  21%,93%{opacity:0;transform:scale(.6)}
  97%,100%{opacity:1;transform:scale(1)}
}
@keyframes mail3d-ping{
  0%,46%{opacity:0;transform:scale(.4);box-shadow:0 0 0 0 rgba(245,165,36,.6)}
  51%{opacity:1;transform:scale(1.15)}
  57%{transform:scale(1);box-shadow:0 0 0 10px rgba(245,165,36,0)}
  68%{opacity:1}
  74%,100%{opacity:0;transform:scale(.4)}
}

/* ---------- E: domeny — pasek adresu z bębnem 3D końcówek i droga zapytania DNS (pętla 2,4 s / końcówka) ---------- */
.dom{display:flex;flex-direction:column;gap:22px}
.bento-e .scene{margin-block:auto}
.dom-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,30,64,.95),rgba(9,14,34,.95));border:1px solid rgba(110,168,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 34px -18px rgba(46,107,255,.7)}
.dom-lock{flex-shrink:0;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:#8ff0b8;background:rgba(48,164,108,.14);border:1px solid rgba(48,164,108,.45)}
.dom-url{display:flex;align-items:center;min-width:0;font:700 clamp(15px,1.7vw,19px)/1 'Space Grotesk',sans-serif;color:var(--txt);letter-spacing:.005em}
.dom-scheme{color:var(--muted);font-weight:600}
.dom-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dom-cube{position:relative;flex-shrink:0;width:3.3em;height:1.5em;margin-left:.08em;perspective:260px;overflow:hidden;border-radius:7px}
.dom-cube-in{position:absolute;inset:0;transform-style:preserve-3d;animation:dom-cube 14.4s infinite}
.dom-cube-in span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:7px;
  color:var(--amber-l);background:linear-gradient(180deg,rgba(245,165,36,.26),rgba(245,165,36,.07));
  border:1px solid rgba(245,165,36,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);backface-visibility:hidden;
  transform:rotateX(calc(var(--i) * -60deg)) translateZ(1.3em)}
.dom-status{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font:700 11.5px/1 'Space Grotesk',sans-serif;color:#8ff0b8;background:rgba(48,164,108,.14);border:1px solid rgba(48,164,108,.45);
  animation:dom-status 2.4s ease-out infinite}
.dom-status i{width:7px;height:7px;border-radius:50%;background:#30a46c;box-shadow:0 0 8px #30a46c}
.dom-path{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dom-line{position:absolute;left:12.5%;right:12.5%;top:24px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(110,168,255,.15),rgba(110,168,255,.45),rgba(245,165,36,.35))}
.dom-packet{position:absolute;top:50%;left:0;width:54px;height:6px;margin:-3px 0 0 -54px;border-radius:3px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(110,168,255,.6) 60%,#fff);box-shadow:0 0 14px rgba(110,168,255,.9);
  animation:dom-packet 2.4s cubic-bezier(.45,.05,.4,1) infinite}
.dom-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.dom-node b{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--blue-l);
  background:rgba(9,14,34,.92);border:1px solid rgba(110,168,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  animation:dom-node 2.4s ease-out infinite;animation-delay:var(--d)}
.dom-node:last-child b{color:#8ff0b8;animation-name:dom-node-ok}
.dom-node span{font:600 11px/1.2 'Space Grotesk',sans-serif;color:var(--muted)}
@keyframes dom-cube{
  0%,12.5%{transform:translateZ(-1.3em) rotateX(0deg);animation-timing-function:cubic-bezier(.34,1.45,.55,1)}
  16.67%,29.17%{transform:translateZ(-1.3em) rotateX(60deg);animation-timing-function:cubic-bezier(.34,1.45,.55,1)}
  33.33%,45.83%{transform:translateZ(-1.3em) rotateX(120deg);animation-timing-function:cubic-bezier(.34,1.45,.55,1)}
  50%,62.5%{transform:translateZ(-1.3em) rotateX(180deg);animation-timing-function:cubic-bezier(.34,1.45,.55,1)}
  66.67%,79.17%{transform:translateZ(-1.3em) rotateX(240deg);animation-timing-function:cubic-bezier(.34,1.45,.55,1)}
  83.33%,95.83%{transform:translateZ(-1.3em) rotateX(300deg);animation-timing-function:cubic-bezier(.34,1.45,.55,1)}
  100%{transform:translateZ(-1.3em) rotateX(360deg)}
}
/* Pakiet: rusza po ustawieniu się nowej końcówki, mija węzły (12/30/48/66 % cyklu) i gaśnie u celu. */
@keyframes dom-packet{0%,8%{left:0;opacity:0}12%{opacity:1}66%{left:100%;opacity:1}72%,100%{left:100%;opacity:0}}
@keyframes dom-node{
  0%{border-color:rgba(110,168,255,.9);box-shadow:0 0 0 0 rgba(110,168,255,.55),0 0 22px rgba(46,107,255,.55);color:#fff;transform:translateY(-2px)}
  30%{box-shadow:0 0 0 10px rgba(110,168,255,0),0 0 22px rgba(46,107,255,.2)}
  45%,100%{border-color:rgba(110,168,255,.3);box-shadow:0 0 0 0 rgba(110,168,255,0);color:var(--blue-l);transform:none}
}
@keyframes dom-node-ok{
  0%{border-color:rgba(48,164,108,.95);box-shadow:0 0 0 0 rgba(48,164,108,.6),0 0 24px rgba(48,164,108,.55);transform:translateY(-2px) scale(1.06)}
  35%{box-shadow:0 0 0 12px rgba(48,164,108,0),0 0 18px rgba(48,164,108,.3);transform:none}
  100%{border-color:rgba(48,164,108,.55);box-shadow:0 0 0 0 rgba(48,164,108,0)}
}
@keyframes dom-status{0%,64%{box-shadow:0 0 0 0 rgba(48,164,108,0)}68%{box-shadow:0 0 0 0 rgba(48,164,108,.55)}100%{box-shadow:0 0 0 10px rgba(48,164,108,0)}}

/* ---------- G: bezpieczeństwo — bryła tarczy 3D, pole siłowe, uderzenia (pętla 3,6 s) ---------- */
.sec{display:grid;grid-template-columns:186px 1fr;gap:18px;align-items:center}
.sec-stage{position:relative;height:206px;perspective:700px}
.sec-glow{position:absolute;left:50%;bottom:10px;width:150px;height:22px;margin-left:-75px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(46,107,255,.55),transparent);filter:blur(5px)}
.sec-dome{position:absolute;left:50%;top:50%;width:180px;height:180px;margin:-90px;animation:sec-dome 1.2s ease-out infinite;animation-delay:.24s}
.sec-dome svg{width:100%;height:100%;display:block}
.sec-shield{position:absolute;left:50%;top:50%;width:108px;height:117px;margin:-60px 0 0 -54px;transform-style:preserve-3d;
  animation:sec-turn 9s ease-in-out infinite}
.sec-layer{position:absolute;inset:0;transform:translateZ(calc(var(--z) * -1.7px));filter:brightness(calc(1 - var(--z) * .07))}
.sec-layer svg,.sec-front svg{width:100%;height:100%;display:block;overflow:visible}
.sec-front{position:absolute;inset:0;filter:drop-shadow(0 0 16px rgba(46,107,255,.55))}
.sec-shine{animation:sec-shine 4.5s ease-in-out infinite}
.sec-keyhole{animation:sec-key 3.6s ease-in-out infinite}
.sec-atk{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a))}
.sec-streak{position:absolute;top:-1.5px;left:0;width:58px;height:3px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,#fff,#ff6b6b 18%,rgba(255,107,107,0));box-shadow:0 0 10px rgba(255,107,107,.8);
  animation:sec-streak 7.2s cubic-bezier(.5,0,.9,.5) infinite;animation-delay:var(--d)}
.sec-ripple{position:absolute;left:86px;top:-17px;width:34px;height:34px;margin-left:-17px;border-radius:50%;
  border:2px solid var(--amber-l);box-shadow:0 0 14px rgba(245,165,36,.8),inset 0 0 10px rgba(245,165,36,.6);opacity:0;
  animation:sec-ripple 7.2s ease-out infinite;animation-delay:var(--d)}
.sec-count{position:absolute;right:2px;top:6px;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;
  font:700 10.5px/1 'Space Grotesk',sans-serif;color:#ffb4b4;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.4)}
.sec-count i{width:6px;height:6px;border-radius:50%;background:#ff6b6b;animation:sec-blink 1.2s ease-out infinite;animation-delay:.24s}
.sec-list{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sec-list li{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:11px;font-size:13.5px;line-height:1.3;color:var(--txt);
  background:linear-gradient(90deg,rgba(46,107,255,.1),rgba(46,107,255,0));border:1px solid rgba(110,168,255,.12);
  animation:sec-row 10s ease-out infinite;animation-delay:calc(var(--i) * .4s)}
.sec-check{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(48,164,108,.16);border:1px solid rgba(48,164,108,.5);color:#8ff0b8}
.sec-check path{stroke-dasharray:24;stroke-dashoffset:24;animation:sec-tick 10s ease-out infinite;animation-delay:calc(var(--i) * .4s)}
@keyframes sec-turn{0%,100%{transform:rotateY(-30deg) rotateX(8deg) translateY(0)}50%{transform:rotateY(30deg) rotateX(2deg) translateY(-7px)}}
@keyframes sec-dome{0%{opacity:.95;transform:scale(1.02)}45%,100%{opacity:.45;transform:scale(1)}}
@keyframes sec-shine{0%,35%{transform:translateX(-70px)}75%,100%{transform:translateX(190px)}}
@keyframes sec-key{0%,100%{opacity:.75}50%{opacity:1}}
/* Smuga leci od krawędzi sceny do pola (x 150 → 86 px), przy uderzeniu gaśnie, w tym miejscu fala.
   Pętla 7,2 s (6 ataków co 1,2 s, lewa/prawa na przemian); uderzenie po 1,44 s = 20% pętli. */
@keyframes sec-streak{0%{transform:translateX(150px);opacity:0}4%{opacity:1}20%{transform:translateX(86px);opacity:1}22%,100%{transform:translateX(86px);opacity:0}}
@keyframes sec-ripple{0%,19.5%{opacity:0;transform:scale(.2)}21%{opacity:1;transform:scale(.5)}31%,100%{opacity:0;transform:scale(1.9)}}
@keyframes sec-blink{0%{box-shadow:0 0 0 0 rgba(255,107,107,.8)}60%,100%{box-shadow:0 0 0 7px rgba(255,107,107,0)}}
@keyframes sec-row{0%{opacity:.4;transform:translateX(-6px)}6%,90%{opacity:1;transform:none}100%{opacity:.4}}
@keyframes sec-tick{0%,4%{stroke-dashoffset:24}10%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
@media (max-width:980px){.sec{grid-template-columns:1fr}}

/* ---------- F: wycena — taśma krawiecka 3D, „cena szyta na miarę”, przełączniki i karta ceny ---------- */
.bento-f{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:18px}
.bento-f .bento-body{max-width:none}
.tailor{position:relative;height:64px;perspective:520px}
.tailor-tape{position:absolute;left:-30px;right:-30px;top:14px;height:34px;border-radius:4px;transform:rotateX(38deg) rotateZ(-2deg);
  background:
    linear-gradient(90deg,rgba(26,18,4,.75) 0 1.5px,transparent 1.5px) 0 0/40px 60% repeat-x,
    linear-gradient(90deg,rgba(26,18,4,.5) 0 1px,transparent 1px) 0 0/8px 32% repeat-x,
    linear-gradient(180deg,#ffd27a,#f5a524 55%,#c97f10);
  box-shadow:0 14px 24px -12px rgba(245,165,36,.55),inset 0 1px 0 rgba(255,255,255,.5);
  animation:tailor-tape 1.6s linear infinite}
.tailor-mark{position:absolute;top:2px;left:30%;display:flex;flex-direction:column;align-items:center;gap:4px;animation:tailor-mark 7s cubic-bezier(.6,0,.3,1) infinite}
.tailor-mark b{font:700 11px/1 'Space Grotesk',sans-serif;color:#fff;white-space:nowrap;padding:5px 9px;border-radius:999px;
  background:linear-gradient(90deg,var(--blue),#5b8cff);box-shadow:0 6px 16px -6px rgba(46,107,255,.9)}
.tailor-mark i{width:2px;height:40px;border-radius:2px;background:linear-gradient(180deg,#fff,var(--blue-l));box-shadow:0 0 10px var(--blue-l)}
.tailor-note{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  background:linear-gradient(100deg,rgba(245,165,36,.16),rgba(46,107,255,.12));border:1px solid rgba(245,165,36,.4)}
.tailor-note svg{flex-shrink:0;color:var(--amber-l)}
.tailor-note b{display:block;font:700 16px/1.25 'Space Grotesk',sans-serif;color:var(--txt)}
.tailor-note span{display:block;font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:3px}
.bento-f .bento-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
.bento-f .bento-calc-options{gap:8px}
.bento-f .bento-calc-option{position:relative;gap:11px;padding:10px 12px;border-radius:12px;font-size:14px;
  background:rgba(9,14,34,.7);border:1px solid rgba(110,168,255,.18);transition:border-color .2s,background .2s}
.bento-f .bento-calc-option:has(input:checked){border-color:rgba(110,168,255,.6);background:rgba(46,107,255,.14)}
.bento-f .bento-calc-option input{position:absolute;opacity:0;width:1px;height:1px}
.calc-switch{flex-shrink:0;position:relative;width:36px;height:20px;border-radius:999px;background:rgba(233,238,251,.14);transition:background .25s}
.calc-switch::after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.4);transition:translate .25s cubic-bezier(.34,1.5,.6,1)}
.bento-calc-option input:checked+.calc-switch{background:linear-gradient(90deg,var(--blue),var(--blue-l))}
.bento-calc-option input:checked+.calc-switch::after{translate:16px 0}
.bento-calc-option input:focus-visible+.calc-switch{outline:2px solid var(--blue-l);outline-offset:2px}
.calc-card{position:relative;isolation:isolate;border-radius:18px;padding:18px 18px 16px;text-align:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,rgba(46,107,255,.28),rgba(9,14,34,.95) 60%)}
.calc-card::before{content:'';position:absolute;inset:-60%;z-index:-2;
  background:conic-gradient(from 0deg,transparent 0 55%,var(--blue-l) 70%,var(--amber) 80%,transparent 90%);animation:calc-spin 5s linear infinite}
.calc-card::after{content:'';position:absolute;inset:1.5px;z-index:-1;border-radius:16.5px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(46,107,255,.26),#0a1026 62%)}
.calc-card small{display:block;font:600 11px/1 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bento-f .calc-card .bento-calc-price{margin-top:8px;font:700 clamp(34px,4vw,46px)/1 'Space Grotesk',sans-serif;
  background:linear-gradient(100deg,var(--blue-l),#fff 45%,var(--amber-l));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(46,107,255,.45))}
.bento-f .bento-calc-disclaimer{grid-column:1/-1;margin:0}
.bento-f .bento-calc .btn{grid-column:1/-1;justify-self:start}
@keyframes tailor-tape{from{background-position:0 0,0 0,0 0}to{background-position:-40px 0,-40px 0,0 0}}
@keyframes tailor-mark{0%,100%{left:22%}30%{left:64%}55%{left:40%}80%{left:52%}}
@keyframes calc-spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.bento-f .bento-calc{grid-template-columns:1fr}}

/* ---------- J: sklepy i rezerwacje — karta produktu z koszykiem i kalendarz rezerwacji (pętla 8 s) ---------- */
.shop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;perspective:900px;width:100%;max-width:440px;margin-inline:auto}
.shop-card{position:relative;border-radius:14px;padding:12px;background:rgba(9,14,34,.92);border:1px solid rgba(110,168,255,.3);
  box-shadow:0 22px 40px -22px rgba(46,107,255,.65);animation:shop-float 7s ease-in-out infinite}
.shop-card.product{transform:rotateY(14deg) rotateX(6deg)}
.shop-card.booking{transform:rotateY(-14deg) rotateX(6deg);animation-delay:-3.5s}
.shop-img{position:relative;height:76px;border-radius:9px;overflow:hidden;
  background:radial-gradient(circle at 32% 38%,rgba(245,165,36,.6),transparent 42%),radial-gradient(circle at 70% 70%,rgba(110,168,255,.45),transparent 45%),linear-gradient(135deg,#1c3690,#0a1330)}
.shop-img::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-50%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:shop-shine 8s ease-in-out infinite}
.shop-lines{display:flex;flex-direction:column;gap:5px;margin:9px 0}
.shop-lines i{display:block;height:6px;border-radius:3px;background:rgba(233,238,251,.22)}
.shop-lines i:last-child{width:60%;background:rgba(233,238,251,.1)}
.shop-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.shop-row b{font:700 15px/1 'Space Grotesk',sans-serif;color:var(--txt)}
.shop-btn{position:relative;font:700 10.5px/1 'Space Grotesk',sans-serif;color:#fff;padding:7px 9px;border-radius:8px;white-space:nowrap;
  background:linear-gradient(90deg,var(--blue),#5b8cff);box-shadow:0 6px 14px -6px rgba(46,107,255,.9);animation:shop-press 8s ease-in-out infinite}
.shop-cart{position:absolute;z-index:2;right:-8px;top:-10px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#1a1204;background:var(--amber);box-shadow:0 6px 14px -4px rgba(245,165,36,.8);animation:shop-cart 8s ease-out infinite}
.shop-count{position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;overflow:hidden;background:#fff;color:#0b1330;
  font:700 10px/16px 'Space Grotesk',sans-serif;text-align:center}
.shop-count span{display:block;animation:shop-count 8s steps(1,end) infinite}
.shop-fly{position:absolute;right:30px;bottom:18px;width:10px;height:10px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 12px var(--amber);opacity:0;animation:shop-fly 8s cubic-bezier(.3,0,.4,1) infinite}
.shop-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.shop-cal-head i{display:block;width:54px;height:7px;border-radius:4px;background:rgba(233,238,251,.3)}
.shop-cal-head em{display:flex;gap:4px}.shop-cal-head em::before,.shop-cal-head em::after{content:'';width:8px;height:8px;border-radius:2px;background:rgba(233,238,251,.18)}
.shop-grid{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.shop-grid span{aspect-ratio:1;border-radius:4px;background:rgba(233,238,251,.07)}
.shop-grid span:nth-child(7n),.shop-grid span:nth-child(7n-1){background:rgba(233,238,251,.03)}
.shop-pick{position:absolute;left:0;top:0;width:calc((100% - 24px) / 7);aspect-ratio:1;border-radius:4px;
  border:2px solid var(--blue-l);box-shadow:0 0 12px rgba(110,168,255,.8);animation:shop-pick 8s cubic-bezier(.6,0,.3,1) infinite}
.shop-slot{display:flex;gap:6px;margin-top:9px}
.shop-slot span{flex:1;text-align:center;font:700 10.5px/1 'Space Grotesk',sans-serif;color:var(--muted);padding:6px 0;border-radius:7px;border:1px solid rgba(110,168,255,.2)}
.shop-slot span:nth-child(2){animation:shop-slot 8s ease-out infinite}
.shop-ok{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:9px;
  font:700 11px/1 'Space Grotesk',sans-serif;color:#8ff0b8;background:rgba(20,40,34,.96);border:1px solid rgba(48,164,108,.6);
  opacity:0;animation:shop-ok 8s ease-out infinite}
@keyframes shop-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes shop-shine{0%,60%{left:-50%}80%,100%{left:130%}}
@keyframes shop-press{0%,22%{transform:scale(1)}25%{transform:scale(.92)}29%,100%{transform:scale(1)}}
@keyframes shop-fly{0%,25%{opacity:0;transform:translate(0,0) scale(1)}27%{opacity:1}42%{opacity:1;transform:translate(26px,-118px) scale(.6)}45%,100%{opacity:0;transform:translate(26px,-118px) scale(.3)}}
@keyframes shop-cart{0%,42%{transform:scale(1)}46%{transform:scale(1.25)}52%,100%{transform:scale(1)}}
@keyframes shop-count{0%,44%{transform:translateY(0)}44.01%,100%{transform:translateY(-16px)}}
/* Wybór dnia: znacznik skacze po kalendarzu i zatrzymuje się na dniu (pozycje w krokach siatki 7×4). */
@keyframes shop-pick{
  0%,8%{transform:translate(0,0)}
  18%{transform:translate(calc(200% + 8px),0)}
  30%{transform:translate(calc(300% + 12px),calc(100% + 4px))}
  40%,88%{transform:translate(calc(400% + 16px),calc(200% + 8px));border-color:var(--amber);box-shadow:0 0 14px rgba(245,165,36,.9)}
  100%{transform:translate(0,0)}
}
@keyframes shop-slot{0%,48%{color:var(--muted);border-color:rgba(110,168,255,.2);background:transparent}54%,88%{color:#fff;border-color:rgba(110,168,255,.8);background:rgba(46,107,255,.3)}100%{color:var(--muted);background:transparent}}
@keyframes shop-ok{0%,58%{opacity:0;transform:translateY(10px)}64%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}

/* ---------- H: panel klienta — okno z postępem i powiadomieniami ---------- */
.panel3d{perspective:700px}
.panel3d-win{position:relative;border-radius:12px;background:rgba(9,14,34,.9);border:1px solid rgba(110,168,255,.3);
  box-shadow:0 22px 40px -22px rgba(46,107,255,.6);padding:10px 12px 14px;transform:rotateX(14deg) rotateY(-10deg);
  transform-origin:50% 100%;animation:panel3d-tilt 9s ease-in-out infinite;min-height:150px}
.panel3d-dots{display:flex;gap:4px;margin-bottom:10px}
.panel3d-dots i{width:7px;height:7px;border-radius:50%;background:rgba(233,238,251,.25)}
.panel3d-dots i:first-child{background:#e5484d}.panel3d-dots i:nth-child(2){background:var(--amber)}.panel3d-dots i:nth-child(3){background:#30a46c}
.panel3d-label{display:flex;justify-content:space-between;font:600 11px/1 'Space Grotesk',sans-serif;color:var(--muted);margin-bottom:6px}
.panel3d-bar{height:7px;border-radius:4px;background:rgba(233,238,251,.08);overflow:hidden}
.panel3d-bar span{display:block;height:100%;width:72%;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--amber));
  transform-origin:0 50%;animation:panel3d-fill 9s cubic-bezier(.3,.7,.3,1) infinite}
.panel3d-rows{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.panel3d-rows i{display:block;height:6px;border-radius:3px;background:rgba(233,238,251,.08)}
.panel3d-rows i:nth-child(2){width:78%}.panel3d-rows i:nth-child(3){width:55%}
.panel3d-toast{position:absolute;left:12px;right:12px;bottom:10px;display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;
  font:700 11px/1.1 'Space Grotesk',sans-serif;color:var(--txt);background:rgba(20,30,64,.95);border:1px solid rgba(48,164,108,.5);
  box-shadow:0 10px 22px -8px rgba(0,0,0,.7);opacity:0;animation:panel3d-toast 9s ease-out infinite}
.panel3d-toast b{color:#8ff0b8}
.panel3d-toast.t2{border-color:rgba(110,168,255,.5);animation-delay:4.5s}
.panel3d-toast.t2 b{color:var(--blue-l)}
@keyframes panel3d-tilt{0%,100%{transform:rotateX(14deg) rotateY(-10deg)}50%{transform:rotateX(10deg) rotateY(8deg)}}
@keyframes panel3d-fill{0%{transform:scaleX(.08)}45%,90%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
@keyframes panel3d-toast{0%,8%{opacity:0;transform:translateY(14px) scale(.96)}14%,40%{opacity:1;transform:none}48%,100%{opacity:0;transform:translateY(-6px)}}

/* ---------- I: SEO i języki — wynik wyszukiwania wskakuje na 1. miejsce ---------- */
.seo3d{perspective:700px}
.seo3d-serp{position:relative;height:132px;border-radius:12px;background:rgba(9,14,34,.9);border:1px solid rgba(110,168,255,.3);
  box-shadow:0 22px 40px -22px rgba(46,107,255,.6);transform:rotateX(12deg) rotateY(10deg);animation:seo3d-tilt 9s ease-in-out infinite}
.seo3d-row{position:absolute;left:10px;right:10px;height:34px;border-radius:8px;padding:6px 8px;background:rgba(233,238,251,.04);
  display:flex;flex-direction:column;gap:5px}
.seo3d-row i{display:block;height:5px;border-radius:3px;background:rgba(233,238,251,.14)}
.seo3d-row i:last-child{width:62%;background:rgba(233,238,251,.08)}
.seo3d-row.r1{top:8px;animation:seo3d-down1 8s ease-in-out infinite}
.seo3d-row.r2{top:48px;animation:seo3d-down2 8s ease-in-out infinite}
.seo3d-row.ours{top:88px;z-index:1;background:rgba(46,107,255,.16);border:1px solid rgba(110,168,255,.55);
  box-shadow:0 8px 22px -10px rgba(46,107,255,.8);animation:seo3d-up 8s ease-in-out infinite}
.seo3d-row.ours b{font:700 10.5px/1 'Space Grotesk',sans-serif;color:var(--blue-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seo3d-rank{position:absolute;right:6px;top:6px;font:700 10px/1 'Space Grotesk',sans-serif;color:#1a1204;background:var(--amber);
  padding:3px 5px;border-radius:5px;opacity:0;animation:seo3d-rank 8s ease-in-out infinite}
.seo3d-langs{display:flex;justify-content:center;gap:6px;margin-top:14px}
.seo3d-langs span{font:700 11px/1 'Space Grotesk',sans-serif;padding:5px 8px;border-radius:7px;color:var(--muted);
  border:1px solid var(--line);background:rgba(9,14,34,.7);animation:seo3d-lang 8s infinite;animation-delay:calc(var(--i) * 2s)}
@keyframes seo3d-tilt{0%,100%{transform:rotateX(12deg) rotateY(10deg)}50%{transform:rotateX(8deg) rotateY(-8deg)}}
@keyframes seo3d-up{0%,20%{top:88px;transform:scale(1)}40%{transform:scale(1.06)}45%,85%{top:8px;transform:scale(1)}100%{top:88px}}
@keyframes seo3d-down1{0%,20%{top:8px}45%,85%{top:48px}100%{top:8px}}
@keyframes seo3d-down2{0%,20%{top:48px}45%,85%{top:88px}100%{top:48px}}
@keyframes seo3d-rank{0%,42%{opacity:0;transform:scale(.5)}50%,85%{opacity:1;transform:scale(1)}92%,100%{opacity:0}}
@keyframes seo3d-lang{
  0%,22%{color:#fff;border-color:rgba(110,168,255,.7);background:rgba(46,107,255,.28);transform:translateY(-3px)}
  26%,100%{color:var(--muted);border-color:var(--line);background:rgba(9,14,34,.7);transform:none}
}

/* ---------- Bez ruchu: nieruchome, czytelne kadry ---------- */
@media (prefers-reduced-motion: reduce){
  .mail3d-stage,.mail3d-env,.mail3d-floor,.dom-cube-in,.dom-packet,.dom-node b,.dom-status,.sec-dome,.sec-shield,.sec-shine,
  .sec-keyhole,.sec-streak,.sec-ripple,.sec-count i,.panel3d-win,.panel3d-bar span,.seo3d-serp,.seo3d-langs span{animation:none}
  .mail3d-stage{transform:rotateX(-18deg) rotateY(-10deg)}
  .mail3d-chip{animation:none;transform:rotateY(calc(var(--i) * 90deg + 45deg)) translateZ(118px) rotateY(calc(var(--i) * -90deg - 45deg))}
  .mail3d-flap{animation:none;transform:rotateX(180deg);z-index:1}
  .mail3d-letter{animation:none;transform:translateY(-56px)}
  .mail3d-seal,.mail3d-ping{animation:none;opacity:0}
  .dom-cube-in{transform:translateZ(-1.3em)}
  .sec-shield{transform:rotateY(-22deg) rotateX(6deg)}
  .shop-card,.shop-img::after,.shop-btn,.shop-cart,.shop-count span,.shop-fly,.shop-pick,.shop-slot span,.shop-ok,.tailor-tape,.tailor-mark,.calc-card::before,.resp-device,.resp-cards i,.resp-load,.resp-label-list{animation:none}
  .sec-list li{animation:none;opacity:1}.sec-check path{animation:none;stroke-dashoffset:0}
  .panel3d-toast{animation:none}.panel3d-toast.t1{opacity:1;transform:none}
  .seo3d-row.r1,.seo3d-row.r2,.seo3d-row.ours,.seo3d-rank{animation:none}
  .seo3d-row.ours{top:8px}.seo3d-row.r1{top:48px}.seo3d-row.r2{top:88px}.seo3d-rank{opacity:1}
  .seo3d-langs span:first-child{color:#fff;border-color:rgba(110,168,255,.7);background:rgba(46,107,255,.28)}
}
.sec-keyhole{filter:drop-shadow(0 0 3px #f5a524)}

/* 2026-09-26 (zgłoszenie właściciela): pierścień realizacji dało się przeciągać tylko za górną/dolną
   krawędź karty — iframe podglądu połykał pointerdown/pointermove (zdarzenia z iframe nie trafiają do
   strony), a <img> na kartach klientów uruchamiał natywne przeciąganie obrazka. Podgląd jest
   dekoracyjny: kliknięcie i tak obsługuje .showcase-stage w ring.js (onStageClick → closest(card)). */
.showcase-ring-card .shot iframe,
.showcase-ring-card .shot img,
.showcase-ring-card .shot .sk { pointer-events: none; }
.showcase-ring-card img { -webkit-user-drag: none; user-select: none; }
.showcase-ring.is-ring-ready { user-select: none; -webkit-user-select: none; }