/* Detailing A3 8V LX7R — production stylesheet
   Improved contrast, typography, hierarchy + animations. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Surfaces — deeper, more layering */
  --bg:#080b12; --bg2:#0f131e; --bg3:#161b29; --bg4:#1d2336; --bg5:#252c44;
  --border:#1e2536; --border2:#2c3449; --border3:#3e4865; --border4:#566182;
  /* Text — bumped contrast */
  --text:#eef2f8; --text2:#cbd3e1; --muted:#94a2bc; --faint:#6a7896; --dim:#475068;
  /* Accents */
  --blue:#6aa6ff; --blue2:#4a8df0; --blue3:#1d4ed8; --blue-glow:rgba(106,166,255,.45);
  --teal:#34d8c4; --green:#5be089; --yellow:#fbbf24; --red:#f87171; --purple:#b39bff; --orange:#fb923c;

  --r-sm:6px; --r:8px; --r-md:10px; --r-lg:12px; --r-xl:16px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 12px 40px rgba(0,0,0,.45);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.5,1.5,.6,1);
  --ease-spring-soft:cubic-bezier(.34,1.42,.5,1);
  --ease-spring-strong:cubic-bezier(.22,1.7,.36,1);
  --dur-fast:.15s; --dur:.25s; --dur-slow:.4s;
}
html,body{height:100%}
html{color-scheme:dark}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01','ss03';
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(106,166,255,.32);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--border3)}

/* — Ambient bg glow w/ slow drift — */
body::before{content:'';position:fixed;inset:0;background:
  radial-gradient(900px 600px at 80% -10%,rgba(94,160,255,.09),transparent 60%),
  radial-gradient(700px 500px at 0% 100%,rgba(167,139,250,.06),transparent 60%);
  pointer-events:none;z-index:0;animation:bgDrift 24s ease-in-out infinite alternate}
@keyframes bgDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-30px,20px,0)}}

/* — Focus visible — */
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;transition:outline-offset .15s}

/* — TOPBAR — */
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,13,20,.78);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--border);transition:box-shadow .2s}
.topbar.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.35)}
.topbar-inner{max-width:1120px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent;background:none;border:0;color:inherit;font-family:inherit;padding:6px 8px;margin:-6px -8px;border-radius:var(--r);transition:background var(--dur-fast)}
.brand:hover{background:var(--bg3)}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#1e293b 0%,#0f172a 60%,#0a0d14 100%);border:1px solid var(--border2);display:grid;place-items:center;color:var(--blue);font-weight:800;font-size:11.5px;font-family:'JetBrains Mono',monospace;letter-spacing:-.04em;flex-shrink:0;position:relative;overflow:hidden}
.brand-mark::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(106,166,255,.18) 50%,transparent 60%);opacity:0;transition:opacity .3s}
.brand:hover .brand-mark::after{opacity:1;animation:shimmer 1s ease-out}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.brand-text{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2;text-align:left}
.brand-text small{display:block;font-size:10.5px;color:var(--faint);font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.06em;margin-top:2px}

