*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;
background-image:
radial-gradient(85% 45% at 50% -6%, rgba(5,150,105,.08), transparent 62%),
linear-gradient(rgba(15,23,42,.026) 1px, transparent 1px),
linear-gradient(90deg, rgba(15,23,42,.026) 1px, transparent 1px);
background-size:auto, 44px 44px, 44px 44px;background-attachment:fixed;}
.mono{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;}
a{color:inherit;text-decoration:none;} svg{display:block;}
:root{
--acc:#059669;--acc-br:#10b981;--acc-dim:rgba(5,150,105,.10);--acc-line:rgba(5,150,105,.28);
--ink:#0f172a;--soft:#5b6577;--faint:#94a3b8;--line:#e6e8ec;--panel:#ffffff;--bg:#f8fafc;
--shadow:0 1px 2px rgba(15,23,42,.04);--shadow-lg:0 20px 50px rgba(15,23,42,.10);
}
@media(prefers-color-scheme:dark){
:root{
--acc:#10b981;--acc-br:#34d399;--acc-dim:rgba(16,185,129,.12);--acc-line:rgba(16,185,129,.32);
--ink:#e8edf2;--soft:#9aa5b4;--faint:#6b7686;--line:#232a35;--panel:#141922;--bg:#0b0f15;
--shadow:0 1px 2px rgba(0,0,0,.3);--shadow-lg:0 20px 50px rgba(0,0,0,.5);
}
body{background-image:
radial-gradient(85% 45% at 50% -6%, rgba(16,185,129,.10), transparent 62%),
linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);}
}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--acc);text-transform:uppercase;}
.lbl{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.h2{font-size:30px;font-weight:600;letter-spacing:-.03em;margin:10px 0 6px;line-height:1.14;}
.lead-sub{font-size:15px;color:var(--soft);max-width:62ch;line-height:1.6;margin:0;}
/* NAV */
nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);background:color-mix(in srgb, var(--bg) 80%, transparent);border-bottom:1px solid var(--line);}
nav .in{display:flex;align-items:center;gap:26px;height:60px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;letter-spacing:-.03em;}
.brand .mark{width:14px;height:14px;border-radius:4px;background:var(--acc);box-shadow:0 0 0 0 rgba(5,150,105,.5);animation:pulse 2.6s infinite;}
.brand .g{color:var(--acc);}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(5,150,105,.45);}70%{box-shadow:0 0 0 7px rgba(5,150,105,0);}100%{box-shadow:0 0 0 0 rgba(5,150,105,0);}}
nav .links{display:flex;gap:22px;margin-left:6px;}
nav .links a{font-size:13.5px;color:var(--soft);} nav .links a:hover{color:var(--ink);}
nav .right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 17px;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid transparent;white-space:nowrap;font-family:inherit;}
.btn-primary{background:var(--acc);color:#fff;box-shadow:0 6px 18px rgba(5,150,105,.24);}
.btn-primary:hover{background:var(--acc-br);}
.btn-ghost{background:var(--panel);border-color:var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--acc-line);color:var(--acc);}
/* HERO */
.hero{padding:64px 0 44px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);
background:var(--acc-dim);border:1px solid var(--acc-line);border-radius:999px;padding:5px 12px;margin-bottom:22px;}
.pill .d{width:6px;height:6px;border-radius:50%;background:var(--acc);}
h1{font-size:44px;line-height:1.08;letter-spacing:-.04em;font-weight:600;margin:0 0 18px;}
h1 .g{color:var(--acc);}
.hero p.sub{font-size:16.5px;color:var(--soft);line-height:1.6;max-width:52ch;margin:0 0 26px;}
/* hero signup form */
.signup{display:flex;gap:10px;max-width:460px;}
.signup input{flex:1;min-width:0;height:48px;padding:0 15px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
font-size:16px;font-family:inherit;outline:none;}
.signup input:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-dim);}
.signup .btn{height:48px;flex:0 0 auto;}
.hero .micro{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--faint);margin-top:14px;}
.hero .micro b{color:var(--soft);font-weight:500;}
/* hero shop mockup */
.shopcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;}
.shopcard .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);}
.shopcard .bar .u{flex:1;height:22px;border-radius:6px;background:var(--acc-dim);border:1px solid var(--line);display:flex;align-items:center;padding:0 9px;
font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--soft);}
.shopcard .bar .cart{width:26px;height:26px;border-radius:7px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;}
.shopcard .bar .cart .n{position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;}
.prod{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);}
.prod .img{height:74px;background:linear-gradient(135deg,var(--acc-dim),color-mix(in srgb,var(--acc) 22%, var(--panel)));display:flex;align-items:center;justify-content:center;color:var(--acc);}
.prod .b{padding:10px;}
.prod .t{font-size:12.5px;font-weight:600;letter-spacing:-.01em;}
.prod .row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.prod .p{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:500;}
.prod .add{width:28px;height:28px;border-radius:8px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;}
/* SECTIONS */
section{padding:60px 0;}
.sec-head{margin-bottom:30px;max-width:64ch;}
/* audience cards */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);}
.card .ic{width:40px;height:40px;border-radius:11px;background:var(--acc-dim);border:1px solid var(--acc-line);color:var(--acc);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.card h4{font-size:16px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em;}
.card p{font-size:13.5px;color:var(--soft);margin:0;line-height:1.55;}
/* steps */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.flow .step{padding:24px 20px;border:1px solid var(--line);border-right:0;background:var(--panel);}
.flow .step:first-child{border-radius:16px 0 0 16px;} .flow .step:last-child{border-right:1px solid var(--line);border-radius:0 16px 16px 0;}
.flow .step .n{font-family:"JetBrains Mono",monospace;font-size:26px;font-weight:500;color:var(--acc);letter-spacing:-.03em;line-height:1;}
.flow .step h4{font-size:15.5px;font-weight:600;margin:14px 0 6px;letter-spacing:-.01em;}
.flow .step p{font-size:13px;color:var(--soft);margin:0;line-height:1.55;}
/* feature checklist */
.feats{display:grid;grid-template-columns:1fr 1fr;gap:12px 34px;}
.feat{display:flex;gap:12px;align-items:flex-start;padding:6px 0;}
.feat .chk{flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:var(--acc-dim);border:1px solid var(--acc-line);color:var(--acc);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.feat span{font-size:14.5px;color:var(--ink);line-height:1.5;}
/* WIDGET - dark section (always dark) */
.widget-sec{padding:0;}
.widget-box{background:#0f172a;border:1px solid #1e2a3d;border-radius:24px;padding:48px;color:#e8edf2;box-shadow:0 30px 70px rgba(15,23,42,.30);}
.widget-box .lbl{color:#5eead4;}
.widget-box h3{font-size:28px;font-weight:600;letter-spacing:-.03em;margin:10px 0 10px;color:#fff;}
.widget-box .wsub{font-size:15px;color:#9fb0c4;line-height:1.6;max-width:60ch;margin:0 0 26px;}
.embed{position:relative;background:#0a1120;border:1px solid #1e2a3d;border-radius:14px;padding:18px 108px 18px 18px;overflow-x:auto;}
.embed code{font-family:"JetBrains Mono",monospace;font-size:13px;line-height:1.7;color:#a7f3d0;white-space:pre;display:block;}
.embed .tag{color:#7c8598;} .embed .attr{color:#5eead4;} .embed .str{color:#fbbf77;}
.embed .copy{position:absolute;top:12px;right:12px;height:32px;padding:0 13px;border-radius:8px;border:1px solid #29394f;background:#12203a;color:#a7f3d0;
font-family:"JetBrains Mono",monospace;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.embed .copy:hover{background:#172947;border-color:#3a5170;}
.platstrip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;}
.platstrip .p{font-family:"JetBrains Mono",monospace;font-size:12px;color:#7c8ba0;border:1px solid #253347;border-radius:8px;padding:6px 12px;}
.platstrip .sep{color:#3a4a60;}
.microsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;}
.microstep{border-left:2px solid #1e3a34;padding-left:14px;}
.microstep .mn{font-family:"JetBrains Mono",monospace;font-size:11px;color:#5eead4;}
.microstep h5{font-size:14px;font-weight:600;margin:5px 0 4px;color:#fff;}
.microstep p{font-size:12.5px;color:#9fb0c4;margin:0;line-height:1.5;}
/* fakturownia band */
.fband{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:40px;box-shadow:var(--shadow);}
.fband h3{font-size:26px;font-weight:600;letter-spacing:-.03em;margin:0 0 12px;}
.fband p{font-size:15px;color:var(--soft);line-height:1.6;max-width:64ch;margin:0 0 16px;}
.flink{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--acc);}
.flink:hover{gap:10px;}
/* pricing (no table) */
.price-box{background:linear-gradient(180deg,var(--acc-dim),var(--panel));border:1px solid var(--acc-line);border-radius:24px;padding:52px 44px;text-align:center;}
.price-box .big{font-size:30px;font-weight:600;letter-spacing:-.03em;margin:0 0 12px;line-height:1.2;}
.price-box .big b{color:var(--acc);}
.price-box .fine{font-size:13px;color:var(--soft);margin:0 0 26px;}
/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px;}
details{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:0 20px;box-shadow:var(--shadow);}
details summary{list-style:none;cursor:pointer;padding:18px 0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:16px;}
details summary::-webkit-details-marker{display:none;}
details summary .ch{flex:0 0 auto;color:var(--faint);transition:transform .2s;}
details[open] summary .ch{transform:rotate(45deg);color:var(--acc);}
details .a{font-size:14px;color:var(--soft);line-height:1.6;padding:0 0 18px;margin:0;max-width:70ch;}
details .a a{color:var(--acc);}
/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 48px;margin-top:24px;}
footer .in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start;}
footer .tag{font-size:13.5px;color:var(--soft);margin-top:10px;max-width:40ch;line-height:1.5;}
footer .reg{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--faint);margin-top:14px;line-height:1.6;}
footer .flinks{display:flex;gap:22px;flex-wrap:wrap;align-items:center;}
footer .flinks a{font-size:13px;color:var(--soft);} footer .flinks a:hover{color:var(--acc);}
footer .flinks a.f{color:var(--ink);font-weight:600;}
/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);
font-size:13px;font-weight:500;padding:10px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:60;box-shadow:var(--shadow-lg);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr;gap:34px;} h1{font-size:36px;}
.cards3{grid-template-columns:1fr;}
.flow{grid-template-columns:1fr;} .flow .step{border-right:1px solid var(--line);border-radius:0;}
.flow .step:first-child{border-radius:16px 16px 0 0;} .flow .step:last-child{border-radius:0 0 16px 16px;} .flow .step:not(:first-child){border-top:0;}
.feats{grid-template-columns:1fr;gap:10px;}
.microsteps{grid-template-columns:1fr;}
.widget-box,.fband{padding:32px 24px;}
.price-box{padding:40px 24px;}
nav .links{display:none;}
}
@media(max-width:560px){
h1{font-size:30px;} .h2{font-size:24px;}
.hero{padding:44px 0 32px;}
section{padding:44px 0;}
.signup{flex-direction:column;} .signup .btn{width:100%;}
.grid2{grid-template-columns:1fr 1fr;}
.brand .plat{display:none;}
}