/* ===== MM10 — custom design, no template ===== */

:root{
  /* Premium palette — warm ivory & soft ink, with a champagne-gold secondary for glossy, "old money" accents */
  --bg: #fdfbf7;
  --bg-soft: #f8f5ef;
  --bg-soft-2: #f0ebe0;
  --ink: #1b1916;
  --ink-dim: #726c62;
  --line: rgba(27,25,22,0.13);
  --accent-bright: #1b1916;
  --accent-rgb: 27,25,22;
  --accent-2: #c8a15c;
  --accent-2-rgb: 200,161,92;
  --dark: #15120e;
  --light: #faf7f1;
  --glass-bg: rgba(255,255,255,0.74);
  --glass-bg-soft: rgba(255,255,255,0.46);
  --glass-border: rgba(255,255,255,0.6);
  --radius: 14px;
  --ff-display: 'Inter', sans-serif;
  --ff-serif: 'Playfair Display', Georgia, serif;
  --ff-mono: 'JetBrains Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-display);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:inherit; border:none; background:none; color:inherit; }

::selection{ background:var(--ink); color:var(--light); }

/* loader */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--dark);
  display:flex; align-items:center; justify-content:center;
  transition:transform .8s cubic-bezier(.76,0,.24,1);
}
.loader.done{ transform:translateY(-100%); }
.loader-text{
  font-family:var(--ff-mono); font-size:clamp(11px,3vw,14px); letter-spacing:.35em;
  color:rgba(246,246,245,.6); animation:pulse 1.1s ease-in-out infinite; white-space:nowrap;
}
@keyframes pulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* topbar — restored to the live glass/blur look (matches production). Note: a live
   backdrop-filter on a fixed bar has previously misrendered as dark flickering blocks
   in some Chromium-based browsers (Opera GX included) — a GPU-compositing bug that can
   trigger from unrelated repaints elsewhere in the window. Reinstated at the user's
   explicit request; if the flicker resurfaces, that's the first thing to revisit. */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:400;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 5vw;
  background:rgba(8,8,10,.22);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 8px 30px rgba(0,0,0,.12);
  transform:translateZ(0); will-change:backdrop-filter;
}
.logo{ font-family:var(--ff-serif); font-size:clamp(15px,3.6vw,20px); font-weight:700; letter-spacing:-.01em; color:var(--light); white-space:nowrap; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.logo span{ color:var(--accent-2); }
.topbar-right{ display:flex; align-items:center; gap:10px; }
a.topbar-cta{
  display:none; color:var(--light); border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.1);
  backdrop-filter:none;
}
a.topbar-cta:hover{ border-color:var(--light); background:rgba(255,255,255,.16); }
@media(min-width:860px){ a.topbar-cta{ display:inline-flex; } }

.lang-toggle{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  font-family:var(--ff-mono); font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--light);
  flex-shrink:0; transition:background .3s, color .3s, transform .2s;
}
.lang-toggle:hover{ background:var(--accent-2); color:var(--dark); border-color:var(--accent-2); }
.lang-toggle:active{ transform:scale(.92); }

.social-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  display:inline-flex; align-items:center; justify-content:center; color:var(--light);
  flex-shrink:0; transition:background .3s, color .3s, transform .2s;
}
.social-btn:hover{ background:var(--accent-2); color:var(--dark); border-color:var(--accent-2); }
.social-btn:active{ transform:scale(.92); }

.burger{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  position:relative; z-index:401; flex-shrink:0;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.burger span{ width:16px; height:1px; background:var(--light); transition:transform .3s, opacity .3s; }
.burger.open span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger.open span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* menu overlay */
.menu-overlay{
  position:fixed; inset:0; z-index:399; background:var(--dark); color:var(--light);
  display:flex; flex-direction:column; justify-content:space-between; gap:40px;
  padding:110px 6vw 50px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  clip-path:circle(0% at calc(100% - 40px) 40px);
  transition:clip-path .7s cubic-bezier(.76,0,.24,1);
}
.menu-overlay.open{ clip-path:circle(150% at calc(100% - 40px) 40px); }
.menu-links{ display:flex; flex-direction:column; gap:4px; }
.menu-link{
  font-family:var(--ff-serif); font-size:clamp(30px,7vw,64px); font-weight:600; letter-spacing:-.01em;
  padding:12px 0; border-bottom:1px solid rgba(246,246,245,.14);
  transition:opacity .3s, padding-left .3s, color .3s;
}
.menu-link:hover{ padding-left:16px; opacity:1; color:var(--accent-2); }
.menu-footer{ display:flex; gap:60px; flex-wrap:wrap; font-family:var(--ff-mono); font-size:14px; }
.menu-footer .label{ opacity:.5; margin-bottom:6px; text-transform:uppercase; font-size:11px; letter-spacing:.1em; }
.menu-footer a{ font-size:16px; word-break:break-word; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px;
  border-radius:999px; font-family:var(--ff-mono); font-size:13px; letter-spacing:.03em;
  transition:transform .3s cubic-bezier(.76,0,.24,1), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn-solid{
  position:relative;
  background:var(--ink); color:var(--light);
  border:1px solid var(--accent-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 20px rgba(0,0,0,.22);
}
.btn-solid:hover{ background:#211f1a; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 26px rgba(0,0,0,.3); }
.btn-ghost{ border:1px solid var(--line); background:var(--glass-bg-soft); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-line{ border:1px solid var(--line); background:var(--glass-bg-soft); }
.btn-line:hover{ border-color:var(--ink); color:var(--ink); }
.btn-big{ padding:22px 44px; font-size:16px; }
.magnetic{ will-change:transform; }

/* section shell */
.section{ padding:clamp(64px,12vh,120px) 6vw; position:relative; }
.section-dark{ background:var(--dark); color:var(--light); }

/* dla-sceptykow and cennik are both light, back to back — hairline stops them reading as one block */
#cennik{ border-top:1px solid var(--line); }

/* visual break between two consecutive dark sections — a quiet chrome hairline marks the seam */
.section-split{
  background:var(--dark); padding:64px 6vw; display:flex; justify-content:center;
}
.section-split span{
  display:block; width:100%; max-width:260px; height:1px; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--accent-2), transparent);
}
.section-dark .section-note{ color:rgba(246,246,245,.6); }
.section-dark .about-lead{ color:var(--light); }
.section-dark .about-text > p{ color:rgba(246,246,245,.65); }
.section-dark .about-points span{ color:rgba(246,246,245,.55); }
.section-dark .portfolio-caption{ color:rgba(246,246,245,.6); }
.section-dark .tag{ background:rgba(246,246,245,.08); border:1px solid rgba(246,246,245,.16); }
/* glass cards read as translucent grey mud on black — make them solid light instead so their dark text stays legible */
.section-dark .benefit-card, .section-dark .contact-tile{
  background:var(--light); border-color:transparent;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.section-dark .benefit-card, .section-dark .contact-tile{ border-top-color:var(--accent-2); }
.section-dark .benefit-card:hover{ box-shadow:0 22px 48px rgba(0,0,0,.45); }
.section-dark .btn-ghost, .section-dark .btn-line,
.footer .btn-ghost, .footer .btn-line{
  border-color:rgba(246,246,245,.3); color:var(--light); background:rgba(255,255,255,.1);
  backdrop-filter:none;
}
.section-dark .btn-ghost:hover, .footer .btn-ghost:hover{ border-color:var(--light); background:rgba(255,255,255,.16); }
.section-dark .btn-line:hover, .footer .btn-line:hover{ border-color:var(--accent-2); color:var(--accent-2); background:rgba(255,255,255,.16); }
.section-head{ margin-bottom:60px; max-width:800px; }
.tag{
  display:inline-flex; align-items:center; font-family:var(--ff-mono); font-size:12px; color:var(--light);
  margin-bottom:20px; letter-spacing:.05em; background:var(--dark); padding:7px 16px 7px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
}
.tag::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:9px; flex-shrink:0;
  background:var(--accent-2);
}
.section-head h2{ font-family:var(--ff-serif); font-size:clamp(30px,5.2vw,54px); font-weight:700; line-height:1.08; letter-spacing:-.01em; }
.section-note{ color:var(--ink-dim); font-size:15px; line-height:1.6; margin-top:16px; max-width:640px; }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
/* phones: a card peeking in at the edge of a swipe strip is only a sliver of its
   own width — nowhere near the 15% visible the reveal observer needs to fire — so
   it sat invisible for up to ~1s (looking "not loaded") until either the observer
   caught up or the user scrolled it further into view. The whole point of the peek
   is to be seen immediately, so these cards skip the scroll-triggered fade-in and
   are just there right away. */
@media(max-width:639px){
  .benefits-grid .benefit-card.reveal,
  .steps-grid .step-card.reveal,
  .portfolio-grid .portfolio-card.reveal{
    opacity:1; transform:none;
  }
}

/* HERO — full-bleed gold/black texture, content sits left in a dark overlay */
.hero{
  min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:150px 6vw 90px; position:relative; overflow:hidden;
  background:
    linear-gradient(100deg, rgba(15,13,10,.88) 0%, rgba(15,13,10,.72) 42%, rgba(15,13,10,.34) 75%, rgba(15,13,10,.15) 100%),
    url('../img/hero-bg.jpg') center/cover no-repeat;
  background:
    linear-gradient(100deg, rgba(15,13,10,.88) 0%, rgba(15,13,10,.72) 42%, rgba(15,13,10,.34) 75%, rgba(15,13,10,.15) 100%),
    image-set(url('../img/hero-bg.webp') type('image/webp'), url('../img/hero-bg.jpg') type('image/jpeg')) center/cover no-repeat;
  color:var(--light);
}
.hero-eyebrow{
  font-family:var(--ff-mono); font-size:13px; letter-spacing:.15em; color:rgba(250,247,241,.65);
  margin-bottom:22px; position:relative; z-index:1; display:inline-flex; align-items:center;
}
.hero-eyebrow::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:10px; flex-shrink:0;
  background:var(--accent-2);
}
.hero-title{
  font-family:var(--ff-serif); font-size:clamp(34px,7vw,92px); font-weight:700; line-height:1.02; letter-spacing:-.02em;
  position:relative; z-index:1; max-width:900px; color:var(--light);
}
.hero-title span{ display:block; }
.hero-title em{ font-style:italic; color:var(--accent-2); }
.hero-italic{ font-style:italic; font-weight:400; color:rgba(250,247,241,.55); }
.hero-sub{
  font-size:18px; color:rgba(250,247,241,.78); max-width:540px; margin-top:32px; line-height:1.6;
  position:relative; z-index:1;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; position:relative; z-index:1; }
.hero .btn-solid, .hero .btn-line,
.hero .btn-solid:hover, .hero .btn-line:hover{
  background:var(--ink) !important; color:var(--light) !important; border-color:rgba(250,247,241,.25) !important;
  backdrop-filter:none !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 20px rgba(0,0,0,.22) !important;
}
.hero-scroll{
  position:absolute; bottom:36px; left:6vw; display:flex; align-items:center; gap:14px;
  font-family:var(--ff-mono); font-size:12px; color:rgba(250,247,241,.6); letter-spacing:.1em; z-index:1;
}
.scroll-line{ width:1px; height:50px; background:rgba(250,247,241,.25); position:relative; overflow:hidden; }
/* animates transform, not top — top forces layout on every frame (flagged by
   Lighthouse as a non-composited animation); translateY is GPU-composited, same
   motion, far cheaper for a loop that runs forever. */
.scroll-line i{ position:absolute; top:0; left:0; width:100%; height:50%; background:var(--accent-2); animation:scrolldown 1.8s ease-in-out infinite; }
@keyframes scrolldown{ 0%{ transform:translateY(-25px); } 100%{ transform:translateY(50px); } }

/* marquee */
.marquee{ background:var(--dark); overflow:hidden; padding:18px 0; }
.marquee-track{ display:flex; width:max-content; animation:marquee linear infinite; animation-duration:var(--marquee-duration, 26s); }
.marquee-set{ display:flex; align-items:center; gap:40px; padding-right:40px; flex:none; }
.marquee-track span{ font-family:var(--ff-mono); font-size:14px; letter-spacing:.06em; color:var(--light); white-space:nowrap; }
.marquee-set span:nth-child(odd){ font-weight:700; color:var(--accent-2); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(var(--marquee-shift, -50%));} }

/* fundamenty — technical trust section: promises on the left, a code-editor mockup on the right */
.fund-grid{ display:grid; grid-template-columns:1fr; gap:50px; }
@media(min-width:900px){ .fund-grid{ grid-template-columns:1fr .9fr; gap:60px; align-items:stretch; } }
/* min-width:0 stops these grid/flex items from being forced wide by the non-shrinking
   (flex-shrink:0) cards inside their nested swipe strip — without it the whole page
   gains horizontal scroll on mobile just from that strip's own content. */
.fund-carousel, .steps-carousel, .benefits-carousel{ min-width:0; }
.fund-list{ display:flex; flex-direction:column; gap:30px; }
.fund-item{ display:flex; gap:18px; align-items:flex-start; }
.fund-num{
  font-family:var(--ff-mono); font-size:12.5px; font-weight:700; color:var(--ink); letter-spacing:.02em;
  background:rgba(var(--accent-rgb),.05); border:1px solid var(--line); border-radius:10px;
  width:38px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.fund-item h3{ font-size:18px; font-weight:700; margin-bottom:6px; color:var(--ink); letter-spacing:-.01em; }
.fund-item p{ color:var(--ink-dim); font-size:14.5px; line-height:1.65; }

.fund-visual{ display:flex; justify-content:center; align-items:stretch; }
.code-window{
  width:100%; max-width:460px; border-radius:var(--radius); overflow:hidden;
  background:var(--dark); border:1px solid rgba(200,161,92,.18);
  box-shadow:0 22px 50px rgba(27,25,22,.16), 0 0 0 1px rgba(200,161,92,.1);
  display:flex; flex-direction:column;
}
.code-window-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:12px 16px;
  background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08);
}
.code-window-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.code-window-title{ margin-left:8px; font-family:var(--ff-mono); font-size:11px; color:rgba(255,255,255,.4); }
.code-window-body{ flex:1 1 auto; padding:28px 26px; overflow:auto; }
.code-window-body pre{ margin:0; }
.code-window-body code{
  font-family:var(--ff-mono); font-size:13.5px; line-height:1.9; color:rgba(255,255,255,.6);
  white-space:pre-wrap; word-break:break-word;
}
/* desktop: the window is taken out of the grid's height flow and enlarged (~1.5x),
   pulled up out of .fund-visual by a fixed offset so its top edge lines up with the
   section heading's top instead of the grid row's top */
