/* ===== TurboAvto demo — design system ===== */
:root{
  --bg: #0e1015;
  --bg-alt: #14171f;
  --panel: #191d27;
  --panel-2: #1f2430;
  --border: #2a3040;
  --border-soft: #232838;
  --text: #eef0f4;
  --text-dim: #a6acbb;
  --text-mute: #6d7385;
  --accent: #ff5a1f;
  --accent-2: #ff3d63;
  --accent-soft: rgba(255,90,31,.14);
  --ok: #3ddc97;
  --ok-soft: rgba(61,220,151,.14);
  --warn: #ffb020;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 20px 50px -20px rgba(0,0,0,.6);
  --maxw: 1240px;
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ff-head: 'Manrope', 'Inter', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(255,90,31,.10), transparent 60%),
    radial-gradient(900px 500px at 5% 0%, rgba(255,61,99,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,h4{font-family:var(--ff-head); margin:0; letter-spacing:-0.02em; font-weight:800;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
input,select,button{outline:none;}
img{max-width:100%; display:block;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.ic{width:20px; height:20px; flex:none;}
.ic-sm{width:16px; height:16px;}

.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}
.eyebrow--light{color:#ffd9c4;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:11px; border:1px solid transparent;
  font-weight:700; font-size:14.5px; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn-accent{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; box-shadow:0 10px 24px -10px rgba(255,61,99,.55);
}
.btn-accent:hover{transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(255,61,99,.7);}
.btn-light{background:#fff; color:#12141a;}
.btn-light:hover{transform:translateY(-1px);}
.btn-outline{background:transparent; border-color:var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none !important;}

.sel, .txt{
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:11px 14px; font-size:14px; font-family:inherit;
}
.sel:focus, .txt:focus{border-color:var(--accent);}
.sel:disabled{opacity:.45;}

/* ===== reveal-on-scroll ===== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* ============ HEADER ============ */
.site-header{position:sticky; top:0; z-index:60; background:rgba(14,16,21,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--border-soft);}
.topbar{background:#0a0b0f; border-bottom:1px solid var(--border-soft); font-size:12.5px; color:var(--text-dim);}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:36px; gap:16px;}
.topbar-left{display:flex; gap:20px; align-items:center;}
.topbar-item{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.topbar-right a:hover{color:var(--accent);}

.header-main{display:flex; align-items:center; gap:22px; padding:14px 24px; min-height:64px;}
.burger{display:none; background:none; border:none; color:var(--text); padding:6px;}

.logo{display:flex; align-items:center; gap:10px; flex:none;}
.logo-mark{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
  box-shadow:0 8px 20px -8px rgba(255,61,99,.6);
}
.logo-text{font-family:var(--ff-head); font-weight:800; font-size:20px; letter-spacing:-0.02em;}
.logo-text em{font-style:normal; color:var(--accent);}

.search-block{flex:1; max-width:640px; margin:0 auto;}
.search-tabs{display:flex; gap:4px; margin-bottom:8px;}
.search-tab{
  display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--text-mute);
  font-size:13px; font-weight:600; padding:4px 10px 8px; border-bottom:2px solid transparent;
}
.search-tab.is-active{color:var(--text); border-color:var(--accent);}
.search-panes{position:relative;}
.search-pane{display:none; gap:8px;}
.search-pane.is-active{display:flex;}
.search-pane .sel{flex:1; min-width:0;}
.search-pane .txt{flex:1; min-width:0;}
.search-submit{flex:none;}
.search-submit span{display:inline;}

.header-actions{display:flex; align-items:center; gap:6px; flex:none;}
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:10px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease;
}
.icon-btn:hover{border-color:var(--accent); color:var(--accent);}
.cart-badge{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 4px; border-radius:999px;
  background:var(--accent-2); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg);
}

.cat-nav{border-top:1px solid var(--border-soft); background:var(--bg-alt);}
.cat-nav-inner{display:flex; gap:6px; overflow-x:auto; padding:9px 24px; scrollbar-width:none;}
.cat-nav-inner::-webkit-scrollbar{display:none;}
.cat-link{
  display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-dim);
  padding:7px 12px; border-radius:8px; white-space:nowrap; flex:none; transition:background .15s ease, color .15s ease;
}
.cat-link:hover{background:var(--panel); color:var(--text);}

.mobile-search{position:fixed; inset:0; z-index:80; background:rgba(10,11,15,.92); display:none; padding:16px;}
.mobile-search.is-open{display:block;}
.mobile-search-inner{display:flex; gap:10px; align-items:center; margin-top:8px;}
.mobile-search-inner .txt{flex:1;}

/* ============ HERO ============ */
.hero{position:relative; padding:64px 0 40px; overflow:hidden;}
.hero-glow{position:absolute; inset:-20% -10% auto -10%; height:420px; background:radial-gradient(ellipse at 30% 0%, rgba(255,90,31,.18), transparent 60%); pointer-events:none;}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; position:relative;}
.hero-copy h1{font-size:clamp(32px, 4.2vw, 50px); line-height:1.08; margin-bottom:18px;}
.accent-text{background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-sub{color:var(--text-dim); font-size:16.5px; max-width:520px; margin-bottom:28px;}
.hero-stats{display:flex; gap:32px; flex-wrap:wrap;}
.hero-stat{display:flex; flex-direction:column;}
.hs-num{font-family:var(--ff-head); font-size:26px; font-weight:800;}
.hs-lbl{font-size:12.5px; color:var(--text-mute);}

.hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}
.car-illustration{width:100%; max-width:440px; filter:drop-shadow(0 25px 40px rgba(255,61,99,.25));}
.float-card{
  position:absolute; display:flex; align-items:center; gap:10px; background:var(--panel);
  border:1px solid var(--border); border-radius:12px; padding:11px 14px; box-shadow:var(--shadow);
  font-size:12.5px; animation:floaty 5s ease-in-out infinite;
}
.float-card svg{color:var(--ok);}
.float-card b{display:block; font-size:13px;}
.float-card span{color:var(--text-mute);}
.float-card--top{top:6%; left:-4%;}
.float-card--bottom{bottom:8%; right:-2%; animation-delay:1.4s;}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}

/* ============ TRUST STRIP ============ */
.trust-strip{border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); background:var(--bg-alt);}
.trust-strip-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:18px 24px;}
.trust-item{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--text-dim);}
.trust-item svg{color:var(--accent);}

