/* ── Shared design system — aiprohar.ru ─────────────────── */
:root{
  --p:#a855f7;--pd:#7c3aed;--pb:#c084fc;
  --bg:#0a0a0a;--bg2:#0d0d14;
  --card:rgba(255,255,255,.03);--card-solid:rgba(6,6,16,.95);
  --border:rgba(255,255,255,.07);--border-p:rgba(168,85,247,.35);
  --text:#e8e8e8;--muted:#808080;
  --p-gradient:linear-gradient(135deg,var(--p),var(--pd));
  --z-header:1000;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
*:focus-visible{outline:2px solid var(--p);outline-offset:3px;border-radius:3px}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif;
  line-height:1.6;overflow-x:hidden
}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(168,85,247,.3);border-radius:3px}

/* grain */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E")
}

/* ── HEADER ─────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  padding:0 60px;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(10,10,10,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.site-logo{
  display:flex;align-items:center;text-decoration:none;flex-shrink:0;
}
.site-logo img{height:46px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{
  color:var(--muted);text-decoration:none;font-size:.85rem;
  padding:7px 14px;border-radius:8px;
  transition:color .2s,background .2s;
}
.site-nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.site-nav a.active{
  color:#fff;font-weight:600;
  background:rgba(168,85,247,.15);border:1px solid var(--border-p);
}
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  color:var(--text);padding:6px;border-radius:8px;
}

/* ── SECTION UTILS ───────────────────────────────────────── */
.page-wrap{max-width:1160px;margin:0 auto;padding:0 60px}
.sec-label{
  display:flex;align-items:center;justify-content:center;
  gap:14px;font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--p);margin-bottom:20px;
}
.sec-label::before,.sec-label::after{content:'';width:36px;height:1px;background:rgba(168,85,247,.4)}
.sec-h{
  text-align:center;
  font-family:'Oswald',sans-serif;
  font-size:clamp(2rem,4.8vw,3.6rem);font-weight:700;
  color:#fff;line-height:1.1;margin-bottom:16px;
}
.sec-h span{color:var(--p)}
.sec-sub{
  text-align:center;color:var(--muted);font-size:.95rem;
  max-width:540px;margin:0 auto 56px;line-height:1.75;
}
.divider{
  height:1px;
  background:linear-gradient(to right,transparent,rgba(168,85,247,.18),transparent);
  margin:0 auto;
}

/* ── FADE-IN ─────────────────────────────────────────────── */
.fi{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.fi.vis{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.fi{transition:none!important;opacity:1!important;transform:none!important}}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 28px;border-radius:12px;font-size:.93rem;font-weight:600;
  text-decoration:none;border:none;cursor:pointer;
  position:relative;overflow:visible;white-space:nowrap;
  transition:transform .25s,box-shadow .3s,background .25s,border-color .25s;
}
.btn::before{
  content:'';position:absolute;inset:-18px;border-radius:22px;
  background:radial-gradient(ellipse at center,rgba(168,85,247,.55) 0%,rgba(109,40,217,.2) 45%,transparent 68%);
  filter:blur(20px);opacity:0;transform:scale(.8);
  transition:opacity .4s,transform .5s;z-index:-1;pointer-events:none;
}
.btn::after{
  content:'';position:absolute;left:8%;right:8%;
  bottom:calc(100% - 10px);height:55px;
  background:radial-gradient(ellipse at 50% 100%,rgba(168,85,247,.6) 0%,rgba(139,92,246,.2) 40%,transparent 68%);
  filter:blur(16px);opacity:0;transform:translateY(18px) scaleX(.6);
  transition:opacity .35s,transform .5s;z-index:-1;pointer-events:none;
}
.btn:hover{transform:translateY(-3px)}
.btn:hover::before{opacity:1;transform:scale(1.15);animation:sglow 2.2s ease-in-out infinite}
.btn:hover::after{opacity:1;transform:translateY(0) scaleX(1.1);animation:srise 1.8s ease-out infinite}
@keyframes sglow{0%,100%{transform:scale(1.1);opacity:.8}50%{transform:scale(1.28);opacity:1}}
@keyframes srise{0%{opacity:.65;transform:translateY(0) scaleX(1.1) scaleY(.7)}100%{opacity:0;transform:translateY(-45px) scaleX(1.7) scaleY(2)}}
.btn-primary{background:var(--p);color:#fff;box-shadow:0 0 22px rgba(168,85,247,.42),0 4px 16px rgba(0,0,0,.3)}
.btn-primary:hover{background:#9333ea;box-shadow:0 0 44px rgba(168,85,247,.75),0 8px 28px rgba(0,0,0,.4)}
.btn-outline{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--border-p)}
.btn-outline:hover{border-color:rgba(168,85,247,.75);background:rgba(168,85,247,.07);box-shadow:0 0 28px rgba(168,85,247,.22)}

/* ── CARDS ───────────────────────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:32px;position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(168,85,247,.65),transparent);
  transform:scaleX(0);transition:transform .4s;
}
.card:hover{transform:translateY(-6px);border-color:rgba(168,85,247,.28);box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 32px rgba(168,85,247,.07)}
.card:hover::before{transform:scaleX(1)}

/* ── MOBILE ──────────────────────────────────────────────── */
@media(max-width:768px){
  .site-header{padding:0 20px}
  .site-nav{
    display:none;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    padding:16px 20px;background:rgba(10,10,10,.98);
    border-bottom:1px solid rgba(255,255,255,.05);gap:6px;
  }
  .site-nav.open{display:flex}
  .nav-toggle{display:block}
  .page-wrap{padding:0 20px}
}