/* ============================================================================
   BonCRM — strona produktowa (boncrm.eu)
   Język wizualny Bonhaku: ciemny dark-SaaS, pomarańcz, szkło, Manrope.
   ========================================================================== */
:root{
  --bg:#07070c; --bg2:#0c0c14; --bg3:#101019;
  --gl:rgba(255,255,255,.025); --gb:rgba(255,255,255,.06); --gb2:rgba(255,255,255,.10);
  --o:#e8612a; --ol:#ff8652; --od:#c2410c; --og:rgba(232,97,42,.14); --og2:rgba(232,97,42,.28);
  --t:#d8d8e8; --s:#9a9ab0; --f:#62627e; --w:#fff;
  --green:#22c55e; --blue:#3b82f6; --yellow:#f59e0b;
  --maxw:1200px; --r:18px;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--t);
  font-size:16px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}
h1,h2,h3,h4{margin:0; line-height:1.1; letter-spacing:-.02em; font-weight:800; color:var(--w);}
p{margin:0;}
::selection{background:var(--og2); color:#fff;}

/* ---------- ambient background ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(232,97,42,.10) 0%, transparent 55%),
    radial-gradient(55% 45% at 95% 10%, rgba(59,130,246,.06) 0%, transparent 55%),
    linear-gradient(180deg,#07070c 0%,#090910 60%,#07070c 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:54px 54px; mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 80%);
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{position:relative;}
.sec{padding:96px 0;}
.sec-sm{padding:64px 0;}
@media(max-width:760px){ .sec{padding:64px 0;} }

.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ol);
  padding:6px 13px; border:1px solid var(--og2); border-radius:999px; background:var(--og);}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--o); box-shadow:0 0 0 4px var(--og);}

h1.h{font-size:clamp(34px,6vw,62px); letter-spacing:-.035em;}
h2.h{font-size:clamp(27px,4vw,42px); letter-spacing:-.03em;}
.lead{font-size:clamp(16px,2.1vw,20px); color:var(--s); max-width:62ch; line-height:1.65;}
.grad{background:linear-gradient(105deg,var(--ol),var(--o) 55%,#ffae7a); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sec-head{max-width:720px; margin:0 auto 54px; text-align:center;}
.sec-head .lead{margin:16px auto 0;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--font); font-weight:700;
  font-size:15px; padding:13px 22px; border-radius:13px; cursor:pointer; border:1px solid transparent;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, background .22s, border-color .22s; white-space:nowrap;}
.btn-main{background:linear-gradient(180deg,var(--ol),var(--o)); color:#1a0d06; box-shadow:0 8px 28px rgba(232,97,42,.28);}
.btn-main:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(232,97,42,.4);}
.btn-ghost{background:var(--gl); border-color:var(--gb2); color:var(--t);}
.btn-ghost:hover{transform:translateY(-3px); border-color:var(--og2); background:rgba(255,255,255,.04); color:#fff;}
.btn svg{width:17px; height:17px;}
.btn-lg{padding:16px 28px; font-size:16px;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:100; transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(8,8,14,.72); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); border-bottom-color:var(--gb);}
.nav-in{display:flex; align-items:center; gap:20px; height:68px;}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; color:#fff; font-size:18px; letter-spacing:-.02em;}
.brand img{width:30px; height:30px; object-fit:contain;}
.brand b{color:var(--o);}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:18px;}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--s); padding:8px 13px; border-radius:9px; transition:color .18s, background .18s;}
.nav-links a:hover,.nav-links a.active{color:#fff; background:var(--gl);}
.nav-r{margin-left:auto; display:flex; align-items:center; gap:10px;}
.lang{display:flex; gap:2px; border:1px solid var(--gb); border-radius:9px; padding:3px; background:var(--gl);}
.lang a{font-size:12px; font-weight:700; color:var(--f); padding:4px 9px; border-radius:6px; letter-spacing:.03em;}
.lang a.on{color:#fff; background:var(--og2);}
.nav-burger{display:none; background:none; border:1px solid var(--gb); border-radius:9px; width:42px; height:38px; color:var(--t); cursor:pointer; align-items:center; justify-content:center;}
.nav-burger svg{width:20px;height:20px;}
@media(max-width:900px){
  .nav-links{display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:2px; align-items:stretch;
    background:rgba(10,10,16,.97); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid var(--gb); padding:12px 16px 18px; margin:0;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 14px; font-size:15.5px;}
  .nav-burger{display:inline-flex;}
  .nav-r .btn-main{display:none;}
}

/* ---------- hero ---------- */
.hero{padding:74px 0 40px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero h1{margin:20px 0 18px;}
.hero .lead{margin-bottom:30px;}
.hero-cta{display:flex; gap:13px; flex-wrap:wrap;}
.hero-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:26px;}
.tag{font-size:12.5px; font-weight:600; color:var(--s); padding:6px 12px; border:1px solid var(--gb); border-radius:999px; background:var(--gl);}
.tag b{color:var(--ol); font-weight:700;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:34px;} .hero{padding:48px 0 24px;} }