@media(min-width:900px){
  .fund-visual{ position:relative; display:block; }
  .code-window{
    position:absolute; top:-240px; left:50%; transform:translateX(-50%);
    width:clamp(380px, 48vw, 690px); max-width:none;
  }
  .code-window-bar{ padding:16px 20px; gap:9px; }
  .code-window-dot{ width:12px; height:12px; }
  .code-window-title{ font-size:14px; margin-left:10px; }
  .code-window-body{ padding:38px 34px; }
  .code-window-body code{ font-size:17px; }
}
.cw-tag{ color:var(--accent-2); }
.cw-attr{ color:rgba(255,255,255,.55); }
.cw-str{ color:#e3c98a; }
/* generic prev/next controls for any mobile swipe-strip (fund, steps, stock chart) —
   hidden by default, shown only in the mobile media query below. */
.carousel-nav{ display:none; }

/* phones: the code-window mockup sits as its own compact block above the swipeable
   trust-point cards (not squeezed in among them, not stacked below either). */
@media(max-width:639px){
  .fund-visual{ display:flex; order:-1; margin-bottom:16px; }
  .code-window-body{ padding:18px 16px; }
  .code-window-body code{ font-size:11px; line-height:1.75; }
  .fund-list{
    display:flex; flex-direction:row; gap:14px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    touch-action:pan-x pan-y;
    padding:4px 4px 10px; margin:0 -4px;
    /* fade only on the edge that actually has a neighbour to peek at — script.js
       toggles .at-start/.at-end as you scroll. Fading the START edge while the
       first card is on screen would fade the first card itself for no reason
       (there's nothing behind it to hint at), same for the last card's end edge. */
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image:linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .fund-list.at-start{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
    mask-image:linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
  }
  .fund-list.at-end{
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14px);
    mask-image:linear-gradient(to right, transparent, #000 14px);
  }
  .fund-list.no-fade{ -webkit-mask-image:none; mask-image:none; }
  .fund-item{
    flex:0 0 78%; scroll-snap-align:center; flex-direction:column; gap:10px;
    background:var(--light); border:1.5px solid var(--line); border-top:3px solid var(--accent-2);
    border-radius:var(--radius); padding:20px; box-shadow:0 10px 26px rgba(28,29,31,.08);
  }

  .carousel-nav{ display:flex; justify-content:center; gap:12px; margin-top:8px; }
  .carousel-nav-btn{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--accent-rgb),.06); border:1px solid var(--line); color:var(--ink);
    font-family:var(--ff-mono); font-size:18px; line-height:1; cursor:pointer;
    transition:background .2s, transform .15s;
  }
  .carousel-nav-btn:active{ transform:scale(.9); background:rgba(var(--accent-rgb),.12); }
  .carousel-nav-btn[disabled]{ opacity:.3; pointer-events:none; }
  .section-dark .carousel-nav-btn{
    background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:var(--light);
  }
  .section-dark .carousel-nav-btn:active{ background:rgba(255,255,255,.16); }
}

