:root{
      --bg:#0b1020; --text:#eaf2ff; --muted:#a7b4d0; --subtle:#93a3c4;
      --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06);
      --brand:#22d3ee; --brand-2:#6366f1;
      --r-16:16px;
      --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px; --s-28:28px; --s-32:32px;
      --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-28:28px; --fs-36:36px;
      --shadow-2:0 10px 26px rgba(3,6,12,.42);
      --w:992px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0; color:var(--text); font:400 var(--fs-16)/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg);}
    body::before{
      content:""; position:fixed; inset:-20% -10% -10% -10%; z-index:-1;
      background:
        radial-gradient(660px 460px at 8% 2%, rgba(34,211,238,.10), transparent 60%),
        radial-gradient(660px 460px at 96% 8%, rgba(99,102,241,.10), transparent 62%),
        radial-gradient(500px 340px at 50% 118%, rgba(13,19,33,.6), transparent 65%);
    }
    .bg-sparks{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.08;
      background:
        radial-gradient(4px 4px at 12% 24%, rgba(255,255,255,.35), transparent 65%),
        radial-gradient(3px 3px at 78% 16%, rgba(255,255,255,.25), transparent 70%),
        radial-gradient(3px 3px at 22% 64%, rgba(255,255,255,.28), transparent 70%),
        radial-gradient(4px 4px at 88% 72%, rgba(255,255,255,.22), transparent 70%),
        radial-gradient(3px 3px at 40% 86%, rgba(255,255,255,.20), transparent 70%);
      filter: blur(.4px);
    }
    .wrap{max-width:var(--w); margin:auto; padding:0 var(--s-24)}
    .section{padding:var(--s-28) 0}
    .section.tight{padding:var(--s-20) 0}
    .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-24)}
    .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-24)}
    @media (max-width:1024px){.grid-2,.grid-3{grid-template-columns:1fr}}

    .util{position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); background:rgba(15,26,51,.9); backdrop-filter:blur(8px)}
    .util-row{display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:var(--s-24); padding:10px 0}
    .brand{display:inline-flex; align-items:center; gap:2px; font-weight:800; letter-spacing:.2px; gap:1px;}
    .brand img{height:28px; width:auto}
    .util-center{text-align:center; font-size:var(--fs-14)}
    .util-right{text-align:right}
    a{color:inherit; text-decoration:none}
    .btn-small,.btn,.btn-ghost{cursor:pointer; user-select:none}
    .btn-small{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.04)}
    @media (max-width:1024px){.util-row{grid-template-columns:1fr; text-align:center; gap:8px} .util-left,.util-right{display:none}}

    .hero{position:relative; isolation:isolate; padding:var(--s-28) 0 0px;}
    .hero::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 1px 1px, currentColor 1px, transparent 1.5px) 0 0/20px 20px; opacity:.06; pointer-events:none; color:#fff;
      -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 18%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.08) 78%, rgba(0,0,0,0) 100%);
              mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 18%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.08) 78%, rgba(0,0,0,0) 100%);}
    .hero-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s-24); align-items:start;}
    .hero-left{grid-column:span 6}
    .hero-right{grid-column:span 6;}
    .hero-right .card{margin-top:96px}
    @media (max-width:1024px){.hero-grid{grid-template-columns:1fr} .hero-left,.hero-right{grid-column:1/-1} .hero-right .card{margin-top:0}}
    .badge{display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--subtle); margin-bottom:var(--s-24)}
    h1{font-size:var(--fs-36); line-height:1.12; letter-spacing:-.2px; margin:0 0 var(--s-20)}
    .lead{color:var(--muted); font-size:var(--fs-18); margin:0 0 var(--s-20)}
    .actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:var(--s-16)}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; transition:transform .15s, box-shadow .15s, background .15s, border-color .15s}
    .btn-primary{color:#0b1020; background:linear-gradient(90deg,var(--brand),var(--brand-2)); box-shadow:0 8px 18px rgba(34,211,238,.18); font-weight:700}
    .btn-ghost{color:#fff; border:1px solid var(--line); background:rgba(255,255,255,.03)}
    .bullets{color:var(--muted); padding-left:18px; margin:0}
    .bullets li{margin:6px 0}
    .card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:var(--r-16); padding:var(--s-24); box-shadow:var(--shadow-2)}
    .pill{display:inline-block; border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:6px 10px; color:#eaf2ff; background:rgba(255,255,255,.09); font-size:var(--fs-14); margin-right:6px}
    .pill-row{margin-top:var(--s-16)}

    .timeline{position:relative; padding-top:0; margin-top:-6px}
    .timeline svg{width:100%; height:132px; display:block; overflow:visible; margin-bottom:16px}

    #book .wrap h2, #book .wrap p{text-align:center}
    .legal a{text-decoration:underline}
  
.brand .icon{height:44px;width:auto;display:block;opacity:.98;margin:0;padding:0;background:transparent;border:none;outline:none;box-shadow:none;display:block;}

.brand .word{height:56px;width:auto;display:block}

.topbar .inner{max-width:980px}

/* ---- Brand tweaks (requested) ---- */
.brand{display:inline-flex;align-items:center;gap:0!important}
.brand .icon{margin:0!important;padding:0!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;display:block}
.brand .word{margin-left:-3px!important;display:block}

/* ---- Integrations rail ---- */
.integrations-rail{display:flex;align-items:center;gap:14px;margin-top:8px;margin-bottom:8px}
.integrations-rail .rail{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.18),rgba(255,255,255,.06))}
.integrations-rail .label{font-weight:600;color:rgba(236,240,255,.9);padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
@media (max-width:720px){.integrations-rail{gap:10px}.integrations-rail .label{font-size:.95rem;padding:2px 8px}}

/* brand ultra-tight + hide any square frame */
.brand{display:inline-flex;align-items:center;gap:0!important}
.brand .icon{
  margin:0!important;padding:0!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;
  display:block;width:auto;height:46px; /* adjust if needed */
  image-rendering:auto;
  clip-path: inset(2px round 12px); /* trims faint edges */
}
.brand .word{margin-left:-8px!important;display:block;height:58px}

.integrations-rail{display:flex;align-items:center;gap:16px;margin:10px 0}
.integrations-rail .rail{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.2),rgba(255,255,255,.06))}
.integrations-rail .label{font-weight:600;color:rgba(236,240,255,.92);padding:2px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
@media (max-width:800px){.integrations-rail{gap:10px}.integrations-rail .label{font-size:.95rem;padding:2px 8px}}

/* ---- Integrations: centered rail ---- */
#integrations + p{display:none!important} /* hide old inline list right after the Integrations heading */
.integrations-rail{display:flex;align-items:center;gap:16px;max-width:960px;margin:12px auto}
.integrations-rail .rail{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.22),rgba(255,255,255,.06))}
.integrations-rail .label{font-weight:600;color:rgba(236,240,255,.92);padding:2px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
@media (max-width:800px){.integrations-rail{gap:10px;max-width:92vw}.integrations-rail .label{font-size:.95rem;padding:2px 8px}}

/* ---- Brand: stick icon to wordmark and remove any frame ---- */
.brand{display:inline-flex;align-items:center;gap:0!important}
.brand .icon{margin:0!important;padding:0!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;display:block;clip-path:inset(3px round 12px)}
.brand .word{margin-left:-18px!important;display:block}

/* ---- Brand & header tweaks ---- */
.brand{display:inline-flex;align-items:flex-end;gap:0!important}
.brand .icon{margin:0!important;padding:0!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;display:block;position:relative;top:2px; /* lower icon a bit */}
.brand .word{margin-left:-21px!important;display:block}
.topbar .inner{max-width:940px} /* slightly narrower header */

/* ---- Integrations centered (and rails) ---- */
#integrations{text-align:center}
#integrations + p{display:none!important}
.integrations-rail{display:flex;align-items:center;gap:16px;max-width:960px;margin:12px auto}
.integrations-rail .rail{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.22),rgba(255,255,255,.06))}
.integrations-rail .label{font-weight:600;color:rgba(236,240,255,.92);padding:2px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
@media (max-width:820px){.integrations-rail{gap:10px;max-width:92vw}.integrations-rail .label{font-size:.95rem;padding:2px 8px}}

/* ---- Header & brand tweaks (per screenshot) ---- */
.topbar .inner{max-width:900px}
.brand{display:inline-flex;align-items:flex-end;gap:0!important}
.brand .icon{position:relative;top:-1px;margin:0!important;padding:0!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;display:block}
/* keep the tight join from before */
.brand .word{margin-left:-21px!important;display:block}



.calendly-section{padding-top:24px;padding-bottom:24px}
.calendly-section .container{max-width:1120px;margin:0 auto}
.calendly-section h2{margin-bottom:8px}
.calendly-section .muted{opacity:.8;margin-bottom:12px}

.calendly-section{padding-top:24px;padding-bottom:24px}
.calendly-section .container{max-width:1120px;margin:0 auto}
.calendly-section h2{margin-bottom:8px}
.calendly-section .muted{opacity:.8;margin-bottom:12px}

#contact input[type="email"]::placeholder { color: var(--subtle); }
.contact-inline{
  display:flex; gap:8px; align-items:center;
  margin-top:20px; max-width:440px; /* węższe, żeby karta po prawej miała luz */
}
.contact-inline input{
  flex:1; min-width:220px;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--text);
}
.contact-inline input::placeholder{ color: var(--subtle); }

