/* ===== Base ===== */
:root{
  --bg:#fff;--text:#3a3a3a;--muted:#7d8393;--card:#fff;--border:#E2E3E6;
  --brand:#00aec6;--brand-2:#27c7d7;--accent:#66b4dd;
  --cta:#ffc900;--cta-hover:#ffd433;--cta-text:#000;
  --radius:14px;--shadow:0 10px 30px rgba(2,8,23,.08)
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Fira Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);margin:0;line-height:1.6}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}

/* ===== Layout / Container ===== */
.container{width:min(1320px,100% - 40px);margin-inline:auto}
.section{padding:56px 0}
.section-bleed{position:relative;isolation:isolate}
.section-bleed::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:inherit;z-index:-1}

/* ===== Status banner ===== */
.status-banner{background:rgba(255,184,0,.12);border-bottom:1px solid rgba(255,184,0,.35);color:#9a7b00}
.status-banner .container{padding:12px 0}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border)}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:14px 0}
.logo img{height:44px;display:block}
.nav{display:flex;gap:12px;justify-content:center;align-items:center}
.nav a{padding:8px 10px;border-radius:10px;color:var(--text);font-weight:600}
.nav a.active{background:#eefbfe;border:1px solid #c6eef6}
.header-cta .btn-billing{background:var(--cta);color:var(--cta-text)}
.header-cta .btn-billing:hover{background:var(--cta-hover)}
.nav-toggle{display:none;position:relative;width:36px;height:28px;background:transparent;border:0;cursor:pointer}
.nav-toggle span{position:absolute;left:4px;right:4px;height:3px;background:#333;border-radius:3px;transition:.2s}
.nav-toggle span:nth-child(1){top:5px}.nav-toggle span:nth-child(2){top:12px}.nav-toggle span:nth-child(3){top:19px}

/* ===== Buttons ===== */
.btn{display:inline-block;padding:10px 18px;border-radius:8px;font-weight:700;cursor:pointer;transition:.2s}
.btn.primary{background:var(--cta);color:var(--cta-text);border:0;box-shadow:var(--shadow)}
.btn.primary:hover{background:var(--cta-hover)}
.btn.outline{border:2px solid var(--accent);color:var(--accent);background:transparent}
.btn.outline:hover{background:var(--accent);color:#fff}
.btn.wfull{display:block;width:100%;text-align:center}
.center{text-align:center}.mt16{margin-top:16px}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;padding:68px 0 46px;text-align:center;min-height:clamp(380px,52vh,560px)}
.hero .hero-container{max-width:980px;margin:0 auto}
.hero h1{font-size:32px;margin:0 0 10px}
.hero .lead{color:var(--muted);max-width:760px;margin:0 auto 16px}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hero-bg{position:absolute;inset:auto calc(50% - 50vw) 0 calc(50% - 50vw);height:320px;
  background:
    radial-gradient(1200px 320px at 55% 0, rgba(15,184,196,.30), transparent),
    radial-gradient(900px 240px at 25% 12%, rgba(39,199,215,.25), transparent),
    linear-gradient(180deg, rgba(10,179,191,.14), transparent)
}

/* ===== Sections ===== */
.section-title{text-align:center;font-size:28px;line-height:1.2;margin:0 0 24px}

/* Feature grid */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.feature-card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.04);padding:18px;display:flex;flex-direction:column;gap:6px;height:100%}
.feature-ico{font-size:20px}
.feature-title{font-weight:800;color:var(--accent)}
.feature-more{margin-top:auto;font-weight:600}

/* Pricing */
.section-alt{background:linear-gradient(180deg, rgba(0,174,198,.08), rgba(0,174,198,.04) 60%, transparent)}
.pricing2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.price-card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.04);padding:24px;display:flex;flex-direction:column;position:relative;height:100%}
.price-card .badge{position:absolute;top:12px;right:12px;background:var(--cta);color:var(--cta-text);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}
.price-card h3{margin:0 0 8px}
.price{font-size:18px;margin:4px 0 12px}.price span{font-size:34px;font-weight:800}
.price-list{list-style:none;margin:0 0 14px;padding:0}
.price-card .btn{margin-top:auto}

