:root{
    --bg:#0f1216; --card:#151a20; --text:#e9eef5; --muted:#aeb6c2;
    --accent:#ffcc33; --accent-2:#2fbf71; --danger:#ff6b6b;
    --link:#5aa9ff; --border:#22303f; --shadow:0 6px 24px rgba(0,0,0,.25);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
    font-family:system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.6}
  img{max-width:100%;height:auto;display:block;border-radius:8px}
  a{color:var(--link);text-decoration:none}
  a:hover{text-decoration:underline}
  .container{width:min(1100px,92%);margin:0 auto}
  .header{position:sticky;top:0;z-index:50;background:rgba(15,18,22,.9);
    backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--border)}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
  .brand{display:flex;gap:10px;align-items:center}
  .logo{width:36px;height:36px;background:var(--accent);border-radius:8px}
  .menu{display:flex;gap:18px;flex-wrap:wrap}
  .menu a{padding:8px 10px;border-radius:6px}
  .menu a.cta{background:var(--accent);color:#131313;font-weight:700}
  .menu a.cta:hover{filter:brightness(.95);text-decoration:none}
  .hero{padding:42px 0 28px}
  .hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center}
  .hero h1{font-size:clamp(24px,4vw,42px);line-height:1.15;margin:0 0 10px}
  .hero p{color:var(--muted);margin:0 0 16px}
  .actions{display:flex;gap:12px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
    padding:12px 16px;border-radius:8px;font-weight:600;text-decoration:none}
  .btn.primary{background:var(--accent);color:#121212}
  .btn.secondary{background:var(--card);color:var(--text);border:1px solid var(--border)}
  .btn.danger{background:var(--danger);color:#fff}
  .section{padding:28px 0}
  .cards{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
  .card h3{margin:10px 0 6px}
  .price{font-weight:800;color:var(--accent-2)}
  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .footer{margin-top:24px;padding:22px 0;border-top:1px solid var(--border);color:var(--muted)}
  .footer a{color:var(--muted)}
  .notice{background:#0b1a10;border:1px solid #1d3b2a;color:#cbead8;padding:12px 14px;border-radius:10px}
  .hero-img{
    aspect-ratio: 4 / 3;
    border-radius:16px;
    border:1px solid var(--border);
    background-image: linear-gradient(120deg, #2a3442, #1d2530 60%), url('../img/hero-tools.jpg');
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
  }
  
  
  .table{width:100%;border-collapse:collapse;margin:8px 0 4px}
  .table th,.table td{border-bottom:1px solid var(--border);padding:10px 8px;text-align:left}
  .badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:.85rem;background:#22303f;color:#cfe2ff}
  form{display:grid;gap:12px}
  .input,textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--border);
    background:#0e141b;color:var(--text)}
  textarea{min-height:140px;resize:vertical}
  .cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:var(--card);
    border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:14px}
  .cookie-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
  .center{min-height:60vh;display:grid;place-items:center;text-align:center}
  @media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
  @media (max-width:600px){.menu{gap:10px}.cards{grid-template-columns:1fr}}
  .logo{
    width:36px; height:36px; border-radius:8px; display:block;
  }
  .brand{display:flex; gap:10px; align-items:center}
  .cards--feature .feature__img{
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border:1px solid var(--border);
    margin-bottom:10px;
  }
  .cards--feature .card p{ color: var(--muted); }
  .quotes-section{
    background-color: var(--card);
    color: var(--accent-2);
    padding: 60px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    font-style: italic;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
  }
  
  .quotes-section .container{
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
  }
  
  .quotes-section h2{
    color: var(--accent);
    font-style: normal;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
  }
  
  .quotes-section blockquote{
    line-height: 1.5;
    border-left: 4px solid var(--accent);
    padding-left: 16px;
    margin: 0;
    quotes: "“" "”" "‘" "’";
  }
  
  .quotes-section blockquote::before{
    content: open-quote;
  }
  
  .quotes-section blockquote::after{
    content: close-quote;
  }
  /* Fullscreen quotes section */
.quotes-section{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,204,51,.08), transparent 60%),
              radial-gradient(1000px 500px at 90% 30%, rgba(47,191,113,.07), transparent 60%),
              var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 56px 0;
}
.quotes-wrap{
  width: min(1100px, 92%);
  margin: 0 auto;
  column-gap: 32px;
}

/* Title */
.quotes-title{
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.2;
  margin: 0 0 22px;
  color: var(--accent);
  text-align: center;
}

/* Multi-column layout for long text on wide screens */
@media (min-width: 1000px){
  .quotes-wrap{
    column-count: 2; /* плавно переносит блоки цитат в две колонки */
    column-gap: 36px;
  }
  .quotes-title{
    column-span: all; /* заголовок на всю ширину */
  }
}

/* Quote card */
.quote{
  break-inside: avoid; /* не рвём цитаты между колонками */
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 14px 22px;
  margin: 12px 0;
  position: relative;
  color: var(--text);
  box-shadow: var(--shadow);
}

/* Decorative big quotes */
.quote::before{
  content: "“";
  position: absolute;
  left: 10px;
  top: -8px;
  font-size: 48px;
  line-height: 1;
  color: rgba(255,204,51,.5); /* var(--accent) с прозрачностью */
  font-weight: 700;
  pointer-events: none;
}

/* Quote text */
.quote p{
  margin: 0 0 10px 0;
  font-style: italic;
  font-size: clamp(16px, 2.2vw, 18px);
  color: var(--text);
}

/* Attribution */
.quote footer{
  font-size: 0.95rem;
  color: var(--muted);
}
.quote footer cite{
  font-style: normal;
}

/* Subtle divider between many quotes