.footer-contact{opacity:.9}
.footer-contact a{text-decoration:underline}

/* węższy (niższy) pasek na górze */
.util-row{padding:6px 0}

/* 3 kolumny: lewa "pusta", środek = brand wyśrodkowany, prawa = przycisk */
.util-row{display:grid; grid-template-columns:1fr auto 1fr}


/* większe logo + słowo, ale nie przesadnie */
.brand .icon{height:58px}  /* było ~46px */
.brand .word{height:72px; margin-left:-18px}

/* na mniejszych ekranach – zachowanie jak wcześniej */
@media (max-width:1024px){
/* niższy pasek u góry */
.util-row{display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:6px 0}


/* (mobile) zostaw to jak jest, możesz schować Schedule jeśli chcesz */
/* @media (max-width:1024px){ .util-right{display:none} } */

}
/* większy odstęp między Privacy/Terms/... a mailem */
.legal nav{gap:20px}
.footer-contact{margin-left:28px; opacity:.92}

/* Jeśli chcesz, żeby mail był NA SAMEJ PRAWEJ krawędzi:
.footer-contact{ margin-left:auto }  */

.brand .icon{height:60px !important; width:auto !important}
.brand .word{height:76px !important; width:auto !important; margin-left:-18px !important}
/* nagłówek niższy */
.util{border-bottom:1px solid var(--line); background:rgba(15,26,51,.9); backdrop-filter:blur(8px)}
.util-row{display:grid; grid-template-columns:auto 1fr; align-items:center; padding:4px 0}
/* brand po lewej (nie na środku), Schedule do prawej krawędzi */
.util-left{justify-self:start}
.util-right{justify-self:end}

