
:root{
  --red:#E31837; --red-dark:#B01228; --red-glow:rgba(227,24,55,.35); --black:#0A0A0A; --dark:#111111;
  --card:#141414; --card-hover:#1a1a1a; --border:#1e1e1e; --border-light:#2a2a2a;
  --white:#fff; --gray1:#f0f0f0; --gray2:#aaa; --gray3:#666; --gray4:#333;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 14% 10%, rgba(227,24,55,.16), transparent 28%),
    radial-gradient(circle at 86% 4%, rgba(255,255,255,.05), transparent 18%),
    linear-gradient(180deg, #080808 0%, #0c0c0c 46%, #090909 100%);
  color:var(--white); font-family:'DM Sans',sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
#hero-honeycomb{
  position:fixed; inset:0; width:100vw; height:100vh;
  pointer-events:none; z-index:0; opacity:.74;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.04));
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:88px 88px; opacity:.18;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.75), transparent 92%);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
main, header, footer, .mobile-menu{position:relative; z-index:1}
.container,.section .container{width:min(1320px, calc(100% - 32px)); margin:0 auto}

.header{position:fixed; inset:0 0 auto 0; z-index:1000; padding:0 clamp(16px,3vw,40px); transition:all .35s ease}
.header.scrolled{background:rgba(10,10,10,.92); backdrop-filter:blur(22px) saturate(1.15); border-bottom:1px solid var(--border)}
.header-inner{max-width:1320px; margin:0 auto; height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.logo{display:inline-flex; align-items:center; gap:12px}
.logo-image{width:55px; max-width:55px; height:auto; object-fit:contain; filter:drop-shadow(0 4px 14px rgba(227,24,55,.16))}
.logo-text{font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:.08em; line-height:1}
.logo-text em{font-style:normal; color:var(--red)}
.nav{display:flex; gap:24px; align-items:center}
.nav a{color:var(--gray2); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; position:relative; padding:4px 0; transition:color .3s}
.nav a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; border-radius:2px; background:var(--red); transition:width .35s ease}
.nav a:hover{color:var(--white)}
.nav a:hover::after{width:100%}
.header-right{display:flex; align-items:center; gap:16px}
.header-phone{color:var(--white); font-size:14px; font-weight:700; letter-spacing:.02em; display:flex; align-items:center; gap:8px}
.header-phone .dot{width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red-glow)}
.btn-glass{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 36px; border-radius:12px; border:1px solid rgba(227,24,55,.3); background:linear-gradient(135deg, rgba(227,24,55,.2) 0%, rgba(227,24,55,.05) 100%); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); color:var(--white); font-family:'DM Sans',sans-serif; font-weight:700; font-size:15px; overflow:hidden; transition:all .4s cubic-bezier(.16,1,.3,1); letter-spacing:.03em; box-shadow:0 4px 30px rgba(227,24,55,.1), inset 0 1px 0 rgba(255,255,255,.1)}
.btn-glass::before{content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,.12), transparent 52%); pointer-events:none}
.btn-glass:hover{transform:translateY(-3px) scale(1.02); border-color:rgba(227,24,55,.65); box-shadow:0 8px 40px rgba(227,24,55,.28), 0 0 60px rgba(227,24,55,.08), inset 0 1px 0 rgba(255,255,255,.15); background:linear-gradient(135deg, rgba(227,24,55,.35), rgba(227,24,55,.1))}
.btn-glass .btn-shine{position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transform:skewX(-20deg); transition:left .7s ease}
.btn-glass:hover .btn-shine{left:150%}
.btn-ghost{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 30px; border-radius:12px; border:1.5px solid var(--border-light); background:rgba(255,255,255,.02); backdrop-filter:blur(10px); color:var(--white); font-weight:600; font-size:15px; transition:all .35s ease}
.btn-ghost:hover{border-color:var(--red); background:rgba(227,24,55,.08); transform:translateY(-2px); box-shadow:0 4px 20px rgba(227,24,55,.15)}
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.02); cursor:pointer}
.burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--white); transition:transform .25s ease, opacity .25s ease}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed; left:16px; right:16px; top:92px; z-index:999; border:1px solid rgba(255,255,255,.07); border-radius:20px; background:rgba(10,10,10,.95); backdrop-filter:blur(22px); padding:14px; display:grid; gap:8px; opacity:0; pointer-events:none; transform:translateY(-8px); transition:all .25s ease}
.mobile-menu.open{opacity:1; pointer-events:auto; transform:translateY(0)}
.mobile-menu a{padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); color:var(--white); font-weight:700}
.mobile-menu a:hover{background:rgba(227,24,55,.08); border-color:rgba(227,24,55,.28)}

