/* =============================================================
   EWIDENCJA FAKTUR – main.css
   Wspólne: reset, zmienne, layout, nav, footer, utility
   ============================================================= */

/* ─── RESET & BASE ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:70px}
body{font-family:'DM Sans',sans-serif;font-size:15px;color:#1E293B;background:#F8FAFC;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul,ol{list-style:none}

/* ─── VARIABLES ─────────────────────────────────────────── */
:root{
  --blue:#2563EB;--blue-d:#1D4ED8;--blue-l:#EFF6FF;--blue-t:rgba(37,99,235,.1);
  --green:#16A34A;--green-l:#F0FDF4;--green-t:rgba(22,163,74,.1);
  --orange:#EA580C;--orange-l:#FFF7ED;--orange-t:rgba(234,88,12,.08);
  --navy:#0F172A;--slate:#475569;--slate-l:#94A3B8;
  --border:#E2E8F0;--bg:#F8FAFC;--white:#fff;
  --r:14px;--r2:10px;
  --sh:0 1px 4px rgba(0,0,0,.07);--sh-lg:0 8px 28px rgba(0,0,0,.1);
}

/* ─── LAYOUT ────────────────────────────────────────────── */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 24px}
@media(max-width:768px){section{padding:56px 20px}}

/* ─── TYPOGRAPHY ────────────────────────────────────────── */
.font-heading{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.sec-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.tag-blue{background:var(--blue-t);color:var(--blue)}
.tag-green{background:var(--green-t);color:var(--green)}
.tag-orange{background:var(--orange-t);color:var(--orange)}
.sec-h{font-size:clamp(22px,2.6vw,36px);color:var(--navy);margin-bottom:12px}
.sec-sub{font-size:16px;line-height:1.65;color:var(--slate);max-width:520px;margin-bottom:48px}
@media(max-width:768px){.sec-sub{font-size:15px;margin-bottom:32px}}
/* ─── BUTTONS ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.3)}
.btn-primary:hover{background:var(--blue-d);box-shadow:0 4px 16px rgba(37,99,235,.4);transform:translateY(-1px)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(22,163,74,.3)}
.btn-green:hover{background:#15803D;transform:translateY(-1px)}
/* CTA zielony — kontrastowy na ciemnym tle sekcji CTA */
.btn-cta-green{background:#22C55E;color:#fff;box-shadow:0 4px 20px rgba(34,197,94,.4);font-size:16px;padding:14px 32px;border-radius:12px}
.btn-cta-green:hover{background:#16A34A;box-shadow:0 6px 28px rgba(34,197,94,.5);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:#94A3B8;background:rgba(0,0,0,.04)}
.btn-outline-light{background:transparent;color:#fff !important;border:1.5px solid rgba(255,255,255,.4)}
.btn-outline-light:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.1)}
.btn-lg{padding:15px 30px;font-size:16px;border-radius:12px}
@media(max-width:480px){.btn-lg{padding:13px 22px;font-size:15px}}

/* ─── NAV ───────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;
  z-index:200;height:68px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.nav-inner{
  max-width:1160px;
  margin:0 auto;
  padding:0 24px;
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
  box-sizing:border-box;
}
nav.nav-scrolled{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:42px;width:auto}
.nav-spacer{flex:0 0 264px}
.nav-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nav-cta{display:flex;gap:10px;align-items:center;flex-shrink:0}
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:480px){.nav-login{display:none}}
@media(max-width:360px){
  .logo img{height:34px}
  nav{height:60px}
  .nav-inner{padding:0 16px}
}
/* ─── HAMBURGER ─────────────────────────────────────────── */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:8px;flex-shrink:0}
.nav-hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.85);border-radius:2px;transition:.25s}
nav.nav-scrolled .nav-hamburger span{background:var(--navy)}
@media(max-width:900px){.nav-hamburger{display:flex}}
/* ─── MOBILE MENU ───────────────────────────────────────── */
.nav-mobile-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.6);backdrop-filter:blur(4px)}
.nav-mobile-overlay.open{display:flex;align-items:flex-start;justify-content:flex-end}
.nav-mobile-menu{background:#fff;width:280px;max-width:90vw;min-height:100vh;padding:24px 20px 40px;display:flex;flex-direction:column;gap:4px;box-shadow:-8px 0 40px rgba(0,0,0,.18)}
.nav-mobile-close{align-self:flex-end;background:none;border:none;font-size:20px;cursor:pointer;color:var(--slate);padding:4px 8px;margin-bottom:12px}
.nav-mobile-link{font-size:16px;font-weight:500;color:var(--navy);padding:13px 8px;border-bottom:1px solid var(--border)}
.nav-mobile-link:hover{color:var(--blue)}
.nav-mobile-cta{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.nav-links a{font-size:14px;font-weight:500;color:rgba(255,255,255,.85);padding:7px 13px;border-radius:8px;transition:.15s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.12)}
nav.nav-scrolled .nav-links a{color:var(--slate)}
nav.nav-scrolled .nav-links a:hover{color:var(--navy);background:var(--bg)}
nav.nav-light{background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);box-shadow:0 4px 24px rgba(0,0,0,.07)}
nav.nav-light .nav-links a{color:var(--slate)}
nav.nav-light .nav-links a:hover{color:var(--navy);background:var(--bg)}
nav.nav-light .nav-links a.active{color:var(--blue)}
nav.nav-light .nav-login{color:var(--slate)}
nav.nav-light .nav-login:hover{color:var(--navy);background:var(--bg)}
nav.nav-light .nav-hamburger span{background:var(--navy)}
.nav-cta{display:flex;gap:10px;align-items:center;flex-shrink:0}
.nav-login{font-size:14px;font-weight:500;color:rgba(255,255,255,.85);padding:8px 14px;border-radius:8px;transition:.15s;text-decoration:none}
.nav-login:hover{color:#fff;background:rgba(255,255,255,.12)}
nav.nav-scrolled .nav-login{color:var(--slate)}
nav.nav-scrolled .nav-login:hover{color:var(--navy);background:var(--bg)}
/* btn-outline dostosowany do nav */
nav .btn-outline{border-color:rgba(255,255,255,.7);color:#fff}
nav .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.12)}
nav.nav-scrolled .btn-outline{border-color:var(--border);color:var(--navy)}
nav.nav-scrolled .btn-outline:hover{border-color:var(--navy);background:var(--bg)}

