/* ════════════════════════════════════════════════════════════════
   ███  AURORA FX  ███   — warstwa „pioneer IT"
   Ciężkie efekty wizualne: konstelacja, perspektywa, wirujące ramki,
   3D-tilt, magnetyczne przyciski, custom cursor, żywy mesh-gradient.
   Dodatkowa warstwa — nie zmienia struktury ani treści.
   ════════════════════════════════════════════════════════════════ */

@property --fx-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ---------- 0. ŻYWY MESH-GRADIENT W TLE CAŁEJ STRONY ---------- */
.fx-aurora-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:#080b12;
}
.fx-aurora-bg::before,
.fx-aurora-bg::after{
  content:""; position:absolute; inset:-40%;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(246,181,58,0.20), transparent 60%),
    radial-gradient(34% 40% at 80% 18%, rgba(232,130,30,0.16), transparent 60%),
    radial-gradient(46% 50% at 62% 82%, rgba(255,210,122,0.12), transparent 60%),
    radial-gradient(40% 44% at 12% 78%, rgba(120,90,255,0.07), transparent 60%);
  filter:blur(40px);
  animation:fxMesh 26s linear infinite;
}
.fx-aurora-bg::after{ animation-duration:38s; animation-direction:reverse; opacity:.7; }
@keyframes fxMesh{
  0%{ transform:translate(0,0) rotate(0deg) scale(1.05); }
  33%{ transform:translate(3%,-2%) rotate(120deg) scale(1.12); }
  66%{ transform:translate(-2%,3%) rotate(240deg) scale(1.0); }
  100%{ transform:translate(0,0) rotate(360deg) scale(1.05); }
}
/* subtelna techniczna siatka punktów na całej stronie */
.fx-grid-dots{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(246,181,58,0.08) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
}

/* ---------- 1. HERO: stack + konstelacja + perspektywa ---------- */
.hero{ perspective:1200px; }
.hero .aurora{ z-index:1; }
.hero-bg, .hero-video-bg{ z-index:0; }
.hero-overlay{ z-index:2; }
.fx-hero-canvas{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  width:100%; height:100%; opacity:.5;
}
/* hero spokojniejszy — aurora-bloomy stonowane */
.hero .aurora{ opacity:.55; filter:blur(78px); }
.hero-inner, .hero-inner-grid{ z-index:6 !important; }

/* sheen lecący po dużych nagłówkach (gradient-clip text) */
.h2 .accent, .h2-large .accent, .hero-title .accent,
.price-name span, .config-result-value, .leasing-amount{
  background-size:220% auto !important;
  animation:fxSheen 6s linear infinite;
}
/* FIX: nagłówek hero rozbijany jest na litery (.split-char) — gradient
   musi siedzieć NA literach, inaczej rodzic (bez własnego tekstu) jest
   przezroczysty i napis „Cztery modele" znika. */
.hero-title .accent,
.hero-title .accent .split-char{
  background:var(--gold-grad) !important;
  background-size:220% auto !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  text-shadow:none !important;
  animation:fxSheen 6s linear infinite;
}
@keyframes fxSheen{ 0%{ background-position:0% center; } 100%{ background-position:200% center; } }

/* ---------- 2. WIRUJĄCE ŚWIETLNE RAMKI (conic) ---------- */
.price-card.featured, .price-card[data-featured="true"],
.config-result, .calc-results .result-card.primary{
  position:relative; isolation:isolate;
}
.price-card.featured::after, .price-card[data-featured="true"]::after,
.config-result::after, .calc-results .result-card.primary::after{
  content:""; position:absolute; inset:-1.5px; z-index:-1; border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--fx-angle),
     #ffd27a, #e8821e, #f6b53a, rgba(246,181,58,0) 55%, #ffd27a);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:fxSpin 5s linear infinite;
}
@keyframes fxSpin{ to{ --fx-angle:360deg; } }

/* ---------- 3. 3D TILT KART (JS ustawia --rx/--ry/--mx/--my) ---------- */
.feature, .scenario, .price-card{
  isolation:isolate;
  transform-style:preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
    translateY(var(--ty,0px));
  transition:transform .18s ease-out, border-color .35s, box-shadow .35s;
}
.fx-tilt-active{ transition:transform .05s linear !important; }
/* świetlny refleks lecący za kursorem po karcie — z-index:-1, żeby NIE
   wymuszać position:relative na dzieciach (psuło absolutne badge'y). */
