/* =========================================================
   FlowLeaders.io — shared stylesheet
   Palette: light/white base, near-black type, corporate blue accent
   (sampled from the reference design: #367dcb blue, #f1f1f1 grey band)
   ========================================================= */

:root{
  --bg: #ffffff;
  --bg-alt: #f1f1f1;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --border: rgba(20,30,48,0.10);
  --border-strong: rgba(46,109,178,0.38);
  --text: #101318;
  --text-muted: #616a78;
  --text-faint: #6e7581;
  --accent: #2e6db2;
  --accent-2: #1f5089;
  --accent-light: #7aa8dc;
  /* Inverted bars (header + footer). The hue and direction match the primary
     button; the range is deepened so small link/label text clears WCAG AA —
     on the button's own gradient even pure white only reaches 4.95:1. */
  --gradient-bar: linear-gradient(105deg, #275a8f 0%, #153a66 100%);
  --on-bar: #ffffff;
  --on-bar-muted: #d5e3f6;
  --on-bar-faint: #c6d9f1;
  --on-bar-accent: #9fc6f2;
  --bar-hover: rgba(255,255,255,0.14);
  --bar-border: rgba(255,255,255,0.20);
  --bar-panel: #1b4677;
  /* Warm CTA accent — the complement of the corporate blue. */
  --gradient-cta: linear-gradient(120deg, #7cc84a 0%, #55a832 100%);
  --gradient-cta-hover: linear-gradient(120deg, #8ed65c 0%, #63bb3c 100%);
  --on-cta: #ffffff;
  --accent-soft: rgba(46,109,178,0.10);
  --accent-glow: rgba(46,109,178,0.32);
  --gradient: linear-gradient(120deg, #3072ba 0%, #21518f 100%);
  --on-accent: #ffffff;
  --shadow-card: 0 18px 40px -24px rgba(16,24,40,0.28);
  --shadow-card-hover: 0 26px 52px -22px rgba(46,109,178,0.34);
  --radius: 18px;
  --radius-sm: 10px;
  --maxw: 1180px;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% 0%, rgba(46,109,178,0.10), transparent 62%),
    radial-gradient(46% 38% at 100% 14%, rgba(46,109,178,0.07), transparent 62%);
}
img{max-width:100%; display:block; border-radius:var(--radius);}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0 0 .5em; letter-spacing:-0.01em;}
p{margin:0 0 1em; color:var(--text-muted);}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1;}
section{position:relative; z-index:1;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--gradient);
  color:var(--on-accent);
  box-shadow:0 10px 30px -10px var(--accent-glow);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px -8px var(--accent-glow);}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border-strong);
}
.btn-ghost:hover{border-color:var(--accent); background:var(--accent-soft);}
.btn-sm{padding:10px 20px; font-size:.85rem;}
/* The nav CTA runs on grass green so it pops off the blue bar, brightening a
   step on hover. Flat — no bevel or lift. */
header.site-header .btn-primary{
  background:var(--gradient-cta);
  color:var(--on-cta);
  box-shadow:none;
}
header.site-header .btn-primary:hover{
  background:var(--gradient-cta-hover);
  box-shadow:none;
}
header.site-header .btn-ghost{color:var(--on-bar); border-color:var(--bar-border);}
header.site-header .btn-ghost:hover{border-color:var(--on-bar); background:var(--bar-hover);}

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,0.10);
  box-shadow:0 6px 24px -18px rgba(16,24,40,0.55);
}
/* Frosted-glass background lives on a pseudo-element rather than directly on
   header.site-header: a backdrop-filter on the header itself would create a
   new containing block for its position:fixed descendants (the mobile nav
   panel), breaking its full-viewport positioning on small screens. */
header.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--gradient-bar);
  pointer-events:none;
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:var(--maxw); margin:0 auto;
}
/* Logo lockup: the "flow path" mark (rising polyline through four nodes)
   followed by the wordmark. The wordmark is solid rather than gradient-filled —
   clipped-gradient text loses definition at small sizes; the accent lives on
   the ".io" suffix instead. */
.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.25rem;
  letter-spacing:-0.02em; color:var(--text); line-height:1;
}
header.site-header .logo{color:var(--on-bar);}
header.site-header .logo-dot{color:var(--on-bar-accent);}
.logo-mark{width:32px; height:32px; flex:none; display:block; overflow:visible;}
.logo-text{white-space:nowrap;}
.logo-dot{color:var(--accent);}
.logo:hover .logo-mark-tip{r:5.4;}
.logo-mark-tip{transition:r .18s ease;}
/* On the blue bars the mark keeps its original blue and sits in a white disc,
   so it reads as a badge instead of dissolving into the background. */
