:root{
  --bg1:#0a1330;--bg2:#0b1e3a;--c-blue:#00bfff;--c-teal:#00d4a8;--text:#e8f6ff;--muted:#b8e4f8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Roboto',Arial,sans-serif;color:var(--text);background:linear-gradient(135deg,var(--bg1),var(--bg2));}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,19,48,.55);backdrop-filter:blur(10px);border-bottom:1px solid #ffffff14}
.header-row{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:'Inter',Arial,sans-serif;font-weight:700;color:#fff;font-size:1.1rem}
.nav{display:flex;gap:16px}
.nav-link{color:var(--muted);text-decoration:none;font-size:.95rem}
.nav-link:hover{color:#fff}

/* Buttons */
.btn{appearance:none;border:none;cursor:pointer;display:inline-block;text-decoration:none;color:#fff;padding:.9rem 1.2rem;border-radius:14px;transition:transform .2s,box-shadow .25s,background .25s}
.primary{background:linear-gradient(90deg,rgba(0,191,255,.2),rgba(0,212,168,.2));border:1px solid #00bfff30;box-shadow:0 6px 26px #00bfff33}
.primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 36px #00d4a877,0 4px 26px #00bfff66}
.ghost{background:transparent;border:1px solid #00bfff33}
.ghost:hover{background:rgba(0,191,255,.12);box-shadow:0 6px 22px #00bfff44}
.pulse{animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #00bfff66}70%{box-shadow:0 0 0 16px #00bfff00}100%{box-shadow:0 0 0 0 #00bfff00}}

/* Hero */
.hero{padding:92px 0 64px 0;position:relative;background:center/cover no-repeat}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 65% 30%,#00bfff22,transparent 60%),radial-gradient(60% 40% at 35% 70%,#00d4a81f,transparent 60%);pointer-events:none}
.hero-wrap{display:flex;gap:36px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.hero-text h1{font-family:'Inter',Arial,sans-serif;font-weight:700;font-size:2.2rem;margin:.2rem 0 1rem}
.hero-description{color:var(--muted);font-size:1.08rem;line-height:1.6;max-width:780px}
.hero-cta{display:flex;gap:12px;margin-top:1.4rem;flex-wrap:wrap;justify-content:center}

/* How */
.how{padding:48px 0}
.section-subtitle{color:var(--muted);text-align:center;margin-top:-8px}
/* How (bigger vertical cards) */
.how-grid{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.how-card{background:rgba(11,30,44,.68);backdrop-filter:blur(10px);border:1px solid #00bfff22;border-radius:18px;box-shadow:0 10px 28px #00bfff22;padding:24px 22px;min-width:280px;max-width:340px;text-align:center;transition:transform .2s, box-shadow .25s}
.how-card:hover{transform:translateY(-6px);box-shadow:0 14px 38px #00bfff44,0 8px 30px #00d4a855}
.how-icon{display:flex;justify-content:center;margin-bottom:12px}
.how-img{width:88px;height:88px;object-fit:cover;border-radius:18px;border:1px solid #00bfff33;box-shadow:0 12px 28px #00bfff33, 0 6px 18px #00d4a822;background:#0b1e3a}
.how-card:hover .how-img{box-shadow:0 16px 36px #00bfff66, 0 10px 28px #00d4a855}
.how-title{font-family:'Inter',Arial,sans-serif;font-weight:700;margin:8px 0 6px;font-size:1.15rem}
.how-text{color:var(--muted);line-height:1.6}
@media (max-width:540px){
  .how-card{min-width:240px;padding:20px}
  .how-img{width:72px;height:72px;border-radius:16px}
}

/* How icons as images */
.how-icon{display:flex;justify-content:center}
.how-img{width:64px;height:64px;object-fit:cover;border-radius:16px;border:1px solid #00bfff33;box-shadow:0 8px 24px #00bfff33, 0 4px 16px #00d4a822;background:#0b1e3a}
.how-card:hover .how-img{box-shadow:0 10px 30px #00bfff66, 0 6px 22px #00d4a855}
@media (max-width:540px){.how-img{width:52px;height:52px;border-radius:14px}}

/* Pricing */
.pricing{padding:48px 0}
.price-list{list-style:none;margin:18px auto 20px;padding:0;max-width:560px;display:flex;flex-direction:column;gap:12px}
.price-row{display:flex;align-items:center;justify-content:space-between;background:rgba(11,30,44,.6);border:1px solid #00bfff1f;border-radius:14px;padding:14px 16px;box-shadow:0 6px 26px #00d4a822}
.price-name{font-family:'Inter',Arial,sans-serif;color:#fff}
.price-value{font-weight:500}
.muted{color:var(--muted)}

/* Pricing (cards) */
.price-cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:18px auto 22px;max-width:980px}
.price-card{flex:1 1 260px;max-width:300px;min-width:220px;background:rgba(11,30,44,.6);border:1px solid #00bfff1f;border-radius:16px;padding:18px 16px;box-shadow:0 6px 26px #00d4a822;text-align:center;transition:transform .2s, box-shadow .25s}
.price-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px #00bfff44,0 6px 28px #00d4a855}
.price-icon{font-size:1.8rem;margin-bottom:8px}
.price-name{font-family:'Inter',Arial,sans-serif;font-weight:700;margin-bottom:6px}
.price-sum{font-weight:500}

/* Remove old list layout spacing if present */
.price-list{display:none}

/* Why */
.why{padding:48px 0}
/* Why (compact cards, larger inner icons) */
.why-grid{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.why-card{background:rgba(11,30,44,.64);border:1px solid #00d4a81f;border-radius:18px;box-shadow:0 10px 28px #00bfff22;padding:22px 20px;flex:1 1 420px;min-width:320px;max-width:460px;text-align:center;transition:transform .2s, box-shadow .25s;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:230px}
.why-card:hover{transform:translateY(-6px);box-shadow:0 14px 38px #00bfff44,0 8px 30px #00d4a855}
.why-icon{display:flex;justify-content:center;margin-bottom:12px}
.why-img{width:120px;height:120px;object-fit:cover;border-radius:22px;border:1px solid #00bfff33;box-shadow:0 14px 30px #00bfff33, 0 8px 20px #00d4a822;background:#0b1e3a}
.why-card:hover .why-img{box-shadow:0 18px 40px #00bfff66, 0 12px 30px #00d4a855}
.why-title{font-family:'Inter',Arial,sans-serif;font-weight:800;font-size:1.26rem;margin:8px 0 6px}
.why-text{color:var(--muted);font-size:1.08rem;line-height:1.72}
@media (max-width:980px){.why-card{flex:1 1 100%;min-width:0;max-width:680px;min-height:220px}}
@media (max-width:540px){.why-img{width:96px;height:96px;border-radius:18px}.why-card{padding:18px;min-height:210px}.why-title{font-size:1.18rem}.why-text{font-size:1.02rem;line-height:1.68}}

/* Why images */
.why-icon{display:flex;justify-content:center;margin-bottom:10px}
.why-img{width:72px;height:72px;object-fit:cover;border-radius:18px;border:1px solid #00bfff33;box-shadow:0 10px 26px #00bfff33, 0 6px 18px #00d4a822;background:#0b1e3a}
.why-card:hover .why-img{box-shadow:0 14px 34px #00bfff66, 0 10px 26px #00d4a855}
@media (max-width:540px){.why-img{width:60px;height:60px;border-radius:16px}}

/* Connect */
.connect{padding:48px 0}
.connect-wrap{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap}
.connect-image{flex:1 1 340px;min-width:260px;display:flex;justify-content:center}
.phone-img{width:100%;max-width:360px;height:auto;border-radius:24px;border:1px solid #00bfff33;box-shadow:0 10px 36px #00d4a855,0 4px 22px #00bfff44;display:block}
.connect-info{flex:1 1 360px;min-width:260px;background:rgba(11,30,44,.55);border:1px solid #00bfff22;border-radius:16px;padding:18px 16px}
.steps{margin:10px 0 14px 20px;color:var(--muted)}

/* FAQ redesigned */
.faq{padding:56px 0}
.faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{border:none;background:transparent;border-radius:16px;overflow:hidden;box-shadow:0 6px 22px #00bfff1a}
.faq summary{background:rgba(11,30,44,.62);padding:16px 50px 16px 18px;border:1px solid #00bfff1f;border-radius:16px;cursor:pointer;list-style:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;font-family:'Inter',Arial,sans-serif;font-weight:700;color:#eaf7ff;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{content:"\25BE"; /* ▼ */ position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(0deg); color:#00bfff; transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.faq details[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.faq .faq-answer{background:rgba(11,30,44,.45);border:1px solid #00bfff14;border-top:none;border-bottom-left-radius:16px;border-bottom-right-radius:16px;color:#bfeaff;padding:14px 18px;line-height:1.7}

/* remove old plus marker styles */
.faq summary::before{content:""}
.faq details[open] summary::before{content:""}

/* FAQ marker only plus */
.faq summary{list-style:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.faq summary::marker{content:""}

/* Footer */
.site-footer{margin-top:24px;background:center/cover no-repeat; padding:28px 0 22px;border-top:1px solid #ffffff14}
.footer-row{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.footer-brand{font-family:'Inter',Arial,sans-serif;font-weight:700;color:#fff}
.footer-description{color:var(--muted);max-width:520px}
.footer-actions{display:flex;gap:12px;align-items:center}
.footer-contact-link{color:#00bfff;text-decoration:none}
.footer-contact-link:hover{color:#00d4a8}

/* Animations */
.fade-in{opacity:0;animation:fadeIn 1s .18s forwards}
.fade-in-up{opacity:0;transform:translateY(35px);animation:fadeInUp .9s .18s forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}

/* Pulse dots overlay */
.pulse-dots{position:absolute;inset:0;pointer-events:none}
.hero{position:relative}
.hero .hero-wrap{position:relative;z-index:2}
.hero .pulse-dots{z-index:1}
.site-footer{position:relative}
.site-footer .pulse-dots{z-index:0}
.pulse-dot{position:absolute;border-radius:50%;background:radial-gradient(circle at 50% 50%, #00d4a8 0%, #00bfff 60%, rgba(0,191,255,0) 70%);opacity:.9;filter:drop-shadow(0 0 6px #00bfff88)}
@keyframes dotPulse{0%{transform:scale(.6);opacity:.45}50%{transform:scale(1);opacity:1}100%{transform:scale(.6);opacity:.45}}

/* Responsive */
@media (max-width: 860px){
  .header-row{height:60px}
  .nav{display:none}
}
@media (max-width: 540px){
  .container{padding:0 12px}
  .hero-text h1{font-size:1.45rem}
  .hero-description{font-size:.98rem}
}

/* Plans (three cards) */
.plans{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:18px auto 24px;max-width:1100px}
.plan-card{position:relative;flex:1 1 300px;max-width:340px;min-width:260px;background:rgba(11,30,44,.7);border:1px solid #00bfff1f;border-radius:18px;padding:22px 18px;box-shadow:0 10px 28px #00bfff22;text-align:center;transition:transform .2s, box-shadow .25s}
.plan-card:hover{transform:translateY(-6px);box-shadow:0 14px 38px #00bfff44,0 8px 30px #00d4a855}
.plan-card .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#00bfff,#00d4a8);color:#001522;font-weight:700;border-radius:999px;padding:6px 12px;font-size:.78rem;letter-spacing:.3px}
.plan-card.popular{outline:1px solid #3bdcf3;box-shadow:0 0 0 3px rgba(0,191,255,.18),0 16px 44px #00bfff33}
.plan-title{font-family:'Inter',Arial,sans-serif;font-weight:700;font-size:1.2rem;margin-bottom:10px}
.plan-price{font-weight:800;font-size:2.2rem}
.plan-price .rub{font-size:1.1rem;opacity:.9;margin-right:4px}
.plan-price .per{font-size:.95rem;color:var(--muted);margin-left:6px;font-weight:500}
.save{color:#00d4a8;font-size:.85rem;margin:6px 0 8px}
.plan-features{list-style:none;margin:12px 0 18px;padding:0;text-align:left}
.plan-features li{position:relative;padding-left:26px;margin:8px 0;color:var(--muted)}
.plan-features li:before{content:"✓";position:absolute;left:0;top:0;color:#00d4a8;background:rgba(0,212,168,.16);border-radius:6px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;line-height:1}

/* Center section titles */
.how h2,.pricing h2,.why h2,.connect h2,.faq h2{ text-align:center; }

/* FAQ spacing & line-height */
.faq details{ padding:14px 16px; }
.faq summary{ line-height:1.55; }
.faq p{ line-height:1.65; }

/* How steps numbered */
.how-steps{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.how-step{position:relative;flex:1 1 260px;max-width:320px;min-width:240px;background:rgba(11,30,44,.68);border:1px solid #00bfff22;border-radius:18px;padding:32px 24px 26px;box-shadow:0 10px 28px #00bfff22;text-align:center;transition:transform .2s, box-shadow .25s}
.how-step:hover{transform:translateY(-6px);box-shadow:0 14px 38px #00bfff44,0 8px 30px #00d4a855}
.step-num{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:999px;background:linear-gradient(90deg,#00bfff,#00d4a8);color:#001522;display:flex;align-items:center;justify-content:center;font-family:'Inter',Arial,sans-serif;font-weight:800;box-shadow:0 6px 18px #00bfff66}
.step-media{display:flex;justify-content:center;margin:16px 0 10px}
.step-img{width:104px;height:104px;border-radius:22px;border:1px solid #00bfff33;object-fit:cover;box-shadow:0 14px 30px #00bfff33,0 8px 20px #00d4a822;background:#0b1e3a}
.how-step:hover .step-img{box-shadow:0 18px 40px #00bfff66, 0 12px 30px #00d4a855}
.step-title{font-family:'Inter',Arial,sans-serif;font-weight:700;margin:10px 0 8px;font-size:1.15rem}
.step-text{color:var(--muted);line-height:1.7}
.how-cta{display:flex;justify-content:center;margin-top:18px}
@media (max-width:540px){
  .how-step{min-width:240px;max-width:280px;padding:24px 18px 20px}
  .step-img{width:84px;height:84px;border-radius:18px}
}

/* Center connect button (not stretched) + left text */
.connect-info{ text-align:left }
.connect-info h2{ text-align:center }
.connect-info .btn{ display:block; margin:16px auto 0; width:auto; min-width:260px; text-align:center; }

/* Enlarge connect section */
.connect-block{padding:56px 0 44px}
.connect-container{gap:38px}
.connect-img img{max-width:420px}
.connect-info{padding:24px 22px 22px}
.connect-info .steps{font-size:1.06rem;}
.connect-info h2{font-size:1.4rem}