/* ==========================================================================
   RAWBooster Coffee — onepage styles
   Organized sections: variables, reset, header, hero, comic strip, powers,
   origin, specs, tested, always, for-whom, final CTA, footer, animations,
   responsive.
   ========================================================================== */

:root {
  --red: #e30613;
  --red2: #87000b;
  --yellow: #ffd400;
  --ink: #070307;
  --white: #fff;
  --muted: #d9d1c7;
  --panel: #11080b;
  --line: rgba(255, 212, 0, .58);
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Firefox scrollbar in brand colours */
  scrollbar-color: var(--yellow) #150407;
}
/* Chromium/WebKit scrollbar: dark track, yellow-to-orange comic thumb */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #150407; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--yellow), #ff9d00);
  border-radius: 8px;
  border: 3px solid #150407;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffe14d, var(--yellow));
}
body {
  margin: 0;
  background: #070307;
  color: var(--white);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }

/* Visible keyboard focus for all interactive elements */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link for keyboard / screen-reader users */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--yellow);
  color: #070307;
  font-weight: 900;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
}
.skip-link:focus {
  left: 0;
}

/* Decorative grain overlay */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .16;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* Custom cursor glow (desktop pointer devices only, see script.js) */
.cursor-bolt {
  position: fixed;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--yellow), transparent 68%);
  z-index: 50;
  pointer-events: none;
  filter: blur(2px);
  opacity: .55;
  transform: translate(-50%, -50%);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 96px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px; /* floor so the bigger logo never touches the nav on narrow screens */
  padding: 0 clamp(18px, 4vw, 70px);
  background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .54));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 212, 0, .28);
}
/* Horizontal RAWBOOSTER wordmark: sized by height, wide by nature */
.brand { position: relative; display: inline-block; }
.brand img { display: block; height: 58px; width: auto; }
/* Light beam sweeping through the logo. Implemented as a second copy of the
   logo image brightened and revealed through a moving diagonal clip-path —
   CSS mask-image of a WebP renders fully transparent in some engines, while
   clip-path on a real <img> is reliable everywhere. Because the beam is the
   logo itself, only the letters light up. */
.brand-shine {
  position: absolute;
  left: 0;
  top: 0;
  height: 58px;
  width: auto;
  filter: brightness(2.4) contrast(1.15) drop-shadow(0 0 6px rgba(255, 255, 255, .8));
  animation: brandShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brandShine {
  0%, 16% { clip-path: polygon(-34% 0, -14% 0, -24% 100%, -44% 100%); }
  46%, 100% { clip-path: polygon(114% 0, 134% 0, 124% 100%, 104% 100%); }
}
.site-header nav {
  display: flex;
  gap: clamp(12px, 2.8vw, 42px);
  font-family: 'Lilita One', 'Barlow Condensed', sans-serif;
  font-size: 19px;
}
/* Shared comic link style for the top menu and the footer menu: bigger,
   brighter, with an animated skewed underline + a little bolt that pops
   up on hover. */
.site-header nav a,
footer nav a {
  position: relative;
  display: inline-block;
  padding: 8px 2px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  transition: color .25s, transform .25s cubic-bezier(.2, .9, .3, 1.4);
  animation: navIn .55s cubic-bezier(.2, .9, .3, 1.2) backwards;
}
.site-header nav a:nth-child(2), footer nav a:nth-child(2) { animation-delay: .1s; }
.site-header nav a:nth-child(3), footer nav a:nth-child(3) { animation-delay: .2s; }
.site-header nav a:nth-child(4), footer nav a:nth-child(4) { animation-delay: .3s; }
@keyframes navIn {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
.site-header nav a::after,
footer nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--yellow), #ff9d00);
  box-shadow: 2px 2px 0 #000;
  transform: scaleX(0) skewX(-18deg);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.4);
}
.site-header nav a::before,
footer nav a::before {
  content: "⚡";
  position: absolute;
  left: 50%;
  top: -10px;
  font-size: 13px;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 212, 0, .9);
  opacity: 0;
  transform: translate(-50%, 6px) scale(.4);
  transition: opacity .25s, transform .3s cubic-bezier(.2, .9, .3, 1.6);
  pointer-events: none;
}
.site-header nav a:hover,
.site-header nav a:focus-visible,
footer nav a:hover,
footer nav a:focus-visible {
  color: var(--yellow);
  transform: translateY(-3px) rotate(-1deg);
}
.site-header nav a:hover::after,
.site-header nav a:focus-visible::after,
footer nav a:hover::after,
footer nav a:focus-visible::after { transform: scaleX(1) skewX(-18deg); }
.site-header nav a:hover::before,
.site-header nav a:focus-visible::before,
footer nav a:hover::before,
footer nav a:focus-visible::before { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* Filled, pulsing KUP button — far more visible than the old outline pill */
.mini-buy {
  padding: 12px 24px;
  background: var(--yellow);
  border: 3px solid #000;
  border-radius: 999px;
  color: #14060a;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 0 3px var(--red), 4px 4px 0 #000, 0 0 14px rgba(255, 212, 0, .4);
  animation: miniBuyPulse 2s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), filter .25s;
}
.mini-buy:hover,
.mini-buy:focus-visible {
  animation: none;
  transform: scale(1.1) rotate(-2deg);
  filter: brightness(1.1);
  color: #14060a;
}
@keyframes miniBuyPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px var(--red), 4px 4px 0 #000, 0 0 10px rgba(255, 212, 0, .3); }
  50% { transform: scale(1.07); box-shadow: 0 0 0 3px var(--red), 4px 4px 0 #000, 0 0 26px rgba(255, 212, 0, .75); }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  padding: 140px clamp(20px, 5vw, 86px) 60px;
  position: relative;
  display: grid;
  /* minmax(0, Xfr) lets these tracks shrink below the min-content width of
     the large heading text instead of blowing out the layout */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.1fr) minmax(0, .35fr);
  align-items: center;
  gap: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 45%, rgba(227, 6, 19, .35), transparent 38%),
    linear-gradient(135deg, #070307 0%, #240006 38%, #0a0204 100%);
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('komiks-rawbooster-super-kawa.webp') center/cover no-repeat;
  opacity: .18;
  filter: saturate(1.35) contrast(1.25);
}
/* The rotating ray layers are giant CENTERED SQUARES (200vmax per side),
   not "section + 20%" rectangles: a wide-but-short rectangle rotated 90°
   becomes tall-but-narrow and leaves empty bands at the sides mid-spin.
   A square whose side exceeds the viewport diagonal (~142vmax) covers the
   whole section at every rotation angle, portrait or landscape. */
.speed-lines,
.lightning-field {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200vmax;
  height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  background: repeating-conic-gradient(
    from 20deg at 50% 50%,
    rgba(255, 212, 0, .28) 0 5deg,
    transparent 5deg 12deg,
    rgba(227, 6, 19, .32) 12deg 17deg,
    transparent 17deg 25deg
  );
  animation: spinSlow 34s linear infinite;
  opacity: .55;
}
/* Keep the hero's rays converging behind the product photo (its original
   focal point), while the final CTA's rays stay dead-center. */
.speed-lines { left: 58%; top: 45%; }
/* Target the three real content columns specifically (not the
   absolutely-positioned .speed-lines decoration) so it keeps its own
   position:absolute and doesn't consume a grid auto-placement slot.
   min-width: 0 lets each column shrink below its content's min-content
   size instead of overflowing its track (needed alongside minmax(0, ...)
   above so the huge Bangers headline can't squeeze the product image out). */
.hero-copy, .hero-product, .hero-side { position: relative; min-width: 0; }

.eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--yellow);
  font-weight: 900;
}
/* "Przetestowane w boju przez" must stay on a single line above the big
   STOLZ heading */
.eyebrow-oneline {
  white-space: nowrap;
  font-size: clamp(14px, 1.6vw, 22px);
}
.hero h1, .section h2, .final-cta h2 {
  text-transform: uppercase;
  margin: 0;
  /* Long unhyphenated Polish words (e.g. "KOMPROMISÓW.", "PHOTOGRAPHY")
     must never overflow their column at this display font's large sizes. */
  overflow-wrap: break-word;
}
/* MAIN headlines (hero + final CTA): the original Bangers look, with
   Lilita One directly behind it so any glyph Bangers lacks still renders
   in a comic font, not a plain one. */
