/* ===== ТЕМА ===== */
:root{
  --bg:#0b0d12; --fg:#eef1f5; --muted:#9aa3b2;
  --card:#141923; --glass:rgba(20,25,35,.6);
  --accent:#60a5ff; --accent-2:#a78bfa; --accent-3:#22d3ee;
  --border:#1f2532; --shadow:0 20px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow-x:hidden;
}

/* ===== ФОНЫ ===== */
#bg-particles{position:fixed;inset:0;z-index:-3}
.ai-glow{
  position:fixed;inset:-30% -10% -10% -30%;
  background:
    radial-gradient(1000px 600px at 20% 10%, rgba(96,165,255,.15), transparent 60%),
    radial-gradient(800px 500px at 80% 20%, rgba(167,139,250,.12), transparent 60%),
    radial-gradient(900px 700px at 50% 90%, rgba(34,211,238,.10), transparent 60%);
  filter: blur(40px);
  z-index:-2; pointer-events:none;
}
/* «нейросетка» */
.neuro-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  --c1: rgba(96,165,255,.12); --c2: rgba(167,139,250,.10);
  background:
    radial-gradient(circle at 10% 10%, var(--c1) 0 12%, transparent 13%),
    radial-gradient(circle at 30% 60%, var(--c2) 0 10%, transparent 12%),
    radial-gradient(circle at 70% 30%, rgba(34,211,238,.10) 0 10%, transparent 12%);
  animation: gridPulse 16s infinite alternate ease-in-out;
}
@keyframes gridPulse{
  0%{filter:contrast(100%) saturate(110%) blur(0px)}
  100%{filter:contrast(120%) saturate(130%) blur(1px)}
}

/* ===== КУРСОР ===== */
.cursor-ring{
  position:fixed;left:0;top:0;transform:translate(-50%,-50%);
  width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 24px rgba(96,165,255,.35);
  pointer-events:none;z-index:10000;opacity:.8;transition:width .15s, height .15s, opacity .2s;
}
a:hover ~ .cursor-ring, .btn:hover ~ .cursor-ring{opacity:1}

/* ===== NAVBAR ===== */
.navbar{position:sticky;top:0;background:rgba(10,12,18,.6);backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--border); z-index:10}
.nav-wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.nav-links a{color:var(--fg);opacity:.85;text-decoration:none;margin:0 12px}
.nav-links a:hover{opacity:1;color:var(--accent)}
.auth{display:flex;align-items:center;gap:10px}

/* ЛОГО: светлая плашка + неон */
.logo{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.25), 0 0 12px rgba(96,165,255,.4), 0 0 24px rgba(96,165,255,.25);
  transition:box-shadow .4s ease, transform .3s ease;
}
.logo:hover{box-shadow:0 4px 16px rgba(0,0,0,.25), 0 0 20px rgba(96,165,255,.6), 0 0 40px rgba(96,165,255,.4)}
.logo img{height:34px;width:auto;display:block;transition:filter .3s ease}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:.25s}
.btn.big{padding:14px 20px;border-radius:14px;font-weight:600}
.btn-outline{border-color:var(--accent);color:var(--accent);background:transparent}
.btn-outline:hover{background:color-mix(in oklab, var(--accent) 12%, transparent)}
.btn-fill{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 8px 30px rgba(96,165,255,.35)}
.btn-fill:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--border);color:var(--fg);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.full{width:100%}

.burger{display:none;background:none;border:none;padding:8px 6px}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px;transition:.3s}
.nav-mobile{display:none;flex-direction:column;padding:10px 16px;border-top:1px solid var(--border);background:rgba(10,12,18,.85)}
.nav-mobile a{padding:12px 4px;text-decoration:none;color:var(--fg);opacity:.9}