/* about */
.about{ display:flex; flex-direction:column; gap:44px; }
.about-top{ display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center; max-width:760px; margin:0 auto; }
@media(max-width:700px){ .about-top{ grid-template-columns:1fr; text-align:center; justify-items:center; } }
.about-photo-wrap{ display:flex; }
.about-photo{
  width:220px; flex-shrink:0;
  overflow:hidden; position:relative; border-radius:var(--radius);
  background:linear-gradient(160deg, var(--bg-soft-2), var(--bg-soft));
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 16px 40px rgba(28,29,31,.12);
}
@media(min-width:640px){ .about-photo{ width:260px; } }
.about-photo img{ width:100%; height:auto; display:block; }
.about-heading .tag{ margin-bottom:16px; }
.about-heading h2{ font-family:var(--ff-serif); font-size:clamp(28px,4.4vw,44px); font-weight:700; line-height:1.1; letter-spacing:-.01em; margin-bottom:16px; }
.about-lead{ font-size:19px; color:var(--ink); margin-bottom:0; line-height:1.5; max-width:620px; }
.about-text > p{ color:var(--ink-dim); line-height:1.7; margin-bottom:30px; max-width:820px; }
.about-points{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:600px){ .about-points{ grid-template-columns:repeat(3,1fr); } }
.about-points div{ border-top:3px solid var(--accent-2); padding-top:14px; display:flex; flex-direction:column; gap:6px; }
.about-points strong{ font-size:15px; }
.about-points span{ color:var(--ink-dim); font-size:13px; line-height:1.5; }

/* dopasowanie — stock-chart style panel */
#dopasowanie{ padding-top:50px; padding-bottom:70px; }
#dopasowanie .section-head{ margin-bottom:18px; }
.stock-window-bar{
  display:flex; align-items:center; gap:7px; padding:8px 16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(200,161,92,.18); border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius) var(--radius) 0 0;
}
.stock-window-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.stock-window-title{ margin-left:8px; font-family:var(--ff-mono); font-size:11px; color:rgba(255,255,255,.4); }
.stock-panel-body{
  background:rgba(0,0,0,.15); border:1px solid rgba(200,161,92,.18); border-top:none;
  border-radius:0 0 var(--radius) var(--radius); padding:14px 18px 18px;
  box-shadow:0 22px 50px rgba(0,0,0,.25);
}
@media(min-width:640px){ .stock-panel-body{ padding:16px 28px 22px; } }
.stock-big-heading{
  font-family:var(--ff-serif); font-weight:700; font-size:clamp(18px,2.8vw,25px); line-height:1.25; letter-spacing:-.01em;
  color:var(--light); margin-bottom:6px; max-width:760px;
}
.stock-caption{ font-size:13.5px; color:rgba(246,246,245,.7); line-height:1.55; margin-top:0; margin-bottom:14px; max-width:620px; }
.stock-chart-hint{
  font-family:var(--ff-mono); font-size:12px; color:rgba(246,246,245,.55); line-height:1.6;
  margin-top:-4px; margin-bottom:20px; max-width:560px;
  padding-left:14px; border-left:2px solid rgba(var(--accent-2-rgb),.5);
}

.stock-axis-title{
  font-family:var(--ff-mono); font-size:14px; font-weight:700; color:var(--accent-2); letter-spacing:.01em;
}
@media(min-width:640px){ .stock-axis-title{ font-size:15.5px; } }

.stock-chart{ display:flex; gap:6px; align-items:flex-start; }
.stock-yaxis-col{ flex-shrink:0; width:100px; display:flex; flex-direction:column; }
.stock-yaxis-labels{ position:relative; }
.stock-yaxis-labels span{
  position:absolute; right:0; transform:translateY(-50%); white-space:nowrap; text-align:center;
  font-family:var(--ff-mono); font-size:11px; font-weight:700; line-height:1.2; color:var(--light);
  background:rgba(255,255,255,.07); border:1px solid rgba(200,161,92,.35); border-radius:8px; padding:5px 10px;
}
.stock-yaxis-labels span.stock-yaxis-title{
  background:none; border:none; padding:0; text-align:right;
  transform:translateY(calc(-100% - 28px));
  font-size:14px; font-weight:700; color:var(--accent-2);
}
@media(min-width:640px){ .stock-yaxis-labels span.stock-yaxis-title{ font-size:15.5px; } }
@media(min-width:640px){ .stock-yaxis-col{ width:150px; } .stock-yaxis-labels span{ font-size:12.5px; } }

.stock-chart-scroll{
  flex:1; overflow-x:auto;
  /* symmetric fade, see .fund-list above for why a one-sided fade was the bug */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image:linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.stock-chart-inner{ min-width:700px; }
.stock-chart-stage{ position:relative; }
.stock-chart-svg{ width:100%; height:auto; display:block; }
.stock-grid{ stroke:rgba(255,255,255,.07); stroke-width:1; stroke-dasharray:4 6; }
.stock-crosshair{ stroke:rgba(255,255,255,.55); stroke-width:1; stroke-dasharray:3 5; opacity:0; transition:opacity .5s ease 1.5s; }
.stock-panel.in .stock-crosshair{ opacity:1; }
.stock-fill-start{ stop-color:var(--accent-2); stop-opacity:.32; }
.stock-fill-end{ stop-color:var(--accent-2); stop-opacity:0; }
.stock-area{ opacity:0; transition:opacity .8s ease .8s; }
.stock-line{
  fill:none; stroke:var(--accent-2); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:2000; stroke-dashoffset:2000; transition:stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1) .1s;
  filter:drop-shadow(0 0 6px rgba(200,161,92,.45));
}
.stock-dot{ fill:var(--dark); stroke:var(--accent-2); stroke-width:2.5; opacity:0; transition:opacity .5s ease 1.5s; }
.stock-dot-edge{ fill:var(--light); stroke:var(--accent-2); stroke-width:3; opacity:0; transition:opacity .5s ease 1.7s; }
.stock-panel.in .stock-line{ stroke-dashoffset:0; }
.stock-panel.in .stock-area{ opacity:1; }
.stock-panel.in .stock-dot,
.stock-panel.in .stock-dot-edge{ opacity:1; }

.stock-startend{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease 1.7s; }
.stock-panel.in .stock-startend{ opacity:1; }
.stock-se-tag{
  position:absolute; transform:translate(-50%,-135%); white-space:nowrap;
  font-family:var(--ff-mono); font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--dark);
  background:var(--light); border-radius:999px; padding:4px 10px;
}

.stock-xaxis{ position:relative; height:58px; margin-top:10px; }
.stock-xaxis span{
  position:absolute; top:0; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; width:110px; min-height:34px; box-sizing:border-box;
  text-align:center; font-family:var(--ff-mono); font-size:11px; font-weight:700; line-height:1.25; color:var(--light);
  background:rgba(255,255,255,.07); border:1px solid rgba(200,161,92,.35); border-radius:8px; padding:6px 8px;
}
/* moved out of .stock-chart-scroll entirely (it used to live inside the wide,
   horizontally-scrolling track) — now it's a normal block below the whole chart,
   never clipped and never moving when the chart itself is scrolled sideways. */
.stock-xaxis-title{ display:block; text-align:center; margin-top:14px; }

/* the chart is pixel-identical to desktop at every width — same absolute positions for
   both axes, same 700px-wide track. On a phone that means it's wider than the screen,
   so it scrolls sideways (stock-chart-scroll, below) instead of any layout reflowing. */

.stock-close{ margin-top:32px; text-align:center; }
.stock-close p{ font-size:15px; color:rgba(246,246,245,.65); margin-bottom:16px; max-width:600px; margin-left:auto; margin-right:auto; }

/* steps (jak to działa) */
.steps-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:760px){ .steps-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:639px){
  .steps-grid{
    display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    touch-action:pan-x pan-y;
    gap:14px; padding:4px 4px 10px; margin:0 -4px;
    /* fade only on the edge with an actual neighbour, see .fund-list above */
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image:linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .steps-grid.at-start{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
    mask-image:linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
  }
  .steps-grid.at-end{
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14px);
    mask-image:linear-gradient(to right, transparent, #000 14px);
  }
  .steps-grid.no-fade{ -webkit-mask-image:none; mask-image:none; }
  .step-card{
    flex:0 0 78%; scroll-snap-align:center;
    background:var(--glass-bg); border-color:var(--glass-border);
  }
}
.step-card{
  background:var(--bg); border:1px solid var(--glass-border); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 14px 36px rgba(28,29,31,.09);
  transition:transform .3s ease, box-shadow .3s ease;
}
.step-card:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(28,29,31,.16); }
.step-top{
  display:flex; align-items:center; justify-content:flex-end;
  padding:30px 32px 26px; background:var(--ink); border-bottom:2px solid var(--accent-2);
}
.step-num{
  font-family:var(--ff-mono); font-size:48px; font-weight:700; line-height:1; letter-spacing:-.02em;
  color:rgba(255,255,255,.55);
}
.step-body{ padding:28px 32px 34px; }
.step-body h3{ font-size:22px; font-weight:700; margin-bottom:12px; color:var(--ink); letter-spacing:-.01em; }
.step-body p{ color:var(--ink-dim); font-size:15.5px; line-height:1.65; }

