/* TripSnail — strona tripsnail.com. Kolory i krój z theme/tokens.ts (paleta z ikony, 14.10.2026). Bez zewnętrznych zasobów. */
@font-face{font-family:Outfit;font-weight:400;font-style:normal;font-display:swap;src:url("fonts/Outfit-Regular.ttf") format("truetype")}
@font-face{font-family:Outfit;font-weight:500;font-style:normal;font-display:swap;src:url("fonts/Outfit-Medium.ttf") format("truetype")}
@font-face{font-family:Outfit;font-weight:600;font-style:normal;font-display:swap;src:url("fonts/Outfit-SemiBold.ttf") format("truetype")}

:root{
  --ink:#12261E;--ink-70:rgba(18,38,30,.72);--ink-55:rgba(18,38,30,.55);
  --accent:#15803D;--accent-dark:#0F6A31;--accent-text:#0B5A2A;--sun:#FFDB2E;
  --bg:#F4F1E8;--bg-alt:#F7F4EC;--card:#FFFDF8;--border:#E0DACD;--sage:#DCE4D9;--sage-ink:#3E5C34;
  --danger:#C9483F;--danger-dark:#A33A32;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Outfit,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

/* ——— animacje ——— */
@keyframes plyn{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes unos{0%{transform:translateY(0)}100%{transform:translateY(-10px)}}
@keyframes puls{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes wejscie{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes blysk{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(320%) skewX(-20deg)}}
.tlo-ruch{background-size:220% 220%;animation:plyn 16s ease-in-out infinite}
.unos{animation:unos 4.5s ease-in-out infinite alternate}
.wejscie{animation:wejscie .9s cubic-bezier(.2,.7,.2,1) backwards}
@supports (animation-timeline:view()){.wejscie{animation:wejscie linear backwards;animation-timeline:view();animation-range:entry 0% entry 55%}}
.karta{transition:transform .25s ease,box-shadow .25s ease}
.karta:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(18,38,30,.14)}
.chip{transition:transform .2s ease,background .2s ease}
.chip:hover{transform:scale(1.06) rotate(-1deg);background:var(--sun)}
.blysk{position:relative;overflow:hidden}
.blysk:after{content:"";position:absolute;top:0;left:0;width:36%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:blysk 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tlo-ruch,.unos,.wejscie,.puls,.blysk:after{animation:none!important}
  .karta:hover,.chip:hover{transform:none}
}

/* ——— nagłówek i hero ——— */
.hero{background-image:linear-gradient(115deg,#02362A 0%,#0B6B3C 38%,#1FAE4F 70%,#C6EF3A 100%);color:#FFFDF8}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-height:84px}
.logo{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:600;letter-spacing:-.3px}
.logo img{width:44px;height:44px;border-radius:10px}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500;flex-wrap:wrap}
.nav-links a{color:rgba(255,253,248,.92)}
.nav-links a.btn-light,.nav-links a.btn-sun{color:var(--ink)}
.nav-links .btn-sun{min-height:48px;padding:0 22px;font-size:16px}
.jezyki{display:flex;gap:2px;padding:3px;border-radius:100px;background:rgba(255,253,248,.14);font-size:13px;font-weight:600}
.jezyki a{padding:7px 12px;border-radius:100px;color:#FFFDF8}
.jezyki a[aria-current]{background:#FFFDF8;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:100px;font-family:inherit;font-size:16px;font-weight:600;border:0;cursor:pointer}
.btn-light{background:#FFFDF8;color:var(--ink)}
.btn-sun{background:var(--sun);color:var(--ink);min-height:56px;padding:0 30px;font-size:17px}
.btn-line{border:2px solid rgba(255,253,248,.7);color:#FFFDF8;min-height:56px;padding:0 28px;font-size:17px}
.btn-green{background:var(--accent);color:#fff}
.btn-green:hover{background:var(--accent-dark)}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--ink)}
.btn-danger{background:transparent;border:1.5px solid var(--danger);color:var(--danger-dark)}
.hero-body{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding-top:56px;padding-bottom:88px}
.hero-text{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:22px}
.badge{align-self:flex-start;font-size:13px;font-weight:600;letter-spacing:1.2px;padding:8px 14px;border-radius:100px;background:rgba(255,253,248,.14)}
.hero h1{font-size:clamp(40px,6vw,68px);line-height:1.04;font-weight:600;letter-spacing:-2px}
.hero-sub{font-size:20px;line-height:30px;max-width:540px;color:rgba(255,253,248,.92)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.hero-note{font-size:14px;color:rgba(255,253,248,.85)}
.telefon{color:var(--ink);flex:0 0 auto;margin:0 auto;width:280px;height:560px;border-radius:44px;border:9px solid var(--ink);background:#EDE8DE;position:relative;overflow:hidden;box-shadow:0 30px 60px rgba(2,54,42,.45)}
.telefon svg.mapa{position:absolute;left:0;top:0}
.telefon svg.pin{position:absolute}
.puls{position:absolute;left:98px;top:247px;width:44px;height:44px;border-radius:50%;border:3px solid var(--accent);animation:puls 2.4s ease-out infinite}
.t-szukaj{position:absolute;left:12px;right:12px;top:16px;height:36px;border-radius:100px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;padding:0 14px;font-size:12px;color:rgba(18,38,30,.65)}
.t-panel{position:absolute;left:12px;right:12px;bottom:14px;border-radius:16px;background:var(--card);border:1px solid var(--border);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.t-panel .r{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600}
.t-panel .s{font-size:11.5px;color:var(--accent-text);font-weight:500}
.przelacznik{width:36px;height:22px;border-radius:100px;background:var(--accent);position:relative;display:block}
.przelacznik:after{content:"";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.przelacznik.duzy{width:52px;height:30px}
.przelacznik.duzy:after{right:4px;top:4px;width:22px;height:22px}

/* ——— sekcje ——— */
.sekcja{padding-top:88px}
.kicker{font-size:13px;font-weight:600;letter-spacing:1.2px;color:var(--accent-text)}
.h2{font-size:clamp(30px,4vw,42px);line-height:1.1;font-weight:600;letter-spacing:-1px;margin-top:10px}
.lead{font-size:18px;line-height:28px;color:rgba(18,38,30,.74)}
.dwie{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.dwie>*{flex:1 1 420px;min-width:0}
.kolumna{display:flex;flex-direction:column;gap:16px}
.kafle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kafel{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:20px;font-size:17px;font-weight:600;line-height:23px}
.kto{border-radius:32px;background:var(--sage);padding:44px 48px;display:flex;flex-direction:column;gap:22px}
.kto .kicker{color:var(--sage-ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:12px 20px;border-radius:100px;background:var(--card);font-size:16px;font-weight:600}
.kto-line{font-size:22px;line-height:30px;font-weight:600;letter-spacing:-.3px;color:var(--accent);margin-top:6px}
.kroki{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.krok{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:12px}
.krok .nr{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center}
.krok h3{font-size:22px;font-weight:600}
.krok p{font-size:16px;line-height:24px;color:var(--ink-70)}
.panel{background:var(--card);border:1px solid var(--border);border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:20px;box-shadow:0 10px 30px rgba(18,38,30,.08)}
.panel .wiersz{display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:600}
.panel .et{font-size:12px;font-weight:600;letter-spacing:1.1px;color:var(--ink-55)}
.segment{display:flex;padding:4px;border-radius:100px;background:rgba(18,38,30,.06);gap:4px}
.segment span{flex:1;text-align:center;padding:12px 0;border-radius:100px;font-size:15px;color:rgba(18,38,30,.7)}
.segment span.on{font-weight:600;background:var(--accent);color:#fff}
.panel .nota{font-size:14px;line-height:21px;color:rgba(18,38,30,.65)}
.ciemna{background:var(--ink);color:#FFFDF8;margin-top:88px}
.ciemna .wrap{padding-top:88px;padding-bottom:88px}
.ciemna .kicker{color:var(--sun)}
.prywatnosc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px}
.prywatnosc>div{border:1px solid rgba(255,253,248,.16);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:10px}
.prywatnosc b{font-size:19px;font-weight:600}
.prywatnosc span{font-size:15px;line-height:23px;color:rgba(255,253,248,.74)}
.ciemna .nota{margin-top:28px;font-size:15px;color:rgba(255,253,248,.74)}
.wezwanie{border-radius:32px;padding:48px;background:linear-gradient(115deg,#0B6B3C 0%,#1FAE4F 60%,#C6EF3A 100%);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;color:#FFFDF8}
.wezwanie h2{font-size:clamp(26px,3.4vw,36px);line-height:1.1;font-weight:600;letter-spacing:-.8px}
.wezwanie p{font-size:17px;line-height:26px;color:rgba(255,253,248,.94);margin-top:8px}
footer{border-top:1px solid var(--border);background:var(--bg-alt);margin-top:72px}
footer .wrap{padding-top:44px;padding-bottom:44px;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
footer .kol{display:flex;flex-direction:column;gap:10px;font-size:14px;color:rgba(18,38,30,.7);flex:1 1 220px;max-width:340px}
footer a.link{color:var(--accent-text);font-weight:500;font-size:15px}
.szkic{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.6px;padding:3px 8px;border-radius:100px;background:#FFF1BD;color:#7A5B00;margin-left:6px}

/* ——— strony tekstowe (prawne — szkice) ——— */
.tekst{padding:56px 0 24px;max-width:760px}
.tekst h1{font-size:clamp(30px,4vw,42px);line-height:1.1;font-weight:600;letter-spacing:-1px;margin-bottom:20px}
.tekst h2{font-size:24px;margin:32px 0 10px}
.tekst h3{font-size:18px;margin:20px 0 6px}
.tekst p,.tekst li{font-size:16px;line-height:25px;color:var(--ink-70)}
.tekst ul{padding-left:20px}
.tekst hr{border:0;border-top:1px solid var(--border);margin:32px 0}
.baner-szkic{background:#FFF1BD;color:#5C4500;border-radius:16px;padding:14px 18px;font-size:15px;line-height:22px;margin-bottom:28px}
.sub-nav{background:linear-gradient(115deg,#02362A,#0B6B3C 60%,#1FAE4F);color:#FFFDF8}

/* ——— konto ——— */
.konto-szkielet{display:flex;min-height:calc(100vh - 0px)}
.konto-lewa{flex:0 0 480px;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(170deg,#C6EF3A 0%,#1FAE4F 30%,#0B6B3C 62%,#02362A 100%);color:#FFFDF8}
.konto-lewa .znak{width:260px;height:260px;margin:0 auto}
.konto-lewa h2{font-size:34px;line-height:38px;font-weight:600;letter-spacing:-1px}
.konto-lewa p{font-size:16px;color:rgba(255,253,248,.92);margin-top:10px}
.konto-prawa{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:56px 24px}
.formularz{width:100%;max-width:440px;display:flex;flex-direction:column;gap:18px}
.formularz h1{font-size:36px;line-height:40px;font-weight:600;letter-spacing:-.8px}
.zakladki{display:flex;padding:4px;border-radius:100px;background:rgba(18,38,30,.06);gap:4px}
.zakladki button{flex:1;border:0;cursor:pointer;height:44px;border-radius:100px;font-family:inherit;font-size:15px;font-weight:600;background:transparent;color:var(--ink-70)}
.zakladki button[aria-selected=true]{background:var(--accent);color:#fff}
.pole{display:flex;flex-direction:column;gap:6px}
.pole label{font-size:14px;font-weight:500}
.pole input{height:52px;border-radius:14px;border:1.5px solid var(--border);background:#fff;padding:0 16px;font:inherit;font-size:16px;color:var(--ink)}
.pole input:focus{outline:3px solid rgba(21,128,61,.35);border-color:var(--accent)}
.maly{font-size:13px;line-height:19px;color:rgba(18,38,30,.62)}
.link-btn{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:500;color:var(--accent-text);cursor:pointer;text-align:left;text-decoration:underline}
.komunikat{border-radius:14px;padding:12px 14px;font-size:14px;line-height:20px}
.komunikat.blad{background:#FBE9E7;color:#8C2A22}
.komunikat.ok{background:#E3F3E6;color:#14532D}
.ukryj{display:none!important}
.konto-widok{width:100%;max-width:960px;display:flex;flex-direction:column;gap:28px}
.konto-gora{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.konto-widok h1{font-size:40px;line-height:44px;font-weight:600;letter-spacing:-1px}
.siatka-konto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.k-karta{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px}
.k-karta .et{font-size:12px;font-weight:600;letter-spacing:1.1px;color:var(--ink-55)}
.k-karta .tyt{font-size:20px;font-weight:600;display:flex;align-items:center;gap:10px}
.k-karta p{font-size:15px;line-height:22px;color:rgba(18,38,30,.7)}
.k-karta .akcja{align-self:flex-start}
.kropka{width:12px;height:12px;border-radius:50%;background:#1FAE4F;display:inline-block}
.kropka.off{background:#9AA39D}

@media (max-width:900px){
  .kroki,.prywatnosc,.siatka-konto{grid-template-columns:1fr}
  .kafle{grid-template-columns:1fr}
  .kto{padding:28px 22px}
  .wezwanie{padding:32px 24px}
  .konto-szkielet{flex-direction:column}
  .konto-lewa{flex:0 0 auto;padding:28px 24px}
  .konto-lewa .znak{width:140px;height:140px}
  /* Menu lamie sie na kilka linii — bez odstepu od gory ikona dotykala krawedzi ekranu (uwaga wlasciciela 17.10.2026). */
  .nav{padding-top:20px;padding-bottom:12px;min-height:0;row-gap:14px}
  .nav-links{gap:14px}
  /* Na telefonie przyciski „Zainstaluj” i „Zaloguj” są w sekcji powitalnej — w nagłówku strony głównej byłyby podwójne. */
  .nav-home .btn{display:none}
  .hero-body{padding-top:32px;padding-bottom:56px}
  .hero-sub{font-size:17px;line-height:25px}
}