/* Pszczółka Dobrzyca — style wspólne (strona główna i podstrony). Źródło: prototyp v0.20. */
:root{
  color-scheme: light;
  --paper:#f3efe6; --paper-2:#e9e3d6; --white:#fffdf8;
  --ink:#16171b; --ink-2:#4b4d56; --line:#d9d1c0;
  --navy:#0f2a5f; --navy-2:#1a3d82;
  --honey:#f5b300; --honey-2:#ffd04a;
  --ok:#1f8a4c; --closed:#c2412d;
  --r:18px;
  --hexclip: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --ease: cubic-bezier(.2,.8,.2,1);
  --sans:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
h1,h2,h3{margin:0;font-stretch:118%;font-weight:850;line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(1.75rem,3.6vw,3.1rem)}
h3{font-size:1.25rem;font-stretch:110%;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.kicker{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);margin-bottom:.9rem}
.sub{color:var(--ink-2);font-size:1.08rem;max-width:52ch;margin-top:1.1rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:12px;z-index:200;background:var(--honey);color:var(--ink);padding:.7rem 1rem;border-radius:10px;font-weight:700}
.skip:focus{left:16px}

/* Przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.75rem 1.3rem;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--white);font:inherit;font-weight:750;font-size:1rem;text-decoration:none;cursor:pointer;transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn.honey{background:var(--honey);border-color:var(--honey);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.light{background:transparent;border-color:rgba(255,255,255,.5);color:var(--white)}
.btn.sm{min-height:44px;padding:.55rem 1rem;font-size:.95rem}
.btn svg{width:18px;height:18px;flex:none}
.cta{display:flex;flex-wrap:wrap;gap:.75rem}

/* Nagłówek */
.top{position:sticky;top:0;z-index:60;background:rgba(243,239,230,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.2rem;min-height:80px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;margin-right:auto;min-width:0}
.brand img{height:58px;width:auto}
.brand .txt{font-weight:850;font-stretch:115%;font-size:1.15rem}
.brand .loc{font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;border-left:3px solid var(--honey);padding-left:.6rem;white-space:nowrap}
.nav{display:flex;gap:1.35rem}
.nav a{text-decoration:none;font-weight:650;font-size:.95rem;padding:.4rem 0}
.nav a:hover{text-decoration:underline;text-decoration-color:var(--honey);text-decoration-thickness:3px;text-underline-offset:6px}
.status{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .9rem .4rem .55rem;border-radius:999px;background:var(--white);box-shadow:0 1px 0 rgba(22,23,27,.06),0 6px 18px -10px rgba(22,23,27,.35);white-space:nowrap;text-decoration:none;line-height:1.1;transition:transform .2s}
.status:hover{transform:translateY(-1px)}
.status .st-text{display:flex;flex-direction:column;font-size:.74rem;color:var(--ink-2)}
.status .st-text b{font-size:.86rem;font-weight:800;color:var(--ink)}
.dot{position:relative;width:26px;height:26px;border-radius:50%;background:rgba(194,65,45,.12);flex:none}
.dot::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--closed)}
.is-open .dot{background:rgba(31,138,76,.14)}
.is-open .dot::after{background:var(--ok);animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,138,76,.5)}100%{box-shadow:0 0 0 9px rgba(31,138,76,0)}}
.top .call{min-height:44px;padding:.55rem 1rem}
.menu-btn{display:none;min-height:44px;padding:.55rem .9rem}
@media (max-width:1180px){.top .status{display:none}}
@media (max-width:980px){
  .nav{display:none;position:absolute;top:80px;left:0;right:0;flex-direction:column;gap:.2rem;background:var(--paper);padding:.8rem 16px 1.4rem;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{font-size:1.1rem;padding:.6rem 0}
  .menu-btn{display:inline-flex}
}
@media (max-width:640px){.top .call .lbl{display:none}.brand .loc{display:none}}

/* Hero */
.hero{position:relative;overflow:hidden;min-height:clamp(600px,calc(100svh - 72px),880px);display:flex;align-items:center;padding:clamp(2rem,5vw,4rem) 0}
.hero .wrap{position:relative;z-index:3;pointer-events:none}
.hero-txt{max-width:min(600px,46vw);pointer-events:auto}
@media (max-width:900px){.hero-txt{max-width:600px}}
.hero h1{font-size:clamp(2.6rem,5.4vw,5.2rem)}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 64%,var(--honey) 64%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:38ch;margin:1.4rem 0 2rem}
.facts{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:2rem 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.8rem;font-weight:600}
.facts li{display:flex;align-items:center;gap:.5rem}
.facts li::before{content:"";width:11px;height:12px;background:var(--honey);clip-path:var(--hexclip)}
.hint{font-family:var(--mono);font-size:.76rem;color:var(--ink-2);margin-top:1.6rem}

