/* ============================================================
   SafeTalk — site.css
   Brand system extracted 1:1 from the official SafeTalk story
   bundle (palette, Gabarito typeface, shield + wordmark).
   Layout + components for the marketing site.
   ============================================================ */

/* ---- Gabarito: the official SafeTalk typeface (6 weights) ---- */
@font-face { font-family:'Gabarito'; font-weight:400; font-display:swap; src:url('../fonts/Gabarito-400.woff2') format('woff2'),url('../fonts/Gabarito-400.ttf') format('truetype'); }
@font-face { font-family:'Gabarito'; font-weight:500; font-display:swap; src:url('../fonts/Gabarito-500.woff2') format('woff2'),url('../fonts/Gabarito-500.ttf') format('truetype'); }
@font-face { font-family:'Gabarito'; font-weight:600; font-display:swap; src:url('../fonts/Gabarito-600.woff2') format('woff2'),url('../fonts/Gabarito-600.ttf') format('truetype'); }
@font-face { font-family:'Gabarito'; font-weight:700; font-display:swap; src:url('../fonts/Gabarito-700.woff2') format('woff2'),url('../fonts/Gabarito-700.ttf') format('truetype'); }
@font-face { font-family:'Gabarito'; font-weight:800; font-display:swap; src:url('../fonts/Gabarito-800.woff2') format('woff2'),url('../fonts/Gabarito-800.ttf') format('truetype'); }
@font-face { font-family:'Gabarito'; font-weight:900; font-display:swap; src:url('../fonts/Gabarito-900.woff2') format('woff2'),url('../fonts/Gabarito-900.ttf') format('truetype'); }

:root{
  /* paleta marki — DOKŁADNE wartości z brandbooka (str. 17-18) */
  --nv:#0A3447; --nv2:#0E2E33; --nv3:#08222a; --ink:#061A1C;
  /* sygnatura: teal / cyan / lime / purple (+ uzupełniające green/lavender) */
  --teal:#3AB5B2; --teal2:#3AB5B2; --cyan:#71C6DA; --pur:#8974B2;
  --pur2:#B5BCD7; --lime:#C5D54E; --lime-d:#2A3310; --green:#88C594;
  /* uwaga: czerwień/amber są POZA paletą brandbooka - tylko narracja zagrożenia */
  --amber:#F0A431; --red:#E5564C; --redhi:#FF6B61;
  --light:#EEF2F2; --fog:#9DB0AE; --fog-d:#778A88;
  --line:rgba(255,255,255,0.09); --line2:rgba(255,255,255,0.16);
  --disp:'Gabarito',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --wrap:1140px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);color:#fff;font-family:var(--disp);
  font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
.tabnum{font-variant-numeric:tabular-nums;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
section{position:relative;}
section[id],div[id]{scroll-margin-top:88px;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal2);font-weight:600;}
h1,h2,h3{letter-spacing:-0.03em;line-height:1.02;font-weight:900;}
h2{font-size:clamp(28px,4vw,46px);}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-0.02em;font-weight:800;}
.lead{color:var(--fog);font-size:clamp(16px,1.5vw,19px);font-weight:500;max-width:60ch;}
b,strong{font-weight:800;color:#fff;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);
  font-weight:700;font-size:15px;border-radius:999px;padding:13px 22px;
  border:1px solid transparent;cursor:pointer;transition:.25s var(--ease);
  white-space:nowrap;}
.btn svg{width:17px;height:17px;}
.btn-primary{background:linear-gradient(180deg,var(--cyan),var(--teal));color:#04181a;
  box-shadow:0 10px 30px -10px rgba(58,181,178,.6);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(58,181,178,.75);}
.btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line2);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--teal);}

/* ---- top nav ---- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:.3s var(--ease);
  background:transparent;}
.nav.scrolled{background:rgba(6,26,28,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);}
/* nad pełnoekranową animacją chowamy CAŁĄ nawigację (pełna immersja);
   wsuwa się dopiero po przewinięciu w treść strony */