header.site-header .logo-mark,
footer.site-footer .logo-mark{
  width:38px; height:38px; padding:6px;
  background:var(--on-bar); border-radius:50%;
  box-sizing:border-box;
}
@media (max-width:420px){
  .logo{font-size:1.12rem; gap:8px;}
  header.site-header .logo-mark{width:32px; height:32px; padding:5px;}
}
nav.main-nav{display:flex; align-items:center; gap:2px;}
nav.main-nav > ul{list-style:none; display:flex; gap:6px; margin:0; padding:0; align-items:center;}
nav.main-nav > ul > li{position:relative;}
nav.main-nav > ul > li > a{
  display:block; padding:10px 14px; border-radius:999px;
  font-size:.94rem; color:var(--on-bar-muted);
  transition:color .15s ease, background .15s ease;
}
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li > a.active{color:var(--on-bar); background:var(--bar-hover);}
/* Dropdown affordance: instead of a caret trailing the label, a thin bar sits
   underneath it with the caret inside. It is absolutely positioned inside the
   link's bottom padding, so the item keeps the same height as its siblings and
   the row does not shift. left/right match the link's horizontal padding, which
   makes the bar exactly as wide as the label. */
/* Dropdown affordance: a plain solid bar under the label, filled with the same
   colour as the label itself. It hangs a few pixels below the link box so there
   is clear air between the two, and it inherits the link's colour transition so
   both brighten together on hover. */
.has-dropdown > a{position:relative;}
.has-dropdown > a::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:-1px;
  height:5px;
  background:currentColor;
  border-radius:2px;
  transition:background .15s ease;
}
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0;
  background:var(--bar-panel); border:1px solid var(--bar-border);
  border-radius:var(--radius-sm);
  min-width:250px;
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  box-shadow:0 20px 44px -18px rgba(9,26,48,0.55);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{display:block; padding:10px 12px; border-radius:8px; font-size:.9rem; color:var(--on-bar-muted);}
.dropdown a:hover{background:var(--bar-hover); color:var(--on-bar);}
.nav-right{display:flex; align-items:center; gap:14px;}
.lang-tag{font-size:.8rem; color:var(--on-bar-faint); border:1px solid var(--bar-border); padding:6px 10px; border-radius:999px;}
.nav-toggle{display:none; background:none; border:none; color:var(--on-bar); font-size:1.5rem; cursor:pointer;}

/* ---------- Language switcher ---------- */
.lang-switch{position:relative;}
.lang-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-family:var(--font-body); color:var(--on-bar-faint);
  background:none; border:1px solid var(--bar-border); padding:6px 12px; border-radius:999px;
  cursor:pointer; transition:border-color .15s ease, color .15s ease;
}
.lang-btn:hover{border-color:var(--on-bar); color:var(--on-bar);}
.lang-caret{font-size:.75em; opacity:.7;}
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0;
  background:var(--bar-panel); border:1px solid var(--bar-border); border-radius:var(--radius-sm);
  min-width:180px; padding:6px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  box-shadow:0 20px 44px -18px rgba(9,26,48,0.55);
}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-menu button{
  display:block; width:100%; text-align:left;
  background:none; border:none; cursor:pointer;
  padding:10px 12px; border-radius:8px;
  font-size:.9rem; color:var(--on-bar-muted); font-family:var(--font-body);
}
.lang-menu button:hover{background:var(--bar-hover); color:var(--on-bar);}
.lang-menu button.active{color:var(--on-bar-accent); font-weight:600;}

@media (max-width: 900px){
  .nav-toggle{display:block;}
  nav.main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--gradient-bar);
    display:flex; flex-direction:column; padding:20px 28px;
    transform:translateX(100%); transition:transform .25s ease;
    overflow-y:auto;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav > ul{flex-direction:column; align-items:stretch; width:100%; gap:2px;}
  nav.main-nav > ul > li > a{padding:14px 8px; border-radius:0; border-bottom:1px solid var(--bar-border);}
  /* Same bar as on the desktop bar, but drawn as an underline rather than an
     absolutely positioned box. In the hamburger panel the link stretches to the
     full width of the screen, so left/right offsets can no longer stand in for
     the label width — an underline tracks the text itself, and keeps doing so
     when the label changes length (e.g. "Usługi" → "Services"). */
  .has-dropdown > a::after{display:none;}
  .has-dropdown > a{
    text-decoration:underline;
    text-decoration-color:currentColor;
    text-decoration-thickness:5px;
    text-underline-offset:8px;
    text-decoration-skip-ink:none;
  }
  .has-dropdown.open > a{text-decoration-color:var(--on-bar);}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; display:none; border:none; background:rgba(255,255,255,0.08); margin:4px 0 8px;}
  .has-dropdown.open .dropdown{display:block;}
  /* Stacked in the panel the language button sits directly above the CTA, so the
     row gap of 14px is widened to keep them from reading as one control. */
  .nav-right{margin-top:16px; flex-direction:column; align-items:stretch; gap:26px;}
  .nav-right .btn{width:100%; justify-content:center;}
  .lang-switch{width:100%;}
  .lang-btn{width:100%; justify-content:space-between;}
  .lang-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    display:none; box-shadow:none; margin-top:8px;
  }
  .lang-switch.open .lang-menu{display:block;}
}

/* ---------- Hero ----------
   The photo stays clearly visible on the right-hand side (as in the reference
   design) while a near-opaque white wash keeps the left-hand column, where all
   the copy sits, fully legible. A soft bottom fade blends into the next
   section. */
