:root{
  /* === Palette === */
  --black:#000000;
  --white:#ffffff;
  --subtle:rgba(255,255,255,.8);
  --glass:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.12);
  --grad-a:#FF8C00;
  --grad-b:#FF4500;

  --bg:#050505;
  --muted:rgba(255,255,255,.68);
  --muted-2:rgba(255,255,255,.52);
  --ok:#14ff72;
  --danger:#ff4d4d;

  --radius-xl:18px;
  --radius-2xl:24px;
  --shadow-soft:0 10px 30px rgba(255,110,0,.18);
  --shadow-glow:0 0 40px rgba(255,110,0,.35);
  --shadow-ink:0 20px 60px rgba(0,0,0,.65);

  --transition-fast: .24s cubic-bezier(.2,.8,.2,1);
  --transition-med:  .36s cubic-bezier(.2,.8,.2,1);
  --transition-slow: .9s  cubic-bezier(.2,.8,.2,1);

  --container:1160px;
  --nav-h: 72px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--white);
  overflow-x:hidden;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-width:320px;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
.container{width:min(var(--container), calc(100% - 32px)); margin:0 auto}

/* чтобы якоря не уезжали под фикс-шапку */
main, section{scroll-margin-top:96px;}
:focus-visible{outline:2px solid rgba(255,140,0,.9); outline-offset:3px; border-radius:14px}

/* ===== Ambient background ===== */
.ambient{
  position:fixed; inset:-20vmax;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(60vmax 60vmax at 10% 10%, rgba(255,140,0,.26), transparent 60%),
    radial-gradient(60vmax 60vmax at 80% 20%, rgba(255,69,0,.20), transparent 60%),
    radial-gradient(70vmax 70vmax at 55% 85%, rgba(20,255,114,.10), transparent 60%),
    radial-gradient(60vmax 60vmax at 30% 65%, rgba(255,255,255,.06), transparent 60%);
  filter: blur(18px);
  opacity:.95;
  animation: floaty 14s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2vmax,-1.5vmax,0) scale(1.03)}
}
.grain{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ===== Primitives ===== */
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  white-space:nowrap;
}
.dot{width:8px; height:8px; border-radius:50%;}
.dot.ok{background:var(--ok); box-shadow:0 0 0 6px rgba(20,255,114,.12)}
.dot.warn{background:var(--grad-a); box-shadow:0 0 0 6px rgba(255,140,0,.12)}
.dot.bad{background:var(--danger); box-shadow:0 0 0 6px rgba(255,77,77,.12)}

.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-ink);
}
.shadow-glow{box-shadow: var(--shadow-soft), var(--shadow-glow);}
.muted{color:var(--muted)}
.muted2{color:var(--muted-2)}
.grad-text{
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border var(--transition-fast), box-shadow var(--transition-fast);
  user-select:none;
  white-space:nowrap;
  line-height:1;
}

/* Иконки (lucide) — убираем baseline-смещение, из-за которого элементы могут «съезжать» по Y */
.btn svg,
.burger svg,
.nav-links svg,
.mobile svg{
  display: block;
  flex: 0 0 auto;
}

/* lucide добавляет класс .lucide на SVG: фиксируем baseline и дефолтный размер */
svg.lucide{
  display:block;
  flex:0 0 auto;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.btn:active{transform: translateY(0)}
.btn.primary{
  background: linear-gradient(90deg, rgba(255,140,0,.95), rgba(255,69,0,.92));
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft), var(--shadow-glow);
}
.btn.primary:hover{
  background: linear-gradient(90deg, rgba(255,140,0,1), rgba(255,69,0,1));
  border-color: rgba(255,255,255,.18);
}
.btn.ghost{
  background: rgba(0,0,0,.15);
  border-color: rgba(255,255,255,.12);
}

.hide-sm{display:inline}

/* ===== Reveal anim ===== */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.in{opacity:1; transform: translateY(0)}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation:none !important; transition:none !important}
}


.hide-xs{display:inline}
@media (max-width: 420px){
  .hide-xs{display:none}
}