/* portfolio */
.portfolio-grid{
  display:flex; gap:20px; overflow-x:auto; overflow-y:hidden; padding-bottom:4px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  /* pan-x only (no pan-y): a sideways drag scrolls this strip; a vertical drag is
     never claimed here at all, so it always falls straight through to the page —
     no scroll-lock on hover. (Listing pan-y here too, like the site's other swipe
     strips do, let some browsers still grab a vertical touch gesture on this row
     before handing it off — pan-x alone avoids that.)
     Belt-and-braces: a JS wheel handler in script.js also forwards vertical
     wheel/trackpad deltas straight to the page. */
  touch-action:pan-x; overscroll-behavior-x:contain;
  /* fade only on the edge with an actual neighbour, see .fund-list above */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask-image:linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  /* hide the native horizontal scrollbar track — the fade + nudge + arrows already
     signal that the strip scrolls, a scrollbar line under it is just noise */
  scrollbar-width:none; -ms-overflow-style:none;
}
.portfolio-grid::-webkit-scrollbar{ display:none; }
.portfolio-grid.at-start{
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
  mask-image:linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
}
.portfolio-grid.at-end{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 20px);
  mask-image:linear-gradient(to right, transparent, #000 20px);
}
.portfolio-grid.no-fade{ -webkit-mask-image:none; mask-image:none; }
@media(min-width:640px){ .portfolio-grid{ gap:24px; } }
.portfolio-nav{ display:flex; justify-content:center; gap:12px; margin-top:16px; }
.portfolio-nav-btn{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--accent-rgb),.06); border:1px solid var(--line); color:var(--ink);
  font-family:var(--ff-mono); font-size:18px; line-height:1; cursor:pointer;
  transition:background .2s, transform .15s;
}
.portfolio-nav-btn:active{ transform:scale(.9); background:rgba(var(--accent-rgb),.12); }
.portfolio-nav-btn[disabled]{ opacity:.3; pointer-events:none; }
.portfolio-card{
  display:block; flex:0 0 auto; width:280px; border-radius:var(--radius); text-decoration:none; color:inherit;
  transition:transform .35s cubic-bezier(.16,1,.3,1); scroll-snap-align:start;
}
/* phones: a percentage width (not a fixed px) so the next card always peeks in from
   the right by the same proportion of the screen on any phone size — same trick the
   other swipe strips (.fund-item, .step-card, .benefit-card) already use, so it's
   obvious there's more to swipe to, everywhere, consistently. */
/* center (not start) so a middle card always shows a sliver of BOTH neighbours,
   matching how .fund-item/.step-card/.benefit-card already behave on phones */
@media(max-width:639px){ .portfolio-card{ width:auto; flex:0 0 78%; scroll-snap-align:center; } }
@media(min-width:640px){ .portfolio-card{ width:320px; } }
@media(min-width:1080px){ .portfolio-card{ width:340px; } }
.portfolio-card:hover{ transform:translateY(-4px); }
.portfolio-frame{
  width:100%; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--glass-border); box-shadow:0 10px 30px rgba(28,29,31,.08);
  background:var(--bg-soft); display:flex; flex-direction:column;
  transition:box-shadow .35s ease;
}
.portfolio-card:hover .portfolio-frame{ box-shadow:0 18px 40px rgba(28,29,31,.14); }
/* fake browser chrome — "macbook" style top bar with domain */
.portfolio-frame-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:10px 14px; background:#eaeaea; border-bottom:1px solid rgba(0,0,0,.08);
}
.portfolio-frame-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--ink); }
.portfolio-frame-dot:nth-child(1){ opacity:.25; }
.portfolio-frame-dot:nth-child(2){ opacity:.4; }
.portfolio-frame-dot:nth-child(3){ opacity:.55; }
.portfolio-frame-url{
  flex:1 1 auto; margin-left:8px; padding:4px 12px; border-radius:999px;
  background:#ffffff; font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-dim);
  text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.portfolio-frame-body{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:#fff; }
/* static screenshot preview: no iframe, no click-to-scroll, no scroll-jacking.
   The image keeps its natural ratio (width:100%, height:auto) so nothing is ever
   cropped — the whole card is a plain link that opens the live site in a new tab. */
.portfolio-frame-body img{
  width:100%; height:auto; display:block;
}
.portfolio-caption{
  margin-top:12px; font-family:var(--ff-mono); font-size:13px; color:var(--ink-dim); text-align:center;
}
.portfolio-link{
  margin-left:8px; color:var(--ink); border-bottom:1px solid rgba(var(--accent-rgb),.4);
  transition:opacity .2s ease;
}
.portfolio-card:hover .portfolio-link{ opacity:.55; }
.section-dark .portfolio-link{ color:var(--light); border-color:rgba(255,255,255,.4); }
.section-dark .portfolio-card:hover .portfolio-link{ opacity:.6; }

/* before/after compare gadget */
.compare-slider{
  position:relative; max-width:960px; margin:0 auto; aspect-ratio:16/10; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--glass-border); user-select:none;
  box-shadow:0 16px 40px rgba(28,29,31,.12);
}
.compare-side{ position:absolute; inset:0; padding:32px; z-index:1; }
.compare-before{ background:#eceeef; color:#8a8c90; z-index:1; }
.compare-before .compare-tag{ color:#8a8c90; }
.compare-after{ background:var(--dark); color:var(--light); clip-path:inset(0 0 0 50%); z-index:2; }
.compare-after::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-2), transparent);
}
.compare-after .compare-tag{ color:var(--accent-2); }
.compare-after, .compare-after *{ opacity:1; visibility:visible; }
.compare-tag{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; }
.compare-block{ margin-top:56px; }