.hero{
  padding:88px 0 70px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.92) 100%),
    linear-gradient(95deg,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.955) 38%,
      rgba(255,255,255,0.90) 52%,
      rgba(255,255,255,0.55) 66%,
      rgba(255,255,255,0.18) 82%,
      rgba(255,255,255,0.06) 100%),
    url("hero_section.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero .eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:.78rem;
  color:var(--accent); font-weight:600; margin-bottom:14px; display:block;
}
.hero h1{font-size:clamp(2.2rem, 5vw, 3.4rem); line-height:1.1; max-width:820px;}
.hero h1 strong, h1 strong, h2 strong{
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:700;
}
.hero p.lead{font-size:1.1rem; max-width:640px;}
/* Hairline white halo: keeps copy crisp where it overlaps the photo texture.
   Excluded from <strong>, whose glyphs are filled by a clipped background —
   a shadow there would bleed through the transparent text and wash it out. */
.hero h1, .hero p.lead, .hero .eyebrow{text-shadow:0 1px 2px rgba(255,255,255,0.85);}
.hero h1 strong{text-shadow:none;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}
.hero-media{margin-top:48px;}
.hero-media img{width:100%; border:1px solid var(--border);}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}
/* On phones there is no free right-hand column, so the photo is revealed
   vertically instead: pale behind the copy, opening up towards the bottom. */
@media (max-width:900px){
  .hero{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0.955) 0%,
        rgba(255,255,255,0.945) 64%,
        rgba(255,255,255,0.86) 76%,
        rgba(255,255,255,0.40) 90%,
        rgba(255,255,255,0.22) 97%,
        rgba(255,255,255,0.80) 100%),
      url("hero_section.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
}

/* ---------- Section headers ---------- */
.section{padding:80px 0;}
.section-head{max-width:640px; margin:0 auto 48px;}
.section-head.left{margin:0 0 48px;}
.section-head .eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:.78rem;
  color:var(--accent); font-weight:600; display:block; margin-bottom:10px;
}
.section-head h2{font-size:clamp(1.6rem, 3.2vw, 2.3rem);}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------- Stats ---------- */
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 28px; text-align:center;
  box-shadow:var(--shadow-card);
}
.stat-card .num{
  font-family:var(--font-display); font-size:3rem; font-weight:700;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-card .label{color:var(--text-muted); margin-top:8px; font-size:.95rem;}
@media (max-width:700px){.stats-grid{grid-template-columns:1fr;}}

/* ---------- Before / After comparison ---------- */
.before-after{display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:stretch;}
@media (max-width:900px){.before-after{grid-template-columns:1fr; gap:0;}}
.ba-col{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 32px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-card);
}
.ba-after{
  border-color:var(--border-strong);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(46,109,178,0.22), transparent 60%),
    var(--surface);
}
.ba-tag{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.1em; padding:6px 16px; border-radius:999px; margin-bottom:22px;
}
.ba-before .ba-tag{background:rgba(16,24,40,0.05); color:var(--text-faint); border:1px solid var(--border);}
.ba-after .ba-tag{background:var(--gradient); color:var(--on-accent);}
.ba-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.ba-col li{position:relative; padding-left:30px; color:var(--text-muted); font-size:.96rem; line-height:1.5;}
.ba-before li::before{content:"✕"; position:absolute; left:0; top:1px; color:#d92d20; font-weight:700;}
.ba-after li{color:var(--text);}
.ba-after li::before{content:"✓"; position:absolute; left:0; top:1px; color:var(--accent); font-weight:700;}
.ba-arrow{
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:var(--accent); font-family:var(--font-display);
}
@media (max-width:900px){
  .ba-arrow{transform:rotate(90deg); margin:14px auto;}
}

/* ---------- Cards / pillars ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.card-grid, .card-grid.cols-2{grid-template-columns:1fr;}}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 28px; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:var(--shadow-card);
}
.card:hover{border-color:var(--border-strong); transform:translateY(-4px); box-shadow:var(--shadow-card-hover);}
.card .icon-dot{
  width:44px; height:44px; border-radius:12px; margin-bottom:18px;
  background:var(--gradient); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--on-accent);
}
.card h3{font-size:1.15rem; margin-bottom:10px;}
.card p{margin:0; font-size:.95rem;}

/* ---------- Vibrant training cards (szkolenia-ai) ---------- */
.training-card{position:relative; overflow:hidden; padding-top:38px; border-width:1px;}
.training-card::before{
  content:""; position:absolute; inset:-30% -20% auto auto; width:70%; height:70%;
  pointer-events:none; opacity:.9;
}
.training-card h3{position:relative; z-index:1;}
.training-card p{position:relative; z-index:1;}
.training-card .card-icon{
  position:absolute; top:24px; right:26px; z-index:1;
  font-size:2.1rem; line-height:1; filter:drop-shadow(0 0 14px var(--accent-glow));
}
.training-ded{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(46,109,178,0.30), transparent 60%),
    var(--surface);
  border-color:var(--border-strong);
}
.training-ded::before{background:radial-gradient(circle, rgba(46,109,178,0.35), transparent 70%);}
.training-post{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(31,90,168,0.30), transparent 60%),
    var(--surface);
  border-color:var(--border-strong);
}
.training-post::before{background:radial-gradient(circle, rgba(31,90,168,0.35), transparent 70%);}
.training-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -20px var(--accent-glow);}