.hero h1, .final-cta h2 {
  font-family: Bangers, 'Lilita One', 'Barlow Condensed', sans-serif;
  letter-spacing: 1px;
  line-height: .9;
  text-shadow: 5px 5px 0 #000;
}
/* SECTION titles ("Z rodzinnej plantacji...", "Co w środku", "STOLZ..."):
   same Bangers as the hero (per request), kept with the red comic offset
   shadow. Small eyebrow subtitles above them stay in Barlow. */
.section h2 {
  font-family: Bangers, 'Lilita One', 'Barlow Condensed', sans-serif;
  letter-spacing: 1px;
  line-height: .9;
  text-shadow: 4px 4px 0 #000, 8px 8px 0 rgba(227, 6, 19, .30);
}
.hero h1 { font-size: clamp(48px, 6.4vw, 100px); }
.hero h1 span, .section-title em, .final-cta h2 span { color: var(--yellow); font-style: normal; }

.lead {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  max-width: 640px;
  color: #f4ede6;
}
.hero-actions { margin-top: 34px; }

.cta {
  display: inline-grid;
  place-items: center;
  position: relative;
  text-transform: uppercase;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  letter-spacing: 1px;
  color: #060303;
  background: var(--yellow);
  border: 5px solid #080304;
  box-shadow: 0 0 0 4px var(--red), 10px 10px 0 #000, 0 0 45px rgba(255, 212, 0, .38);
  clip-path: polygon(5% 0, 95% 0, 100% 20%, 92% 34%, 100% 52%, 90% 68%, 96% 100%, 6% 100%, 0 78%, 8% 62%, 0 45%, 8% 28%);
  /* Gentle idle bob to invite a click; switched off on hover/focus below so
     it never fights the JS magnet-follow effect or the hover lift. */
  animation: ctaInvite 2.4s ease-in-out infinite;
}
.cta span { padding: 22px 48px; font-size: clamp(38px, 5vw, 82px); }
.cta:hover,
.cta:focus-visible {
  animation: none;
  transform: translateY(-4px) rotate(-1deg);
  filter: brightness(1.08);
}
@keyframes ctaInvite {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.035); }
}
.gift-line { margin: 20px 0 0; color: #f3e9df; }

.hero-product { min-height: 620px; display: grid; place-items: center; }
/* Sized to exactly match the pack photo's rendered box (explicit width +
   matching aspect-ratio, not shrink-to-fit — .pack-wrap is a centered grid
   item and would otherwise stretch to fill the cell). The bubble and the
   steam anchor below are positioned as percentages of this box, so it has
   to line up with the photo pixel-for-pixel, not the taller hero-product
   cell it sits in. */
.pack-wrap { position: relative; width: min(86%, 600px); aspect-ratio: 1122 / 1402; }
.pack {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 42px 40px rgba(0, 0, 0, .65));
  animation: packFloat 4.8s ease-in-out infinite;
  /* Soft vignette mask: the photo's hard rectangular edges melt into the
     dark hero background instead of cutting a sharp frame. */
  -webkit-mask-image: radial-gradient(ellipse 68% 64% at 50% 46%, #000 55%, transparent 82%);
  mask-image: radial-gradient(ellipse 68% 64% at 50% 46%, #000 55%, transparent 82%);
}
.bubble {
  position: absolute;
  right: 0; top: 7%;
  z-index: 2;
  background: #fff;
  color: #111;
  /* Padding in em so it scales with the font, keeping generous clearance
     between the text and the star's jagged (concave) points at every size */
  padding: 1.7em 2.05em;
  font-family: Bangers, 'Lilita One', sans-serif;
  /* Smaller than before: the star's inward points were clipping into the
     two-line text at the previous size */
  font-size: clamp(19px, 2.3vw, 32px);
  line-height: 1.05;
  text-align: center;
  transform: rotate(-7deg);
  filter: drop-shadow(8px 8px 0 #000);
  clip-path: polygon(4% 19%, 22% 20%, 29% 0, 43% 17%, 64% 4%, 69% 23%, 96% 13%, 84% 36%, 100% 52%, 80% 57%, 89% 84%, 64% 71%, 50% 100%, 38% 74%, 12% 90%, 22% 63%, 0 55%, 18% 43%);
  animation: pop 2.6s ease-in-out infinite;
}
.hero-side img {
  opacity: .55;
  filter: drop-shadow(0 20px 20px #000);
  animation: tilt 7s ease-in-out infinite;
}

/* .coffee-cup (hero) is now just an invisible anchor: it sits over the real
   mug in the product photo, so it keeps the .steam children in the right
   spot without drawing a second, mismatched cup on top of the photo. */
.coffee-cup, .final-cup {
  position: absolute;
  width: 132px; height: 112px;
}
/* Tuned to sit right over the real mug in the pack-front.webp photo, so the
   steam rises from where the cup actually is in the image. */
.coffee-cup { right: 2%; bottom: 9%; }
.final-cup { right: 5%; bottom: 5%; }
.final-cup {
  border-radius: 0 0 34px 34px;
  background: linear-gradient(90deg, #050505, #221916);
  border: 5px solid #32221c;
  box-shadow: inset 0 12px 0 #8b4b1e, 0 20px 45px #000;
}
.final-cup:after {
  content: "";
  position: absolute;
  right: -32px; top: 28px;
  width: 44px; height: 42px;
  border: 9px solid #201716;
  border-left: 0;
  border-radius: 0 24px 24px 0;
}
.final-cup strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-size: 54px;
}
.steam {
  position: absolute;
  bottom: 100%;
  width: 14px; height: 92px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  filter: blur(6px);
  animation: steam 3.2s ease-in-out infinite;
}
.s1 { left: 34px; }
.s2 { left: 62px; animation-delay: .7s; }
.s3 { left: 88px; animation-delay: 1.3s; }

/* ---------- Comic strip banner ---------- */
.comic-strip {
  position: relative;
  /* Explicit width is required here: with aspect-ratio + max-height but no
     set width, the browser solves for width from the capped height instead
     of filling the viewport, which made the strip shrink and center itself
     on wide screens instead of staying edge-to-edge. */
  width: 100%;
  /* Height tracks the image's own aspect ratio instead of a fixed px value,
     so the title lettering and speech-bubble text at the top of the image
     never get cropped out by object-fit:cover on wide/ultra-wide screens.
     max-height keeps it from growing huge on very wide monitors; beyond
     that cap it degrades gracefully via object-position:top below. */
  aspect-ratio: 2000 / 848;
  max-height: 760px;
  overflow: hidden;
  border-block: 4px solid var(--yellow);
  background: #000;
}
/* The canvas keeps everything (base image, panel clones, sparks) in the
   image's own coordinate space: width 100% + the image's aspect ratio.
   On ultra-wide screens the section's max-height simply crops the bottom
   (same visual result as the old object-fit:cover + top alignment), but
   overlays never drift out of alignment with the artwork.
   Pan + flicker live HERE (not on the img) so the clones move in sync. */
.strip-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 848;
  animation: pan 18s ease-in-out infinite alternate, filmFlicker 5s ease-in-out infinite;
}
.strip-canvas > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Individual film frames, cut from the same file with a CSS crop.
   Each is an exact clone positioned over its spot on the base strip, so it
   can sway/shake independently; the drop shadow makes the tiny offset read
   as a frame floating off the film rather than a glitch. ---- */
.strip-panel {
  position: absolute;
  z-index: 2;
  background-image: url('komiks-rawbooster-super-kawa.webp');
  background-repeat: no-repeat;
  box-shadow: 0 .6vw 1.4vw rgba(0, 0, 0, .5);
  animation: panelSway 5.2s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s;
}
.strip-panel:hover {
  animation: none;
  transform: scale(1.06) rotate(0deg);
  z-index: 6;
  box-shadow: 0 1.2vw 2.6vw rgba(0, 0, 0, .75), 0 0 2vw rgba(255, 212, 0, .35);
}
@keyframes panelSway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-.45vw) rotate(-.5deg); }
}
/* Geometry: left/top/width/height in % of the 2000x848 image; the
   background-size/position pair reproduces exactly that crop. */