/* ─── FOOTER ────────────────────────────────────────────── */
footer{background:#030610;padding:48px 24px 28px}
.foot-inner{max-width:1160px;margin:0 auto}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:22px}
.foot-desc{font-size:13px;line-height:1.7;color:rgba(255,255,255,.35);margin-top:12px;max-width:230px}
.foot-col h4{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:13px}
.foot-col ul{display:flex;flex-direction:column;gap:8px}
.foot-col a{font-size:13px;color:rgba(255,255,255,.35);transition:.15s}
.foot-col a:hover{color:rgba(255,255,255,.8)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.25);flex-wrap:wrap;gap:8px}
@media(max-width:768px){.foot-top{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.foot-top{grid-template-columns:1fr}}
@media(max-width:380px){
  .foot-top{gap:20px}
  .foot-col h4{font-size:10px}
  footer{padding:36px 16px 24px}
}

/* ─── FLUTTER WEBVIEW ────────────────────────────────────── */
.flutter-back{padding:12px 16px;border-bottom:1px solid var(--border);background:#fff}
.flutter-back-btn{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.flutter-back-btn:hover{background:var(--blue-d)}

/* ─── NAV LIGHT — białe tło na podstronach (blog, kontakt, artykuły) ── */
nav.nav-light{background:#fff!important;border-bottom:1px solid var(--border)!important;backdrop-filter:none!important}
nav.nav-light .nav-links a{color:var(--slate)!important}
nav.nav-light .nav-links a:hover{color:var(--navy)!important;background:var(--bg)!important}
nav.nav-light .nav-login{color:var(--slate)!important}
nav.nav-light .nav-login:hover{color:var(--navy)!important;background:var(--bg)!important}
nav.nav-light .btn-outline{border-color:var(--border)!important;color:var(--navy)!important}
nav.nav-light .btn-outline:hover{border-color:var(--navy)!important;background:var(--bg)!important}
nav.nav-light .nav-hamburger span{background:var(--navy)!important}
/* ─── NAV HIDDEN STATE ───────────────────────────────────── */
body.nav-hidden .hero{padding-top:20px}

/* ─── NAV MOBILE — ukryj przyciski gdy nav przezroczysty lub biały (tylko mobile) ── */
@media(max-width:900px){
  body.nav-hidden nav .nav-login{display:none}
  body.nav-hidden nav .nav-cta{display:none}
  nav.nav-scrolled .nav-login{display:none}
  nav.nav-scrolled .nav-cta{display:none}
}