/* ===== HERO ===== */
.hero{position:relative;min-height:88vh;display:grid;place-items:center;padding:90px 20px 40px}
.hero-inner{max-width:1024px;text-align:center}
.title{font-size:min(54px,8vw);line-height:1.1;margin:0 0 14px}
.grad{background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(96,165,255,.3))}
.subtitle{max-width:780px;margin:0 auto 28px;color:var(--muted);font-size:1.1rem}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* параллакс-слои и морф-капля */
.hero-parallax{position:absolute;inset:0;pointer-events:none}
.p-layer{position:absolute;inset:auto;filter:blur(20px);opacity:.35}
.p1{top:8%;left:10%;width:180px;height:180px;background:radial-gradient(circle, rgba(96,165,255,.35), transparent 60%);border-radius:50%}
.p2{bottom:15%;right:12%;width:240px;height:240px;background:radial-gradient(circle, rgba(167,139,250,.28), transparent 60%);border-radius:50%}
.p3{top:40%;right:35%;width:200px;height:200px;background:radial-gradient(circle, rgba(34,211,238,.25), transparent 60%);border-radius:50%}
.morph-blob{
  position:absolute;left:50%;top:38%;width:520px;height:520px;transform:translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(96,165,255,.18), rgba(167,139,250,.12), transparent 85%);
  filter: blur(30px); border-radius: 50%;
  animation: morph 14s ease-in-out infinite;
}
@keyframes morph{
  0%{border-radius:50% 50% 45% 55%/55% 45% 55% 45%}
  50%{border-radius:45% 55% 50% 50%/48% 52% 48% 52%}
  100%{border-radius:50% 50% 45% 55%/55% 45% 55% 45%}
}

/* график */
#hero-graph{display:block;margin:26px auto 4px;max-width:920px;width:95%;opacity:.95}

/* Метрики */
.metrics{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.metric{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--border);backdrop-filter:blur(8px);padding:16px 22px;border-radius:16px;min-width:180px;box-shadow:var(--shadow)}
.m-num{font-weight:800;font-size:28px}
.m-label{opacity:.8}

/* Marquee */
.marquee{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:28px}
.marquee-inner{display:flex;white-space:nowrap}
.track{display:flex;gap:28px;padding:10px 0;animation:marquee-loop 22s linear infinite}
.track span{letter-spacing:.6px;color:var(--muted);opacity:.9}
.track + .track{margin-left:28px}
@keyframes marquee-loop{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Секции */
.section{padding:90px 20px}
.section h2{text-align:center;margin:0 0 18px;font-size:34px}
.lead{max-width:900px;margin:0 auto;text-align:center;color:var(--muted)}
.grid-2{max-width:1100px;margin:28px auto;display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cards{max-width:1100px;margin:28px auto;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.glass{background:var(--glass)}
.feature .icon{font-size:28px;margin-bottom:8px}

/* неоновая рамка */
.neon-border{position:relative;overflow:hidden}
.neon-border::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 0deg, rgba(96,165,255,.0), rgba(96,165,255,.35), rgba(167,139,250,.25), rgba(34,211,238,.25), rgba(96,165,255,.0));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; border-radius:inherit; animation: spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Прайсинг */
.pricing .billing-switch{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 24px;color:var(--muted)}
.switch{position:relative;width:54px;height:30px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#2a3446;border-radius:999px;cursor:pointer;transition:.25s}
.slider:before{content:"";position:absolute;height:22px;width:22px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.25s}
input:checked + .slider{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
input:checked + .slider:before{transform:translateX(24px)}
.save{color:#3dd9c1}
.plan{position:relative}
.plan .badge{position:absolute;top:-12px;right:16px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}
.plan.highlight{border:1px solid color-mix(in oklab, var(--accent) 60%, var(--border));box-shadow:0 14px 50px rgba(96,165,255,.28)}
.price{font-size:26px;font-weight:800;margin:6px 0 8px}

/* FAQ плавный */
.faq-item{overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:0;top:50%;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-60%) rotate(-45deg);transition:.2s;
}
.faq-item[open] summary::after{transform:translateY(-60%) rotate(45deg)}
.faq-content{max-height:0;overflow:hidden;transition:max-height .35s ease, opacity .35s ease;opacity:.0}
.faq-item[open] .faq-content{opacity:1}

/* Карточки: 3D hover */
.card-tilt{transform-style:preserve-3d;will-change:transform, box-shadow;transition:transform .2s ease, box-shadow .2s ease;position:relative}
.card-tilt:hover{box-shadow:0 20px 70px rgba(0,0,0,.55)}

/* Reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
[data-reveal].show{opacity:1;transform:none}
[data-reveal]{transition-delay:var(--reveal-delay,0s)}

/* Мобилки */
@media (max-width: 1024px){ .cards{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} }
@media (max-width: 640px){
  .cards{grid-template-columns:1fr}
  .nav-links{display:none}
  .burger{display:block}
  .nav-mobile.show{display:flex}
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .track{animation:none}
  .neon-border::after{animation:none}
  .morph-blob{animation:none}
}
.footer{padding:36px;text-align:center;color:var(--muted);border-top:1px solid var(--border)}