/* HDS — /oferta/ : scoped .hof (własny reset + tokeny). Reveal: motyw (.reveal/.is-visible w main.js). */
.hof *,.hof *::before,.hof *::after{margin:0;padding:0;box-sizing:border-box}
.hof {
  --g1:#9e7aff;--g2:#fe8bbb;
  --card:#151227;--card-h:#1c1835;--card-a:#1f1a3d;
  --brd:rgba(158,122,255,0.12);--brd-h:rgba(158,122,255,0.26);--brd-a:rgba(158,122,255,0.5);
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  color:var(--t1);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.hof .w{max-width:1060px;margin:0 auto;padding:0 24px}
.hof .gt{background:linear-gradient(160deg,var(--g1),var(--g2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* .hof .badge — styl w main.css (wspólna pigułka `.eyebrow`). Blok skasowany
   2026-08-07: page-oferta.css ładuje się PO main.css, więc wygrywał kolejnością
   i utrzymywał drugi, konkurencyjny wygląd pigułki. Nie przywracać tutaj. */
.hof .div{height:1px;background:linear-gradient(90deg,transparent,var(--g1),var(--g2),transparent);opacity:0.2;max-width:600px;margin:0 auto}

/* reveal — obsługa przez motyw (.reveal/.is-visible). Poniżej keyframes sekcji. */
@keyframes hofUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes hofScale{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
@keyframes hofSlide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
@keyframes hofPop{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes hofPulse{0%{box-shadow:0 0 0 0 rgba(158,122,255,0.3)}70%{box-shadow:0 0 0 8px rgba(158,122,255,0)}100%{box-shadow:0 0 0 0 rgba(158,122,255,0)}}
@keyframes hofGlow{0%,100%{opacity:0.4}50%{opacity:1}}
@keyframes hofFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes hofSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes hofDash{to{stroke-dashoffset:0}}
@keyframes hofShimmer{0%{left:-100%}50%{left:150%}100%{left:150%}}

/* ═══ HERO ═══ */
.hof .hero{position:relative;padding:var(--sp-sec) 0 var(--sp-sect);text-align:center;overflow:hidden}
.hof .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hof .hero-bg canvas{width:100%;height:100%;opacity:0.35}
.hof .hero-c{position:relative;z-index:1}
.hof .hero h1{font-size:var(--fs-h1);font-weight:800;line-height:1.1;letter-spacing:-0.02em;margin-bottom:18px}
.hof .hero-sub{font-size:var(--fs-400);color:var(--t2);max-width:560px;margin:0 auto;line-height:1.6}
/* Margines jawny — reset `.hof *{margin:0}` zeruje wszystkie, więc bez tego
   przyciski dotykałyby leadu. */
.hof .hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}

/* ═══ PROCESS ═══ */
/* text-align:center zastępuje inline `style="display:flex"` skasowany z process.php —
   ten styl rozciągał pigułkę na całą szerokość (1012 px zamiast pigułki). */
.hof .proc-s{padding:var(--sp-sec) 0;text-align:center}
.hof .proc-s h2{font-size:var(--fs-800);font-weight:800;letter-spacing:-0.02em;margin-bottom:40px}
/* Linia łącząca kroki — cztery kafle bez niej wyglądają jak cztery niepowiązane karty.
   Dorysowuje się przy wejściu w kadr (.reveal → .is-visible z main.js). */
.hof .proc-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
/* .proc-g nosi .reveal wyłącznie po to, żeby dostać .is-visible dla linii —
   własnego fade'u mieć nie może, bo zagnieżdżony .reveal sumuje translateY z dziećmi. */
.js .hof .proc-g.reveal{opacity:1;transform:none;transition:none}
/* z-index:0 + karty na 1 — inaczej linia (absolutna) maluje się PO wierzchu kafli
   i przecina je w poprzek. Ma być widoczna wyłącznie w przerwach między krokami. */
.hof .proc-g::before{content:'';position:absolute;z-index:0;top:46px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,var(--g1),var(--g2),transparent);opacity:0.35;transform:scaleX(0);transform-origin:center;transition:transform 1.1s var(--ease) 0.15s}
.hof .proc-g.is-visible::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .hof .proc-g::before{transition:none;transform:scaleX(1)}
}
.hof .proc{position:relative;z-index:1;text-align:center;padding:26px 16px;border-radius:14px;background:var(--card)!important;border:1.5px solid var(--brd)!important;transition:border-color 0.3s,transform 0.3s}
.hof .proc:hover{border-color:var(--brd-h)!important;transform:translateY(-3px)}
.hof .proc-n{width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,rgba(158,122,255,0.15),rgba(254,139,187,0.15))!important;border:1.5px solid rgba(158,122,255,0.25)!important;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:var(--fs-300);font-weight:800;color:var(--g1)!important}
.hof .proc h3{font-size:var(--fs-600);font-weight:700;margin-bottom:var(--sp-3);color:var(--t1)!important}
.hof .proc p{font-size:var(--fs-300);color:var(--t2)!important;line-height:1.5}

/* ═══ CTA ═══ */
.hof .cta-s{padding:var(--sp-sec) 0;text-align:center}
.hof .cta-box{padding:48px 40px;border-radius:20px;background:var(--card)!important;border:1.5px solid var(--brd)!important;position:relative;overflow:hidden}
.hof .cta-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g1),var(--g2))}
.hof .cta-box h2{font-size:var(--fs-800);font-weight:800;letter-spacing:-0.02em;margin-bottom:var(--sp-4)}
.hof .cta-box p{font-size:var(--fs-400);color:var(--t2)!important;margin-bottom:28px;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.6}
.hof .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* .hof .btn-p / .btn-s — styl w main.css (wspólny system przycisków) */
.hof .shape{position:absolute;border-radius:50%;pointer-events:none;opacity:0.06}
.hof .sh1{width:250px;height:250px;background:radial-gradient(circle,var(--g1),transparent 70%);top:-80px;right:-60px;animation:hofFloat 8s ease-in-out infinite}
.hof .sh2{width:180px;height:180px;background:radial-gradient(circle,var(--g2),transparent 70%);bottom:-50px;left:-50px;animation:hofFloat 10s ease-in-out infinite reverse}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .hof .proc-g{grid-template-columns:1fr 1fr}
  .hof .proc-g::before{display:none}
}
@media(max-width:560px){
  .hof .proc-g{grid-template-columns:1fr;max-width:320px;margin:0 auto}
  .hof .cta-box{padding:32px 20px}
}