/* ---------- Vibrant savings tiles (index hero section) ---------- */
.save-card{position:relative; overflow:hidden; padding-top:38px;}
.save-card::before{
  content:""; position:absolute; inset:-30% -20% auto auto; width:70%; height:70%;
  pointer-events:none; opacity:.9;
}
.save-card h3{position:relative; z-index:1;}
.save-card p{position:relative; z-index:1;}
.save-card .card-icon{
  position:absolute; top:24px; right:26px; z-index:1;
  font-size:2.1rem; line-height:1; filter:drop-shadow(0 0 14px var(--accent-glow));
}
.save-grid .save-card:nth-child(3n+1){
  background:radial-gradient(120% 90% at 100% 0%, rgba(46,109,178,0.26), transparent 60%), var(--surface);
  border-color:var(--border-strong);
}
.save-grid .save-card:nth-child(3n+1)::before{background:radial-gradient(circle, rgba(46,109,178,0.32), transparent 70%);}
.save-grid .save-card:nth-child(3n+2){
  background:radial-gradient(120% 90% at 100% 0%, rgba(31,90,168,0.26), transparent 60%), var(--surface);
  border-color:var(--border-strong);
}
.save-grid .save-card:nth-child(3n+2)::before{background:radial-gradient(circle, rgba(31,90,168,0.32), transparent 70%);}
.save-grid .save-card:nth-child(3n+3){
  background:radial-gradient(120% 90% at 100% 0%, rgba(46,109,178,0.18), rgba(31,90,168,0.16) 60%, transparent 80%), var(--surface);
  border-color:var(--border-strong);
}
.save-grid .save-card:nth-child(3n+3)::before{background:radial-gradient(circle, rgba(46,109,178,0.24), rgba(31,90,168,0.2) 70%, transparent 85%);}
.save-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px -20px var(--accent-glow);}
.save-metrics{position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.save-metrics li{display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.save-metrics strong{
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.save-metrics span{font-size:.88rem; color:var(--text-muted); line-height:1.4;}

/* Moving carousel for the savings cards */
.save-carousel{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.save-track{
  display:flex; gap:22px; width:max-content;
  animation:save-scroll 32s linear infinite;
}
.save-carousel:hover .save-track{animation-play-state:paused;}
.save-track .save-card{flex:0 0 230px; width:230px;}
@keyframes save-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - 11px));}
}
@media (max-width:700px){
  .save-track .save-card{flex-basis:200px; width:200px;}
}
@media (prefers-reduced-motion: reduce){
  .save-track{animation:none;}
  .save-carousel{overflow-x:auto;}
}

/* ---------- Process steps ---------- */
.steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.steps-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.steps-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.steps-grid{grid-template-columns:1fr;}}
.step{padding:26px 22px; border-left:1px solid var(--border);}
.step .step-num{
  font-family:var(--font-display); font-weight:700; font-size:1.6rem;
  color:var(--accent); opacity:.55; display:block; margin-bottom:14px;
}
.step h4{font-size:1.05rem; margin-bottom:8px;}
.step p{font-size:.92rem; margin:0;}

/* Opt-in modifier: on phones the grid collapses into a single scrolling row that
   script.js drifts along, the same treatment the .flow-steps strips get. On
   wider screens the rule does not apply and the section stays a plain grid — the
   carousel in script.js only animates a strip that actually overflows, so a grid
   with nothing to scroll simply stands still. Snapping is left off on purpose:
   it would fight the sub-pixel autoplay and pin scrollLeft at 0. */
