/* ===========================
   TOKENS
   =========================== */
:root{
    --primary:#6C2BD9; --accent:#C74BFF; --cyan:#00D1FF;
    --bg:#0A0612; --text:#EDEAF7; --muted:#B9AEE3;
    --radius:16px; --border-weak:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.28);
    --container:1280px;
    --nav-glow:232,107,255; --btn-glow-rgb:232,107,255;
    --brand-grad: linear-gradient(90deg, var(--primary), var(--cyan));
    --card-fill: rgba(255,255,255,.04);
}
:root{ color-scheme:dark }

/* ===========================
   RESET / BASE
   =========================== */
*{ box-sizing:border-box; -webkit-tap-highlight-color:rgba(108,43,217,.25) }
html,body{ margin:0; height:100% }
body{
    display:flex; flex-direction:column; min-height:100vh; color:var(--text);
    font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,"Noto Sans","Helvetica Neue",sans-serif;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
main{ flex:1 }
img{ max-width:100%; height:auto }
.container{ width:min(var(--container),92vw); margin-inline:auto; padding:16px }
.muted{ color:var(--muted) }
:focus-visible{ outline:2px solid rgba(108,43,217,.7); outline-offset:3px }

/* a11y */
.visually-hidden{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; border:0; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link:focus{
    position:fixed; left:12px; top:12px; z-index:1000; padding:10px 12px; border-radius:10px;
    background:#150f21; color:#fff; border:1px solid rgba(255,255,255,.25);
}

/* typografia */
h1,.hero__title,.section-title{ text-wrap:balance }
p{ text-wrap:pretty }

/* ===========================
   TŁO
   =========================== */
html{
    background:
            radial-gradient(90vmax 70vmax at 10% -10%, rgba(108,43,217,.18), transparent 60%),
            radial-gradient(80vmax 70vmax at 90% 10%,  rgba(199,75,255,.12), transparent 60%),
            radial-gradient(70vmax 60vmax at 50% 120%, rgba(0,209,255,.10), transparent 60%),
            linear-gradient(180deg, #09040f, var(--bg) 40%, #0b0815);
    background-attachment:fixed,fixed,fixed,fixed;
}
html::before,html::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-1 }
html::before{ background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1.8px); background-size:3px 3px; mix-blend-mode:overlay; opacity:.35 }
html::after{ background-image:linear-gradient(.5deg,rgba(0,0,0,.02),rgba(255,255,255,.015)); opacity:.25 }
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.blob{ position:absolute; filter:blur(50px); opacity:.45; mix-blend-mode:screen }
.b1{ width:48vmin; height:48vmin; left:-6%; top:-8%; background:radial-gradient(circle at 30% 30%,rgba(108,43,217,.5),transparent 60%) }
.b2{ width:56vmin; height:56vmin; right:-8%; top:8%;  background:radial-gradient(circle at 60% 40%,rgba(199,75,255,.45),transparent 60%) }
.b3{ width:60vmin; height:60vmin; left:20%; bottom:-12%; background:radial-gradient(circle at 40% 60%,rgba(0,209,255,.35),transparent 60%) }
/* animacje blobów (respect RRM) */
.blob{
    animation:blobDrift var(--blob-speed,22s) ease-in-out infinite alternate,
    blobPulse calc(var(--blob-speed,22s) * 1.2) ease-in-out infinite alternate;
    will-change:transform,filter; transform:translate3d(0,0,0);
}
.b1{ --blob-speed:16s; --ampX:10vw;  --ampY:7vh;  --rot:10deg }
.b2{ --blob-speed:18s; --ampX:-12vw; --ampY:6vh;  --rot:-12deg }
.b3{ --blob-speed:20s; --ampX:9vw;  --ampY:-9vh; --rot:8deg }
@keyframes blobDrift{
    0%{ transform:translate3d(0,0,0) rotate(0) scale(1) }
    50%{ transform:translate3d(calc(var(--ampX)*.55), calc(var(--ampY)*.55), 0) rotate(calc(var(--rot)*.6)) scale(1.03) }
    100%{ transform:translate3d(var(--ampX), var(--ampY), 0) rotate(var(--rot)) scale(1.06) }
}
@keyframes blobPulse{ 0%{ filter:blur(50px) } 100%{ filter:blur(58px) } }

/* ===========================
   HEADER / NAV
   =========================== */
.header{
    position:sticky; top:0; z-index:10; background:rgba(15,10,24,.55);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--border-weak);
    transition:transform .28s ease, background .2s ease; will-change:transform;
}
.header--hidden{ transform:translateY(-100%) }
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.header,.footer{ -webkit-backdrop-filter:blur(10px) }