/* product preview frame (mockup / screenshot) */
.frame{position:relative; border-radius:var(--r); border:1px solid var(--gb2); overflow:hidden;
  background:linear-gradient(180deg,#14141d,#0c0c13); box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset;}
.frame::before{content:""; position:absolute; inset:0; border-radius:var(--r); padding:1px; pointer-events:none;
  background:linear-gradient(140deg,var(--og2),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.frame-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--gb); background:rgba(255,255,255,.02);}
.frame-bar i{width:11px; height:11px; border-radius:50%; background:#2a2a36; display:block;}
.frame-bar i:nth-child(1){background:#e0592b66;} .frame-bar i:nth-child(2){background:#f59e0b55;} .frame-bar i:nth-child(3){background:#22c55e55;}
.frame-bar span{margin-left:8px; font-family:var(--mono); font-size:11.5px; color:var(--f);}
.frame img{display:block; width:100%;}
.frame-glow{position:absolute; inset:-40px; z-index:-1; background:radial-gradient(50% 50% at 50% 40%,var(--og) 0%,transparent 70%); filter:blur(20px);}

/* ---------- logos / trust strip ---------- */
.trust{display:flex; align-items:center; justify-content:center; gap:14px 34px; flex-wrap:wrap; opacity:.85;}
.trust .chip{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--s);}
.trust .chip b{color:var(--t);}
.trust-lab{text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--f); margin-bottom:22px; font-weight:700;}

/* ---------- cards / bento ---------- */
.cards{display:grid; gap:18px;}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.cards.c2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){ .cards.c3{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .cards.c3,.cards.c2{grid-template-columns:1fr;} }
.card{position:relative; background:var(--gl); border:1px solid var(--gb); border-radius:var(--r); padding:26px 24px; transition:transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, background .25s;}
.card:hover{transform:translateY(-6px); border-color:var(--og2); background:rgba(232,97,42,.03);}
.card .ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--og); border:1px solid var(--og2); color:var(--ol);}
.card .ic svg{width:23px; height:23px;}
.card h3{font-size:18px; margin-bottom:8px;}
.card p{font-size:14.5px; color:var(--s); line-height:1.6;}

/* bento (mixed sizes) */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
.bento .card{padding:24px;}
.b-3{grid-column:span 3;} .b-2{grid-column:span 2;} .b-6{grid-column:span 6;} .b-4{grid-column:span 4;}
@media(max-width:900px){ .bento{grid-template-columns:repeat(2,1fr);} .b-3,.b-2,.b-4,.b-6{grid-column:span 1;} .b-6{grid-column:span 2;} }
@media(max-width:560px){ .bento{grid-template-columns:1fr;} .b-6{grid-column:span 1;} }

/* feature rows (alternating) */
.frow{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; margin-bottom:80px;}
.frow:last-child{margin-bottom:0;}
.frow.rev .frow-txt{order:2;}
.frow-txt h3{font-size:clamp(22px,3vw,30px); margin:14px 0 14px;}
.frow-txt p{color:var(--s); font-size:16px;}
.flist{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px;}
.flist li{display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--t);}
.flist li .ck{flex:none; width:20px; height:20px; border-radius:6px; background:var(--og); border:1px solid var(--og2); color:var(--ol); display:grid; place-items:center; margin-top:1px;}
.flist li .ck svg{width:12px; height:12px;}
@media(max-width:860px){ .frow{grid-template-columns:1fr; gap:28px; margin-bottom:54px;} .frow.rev .frow-txt{order:0;} }

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.stat{text-align:center; padding:26px 16px; border:1px solid var(--gb); border-radius:var(--r); background:var(--gl);}
.stat b{display:block; font-size:clamp(28px,4vw,40px); font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1;}
.stat b .u{color:var(--o);}
.stat span{display:block; margin-top:9px; font-size:13px; color:var(--s); font-weight:600;}
@media(max-width:680px){ .stats{grid-template-columns:1fr 1fr;} }

/* ---------- CTA band ---------- */
.cta-band{position:relative; border:1px solid var(--og2); border-radius:26px; padding:56px 44px; text-align:center; overflow:hidden;
  background:radial-gradient(80% 140% at 50% 0%,rgba(232,97,42,.16),rgba(255,255,255,.02) 60%);}
