/* SatWay — shared design system. Paleta: cyan #00aeef / navy #00507e / green. Oba motywy. */
:root{
  --bg:#eef1f6; --surface:#fff; --surface-2:#f6f8fb; --elev:#fff;
  --ink:#0b1220; --ink-soft:#46536b; --ink-mute:#74819a;
  --hair:#dce3ee; --hair-soft:#eaeff6;
  --cyan:#00aeef; --cyan-deep:#007fb3; --cyan-ink:#012a44;
  --green:#5aa32a; --green-lite:#7ac142;
  --navy:#00507e; --navy-2:#023a5c; --navy-ink:#02141f;
  --n-ink:#eaf3fb; --n-soft:#a9c2d6; --n-mute:#6f8ba0; --n-hair:#0a3f60;
  --shadow:0 22px 60px -26px rgba(11,18,32,.4); --shadow-lg:0 40px 90px -34px rgba(11,18,32,.5);
  --glow:0 14px 44px -10px rgba(0,174,239,.5);
  --sans:"Helvetica Neue","Segoe UI",system-ui,Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
  --wrap:1200px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#02141f; --surface:#0d1728; --surface-2:#0a1322; --elev:#101d34;
  --ink:#eaf1fb; --ink-soft:#aab8cf; --ink-mute:#6f7f9c;
  --hair:#1c2c49; --hair-soft:#142138;
  --cyan:#22b8f0; --cyan-deep:#00aeef; --green:#7ac142; --green-lite:#8fd455;
  --shadow:0 22px 60px -26px rgba(0,0,0,.7); --shadow-lg:0 40px 90px -34px rgba(0,0,0,.8);
}}
:root[data-theme="light"]{--bg:#eef1f6;--surface:#fff;--surface-2:#f6f8fb;--elev:#fff;--ink:#0b1220;--ink-soft:#46536b;--ink-mute:#74819a;--hair:#dce3ee;--hair-soft:#eaeff6;--cyan:#00aeef;--cyan-deep:#007fb3;--green:#5aa32a;--shadow:0 22px 60px -26px rgba(11,18,32,.4);}
:root[data-theme="dark"]{--bg:#02141f;--surface:#0d1728;--surface-2:#0a1322;--elev:#101d34;--ink:#eaf1fb;--ink-soft:#aab8cf;--ink-mute:#6f7f9c;--hair:#1c2c49;--hair-soft:#142138;--cyan:#22b8f0;--cyan-deep:#00aeef;--green:#7ac142;--shadow:0 22px 60px -26px rgba(0,0,0,.7);}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--sans);margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--cyan-deep)}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* NAV */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--hair-soft)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:66px}
.logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.logo .mk{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(150deg,var(--navy),var(--navy-ink));color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.logo em{font-style:normal;color:var(--cyan-deep)}
.nlinks{display:flex;gap:22px;margin-left:14px;font-size:14.5px;color:var(--ink-soft);font-weight:500}
.nlinks a{position:relative;padding:6px 0}
.nlinks a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan);transition:width .25s}
.nlinks a:hover,.nlinks a.active{color:var(--ink)} .nlinks a:hover::after,.nlinks a.active::after{width:100%}
.nright{margin-left:auto;display:flex;align-items:center;gap:12px}
.langs{display:inline-flex;border:1px solid var(--hair);border-radius:999px;overflow:hidden}
.langs b{font-family:var(--mono);font-size:11px;font-weight:700;padding:5px 8px;color:var(--ink-mute)}
.langs b.on{background:var(--cyan);color:var(--cyan-ink)}
.call{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;font-weight:700;font-size:13.5px;padding:10px 15px;border-radius:10px;transition:transform .2s}
.call:hover{transform:translateY(-2px)} .call .tnum{color:var(--cyan)}
.themebtn{appearance:none;background:transparent;border:1px solid var(--hair);color:var(--ink-soft);width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:15px;display:grid;place-items:center}
.themebtn:hover{border-color:var(--cyan);color:var(--ink)}
.burger{display:none;appearance:none;background:transparent;border:1px solid var(--hair);color:var(--ink);width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:18px}

/* BUTTONS */
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--cyan);color:var(--cyan-ink);font-weight:800;font-size:15px;padding:14px 22px;border-radius:12px;box-shadow:var(--glow);transition:transform .2s,box-shadow .2s}
.btn-primary:hover{transform:translateY(-3px)}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);color:#fff;font-weight:700;font-size:14.5px;padding:14px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.2)}
.btn-ghost.dark{background:var(--surface-2);color:var(--ink);border-color:var(--hair)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* PAGE HERO (interior pages) */
.phero{position:relative;overflow:hidden;color:var(--n-ink);background:
  radial-gradient(120% 90% at 88% -20%,rgba(0,174,239,.28),transparent 52%),
  linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-ink) 100%)}
.phero.img{background:
  radial-gradient(120% 85% at 88% -15%,rgba(0,174,239,.28),transparent 52%),
  linear-gradient(100deg,rgba(2,20,31,.9) 0%,rgba(2,20,31,.66) 46%,rgba(1,26,43,.5) 100%),
  var(--hero-img) center/cover no-repeat}