.hero{padding:138px 0 34px; position:relative}
.hero::before{content:''; position:absolute; inset:0 0 auto 0; height:360px; background:radial-gradient(circle at 50% 0%, rgba(227,24,55,.18), transparent 60%); pointer-events:none}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr); gap:24px; align-items:stretch}
.callback-side{display:flex; align-items:stretch}
.pricing-callback-wrap{width:100%; position:relative; display:flex; align-items:stretch}
.pricing-callback-glow{position:absolute; inset:-40px; border-radius:36px; pointer-events:none; background:radial-gradient(circle at 50% 50%, rgba(227,24,55,.18), transparent 62%); filter:blur(28px); opacity:.85}
.pricing-callback-card{position:relative; width:100%; padding:34px; border-radius:28px; background:linear-gradient(180deg, rgba(20,20,20,.96) 0%, rgba(12,12,12,.96) 100%); border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(227,24,55,.08); overflow:hidden}
.pricing-callback-card::before{content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 42%, transparent 100%); pointer-events:none}
.pricing-callback-card > *{position:relative; z-index:1}
.form-input{width:100%; padding:16px 20px; border-radius:10px; border:1px solid var(--border); background:var(--dark); color:var(--white); font-size:15px; font-family:'DM Sans',sans-serif; outline:none; transition:border-color .3s, box-shadow .3s; margin-bottom:12px}
.form-input:focus{border-color:var(--red); box-shadow:0 0 0 3px rgba(227,24,55,.15)}
.form-input::placeholder{color:var(--gray3)}
.hero-form-badge{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; margin-bottom:18px; border-radius:999px; border:1px solid rgba(227,24,55,.24); background:rgba(227,24,55,.09); color:#ff6a7d; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase}
.pricing-callback-card h3{font-family:'Outfit',sans-serif; font-size:clamp(28px,3vw,38px); font-weight:800; line-height:1.05; margin-bottom:10px; color:var(--white)}
.pricing-callback-card p{color:var(--gray2); font-size:15px; line-height:1.7; margin-bottom:20px}
.hero-form-input{margin-bottom:14px; padding:18px 20px; border-radius:14px; background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.08)}
.hero-form-btn{width:100%; margin-top:4px}
.hero-form-note{color:var(--gray3); font-size:12px; line-height:1.6; margin-top:16px}
.hero-form-note a{color:var(--white); font-weight:700}
.hero-form-note a:hover{color:var(--red)}
.form-success{display:none; text-align:center; padding:18px 0 8px}
.form-success.show{display:block}
.form-success .check{width:52px; height:52px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(227,24,55,.12); border:1px solid rgba(227,24,55,.25); color:#ff6a7d; font-size:26px; font-weight:800}
.form-success h4{font-size:22px; font-weight:800; margin-bottom:8px}
.form-success p{margin-bottom:0}
.hero-panel,.box,.note-card{background:linear-gradient(180deg, rgba(20,20,20,.98), rgba(14,14,14,.98)); border:1px solid rgba(255,255,255,.06); border-radius:24px; box-shadow:0 22px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.03)}
.hero-panel{padding:36px; position:relative; overflow:hidden}
.hero-panel::before{content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--red), rgba(227,24,55,.15), var(--red))}
.hero-kicker{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid rgba(227,24,55,.22); background:rgba(227,24,55,.08); color:#ff6a7d; font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; margin-bottom:18px}
.hero h1{font-family:'Outfit',sans-serif; font-size:clamp(38px,5vw,66px); line-height:.96; letter-spacing:-.03em; font-weight:900; margin-bottom:18px}
.hero h1 small{display:block; margin-top:16px; font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.6; text-transform:uppercase; letter-spacing:.22em; color:var(--gray2); font-weight:700}
.hero-sub{font-size:16px; color:var(--gray2); line-height:1.8; max-width:720px}
.hero-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px}
.meta-item{padding:18px; border-radius:18px; border:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.02)}
.meta-item strong{display:block; font-family:'Outfit',sans-serif; font-size:24px; font-weight:800; margin-bottom:4px}
.meta-item span{font-size:12px; color:var(--gray2); text-transform:uppercase; letter-spacing:.12em; font-weight:700}

.cta{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:16px 24px; border-radius:14px; border:1px solid rgba(227,24,55,.3); background:linear-gradient(135deg, rgba(227,24,55,.22) 0%, rgba(227,24,55,.06) 100%); color:var(--white); font-weight:800; transition:all .35s ease; box-shadow:0 4px 30px rgba(227,24,55,.12), inset 0 1px 0 rgba(255,255,255,.08)}
.cta:hover{transform:translateY(-2px); border-color:rgba(227,24,55,.55); box-shadow:0 10px 32px rgba(227,24,55,.25)}