/* ============ WHY US ============ */
.why-us{padding:72px 24px;}
.section-head{text-align:center; max-width:560px; margin:0 auto 40px;}
.section-head h2{font-size:clamp(24px,3vw,34px);}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.why-card{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:26px 22px; transition:transform .2s ease, border-color .2s ease;}
.why-card:hover{transform:translateY(-4px); border-color:var(--accent);}
.why-ic{width:44px; height:44px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.why-card h3{font-size:17px; margin-bottom:8px;}
.why-card p{color:var(--text-dim); font-size:13.8px;}

/* ============ CATALOG ============ */
.catalog{padding:20px 24px 80px;}
.catalog-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap;}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  background:var(--panel); border:1px solid var(--border); color:var(--text-dim); font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:999px; transition:all .15s ease;
}
.chip:hover{border-color:var(--accent); color:var(--text);}
.chip.is-active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}
.sort-sel{flex:none;}

.product-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}

.pcard{
  background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  opacity:0; transform:translateY(14px); animation:cardIn .5s ease forwards;
}
@keyframes cardIn{to{opacity:1; transform:none;}}
.pcard:hover{transform:translateY(-5px); border-color:var(--accent); box-shadow:var(--shadow);}

.pcard-media{
  position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--panel-2), #0f1218);
  color:var(--text-mute);
}
.pcard-media svg{width:46%; height:46%; opacity:.85;}
.pcard-media .pcard-badge{
  position:absolute; top:10px; left:10px; font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px;
  background:var(--accent-2); color:#fff; text-transform:uppercase; letter-spacing:.03em;
}
.pcard-media .pcard-badge.top{background:var(--ok); color:#0b1310;}
.pcard-quick{
  position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:9px; background:rgba(14,16,21,.75);
  border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(6px); transition:all .2s ease;
}
.pcard:hover .pcard-quick{opacity:1; transform:none;}

.pcard-body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.pcard-cat{font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em;}
.pcard-title{font-size:14.5px; font-weight:700; line-height:1.3; cursor:pointer;}
.pcard-title:hover{color:var(--accent);}
.pcard-meta{font-size:12px; color:var(--text-mute); display:flex; gap:10px; flex-wrap:wrap;}
.pcard-compat{font-size:12px; color:var(--text-dim);}
.pcard-rating{display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-mute);}
.pcard-rating svg{width:13px; height:13px; color:var(--warn);}
.pcard-stock{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600;}
.dot{width:7px; height:7px; border-radius:50%; flex:none;}
.dot.ok{background:var(--ok);}
.dot.mid{background:var(--warn);}
.pcard-stock.ok{color:var(--ok);}
.pcard-stock.mid{color:var(--warn);}