.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:800; font-size:1.1rem; transition:.25s }
.logo img{ display:block; width:40px; height:40px; border-radius:8px; transition:.25s }
.logo__text{ font-size:clamp(1.2rem,1rem + .8vw,1.6rem); line-height:1 }
.logo:hover{ color:var(--accent); transform:scale(1.05) }
.logo:hover img{ filter:drop-shadow(0 0 8px var(--accent)) }

.nav{ display:flex; align-items:center; gap:14px }
.nav__toggle{ display:none; padding:8px 12px; border-radius:10px; background:#120b1f; color:var(--text); border:1px solid var(--border-weak) }
.nav__list{ display:flex; gap:18px; list-style:none; margin:0; padding:0 }

/* Linki — baza */
.nav__list a{
    display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid transparent;
    color:var(--text); text-decoration:none; transition:.25s; font-weight:700; letter-spacing:.2px; line-height:1.2;
}
.nav__list a:hover{ background:transparent; border-color:var(--border-weak) }

/* Wariant C — miękki glow */
.nav.nav--softGlow .nav__list a{ background:transparent; border-radius:10px }
.nav.nav--softGlow .nav__list a:hover,
.nav.nav--softGlow .nav__list a:focus-visible{
    text-shadow:0 0 .45rem rgba(var(--nav-glow), .75), 0 .05rem .8rem rgba(var(--nav-glow), .40);
    border-color:rgba(var(--nav-glow), .30); background:rgba(255,255,255,.04);
    box-shadow:0 0 0 1px rgba(var(--nav-glow), .45), 0 0 14px rgba(var(--nav-glow), .25);
}
/* Active */
.nav.nav--softGlow .nav__list a.is-active,
.nav.nav--softGlow .nav__list a[aria-current="page"]{
    position:relative;
    background:
            linear-gradient(transparent,transparent) padding-box,
            linear-gradient(90deg, rgba(108,43,217,.90), rgba(var(--nav-glow), .90)) border-box;
    border:1px solid transparent;
    box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 0 18px rgba(var(--nav-glow), .50), 0 0 36px rgba(var(--nav-glow), .32);
    text-shadow:0 0 .45rem rgba(var(--nav-glow), .55);
}
.nav.nav--softGlow .nav__list a:active{
    transform:translateY(1px) scale(.99);
    box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 0 14px rgba(var(--nav-glow), .45), 0 0 28px rgba(var(--nav-glow), .28);
}
/* toggle w stylu softGlow */
.nav.nav--softGlow .nav__toggle{
    padding:10px 14px; border-radius:12px; font-weight:800; letter-spacing:.15px; color:var(--text);
    background:rgba(255,255,255,.04); border:1px solid rgba(var(--nav-glow), .30);
    text-shadow:0 0 .45rem rgba(var(--nav-glow), .75), 0 .05rem .8rem rgba(var(--nav-glow), .40);
    box-shadow:0 0 0 1px rgba(var(--nav-glow), .35) inset, 0 0 18px rgba(var(--nav-glow), .25);
}
.nav.nav--softGlow .nav__toggle:hover,.nav.nav--softGlow .nav__toggle:active{ background:rgba(255,255,255,.04) }
.nav.nav--softGlow .nav__toggle:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(var(--nav-glow), .18), 0 0 0 1px rgba(var(--nav-glow), .65) inset, 0 0 16px rgba(var(--nav-glow), .28) }

/* ===========================
   BUTTONS
   =========================== */