.panel-1 { left: .4%;  top: 29%;    width: 14.2%; height: 53.5%;
  background-size: 704.2% 186.8%; background-position: .47% 62.4%;
  animation: yawnSway 5.5s ease-in-out infinite; }
.panel-2 { left: 15%;   top: 28.8%; width: 28.3%; height: 52.4%;
  background-size: 353.4% 191%;   background-position: 20.9% 60.4%;
  animation-delay: .7s; }
.panel-3 { left: 43.8%; top: 28.8%; width: 10.5%; height: 50%;
  background-size: 952.4% 200%;   background-position: 48.9% 57.6%;
  animation: zapShake 3.4s ease-in-out infinite; }
.panel-4 { left: 54.8%; top: 28.5%; width: 10.8%; height: 49.5%;
  background-size: 925.9% 201.9%; background-position: 61.4% 56.5%;
  animation: runShake 1.4s linear infinite; }
.panel-5 { left: 66.1%; top: 28.3%; width: 9.9%;  height: 48.9%;
  background-size: 1010.1% 204.3%; background-position: 73.4% 55.4%;
  animation-delay: 1.4s; }
.panel-6 { left: 76.5%; top: 28.1%; width: 10.6%; height: 48.4%;
  background-size: 943.4% 206.8%; background-position: 85.6% 54.3%;
  animation-delay: 2.1s; }
.panel-7 { left: 87.6%; top: 27.6%; width: 10.5%; height: 47.9%;
  background-size: 952.4% 208.9%; background-position: 97.9% 52.9%;
  animation-delay: 2.8s; }
/* Panel 1: slow sleepy sway, like nodding off mid-yawn */
@keyframes yawnSway {
  0%, 100% { transform: rotate(-.9deg) translateY(0); }
  50% { transform: rotate(.9deg) translateY(-.3vw); }
}
/* Panel 3: sudden electric jolts between calm stretches */
@keyframes zapShake {
  0%, 30%, 100% { transform: translate(0, 0); }
  32% { transform: translate(-.15vw, .1vw) rotate(-.6deg); }
  34% { transform: translate(.15vw, -.1vw) rotate(.6deg); }
  36% { transform: translate(-.1vw, 0) rotate(-.4deg); }
  38% { transform: translate(0, 0); }
  70% { transform: translate(.12vw, -.08vw) rotate(.5deg); }
  72% { transform: translate(-.12vw, .08vw) rotate(-.5deg); }
  74% { transform: translate(0, 0); }
}
/* Panel 4: constant tiny vibration = super-speed */
@keyframes runShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-.08vw, .06vw); }
  50% { transform: translate(.08vw, -.06vw); }
  75% { transform: translate(-.06vw, -.04vw); }
}

/* ---- Per-panel effect overlays (positions in % of their panel) ---- */
/* Zzz drifting up from the yawning photographer's mouth */
.p-zzz {
  position: absolute;
  left: 48%;
  top: 30%;
  font-family: 'Lilita One', cursive;
  color: #fff;
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 255, 255, .6);
  font-size: clamp(10px, 1.3vw, 26px);
  opacity: 0;
  animation: zzzFloat 4.2s ease-out infinite;
  pointer-events: none;
}
.p-zzz.z2 { left: 56%; font-size: clamp(8px, 1vw, 20px); animation-delay: 1.4s; }
.p-zzz.z3 { left: 42%; font-size: clamp(7px, .8vw, 16px); animation-delay: 2.8s; }
@keyframes zzzFloat {
  0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(.7); }
  25% { opacity: .95; }
  100% { opacity: 0; transform: translateY(-2.6vw) rotate(14deg) scale(1.25); }
}
/* Eye glint on the superheroine (panel 2) */
.p-glint {
  position: absolute;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 16px rgba(255, 212, 0, .8);
  pointer-events: none;
  animation: twinkle 3.1s ease-in-out infinite;
}
.pg-eye { left: 14%; top: 28%; font-size: clamp(8px, 1vw, 20px); animation-delay: .4s; }
/* Live wisps of steam over the drawn cup in panel 2 and the takeaway cup
   in panel 6 — reuses the site-wide `steam` keyframes */
.p-steam {
  position: absolute;
  width: 6%;
  height: 26%;
  border-radius: 50%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75));
  filter: blur(3px);
  animation: steam 3s ease-in-out infinite;
  pointer-events: none;
}
.pst-1 { left: 78%; top: 32%; }
.pst-2 { left: 85%; top: 34%; animation-delay: 1.1s; }
.pst-3 { left: 26%; top: 26%; width: 9%; height: 18%; animation-delay: .6s; }
/* Panel 3: electric flash filling the frame + flickering bolts */
.p-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(190, 235, 255, .8), rgba(120, 200, 255, .25) 45%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: zapFlash 3.4s linear infinite;
  pointer-events: none;
}
@keyframes zapFlash {
  0%, 29%, 42%, 68%, 78%, 100% { opacity: 0; }
  32%, 36% { opacity: .85; }
  34% { opacity: .3; }
  71%, 74% { opacity: .6; }
}
.p-bolt {
  position: absolute;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 212, 0, .95), 0 0 18px rgba(120, 200, 255, .8);
  font-size: clamp(9px, 1.1vw, 22px);
  pointer-events: none;
  animation: boltFlicker 2.1s ease-in-out infinite;
}
.pb-1 { left: 6%; top: 17%; }
.pb-2 { left: 82%; top: 22%; animation-delay: .9s; }
/* Panel 4: extra speed streaks whipping across the frame */
.p-speed {
  position: absolute;
  left: -10%;
  width: 70%;
  height: 2.6%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  border-radius: 999px;
  opacity: 0;
  animation: speedDash 1.15s linear infinite;
  pointer-events: none;
}
.sp-1 { top: 32%; }
.sp-2 { top: 48%; animation-delay: .38s; }
.sp-3 { top: 66%; height: 2%; animation-delay: .76s; }
@keyframes speedDash {
  0% { opacity: 0; transform: translateX(90%); }
  20% { opacity: .8; }
  80% { opacity: .6; }
  100% { opacity: 0; transform: translateX(-60%); }
}
/* Panel 5: light sweeping across the hand mirror */
.p-mirror {
  position: absolute;
  left: 46%;
  top: 37%;
  width: 44%;
  height: 30%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.p-mirror-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .75) 48%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .75) 52%, transparent 70%);
  transform: translateX(-120%);
  animation: mirrorSweep 4.4s ease-in-out infinite;
}
@keyframes mirrorSweep {
  0%, 12% { transform: translateX(-120%); }
  42%, 100% { transform: translateX(120%); }
}
/* Panel 6: monitor glow pulsing like a live edit session */
.p-screen {
  position: absolute;
  left: 35%;
  top: 34%;
  width: 57%;
  height: 36%;
  background: radial-gradient(ellipse at center, rgba(170, 215, 255, .5), rgba(120, 180, 255, .15) 60%, transparent 80%);
  mix-blend-mode: screen;
  animation: screenGlow 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes screenGlow {
  0%, 100% { opacity: .25; }
  18% { opacity: .8; }
  30% { opacity: .35; }
  55% { opacity: .7; }
  70% { opacity: .3; }
}
/* Panel 7: lightning-bolt eyes pulsing on the amazed fans */
.p-eyebolt {
  position: absolute;
  color: var(--yellow);
  font-size: clamp(7px, .85vw, 17px);
  text-shadow: 0 0 6px rgba(255, 212, 0, .95), 0 0 14px rgba(255, 140, 0, .8);
  pointer-events: none;
  animation: boltFlicker 1.9s ease-in-out infinite;
}
.pe-1 { left: 27%; top: 31%; }
.pe-2 { left: 80%; top: 42%; animation-delay: .6s; }
.pe-3 { left: 14%; top: 64%; animation-delay: 1.2s; }
@keyframes filmFlicker {
  0%, 100% { filter: brightness(1); }
  10% { filter: brightness(1.045); }
  24% { filter: brightness(.97); }
  38% { filter: brightness(1.02); }
  52% { filter: brightness(.985); }
  68% { filter: brightness(1.035); }
  84% { filter: brightness(.975); }
}
/* Diagonal light sweep passing over the whole strip every few seconds, like
   a glint of light catching the film — on top of the flicker for extra
   liveliness in the film-reel area. */
.comic-strip:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .16) 49%, rgba(255, 212, 0, .26) 50%, rgba(255, 255, 255, .16) 51%, transparent 58%);
  transform: translateX(-130%);
  animation: stripSweep 9s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes stripSweep {
  0%, 6% { transform: translateX(-130%); }
  32%, 100% { transform: translateX(130%); }
}
/* Small animated glints over a few character faces/highlights in the strip,
   positioned as percentages so they stay put regardless of viewport width. */
