/* ===========================================================
   style.css — базовые стили проекта «Таможня — Просто»
   dark-theme + сглаженный градиент-фон с лёгким шумом
   =========================================================== */

/* ---------- Сброс ---------------------------------------- */
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ---------- Базовые цвета -------------------------------- */
:root{
  --bg-dark:      #0e1426;
  --bg-dark-2:    #1a2340;
  --accent-blue:  #4a90e2;
  --text-main:    #f1f5ff;
  --text-faded:   #c7d1ee;
}

/* ---------- Градиент + шум (маскируем banding) ----------- */
html,body{
  width:100%;height:100%;
  font-family:"Inter","Segoe UI",sans-serif;
  background:var(--bg-dark);
  color:var(--text-main);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* размытый рад.-градиент */
body::before{
  content:'';
  position:fixed; inset:-10%;
  background:radial-gradient(80% 60% at 50% 0%, var(--bg-dark-2) 0%, var(--bg-dark) 100%);
  filter:blur(25px);
  z-index:-2;
  pointer-events:none;
}
/* лёгкий шум 3 % */
body::after{
  content:'';
  position:fixed; inset:0;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQImWNgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=") repeat;
  opacity:.03;
  z-index:-1;
  pointer-events:none;
}

/* ---------- Контейнер-утилита ---------------------------- */
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.section-subtitle{color:var(--text-faded);margin:-8px 0 40px;text-align:center;}
a{color:var(--accent-blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Header -------------------------------------- */
header{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 32px;background:#0b111d;border-bottom:1px solid rgba(255,255,255,.05)
}
.logo{font-weight:600;font-size:1.125rem;letter-spacing:.3px}
header nav a{margin-left:24px;font-size:.95rem;position:relative}
header nav a.active::after,
header nav a:hover::after{
  content:'';position:absolute;left:0;bottom:-6px;width:100%;height:2px;
  background:var(--accent-blue);border-radius:1px;
}

/* ---------- Hero ---------------------------------------- */
.hero{padding:120px 20px 100px;text-align:center}
.hero-title{
  font-size:clamp(2.5rem,5vw,4rem);font-weight:800;line-height:1.1;margin-bottom:24px
}
.hero-tagline{font-size:1.125rem;color:var(--text-faded);margin-bottom:36px}
.hero-buttons .btn{margin:0 10px}
.hero-note{margin-top:14px;font-size:.75rem;color:#9ba9c9}

/* кнопки */
.btn{
  display:inline-block;padding:14px 24px;border-radius:6px;font-weight:600;color:#fff;
  transition:transform .25s ease,box-shadow .25s ease
}
.btn-whatsapp{background:#25d366}
.btn-telegram{background:#0088cc}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 16px rgba(0,0,0,.35)}

/* ---------- Services ------------------------------------ */
#services{padding:100px 20px;text-align:center}
#services h2{font-size:2rem;font-weight:700;margin-bottom:8px}
.services-list{
  margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px
}
.service-item{
  background:#19243a;padding:28px 24px;border-radius:10px;
  box-shadow:0 3px 12px rgba(0,0,0,.4);
  transition:transform .25s ease,box-shadow .25s ease
}
.service-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.service-item h3{font-size:1.125rem;margin-bottom:12px}
.service-item p{font-size:.95rem;color:var(--text-faded)}

/* ---------- About --------------------------------------- */
#about{padding:100px 20px;text-align:center}
#about h2{font-size:2rem;font-weight:700;margin-bottom:12px}
#about p{max-width:800px;margin:0 auto 40px;color:var(--text-faded)}
.about-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:20px;max-width:700px;margin:0 auto
}
.about-stats .stat{
  background:#19243a;border-radius:10px;padding:24px 10px;
  box-shadow:0 3px 12px rgba(0,0,0,.4)
}
.about-stats .stat span{display:block;font-size:1.75rem;font-weight:700;margin-bottom:4px}

/* ---------- Precedents ---------------------------------- */
#precedents{padding:100px 20px;text-align:center}
#precedents h2{font-size:2rem;font-weight:700;margin-bottom:40px}
.precedents-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px
}
.precedent-card{
  text-align:left;background:#19243a;border-left:4px solid var(--accent-blue);
  padding:24px 22px;border-radius:8px;box-shadow:0 3px 12px rgba(0,0,0,.45);
  transition:transform .25s ease,box-shadow .25s ease
}
.precedent-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.55)}
.precedent-card h3{font-size:1.125rem;margin-bottom:6px}
.case-brief{font-size:.9rem;color:var(--text-faded);margin-bottom:10px}
.case-details{font-size:.75rem;color:#9ba9c9}
.precedent-more{margin-top:36px}

/* ---------- Blog Preview -------------------------------- */
#blog{padding:100px 20px;text-align:center}
#blog h2{font-size:2rem;font-weight:700;margin-bottom:8px}
.blog-preview{
  margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px
}
.blog-card{
  background:#19243a;border-radius:10px;padding:22px 20px;
  box-shadow:0 3px 12px rgba(0,0,0,.45);
  transition:transform .25s ease,box-shadow .25s ease
}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.55)}
.blog-card h3{font-size:1.05rem;margin-bottom:8px}
.blog-card p{font-size:.9rem;color:var(--text-faded)}
.blog-more{margin-top:36px}

/* ---------- Contacts ------------------------------------ */
#contact{padding:100px 20px;text-align:center}
#contact h2{font-size:2rem;font-weight:700;margin-bottom:16px}
#contact p{font-size:1rem;margin-bottom:8px}
.contact-link.whatsapp{color:#25d366}
.contact-link.telegram{color:#0088cc}

/* ---------- Footer -------------------------------------- */
footer{
  padding:40px 20px;text-align:center;background:#0b111d;font-size:.85rem;color:#9ba9c9
}

/* ---------- Media Queries ------------------------------- */
@media (max-width:768px){
  header{flex-direction:column;align-items:flex-start}
  header nav{margin-top:12px}
  header nav a{display:inline-block;margin:6px 10px 0 0}
  .hero{padding:100px 20px 80px}
  .hero-title{font-size:2.5rem}
}