.phero .grid{position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(90% 80% at 75% 10%,#000 20%,transparent 78%)}
.phero .wrap{position:relative;z-index:2;padding:clamp(56px,9vw,110px) 24px}
.phero .eyebrow{color:var(--cyan)}
.phero h1{font-size:clamp(32px,5.4vw,64px);font-weight:800;line-height:1;color:#fff;margin-top:14px;max-width:16ch}
.phero h1 .u{color:var(--cyan)}
.phero .lead{margin-top:18px;font-size:clamp(15px,1.6vw,19px);color:var(--n-soft);max-width:58ch}
.phero .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.crumbs{position:relative;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--n-mute)}
.crumbs a:hover{color:var(--cyan)}

/* SECTIONS */
.band{padding:clamp(56px,8vw,110px) 0;position:relative}
.band.alt{background:var(--surface-2);border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}
.shead{max-width:62ch;margin-bottom:40px}
.shead h2{font-size:clamp(26px,3.6vw,44px);font-weight:800;margin-top:14px}
.shead p{margin-top:14px;color:var(--ink-soft);font-size:clamp(15px,1.4vw,18px)}
.center{margin-inline:auto;text-align:center}

/* CARDS / BENTO */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:26px;position:relative;overflow:hidden;transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s,box-shadow .28s}
.tile:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--cyan) 50%,var(--hair));box-shadow:var(--shadow)}
.tile.wide{grid-column:span 4}.tile.norm{grid-column:span 2}.tile.half{grid-column:span 3}
.tile.feat{grid-column:span 4;background:linear-gradient(158deg,var(--navy),var(--navy-2));border-color:transparent;color:var(--n-ink)}
.tile.feat h3,.tile.feat .ct{color:#fff}.tile.feat p,.tile.feat .cd{color:var(--n-soft)}
.ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.tile.feat .ico{background:rgba(0,174,239,.18);color:var(--cyan)}
.tile h3,.ct{font-family:var(--sans);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.01em}
.tile p,.cd{margin-top:8px;color:var(--ink-soft);font-size:14.5px}
.meta{margin-top:15px;display:flex;flex-wrap:wrap;gap:7px}
.meta span{font-family:var(--mono);font-size:10.5px;padding:4px 9px;border-radius:7px;background:var(--surface-2);color:var(--ink-mute);border:1px solid var(--hair-soft)}
.tile.feat .meta span{background:rgba(255,255,255,.06);color:var(--n-soft);border-color:rgba(255,255,255,.1)}
.badge{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--cyan);color:var(--cyan-ink)}

/* FEATURE ROW (image + text) */
.frow{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.frow.rev{direction:rtl}.frow.rev>*{direction:ltr}
.frow .media{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/11;background:var(--navy) var(--fr-img) center/cover no-repeat;position:relative}
.frow .media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent,rgba(1,26,43,.25))}
.frow h3{font-size:clamp(22px,2.8vw,34px);font-weight:800}
.frow .body{margin-top:16px;color:var(--ink-soft);font-size:16px}
.frow .body p+p{margin-top:12px}
.checks{margin-top:20px;display:grid;gap:10px;padding:0;list-style:none}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;font-size:15px;color:var(--ink)}
.checks .ck{width:22px;height:22px;border-radius:6px;background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green);display:grid;place-items:center;font-size:12px;font-weight:800}

/* STATS / TRUST */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--elev);border:1px solid var(--hair);border-radius:16px;padding:24px}
.stat b{display:block;font-family:var(--sans);font-weight:800;font-size:clamp(26px,3.2vw,38px);color:var(--cyan-deep);letter-spacing:-.02em}
.stat span{font-size:13px;color:var(--ink-mute);margin-top:4px;display:block}
.brands{display:flex;gap:16px 30px;flex-wrap:wrap;align-items:center}
.brands b{font-family:var(--sans);font-weight:800;font-size:19px;color:var(--ink-mute)}

/* CTA band */
.ctaband{background:linear-gradient(150deg,var(--navy),var(--navy-ink));border-radius:26px;padding:clamp(32px,5vw,64px);color:var(--n-ink);position:relative;overflow:hidden}
.ctaband .gtex{position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(70% 100% at 100% 0%,#000,transparent 70%)}
.ctaband>*{position:relative;z-index:2}
.ctaband h2{font-size:clamp(24px,3.4vw,40px);font-weight:800;color:#fff;max-width:20ch}
.ctaband p{margin-top:12px;color:var(--n-soft);font-size:16px;max-width:52ch}

/* FAQ */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:4px 20px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan-deep);font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 18px;color:var(--ink-soft);font-size:15px}

/* contact grid */
.cwrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

/* FOOTER */
.foot{background:var(--navy-ink);color:var(--n-ink);padding:clamp(56px,7vw,88px) 0 34px}
.foot .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.foot h4{font-family:var(--sans);font-weight:800;font-size:19px;color:#fff}
.foot .about{margin-top:12px;color:var(--n-soft);font-size:14px;max-width:34ch}
.foot .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--n-mute);margin-bottom:14px}
.foot a,.foot p.li{display:block;color:var(--n-soft);font-size:14px;margin-bottom:9px}
.foot a:hover{color:var(--cyan)}
.foot .bar{margin-top:44px;padding-top:22px;border-top:1px solid var(--n-hair);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--n-mute)}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

/* mobile menu panel */
.mobile{display:none;position:fixed;inset:66px 0 auto 0;z-index:49;background:var(--surface);border-bottom:1px solid var(--hair);padding:16px 24px;flex-direction:column;gap:4px}
.mobile.open{display:flex}
.mobile a{padding:12px 0;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--hair-soft)}

@media (max-width:940px){
  .nlinks{display:none} .burger{display:grid} .call .tnum{display:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile.wide,.tile.feat,.tile.half,.tile.norm{grid-column:span 2}
  .frow{grid-template-columns:1fr;gap:26px} .frow.rev{direction:ltr}
  .foot .top{grid-template-columns:1fr 1fr;gap:26px}
  .cwrap{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}.tile.wide,.tile.feat,.tile.half,.tile.norm{grid-column:span 1}
  .stats{grid-template-columns:1fr 1fr} .foot .top{grid-template-columns:1fr}
  .langs{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}