.strip-spark {
  position: absolute;
  z-index: 3;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 18px rgba(255, 212, 0, .85);
  pointer-events: none;
  animation: twinkle 2.6s ease-in-out infinite;
}
.spark-1 { left: 8.6%; top: 47%; font-size: 1.4vw; animation-delay: 0s; }
.spark-2 { left: 21%; top: 40%; font-size: 1.1vw; animation-delay: .5s; }
.spark-3 { left: 51.6%; top: 7%; font-size: 1.3vw; animation-delay: 1s; }
.spark-4 { left: 70.4%; top: 44%; font-size: 1.1vw; animation-delay: 1.5s; }
.spark-5 { left: 90.8%; top: 44%; font-size: 1vw; animation-delay: .3s; }
.spark-6 { left: 96.4%; top: 49%; font-size: .9vw; animation-delay: 1.9s; }
.spark-7 { left: 47%; top: 22%; font-size: 1.2vw; animation-delay: .8s; }
.spark-8 { left: 55.5%; top: 9%; font-size: .8vw; animation-delay: 2.1s; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(18deg); }
}

/* ---------- Shared section layout ---------- */
.section { padding: clamp(70px, 9vw, 140px) clamp(20px, 5vw, 86px); position: relative; }
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 42px;
  text-align: center;
}
.section-title h2, .section h2 { font-size: clamp(44px, 6vw, 88px); }
.section-title span { color: var(--yellow); font-size: 40px; animation: pulse 1.7s infinite; }
/* "…i na prezent": neon-style blink plus a winking face popping in */
.for-whom .section-title em {
  position: relative;
  animation: neonWink 3.6s ease-in-out infinite;
}
@keyframes neonWink {
  0%, 100% { filter: brightness(1); }
  8% { filter: brightness(1.65) drop-shadow(0 0 16px rgba(255, 212, 0, .9)); }
  12% { filter: brightness(.65); }
  16% { filter: brightness(1.5) drop-shadow(0 0 12px rgba(255, 212, 0, .7)); }
  22% { filter: brightness(1); }
  55% { filter: brightness(1.2); }
}
.for-whom .section-title em::after {
  content: "😉";
  position: absolute;
  right: -.85em;
  top: -.55em;
  font-size: .48em;
  text-shadow: 2px 2px 0 #000;
  transform: scale(0) rotate(-15deg);
  animation: winkPop 3.6s ease-in-out infinite;
}
@keyframes winkPop {
  0%, 55%, 100% { transform: scale(0) rotate(-15deg); }
  62% { transform: scale(1.18) rotate(8deg); }
  66%, 84% { transform: scale(1) rotate(-4deg); }
  92% { transform: scale(0) rotate(12deg); }
}
.section p { line-height: 1.6; color: #eee0d5; }

/* ---------- Powers ---------- */
.powers { background: linear-gradient(180deg, #080304, #1b0206); }
.power-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.power-card {
  position: relative;
  min-height: 330px;
  padding: 26px;
  border: 3px solid var(--yellow);
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0, rgba(227, 6, 19, .55), transparent 45%), #0c0708;
  box-shadow: 8px 8px 0 #000;
  overflow: hidden;
}
.power-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 212, 0, .08) 12px 18px);
  opacity: .9;
}
.power-card > * { position: relative; }
.power-card b {
  display: inline-block;
  background: var(--yellow);
  color: #070307;
  font-family: 'Lilita One';
  font-size: 26px;
  padding: 5px 12px;
  border: 2px solid #000;
  transform: rotate(-4deg);
}
/* Bigger, purpose-built animated icons — one custom composition per
   superpower instead of the old small abstract glyphs. */
.power-card .icon {
  position: relative;
  height: 124px;
  display: grid;
  place-items: center;
  font-size: 92px;
  line-height: 1;
  color: var(--yellow);
  margin: 26px 0 18px;
  text-shadow: 0 0 26px rgba(255, 212, 0, .6);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
/* 01 Błyskawiczny focus: viewfinder that hunts, then locks on the red dot */
.focus-ring {
  position: absolute;
  width: 90px;
  height: 90px;
  border: 5px solid var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 212, 0, .45), inset 0 0 12px rgba(255, 212, 0, .25);
  animation: focusHunt 2.6s ease-in-out infinite;
}
.focus-cross {
  position: absolute;
  width: 118px;
  height: 118px;
  background:
    linear-gradient(var(--yellow), var(--yellow)) 50% 0 / 4px 16px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 50% 100% / 4px 16px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 0 50% / 16px 4px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 50% / 16px 4px no-repeat;
}
.focus-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
  animation: dotLock 2.6s ease-in-out infinite;
}
@keyframes focusHunt {
  0%, 100% { transform: scale(1.28); opacity: .5; }
  40%, 90% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); }
}
@keyframes dotLock {
  0%, 35% { opacity: .15; transform: scale(.5); }
  45%, 90% { opacity: 1; transform: scale(1); }
  50% { box-shadow: 0 0 22px var(--red), 0 0 44px rgba(255, 255, 255, .8); }
  100% { opacity: .15; }
}
/* 02 Moc na deadline: comic hand-drawn stopwatch (hard black outline,
   yellow rim, red hand ticking in 30° jumps) zapped by a bolt */