.section{padding:0 0 42px}
.section .container{position:relative}
.section-heading{text-align:left; margin-bottom:22px}
.section-heading h2{font-family:'Bebas Neue',sans-serif; font-size:clamp(38px,4vw,60px); line-height:.95; letter-spacing:.04em}
.section-heading h2 em{font-style:normal; color:var(--red)}
.section-heading p{margin-top:10px; color:var(--gray2); font-size:15px; line-height:1.8; max-width:760px}
.red-line{width:88px; height:3px; border-radius:999px; background:linear-gradient(90deg, var(--red), rgba(227,24,55,.2)); margin-top:16px}
.price-nav{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px}
.price-nav a{padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); color:var(--gray2); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:all .3s ease}
.price-nav a:hover{border-color:rgba(227,24,55,.26); color:var(--white); background:rgba(227,24,55,.08)}
.price-nav a.active{background:rgba(227,24,55,.14); color:var(--white); border-color:rgba(227,24,55,.34); box-shadow:0 8px 24px rgba(227,24,55,.12)}
.box{padding:0}
.table-wrap{overflow:auto; margin-bottom:18px}
.table-wrap table{width:100%; border-collapse:collapse; min-width:760px}
.table-wrap th,.table-wrap td{padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; vertical-align:top}
.table-wrap thead th{position:sticky; top:0; background:linear-gradient(180deg, rgba(227,24,55,.22), rgba(227,24,55,.08)); color:var(--white); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; z-index:1}
.table-wrap tbody tr:hover td{background:rgba(255,255,255,.02)}
.table-wrap td{font-size:14px; color:var(--gray1)}
.table-wrap td strong{color:var(--white)}
.note-card{padding:22px; margin-bottom:14px}
.note-card h3{font-size:15px; font-weight:800; margin-bottom:8px}
.note-card p{font-size:13px; color:var(--gray2); line-height:1.7}
.note-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:10px}
.footer{margin-top:18px; padding:44px 16px 28px; border-top:1px solid var(--border); background:rgba(8,8,8,.78); backdrop-filter:blur(10px)}
.footer-grid{max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:24px}
.footer-brand p{color:var(--gray2); font-size:14px; line-height:1.8; margin-top:14px; max-width:320px}
.footer-col{display:flex; flex-direction:column; gap:10px}
.footer-col-title{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray3); font-weight:800; margin-bottom:8px}
.footer-col a{color:var(--gray2); font-size:14px; transition:color .25s ease}
.footer-col a:hover{color:var(--white)}
.footer-messengers{display:flex; gap:10px; margin-top:6px; flex-wrap:nowrap; align-items:center}
.footer-contact{min-width:0}
.footer-contact .messenger-btn{white-space:nowrap}
.messenger-btn{display:inline-flex; align-items:center; gap:8px; padding:11px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03); color:var(--white); font-size:13px; font-weight:700}
.messenger-btn:hover{border-color:rgba(227,24,55,.28); background:rgba(227,24,55,.08)}
.messenger-icon{font-size:12px; color:var(--red)}
.footer-bottom{max-width:1320px; margin:24px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; gap:16px; color:var(--gray3); font-size:12px}
.page-cta{padding-bottom:54px}
.page-cta .cta-shell{padding:28px; border-radius:24px; background:linear-gradient(135deg, rgba(227,24,55,.18), rgba(20,20,20,.96)); border:1px solid rgba(227,24,55,.18); display:flex; align-items:center; justify-content:space-between; gap:20px}
.page-cta h3{font-family:'Outfit',sans-serif; font-size:32px; line-height:1.05; font-weight:800}
.page-cta p{color:var(--gray2); line-height:1.7; max-width:680px; margin-top:10px}
.page-cta .cta-buttons{display:flex; flex-wrap:wrap; gap:12px}

@media (max-width: 1180px){
  .hero-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 980px){
  .nav,.header-phone,.header-right .btn-glass{display:none}
  .burger{display:flex}
}
@media (max-width: 768px){
  .container,.section .container{width:min(100% - 24px, 1320px)}
  .hero{padding-top:112px}
  .hero-panel,.note-card{padding:22px}
  .pricing-callback-card{padding:24px 20px}
  .hero h1{font-size:34px}
  .hero h1 small{letter-spacing:.14em}
  .hero-meta{grid-template-columns:1fr}
  .section-heading h2{font-size:42px}
  .note-grid,.footer-grid,.page-cta .cta-shell{grid-template-columns:1fr; display:grid}
  .page-cta .cta-shell{padding:22px}
  .page-cta h3{font-size:26px}
  .footer-bottom{flex-direction:column}
  .table-wrap th,.table-wrap td{padding:13px 14px}
}