/* delikatnie większy wordmark (jeśli chcesz, zmień o 2px w górę/dół) */
.brand .icon{height:56px !important; width:auto !important}
.brand .word{height:70px !important; width:auto !important; margin-left:-18px !important}

/* mobile: można schować Schedule (opcjonalnie) */
/*
@media (max-width:1024px){
  .util-right{display:none}
}
*/
/* === SHRINK HEADER + BRAND === */
.util-row{
  /* było ok. 6–10px — tniemy ~o 1/3+ */
  padding: 2px 0;                 /* wysokość paska ↓ */
  grid-template-columns: auto 1fr;/* brand po lewej, Schedule po prawej */
  align-items: center;
}
.util-left{ justify-self: start; }
.util-right{ justify-self: end; }

/* logo + wordmark mniejsze (sexy, czysto) */
.brand .icon{ height: 42px !important; width:auto !important; }
.brand .word{ height: 54px !important; width:auto !important; margin-left:-16px !important; }

/* przycisk w topbarze też ciut smuklej */
.btn-small{ padding: 4px 10px; border-radius: 9px; font-size: 14px; }
/* === FINAL: chudszy header + układ + mniejsze logo === */
.util .util-row{
  display:grid;
  grid-template-columns:auto 1fr;  /* brand | (puste) -> Schedule po prawej */
  align-items:center;
  padding:1px 0;                   /* super niski pasek */
}

/* brand trochę w prawo, Schedule skrajnie na prawo */
.util-left{ justify-self:start; }
.util-right{ justify-self:end; }
.brand{ margin-left:10px; }        /* "drobina" w prawo — podbij do 12–14px jeśli chcesz bardziej */