.pcard-footer{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px;}
.pcard-price{display:flex; flex-direction:column;}
.price-old{font-size:12px; color:var(--text-mute); text-decoration:line-through;}
.price-now{font-size:18px; font-weight:800; font-family:var(--ff-head);}
.pcard-add{
  width:38px; height:38px; border-radius:10px; border:none; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; transition:all .18s ease; flex:none;
}
.pcard-add:hover{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;}

/* ============ CTA banner ============ */
.cta-banner{margin:20px auto 80px;}
.cta-banner-inner{
  background:linear-gradient(120deg, #1a1010, #1c1420 60%, #14171f);
  border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:44px 40px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-banner-inner::before{content:""; position:absolute; inset:0; background:radial-gradient(500px 260px at 90% 20%, rgba(255,90,31,.22), transparent 60%);}
.cta-banner-inner > div{position:relative; max-width:520px;}
.cta-banner-inner h2{font-size:26px; margin:6px 0 10px;}
.cta-banner-inner p{color:var(--text-dim); font-size:14.5px;}
.cta-banner-inner .btn{position:relative;}

/* ============ FOOTER ============ */
.site-footer{border-top:1px solid var(--border-soft); background:var(--bg-alt); padding-top:52px;}
.footer-main{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px;}
.footer-col{display:flex; flex-direction:column; gap:11px;}
.footer-col h4{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-mute); margin-bottom:4px;}
.footer-col a{font-size:14px; color:var(--text-dim); display:flex; align-items:center; gap:8px;}
.footer-col a:hover{color:var(--accent);}
.footer-brand p{color:var(--text-mute); font-size:13.5px; margin:12px 0 14px;}
.footer-badges{display:flex; gap:10px; flex-wrap:wrap;}
.footer-badges span{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); background:var(--panel); border:1px solid var(--border-soft); padding:6px 10px; border-radius:999px;}
.footer-addr{color:var(--text-mute); font-size:13.5px; line-height:1.6;}
.footer-bottom{border-top:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; padding:18px 24px; font-size:12.5px; color:var(--text-mute); flex-wrap:wrap; gap:10px;}
.pay-icons{display:flex; gap:8px; flex-wrap:wrap;}
.pay-chip{background:var(--panel); border:1px solid var(--border-soft); border-radius:6px; padding:5px 10px; font-size:11.5px; font-weight:700; color:var(--text-dim);}

/* ============ MODAL / DRAWER shared ============ */
.modal-overlay, .drawer-overlay{
  position:fixed; inset:0; background:rgba(6,7,10,.72); backdrop-filter:blur(3px);
  display:flex; z-index:100; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-overlay{align-items:center; justify-content:center; padding:20px;}
.modal-overlay.is-open, .drawer-overlay.is-open{opacity:1; pointer-events:all;}

.modal{
  background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  width:100%; max-width:840px; max-height:88vh; overflow:auto; position:relative;
  transform:translateY(16px) scale(.98); transition:transform .25s ease; box-shadow:var(--shadow);
}
.modal-overlay.is-open .modal{transform:none;}
.modal-close{position:absolute; top:16px; right:16px; z-index:5; width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--bg-alt); color:var(--text); display:flex; align-items:center; justify-content:center;}
.modal-close:hover{border-color:var(--accent); color:var(--accent);}

