:root{
    --bg:#0b0f14;
    --card:#111826;
    --text:#e8eef7;
    --muted:#a7b3c6;
    --line:#223047;
    --primary:#4da3ff;
    --primary2:#7cdbff;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 18px;
    --max: 1080px;
    --pad: 18px;
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:var(--font);
    background: radial-gradient(1200px 600px at 20% 10%, rgba(77,163,255,.12), transparent 55%),
                radial-gradient(900px 500px at 70% 30%, rgba(124,219,255,.10), transparent 55%),
                var(--bg);
    color:var(--text);
    line-height:1.45;
  }
  
  a{color:inherit}
  img{max-width:100%; display:block}
  
  .site-header{
    position:sticky; top:0;
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px var(--pad);
    border-bottom:1px solid rgba(34,48,71,.7);
    background: rgba(11,15,20,.75);
    backdrop-filter: blur(12px);
    z-index:10;
  }
  .brand{display:flex; gap:10px; align-items:center; text-decoration:none}
  .brand-mark{font-size:20px}
  .brand-text{font-weight:700; letter-spacing:.3px}
  .nav{display:flex; align-items:center; gap:14px}
  .nav a{opacity:.92; text-decoration:none}
  .nav a:hover{opacity:1}
  
  .section{padding: 42px var(--pad)}
  .section__inner{max-width:var(--max); margin:0 auto}
  
  .hero{
    padding: 42px var(--pad);
    max-width:var(--max);
    margin:0 auto;
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 22px;
  }
  @media (max-width: 900px){
    .hero{grid-template-columns:1fr}
  }
  .eyebrow{color:var(--muted); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:12px}
  .lead{color:rgba(232,238,247,.92); font-size: 18px; max-width: 60ch}
  h1{font-size: clamp(28px, 4vw, 44px); line-height:1.08; margin: 10px 0 10px}
  h2{margin:0 0 14px}
  h3{margin:0 0 8px}
  
  .hero__cta{display:flex; gap:12px; margin: 18px 0 18px; flex-wrap:wrap}
  
  .trust{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
  }
  @media (max-width: 650px){
    .trust{grid-template-columns:1fr}
  }
  .trust__item{
    border:1px solid rgba(34,48,71,.8);
    background: rgba(17,24,38,.6);
    border-radius: var(--radius);
    padding: 14px;
  }
  .trust__title{font-weight:700}
  .trust__desc{color:var(--muted); font-size:14px; margin-top:4px}
  
  .hero__media{display:flex; align-items:stretch}
  .hero__card{
    width:100%;
    border:1px solid rgba(34,48,71,.8);
    background: linear-gradient(180deg, rgba(17,24,38,.85), rgba(17,24,38,.55));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
  }
  .hero__cardTitle{color:var(--muted); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px}
  .hero__cardBody{margin-top:10px; display:grid; gap:12px}
  .mini-product{border:1px solid rgba(34,48,71,.7); border-radius: 14px; padding: 12px; background: rgba(11,15,20,.35)}
  .mini-product__name{font-weight:700}
  .mini-product__meta{color:var(--muted); font-size:13px}
  .mini-product__link{display:inline-block; margin-top:8px; color: var(--primary); text-decoration:none}
  
  .grid3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  @media (max-width: 900px){
    .grid3{grid-template-columns:1fr}
  }
  
  .gridCards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  @media (max-width: 1000px){
    .gridCards{grid-template-columns: repeat(2, 1fr)}
  }
  @media (max-width: 650px){
    .gridCards{grid-template-columns: 1fr}
  }
  
  .card{
    border:1px solid rgba(34,48,71,.8);
    background: rgba(17,24,38,.65);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
  }
  .muted{color:var(--muted)}
  .link{color: var(--primary); text-decoration:none}
  .link:hover{text-decoration:underline}
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(34,48,71,.9);
    text-decoration:none;
    font-weight:700;
    letter-spacing:.2px;
  }
  .btn--primary{
    background: linear-gradient(90deg, rgba(77,163,255,1), rgba(124,219,255,1));
    color: #071018;
    border-color: transparent;
  }
  .btn--secondary{
    background: rgba(17,24,38,.25);
  }
  .btn--ghost{
    background: transparent;
  }
  
  .page-head{margin-bottom: 16px}
  .controls{
    display:flex; gap: 10px; flex-wrap:wrap;
    margin: 14px 0 18px;
  }
  .input,.select,.textarea{
    width: min(520px, 100%);
    border-radius: 12px;
    border:1px solid rgba(34,48,71,.9);
    background: rgba(11,15,20,.45);
    color: var(--text);
    padding: 10px 12px;
    outline:none;
  }
  .select{width: 220px}
  .textarea{width: min(680px, 100%)}
  
  .productCard{padding:0; overflow:hidden}
  .productCard__imgWrap{display:block}
  .productCard__img{height: 180px; width:100%; object-fit: cover; border-bottom:1px solid rgba(34,48,71,.8)}
  .productCard__body{padding: 14px}
  .productCard__top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
  .productCard__name{font-size: 16px}
  .productCard__name a{text-decoration:none}
  .productCard__price{font-weight:800}
  .productCard__meta{color:var(--muted); font-size:13px; margin-top:4px}
  .productCard__desc{color:rgba(232,238,247,.9); margin: 10px 0}
  .productCard__actions{display:flex; gap:10px; flex-wrap:wrap}
  
  .productView{margin-top: 14px}
  .product{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 900px){
    .product{grid-template-columns:1fr}
  }
  .product__imgWrap{
    border:1px solid rgba(34,48,71,.8);
    border-radius: var(--radius);
    overflow:hidden;
    background: rgba(17,24,38,.4);
  }
  .product__img{width:100%; height: 420px; object-fit:cover}
  .product__info .product__price{font-size: 20px; font-weight:900; margin: 8px 0 8px}
  .product__desc{margin-top: 12px}
  .product__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}
  
  .site-footer{
    padding: 28px var(--pad);
    border-top: 1px solid rgba(34,48,71,.7);
  }
  .footer__inner{
    max-width:var(--max);
    margin:0 auto;
    display:flex; justify-content:space-between; align-items:center;
    gap: 10px;
  }