.icon-deadline { animation: tickTock 1.2s ease-in-out infinite; }
@keyframes tickTock {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
.stopwatch {
  position: absolute;
  left: 50%;
  top: 54%;
  translate: -50% -50%;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #fff;
  border: 6px solid #111;
  box-shadow: 0 0 0 4px var(--yellow), 6px 7px 0 rgba(0, 0, 0, .55);
}
/* 12/3/6/9 tick marks */
.stopwatch::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    linear-gradient(#111, #111) 50% 0 / 5px 11px no-repeat,
    linear-gradient(#111, #111) 50% 100% / 5px 11px no-repeat,
    linear-gradient(#111, #111) 0 50% / 11px 5px no-repeat,
    linear-gradient(#111, #111) 100% 50% / 11px 5px no-repeat;
}
/* center pin */
.stopwatch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #111;
}
.sw-btn {
  position: absolute;
  left: 50%;
  top: -19px;
  translate: -50%;
  width: 18px;
  height: 12px;
  background: #111;
  border-radius: 4px 4px 0 0;
}
.sw-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  translate: -50%;
  width: 6px;
  height: 30px;
  border-radius: 4px;
  background: var(--red);
  transform-origin: 50% 100%;
  animation: handSpin 6s steps(12, end) infinite;
}
@keyframes handSpin { to { transform: rotate(360deg); } }
/* 03 Turbo edycja: comic monitor (yellow rim, photo of mountains + sun on
   screen, light sweep) above an export bar racing to 100% */
.icon-edit { animation: editZoom 2.8s ease-in-out infinite; }
@keyframes editZoom {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.07); }
  20% { transform: scale(1); }
}
.monitor {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50%;
  width: 98px;
  height: 66px;
  border-radius: 8px;
  border: 6px solid #111;
  box-shadow: 0 0 0 4px var(--yellow), 6px 7px 0 rgba(0, 0, 0, .55);
  overflow: hidden;
}
.mon-pic {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #6ec1ff 0 58%, #ffd400 58% 100%);
}
/* red comic mountain + white sun on the screen */
.mon-pic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  clip-path: polygon(8% 100%, 38% 26%, 62% 100%);
}
.mon-pic::after {
  content: "";
  position: absolute;
  right: 12%;
  top: 12%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, .9);
}
.mon-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%);
  transform: translateX(-130%);
  animation: mirrorSweep 3.2s ease-in-out infinite;
}
.mon-stand {
  position: absolute;
  left: 50%;
  top: 78px;
  translate: -50%;
  width: 14px;
  height: 16px;
  background: #111;
}
.edit-bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50%;
  width: 88px;
  height: 13px;
  border: 2px solid #000;
  border-radius: 7px;
  background: #191114;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 212, 0, .45);
}
.edit-bar i {
  position: absolute;
  inset: 0;
  width: 30%;
  background: linear-gradient(90deg, var(--yellow), #ff9d00);
  animation: renderFill 1.7s cubic-bezier(.2, .8, .3, 1) infinite;
}
@keyframes renderFill {
  0% { width: 6%; opacity: 1; }
  62% { width: 100%; }
  86% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}
/* 04 Paliwo kreatywne: a tilted comic cup pours a stream of coffee drops
   straight into the open mouth of a masked superhero head. */
.pour-cup {
  position: absolute;
  left: calc(50% - 62px);
  top: 6px;
  width: 46px;
  height: 34px;
  background: #fff;
  border: 5px solid #111;
  border-radius: 4px 4px 14px 14px;
  transform: rotate(-38deg);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
  animation: pourTilt 1.4s ease-in-out infinite;
}
@keyframes pourTilt {
  0%, 100% { transform: rotate(-35deg); }
  50% { transform: rotate(-42deg); }
}
/* coffee inside the cup */
.pour-cup::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  height: 9px;
  background: #6b3a1e;
  border-radius: 3px;
}
/* handle */
.pour-cup::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 5px;
  width: 13px;
  height: 15px;
  border: 5px solid #111;
  border-radius: 50%;
}
.pour-drop {
  position: absolute;
  left: calc(50% - 20px);
  top: 32px;
  width: 11px;
  height: 13px;
  background: #6b3a1e;
  border: 3px solid #111;
  border-radius: 50% 50% 60% 60%;
  opacity: 0;
  animation: dropArc 1.4s linear infinite;
}
.pd-2 { animation-delay: .45s; }
.pd-3 { animation-delay: .9s; }
/* parabola-ish arc from the cup lip into the mouth */
@keyframes dropArc {
  0% { opacity: 0; transform: translate(0, 0) scale(.8) rotate(10deg); }
  10% { opacity: 1; }
  35% { transform: translate(16px, 10px) scale(1) rotate(30deg); }
  65% { transform: translate(34px, 34px) scale(1) rotate(60deg); }
  90% { opacity: 1; transform: translate(52px, 64px) scale(.9) rotate(80deg); }
  100% { opacity: 0; transform: translate(56px, 72px) scale(.5) rotate(90deg); }
}
.hero-head {
  position: absolute;
  right: calc(50% - 66px);
  bottom: 0;
  width: 58px;
  height: 58px;
  background: #f0b48c;
  border: 5px solid #111;
  border-radius: 50% 50% 46% 46%;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
  animation: heroSip 1.4s ease-in-out infinite;
}
@keyframes heroSip {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}
/* red superhero eye-mask with white eyes */
.hh-mask {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 11px;
  height: 15px;
  background: var(--red);
  border: 3px solid #111;
  border-radius: 5px;
}
.hh-mask::before,
.hh-mask::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 8px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}
.hh-mask::before { left: 9px; }
.hh-mask::after { right: 9px; }
/* open mouth, chomping on the stream */
.hh-mouth {
  position: absolute;
  left: 50%;
  translate: -50%;
  bottom: 6px;
  width: 18px;
  height: 13px;
  background: #3a0d08;
  border: 3px solid #111;
  border-radius: 42% 42% 50% 50%;
  animation: mouthChomp 1.4s ease-in-out infinite;
}
@keyframes mouthChomp {
  0%, 100% { height: 13px; }
  50% { height: 8px; }
}
.power-card h3, .who-card h3 {
  font-family: Bangers, 'Lilita One', 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 34px;
  line-height: 1;
  margin: 0 0 12px;
  text-shadow: 3px 3px 0 #000;
}
.power-card p, .who-card p { line-height: 1.6; color: #eee0d5; }

/* ---------- Origin ---------- */
.origin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 40px;
  align-items: center;
  background: url('bg.webp') center/cover fixed;
}
.origin:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45), rgba(0, 0, 0, .75));
}
.origin > * { position: relative; min-width: 0; }
.origin-text { max-width: 760px; }
.origin-products { display: flex; align-items: end; justify-content: center; gap: 0; }
.origin-products img {
  width: 43%;
  filter: drop-shadow(0 30px 35px #000);
  animation: packFloat 5.5s ease-in-out infinite;
}
.origin-products .back { margin-left: -4%; animation-delay: .8s; }
.route {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Barlow Condensed';
  font-size: 26px;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--yellow);
}
/* Animated Wietnam -> Polska route: a nón lá (conical hat) lifts off,
   crossfades into a plane mid-flight and lands on the Polska side. */
.flight-path {
  position: relative;
  flex: 1;
  max-width: 300px;
  height: 44px;
  /* dashed flight line */
  background: repeating-linear-gradient(90deg, rgba(255, 212, 0, .55) 0 12px, transparent 12px 24px) 0 50% / 100% 3px no-repeat;
}
.flyer {
  position: absolute;
  top: 50%;
  left: 0;
  width: 44px;
  height: 44px;
  animation: flyRoute 5.2s ease-in-out infinite;
}
@keyframes flyRoute {
  0%, 6% { left: 0%; transform: translate(0, -50%); }
  50% { transform: translate(-50%, -165%); }
  94%, 100% { left: 100%; transform: translate(-100%, -50%); }
}
.plane {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 212, 0, .75), 2px 2px 0 #000;
  opacity: 0;
  animation: flyPlane 5.2s ease-in-out infinite;
}
@keyframes flyPlane {
  0% { opacity: 0; transform: rotate(-12deg) scale(.6); }
  8%, 92% { opacity: 1; transform: rotate(-8deg) scale(1); }
  100% { opacity: 0; transform: rotate(0deg) scale(.8); }
}

/* ---------- Specs (product details) ---------- */
.specs { background: radial-gradient(circle at 80% 10%, rgba(227, 6, 19, .3), transparent 32%), #0a0305; }
.specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.spec-card {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--yellow);
  border-radius: 20px;
  background: #100609;
  padding: 28px 20px 24px;
  text-align: center;
  box-shadow: 6px 6px 0 #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Vertically centred: cards carry different amounts of content (flames vs
     icon + two-line value), and top-alignment left the shorter ones
     floating at the top of their box. */
  justify-content: center;
  transition: transform .35s cubic-bezier(.2, .9, .2, 1), box-shadow .35s;
}
.spec-card:hover {
  transform: translateY(-8px) rotate(-.6deg);
  box-shadow: 10px 12px 0 #000, 0 0 30px rgba(255, 212, 0, .25);
}
/* Diagonal shine sweeping across each card, staggered so they don't all
   flash together. */
.spec-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 48%, rgba(255, 212, 0, .22) 50%, rgba(255, 255, 255, .16) 52%, transparent 65%);
  transform: translateX(-140%);
  animation: cardShine 5s ease-in-out infinite;
  pointer-events: none;
}
.spec-card:nth-child(2):before { animation-delay: 1.1s; }
.spec-card:nth-child(3):before { animation-delay: 2.2s; }
.spec-card:nth-child(4):before { animation-delay: 3.3s; }
@keyframes cardShine {
  0%, 8% { transform: translateX(-140%); }
  35%, 100% { transform: translateX(140%); }
}
.spec-icon {
  display: block;
  font-size: 34px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 10px rgba(255, 212, 0, .5));
  animation: specIconFloat 3.2s ease-in-out infinite;
}
@keyframes specIconFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}
.spec-label {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--yellow);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0 #000;
}
/* Values in the display font with a hard outline shadow and per-line color
   split, so "80% Robusta / 20% Arabica" reads instantly instead of melting
   into the card. */