.btn{
    display:inline-block; padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none;
    border:1px solid transparent; transition:.22s ease; will-change:box-shadow,transform,filter;
}
.btn:not(.btn--ghost){
    color:#0a0612;
    background:
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.06)) padding-box,
            linear-gradient(90deg, var(--primary), var(--accent)) padding-box,
            linear-gradient(90deg, var(--primary), var(--accent)) border-box;
    background-clip:padding-box,padding-box,border-box;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.btn:not(.btn--ghost):hover,
.btn:not(.btn--ghost):focus-visible{
    box-shadow:0 0 22px rgba(var(--btn-glow-rgb), .40), 0 16px 36px rgba(var(--btn-glow-rgb), .25), 0 10px 28px rgba(0,0,0,.35);
    filter:brightness(1.02);
}
.btn:not(.btn--ghost):active{ transform:translateY(1px); box-shadow:0 0 18px rgba(var(--btn-glow-rgb), .30), inset 0 2px 8px rgba(0,0,0,.18) }
.btn--ghost{ background:transparent; color:var(--text); border:1px solid var(--border-weak); transition:.25s }
.btn--ghost:hover{ border-color:rgba(108,43,217,.5); background:rgba(108,43,217,.12); box-shadow:0 0 12px rgba(108,43,217,.25) }
.btn:focus-visible,.nav__list a:focus-visible{ box-shadow:0 0 0 4px rgba(108,43,217,.25); outline:0 }

/* ===========================
   HERO / TYTUŁY
   =========================== */
.hero{ padding:48px 0 28px }
.hero__title{ margin:0 0 8px; font-size:clamp(28px,5vw,46px); line-height:1.2; display:grid; row-gap:.15em }
.hero__title .line2{
    display:inline-block; background:linear-gradient(90deg,var(--primary),var(--cyan));
    -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.12em;
}
.hero__sub{ margin:8px 0 16px; color:var(--muted); max-width:72ch }
.hero__cta{ display:flex; gap:10px; flex-wrap:wrap }
.section-title{ margin:0 0 16px; font-size:clamp(22px,3.4vw,30px); line-height:1.25 }

/* ===========================
   KARTY / SEKCJE INDEX
   =========================== */
.cards{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.card{ padding:18px; border-radius:var(--radius); border:1px solid var(--border-weak); background:rgba(255,255,255,.03); box-shadow:0 10px 28px rgba(0,0,0,.12) }

.usp{ padding-block:28px }
.usp__grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.usp__item{
    padding:18px; border-radius:var(--radius); border:1px solid transparent;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg,rgba(108,43,217,.65),rgba(255,255,255,.08)) border-box;
    transition:.28s;
}
.usp__item:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.25),0 0 20px rgba(108,43,217,.28) }
.usp__icon{ display:block; margin-bottom:10px; filter:drop-shadow(0 0 10px rgba(108,43,217,.25)) }
.usp__item h3{ margin:0 0 6px; font-size:1.1rem }
.usp__item p{ margin:0; color:#d5cfee }

.case{ padding-block:28px }
.case__grid{ display:grid; gap:18px; grid-template-columns:1.1fr 1fr; align-items:center }
.case--alt .case__grid{ grid-template-columns:1fr 1.1fr }
.case--alt .case__media{ order:2 } .case--alt .case__content{ order:1 }
.case__media img{ display:block; width:100%; height:auto; border-radius:var(--radius); box-shadow:0 10px 28px rgba(0,0,0,.28) }
.case__content h2{ margin:0 0 8px; font-size:clamp(20px,3vw,26px) }
.case__content p{ margin:0 0 10px; color:#d5cfee }
.case__bullets{ margin:0 0 12px; padding-left:18px }
.case__bullets li{ margin:6px 0 }
.case__cta{ display:flex; gap:10px; flex-wrap:wrap }

.sectors{ padding-block:28px }
.sectors__list{
    list-style:none; margin:0; padding:0; display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; align-items:center;
}
.sectors__list li{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px;
    padding:16px; border-radius:var(--radius); border:1px solid var(--border-weak); background:rgba(255,255,255,.04);
}
.sectors__list img{ display:block; width:96px; height:96px; opacity:.9; filter:drop-shadow(0 0 8px rgba(108,43,217,.18)) }
.sectors__list span{ font-weight:600 }

/* CTA karta */
.cta-card{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    padding:18px; border-radius:var(--radius); border:1px solid transparent;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg,rgba(108,43,217,.65),rgba(255,255,255,.08)) border-box;
    box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.cta-card__title{ margin:0 0 6px; font-size:clamp(18px,2.6vw,22px); line-height:1.25 }
.cta-card__sub{ margin:0; color:var(--muted) }
.cta-card__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto }
.cta-card--compact{ padding:14px }
.cta-card--compact .cta-card__title{ font-size:clamp(18px,2.2vw,20px); margin:0 }
.cta-card--compact .cta-card__sub{ margin:0; font-size:.95rem }

/* ===========================
   FOOTER
   =========================== */
.footer{ background:rgba(15,10,24,.55); backdrop-filter:blur(8px); opacity:.95; border-top:1px solid var(--border-weak); margin-top:32px }
.footer .container{ padding-block:18px; text-align:left }

/* ===========================
   REVEAL
   =========================== */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease }
