/* ===== Enterweb — Dark Gray Theme ===== */
/* Design tokens */
/* === Local Inter Font === */
html, body, h1, h2, h3, h4, h5, h6 {
  all: unset;
  display: revert;
}

/* === Normalize заголовков (устраняет зависимость от user agent) === */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em 0;
  font-weight: 800;
  line-height: 1.1;
  color: var(--txt);
}

h1 {
  font-size: clamp(28px, 3.8vw, 56px);
}

h2 {
  font-size: clamp(22px, 2.8vw, 36px);
}

header {
  min-height: 60px;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://enterwebsite.pl/fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://enterwebsite.pl/fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://enterwebsite.pl/fonts/inter-v20-latin-800.woff2') format('woff2');
}

:root{
  --bg:#0e0f12;            /* page background (near-black) */
  --bg-2:#111318;          /* cards/sections */
  --bg-3:#171a21;          /* elevated */
  --txt:#e6e9ee;           /* text */
  --txt-2:#a6adbb;         /* secondary */
  --muted:#8b93a7;
  --accent:#0ea5e9;        /* cyan/blue */
  --accent-2:#38bdf8;
  --maxw: 1120px;
  --rad: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.25);
  --ring: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
  --speed: .6s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.6 "Inter",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 1200px at 80% -10%, #0b1222 0%, transparent 55%) no-repeat,
              radial-gradient(900px 900px at -10% 30%, #07121e 0%, transparent 60%) no-repeat,
              var(--bg);
}