/* Plaster w tle hero */
.hero-comb{position:absolute;inset:0;z-index:1;perspective:1500px;touch-action:pan-y}
.hc{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,10deg)) rotateY(var(--ry,-8deg));transition:transform .7s var(--ease)}
.hc-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,rgba(243,239,230,.94) 26%,rgba(243,239,230,.55) 44%,rgba(243,239,230,0) 60%),linear-gradient(0deg,var(--paper) 0%,rgba(243,239,230,0) 14%)}
.cell{position:absolute;left:0;top:0;display:block;width:var(--w);height:var(--h);padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:none;transform-style:preserve-3d;opacity:var(--o,1);animation:rise .9s var(--ease) backwards;animation-delay:calc(var(--i) * 38ms)}
.cell>.in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s var(--ease)}
div.cell{cursor:default;pointer-events:none}
button.cell,a.cell{cursor:pointer;z-index:2}
.cell .side,.cell .face{position:absolute;inset:0;clip-path:var(--hexclip)}
.cell .side{background:rgba(22,23,27,.28);transform:translateZ(-16px) translateY(7px)}
.cell .face{display:grid;place-items:center;padding:12%}
button.cell:hover>.in,a.cell:hover>.in,.cell:focus-visible>.in,.cell.pulse>.in{transform:translateZ(44px) scale(1.08)}
.cell:focus-visible{outline:none}
.cell:focus-visible .side{background:var(--navy);transform:translateZ(-4px) scale(1.14)}
@keyframes rise{from{opacity:0;transform:translateZ(-220px) rotateX(40deg)}}
.chip{background:var(--white);color:var(--ink);font-weight:800;font-size:clamp(.6rem,.92vw,.86rem);white-space:nowrap;padding:.32em .6em;border-radius:7px;line-height:1.1;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.chip small{display:block;font-family:var(--mono);font-weight:500;font-size:.72em;color:var(--ink-2)}
.chip.dark{background:var(--ink);color:var(--white)}
.chip.dark small{color:#c9cbd2}
.chip .dot{display:inline-block;width:.6em;height:.6em;margin-right:.3em;vertical-align:.05em}
.logoface{text-align:center;font-weight:900;font-stretch:120%;line-height:1;font-size:clamp(.62rem,1.05vw,.98rem)}
.logoface small{display:block;font-family:var(--mono);font-weight:600;font-size:.7em;margin-top:.3em;text-transform:uppercase}
@media (max-width:900px){
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:1.6rem 0 0}
  .hero-comb{position:relative;inset:auto;order:2;height:min(440px,112vw);margin-top:1.2rem;overflow:hidden}
  .hc-fade{background:linear-gradient(180deg,var(--paper) 0%,rgba(243,239,230,0) 7%,rgba(243,239,230,0) 90%,var(--paper) 100%)}
  .hint{display:none}
}
@media (max-width:640px){.chip small{display:none}}
@media (prefers-reduced-motion:reduce){.cell{animation:none}}

/* Tekstury CSS (plaster zapasowy) */
.t-brick{background-color:#a94e2c;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Crect width='40' height='20' fill='%23a94e2c'/%3E%3Cpath d='M0 .5h40M0 10h40M20 0v10M10 10v10M30 10v10' stroke='%23e6d8c2' stroke-width='1.6'/%3E%3C/svg%3E");background-size:34px 17px}
.t-paint{background:linear-gradient(90deg,#e4573d 0 20%,#f5b300 20% 40%,#2f6fbf 40% 60%,#3fae8f 60% 80%,#efe9df 80%)}
.t-garden{background-color:#3d7a37;background-image:repeating-linear-gradient(100deg,rgba(255,255,255,.09) 0 2px,transparent 2px 7px)}
.t-steel{background:linear-gradient(135deg,#7e8995,#dde2e7 42%,#76808b 62%,#c3cad1)}
.t-wood{background-color:#c88c50;background-image:repeating-linear-gradient(88deg,rgba(92,50,18,.28) 0 2px,transparent 2px 9px)}
.t-copper{background:linear-gradient(160deg,#a65a31,#e8a676 45%,#93492a)}
.t-electric{background:repeating-linear-gradient(45deg,#16171b 0 11px,#f5b300 11px 22px)}
.t-chem{background:#e9edf1}
.t-coal{background-color:#1f1f22;background-image:radial-gradient(circle,#3c3c41 0 3px,transparent 4px);background-size:14px 14px}
.t-honey{background:linear-gradient(160deg,var(--honey-2),var(--honey))}
.t-paper{background:#ece6da}
.t-cream{background:linear-gradient(160deg,#f6ecd4,#e9dcbd)}
.t-concrete{background:#cfc7b8}
.t-blueprint{background-color:#1a3d82;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:12px 12px}
.t-navy{background:linear-gradient(160deg,var(--navy-2),var(--navy))}
.t-ink{background:var(--ink)}
.t-promo{background:repeating-linear-gradient(-45deg,var(--honey) 0 9px,#ffdd70 9px 18px)}

/* Pasek „dziś” */
.today{background:var(--white);border-block:1px solid var(--line)}
.today .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.today .it{padding:1.3rem 1.2rem;border-left:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.today .it:first-child{border-left:0;padding-left:0}
.today .kicker{margin-bottom:.3rem}
.today strong{font-size:1.15rem;font-stretch:108%}
.today a{text-decoration:none}
@media (max-width:800px){.today .wrap{grid-template-columns:1fr 1fr}.today .it:nth-child(3){border-left:0;padding-left:0}.today .it{border-top:1px solid var(--line)}.today .it:nth-child(-n+2){border-top:0}}

/* Sekcje */
.sec{padding:clamp(3rem,6.5vw,5.5rem) 0}
@media (max-height:820px) and (min-width:901px){.sec{padding:clamp(2.8rem,5vw,4.2rem) 0}.sec-head{margin-bottom:1.8rem}}
.sec-head{margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap}
.sec-head.split .sub{margin-top:0;max-width:40ch}

/* Usługi — kafelki z filmami{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-areas:"a b b" "a c d";gap:18px 16px}
@keyframes road{to{background-position:50% 150px,0 0,0 0}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes cut{to{top:100%}}
@keyframes line{0%{transform:scaleX(0)}35%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.val{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.78rem;color:#c8d2e8}
.num{width:4.4em;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:8px;color:var(--white);font:inherit;font-family:var(--sans);font-weight:800;font-size:.95rem;padding:.28rem .4rem;text-align:right;min-height:34px}
.num:focus{outline:2px solid var(--honey);outline-offset:1px}
.seg{border:0;padding:0;margin:0;min-width:0}
.seg legend{padding:0;margin-bottom:.5rem}
.seg .opts{display:flex;flex-wrap:wrap;gap:.35rem}
.seg label{position:relative;font-weight:700}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg .o{display:inline-flex;align-items:center;gap:.4rem;min-height:38px;padding:.35rem .8rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);font-size:.85rem;cursor:pointer;color:var(--white)}
.seg .o i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.7)}
.seg input:checked + .o{background:var(--honey);border-color:var(--honey);color:var(--ink)}
.seg input:checked + .o i{border-color:var(--ink)}
.seg input:focus-visible + .o{outline:2px solid var(--white);outline-offset:2px}
@keyframes flash{from{background:#ffe18a}}


/* Opał */
.opal{background-color:var(--honey);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23000' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E");margin-top:clamp(4rem,8vw,6rem)}
.opal .wrap{display:grid;grid-template-columns:1.1fr 1fr auto;gap:1.5rem 2.5rem;align-items:center;padding:clamp(2.5rem,5vw,3.8rem) 0}
.opal .kicker{color:var(--ink)}
.opal p{font-size:1.08rem;max-width:44ch}
@media (max-width:900px){.opal .wrap{grid-template-columns:1fr}}

/* Promocje — interaktywny panel */
.deal{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:stretch}
.deal-stage{position:relative;background:var(--white);border:1px solid var(--line);border-radius:28px;padding:clamp(1.4rem,3vw,2.4rem);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1rem,2.5vw,2rem);align-items:center;overflow:hidden;--mx:0;--my:0}
.deal-img{position:relative;aspect-ratio:1;display:grid;place-items:center;width:100%;max-width:360px;margin-inline:auto}
.deal-img::before{content:"";position:absolute;top:2%;bottom:2%;left:50%;width:auto;aspect-ratio:.866;translate:-50% 0;background:radial-gradient(circle at 38% 32%,#ffe7a3,var(--honey) 58%,#e39e00);clip-path:var(--hexclip);transform:translate(calc(var(--mx) * -8px),calc(var(--my) * -8px)) rotate(calc(var(--mx) * 3deg));transition:transform .4s var(--ease)}
.deal-img img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 26px 26px rgba(70,40,0,.32));transform:translate(calc(var(--mx) * 14px),calc(var(--my) * 10px)) rotate(calc(var(--mx) * -4deg));transition:transform .4s var(--ease)}
.deal-img img.broken{visibility:hidden}
.badge{position:absolute;top:2%;right:4%;width:clamp(72px,8vw,92px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--honey);display:grid;place-items:center;font-weight:900;font-stretch:115%;font-size:clamp(1.1rem,1.8vw,1.5rem);transform:rotate(-10deg);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.deal-info .cat{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin-bottom:.6rem}
.deal-info h3{font-size:clamp(1.3rem,1.9vw,1.75rem);text-wrap:balance}
.deal-price .now{white-space:nowrap}
.deal-desc{color:var(--ink-2);margin-top:.6rem}
.deal-price{display:flex;align-items:baseline;gap:.8rem;margin:1.2rem 0 .9rem;flex-wrap:wrap}
.deal-price .now{font-size:clamp(2rem,3.2vw,2.8rem);font-weight:900;font-stretch:115%;line-height:1;letter-spacing:-.02em}
.deal-price s{color:var(--ink-2);font-size:1.1rem}
.count{display:flex;gap:.45rem;align-items:stretch;margin-bottom:1.3rem}
.count .lbl{font-family:var(--mono);font-size:.7rem;color:var(--ink-2);align-self:center;margin-right:.3rem;max-width:9ch;line-height:1.2}
.count span.box{background:var(--paper);border-radius:10px;padding:.35rem .6rem;text-align:center;font-family:var(--mono);font-size:.68rem;color:var(--ink-2);min-width:54px}
.count b{display:block;font-family:var(--sans);font-size:1.35rem;color:var(--ink);font-weight:850;font-variant-numeric:tabular-nums}
.deal-info .tag{display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:600;background:var(--paper-2);padding:.2rem .5rem;border-radius:6px;margin-top:1rem}
.deal-stage.swap .deal-img img{animation:popin .6s var(--ease)}
.deal-stage.swap .deal-info>*{animation:fadeup .5s var(--ease) both}
.deal-stage.swap .deal-info>*:nth-child(2){animation-delay:.04s}.deal-stage.swap .deal-info>*:nth-child(4){animation-delay:.08s}
@keyframes popin{from{opacity:0;transform:translateY(30px) scale(.9) rotate(6deg)}}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}}
.deal-side{display:flex;flex-direction:column;gap:8px}
.deal-list{display:flex;flex-direction:column;gap:8px}
.deal-item{position:relative;overflow:hidden;display:grid;grid-template-columns:58px 1fr auto;gap:.9rem;align-items:center;padding:.6rem 1rem .6rem .7rem;border-radius:18px;background:var(--white);border:1.5px solid var(--line);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .2s,transform .2s}
.deal-item:hover{transform:translateX(-3px)}
.deal-item[aria-selected="true"]{border-color:var(--ink);box-shadow:0 10px 24px rgba(22,23,27,.08)}
.deal-item img{width:58px;height:58px;object-fit:contain;background:var(--paper);border-radius:12px;padding:4px}
.di-n{display:block;font-weight:750;line-height:1.2;font-size:.95rem}
.di-s{display:block;font-family:var(--mono);font-size:.7rem;color:var(--ink-2);margin-top:.15rem}
.di-p{font-weight:900;font-stretch:112%;white-space:nowrap}
.deal-item .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--honey);transform:scaleX(0);transform-origin:left}
.deal-item.run .bar{animation:fillbar 6.5s linear forwards}
.deal.paused .deal-item.run .bar{animation-play-state:paused}
@keyframes fillbar{to{transform:scaleX(1)}}
.gaz-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;border-radius:18px;background:var(--navy);color:var(--white);text-decoration:none;margin-top:auto}
.gaz-row b{display:block}
.gaz-row small{font-family:var(--mono);font-size:.72rem;color:#c8d2e8}
.gaz-row:not(.live){opacity:.75;cursor:default}
.gaz-row.live:hover{background:var(--navy-2)}
.deal-empty{grid-column:1/-1;padding:2.5rem 1rem;text-align:center;color:var(--ink-2);font-size:1.05rem}
.hspecial{margin-top:.4rem;padding:.6rem .7rem .3rem;border-radius:12px;background:#fff1c4}
.hspecial>b{font-size:.8rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#6b4a00}
.hspecial .hrow{padding:.35rem 0}
dialog.gaz-dlg{width:min(1000px,calc(100% - 24px));height:min(92vh,1100px);padding:0;border:0;border-radius:20px;overflow:hidden;background:var(--white)}
dialog.gaz-dlg[open]{display:flex;flex-direction:column}
dialog.gaz-dlg::backdrop{background:rgba(15,20,35,.55)}
.gaz-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem .8rem .7rem 1.2rem;border-bottom:1px solid var(--line)}
.gaz-acts{display:flex;align-items:center;gap:.5rem}
.gaz-acts .dlg-x{position:static;box-shadow:none;border:1px solid var(--line)}
dialog.gaz-dlg iframe{flex:1;width:100%;border:0;background:#525659}
.gaz-row .arrow{width:42px;height:42px;border-radius:50%;background:var(--honey);color:var(--ink);display:grid;place-items:center;font-weight:900;flex:none}
@media (max-width:1100px){.deal{grid-template-columns:1fr}}
@media (max-width:620px){.deal-stage{grid-template-columns:1fr}.deal-img{max-width:300px;margin:0 auto;width:100%}}
.deal-item img.broken{visibility:hidden}

/* Dla fachowców */
.pro{background:var(--white);border-block:1px solid var(--line);margin-top:clamp(4rem,8vw,6rem)}
.pro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.pro-list{list-style:none;margin:0;padding:0}
@property --fill{syntax:"<percentage>";inherits:false;initial-value:40%}
.pro-list li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:1.1rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.pro-list li:first-child{border-top:1px solid var(--line)}
.pro-list li::before{content:"";width:42px;height:48px;clip-path:var(--hexclip);background:linear-gradient(160deg,#f8cd55,#e29d12)}
.pro-list li::after{content:"";position:absolute;left:7px;top:calc(1.2rem + 8px);width:28px;height:32px;clip-path:var(--hexclip);--fill:38%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85) 0 7%,transparent 8%),linear-gradient(to top,#d98300 0,#f0a713 var(--fill),#fbe8b8 var(--fill));transition:--fill .8s var(--ease)}
.pro-list li:nth-child(2)::after{--fill:58%}.pro-list li:nth-child(3)::after{--fill:26%}.pro-list li:nth-child(4)::after{--fill:70%}
.pro-list li:hover::after{--fill:96%}
.pro-list strong{display:block;font-size:1.1rem}
.pro-list span{color:var(--ink-2)}
.pro .cta{margin-top:2rem}
@media (max-width:900px){.pro-grid{grid-template-columns:1fr}}

/* Kontakt i dojazd — jedna sekcja */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:stretch}
.visit-card,.ask-form{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:clamp(1.3rem,2.6vw,1.9rem)}
.visit-card{display:flex;flex-direction:column;gap:1.2rem}
.vc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.addr{font-size:1.45rem;font-weight:850;font-stretch:112%;line-height:1.15;display:block}
.hours{margin:0;display:grid;gap:0}
.hrow{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .7rem;border-radius:10px}
.hrow dt{font-weight:550}
.hrow dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.hrow.today{background:var(--paper)}
.hrow.today dt::after{content:" · dziś";font-family:var(--mono);font-size:.72rem;color:var(--navy)}
.map-wrap{position:relative;flex:1;min-height:230px;display:flex}
.map-wrap .map{flex:1}
.bee-trail{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.bee-trail #bee-path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-dasharray:1 8;stroke-linecap:round;opacity:.6}
.bee{position:absolute;left:0;top:0;width:58px;height:73px;z-index:3;opacity:0;cursor:pointer;filter:drop-shadow(0 8px 10px rgba(22,23,27,.28));will-change:transform}
.bee img{display:block;width:58px;height:auto;-webkit-user-drag:none;user-select:none}
.bee.flying .bee-in{animation:wob .32s ease-in-out infinite alternate}
@keyframes wob{from{transform:rotate(-5deg) translateY(-2px)}to{transform:rotate(5deg) translateY(2px)}}
.bee.landed .bee-in{animation:bob 2.6s ease-in-out infinite}
.bee.spin .bee-in{animation:spinbee .7s var(--ease)}
@keyframes bob{50%{transform:translateY(-7px) rotate(-5deg)}}
@keyframes spinbee{to{transform:rotate(360deg)}}
.bee-bubble{position:absolute;right:76px;top:30px;z-index:3;background:var(--ink);color:var(--white);font-size:.82rem;font-weight:750;padding:.45rem .8rem;border-radius:12px;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(6px) scale(.92);transform-origin:right center;transition:opacity .35s,transform .45s var(--ease)}
.bee-bubble::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.bee-bubble.show{opacity:1;transform:none}
.map{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2);min-height:230px}
.map iframe{width:100%;height:100%;min-height:230px;border:0;display:block;filter:grayscale(.35) contrast(1.05)}
.ask-form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-content:start}
.ask-form .head{grid-column:1/-1;margin-bottom:.3rem}
.ask-form .head h3{font-size:1.6rem}
.ask-form .head p{color:var(--ink-2);margin-top:.4rem;font-size:.98rem}
.ask-form .f{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.ask-form .full{grid-column:1/-1}
.ask-form label{font-weight:650;font-size:.9rem}
.ask-form input:not([type=checkbox]):not([type=file]),.ask-form select,.ask-form textarea{font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:.7rem .85rem;min-height:48px;width:100%}
.ask-form textarea{resize:vertical;min-height:92px}
.ask-form input:focus,.ask-form select:focus,.ask-form textarea:focus{outline:3px solid var(--honey);outline-offset:1px;border-color:var(--ink)}
.drop{display:flex;align-items:center;gap:.8rem;min-height:48px;padding:.5rem .8rem;border:1.5px dashed #c4b99f;border-radius:12px;background:var(--paper);cursor:pointer;font-weight:500!important}
.drop:focus-within{outline:3px solid var(--honey);outline-offset:1px}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop .ic{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;font-weight:800;flex:none}
.drop b{display:block;font-size:.92rem}
.drop small{display:block;font-family:var(--mono);font-size:.7rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop .t{min-width:0;flex:1}
.drop img{width:40px;height:40px;object-fit:cover;border-radius:8px}
.ask-form .chk{flex-direction:row;align-items:flex-start;gap:.7rem}
.ask-form .chk input{width:22px;height:22px;margin-top:.1rem;accent-color:var(--navy);flex:none}
.ask-form .chk label{font-weight:500;font-size:.85rem;color:var(--ink-2)}
.err{color:var(--closed);font-weight:650;font-size:.9rem;min-height:1.2em}
.ok{background:#e5f3ea;color:#145c33;border-radius:12px;padding:1rem;font-weight:650}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){.ask-form{grid-template-columns:1fr}}

/* Stopka */
.foot{position:relative;overflow:hidden;color:#d3dbee;padding:0 0 2rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23f5b300' stroke-opacity='.09' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/56px 97px,radial-gradient(120% 120% at 85% 0%,#1d4592 0%,var(--navy) 50%,#0a1f4a 100%)}
.foot::before{content:"";display:block;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 0h28v6l-7 8H7L0 6z' fill='%23f5b300'/%3E%3C/svg%3E") repeat-x 0 0/16px 8px}
.foot-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:clamp(1.8rem,3.5vw,2.4rem) 0;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:2rem}
.foot-cta h2{color:var(--white);font-size:clamp(1.3rem,2.2vw,1.75rem);max-width:none}
.foot-cta h2 span{color:var(--honey)}
.foot-cta .cta .btn.ghost{color:var(--white);border-color:rgba(255,255,255,.5)}
.foot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.foot-brand{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.foot-logo{height:52px;width:auto}
.foot-logo.hide{display:none}
.foot-hex{width:52px;height:60px;flex:none;background:var(--honey);clip-path:var(--hexclip);display:grid;place-items:center;font-weight:900;font-stretch:120%;color:var(--navy);font-size:1.3rem}
.foot strong{color:var(--white);font-stretch:112%;font-size:1.2rem}
.foot p,.foot li{font-size:.95rem}
.foot-lead{margin-top:.6rem;max-width:40ch}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot a{color:#fff;text-decoration-color:var(--honey);text-underline-offset:4px}
.foot a:hover{color:var(--honey)}
.foot .kicker{color:var(--honey)}
.foot .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.2rem;font-family:var(--mono);font-size:.75rem;color:#9fb0d3}
.foot .bottom a{color:#d3dbee}
.foot .btn.honey{color:var(--ink)}
.foot .btn.honey:hover{color:var(--ink)}
@media (max-width:800px){.foot .grid{grid-template-columns:1fr}}

/* Panel działu (szuflada) */
dialog.drawer{position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0;width:min(520px,100%);height:100%;max-height:100%;max-width:100%;background:var(--white);color:var(--ink);border-radius:28px 0 0 28px;box-shadow:-30px 0 80px rgba(15,20,35,.25);overflow:hidden}
dialog.drawer[open]{display:flex;flex-direction:column;animation:drIn .5s var(--ease)}
dialog.drawer.closing{animation:drOut .28s ease forwards}
dialog.drawer::backdrop{background:rgba(15,20,35,.38);backdrop-filter:blur(4px);animation:fadeIn .35s ease}
@keyframes drIn{from{transform:translateX(105%)}}
@keyframes drOut{to{transform:translateX(105%)}}
@keyframes fadeIn{from{opacity:0}}
.dr-head{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1.5rem 1.5rem 1.2rem;border-bottom:1px solid var(--line)}
.dr-hexwrap{filter:drop-shadow(0 10px 14px rgba(22,23,27,.22))}
.dr-hex{display:block;width:62px;height:71px;clip-path:var(--hexclip)}
dialog.drawer[open] .dr-hex{animation:hexIn .7s var(--ease)}
@keyframes hexIn{from{transform:rotate(-30deg) scale(.6);opacity:0}}
.dr-meta .kicker{margin-bottom:.35rem}
.dr-meta h3{font-size:clamp(1.35rem,3vw,1.7rem)}
.dr-nav{display:flex;gap:.35rem;align-self:start}
.dr-nav button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--white);color:var(--ink);font:inherit;font-size:1.05rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.dr-nav button:hover{background:var(--paper);border-color:var(--ink)}
.dr-nav .dr-x{background:var(--ink);color:var(--white);border-color:var(--ink);font-size:1.3rem}
.dr-body{flex:1;overflow-y:auto;padding:1.4rem 1.5rem 1.5rem}
.dr-body.swap>*{animation:fadeup .4s var(--ease) both}
.dr-desc{color:var(--ink-2);font-size:1.05rem}
.dr-service{display:flex;align-items:center;gap:.7rem;margin-top:1rem;padding:.75rem .9rem;border-radius:14px;background:var(--paper);font-weight:650;font-size:.95rem}
.dr-service::before{content:"";width:18px;height:21px;flex:none;background:var(--honey);clip-path:var(--hexclip)}
.dr-h{margin:1.6rem 0 .7rem;font-size:.95rem;font-weight:800;font-stretch:105%}
.dr-h span{font-family:var(--mono);font-weight:500;font-size:.72rem;color:var(--ink-2);margin-left:.4rem}
.dr-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.dr-items button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:.6rem;min-height:52px;padding:.65rem .9rem;border-radius:14px;border:1.5px solid var(--line);background:var(--white);color:var(--ink);font:inherit;font-size:.93rem;font-weight:650;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.dr-items button:hover{border-color:var(--ink);transform:translateY(-1px)}
.dr-items button i{width:22px;height:22px;flex:none;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:.75rem;color:transparent;transition:.2s}
.dr-items button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.dr-items button[aria-pressed="true"] i{background:var(--honey);border-color:var(--honey);color:var(--ink)}
.dr-maj{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.dr-maj li{background:var(--paper);border-radius:14px;padding:.6rem .55rem .7rem;text-align:center}
.dr-maj img{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:.4rem}
.dr-maj img.broken{visibility:hidden}
.dr-maj span{font-size:.78rem;font-weight:650;line-height:1.25;display:block}
.dr-foot{display:flex;gap:.6rem;flex-wrap:wrap;padding:1rem 1.5rem 1.4rem;border-top:1px solid var(--line);background:var(--white)}
.dr-foot .btn.honey{flex:1}
@keyframes shIn{from{transform:translateY(105%)}}
@keyframes shOut{to{transform:translateY(105%)}}
@media (max-width:640px){
  dialog.drawer{inset:auto 0 0 0;width:100%;height:auto;max-height:88dvh;border-radius:24px 24px 0 0}
  dialog.drawer[open]{animation-name:shIn}
  dialog.drawer.closing{animation-name:shOut}
  .dr-head{grid-template-columns:auto 1fr;padding:1.2rem 1.1rem 1rem}
  .dr-nav{grid-column:1/-1;justify-content:flex-end;order:-1;margin-bottom:-.4rem}
  .dr-body{padding:1.1rem}
  .dr-items{grid-template-columns:1fr}
  .dr-foot{padding:.9rem 1.1rem 1.1rem}
}

/* Telefon — dopracowanie */
@media (max-width:560px){
  .hero .cta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .hero .cta .btn{padding:.75rem .6rem;font-size:.95rem}
  .facts{gap:.5rem 1.1rem;font-size:.74rem}
  .tile.big .tile-media{aspect-ratio:16/9!important}
  .deal-stage{padding:1.1rem;border-radius:22px;gap:1rem}
  .deal-img{max-width:220px}
  .badge{width:64px;font-size:1.05rem}
  .deal-item{grid-template-columns:48px 1fr auto;padding:.5rem .8rem .5rem .5rem}
  .deal-item img{width:48px;height:48px}
  .count span.box{min-width:46px}
  .pl-studio{border-radius:22px;padding:8px}
  .receipt{padding:1.4rem 1rem 1.3rem}
  .rc-cta{display:grid;grid-template-columns:1fr;gap:.6rem}
  .visit-card,.ask-form{border-radius:20px}
  .map-wrap,.map,.map iframe{min-height:200px}
  .foot-cta .cta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .foot-cta .cta .btn{padding:.6rem .5rem}
  .top .wrap{min-height:66px;gap:.6rem}
  .brand img{height:44px}
  .nav{top:66px}
}
@media (max-width:380px){.hero .cta{grid-template-columns:1fr}.foot-cta .cta{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hc{transform:rotateX(8deg) rotateY(-6deg)}
}
/* Realizacje — karty (strona główna i podstrona) */
.rz-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.rz-card{min-width:0}
.rz-link{position:relative;display:flex;flex-direction:column;height:100%;background:var(--white);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .2s}
.rz-link:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(15,42,95,.45);border-color:#cbbfa6}
.rz-link:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.rz-ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.rz-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.rz-link:hover .rz-ph img{transform:scale(1.05)}
.rz-noph{position:absolute;inset:0;display:grid;place-items:center}
.rz-noph::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,42,95,.25),rgba(15,42,95,.82))}
.rz-noph-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:.7rem;color:#fff;text-align:center;padding:1rem}
.rz-noph-hex{width:54px;height:62px;clip-path:var(--hexclip);background:var(--honey);display:block;position:relative}
.rz-noph-hex::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:18px;translate:-50% -50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%230f2a5f' stroke-width='2'%3E%3Cpath d='M2 5h4l2-3h8l2 3h4v11H2z'/%3E%3Ccircle cx='12' cy='10' r='4'/%3E%3C/svg%3E") center/contain no-repeat}
.rz-noph-t{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;max-width:26ch}
.rz-badge{position:absolute;left:14px;top:14px;z-index:2;background:var(--honey);color:var(--ink);font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .7rem .35rem 1.55rem;border-radius:999px}
.rz-badge::before{content:"";position:absolute;left:.6rem;top:50%;width:9px;height:10px;translate:0 -50%;background:var(--navy);clip-path:var(--hexclip)}
.rz-count{position:absolute;right:12px;bottom:12px;z-index:2;background:rgba(15,20,35,.72);color:#fff;font-family:var(--mono);font-size:.7rem;padding:.25rem .55rem;border-radius:8px}
.rz-body{display:flex;flex-direction:column;gap:.45rem;padding:1.1rem 1.2rem 1.3rem;flex:1}
.rz-meta{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.rz-title{font-size:1.28rem}
.rz-firm{font-size:.95rem;color:var(--ink-2)}
.rz-firm-l{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#5c5e66;margin-right:.2rem}
.rz-mat{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.6rem}
.rz-chip{font-size:.8rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.25rem .65rem;color:var(--ink-2)}
.rz-chip b{color:var(--ink);font-weight:800}
.rz-chip.more{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.rz-demo{align-self:flex-start;margin-top:.5rem;font-family:var(--mono);font-size:.66rem;font-weight:600;background:var(--paper-2);color:var(--ink-2);padding:.2rem .5rem;border-radius:6px}
.rz-empty{grid-column:1/-1;padding:2.5rem 1rem;text-align:center;border:1.5px dashed var(--line);border-radius:22px;color:var(--ink-2)}
@media (max-width:980px){.rz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.rz-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rz-link,.rz-ph img{transition:none}}
/* Realizacje — sekcja na stronie głównej */
.rz-teaser .rz-more{margin-top:clamp(1.6rem,3vw,2.2rem)}
@media (max-width:620px){.rz-teaser .rz-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;scrollbar-width:thin}.rz-teaser .rz-card{scroll-snap-align:start}.rz-teaser .rz-grid{align-items:start}.rz-teaser .rz-mat{margin-top:0}}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--honey);text-decoration-thickness:3px;text-underline-offset:6px}

/* Pole-pułapka na boty w formularzach */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Zwykłe strony (np. polityka prywatności) i 404 */
.page-text .wrap{max-width:820px}
.page-text h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:1.2rem}
.page-text .entry p,.page-text .entry li{font-size:1.05rem;max-width:68ch}
.page-text .entry h2{font-size:1.5rem;margin:2rem 0 .6rem}
.page-404 .lead{margin:1rem 0 1.6rem}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ---------- Usługi: kafelki z filmami (v1.0.4) ---------- */
.bento{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c";gap:22px 18px}
.tile{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.tile.wide{grid-area:a}.tile:nth-child(2){grid-area:b}.tile:nth-child(3){grid-area:c}
.tile-media{position:relative;border-radius:24px;overflow:hidden;background:var(--ink);box-shadow:0 18px 40px -24px rgba(22,23,27,.5);aspect-ratio:16/9}
.tile.wide .tile-media{aspect-ratio:auto;height:clamp(300px,42vw,560px)}
.tile-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover .tile-media video{transform:scale(1.04)}
.tile-cap{display:grid;grid-template-columns:auto 1fr;column-gap:.75rem;align-items:start;padding:0 .2rem}
.tile-cap > :not(.tile-num){grid-column:2}
.tile-num{grid-row:1 / span 3;display:grid;place-items:center;width:34px;height:39px;background:var(--honey);color:var(--ink);clip-path:var(--hexclip);font-family:var(--mono);font-weight:600;font-size:.74rem}
.tile-cap h3{font-size:1.15rem;line-height:1.2}
.tile.wide .tile-cap h3{font-size:1.45rem}
.tile-cap p{color:var(--ink-2);margin:.25rem 0 .55rem;font-size:.93rem;line-height:1.45;max-width:46ch}
.tile-cap .btn{justify-self:start}
.tile-link{justify-self:start;color:var(--navy);font-weight:750;font-size:.92rem;text-decoration:none}
.tile-link:hover,.tile-link:focus-visible{text-decoration:underline;text-underline-offset:4px}
.ph{position:absolute;inset:0;overflow:hidden}
.ph-road{background:linear-gradient(180deg,#4a3a22 0%,#2a2620 32%,#1c1d21 100%)}
.ph-road .lane{position:absolute;left:-40%;right:-40%;top:22%;bottom:-30%;transform:perspective(520px) rotateX(62deg);transform-origin:50% 0;background:linear-gradient(180deg,var(--honey) 0 55%,transparent 55%) 50% 0/2.2% 150px repeat-y,linear-gradient(90deg,transparent 18%,#d9d1c0 18% 18.6%,transparent 18.6% 81.4%,#d9d1c0 81.4% 82%,transparent 82%),linear-gradient(90deg,#17181c,#34353b 50%,#17181c);animation:road 1.1s linear infinite}
.ph-paint::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,#e4573d,#f5b300,#3fae8f,#2f6fbf,#efe9df,#e4573d);filter:blur(38px);animation:spin 16s linear infinite}
.ph-list{background-color:#173a7e;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:22px 22px;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:0 18% 8%}
.ph-list i{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.75);transform-origin:left;animation:line 4s var(--ease) infinite}
.ph-list i.w70{width:70%}.ph-list i:nth-child(2){width:78%}.ph-list i:nth-child(3){width:90%}.ph-list i:nth-child(4){width:62%}.ph-list i:nth-child(5){width:84%;background:var(--honey)}
@media (max-width:640px){.bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c"}.tile.wide .tile-media{height:auto;aspect-ratio:16/10}}
@media (prefers-reduced-motion:reduce){.ph *, .ph::before, .ph-list i{animation:none}.tile-media video{transition:none}.tile:hover .tile-media video{transform:none}}