/* Benefits */
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mini-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 8px 20px rgba(0,0,0,.04)}
.mini-title{font-weight:800;margin-bottom:4px}.mini-sub{color:var(--muted);font-size:14px}

/* Footer (если есть) 
.footer{background:#f5f5f5;padding:40px 20px;text-align:center;font-size:14px;color:var(--muted)}
.footer a{color:var(--accent)}
*/

/* Убираем лишний отступ сверху */
.hero {
  position: relative;
  margin-top: 0;
  padding: 60px 0;              /* внутр. отступы сверху/снизу */
  background: linear-gradient(to bottom, #e0f7fa, #ffffff); 
  /* мягкий голубой переход вниз */
}

.hero-bg {
  display: none;                /* фон теперь задаём через .hero */
}

.hero h1, 
.hero p, 
.hero .cta {
  position: relative;
  z-index: 2;                   /* чтобы текст был поверх */
}


/* Футер */
footer {
    background: #f9fafb;
    padding: 40px 0;
    border-top: 1px solid #eee;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-column {
    flex: 1;
    min-width: 200px;
}

.footer-column h4 {
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 6px;
}

.footer-column ul li a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-column ul li a:hover {
    color: #007bff;
}


/* ===== Responsive ===== */
@media (max-width:1100px){
  .feature-grid,.pricing2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:840px){
  .header-inner{grid-template-columns:auto auto;grid-template-areas:"logo toggle" "nav nav" "cta cta"}
  .logo{grid-area:logo}.nav-toggle{grid-area:toggle;display:block;justify-self:end}
  .nav{grid-area:nav;display:none;flex-wrap:wrap;justify-content:flex-start;margin:10px -6px 0}
  .nav.open{display:flex}
  .header-cta{grid-area:cta;margin-top:6px}
}
@media (max-width:760px){
  .feature-grid,.pricing2,.benefits{grid-template-columns:1fr}
  .hero{padding:54px 0 36px;min-height:auto}
  .hero h1{font-size:28px}
  .hero-bg{height:240px}
  .section{padding:44px 0}
}

/* fix: убираем горизонтальную прокрутку и подрезаем bleed */
html, body { overflow-x: hidden; }

/* вместо inset:0 calc(50% - 50vw) — вариант без субпиксельного переполнения */
.section-bleed::before{
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
}

.pricing-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pricing-card {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pricing-card .pricing-header {
  margin-bottom: 1rem;
  position: relative;
}
.pricing-card .price {
  font-size: 2rem;
  font-weight: 700;
  margin-top: .5rem;
}
.pricing-card .price span { font-size: 1rem; font-weight: 400; }
.pricing-card ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.pricing-card ul li {
  margin: .5rem 0;
}
.pricing-card .btn {
  width: 100%;
}
.pricing-card.popular {
  border: 2px solid #ffcc00;
}
.pricing-card .badge {
  background: #ffcc00;
  color: #000;
  font-size: .8rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: .5rem;
  position: absolute;
  top: 0;
  right: 0;
}

.faq {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.faq-item h3 {
  font-size: 1.2rem;
  margin-bottom: .3rem;
}
.faq-item p {
  margin: 0;
  color: #555;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.contact-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.contact-ico {
  font-size: 28px;
  line-height: 1;
}

.contact-form {
  margin-top: 20px;
}

.contact-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.contact-form label {
  margin-bottom: 6px;
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
}

.contact-form button {
  margin-top: 10px;
}

.alert{padding:12px 14px;border-radius:10px;margin:10px 0;font-weight:600}
.alert.success{background:#ecfdf5;border:1px solid #10b981;color:#065f46}
.alert.error{background:#fef2f2;border:1px solid #ef4444;color:#991b1b}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  background: #0056b3; /* фирменный синий */
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: none; /* скрыта по умолчанию */
  z-index: 999;
  transition: background 0.3s;
}
.back-to-top:hover {
  background: #003f82;
}