/* --------- Generic UI --------- */
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
.muted{color:var(--txt-2)}
.badge{
  display:inline-flex;gap:.5rem;align-items:center;
  background:linear-gradient(180deg,#0f1b2a,#0c1320);
  color:var(--accent-2);
  border:1px solid #0c2032;border-radius:999px;
  padding:.4rem .8rem;box-shadow: var(--shadow-soft);
}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.1rem;border-radius:12px;font-weight:700;
  background:linear-gradient(180deg,#0ea5e9,#0387c6);
  color:#04121b;border:none; box-shadow: 0 10px 25px rgba(14,165,233,.25);}
.btn-secondary:hover{transform:translateY(-1px);filter:brightness(1.07)}

.cta {
  display: block;
  margin: 10px auto; /* центрирует по горизонтали */
  width: fit-content;
  border-radius: 12px;
  border: 3px solid #1d283a;
  background: #0b1220;
  color: var(--txt);
  text-align: center;
  padding: 5px 5px;
  transition: all 0.3s ease;
}
.cta:hover {
  border-color: #263349;
}
/* --------- Layout --------- */
.section{padding:42px 20px}
.section > *{max-width:var(--maxw);margin:0 auto}
.grid-3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.masonry{
  columns:3 280px;column-gap:16px;
}
.masonry .shot{break-inside:avoid;display:block;position:relative;overflow:hidden;border-radius:16px}
.masonry img{width:100%;height:auto;transition:transform .6s ease}
.masonry .shot:hover img{transform:scale(1.06)}

/* --------- Header / Nav --------- */
header{
  position:sticky;top:0;z-index:40;background: linear-gradient(180deg, rgba(8,10,14,.9), rgba(8,10,14,.45) 70%, transparent);
  backdrop-filter: blur(10px);
}
.nav{
  display:flex;align-items:center;gap:12px;max-width:var(--maxw);margin:0 auto;padding:14px 20px;
}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:28px;width:auto;filter:drop-shadow(0 6px 16px rgba(14,165,233,.2))}
.spacer{flex:1}
.menu{display:flex;align-items:center;gap:14px}
.menu a{color:var(--txt-2);padding:.4rem .6rem;border-radius:8px}
.menu .cta{padding:.6rem .9rem}
.menu a:hover{background:#121723;color:var(--txt)}
.lang{
  background:#0c1320;border:1px solid #1c2940;color:var(--txt);border-radius:10px;padding:.45rem .6rem
}
.burger{
  display:none;position:relative;width:42px;height:42px;border-radius:10px;border:1px solid #1f2a3c;background:#0c1320;color:var(--txt);
}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:#a7b0c3;border-radius:2px;transition:transform .25s, top .25s, opacity .2s}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}

@media (max-width: 960px){
  .menu{
    position:fixed;inset:64px 14px auto 14px;display:grid;gap:10px;padding:12px;
    background:#0b1018;border:1px solid #1b2538;border-radius:16px;box-shadow:var(--shadow);
    transform:translateY(-8px) scale(.98);opacity:0;pointer-events:none;transition:.25s;
  }
  .menu.open{transform:none;opacity:1;pointer-events:auto}
  .menu .cta{justify-self:start}
  .burger{display:inline-block}
}

/* --------- Hero --------- */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;max-width:var(--maxw);margin:0 auto}
.hero-content .lead{font-size:1.1rem;color:var(--txt-2)}
.hero h1{font-size: clamp(28px, 3.8vw, 56px);line-height:1.05;margin:.6rem 0 1rem}
.hero-buttons{display:flex;gap:10px;margin:16px 0 12px}
.hero-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px;margin-top:16px}
.tile{
  background: linear-gradient(180deg,#11161f,#0c121b);
  border:1px solid #1a2436;border-radius:16px;padding:16px;box-shadow:var(--shadow-soft);
}
.hero-image .card{
  background: radial-gradient(500px 500px at 40% -10%, rgba(14,165,233,.2), transparent 60%) , #0b1016;
  border:1px solid #1a2436;border-radius:16px;padding:10px;box-shadow: var(--shadow);
}
.hero-image img {
  width: 100%;
  height: auto;
  object-fit: cover; /* или cover — если хочешь, чтобы картинка заполняла карточку */
  border-radius: 12px;
  display: block;
}


/* --------- Pricing --------- */
.pricing{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.plan{padding:16px}
.plan .price{font-weight:800;font-size:26px;color:#dbe7ff}
.plan.featured{
  background: linear-gradient(180deg,#101624,#0c121b), radial-gradient(800px 400px at 80% -20%, rgba(14,165,233,.2), transparent 55%);
  outline:1px solid #24324a;
  transform: translateY(-2px);
}

/* --------- Projects --------- */
.projects-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px
}
.project-card{
  display:grid;border:1px solid #1a2436;border-radius:14px;overflow:hidden;background:#0b1018;
  box-shadow: var(--shadow-soft);
}
.project-card img{width:100%;height:180px;object-fit:cover;filter:saturate(.94);transition:transform .6s ease}
.project-card:hover img{transform:scale(1.05)}
.project-info{padding:10px 12px;color:var(--txt-2)}

/* --------- FAQ Cards --------- */
#faq .tile h3{margin:.2rem 0 .2rem}

/* --------- Footer --------- */
footer{
  background:linear-gradient(180deg,#0a0c10,#090b0f);border-top:1px solid #171e2a
}

/* --------- Backdrop blobs (parallax) --------- */
.bg{position:fixed;inset:-10% -10%;z-index:-1;pointer-events:none}
.blob{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(14,165,233,.25), rgba(14,165,233,.05) 55%, transparent 65%);
  filter: blur(24px);opacity:.34;transform:translate3d(0,0,0);
}
.b1{top:-120px;left:-120px}
.b2{right:-160px;bottom:-160px}

/* --------- Reveal on scroll --------- */
.reveal{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .7s var(--speed), transform .7s var(--speed)}
.reveal.in{opacity:1;transform:none}

/* --------- Forms --------- */
input,select,textarea{
  width:100%;padding:12px 12px;border-radius:12px;border:1px solid #1c273a;background:#0b121b;color:var(--txt);
  outline:none;transition:border .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus{border-color:#2a3a56;box-shadow:var(--ring)}
label{display:block;margin:4px 2px 6px;color:var(--muted)}
.submit{
  display:inline-flex;gap:.6rem;align-items:center;justify-content:center;margin-top:8px;
  padding:.8rem 1rem;border-radius:12px;border:1px solid #1d2a40;background: linear-gradient(180deg,#0ea5e9,#0b8fcd);
  color:#03131f;font-weight:800;cursor:pointer;box-shadow:0 12px 28px rgba(14,165,233,.22);
}
.submit:hover{filter:brightness(1.06)}

/* --------- Utilities --------- */
.card{border-radius:16px}
.hidden{display:none}

/* --------- Responsive --------- */
@media (max-width: 1080px){
  .hero{grid-template-columns:1fr;gap:20px}
  .projects-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 780px){
  .grid-3{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr 1fr}
}
/* @media (max-width: 520px){
  .projects-grid{grid-template-columns:1fr}
  .hero-buttons{flex-direction:column;align-items:stretch}
} */
@media (max-width: 768px) {
  .section {
    padding:40px 16px;
  }
}

/* === Центрирование на мобильных === */
@media (max-width: 768px) {
    .cta {
    display: block;
    margin: 10px auto;
    width: fit-content;
  }
}

body { font-family: "Inter", system-ui, sans-serif; }
/* .hero-buttons a { min-width: 180px; } */


.cc-window {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.cc-compliance button {
  border-radius: 8px !important;
  font-weight: 600;
}


/* === 🧩 FIX: Layout Shift (CLS Optimization) === */

/* 1️⃣  Изображения: предотвращение "прыжков" */
img {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height); /* резервирует место до загрузки */
}

/* 2️⃣  Зарезервировать место под шапку и меню */
header {
  min-height: 64px; /* фиксированная высота хедера до загрузки шрифтов и JS */
}

.menu {
  min-height: 48px; /* навигация не "прыгает", пока не инициализируется JS */
}

/* 3️⃣  Cookie-баннер не должен сдвигать контент */
.cc-window.cc-banner {
  position: fixed !important;
  bottom: 0 !important;
  width: 100%;
  z-index: 9999;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
}

/* 4️⃣  Элементы с анимацией появления не меняют layout при загрузке */
.reveal {
  min-height: 1px; /* резерв места для предотвращения скачков */
}

/* 5️⃣  Шрифты Inter: чтобы не "прыгали" при загрузке */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* 6️⃣  Кнопки и баннеры не должны влиять на CLS */
.cc-window, .cc-banner, .cc-compliance {
  transition: none !important; /* отключаем плавные margin/padding-анимации */
}

/* 7️⃣  Hero image: фиксируем пропорции */
.hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2; /* твоя картинка 900x600 */
  display: block;
  border-radius: 12px;
}