.reveal.is-visible{ opacity:1; transform:none }

/* ===========================
   SOLUTIONS
   =========================== */
.channels{ padding-block:28px }
.channels__grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.channels__item{
    padding:18px; border-radius:var(--radius); border:1px solid transparent;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg,rgba(108,43,217,.65),rgba(255,255,255,.08)) border-box;
    transition:.28s;
}
.channels__item:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.25),0 0 20px rgba(108,43,217,.28) }
.channels__icon{ display:block; margin-bottom:10px; filter:drop-shadow(0 0 10px rgba(108,43,217,.25)) }
.channels__item h3{ margin:0 0 6px; font-size:1.1rem }
.channels__item p{ margin:0 0 8px; color:#d5cfee }
.channels__bullets{ margin:0; padding-left:18px }
.channels__bullets li{ margin:4px 0 }

/* Timeline — kafelki płaskie, badge z gradientową ramką */
.timeline{ padding-block:28px }
.timeline__list{
    counter-reset:step; list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;
}
.timeline__list li{
    position:relative; padding:18px; border-radius:var(--radius);
    background:var(--card-fill); border:1px solid var(--border-weak);
}
.timeline__list li::before{
    counter-increment:step; content:counter(step);
    position:absolute; top:-12px; left:-12px; width:34px; height:34px; border-radius:50%;
    display:grid; place-items:center; font-weight:800; color:#0a0612;
    border:1px solid transparent;
    background:
            linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06)) padding-box,
            var(--brand-grad) border-box;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.timeline__list strong{ display:block; margin-bottom:6px }
.timeline__list p{ margin:0; color:#d5cfee }

/* Pricing */
.pricing{ padding-block:28px }
.pricing__grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.price{
    padding:18px; border-radius:var(--radius); border:1px solid transparent;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg,rgba(108,43,217,.65),rgba(255,255,255,.08)) border-box;
    transition:.28s;
}
.price:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.25),0 0 20px rgba(108,43,217,.28) }
.price h3{ margin:0 0 6px; font-size:1.15rem }
.price p{ margin:0 8px 10px; color:#d5cfee }
.price ul{ margin:0 0 12px; padding-left:18px }
.price ul li{ margin:4px 0 }
.pricing__note{ margin:10px 0 0; color:var(--muted) }

/* Integrations */
.integrations{ padding-block:28px }
.integrations__row{
    list-style:none; margin:0; padding:0; display:grid; gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); align-items:center;
}
.integrations__row li{ display:grid; place-items:center; padding:14px; border-radius:var(--radius); background:rgba(255,255,255,.04); border:1px solid var(--border-weak) }
.integrations__row img{ display:block; max-width:100%; height:auto; opacity:.95 }

/* ===========================
   BOT DEMO
   =========================== */
