/* motyw-aria.css — TOKENY MOTYWU ARIA (szafir + zloto).
   Wyciag 1:1 z bloku <style> w index.html (linie 39-95 i 249-296).
   Landing trzyma swoja kopie inline; ten plik jest po to, zeby kolejne
   podstrony (test.html) mialy dokladnie te sama palete i te same
   komponenty co strona glowna, zamiast wlasnej wymyslonej stylistyki.
   Zmieniasz kolor -> zmieniasz w obu miejscach. */
:root{
  /* Szafir i złoto — ta sama paleta, co domyślny motyw panelu (aria-web.html,
     data-theme="szafir"). Landing i panel mają wyglądać jak jeden produkt:
     kamień daje tła i tekst, złota jest garść — tylko na akcenty. */
  /* płótno */
  --bg:#edf1f9; --surface:#fcfdff; --surface-2:#f4f7fd; --surface-3:#e9eff9; --ink:#1b2440;
  --line:rgba(28,40,72,.10); --border:rgba(28,40,72,.08);
  --text:#1b2440; --text-2:#47536f; --muted:#7a849c;
  --primary:#5d78ae; --primary-strong:#425c8c; --primary-soft:#dfe6f4;
  --gold:#d3ad5c; --blush:#ccd8ee; --plum:#4a5578;
  --ok:#5c8a6a; --ok-bg:#e9f1ec; --bad:#c0705f; --warn:#c8a04a; --warn-bg:rgba(200,160,74,.16);
  --dark:#141b2f; --dark-2:#1b2338; --dark-line:rgba(233,238,251,.10);
  --bg-layers:
    radial-gradient(60% 50% at 12% 8%,rgba(211,173,92,.14),transparent 60%),
    radial-gradient(55% 45% at 92% 4%,rgba(93,120,174,.16),transparent 55%),
    radial-gradient(50% 60% at 80% 90%,rgba(204,216,238,.20),transparent 60%),
    linear-gradient(180deg,#f5f8fd,#edf1f9 60%,#e6ecf7);
  /* typografia */
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Fraunces",Georgia,serif;
  --em-style:italic;
  /* kształt i ruch */
  --ease:cubic-bezier(.22,1,.36,1);
  --r:26px; --rl:34px;
  --shadow-sm:0 2px 8px rgba(26,38,72,.06);
  --shadow:0 18px 48px rgba(26,38,72,.12),0 2px 8px rgba(26,38,72,.05);
  --shadow-lg:0 40px 90px rgba(26,38,72,.20);
  --shadow-btn-hover:0 14px 30px rgba(45,68,120,.28);
  /* marka */
  --grad-primary:linear-gradient(135deg,#6a86bd,#3b5484);
  --on-primary:#fcfdff;
  --grad-price:linear-gradient(155deg,#fcfdff,#e8eef9);
  --grad-feat:linear-gradient(150deg,#fcfdff,#e9eff9);
  --grad-cta:linear-gradient(150deg,#6a86bd,#415b8b 45%,#243553);
  --cta-ink:#fdfbf5; --cta-btn-bg:#fdfbf5; --cta-btn-bg-hover:#fff; --cta-btn-ink:#3b5484;
  --nav-bg:rgba(252,253,255,.72); --nav-mobile-bg:rgba(252,253,255,.96);
  --tile-cap:linear-gradient(180deg,transparent,rgba(19,26,47,.72));
  /* makieta panelu na ciemnym tle */
  --p-ink:#e9eefb; --p-text-2:#b3c0da; --p-muted:#8592b0;
  --p-pos:#8fca9c; --p-neg:#e0a08f; --p-warn:#d9b46a;
  --p-accent:#d3ad5c; --p-accent-bg:rgba(211,173,92,.16);
  --p-underline:rgba(211,173,92,.4); --p-underline-pos:rgba(143,202,156,.4);
  --p-bar:linear-gradient(90deg,#7d95c6,#4a648f);
  --p-bar-tr:rgba(233,238,251,.16); --p-bar-track:rgba(233,238,251,.07);
  --p-slider-track:rgba(233,238,251,.14);
  --p-safe-bg:rgba(143,202,156,.12); --p-safe-line:rgba(143,202,156,.2);
  --p-final-bg:rgba(211,173,92,.10); --p-final-line:rgba(211,173,92,.22);
  --grad-thumb:linear-gradient(135deg,#d3ad5c,#5d78ae); --thumb-ring:#141b2f;
}
/* Ozdoby hero — łuk i siatka kropek. Czysto salonowe, dlatego zostają przy ARII. */
.hero-visual .arch-deco{position:absolute;top:-30px;right:-30px;width:160px;height:210px;border:1.5px solid var(--primary-soft);border-radius:1000px 1000px 0 0;z-index:-1}
.hero-visual .dot-deco{position:absolute;bottom:-26px;left:-26px;width:120px;height:120px;opacity:.5;z-index:-1;background-image:radial-gradient(var(--primary-soft) 1.4px,transparent 1.4px);background-size:13px 13px;border-radius:14px}
@media(max-width:960px){.hero-visual .arch-deco,.hero-visual .dot-deco{display:none}}
/* Plakietka ceny założycielskiej — komponent tylko ARII, dlatego nie idzie do base.css. */
.price-card .founder{display:inline-block;margin-top:14px;padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--primary-strong);background:var(--primary-soft);border:1px solid var(--primary)}
.price-card .amt{margin-top:10px}
.price-card .per s{color:var(--muted);text-decoration-thickness:1.5px;margin-right:2px}
/* ═══ TRYB CIEMNY W SZAFIRZE ═══
   wspolne/ux.css trzyma wersję ciepłą, bo obsługuje też DETAL. Landing ma
   własną paletę, więc nadpisuje ją u siebie — plik wspólny zostaje nietknięty. */
:root[data-ciemny]{
  --bg:#101623; --surface:#1a2233; --surface-2:#141b29; --surface-3:#212b3f; --ink:#e9eefb;
  --line:rgba(233,238,251,.12); --border:rgba(233,238,251,.09);
  --text:#e4ebf9; --text-2:#a8b6d0; --muted:#7d8aa6;
  --primary:#8aa3d2; --primary-strong:#a9bde3; --primary-soft:#25304a;
  --gold:#d9b76c; --blush:#ccd8ee; --plum:#9aa8c9;
  --ok:#7fb08c; --ok-bg:rgba(127,176,140,.14); --bad:#e08a76;
  --warn:#d9b46a; --warn-bg:rgba(217,180,106,.16);
  --dark:#0c1220; --dark-2:#141b2b; --dark-line:rgba(233,238,251,.10);
  --bg-layers:
    radial-gradient(60% 50% at 12% 8%,rgba(211,173,92,.10),transparent 60%),
    radial-gradient(55% 45% at 92% 4%,rgba(93,120,174,.16),transparent 55%),
    radial-gradient(50% 60% at 80% 90%,rgba(138,163,210,.10),transparent 60%),
    linear-gradient(180deg,#141b29,#101623 60%,#0c1220);
  --shadow-sm:0 2px 8px rgba(0,0,0,.34);
  --shadow:0 18px 48px rgba(0,0,0,.46),0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 40px 90px rgba(0,0,0,.55);
  --shadow-btn-hover:0 14px 30px rgba(0,0,0,.5);
  --grad-primary:linear-gradient(135deg,#7b95c8,#425c8d);
  --grad-price:linear-gradient(155deg,#1b2434,#232e44);
  --grad-feat:linear-gradient(150deg,#1a2231,#222c41);
  --grad-cta:linear-gradient(150deg,#425c8d,#2c3f63 45%,#1a2540);
  --cta-btn-bg:#e9eefb; --cta-btn-bg-hover:#fff; --cta-btn-ink:#2c3f63;
  --nav-bg:rgba(16,22,35,.78); --nav-mobile-bg:rgba(16,22,35,.97);
  --tile-cap:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
  color-scheme:dark;
}

/* ═══ ZŁOTO JAKO AKCENT ═══
   Sam szafir wychodzi jednolicie niebieski. Złoto robi tu to samo, co obrączka
   przy kamieniu — jest go garść i tylko w miejscach, które mają przyciągnąć
   wzrok: znak marki, nadkreślenia sekcji, kropka w plakietce, krawędź karty
   konta i cena. Do tekstu idzie ciemniejszy odcień, bo #d3ad5c na jasnym tle
   nie ma kontrastu. */
:root{--gold-ink:#8f7130;--grad-gold:linear-gradient(135deg,#e0c079,#b28f3c)}
:root[data-ciemny]{--gold-ink:#d9b76c}
.logo .m{background:var(--grad-gold);color:#2a2109}
.eyebrow{color:var(--gold-ink)}
.hero .tag-line .d{background:var(--gold)}
.hero .tag-line{border-color:rgba(211,173,92,.38)}
/* Cienka złota krawędź u góry karty — jedyny element, który ma tu błyszczeć. */
.hero .authcard{border-top:2px solid transparent;background-image:linear-gradient(var(--surface),var(--surface)),var(--grad-gold);background-origin:border-box;background-clip:padding-box,border-box}
.price-card .amt{color:var(--gold-ink)}
.price-card{border-color:rgba(211,173,92,.32)}
.step .num{background:rgba(211,173,92,.16);color:var(--gold-ink)}