.nav:not(.scrolled){transform:translateY(-100%);opacity:0;pointer-events:none;}
.nav .wrap{display:flex;align-items:center;gap:28px;height:70px;}
.nav .brand{display:flex;align-items:center;gap:10px;}
.nav .brand img{height:21px;}
.nav .links{display:flex;gap:26px;margin-left:8px;}
.nav .links a{font-size:14.5px;font-weight:600;color:var(--fog);transition:.2s;}
.nav .links a:hover{color:#fff;}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:14px;}
/* CTA o stałej szerokości + język przykotwiczony na prawym skraju paska:
   zmiana języka nie przesuwa już prawego klastra nawigacji */
.nav .right .btn-primary{min-width:178px;justify-content:center;}
/* przełącznik języka — pigułka z przesuwanym wskaźnikiem (knob) */
.lang{position:relative;display:inline-flex;border:1px solid var(--line2);border-radius:999px;
  padding:3px;background:rgba(255,255,255,.04);font-family:var(--mono);font-size:11.5px;font-weight:600;}
.lang::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);z-index:0;
  border-radius:999px;background:var(--teal);transition:transform .34s var(--ease);}
.lang[data-active="en"]::before{transform:translateX(100%);}
.lang button{position:relative;z-index:1;flex:1 1 0;min-width:34px;text-align:center;
  background:transparent;color:var(--fog);border:0;padding:6px 12px;cursor:pointer;transition:color .25s;}
.lang button:hover{color:#fff;}
.lang button.on{color:#04181a;}
.nav .burger{display:none;background:none;border:0;cursor:pointer;width:26px;height:26px;}
.nav .burger span{display:block;height:2px;background:#fff;margin:5px 0;border-radius:2px;}

/* ---- hero ---- */
.hero{min-height:100svh;display:flex;align-items:center;padding:120px 0 70px;
  background:radial-gradient(70% 60% at 50% 28%,rgba(58,181,178,.13),transparent 70%),var(--ink);
  overflow:hidden;}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;}
.hero .eyebrow{display:block;margin-bottom:16px;}
.hero h1{font-size:clamp(36px,6vw,68px);max-width:14ch;margin:6px 0 18px;}
.hero h1 .ln2{color:var(--cyan);}
.hero .q{color:var(--lime);font-weight:600;font-size:clamp(17px,2vw,22px);margin-bottom:30px;}
.hero .cta-row{display:flex;gap:13px;flex-wrap:wrap;}

/* phone visual */
.ring-phone{width:230px;height:460px;border-radius:42px;margin:0 auto;position:relative;
  border:1px solid var(--line2);background:linear-gradient(180deg,var(--nv2),var(--nv3));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.7);}
.ring-phone::before{content:"";position:absolute;inset:-1px;border-radius:42px;
  border:1.5px solid var(--teal);animation:ring 2s var(--ease) infinite;}
@keyframes ring{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.07);opacity:0;}}
.ring-phone .shield{width:64px;height:64px;}
.ring-phone .av{width:74px;height:74px;border-radius:50%;font-size:30px;font-weight:800;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(160deg,var(--pur),var(--teal));}
.ring-phone .nm{font-weight:700;font-size:19px;}
.ring-phone .sb{font-size:12px;color:var(--fog);}
.ring-phone .badge{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:11.5px;font-weight:700;color:var(--teal2);background:rgba(58,181,178,.12);
  border:1px solid rgba(58,181,178,.3);border-radius:999px;padding:4px 11px;}
.ring-phone .badge svg{width:13px;height:13px;}

/* ---- generic section ---- */
.band{padding:clamp(64px,9vw,110px) 0;}
.band.alt{background:linear-gradient(180deg,var(--ink),#08252b 50%,var(--ink));}
.shead{max-width:680px;margin-bottom:46px;}
.shead .eyebrow{margin-bottom:14px;display:block;}
.shead p{margin-top:16px;}

/* problem strip */
.problem{background:
  linear-gradient(180deg,rgba(229,86,76,.06),transparent 60%),var(--ink);}
.problem h2{max-width:18ch;}
.problem .big{font-size:clamp(22px,3vw,34px);font-weight:800;line-height:1.3;
  letter-spacing:-0.02em;max-width:34ch;}
.problem .big .hl{color:var(--redhi);}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s;}
.step{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:20px;padding:28px 24px;position:relative;
  transition:.3s var(--ease);}
.step:hover{border-color:var(--line2);transform:translateY(-3px);}
.step .n{counter-increment:s;font-family:var(--mono);font-size:12px;color:var(--teal2);
  font-weight:600;letter-spacing:.1em;}
.step .n::before{content:"0" counter(s);}
.step .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;margin:14px 0 16px;background:rgba(58,181,178,.12);
  border:1px solid rgba(58,181,178,.25);color:var(--teal2);}
