:root{
  --bg-1:#02060E; --bg-2:#02060E;
  --accent:#9303C5; --accent-2:#9303C5;
  --glass:rgba(147,3,197,0.08); --glass-border:rgba(147,3,197,0.28); --glass-strong:rgba(147,3,197,0.14);
  --text:#f8efff; --text-dim:#bda8c7;
  --radius-lg:28px; --radius-md:18px; --radius-sm:12px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ok:#c96be8; --warn:#e59bff;
  --page-shadow:rgba(0,0,0,0.35);
}
html{transition:none;}
body{transition:background .4s var(--ease), color .4s var(--ease);}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0; font-family:-apple-system,"SF Pro Display",Inter,system-ui,sans-serif; color:var(--text);
  background:
    radial-gradient(ellipse 900px 600px at 15% -10%, #2a3a8c55, transparent 60%),
    radial-gradient(ellipse 800px 700px at 100% 10%, #6b3fa055, transparent 55%),
    radial-gradient(ellipse 1000px 800px at 50% 120%, #1a2f6b66, transparent 60%),
    linear-gradient(180deg, #000000, #000000 60%, #000000);
  min-height:100vh; overflow-x:hidden;
}
.page-loader{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at center, rgba(127,76,248,0.42), rgba(11,13,22,0.95) 55%);
  z-index:500; transition:opacity .45s ease, visibility .45s ease;
}
.page-loader.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.loader-brand{display:flex; flex-direction:column; align-items:center; gap:18px;}
.loader-logo{
  width:140px; height:140px; border-radius:28px; display:grid; place-items:center; font-size:72px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)); border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 30px 60px rgba(92,52,226,0.45), inset 0 1px 0 rgba(255,255,255,0.2); transform:rotate(-12deg);
}
.loader-bar{width:min(420px, 72vw); height:10px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; position:relative;}
.loader-bar span{display:block; width:36%; height:100%; border-radius:inherit; background:linear-gradient(90deg, #fff, rgba(255,255,255,0.5), #fff); animation:loader-run 1.3s ease-in-out infinite; box-shadow:0 0 18px rgba(255,255,255,0.3);}
@keyframes loader-run{0%{transform:translateX(-100%);} 50%{transform:translateX(200%);} 100%{transform:translateX(-100%);}}
#network-canvas{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; opacity:.8;}
body:has(#network-canvas){background:#000000;}
body:has(#network-canvas)::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(circle at 50% 35%, transparent 0, rgba(0,0,0,.2) 55%, rgba(0,0,0,.72) 100%);}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.glass{
  background:var(--glass); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-border); box-shadow:0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn{padding:11px 20px; border-radius:100px; border:none; cursor:pointer; font-size:14.5px; font-weight:600; transition:transform .18s var(--ease), filter .18s;}
.btn:active{transform:scale(0.94);}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0e27;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--text); backdrop-filter:blur(12px);}
.btn-ghost:hover{background:rgba(255,255,255,0.14);}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:6px;}
.field input,.field textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.04); color:var(--text); font-size:14.5px; outline:none; transition:.2s; font-family:inherit;
}
.field input:focus,.field textarea:focus{border-color:var(--accent); background:rgba(124,159,255,0.07);}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15); border-radius:10px;}

/* ---- Чат-виджет поддержки ---- */
#chat-bubble{
  position:fixed; bottom:22px; right:22px; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 10px 28px rgba(124,159,255,0.45); z-index:200; font-size:24px; border:none;
  transition:transform .3s var(--ease);
}
#chat-bubble:hover{transform:scale(1.08);}
#chat-window{
  position:fixed; bottom:92px; right:22px; width:340px; max-width:calc(100vw - 32px); height:440px; z-index:200;
  border-radius:var(--radius-lg); display:flex; flex-direction:column; overflow:hidden;
  transform:scale(0.9) translateY(20px); opacity:0; pointer-events:none; transition:.3s var(--ease);
}
#chat-window.open{transform:scale(1) translateY(0); opacity:1; pointer-events:auto;}
.chat-head{padding:16px 18px; border-bottom:1px solid var(--glass-border); display:flex; justify-content:space-between; align-items:center;}
.chat-head b{font-size:14.5px;}
.chat-head span{font-size:12px; color:var(--ok);}
.chat-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px;}
.msg{max-width:80%; padding:9px 13px; border-radius:16px; font-size:13.5px; line-height:1.4;}
.msg.user{align-self:flex-end; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0e27; border-bottom-right-radius:4px;}
.msg.admin{align-self:flex-start; background:rgba(255,255,255,0.08); border-bottom-left-radius:4px;}
.chat-input{display:flex; gap:8px; padding:12px; border-top:1px solid var(--glass-border);}
.chat-input input{flex:1; padding:10px 13px; border-radius:100px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.04); color:var(--text); outline:none; font-size:13.5px;}
.chat-input button{width:38px; height:38px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0e27; cursor:pointer; font-size:15px;}