.feature::before, .scenario::before, .price-card::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(280px 280px at var(--mx,50%) var(--my,0%), rgba(255,210,122,0.16), transparent 60%);
  opacity:0; transition:opacity .35s;
}
.feature:hover::before, .scenario:hover::before, .price-card:hover::before{ opacity:1; }

/* ---------- 4. MAGNETYCZNE PRZYCISKI ---------- */
.btn, .btn-mini, .btn-large{ will-change:transform; }
.btn-primary, .mcta-primary{ position:relative; overflow:hidden; }
/* połysk przelatujący po przycisku na hover */
.btn-primary::after, .mcta-primary::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-18deg); transition:left .6s ease;
}
.btn-primary:hover::after, .mcta-primary:hover::after{ left:130%; }

/* ---------- 5. CUSTOM CURSOR (pierścień + punkt) ---------- */
.fx-cursor-ring, .fx-cursor-dot{
  position:fixed; top:0; left:0; z-index:99999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  mix-blend-mode:screen;
}
.fx-cursor-ring{
  width:38px; height:38px; border:1.5px solid rgba(246,181,58,0.7);
  transition:width .22s ease, height .22s ease, border-color .22s, background .22s;
  box-shadow:0 0 18px rgba(246,181,58,0.25);
}
.fx-cursor-dot{ width:5px; height:5px; background:var(--gold-bright); box-shadow:0 0 10px rgba(246,181,58,0.9); }
.fx-cursor-ring.is-hot{ width:62px; height:62px; border-color:rgba(255,210,122,0.95); background:rgba(246,181,58,0.06); }
@media (hover:none),(max-width:880px){ .fx-cursor-ring,.fx-cursor-dot{ display:none !important; } }

/* ---------- 6. ŚWIETLNE LINIE-SEPARATORY MIĘDZY SEKCJAMI ---------- */
.section + .section::before,
.section-problem::before, .section-solution::before, .section-calc::before,
.section-scenarios::before, .section-cennik::before, .section-vs::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1180px,90%); height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(246,181,58,0.5), transparent);
}

/* ---------- 7. REVEAL: blur-in + stagger (wzmocnienie) ---------- */
.reveal{ filter:blur(8px); }
.reveal.in{ filter:blur(0); transition:filter .9s cubic-bezier(.22,1,.36,1), opacity .9s, transform .9s cubic-bezier(.22,1,.36,1); }

/* ---------- 8. POŁYSK NA OBRAZACH/RAMKACH ---------- */
.image-frame, .scenario-img{ position:relative; overflow:hidden; }
.image-frame::after, .scenario-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 40%, rgba(255,210,122,0.10) 50%, transparent 60%);
  transform:translateX(-100%); transition:transform .9s ease;
}
.image-frame:hover::after, .scenario:hover .scenario-img::after{ transform:translateX(100%); }

/* ---------- redukcja ruchu ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-aurora-bg::before,.fx-aurora-bg::after,.fx-hero-grid,
  .h2 .accent,.h2-large .accent,.hero-title .accent,.price-name span,
  .price-card.featured::after,.config-result::after,.calc-results .result-card.primary::after{
    animation:none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   VIBRAÉ CORE — wplecenie systemu w ofertę sprzętową
   ════════════════════════════════════════════════════════════════ */

/* link w nawigacji — dyskretny, ale wyróżniony złotem */
.topnav a.nav-core{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--gold-bright) !important;
}
.topnav a.nav-core:hover{ color:#fff !important; }
.nav-core-badge{
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:3px 8px; border-radius:99px; color:#1a1205;
  background:var(--gold-grad);
  box-shadow:0 4px 14px rgba(232,130,30,0.35);
}

/* sekcja */
.section-core{ position:relative; overflow:hidden; text-align:center; }
.core-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 12%, rgba(246,181,58,0.16), transparent 70%);
  filter:blur(20px);
}
.section-core .container{ position:relative; z-index:1; }
.core-head{ max-width:820px; margin:0 auto 56px; }
.core-head .eyebrow{ justify-content:center; }
.core-head .h2{ margin:14px 0 22px; }
.core-head .lead{ color:var(--ink-mute); margin:0 auto; max-width:720px; }