.step .ic svg{width:24px;height:24px;}
.step p{color:var(--fog);font-size:15px;margin-top:8px;}

/* ---- animacja jako fundament ----
   .story-hero to wysoki TOR przewijania; przypięta warstwa trzyma animację na
   pełnym ekranie. Iframe ma pointer-events:none, więc kółko/dotyk/klawiatura
   przewijają STRONĘ (jedyny scroller) — skrypt poniżej steruje klatką animacji,
   mapując postęp przewijania na jej pozycję. Tak nie da się utknąć w animacji.
   Wysokość toru ustawia JS pod treść animacji; 900vh to fallback. */
.story-hero{position:relative;width:100%;height:900vh;background:var(--ink);}
.story-sticky{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;}
.story-hero iframe{display:block;width:100%;height:100%;border:0;
  background:var(--ink);pointer-events:none;}
/* reduced-motion / brak JS: bez pinningu - iframe w naturalnym układzie strony
   (intro → tekstowy skrót → finał), zamiast przyciętego do 100svh z overflow:hidden,
   przez co ta treść była dotąd niewidoczna i nieosiągalna przewijaniem */
.story-hero.fallback-mode .story-sticky{position:relative;height:auto;min-height:0;overflow:visible;}
/* nakładka z kontrolkami animacji: kontener przepuszcza scroll (pointer-events:none),
   klikalne są tylko same przyciski */
/* przezroczysty łapacz gestów nad iframe (scroll/dotyk trafia w stronę, nie w iframe) */
.story-catch{position:absolute;inset:0;z-index:5;background:transparent;}
.story-ui{position:absolute;inset:0;z-index:6;pointer-events:none;}
.story-lang{position:absolute;top:18px;left:18px;display:flex;pointer-events:auto;
  background:rgba(0,0,0,.34);border:1px solid var(--line2);border-radius:999px;padding:3px;
  backdrop-filter:blur(6px);}
.story-lang::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);z-index:0;
  border-radius:999px;background:var(--teal);transition:transform .34s var(--ease);}
.story-lang[data-active="en"]::before{transform:translateX(100%);}
.story-lang button{position:relative;z-index:1;flex:1 1 0;text-align:center;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.06em;color:var(--fog);background:none;border:0;padding:6px 12px;
  border-radius:999px;cursor:pointer;transition:color .25s;}
.story-lang button:hover{color:#fff;}
.story-lang button.on{color:var(--ink);font-weight:700;}
.story-skip{position:absolute;top:18px;right:18px;pointer-events:auto;display:inline-flex;
  align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--fog);cursor:pointer;
  background:rgba(0,0,0,.34);border:1px solid var(--line2);border-radius:999px;padding:8px 14px;
  backdrop-filter:blur(6px);transition:.2s;}
.story-skip svg{width:14px;height:14px;}
.story-skip:hover{color:#fff;border-color:var(--teal);}

/* link z sekcji „Jak działa" z powrotem do animacji */
.how-cta{margin-top:38px;}

/* three endings */
.endings{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.ending{border-radius:20px;padding:26px 24px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);position:relative;overflow:hidden;}
.ending::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;}
.ending.bad::before{background:var(--red);}
.ending.warn::before{background:var(--lime);}
.ending.good::before{background:var(--cyan);}
.ending .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--fog-d);}
.ending h3{margin:10px 0 4px;}
.ending.bad h3{color:var(--redhi);} .ending.warn h3{color:var(--lime);} .ending.good h3{color:var(--cyan);}
.ending p{color:var(--fog);font-size:14.5px;margin-top:8px;}