/* ---- Появление элементов при скролле ---- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.visible{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal-stagger.visible > *{opacity:1; transform:translateY(0);}
.reveal-stagger.visible > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.visible > *:nth-child(2){transition-delay:.15s;}
.reveal-stagger.visible > *:nth-child(3){transition-delay:.25s;}
.reveal-stagger.visible > *:nth-child(4){transition-delay:.35s;}

/* ---- Рипл-эффект на кнопках ---- */
.btn{position:relative; overflow:hidden;}
.ripple{
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:rgba(255,255,255,0.5); animation:ripple-anim .6s var(--ease);
}
@keyframes ripple-anim{ to{ transform:scale(3.2); opacity:0; } }

/* ---- Плавающий фон в hero ---- */
.hero{position:relative; margin-top:30px; padding:0 24px 20px;}
.hero-glow{
  position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle, rgba(124,159,255,0.18), transparent 70%);
  top:-120px; left:50%; transform:translateX(-50%);
  animation:glow-float 9s ease-in-out infinite;
}
.hero-visual{position:relative; max-width:720px; margin:0 auto 20px; height:260px; overflow:hidden; border-radius:30px; background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.06);}
.hero-mark{
  position:absolute; left:50%; top:52%; transform:translate(-50%, -50%) rotate(-18deg) skewY(-12deg);
  width:340px; height:150px; border-radius:22px; font-size:140px; font-weight:800; color:rgba(255,255,255,0.95);
  display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(255,255,255,0.92), rgba(233,236,255,0.84));
  box-shadow:0 20px 50px rgba(28,16,62,0.38); clip-path:polygon(12% 0%, 100% 26%, 60% 50%, 100% 100%, 5% 80%, 46% 52%);
  opacity:0.98;
}
.hero-mark::before,
.hero-mark::after{content:""; position:absolute; inset:18% 16% 18% 20%; background:rgba(255,255,255,0.1); transform:skewY(12deg); border-radius:14px;}
.hero-mark::after{inset:42% 40% 36% 10%; background:rgba(255,255,255,0.78);}
.hero-ribbon{
  position:absolute; left:20px; top:20px; display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px; letter-spacing:-0.02em;
  padding:12px 18px; border-radius:14px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; box-shadow:0 16px 36px rgba(0,0,0,0.18);
}
.hero-heading-wrap{max-width:950px; margin:0 auto; text-align:left;}
.eyebrow{display:inline-block; font-size:18px; color:var(--text); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); padding:12px 18px; border-radius:12px; margin-bottom:20px; box-shadow:0 18px 34px rgba(0,0,0,0.12);}
.hero h1{font-size:clamp(38px,6vw,96px); line-height:0.9; letter-spacing:-0.05em; margin:0 0 20px; font-weight:800; text-transform:uppercase; color:#fff;}
.hero h1 span{display:inline-block; color:#fff;}
.hero-tagline-row{max-width:860px; margin:20px auto 32px; display:flex; align-items:center; gap:18px; color:rgba(255,255,255,0.7); font-size:16px; letter-spacing:0.22em; text-transform:uppercase;}
.hero-tagline-row .line{display:block; flex:1; height:2px; background:linear-gradient(90deg, rgba(255,255,255,0.28), rgba(255,255,255,0.04));}
@keyframes glow-float{
  0%,100%{ transform:translateX(-50%) translateY(0) scale(1); }
  50%{ transform:translateX(-46%) translateY(20px) scale(1.08); }
}

/* ---- Числа статистики ---- */
.stat b{transition:transform .3s var(--ease);}
.stat:hover b{transform:scale(1.08);}

/* ---- Дополнительные интерактивные блоки ---- */
.status-section{padding-top:0;}
.status-strip{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px; border-radius:var(--radius-md);}
.status-copy{display:flex; align-items:center; gap:12px; min-width:240px;}
.status-copy b,.status-copy span{display:block;}
.status-copy b{font-size:14px; margin-bottom:3px;}
.status-copy span:last-child{font-size:12px; color:var(--text-dim);}
.status-dot{width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 5px rgba(110,231,168,.12), 0 0 14px var(--ok); animation:status-pulse 2s infinite;}
.status-dot.offline{background:#ff5f57; box-shadow:0 0 0 5px rgba(255,95,87,.12), 0 0 14px rgba(255,95,87,.7); animation:none;}
@keyframes status-pulse{50%{box-shadow:0 0 0 9px rgba(110,231,168,0), 0 0 18px var(--ok);}}
.status-metrics{display:flex; gap:25px; margin-left:auto;}
.status-metrics span{text-align:right;}
.status-metrics b,.status-metrics small{display:block;}
.status-metrics b{font-size:15px;}
.status-metrics small{font-size:11px; color:var(--text-dim); margin-top:2px;}
.status-refresh{font-size:12px; padding:8px 13px; white-space:nowrap;}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.feature-card{padding:24px; border-radius:var(--radius-md); min-height:225px; display:flex; flex-direction:column; align-items:flex-start;}
.feature-icon{width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:var(--accent); background:rgba(124,159,255,.14); font-size:22px; margin-bottom:20px;}
.feature-card h3{font-size:17px; margin:0 0 9px;}
.feature-card p{font-size:13.5px; line-height:1.55; color:var(--text-dim); margin:0 0 18px;}
.text-action{margin-top:auto; border:0; padding:0; background:none; color:var(--accent); font:600 13px inherit; cursor:pointer;}
.text-action span{display:inline-block; transition:transform .2s var(--ease);}
.text-action:hover span{transform:translateX(5px);}
.faq-section{padding-top:20px;}
.faq-list{max-width:760px; margin:auto;}
.faq-item{display:grid; grid-template-columns:1fr auto; gap:4px 18px; width:100%; text-align:left; border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:18px 20px; margin-bottom:10px; background:var(--glass); color:var(--text); cursor:pointer; font:600 14px inherit; transition:background .25s, border-color .25s;}
.faq-item:hover,.faq-item.open{background:var(--glass-strong); border-color:rgba(124,159,255,.4);}
.faq-item b{font-size:20px; line-height:14px; color:var(--accent); font-weight:400; transition:transform .25s;}
.faq-item.open b{transform:rotate(45deg);}
.faq-item p{grid-column:1 / -1; max-height:0; overflow:hidden; opacity:0; color:var(--text-dim); font-size:13.5px; font-weight:400; line-height:1.55; margin:0; transition:max-height .3s var(--ease), opacity .25s, margin .3s;}
.faq-item.open p{max-height:100px; opacity:1; margin-top:10px;}
@media (max-width:760px){.status-strip{align-items:flex-start; flex-wrap:wrap;}.status-metrics{order:3; width:100%; justify-content:space-between; margin:0;}.status-metrics span{text-align:left;}.feature-grid{grid-template-columns:1fr;}.feature-card{min-height:0;}.status-refresh{margin-left:auto;}}

/* ---- Наклон карточек тарифов (tilt через JS) ---- */
.plan{will-change:transform; transition:transform .25s var(--ease), border-color .35s;}

/* ---- Пульсация чат-пузыря ---- */
#chat-bubble::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent); opacity:0; animation:bubble-pulse 2.6s ease-out infinite;
}
@keyframes bubble-pulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}
#chat-bubble.has-unread{animation:bubble-shake .5s ease-in-out;}
@keyframes bubble-shake{
  0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-12deg); } 75%{ transform:rotate(12deg); }
}