.product-modal-body{display:grid; grid-template-columns:1fr 1fr;}
.pm-media{background:linear-gradient(150deg, var(--panel-2), #0f1218); display:flex; align-items:center; justify-content:center; padding:40px; min-height:300px;}
.pm-media svg{width:56%; height:56%; color:var(--text-mute);}
.pm-info{padding:32px; display:flex; flex-direction:column; gap:14px;}
.pm-cat{font-size:11.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em;}
.pm-title{font-size:22px;}
.pm-meta-row{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--text-dim);}
.pm-price-row{display:flex; align-items:baseline; gap:10px;}
.pm-price{font-size:26px; font-weight:800; font-family:var(--ff-head);}
.pm-price-old{font-size:14px; color:var(--text-mute); text-decoration:line-through;}
.pm-stock{font-size:13px; font-weight:700;}

.pm-tabs{display:flex; gap:4px; border-bottom:1px solid var(--border-soft); margin-top:6px;}
.pm-tab{background:none; border:none; color:var(--text-mute); font-weight:700; font-size:13px; padding:8px 4px; border-bottom:2px solid transparent;}
.pm-tab.is-active{color:var(--text); border-color:var(--accent);}
.pm-tabpanes .pm-pane{display:none; font-size:13.5px; color:var(--text-dim); padding-top:12px; line-height:1.7;}
.pm-tabpanes .pm-pane.is-active{display:block;}
.pm-spec-table{width:100%; border-collapse:collapse;}
.pm-spec-table td{padding:6px 0; border-bottom:1px dashed var(--border-soft);}
.pm-spec-table td:first-child{color:var(--text-mute); width:46%;}

.pm-qty{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:6px;}
.qty-stepper{display:flex; align-items:center; border:1px solid var(--border); border-radius:10px; overflow:hidden;}
.qty-stepper button{width:34px; height:38px; background:var(--bg-alt); color:var(--text); border:none; display:flex; align-items:center; justify-content:center;}
.qty-stepper button:hover{color:var(--accent);}
.qty-stepper span{width:36px; text-align:center; font-weight:700; font-size:14px;}
.pm-actions{display:flex; gap:10px;}

/* cart drawer */
.drawer-overlay{justify-content:flex-end;}
.cart-drawer{
  width:420px; max-width:100%; height:100%; background:var(--panel); border-left:1px solid var(--border-soft);
  display:flex; flex-direction:column; transform:translateX(24px); transition:transform .25s ease;
}
.drawer-overlay.is-open .cart-drawer{transform:none;}
.cart-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border-soft);}
.cart-drawer-head h3{display:flex; align-items:center; gap:9px; font-size:17px;}
.cart-items{flex:1; overflow:auto; padding:10px 22px;}
.cart-empty{color:var(--text-mute); text-align:center; padding:60px 10px; font-size:14px;}

.cart-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border-soft);}
.ci-media{width:60px; height:60px; border-radius:9px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; color:var(--text-mute); flex:none;}
.ci-media svg{width:55%; height:55%;}
.ci-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px;}
.ci-title{font-size:13.5px; font-weight:700; line-height:1.3;}
.ci-brand{font-size:11.5px; color:var(--text-mute);}
.ci-row{display:flex; align-items:center; justify-content:space-between; margin-top:2px;}
.ci-price{font-weight:800; font-size:14px;}
.ci-remove{background:none; border:none; color:var(--text-mute); font-size:12px; text-decoration:underline;}
.ci-remove:hover{color:var(--accent-2);}
.ci-qty{display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.ci-qty button{width:26px; height:26px; background:var(--bg-alt); border:none; color:var(--text); display:flex; align-items:center; justify-content:center;}
.ci-qty button svg{width:12px; height:12px;}
.ci-qty span{width:24px; text-align:center; font-size:12.5px; font-weight:700;}

.cart-footer{padding:18px 22px 22px; border-top:1px solid var(--border-soft);}
.cart-row{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:8px;}
.cart-row--muted{color:var(--text-mute); font-size:12px;}
.cart-row b{font-size:17px; font-family:var(--ff-head);}

/* toast */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 16px); background:var(--panel);
  border:1px solid var(--border); color:var(--text); padding:13px 20px; border-radius:11px; font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:10px; box-shadow:var(--shadow); z-index:200; opacity:0; pointer-events:none;
  transition:all .25s ease;
}
.toast svg{width:18px; height:18px; color:var(--ok);}
.toast.is-open{opacity:1; transform:translate(-50%, 0);}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .hero-inner{grid-template-columns:1fr; text-align:center;}
  .hero-copy{order:1;}
  .hero-copy p{margin-left:auto; margin-right:auto;}
  .hero-stats{justify-content:center;}
  .hero-visual{order:2; max-width:420px; margin:0 auto;}
}
@media (max-width: 880px){
  .search-block{display:none;}
  .burger{display:flex;}
  .footer-main{grid-template-columns:1fr 1fr;}
}
@media (max-width: 720px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .topbar-item--hide-sm{display:none;}
  .product-modal-body{grid-template-columns:1fr;}
  .pm-media{min-height:220px; padding:24px;}
  .cta-banner-inner{padding:30px 22px;}
}
@media (max-width: 520px){
  .product-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .header-main{padding:12px 16px; gap:12px;}
  .wrap{padding:0 16px;}
  .footer-main{grid-template-columns:1fr; padding:0 16px 30px;}
  .footer-bottom{padding:16px;}
  .why-grid{grid-template-columns:1fr;}
  .cart-drawer{width:100%;}
  .hero{padding:40px 0 28px;}
  .trust-strip-inner{justify-content:flex-start;}
}