/* AUTO-GENERATED от styles.css чрез scripts/build-theme-nomer.mjs - не редактирай ръчно */
:root{
--ink:#0E0E10;
--ink-2:#151517;
--ink-3:#1C1C1F;
--white:#FFFFFF;
--ember:#FF5A1F;
--ember-soft:rgba(255,90,31,0.18);
--ember-glow:rgba(255,90,31,0.45);
--ash:#B4B4B8;
--ash-2:#8E8E94;
--line:rgba(255,255,255,0.08);
--line-strong:rgba(255,255,255,0.18);
--line-orange:rgba(255,90,31,0.4);
--font-display:"Alumni Sans","Arial Narrow",Impact,system-ui,sans-serif;
--font-body:Geologica,system-ui,sans-serif;
--font-mono:Geologica,system-ui,sans-serif;
/* Type scale - one source of truth */
--fs-eyebrow:11px;
--fs-small:13px;
--fs-body:15px;
--fs-h4:clamp(18px,1.4vw,22px);
--fs-h3:clamp(20px,1.8vw,28px);
--fs-h2:clamp(40px,5.6vw,92px);
--fs-h1:clamp(48px,7.6vw,120px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--n-bg);color:var(--n-ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body{overflow-x:clip}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono);font-feature-settings:"ss01"}
.ember{color:var(--n-accent-text)}
.upper{text-transform:uppercase}
/* layout */
.wrap{max-width:1360px;margin:0 auto;padding:0 32px}
@media (max-width:720px){.wrap{padding:0 20px}}
/* ============ ICON-PATTERN BACKGROUND ============
Repeating icon set (lightning, spark, flame, !, K) on black.
Used on packaging-feel sections.
============================================================ */
.pattern-bg{
background-color:var(--n-bg);
background-image:url("data:image/svg+xml;utf8,");
background-size:240px 240px;
}
/* ============ TOP MARQUEE ============ */
.marquee{
background:var(--n-bg);
border-bottom:1px solid var(--n-line);
overflow:hidden;
height:38px;
display:flex;align-items:center;
font-family:var(--font-display);font-size:14px;
color:var(--n-ink);
letter-spacing:0.16em;
padding-top:env(safe-area-inset-top,0);
box-sizing:content-box;
}
.marquee__track{display:flex;gap:36px;white-space:nowrap;animation:scroll 42s linear infinite;padding-left:36px}
.marquee__item{display:inline-flex;align-items:center;gap:14px}
.marquee__sep{color:var(--n-accent-text);font-family:var(--font-body);font-weight:700}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ============ NAV ============ */
.nav{
position:sticky;top:0;z-index:50;
background:var(--n-bg);
border-bottom:1px solid var(--n-line);
padding-top:env(safe-area-inset-top,0);
}
/* Когато си логнат админ WP показва admin bar (32px desktop).
* Sticky nav трябва да започне под него, за да не се припокриват. */
body.admin-bar .nav{top:32px;padding-top:0}
/* На мобилна WP admin bar-ът се припокрива с iOS Dynamic Island и създава
* грозен stack. Скриваме го - админ работи се прави от desktop, mobile е
* за browsing на сайта. */
@media screen and (max-width:782px){
#wpadminbar{display:none!important}
html{margin-top:0!important;padding-top:0!important}
body.admin-bar .nav{top:0;padding-top:env(safe-area-inset-top,0)}
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
/* K badge logo */
.brand{display:flex;align-items:center;gap:12px}
.brand__text{font-family:var(--font-display);font-size:22px;letter-spacing:0.08em;line-height:1;color:var(--n-ink)}
.brand__text small{display:block;font-family:var(--font-body);font-weight:600;font-size:9px;color:var(--n-muted);letter-spacing:0.18em;margin-top:3px}
.brand--img,.brand--svg{gap:0;color:var(--n-ink)}
.brand__logo{height:32px;width:auto;display:block;transition:transform .2s;color:inherit}
.brand--img:hover .brand__logo,.brand--svg:hover .brand__logo{transform:scale(1.02)}
@media (max-width:720px){.brand__logo{height:26px}}
.k-badge{
position:relative;
background:var(--n-accent);
display:flex;align-items:center;justify-content:center;
}
.k-badge__face{
position:absolute;inset:2px;
background:var(--n-surface);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:700;color:var(--n-ink);
line-height:1;
}
.k-badge--36{width:40px;height:40px;border-radius:10px}
.k-badge--36 .k-badge__face{border-radius:8px;font-size:24px;clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%)}
.k-badge--big{width:80px;height:80px;border-radius:18px}
.k-badge--big .k-badge__face{border-radius:15px;font-size:56px;clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%)}
.k-badge--xl{width:120px;height:120px;border-radius:24px}
.k-badge--xl .k-badge__face{border-radius:21px;font-size:84px;clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%)}
.k-badge--sm{width:30px;height:30px;border-radius:8px}
.k-badge--sm .k-badge__face{border-radius:6px;font-size:18px;clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%)}
.nav__links{display:flex;align-items:center;gap:36px;font-size:13px;font-weight:600;color:var(--n-muted);text-transform:uppercase;letter-spacing:0.08em;list-style:none;margin:0;padding:0}
.nav__links li{list-style:none;position:relative;display:flex;align-items:center}
.nav__links li::marker{content:""}
.nav__links li:not(:last-child)::after{content:"";position:absolute;right:-21px;top:50%;width:6px;height:6px;background:var(--n-accent);transform:translateY(-50%)}
.nav__links a{position:relative;padding:6px 2px;transition:color .2s;white-space:nowrap}
.nav__links a:hover{color:var(--n-ink)}
.nav__links a.active{color:var(--n-ink)}
.nav__links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--n-accent)}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--n-muted);border:1px solid transparent;transition:all .2s}
.nav__icon:hover{background:rgba(17,20,27,0.04);color:var(--n-ink);border-color:rgba(17,20,27,0.11)}
.nav__cart{display:flex;align-items:center;gap:8px;background:var(--n-accent);color:var(--n-ink);padding:11px 18px;border-radius:10px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.1em;transition:transform .2s, box-shadow .2s}
.nav__cart:hover{background:var(--n-accent)}
.nav__cart .badge{background:#FFFFFF;color:var(--n-ink);font-family:var(--font-mono);font-size:10px;padding:1px 6px;border-radius:999px;font-weight:700}
/* SEARCH MODAL */
.search-modal{position:fixed;inset:0;z-index:9995;display:flex;align-items:flex-start;justify-content:center;padding:120px 20px 20px}
.search-modal[hidden]{display:none}
.search-modal__backdrop{position:absolute;inset:0;background:rgba(243,244,241,0.95);cursor:pointer}
.search-modal__panel{position:relative;background:var(--n-surface);border:1px solid rgba(17,20,27,0.11);border-radius:14px;padding:14px;width:min(640px,100%);display:flex;gap:10px;align-items:center}
.search-modal__form{flex:1;display:flex;gap:10px;align-items:center;padding-left:10px}
.search-modal__form svg{color:var(--n-accent-text);flex-shrink:0}
.search-modal__form input[type=search]{flex:1;background:transparent;border:none;color:var(--n-ink);padding:14px 0;font-size:16px;font-family:var(--font-body);outline:none}
.search-modal__form input[type=search]::placeholder{color:var(--n-muted)}
.search-modal__submit{background:var(--n-accent);color:var(--n-ink);border:none;padding:13px 22px;border-radius:10px;cursor:pointer;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;font-size:12px;font-family:var(--font-body);transition:background .15s}
.search-modal__submit:hover{background:var(--n-accent)}
.search-modal__close{background:transparent;color:var(--n-muted);border:1px solid var(--n-line);width:42px;height:42px;font-size:24px;cursor:pointer;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.search-modal__close:hover{color:var(--n-ink);border-color:rgba(17,20,27,0.11);background:rgba(17,20,27,0.04)}
body.search-open{overflow:hidden;overscroll-behavior:contain}
/* Scroll-lock safety: всичко което може да lock-не body. iOS-friendly: overflow:hidden + overscroll-behavior:contain не задържат scroll position но позволяват return-to-normal без stuck state. */
body.mnav-locked,body.kd-locked,body.kpm-modal-open{overflow:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mnav,.cart-drawer,[data-cart-drawer],.search-modal,.kpm-modal,[data-kpm-modal]{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (max-width:1000px){.nav__links{display:none}}
/* Hamburger button - visible on mobile only */
.nav__burger{
display:none;
width:42px;height:42px;border-radius:10px;
flex-direction:column;justify-content:center;align-items:center;gap:5px;
background:transparent;border:1px solid var(--n-line);cursor:pointer;
transition:background .2s, border-color .2s;
margin-right:6px;
}
.nav__burger span{
display:block;width:18px;height:2px;background:#fff;border-radius:1px;
transition:transform .25s, opacity .25s;
}
.nav__burger:hover{border-color:rgba(17,20,27,0.11);background:rgba(17,20,27,0.04)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1000px){.nav__burger{display:flex}}
/* ============ MOBILE MENU (slide-in from left) ============ */
.mnav-overlay{position:fixed;inset:0;background:rgba(243,244,241,0.95);z-index:9990;opacity:0;transition:opacity .3s ease;cursor:pointer}
.mnav-overlay[hidden]{display:none}
.mnav-overlay.mnav-open{opacity:1}
.mnav{
position:fixed;top:0;left:0;bottom:0;
width:320px;max-width:88vw;
background:var(--n-bg);color:var(--n-ink);
z-index:9991;
display:flex;flex-direction:column;
transform:translateX(-100%);
transition:transform .32s cubic-bezier(.2,.8,.2,1);
box-shadow:30px 0 80px rgba(17,20,27,0.25);
border-right:1px solid var(--n-line);
}
.mnav[hidden]{display:none}
.mnav.mnav-open{transform:translateX(0)}
.mnav__head{
display:flex;justify-content:space-between;align-items:center;
padding:18px 22px;border-bottom:1px solid var(--n-line);
background:var(--n-bg);
}
.mnav__close{
width:36px;height:36px;border-radius:50%;
background:var(--n-surface);color:var(--n-ink);font-size:24px;line-height:1;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--n-line);
transition:background .2s, transform .2s;
}
.mnav__close:hover{background:var(--n-accent);transform:rotate(90deg)}
.mnav__links{flex:1;overflow-y:auto;padding:8px 0}
.mnav__menu{list-style:none;margin:0;padding:0}
.mnav__menu li{border-bottom:1px solid var(--n-line)}
.mnav__menu a{
display:flex;align-items:center;justify-content:space-between;
padding:16px 22px;
font-family:var(--font-display);font-weight:700;font-size:16px;
text-transform:uppercase;letter-spacing:0.05em;color:var(--n-ink);
transition:background .15s, color .15s, padding-left .15s;
}
.mnav__menu a:hover, .mnav__menu a.active{background:var(--n-accent);color:var(--n-accent-text);padding-left:28px}
.mnav__menu a::after{content:"›";color:var(--n-accent-text);font-size:24px;line-height:1;opacity:0.7}
/* ───── Tree menu — uniform typography across all categories ─────
3 нива:
L1 — "Кейсове" top toggle (large, ember accent when active)
L2 — top-level категории (Мото, Коли, Футбол, ...)
L3 — подкатегории (KTM, Сините, ...)
Всички категории в едно ниво = same size, weight, padding.
Само trailing iconа разлчава leaf vs expandable. */
.mnav__menu--tree{display:block;list-style:none;margin:0;padding:0}
.mnav__menu--tree li{border-bottom:1px solid var(--n-line)}
.mnav__menu--tree .mnav__item--has-children > .mnav__toggle::after,
.mnav__menu--tree .mnav__cat--has-children > .mnav__toggle::after{display:none}
/* L1 — Top toggle (Кейсове) */
.mnav__item--has-children > .mnav__toggle{
padding:16px 22px;
font-family:var(--font-display);font-weight:700;font-size:16px;
text-transform:uppercase;letter-spacing:0.05em;color:var(--n-ink);
}
.mnav__item--has-children > .mnav__toggle[aria-expanded="true"]{
color:var(--n-accent-text);background:var(--n-accent);
}
/* L2 — категории под "Кейсове" (unified — leaf + expandable same size) */
.mnav__cat,
.mnav__sublink--leaf{
display:block;border-bottom:1px solid rgba(17,20,27,0.07);
}
.mnav__cat:last-child,
.mnav__sublink--leaf:last-child{border-bottom:0}
.mnav__sublink--leaf,
.mnav__cat > .mnav__toggle--cat{
display:flex;align-items:center;justify-content:space-between;gap:12px;
width:100%;
padding:16px 22px 16px 28px;
background:transparent;border:0;cursor:pointer;text-align:left;text-decoration:none;
font-family:var(--font-display);font-weight:700;font-size:16px;
letter-spacing:0.05em;text-transform:uppercase;color:var(--n-ink);
transition:background .15s, color .15s, padding-left .15s;
}
.mnav__sublink--leaf:hover,
.mnav__cat > .mnav__toggle--cat:hover{
background:var(--n-accent);color:var(--n-accent-text);padding-left:34px;
}
.mnav__cat > .mnav__toggle--cat[aria-expanded="true"]{
color:var(--n-accent-text);background:var(--n-accent);
}
/* Trailing arrows: › за leaf, v chevron за expandable */
.mnav__sublink--leaf::after{
content:"›";color:var(--n-accent-text);font-size:20px;line-height:1;opacity:0.6;flex-shrink:0;
}
.mnav__sublink--leaf:hover::after{opacity:1}
/* L3 — подкатегории (nested под Мото, Футбол) */
.mnav__sub--nested .mnav__sublink{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:14px 22px 14px 42px;
color:var(--n-muted);text-decoration:none;
font-family:var(--font-display);font-weight:700;font-size:16px;
letter-spacing:0.05em;text-transform:uppercase;
border-bottom:1px solid rgba(17,20,27,0.056);
transition:background .15s, color .15s, padding-left .15s;
}
.mnav__sub--nested .mnav__sublink:last-child{border-bottom:0}
.mnav__sub--nested .mnav__sublink::after{
content:"›";color:var(--n-accent-text);font-size:16px;line-height:1;opacity:0.45;flex-shrink:0;
}
.mnav__sub--nested .mnav__sublink:hover{background:var(--n-accent);color:var(--n-accent-text);padding-left:48px}
.mnav__sub--nested .mnav__sublink:hover::after{opacity:1}
/* "Всички кейсове →" / "Виж всички мотори →" — ember pill CTA */
.mnav__sublink--all,
.mnav__sublink--parent{
display:flex;align-items:center;
padding:14px 22px 14px 28px;
background:var(--n-accent);color:var(--n-accent-text);text-decoration:none;
font-family:var(--font-display);font-weight:700;font-size:16px;
letter-spacing:0.05em;text-transform:uppercase;
border-bottom:1px solid rgba(17,20,27,0.18);
transition:background .15s;
}
.mnav__sublink--all:hover,
.mnav__sublink--parent:hover{background:var(--n-accent)}
.mnav__sublink--all::after,
.mnav__sublink--parent::after{display:none}
.mnav__sub--nested .mnav__sublink--parent{padding-left:42px}
/* Chevron (down arrow) — rotates когато section е отворен */
.mnav__chevron{
transition:transform .25s ease;opacity:0.7;flex-shrink:0;color:var(--n-accent-text);
}
.mnav__toggle[aria-expanded="true"] .mnav__chevron{transform:rotate(180deg);opacity:1}
/* Count badge — uniform style на всички нива */
.mnav__count{
font-family:var(--font-mono);font-size:10px;font-weight:600;
letter-spacing:0.12em;color:var(--n-muted);
background:var(--n-field);padding:3px 8px;border-radius:6px;
min-width:30px;text-align:center;flex-shrink:0;
}
.mnav__sublink:hover .mnav__count,
.mnav__toggle:hover .mnav__count{color:var(--n-accent-text);background:var(--n-accent)}
/* Името расте → бройките се подреждат в една колона ("едно под друго"),
а трейлинг иконата заема фиксиран слот, за да съвпадат бройките на
leaf и expandable редове. Текстът на категориите започва от една позиция. */
.mnav__sublink--leaf > span:first-child,
.mnav__cat > .mnav__toggle--cat > span:first-child{flex:1 1 auto;min-width:0;text-align:left}
.mnav__sublink--leaf::after{flex:0 0 18px;text-align:center}
.mnav__cat > .mnav__toggle--cat .mnav__chevron{flex:0 0 18px}
/* Submenu wrapper (slides in) */
.mnav__sub{
background:var(--n-bg);
animation:mnavSlide .22s ease;
}
.mnav__sub[hidden]{display:none}
.mnav__sub--nested{background:var(--n-bg)}
@keyframes mnavSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* L0 — други primary menu items (Как работи, За нас, Контакти) */
.mnav__link{
display:flex;align-items:center;justify-content:space-between;
padding:16px 22px;text-decoration:none;
font-family:var(--font-display);font-weight:700;font-size:16px;
text-transform:uppercase;letter-spacing:0.05em;color:var(--n-ink);
transition:background .15s, color .15s, padding-left .15s;
}
.mnav__link::after{content:"›";color:var(--n-accent-text);font-size:24px;opacity:0.7}
.mnav__link:hover{background:var(--n-accent);color:var(--n-accent-text);padding-left:28px}
.mnav__foot{
border-top:1px solid var(--n-line);background:var(--n-bg);
padding:14px 22px;display:flex;gap:14px;flex-wrap:wrap;
}
.mnav__foot a{
display:inline-flex;align-items:center;gap:8px;
padding:10px 14px;border-radius:10px;
background:var(--n-surface);border:1px solid var(--n-line);
font-size:12px;font-weight:600;color:var(--n-muted);letter-spacing:0.04em;text-transform:uppercase;
transition:border-color .2s, color .2s;
}
.mnav__foot a:hover{border-color:var(--n-ink);color:var(--n-accent-text)}
.mnav__foot a svg{color:var(--n-accent-text)}
body.mnav-locked{overflow:hidden}
/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:18px 26px;border-radius:12px;font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;transition:transform .2s, box-shadow .2s, background .2s, border-color .2s}
.btn--ember{background:var(--n-accent);color:var(--n-ink)}
.btn--ember:hover{background:var(--n-accent)}
.btn--ghost{color:var(--n-ink);border:1.5px solid rgba(17,20,27,0.11);background:transparent}
.btn--ghost:hover{border-color:var(--n-ink);color:var(--n-accent-text)}
.btn--inverse{background:#FFFFFF;color:var(--n-ink)}
.btn--inverse:hover{background:var(--n-accent);color:var(--n-ink)}
.btn .arrow{font-size:18px;transition:transform .2s}
.btn:hover .arrow{transform:translate(3px,-2px)}
/* ============ HERO ============ */
.hero{
position:relative;
padding:120px 0 140px;
overflow:hidden;
background-image:url("../../images/hero-cases.png");
background-repeat:no-repeat;
background-position:right center;
background-size:contain;
min-height:780px;
display:flex;align-items:center;
}
.hero::before{
content:"";position:absolute;inset:0;
background:
linear-gradient(90deg, var(--n-bg) 0%, var(--n-bg) 28%, rgba(243,244,241,0.92) 42%, rgba(243,244,241,0.4) 60%, rgba(243,244,241,0) 75%),
radial-gradient(900px 600px at 18% 50%, var(--n-accent), transparent 65%);
pointer-events:none;
z-index:1;
}
.hero__inner{position:relative;z-index:2;display:block;max-width:none;margin:0;padding:0 32px 0 56px}
.hero__copy{max-width:520px;margin-left:0}
@media (max-width:720px){
.hero__inner{padding:0 20px}
}
@media (max-width:1100px){
.hero{background-size:cover;background-position:75% center;min-height:720px}
.hero::before{background:linear-gradient(180deg, rgba(243,244,241,0.5) 0%, rgba(243,244,241,0.85) 60%, var(--n-bg) 100%), radial-gradient(900px 600px at 30% 30%, var(--n-accent), transparent 60%)}
}
@media (max-width:720px){
.hero{min-height:auto;padding:64px 0 80px;background-position:center bottom;background-size:140% auto;padding-bottom:380px}
.hero::before{background:linear-gradient(180deg, var(--n-bg) 0%, rgba(243,244,241,0.85) 35%, rgba(243,244,241,0.2) 60%, rgba(243,244,241,0.95) 100%)}
}
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;color:var(--n-accent-text);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:28px;padding:7px 13px;border:1px solid rgba(17,20,27,0.225);border-radius:6px;background:var(--n-accent)}
.hero__eyebrow .pulse{width:6px;height:6px;border-radius:50%;background:var(--n-accent);box-shadow:0 0 0 0 rgba(17,20,27,0.06);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(17,20,27,0.35)}50%{box-shadow:0 0 0 8px rgba(17,20,27,0)}}
.hero h1{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(56px,8vw,130px);
line-height:0.9;
letter-spacing:0.005em;
margin-bottom:28px;
text-transform:uppercase;
color:var(--n-ink);
}
.hero h1 .ember-stroke{color:var(--n-accent-text);display:inline-block}
.hero h1 .ember{color:var(--n-accent-text)}
.hero__sub{font-size:17px;line-height:1.55;color:var(--n-muted);max-width:480px;margin-bottom:36px}
.hero__sub b{color:var(--n-ink);font-weight:600}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero__meta{display:flex;gap:48px;margin-top:56px;padding-top:32px;border-top:1px solid var(--n-line);flex-wrap:wrap}
.hero__meta-item{display:flex;flex-direction:column;gap:6px}
.hero__meta-item b{font-family:var(--font-body);font-size:28px;font-weight:800;color:var(--n-ink);letter-spacing:-0.02em;line-height:1}
.hero__meta-item b .ember{color:var(--n-accent-text)}
.hero__meta-item span{font-family:var(--font-mono);font-size:10px;color:var(--n-muted);letter-spacing:0.16em;text-transform:uppercase}
/* hero visual - main featured case with brushed K */
.hero__visual{position:relative;height:620px;display:flex;align-items:center;justify-content:center}
@media (max-width:980px){.hero__visual{height:520px}}
.case-stack{position:relative;width:100%;height:100%}
.case-stack .case{position:absolute;top:50%;left:50%;transform-origin:center}
.case-stack .case--back{transform:translate(-78%,-50%) rotate(-12deg) scale(0.85);z-index:1;opacity:0.7;filter:grayscale(0.2) brightness(0.85)}
.case-stack .case--front{transform:translate(-26%,-50%) rotate(8deg);z-index:3}
.case-stack .case--mid{transform:translate(-50%,-52%) rotate(-3deg);z-index:2}
.hero__sticker{
position:absolute;
font-family:var(--font-display);
background:var(--n-accent);color:var(--n-ink);
width:108px;height:108px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
text-align:center;font-size:14px;line-height:1.1;text-transform:uppercase;letter-spacing:0.08em;
z-index:4;
box-shadow:0 12px 40px rgba(17,20,27,0.06);
animation:spin 22s linear infinite;
padding:12px;
}
.hero__sticker--tl{top:2%;left:-3%}
.hero__sticker--br{bottom:6%;right:-2%;background:#FFFFFF;color:var(--n-ink)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* ============ PHONE CASE COMPONENT ============ */
.case{
width:240px;
aspect-ratio:9/19;
border-radius:38px;
background:var(--n-bg);
position:relative;
padding:8px;
box-shadow:
0 30px 80px rgba(17,20,27,0.275),
0 8px 20px rgba(17,20,27,0.2),
inset 0 1px 0 rgba(17,20,27,0.07);
}
.case__inner{
width:100%;height:100%;
border-radius:30px;
position:relative;overflow:hidden;
background:var(--n-bg);
}
.case__cam{
position:absolute;top:14px;left:14px;
width:62px;height:62px;
border-radius:18px;
background:rgba(243,244,241,0.45);
backdrop-filter:blur(6px);
display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:7px;
z-index:5;
}
.case__cam-lens{width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--n-field),var(--n-bg) 70%);box-shadow:inset 0 0 0 1px rgba(17,20,27,0.112)}
.case__cam-flash{width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--n-field),#a8a87a);align-self:center;justify-self:center}
.case__logo{
position:absolute;left:0;right:0;bottom:18px;
display:flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--font-display);font-size:11px;letter-spacing:0.18em;
color:var(--n-ink);
z-index:5;
}
.case__logo-k{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--n-ink);background:var(--n-surface);display:inline-flex;align-items:center;justify-content:center;font-size:9px;position:relative}
.case__logo-k::after{content:"";position:absolute;top:0;right:0;width:4px;height:4px;background:var(--n-accent);clip-path:polygon(0 0,100% 0,100% 100%)}
/* case design variants */
/* big white painted K */
.design-k-white .case__inner{background:var(--n-bg)}
.design-k-white .case__inner::before{
content:"K";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:700;font-size:340px;color:var(--n-ink);line-height:0.8;
transform:rotate(-6deg) translate(8px,0);
text-shadow:0 0 0 transparent;
filter:url(#brush) drop-shadow(0 2px 0 rgba(0,0,0,0.2));
}
.design-k-white .case__inner::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(circle at 70% 30%, rgba(17,20,27,0.04) 0 6px, transparent 7px),
radial-gradient(circle at 30% 80%, rgba(17,20,27,0.06) 0 4px, transparent 5px),
radial-gradient(circle at 80% 80%, rgba(17,20,27,0.05) 0 3px, transparent 4px);
}
/* big ember painted K */
.design-k-ember .case__inner{background:var(--n-bg)}
.design-k-ember .case__inner::before{
content:"K";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:700;font-size:340px;color:var(--n-accent-text);line-height:0.8;
transform:rotate(-6deg) translate(8px,0);
filter:url(#brush);
}
/* exclamation mark */
.design-exclaim .case__inner{background:var(--n-bg)}
.design-exclaim .case__inner::before{
content:"!";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:700;font-size:360px;color:var(--n-accent-text);line-height:0.85;
transform:translate(0,-10px);
filter:url(#brush);
}
/* icons pattern */
.design-icons .case__inner{
background-color:var(--n-bg);
background-image:url("data:image/svg+xml;utf8,");
background-size:100% auto;
background-repeat:repeat-y;
}
/* "Your design. Your rules." text case */
.design-text .case__inner{background:var(--n-bg);display:flex;align-items:center;justify-content:center;padding:0 24px;text-align:center}
.design-text .case__inner > .case__text{font-family:var(--font-display);font-weight:700;font-size:42px;color:var(--n-ink);line-height:0.9;letter-spacing:0.02em;text-transform:uppercase}
.design-text .case__inner > .case__text .ember{color:var(--n-accent-text)}
/* small K monogram centered case */
.design-mini-k .case__inner{background:var(--n-bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.design-mini-k .case__inner > .k-badge{position:relative}
/* concrete/texture variant - ash gray brushed */
.design-concrete .case__inner{
background:var(--n-bg);
}
.design-concrete .case__inner::before{
content:"K";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:700;font-size:340px;color:var(--n-ink);line-height:0.8;
transform:rotate(-4deg);
filter:url(#brush);
}
.design-concrete .case__inner::after{
content:"";position:absolute;inset:0;
background-image:
radial-gradient(circle at 22% 18%, rgba(17,20,27,0.05) 0 24px, transparent 25px),
radial-gradient(circle at 70% 50%, rgba(17,20,27,0.03) 0 30px, transparent 31px),
radial-gradient(circle at 38% 80%, rgba(17,20,27,0.04) 0 20px, transparent 21px);
}
/* lightning bolts grid */
.design-bolts .case__inner{
background-color:var(--n-bg);
background-image:url("data:image/svg+xml;utf8,");
background-size:60px 90px;
}
/* sizes */
.case--sm{width:140px;border-radius:24px;padding:5px}
.case--sm .case__inner{border-radius:20px}
.case--sm .case__cam{width:38px;height:38px;border-radius:11px;padding:4px;top:8px;left:8px}
.case--sm .case__logo{font-size:8px;bottom:10px;gap:5px}
.case--sm .case__logo-k{width:11px;height:11px;border-radius:2px;font-size:7px}
.case--sm.design-k-white .case__inner::before,
.case--sm.design-k-ember .case__inner::before,
.case--sm.design-concrete .case__inner::before{font-size:200px}
.case--sm.design-exclaim .case__inner::before{font-size:210px}
.case--sm.design-text .case__inner > .case__text{font-size:24px}
.case--sm.design-bolts .case__inner{background-size:36px 54px}
.case--sm.design-icons .case__inner{background-size:100% auto}
.case--md{width:180px;border-radius:30px;padding:6px}
.case--md .case__inner{border-radius:24px}
.case--md .case__cam{width:48px;height:48px;border-radius:14px;padding:5px;top:11px;left:11px}
.case--md .case__logo{font-size:9px;bottom:14px;gap:6px}
.case--md .case__logo-k{width:12px;height:12px;border-radius:3px;font-size:8px}
.case--md.design-k-white .case__inner::before,
.case--md.design-k-ember .case__inner::before,
.case--md.design-concrete .case__inner::before{font-size:260px}
.case--md.design-exclaim .case__inner::before{font-size:270px}
.case--md.design-text .case__inner > .case__text{font-size:32px}
.case--md.design-bolts .case__inner{background-size:45px 68px}
/* ============ SECTION HEAD ============ */
.section{padding:130px 0;position:relative}
.section--pattern{position:relative}
.section--pattern::before{
content:"";position:absolute;inset:0;
opacity:0.18;
background-color:transparent;
background-image:url("data:image/svg+xml;utf8,");
background-size:240px 240px;
pointer-events:none;
}
.section__head{display:flex;justify-content:space-between;align-items:end;margin-bottom:60px;gap:32px;flex-wrap:wrap}
.section__head h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);letter-spacing:0.005em;line-height:0.92;max-width:880px;text-transform:uppercase}
.section__head h2 .ember{color:var(--n-accent-text)}
.section__head .label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--n-muted);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.section__head .label .num{color:var(--n-accent-text)}
.section__head .label .dash{display:inline-block;width:28px;height:1px;background:var(--n-accent)}
.section__head .right{font-size:15px;color:var(--n-muted);max-width:380px;line-height:1.6}
/* ============ CATEGORIES ============ */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cats.cats--5{grid-template-columns:repeat(5,1fr);gap:12px}
/* 6 категории на desktop = един хоризонтален ред със scroll-snap.
padding-top дава дъх за hover translateY(-6px) без clip. */
.cats.cats--6{
display:flex;flex-wrap:nowrap;gap:14px;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;scrollbar-color:var(--ember) transparent;
padding:12px 2px 14px;
margin:-12px -2px 0;
}
.cats.cats--6 > .cat{
flex:0 0 calc((100% - 14px * 5) / 6);
min-width:200px;scroll-snap-align:start;
}
.cats.cats--6::-webkit-scrollbar{height:6px}
.cats.cats--6::-webkit-scrollbar-track{background:transparent}
.cats.cats--6::-webkit-scrollbar-thumb{background:var(--n-accent);border-radius:3px}
@media (max-width:1100px){.cats.cats--5{grid-template-columns:repeat(3,1fr);gap:16px}}
/* Mobile: ВСИЧКИ категорийни мрежи стават 2 колони, едно под друго (без
хоризонтален scroll за cats--6). Остава 2 на ред чак до най-малките екрани. */
@media (max-width:900px){
.cats,.cats.cats--5,.cats.cats--6{
display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
overflow:visible;margin:0;padding:0;
}
.cats.cats--6 > .cat{flex:none;min-width:0;scroll-snap-align:none}
}
@media (max-width:560px){
.cats,.cats.cats--5,.cats.cats--6{gap:10px}
}
.cat{
position:relative;
background:var(--n-surface);
border:1px solid var(--n-line);
border-radius:18px;
padding:18px 16px;
aspect-ratio:3/4.4;
display:flex;flex-direction:column;justify-content:space-between;
overflow:hidden;
cursor:pointer;
transition:transform .35s, border-color .35s, background .35s, box-shadow .35s;
}
.cat:hover{transform:translateY(-6px);border-color:rgba(17,20,27,0.225);background:var(--n-surface);box-shadow:0 30px 60px -20px rgba(17,20,27,0.275), 0 0 0 1px rgba(17,20,27,0.225)}
.cat__head{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}
.cat__num{font-family:var(--font-mono);font-size:10px;color:var(--n-muted);letter-spacing:0.16em}
.cat__name{font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:0.01em;line-height:0.92;text-transform:uppercase;margin-top:12px}
.cat__count{font-family:var(--font-mono);font-size:10px;color:var(--n-muted);letter-spacing:0.14em;text-transform:uppercase;margin-top:6px}
.cat__cta{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--n-ink);text-transform:uppercase;letter-spacing:0.14em;margin-top:auto;padding-top:14px;border-top:1px solid var(--n-line);position:relative;z-index:2}
.cat__cta .arrow{transition:transform .25s;color:var(--n-accent-text)}
.cat:hover .cat__cta .arrow{transform:translateX(4px)}
/* CSS-mockup visual (legacy fallback) */
.cat__visual:not(.cat__visual--img){position:absolute;right:-44px;top:50%;transform:translateY(-50%);transition:transform .4s;z-index:1}
.cat:hover .cat__visual:not(.cat__visual--img){transform:translateY(-50%) translateX(-10px) rotate(-4deg)}
/* Real case image visual - anchored to bottom-right, sticking out */
.cat__visual--img{
position:absolute;
right:-30%;
bottom:48px;
width:115%;
height:62%;
display:flex;justify-content:flex-end;align-items:flex-end;
pointer-events:none;
z-index:1;
perspective:900px;
}
.cat__visual--img picture{display:contents}
.cat__visual--img img{
width:auto;height:100%;object-fit:contain;
filter:drop-shadow(0 22px 24px rgba(0,0,0,0.55)) drop-shadow(0 6px 12px rgba(0,0,0,0.35));
transform:translateY(6px) rotate(-2deg);
transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .5s;
will-change:transform;
}
.cat:hover .cat__visual--img img{
transform:translateX(-12px) translateY(-2px) rotate(-6deg) scale(1.04);
filter:drop-shadow(0 34px 36px rgba(0,0,0,0.6)) drop-shadow(0 8px 16px rgba(255,90,31,0.18));
}
.cat--featured{background:var(--n-accent);border-color:var(--n-ink)}
.cat--featured .cat__num,.cat--featured .cat__count{color:rgba(17,20,27,0.85)}
.cat--featured .cat__cta{border-top-color:rgba(17,20,27,0.35)}
.cat--featured .cat__cta .arrow{color:var(--n-ink)}
.cat--featured:hover{background:var(--n-accent)}
.cat--featured .cat__visual--img img{filter:drop-shadow(0 22px 24px rgba(0,0,0,0.45)) drop-shadow(0 6px 12px rgba(0,0,0,0.3))}
.cat--featured:hover .cat__visual--img img{filter:drop-shadow(0 34px 36px rgba(0,0,0,0.55)) drop-shadow(0 8px 16px rgba(255,255,255,0.2))}
/* ============ MARQUEE LARGE w/ ICONS ============ */
.marquee-lg{
padding:44px 0;border-top:1px solid var(--n-line);border-bottom:1px solid var(--n-line);
background:var(--n-bg);
overflow:hidden;
}
.marquee-lg__track{display:flex;align-items:center;gap:56px;white-space:nowrap;animation:scroll 32s linear infinite;font-family:var(--font-display);font-weight:700;font-size:76px;letter-spacing:0.02em;line-height:1;text-transform:uppercase}
.marquee-lg__track span.txt{color:transparent;-webkit-text-stroke:1.5px var(--n-ink)}
.marquee-lg__track span.txt-fill{color:var(--n-accent-text)}
.marquee-lg__track .icon{color:var(--n-accent-text);display:inline-flex;align-items:center;height:60px}
/* ============ BESTSELLERS / PRODUCTS ============ */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:980px){.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.products{grid-template-columns:1fr}}
.product{
background:var(--n-surface);
border:1px solid var(--n-line);
border-radius:18px;
padding:24px;
display:flex;flex-direction:column;
cursor:pointer;
position:relative;overflow:hidden;
transition:transform .3s, border-color .3s;
}
.product:hover{transform:translateY(-4px);border-color:rgba(17,20,27,0.225)}
/* Stretched-link: invisible покрива цялата карта. + бутонът седи
отгоре с z-index, така че не конфликтва с навигацията. */
.product__link{position:absolute;inset:0;z-index:1;background:transparent;text-decoration:none;border:0;outline:0;border-radius:inherit}
.product__link:focus-visible{outline:2px solid var(--n-ink);outline-offset:-3px}
.product__bottom,.product__add{position:relative;z-index:2}
.product__badge{position:absolute;top:18px;left:18px;font-family:var(--font-display);font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--n-ink);background:var(--n-accent);padding:6px 11px;border-radius:6px;z-index:3;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.product__badge--ash{background:#FFFFFF;color:var(--n-ink)}
.product__visual{aspect-ratio:1/1;height:auto;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:radial-gradient(circle at 50% 60%,var(--n-accent),transparent 70%);border-radius:14px;position:relative;overflow:hidden;width:100%;pointer-events:none}
.product__visual--bg{background:var(--n-field) url("../../images/case-bg-cream.svg") center/cover no-repeat}
/* pointer-events:none на visual + image → click на снимка mineva през към
.product__link (stretched покриващ цялата карта). Без този fix image
с z-index:2 блокираше link-а отдолу (z-index:1). .product__add бутонът е
в .product__bottom (z-index:2) → остава clickable. */
.product__visual .product__img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2;pointer-events:none}
.product__visual .case{pointer-events:none}
.product__cat{font-family:var(--font-mono);font-size:10px;color:var(--n-muted);letter-spacing:0.16em;text-transform:uppercase;margin-bottom:8px;font-weight:600}
.product__name{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.8vw,26px);letter-spacing:0.01em;line-height:1.05;text-transform:uppercase;margin-bottom:10px;color:var(--n-ink)}
.product__models{font-size:12px;color:var(--n-muted);margin-bottom:18px}
.product__bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--n-line);padding-top:16px;margin-top:auto;gap:10px}
.product__price{display:flex;align-items:baseline;gap:8px;min-width:0}
.product__price b{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2vw,28px);letter-spacing:0.02em;line-height:1;color:var(--n-ink)}
.product__price s{color:var(--n-muted);font-size:13px;text-decoration:line-through}
.product__add{
width:44px;height:44px;border-radius:11px;background:var(--n-accent);color:var(--n-ink);display:flex;align-items:center;justify-content:center;font-size:20px;
transition:transform .2s;
}
.product__add:hover{transform:scale(1.08)}
/* ============ LIGHT SECTION (Cream) - visual break from all-dark ============ */
.section--light{
background:var(--n-field);
color:var(--n-ink);
position:relative;
}
.section--light::before{
content:"";position:absolute;inset:0;opacity:0.06;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:240px 240px;
}
.section--light .wrap{position:relative;z-index:2}
/* section heads on light */
.section--light .section__head h2{color:var(--n-ink)}
.section--light .section__head h2 .ember{color:var(--n-accent-text)}
.section--light .section__head .label{color:var(--n-muted)}
.section--light .section__head .right{color:var(--n-ink)}
/* category cards on light */
.section--light .cat{
background:#fff;
border-color:rgba(17,20,27,0.04);
color:var(--n-ink);
}
.section--light .cat:hover{
background:#fff;
border-color:var(--n-ink);
box-shadow:0 14px 40px rgba(17,20,27,0.05);
}
.section--light .cat__num,
.section--light .cat__count{color:var(--n-ink)}
.section--light .cat__name{color:var(--n-ink)}
.section--light .cat__cta{color:var(--n-ink);border-top-color:rgba(17,20,27,0.04)}
.section--light .cat--featured{background:var(--n-accent);border-color:var(--n-ink);color:var(--n-ink)}
.section--light .cat--featured:hover{background:var(--n-accent)}
.section--light .cat--featured .cat__num,
.section--light .cat--featured .cat__count{color:rgba(17,20,27,0.85)}
.section--light .cat--featured .cat__name{color:var(--n-ink)}
.section--light .cat--featured .cat__cta{color:var(--n-ink);border-top-color:rgba(17,20,27,0.35)}
/* product cards on light */
.section--light .product{
background:#fff;
border-color:rgba(17,20,27,0.04);
color:var(--n-ink);
}
.section--light .product:hover{
background:#fff;
border-color:var(--n-ink);
box-shadow:0 14px 40px rgba(17,20,27,0.05);
}
.section--light .product__cat{color:var(--n-ink)}
.section--light .product__name{color:var(--n-ink)}
.section--light .product__models{color:var(--n-ink)}
.section--light .product__bottom{border-top-color:rgba(17,20,27,0.04)}
.section--light .product__price b{color:var(--n-ink)}
.section--light .product__price s{color:var(--n-muted)}
.section--light .product__visual{background:radial-gradient(circle at 50% 60%,var(--n-accent),transparent 70%)}
/* review cards on light */
.section--light .review{
background:#fff;
border-color:rgba(17,20,27,0.04);
}
.section--light .review__body{color:var(--n-ink)}
.section--light .review__person{border-top-color:rgba(17,20,27,0.04)}
.section--light .review__person b{color:var(--n-ink)}
.section--light .review__person span{color:var(--n-ink)}
.section--light .review__avatar{background:var(--n-field);color:var(--n-ink);border-color:var(--n-ink)}
/* steps on light */
.steps--light .step{
background:#fff;
border-color:rgba(17,20,27,0.04);
}
.steps--light .step:hover{
background:#fff;
border-color:var(--n-ink);
box-shadow:0 6px 20px rgba(17,20,27,0.04);
}
.steps--light .step__n{
background:var(--n-field);
color:var(--n-accent-text);
border-color:rgba(17,20,27,0.04);
}
.steps--light .step__body b{color:var(--n-ink)}
.steps--light .step__body span{color:var(--n-ink)}
/* custom hero image (replaces custom__visual) */
.custom__hero{
position:relative;
display:flex;align-items:center;justify-content:center;
}
.custom__hero img{
width:100%;
max-width:560px;
height:auto;
border-radius:28px;
display:block;
box-shadow:0 30px 80px rgba(17,20,27,0.09), 0 8px 20px rgba(17,20,27,0.04);
}
@media (max-width:980px){
.custom__hero img{max-width:440px;margin:0 auto}
}
.custom{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;position:relative;z-index:2}
@media (max-width:980px){.custom{grid-template-columns:1fr;gap:48px}}
.custom h2{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,6.2vw,100px);letter-spacing:0.005em;line-height:0.92;text-transform:uppercase}
.custom h2 .ember{color:var(--n-accent-text)}
.steps{display:flex;flex-direction:column;gap:14px;margin-top:36px}
.step{
display:grid;grid-template-columns:72px 1fr auto;gap:22px;align-items:center;
background:var(--n-surface);
border:1px solid var(--n-line);
border-radius:16px;padding:22px 26px;
transition:background .25s, border-color .25s;
}
.step:hover{background:var(--n-surface);border-color:rgba(17,20,27,0.225)}
.step__n{
width:60px;height:60px;border-radius:14px;background:var(--n-bg);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--n-accent-text);letter-spacing:0.02em;
border:1px solid rgba(17,20,27,0.11);
}
.step__body b{display:block;font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:4px;letter-spacing:0.02em;text-transform:uppercase}
.step__body span{font-size:13px;color:var(--n-muted);line-height:1.5}
.step__time{font-family:var(--font-mono);font-size:11px;color:var(--n-accent-text);letter-spacing:0.12em;text-transform:uppercase}
.custom__visual{
position:relative;
aspect-ratio:1;
background:var(--n-surface);
border-radius:28px;border:1px solid var(--n-line);
padding:48px;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
.custom__visual::before{
content:"";position:absolute;inset:0;opacity:0.5;
background-image:url("data:image/svg+xml;utf8,");
background-size:240px 240px;
}
.custom__tag{position:absolute;font-family:var(--font-mono);font-size:11px;background:#FFFFFF;color:var(--n-ink);padding:7px 11px;border-radius:8px;letter-spacing:0.08em;font-weight:600;box-shadow:0 8px 24px rgba(17,20,27,0.25);z-index:3;text-transform:uppercase}
.custom__tag::before{content:"";position:absolute;width:8px;height:8px;background:inherit;transform:rotate(45deg)}
.custom__tag--tl{top:8%;left:6%}
.custom__tag--tl::before{bottom:-3px;left:18px}
.custom__tag--br{bottom:10%;right:4%;background:var(--n-accent);color:var(--n-ink)}
.custom__tag--br::before{top:-3px;right:18px;background:var(--n-accent)}
/* ============ TRUST STRIP ============ */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--n-line);border-bottom:1px solid var(--n-line)}
@media (max-width:780px){.trust{grid-template-columns:repeat(2,1fr)}}
.trust__item{padding:48px 28px;border-right:1px solid var(--n-line);text-align:center}
.trust__item:last-child{border-right:none}
@media (max-width:780px){.trust__item:nth-child(2){border-right:none} .trust__item:nth-child(-n+2){border-bottom:1px solid var(--n-line)}}
.trust__icon{height:32px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--n-accent-text)}
.trust__n{font-family:var(--font-display);font-weight:700;font-size:58px;letter-spacing:0.02em;line-height:0.9;color:var(--n-ink);margin-bottom:8px}
.trust__n .small{font-size:28px;color:var(--n-accent-text)}
.trust__lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;color:var(--n-muted);text-transform:uppercase}
/* ============ REVIEWS ============ */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.reviews{grid-template-columns:1fr}}
.review{background:var(--n-surface);border:1px solid var(--n-line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:16px}
.review__stars{color:var(--n-accent-text);font-size:18px;letter-spacing:3px;font-family:var(--font-display)}
.review__body{font-size:15px;line-height:1.6;color:var(--n-muted);flex:1;font-style:italic}
.review__person{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--n-line)}
.review__avatar{width:40px;height:40px;border-radius:10px;background:var(--n-bg);border:1.5px solid var(--n-ink);display:flex;align-items:center;justify-content:center;color:var(--n-ink);font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:0.04em}
.review__person b{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:0.04em;color:var(--n-ink);text-transform:uppercase;display:block;line-height:1}
.review__person span{font-size:11px;font-family:var(--font-mono);color:var(--n-muted);letter-spacing:0.1em;text-transform:uppercase}
/* ============ BUNDLE ============ */
.bundle{
position:relative;
background:var(--n-surface);
border-radius:28px;
padding:80px;
overflow:hidden;
border:1px solid var(--n-line);
}
.bundle::before{
content:"";position:absolute;inset:0;opacity:0.5;
background-image:url("data:image/svg+xml;utf8,");
background-size:240px 240px;
pointer-events:none;
}
.bundle::after{
content:"";position:absolute;right:-180px;top:50%;transform:translateY(-50%);
font-family:var(--font-display);font-size:600px;color:rgba(17,20,27,0.06);line-height:1;
font-weight:700;
}
@media (max-width:900px){.bundle{padding:48px 32px}}
.bundle__inner{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;position:relative;z-index:2}
@media (max-width:900px){.bundle__inner{grid-template-columns:1fr}}
.bundle__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--n-accent-text);margin-bottom:24px;padding:7px 11px;border:1px solid rgba(17,20,27,0.225);border-radius:6px;background:var(--n-accent);align-self:flex-start}
.bundle h3{font-family:var(--font-display);font-weight:700;font-size:clamp(54px,7.4vw,108px);letter-spacing:0.02em;line-height:0.88;margin-bottom:24px;text-transform:uppercase}
.bundle h3 .ember{color:var(--n-accent-text)}
.bundle p{color:var(--n-muted);font-size:16px;line-height:1.6;max-width:480px;margin-bottom:36px}
.bundle__pricing{display:flex;gap:24px;align-items:baseline;margin-bottom:32px;flex-wrap:wrap}
.bundle__price{font-family:var(--font-display);font-weight:700;font-size:58px;letter-spacing:0.02em;color:var(--n-ink);line-height:1}
.bundle__was{font-size:16px;color:var(--n-muted);text-decoration:line-through}
.bundle__save{font-family:var(--font-display);font-size:18px;background:var(--n-accent);color:var(--n-ink);padding:6px 12px;border-radius:6px;font-weight:700;letter-spacing:0.06em}
.bundle__visual{display:flex;align-items:center;justify-content:center;height:600px;position:relative}
.bundle__visual .case:nth-child(1){transform:rotate(-10deg) translateX(28px);position:absolute;z-index:1}
.bundle__visual .case:nth-child(2){transform:rotate(8deg);position:relative;z-index:2}
/* Real case images inside the bundle visual - stacked at an angle,
* heavily overlapping (polaroid-tossed-on-top-of-each-other vibe). */
.bundle__case{
position:absolute;left:50%;top:50%;
width:460px;height:auto;display:block;
filter:drop-shadow(0 30px 50px rgba(0,0,0,0.6));
transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
/* translate(-50%,-50%) centers the element, then we offset + rotate */
.bundle__case--left{
z-index:1;
transform:translate(-50%, -50%) translate(-44px, 26px) rotate(-18deg);
}
.bundle__case--right{
z-index:2;
transform:translate(-50%, -50%) translate(52px, -20px) rotate(12deg);
}
/* On hover - slight fan-out so both designs remain readable */
.bundle:hover .bundle__case--left{
transform:translate(-50%, -50%) translate(-100px, 18px) rotate(-22deg);
}
.bundle:hover .bundle__case--right{
transform:translate(-50%, -50%) translate(108px, -26px) rotate(16deg);
}
@media (max-width:1100px){
.bundle__visual{height:520px}
.bundle__case{width:360px}
.bundle__case--left{transform:translate(-50%,-50%) translate(-36px,20px) rotate(-18deg)}
.bundle__case--right{transform:translate(-50%,-50%) translate(42px,-16px) rotate(12deg)}
.bundle:hover .bundle__case--left{transform:translate(-50%,-50%) translate(-80px,14px) rotate(-22deg)}
.bundle:hover .bundle__case--right{transform:translate(-50%,-50%) translate(84px,-20px) rotate(16deg)}
}
@media (max-width:900px){
.bundle__visual{height:460px}
.bundle__case{width:300px}
.bundle__case--left{transform:translate(-50%,-50%) translate(-30px,18px) rotate(-18deg)}
.bundle__case--right{transform:translate(-50%,-50%) translate(34px,-14px) rotate(12deg)}
}
@media (max-width:560px){
.bundle__visual{height:380px}
.bundle__case{width:240px}
.bundle__case--left{transform:translate(-50%,-50%) translate(-24px,14px) rotate(-18deg)}
.bundle__case--right{transform:translate(-50%,-50%) translate(28px,-12px) rotate(12deg)}
}
/* ============ VIDEOS / UGC ============ */
.vids{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.vids{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vids{grid-template-columns:1fr 1fr;gap:12px}}
.vid{
position:relative;aspect-ratio:9/16;border-radius:18px;
overflow:hidden;cursor:pointer;
background:var(--n-surface);border:1px solid var(--n-line);
transition:transform .3s, border-color .3s;
}
.vid:hover{transform:translateY(-4px);border-color:var(--n-ink)}
.vid__poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vid__poster .case{transform:scale(1.05) rotate(-3deg)}
.vid__overlay{position:absolute;inset:0;background:linear-gradient(180deg, transparent 0%, transparent 40%, rgba(243,244,241,0.75) 100%);z-index:2}
.vid__play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
width:66px;height:66px;border-radius:50%;
background:rgba(17,20,27,0.95);color:var(--n-ink);
display:flex;align-items:center;justify-content:center;
transition:transform .25s, background .25s;
box-shadow:0 12px 32px rgba(17,20,27,0.25);
}
.vid:hover .vid__play{transform:translate(-50%,-50%) scale(1.1);background:var(--n-accent);color:var(--n-ink)}
.vid__play svg{margin-left:3px}
.vid__top{
position:absolute;top:14px;left:14px;right:14px;z-index:3;
display:flex;justify-content:space-between;align-items:flex-start;
}
.vid__platform{
display:inline-flex;align-items:center;gap:5px;
font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
background:rgba(243,244,241,0.55);backdrop-filter:blur(6px);
color:var(--n-ink);padding:5px 9px;border-radius:7px;text-transform:uppercase;
}
.vid__views{
font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
background:rgba(243,244,241,0.55);backdrop-filter:blur(6px);
color:var(--n-ink);padding:5px 9px;border-radius:7px;
display:inline-flex;align-items:center;gap:5px;
}
.vid__bottom{
position:absolute;left:16px;right:16px;bottom:16px;z-index:3;
color:var(--n-ink);
}
.vid__user{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.vid__avatar{
width:30px;height:30px;border-radius:50%;
background:var(--n-accent);border:2px solid var(--n-line);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--n-ink);
}
.vid__handle{font-family:var(--font-body);font-weight:700;font-size:12px}
.vid__handle span{display:block;font-family:var(--font-mono);font-weight:400;font-size:9px;color:rgba(17,20,27,0.7);letter-spacing:0.08em;text-transform:uppercase;margin-top:1px}
.vid__caption{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:0.01em;line-height:1.05;text-transform:uppercase}
.vid__caption .ember{color:var(--n-accent-text)}
/* poster background variants */
.vid--bg-orange .vid__poster{background:radial-gradient(circle at 50% 40%, var(--n-accent) 0%, #B83A0F 60%, var(--n-surface) 100%)}
.vid--bg-blue .vid__poster{background:radial-gradient(circle at 50% 30%, var(--n-field) 0%, var(--n-surface) 60%, var(--n-bg) 100%)}
.vid--bg-grey .vid__poster{background:radial-gradient(circle at 50% 30%, var(--n-field) 0%, var(--n-surface) 60%, var(--n-bg) 100%)}
.vid--bg-ember .vid__poster{background:radial-gradient(circle at 30% 70%, var(--n-accent) 0%, var(--n-field) 60%, var(--n-bg) 100%)}
/* Native video variant - auto-playing product shots */
.vid--video{background:var(--n-bg)}
.vid__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.vid--video .vid__overlay{background:linear-gradient(180deg, rgba(243,244,241,0.35) 0%, transparent 30%, transparent 55%, rgba(243,244,241,0.85) 100%)}
.vid__tag{
display:inline-flex;align-items:center;gap:5px;
font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;font-weight:700;
background:var(--n-accent);color:var(--n-ink);
padding:6px 10px;border-radius:7px;text-transform:uppercase;
}
/* ═══════════════════════ LEGAL PAGES (terms / privacy) ═══════════════════════ */
.kp-legal{max-width:900px;margin:0 auto}
.kp-legal__meta{display:flex;gap:24px;flex-wrap:wrap;padding:16px 22px;background:#fff;border:1px solid var(--n-line);border-radius:12px;font-size:13px;color:var(--n-ink);margin-bottom:28px}
.kp-legal__meta b{color:var(--n-ink)}
.kp-legal__doc{background:#fff;border:1px solid var(--n-line);border-radius:18px;padding:48px 56px;font-family:var(--font-body);color:var(--n-ink)}
.kp-legal__doc h3{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--n-ink);text-transform:uppercase;letter-spacing:0.005em;line-height:1.15;margin:36px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--n-ink)}
.kp-legal__doc h3:first-child{margin-top:0}
.kp-legal__doc p{font-size:15px;line-height:1.72;margin-bottom:14px}
.kp-legal__doc p b{color:var(--n-ink)}
.kp-legal__doc ul,.kp-legal__doc ol{padding-left:24px;margin-bottom:18px}
.kp-legal__doc li{font-size:15px;line-height:1.72;margin-bottom:6px}
.kp-legal__doc a{color:var(--n-accent-text);text-decoration:underline;text-underline-offset:2px}
.kp-legal__doc a:hover{color:var(--n-accent-text)}
@media (max-width:720px){.kp-legal__doc{padding:28px 22px}.kp-legal__doc h3{font-size:21px}.kp-legal__doc p,.kp-legal__doc li{font-size:14.5px}}
/* ═══════════════════════ PHONE MODEL SELECTOR (single product + modal) ═══════════════════════ */
.keisove-model-row{margin-bottom:18px;display:block}
.keisove-model-row__label{display:block}
.keisove-model-row__label .kp-eyebrow{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;color:var(--n-muted);margin-bottom:8px}
.keisove-phone-model{
width:100%;background:var(--n-surface);border:1px solid rgba(17,20,27,0.11);
color:var(--n-ink);padding:14px 16px;border-radius:10px;font-size:14px;
font-family:var(--font-body);cursor:pointer;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 16px center;
padding-right:42px;
}
.keisove-phone-model:focus{outline:none;border-color:var(--n-ink);box-shadow:0 0 0 3px rgba(17,20,27,0.04)}
.keisove-phone-model option,.keisove-phone-model optgroup{background:var(--n-surface);color:var(--n-ink)}
.keisove-phone-model optgroup{font-family:var(--font-display);font-weight:700;color:var(--n-accent-text)}
.keisove-model-row__hint{display:block;font-size:12px;color:var(--n-muted);margin-top:8px;line-height:1.5}
/* На cream sections — light variant */
.section--light .keisove-phone-model,
.kp-page .keisove-phone-model{
background-color:#fff;color:var(--n-ink);border-color:#d4d4d8;
}
.section--light .keisove-phone-model option,
.kp-page .keisove-phone-model option{background:#fff;color:var(--n-ink)}
.section--light .keisove-model-row__label .kp-eyebrow,
.kp-page .keisove-model-row__label .kp-eyebrow{color:var(--n-ink)}
/* Highlighted state when validation fails */
.keisove-phone-model.is-error{border-color:var(--n-ink);animation:keisoveShake .4s}
@keyframes keisoveShake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}}
/* ═══════════════════════ PHONE MODEL MODAL (за upsells + mobile sticky) ═══════════════════════ */
.kpm-modal{
position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;
padding:20px;
}
.kpm-modal[hidden]{display:none}
.kpm-modal__backdrop{position:absolute;inset:0;background:rgba(243,244,241,0.95);cursor:pointer}
.kpm-modal__panel{
position:relative;background:var(--n-surface);border:1px solid rgba(17,20,27,0.11);
border-radius:14px;padding:24px;width:min(480px,100%);
max-height:90vh;overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.kpm-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.kpm-modal__title{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--n-ink);text-transform:uppercase;letter-spacing:0.01em;line-height:1.15}
.kpm-modal__product{font-size:12.5px;color:var(--n-muted);margin-top:4px}
.kpm-modal__close{background:transparent;color:var(--n-muted);border:1px solid var(--n-line);width:36px;height:36px;font-size:22px;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kpm-modal__close:hover{color:var(--n-ink);border-color:rgba(17,20,27,0.11)}
.kpm-modal__body{display:flex;flex-direction:column;gap:14px}
.kpm-modal__submit{
background:var(--n-accent);color:var(--n-ink);border:none;padding:14px 22px;border-radius:10px;
font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
font-size:13px;cursor:pointer;transition:background .15s;
}
.kpm-modal__submit:hover{background:var(--n-accent)}
.kpm-modal__submit:disabled{opacity:0.5;cursor:not-allowed}
body.kpm-modal-open{overflow:hidden}
/* ── Custom fields в quick-add modal ─────────────────────────────── */
.kpm-modal__cf{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.kpm-modal__cf:empty{display:none}
.kpm-modal__cf-row{display:flex;flex-direction:column;gap:6px}
.kpm-modal__cf-label{
font-family:var(--font-mono);font-weight:700;font-size:10px;
letter-spacing:0.16em;text-transform:uppercase;color:var(--n-muted);
}
.kpm-modal__req{color:var(--n-accent-text);margin-left:2px;font-weight:800}
.kpm-modal__cf-input{
display:block;width:100%;
padding:13px 14px;
background:var(--n-field);border:1px solid rgba(17,20,27,0.11);border-radius:10px;
color:var(--n-ink);
font-family:var(--font-body);font-weight:600;font-size:15px;
letter-spacing:0.02em;
box-sizing:border-box;
transition:border-color .18s, box-shadow .18s;
}
.kpm-modal__cf-input::placeholder{color:var(--n-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.04em;font-size:13px}
.kpm-modal__cf-input:focus{outline:none;border-color:var(--n-ink);box-shadow:0 0 0 3px rgba(17,20,27,0.22)}
.kpm-modal__cf-input.is-error{border-color:var(--n-ink);background:var(--n-accent)}
/* File upload — clean ember dashed CTA */
.kpm-modal__cf-file{display:block;cursor:pointer;position:relative}
.kpm-modal__cf-file input[type=file]{
position:absolute !important;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
white-space:nowrap;border:0;
}
.kpm-modal__cf-file-cta{
display:flex;align-items:center;gap:10px;
padding:13px 14px;
background:var(--n-field);border:1px dashed rgba(17,20,27,0.35);border-radius:10px;
color:var(--n-ink);
font-family:var(--font-mono);font-weight:700;font-size:12px;
letter-spacing:0.12em;text-transform:uppercase;
transition:background .18s, border-color .18s;
}
.kpm-modal__cf-file-cta svg{color:var(--n-accent-text);flex-shrink:0}
.kpm-modal__cf-file:hover .kpm-modal__cf-file-cta{background:var(--n-accent);border-color:var(--n-ink)}
.kpm-modal__cf-row[data-kpm-cf-has-file] .kpm-modal__cf-file-cta{background:var(--n-accent);border-style:solid;border-color:var(--n-ink);color:var(--n-ink)}
.kpm-modal__cf-row[data-kpm-cf-has-file] .kpm-modal__cf-file-cta svg{color:var(--n-ink)}
.kpm-modal__cf-err{
font-family:var(--font-body);color:var(--n-accent-text);font-size:12px;
margin-top:2px;font-weight:600;
}
/* ═══════════════════════ KP-LABEL (eyebrow за нови страници) ═══════════════════════ */
.kp-label{
font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;
text-transform:uppercase;color:var(--n-muted);
margin-bottom:22px;display:inline-block;
}
.section--light .kp-label{color:var(--n-muted)}
.kp-label .num,.kp-label .dash{display:none}
/* ═══════════════════════ FAQ ═══════════════════════ */
.kp-faq{display:flex;flex-direction:column;gap:10px;max-width:880px;margin:0 auto}
.kp-faq__item{background:#fff;border:1px solid var(--n-line);border-radius:14px;overflow:hidden;transition:border-color .25s, background .25s}
.kp-faq__item[open]{border-color:var(--n-ink);background:#fff7f2}
.kp-faq__item summary{cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--n-ink);letter-spacing:0.01em;list-style:none;text-transform:uppercase}
.kp-faq__item summary::-webkit-details-marker{display:none}
.kp-faq__icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--n-accent);color:var(--n-ink);font-size:20px;font-weight:400;flex-shrink:0;transition:transform .25s}
.kp-faq__item[open] .kp-faq__icon{transform:rotate(45deg)}
.kp-faq__body{padding:0 24px 22px;font-family:var(--font-body);font-size:14.5px;line-height:1.7;color:var(--n-ink);max-width:720px}
@media (max-width:560px){.kp-faq__item summary{font-size:14px;padding:16px 18px} .kp-faq__body{padding:0 18px 18px;font-size:14px}}
/* ═══════════════════════ ABOUT page ═══════════════════════ */
.kp-about{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;margin-top:40px;align-items:start}
@media (max-width:980px){.kp-about{grid-template-columns:1fr;gap:40px}}
.kp-about__col h3{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.15;margin-bottom:18px;text-transform:uppercase;letter-spacing:0.005em;color:var(--n-ink)}
.kp-about__col p{font-size:15.5px;line-height:1.65;color:var(--n-muted);margin-bottom:14px}
.kp-about__col p b{color:var(--n-ink)}
.kp-about__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kp-stat{background:var(--n-surface);border:1px solid var(--n-line);border-radius:14px;padding:22px}
.kp-stat__n{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,3.6vw,46px);line-height:1;color:var(--n-accent-text);display:block;margin-bottom:6px;letter-spacing:0.005em}
.kp-stat span{font-family:var(--font-mono);font-size:11px;color:var(--n-muted);letter-spacing:0.14em;text-transform:uppercase;line-height:1.4}
.kp-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
@media (max-width:980px){.kp-feats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.kp-feats{grid-template-columns:1fr}}
.kp-feat{background:#fff;border:1px solid var(--n-line);border-radius:14px;padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.kp-feat h3{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--n-ink);text-transform:uppercase;letter-spacing:0.01em;line-height:1.1;margin-top:4px}
.kp-feat p{font-size:14px;line-height:1.55;color:var(--n-ink)}
/* CTA band */
.kp-cta-band{background:var(--n-surface);border:1px solid var(--n-line);border-radius:24px;padding:64px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:32px}
.kp-cta-band h2{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,4.8vw,64px);line-height:0.95;text-transform:uppercase;letter-spacing:0.005em}
.kp-cta-band h2 .ember{color:var(--n-accent-text)}
.kp-cta-band__btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* ═══════════════════════ HOW IT WORKS page ═══════════════════════ */
.kp-steps{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.kp-step{display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:center;background:var(--n-surface);border:1px solid var(--n-line);border-radius:18px;padding:24px 28px;transition:border-color .25s, transform .25s}
.kp-step:hover{border-color:var(--n-ink);transform:translateY(-2px)}
.kp-step__n{font-family:var(--font-display);font-weight:700;font-size:48px;line-height:1;color:var(--n-accent-text);letter-spacing:0.005em}
.kp-step__body h3{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--n-ink);text-transform:uppercase;letter-spacing:0.01em;line-height:1.1;margin-bottom:6px}
.kp-step__body p{font-size:14.5px;line-height:1.55;color:var(--n-muted)}
.kp-step__time{font-family:var(--font-mono);font-size:11px;color:var(--n-accent-text);letter-spacing:0.16em;text-transform:uppercase;background:var(--n-accent);padding:8px 14px;border-radius:8px;white-space:nowrap}
@media (max-width:720px){.kp-step{grid-template-columns:60px 1fr;gap:16px;padding:20px} .kp-step__n{font-size:36px} .kp-step__time{grid-column:1/-1;justify-self:start}}
.kp-custom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media (max-width:980px){.kp-custom-grid{grid-template-columns:1fr;gap:14px}}
.kp-custom-card{background:#fff;border:1px solid var(--n-line);border-radius:16px;padding:30px;display:flex;flex-direction:column;gap:10px}
.kp-custom-card h3{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--n-ink);text-transform:uppercase;letter-spacing:0.01em;line-height:1.05;margin-top:6px}
.kp-custom-card p{font-size:14.5px;line-height:1.55;color:var(--n-ink)}
/* ═══════════════════════ CONTACT page ═══════════════════════ */
.kp-page{padding:80px 0 100px}
.kp-contact__grid{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:start;margin-top:20px}
@media (max-width:980px){.kp-contact__grid{grid-template-columns:1fr;gap:30px}}
.kp-contact__info{display:flex;flex-direction:column;gap:14px}
.kp-contact__card{background:#fff;border:1px solid var(--n-line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:6px}
.kp-contact__card .kp-eyebrow{align-self:flex-start;background:var(--n-accent);color:var(--n-accent-text);padding:5px 9px;border-radius:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase}
.kp-contact__big{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--n-ink);text-transform:uppercase;letter-spacing:0.005em;text-decoration:none;line-height:1.1;margin-top:6px;word-break:break-word}
.kp-contact__big:hover{color:var(--n-accent-text)}
.kp-contact__card small{font-size:12.5px;color:var(--n-ink);margin-top:2px}
.kp-contact__form{background:#fff;border:1px solid var(--n-line);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:18px;position:relative}
.kp-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.kp-form__row{grid-template-columns:1fr}}
.kp-contact__form label{display:block}
.kp-contact__form label > span{display:block;font-family:var(--font-mono);font-size:10px;color:var(--n-ink);letter-spacing:0.18em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.kp-contact__form input,.kp-contact__form select,.kp-contact__form textarea{
width:100%;background:#fafafa;border:1px solid #d4d4d8;border-radius:10px;
padding:13px 14px;font-size:14.5px;color:var(--n-ink);font-family:var(--font-body);
transition:border-color .15s, box-shadow .15s, background .15s;
}
.kp-contact__form input:focus,.kp-contact__form select:focus,.kp-contact__form textarea:focus{outline:none;border-color:var(--n-ink);background:#fff;box-shadow:0 0 0 3px rgba(17,20,27,0.15)}
.kp-contact__form textarea{resize:vertical;min-height:140px;font-family:var(--font-body)}
.kp-form__bottom{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.kp-form__bottom small{color:var(--n-ink);font-size:12px;flex:1;min-width:200px}
.kp-form__bottom small a{color:var(--n-accent-text);text-decoration:underline}
.kp-form__msg{padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.5}
.kp-form__msg.is-success{background:var(--n-field);color:var(--n-ink);border:1px solid #86efac}
.kp-form__msg.is-error{background:var(--n-field);color:var(--n-ink);border:1px solid #fca5a5}
.newsletter{
padding:90px 0 110px;
background:var(--n-bg);
border-top:1px solid var(--n-line);
position:relative;
overflow:hidden;
text-align:center;
}
.newsletter::before{
content:"K";
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
font-family:var(--font-display);font-size:500px;color:rgba(17,20,27,0.025);line-height:1;
font-weight:700;pointer-events:none;
}
.newsletter > .wrap{position:relative;z-index:2}
.newsletter h3{font-family:var(--font-display);font-weight:700;font-size:clamp(48px,5.8vw,84px);letter-spacing:0.02em;margin-bottom:14px;line-height:0.95;text-transform:uppercase}
.newsletter h3 .ember{color:var(--n-accent-text)}
.newsletter p{color:var(--n-muted);font-size:15px;margin-bottom:36px;max-width:520px;margin-left:auto;margin-right:auto}
.newsletter form{display:flex;gap:10px;max-width:560px;margin:0 auto;background:var(--n-surface);border:1px solid rgba(17,20,27,0.11);border-radius:14px;padding:6px}
.newsletter input{flex:1;background:none;border:none;outline:none;color:var(--n-ink);padding:14px 18px;font-size:15px;font-family:inherit}
.newsletter input::placeholder{color:var(--n-muted)}
.newsletter button{background:var(--n-accent);color:var(--n-ink);border-radius:10px;padding:0 24px;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.14em;display:flex;align-items:center;gap:6px;transition:transform .2s}
.newsletter button:hover{transform:translateY(-1px)}
.newsletter__sub{margin-top:20px;font-family:var(--font-mono);font-size:11px;color:var(--n-muted);letter-spacing:0.12em;text-transform:uppercase}
.newsletter__sub .ember{color:var(--n-accent-text)}
/* ============ FOOTER ============ */
.footer{padding:64px 0 36px;background:var(--n-bg);border-top:1px solid var(--n-line)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
@media (max-width:780px){.footer__top{grid-template-columns:1fr 1fr;gap:32px}}
.footer__brand p{color:var(--n-muted);font-size:13px;line-height:1.7;margin-top:16px;max-width:300px}
.footer__col h5{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:18px;color:var(--n-ink)}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer__col a{color:var(--n-muted);font-size:13px;transition:color .2s;font-family:var(--font-body)}
.footer__col a:hover{color:var(--n-accent-text)}
.footer__legal{border-top:1px solid var(--n-line);padding:22px 0 0;margin-top:32px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer__legal small{font-family:var(--font-body);font-size:12px;line-height:1.6;color:var(--n-muted);letter-spacing:0.01em}
.footer__legal small b{color:var(--n-ink);font-weight:700}
.footer__legal a{color:var(--n-muted);text-decoration:none;transition:color .2s}
.footer__legal a:hover{color:var(--n-accent-text)}
.footer__sep{color:var(--n-muted);margin:0 8px}
@media (max-width:600px){.footer__legal{flex-direction:column;gap:14px}.footer__legal small{font-size:11.5px}}
.footer__bottom{border-top:1px solid var(--n-line);padding-top:24px;margin-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-family:var(--font-mono);font-size:10px;color:var(--n-muted);letter-spacing:0.14em;text-transform:uppercase}
.footer__socials{display:flex;gap:10px}
.footer__socials a{width:38px;height:38px;border-radius:10px;border:1px solid rgba(17,20,27,0.11);display:flex;align-items:center;justify-content:center;color:var(--n-muted);transition:all .2s}
.footer__socials a:hover{background:var(--n-accent);border-color:var(--n-ink);color:var(--n-ink)}
/* ============ MOBILE TOUCHUPS ============ */
@media (max-width:560px){
.section{padding:80px 0}
.hero{padding:48px 0 64px}
.hero__meta{flex-wrap:wrap;gap:16px}
.nav__cart span:not(.badge){display:none}
.marquee-lg__track{font-size:48px}
.step{grid-template-columns:56px 1fr;gap:14px}
.step__time{display:none}
}
/* ════════════════════════════════════════════════════════════════
COMPREHENSIVE MOBILE OPTIMIZATIONS
═══════════════════════════════════════════════════════════════ */
/* Top marquee - shrink on mobile */
@media (max-width:560px){
.marquee{height:32px;font-size:11px;letter-spacing:0.1em}
.marquee__item{gap:6px}
.marquee__sep{margin:0 14px}
}
/* Brand logo - compact on mobile */
@media (max-width:560px){
.brand__text{font-size:15px;line-height:1.1}
.brand__text small{font-size:8px;letter-spacing:0.1em}
.k-badge--36{width:32px;height:32px}
.k-badge--36 .k-badge__face{font-size:18px}
.nav__inner{gap:8px}
}
@media (max-width:380px){
.brand__text small{display:none}
}
/* Nav cart button - icon-only on tiny screens */
@media (max-width:480px){
.nav__cart{padding:10px 12px;gap:6px}
}
/* Hero - better mobile sizing */
@media (max-width:560px){
.hero h1{font-size:clamp(40px,12vw,72px) !important;line-height:0.95}
.hero__sub{font-size:15px;line-height:1.55}
.hero__cta{flex-direction:column;align-items:stretch}
.hero__cta .btn{justify-content:center;width:100%}
.hero__meta-item b{font-size:22px}
}
/* Section heads - stack at mobile */
@media (max-width:720px){
.section__head{flex-direction:column;align-items:flex-start;gap:16px}
.section__head .right{max-width:100%}
}
/* Symbol strip - collapse from 6 cols */
@media (max-width:720px){
div[style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(3,1fr) !important}
div[style*="grid-template-columns:repeat(6,1fr)"] > div{border-right:none !important;padding:20px 8px !important}
}
/* Big marquee - gentler font on small screens */
@media (max-width:560px){
.marquee-lg__track{font-size:38px;gap:30px}
.marquee-lg__track .icon svg{width:32px;height:32px}
}
@media (max-width:380px){
.marquee-lg{padding:28px 0}
.marquee-lg__track{font-size:28px;gap:22px}
}
/* Category cards - keep image inside on small screens */
@media (max-width:560px){
.cat{padding:20px 18px;aspect-ratio:3/4.2}
.cat__name{font-size:42px}
.cat__visual--img{right:-15%;width:105%}
}
/* Steps section - readable typography */
@media (max-width:560px){
.step__body b{font-size:18px;line-height:1.2}
.step__body span{font-size:12px;line-height:1.4}
}
/* Bundle pricing - vertical stack on narrow */
@media (max-width:520px){
.bundle__pricing{flex-direction:column;align-items:flex-start;gap:8px}
.bundle__save{align-self:flex-start}
}
/* Newsletter - stack form */
@media (max-width:560px){
.newsletter form{flex-direction:column;padding:14px;gap:10px}
.newsletter input{font-size:14px;text-align:center}
.newsletter button{width:100%;justify-content:center;padding:14px}
}
/* Footer - single column on small mobile */
@media (max-width:520px){
.footer__top{grid-template-columns:1fr !important;gap:28px}
.footer__bottom{flex-direction:column;text-align:center;gap:14px}
.footer__brand p{max-width:100%}
}
/* Products grid - 2 per row on tablet/mobile */
@media (max-width:980px){.products{grid-template-columns:repeat(2,1fr) !important;gap:14px}}
@media (max-width:380px){.products{grid-template-columns:repeat(2,1fr) !important;gap:10px}}
/* Product cards on mobile - readable typography for 2-col layout */
@media (max-width:780px){
.product{padding:12px}
.product__visual{margin-bottom:12px;border-radius:10px}
.product__name{font-size:16px;margin-bottom:6px;line-height:1.1}
.product__cat{font-size:10px;margin-bottom:6px;letter-spacing:0.14em}
.product__bottom{padding-top:12px}
.product__price b{font-size:18px}
.product__price s{font-size:11px}
.product__add{width:36px;height:36px;border-radius:10px}
.product__badge{font-size:10px;padding:4px 8px;top:10px;left:10px;letter-spacing:0.08em;gap:4px}
}
@media (max-width:380px){
.product{padding:10px}
.product__name{font-size:15px}
.product__price b{font-size:16px}
}
/* Category cards - compact at 2-col mobile */
@media (max-width:560px){
.cat{padding:14px 12px;aspect-ratio:3/4.6}
.cat__name{font-size:22px;margin-top:8px}
.cat__count{font-size:9px;margin-top:4px}
.cat__visual--img{right:-10%;bottom:42px;width:115%}
.cat__cta{font-size:10px;padding-top:10px;letter-spacing:0.1em}
}
@media (max-width:380px){
.cat__name{font-size:18px}
}
/* Hide top marquee text-cropping on tiny screens */
@media (max-width:360px){
.marquee{display:none}
}
/* SVG defs (hidden, used by filters) */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
/* ════════════════════════════════════════════════════════════════
CART DRAWER (kd = keisove drawer)
═══════════════════════════════════════════════════════════════ */
.kd-overlay{position:fixed;inset:0;background:rgba(243,244,241,0.95);z-index:9998;opacity:0;transition:opacity .3s ease;cursor:pointer}
.kd-overlay[hidden]{display:none}
.kd-overlay.kd-open{opacity:1}
.kd{
position:fixed;top:0;right:0;bottom:0;
width:440px;max-width:100vw;
background:var(--n-bg);color:var(--n-ink);
z-index:9999;
display:flex;flex-direction:column;
transform:translateX(100%);
transition:transform .35s cubic-bezier(.2,.8,.2,1);
box-shadow:-30px 0 80px rgba(17,20,27,0.25);
border-left:1px solid var(--n-line);
}
.kd[hidden]{display:none}
.kd.kd-open{transform:translateX(0)}
@media (max-width:480px){.kd{width:100vw}}
.kd__head{
display:flex;justify-content:space-between;align-items:center;
padding:18px 22px;border-bottom:1px solid var(--n-line);
background:var(--n-bg);flex-shrink:0;
}
.kd__title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
.kd__title svg{color:var(--n-accent-text)}
.kd__count{
display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:22px;padding:0 7px;border-radius:11px;
background:var(--n-accent);color:var(--n-ink);
font-family:var(--font-mono);font-size:11px;font-weight:700;
}
.kd__close{
width:36px;height:36px;border-radius:50%;
background:var(--n-surface);color:var(--n-ink);
font-size:24px;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
transition:background .2s, transform .2s;
border:1px solid var(--n-line);
}
.kd__close:hover{background:var(--n-accent);transform:rotate(90deg)}
/* Countdown */
.kd__countdown{
display:flex;align-items:center;gap:8px;
padding:10px 22px;
background:var(--n-field);
border-bottom:1px solid var(--n-line);
font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--n-muted);
flex-shrink:0;
}
.kd__countdown svg{color:var(--n-accent-text)}
.kd__countdown b{color:var(--n-accent-text);font-family:var(--font-display);font-size:14px;letter-spacing:0.02em}
/* Scroll area */
.kd__scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.kd__scroll::-webkit-scrollbar{width:6px}
.kd__scroll::-webkit-scrollbar-thumb{background:rgba(243,244,241,0.16);border-radius:3px}
/* Progress */
.kd__progress{padding:16px 22px 14px;border-bottom:1px solid var(--n-line);flex-shrink:0}
.kd__progress-msg{font-size:13px;color:var(--n-muted);margin-bottom:8px;line-height:1.4}
.kd__progress-msg b{color:var(--n-ink);font-family:var(--font-display);font-size:14px}
.kd__progress-msg .ember{font-family:var(--font-display);font-weight:700;letter-spacing:0.02em}
.kd__progress-bar{
height:6px;background:var(--n-field);border-radius:3px;overflow:hidden;position:relative;
}
.kd__progress-fill{
height:100%;background:var(--n-accent);
border-radius:3px;
transition:width .5s cubic-bezier(.2,.8,.2,1);
box-shadow:0 0 12px rgba(17,20,27,0.35);
min-width:0;
}
/* Items */
.kd__items{padding:8px 0;flex:1}
.kd__item{
display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;
padding:14px 22px;border-bottom:1px solid var(--n-line);
position:relative;
}
.kd__item:last-child{border-bottom:none}
.kd__item-thumb{
width:64px;height:64px;border-radius:10px;overflow:hidden;
background:var(--n-surface);border:1px solid var(--n-line);
}
.kd__item-thumb img{width:100%;height:100%;object-fit:cover}
.kd__item-name{font-family:var(--font-display);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:0.02em;line-height:1.2;margin-bottom:8px}
.kd__item-name a{color:var(--n-ink)}
.kd__item-name a:hover{color:var(--n-accent-text)}
.kd__item-meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kd__qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--n-line);border-radius:8px;overflow:hidden;background:var(--n-surface)}
.kd__qty-btn{
width:28px;height:28px;font-size:16px;line-height:1;color:var(--n-muted);
transition:background .15s, color .15s;
}
.kd__qty-btn:hover{background:var(--n-accent);color:var(--n-ink)}
.kd__qty-n{min-width:28px;text-align:center;font-family:var(--font-mono);font-size:12px;font-weight:600}
.kd__item-price{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:0.02em}
.kd__item-remove{
position:absolute;top:8px;right:14px;
width:22px;height:22px;border-radius:50%;
color:var(--n-muted);background:transparent;
font-size:18px;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
transition:color .15s, background .15s;
}
.kd__item-remove:hover{color:var(--n-ink);background:rgba(220,38,38,0.85)}
/* Empty state */
.kd__empty{padding:48px 22px;text-align:center;color:var(--n-muted)}
.kd__empty-icon{
width:72px;height:72px;border-radius:50%;
background:var(--n-surface);border:1px solid var(--n-line);
display:inline-flex;align-items:center;justify-content:center;
color:var(--n-accent-text);margin-bottom:18px;
}
.kd__empty h4{font-family:var(--font-display);font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:0.02em;color:var(--n-ink);margin-bottom:6px}
.kd__empty p{font-size:13px;margin-bottom:18px}
/* Progress ticks (1/2/3 кейса) */
.kd__progress-ticks{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}
.kd__tick{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;border-radius:8px;background:var(--n-field);transition:background .25s,color .25s}
.kd__tick b{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--n-muted)}
.kd__tick small{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--n-muted);line-height:1}
.kd__tick.is-on{background:var(--n-accent)}
.kd__tick.is-on b{color:var(--n-accent-text)}
.kd__tick.is-on small{color:var(--n-accent-text)}
/* Item model badge */
.kd__item-model{
display:inline-block;align-self:flex-start;
font-family:var(--font-mono);font-size:10px;font-weight:700;
letter-spacing:0.12em;text-transform:uppercase;
background:var(--n-accent);color:var(--n-accent-text);
padding:3px 8px;border-radius:5px;margin:4px 0 6px;
}
/* Volume booster - "Поръчай втори/трети от този" */
.kd__booster{
margin:0 22px 14px;padding:16px 18px;
background:var(--n-field);
border:1px solid rgba(17,20,27,0.225);border-radius:14px;
}
.kd__booster-head{
font-family:var(--font-body);font-size:13.5px;color:var(--n-ink);line-height:1.4;
margin-bottom:12px;text-align:center;
}
.kd__booster-head b{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:0.02em}
.kd__booster-head .ember{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--n-accent-text);letter-spacing:0.02em;text-transform:uppercase}
.kd__booster-save{
display:inline-block;margin-top:8px;padding:4px 10px;border-radius:6px;
background:rgba(17,20,27,0.1);color:var(--n-ink);
font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
}
.kd__booster-save b{color:var(--n-accent-text);font-family:var(--font-display);font-size:13px;letter-spacing:0.04em}
.kd__addon-save{
display:block;font-style:normal;font-size:10px;color:var(--n-accent-text);
font-family:var(--font-mono);letter-spacing:0.06em;text-transform:uppercase;margin-top:2px;
}
.kd__booster-actions{display:flex;gap:8px}
.kd__booster-btn{
flex:1;padding:11px 12px;border-radius:9px;cursor:pointer;
font-family:var(--font-body);font-weight:700;font-size:11.5px;
text-transform:uppercase;letter-spacing:0.08em;text-align:center;
border:1px solid transparent;transition:transform .15s,background .15s;
text-decoration:none;display:flex;align-items:center;justify-content:center;
}
.kd__booster-btn--ember{background:var(--n-accent);color:var(--n-ink)}
.kd__booster-btn--ember:hover{background:var(--n-accent);transform:translateY(-1px)}
.kd__booster-btn--ghost{background:transparent;color:var(--n-ink);border-color:rgba(17,20,27,0.11)}
.kd__booster-btn--ghost:hover{border-color:var(--n-ink);color:var(--n-accent-text)}
/* Booster phone-model picker (когато се click-не "Поръчай втори от този") */
.kd__booster-modelpicker{
display:flex;flex-direction:column;gap:12px;
margin-top:14px;padding:16px;
background:var(--n-surface);border:1px solid rgba(17,20,27,0.11);border-radius:12px;
animation:kdPickerOpen .25s ease-out;
}
.kd__booster-modelpicker[hidden]{display:none}
.kd__booster-modelpicker-label{
font-family:var(--font-mono);font-size:10px;font-weight:700;
letter-spacing:0.16em;text-transform:uppercase;color:var(--n-muted);
margin-bottom:-4px;
}
.kd__booster-modelpicker select.keisove-phone-model,
.kd__booster-modelpicker-row select.keisove-phone-model{
display:block;width:100%;
padding:12px 14px;
background:var(--n-bg);color:var(--n-ink);
border:1px solid rgba(17,20,27,0.11);border-radius:10px;
font-family:var(--font-body);font-weight:600;font-size:14px;
letter-spacing:0.02em;
-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF5A1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
padding-right:38px;
transition:border-color .18s, box-shadow .18s;
}
.kd__booster-modelpicker select.keisove-phone-model:focus,
.kd__booster-modelpicker-row select.keisove-phone-model:focus{
outline:none;border-color:var(--n-ink);box-shadow:0 0 0 3px rgba(17,20,27,0.22);
}
.kd__booster-modelpicker select.keisove-phone-model.is-error{
border-color:var(--n-ink);box-shadow:0 0 0 3px rgba(17,20,27,0.18);
}
.kd__booster-modelpicker-actions{
display:flex;flex-direction:row-reverse;gap:8px;margin-top:4px;
}
.kd__booster-modelpicker-actions .kd__booster-btn{flex:1 1 0;min-width:0}
/* Upsells */
.kd__upsells{padding:16px 22px;border-top:1px solid var(--n-line);background:var(--n-bg)}
.kd__upsells-head{
display:flex;align-items:center;gap:8px;
font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--n-muted);
margin-bottom:12px;
}
.kd__upsells-head svg{color:var(--n-accent-text)}
.kd__upsells-head span:first-of-type{color:var(--n-ink);font-weight:700}
.kd__urgent-pill{
margin-left:auto;padding:3px 8px;border-radius:99px;
background:var(--n-accent);color:var(--n-ink);font-size:10px;font-weight:700;letter-spacing:0.04em;
animation:kd-pulse 1.8s infinite;
}
@keyframes kd-pulse{
0%,100%{box-shadow:0 0 0 0 rgba(17,20,27,0.35)}
50%{box-shadow:0 0 0 6px rgba(17,20,27,0)}
}
.kd__addon{
display:grid;grid-template-columns:64px 1fr auto 32px;gap:12px;align-items:center;
width:100%;padding:10px 12px;
background:var(--n-surface);border:1px solid var(--n-line);border-radius:14px;
margin-bottom:10px;
text-align:left;cursor:pointer;
transition:border-color .2s, transform .15s, background .2s;
}
.kd__addon:hover{border-color:rgba(17,20,27,0.225);background:var(--n-surface);transform:translateY(-1px)}
.kd__addon:last-child{margin-bottom:0}
.kd__addon-icon{
width:64px;height:64px;border-radius:10px;
background:var(--n-accent);color:var(--n-accent-text);
display:inline-flex;align-items:center;justify-content:center;
overflow:hidden;flex-shrink:0;
}
.kd__addon-icon img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.kd__addon--img .kd__addon-icon{background:var(--n-field);padding:0}
.kd__addon-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.kd__addon-body b{font-family:var(--font-display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;line-height:1.1;color:var(--n-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd__addon-body span{font-size:11px;color:var(--n-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd__addon-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1}
.kd__addon-price b{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--n-accent-text)}
.kd__addon-price s{font-size:10px;color:var(--n-muted)}
.kd__addon-plus{
width:28px;height:28px;border-radius:50%;
background:var(--n-accent);color:var(--n-ink);
font-size:18px;font-weight:300;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
transition:transform .2s;
}
.kd__addon:hover .kd__addon-plus{transform:rotate(90deg) scale(1.1)}
.kd__addon.kd-added .kd__addon-plus{background:#22c55e}
.kd__addon.kd-added .kd__addon-plus::before{content:"✓";font-size:14px}
.kd__addon.kd-added .kd__addon-plus span,
.kd__addon.kd-added .kd__addon-plus{font-size:0}
.kd__addon.kd-added .kd__addon-plus::before{font-size:14px;color:var(--n-ink)}
/* Footer */
.kd__foot{padding:18px 22px;border-top:1px solid var(--n-line);background:var(--n-bg);flex-shrink:0}
.kd__totals{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-size:13px;color:var(--n-muted)}
.kd__totals b{font-family:var(--font-display);font-size:22px;color:var(--n-ink);font-weight:700;letter-spacing:0.01em}
.kd__checkout{width:100%;justify-content:center;font-size:14px;padding:14px 20px}
.kd__guarantee{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:10px;color:var(--n-muted);text-transform:uppercase;letter-spacing:0.12em;font-family:var(--font-mono)}
.kd__guarantee svg{color:var(--n-accent-text)}
/* Disable body scroll when drawer is open */
body.kd-locked{overflow:hidden}
/* Cart drawer - mobile fine-tuning */
@media (max-width:480px){
.kd__head{padding:14px 18px}
.kd__title{font-size:18px;gap:8px}
.kd__countdown{padding:9px 18px;font-size:10px;letter-spacing:0.06em}
.kd__countdown b{font-size:13px}
.kd__progress{padding:14px 18px}
.kd__progress-msg{font-size:12px;line-height:1.35}
.kd__item{padding:12px 18px;grid-template-columns:56px 1fr;gap:10px}
.kd__item-remove{top:6px;right:10px}
.kd__item-thumb{width:56px;height:56px}
.kd__item-name{font-size:13px}
.kd__item-price{font-size:13px}
.kd__upsells{padding:14px 18px}
.kd__addon{grid-template-columns:56px 1fr 30px;gap:10px;padding:9px 11px}
.kd__addon-icon{width:56px;height:56px}
.kd__addon-body b{font-size:12px}
.kd__addon-body span{font-size:10px}
.kd__addon-price{grid-column:2;justify-self:start;flex-direction:row;align-items:baseline;gap:6px;margin-top:2px}
.kd__addon-price b{font-size:12px}
.kd__addon-plus{grid-row:1;grid-column:3}
.kd__foot{padding:16px 18px}
.kd__totals b{font-size:20px}
.kd__checkout{font-size:13px;padding:12px 16px}
}
/* Cart drawer scroll fade hint */
.kd__scroll{position:relative}
.kd__scroll::after{
content:"";position:sticky;bottom:0;left:0;right:0;
height:24px;pointer-events:none;
background:linear-gradient(to top, var(--n-bg), transparent);
margin-top:-24px;display:block;
}
/* ════════════════════════════════════════════════════════════════
HAPPY CUSTOMERS - auto-scroll polaroid carousel
Used on home page + product page.
═══════════════════════════════════════════════════════════════ */
.kh-section{
position:relative;padding:80px 0 60px;
overflow:hidden;
}
.kh-section--dark{
background:var(--n-bg);color:var(--n-ink);
border-top:1px solid var(--n-line);
border-bottom:1px solid var(--n-line);
}
.kh-section--light{
background:var(--cream, var(--n-field));color:var(--n-ink);
}
/* Head row */
.kh-head{position:relative;z-index:2}
.kh-head__row{
display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;
margin-bottom:48px;
}
@media (max-width:900px){.kh-head__row{grid-template-columns:1fr;gap:18px;margin-bottom:30px}}
.kh-title{
font-family:var(--font-display);font-weight:700;
font-size:clamp(36px,4.8vw,68px);line-height:0.95;
letter-spacing:0.02em;text-transform:uppercase;margin:0;
}
.kh-title .ember{color:var(--n-accent-text)}
.kh-meta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.kh-stars{
font-family:var(--font-display);font-size:18px;letter-spacing:0.12em;
color:var(--n-accent-text);
}
.kh-stars b{color:var(--n-ink);margin-left:6px;letter-spacing:0.02em}
.kh-section--light .kh-stars b{color:var(--n-ink)}
.kh-sub{
margin:0;font-family:var(--font-body);font-size:15px;color:var(--n-muted);
line-height:1.6;max-width:480px;
}
.kh-section--light .kh-sub{color:var(--n-ink)}
.kh-sub b{color:var(--n-ink);font-weight:700}
.kh-section--light .kh-sub b{color:var(--n-ink)}
.kh-cta{
display:inline-flex;align-items:center;gap:8px;
padding:14px 22px;border-radius:11px;
background:var(--n-accent);color:var(--n-ink);text-decoration:none;
font-family:var(--font-display);font-weight:700;font-size:13px;
letter-spacing:0.14em;text-transform:uppercase;
transition:transform .15s, background .15s;
}
.kh-cta:hover{background:var(--n-accent);transform:translateY(-2px);color:var(--n-ink)}
/* Marquee - infinite horizontal scroll */
.kh-marquee{
position:relative;width:100%;
/* Fade edges so cards "appear" / "disappear" smoothly */
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
padding:34px 0;
}
.kh-track{
display:flex;gap:28px;width:max-content;
animation:kh-scroll 70s linear infinite;
will-change:transform;
}
.kh-marquee:hover .kh-track{animation-play-state:paused}
@keyframes kh-scroll{
from{transform:translateX(0)}
to {transform:translateX(-50%)} /* loops because we render the strip twice */
}
/* Polaroid card */
.kh-card{
flex:0 0 220px;width:220px;
margin:0;padding:12px 12px 0;
background:#fff;border-radius:8px;
box-shadow:0 18px 40px rgba(17,20,27,0.225), 0 2px 6px rgba(17,20,27,0.125);
transform:rotate(var(--tilt, 0deg));
transition:transform .25s ease, box-shadow .25s ease;
}
.kh-card:hover{
transform:rotate(0deg) scale(1.05);
box-shadow:0 28px 60px rgba(17,20,27,0.25), 0 4px 12px rgba(17,20,27,0.15);
z-index:2;
}
.kh-card__img{
position:relative;
aspect-ratio:9/16;
background:var(--n-bg);border-radius:4px;overflow:hidden;
}
.kh-card__img img{
width:100%;height:100%;object-fit:cover;display:block;
}
.kh-card__cap{
position:relative;
padding:14px 4px 16px;
font-family:var(--font-body);font-size:11px;font-weight:600;
color:var(--n-ink);letter-spacing:0.04em;text-align:center;
display:flex;align-items:center;justify-content:center;gap:8px;
min-height:38px;
}
.kh-card__pin{
display:none; /* removed thumbtack - keeps it clean */
}
.kh-card__sig{flex:1;text-transform:uppercase;letter-spacing:0.14em;font-size:10px;color:var(--n-ink)}
/* Stats strip */
.kh-stats{
display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;
padding-top:30px;border-top:1px solid var(--n-line);
margin-top:8px;
}
.kh-section--light .kh-stats{border-top-color:rgba(17,20,27,0.05)}
@media (max-width:720px){.kh-stats{grid-template-columns:repeat(2,1fr);gap:18px}}
.kh-stat{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.kh-stat b{
font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.2vw,40px);
letter-spacing:0.02em;color:var(--n-accent-text);line-height:1;
}
.kh-stat span{
font-family:var(--font-mono);font-size:11px;font-weight:700;
color:var(--n-muted);letter-spacing:0.16em;text-transform:uppercase;
}
.kh-section--light .kh-stat span{color:var(--n-ink)}
/* Mobile compactness */
@media (max-width:560px){
.kh-section{padding:48px 0 40px}
.kh-card{flex-basis:170px;width:170px;padding:10px 10px 0}
.kh-card__cap{padding:10px 4px 12px;font-size:10px}
.kh-marquee{padding:24px 0}
.kh-track{gap:20px;animation-duration:55s}
}
/* Accessibility - respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
.kh-track{animation:none;transform:translateX(0)}
}
/* ════════════════════════════════════════════════════════════════
BESTSELLERS - Top 6 enhancements (rank badge, real images)
═══════════════════════════════════════════════════════════════ */
.section__eyebrow{
display:inline-block;
font-family:var(--font-mono);font-size:11px;font-weight:700;
color:var(--n-accent-text);letter-spacing:0.18em;text-transform:uppercase;
margin-bottom:14px;
}
/* Rank chip - top-left corner */
.product{position:relative}
.product__rank{
position:absolute;top:12px;left:12px;z-index:3;
font-family:var(--font-display);font-weight:700;font-size:14px;
color:var(--n-ink);background:rgba(243,244,241,0.85);
padding:6px 10px;border-radius:8px;
letter-spacing:0.04em;line-height:1;
border:1.5px solid rgba(17,20,27,0.21);
backdrop-filter:blur(6px);
}
.product__badge--top{background:var(--n-accent) !important;color:var(--n-ink)}
/* Real product photo inside the visual area */
.product__visual--img{
position:relative;display:flex;align-items:center;justify-content:center;
overflow:hidden;background:var(--n-bg);border-radius:14px;
aspect-ratio:1/1;width:100%;
}
.product__visual--img .product__photo{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .35s ease;
}
.product--with-img:hover .product__photo{transform:scale(1.04)}
/* ════════════════════════════════════════════════════════════════
COMING-SOON / BIG UPDATE LANDING
keisove.bg × motographs merger announcement.
═══════════════════════════════════════════════════════════════ */
/* ── HERO ── */
.ks-hero{
position:relative;overflow:hidden;
background:var(--n-bg);
padding:90px 0 0;
min-height:90vh;
display:flex;flex-direction:column;justify-content:space-between;
}
.ks-hero__bg{
position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
radial-gradient(60% 80% at 100% 0%, var(--n-accent), transparent 55%),
radial-gradient(50% 70% at 0% 100%, rgba(17,20,27,0.06), transparent 60%);
}
.ks-hero__noise{
position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0.06;
background-image:url("data:image/svg+xml;utf8,");
}
.ks-hero__inner{position:relative;z-index:2;padding:0 32px 60px;max-width:1280px}
@media (max-width:560px){.ks-hero{padding:60px 0 0}.ks-hero__inner{padding:0 20px 40px}}
.ks-hero__chip{
display:inline-flex;align-items:center;gap:10px;
padding:8px 14px;border-radius:99px;
background:rgba(17,20,27,0.06);
border:1.5px solid rgba(17,20,27,0.35);
font-family:var(--font-mono);font-size:11px;font-weight:700;
letter-spacing:0.2em;text-transform:uppercase;
color:var(--n-accent-text);margin-bottom:32px;
}
.ks-pulse{
width:8px;height:8px;border-radius:50%;background:var(--n-accent);
box-shadow:0 0 0 0 rgba(17,20,27,0.35);
animation:ks-pulse 1.6s infinite;
}
@keyframes ks-pulse{
0%{box-shadow:0 0 0 0 rgba(17,20,27,0.35)}
70%{box-shadow:0 0 0 10px rgba(17,20,27,0)}
100%{box-shadow:0 0 0 0 rgba(17,20,27,0)}
}
.ks-hero__title{
font-family:var(--font-display);font-weight:700;
font-size:clamp(64px,11vw,180px);line-height:0.88;
letter-spacing:-0.02em;text-transform:uppercase;
color:var(--n-ink);margin:0 0 28px;
display:flex;flex-direction:column;
}
.ks-hero__line{display:block;text-shadow:0 0 60px rgba(17,20,27,0.4)}
.ks-hero__line--ember{
color:var(--n-accent-text);
text-shadow:0 0 80px rgba(17,20,27,0.35);
font-style:italic;
}
.ks-hero__line:nth-child(2){padding-left:1em}
.ks-hero__line:nth-child(3){padding-left:2em}
@media (max-width:560px){
.ks-hero__line:nth-child(2){padding-left:0.5em}
.ks-hero__line:nth-child(3){padding-left:1em}
}
.ks-hero__sub{
font-family:var(--font-body);font-size:clamp(15px,1.4vw,18px);
line-height:1.65;color:var(--n-muted);max-width:680px;margin:0 0 36px;
}
.ks-hero__sub b{color:var(--n-ink);font-weight:700}
.ks-hero__cta{display:flex;flex-direction:column;gap:10px;margin-bottom:48px;max-width:560px}
.ks-hero__hint{font-family:var(--font-mono);font-size:10px;color:var(--n-muted);letter-spacing:0.14em;text-transform:uppercase}
/* Notify form */
.ks-notify{
display:flex;align-items:stretch;gap:0;
background:#fff;border-radius:14px;overflow:hidden;
box-shadow:0 12px 40px rgba(17,20,27,0.18);
border:1.5px solid rgba(17,20,27,0.35);
}
.ks-notify input{
flex:1;padding:18px 22px;border:0;outline:0;
font-family:var(--font-body);font-size:15px;font-weight:500;
color:var(--n-ink);background:#fff;
}
.ks-notify input::placeholder{color:var(--n-muted)}
.ks-notify button{
padding:0 24px;border:0;cursor:pointer;
background:var(--n-accent);color:var(--n-ink);
font-family:var(--font-display);font-size:14px;font-weight:700;
letter-spacing:0.14em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:8px;
transition:background .15s, transform .15s;
}
.ks-notify button:hover{background:var(--n-accent)}
.ks-notify button:active{transform:scale(0.97)}
/* Countdown */
.ks-countdown{
display:inline-flex;align-items:flex-end;gap:8px;
padding:18px 22px;border-radius:14px;
background:rgba(243,244,241,0.4);border:1px solid var(--n-line);
backdrop-filter:blur(8px);
}
.ks-countdown__cell{display:flex;flex-direction:column;align-items:center;min-width:64px}
.ks-countdown__cell b{
font-family:var(--font-display);font-weight:700;font-size:48px;
color:var(--n-ink);line-height:1;letter-spacing:0.02em;
font-variant-numeric:tabular-nums;
}
.ks-countdown__cell span{
font-family:var(--font-mono);font-size:9px;font-weight:700;
letter-spacing:0.18em;color:var(--n-muted);text-transform:uppercase;
margin-top:8px;
}
.ks-countdown__sep{
font-family:var(--font-display);font-size:36px;color:var(--n-accent-text);
line-height:1;padding-bottom:18px;animation:ks-blink 1s steps(2) infinite;
}
@keyframes ks-blink{50%{opacity:0.25}}
@media (max-width:560px){
.ks-countdown{padding:14px;gap:4px}
.ks-countdown__cell{min-width:48px}
.ks-countdown__cell b{font-size:32px}
.ks-countdown__sep{font-size:24px;padding-bottom:12px}
}
/* Marquee bottom of hero */
.ks-mq{
position:relative;z-index:2;
background:var(--n-accent);color:var(--n-ink);
padding:14px 0;border-top:1px solid rgba(17,20,27,0.1);
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.ks-mq__track{
display:inline-flex;align-items:center;gap:30px;
white-space:nowrap;width:max-content;
font-family:var(--font-display);font-weight:700;font-size:18px;
letter-spacing:0.14em;text-transform:uppercase;
animation:ks-scroll 35s linear infinite;
}
.ks-mq__dot{opacity:0.55;font-size:10px}
@keyframes ks-scroll{
from{transform:translateX(0)}
to {transform:translateX(-50%)}
}
/* ── BRAND MERGER ── */
.ks-merge{
padding:90px 0 110px;
background:var(--n-bg);
border-top:1px solid var(--n-line);border-bottom:1px solid var(--n-line);
}
.ks-merge__row{
display:grid;grid-template-columns:1fr auto 1fr;gap:36px;
align-items:center;
}
@media (max-width:780px){.ks-merge__row{grid-template-columns:1fr;gap:24px;text-align:center}}
.ks-brand{padding:20px 0}
.ks-brand__tag{
display:inline-block;
font-family:var(--font-mono);font-size:10px;font-weight:700;
color:var(--n-accent-text);letter-spacing:0.2em;text-transform:uppercase;
padding:5px 10px;border:1px solid var(--n-ink);border-radius:99px;
margin-bottom:14px;
}
.ks-brand__name{
font-family:var(--font-display);font-weight:700;
font-size:clamp(40px,5vw,72px);line-height:0.95;
letter-spacing:-0.01em;color:var(--n-ink);
margin:0 0 14px;
}
.ks-brand__name span{color:var(--n-accent-text);font-weight:400;font-style:italic}
.ks-brand p{margin:0;font-family:var(--font-body);font-size:14px;color:var(--n-muted);line-height:1.6;max-width:340px}
.ks-brand--moto{text-align:right}
.ks-brand--moto p{margin-left:auto}
@media (max-width:780px){.ks-brand--moto{text-align:center}.ks-brand--moto p{margin:0 auto}}
.ks-merge__x{display:flex;flex-direction:column;align-items:center;gap:8px}
.ks-merge__circle{
width:80px;height:80px;border-radius:50%;
background:var(--n-accent);color:var(--n-ink);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-size:48px;font-weight:700;
box-shadow:0 0 0 8px rgba(17,20,27,0.12), 0 18px 50px rgba(17,20,27,0.35);
animation:ks-rotate 8s linear infinite;
}
@keyframes ks-rotate{to{transform:rotate(360deg)}}
.ks-merge__txt{
font-family:var(--font-mono);font-size:10px;font-weight:700;
color:var(--n-muted);letter-spacing:0.2em;text-transform:uppercase;
}
.ks-merge__plus{
display:flex;align-items:center;gap:24px;justify-content:center;
margin-top:48px;padding-top:40px;border-top:1px dashed var(--n-line);
}
.ks-merge__eq{
font-family:var(--font-display);font-size:64px;color:var(--n-accent-text);
line-height:1;
}
.ks-merge__plus p{
margin:0;font-family:var(--font-display);font-weight:700;
font-size:clamp(20px,2.2vw,32px);line-height:1.2;color:var(--n-ink);
text-transform:uppercase;letter-spacing:0.04em;
}
/* ── 4 PILLARS ── */
.ks-pillars{padding:100px 0;background:var(--n-bg)}
.ks-eyebrow{
display:inline-block;
font-family:var(--font-mono);font-size:11px;font-weight:700;
color:var(--n-accent-text);letter-spacing:0.2em;text-transform:uppercase;
margin-bottom:18px;
}
.ks-pillars__head{margin-bottom:60px;text-align:center}
.ks-pillars__head h2{
font-family:var(--font-display);font-weight:700;
font-size:clamp(40px,5vw,68px);line-height:0.95;
letter-spacing:0.01em;text-transform:uppercase;color:var(--n-ink);margin:0;
}
.ks-pillars__head h2 .ember{color:var(--n-accent-text);font-style:italic}
.ks-pillars__grid{
display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;
}
@media (max-width:1100px){.ks-pillars__grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:560px){.ks-pillars__grid{grid-template-columns:1fr}}
.ks-pillar{
position:relative;
background:var(--n-surface);border:1px solid var(--n-line);
border-radius:18px;padding:32px 24px 24px;
transition:border-color .2s, transform .2s;
}
.ks-pillar:hover{border-color:var(--n-ink);transform:translateY(-4px)}
.ks-pillar__icon{
width:48px;height:48px;border-radius:12px;
background:var(--n-accent);color:var(--n-accent-text);
display:flex;align-items:center;justify-content:center;
margin-bottom:24px;
}
.ks-pillar__num{
position:absolute;top:24px;right:24px;
font-family:var(--font-display);font-weight:700;font-size:13px;
color:rgba(17,20,27,0.2);letter-spacing:0.06em;
}
.ks-pillar h3{
font-family:var(--font-display);font-weight:700;
font-size:22px;line-height:1.1;letter-spacing:0.02em;
text-transform:uppercase;color:var(--n-ink);margin:0 0 14px;
}
.ks-pillar p{
margin:0 0 18px;font-family:var(--font-body);font-size:14px;
color:var(--n-muted);line-height:1.55;
}
.ks-pillar__link{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-mono);font-size:11px;font-weight:700;
color:var(--n-accent-text);letter-spacing:0.14em;text-transform:uppercase;
text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;
transition:gap .15s;
}
.ks-pillar__link:hover{gap:10px;color:var(--n-accent-text)}
.ks-pillar--ember{
background:var(--n-accent);border-color:var(--n-ink);
}
.ks-pillar--ember .ks-pillar__icon{background:rgba(17,20,27,0.18);color:var(--n-ink)}
.ks-pillar--ember h3,
.ks-pillar--ember p{color:var(--n-ink)}
.ks-pillar--ember .ks-pillar__num{color:rgba(17,20,27,0.4)}
.ks-pillar--ember .ks-pillar__link{color:var(--n-ink)}
/* ── FINAL CTA ── */
.ks-finale{
position:relative;
padding:120px 0;
background:var(--n-accent);color:var(--n-ink);
overflow:hidden;
}
.ks-finale::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:200px 200px;
}
.ks-finale__inner{position:relative;text-align:center;padding:0 32px}
.ks-finale__stamp{
display:inline-flex;align-items:center;justify-content:center;
width:80px;height:80px;border-radius:18px;
background:var(--n-bg);color:var(--n-ink);
font-family:var(--font-display);font-size:32px;font-weight:700;
letter-spacing:0.02em;line-height:1;
margin-bottom:32px;transform:rotate(-3deg);
box-shadow:0 14px 40px rgba(17,20,27,0.125);
}
.ks-finale__title{
font-family:var(--font-display);font-weight:700;
font-size:clamp(48px,7vw,110px);line-height:0.95;
letter-spacing:0.01em;text-transform:uppercase;color:var(--n-ink);
margin:0 0 18px;
}
.ks-finale__title .ember{color:var(--n-ink)}
.ks-finale__sub{
margin:0 auto 36px;max-width:520px;
font-family:var(--font-body);font-size:16px;color:rgba(17,20,27,0.92);line-height:1.6;
}
.ks-finale .ks-notify{max-width:520px;margin:0 auto 24px;border-color:var(--n-line);box-shadow:0 14px 40px rgba(17,20,27,0.125)}
.ks-finale .ks-notify button{background:var(--n-bg);color:var(--n-ink)}
.ks-finale .ks-notify button:hover{background:var(--n-surface)}
.ks-notify--big input{font-size:17px;padding:22px 26px}
.ks-finale__row{
display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;
}
.ks-finale__btn{
display:inline-flex;align-items:center;
padding:13px 22px;border-radius:11px;
background:var(--n-bg);color:var(--n-ink);text-decoration:none;
font-family:var(--font-display);font-weight:700;font-size:13px;
letter-spacing:0.14em;text-transform:uppercase;
transition:transform .15s, background .15s;
}
.ks-finale__btn:hover{background:var(--n-surface);transform:translateY(-2px);color:var(--n-ink)}
.ks-finale__btn--ghost{
background:transparent;border:1.5px solid rgba(17,20,27,0.25);color:var(--n-ink);
}
.ks-finale__btn--ghost:hover{background:rgba(243,244,241,0.08);color:var(--n-ink)}
/* ════════════════════════════════════════════════════════════════
MAINTENANCE STANDALONE - minimal header/footer for coming-soon
═══════════════════════════════════════════════════════════════ */
.ks-maint-body{
background:var(--n-bg);color:var(--n-ink);
font-family:var(--font-body);margin:0;
}
.ks-maint-head{
position:fixed;top:0;left:0;right:0;z-index:80;
background:rgba(243,244,241,0.7);backdrop-filter:blur(10px);
border-bottom:1px solid rgba(17,20,27,0.084);
}
.ks-maint-head__inner{
display:flex;align-items:center;justify-content:space-between;
padding:12px 32px;
}
.ks-maint-logo{
display:inline-flex;align-items:center;gap:8px;text-decoration:none;
font-family:var(--font-display);font-weight:700;font-size:22px;
letter-spacing:0.04em;color:var(--n-ink);line-height:1;
}
.ks-maint-logo__k,.ks-maint-logo__m{padding:6px 10px;border:1.5px solid var(--n-ink);border-radius:8px;color:var(--n-accent-text)}
.ks-maint-logo__x{color:var(--n-ink);opacity:0.5;font-weight:400}
.ks-maint-tag{
font-family:var(--font-mono);font-size:10px;font-weight:700;
letter-spacing:0.16em;text-transform:uppercase;
color:var(--n-muted);
}
@media (max-width:560px){
.ks-maint-head__inner{padding:10px 18px}
.ks-maint-tag{display:none}
}
/* Push the fixed header below the WP admin bar when an admin is browsing */
body.admin-bar .ks-maint-head{top:32px}
@media (max-width:782px){body.admin-bar .ks-maint-head{top:46px}}
.ks-maint{padding-top:60px}
body.admin-bar .ks-maint{padding-top:60px}
.ks-maint-foot{
background:var(--n-bg);border-top:1px solid var(--n-line);
padding:24px 0;text-align:center;
}
.ks-maint-foot small{
font-family:var(--font-mono);font-size:10px;color:var(--n-muted);
letter-spacing:0.16em;text-transform:uppercase;
}
/* Override pillar icons to render properly without SVG */
.ks-maint .ks-pillar__icon{font-size:24px;font-weight:700}
/* ════════════════════════════════════════════════════════════════
B2B LANDING (/b2b/)
═══════════════════════════════════════════════════════════════ */
.ksb2b{color:var(--n-ink);font-family:var(--font-body)}
.ksb2b .ember{color:var(--n-accent-text)}
/* Hero */
.ksb2b-hero{position:relative;overflow:hidden;background:var(--n-bg);padding:80px 0 60px}
.ksb2b-hero__bg{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(60% 80% at 90% 0%,var(--n-accent),transparent 60%);}
.ksb2b-hero__inner{position:relative;z-index:2;padding:0 32px}
.ksb2b-chip{display:inline-flex;padding:8px 14px;border-radius:99px;
background:var(--n-accent);border:1.5px solid rgba(17,20,27,0.35);
font-family:var(--font-mono);font-size:11px;font-weight:700;
color:var(--n-accent-text);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:28px}
.ksb2b-hero__title{font-family:var(--font-display);font-weight:700;
font-size:clamp(40px,5.5vw,86px);line-height:0.95;letter-spacing:0.01em;
text-transform:uppercase;color:var(--n-ink);margin:0 0 22px}
.ksb2b-hero__sub{font-family:var(--font-body);font-size:clamp(15px,1.4vw,18px);
line-height:1.6;color:var(--n-muted);max-width:680px;margin:0 0 36px}
.ksb2b-hero__sub b{color:var(--n-ink);font-weight:700}
.ksb2b-hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:48px}
.ksb2b-hero__meta{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:32px;border-top:1px solid var(--n-line)}
.ksb2b-hero__meta>div{display:flex;flex-direction:column;gap:4px}
.ksb2b-hero__meta b{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--n-accent-text);line-height:1}
.ksb2b-hero__meta span{font-family:var(--font-mono);font-size:10px;font-weight:700;
color:var(--n-muted);letter-spacing:0.16em;text-transform:uppercase}
@media (max-width:720px){.ksb2b-hero__meta{grid-template-columns:repeat(2,1fr);gap:14px}}
/* Buttons */
.ksb2b-btn{display:inline-flex;align-items:center;gap:8px;
padding:14px 22px;border-radius:11px;text-decoration:none;
font-family:var(--font-display);font-weight:700;font-size:13px;
letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;border:1.5px solid transparent;
transition:transform .15s, background .15s, border-color .15s}
.ksb2b-btn--ember{background:var(--n-accent);color:var(--n-ink);border-color:var(--n-ink)}
.ksb2b-btn--ember:hover{background:var(--n-accent);transform:translateY(-2px);color:var(--n-ink)}
.ksb2b-btn--ghost{background:transparent;color:var(--n-ink);border-color:rgba(17,20,27,0.28)}
.ksb2b-btn--ghost:hover{border-color:var(--n-line);color:var(--n-ink)}
.ksb2b-btn--big{padding:18px 28px;font-size:14px}
/* Section headers */
.ksb2b-h{margin-bottom:44px;display:flex;flex-direction:column;gap:14px}
.ksb2b-h--center{text-align:center;align-items:center}
.ksb2b-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:700;
color:var(--n-accent-text);letter-spacing:0.2em;text-transform:uppercase}
.ksb2b-h h2{font-family:var(--font-display);font-weight:700;
font-size:clamp(34px,4.4vw,64px);line-height:0.95;
letter-spacing:0.01em;text-transform:uppercase;color:var(--n-ink);margin:0}
/* WHY (5 cards) */
.ksb2b-why{padding:90px 0;background:var(--n-bg)}
.ksb2b-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1100px){.ksb2b-grid-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ksb2b-grid-5{grid-template-columns:1fr}}
.ksb2b-card{background:var(--n-surface);border:1px solid var(--n-line);border-radius:14px;
padding:24px 20px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s}
.ksb2b-card:hover{border-color:var(--n-ink);transform:translateY(-3px)}
.ksb2b-card__num{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--n-accent-text);letter-spacing:0.06em}
.ksb2b-card h3{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.2;
text-transform:uppercase;letter-spacing:0.02em;color:var(--n-ink);margin:0}
.ksb2b-card p{margin:0;font-family:var(--font-body);font-size:13px;color:var(--n-muted);line-height:1.55}
/* CALCULATOR */
.ksb2b-calc{padding:90px 0;background:var(--n-bg);border-top:1px solid var(--n-line)}
.ksb2b-calc__wrap{max-width:980px;margin:0 auto}
.ksb2b-calc__card{background:var(--cream,var(--n-field));border-radius:22px;padding:36px;color:var(--n-ink);
box-shadow:0 30px 80px rgba(17,20,27,0.25);position:relative;overflow:hidden}
.ksb2b-calc__card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;
background-image:linear-gradient(90deg,var(--n-accent) 50%,transparent 50%);background-size:18px 6px;background-repeat:repeat-x}
@media (max-width:560px){.ksb2b-calc__card{padding:24px 18px}}
.ksb2b-calc__label{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;
color:var(--n-ink);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:14px}
.ksb2b-calc__qty-row{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.ksb2b-calc__qty-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;
height:8px;background:#D7CFBE;border-radius:4px;outline:none}
.ksb2b-calc__qty-row input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;width:28px;height:28px;border-radius:50%;
background:var(--n-accent);cursor:pointer;border:3px solid var(--n-line);box-shadow:0 4px 14px rgba(17,20,27,0.35)}
.ksb2b-calc__qty-row input[type=range]::-moz-range-thumb{
width:28px;height:28px;border-radius:50%;
background:var(--n-accent);cursor:pointer;border:3px solid var(--n-line);box-shadow:0 4px 14px rgba(17,20,27,0.35)}
.ksb2b-calc__num{width:120px;height:56px;padding:0 14px;border:2px solid var(--n-line);
border-radius:10px;font-family:var(--font-display);font-weight:700;font-size:24px;
color:var(--n-ink);text-align:center;background:#fff}
.ksb2b-calc__ticks{display:flex;justify-content:space-between;margin-top:8px;
font-family:var(--font-mono);font-size:10px;color:var(--n-ink);letter-spacing:0.1em}
.ksb2b-calc__out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
@media (max-width:720px){.ksb2b-calc__out{grid-template-columns:1fr}}
.ksb2b-calc__cell{background:#fff;border:1.5px solid #D7CFBE;border-radius:14px;padding:18px;text-align:center}
.ksb2b-calc__cell span{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;
color:var(--n-ink);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:8px}
.ksb2b-calc__cell b{display:block;font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--n-ink);line-height:1}
.ksb2b-calc__cell small{display:block;font-family:var(--font-body);font-size:12px;color:var(--n-ink);margin-top:4px}
.ksb2b-calc__cell--total{background:var(--n-accent);border-color:var(--n-ink)}
.ksb2b-calc__cell--total span,
.ksb2b-calc__cell--total small{color:var(--n-ink);opacity:0.92}
.ksb2b-calc__cell--total b{color:var(--n-ink);font-size:36px}
.ksb2b-calc__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px dashed #D7CFBE}
.ksb2b-calc__foot small{flex:1;font-size:11px;color:var(--n-ink);line-height:1.4}
.ksb2b-tiers{width:100%;border-collapse:collapse;margin-top:36px;background:#fff;border-radius:12px;overflow:hidden;color:var(--n-ink)}
.ksb2b-tiers th,.ksb2b-tiers td{padding:14px 18px;text-align:left;font-size:14px;border-bottom:1px solid var(--n-line)}
.ksb2b-tiers thead th{background:var(--n-bg);color:var(--n-ink);font-family:var(--font-display);font-size:11px;
letter-spacing:0.14em;text-transform:uppercase;padding:14px 18px}
.ksb2b-tiers tbody tr:last-child td{border-bottom:0}
.ksb2b-tiers tbody tr:hover{background:#fafafa}
/* FITS */
.ksb2b-fits{padding:90px 0;background:var(--n-bg);border-top:1px solid var(--n-line)}
.ksb2b-fits__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.ksb2b-fits__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ksb2b-fits__grid{grid-template-columns:1fr}}
.ksb2b-fit{padding:24px;background:var(--n-surface);border:1px solid var(--n-line);border-radius:14px;transition:border-color .15s}
.ksb2b-fit:hover{border-color:var(--n-ink)}
.ksb2b-fit h4{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:0.04em;
text-transform:uppercase;color:var(--n-ink);margin:0 0 8px}
.ksb2b-fit p{margin:0;font-family:var(--font-body);font-size:13px;color:var(--n-muted);line-height:1.55}
/* FORM */
.ksb2b-form-sec{padding:90px 0;background:var(--n-bg)}
.ksb2b-form-sec__wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
@media (max-width:900px){.ksb2b-form-sec__wrap{grid-template-columns:1fr;gap:32px}}
.ksb2b-form-sec__left h2{font-family:var(--font-display);font-weight:700;
font-size:clamp(34px,4vw,56px);line-height:0.95;color:var(--n-ink);margin:14px 0 18px;text-transform:uppercase}
.ksb2b-form-sec__left p{color:var(--n-muted);font-size:15px;line-height:1.6;margin-bottom:20px}
.ksb2b-form-sec__list{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:8px}
.ksb2b-form-sec__list li{position:relative;padding-left:24px;color:var(--n-ink);font-size:14px;font-weight:600}
.ksb2b-form-sec__list li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;
background:var(--n-accent);border-radius:4px;}
.ksb2b-form-sec__contact{display:flex;flex-direction:column;gap:2px;padding:18px;background:var(--n-bg);border:1px solid var(--n-line);border-radius:12px}
.ksb2b-form-sec__contact b{font-family:var(--font-display);color:var(--n-ink);font-size:15px;letter-spacing:0.04em}
.ksb2b-form-sec__contact small{color:var(--n-muted);font-size:11px}
.ksb2b-form-sec__contact a{color:var(--n-accent-text);text-decoration:none;font-weight:700;font-family:var(--font-mono);font-size:13px;margin:6px 0}
.ksb2b-form{background:var(--n-surface);border:1px solid var(--n-line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:14px}
.ksb2b-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.ksb2b-row2{grid-template-columns:1fr}}
.ksb2b-form label{display:flex;flex-direction:column;gap:6px}
.ksb2b-form span{font-family:var(--font-body);font-size:10px;font-weight:700;
color:var(--n-muted);letter-spacing:0.16em;text-transform:uppercase}
.ksb2b-form input,.ksb2b-form select,.ksb2b-form textarea{
-webkit-appearance:none;appearance:none;
background:var(--n-surface);border:1.5px solid var(--n-line);border-radius:10px;
padding:13px 14px;color:var(--n-ink);font-family:var(--font-body);font-size:14px;outline:none;
transition:border-color .15s}
.ksb2b-form input:focus,.ksb2b-form select:focus,.ksb2b-form textarea:focus{border-color:var(--n-ink)}
.ksb2b-form textarea{resize:vertical;min-height:96px;line-height:1.5}
.ksb2b-form__msg{margin:6px 0 0;font-size:13px;font-weight:600;min-height:18px}
/* FINALE */
.ksb2b-finale{padding:90px 0;background:var(--n-accent);color:var(--n-ink);text-align:center}
.ksb2b-finale__wrap{max-width:780px;margin:0 auto;padding:0 32px}
.ksb2b-finale h2{font-family:var(--font-display);font-weight:700;
font-size:clamp(28px,3.6vw,48px);line-height:1.1;letter-spacing:0.02em;
text-transform:uppercase;margin:0 0 18px;color:var(--n-ink)}
.ksb2b-finale .ember{color:var(--n-ink)}
.ksb2b-finale p{font-size:17px;color:var(--n-ink);opacity:0.95;line-height:1.6;margin:0}
/* ════════════════════════════════════════════════════════════════
PARTNERS / WHITE-LABEL (/partners/)
═══════════════════════════════════════════════════════════════ */
.kspartners{color:var(--n-ink);font-family:var(--font-body)}
.kspartners .ember{color:var(--n-accent-text)}
.ksp-hero{position:relative;overflow:hidden;background:var(--n-bg);padding:80px 0 60px}
.ksp-hero__bg{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(50% 80% at 0% 100%,var(--n-accent),transparent 60%)}
.ksp-hero__inner{position:relative;z-index:2;padding:0 32px}
.ksp-chip{display:inline-flex;padding:8px 14px;border-radius:99px;
background:var(--n-accent);border:1.5px solid rgba(17,20,27,0.35);
font-family:var(--font-mono);font-size:11px;font-weight:700;
color:var(--n-accent-text);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:28px}
.ksp-hero__title{font-family:var(--font-display);font-weight:700;
font-size:clamp(40px,5.5vw,86px);line-height:0.95;letter-spacing:0.01em;
text-transform:uppercase;color:var(--n-ink);margin:0 0 22px}
.ksp-hero__sub{font-family:var(--font-body);font-size:clamp(15px,1.4vw,18px);
line-height:1.6;color:var(--n-muted);max-width:680px;margin:0 0 36px}
.ksp-hero__sub b{color:var(--n-ink);font-weight:700}
.ksp-hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:48px}
.ksp-hero__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:32px;border-top:1px solid var(--n-line);max-width:520px}
.ksp-hero__meta>div{display:flex;flex-direction:column;gap:4px}
.ksp-hero__meta b{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--n-accent-text);line-height:1}
.ksp-hero__meta span{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--n-muted);letter-spacing:0.16em;text-transform:uppercase}
.ksp-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:11px;text-decoration:none;
font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;border:1.5px solid transparent;
transition:transform .15s,background .15s}
.ksp-btn--ember{background:var(--n-accent);color:var(--n-ink);border-color:var(--n-ink)}
.ksp-btn--ember:hover{background:var(--n-accent);transform:translateY(-2px);color:var(--n-ink)}
.ksp-btn--ghost{background:transparent;color:var(--n-ink);border-color:rgba(17,20,27,0.28)}
.ksp-btn--ghost:hover{border-color:var(--n-line);color:var(--n-ink)}
.ksp-btn--ink{background:var(--n-bg);color:var(--n-ink);border-color:var(--n-line)}
.ksp-btn--ink:hover{background:var(--n-surface);color:var(--n-ink)}
.ksp-btn--big{padding:16px 26px;font-size:14px;width:100%;justify-content:center}
.ksp-h{margin-bottom:48px;display:flex;flex-direction:column;gap:14px}
.ksp-h--center{text-align:center;align-items:center}
.ksp-h p{font-size:15px;color:var(--n-muted);max-width:560px;margin:0 auto;line-height:1.6}
.ksp-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--n-accent-text);letter-spacing:0.2em;text-transform:uppercase}
.ksp-h h2{font-family:var(--font-display);font-weight:700;
font-size:clamp(34px,4.4vw,64px);line-height:0.95;color:var(--n-ink);margin:0;text-transform:uppercase}
/* HOW */
.ksp-how{padding:90px 0;background:var(--n-bg)}
.ksp-how__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1024px){.ksp-how__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ksp-how__grid{grid-template-columns:1fr}}
.ksp-step{background:var(--n-surface);border:1px solid var(--n-line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px}
.ksp-step__num{font-family:var(--font-display);font-weight:700;font-size:48px;color:rgba(17,20,27,0.4);line-height:1}
.ksp-step h3{font-family:var(--font-display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:0.04em;color:var(--n-ink);margin:0}
.ksp-step p{margin:0;font-size:13px;color:var(--n-muted);line-height:1.55}
/* PLANS */
.ksp-plans{padding:100px 0;background:var(--n-bg);border-top:1px solid var(--n-line)}
.ksp-plans__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media (max-width:980px){.ksp-plans__grid{grid-template-columns:1fr}}
.ksp-plan{position:relative;background:var(--n-surface);border:1.5px solid var(--n-line);border-radius:18px;
padding:32px;display:flex;flex-direction:column;gap:14px;transition:transform .2s,border-color .2s}
.ksp-plan:hover{transform:translateY(-4px)}
.ksp-plan--featured{border-color:var(--n-ink);background:linear-gradient(180deg,var(--n-accent),transparent 40%),var(--n-surface);
transform:scale(1.03)}
.ksp-plan__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
background:var(--n-accent);color:var(--n-ink);font-family:var(--font-mono);font-size:10px;
font-weight:800;letter-spacing:0.18em;text-transform:uppercase;padding:5px 11px;border-radius:99px}
.ksp-plan__name{font-family:var(--font-display);font-weight:700;font-size:28px;
letter-spacing:0.04em;text-transform:uppercase;color:var(--n-ink);margin:0;line-height:1}
.ksp-plan__tagline{font-family:var(--font-mono);font-size:11px;color:var(--n-muted);
letter-spacing:0.16em;text-transform:uppercase;margin:0}
.ksp-plan__price{display:flex;align-items:baseline;gap:6px;margin:8px 0;padding:14px 0;border-top:1px solid var(--n-line);border-bottom:1px solid var(--n-line)}
.ksp-plan__price b{font-family:var(--font-display);font-size:64px;color:var(--n-accent-text);font-weight:700;line-height:1}
.ksp-plan__price span{font-family:var(--font-body);font-size:14px;color:var(--n-muted);font-weight:700}
.ksp-plan__quota{font-family:var(--font-body);font-size:13px;color:var(--n-ink);font-weight:600}
.ksp-plan__quota b{color:var(--n-accent-text);font-weight:700}
.ksp-plan__features{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.ksp-plan__features li{position:relative;padding-left:24px;color:var(--n-muted);font-size:13px;line-height:1.5}
.ksp-plan__features li::before{content:"✓";position:absolute;left:0;top:0;color:var(--n-accent-text);font-weight:700;font-size:14px}
.ksp-plan__best{font-family:var(--font-body);font-size:11px;color:var(--n-muted);line-height:1.5;padding:10px 0;border-top:1px dashed var(--n-line)}
.ksp-plans__note{text-align:center;color:var(--n-muted);font-size:12px;margin:36px auto 0;max-width:600px}
.ksp-plans__note b{color:var(--n-ink)}
/* WAITLIST */
.ksp-waitlist{padding:100px 0;background:var(--n-bg)}
.ksp-waitlist__wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
@media (max-width:900px){.ksp-waitlist__wrap{grid-template-columns:1fr;gap:32px}}
.ksp-waitlist__left h2{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4vw,56px);line-height:0.95;color:var(--n-ink);margin:14px 0 18px;text-transform:uppercase}
.ksp-waitlist__left p{color:var(--n-muted);font-size:15px;line-height:1.6;margin-bottom:20px}
.ksp-waitlist__bonuses{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ksp-waitlist__bonuses li{position:relative;padding-left:30px;color:var(--n-ink);font-size:14px;line-height:1.5}
.ksp-waitlist__bonuses li::before{content:"+";position:absolute;left:0;top:0;width:20px;height:20px;
background:var(--n-accent);color:var(--n-ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.ksp-form{background:var(--n-surface);border:1.5px solid var(--n-ink);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:14px}
.ksp-form h3{font-family:var(--font-display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:0.06em;color:var(--n-ink);margin:0}
.ksp-form label{display:flex;flex-direction:column;gap:6px}
.ksp-form span{font-family:var(--font-body);font-size:10px;font-weight:700;color:var(--n-muted);letter-spacing:0.16em;text-transform:uppercase}
.ksp-form input,.ksp-form select{
-webkit-appearance:none;appearance:none;
background:var(--n-surface);border:1.5px solid var(--n-line);border-radius:10px;
padding:13px 14px;color:var(--n-ink);font-family:var(--font-body);font-size:14px;outline:none;
transition:border-color .15s}
.ksp-form input:focus,.ksp-form select:focus{border-color:var(--n-ink)}
.ksp-form__msg{margin:6px 0 0;font-size:13px;font-weight:600;min-height:18px}
/* FAQ */
.ksp-faq{padding:100px 0;background:var(--n-bg);border-top:1px solid var(--n-line)}
.ksp-faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.ksp-faq__item{background:var(--n-surface);border:1px solid var(--n-line);border-radius:12px;overflow:hidden}
.ksp-faq__item summary{padding:18px 22px;cursor:pointer;font-family:var(--font-display);font-weight:700;
font-size:16px;letter-spacing:0.03em;text-transform:uppercase;color:var(--n-ink);list-style:none;display:flex;align-items:center;gap:12px}
.ksp-faq__item summary::-webkit-details-marker{display:none}
.ksp-faq__item summary::before{content:"+";color:var(--n-accent-text);font-size:24px;font-weight:300;line-height:1;transition:transform .15s}
.ksp-faq__item[open] summary::before{transform:rotate(45deg)}
.ksp-faq__item p{margin:0;padding:0 22px 18px;color:var(--n-muted);font-size:14px;line-height:1.6}
/* ════════════════════════════════════════════════════════════════
HOMEPAGE B2B TEASER
═══════════════════════════════════════════════════════════════ */
.ksb2b-teaser{padding:60px 0;background:var(--n-accent)}
.ksb2b-teaser__inner{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
@media (max-width:780px){.ksb2b-teaser__inner{grid-template-columns:1fr;text-align:center;gap:20px}}
.ksb2b-teaser__icon{width:80px;height:80px;border-radius:18px;background:var(--n-bg);
display:flex;align-items:center;justify-content:center;color:var(--n-accent-text);font-size:48px;font-weight:700;font-family:var(--font-display)}
.ksb2b-teaser__body h3{font-family:var(--font-display);font-weight:700;
font-size:clamp(24px,3vw,38px);letter-spacing:0.02em;text-transform:uppercase;color:var(--n-ink);margin:0 0 6px;line-height:1.1}
.ksb2b-teaser__body p{margin:0;font-family:var(--font-body);font-size:15px;color:var(--n-ink);opacity:0.92;line-height:1.5}
.ksb2b-teaser__body p b{color:var(--n-ink);font-weight:700;background:#fff;padding:2px 8px;border-radius:4px}
.ksb2b-teaser__cta{display:inline-flex;align-items:center;gap:8px;padding:16px 26px;border-radius:12px;
background:var(--n-bg);color:var(--n-ink);text-decoration:none;font-family:var(--font-display);font-weight:700;
font-size:13px;letter-spacing:0.16em;text-transform:uppercase;transition:transform .15s,background .15s;white-space:nowrap}
.ksb2b-teaser__cta:hover{background:var(--n-surface);transform:translateY(-2px);color:var(--n-ink)}
/* =========================================================================
* Cart drawer addon - inline phone-model picker (no modal)
* Expands directly under the upsell button inside the drawer.
* ========================================================================= */
.kd__addon-row{margin-bottom:10px}
.kd__addon-row:last-child{margin-bottom:0}
.kd__addon-row .kd__addon{margin-bottom:0}
.kd__addon--picking{
border-color:var(--n-ink) !important;
border-bottom-left-radius:0 !important;
border-bottom-right-radius:0 !important;
border-bottom-color:transparent !important;
}
.kd__addon--picking .kd__addon-plus{transform:rotate(45deg);background:var(--ash-2)}
.kd__addon-picker{
background:var(--n-field);
border:1px solid var(--n-ink);
border-top:0;
border-bottom-left-radius:14px;
border-bottom-right-radius:14px;
padding:14px 14px 14px;
display:flex;flex-direction:column;gap:12px;
margin-top:-1px;
animation:kdPickerOpen .25s ease-out;
}
.kd__addon-picker[hidden]{display:none}
.kd__addon-picker-label{
font-family:var(--font-mono);font-size:10px;font-weight:700;
letter-spacing:0.16em;text-transform:uppercase;color:var(--n-muted);
}
.kd__addon-picker-select select.keisove-phone-model{
background:var(--n-bg);color:var(--n-ink);
border:1px solid rgba(17,20,27,0.11);border-radius:10px;
padding:11px 14px;width:100%;
font-family:var(--font-body);font-size:14px;font-weight:500;
letter-spacing:0.02em;outline:none;
transition:border-color .2s, box-shadow .2s;
}
.kd__addon-picker-select select.keisove-phone-model:focus{
border-color:var(--n-ink);box-shadow:0 0 0 3px rgba(17,20,27,0.18);
}
.kd__addon-picker-select select.keisove-phone-model.is-error{
border-color:var(--n-ink);box-shadow:0 0 0 3px rgba(17,20,27,0.18);
}
.kd__addon-picker-actions{
display:flex !important;flex-direction:row-reverse !important;flex-wrap:nowrap !important;
gap:8px !important;align-items:stretch;width:100%;
}
.kd__addon-picker-actions .kd__addon-picker-btn{
flex:1 1 0 !important;min-width:0 !important;
height:42px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
}
.kd__addon-picker-btn{
padding:11px 16px;border:0;border-radius:9px;cursor:pointer;
font-family:var(--font-mono);font-size:11px;font-weight:700;
letter-spacing:0.14em;text-transform:uppercase;
transition:background .2s, color .2s, border-color .2s;
}
.kd__addon-picker-btn--cancel{
background:transparent;color:var(--n-muted);
border:1px solid rgba(17,20,27,0.11);
}
.kd__addon-picker-btn--cancel:hover{color:var(--n-ink);border-color:rgba(17,20,27,0.11)}
.kd__addon-picker-btn--confirm{
background:var(--n-accent);color:var(--n-ink);
}
.kd__addon-picker-btn--confirm:hover{filter:brightness(1.05)}
.kd__addon-picker-btn--confirm:disabled{opacity:0.7;cursor:wait}
/* ── CF inputs в cart drawer picker (booster + addon) ─────────────
Force-override на WC + browser defaults. На iOS Safari input-ите
получават системни borders/padding ако не reset-нем appearance. */
.kd__picker-cf{display:flex !important;flex-direction:column !important;gap:12px !important;margin-top:10px !important}
.kd__picker-cf-row{
display:flex !important;flex-direction:column !important;
align-items:stretch !important;gap:6px !important;
width:100% !important;
}
.kd__picker-cf-label{
display:block !important;width:100% !important;
font-family:var(--font-mono) !important;font-size:10px !important;font-weight:700 !important;
letter-spacing:0.14em !important;text-transform:uppercase !important;color:var(--n-muted) !important;
margin:0 !important;padding:0 !important;line-height:1.2 !important;
}
.kd__picker-cf-req{color:var(--n-accent-text) !important;margin-left:2px !important;font-weight:800 !important}
.kd__picker-cf-input,
.kd__booster-modelpicker .kd__picker-cf-input,
input.kd__picker-cf-input[type="text"]{
display:block !important;width:100% !important;
padding:12px 14px !important;margin:0 !important;
background:var(--n-bg) !important;
border:1px solid rgba(17,20,27,0.11) !important;
border-radius:10px !important;
color:var(--n-ink) !important;
font-family:var(--font-body) !important;font-weight:700 !important;font-size:15px !important;
letter-spacing:0.04em !important;
text-transform:uppercase !important;
box-sizing:border-box !important;
box-shadow:none !important;
outline:none !important;
-webkit-appearance:none !important;
-moz-appearance:none !important;
appearance:none !important;
transition:border-color .18s, box-shadow .18s, background .18s !important;
}
.kd__picker-cf-input::placeholder{
color:var(--n-muted) !important;text-transform:uppercase !important;
letter-spacing:0.04em !important;font-size:13px !important;font-weight:500 !important;
}
.kd__picker-cf-input:focus,
.kd__picker-cf-input:focus-visible{
outline:none !important;
border-color:var(--n-ink) !important;
box-shadow:0 0 0 3px rgba(17,20,27,0.22) !important;
background:var(--n-field) !important;
}
.kd__picker-cf-input.is-error,
.kd__picker-cf-row.is-error .kd__picker-cf-file-cta{
border-color:var(--n-ink) !important;background:var(--n-accent) !important;
box-shadow:0 0 0 3px rgba(17,20,27,0.18) !important;
}
.kd__picker-cf-file{display:block !important;cursor:pointer;position:relative;margin:0 !important}
.kd__picker-cf-file input[type=file]{
position:absolute !important;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
white-space:nowrap;border:0;
}
.kd__picker-cf-file-cta{
display:flex !important;align-items:center;gap:10px;
width:100%;padding:12px 14px;box-sizing:border-box;
background:var(--n-bg) !important;
border:1.5px dashed rgba(17,20,27,0.35) !important;border-radius:10px !important;
color:var(--n-ink) !important;
font-family:var(--font-mono) !important;font-weight:700 !important;font-size:11px !important;
letter-spacing:0.14em !important;text-transform:uppercase !important;
transition:background .18s, border-color .18s !important;
}
.kd__picker-cf-file-cta svg{color:var(--n-accent-text);flex-shrink:0}
.kd__picker-cf-file:hover .kd__picker-cf-file-cta{background:var(--n-accent);border-color:var(--n-ink)}
.kd__picker-cf-row[data-kd-cf-has-file] .kd__picker-cf-file-cta{background:var(--n-accent);border-style:solid;border-color:var(--n-ink);color:var(--n-ink)}
.kd__picker-cf-row[data-kd-cf-has-file] .kd__picker-cf-file-cta svg{color:var(--n-ink)}
.kd__picker-cf-err{font-family:var(--font-body);color:var(--n-accent-text);font-size:11px;font-weight:600;margin-top:1px}
@keyframes kdPickerOpen{
from{opacity:0;transform:translateY(-4px)}
to{opacity:1;transform:translateY(0)}
}
/* =========================================================================
* Cart drawer custom design meta lines + thumb override
* ========================================================================= */
.kd__item-custom{
font-size:11px;color:var(--n-muted);
margin:2px 0;line-height:1.35;
display:flex;gap:6px;flex-wrap:wrap;
}
.kd__item-custom b{font-weight:700;color:var(--n-muted);letter-spacing:0.02em}
.kd__item-custom span{color:var(--n-muted);font-weight:500}
.kd__item-thumb .ksd-cart-thumb{
width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;
background:var(--n-field);
}
/* Разбивка на тоталите в количката (отстъпка, доставка, общо, цена на кейс). */
.kd__totals--save b{color:var(--n-accent-text)}
.kd__totals--ship b{font-size:12px;letter-spacing:0.06em;text-transform:uppercase}
.kd__totals--grand{
margin-top:4px;padding-top:10px;border-top:1px solid rgba(17,20,27,0.11);
}
.kd__totals--grand span{font-weight:700;color:var(--n-ink)}
.kd__totals--grand b{font-family:var(--font-display);font-size:22px;letter-spacing:0.01em;color:var(--n-ink)}
.kd__percase{
margin-top:-4px;text-align:right;
font-family:var(--font-body);font-size:11px;color:var(--n-muted);
}
/* Цена на ред в количката: стара зачеркната + нова + спестено. */
.kd__item-price{
display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.2;
}
.kd__item-price-was{
font-family:var(--font-body);font-weight:500;font-size:12px;
color:var(--n-muted);text-decoration:line-through;text-decoration-thickness:1px;
}
.kd__item-price-now{
font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:0.02em;
}
.kd__item-price-unit,
.kd__item-price-save{
font-family:var(--font-body);font-weight:500;font-size:10px;letter-spacing:0.01em;
color:var(--n-muted);
}
.kd__item-price-save{color:var(--n-accent-text)}
/* ── Оферта „3 за 2 / 5 за 3" (KEISOVE_OFFER=free), класическа тема ── */
body:not(.theme-nomer) .product__badge--offer{background:var(--n-accent);color:var(--n-ink);font-weight:800}
body:not(.theme-nomer) .ko-chip{display:flex;gap:10px;align-items:center;margin:10px 0 14px;padding:12px 14px;border-radius:14px;background:var(--n-accent);border:1px solid rgba(17,20,27,0.225);font-size:14px}
body:not(.theme-nomer) .ko-chip__tag{flex:none;padding:5px 10px;border-radius:8px;background:var(--n-accent);color:var(--n-ink);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
body:not(.theme-nomer) .ko-chip b *{font:inherit!important;color:inherit!important}
body:not(.theme-nomer) .ko-strip{margin:0 16px 20px;padding:16px 22px;border-radius:18px;background:var(--n-ink,var(--n-surface));color:var(--n-ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
body:not(.theme-nomer) .ko-strip__h{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.6vw,46px);line-height:1}
body:not(.theme-nomer) .ko-strip__h span{color:var(--n-accent,var(--n-accent-text))}
body:not(.theme-nomer) .ko-strip__t{font-size:13.5px;color:rgba(17,20,27,0.8)}
body:not(.theme-nomer) .ko-strip__t *{font:inherit!important;color:inherit!important}
@media (max-width:600px){body:not(.theme-nomer) .ko-strip{margin:0 8px 16px;padding:14px 16px}}
body:not(.theme-nomer) .ko-rows{display:grid;gap:10px;width:100%;max-width:880px}
body:not(.theme-nomer) .ko-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 18px;padding:16px 20px;border-radius:18px;border:1px solid rgba(17,20,27,0.11)}
body:not(.theme-nomer) .ko-row__buy{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,3.2vw,40px);line-height:1}
body:not(.theme-nomer) .ko-row__get{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px;color:var(--n-accent-text)}
body:not(.theme-nomer) .ko-row__sum{font-size:13px;color:var(--n-muted);text-align:right}
body:not(.theme-nomer) .ko-row__sum *{font:inherit!important;color:inherit!important}
body:not(.theme-nomer) .ko-row--max{border-color:var(--n-ink)}
body:not(.theme-nomer) .ko-chip{display:grid!important;gap:8px;padding:0!important;background:none!important;border:0!important}
@media (max-width:600px){body:not(.theme-nomer) .ko-row{grid-template-columns:auto 1fr}body:not(.theme-nomer) .ko-row__sum{grid-column:1/-1;text-align:left}}
body:not(.theme-nomer) .ko-strip{background:var(--n-accent)!important;border:1px solid rgba(17,20,27,0.225)}
body:not(.theme-nomer) .ko-row__sum{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
body:not(.theme-nomer) .ko-row__sum b,body:not(.theme-nomer) .ko-row__sum b *{font-family:var(--font-display)!important;font-size:22px!important;color:inherit!important}
body:not(.theme-nomer) .ko-row__sum small{font-size:12px;opacity:.8}
body:not(.theme-nomer) .ko-row__each{white-space:nowrap;font-size:13px}