.topbar-nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none;position:relative}
.topbar-nav::-webkit-scrollbar{display:none}
.topbar-nav button{padding:9px 16px;border-radius:var(--r);border:none;background:transparent;color:var(--muted);font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:color var(--dur) var(--ease-out);font-family:inherit;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}
.topbar-nav button:hover{color:var(--text)}
.topbar-nav button.active{color:var(--text)}
.topbar-nav [data-goto="przewodnik"].active{--tab-c:#6aa6ff;--tab-glow:rgba(106,166,255,.45)}
.topbar-nav [data-goto="lista"].active{--tab-c:#5be089;--tab-glow:rgba(91,224,137,.45)}
.topbar-nav [data-goto="proporcje"].active{--tab-c:#34d8c4;--tab-glow:rgba(52,216,196,.45)}
.topbar-nav [data-goto="procedura"].active{--tab-c:#b39bff;--tab-glow:rgba(179,155,255,.45)}
/* sliding tab-pill removed: the active tab is marked by the .active box+underline
   in update.css; a second indicator here fought it (two boxes, two speeds) */

.progress-chip{flex-shrink:0;display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 100%);border:1px solid var(--border2);border-radius:999px;padding:7px 14px 7px 16px;font-size:12.5px;font-weight:600;color:var(--muted);font-family:'JetBrains Mono',monospace;transition:border-color .3s,box-shadow .3s,background .3s;position:relative}
.progress-chip:hover{border-color:var(--border3);box-shadow:0 6px 18px rgba(179,155,255,.18)}
.progress-chip strong{color:#fff;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;text-shadow:0 0 14px rgba(179,155,255,.35);transition:color .3s,text-shadow .3s}
.pbar{width:84px;height:6px;background:var(--bg);border-radius:99px;overflow:hidden;border:1px solid var(--border);position:relative}
.pbar-fill{height:100%;background:linear-gradient(90deg,#7c5ce0 0%,var(--purple) 55%,#d8c8ff 100%);border-radius:99px;transform:scaleX(0);transform-origin:left;transition:transform .65s var(--ease-spring-strong),background .35s;box-shadow:0 0 10px rgba(179,155,255,.55);position:relative}
.pbar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);animation:pbarShine 2.4s ease-in-out infinite;opacity:.6}

/* Celebration state when 100% complete */
.progress-chip.complete{border-color:rgba(91,224,137,.45);background:linear-gradient(135deg,rgba(91,224,137,.14) 0%,var(--bg2) 100%);box-shadow:0 6px 20px rgba(91,224,137,.22)}
.progress-chip.complete strong{color:#5be089;text-shadow:0 0 14px rgba(91,224,137,.55)}
.progress-chip.complete .pbar-fill{background:linear-gradient(90deg,#2ea855 0%,#5be089 50%,#a7f3c1 100%);box-shadow:0 0 12px rgba(91,224,137,.65)}
.progress-chip.complete::before{content:'';position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(91,224,137,.5);pointer-events:none;animation:chipCelebrate 1.6s ease-out 1}
@keyframes chipCelebrate{0%{transform:scale(1);opacity:1}70%{transform:scale(1.12);opacity:0}100%{transform:scale(1.12);opacity:0}}
@keyframes pbarShine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
[data-pbar-text]{font-variant-numeric:tabular-nums;min-width:34px;text-align:right;display:inline-block;position:relative}
[data-pbar-text].rolling{animation:digitRoll .45s var(--ease-spring-soft)}
@keyframes digitRoll{0%{transform:translateY(0);filter:brightness(1)}30%{transform:translateY(-2px);filter:brightness(1.6)}60%{transform:translateY(1px);filter:brightness(1.3)}100%{transform:translateY(0);filter:brightness(1)}}

/* — PAGE LAYOUT — */
.main-scroll{position:relative;z-index:1}
.page{display:none;max-width:1120px;margin:0 auto;padding:40px 28px 96px}
.page.active{display:block;animation:pgIn .35s var(--ease-out)}
.page.leaving{display:block;position:absolute;inset:0;animation:pgOut .22s var(--ease-out) forwards;pointer-events:none}
@keyframes pgIn{0%{opacity:0;transform:translate3d(0,12px,0)}100%{opacity:1;transform:none}}
@keyframes pgOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translate3d(0,-6px,0)}}

.page-header{margin-bottom:36px}
.page-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--page-c,var(--blue));font-family:'JetBrains Mono',monospace;margin-bottom:12px}
.page-eyebrow::before{content:'';width:22px;height:1px;background:var(--page-c,var(--blue));box-shadow:0 0 6px var(--page-glow,var(--blue-glow))}
.page-title{font-size:36px;font-weight:700;letter-spacing:-.028em;line-height:1.05;text-wrap:balance;margin-bottom:10px;color:#fff}
.page-title .accent{color:var(--page-c,var(--blue));font-family:'JetBrains Mono',monospace;font-weight:600;text-shadow:0 0 24px var(--page-glow,var(--blue-glow))}
.page-sub{font-size:15.5px;color:var(--text2);max-width:64ch;text-wrap:pretty;line-height:1.6}

/* — Reveal on scroll — staggered, spring-cascade — */
[data-reveal]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .5s var(--ease-out),transform .55s var(--ease-spring-soft)}
[data-reveal].in{opacity:1;transform:none}
/* table rows can't transform reliably as table-row — fade only */
tr[data-reveal]{transform:none;transition:opacity .5s var(--ease-out),background var(--dur-fast)}
tr[data-reveal] > td{transform:translate3d(0,10px,0);transition:transform .55s var(--ease-spring-soft),background var(--dur-fast)}
tr[data-reveal].in > td{transform:none}
/* internal stagger for grid children */
.info-grid > [data-reveal]:nth-child(1){transition-delay:0ms,0ms,0ms}
.info-grid > [data-reveal]:nth-child(2){transition-delay:80ms,80ms,80ms}
.info-grid > [data-reveal]:nth-child(3){transition-delay:160ms,160ms,160ms}
.quick-nav > .quick-nav-item{opacity:0;transform:translate3d(0,18px,0) scale(.97);transition:opacity .65s var(--ease-out),transform .75s var(--ease-spring-soft),border-color .2s,background .2s,box-shadow .25s}
.page.active .quick-nav > .quick-nav-item{opacity:1;transform:none}
.page.active .quick-nav > .quick-nav-item:nth-child(1){transition-delay:80ms}
.page.active .quick-nav > .quick-nav-item:nth-child(2){transition-delay:150ms}
.page.active .quick-nav > .quick-nav-item:nth-child(3){transition-delay:220ms}
.page.active .quick-nav > .quick-nav-item:hover{transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}

/* — HOME / PRZEWODNIK — */
.hero-card{position:relative;background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);border:1px solid var(--border);border-radius:var(--r-xl);padding:44px 36px;margin-bottom:28px;overflow:hidden;box-shadow:var(--shadow);transform-style:preserve-3d;perspective:1200px;transform:perspective(1200px) rotateX(var(--hero-rx,0deg)) rotateY(var(--hero-ry,0deg));transition:transform .35s var(--ease-out)}
.hero-card.tilting{transition:transform .08s linear}
.hero-card > *{transform:translateZ(0)}
.hero-card .hero-meta{transform:translateZ(20px)}
.hero-card .hero-title{transform:translateZ(32px)}
.hero-card .hero-sub{transform:translateZ(14px)}
.hero-card::after,.hero-card::before{transition:transform .35s var(--ease-out)}
.hero-card.tilting::before{transform:translate3d(calc(var(--hero-ry,0deg) * -0.6),calc(var(--hero-rx,0deg) * 0.6),0)}
.hero-card::before{content:'';position:absolute;top:-40%;right:-15%;width:420px;height:420px;background:radial-gradient(closest-side,rgba(94,160,255,.22),transparent);pointer-events:none;animation:heroFloat 14s ease-in-out infinite alternate}
.hero-card::after{content:'';position:absolute;bottom:-30%;left:-10%;width:300px;height:300px;background:radial-gradient(closest-side,rgba(167,139,250,.12),transparent);pointer-events:none;animation:heroFloat 18s ease-in-out infinite alternate-reverse}
@keyframes heroFloat{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-24px,18px,0)}}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;position:relative}
.meta-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(22,27,41,.6);backdrop-filter:blur(8px);border:1px solid var(--border2);border-radius:999px;padding:6px 12px;font-size:11.5px;font-family:'JetBrains Mono',monospace;color:var(--text);font-weight:500;letter-spacing:.02em;animation:fadeUp .5s var(--ease-out) backwards}
.meta-tag:nth-child(1){animation-delay:.05s}
.meta-tag:nth-child(2){animation-delay:.12s}
.meta-tag:nth-child(3){animation-delay:.19s}
.meta-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 6px var(--blue-glow)}
.meta-tag.gray::before{background:var(--muted);box-shadow:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-title{font-size:48px;font-weight:800;line-height:1;letter-spacing:-.038em;margin-bottom:14px;position:relative;text-wrap:balance;color:#fff}
.hero-title .accent{color:var(--blue);font-family:'JetBrains Mono',monospace;font-weight:700;text-shadow:0 0 24px rgba(106,166,255,.4)}
.hero-sub{font-size:16px;color:var(--text2);max-width:62ch;position:relative;line-height:1.6}

.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-bottom:36px}
.info-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;transition:border-color .35s var(--ease-out),transform .35s var(--ease-spring-soft),background .35s,box-shadow .35s;position:relative;overflow:hidden;isolation:isolate}
.info-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--card-c,var(--blue)),transparent);opacity:0;transition:opacity .3s;z-index:2}
/* shimmer sweep */
.info-card::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--card-c,var(--blue)) 14%,transparent) 50%,transparent 65%);transform:translateX(-110%);transition:transform .9s var(--ease-out);pointer-events:none;z-index:1;mix-blend-mode:screen}
.info-card:hover{border-color:color-mix(in srgb,var(--card-c,var(--blue)) 45%,var(--border2));transform:translateY(-4px);background:var(--bg3);box-shadow:0 14px 32px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--card-c,var(--blue)) 12%,transparent),0 0 28px color-mix(in srgb,var(--card-c,var(--blue)) 18%,transparent)}
.info-card:hover::before{opacity:1}
.info-card:hover::after{transform:translateX(110%)}
.info-card-title{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--card-c,var(--blue));margin-bottom:16px;font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:8px}
.info-card-title::before{content:'';width:6px;height:6px;background:var(--card-c,var(--blue));border-radius:50%;box-shadow:0 0 6px var(--card-glow,var(--blue-glow))}
.info-card ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.info-card li{font-size:14px;color:var(--text2);line-height:1.65;padding-left:20px;position:relative}
.info-card li::before{content:'';position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--border3);transition:width .25s,background .25s}
.info-card:hover li::before{width:14px;background:var(--card-c,var(--blue))}
.info-card li strong{color:#fff;font-weight:600}
.info-grid .info-card:nth-child(1){--card-c:var(--blue);--card-glow:var(--blue-glow)}
.info-grid .info-card:nth-child(2){--card-c:var(--teal);--card-glow:rgba(52,216,196,.4)}
.info-grid .info-card:nth-child(3){--card-c:var(--purple);--card-glow:rgba(179,155,255,.4)}

.quick-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.quick-nav-item{display:flex;flex-direction:column;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 22px 16px;text-align:left;cursor:pointer;font-family:inherit;color:inherit;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden;isolation:isolate}
.quick-nav-item > *{position:relative;z-index:2}
.quick-nav-item::before{content:'';position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--qn-c,#6aa6ff) 24%,transparent),color-mix(in srgb,var(--qn-c,#6aa6ff) 6%,transparent) 30%,transparent 55%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:1}
/* border highlight tracker */
.quick-nav-item::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),var(--qn-c,#6aa6ff),transparent 60%);-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,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none;z-index:3}
.quick-nav-item:hover{border-color:transparent;background:var(--bg3);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--qn-c,var(--blue)) 14%,transparent),0 0 32px color-mix(in srgb,var(--qn-c,var(--blue)) 18%,transparent)}
.quick-nav-item:hover::before{opacity:1}
.quick-nav-item:hover::after{opacity:.9}
.quick-nav-item:active{transform:translateY(-1px)}
.quick-nav-item .qn-num{font-size:10.5px;font-weight:600;color:var(--faint);font-family:'JetBrains Mono',monospace;letter-spacing:.12em}
.quick-nav-item .qn-title{font-size:16px;font-weight:600;color:#fff;letter-spacing:-.01em}
.quick-nav-item .qn-desc{font-size:13px;color:var(--muted);line-height:1.5}
.quick-nav-item .qn-arrow{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--blue);font-weight:600;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;transition:gap .2s}
.quick-nav-item:hover .qn-arrow{gap:10px}
.quick-nav-item:nth-child(1){--qn-c:#5be089;--qn-glow:rgba(91,224,137,.4)}
.quick-nav-item:nth-child(2){--qn-c:#34d8c4;--qn-glow:rgba(52,216,196,.4)}
.quick-nav-item:nth-child(3){--qn-c:#b39bff;--qn-glow:rgba(179,155,255,.4)}
.quick-nav-item .qn-num{color:var(--qn-c,var(--faint))}
.quick-nav-item .qn-arrow{color:var(--qn-c,var(--blue))}

/* — SHOP COLORS — */
.group-label-inner{display:flex;align-items:center;gap:9px;color:var(--gc,var(--text2))}
.group-dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--faint));box-shadow:0 0 8px var(--c,transparent);flex-shrink:0}
.item-cdot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--c,transparent);box-shadow:0 0 5px var(--c,transparent);margin-right:7px;vertical-align:middle;position:relative;top:-1px;flex-shrink:0}