.bot-demo{ padding-block:28px }
.bot-demo__grid{ display:grid; gap:18px; grid-template-columns:1fr 1.2fr; align-items:stretch }
.bot-demo__intro p{ margin:0 0 12px; color:#d5cfee }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
    border:1px solid var(--border-weak); background:rgba(255,255,255,.04); color:var(--text);
    border-radius:999px; padding:8px 12px; font:inherit; cursor:pointer; transition:.2s;
}
.chip:hover{ border-color:rgba(108,43,217,.5); background:rgba(108,43,217,.12); box-shadow:0 0 12px rgba(108,43,217,.25) }

.bot-demo__panel{
    height: clamp(520px, 58vh, 520px);  /* stała, wygodna wysokość na desktopie */
    min-height:0; overflow:hidden; border-radius:var(--radius);
    border:1px solid var(--border-weak); background:rgba(255,255,255,.03); box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.bot-panel{ display:flex; flex-direction:column; height:100%; min-height:0 }
.bot-header{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border-weak); background:rgba(255,255,255,.04) }
.bot-chat{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    padding:14px; display:flex; flex-direction:column; gap:10px;
}
.bot-msg{ max-width:min(80%,56ch); padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid var(--border-weak) }
.bot-msg--user{
    align-self:flex-end;
    background:
            linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) padding-box,
            linear-gradient(90deg, var(--primary), var(--accent)) border-box;
    border:1px solid transparent; color:var(--text); border-radius:14px;
}
.bot-form{ display:flex; gap:8px; align-items:flex-end; padding:12px; border-top:1px solid var(--border-weak); background:rgba(255,255,255,.03) }
.bot-input{
    flex:1 1 auto; min-height:40px; max-height:140px; resize:none; padding:10px 12px; border-radius:12px; border:1px solid var(--border-weak);
    background:rgba(255,255,255,.04); color:var(--text); font:inherit; line-height:1.35; overflow:auto; -ms-overflow-style:none; scrollbar-width:none;
}
.bot-input::-webkit-scrollbar{ width:0; height:0 }
.bot-send{ white-space:nowrap }

/* ładny scrollbar tylko w czacie */
.bot-chat{ scrollbar-width:thin; scrollbar-color:rgba(232,107,255,.6) rgba(255,255,255,.06); scrollbar-gutter:stable }
.bot-chat::-webkit-scrollbar{ width:10px }
.bot-chat::-webkit-scrollbar-track{
    background:rgba(255,255,255,.06); border-radius:10px; box-shadow:inset 0 0 0 1px var(--border-weak)
}
.bot-chat::-webkit-scrollbar-thumb{
    border-radius:10px; background:linear-gradient(180deg, var(--primary), var(--accent));
    border:2px solid rgba(18,12,30,.7);
    box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 0 12px rgba(var(--btn-glow-rgb), .35);
}
.bot-chat::-webkit-scrollbar-thumb:hover{
    filter:brightness(1.06);
    box-shadow:0 0 0 1px rgba(255,255,255,.24) inset, 0 0 16px rgba(var(--btn-glow-rgb), .45);
}

/* FAB */
.bot-fab{
    position:fixed; right:18px; bottom:18px; z-index:20; width:48px; height:48px; border-radius:50%;
    display:grid; place-items:center; cursor:pointer; border:1px solid var(--border-weak);
    background:rgba(18,12,30,.85); color:var(--text); backdrop-filter:blur(8px); transition:.2s;
}
.bot-fab:hover{ background:rgba(108,43,217,.25); border-color:rgba(108,43,217,.55) }

/* ===========================
   CONTACT (scoped)
   =========================== */
.page-contact .contact-grid{ display:grid; gap:16px; grid-template-columns:1fr 1.2fr; align-items:start }
.page-contact .contact-card{ min-height:100% }
.page-contact .contact-list{ list-style:none; margin:12px 0; padding:0 }
.page-contact .contact-list li{ margin:10px 0 }
.page-contact .contact-list a{ color:var(--text); text-decoration:none; border-bottom:1px dashed var(--border-weak) }
.page-contact .contact-list a:hover{ border-bottom-color:var(--accent) }