@media (max-width:900px){
  .steps-grid.steps-carousel{
    display:flex;
    grid-template-columns:none;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:none;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .steps-grid.steps-carousel::-webkit-scrollbar{display:none;}
  .steps-grid.steps-carousel .step{flex:0 0 76%; min-width:0;}
}

/* ---------- Flow steps (arrow-connected process) ----------
   Always a single row. The strip never wraps, so a five-step process no longer
   drops its last tile onto a second line — it overflows horizontally instead and
   the carousel in script.js drifts it along. Scroll snapping is deliberately NOT
   used: the autoplay advances in sub-pixel steps and a snap container pulls every
   such step back to the nearest snap point, pinning scrollLeft at 0.
   flex:1 0 <basis> means tiles grow to fill the row when the process is short
   enough to fit (so nothing changes for a four-step section), but never shrink
   below the basis — which is what forces the overflow when it is not. */
.flow-steps{
  display:flex; align-items:stretch; gap:0;
  flex-wrap:nowrap;
  overflow-x:auto;
  scroll-snap-type:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  scrollbar-width:none;
}
.flow-steps::-webkit-scrollbar{display:none;}
.flow-step{
  flex:1 0 232px; min-width:232px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 24px; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:var(--shadow-card);
}
.flow-step:hover{border-color:var(--border-strong); transform:translateY(-4px); box-shadow:var(--shadow-card-hover);}
.flow-step h4{font-size:1.05rem; margin-bottom:8px;}
.flow-step p{font-size:.92rem; margin:0;}
.flow-arrow{
  display:flex; align-items:center; justify-content:center;
  padding:0 18px; font-size:1.7rem; color:var(--accent); font-family:var(--font-display); flex:none;
}
@media (max-width:900px){
  /* Phones show one tile at a time rather than a fixed pixel width. */
  .flow-step{flex:0 0 80%; min-width:0;}
  .flow-arrow{flex:0 0 auto; padding:0 12px;}
}

/* ---------- Media split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:32px;}}
.split img{border:1px solid var(--border);}
.split.reverse .media{order:2;}
@media (max-width:900px){.split.reverse .media{order:0;}}
/* Narrower media column — for splits where the copy should carry the section and
   the image is a supporting note rather than the headline.
   The source photo is a leftover from the old dark violet theme, so on a white
   page it reads as a black slab. It is recoloured here as a blue duotone: the
   frame carries a brand-blue gradient, the image is desaturated and composited
   with `screen`, which maps its blacks onto the frame colour and its highlights
   towards white. Nothing in the result can come out darker than the gradient.
   Swap `screen` for `luminosity` if a punchier, higher-contrast version is
   wanted; the two gradient stops set how light the whole thing sits. */
.split.media-compact{grid-template-columns:1.35fr .65fr;}
.split.media-compact .media{
  max-width:380px; margin-left:auto;
  position:relative; isolation:isolate;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(140deg, #7aa8dc 0%, #2e6db2 55%, #1f5089 100%);
}
.split.media-compact .media img{
  display:block; width:100%;
  border:0; border-radius:0;
  filter:grayscale(1) contrast(1.04) brightness(1.10);
  mix-blend-mode:screen;
}
/* A soft light wash across the top-left keeps the tile from looking flat. */
.split.media-compact .media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%);
}
@media (max-width:900px){
  .split.media-compact{grid-template-columns:1fr;}
  .split.media-compact .media{max-width:100%; margin-left:0;}
}

/* ---------- Image grid (rozwiazania) ---------- */
.img-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:700px){.img-grid{grid-template-columns:repeat(2,1fr);}}
.img-grid img{border:1px solid var(--border); aspect-ratio:1/1; object-fit:cover; width:100%;}

/* ---------- Testimonial ---------- */
.testimonial{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:44px; max-width:760px; margin:0 auto;
  box-shadow:var(--shadow-card);
}
.testimonial p.quote{font-size:1.25rem; color:var(--text); font-style:italic;}
.testimonial .author{color:var(--accent); font-weight:600; font-size:.9rem;}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto; counter-reset:faq-counter;}
.faq-item{border-bottom:1px solid var(--border); counter-increment:faq-counter;}
.faq-item summary{
  padding:22px 4px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--text);
}
.faq-item summary .faq-q-text{display:flex; gap:10px; align-items:baseline;}
.faq-item summary .faq-q-text::before{
  content:counter(faq-counter) ".";
  color:var(--accent); font-weight:700; flex:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:1.4rem; color:var(--accent); font-weight:400; flex:none;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 4px 22px; margin:0; font-size:.95rem;}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:24px;
  box-shadow:var(--shadow-card);
  padding:56px; text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:220%;
  background:radial-gradient(circle, var(--accent-soft), transparent 65%);
  pointer-events:none;
}
.cta-banner h2{font-size:clamp(1.5rem,3vw,2.1rem); position:relative;}
.cta-banner p{position:relative; max-width:520px; margin-left:auto; margin-right:auto;}
.cta-banner .btn{position:relative; margin-top:10px;}

@media (max-width:600px){
  /* Long button labels ("Umów bezpłatną konsultację" itp.) no longer force
     the button wider than its container on phones — they wrap onto a
     second line instead, so the button stays centered and correctly sized. */
  .btn{white-space:normal; text-align:center; max-width:100%;}
  .cta-banner{padding:36px 24px;}
}

/* "Policzalne Korzyści" section (index.html) — desktop/tablet only, hidden on phones. */
@media (max-width:900px){
  .savings-section{display:none;}
}

/* "Nasze podejście do sukcesu" flow-steps section (index.html) — visible on
   every breakpoint. On phones its .flow-steps strip turns into the same
   auto-scrolling carousel used on integracje.html (see the .flow-steps rules
   above and the flow-steps block in script.js). */

/* ---------- Contact form ---------- */
.contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start;}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr;}}
form.contact-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-card);}
.field label, .field .field-label{display:block; font-size:.85rem; color:var(--text-muted); margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; background:var(--bg-alt); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 16px; color:var(--text); font-family:var(--font-body); font-size:.95rem;
}
.field textarea{min-height:130px; resize:vertical;}
.checkbox-group{
  display:flex; flex-direction:column; gap:10px;
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px 16px;
}
.field .checkbox-item{
  display:flex; align-items:center; gap:10px;
  font-size:.95rem; color:var(--text); cursor:pointer; margin:0;
}
.field .checkbox-item input[type="checkbox"]{
  width:18px; height:18px; flex:none; margin:0;
  accent-color:var(--accent); cursor:pointer;
}
.field .checkbox-item.select-all{
  padding-bottom:12px; border-bottom:1px solid var(--border);
  font-weight:600;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent);}
