/* Медіакіт реклами — alibi.in.ua (2026-10-27) */
.kit{--k-red:#e80304;--k-red2:#ff5a36;--k-ink:var(--ink,#182230);--k-mut:var(--muted,#5b6676);--k-rule:var(--rule,#d6dce4);--k-soft:var(--mist,#eef1f5);--k-card:var(--paper,#fff);margin:36px 0 10px;font-family:var(--sans,system-ui,sans-serif)}
.kit *{box-sizing:border-box}
.kit [hidden]{display:none!important}
.kit h2,.kit h3{font-family:var(--serif,Georgia,serif)}

/* герой */
.kit-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:center;padding:34px;border-radius:24px;color:#fff;overflow:hidden;isolation:isolate;background:#0d1424}
.kit-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(800px 380px at 0% 0%,rgba(76,110,245,.5),transparent 60%),radial-gradient(700px 400px at 100% 100%,rgba(232,3,4,.45),transparent 60%),linear-gradient(150deg,#121d3d,#0d1424 60%,#1a0d14)}
.kit-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,transparent,#000 60%)}
.kit-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font:800 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.kit-kicker span{width:28px;height:3px;border-radius:2px;background:var(--k-red2)}
.kit-hero h2{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.1;color:#fff}
.kit-lead{margin:12px 0 0;color:rgba(255,255,255,.82);font:500 16px/1.6 var(--sans);max-width:620px}
.kit-hero-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.kit-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:13px;background:linear-gradient(135deg,var(--k-red),var(--k-red2));color:#fff!important;font:800 15px/1 var(--sans);text-decoration:none!important;cursor:pointer;box-shadow:0 12px 28px rgba(232,3,4,.35);transition:transform .2s,box-shadow .2s}
.kit-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(232,3,4,.45)}
.kit-btn:disabled{opacity:.6;cursor:default;transform:none}
.kit-btn.is-ghost{background:rgba(255,255,255,.1);box-shadow:none;border:1px solid rgba(255,255,255,.2)}
.kit-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kit-stats div{padding:18px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.kit-stats b{display:block;font:800 30px/1.1 var(--sans);letter-spacing:-.01em}
.kit-stats span{display:block;margin-top:6px;font:600 13px/1.35 var(--sans);color:rgba(255,255,255,.7)}

/* макет + картки */
.kit-show{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;margin:28px 0;align-items:start}
.kit-mock-wrap{position:sticky;top:84px}
.kit-dev{display:inline-flex;padding:4px;border-radius:999px;background:var(--k-soft);margin-bottom:12px}
.kit-dev button{border:0;background:none;padding:9px 16px;border-radius:999px;font:700 14px/1 var(--sans);color:var(--k-mut);cursor:pointer}
.kit-dev button[aria-pressed=true]{background:var(--k-card);color:var(--k-ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.kit-mock{position:relative;aspect-ratio:16/11;border-radius:18px;background:linear-gradient(160deg,#dfe5ee,#eef1f6);padding:5% 14%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.kit-page{position:relative;height:100%;border-radius:10px;background:#fff;box-shadow:0 18px 40px rgba(16,24,40,.18);overflow:hidden}
.kit-bar{position:absolute;left:0;right:0;top:0;height:6%;background:#d5dbe5;display:flex;align-items:center;gap:4px;padding-left:2%}
.kit-bar i{width:7px;height:7px;border-radius:50%;background:#ff5f57}.kit-bar i:nth-child(2){background:#febc2e}.kit-bar i:nth-child(3){background:#28c840}
.kit-top{position:absolute;left:0;right:0;top:6%;height:7.5%;background:#141a26}
.kit-logo{position:absolute;left:4%;top:28%;width:12%;height:44%;border-radius:3px;background:var(--k-red)}
.kit-nav{position:absolute;left:22%;top:40%;width:50%;height:20%;border-radius:3px;background:rgba(255,255,255,.2)}
.kit-blk{position:absolute;border-radius:4px;background:#e3e8ef}
.kit-rail{position:absolute;left:70%;top:25%;width:26%;bottom:3%;border-radius:4px;background:#f3f5f9}
.kit-z{position:absolute;display:grid;place-items:center;border-radius:5px;background:rgba(232,3,4,.16);border:1.5px dashed rgba(232,3,4,.75);font-style:normal;transition:background .2s,transform .2s,box-shadow .2s;z-index:2}
.kit-z b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--k-red);color:#fff;font:800 12px/1 var(--sans);box-shadow:0 4px 10px rgba(232,3,4,.35)}
.kit-z.is-on{background:linear-gradient(135deg,var(--k-red),var(--k-red2));border-style:solid;box-shadow:0 10px 26px rgba(232,3,4,.45);transform:scale(1.02);z-index:3}
.kit-z.is-on b{background:#fff;color:var(--k-red)}
.kit-z--brand{top:5%;bottom:5%;width:12%;border-radius:12px}
.kit-z--brand.is-l{left:1%}.kit-z--brand.is-r{right:1%}
.kit-mock--phone{padding:4% 34%;aspect-ratio:16/11}
.kit-phone{position:relative;height:100%;border-radius:22px;background:#fff;border:7px solid #1d2433;box-shadow:0 18px 40px rgba(16,24,40,.25);overflow:hidden}
.kit-phone .kit-top{top:0;height:8%}
.kit-mock-note{margin:10px 0 0;font:500 13px/1.4 var(--sans);color:var(--k-mut)}
.kit-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kit-card{display:flex;gap:14px;padding:16px 18px;border-radius:16px;background:var(--k-card);border:1px solid var(--k-rule);box-shadow:0 1px 2px rgba(16,24,40,.05);cursor:default;transition:border-color .2s,box-shadow .2s,transform .2s;outline:none}
.kit-card.is-on,.kit-card:focus{border-color:var(--k-red);box-shadow:0 12px 30px rgba(232,3,4,.14);transform:translateX(3px)}
.kit-n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--k-soft);color:var(--k-ink);font:800 15px/1 var(--sans);transition:background .2s,color .2s}
.kit-card.is-on .kit-n{background:var(--k-red);color:#fff}
.kit-card-b{min-width:0}
.kit-card h3{margin:2px 0 4px;font-size:17.5px;line-height:1.25;color:var(--k-ink)}
.kit-where{margin:0;font:500 14px/1.5 var(--sans);color:var(--k-mut)}
.kit-sizes{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0}
.kit-sizes span{padding:5px 10px;border-radius:8px;background:var(--k-soft);font:700 12.5px/1.2 var(--sans);color:var(--k-ink);font-variant-numeric:tabular-nums}
.kit-plus{margin:8px 0 0;font:600 13px/1.4 var(--sans);color:#2f9e44}

/* прайс */
.kit-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:30px;border-radius:24px;background:var(--k-card);border:1px solid var(--k-rule);box-shadow:0 18px 50px rgba(16,24,40,.08)}
.kit-cta h3{margin:0 0 8px;font-size:26px;color:var(--k-ink)}
.kit-cta-txt p{margin:0 0 14px;font:500 15px/1.6 var(--sans);color:var(--k-mut)}
.kit-terms{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:7px}
.kit-terms li{position:relative;padding-left:26px;font:500 14.5px/1.5 var(--sans);color:var(--k-ink)}
.kit-terms li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:rgba(47,158,68,.14);color:#2f9e44;display:grid;place-items:center;font:800 11px/1 var(--sans)}
.kit-contacts{display:flex;flex-wrap:wrap;gap:8px}
.kit-contacts a{padding:9px 14px;border-radius:999px;background:var(--k-soft);color:var(--k-ink)!important;font:700 14px/1 var(--sans);text-decoration:none!important}
.kit-contacts a:hover{background:var(--k-ink);color:var(--k-card)!important}
.kit-form{display:grid;gap:12px}
.kit-hello{margin:0;font:700 16px/1.4 var(--sans);color:var(--k-ink)}
.kit-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kit-form label{display:grid;gap:5px;font:700 13px/1.2 var(--sans);color:var(--k-ink)}
.kit-form input[type=text],.kit-form input[type=email],.kit-form textarea{width:100%;border:1px solid var(--k-rule);border-radius:11px;background:var(--k-card);color:var(--k-ink);padding:11px 13px;font:500 15px/1.4 var(--sans)}
.kit-form input:focus,.kit-form textarea:focus{outline:2px solid rgba(232,3,4,.25);border-color:var(--k-red)}
.kit-checks{display:flex;gap:18px;flex-wrap:wrap}
.kit-checks label{display:flex;align-items:center;gap:7px;font-weight:600;cursor:pointer}
.kit-checks input{width:18px;height:18px;accent-color:var(--k-red)}
.kit-msg{margin:0;min-height:1em;font:600 14.5px/1.5 var(--sans)}
.kit-msg.is-ok{color:#2f9e44}.kit-msg.is-bad{color:var(--k-red)}
.kit-msg a{color:inherit;text-decoration:underline}
.kit-gate .tgu-gate{position:relative;min-height:0;border-radius:18px;background:linear-gradient(160deg,#121d3d,#0d1424)}

@media (max-width:980px){
  .kit-hero,.kit-show,.kit-cta{grid-template-columns:1fr}
  .kit-mock-wrap{position:static}
}
@media (max-width:600px){
  .kit-hero{padding:24px 18px;border-radius:20px}
  .kit-stats b{font-size:24px}
  .kit-cta{padding:20px 16px;border-radius:20px}
  .kit-row{grid-template-columns:1fr}
  .kit-mock{padding:5% 6%}
  .kit-mock--phone{padding:5% 20%;aspect-ratio:4/5}
  .kit-card{padding:14px}
}
.kit-stats div:last-child:nth-child(odd){grid-column:span 2}