.form-card{ padding:18px; border-radius:var(--radius); border:1px solid var(--border-weak); background:rgba(255,255,255,.03); box-shadow:0 10px 28px rgba(0,0,0,.28) }
.form{ display:grid; gap:12px }
.form__row{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
label{ display:block; font-weight:700; margin:0 0 6px }
.input,.textarea{
    width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border-weak);
    background:rgba(255,255,255,.04); color:var(--text); font:inherit; line-height:1.35;
}
.textarea{ min-height:140px; resize:vertical }
.form__actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.alert{ margin:8px 0 0; padding:10px 12px; border-radius:12px; border:1px solid var(--border-weak); background:rgba(255,255,255,.04) }
.alert--ok{ border-color:rgba(0,209,255,.4) } .alert--err{ border-color:rgba(199,75,255,.4) }
.hidden{ display:none !important }

/* checkbox */
.page-contact .checkbox{ display:flex; align-items:flex-start; gap:10px; margin:6px 0 2px }
.page-contact .checkbox input[type="checkbox"]{
    width:20px; height:20px; margin-top:2px; cursor:pointer; appearance:none; -webkit-appearance:none;
    border:1px solid var(--border-weak); border-radius:999px; background:rgba(255,255,255,.04); display:grid; place-items:center;
    transition:box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.page-contact .checkbox input[type="checkbox"]:focus{ outline:2px solid rgba(108,43,217,.4); outline-offset:2px }
.page-contact .checkbox input[type="checkbox"]:checked{
    border-color:transparent;
    background:
            linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) padding-box,
            linear-gradient(90deg, var(--primary), var(--accent)) border-box;
    box-shadow:inset 0 0 0 4px rgba(255,255,255,.08);
}
.page-contact .checkbox span{ color:var(--text) }
.page-contact .checkbox a{ color:var(--text); text-decoration:underline dotted }
.page-contact .checkbox a:hover{ text-decoration:underline }

/* input file */
.page-contact .file-input{ color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--border-weak); border-radius:12px; padding:8px 10px }
.page-contact .file-input::file-selector-button{
    border:1px solid transparent; margin-right:10px; padding:8px 12px; border-radius:10px; cursor:pointer; color:#0a0612;
    background:
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.06)) padding-box,
            linear-gradient(90deg, var(--primary), var(--accent)) padding-box,
            linear-gradient(90deg, var(--primary), var(--accent)) border-box;
    background-clip:padding-box,padding-box,border-box;
    transition:box-shadow .22s ease, transform .12s ease, filter .22s ease;
}
.page-contact .file-input:hover::file-selector-button,
.page-contact .file-input:focus-within::file-selector-button{
    box-shadow:0 0 22px rgba(var(--btn-glow-rgb), .40), 0 16px 36px rgba(var(--btn-glow-rgb), .25), 0 10px 28px rgba(0,0,0,.35);
    filter:brightness(1.02);
}
.page-contact .file-input:active::file-selector-button{ transform:translateY(1px); box-shadow:0 0 18px rgba(var(--btn-glow-rgb), .30), inset 0 2px 8px rgba(0,0,0,.18) }