/* point-by-point checklist */
.compare-points{ max-width:960px; margin:32px auto 0; display:flex; flex-direction:column; gap:12px; }
.compare-points-lead{
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--accent-2); margin-bottom:6px;
}
.compare-point{
  border-radius:14px; background:rgba(246,246,245,.05); border:1px solid rgba(246,246,245,.1);
  padding:0 20px; transition:background .25s, border-color .25s;
}
.compare-point.open{ background:rgba(246,246,245,.08); border-color:rgba(246,246,245,.18); }
.compare-point-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 0; text-align:left; font-family:var(--ff-display); font-size:15.5px; font-weight:600; color:var(--light);
}
.compare-point-icon{ font-family:var(--ff-mono); color:var(--light); font-size:19px; transition:transform .3s; flex-shrink:0; }
.compare-point.open .compare-point-icon{ transform:rotate(45deg); }
.compare-point-a{ max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease; display:flex; flex-direction:column; gap:10px; }
.compare-point.open .compare-point-a{ max-height:260px; padding-bottom:20px; }
.compare-point-row{ display:flex; align-items:flex-start; gap:14px; padding:10px 14px; border-radius:10px; }
.compare-point-old{ background:rgba(246,246,245,.03); }
.compare-point-new{ background:rgba(255,255,255,.06); }
.compare-point-tag{
  flex:0 0 128px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; font-weight:700; padding-top:2px;
}
.compare-point-old .compare-point-tag{ color:rgba(246,246,245,.4); }
.compare-point-new .compare-point-tag{ color:var(--light); }
.compare-point-text{ display:flex; align-items:flex-start; gap:8px; font-size:14.5px; line-height:1.4; }
.compare-point-old .compare-point-text{ color:rgba(246,246,245,.4); text-decoration:line-through; text-decoration-color:rgba(246,246,245,.25); }
.compare-point-new .compare-point-text{ color:var(--light); font-weight:500; }
.compare-x{ color:#9a9ca1; font-weight:700; flex:0 0 auto; }
.compare-check{ color:var(--light); font-weight:700; flex:0 0 auto; }
@media(max-width:520px){
  .compare-point-row{ flex-direction:column; gap:4px; }
  .compare-point-tag{ flex:0 0 auto; }
  .compare-point.open .compare-point-a{ max-height:340px; }
}
.fake-site{ margin-top:20px; max-width:420px; }
.fake-site-full{ max-width:none; width:100%; }
.fake-nav{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.fake-logo{ width:26px; height:14px; border-radius:3px; background:#b7b9be; margin-right:auto; }
.fake-navlink{ width:34px; height:8px; border-radius:3px; background:#c7c9cd; }
.fake-site-plain{ font-family:Arial, Helvetica, sans-serif; }
.fake-site-plain h4{ font-size:24px; font-weight:700; color:#5c5e63; line-height:1.25; margin-bottom:10px; }
.fake-site-plain p{ font-size:13.5px; color:#8a8c90; line-height:1.5; max-width:320px; margin-bottom:14px; }
.fake-icon-row{ display:flex; gap:10px; margin-top:18px; }
.fake-icon-row span{ width:34px; height:34px; border-radius:8px; background:#d6d8da; }
.fake-site-custom .fake-logo-text{ font-family:var(--ff-serif); font-weight:700; font-size:14px; margin-right:auto; }
.fake-site-custom .fake-logo-text b{ color:var(--accent-2); }
.fake-site-custom .fake-navlink-text{ font-family:var(--ff-mono); font-size:10px; color:rgba(246,246,245,.55); letter-spacing:.04em; }
.fake-site-custom h4{ font-family:var(--ff-serif); font-size:27px; font-weight:600; line-height:1.15; letter-spacing:-.01em; margin-bottom:10px; }
.fake-site-custom h4 em{ font-style:italic; color:var(--accent-2); }
.fake-site-custom p{ font-size:13.5px; color:rgba(246,246,245,.6); line-height:1.5; max-width:320px; margin-bottom:16px; }
.fake-cta-small{ font-size:10px !important; padding:7px 14px !important; margin-left:auto; }
.fake-hero-row{ display:flex; align-items:center; gap:28px; margin-bottom:26px; }
.fake-hero-copy{ flex:1 1 auto; min-width:0; }
.fake-hero-copy p{ max-width:none; }
.fake-hero-art{
  flex:0 0 auto; width:38%; max-width:220px; aspect-ratio:4/3; border-radius:14px;
  background:linear-gradient(135deg, #6b4a2f 0%, #b5793f 45%, var(--accent-2) 100%);
}
.fake-feature-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.fake-feature{
  flex:1 1 140px; display:flex; flex-direction:column; gap:8px; padding:14px 16px;
  background:rgba(246,246,245,.05); border-radius:10px;
}
.fake-feature b{ font-size:11px; font-weight:600; color:rgba(246,246,245,.75); }
.fake-tagline{ font-style:italic; font-size:12.5px !important; margin-bottom:16px !important; }
.fake-site-plain .fake-tagline{ color:#a7a9ad !important; }
.fake-tagline.accent-tagline{ color:rgba(246,246,245,.45) !important; }
.fake-footer-text{
  font-size:10.5px !important; margin:22px 0 0 !important; padding-top:16px;
  border-top:1px solid rgba(0,0,0,.08);
}
.fake-site-plain .fake-footer-text{ color:#b3b5b9 !important; }
.fake-footer-text.accent-footer{
  color:rgba(246,246,245,.4) !important; border-top:1px solid rgba(246,246,245,.14); font-family:var(--ff-mono);
}
.fake-cta{
  display:inline-block; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:600;
  padding:9px 18px; border-radius:5px; background:#6b6d72; color:#fff;
}
.fake-cta.accent-cta{
  font-family:var(--ff-mono); background:var(--ink); color:var(--light); border-radius:999px; font-weight:700;
}
.compare-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:5; }
.compare-handle{
  position:absolute; top:50%; left:50%; width:42px; height:42px; border-radius:50%;
  background:var(--accent-2); color:var(--dark); display:flex; align-items:center; justify-content:center;
  transform:translate(-50%,-50%); pointer-events:none; font-size:15px; font-weight:700;
  box-shadow:0 0 0 5px rgba(255,255,255,.6), 0 6px 16px rgba(28,29,31,.25);
  z-index:4;
}

/* co robimy — five service pillars, rendered as SVG doric columns on black */
.pillars-stage{
  max-width:1160px; margin:0 auto; padding:26px 4px 0;
}
.pillars-row{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(20px,4.4vw,48px); }
.pillar{ position:relative; display:flex; flex-direction:column; align-items:center; flex:1 1 0; min-width:0; max-width:150px; transition:transform .3s ease; }
.pillar:hover{ transform:translateY(-5px); }
.pillar::after{
  content:''; display:block; width:78%; height:14px; margin:4px auto 0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%);
}
.pillar-svg{ width:100%; height:auto; display:block; }

/* service tile, centered on the shaft — solid card for clear legibility over the marble.
   fixed height (not just width) so every tile reads as the same size, whatever the label's length */
.pillar-inscription{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:82%; height:100px; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:10px 6px; overflow:hidden;
  background:linear-gradient(180deg, rgba(21,18,14,.96), rgba(10,9,7,.96));
  border:1px solid rgba(var(--accent-2-rgb),.8); border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.pillar-numeral{
  display:block; font-family:var(--ff-mono); font-weight:700; font-size:10px; letter-spacing:.16em;
  color:var(--accent-2); margin-bottom:4px; flex-shrink:0;
}
.pillar-inscription-title{
  display:block; font-family:var(--ff-serif); font-weight:700; font-size:clamp(10.5px,1.2vw,13px);
  color:var(--light); line-height:1.25; overflow-wrap:break-word; hyphens:auto;
}

@media(max-width:520px){
  .pillars-row{ gap:10px; }
  .pillar-inscription{ width:90%; height:100px; padding:8px 4px; }
}

.offer-cta{ display:block; width:fit-content; margin:44px auto 0; }

/* pozycjonowanie — a $100 bill torn into shreds, each one a real SEO/ads tactic */
.bill-wrap{ max-width:900px; margin:0 auto 40px; }
.bill-stage{
  position:relative; width:100%; max-width:740px; aspect-ratio:780/330;
  margin:0 auto 56px; padding:0 6px;
}
.bill-piece{
  position:absolute; inset:0 5px; cursor:pointer; transform-origin:center center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  transform:translate(0,0) rotate(0deg); opacity:.94;
  z-index:1;
}
.bill-piece-svg{
  width:100%; height:100%; display:block;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.35));
  animation:billGlow 2.6s ease-in-out infinite;
}
.bill-piece-edge{ fill:none; stroke:#57534a; stroke-width:6; stroke-dasharray:12 9; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.bill-piece:hover, .bill-piece:focus-visible, .bill-piece.is-active{
  transform:translateY(-16px) scale(1.06) rotate(0deg);
  opacity:1;
  z-index:5; outline:none;
}
.bill-piece:hover .bill-piece-svg, .bill-piece:focus-visible .bill-piece-svg, .bill-piece.is-active .bill-piece-svg{
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));
  animation:none;
}
@keyframes billGlow{
  0%, 100%{ filter:drop-shadow(0 5px 8px rgba(0,0,0,.35)); }
  50%{ filter:drop-shadow(0 5px 8px rgba(0,0,0,.35)) drop-shadow(0 0 12px rgba(var(--accent-2-rgb),.6)); }
}

.bill-hint{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 auto 22px; max-width:520px; text-align:center;
  font-family:var(--ff-display); font-size:13.5px; font-weight:600; color:var(--ink-dim);
}
.bill-hint-ico{ flex-shrink:0; color:var(--accent-2); }

.bill-answer{
  position:relative; isolation:isolate; overflow:hidden;
  max-width:600px; margin:0 auto; text-align:center; min-height:150px;
  background:linear-gradient(155deg,#1a160f,#0d0b08);
  border:1px solid rgba(var(--accent-2-rgb),.45); border-radius:var(--radius);
  padding:30px 32px 28px;
  box-shadow:0 16px 34px rgba(28,29,31,.22), inset 0 0 0 1px rgba(var(--accent-2-rgb),.14);
}
/* faint engraved guilloche texture, like security print on a banknote */
.bill-answer::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.055;
  background-image:
    repeating-radial-gradient(circle at 0 0, transparent 0 5px, rgba(var(--accent-2-rgb),1) 5px 6px, transparent 6px 44px),
    repeating-radial-gradient(circle at 100% 100%, transparent 0 5px, rgba(var(--accent-2-rgb),1) 5px 6px, transparent 6px 44px);
}
/* ghost watermark numeral, echoing the "100" bust plate on the bill graphic */
.bill-answer::after{
  content:'100'; position:absolute; z-index:0; pointer-events:none;
  right:-6px; bottom:-22px; font-family:var(--ff-serif); font-weight:700;
  font-size:110px; line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(var(--accent-2-rgb),.16);
}
.bill-panels{ display:grid; position:relative; z-index:1; }
.bill-answer-eyebrow{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:16px;
}
.bill-answer-eyebrow::before, .bill-answer-eyebrow::after{
  content:''; flex:1 1 30px; max-width:30px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-2-rgb),.75));
}
.bill-answer-eyebrow::after{ background:linear-gradient(90deg, rgba(var(--accent-2-rgb),.75), transparent); }
.bill-panel{ position:relative; z-index:1; grid-area:1/1; align-self:start; opacity:0; visibility:hidden; pointer-events:none; }
.bill-panel.is-active{ opacity:1; visibility:visible; pointer-events:auto; animation:billFade .35s ease; }
.bill-panel h3{
  font-family:var(--ff-serif); font-weight:700; font-size:clamp(19px,2.6vw,23px); margin-bottom:12px; color:var(--light);
  padding-bottom:10px; border-bottom:1px dashed rgba(var(--accent-2-rgb),.35);
}
.bill-panel p{ font-size:15.5px; line-height:1.65; font-weight:500; color:rgba(246,246,245,.78); }
@keyframes billFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

.dollar-sources{
  margin:34px auto 0; max-width:620px; text-align:center;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.02em; color:var(--ink-dim);
}

.ads-cta{ display:block; width:fit-content; margin:0 auto; }

/* pricing */
.cennik-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; max-width:1160px; margin:0 auto; }
.cennik-item{ flex:0 0 100%; }
@media(min-width:640px){ .cennik-item{ flex-basis:calc(50% - 8px); } }
@media(min-width:1020px){ .cennik-item{ flex-basis:calc(33.333% - 11px); } }
.cennik-item{
  background:var(--light); border:1px solid var(--line); border-radius:18px; padding:20px 22px;
  box-shadow:0 12px 28px rgba(28,29,31,.07); border-top:4px solid var(--accent-2);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
@media(min-width:640px){ .cennik-item{ min-height:360px; } }
.cennik-item:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(28,29,31,.12); }
.cennik-toggle{
  all:unset; box-sizing:border-box; width:100%; cursor:default;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; margin-bottom:14px;
}
.cennik-toggle-text{ display:contents; }
.cennik-ico{
  width:46px; height:46px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:13px; background:rgba(var(--accent-rgb),.06); border:1px solid var(--line);
  font-family:var(--ff-mono); font-weight:700; font-size:14px; color:var(--ink);
}
.cennik-title{ font-family:var(--ff-serif); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.01em; }
.cennik-price-mini{ display:none; }
.cennik-chevron{ display:none; }
.cennik-body{ display:contents; }
.cennik-price{
  display:table; margin:0 auto 18px; font-family:var(--ff-display); font-size:21px; font-weight:700; letter-spacing:-.01em;
  color:#000; border:2px solid var(--accent-2); border-radius:999px; padding:9px 22px;
}
.cennik-services{ display:flex; flex-wrap:wrap; gap:8px; }
.cennik-services li{
  display:flex; align-items:center; gap:7px; padding:7px 13px 7px 8px; border-radius:999px;
  background:rgba(var(--accent-rgb),.05); border:1px solid var(--line);
  font-family:var(--ff-display); font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.2;
}
.cennik-services li::before{
  content:'✓'; flex-shrink:0; width:16px; height:16px; border-radius:50%;
  background:var(--ink); color:var(--light); font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.cennik-cta{ display:block; width:fit-content; margin:34px auto 0; }

/* pricing — mobile accordion (compact rows, tap to expand, no side-scroll) */
@media(max-width:639px){
  .cennik-grid{ flex-direction:column; gap:8px; }
  .cennik-item{
    flex:0 0 auto; padding:0; border-radius:14px; border-top:1px solid var(--line); border-left:3px solid var(--accent-2);
  }
  .cennik-item:hover{ transform:none; box-shadow:0 12px 28px rgba(28,29,31,.07); }
  .cennik-toggle{
    cursor:pointer; flex-direction:row; align-items:center; text-align:left; gap:10px;
    padding:11px 12px; margin-bottom:0;
  }
  .cennik-ico{ width:30px; height:30px; border-radius:9px; font-size:11px; flex-shrink:0; }
  .cennik-toggle-text{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:1 1 auto; min-width:0; }
  .cennik-title{ font-size:14px; line-height:1.2; }
  .cennik-price-mini{
    display:table; font-family:var(--ff-display); font-size:12.5px; font-weight:700; letter-spacing:-.01em;
    color:#000; border:2px solid var(--accent-2); border-radius:999px; padding:3px 11px;
  }
  .cennik-chevron{
    display:flex; align-items:center; justify-content:center; width:22px; height:22px; flex-shrink:0;
    font-family:var(--ff-mono); font-size:16px; color:var(--ink); transition:transform .3s;
  }
  .cennik-chevron::before{ content:'+'; }
  .cennik-item.open .cennik-chevron{ transform:rotate(45deg); }
  .cennik-body{ display:block; max-height:0; overflow:hidden; transition:max-height .4s ease; }
  .cennik-item.open .cennik-body{ max-height:500px; }
  .cennik-body .cennik-price{ display:none; }
  .cennik-services{ padding:8px 12px 12px; gap:6px; }
  .cennik-services li{ padding:5px 10px 5px 7px; font-size:11.5px; }
}

/* cost banner */
.cost-banner{
  position:relative;
  padding:64px 6vw;
  background:var(--bg);
  color:var(--ink);
  display:flex; flex-wrap:wrap; align-items:center; gap:40px; justify-content:space-between;
}
.cost-banner::before, .cost-banner::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--ink) 50%, transparent);
}
.cost-banner::before{ top:0; }
.cost-banner::after{ bottom:0; }
.cost-banner-text{ flex:1 1 420px; max-width:640px; }
.cost-banner-text h3{ font-family:var(--ff-serif); font-size:clamp(20px,2.6vw,26px); margin-bottom:14px; font-weight:700; letter-spacing:-.01em; }
.cost-banner-text p{ color:var(--ink-dim); font-size:15px; line-height:1.7; }
.cost-banner-text strong{ color:var(--ink); }
.cost-banner-highlight{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:26px 32px; border-radius:18px;
  border:3px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--accent-2) 50%, var(--ink) 50%) border-box;
  box-shadow:0 10px 30px rgba(28,29,31,.12);
}
.cost-banner-amount{ font-family:var(--ff-serif); font-size:clamp(28px,3.4vw,38px); font-weight:700; color:var(--dark); letter-spacing:-.01em; white-space:nowrap; }
.cost-banner-sub{ font-family:var(--ff-mono); font-size:12px; color:var(--dark); }