/* — SHOPPING — */
.shop-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:18px;flex-wrap:wrap}
.shop-stats{display:flex;align-items:center;gap:18px}
.shop-counter{font-size:14.5px;color:var(--muted);display:flex;align-items:baseline;gap:7px}
.shop-counter strong{color:#fff;font-size:20px;font-weight:700;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;transition:color .3s}
.shop-pbar{width:160px;height:7px;background:var(--bg2);border:1px solid var(--border);border-radius:99px;overflow:hidden}
.shop-pbar-fill{height:100%;background:linear-gradient(90deg,var(--blue3),var(--blue));border-radius:99px;transform:scaleX(0);transform-origin:left;transition:transform .65s var(--ease-spring-strong);box-shadow:0 0 8px var(--blue-glow)}
.reset-btn{font-size:12.5px;font-weight:500;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:var(--r);padding:7px 13px;cursor:pointer;font-family:inherit;transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast);-webkit-tap-highlight-color:transparent}
.reset-btn:hover{color:var(--text);border-color:var(--border2);background:var(--bg2)}
.reset-btn:active{transform:scale(.97)}

.shop-group{margin-bottom:14px;background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--group-c,var(--border));border-radius:var(--r-lg);overflow:hidden;transition:border-color .25s,border-left-color .25s}
.shop-group:hover{border-color:var(--border2);border-left-color:var(--group-c,var(--border2))}
.shop-group-label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);padding:15px 20px;border-bottom:1px solid var(--border);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,var(--bg3),var(--bg2))}
.shop-group-count{color:var(--faint);font-size:11.5px;font-weight:500}
.shop-item{display:flex;align-items:flex-start;gap:14px;padding:14px 20px;cursor:pointer;transition:background var(--dur-fast),padding-left var(--dur-fast);-webkit-tap-highlight-color:transparent;border-bottom:1px solid var(--border);position:relative}
.shop-item:last-child{border-bottom:none}
.shop-item:hover{background:var(--bg3);padding-left:24px}
.shop-item:active{background:var(--bg4)}
.shop-item.done .item-name{color:var(--faint);transition:color .35s .12s ease-out}
.shop-item .item-name{display:inline-block;max-width:100%;background-image:linear-gradient(90deg,rgba(148,162,188,.7) 0%,rgba(148,162,188,.5) 100%);background-repeat:no-repeat;background-position:0 62%;background-size:0% 1.5px;transition:background-size .42s var(--ease-spring-soft),color .35s .12s ease-out}
.shop-item.done .item-name{background-size:100% 1.5px}
.shop-item.done{opacity:.55;transition:opacity .35s .15s ease-out}
.shop-item.just-done{animation:itemPulseGreen .9s var(--ease-out)}
@keyframes itemPulseGreen{0%{background:rgba(91,224,137,.18);box-shadow:inset 2px 0 0 var(--green)}40%{background:rgba(91,224,137,.08)}100%{background:transparent;box-shadow:inset 2px 0 0 transparent}}
.cb{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border3);flex-shrink:0;display:grid;place-items:center;transition:all var(--dur) var(--ease-spring);color:#fff;margin-top:1px;background:transparent;position:relative}
.cb-inner{display:grid;place-items:center;width:100%;height:100%;position:relative;z-index:2}
.cb.on{background:var(--blue2);border-color:var(--blue2);box-shadow:0 0 0 3px rgba(74,141,240,.16)}
/* one lightweight ring pulse on check */
.cb.on::after,.step-check.on::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:1.5px solid var(--blue);opacity:0;pointer-events:none;animation:cbBurst .55s ease-out}
@keyframes cbBurst{0%{transform:scale(.7);opacity:.85}100%{transform:scale(1.8);opacity:0}}
@keyframes checkDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.check-path{stroke-dasharray:1;stroke-dashoffset:1;animation:checkDraw .25s cubic-bezier(.5,1.5,.6,1) both}
.shop-item:hover .cb:not(.on){border-color:var(--blue);background:rgba(106,166,255,.05)}
.item-main{flex:1;min-width:0}
.item-name{font-size:14.5px;font-weight:500;line-height:1.4;display:block;color:#fff}
.item-desc{font-size:13px;color:var(--muted);line-height:1.55;margin-top:5px}
.item-size{font-size:11.5px;color:var(--text2);font-family:'JetBrains Mono',monospace;flex-shrink:0;background:var(--bg);border:1px solid var(--border2);border-radius:5px;padding:3px 9px;margin-top:1px;font-weight:500;letter-spacing:.02em}

/* — DILUTION — */
.dil-name-cell{display:flex;align-items:center;gap:9px;color:var(--nc,#fff)}
.dil-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--c,var(--faint));box-shadow:0 0 6px var(--c,transparent)}
.dilution-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:24px;box-shadow:var(--shadow-sm)}
.dtable{width:100%;border-collapse:collapse}
.dtable th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);padding:15px 20px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border-bottom:1px solid var(--border);font-family:'JetBrains Mono',monospace}
.dtable td{padding:15px 20px;border-bottom:1px solid var(--border);font-size:14.5px;vertical-align:middle;transition:background var(--dur-fast)}
.dtable tr:last-child td{border-bottom:none}
.dtable tr{transition:background var(--dur-fast)}
.dtable tbody tr:hover td{background:var(--bg3)}
.dtable td:first-child{font-weight:600;color:#fff}
.dtable td:nth-child(2){color:var(--text2)}
.dil-ratio{display:inline-block;font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--teal);background:rgba(52,216,196,.1);border:1px solid rgba(52,216,196,.25);border-radius:5px;padding:3px 10px;font-size:13px;white-space:nowrap;letter-spacing:.02em}
.dtable td:last-child{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}