/* audience */
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.aud .card{padding:28px 24px;border:1px solid var(--line);border-radius:20px;
  background:rgba(255,255,255,.025);}
.aud .card .ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;margin-bottom:16px;background:rgba(58,181,178,.12);
  border:1px solid rgba(58,181,178,.25);color:var(--teal2);}
.aud .card .ic svg{width:26px;height:26px;}
.aud .card:nth-child(2) .ic{background:rgba(108,208,222,.12);border-color:rgba(108,208,222,.28);color:var(--cyan);}
.aud .card:nth-child(3) .ic{background:rgba(137,116,178,.16);border-color:rgba(137,116,178,.34);color:var(--pur2);}
.aud .card p{color:var(--fog);font-size:14.5px;margin-top:8px;}

/* trust */
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 40px;margin-top:10px;}
.trust .t{display:flex;gap:15px;align-items:flex-start;padding:6px 0;}
.trust .t .chk{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:rgba(197,213,78,.12);
  border:1px solid rgba(197,213,78,.32);color:var(--lime);}
.trust .t .chk svg{width:18px;height:18px;}
.trust .t p{color:var(--fog);font-size:14.5px;margin-top:3px;}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
.plan{border:1px solid var(--line);border-radius:22px;padding:30px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);}
.plan.feat{border-color:var(--teal);box-shadow:0 30px 70px -30px rgba(58,181,178,.5);
  background:linear-gradient(180deg,rgba(58,181,178,.1),transparent);}
.plan .pn{font-weight:800;font-size:19px;}
.plan .price{font-size:40px;font-weight:900;letter-spacing:-0.03em;margin:14px 0 2px;}
.plan .price small{font-size:15px;font-weight:600;color:var(--fog);letter-spacing:0;}
/* placeholder/word price (np. „Wkrótce", „Wycena") — mniejszy niż liczbowa cena */
.plan .price.small-price{font-size:26px;color:var(--teal2);}
.plan ul{list-style:none;margin:18px 0 24px;display:grid;gap:11px;}
.plan li{font-size:14.5px;color:var(--fog);display:flex;gap:10px;}
.plan li::before{content:"✓";color:var(--teal2);font-weight:800;}
.plan .btn{width:100%;justify-content:center;}
.plan .feat-tag{display:inline-block;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:#04181a;background:var(--lime);border-radius:999px;
  padding:3px 10px;font-weight:700;margin-bottom:4px;}

/* faq */
.faq{max-width:780px;margin:0 auto;}
.qa{border-bottom:1px solid var(--line);}
.qa summary{cursor:pointer;list-style:none;padding:22px 0;font-weight:700;font-size:17px;
  display:flex;justify-content:space-between;gap:20px;align-items:center;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary .pl{flex:0 0 auto;color:var(--teal2);font-size:22px;transition:.25s;}
.qa[open] summary .pl{transform:rotate(45deg);}
.qa p{color:var(--fog);font-size:15px;padding:0 0 22px;max-width:64ch;}

/* CTA band */
.cta{padding:clamp(70px,10vw,120px) 0;text-align:center;
  background:radial-gradient(60% 80% at 50% 40%,rgba(58,181,178,.16),transparent 70%),var(--ink);}
.cta h2{max-width:18ch;margin:0 auto 18px;}
.cta .lead{color:var(--lime);}
.cta .cta-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:8px;}

/* ---- pobranie aplikacji (główne CTA konwersji) ---- */
.download{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-bottom:22px;}
.store{display:inline-flex;align-items:center;gap:13px;padding:13px 24px;border-radius:15px;
  background:#fff;color:#04181a;min-width:210px;transition:.25s var(--ease);
  box-shadow:0 12px 34px -16px rgba(0,0,0,.55);}