/* benefits toggle */
.benefits-toggle{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:-24px 0 40px; font-family:var(--ff-mono); font-size:13px; letter-spacing:.03em;
}
.benefits-toggle-label{ color:rgba(246,246,245,.4); transition:color .3s ease; }
.benefits-toggle-label.is-active{ color:var(--light); font-weight:700; }
.benefits-switch{
  width:52px; height:28px; border-radius:999px; flex-shrink:0; position:relative;
  background:rgba(246,246,245,.15); border:1px solid rgba(246,246,245,.25);
  transition:background .3s ease, border-color .3s ease;
}
.benefits-switch[aria-pressed="true"]{ background:var(--accent-2); border-color:var(--accent-2); }
.benefits-switch-thumb{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:var(--light); transition:transform .3s cubic-bezier(.65,0,.35,1);
}
.benefits-switch[aria-pressed="true"] .benefits-switch-thumb{ transform:translateX(24px); background:var(--dark); }

/* benefits */
.benefits-nav{ display:none; }
.benefits-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:640px){ .benefits-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .benefits-grid{ grid-template-columns:repeat(3,1fr); } }
/* phones: six full cards can't fit on one screen readably, so the section becomes a
   swipeable strip instead — one card at a time, snap-scrolled sideways, no vertical scroll. */