.form-note{font-size:.85rem; color:var(--text-faint);}
.field-error{display:none; font-size:.82rem; color:#d92d20; margin:6px 0 0;}
.field-error.show{display:block;}
.field input.invalid{border-color:#d92d20;}
.form-status{font-size:.9rem; margin-top:4px; display:none;}
.form-status.show{display:block;}

/* ---------- Contact form on the inverted blue panel ----------
   The card carries the same gradient as the header and footer. Inputs stay white
   with dark text rather than becoming translucent: whatever the visitor types has
   to be the most legible thing on the panel, and a light field on a dark card
   also makes it obvious where the tappable areas are. */
form.contact-form{
  background:var(--gradient-bar);
  border-color:var(--bar-border);
  color:var(--on-bar-muted);
}
.contact-form .field label,
.contact-form .field .field-label{color:var(--on-bar-faint);}
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea{
  background:#ffffff;
  border:1px solid rgba(255,255,255,0.35);
  color:var(--text);
}
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder{color:var(--text-faint);}
.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus{
  border-color:#ffffff;
  box-shadow:0 0 0 3px rgba(255,255,255,0.25);
}
.contact-form .checkbox-group{
  background:rgba(255,255,255,0.09);
  border:1px solid var(--bar-border);
}
.contact-form .field .checkbox-item{color:var(--on-bar);}
.contact-form .field .checkbox-item.select-all{border-bottom-color:var(--bar-border);}
/* A blue accent-colour would all but vanish against the panel. */
.contact-form .field .checkbox-item input[type="checkbox"]{accent-color:#ffffff;}
.contact-form .form-note{color:var(--on-bar-faint);}
.contact-form .form-status{color:var(--on-bar);}
/* #d92d20 is tuned for white backgrounds and goes muddy here — this is the same
   red lifted until it reads on navy. */
.contact-form .field-error{color:#ffb4ab;}
.contact-form .field input.invalid{border-color:#ffb4ab;}
/* The default blue-gradient button would sit on a blue card; reuse the nav CTA.
   align-self:center overrides the form's default stretch, so the button shrinks
   to its label plus the .btn padding and sits centred in the column. */
.contact-form .btn-primary{
  background:var(--gradient-cta);
  color:var(--on-cta);
  box-shadow:none;
  align-self:center;
  margin-top:6px;
}
.contact-form .btn-primary:hover{
  background:var(--gradient-cta-hover);
  box-shadow:none;
}

/* ---------- Q&A lead image (qa.html) ----------
   Capped well below the 1180px container: at full width the illustration would
   outweigh the heading it introduces. margin:auto centres it, and the figure
   resets the browser's default figure margin. */
.qa-figure{
  max-width:460px;
  /* The negative top margin eats into the section's own 80px of padding — the
     image is an opener for the heading below it, so it should sit closer to that
     heading than to the section boundary above. */
  margin:-28px auto 22px;
  padding:0;
  /* The blend below needs a known backdrop. Ancestors (.container, section) set
     position + z-index and therefore form stacking contexts, so the image would
     otherwise blend against transparency and change nothing. Painting the band
     colour on the figure and isolating it makes the backdrop explicit. */
  background:var(--bg-alt);
  isolation:isolate;
}
/* No frame of any kind — the illustration sits straight on the grey band.
   border-radius is reset because the global img rule rounds every image to 18px,
   which would clip the artwork's corners.

   `darken` keeps, per channel, whichever is darker: the image or the #f1f1f1
   backdrop. Every pixel of the file's own background — whether it is #f1f1f1 or
   plain white — therefore resolves to exactly #f1f1f1 and disappears into the
   band, while the darker coloured elements come through untouched. `multiply`
   would not do this: #f1f1f1 multiplied by itself lands on #e3e3e3, i.e. a
   visible darker rectangle. */
.qa-figure img{
  width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  mix-blend-mode:darken;
}
@media (max-width:600px){
  .qa-figure{max-width:100%; margin:-18px auto 18px;}
}

/* ---------- Contact map (representational only, no interaction) ---------- */
.contact-map{
  margin-top:28px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  height:260px;
}
.contact-map iframe{
  width:100%; height:100%; border:0; display:block;
  pointer-events:none;
  filter:saturate(.92) contrast(1.02);
}

/* ---------- Department showcase (rozwiazania.html) ---------- */
.dept-filter{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px;}
@media (max-width:480px){
  .dept-filter{flex-direction:column; align-items:stretch;}
  .dept-filter-btn{justify-content:center; width:100%;}
}
.dept-filter-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-size:.85rem; font-weight:500; color:var(--text-muted);
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:9px 18px; cursor:pointer; transition:all .16s ease;
}
.dept-filter-btn:hover{border-color:var(--border-strong); color:var(--text);}
.dept-filter-btn.active{
  background:var(--gradient); border-color:transparent; color:var(--on-accent); font-weight:600;
}
.dept-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:1000px){.dept-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.dept-grid{grid-template-columns:1fr;}}
.dept-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px; display:flex; flex-direction:column; gap:14px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:var(--shadow-card);
}
.dept-card:hover{border-color:var(--border-strong); transform:translateY(-4px); box-shadow:var(--shadow-card-hover);}
.dept-card-top{display:flex; align-items:center; gap:8px;}
.dept-cat-icon{font-size:1.05rem; line-height:1;}
.dept-cat-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--text-faint);
}
.dept-card h3{font-size:1.02rem; margin:0; line-height:1.3;}
.dept-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1;}
.dept-points li{
  position:relative; padding-left:18px; font-size:.85rem; color:var(--text-muted); line-height:1.45;
}
.dept-points li::before{content:"›"; position:absolute; left:0; color:var(--accent); font-weight:700;}
.dept-savings{
  font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--text);
  background:linear-gradient(120deg, rgba(46,109,178,0.18), rgba(31,90,168,0.14));
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:10px 14px; line-height:1.35;
}