.dilution-note{font-size:13px;color:var(--muted);margin:0 4px 28px;line-height:1.6;font-family:'JetBrains Mono',monospace;display:flex;align-items:flex-start;gap:8px}
.dilution-note::before{content:'i';color:var(--page-c,var(--blue));font-weight:700;flex-shrink:0}

.dilution-tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.tip-card{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--tip-c,var(--faint));border-radius:var(--r-md);padding:18px 20px;transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.tip-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border2)}
.tip-card-title{font-size:13.5px;font-weight:600;color:var(--tip-c,var(--text));margin-bottom:9px;letter-spacing:-.005em}
.tip-card-body{font-size:13.5px;color:var(--text2);line-height:1.65;margin:0}

/* — PROCEDURE — */
.procedure-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
#method-block-2{display:none}
.method-toggle{display:flex;gap:2px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);padding:4px;position:relative}
.method-btn{padding:9px 18px;border-radius:7px;font-size:13.5px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:color .25s,background .25s;font-family:inherit;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;gap:9px;position:relative;z-index:1}
.method-btn::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--border3);transition:background .25s,box-shadow .25s}
.method-btn.active{background:var(--bg4);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)}
.method-btn[data-method="1"].active::before{background:#94a3b8;box-shadow:0 0 8px rgba(148,163,184,.5)}
.method-btn[data-method="2"].active::before{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.5)}