@media(max-width:639px){
  .benefits-grid{
    display:flex; grid-template-columns:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    touch-action:pan-x pan-y;
    gap:14px; padding:4px 4px 10px; margin:0 -4px;
    /* fade only on the edge with an actual neighbour, see .fund-list above */
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image:linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .benefits-grid.at-start{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
    mask-image:linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
  }
  .benefits-grid.at-end{
    -webkit-mask-image:linear-gradient(to right, transparent, #000 14px);
    mask-image:linear-gradient(to right, transparent, #000 14px);
  }
  .benefits-grid.no-fade{ -webkit-mask-image:none; mask-image:none; }
  .benefit-card{ flex:0 0 76%; scroll-snap-align:center; }
  .benefits-nav{ display:flex; justify-content:center; gap:12px; margin-top:8px; }
  .benefits-nav-btn{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:var(--light);
    font-family:var(--ff-mono); font-size:18px; line-height:1; cursor:pointer;
    transition:background .2s, transform .15s;
  }
  .benefits-nav-btn:active{ transform:scale(.9); background:rgba(255,255,255,.16); }
  .benefits-nav-btn[disabled]{ opacity:.3; pointer-events:none; }
}
.benefit-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border); border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px rgba(28,29,31,.05);
  padding:30px 26px; transition:border-top-color .35s ease, transform .3s ease, box-shadow .3s ease;
  border-top:3px solid var(--accent-2);
}
.benefit-card:hover{
  transform:translateY(-6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 22px 48px rgba(28,29,31,.14);
}
.benefit-ico{
  font-family:var(--ff-mono); font-weight:700; font-size:13px; letter-spacing:.03em;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px; margin-bottom:16px; color:var(--ink);
  background:rgba(var(--accent-rgb),.06); border:1px solid var(--line);
  transition:background .35s ease, filter .35s ease;
}
.benefit-card h3{ font-size:18px; margin-bottom:8px; color:var(--ink); }
.benefit-card p{ color:var(--ink-dim); font-size:14px; line-height:1.6; }

/* crossfade between the "with a website" and "without one" copy on each card */
.benefit-flip{ display:grid; }
.benefit-face{ grid-area:1/1; transition:opacity .35s ease, transform .35s ease; }
.benefit-face-pos{ opacity:1; transform:translateY(0); }
.benefit-face-neg{ opacity:0; transform:translateY(6px); pointer-events:none; }
#korzysci.benefits-negative .benefit-face-pos{ opacity:0; transform:translateY(-6px); pointer-events:none; }
#korzysci.benefits-negative .benefit-face-neg{ opacity:1; transform:translateY(0); pointer-events:auto; }
#korzysci.benefits-negative .benefit-card{ border-top-color:rgba(246,246,245,.2); }
#korzysci.benefits-negative .benefit-ico{ background:rgba(246,246,245,.1); opacity:.6; }

/* zero wymagan — radial map: hub stays put, arms fan open on click */
#zero-wymagan .section-head{ margin-bottom:36px; }
.myths-wrap{ max-width:900px; margin:0 auto; position:relative; }
.zmap-stage{ position:relative; }

/* the radial map (hub + orbiting nodes + arms) renders at every width now — phones just get
   a smaller hub/nodes/type scale below, instead of falling back to a plain wrapped list. */
.zmap-nodes{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.zmap-node{
  border-radius:18px; border:1px solid rgba(246,246,245,.14);
  background:rgba(246,246,245,.045); cursor:pointer; padding:12px 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.zmap-node:hover{ transform:translateY(-3px); box-shadow:0 10px 24px -10px rgba(0,0,0,.4); }
.zmap-node.is-active{
  border-color:var(--accent-2); background:rgba(var(--accent-2-rgb),.14);
  box-shadow:0 0 0 1px rgba(var(--accent-2-rgb),.3), 0 10px 28px -10px rgba(var(--accent-2-rgb),.55);
}
.zmap-node-ico{ font-family:var(--ff-mono); font-weight:700; font-size:14px; line-height:1; color:rgba(246,246,245,.5); letter-spacing:.03em; }
.zmap-node-label{
  font-family:var(--ff-display); font-size:11.5px; font-weight:600; line-height:1.2;
  color:rgba(246,246,245,.85); text-align:center; overflow-wrap:break-word; word-break:break-word; hyphens:auto;
}

/* answer: plain flowing card below the nodes on mobile; becomes text floating in the fan's gap on desktop */
.zmap-answer{
  background:var(--light); border-radius:var(--radius); padding:28px 30px; margin-top:20px;
  box-shadow:0 16px 40px rgba(0,0,0,.35); text-align:center;
}
.zmap-answer-label{
  font-family:var(--ff-mono); font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-dim); display:block; margin-bottom:6px;
}
/* panels sit stacked in one grid cell so switching myths crossfades instead of snapping */
.zmap-panels{ display:grid; }
.zmap-panel{ grid-area:1/1; opacity:0; pointer-events:none; }
.zmap-panel.is-active{ opacity:1; pointer-events:auto; }
.zmap-panel h3{ font-size:19px; font-weight:600; color:var(--ink); margin:0 0 8px; }
.zmap-panel p{ font-size:14.5px; line-height:1.6; color:var(--ink-dim); margin:0 auto; max-width:440px; }

/* true radial map, at every width — hub, orbiting nodes and connecting arms */
.zmap-stage{ aspect-ratio:1/1; width:100%; max-width:860px; margin:0 auto; }
.zmap-svg{ display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.zmap-line{
  stroke:url(#zmapLineGrad); stroke-opacity:.4; stroke-width:1.5; stroke-linecap:round;
  transition:stroke-opacity .35s ease, stroke-width .35s ease;
}
.zmap-line.is-active{
  stroke:var(--light); stroke-opacity:1; stroke-width:2.25;
  filter:drop-shadow(0 0 6px rgba(var(--accent-2-rgb),.55));
}
#zmapLineGrad stop:first-child{ stop-color:var(--accent-2); stop-opacity:1; }
#zmapLineGrad stop:last-child{ stop-color:var(--accent-2); stop-opacity:.15; }

.zmap-hub{
  display:flex; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:162px; height:162px; border-radius:50%; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(var(--dark), var(--dark)) padding-box,
    linear-gradient(135deg, var(--accent-2), var(--ink)) border-box;
  border:2px solid transparent; z-index:3;
  box-shadow:0 20px 46px -12px rgba(0,0,0,.55), 0 0 0 10px rgba(var(--accent-2-rgb),.05);
  padding:12px; text-align:center;
}
.zmap-hub-text{
  font-family:var(--ff-serif); font-weight:700; font-size:18px; line-height:1.25;
  letter-spacing:-.01em; color:var(--light);
}

/* left/top are driven frame-by-frame from JS (see script.js) so the arms and nodes
   move in perfect lockstep — a CSS transition here would fight the JS tween */
.zmap-node{
  position:absolute; left:var(--nx); top:var(--ny); transform:translate(-50%,-50%);
  z-index:2; width:117px; min-height:91px; padding:12px 8px;
  transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease,
    background .25s ease, box-shadow .25s ease;
}
.zmap-node:hover{ transform:translate(-50%,-50%) translateY(-4px); box-shadow:0 12px 26px -10px rgba(0,0,0,.4); }
.zmap-node-ico{ font-size:15px; }
.zmap-node-label{ font-size:12.5px; }

.zmap-answer{
  position:absolute;
  left:var(--panel-left, 50%); top:var(--panel-top, 50%); width:var(--panel-width, 44%); margin-top:0;
  transform:var(--panel-transform, translate(-50%,-50%)); text-align:center; z-index:1;
  background:none; box-shadow:none; padding:0; border-radius:0;
  opacity:0; pointer-events:none;
  transition:opacity .5s ease;
}
.myths-wrap.has-selection .zmap-answer{ opacity:1; pointer-events:auto; transition:opacity .5s ease .25s; }
.zmap-answer.align-left{ text-align:left; }
.zmap-answer.align-right{ text-align:right; }
.zmap-answer.align-center{ text-align:center; }
.zmap-answer .zmap-answer-label{ color:var(--accent-2); letter-spacing:.09em; }
.zmap-answer .zmap-panel h3{ font-size:19px; color:var(--light); }
.zmap-answer .zmap-panel p{ margin:0; max-width:none; color:rgba(246,246,245,.7); font-size:13.5px; line-height:1.5; }

.zmap-close{ margin-top:32px; text-align:center; }
@media(min-width:860px){ .zmap-close{ margin-top:64px; } }

/* phones: same radial map, scaled down — smaller hub, smaller nodes, smaller type,
   so the whole thing (heading + map) still fits one screen instead of running off it. */
@media(max-width:639px){
  #zero-wymagan .section-head{ margin-bottom:18px; }
  #zero-wymagan .section-head h2{ font-size:22px; }
  .zmap-stage{ max-width:300px; }
  .zmap-close{ margin-top:20px; }
  .zmap-close p{ display:none; }
  .zmap-hub{ width:82px; height:82px; padding:5px; box-shadow:0 12px 26px -10px rgba(0,0,0,.55), 0 0 0 6px rgba(var(--accent-2-rgb),.05); }
  .zmap-hub-text{ font-size:10px; line-height:1.1; }
  .zmap-node{ width:72px; min-height:58px; padding:7px 5px; border-radius:11px; gap:2px; }
  .zmap-node-ico{ font-size:9px; }
  .zmap-node-label{ font-size:8.8px; line-height:1.15; }
  /* the floating "in-the-gap" answer text only works once there's room for it (desktop);
     on a phone the circle is too tight for that, so the answer becomes a plain block that
     flows below the whole map instead of hovering inside it — always readable, never overlapping. */
  .zmap-answer{
    position:static; left:auto; top:auto; width:auto; transform:none;
    margin-top:18px; padding:0 4px;
  }
  .zmap-answer .zmap-panel h3{ font-size:16px; margin-bottom:6px; }
  .zmap-answer .zmap-panel p{ font-size:13px; line-height:1.5; }
  .zmap-answer-label{ font-size:10px; }
}
.zmap-close p{ font-size:15px; color:rgba(246,246,245,.6); margin-bottom:16px; }

/* CTA */
.cta{
  padding:140px 6vw; text-align:center; display:flex; flex-direction:column; align-items:center; gap:36px;
  background:var(--dark); color:var(--light);
}
.cta h2{ font-family:var(--ff-serif); font-size:clamp(36px,8vw,88px); font-weight:700; line-height:.98; letter-spacing:-.02em; }
.cta-sub{ color:rgba(246,246,245,.6); font-size:16px; }

/* FAQ */
.section-compact{ padding-top:72px; padding-bottom:72px; }
.faq-quick{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px; }
.faq-chip{
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.02em; padding:8px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--glass-bg-soft); color:var(--ink-dim);
  cursor:pointer; transition:background .2s, color .2s, border-color .2s;
}
.faq-chip:hover{ border-color:var(--ink); color:var(--ink); }
.faq-chip.active{ background:var(--dark); color:var(--light); border-color:var(--dark); }
.faq-list{ display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:760px){ .faq-list{ grid-template-columns:1fr 1fr; gap:12px 18px; } }
.faq-item{
  border-radius:14px; background:var(--glass-bg);
  border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(28,29,31,.04);
  padding:0 18px; align-self:start; scroll-margin-top:100px; transition:border-color .3s;
}
.faq-item.open{ border-color:var(--accent-2); }
.faq-q{
  width:100%; text-align:left; padding:16px 2px; display:flex; justify-content:space-between; align-items:center;
  font-size:14.5px; font-family:var(--ff-display); font-weight:600; gap:14px; color:var(--ink);
}
.faq-icon{ font-family:var(--ff-mono); color:var(--ink); font-size:18px; transition:transform .3s; flex-shrink:0; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease; padding:0 2px; }
.faq-item.open .faq-a{ max-height:260px; padding-bottom:18px; }
.faq-a p{ color:var(--ink-dim); font-size:13.5px; line-height:1.55; }

/* dla sceptyków — mind-map chart */
.mindmap{ max-width:920px; margin:0 auto; }
.mindmap-stage{
  display:flex; flex-direction:column; align-items:center; gap:36px;
}

.piechart-wrap{
  position:relative; width:min(240px, 62vw); aspect-ratio:1/1; flex:0 0 auto;
}
.piechart-svg{ display:block; width:100%; height:100%; overflow:visible; transform:rotate(-90deg); }
/* four equal quarters, always equal — only color/weight signal which one is active,
   so the ring never redistributes into an unreadable, lopsided pac-man shape */
.mindmap-line{
  fill:none; stroke:var(--ink-dim); stroke-width:30; stroke-linecap:round; cursor:pointer;
  opacity:.32; transition:opacity .3s ease, stroke-width .3s ease, stroke .3s ease;
}
.mindmap-line:hover{ opacity:.55; }
.mindmap-line.active{
  stroke:var(--accent-2); opacity:1; stroke-width:36;
  filter:drop-shadow(0 0 8px rgba(var(--accent-2-rgb),.45));
}

.mindmap-hub{
  display:flex; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:42%; height:42%; border-radius:50%; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(var(--dark), var(--dark)) padding-box,
    linear-gradient(135deg, var(--accent-2), var(--ink)) border-box;
  border:2px solid transparent; color:var(--light); text-align:center;
  font-family:var(--ff-serif); font-weight:700; font-size:14px; line-height:1.25;
  z-index:2; padding:6px; box-shadow:0 14px 34px -10px rgba(0,0,0,.5);
  transition:box-shadow .3s ease;
}

.mindmap-branches{
  position:relative; display:flex; flex-direction:column; gap:16px; width:100%; max-width:460px;
}
.mindmap-node{
  position:relative; display:block; width:100%; text-align:left;
  background:none; border:none; padding:0; cursor:pointer; font:inherit;
}
.mindmap-node-head{
  display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:18px;
  border:1.5px solid var(--line); background:rgba(var(--accent-rgb),.04);
  transition:border-color .25s, background .25s, transform .25s;
}
.mindmap-node:hover .mindmap-node-head{ transform:translateY(-2px); background:rgba(var(--accent-rgb),.08); }
.mindmap-node.active .mindmap-node-head{ border-color:var(--ink); background:var(--ink); }
.mindmap-node.active .mindmap-node-title{ color:var(--light); }
.mindmap-node.active .mindmap-node-ico{ background:rgba(255,255,255,.92); }
.mindmap-node-ico{
  font-family:var(--ff-mono); font-weight:700; font-size:14px; flex:0 0 auto; width:44px; height:44px; border-radius:13px;
  display:inline-flex; align-items:center; justify-content:center; background:#ffffff; color:var(--ink);
  transition:background .25s;
}
.mindmap-node-title{ font-size:16.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em; transition:color .25s; flex:1 1 auto; }

/* toggle badge — signals the whole tile is clickable/expandable */
.mindmap-node-toggle{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; position:relative;
  background:rgba(13,13,14,.08); color:var(--ink); transition:background .25s, transform .3s, color .25s;
  animation:mindmap-hint 1.8s ease-in-out 2;
}
.mindmap-node-toggle::before, .mindmap-node-toggle::after{
  content:''; position:absolute; left:50%; top:50%; background:currentColor; border-radius:2px;
  transform:translate(-50%,-50%);
}
.mindmap-node-toggle::before{ width:11px; height:2px; }
.mindmap-node-toggle::after{ width:2px; height:11px; transition:transform .3s ease; }
.mindmap-node.active .mindmap-node-toggle{ transform:rotate(180deg); background:rgba(255,255,255,.25); color:var(--light); }
.mindmap-node.active .mindmap-node-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
@keyframes mindmap-hint{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.18); }
}

.mindmap-node-desc{
  max-height:0; overflow:hidden; opacity:0;
  margin-top:0; border-radius:0 14px 14px 0; border-left:3px solid transparent;
  background:rgba(var(--accent-rgb),.04);
  color:var(--ink); font-size:15px; font-weight:500; line-height:1.65;
  transition:max-height .4s ease, opacity .3s ease, margin-top .4s ease, padding .4s ease, border-color .3s ease;
}
.mindmap-node.active .mindmap-node-desc{
  max-height:280px; opacity:1; margin-top:10px; padding:14px 18px; border-left-color:var(--ink);
}

@media(min-width:860px){
  .mindmap-stage{ flex-direction:row; align-items:center; justify-content:center; gap:56px; }
  .piechart-wrap{ width:260px; order:0; }

  .mindmap-branches::before{
    content:''; position:absolute; top:32px; bottom:32px; width:1px; background:var(--line);
  }
  .mindmap-branches[data-side="left"]::before{ right:-26px; }
  .mindmap-branches[data-side="right"]::before{ left:-26px; }
  .mindmap-node::after{
    content:''; position:absolute; top:40px; width:26px; height:1px; background:var(--line);
  }
  .mindmap-branches[data-side="left"] .mindmap-node::after{ right:-26px; }
  .mindmap-branches[data-side="right"] .mindmap-node::after{ left:-26px; }
  .piechart-wrap::before, .piechart-wrap::after{
    content:''; position:absolute; top:50%; width:30px; height:1px; background:var(--line);
  }
  .piechart-wrap::before{ left:-30px; }
  .piechart-wrap::after{ right:-30px; }
}

.conviction-close{ margin-top:56px; display:flex; flex-direction:column; align-items:flex-start; gap:22px; max-width:560px; }
.conviction-close p{ font-size:17px; color:var(--ink-dim); line-height:1.5; }

/* contact */
.contact-tiles{ display:grid; grid-template-columns:1fr; gap:20px; max-width:920px; }
@media(min-width:640px){ .contact-tiles{ grid-template-columns:1fr 1fr; } }
@media(min-width:900px){ .contact-tiles{ grid-template-columns:repeat(3,1fr); } }
.contact-tile{
  display:flex; flex-direction:column; gap:10px; padding:36px 30px; border-radius:var(--radius);
  background:var(--glass-bg);
  border:1px solid var(--glass-border); border-top:3px solid var(--accent-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px rgba(28,29,31,.05);
  transition:transform .3s, box-shadow .3s;
}
.contact-tile:hover{ transform:translateY(-4px); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 16px 34px rgba(28,29,31,.1); }
.contact-tile .label{ font-family:var(--ff-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); }
.contact-tile-value{ font-size:19px; font-weight:500; word-break:break-word; color:var(--ink); }

/* footer — solid black band for contrast against the white page */
.footer{ padding:56px 6vw 40px; background:var(--dark); color:var(--light); }
.footer-top{
  display:flex; justify-content:space-between; align-items:center; padding-bottom:36px; flex-wrap:wrap; gap:20px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.footer .logo{ color:var(--light); }
.footer .logo span{ color:var(--accent-2); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:22px; font-family:var(--ff-mono); font-size:12px; color:rgba(246,246,245,.55); flex-wrap:wrap; gap:10px; }

@media(max-width:600px){
  .menu-overlay{ padding:100px 6vw 30px; gap:24px; }
  .menu-links{ gap:0; }
  .menu-link{ padding:9px 0; }
  .menu-footer{ gap:22px 40px; }

  .section{ padding:56px 6vw; }
  .section-head{ margin-bottom:28px; }
  .section-head h2{ font-size:clamp(24px,7vw,32px); }
  .section-note{ font-size:14px; margin-top:10px; }
  .cennik-cta, .offer-cta, .ads-cta{ margin-top:20px; }
  .stock-big-heading{ font-size:16px; margin-bottom:4px; }
  .stock-caption{ font-size:12.5px; margin-bottom:10px; }
  .bill-answer{ padding:20px 20px 18px; }
  .bill-answer-eyebrow{ margin-bottom:8px; }
  .bill-panel h3{ font-size:17px; margin-bottom:6px; }
  .bill-panel p{ font-size:13.5px; line-height:1.5; }
  .hero{ padding-top:100px; justify-content:center; }
  .hero-eyebrow{ margin-bottom:14px; }
  .hero-sub{ font-size:13px; line-height:1.55; opacity:.7; margin-top:14px; }
  .hero-actions{ margin-top:22px; flex-wrap:nowrap; gap:8px; }
  .cta{ padding:100px 6vw; }
  .btn-big{ padding:18px 32px; font-size:14px; }

  .compare-slider{ aspect-ratio:auto; min-height:560px; }
  .compare-side{ padding:16px; overflow-y:auto; }
  .fake-site{ margin-top:10px; max-width:100%; }
  .fake-nav{ margin-bottom:14px; flex-wrap:wrap; row-gap:8px; }
  .fake-site-plain h4, .fake-site-custom h4{ font-size:18px; }
  .fake-icon-row{ margin-top:12px; }
  .fake-footer-text{ margin-top:16px !important; padding-top:12px; }
  .compare-tag{ font-size:10px; }
  .fake-hero-row{ flex-direction:column; align-items:stretch; gap:16px; }
  .fake-hero-art{ width:100%; max-width:none; aspect-ratio:16/9; }
  .fake-cta-small{ margin-left:0; }

  .step-top{ padding:24px 22px 20px; }
  .step-body{ padding:22px 22px 26px; }
  .step-num{ font-size:34px; }
  .benefit-card{ padding:24px 20px; }
  .contact-tile{ padding:26px 22px; }
  #faq{ padding:40px 6vw; }
  #faq .section-head{ margin-bottom:18px; }
  .faq-list{ gap:8px; }
  .faq-item{ padding:0 12px; border-radius:12px; }
  .faq-q{ font-size:13px; padding:11px 2px; gap:10px; }
  .faq-icon{ font-size:15px; }
  .faq-item.open .faq-a{ max-height:220px; padding-bottom:12px; }
  .faq-a p{ font-size:12px; line-height:1.45; }

  .cost-banner{ padding:44px 6vw; gap:24px; }
  .cost-banner-highlight{ padding:20px 24px; width:100%; }

  .hero-actions .btn{
    flex:1 1 0; justify-content:center; padding:10px 12px; font-size:10.5px; letter-spacing:.01em;
  }

  .logo{ font-size:14px; }
  .topbar{ padding:14px 5vw; }
}