/* ---- Header при скролле ---- */
header{transition:box-shadow .3s var(--ease), background .3s var(--ease);}
header.scrolled{box-shadow:0 8px 32px rgba(0,0,0,0.45);}

/* ---- Логотип живой ---- */
.logo-mark{transition:transform .4s var(--ease);}
.logo:hover .logo-mark{transform:rotate(-18deg) scale(1.1);}

/* ---- Модалки с лёгким bounce ---- */
.overlay.open .modal{animation:modal-pop .45s var(--ease);}
@keyframes modal-pop{
  0%{ transform:scale(0.9) translateY(14px); }
  60%{ transform:scale(1.02) translateY(-2px); }
  100%{ transform:scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important;}
  #chat-bubble::after, .hero-glow{animation:none !important;}
}

@media (max-width:640px){
  .hero-glow{width:280px; height:280px;}
  .overlay{align-items:flex-end; padding:0 !important;}
  .overlay .modal,.overlay.open .modal{max-width:none; width:100%; max-height:calc(100dvh - 14px); overflow-y:auto; border-radius:24px 24px 0 0; padding:26px 18px calc(22px + env(safe-area-inset-bottom)); transform:translateY(0);}
  .cabinet-modal h2{font-size:21px; padding-right:36px;}
  .cabinet-summary{grid-template-columns:1fr; gap:8px;}
  .cabinet-summary .cabinet-row{display:flex; align-items:center; justify-content:space-between; padding:12px 13px;}
  .cabinet-summary .cabinet-row span:last-child{margin-top:0; max-width:62%; text-align:right;}
  .cabinet-promo-row{align-items:stretch;}
  .cabinet-promo-row .btn{flex:0 0 auto;}
  .modal .close-x{top:14px; right:14px; width:36px; height:36px;}
  .modal .btn{min-height:46px;}
}