.store:hover{transform:translateY(-3px);box-shadow:0 20px 46px -16px rgba(58,181,178,.5);}
.store svg{width:27px;height:27px;flex-shrink:0;}
.store span{display:flex;flex-direction:column;line-height:1.12;text-align:left;}
.store span small{font-size:11px;font-weight:600;opacity:.72;font-family:var(--mono);letter-spacing:.02em;}
.store span b{font-size:18px;font-weight:800;letter-spacing:-0.02em;color:#04181a;}
.cta-alt{color:var(--fog);font-size:15px;margin-top:4px;}
.cta-alt a{color:var(--teal2);font-weight:700;}
.cta-alt a:hover{text-decoration:underline;}

/* ---- strony prawne (szkice do zatwierdzenia) ---- */
.legal-top{position:sticky;top:0;z-index:50;background:rgba(6,26,28,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.legal-top .wrap{display:flex;align-items:center;gap:18px;height:64px;}
.legal-top .brand img{height:20px;}
.legal-top .home{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--fog);}
.legal-top .home:hover{color:#fff;}
.legal-top .home svg{width:15px;height:15px;}
.legal{max-width:820px;margin:0 auto;padding:48px 24px 80px;}
.legal .draft{display:flex;gap:13px;align-items:flex-start;background:rgba(240,164,49,.08);
  border:1px solid rgba(240,164,49,.32);border-radius:14px;padding:16px 18px;margin-bottom:38px;
  color:var(--light);font-size:14px;line-height:1.6;}
.legal .draft svg{flex:0 0 auto;width:20px;height:20px;color:var(--amber);margin-top:1px;}
.legal .draft b{color:var(--amber);}
.legal h1{font-size:clamp(28px,4vw,42px);margin-bottom:10px;}
.legal .upd{color:var(--fog-d);font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;margin-bottom:34px;}
.legal h2{font-size:21px;margin:36px 0 12px;letter-spacing:-0.02em;}
.legal p,.legal li{color:var(--fog);font-size:15.5px;line-height:1.72;}
.legal p{margin-bottom:14px;}
.legal ul{margin:0 0 16px 20px;display:grid;gap:9px;}
.legal a{color:var(--teal2);}
.legal a:hover{text-decoration:underline;}
.legal .ph{color:var(--amber);font-style:italic;}

/* footer */
footer{border-top:1px solid var(--line);padding:60px 0 40px;background:var(--nv3);}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
footer .brand img{height:24px;margin-bottom:16px;}
footer .brand p{color:var(--fog);font-size:14px;max-width:32ch;}
footer h4{font-size:12px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--fog-d);margin-bottom:14px;font-weight:600;}
footer ul{list-style:none;display:grid;gap:10px;}
footer ul a{color:var(--fog);font-size:14px;}
footer ul a:hover{color:#fff;}
/* dane rejestrowe spółki (art. 206 KSH) */
footer .company{margin-top:46px;padding-top:24px;border-top:1px solid var(--line);
  color:var(--fog-d);font-size:12.5px;line-height:1.7;}
footer .bottom{margin-top:46px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--fog-d);font-size:13px;}
footer .company + .bottom{margin-top:12px;padding-top:0;border-top:0;}

/* reveal-on-scroll — progressive enhancement only.
   Content stays fully visible unless JS is active (html.js),
   so no-JS users and crawlers always see everything. */
.js .reveal{opacity:0;transform:translateY(22px);transition:.7s var(--ease);}
.js .reveal.in{opacity:1;transform:none;}

/* ---- responsive ---- */
@media(max-width:900px){
  .nav .links{display:none;}
  .nav .burger{display:block;}
  /* na mobile chowamy CTA z paska (jest burger + CTA w treści) - inaczej pasek
     się nie mieści i przełącznik języka ucieka poza ekran */
  .nav .right .btn-primary{display:none;}
  .nav .wrap{gap:14px;}
  .nav .right{gap:10px;}
  .hero .grid{grid-template-columns:1fr;gap:36px;}
  .hero .visual{order:-1;}
  .steps,.endings,.aud,.plans{grid-template-columns:1fr;}
  .trust{grid-template-columns:1fr;}
  footer .top{grid-template-columns:1fr 1fr;gap:30px;}
}
@media(max-width:560px){
  footer .top{grid-template-columns:1fr;}
  footer .bottom{flex-direction:column;}
}
@media(prefers-reduced-motion:reduce){
  .ring-phone::before{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
}