/* smuklejsze logo+wordmark */
.brand .icon{ height:38px !important; width:auto !important; }
.brand .word{ height:50px !important; width:auto !important; margin-left:-14px !important; }

/* smuklejszy przycisk w nagłówku */
.btn-small{ padding:3px 10px; border-radius:9px; font-size:14px; }


/* Gdy ekran jest niski – minimalnie mniej */



/* Tablety/telefony – zwykle trzeba więcej */

/* --- TIGHT LAYOUT AROUND CALENDLY & FOOTER --- */

/* 1) Sekcje globalnie trochę chudsze */
.section{ padding: 16px 0; }
.section.tight{ padding: 10px 0; }

/* 2) Sekcja z Calendly – bardzo blisko poprzedniej i następnej */
#demo.section{ padding-top: 8px; padding-bottom: 8px; margin-top: -6px; }

/* nagłówek + opis nad widżetem: minimalne marginesy */
#demo h2{ margin: 6px 0 4px !important; }
#demo p{  margin: 0 0 8px !important; }





/* 4) FAQ i odstęp przed stopką – ciaśniej */
#faq.section.tight{ padding-top: 8px; padding-bottom: 8px; }
#faq .faq-item{ padding: 8px 0 !important; }

/* 5) Stopka – mniej góry */
footer .wrap.legal{ padding-top: 12px !important; padding-bottom: 16px !important; }
/* === TIGHT LAYOUT AROUND CALENDLY + FOOTER (FINAL OVERRIDES) === */

/* Sekcje globalnie chudsze */
.section{ padding:12px 0 !important; }
.section.tight{ padding:8px 0 !important; }

/* Sekcja z Calendly: minimalny odstęp z góry i dołu */
#demo.section{ padding-top:6px !important; padding-bottom:6px !important; margin-top:-10px !important; }
#demo h2{ margin:4px 0 2px !important; }
#demo p{  margin:0 0 6px !important; }




/* Tablety/telefony – zwykle trzeba więcej wysokości */

/* FAQ ciaśniej */
#faq.section.tight{ padding-top:6px !important; padding-bottom:6px !important; }
#faq .faq-item{ padding:6px 0 !important; }

/* Stopka – mniej powietrza */
footer .wrap.legal{ padding-top:10px !important; padding-bottom:14px !important; }

/* Header: ostateczny, jeden zestaw (mniejszy, Schedule na prawo) */
.util .util-row{ display:grid; grid-template-columns:auto 1fr; align-items:center; padding:2px 0 !important; }
.util-left{ justify-self:start; }
.util-right{ justify-self:end; }
.brand{ display:inline-flex; align-items:flex-end; gap:0; margin-left:10px; }
.brand .icon{ height:38px !important; width:auto !important; position:relative; top:-1px; }
.brand .word{ height:50px !important; width:auto !important; margin-left:-14px !important; }

/* Linki w stopce: trochę większy odstęp od maila */
.legal nav{ gap:20px !important; }
.footer-contact{ margin-left:28px !important; opacity:.92; }
/* Sexy wrapper dla Calendly (ciemna karta) */
.cal-card{
  max-width: 1120px;
  margin: 8px auto 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  box-shadow: var(--shadow-2);
  overflow: hidden;                /* zaokrąglenie też na iframe */
}

/* Iframe dostaje zaokrąglenie przez overflow wrappera */


/* Trochę oddechu nad/za kartą */
#demo.section{ padding-top: 10px; padding-bottom: 10px; }
/* Calendly: bez obramówki + więcej oddechu */
.cal-card{
  /* więcej miejsca wokół */
  margin: 18px auto 32px !important;

  /* zero „karty” – żadnego tła, obramówki ani cienia */
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  /* zostawiam lekkie zaokrąglenie, żeby iframe miał miękkie rogi */
  border-radius: var(--r-16);
  overflow: hidden;
}

/* sam iframe – zostaje pełna szerokość i wysokość, bez dodatkowych marginesów */