/* Custom Select */
.page-contact .selectx{ position:relative }
.page-contact .selectx>select.visually-hidden{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden }
.page-contact .selectx__button{
    width:100%; text-align:left; cursor:pointer; padding:10px 40px 10px 12px; border-radius:12px; border:1px solid transparent;
    background:
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.06)) padding-box,
            linear-gradient(90deg, var(--primary), var(--accent)) padding-box,
            linear-gradient(90deg, var(--primary), var(--accent)) border-box;
    background-clip:padding-box,padding-box,border-box;
    color:var(--text); line-height:1.35; font:inherit; position:relative;
}
.page-contact .selectx__button::after{
    content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; background-repeat:no-repeat; background-size:18px 18px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23EDEAF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.page-contact .selectx__button:hover,
.page-contact .selectx__button:focus-within{
    box-shadow:0 0 22px rgba(var(--btn-glow-rgb), .40), 0 16px 36px rgba(var(--btn-glow-rgb), .25), 0 10px 28px rgba(0,0,0,.35);
    filter:brightness(1.02);
}
.page-contact .selectx__button:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(var(--btn-glow-rgb), .18), 0 0 16px rgba(var(--btn-glow-rgb), .28) }
.page-contact .selectx__list{
    position:absolute; left:0; right:0; top:calc(100% + 6px); border-radius:12px; padding:6px; background:#150f21; border:1px solid var(--border-weak);
    box-shadow:0 16px 40px rgba(0,0,0,.45); max-height:260px; overflow:auto; z-index:50; display:none;
}
.page-contact .selectx[data-open="true"] .selectx__list{ display:block }
.page-contact .selectx__option{ padding:10px 12px; border-radius:8px; color:var(--text); cursor:pointer }
.page-contact .selectx__option[aria-selected="true"]{ background:#261a3d }
.page-contact .selectx__option:hover,.page-contact .selectx__option:focus{ background:#2b1f47; outline:none }

/* ukryty transport iframe */
.page-contact #contact-transport{ display:none !important; width:0; height:0; border:0 }

/* ===========================
   SHOWCASE v2 (2 kolumny) — skrót
   =========================== */
.showcase2{ margin-block:36px 44px }
.showcase2__grid{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); /* więcej miejsca na treść */
    gap:28px; align-items:center;
}
.showcase2__text{ max-width:60ch; text-wrap:pretty }
.showcase2__text h3{ margin:0 0 10px; font-size:clamp(30px,4.4vw,46px); line-height:1.16 }
.showcase2__text p{ margin:0; color:var(--muted); font-size:clamp(17px,2.1vw,20px) }
/* media bez ramki/cienia */
.showcase2__media{
    --pad:0px; padding:var(--pad);
    border:0; background:transparent; box-shadow:none;
    display:grid; place-items:center;
    min-height:clamp(520px,64vh,900px);
}
.showcase2__media img{ width:100%; height:100%; object-fit:contain }

/* ===========================
   MEDIA / PERF
   =========================== */
@media (max-width:760px){
    .nav__toggle{ display:inline-block }
    .nav__list{
        position:absolute; right:16px; top:64px; display:none; flex-direction:column; gap:8px;
        background:rgba(18,12,30,.92); border:1px solid var(--border-weak); border-radius:12px; padding:10px; backdrop-filter:blur(10px);
    }
    .nav__list.is-open{ display:flex }
    .bot-demo__panel{ height:70vh } /* nie za wysoki na małych ekranach */
}
@media (max-width:900px){
    .case__grid,.case--alt .case__grid{ grid-template-columns:1fr }
    .case--alt .case__media{ order:1 } .case--alt .case__content{ order:2 }

    /* Bot: pytania nad oknem, okno prawie pełnoekranowe */
    .bot-demo__grid{ grid-template-columns:1fr; gap:14px }
    .bot-demo__intro{ order:1 }
    .bot-demo__panel{ order:2; min-height:0; height:clamp(420px,78svh,92svh) }
    .bot-panel{ height:100% } .bot-chat{ overflow:auto }

    /* kontakt – 1 kolumna */
    .page-contact .contact-grid{ grid-template-columns:1fr }
}
@media (max-width:1150px){
    .showcase2__grid{ grid-template-columns:1fr; gap:18px }
    .showcase2__media{ order:2; min-height:clamp(260px,52vw,420px) }
    .showcase2__text{ order:1; max-width:none }
    .showcase2__text h3{ font-size:clamp(24px,5.2vw,32px) }
    .showcase2__text p{ font-size:clamp(14px,3.8vw,16px) }
}
@media (prefers-reduced-motion:reduce){
    .reveal{ transition:none } .blob{ animation:none !important }
}
@media (hover:none) and (pointer:coarse){
    html{ background-attachment:scroll,scroll,scroll,scroll }
}

/* gdy wchodzimy z hashem #bot-demo, niech nie schowa się pod header */
#bot-demo { scroll-margin-top: 84px; }

/* zachowaj nowe linie, wiele spacji, wcięcia i spacje na końcu linii */
.bot-msg{
    white-space: break-spaces;
    line-height: 1.5;
}

/* fallback dla starszych przeglądarek */
@supports not (white-space: break-spaces){
    .bot-msg{ white-space: pre-wrap; }
}