/* ---- iOS 18: blue actions on a mostly black surface ---- */
.btn{
  min-height:42px; padding:11px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background:#111214; color:#f5f7fb; box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 8px 20px rgba(0,0,0,.28);
  font-size:14px; font-weight:650; letter-spacing:.005em; transition:background .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s, filter .2s;
}
.btn:hover{background:#1a1c20; border-color:rgba(255,255,255,.2); box-shadow:0 2px 0 rgba(255,255,255,.08) inset, 0 10px 24px rgba(0,0,0,.38);}
.btn:focus-visible{outline:2px solid #9303C5; outline-offset:3px;}
.btn:active{transform:scale(.96); background:#0c0d0f; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 3px 8px rgba(0,0,0,.35);}
.btn-primary{background:#9303C5; border-color:#b52bdd; color:#fff; box-shadow:0 2px 0 rgba(255,255,255,.24) inset, 0 8px 22px rgba(147,3,197,.28);}
.btn-primary:hover{background:#a916d5; border-color:#c94be7; filter:none; box-shadow:0 2px 0 rgba(255,255,255,.28) inset, 0 10px 26px rgba(147,3,197,.38);}
.btn-primary:active{background:#7902a4;}
.btn-ghost{background:#0d0f12; border-color:rgba(255,255,255,.14); color:#f5f7fb;}
.btn-ghost:hover{background:#17191d;}
#chat-bubble,.chat-input button{background:#9303C5; border:1px solid #b52bdd; box-shadow:0 8px 24px rgba(147,3,197,.34);}
.chat-input button:hover{background:#a916d5;}

/* ---- Jet purple palette ---- */
body{background-color:#000000;}
.btn-primary,
#chat-bubble,
.chat-input button,
.period-btn.active{background:#9303C5; border-color:#b52bdd; color:#fff;}
.btn-primary:hover,
#chat-bubble:hover,
.chat-input button:hover{background:#a916d5; border-color:#c94be7;}
.btn-primary:active{background:#7902a4;}
.btn:focus-visible{outline-color:#9303C5;}
.btn-ghost{background:#000000; border-color:rgba(147,3,197,.38); color:#f8efff;}
.btn-ghost:hover{background:rgba(147,3,197,.16); border-color:#9303C5;}
.field input:focus,.field textarea:focus{border-color:#9303C5; background:rgba(147,3,197,.1);}
.plan.featured{border-color:rgba(147,3,197,.7); background:rgba(147,3,197,.12);}
.trial-banner{background:linear-gradient(120deg,rgba(147,3,197,.18),rgba(2,6,14,.72));}
.status-dot{background:#c96be8; box-shadow:0 0 0 5px rgba(147,3,197,.14),0 0 14px #9303C5;}
.feature-icon,.step .n{background:rgba(147,3,197,.18); color:#d26bea;}
.faq-item:hover,.faq-item.open{border-color:rgba(147,3,197,.65); background:rgba(147,3,197,.12);}