/* ---------- Department showcase — circle layout (desktop) ---------- */
.dept-circle-wrap{position:relative; margin-top:30px;}
.dept-grid.circle-mode{
  display:block; position:relative; margin:0 auto; max-width:1400px;
}
.dept-grid.circle-mode .dept-card{
  position:absolute; top:50%; left:50%; width:250px; min-height:270px;
  transform:translate(-50%,-50%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  padding:20px 20px; z-index:1;
}
/* While the slow clockwise orbit animation is running, positions are updated
   every frame via JS — drop the transform transition so the motion stays
   perfectly smooth instead of chasing/easing behind each frame. */
.dept-grid.circle-mode.orbit-active .dept-card{
  transition:opacity .3s ease;
}
.dept-grid.circle-mode .dept-card:hover{z-index:3;}
.dept-grid.circle-mode .dept-card h3{font-size:.95rem;}
.dept-grid.circle-mode .dept-card .dept-points li{font-size:.78rem;}
.dept-grid.circle-mode .dept-card .dept-savings{font-size:.78rem; padding:8px 10px;}
.dept-circle-hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:187.5px; height:187.5px; border-radius:50%;
  background:var(--gradient); display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:4px; text-align:center; padding:14px;
  box-shadow:0 0 60px -10px var(--accent-glow);
  z-index:2;
}
.dept-grid.circle-mode .dept-circle-hub{display:flex;}
.dept-hub-icon{font-size:2.5rem; line-height:1;}
.dept-hub-label{
  font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--on-accent); line-height:1.2;
}
.dept-hub-controls{margin-top:8px; display:flex; align-items:center; gap:6px;}
.dept-hub-toggle{
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.55); background:rgba(255,255,255,0.18);
  color:var(--on-accent); font-size:.65rem; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.dept-hub-toggle:hover{background:rgba(255,255,255,0.30); border-color:rgba(255,255,255,0.75);}
.dept-speed-btn{
  width:19.5px; height:19.5px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.55); background:rgba(255,255,255,0.18);
  color:var(--on-accent); font-size:.49rem; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.dept-speed-btn:hover{background:rgba(255,255,255,0.30); border-color:rgba(255,255,255,0.75);}

/* ---------- Footer ----------
   Shares the header's inverted blue bar so the page is bookended by the brand
   colour. All type inside switches to the --on-bar-* ramp. */
footer.site-footer{
  background:var(--gradient-bar);
  color:var(--on-bar-muted);
  padding:64px 0 32px; margin-top:64px;
}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr; gap:28px;}}
.footer-grid h4{font-size:1.1rem; margin-bottom:14px; color:var(--on-bar); letter-spacing:-0.01em;}
.footer-grid h4 .logo-dot{color:var(--on-bar-accent);}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
/* The heading keeps a bottom margin everywhere else in the footer. Inside the
   brand lockup it has to go: a flex item is centred by its margin box, so that
   margin would push the wordmark half its height above the disc's centre.
   Declared after .footer-grid h4 — equal specificity, so source order decides. */