/* filary — siatka 3-up */
.core-pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  margin-bottom:52px; text-align:left;
}
@media (max-width:900px){
  .core-pillars{ grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto; }
}
/* karta (wzorowana na .card z landingu Core) */
.core-card{
  position:relative; isolation:isolate; overflow:hidden;
  padding:30px 28px 28px;
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(135%); -webkit-backdrop-filter:blur(14px) saturate(135%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 22px 60px -34px rgba(0,0,0,.8);
  transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .4s, box-shadow .4s;
}
.core-card::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(360px 220px at 50% -12%, rgba(255,210,122,.14), transparent 62%);
  opacity:0; transition:opacity .4s;
}
.core-card:hover{
  transform:translateY(-6px); border-color:var(--line-strong);
  box-shadow:0 32px 72px -30px rgba(0,0,0,.85), 0 0 60px -22px rgba(246,181,58,.28);
}
.core-card:hover::before{ opacity:1; }
.core-card > *{ position:relative; z-index:1; }
.core-card h3{
  font-family:var(--f-display); font-weight:800; letter-spacing:.01em;
  font-size:1.22rem; line-height:1.16; color:var(--ink); margin:18px 0 16px;
}
/* złoty chip ikony (wektor, nie emoji) */
.core-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg, rgba(246,181,58,.18), rgba(232,130,30,.05));
  border:1px solid var(--line-strong);
  box-shadow:inset 0 0 24px -10px rgba(246,181,58,.6);
}
.core-ic svg{ width:24px; height:24px; }
/* checklista funkcji */
.core-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.core-list li{
  position:relative; padding-left:30px; color:var(--ink-mute);
  font-size:.95rem; line-height:1.42;
}
.core-list li::before{
  content:""; position:absolute; left:0; top:.08em;
  width:20px; height:20px; border-radius:7px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%231a1205'/></svg>") center/12px no-repeat,
    var(--gold-grad);
  box-shadow:0 0 12px rgba(246,181,58,.3);
}

/* świetlny band z ofertą 3 mies. + 15h + CTA */
.core-cta-band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:32px; max-width:1000px; margin:0 auto; padding:34px 40px;
  border-radius:var(--radius-lg); position:relative; isolation:isolate; text-align:left;
  background:linear-gradient(180deg, rgba(40,34,20,0.45), rgba(22,28,44,0.6));
  border:1px solid var(--line-strong);
  box-shadow:0 30px 80px -34px rgba(232,130,30,0.4), 0 0 90px -34px rgba(246,181,58,0.3);
}
.core-cta-band::after{
  content:""; position:absolute; inset:-1.5px; z-index:-1; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--fx-angle), #ffd27a, #e8821e, #f6b53a, rgba(246,181,58,0) 55%, #ffd27a);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:fxSpin 5s linear infinite;
}
.core-offer{ display:flex; align-items:center; gap:28px; }
.core-offer-item{ display:flex; flex-direction:column; gap:4px; }
.core-offer-num{
  font-family:var(--f-display); font-weight:900; font-size:clamp(2rem,4vw,2.9rem); line-height:1;
  background:var(--gold-grad); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:fxSheen 6s linear infinite;
}
.core-offer-lab{ font-size:.92rem; color:var(--ink-mute); max-width:200px; }
.core-offer-sep{ width:1px; align-self:stretch; background:linear-gradient(transparent, var(--line-strong), transparent); }
.core-cta-actions{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.core-cta-note{ font-size:.8rem; color:var(--ink-soft); }

@media (max-width:760px){
  .core-cta-band{ flex-direction:column; align-items:stretch; text-align:center; padding:28px 22px; }
  .core-offer{ flex-direction:column; gap:18px; }
  .core-offer-sep{ width:60%; height:1px; align-self:center; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); }
  .core-offer-lab{ max-width:none; }
  .core-cta-actions{ align-items:center; }
}