/* trochę ciaśniej nad/za sekcją */
#demo.section{ padding-top:8px; padding-bottom:8px; }
#demo h2{ margin:6px 0 4px !important; }
#demo p{  margin:0 0 10px !important; }
/* --- 1) Większy dystans między sekcjami --- */
.section{ padding: 28px 0; }                 /* globalnie trochę „oddechu” */
.section.tight{ padding: 16px 0; }
.section + .section{ margin-top: 20px; }     /* odstęp pomiędzy sąsiadami */

/* --- 2) Sekcja z Calendly: bez „karty” + więcej miejsca --- */
#demo{ padding-top: 24px; padding-bottom: 12px; margin-top: 16px; }
#demo .wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;               /* zero obramówki wokół widżetu */
}

/* nagłówek i opis nad widżetem */
#demo h2{ margin: 8px 0 6px !important; }
#demo p{  margin: 0 0 14px !important; }

/* --- 3) Calendly iframe: większa wysokość, żeby NIE było scrolla w środku --- */
.calendly-inline-widget{
  width: 100%;
  min-width: 320px;
  margin: 0 !important;
}


/* (opcjonalnie) lekkie odsunięcie sekcji FAQ od Calendly */
#faq{ margin-top: 18px; }
/* ===== SPACING – clean & final ===== */

/* domyślne sekcje mniej napompowane */
.section{ padding:22px 0; }
.section.tight{ padding:12px 0; }

/* WIĘKSZY odstęp po Integrations -> przed Pricing */
section#pricing{ margin-top:28px; }            /* <— zwiększa odstęp z SS #2 */

/* Sekcja z Calendly: mały odstęp nad, bardzo mały pod nagłówkiem */
section#demo{ padding-top:10px; padding-bottom:12px; }
#demo h2{ margin:0 0 6px !important; }         /* nagłówek tuż nad widżetem */
#demo p{  margin:0 0 10px !important; }

/* Sam widżet – bez marginesów, bez wewn. scrolla */

/* ekrany niższe: trochę niższy widget, żeby NIE pojawiał się jego pionowy scrollbar */


/* 1) PRICING WYŻEJ */
section#pricing{
  margin-top:-18px !important;    /* podciąga "Simple pricing" do góry */
}

/* 2) BOOK A 30-MINUTE FIT CHECK NIŻEJ */
section#demo{
  margin-top:34px !important;     /* większy oddech od pricing */
  padding-top:10px !important;
  padding-bottom:8px !important;
}

/* 3) NAGŁÓWEK ~TUŻ NAD~ WIDŻETEM CALENDLY */
#demo h2{ margin:0 0 4px !important; }   /* bardzo mała przerwa nad widżetem */
#demo p { margin:0 0 6px !important; }   /* subtelny opis, minimalny odstęp */

/* (opcjonalnie) jeśli gdzieś indziej nadpisujesz .section – upewnij się, że
   nie masz dużych paddingów w sekcjach wokół pricing/demo */
/* === ONLY: Book a 30-minute + Calendly (nic innego nie tykamy) === */

/* przesuń nagłówek w dół, żeby „przykleić” go do Calendly */
#demo .wrap > h2{ 
  margin-top: 45px !important;   /* schodzi w dół */
  margin-bottom: 0px !important; /* mała przerwa do opisu */
}
#demo .wrap > p{
  margin-top: 2px !important;
  margin-bottom: 4px !important; /* minimalna przerwa nad widżetem */
}

/* usuń ewentualną ramkę/cień wokół kontenera pod Calendly */
#demo .cal-card,
#demo .wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;      /* nie dopuszczamy dodatkowego marginesu nad iframe */
}

/* sam iframe bez dodatkowych marginesów */
#demo .calendly-inline-widget{
  margin: 0 !important;
}
/* --- Calendly: final, spójne wysokości --- */
#demo .calendly-inline-widget{
  width:100%;
  min-width:320px;
  margin:0 !important;
}

/* tablety */
@media (max-width:1024px){
  #demo .calendly-inline-widget{ height:1040px !important; }
}

/* telefony w pionie */
@media (max-width:768px){
  #demo .calendly-inline-widget{ height:880px !important; }
}

/* bardzo niskie ekrany (np. małe iPhone’y) */
@media (max-height:700px){
  #demo .calendly-inline-widget{ height:820px !important; }
}

/* odrobina ciaśniej pod sekcją – żeby nie było „pół ekranu” przerwy */
#demo{ padding-bottom:10px !important; }
#faq{  margin-top:12px !important; }
/* === DEMO + CALENDLY — TYLKO odstępy wokół widżetu === */

