/* ════════════════════════════════════════════════════════════════════════
   Atlas październikowy — skórka w języku wizualnym nowego landingu (2026-10-22)
   Bricolage Grotesque (nagłówki, liczby) + Inter (treść), bez mono i bez
   wersalików w etykietach, akcent #00f7ff tylko dla CTA i momentu „łamaka”.
   Ruch: zorza, border beam, shimmer, połysk CTA,
   wejścia przy przewijaniu. GSAP z first-edition.html nadal animuje scenę
   hero i katalog — tych elementów tu celowo nie animujemy.
   WYŁĄCZENIE: usuń blok „landing-skin-go” z scripts/build-widget-go.mjs.
   ════════════════════════════════════════════════════════════════════════ */

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

:root{
  --display-go:"Bricolage Grotesque",Inter,system-ui,sans-serif;
  --body-go:Inter,"Segoe UI",system-ui,sans-serif;
  --ease-go:cubic-bezier(.22,1,.36,1);
  --card-go:rgba(11,19,35,.78);
  --card-deep-go:rgba(5,13,27,.9);
  --line-go:rgba(255,255,255,.08);
}

html,body{overflow-x:clip}
body{background:var(--bg);font-family:var(--body-go);letter-spacing:-.006em}
body::before{display:none}
body::after{display:none}