.footer-brand h4{margin:0; line-height:1;}
.footer-grid .foot-label{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--on-bar-faint); margin-bottom:10px; font-weight:600;
}
.footer-grid p{font-size:.9rem; color:var(--on-bar-muted);}
.footer-grid a{
  color:var(--on-bar-muted);
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.footer-grid a:hover{color:var(--on-bar); border-bottom-color:rgba(255,255,255,0.45);}
.footer-bottom{
  margin-top:44px; padding-top:24px; border-top:1px solid var(--bar-border);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:.82rem; color:var(--on-bar-faint);
}

/* ---------- Chat widget (chatbot.js) ----------
   Deliberately small: 360px wide, capped at 520px tall and at 70% of the
   viewport height, anchored to the bottom-right corner. It is a side channel,
   not a takeover — the page stays readable behind it. On phones it becomes a
   bottom sheet that still leaves the top of the screen visible. */
.fl-chat{
  position:fixed; right:22px; bottom:22px; z-index:70;
  font-family:var(--font-body);
  /* Flex column aligned to the right, rather than a float on the launcher: a
     float would collapse the height of this fixed container. */
  display:flex; flex-direction:column; align-items:flex-end;
}
.fl-chat-launcher{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px 12px 16px;
  border:none; border-radius:999px; cursor:pointer;
  background:var(--gradient-cta); color:var(--on-cta);
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  box-shadow:0 10px 26px -10px rgba(9,26,48,0.45);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.fl-chat-launcher:hover{
  transform:translateY(-2px);
  background:var(--gradient-cta-hover);
  box-shadow:0 14px 30px -10px rgba(9,26,48,0.5);
}
.fl-chat-launcher-icon{display:flex;}
.fl-chat.is-open .fl-chat-launcher{display:none;}

.fl-chat-panel{
  width:360px; max-width:calc(100vw - 44px);
  height:520px; max-height:70vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 26px 60px -24px rgba(9,26,48,0.45);
}
.fl-chat-panel[hidden]{display:none;}

.fl-chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  background:var(--gradient-bar); color:var(--on-bar);
  flex:none;
}
.fl-chat-head-text{display:flex; flex-direction:column; line-height:1.3;}
.fl-chat-head-text strong{font-family:var(--font-display); font-size:.95rem;}
.fl-chat-head-text span{font-size:.78rem; color:var(--on-bar-muted);}
.fl-chat-close{
  background:none; border:none; cursor:pointer;
  color:var(--on-bar); font-size:1.5rem; line-height:1;
  padding:0 4px; opacity:.85;
}
.fl-chat-close:hover{opacity:1;}

.fl-chat-log{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  background:var(--bg-alt);
}
.fl-msg{
  max-width:88%; padding:11px 14px; border-radius:14px;
  font-size:.9rem; line-height:1.55;
}
.fl-msg p{margin:0 0 .6em;}
.fl-msg p:last-child{margin:0;}
.fl-msg ul{margin:.2em 0 .5em; padding-left:18px;}
.fl-msg li{margin-bottom:5px;}
.fl-msg-bot{
  align-self:flex-start;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border);
  border-bottom-left-radius:5px;
}
.fl-msg-bot p{color:var(--text-muted);}
.fl-msg-bot a{color:var(--accent); text-decoration:underline;}
.fl-msg-user{
  align-self:flex-end;
  background:var(--gradient-bar); color:var(--on-bar);
  border-bottom-right-radius:5px;
}

/* Wskaźnik pisania — trzy kropki podskakujące jedna po drugiej. */
.fl-typing{
  display:flex; align-items:center; gap:5px;
  padding:14px 16px;
}
.fl-typing span{
  width:7px; height:7px; border-radius:50%;
  background:var(--text-faint);
  animation:fl-dot 1.25s infinite ease-in-out;
}
.fl-typing span:nth-child(2){animation-delay:.18s;}
.fl-typing span:nth-child(3){animation-delay:.36s;}
@keyframes fl-dot{
  0%, 60%, 100%{transform:translateY(0); opacity:.45;}
  30%{transform:translateY(-4px); opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .fl-typing span{animation:none; opacity:.6;}
}
/* Pole tekstowe przygasa, gdy asystent "pisze" — sygnał, że warto poczekać. */
.fl-chat.is-busy .fl-chat-input{opacity:.55;}
.fl-chat.is-busy .fl-chat-send{opacity:.45; pointer-events:none;}

.fl-chat-form{
  display:flex; gap:8px; padding:12px;
  background:var(--surface); border-top:1px solid var(--border); flex:none;
}
.fl-chat-input{
  flex:1; min-width:0;
  border:1px solid var(--border); border-radius:999px;
  padding:10px 16px; font-family:var(--font-body); font-size:.88rem;
  color:var(--text); background:var(--bg);
}
.fl-chat-input:focus{outline:none; border-color:var(--accent);}
.fl-chat-send{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:none; cursor:pointer;
  background:var(--gradient); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
}
.fl-chat-send:hover{opacity:.9;}

@media (max-width:640px){
  .fl-chat{right:14px; bottom:14px; left:14px;}
  .fl-chat-panel{width:100%; max-width:none; height:66vh; max-height:none;}
}
/* The mobile menu is a full-screen fixed panel — the launcher would float on
   top of the navigation links, so it is hidden while the menu is open. */
body.nav-open .fl-chat{display:none;}

@media (prefers-reduced-motion: reduce){
  .fl-chat-launcher{transition:none;}
  .fl-chat-launcher:hover{transform:none;}
}

/* ---------- Utility reveal animation ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* Scale + Blur Fade reveal (elements sharpen and grow into view) */
.reveal-blur{
  opacity:0;
  transform:scale(0.85);
  filter:blur(12px);
  transition:opacity .8s ease, transform .8s ease, filter .8s ease;
}
.reveal-blur.in{opacity:1; transform:scale(1); filter:blur(0);}

/* Converging reveal: text drives in from the left, media from the right */
.reveal-left{opacity:0; transform:translateX(-70px); transition:opacity .8s ease, transform .8s ease;}
.reveal-left.in{opacity:1; transform:none;}
.reveal-right{opacity:0; transform:translateX(70px); transition:opacity .8s ease, transform .8s ease;}
.reveal-right.in{opacity:1; transform:none;}

/* Pop-in reveal: section scales up from small with a slight bounce overshoot */
.reveal-pop{opacity:0; transform:scale(.6); transition:opacity 1s ease, transform 1.3s cubic-bezier(.34,1.56,.64,1);}
.reveal-pop.in{opacity:1; transform:scale(1);}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-blur, .reveal-left, .reveal-right, .reveal-pop{opacity:1; transform:none; filter:none; transition:none;}
  html{scroll-behavior:auto;}
}