.spec-card strong {
  font-family: 'Lilita One', 'Barlow Condensed', sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .5px;
  text-shadow: 2px 2px 0 #000;
}
.v-rob { color: var(--yellow); }
.v-ara { color: #fff; }

/* Blend ratio bar (Mieszanka): the yellow track is the Arabica share and
   the striped red overlay is Robusta. The overlay repeatedly FILLS to 80%
   while its stripes keep flowing to the right — a living gauge. */
.blend-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 14px;
  box-shadow: 0 0 0 2px #000;
  background: linear-gradient(90deg, var(--yellow), #fff3b0);
}
.blend-robusta {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 80%;
  border-right: 3px solid #000;
  background: repeating-linear-gradient(115deg, var(--red) 0 10px, var(--red2) 10px 20px);
  background-size: 29px 100%;
  animation: blendFill 4.4s cubic-bezier(.25, .85, .3, 1) infinite,
             blendFlow 1.1s linear infinite;
}
@keyframes blendFill {
  0% { width: 8%; }
  50%, 88% { width: 80%; }
  100% { width: 8%; }
}
@keyframes blendFlow { to { background-position-x: 29px; } }

/* Roast level flames (Poziom palenia): 5-flame scale, 3 lit for "średni",
   with a pulsing heat glow behind and embers rising off the fire. */
.roast-flames {
  position: relative;
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}
/* Soft heat glow behind the LIT flames only. Circle-shaped, blurred and
   fully transparent well before its own edge — the previous rectangular
   pseudo-element showed its box outline against the card. */
.roast-flames::before {
  content: "";
  position: absolute;
  left: 30%;
  top: 55%;
  width: 78%;
  height: 120%;
  /* `translate` (the standalone property) centers the glow independently of
     `transform`, so the scale animation below can't knock it off-center. */
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 120, 0, .34), rgba(255, 120, 0, .1) 55%, transparent 78%);
  filter: blur(9px);
  animation: heatPulse 1.9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heatPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: .95; transform: scale(1.12); }
}
.flame { font-size: 27px; opacity: .25; filter: grayscale(1); }
.flame.lit {
  opacity: 1;
  filter: none;
  text-shadow: 0 0 12px rgba(255, 140, 0, .9), 0 0 26px rgba(255, 60, 0, .5);
  animation: flameFlicker .95s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.flame.lit:nth-child(2) { animation-delay: .3s; }
.flame.lit:nth-child(3) { animation-delay: .55s; }
@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(-4deg); filter: brightness(1); }
  30% { transform: scale(1.16, 1.28) rotate(3deg); filter: brightness(1.28) saturate(1.4); }
  60% { transform: scale(.94) rotate(-2deg); filter: brightness(.95); }
  80% { transform: scale(1.08, 1.18) rotate(4deg); filter: brightness(1.15); }
}
.ember {
  position: absolute;
  bottom: 42%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffb300;
  box-shadow: 0 0 8px #ff8c00;
  opacity: 0;
  animation: emberRise 2.3s ease-out infinite;
  pointer-events: none;
}
.e1 { left: 14%; }
.e2 { left: 38%; animation-delay: .8s; }
.e3 { left: 56%; animation-delay: 1.5s; }
@keyframes emberRise {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -44px) scale(.35); }
}

/* Waving comic flag of Vietnam (Pochodzenie): pole + red cloth with the
   yellow star, fluttering via skew/rotate with a ripple of light. */
.flag-vn {
  position: relative;
  width: 88px;
  height: 58px;
  margin-bottom: 12px;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .55));
}
.flag-vn::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 6px;
  height: 68px;
  background: linear-gradient(180deg, #f2f2f2, #8d8d8d);
  border: 2px solid #000;
  border-radius: 3px;
}
.flag-cloth {
  position: absolute;
  left: 9px;
  top: 1px;
  display: grid;
  place-items: center;
  width: 76px;
  height: 50px;
  background: linear-gradient(115deg, #da251d, #a3130d);
  border: 3px solid #000;
  border-radius: 2px 6px 6px 2px;
  overflow: hidden;
  transform-origin: left center;
  animation: flagWave 2.6s ease-in-out infinite;
}
.flag-cloth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, .25) 46%, transparent 62%);
  transform: translateX(-120%);
  animation: flagRipple 2.6s linear infinite;
}
@keyframes flagWave {
  0%, 100% { transform: rotate(-2deg) skewY(-3deg); }
  50% { transform: rotate(1.6deg) skewY(3deg); }
}
@keyframes flagRipple { to { transform: translateX(120%); } }
.flag-star {
  color: #ffde00;
  font-size: 27px;
  line-height: 1;
  font-style: normal;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
  animation: starPulse 2.6s ease-in-out infinite;
}
@keyframes starPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* Dancing mini coffee bags (Opakowania): little doypacks in the brand red
   with a crimped seal on top, bouncing side to side. 500 g is bigger and
   gets the golden glow. */