.stage{margin-bottom:40px}
.stage-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.stage-title{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--stage-c,#fff);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:9px}
.stage-dot{width:7px;height:7px;border-radius:50%;background:var(--stage-c,var(--border3));box-shadow:0 0 7px var(--stage-c,transparent);flex-shrink:0}
.stage-time{font-size:11px;color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:3px 10px;font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.02em}
.stage-line{flex:1;height:1px;background:linear-gradient(90deg,var(--stage-c,var(--border)) 0%,transparent 100%)}

.step{border-radius:var(--r-md);overflow:hidden;margin-bottom:5px;background:var(--bg2);border:1px solid var(--border);transition:border-color var(--dur),background var(--dur);position:relative;content-visibility:auto;contain-intrinsic-size:auto 96px;contain:layout paint}
.step::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background var(--dur)}
.step:hover{border-color:var(--border2)}
.step.expanded{border-color:var(--border3);background:var(--bg3)}
.step.expanded::before{background:var(--stage-c,var(--blue));box-shadow:0 0 10px color-mix(in srgb,var(--stage-c,var(--blue)) 45%,transparent)}
.step.optional{border-style:dashed}
.step.just-done{animation:stepPulse .65s ease-out}
@keyframes stepPulse{0%{background:rgba(91,224,137,.18)}60%{background:rgba(91,224,137,.05)}100%{background:var(--bg2)}}
.step-row{display:flex;align-items:flex-start;gap:14px;padding:15px 17px}
.step-check{width:24px;height:24px;border-radius:6px;border:1.5px solid var(--border3);flex-shrink:0;margin-top:0;display:grid;place-items:center;cursor:pointer;transition:background var(--dur) var(--ease-spring),border-color var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease-spring),transform .15s;color:#fff;-webkit-tap-highlight-color:transparent;background:transparent;position:relative}
.step-check:hover{border-color:var(--blue);background:rgba(106,166,255,.05)}
.step-check:active{transform:scale(.92)}
.step-check.on{background:var(--blue2);border-color:var(--blue2);box-shadow:0 0 0 3px rgba(74,141,240,.16)}
.step-main{flex:1;cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:0}
.step-title-row{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.step-n{font-size:11.5px;font-weight:600;color:var(--text2);font-family:'JetBrains Mono',monospace;background:var(--bg);border:1px solid var(--border2);border-radius:5px;padding:2px 8px;flex-shrink:0;font-variant-numeric:tabular-nums}
.step-title{font-size:15.5px;font-weight:600;line-height:1.45;color:#fff;letter-spacing:-.01em;transition:color .25s}
.step.done .step-title{color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(148,162,188,.4);text-decoration-thickness:1.5px}
.step.done{opacity:.55}
.opt-tag{font-size:10px;color:var(--orange);background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.25);border-radius:4px;padding:1.5px 7px;font-weight:500;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;margin-left:8px;display:inline-block;vertical-align:middle}
.step-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.chip{font-size:11px;font-weight:500;padding:2.5px 8.5px;border-radius:5px;font-family:'JetBrains Mono',monospace;background:rgba(40,52,76,.5);color:#a4b1c8;border:1px solid transparent;letter-spacing:.02em;transition:transform .15s,filter .15s}
.chip:hover{transform:translateY(-1px);filter:brightness(1.15)}
.dir{font-weight:700;color:var(--blue);white-space:nowrap;text-shadow:0 0 8px rgba(106,166,255,.3)}
.step-chevron{color:var(--muted);flex-shrink:0;cursor:pointer;transition:transform var(--dur) var(--ease-out),color var(--dur),background var(--dur);-webkit-tap-highlight-color:transparent;display:grid;place-items:center;width:30px;height:30px;border-radius:6px;margin-top:-3px}
.step-chevron:hover{color:#fff;background:var(--bg4)}
.step-chevron.open{transform:rotate(180deg);color:var(--blue);background:rgba(106,166,255,.08)}

/* Smooth height-based expand */
.step-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-out);will-change:max-height}
.step-body-inner{padding:0 19px 18px calc(17px + 24px + 14px)}
.step-body.open{max-height:none}
.step-body.open .step-body-inner{animation:bodyFade .3s var(--ease-out) .05s both}
@keyframes bodyFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.step-desc{font-size:14px;color:var(--text2);line-height:1.75;margin-bottom:11px}
.step-desc strong{color:#fff;font-weight:600}
.step-desc .chip,.tip-box .chip,.warn-box .chip{background:none!important;border:none!important;padding:0!important;border-radius:0!important;font-size:inherit!important;font-family:inherit!important;font-weight:600!important;display:inline!important;vertical-align:baseline!important;margin:0!important;color:#fff!important;transform:none!important}

.tip-box,.warn-box{display:flex;gap:11px;border-radius:var(--r);padding:12px 15px;font-size:13.5px;line-height:1.65;margin-top:9px;border:1px solid;align-items:flex-start;animation:tipIn .3s var(--ease-out)}
@keyframes tipIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.tip-box{background:rgba(251,191,36,.05);border-color:rgba(251,191,36,.22);color:#fde68a}
.warn-box{background:rgba(248,113,113,.05);border-color:rgba(248,113,113,.22);color:#fca5a5}
.tip-box strong{color:var(--yellow);font-weight:700}
.warn-box strong{color:var(--red);font-weight:700}
.box-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;font-family:'JetBrains Mono',monospace;margin-top:1px}
.tip-box .box-icon{background:rgba(251,191,36,.18);color:var(--yellow);font-style:italic}
.warn-box .box-icon{background:rgba(248,113,113,.18);color:var(--red)}

.common-divider{display:flex;align-items:center;gap:16px;margin:56px 0 28px}
.common-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border) 20%,var(--border) 80%,transparent)}
.common-divider-label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);font-family:'JetBrains Mono',monospace;flex-shrink:0;display:flex;align-items:center;gap:10px}
.common-divider-label::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--purple);box-shadow:0 0 8px rgba(179,155,255,.5)}