/* 1) Minimalny odstęp między opisem a widżetem */
#demo .wrap > h2 { margin-bottom: 2px !important; }   /* nie ruszamy top */
#demo .wrap > p  { margin-top: 0 !important; margin-bottom: 0px !important; }

/* 2) Kontener widżetu bez dodatkowych marginesów/ramek */
#demo .cal-card{
  margin-top: 0 !important;         /* NIC nad iframe */
  margin-bottom: 9px !important;    /* mały oddech pod iframe */
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) Sam widżet bez marginesów; wysokości per breakpoint */
#demo .calendly-inline-widget{
  display: block;
  width: 100%;
  min-width: 320px;
  margin: 0 !important;              /* żadnych marginesów */
  height: 880px !important;          /* desktop */
}

/* 4) Zmniejszamy odległość kolejnej sekcji (FAQ) od Calendly */
#faq{ margin-top: 12px !important; }

/* 5) Responsive (NIE zmienia pozycji nagłówka) */
@media (max-width: 1024px){
  #demo .calendly-inline-widget{ height: 780px !important; }
}
@media (max-width: 768px){
  #demo .calendly-inline-widget{ height: 780px !important; }
}
@media (max-height: 700px){
  #demo .calendly-inline-widget{ height: 760px !important; }
}

/* --- Who it's for: icons + corner pattern --- */
.card.who { position: relative; overflow: hidden; }

/* ikonki przy li */
.card.who .bullets li{
  position: relative; padding-left: 28px;
}
.card.who .bullets li::before{
  content:""; position:absolute; left:0; top:6px;
  width:18px; height:18px; background: currentColor; opacity:.92;
  -webkit-mask: var(--who-ico) no-repeat 50% 50% / contain;
          mask: var(--who-ico) no-repeat 50% 50% / contain;
}

/* konkretne maski (czyste inline SVG jako data-URI) */
.card.who .icon-gift   { --who-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M20 7h-3.17A3 3 0 1 0 12 5.25 3 3 0 1 0 7.17 7H4v5h16V7Zm-9-1a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 11 6Zm-4 0A1.5 1.5 0 1 1 8.5 4.5 1.5 1.5 0 0 1 7 6ZM4 14v5a2 2 0 0 0 2 2h5v-7Zm8 7h5a2 2 0 0 0 2-2v-5h-7Z"/></svg>'); }
.card.who .icon-sparkle{ --who-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M12 2l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5Zm7.5 10.5 1.2 3 3 1.2-3 1.2-1.2 3-1.2-3-3-1.2 3-1.2 1.2-3ZM4.5 12.5l.9 2.2 2.2.9-2.2.9-.9 2.2-.9-2.2-2.2-.9 2.2-.9.9-2.2Z"/></svg>'); }
.card.who .icon-store  { --who-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M4 4h16l-1 4H5L4 4Zm1 6h14v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-8Zm3 2v6h8v-6H8Z"/></svg>'); }

/* delikatny wzorek w prawym górnym rogu */
.card.who::after{
  content:""; position:absolute; top:-40px; right:-40px;
  width:220px; height:220px; pointer-events:none;
  opacity:.10; filter: blur(.2px);
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.6) 60%, transparent 61%),
    radial-gradient(2px 2px at 44% 32%, rgba(255,255,255,.5) 60%, transparent 61%),
    radial-gradient(2px 2px at 76% 22%, rgba(255,255,255,.4) 60%, transparent 61%),
    radial-gradient(2px 2px at 28% 64%, rgba(255,255,255,.45) 60%, transparent 61%),
    radial-gradient(2px 2px at 70% 72%, rgba(255,255,255,.4) 60%, transparent 61%);
}

#how-pilot { display: block !important; }
/* === Pilot brief: elegancki layout bez „kafelków” === */
#pilot-brief .brief-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:8px;
}
#pilot-brief .brief-title{
  margin:0; font-weight:800; letter-spacing:.2px; color:#eaf2ff;
  font-size:18px;
}

/* lista definicji: label (dt) w kolumnie po lewej, treść (dd) po prawej */
#pilot-brief .brief-list{
  position:relative; padding-left:18px;
  display:grid; gap:10px 18px;
}