/* ── Tło: zorza + ziarno (warstwa wstrzykiwana w build-widget-go.mjs) ── */
.aurora-go{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
/* Bez filter: blur — miękkość daje sam radial-gradient; rozmyte, ruchome warstwy przycinały na telefonach */
.aurora-go span{position:absolute;border-radius:50%}
.aurora-go span:nth-child(1){left:-12rem;top:-14%;width:640px;height:640px;background:radial-gradient(circle,rgba(0,247,255,.17),transparent 62%);animation:drift-a-go 18s ease-in-out infinite}
.aurora-go span:nth-child(2){right:-14%;top:12%;width:560px;height:560px;background:radial-gradient(circle,rgba(56,120,255,.16),transparent 62%);animation:drift-b-go 22s ease-in-out infinite}
.aurora-go span:nth-child(3){left:30%;bottom:-30%;width:720px;height:520px;background:radial-gradient(circle,rgba(0,247,255,.06),transparent 65%);animation:drift-a-go 26s ease-in-out infinite reverse}
/* Ziarno bez mix-blend-mode (pełnoekranowe mieszanie przeliczało cały ekran co klatkę), tylko od 1024 px */
.aurora-go i{display:none;position:absolute;inset:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift-a-go{50%{translate:120px 60px}}
@keyframes drift-b-go{50%{translate:-100px 80px}}

/* ── Typografia: nagłówki i liczby w Bricolage, etykiety w Inter ── */
h1,h2,h3,h4,summary{font-family:var(--display-go)}
h2{font-weight:800;letter-spacing:-.035em}
h3{font-weight:700;letter-spacing:-.025em}

.topmeta,.eyebrow,.tag,.hero-panel-title,.hero-panel-head small,.catalog-count small,
.catalog-range legend,#catalog-status,.catalog-pagination span,.big-stat small,
.yearstrip-compact .year-head>span,.yearstrip-compact .year-head em,.yearstrip-compact .year-head small,
.year>span,.year-trace-label,th,.access-note span,.fixture-proof-meta,.score-state span,
.history-proof-head span,.active-filter-bar::before,.filter-chip,.catalog-card-index,
.catalog-card-value small,.catalog-range-scale,.sidebar a span,.obs-index,.evidence p,
.competition-list b,summary span,.source,.score,.chain{
  font-family:var(--body-go);letter-spacing:0;text-transform:none
}
.hero-year,.hero-label,.hero-tag,.year-trace .trace-year{font-family:var(--body-go);letter-spacing:0}

.totals b,.catalog-count,.catalog-range-values output,.catalog-card b,.big-stat,
.year b,.yearstrip-compact .year-head b,.score-state b{
  font-family:var(--display-go);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums
}

/* ── Górny pasek — jak na landingu ──
   Na samej górze przezroczysty z ciemnym welonem; po przewinięciu (klasa is-scrolled,
   skrypt wstrzykiwany w build-widget-go.mjs) prawie kryty z cyjanową linią na dole.
   Bez backdrop-filter na telefonie — przyklejony blur przeliczał się przy każdym kroku przewijania. */
.topbar{min-height:64px;background:transparent;border-bottom:1px solid transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .5s ease,border-color .5s ease}
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:96px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#020617,rgba(2,6,23,.75),transparent);transition:opacity .5s ease}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,247,255,.5),transparent);opacity:0;transition:opacity .5s ease}
.topbar.is-scrolled,.topbar.menu-open{background:rgba(2,6,23,.96);border-bottom-color:rgba(255,255,255,.06)}
.topbar.is-scrolled::before,.topbar.menu-open::before{opacity:0}
.topbar.is-scrolled::after,.topbar.menu-open::after{opacity:1}
@media(min-width:1024px){.topbar.is-scrolled{background:rgba(2,6,23,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}

.brand{gap:10px}
.brand img{width:32px;height:32px;filter:none}
.brand strong{font:900 16px/1 Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:-.03em}

.topnav{gap:2px}
.topnav a{position:relative;min-height:40px;padding:0 12px;border-radius:999px;background:none;color:#94a3b8;font-size:14px;font-weight:500}
.topnav a:not(.home-go)::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1px;background:#00f7ff;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.topnav a:hover,.topnav a:focus-visible{color:#fff;background:none}
.topnav a:not(.home-go):hover::after{transform:scaleX(1)}
.topmeta{padding:8px 14px;border-color:rgba(0,247,255,.2);background:rgba(4,18,31,.8);color:#bdfcff;font-size:12px;font-weight:600;line-height:1.35}

/* Burger (telefon) — dwie kreski składające się w X, jak na landingu */
.menu-go{display:none;position:relative;flex:0 0 auto;width:44px;height:44px;margin-left:auto;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.04);color:#fff;cursor:pointer;transition:border-color .3s ease,background-color .3s ease}
.menu-go span{position:absolute;left:12px;height:2px;border-radius:999px;background:currentColor;transition:transform .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1),top .3s cubic-bezier(.22,1,.36,1)}
.menu-go span:nth-child(1){top:16px;width:18px}
.menu-go span:nth-child(2){top:26px;width:12px}
.topbar.menu-open .menu-go{border-color:rgba(0,247,255,.4);background:rgba(0,247,255,.1)}
.topbar.menu-open .menu-go span:nth-child(1){top:21px;transform:rotate(45deg)}
.topbar.menu-open .menu-go span:nth-child(2){top:21px;width:18px;transform:rotate(-45deg)}
.menu-go:focus-visible{outline:2px solid #00f7ff;outline-offset:3px}

@media(max-width:768px){
  .menu-go{display:inline-flex}
  .topmeta{display:none}
  /* Rozwinięte menu: wiersze jak w menu landingu */
  .topbar.menu-open .topnav{display:grid;position:absolute;left:0;right:0;top:100%;margin:0;padding:10px 14px 16px;gap:4px;background:rgba(2,6,23,.97);border-bottom:1px solid rgba(255,255,255,.06);animation:menu-in-go .3s cubic-bezier(.22,1,.36,1)}
  .topbar.menu-open .topnav a{min-height:50px;padding:0 16px;border-radius:16px;color:#fff;font-size:15px;font-weight:600;justify-content:space-between}
  .topbar.menu-open .topnav a::after{display:none}
  .topbar.menu-open .topnav a:active{background:rgba(255,255,255,.06)}
  .topbar.menu-open .topnav a.home-go{border:1px solid rgba(0,247,255,.25);background:rgba(0,247,255,.08);color:#bdfcff}
}
@keyframes menu-in-go{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Hero ── */
.hero{isolation:isolate}

.hero-copy>*{animation:rise-go .8s var(--ease-go) both}
.hero-copy>:nth-child(1){animation-delay:0s}
.hero-copy>:nth-child(2){animation-delay:.1s}
.hero-copy>:nth-child(3){animation-delay:.18s;animation-name:rise-blur-go;animation-duration:1s}
.hero-copy>:nth-child(4){animation-delay:.5s}
.hero-copy>:nth-child(5){animation-delay:.65s}
.hero-copy>:nth-child(6){animation-delay:.85s}
@keyframes rise-go{from{opacity:0;translate:0 18px}}
@keyframes rise-blur-go{from{opacity:0;translate:0 .35em;filter:blur(12px)}}

.hero-copy .eyebrow{
  position:relative;gap:10px;margin-bottom:22px;padding:8px 16px;border:1px solid rgba(0,247,255,.2);border-radius:999px;
  background:rgba(4,18,31,.8);color:#bdfcff;font-size:14px;font-weight:600;line-height:1.4;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
.eyebrow::before{animation:ping-go 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping-go{0%{box-shadow:0 0 0 0 rgba(0,247,255,.7)}80%,100%{box-shadow:0 0 0 7px rgba(0,247,255,0)}}
.eyebrow{color:var(--mint);font-size:14px;font-weight:600;line-height:1.5}

/* Border beam — wspólny dla odznaki i karty hero */
.hero-copy .eyebrow::after,.hero>.hero-visual::before{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;padding:1.5px;
  background:conic-gradient(from var(--beam-go),transparent 0deg,transparent 280deg,#00f7ff 330deg,#fff 345deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:beam-go 5s linear infinite
}
.hero>.hero-visual::before{animation-duration:8s}
@keyframes beam-go{to{--beam-go:360deg}}

.access-note{border-block-color:var(--line-go);color:#cbd5e1}
.access-note span{color:#6ee7b7;font-size:14px;font-weight:600}
.access-note span::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:rgba(52,211,153,.14);color:#34d399;font-size:11px;font-weight:800}
.access-note small{color:#94a3b8;font-size:13px}

.hero-copy h1,.hero h1{
  max-width:720px;margin-bottom:26px;color:#fff;font-family:var(--display-go);
  font-size:clamp(42px,5.6vw,82px);font-weight:800;line-height:.98;letter-spacing:-.045em;text-wrap:balance
}
.shimmer-go{
  display:inline-block;margin:-.18em -.12em;padding:.18em .12em;color:transparent;
  background-image:linear-gradient(110deg,#fff 30%,#00f7ff 45%,#b8fdff 50%,#00f7ff 55%,#fff 70%);
  background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  animation:shimmer-go 5.7s linear 1.2s infinite
}
@keyframes shimmer-go{0%{background-position:100% 0}79%,100%{background-position:-150% 0}}
h1 .mint{text-shadow:0 0 30px rgba(0,247,255,.55)}

.hero .intro{max-width:580px;color:#cbd5e1;font-size:clamp(17px,1.35vw,19px);line-height:1.75}

.hero-actions{gap:14px;margin:36px 0 34px}
.hero-actions a{min-height:58px;padding:0 30px;font-size:16px;transition:transform .3s var(--ease-go),box-shadow .3s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
.primary-action{position:relative;overflow:hidden;gap:12px;border-color:#00f7ff;background:#00f7ff;color:#020617;font-weight:700;box-shadow:0 18px 60px -14px rgba(0,247,255,.9)}
.primary-action::before{content:"→";order:2;font-size:19px;line-height:1;transition:transform .3s var(--ease-go)}
/* Połysk przez transform (kompozytor), nie przez `left` — `left` przeliczał układ strony co klatkę */
.primary-action::after{content:"";position:absolute;top:0;bottom:0;left:0;width:33%;pointer-events:none;transform:translateX(-130%) skewX(-12deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:sheen-go 4s ease-in-out 1.2s infinite}
@keyframes sheen-go{0%{transform:translateX(-130%) skewX(-12deg)}40%,100%{transform:translateX(420%) skewX(-12deg)}}
.secondary-action{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:#e2e8f0;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.totals{gap:24px;margin:44px 0 10px;padding-top:30px;border-block:0;border-top:1px solid var(--line-go)}
.totals>div,.totals>div+div{padding:0}
.totals>div+div::before{display:none}
.totals b{color:#fff;font-size:clamp(28px,2.6vw,36px);line-height:1}
.totals span{max-width:none;margin-top:6px;color:#94a3b8;font-size:14px;line-height:1.45;letter-spacing:0}

/* Karta hero */
.hero>.hero-visual{
  border-radius:28px;border-color:rgba(255,255,255,.1);background:var(--card-deep-go);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 50px 140px -40px rgba(0,247,255,.5),0 40px 100px -40px rgba(0,0,0,.9);
  animation:float-go 7s ease-in-out 1.4s infinite
}
.hero>.hero-visual::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(460px circle at 78% 0%,rgba(0,247,255,.13),transparent 60%);animation:spot-go 12s ease-in-out infinite alternate}
@keyframes float-go{50%{translate:0 -10px}}
@keyframes spot-go{to{background-position:-180px 120px}}
.hero-panel-head{padding:20px 24px;background:transparent;border-bottom-color:var(--line-go)}
.hero-panel-title{color:#00f7ff;font-size:14px;font-weight:600}
.hero-panel-title i{animation:ping-go 2s cubic-bezier(0,0,.2,1) infinite}
.hero-panel-head small{color:#94a3b8;font-size:13px;font-weight:500}
.fixture-proof-meta{color:#94a3b8;font-size:13px;font-weight:500}
.fixture-proof-teams strong{font-weight:700;letter-spacing:-.02em}
.score-state span{color:#94a3b8;font-size:13px;font-weight:600}
.score-state small{color:#94a3b8;font-size:12px}
.score-state.final b{animation:break-go 3.2s ease-in-out 1.6s infinite}
@keyframes break-go{0%,100%{text-shadow:0 0 25px rgba(0,247,255,.18)}50%{text-shadow:0 0 34px rgba(0,247,255,.75),0 0 80px rgba(0,247,255,.3)}}
.history-proof-head span{color:#94a3b8;font-size:13px;font-weight:600}
.history-proof-head strong{font-size:14px}
.fixture-proof-note,.history-proof>p,.hero-visual>p{color:#94a3b8;font-size:13px;line-height:1.65}
.hero-year{font-size:13px;font-weight:600}

/* ── Zastrzeżenie ── */
.notice{border-radius:16px;border-left-width:1px;border-color:rgba(245,158,11,.22);background:linear-gradient(90deg,rgba(245,158,11,.08),rgba(11,19,35,.6) 60%);font-size:15px}

/* ── Katalog ── */
.catalog-heading h2{font-size:clamp(34px,4.4vw,60px);line-height:1.02}
.catalog-heading .caption{color:#94a3b8;font-size:15px;line-height:1.7}
.score,.chain,.competition-list b,.evidence p{font-variant-numeric:tabular-nums}
.catalog-count{color:#fff}
.catalog-count small{color:#94a3b8;font-size:13px;font-weight:500}
.catalog-range{border-radius:24px;border-color:var(--line-go);background:var(--card-go);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.catalog-range legend{color:#00f7ff;font-size:15px;font-weight:600}
.catalog-range p,.catalog-range-values label{color:#94a3b8;font-size:14px}
.catalog-range-scale{font-size:12px}
.catalog-range-presets button,.catalog-pagination button{font-size:13px;font-weight:600;transition:transform .25s var(--ease-go),border-color .2s ease,background-color .2s ease}
.catalog-controls label{color:#cbd5e1;font-size:13px;font-weight:600;letter-spacing:0}
.catalog-controls input,.catalog-controls select,.sidebar input{border-radius:14px;font-size:15px}
.catalog-controls input:focus,.catalog-controls select:focus,.sidebar input:focus{border-color:rgba(0,247,255,.6);box-shadow:0 0 0 3px rgba(0,247,255,.1)}
#catalog-status,.catalog-pagination span{color:#94a3b8;font-size:13px;font-weight:500}
.active-filter-bar::before{color:#94a3b8;font-size:12px;font-weight:600}
.filter-chip{font-size:12px;font-weight:600}
.catalog-card{border-radius:20px;border-color:var(--line-go);background:var(--card-go);transition:transform .35s var(--ease-go),border-color .25s ease,box-shadow .35s ease}
.catalog-card-index{color:#64748b;font-size:12px;font-weight:600}
.catalog-card-value small{color:#94a3b8;font-size:12px;font-weight:500}
.catalog-report{border-radius:28px;box-shadow:0 50px 140px -60px rgba(0,247,255,.35),0 35px 100px -60px rgba(0,0,0,.98)}

/* ── Karty drużyn i raport ── */
.team{border-radius:28px;border-color:var(--line-go);background:var(--card-go);transition:border-color .3s ease,box-shadow .4s ease}
.team-head h2{font-size:clamp(32px,3.6vw,50px);line-height:1.02}
.team-head .headline{color:#cbd5e1}
.big-stat{color:#00f7ff;text-shadow:0 0 30px rgba(0,247,255,.25)}
.big-stat small{color:#94a3b8;font-size:13px;font-weight:500}
.lead{color:#cbd5e1}
.obs-index{font-weight:700}
.yearstrip-compact .year-head>span,.yearstrip-compact .year-head em{font-size:12px}
.yearstrip-compact .year-head small{font-size:11px}
.year-trace-label{color:#64748b;font-size:11px;font-weight:600}
th{color:#94a3b8;font-size:12px;font-weight:600}
summary span{font-size:12px}

/* ── Metodologia i stopka ── */
.methodology-grid{border-radius:28px;border-color:var(--line-go);background:var(--card-go)}
.methodology h2{line-height:1.02}

/* ── FLUX GO: kroje jak na landingu ── */
.launcher-go{border-radius:999px;font-family:var(--body-go);font-size:15px;box-shadow:0 18px 60px -18px rgba(0,247,255,.7)}
.launcher-copy-go small{font-family:var(--body-go);letter-spacing:0;font-size:11px;font-weight:600}
.wordmark-go,.core-go{font-family:var(--display-go)}
.edition-go,.tag-go,.message-label-go,.wordmark-go span,.core-go span,.starters-go span,.actions-go small,.quota-go,.upgrade-go>small{font-family:var(--body-go)}

/* ── Hover (precyzyjny wskaźnik) ── */
@media(hover:hover) and (pointer:fine){
  .primary-action:hover{background:#00f7ff;box-shadow:0 22px 80px -10px rgba(0,247,255,1);transform:translateY(-2px)}
  .primary-action:hover::before{transform:translateX(6px)}
  .secondary-action:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05);color:#fff;transform:translateY(-2px)}
  .catalog-card:hover{transform:translateY(-4px);border-color:rgba(0,247,255,.3);box-shadow:0 30px 70px -36px rgba(0,247,255,.4)}
  .team:hover{border-color:rgba(0,247,255,.18);box-shadow:0 40px 120px -70px rgba(0,247,255,.45)}
  .catalog-range-presets button:hover,.catalog-pagination button:not(:disabled):hover{transform:translateY(-1px);border-color:rgba(0,247,255,.35)}
}

/* ── Wejścia przy przewijaniu (Chrome/Edge/Safari 26+; reszta widzi treść od razu) ── */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference) and (min-width:1024px){
    .notice,.catalog-heading,.filter-workbench,.team,.methodology-grid{
      animation:reveal-go linear both;animation-timeline:view();animation-range:entry 0% cover 20%
    }
  }
}
@keyframes reveal-go{from{opacity:0;translate:0 40px;scale:.985}to{opacity:1;translate:0 0;scale:1}}

/* ── Responsywność ── */
@media(max-width:768px){
  .hero-copy .eyebrow{font-size:13px;padding:7px 13px}
  .totals{gap:16px}
}
@media(max-width:480px){
  .hero-copy h1,.hero h1{font-size:clamp(34px,10.6vw,46px);line-height:1.02;letter-spacing:-.04em}
  .hero-actions a{min-height:54px;padding:0 22px;font-size:15px}
  .totals{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .totals>div:nth-child(3){grid-column:auto;border-top:0;padding-top:0}
  .totals b{font-size:26px}
  .totals span{font-size:12px}
  .topmeta{font-size:10px}
  .aurora-go span:nth-child(1){width:420px;height:420px}
  .aurora-go span:nth-child(2){width:380px;height:380px}
}

/* ── Wydajność na telefonach ──
   Bez backdrop-filter (każde rozmycie nad przewijaną treścią przeliczało się co klatkę),
   zorza nieruchoma, panele prawie kryte zamiast półprzezroczystych z rozmyciem. Światło na
   krawędziach (border beam) zostaje — na każdym urządzeniu. */
@media(max-width:1023px){
  .hero>.hero-visual,.catalog-range,.hero-copy .eyebrow,.secondary-action,.sidebar{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero>.hero-visual{background:#050d1b}
  .catalog-range,.team,.methodology-grid,.catalog-card{background:#0b1323}
  .aurora-go span{animation:none}
  .hero>.hero-visual::after{animation:none}
  /* pulsujący cień wielkiego wyniku FT odmalowywał tekst co klatkę — na telefonie stała poświata */
  .score-state.final b{animation:none;text-shadow:0 0 30px rgba(0,247,255,.4)}
}
@media(min-width:1024px){.aurora-go i{display:block}}

/* ── Ograniczony ruch ── */
@media(prefers-reduced-motion:reduce){
  .aurora-go span,.hero-copy>*,.eyebrow::before,.hero-copy .eyebrow::after,.hero>.hero-visual,
  .hero>.hero-visual::before,.hero>.hero-visual::after,.hero-panel-title i,.shimmer-go,.primary-action::after,
  .score-state.final b{animation:none!important}
  .shimmer-go{color:#fff;background:none}
  .primary-action::after{display:none}
}
