:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --card:#ffffff;
  --primary:#2f5bff;
  --primary2:#1f4ae6;
  --soft:#f5f7ff;
  --radius:18px;
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --shadow2:0 18px 50px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(229,231,235,.7);
}
.nav{
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{height:28px;width:auto;max-width:120px;object-fit:contain}
.brand .name{font-size:18px;letter-spacing:-.02em}
.brand .apps{color:var(--primary)}
.menu{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:14px}
.menu a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:12px}
.lang{display:flex;gap:10px;font-size:13px;color:var(--muted)}
.lang a{padding:6px 10px;border-radius:999px;border:1px solid transparent}
.lang a.active{color:var(--text);border-color:rgba(229,231,235,.9);background:rgba(255,255,255,.8)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px;border-radius:999px;
  font-weight:600;font-size:14px;border:1px solid transparent;
  cursor:pointer;transition:.15s ease;
}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 10px 22px rgba(47,91,255,.20)}
.btn.primary:hover{background:var(--primary2)}
.btn.ghost{background:#fff;border-color:rgba(229,231,235,.9);color:var(--text)}
.btn.ghost:hover{background:#f8fafc}
.btn.small{padding:10px 14px;font-size:13px}
.hero-wrap{
  background: radial-gradient(1200px 500px at 50% 0%, rgba(47,91,255,.10), transparent 65%),
              linear-gradient(#f8faff, #ffffff 55%);
}
.hero{
  padding:84px 0 48px;
  text-align:center;
}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(229,231,235,.9);
  color:var(--muted);font-weight:600;font-size:13px;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.badge .spark{
  width:18px;height:18px;border-radius:6px;
  background:rgba(47,91,255,.12);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--primary);
  font-size:12px;
}
.h1{
  margin:22px auto 0;
  font-size:56px;line-height:1.05;
  letter-spacing:-.04em;
  max-width:900px;
}
.h1 .accent{color:var(--primary)}
.sub{
  margin:18px auto 0;
  max-width:760px;
  color:var(--muted);
  font-size:18px;line-height:1.65;
}
.hero-cta{margin-top:28px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.section{padding:80px 0}
.section.soft{background:linear-gradient(#f6f8ff, #ffffff 70%)}
.h2{font-size:34px;letter-spacing:-.03em;margin:0;text-align:center}
.p2{margin:10px auto 0;text-align:center;color:var(--muted);max-width:720px;line-height:1.7}
.grid{
  margin-top:40px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:22px;
}
.card{
  background:var(--card);
  border:1px solid rgba(229,231,235,.95);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:0 12px 32px rgba(15,23,42,.04);
}
.card:hover{box-shadow:var(--shadow);transform:translateY(-1px);transition:.15s}
.icon{
  width:42px;height:42px;border-radius:14px;
  background:rgba(47,91,255,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);
  border:1px solid rgba(47,91,255,.15);
  margin-bottom:18px;
}
.card h3{margin:0;font-size:18px;letter-spacing:-.01em}
.card p{margin:10px 0 0;color:var(--muted);line-height:1.65;font-size:14px}
.apps-grid{
  margin-top:40px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:22px;
}
.app-card{display:flex;gap:14px;align-items:flex-start}
.app-card .meta{display:flex;flex-direction:column;gap:6px}
.tag{font-size:12px;color:var(--primary);font-weight:700}
.steps{
  margin-top:40px;
  max-width:760px;
  margin-left:auto;margin-right:auto;
  display:flex;flex-direction:column;gap:18px;
}
.step{
  display:flex;gap:18px;align-items:flex-start;
}
.step .num{
  width:44px;height:44px;border-radius:14px;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  box-shadow:0 12px 26px rgba(47,91,255,.25);
  flex:0 0 auto;
}
.step h4{margin:2px 0 0;font-size:18px}
.step p{margin:6px 0 0;color:var(--muted);line-height:1.65;font-size:14px}
.pricing{
  margin-top:40px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}
.price{
  position:relative;
  padding:28px;
}
.price h3{margin:0;font-size:18px}
.price .lead{margin:8px 0 0;color:var(--muted);font-size:14px}
.price .big{margin:18px 0 0;font-size:28px;font-weight:800;letter-spacing:-.02em}
.list{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:14px}
.list li{display:flex;gap:10px;align-items:flex-start}
.check{width:18px;height:18px;border-radius:6px;background:rgba(47,91,255,.12);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto;margin-top:1px}
.price .cta{margin-top:22px}
.price.popular{
  border-color:rgba(47,91,255,.35);
  box-shadow:var(--shadow2);
}
.ribbon{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;
  font-size:12px;font-weight:800;
  padding:6px 12px;border-radius:999px;
  box-shadow:0 10px 24px rgba(47,91,255,.22);
}
.contact{
  max-width:760px;margin:40px auto 0;
}
.form{
  background:#fff;border:1px solid rgba(229,231,235,.95);
  border-radius:24px;padding:26px;box-shadow:var(--shadow);
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:0 0 6px}
input,textarea{
  width:100%;
  border:1px solid rgba(229,231,235,.95);
  border-radius:14px;
  padding:12px 14px;
  font-size:14px;
  outline:none;
}
input:focus,textarea:focus{border-color:rgba(47,91,255,.5);box-shadow:0 0 0 4px rgba(47,91,255,.10)}
textarea{min-height:120px;resize:vertical}
.form-actions{margin-top:14px;display:flex;justify-content:center}
footer{
  border-top:1px solid rgba(229,231,235,.8);
  padding:26px 0;
  color:var(--muted);
  font-size:13px;
}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mobile-toggle{display:none}
@media (max-width: 980px){
  .grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .pricing{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .apps-grid{grid-template-columns:1fr}
  .h1{font-size:44px}
}
@media (max-width: 760px){
  .menu{display:none}
  .mobile-toggle{display:inline-flex}
  .row{grid-template-columns:1fr}
  .hero{padding:72px 0 34px}
  .section{padding:64px 0}
}
.mobile-menu{
  display:none;
  border-top:1px solid rgba(229,231,235,.7);
  padding:10px 0 14px;
}
.mobile-menu a{
  display:block;
  padding:12px 8px;
  color:var(--muted);
  font-weight:600;
}
.mobile-menu a:hover{color:var(--text)}
.mobile-menu.open{display:block}

/* ===== Base normalize (cross-browser stability) ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

html { scroll-behavior: smooth; }
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Container: predictable width */
.container{ width: min(1120px, 100%); margin: 0 auto; padding: 0 20px; }

/* Header: stable fallback, blur only where supported well */
header{
  background: rgba(255,255,255,.88);
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  header{
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Brand mark: don't squash non-square images */
.brand img{ height:28px; width:auto; }

/* Responsive typography */
.h1{ font-size: clamp(34px, 5vw, 56px); line-height:1.06; }
.sub{ font-size: clamp(16px, 1.6vw, 18px); }

/* ===== Scroll reveal ===== */
.reveal{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal-left{ transform: translate3d(-18px, 0, 0); }
.reveal-up{ transform: translate3d(0, 22px, 0); }
.reveal.is-visible{ opacity: 1; transform: translate3d(0,0,0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

@media (max-width: 760px){
  /* chowamy CTA z paska na mobile */
  .nav-right .btn.primary{display:none}

  /* robimy z linku w mobile menu pełną belkę jak w Lovable */
  .mobile-menu .btn{
    width:100%;
    justify-content:center;
    padding:14px 18px;
    border-radius:14px;
    margin-top:10px;
  }
}


/* ===== Premium hover + depth ===== */
.card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform, box-shadow;
}
.card:hover{
  transform: translate3d(0,-4px,0);
  box-shadow: 0 22px 60px rgba(15,23,42,.10);
  border-color: rgba(47,91,255,.22);
}

/* miękki “lift” także dla kafli apps/pricing */
.app-card:hover,
.price:hover{
  transform: translate3d(0,-4px,0);
  box-shadow: 0 24px 70px rgba(15,23,42,.12);
}

/* ===== Buttons: micro-interactions ===== */
.btn{
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translate3d(0,-1px,0); }
.btn:active{ transform: translate3d(0,0,0) scale(.98); }

.btn.primary{
  box-shadow: 0 14px 30px rgba(47,91,255,.22);
}
.btn.primary:hover{
  box-shadow: 0 18px 40px rgba(47,91,255,.28);
}
.btn.ghost:hover{
  border-color: rgba(47,91,255,.25);
}

/* ===== Header: elevated on scroll ===== */
header{
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
header.is-scrolled{
  box-shadow: 0 12px 40px rgba(15,23,42,.10);
  border-bottom-color: rgba(229,231,235,.9);
}