.cta-band h2{font-size:clamp(26px,4vw,40px); margin-bottom:14px;}
.cta-band .lead{margin:0 auto 28px;}
.cta-band .hero-cta{justify-content:center;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--gb); margin-top:40px; padding:54px 0 30px; background:rgba(0,0,0,.25);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
.foot h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--f); margin-bottom:14px; font-weight:700;}
.foot a{display:block; color:var(--s); font-size:14px; padding:4px 0; transition:color .15s;}
.foot a:hover{color:var(--ol);}
.foot .fdesc{color:var(--s); font-size:14px; margin:14px 0 0; max-width:34ch;}
.foot-bot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:40px; padding-top:22px; border-top:1px solid var(--gb); font-size:13px; color:var(--f);}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }

/* ---------- forms ---------- */
.field{display:block; margin-bottom:14px;}
.field label{display:block; font-size:13px; font-weight:600; color:var(--s); margin-bottom:6px;}
.field input,.field textarea{width:100%; background:var(--gl); border:1px solid var(--gb); border-radius:11px; padding:12px 14px; color:#fff; font-family:var(--font); font-size:15px;}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--og2); background:rgba(232,97,42,.04);}
.field textarea{min-height:130px; resize:vertical;}

/* ---------- reveal animation ---------- */
.rev{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.rev.in{opacity:1; transform:none;}
.rev.d1{transition-delay:.07s;} .rev.d2{transition-delay:.14s;} .rev.d3{transition-delay:.21s;} .rev.d4{transition-delay:.28s;}
@media(prefers-reduced-motion:reduce){ .rev{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }

.mono{font-family:var(--mono);}
.muted{color:var(--s);} .center{text-align:center;}
.mt{margin-top:18px;} .mt2{margin-top:34px;}
.prose p{margin-bottom:14px; color:var(--s);} .prose h3{margin:30px 0 10px; font-size:20px;} .prose ul{color:var(--s); padding-left:20px;} .prose li{margin:6px 0;}

/* ============ product mockups (crisp, on-brand) ============ */
.mock{padding:16px; background:radial-gradient(120% 90% at 50% -10%,#221917 0%,#160f0d 55%,#0e0a08 100%); font-size:12px;}
.mock-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:11px;}
.mk{background:rgba(255,255,255,.03); border:1px solid var(--gb); border-radius:11px; padding:11px 12px;}
.mk span{display:block; font-size:19px; font-weight:800; color:#fff; letter-spacing:-.02em;}
.mk small{display:block; margin-top:3px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--f);}
.mock-row{display:grid; grid-template-columns:1.3fr 1fr; gap:9px; margin-bottom:11px;}
.mcard{background:rgba(255,255,255,.03); border:1px solid var(--gb); border-radius:11px; padding:13px;}
.mcard .mt{font-size:11px; font-weight:700; color:#fff; margin-bottom:12px;}
.mc-bars{display:flex; align-items:flex-end; gap:8px; height:88px;}
.mc-bars i{flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--ol),var(--od));}
.mdonut{display:grid; place-items:center; height:88px;}
.mdonut .d{width:84px; height:84px; border-radius:50%; background:conic-gradient(var(--o) 0 52%, #2f6f8a 52% 78%, #d7a948 78% 90%, #5fae66 90% 100%); -webkit-mask:radial-gradient(circle 26px at 50% 50%,transparent 98%,#000);mask:radial-gradient(circle 26px at 50% 50%,transparent 98%,#000); position:relative;}
.mdonut .d::after{content:"75"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; -webkit-mask:none;mask:none;}
.mock-list{background:rgba(255,255,255,.03); border:1px solid var(--gb); border-radius:11px; overflow:hidden;}
.ml-row{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:9px 13px; border-bottom:1px solid var(--gb);}
.ml-row:last-child{border-bottom:0;}
.ml-row > span:nth-child(2){font-family:var(--mono); font-size:11px; color:var(--t);}
.ml-pill{font-size:10px; font-weight:800; padding:2px 8px; border-radius:5px;}
.ml-pill.y{background:#FFCD00; color:#1d1d1b;} .ml-pill.r{background:#DC0032; color:#fff;} .ml-pill.b{background:#061AB1; color:#FFD100;}
.ml-st{font-size:10px; font-weight:700; color:#5fae66; background:rgba(95,174,102,.14); padding:3px 9px; border-radius:999px;}
.ml-st.t{color:#5aa6c4; background:rgba(90,166,196,.14);}

/* warehouse map mockup */
.mock-wh{padding:18px;}
.mw-dock{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--f); text-align:center; padding:9px; border:1px solid var(--gb); border-radius:9px; background:rgba(255,255,255,.02); margin-bottom:11px;}
.mw-zones{display:grid; grid-template-columns:repeat(3,1fr); gap:9px;}
.mw-z{position:relative; border-radius:11px; padding:14px 13px 13px; min-height:78px; border:1px solid;}
.mw-z b{font-size:13px; color:#fff; letter-spacing:.03em;} .mw-z small{display:block; margin-top:24px; font-size:9.5px; color:rgba(255,255,255,.7);}
.mw-z.o{background:rgba(194,65,12,.4); border-color:#c2410c;} .mw-z.b{background:rgba(47,111,138,.4); border-color:#2f6f8a;}
.mw-z.ghost{background:rgba(255,255,255,.02); border:1px dashed var(--gb); display:grid; place-items:center; color:var(--f); font-size:10px; letter-spacing:.08em;}
.mw-low{position:absolute; top:11px; right:11px; font-size:10px; font-weight:800; color:#fff; background:rgba(224,99,60,.95); padding:2px 8px; border-radius:999px;}

/* invoice mockup */
.mock-inv{background:#fff; color:#1a1a1a; padding:20px; font-size:11px;}
.mi-top{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #1a1a1a; padding-bottom:11px; margin-bottom:12px;}
.mi-top h4{color:#1a1a1a; font-size:15px;} .mi-top .mi-st{font-size:9px; font-weight:800; color:#2f7a3a; background:#e3f3e6; padding:3px 9px; border-radius:999px;}
.mi-party{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:12px;}
.mi-party .t{font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:#888; margin-bottom:3px;}
.mi-party b{font-size:11.5px; color:#1a1a1a;} .mi-party span{display:block; color:#555; font-size:10px;}
.mi-tbl{width:100%; border-collapse:collapse; margin-bottom:12px;}
.mi-tbl th{background:#f3f1ee; color:#666; font-size:8px; text-transform:uppercase; text-align:left; padding:6px 8px; border:1px solid #e2ded8;}
.mi-tbl td{padding:6px 8px; border:1px solid #eee; color:#333; font-size:10px;}
.mi-pay{display:flex; justify-content:space-between; align-items:center; border-top:2px solid #1a1a1a; padding-top:10px;}
.mi-pay .mi-qr{width:52px; height:52px; border-radius:6px; background:repeating-conic-gradient(#1a1a1a 0 25%, #fff 0 50%) 0 0/13px 13px;}
.mi-pay b{font-size:16px; color:#1a1a1a;}

/* ============ comparison / FAQ / integration cards / flow ============ */
.cmp .card{padding:26px 24px;}
.cmp .card.win{border-color:var(--og2); background:rgba(232,97,42,.045);}
.cmp .card h3{font-size:18px; margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.cmp .card h3 .b{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px;}
.cmp .card h3 .b.bad{background:rgba(224,99,60,.14); color:#e0633c;} .cmp .card h3 .b.good{background:var(--og); color:var(--ol);}
.flist.neg li .ck{background:rgba(224,99,60,.12); border-color:rgba(224,99,60,.32); color:#e0633c;}
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:760px){.faq-grid{grid-template-columns:1fr;}}
.faq-item{background:var(--gl); border:1px solid var(--gb); border-radius:14px; padding:20px 22px;}
.faq-item h3{font-size:16px; margin-bottom:8px;} .faq-item p{font-size:14.5px; color:var(--s); line-height:1.6;}
.intg{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:780px){.intg{grid-template-columns:1fr 1fr;}}
@media(max-width:460px){.intg{grid-template-columns:1fr;}}
.intg-card{display:flex; gap:13px; align-items:flex-start; background:var(--gl); border:1px solid var(--gb); border-radius:14px; padding:15px 16px; transition:transform .2s, border-color .2s, background .2s;}
.intg-card:hover{transform:translateY(-4px); border-color:var(--og2); background:rgba(232,97,42,.03);}
.intg-mark{flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:13.5px; letter-spacing:.01em; box-shadow:0 2px 8px rgba(0,0,0,.25);}
.intg-card b{display:block; font-size:14.5px; color:#fff;} .intg-card small{display:block; font-size:12.5px; color:var(--s); margin-top:2px; line-height:1.45;}
.igroup{margin-bottom:34px;} .igroup-h{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--f); font-weight:700; margin:0 0 16px;}
.igroup-h .ln{flex:1; height:1px; background:var(--gb);}
.flow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:10px; align-items:stretch;}
.flow .card{margin:0;} .flow-arr{display:grid; place-items:center; color:var(--o);} .flow-arr svg{width:26px;height:26px;}
@media(max-width:780px){.flow{grid-template-columns:1fr;} .flow-arr{transform:rotate(90deg); padding:4px 0;}}