.pack-sizes {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  align-items: flex-end;
}
.pack-bag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 58px;
  height: 74px;
  padding-top: 10px;
  background: linear-gradient(160deg, #ef3542 0%, var(--red) 34%, #8d0d14 100%);
  border: 3px solid #000;
  border-radius: 7px 7px 12px 12px;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .55);
  font-family: 'Lilita One', 'Barlow Condensed', sans-serif;
  font-size: 15px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  transform-origin: 50% 100%;
  animation: bagDance 1.9s ease-in-out infinite;
}
/* Crimped top seal */
.pack-bag::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 5px;
  right: 5px;
  height: 7px;
  background: repeating-linear-gradient(90deg, #6d060c 0 6px, #b3121b 6px 12px);
  border: 2px solid #000;
  border-radius: 3px;
}
.pack-bag i {
  font-style: normal;
  font-size: 13px;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 212, 0, .9);
  line-height: 1;
}
.bag-500 {
  width: 70px;
  height: 92px;
  font-size: 18px;
  animation-delay: .45s;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .55), 0 0 20px rgba(255, 212, 0, .35);
}
.bag-500 i { font-size: 16px; }
@keyframes bagDance {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  25% { transform: rotate(0deg) translateY(-7px); }
  50% { transform: rotate(5deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(-4px); }
}
.specs-notes {
  max-width: 760px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 17px;
}

/* ---------- Zap divider (specs -> tested) ---------- */
.zap-divider {
  position: relative;
  height: 150px;
  overflow: hidden;
  background:
    radial-gradient(rgba(255, 212, 0, .14) 1.5px, transparent 1.5px) 0 0 / 22px 22px,
    repeating-linear-gradient(115deg, #1c0409 0 34px, #2b040c 34px 68px);
  animation: zapDrift 3s linear infinite;
}
/* drifting halftone + stripes = the whole strip feels alive */
@keyframes zapDrift { to { background-position: 22px 22px, 68px 0; } }
/* zigzag torn-comic edges, top teeth point down, bottom teeth point up */
.zap-divider::before,
.zap-divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background:
    linear-gradient(135deg, var(--yellow) 25%, transparent 25%) -8px 0 / 16px 16px repeat-x,
    linear-gradient(-135deg, var(--yellow) 25%, transparent 25%) -8px 0 / 16px 16px repeat-x;
}
.zap-divider::before { top: 0; }
.zap-divider::after { bottom: 0; transform: scaleY(-1); }
/* star-bursts popping one after another */
.zap-burst {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  padding: .9em 1.2em;
  background: var(--yellow);
  color: #14060a;
  font-family: Bangers, 'Lilita One', 'Barlow Condensed', sans-serif;
  font-size: clamp(20px, 2.6vw, 38px);
  text-transform: uppercase;
  letter-spacing: 1px;
  clip-path: polygon(4% 19%, 22% 20%, 29% 0, 43% 17%, 64% 4%, 69% 23%, 96% 13%, 84% 36%, 100% 52%, 80% 57%, 89% 84%, 64% 71%, 50% 100%, 38% 74%, 12% 90%, 22% 63%, 0 55%, 18% 43%);
  filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, .65));
  transform: scale(0);
  animation: burstPop 4.8s ease-in-out infinite;
}
.zb-1 { left: 12%; }
.zb-2 { left: 44%; background: var(--red); color: #fff; animation-delay: 1.6s; }
.zb-3 { left: 76%; animation-delay: 3.2s; }
@keyframes burstPop {
  0%, 4% { transform: scale(0) rotate(-18deg); }
  10% { transform: scale(1.18) rotate(-5deg); }
  14%, 30% { transform: scale(1) rotate(-8deg); }
  38%, 100% { transform: scale(0) rotate(8deg); }
}
.zap-bolt {
  position: absolute;
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(255, 212, 0, .9), 2px 2px 0 #000;
  animation: boltFlicker 2s ease-in-out infinite;
}
.zd-1 { left: 6%; top: 26%; font-size: 26px; }
.zd-2 { left: 33%; top: 58%; font-size: 20px; animation-delay: .5s; }
.zd-3 { left: 64%; top: 24%; font-size: 24px; animation-delay: 1s; }
.zd-4 { left: 92%; top: 55%; font-size: 21px; animation-delay: 1.5s; }
/* Partner logos blinking into the strip between the bursts */
.zap-logo {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: auto;
  opacity: 0;
  animation: logoBlink 4.8s ease-in-out infinite;
}
.zl-96 {
  left: 27%;
  height: 64px;
  filter: drop-shadow(0 0 12px rgba(255, 212, 0, .65)) drop-shadow(2px 3px 0 rgba(0, 0, 0, .6));
  animation-delay: .8s;
}
.zl-stolz {
  left: 63%;
  height: 48px;
  filter: drop-shadow(0 0 12px rgba(255, 212, 0, .65)) drop-shadow(2px 3px 0 rgba(0, 0, 0, .6));
  animation-delay: 2.4s;
}
@keyframes logoBlink {
  0%, 100% { opacity: 0; transform: scale(.6); }
  5% { opacity: 1; transform: scale(1.12); }
  8% { opacity: .25; }
  11%, 30% { opacity: 1; transform: scale(1); }
  38% { opacity: 0; transform: scale(.7); }
}

/* ---------- Tested ---------- */
.tested {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 44px;
  align-items: center;
  background: linear-gradient(135deg, #130104, #050202);
}
.tested > * { min-width: 0; }
.tested-image img, .who-card img {
  border: 4px solid var(--yellow);
  border-radius: 28px;
  box-shadow: 14px 14px 0 #000;
  object-fit: cover;
}
/* Positioning context for the steam overlay below */
.tested-image { position: relative; }
/* Anchored over the black mug in edit-desk.webp (rim at ~53% / 58% of the
   photo); the .steam children rise from this box's top edge. */
.desk-cup {
  position: absolute;
  left: 47.5%;
  top: 58%;
  width: 12%;
  height: 1px;
}
.desk-cup .steam {
  width: 12px;
  height: 74px;
  filter: blur(5px);
}
.desk-cup .s1 { left: 6%; }
.desk-cup .s2 { left: 44%; animation-delay: .7s; }
.desk-cup .s3 { left: 80%; animation-delay: 1.3s; }

.tested-copy { padding: 34px; border-left: 5px solid var(--yellow); }
/* Sized so "PHOTOGRAPHY" fits its column whole — the generic h2 scale made
   the break-word fallback split it mid-word (PHOTOGRA-PHY). */
.tested-copy h2 { font-size: clamp(34px, 4.6vw, 70px); }
.badge-96 {
  margin-top: 26px;
  padding: 18px;
  border: 2px solid var(--yellow);
  border-radius: 18px;
  display: flex;
  gap: 18px;
  align-items: center;
  background: #080304;
}
.badge-96 img { width: 104px; height: auto; filter: drop-shadow(0 0 14px rgba(255, 212, 0, .35)); }
/* Superhero-style caption: comic display font with a light beam sweeping
   through the letters, plus a twinkling spark. */
.badge-96 span {
  position: relative;
  font-family: Bangers, 'Lilita One', 'Barlow Condensed', sans-serif;
  font-size: 25px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.15;
  background: linear-gradient(100deg, var(--yellow) 25%, #fff 42%, var(--yellow) 58%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(2px 2px 0 #000);
  animation: heroShine 3s linear infinite;
}
@keyframes heroShine {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
.badge-96 span::after {
  content: "✦";
  position: absolute;
  top: -15px;
  right: -20px;
  font-size: 17px;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 16px rgba(255, 212, 0, .85);
  animation: twinkle 2.4s ease-in-out infinite;
}

/* ---------- Power ticker (animated divider before "Moc zawsze...") ------ */
.power-ticker {
  position: relative;
  overflow: hidden;
  transform: rotate(-1.2deg) scale(1.03);
  border-block: 4px solid var(--yellow);
  background: repeating-linear-gradient(135deg, var(--red) 0 36px, #9c0410 36px 72px);
  box-shadow: 0 0 44px rgba(227, 6, 19, .55), 0 8px 0 rgba(0, 0, 0, .5);
  z-index: 3;
}
.ticker-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: tickerScroll 24s linear infinite;
}
.ticker-track span {
  font-family: Bangers, 'Lilita One', 'Barlow Condensed', sans-serif;
  font-size: clamp(26px, 3vw, 46px);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--yellow);
  text-shadow: 3px 3px 0 #000;
  padding: 16px 0 12px;
}
.ticker-track b { color: #fff; font-weight: 400; text-shadow: 0 0 12px rgba(255, 212, 0, .9), 2px 2px 0 #000; }
@keyframes tickerScroll { to { transform: translateX(-50%); } }
.power-ticker:hover .ticker-track { animation-play-state: paused; }

/* ---------- Always (moc zawsze pod ręką) ---------- */
.always {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 44px;
  align-items: center;
  /* Vertical gradient ending on the exact colour .for-whom starts with, so
     the two sections blend into each other with no hard seam. */
  background: linear-gradient(180deg, #050202, #160007);
}
.always > * { min-width: 0; }
/* Positioning context for the animated overlays below, matching the img's
   own box (the img has no explicit size, so it and this wrapper agree). */
/* Frame lives on the WRAPPER (not the img): absolutely-positioned overlay
   layers use % of the wrapper's padding box, which now equals the image box
   exactly — no border offset. overflow:hidden clips the moving layers
   cleanly at the rounded corners. */
.always-image {
  position: relative;
  border: 4px solid var(--yellow);
  border-radius: 28px;
  box-shadow: -14px 14px 0 #000;
  overflow: hidden;
}
.always-image img {
  display: block;
  width: 100%;
  object-fit: cover;
}
/* Soft gloss sweeping across the framed artwork every few seconds */
.always-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .14) 48%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .14) 52%, transparent 60%);
  transform: translateX(-130%);
  animation: stripSweep 8s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
.always-copy { padding: 34px; border-right: 5px solid var(--yellow); }
/* Bouncing comic location chips next to the copy */
.place-chips { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.place-chip {
  font-family: Bangers, 'Lilita One', 'Barlow Condensed', sans-serif;
  font-size: 24px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #14060a;
  background: var(--yellow);
  border: 3px solid #000;
  padding: 8px 20px 6px;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(-3deg);
  animation: chipJump 2.4s ease-in-out infinite;
}
.place-chip:nth-child(2) {
  transform: rotate(2deg);
  background: var(--red);
  color: #fff;
  animation-delay: .4s;
}
.place-chip:nth-child(3) { transform: rotate(-2deg); animation-delay: .8s; }
@keyframes chipJump {
  0%, 100% { translate: 0 0; }
  12% { translate: 0 -8px; }
  24% { translate: 0 0; }
  30% { translate: 0 -3px; }
  36% { translate: 0 0; }
}

/* Animated steam rising from the drawn coffee cup, and a flickering glow
   over the illustrated lightning bolts — brings the static artwork to
   life. Positions are percentages of the photo, tuned to the actual art. */
.room-steam {
  position: absolute;
  width: 12px;
  height: 15%;
  min-height: 60px;
  max-height: 100px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  filter: blur(5px);
  pointer-events: none;
  animation: steam 3.2s ease-in-out infinite;
}
.rs-1 { left: 80%; top: 44%; }
.rs-2 { left: 83.5%; top: 40%; animation-delay: .7s; }
.rs-3 { left: 87%; top: 44%; animation-delay: 1.3s; }

.room-bolt {
  position: absolute;
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(255, 212, 0, .9), 0 0 26px rgba(255, 100, 0, .75);
  pointer-events: none;
  animation: boltFlicker 2.3s ease-in-out infinite;
}
.bolt-1 { left: 74.5%; top: 24%; font-size: clamp(18px, 2.6vw, 34px); animation-delay: 0s; }
.bolt-2 { left: 83.5%; top: 17%; font-size: clamp(22px, 3.4vw, 46px); animation-delay: .5s; }
.bolt-3 { left: 92%; top: 27%; font-size: clamp(18px, 2.6vw, 34px); animation-delay: 1s; }
@keyframes boltFlicker {
  0%, 100% { opacity: .25; transform: scale(.9); }
  8% { opacity: 1; transform: scale(1.08); }
  14% { opacity: .3; transform: scale(.92); }
  22% { opacity: .95; transform: scale(1.05); }
  40% { opacity: .35; transform: scale(.95); }
  55% { opacity: 1; transform: scale(1.1); }
  70% { opacity: .3; transform: scale(.9); }
}

/* ---------- For whom ---------- */
/* Starts on .always's end colour and fades down; the red glow moved to
   mid-height so it no longer cuts a hard edge at the section boundary. */
.for-whom {
  background:
    radial-gradient(circle at 25% 52%, rgba(227, 6, 19, .30), transparent 32%),
    linear-gradient(180deg, #160007 0, #090304 460px);
}
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.who-card {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--yellow);
  border-radius: 28px;
  background: #100609;
  min-height: 460px;
  box-shadow: 12px 12px 0 #000;
}
.who-media { position: relative; overflow: hidden; }
/* Aspect-ratio (not a fixed pixel height): the crop stays proportional at
   every viewport width, so wide/4K screens no longer get an extreme
   zoomed-in slice of the artwork. Sources re-exported at full resolution
   (1672px / 1448px wide) so retina displays get sharp pixels. */
.who-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
/* Photographer card: the character stands at the LEFT of the artwork —
   anchor the crop there so he is actually visible, not just the packs. */
.who-card:not(.gift) .who-media img { object-position: left center; }
/* Gift card: keep the superhero's head in frame when 4:3 art crops to 16:9 */
.who-card.gift .who-media img { object-position: center 22%; }
.who-card:hover .who-media img { transform: scale(1.07); }
.who-card div { padding: 28px; }

/* Camera flash popping at the photographer's camera */
.cam-flash {
  position: absolute;
  left: 20%;
  top: 40%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, .3) 45%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: camFlash 3.6s linear infinite;
  pointer-events: none;
}
@keyframes camFlash {
  0%, 54%, 63%, 100% { opacity: 0; }
  56%, 60% { opacity: 1; }
  58% { opacity: .35; }
}
/* Photo/video badges bobbing in the corner of the media */
.who-badge {
  position: absolute;
  bottom: 14px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  font-size: 29px;
  background: #0d0507;
  border: 3px solid var(--yellow);
  border-radius: 50%;
  box-shadow: 4px 4px 0 #000, 0 0 16px rgba(255, 212, 0, .35);
  animation: badgeBob 2.4s ease-in-out infinite;
}
.wb-photo { left: 14px; }
.wb-video { left: 84px; animation-delay: .6s; }
@keyframes badgeBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}
.who-spark {
  position: absolute;
  color: #fff;
  font-size: 20px;
  text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 18px rgba(255, 212, 0, .85);
  animation: twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.ws-1 { right: 16%; top: 18%; }
.ws-2 { left: 42%; top: 58%; animation-delay: 1.2s; font-size: 15px; }
.ws-3 { right: 12%; top: 22%; }
.ws-4 { right: 32%; top: 56%; animation-delay: .9s; font-size: 15px; }
/* The blinking gift box (replaces the old static corner emoji) */
.gift-box {
  position: absolute;
  left: 18px;
  top: 12px;
  font-size: 86px;
  transform-origin: 50% 85%;
  filter: drop-shadow(5px 5px 0 #000);
  animation: giftBlink 2.2s ease-in-out infinite;
}
@keyframes giftBlink {
  0%, 100% { transform: rotate(-6deg) scale(1); filter: drop-shadow(5px 5px 0 #000) brightness(1); }
  12% { transform: rotate(5deg) scale(1.1); }
  24% { transform: rotate(-4deg) scale(1); }
  50% { transform: rotate(0deg) scale(1.18); filter: drop-shadow(5px 5px 0 #000) drop-shadow(0 0 24px rgba(255, 212, 0, .95)) brightness(1.4); }
  64% { filter: drop-shadow(5px 5px 0 #000) brightness(1); }
}
.gift-glow {
  position: absolute;
  left: 4px;
  top: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 212, 0, .45), transparent 75%);
  filter: blur(7px);
  animation: heatPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 100px 20px;
  /* Ellipse (not circle) so the glow scales to the section's own aspect
     ratio — a forced circle stays small and round on wide/short sections,
     leaving flat, glow-less bands down the left and right edges. */
  background: radial-gradient(ellipse, #360004, #050202 70%);
}
.final-inner { position: relative; z-index: 2; }
.final-cta h2 { font-size: clamp(54px, 9vw, 128px); margin-bottom: 40px; }
.cta-mega span { font-size: clamp(62px, 9vw, 142px); padding: 22px 80px; }
.final-cta p { font-weight: 800; color: #ffeedd; }
.final-cup { left: 8%; right: auto; bottom: 52px; }
.final-cup strong { font-size: 60px; }

/* ---------- Footer ---------- */
footer {
  padding: 36px clamp(20px, 5vw, 86px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #050202;
  border-top: 2px solid rgba(255, 212, 0, .45);
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}
footer img { height: 44px; width: auto; }
footer nav {
  display: flex;
  gap: 28px;
  font-family: 'Lilita One', 'Barlow Condensed', sans-serif;
  font-size: 17px;
}
/* Lightened from #9c918b for better contrast against the dark background */
footer p { color: #b7aca4; margin: 0; }

/* ---------- Scroll-reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .9, .2, 1);
}
.reveal.in { opacity: 1; transform: none; }
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.delay-3 { transition-delay: .36s; }

/* ---------- Keyframes ---------- */
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes packFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-22px) rotate(1deg); }
}
@keyframes pop {
  0%, 100% { transform: scale(1) rotate(-7deg); }
  50% { transform: scale(1.06) rotate(-4deg); }
}
@keyframes tilt {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes steam {
  0% { transform: translateY(20px) scale(.6); opacity: 0; }
  35% { opacity: .9; }
  100% { transform: translateY(-95px) scale(1.35); opacity: 0; }
}
@keyframes pan {
  0% { transform: scale(1.08) translateX(-4%); }
  100% { transform: scale(1.08) translateX(4%); }
}
@keyframes pulse { 50% { transform: scale(1.28); filter: drop-shadow(0 0 15px var(--yellow)); } }
@keyframes jolt {
  0%, 100% { transform: translate(0); }
  12% { transform: translate(4px, -5px) rotate(4deg); }
  17% { transform: translate(-2px, 4px) rotate(-3deg); }
}
@keyframes fly { 50% { transform: translateX(12px) translateY(-5px); } }
@keyframes drift {
  from { transform: translate3d(0, 110vh, 0) rotate(0deg); }
  to { transform: translate3d(18vw, -120vh, 0) rotate(360deg); }
}
.flying-bolt {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  color: var(--yellow);
  opacity: .16;
  text-shadow: 0 0 14px var(--yellow);
  animation: drift linear infinite;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero, .origin, .tested, .always, .who-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 130px; }
  .hero-side { display: none; }
  .power-grid, .specs-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-product { min-height: 520px; }
  .site-header nav { gap: 14px; font-size: 15px; }
  .origin-products img { width: 48%; }
  .always-image { order: -1; }
  footer { flex-direction: column; }
}
@media (max-width: 620px) {
  .site-header { height: 78px; padding-inline: 14px; }
  .brand img, .brand-shine { height: 38px; }
  .mini-buy { display: none; }
  /* 4 nav items no longer fit a narrow screen; let them scroll
     horizontally instead of clipping or wrapping over the header. */
  .site-header nav {
    gap: 20px;
    font-size: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 10px;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { flex: 0 0 auto; }
  /* subtle fade to hint there's more to scroll */
  .site-header nav {
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .hero h1 { font-size: 56px; }
  .power-grid, .specs-grid { grid-template-columns: 1fr; }
  .bubble { right: -10px; top: 0; font-size: 24px; }
  .coffee-cup { width: 96px; height: 84px; }
  .cta span { padding: 18px 34px; }
  .section { padding-inline: 16px; }
  .who-card { min-height: auto; }
  .who-card img { height: 220px; }
  .final-cup { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cursor-bolt, .flying-bolt { display: none; }
}