/* pionowy akcent zamiast kart/ramek */
#pilot-brief .brief-list::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  border-radius:2px; opacity:.9;
}

#pilot-brief .row{
  display:grid; grid-template-columns:160px 1fr; align-items:start;
  gap:8px 18px;
}
#pilot-brief dt{
  margin:0; color:#cfe3ff; font-weight:800; letter-spacing:.3px;
}
#pilot-brief dd{
  margin:0; color:var(--muted);
}
#pilot-brief .muted{ color:var(--subtle); }

/* CTA lekko odsunięte, bez dominacji */
#pilot-brief .brief-ctas .btn{ white-space:nowrap; }

/* Mobile: układ „pod sobą”, pełna szerokość przycisków jeśli brakuje miejsca */
@media (max-width:720px){
  #pilot-brief .row{ grid-template-columns:1fr; }
  #pilot-brief dt{ order:0; }
  #pilot-brief dd{ order:1; }
  #pilot-brief .brief-ctas .btn{ width:100%; justify-content:center; }
}
/* === Pilot brief — compact chips CTA === */
#pilot-brief .brief-ctas--chips{
  display:flex; gap:10px; justify-content:flex-end;
  margin-top:12px;
}

#pilot-brief .cta-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  font-weight:700; font-size:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:inherit; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.18) inset;
}
#pilot-brief .cta-chip::after{
  content:"→"; opacity:.85; transform:translateX(0); transition:transform .12s ease, opacity .12s ease;
}
#pilot-brief .cta-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  box-shadow:0 6px 18px rgba(0,0,0,.24) inset;
}
#pilot-brief .cta-chip:active{
  transform:translateY(0); box-shadow:0 2px 6px rgba(0,0,0,.3) inset;
}

/* delikatny gradient tylko w obrysie dla primary */
#pilot-brief .cta-primary{
  position:relative;
  border-image: linear-gradient(90deg,var(--brand),var(--brand-2)) 1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}
#pilot-brief .cta-primary:hover{
  background:
    linear-gradient(90deg, rgba(34,211,238,.10), rgba(99,102,241,.10));
}

/* Mobile: pełna szerokość, przyciski jeden pod drugim (ale wciąż „chipsy”) */
@media (max-width:720px){
  #pilot-brief .brief-ctas--chips{ justify-content:stretch; flex-direction:column; }
  #pilot-brief .cta-chip{ justify-content:center; width:100%; }
}

/* Billing toggle — more visible */
.billing-toggle{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.05);
}
.billing-toggle .btn-small{
  border:1px solid transparent; border-radius:999px; padding:6px 10px;
  background:transparent; color:var(--subtle); cursor:pointer; font-weight:700;
}
.billing-toggle .btn-small.is-active{
  color:#0b1020; background:linear-gradient(90deg,var(--brand),var(--brand-2));
}
.price{font-size:30px; font-weight:800; margin:6px 0 6px}
.plans .card{display:flex; flex-direction:column}
.plans .card .btn{margin-top:auto}
/* Fallback: czytelne kroki na jednej linii, bez kafelków */
.steps-line{
  position:relative; display:flex; gap:24px; padding:0; margin:0;
  counter-reset: step;
}
.steps-line::before{
  content:""; position:absolute; left:22px; right:22px; top:18px; height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
  border-radius:2px;
}
.steps-line > li{
  list-style:none; flex:1 1 0; min-width:0; display:flex; gap:10px; align-items:flex-start;
}
.steps-line .n{
  counter-increment: step;
  display:inline-flex; width:26px; height:26px; flex:0 0 26px;
  align-items:center; justify-content:center; border-radius:999px;
  font-weight:800; font-size:12px; color:#0b1020;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 16px rgba(34,211,238,.18);
}
.steps-line .txt{min-width:0}
.steps-line .t{font-weight:800; color:#eaf2ff; line-height:1.2}
.steps-line .d{color:var(--muted); font-size:14px; margin-top:2px}

/* Responsywność: 2 kolumny / 1 kolumna bez linii */
@media (max-width:900px){
  .steps-line{flex-wrap:wrap}
  .steps-line::before{display:none}
  .steps-line > li{flex:1 1 46%}
}
@media (max-width:560px){
  .steps-line > li{flex:1 1 100%}
}