/* — CHIP COLORS — */
.chip[data-chip="TFR"]{background:rgba(100,116,139,.18);color:#a8b3c5;border-color:rgba(100,116,139,.3)}
.chip[data-chip="RH+"]{background:rgba(239,68,68,.14);color:#f1716e;border-color:rgba(239,68,68,.3)}
.chip[data-chip="RH−"]{background:rgba(244,114,182,.14);color:#f580c0;border-color:rgba(244,114,182,.3)}
.chip[data-chip="BUGGI"]{background:rgba(251,191,36,.14);color:#fcc94f;border-color:rgba(251,191,36,.3)}
.chip[data-chip="BUBBLE FRUIT"]{background:rgba(74,222,128,.13);color:#5be089;border-color:rgba(74,222,128,.3)}
.chip[data-chip="TARPI"]{background:rgba(167,139,250,.14);color:#b39bff;border-color:rgba(167,139,250,.3)}
.chip[data-chip="KIUDINI"]{background:rgba(196,181,253,.16);color:#cebcfe;border-color:rgba(196,181,253,.3)}
.chip[data-chip="CLEASY+"]{background:rgba(96,165,250,.14);color:#75b4fb;border-color:rgba(96,165,250,.3)}
.chip[data-chip="TAPIK"]{background:rgba(244,114,182,.13);color:#fcadb8;border-color:rgba(244,114,182,.3)}
.chip[data-chip="SOFT CLEANER"]{background:rgba(214,211,209,.12);color:#dad6d3;border-color:rgba(214,211,209,.25)}
.chip[data-chip="INTERIO"]{background:rgba(232,121,249,.13);color:#ec85f9;border-color:rgba(232,121,249,.3)}
.chip[data-chip="MI-WASH"]{background:rgba(163,230,53,.14);color:#aee842;border-color:rgba(163,230,53,.3)}
.chip[data-chip="Ech2O"]{background:rgba(45,212,191,.13);color:#34d8c4;border-color:rgba(45,212,191,.3)}
.chip[data-chip="Glass Compound"],.chip[data-chip="Ultra Glaco"]{background:rgba(251,146,60,.14);color:#fc9f4f;border-color:rgba(251,146,60,.3)}
.chip[data-chip="FLUFFY BLUE"]{background:rgba(147,197,253,.16);color:#a8cffd;border-color:rgba(147,197,253,.3)}
.chip[data-chip="FLUFFY BLACK"]{background:rgba(8,10,18,.7);color:#a4b1c8;border-color:rgba(148,163,184,.2)}
.chip[data-chip="TWIST PILE"]{background:rgba(252,165,165,.13);color:#fcb1b1;border-color:rgba(252,165,165,.3)}
.chip[data-chip="SHOCKING ORANGE"]{background:rgba(254,215,170,.14);color:#fed8b3;border-color:rgba(254,215,170,.3)}
.chip[data-chip="GECKO GREEN"]{background:rgba(190,242,100,.14);color:#c5f471;border-color:rgba(190,242,100,.3)}
.chip[data-chip="WHITE"]{background:rgba(241,245,249,.12);color:#f1f5f9;border-color:rgba(241,245,249,.25)}
.chip[data-chip="GREY"]{background:rgba(203,213,225,.13);color:#cfd9e3;border-color:rgba(203,213,225,.25)}
.chip[data-chip="BLACK"]{background:rgba(30,41,59,.6);color:#a4b1c8;border-color:rgba(100,116,139,.3)}
.chip[data-chip="GLASS CARBON FIBER"]{background:rgba(156,163,175,.14);color:#a4abb6;border-color:rgba(156,163,175,.3)}
.chip[data-chip="DIAMOND GLASS BLUE"]{background:rgba(186,230,253,.14);color:#bee9fd;border-color:rgba(186,230,253,.3)}
.chip[data-chip="Stiff Brush 18mm"],.chip[data-chip="Stiff Brush 16mm"]{background:rgba(129,140,248,.14);color:#929bf9;border-color:rgba(129,140,248,.3)}
.chip[data-chip="Narrow Soft 14mm"]{background:rgba(165,180,252,.13);color:#b4befd;border-color:rgba(165,180,252,.3)}
.chip[data-chip="Wheel Brush"]{background:rgba(134,239,172,.14);color:#92eea9;border-color:rgba(134,239,172,.3)}
.chip[data-chip="Scrubber Pad"]{background:rgba(52,211,153,.14);color:#46d99c;border-color:rgba(52,211,153,.3)}
.chip[data-chip="Wash Mitt"]{background:rgba(226,232,240,.13);color:#e2e8f0;border-color:rgba(226,232,240,.25)}
.chip[data-chip="GREEN"]{background:rgba(110,231,183,.14);color:#7eebbe;border-color:rgba(110,231,183,.3)}
.chip[data-chip="Mini szczoteczka"]{background:rgba(253,230,138,.14);color:#fde6a4;border-color:rgba(253,230,138,.3)}
.chip[data-chip="Szczotka VIKAN"]{background:rgba(180,140,100,.14);color:#c9a97a;border-color:rgba(180,140,100,.3)}

/* — PAGE THEMES — */
#page-lista{--page-c:#5be089;--page-glow:rgba(91,224,137,.4)}
#page-proporcje{--page-c:#34d8c4;--page-glow:rgba(52,216,196,.4)}
#page-procedura{--page-c:#b39bff;--page-glow:rgba(179,155,255,.4)}

/* Lista — shop progress bar & counter */
#page-lista .shop-pbar-fill{background:linear-gradient(90deg,#2ea855,#5be089);box-shadow:0 0 8px rgba(91,224,137,.4)}
#page-lista [data-shop-done]{color:#5be089}
#page-lista .reset-btn:hover{color:#5be089;border-color:rgba(91,224,137,.3)}

/* Proporcje — dilution note accent */
#page-proporcje .dilution-note{color:var(--text2)}
#page-proporcje .reset-btn:hover{color:#34d8c4;border-color:rgba(52,216,196,.3)}

/* Procedura — method toggle accent */
#page-procedura .method-toggle{border-color:rgba(179,155,255,.2)}
#page-procedura .reset-btn:hover{color:#b39bff;border-color:rgba(179,155,255,.3)}

/* Stage step numbers + time badge inherit stage color */
.stage .step-n{color:var(--stage-c,var(--text2))}
.stage .stage-time{color:var(--stage-c,var(--text2));border-color:color-mix(in srgb,var(--stage-c,var(--border)) 30%,transparent)}

/* — color-mix() fallbacks for Safari < 16.2 — */
@supports not (color: color-mix(in srgb, red 10%, blue)){
  .info-card::after{background:linear-gradient(115deg,transparent 35%,rgba(106,166,255,.14) 50%,transparent 65%)}
  .info-card:hover{border-color:var(--border2);box-shadow:0 14px 32px rgba(0,0,0,.4)}
  .quick-nav-item::before{background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(106,166,255,.24),rgba(106,166,255,.06) 30%,transparent 55%)}
  .quick-nav-item:hover{box-shadow:0 12px 32px rgba(0,0,0,.4)}
  .step.expanded::before{box-shadow:0 0 10px rgba(106,166,255,.4)}
  .stage .stage-time{border-color:var(--border)}
}

/* — REDUCED MOTION — */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .check-path{stroke-dashoffset:0!important}
  .hero-card{transform:none!important}
  body::before{animation:none!important}
  .info-card::after,.cb.on::after,.step-check.on::after{display:none!important}
  .shop-item .item-name{background-size:0% 1.5px!important;transition:none!important}
  .shop-item.done .item-name{background-size:100% 1.5px!important}
  [data-pbar-text].rolling{animation:none!important}
}

/* — MOBILE — */
@media(max-width:760px){
  body{font-size:14.5px}
  .topbar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .topbar-inner{flex-wrap:wrap;height:auto;padding:10px 14px 0;gap:10px;column-gap:12px}
  .brand{order:1;flex:0 1 auto;min-width:0}
  .brand-text{font-size:13px}
  .brand-text small{font-size:10px}
  .progress-chip{order:2;margin-left:auto;padding:5px 12px 5px 14px;font-size:11.5px;gap:9px}
  .progress-chip strong{font-size:13px}
  .pbar{width:56px;height:5px}
  .topbar-nav{order:3;width:calc(100% + 28px);margin:0 -14px;display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;border-top:1px solid var(--border)}
  .topbar-nav button{padding:13px 4px;border-radius:0;font-size:11.5px;text-align:center;min-height:48px}
  .topbar-nav button.active{color:#fff}
  .page{padding:24px 16px calc(80px + env(safe-area-inset-bottom))}
  .page-header{margin-bottom:24px}
  .page-title{font-size:clamp(24px,7vw,30px)}
  .page-sub{font-size:14.5px}
  .hero-card{padding:28px 22px;margin-bottom:22px;border-radius:14px}
  .hero-card::before{width:280px;height:280px;top:-25%;right:-20%}
  .hero-meta{margin-bottom:22px;gap:6px}
  .meta-tag{font-size:10.5px;padding:5px 10px}
  .hero-title{font-size:clamp(28px,8vw,38px)}
  .hero-sub{font-size:14.5px}
  .info-grid{grid-template-columns:1fr;gap:12px;margin-bottom:28px}
  .info-card{padding:20px}
  .quick-nav{grid-template-columns:1fr;gap:10px}
  .quick-nav-item{padding:16px 18px 14px}
  .quick-nav-item .qn-title{font-size:15.5px}
  .dilution-tips{grid-template-columns:1fr}
  .dilution-card{border-radius:10px}
  .dtable th,.dtable td{padding:12px 14px;font-size:13.5px}
  .dtable th:last-child,.dtable td:last-child{display:none}
  .dilution-note{margin-bottom:22px}
  .method-toggle{width:100%}
  .method-btn{flex:1;justify-content:center;padding:11px 14px;min-height:44px}
  .reset-btn{padding:9px 13px;min-height:36px}
  .shop-header{gap:12px}
  .shop-counter{font-size:13.5px}
  .shop-counter strong{font-size:18px}
  .shop-pbar{display:none}
  .shop-item{padding:14px 16px;gap:12px}
  .shop-item:hover{padding-left:20px}
  .item-name{font-size:14px}
  .item-desc{font-size:12.5px}
  .step{margin-bottom:6px}
  .step-row{padding:14px 14px;gap:12px}
  .step-title{font-size:15px}
  .step-body-inner{padding:0 14px 14px calc(14px + 24px + 12px)}
  .step-chips{gap:4px;margin-top:8px}
  .chip{font-size:10.5px;padding:2.5px 7.5px}
  .stage-head{gap:10px;margin-bottom:12px}
  .stage-time{font-size:10.5px;padding:2.5px 9px}
  .common-divider{margin:40px 0 22px}
  /* Disable hero parallax on touch devices */
  .hero-card{transform:none!important}
}
@media(max-width:380px){
  .topbar-inner{padding:8px 12px 0}
  .brand-text small{display:none}
  .pbar{width:46px}
  .progress-chip{padding:5px 10px 5px 12px;gap:7px}
  .progress-chip strong{font-size:12px}
  .page{padding:20px 14px 80px}
  .hero-card{padding:24px 20px}
  .meta-tag{font-size:10px}
  .step-row{padding:12px 12px;gap:10px}
  .step-body-inner{padding:0 12px 12px calc(12px + 24px + 10px)}
}