:root{
--bg:#020a07;--bg2:#06130d;--panel:#07150f;--panel2:#0a1b13;
--text:#f6f8f7;--muted:#b7c3bd;--line:rgba(66,255,66,.28);
--green:#45f235;--green2:#84ff72;--shadow:0 0 40px rgba(52,255,52,.08);
--radius:24px;--radius-sm:16px;--max:1500px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 0,rgba(38,145,63,.11),transparent 35%),var(--bg);color:var(--text);font-family:Arial,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img,video{max-width:100%;display:block}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(calc(100% - 40px),var(--max));margin:auto}.section{padding:36px 0}.panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(7,21,15,.98),rgba(3,12,8,.97));box-shadow:var(--shadow);overflow:hidden}.green{color:var(--green)}.eyebrow{color:var(--green);font-size:14px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.lead{font-size:clamp(16px,1.25vw,22px);line-height:1.55;color:#d2dbd6}.muted{color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(52px,5.4vw,92px);line-height:.92;letter-spacing:-.055em;margin-bottom:28px}h2{font-size:clamp(40px,4vw,70px);line-height:.96;letter-spacing:-.045em;margin-bottom:18px}h3{font-size:clamp(20px,1.65vw,28px);line-height:1.05}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;border-radius:14px;border:1px solid rgba(75,255,68,.42);font-weight:900;gap:10px;transition:.2s}.btn:hover{transform:translateY(-1px);box-shadow:0 0 28px rgba(69,242,53,.2)}.btn-primary{background:linear-gradient(180deg,var(--green2),var(--green));color:#021005;border:0}.btn-dark{background:#07120d;color:#fff}.btn.small{min-height:46px;padding:0 18px;font-size:14px}.btn.block{width:100%}.icon{width:48px;height:48px;border:1px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green);font-weight:900;flex:0 0 auto}.icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}.topbar{position:sticky;top:0;z-index:50;background:rgba(2,10,7,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(70,255,80,.15)}.topbar-inner{height:94px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:12px;min-width:310px}.brand img{width:58px;height:58px;object-fit:contain}.brand-copy strong{font-size:26px;letter-spacing:-.03em}.brand-copy small{display:block;color:#95a39b;font-size:11px}.nav{margin-left:auto;display:flex;gap:34px;align-items:center;font-weight:700}.nav a{color:#e5ebe8}.nav a:hover{color:var(--green)}.header-contact{text-align:right;white-space:nowrap}.header-contact a{font-size:22px;font-weight:900}.header-contact small{display:block;color:#94a097;font-size:11px;margin-top:3px}.mobile-toggle{display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--line);border-radius:12px;background:#07120d;color:#fff;font-size:22px}
/* Hero */
.hero{padding:58px 0 22px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}.hero-copy{padding:24px 4px}.hero-copy .eyebrow{margin-bottom:22px}.hero-copy h1 .line{display:block}.hero-art{position:relative;min-height:620px;border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle at 48% 50%,rgba(52,255,54,.17),transparent 45%),linear-gradient(145deg,#07150f,#020a07);overflow:hidden}.hero-art img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,10,7,.3),transparent 22%,transparent 75%,rgba(2,10,7,.2));pointer-events:none}.hero-badge{position:absolute;top:30px;left:30px;z-index:2;background:rgba(1,10,7,.86);border:1px solid var(--green);border-radius:16px;padding:16px 24px;text-align:center}.hero-badge b{display:block;color:var(--green);font-size:36px}.hero-badge span{font-size:12px;color:#fff}.year-badge{position:absolute;top:34px;right:30px;z-index:2;width:132px;height:132px;border:3px solid #fff;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:900;background:rgba(4,12,8,.72);box-shadow:0 0 25px rgba(69,242,53,.2)}.year-badge strong{font-size:32px;line-height:.9}.year-badge small{font-size:11px}.hero-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0}.mini-card{min-height:92px;border:1px solid var(--line);border-radius:16px;background:#07150f;padding:14px;display:flex;gap:12px;align-items:center}.mini-card .icon{width:38px;height:38px}.mini-card b{display:block;font-size:15px}.mini-card small{display:block;color:#b5c1bb;font-size:11px;margin-top:4px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.trust-row{margin-top:28px;border:1px solid var(--line);border-radius:18px;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;background:#06120d}.trust-row>div{padding:22px 24px;display:flex;align-items:center;gap:14px;border-right:1px solid var(--line)}.trust-row>div:last-child{border-right:0}.trust-row b{font-size:20px}.trust-row small{display:block;color:#aab7b0;margin-top:4px}.brand-strip{margin-top:16px;border:1px solid var(--line);border-radius:16px;min-height:64px;display:grid;grid-template-columns:auto 1.2fr 1.5fr auto;gap:24px;align-items:center;padding:12px 20px;background:linear-gradient(90deg,#071b10,#04110b)}.brand-strip strong{border:1px solid var(--green);padding:9px 16px;border-radius:999px}.brand-strip span{color:#c6d0ca;font-size:14px}.brand-strip a{border:1px solid var(--green);padding:10px 16px;border-radius:10px}
/* Generic section heads */
.section-head{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:40px;margin-bottom:26px}.section-head p{margin:0;color:#c4cec8;line-height:1.6}.section-head h2{margin:5px 0 0}.inner{padding:34px}
/* Services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{border:1px solid var(--line);border-radius:18px;padding:26px;background:#07150f;min-height:260px;position:relative;overflow:hidden}.service-card:after{content:"";position:absolute;inset:auto -30% -50% 20%;height:130px;background:radial-gradient(circle,rgba(48,255,57,.12),transparent 70%)}.service-card .num{color:var(--green);font-weight:900;font-size:26px}.service-card h3{margin:32px 0 16px}.service-card p{color:#bdc8c2;line-height:1.55}.service-card a{color:var(--green);font-weight:900}
/* Symptoms */
.symptoms{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.symptom{min-height:150px;border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center;background:#07140f;display:flex;flex-direction:column;align-items:center;justify-content:center}.symptom .icon{margin-bottom:16px}.symptom b{font-size:15px}.symptom:after{content:"";width:28px;height:2px;background:var(--green);margin-top:18px}
/* Technology */
.tech-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px;align-items:center}.tech-copy{padding:14px 10px}.tech-art{min-height:420px;border:1px solid var(--line);border-radius:20px;overflow:hidden;position:relative}.tech-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.chips{position:absolute;right:18px;top:18px;display:grid;gap:8px}.chips span{background:rgba(2,12,8,.88);border:1px solid var(--green);border-radius:10px;padding:8px 13px;font-size:12px;font-weight:800}.steps{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.step{border:1px solid var(--line);border-radius:16px;padding:20px;background:#07150f;min-height:205px}.step .num,.round-num{width:44px;height:44px;border:1px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green);font-weight:900}.step h3{margin:20px 0 10px}.step p{color:#b8c4bd;line-height:1.45}
/* Inside */
.inside-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:18px}.inside-list{display:grid;gap:10px}.inside-item{border:1px solid var(--line);border-radius:16px;background:#07150f;padding:18px;display:flex;align-items:flex-start;gap:14px;min-height:112px}.inside-item h3{font-size:20px;margin:4px 0 7px}.inside-item p{margin:0;color:#b8c4bd;line-height:1.45}.inside-art{border:1px solid var(--line);border-radius:20px;overflow:hidden;min-height:570px}.inside-art img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Process */
.process-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:18px}.process-list{display:grid;gap:10px}.process-item{border:1px solid var(--line);border-radius:16px;padding:18px;background:#07150f;display:flex;gap:14px;min-height:104px}.process-item h3{font-size:20px;margin:4px 0 6px}.process-item p{margin:0;color:#b8c4bd;line-height:1.4}.process-art{border-radius:20px;overflow:hidden;border:1px solid var(--line);min-height:500px;position:relative}.process-art img{width:100%;height:100%;object-fit:cover}.process-art .flow{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);font-size:60px;color:var(--green);font-weight:900;text-shadow:0 0 28px var(--green)}.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.thumb{position:relative;height:150px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}.thumb img{width:100%;height:100%;object-fit:cover}.thumb b{position:absolute;bottom:10px;left:10px;background:#06120d;border:1px solid var(--green);border-radius:8px;color:var(--green);padding:7px 10px}.benefit-bar{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.benefit-bar span{padding:16px;text-align:center;font-weight:800;border-right:1px solid var(--line)}.benefit-bar span:last-child{border-right:0}
/* Equipment */
.equipment-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:20px}.equipment-copy{padding-right:10px}.eq-chip{border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:10px;display:flex;align-items:center;gap:12px}.eq-chip b{display:block}.eq-chip small{display:block;color:#aebbb4;margin-top:3px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.gallery img{width:100%;height:235px;object-fit:cover;border:1px solid var(--line);border-radius:12px}.equipment-trust{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;align-items:center;gap:14px;justify-content:center}
/* Effect */
.effect-grid{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center}.effect-card{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#07150f}.effect-card img{width:100%;height:440px;object-fit:cover}.effect-label{position:absolute;top:16px;left:16px;background:#031008;border:1px solid var(--green);border-radius:9px;padding:10px 14px;font-weight:900}.effect-label.after{background:var(--green);color:#041006}.effect-card figcaption{padding:16px 18px;color:#c6d0ca}.effect-arrow{width:54px;height:54px;border:1px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:28px;margin:auto}.effect-results{margin-top:12px;border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}.effect-results div{padding:18px;border-right:1px solid var(--line)}.effect-results div:last-child{border-right:0}.effect-results b{color:var(--green)}.effect-results small{display:block;color:#b5c1bb;margin-top:5px}
/* Pricing */
.pricing-layout{position:relative;display:grid;grid-template-columns:.78fr 1.15fr .95fr;gap:16px}.pricing-bg{position:absolute;inset:0 0 auto auto;width:60%;height:100%;object-fit:cover;opacity:.05;pointer-events:none}.price-benefits{display:grid;gap:10px}.price-benefit{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;gap:12px;align-items:center;background:rgba(5,17,11,.85)}.price-benefit b{display:block}.price-benefit small{display:block;color:#aebbb4}.price-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-content:start}.price-card{border:1px solid var(--line);border-radius:14px;padding:18px 12px;text-align:center;background:#06140e;min-height:150px}.price-card strong{display:block;color:var(--green);font-size:30px;margin:18px 0}.price-card small{color:#b2beb7}.calc{border:1px solid rgba(69,242,53,.55);border-radius:16px;padding:22px;background:#06140e}.calc h3{margin-bottom:20px}.field{display:grid;gap:6px;margin-bottom:12px;color:#dce5e0;font-size:13px}.field input,.field select,.field textarea{width:100%;background:#020a07;border:1px solid #355944;border-radius:10px;color:#fff;min-height:48px;padding:10px 12px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green)}.calc-result{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.calc-result>div{border:1px solid var(--line);border-radius:12px;padding:12px}.calc-result small{display:block;color:#adb8b2}.calc-result b{display:block;color:var(--green);font-size:24px;margin-top:6px}.consent{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#abb7b0;margin:12px 0}.consent input{margin-top:2px}
/* Reviews */
.reviews-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:16px}.review-stack{display:grid;gap:10px}.review{border:1px solid var(--line);border-radius:14px;background:#06140e;padding:18px}.review-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.avatar{width:58px;height:58px;border-radius:50%;border:1px solid var(--green);display:grid;place-items:center;font-size:22px;font-weight:900;background:linear-gradient(145deg,#18241f,#07120d)}.review .stars{color:#ffe348;letter-spacing:2px}.review p{color:#c5cfc9;line-height:1.5;margin:14px 0 0}.video-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#06140e}.video-box{aspect-ratio:16/9;position:relative;background:#000}.video-box img,.video-box video{width:100%;height:100%;object-fit:contain}.play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.12)}.play button{width:86px;height:86px;border-radius:50%;border:2px solid var(--green);background:rgba(3,13,8,.78);color:#fff;font-size:34px;box-shadow:0 0 24px rgba(69,242,53,.35)}.video-caption{padding:16px 18px;display:flex;justify-content:space-between}.stats{margin-top:12px;border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}.stats>div,.stats>a{padding:18px;text-align:center;border-right:1px solid var(--line)}.stats>*:last-child{border-right:0}.stats strong{font-size:30px}.stats small{display:block;color:#acb8b1;margin-top:4px}
/* FAQ */
.faq-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.faq-list{display:grid;gap:8px}.faq-list details{border:1px solid var(--line);border-radius:12px;background:#06140e;overflow:hidden}.faq-list summary{list-style:none;padding:16px 18px;font-weight:900;cursor:pointer}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";float:right;color:var(--green);font-size:22px}.faq-list details[open] summary:after{content:"–"}.faq-list details p{padding:0 18px 16px;color:#bdc7c1;line-height:1.5;margin:0}.faq-art{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:520px}.faq-art img{width:100%;height:100%;object-fit:cover}.faq-call{position:absolute;left:20px;right:20px;bottom:20px;padding:20px;border:1px solid var(--green);border-radius:14px;background:rgba(3,12,8,.9)}.faq-call b{font-size:24px}.faq-call span{display:block;color:#c1cbc5;margin:8px 0 14px}
/* Locations */
.locations{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.location{border:1px solid var(--line);border-radius:14px;padding:18px;background:#06140e}.location b{display:block;font-size:18px}.location small{display:block;color:#aebbb4;margin:6px 0 12px}.location a{color:var(--green);font-weight:900}
/* CTA */
.final-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:0}.final-copy{padding:40px}.final-art{position:relative;min-height:600px;overflow:hidden}.final-art img{width:100%;height:100%;object-fit:cover}.final-features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.final-features>div{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:8px}.final-phone{font-size:36px;font-weight:900;display:block;margin:20px 0}.final-results{grid-column:1/-1;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}.final-results>div{padding:18px;border-right:1px solid var(--line)}.final-results>div:last-child{border-right:0}.final-results b{display:block}.final-results small{color:#aebbb4;display:block;margin-top:4px}
/* Footer */
.footer{margin-top:38px;border-top:1px solid rgba(69,242,53,.2);background:#010704}.footer-main{padding:42px 0;display:grid;grid-template-columns:1fr .8fr 1.35fr .75fr;gap:36px}.footer-brand strong{font-size:28px}.footer-brand p{color:#b2beb7;line-height:1.55}.footer h4{margin:0 0 15px;color:#aeb9b3;text-transform:uppercase;letter-spacing:.06em}.footer-contact a{display:block;font-size:20px;font-weight:900;margin:8px 0}.footer-locations{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.footer-loc{border:1px solid var(--line);border-radius:12px;padding:12px}.footer-loc b{font-size:13px}.footer-loc a{display:block;color:var(--green);font-size:12px;margin-top:8px}.footer-nav{display:grid;gap:10px}.footer-bottom{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;color:#87958d;font-size:13px}
/* Service pages */
.service-hero{padding:54px 0 20px}.service-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.service-hero-art{height:560px;border:1px solid var(--line);border-radius:24px;overflow:hidden}.service-hero-art img{width:100%;height:100%;object-fit:cover}.service-facts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.service-fact{border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-weight:800}.cards-5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.cards-5 article{border:1px solid var(--line);border-radius:14px;padding:18px;background:#06140e;text-align:center;min-height:140px;display:grid;place-items:center}.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.cards-4 article{border:1px solid var(--line);border-radius:14px;padding:18px;background:#06140e;min-height:140px}.service-process{display:grid;grid-template-columns:1fr 1fr;gap:18px}.service-process-list{display:grid;gap:9px}.service-process-list article{border:1px solid var(--line);border-radius:14px;padding:16px;background:#06140e;display:flex;gap:12px}.service-price{display:grid;grid-template-columns:1fr .85fr;gap:18px;align-items:center}.service-price-box{border:1px solid var(--line);border-radius:16px;padding:24px;background:#06140e}.service-price-box strong{color:var(--green);font-size:46px}.service-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.service-faq details{border:1px solid var(--line);border-radius:12px;background:#06140e}.service-faq summary{padding:16px;font-weight:900}.service-faq p{padding:0 16px 16px;color:#bdc8c2}.page-hero{padding:70px 0 30px}.page-hero .panel{padding:46px}.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.contact-form{border:1px solid var(--line);border-radius:16px;padding:24px;background:#06140e}.map-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#06140e;padding:20px}.map-visual{min-height:420px;border-radius:14px;background:radial-gradient(circle at 48% 42%,rgba(77,255,83,.18),transparent 18%),linear-gradient(145deg,#102a1b,#07110c);position:relative;overflow:hidden}.map-visual:before{content:"Санкт-Петербург";position:absolute;inset:45% auto auto 40%;font-size:28px;color:#dbe4df;font-weight:900}.map-pin{position:absolute;width:28px;height:28px;border-radius:50% 50% 50% 0;background:var(--green);transform:rotate(-45deg);box-shadow:0 0 15px var(--green)}.map-pin:after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#092011;top:9px;left:9px}.p1{left:26%;top:60%}.p2{left:59%;top:69%}.p3{left:47%;top:20%}.p4{left:79%;top:26%}.thanks-wrap{min-height:75vh;display:grid;place-items:center;padding:70px 0}.thanks-card{text-align:center;padding:60px;max-width:950px;margin:auto}.checkmark{width:120px;height:120px;border:3px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:62px;margin:0 auto 28px}.privacy-content{display:grid;grid-template-columns:1fr 1fr;gap:12px}.privacy-item{border:1px solid var(--line);border-radius:14px;padding:20px;background:#06140e}.privacy-item h3{font-size:22px}.privacy-item p,.privacy-item li{color:#c1cbc5;line-height:1.6}
/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;display:none;place-items:center;padding:20px}.modal.open{display:grid}.modal-card{width:min(520px,100%);border:1px solid var(--green);border-radius:18px;background:#05110b;padding:26px;position:relative}.modal-close{position:absolute;right:14px;top:14px;border:0;background:transparent;color:#fff;font-size:26px}
@media(max-width:1150px){.brand{min-width:auto}.brand-copy{display:none}.nav{gap:18px}.header-contact{display:none}.hero-grid,.tech-grid,.inside-grid,.process-grid,.equipment-grid,.reviews-grid,.faq-grid,.final-grid,.service-hero-grid,.contact-grid,.service-price{grid-template-columns:1fr}.hero-art{min-height:500px}.hero-benefits,.trust-row,.locations{grid-template-columns:repeat(2,1fr)}.symptoms{grid-template-columns:repeat(3,1fr)}.steps,.cards-5,.cards-4{grid-template-columns:repeat(2,1fr)}.price-cards{grid-template-columns:repeat(5,1fr)}.pricing-layout{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr 1fr}.final-results{grid-column:auto}.final-art{min-height:500px}}
@media(max-width:760px){.container{width:min(calc(100% - 24px),var(--max))}.section{padding:18px 0}.topbar-inner{height:76px}.brand img{width:48px;height:48px}.nav{display:none;position:absolute;left:12px;right:12px;top:76px;background:#031009;border:1px solid var(--line);border-radius:14px;padding:16px;flex-direction:column;align-items:stretch}.nav.open{display:flex}.mobile-toggle{display:grid;place-items:center}.topbar .btn{min-height:46px;padding:0 16px}.hero{padding-top:24px}.hero-grid{gap:18px}.hero-art{min-height:430px}.hero-badge{top:16px;left:16px;padding:12px 16px}.year-badge{width:94px;height:94px;right:16px;top:18px}.year-badge strong{font-size:24px}.hero-benefits,.trust-row,.services-grid,.symptoms,.steps,.thumbs,.benefit-bar,.gallery,.effect-results,.stats,.locations,.final-features,.final-results,.cards-5,.cards-4,.privacy-content,.service-faq{grid-template-columns:1fr}.mini-card{min-height:78px}.trust-row>div,.benefit-bar span,.final-results>div{border-right:0;border-bottom:1px solid var(--line)}.trust-row>div:last-child,.benefit-bar span:last-child,.final-results>div:last-child{border-bottom:0}.brand-strip{grid-template-columns:1fr;gap:10px}.section-head{grid-template-columns:1fr;gap:10px}.inner{padding:20px}.inside-art{min-height:390px}.process-art{min-height:340px}.gallery{grid-template-columns:1fr 1fr}.gallery img{height:180px}.effect-grid{grid-template-columns:1fr}.effect-arrow{transform:rotate(90deg);margin:10px auto}.effect-card img{height:330px}.price-cards{grid-template-columns:1fr 1fr}.footer-main{grid-template-columns:1fr}.footer-locations{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}.service-hero-art{height:420px}.page-hero .panel{padding:24px}.final-copy{padding:24px}.final-art{min-height:360px}.faq-art{min-height:420px}h1{font-size:clamp(46px,14vw,70px)}h2{font-size:clamp(36px,11vw,58px)}}
.hero-art{aspect-ratio:4/3!important;height:auto!important;min-height:0!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#06140e!important}.hero-art>img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;display:block!important}
/* H2ENGINE HERO — точная настройка под утвержденный макет */
body{
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}
.hero{
padding:42px 0 20px!important;
}
.hero-grid{
grid-template-columns:1fr 1fr!important;
gap:28px!important;
align-items:center!important;
}
.hero-copy{
padding:8px 0!important;
}
.hero-copy .eyebrow{
margin-bottom:16px!important;
font-size:13px!important;
letter-spacing:.08em!important;
}
.hero-copy h1{
max-width:590px!important;
font-size:clamp(52px,4.1vw,62px)!important;
line-height:.96!important;
letter-spacing:-.045em!important;
font-weight:800!important;
margin-bottom:22px!important;
}
.hero-copy h1 .line{
display:inline!important;
}
.hero-copy h1 .line:first-child::after{
content:" ";
}
.hero-copy h1 .line:last-child{
display:block!important;
}
.hero-copy .lead{
max-width:680px!important;
font-size:17px!important;
line-height:1.55!important;
}
.hero-benefits{
margin:22px 0 20px!important;
gap:10px!important;
}
.mini-card{
min-height:78px!important;
padding:10px 12px!important;
border-radius:14px!important;
}
.mini-card b{
font-size:14px!important;
line-height:1.15!important;
}
.mini-card small{
font-size:10px!important;
}
.hero-actions{
gap:12px!important;
}
.hero-actions .btn{
min-height:54px!important;
padding:0 24px!important;
}
.hero-art{
min-height:0!important;
aspect-ratio:4/3!important;
}
/* =========================================================
H2ENGINE — GLOBAL VISUAL TUNE
========================================================= */
:root{
--panel:#06140e;
--panel-2:#071a10;
--line:rgba(45,255,110,.28);
--line-strong:rgba(72,255,125,.42);
--text:#eef5ef;
--muted:#c8d4ca;
--green:#49ff3a;
}
body{
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
color:var(--text)!important;
}
.section{
padding:26px 0!important;
}
.section-head{
display:grid!important;
grid-template-columns:1.05fr .95fr!important;
gap:28px!important;
align-items:end!important;
margin-bottom:18px!important;
}
.section-head h2,
.hero-copy h1,
.service-copy h1,
.final-copy h2,
.price-copy h2,
.contact-copy h2,
.privacy-content h1{
letter-spacing:-.045em!important;
font-weight:800!important;
}
.section-head h2{
font-size:clamp(44px,4.2vw,68px)!important;
line-height:.96!important;
margin:0!important;
max-width:760px!important;
}
.section-head p,
.hero-copy .lead,
.service-copy .lead,
.final-copy .lead,
.price-copy .lead,
.contact-copy .lead{
font-size:17px!important;
line-height:1.55!important;
color:var(--muted)!important;
margin:0!important;
max-width:760px!important;
}
.eyebrow{
font-size:13px!important;
letter-spacing:.08em!important;
margin-bottom:14px!important;
}
.panel,
.hero-art,
.service-hero-art,
.map-visual,
.contact-grid img,
.final-art,
.inside-grid img,
.gallery-grid img,
.tech-grid img,
.process-gallery img,
.process-image img,
.effect-card img{
background:var(--panel)!important;
}
/* HERO */
.hero{
padding:42px 0 20px!important;
}
.hero-grid{
grid-template-columns:1fr 1fr!important;
gap:28px!important;
align-items:center!important;
}
.hero-copy{
padding:8px 0!important;
}
.hero-copy h1{
max-width:600px!important;
font-size:clamp(52px,4.1vw,62px)!important;
line-height:.96!important;
margin-bottom:22px!important;
}
.hero-copy .lead{
max-width:680px!important;
}
.hero-benefits{
margin:22px 0 20px!important;
gap:10px!important;
}
.mini-card{
min-height:78px!important;
padding:10px 12px!important;
border-radius:14px!important;
}
.mini-card b{
font-size:14px!important;
line-height:1.15!important;
}
.mini-card small{
font-size:10px!important;
}
.hero-actions{
gap:12px!important;
}
.hero-actions .btn{
min-height:54px!important;
padding:0 24px!important;
}
.hero-art{
min-height:0!important;
aspect-ratio:4/3!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:26px!important;
}
.hero-art img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
display:block!important;
}
.hero-badge{
top:18px!important;
left:18px!important;
}
.year-badge{
top:18px!important;
right:18px!important;
}
/* SHARED SECTION BLOCKS */
.panel{
padding:28px!important;
border-radius:24px!important;
}
.inner{
padding:0 24px!important;
}
/* SYMPTOMS */
.symptoms-grid{
grid-template-columns:repeat(6,1fr)!important;
gap:14px!important;
}
.symptoms-grid article{
min-height:152px!important;
padding:18px 14px!important;
border-radius:18px!important;
}
.symptoms-grid b{
font-size:16px!important;
line-height:1.25!important;
}
/* SERVICE / HOW IT WORKS */
.service-hero{
padding:34px 0 20px!important;
}
.service-hero-grid{
grid-template-columns:1fr 1fr!important;
gap:28px!important;
align-items:start!important;
}
.service-copy h1{
font-size:clamp(46px,4vw,64px)!important;
line-height:.98!important;
margin:0 0 18px!important;
max-width:620px!important;
}
.service-copy .lead{
max-width:670px!important;
margin-bottom:18px!important;
}
.service-hero-art{
height:420px!important;
min-height:420px!important;
overflow:hidden!important;
border-radius:24px!important;
}
.service-hero-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
display:block!important;
}
.service-facts{
gap:8px!important;
}
.service-fact{
padding:10px 14px!important;
font-size:13px!important;
border-radius:12px!important;
}
.service-process-list{
display:grid!important;
grid-template-columns:repeat(4,1fr)!important;
gap:14px!important;
margin-top:18px!important;
}
.service-process-list article{
min-height:170px!important;
padding:18px!important;
border-radius:18px!important;
}
.service-process-list h3{
font-size:20px!important;
line-height:1.15!important;
margin:10px 0 8px!important;
}
.service-process-list p{
font-size:14px!important;
line-height:1.45!important;
}
/* INSIDE ENGINE */
.inside-grid{
display:grid!important;
grid-template-columns:.95fr 1.05fr!important;
gap:18px!important;
align-items:stretch!important;
}
.inside-grid > div:first-child{
display:grid!important;
gap:14px!important;
}
.inside-grid article{
min-height:118px!important;
padding:18px 18px!important;
border-radius:18px!important;
}
.inside-grid article h3{
font-size:18px!important;
margin:0 0 8px!important;
}
.inside-grid article p{
font-size:14px!important;
line-height:1.45!important;
}
.inside-grid img{
width:100%!important;
height:100%!important;
min-height:540px!important;
object-fit:cover!important;
object-position:center center!important;
border-radius:20px!important;
border:1px solid var(--line)!important;
display:block!important;
}
/* PROCESS */
.process-grid{
display:grid!important;
grid-template-columns:.95fr 1.05fr!important;
gap:18px!important;
align-items:start!important;
}
.process-list{
display:grid!important;
gap:12px!important;
}
.process-list article{
min-height:96px!important;
padding:16px 18px!important;
border-radius:16px!important;
}
.process-list h3{
font-size:18px!important;
margin:0 0 6px!important;
}
.process-list p{
font-size:14px!important;
line-height:1.45!important;
}
.process-gallery{
display:grid!important;
grid-template-columns:1fr!important;
gap:12px!important;
}
.process-gallery > img,
.process-image img,
.process-gallery-main img{
width:100%!important;
height:420px!important;
object-fit:cover!important;
object-position:center center!important;
border-radius:18px!important;
display:block!important;
}
.gallery-strip{
display:grid!important;
grid-template-columns:repeat(4,1fr)!important;
gap:10px!important;
}
.gallery-strip img{
width:100%!important;
height:110px!important;
object-fit:cover!important;
object-position:center center!important;
border-radius:14px!important;
display:block!important;
}
/* EQUIPMENT / REAL WORKS */
.equipment-grid,
.reviews-grid,
.cards-3,
.cards-4,
.cards-5{
gap:14px!important;
}
.cards-3 article,
.cards-4 article,
.cards-5 article{
border-radius:18px!important;
min-height:130px!important;
padding:18px!important;
}
.cards-3 h3,
.cards-4 h3,
.cards-5 h3{
font-size:18px!important;
line-height:1.2!important;
margin:8px 0 8px!important;
}
.cards-3 p,
.cards-4 p,
.cards-5 p{
font-size:14px!important;
line-height:1.45!important;
}
.gallery-grid{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:14px!important;
}
.gallery-grid img{
width:100%!important;
height:260px!important;
object-fit:cover!important;
object-position:center center!important;
border-radius:16px!important;
display:block!important;
}
/* EFFECT / BEFORE AFTER */
.effect-results{
display:grid!important;
grid-template-columns:1fr auto 1fr!important;
gap:14px!important;
align-items:center!important;
}
.effect-card{
border-radius:18px!important;
overflow:hidden!important;
}
.effect-card img{
width:100%!important;
height:420px!important;
object-fit:cover!important;
object-position:center center!important;
display:block!important;
}
.effect-arrow{
transform:none!important;
margin:0!important;
}
.effect-caption{
padding:14px 16px!important;
font-size:14px!important;
line-height:1.45!important;
}
.final-results{
margin-top:16px!important;
grid-template-columns:repeat(3,1fr)!important;
}
.final-results > div{
padding:16px 18px!important;
}
.final-results b{
font-size:16px!important;
}
.final-results small{
font-size:14px!important;
line-height:1.35!important;
}
/* PRICE */
.price-cards{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:14px!important;
}
.price-card{
min-height:220px!important;
padding:22px!important;
border-radius:18px!important;
}
.price-card strong{
font-size:18px!important;
}
.price-card .price{
font-size:46px!important;
line-height:1!important;
}
.price-layout{
grid-template-columns:1fr 1.05fr!important;
gap:18px!important;
}
/* CONTACT */
.contact-grid{
display:grid!important;
grid-template-columns:1.05fr .95fr!important;
gap:18px!important;
align-items:stretch!important;
}
.contact-form{
padding:24px!important;
border-radius:18px!important;
}
.contact-grid img{
width:100%!important;
height:100%!important;
min-height:420px!important;
object-fit:cover!important;
object-position:center center!important;
border-radius:18px!important;
display:block!important;
}
/* FINAL CTA */
.final-copy h2{
font-size:clamp(46px,4vw,64px)!important;
line-height:.98!important;
margin:0 0 18px!important;
max-width:560px!important;
}
.final-grid{
grid-template-columns:.92fr 1.08fr!important;
gap:18px!important;
align-items:stretch!important;
}
.final-art{
min-height:560px!important;
border-radius:20px!important;
overflow:hidden!important;
}
.final-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
display:block!important;
}
/* HEADER */
.topbar{
min-height:86px!important;
}
.brand img{
height:58px!important;
}
.brand-copy strong{
font-size:15px!important;
}
.brand-copy small{
font-size:11px!important;
}
.nav{
gap:28px!important;
}
.header-contact{
text-align:right!important;
}
.header-contact a{
font-size:18px!important;
}
.header-contact small{
font-size:11px!important;
}
/* BUTTONS */
.btn{
border-radius:14px!important;
min-height:52px!important;
padding:0 22px!important;
font-weight:700!important;
}
/* MOBILE */
@media (max-width: 1150px){
.hero-grid,
.service-hero-grid,
.inside-grid,
.process-grid,
.price-layout,
.contact-grid,
.final-grid,
.section-head{
grid-template-columns:1fr!important;
}
.symptoms-grid{
grid-template-columns:repeat(3,1fr)!important;
}
.service-process-list,
.final-results,
.price-cards{
grid-template-columns:repeat(2,1fr)!important;
}
.gallery-grid{
grid-template-columns:1fr 1fr!important;
}
.effect-results{
grid-template-columns:1fr!important;
}
.gallery-strip{
grid-template-columns:repeat(2,1fr)!important;
}
.inside-grid img,
.final-art,
.service-hero-art,
.process-gallery > img,
.process-image img,
.effect-card img,
.contact-grid img{
min-height:320px!important;
height:320px!important;
}
}
@media (max-width: 760px){
.inner{
padding:0 16px!important;
}
.hero-copy h1,
.service-copy h1,
.final-copy h2,
.section-head h2{
font-size:clamp(34px,10vw,48px)!important;
line-height:1.02!important;
}
.symptoms-grid,
.service-process-list,
.gallery-grid,
.price-cards,
.final-results{
grid-template-columns:1fr!important;
}
.gallery-strip{
grid-template-columns:1fr 1fr!important;
}
.hero-art,
.service-hero-art,
.final-art{
aspect-ratio:auto!important;
min-height:280px!important;
}
}
.process-art .flow{display:none!important}
/* =========================================================
H2ENGINE — PRICING / CALCULATOR FINAL
========================================================= */
#pricing{
background:#06140e!important;
position:relative!important;
overflow:hidden!important;
}
#pricing::before{
opacity:.035!important;
}
#pricing .section-head{
grid-template-columns:1fr .9fr!important;
align-items:end!important;
margin-bottom:22px!important;
}
#pricing .section-head h2{
font-size:clamp(44px,3.8vw,60px)!important;
line-height:.96!important;
max-width:650px!important;
}
#pricing .section-head p{
font-size:16px!important;
line-height:1.5!important;
max-width:610px!important;
}
/* Основная зона: цены + калькулятор */
#pricing .pricing-layout{
display:grid!important;
grid-template-columns:1.35fr .85fr!important;
gap:18px!important;
align-items:start!important;
}
/* Если внутри осталась старая левая колонка преимуществ */
#pricing .pricing-benefits{
grid-column:1 / -1!important;
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:10px!important;
order:3!important;
}
/* 5 карточек цен */
#pricing .price-cards{
display:grid!important;
grid-template-columns:repeat(5,1fr)!important;
gap:10px!important;
align-items:stretch!important;
}
#pricing .price-card{
min-height:180px!important;
padding:18px 12px!important;
border-radius:16px!important;
background:#07170f!important;
border:1px solid rgba(65,255,95,.28)!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
#pricing .price-card strong{
font-size:15px!important;
line-height:1.2!important;
margin-bottom:14px!important;
}
#pricing .price-card .price{
font-size:30px!important;
line-height:1!important;
color:#48ff3b!important;
font-weight:800!important;
margin-bottom:14px!important;
}
#pricing .price-card small{
font-size:12px!important;
line-height:1.35!important;
color:#c8d4ca!important;
}
/* Калькулятор */
#pricing .calculator,
#pricing .calc,
#pricing .price-form{
background:#07170f!important;
border:1px solid rgba(65,255,95,.38)!important;
border-radius:18px!important;
padding:20px!important;
}
#pricing .calculator h3,
#pricing .calc h3,
#pricing .price-form h3{
font-size:25px!important;
line-height:1.1!important;
margin:0 0 18px!important;
}
#pricing label{
font-size:12px!important;
margin-bottom:6px!important;
}
#pricing input,
#pricing select{
min-height:46px!important;
border-radius:10px!important;
}
#pricing .calc-result,
#pricing .calculator-result{
gap:10px!important;
}
#pricing .calc-result > div,
#pricing .calculator-result > div{
padding:14px!important;
border-radius:12px!important;
}
#pricing .calc-result strong,
#pricing .calculator-result strong{
font-size:24px!important;
color:#48ff3b!important;
}
/* Старые преимущества делаем компактными */
#pricing .pricing-benefits > *,
#pricing .price-benefits > *{
min-height:72px!important;
padding:12px 14px!important;
border-radius:14px!important;
}
#pricing .pricing-benefits b,
#pricing .price-benefits b{
font-size:14px!important;
}
#pricing .pricing-benefits small,
#pricing .price-benefits small{
font-size:11px!important;
}
/* убираем лишнее просвечивание старого фонового изображения */
#pricing img.bg,
#pricing .pricing-bg{
opacity:.04!important;
}
/* TABLET */
@media(max-width:1150px){
#pricing .pricing-layout{
grid-template-columns:1fr!important;
}
#pricing .price-cards{
grid-template-columns:repeat(3,1fr)!important;
}
#pricing .pricing-benefits{
grid-template-columns:repeat(3,1fr)!important;
}
}
/* MOBILE */
@media(max-width:760px){
#pricing .section-head{
grid-template-columns:1fr!important;
}
#pricing .price-cards{
grid-template-columns:1fr 1fr!important;
}
#pricing .pricing-benefits{
grid-template-columns:1fr!important;
}
#pricing .price-card{
min-height:150px!important;
}
#pricing .price-card .price{
font-size:26px!important;
}
}
/* H2ENGINE — компактный калькулятор */
#pricing .calculator,
#pricing .calc,
#pricing .price-form,
#pricing form{
width:100%!important;
max-width:480px!important;
justify-self:end!important;
padding:16px 18px!important;
border-radius:16px!important;
}
#pricing .calculator h3,
#pricing .calc h3,
#pricing .price-form h3{
font-size:22px!important;
margin-bottom:14px!important;
}
#pricing .field,
#pricing .form-field{
margin-bottom:10px!important;
}
#pricing label{
font-size:11px!important;
margin-bottom:4px!important;
}
#pricing input,
#pricing select{
min-height:42px!important;
height:42px!important;
padding:0 12px!important;
font-size:13px!important;
}
#pricing textarea{
min-height:70px!important;
}
#pricing .calc-result,
#pricing .calculator-result{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:8px!important;
margin:10px 0!important;
}
#pricing .calc-result > div,
#pricing .calculator-result > div{
padding:10px 12px!important;
min-height:68px!important;
}
#pricing .calc-result strong,
#pricing .calculator-result strong{
font-size:21px!important;
}
#pricing .btn{
min-height:46px!important;
font-size:13px!important;
}
#pricing .pricing-layout{
grid-template-columns:minmax(0,1fr) 480px!important;
gap:18px!important;
align-items:start!important;
}
/* ===== PRICING — FINAL LAYOUT ===== */
#pricing{
background:#06140e!important;
}
#pricing::before,
#pricing::after{
display:none!important;
}
#pricing .pricing-layout{
display:grid!important;
grid-template-columns:minmax(0,1fr) 430px!important;
grid-template-areas:
"prices calculator"
"benefits benefits"!important;
gap:18px!important;
align-items:start!important;
}
#pricing .price-cards{
grid-area:prices!important;
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:10px!important;
width:100%!important;
}
#pricing .pricing-benefits,
#pricing .price-benefits{
grid-area:benefits!important;
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:10px!important;
width:100%!important;
}
#pricing .calculator,
#pricing .calc,
#pricing .price-form{
grid-area:calculator!important;
width:100%!important;
max-width:none!important;
justify-self:stretch!important;
margin:0!important;
padding:18px!important;
}
#pricing .price-card{
min-height:180px!important;
padding:16px 10px!important;
}
#pricing .pricing-benefits > *,
#pricing .price-benefits > *{
min-height:82px!important;
padding:14px 16px!important;
}
#pricing .section-head{
margin-bottom:18px!important;
}
@media(max-width:1100px){
#pricing .pricing-layout{
grid-template-columns:1fr!important;
grid-template-areas:
"prices"
"calculator"
"benefits"!important;
}
#pricing .price-cards{
grid-template-columns:repeat(3,1fr)!important;
}
}
@media(max-width:700px){
#pricing .price-cards{
grid-template-columns:1fr 1fr!important;
}
#pricing .pricing-benefits,
#pricing .price-benefits{
grid-template-columns:1fr!important;
}
}
/* =========================================================
H2ENGINE — PRICING + MODAL CALCULATOR
========================================================= */
#pricing{
background:#06140e!important;
}
#pricing::before,
#pricing::after,
#pricing .pricing-bg{
display:none!important;
}
/* Внутри блока больше нет постоянного калькулятора */
#pricing .pricing-layout{
display:grid!important;
grid-template-columns:1fr!important;
grid-template-areas:none!important;
gap:14px!important;
}
#pricing .calc{
display:none!important;
}
/* 5 цен в одну аккуратную строку */
#pricing .price-cards{
order:1!important;
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:10px!important;
width:100%!important;
}
#pricing .price-card{
min-height:165px!important;
padding:18px 12px!important;
background:#07170f!important;
border:1px solid rgba(72,255,59,.3)!important;
border-radius:16px!important;
}
#pricing .price-card .price{
font-size:28px!important;
}
/* Кнопка вызова */
#pricing .calc-open-wrap{
order:2!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:18px!important;
padding:8px 0!important;
}
#pricing .calc-open-wrap .btn{
min-width:260px!important;
min-height:54px!important;
font-size:15px!important;
}
#pricing .calc-open-wrap small{
color:#aebbb1!important;
font-size:12px!important;
}
/* Преимущества под ценами */
#pricing .price-benefits,
#pricing .pricing-benefits{
order:3!important;
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:10px!important;
}
#pricing .price-benefit,
#pricing .pricing-benefits > *{
min-height:76px!important;
padding:12px 16px!important;
border-radius:14px!important;
}
/* ================= MODAL ================= */
body.h2-calc-lock{
overflow:hidden!important;
}
.h2-calc-modal{
position:fixed!important;
inset:0!important;
z-index:999999!important;
display:none;
align-items:center;
justify-content:center;
padding:20px;
}
.h2-calc-modal.is-open{
display:flex!important;
}
.h2-calc-backdrop{
position:absolute;
inset:0;
background:rgba(0,8,4,.82);
backdrop-filter:blur(7px);
}
.h2-calc-dialog{
position:relative;
z-index:2;
width:min(520px,calc(100vw - 32px));
max-height:calc(100vh - 40px);
overflow:auto;
padding:8px;
background:#06140e;
border:1px solid rgba(72,255,59,.5);
border-radius:22px;
box-shadow:
0 30px 90px rgba(0,0,0,.7),
0 0 45px rgba(72,255,59,.10);
}
.h2-calc-close{
position:absolute;
z-index:10;
top:14px;
right:16px;
width:38px;
height:38px;
border-radius:50%;
border:1px solid rgba(72,255,59,.4);
background:#07170f;
color:#fff;
font-size:27px;
line-height:1;
cursor:pointer;
}
.h2-calc-close:hover{
color:#48ff3b;
border-color:#48ff3b;
}
.h2-calc-modal .calc{
display:block!important;
width:100%!important;
max-width:none!important;
margin:0!important;
padding:24px!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
}
.h2-calc-modal .calc h3{
font-size:27px!important;
margin:0 45px 20px 0!important;
}
.h2-calc-modal .field{
margin-bottom:12px!important;
}
.h2-calc-modal label{
display:block!important;
margin-bottom:5px!important;
font-size:12px!important;
}
.h2-calc-modal input,
.h2-calc-modal select{
width:100%!important;
min-height:46px!important;
border-radius:10px!important;
}
.h2-calc-modal .calc-result{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:10px!important;
margin:12px 0!important;
}
.h2-calc-modal .calc-result > div{
padding:13px!important;
min-height:72px!important;
}
.h2-calc-modal .calc-result b{
color:#48ff3b!important;
font-size:24px!important;
}
.h2-calc-modal .btn{
width:100%!important;
min-height:50px!important;
}
/* Адаптив */
@media(max-width:900px){
#pricing .price-cards{
grid-template-columns:repeat(3,1fr)!important;
}
}
@media(max-width:600px){
#pricing .price-cards{
grid-template-columns:1fr 1fr!important;
}
#pricing .price-benefits,
#pricing .pricing-benefits{
grid-template-columns:1fr!important;
}
#pricing .calc-open-wrap{
flex-direction:column!important;
}
#pricing .calc-open-wrap .btn{
width:100%!important;
}
.h2-calc-modal{
padding:10px!important;
}
.h2-calc-dialog{
width:100%!important;
max-height:calc(100vh - 20px)!important;
}
}
/* ===== PRICING CLEAN FIX ===== */
#pricing .pricing-bg{
display:none!important;
}
#pricing .pricing-layout{
display:flex!important;
flex-direction:column!important;
gap:14px!important;
width:100%!important;
position:relative!important;
}
/* полностью сбрасываем старую сетку */
#pricing .pricing-layout > *{
grid-area:auto!important;
position:static!important;
inset:auto!important;
transform:none!important;
float:none!important;
}
/* цены */
#pricing .price-cards{
order:1!important;
width:100%!important;
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:12px!important;
}
#pricing .price-card{
min-height:165px!important;
width:auto!important;
margin:0!important;
}
/* кнопка */
#pricing .calc-open-wrap{
order:2!important;
width:100%!important;
display:flex!important;
justify-content:center!important;
align-items:center!important;
gap:16px!important;
padding:6px 0!important;
}
/* преимущества */
#pricing .price-benefits{
order:3!important;
width:100%!important;
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:12px!important;
margin:0!important;
}
#pricing .price-benefit{
position:static!important;
transform:none!important;
inset:auto!important;
min-height:78px!important;
width:auto!important;
margin:0!important;
padding:14px 18px!important;
}
/* калькулятор остаётся только в popup */
#pricing .calc{
display:none!important;
}
.h2-calc-modal .calc{
display:block!important;
}
@media(max-width:900px){
#pricing .price-cards{
grid-template-columns:repeat(3,1fr)!important;
}
}
@media(max-width:600px){
#pricing .price-cards{
grid-template-columns:1fr 1fr!important;
}
#pricing .price-benefits{
grid-template-columns:1fr!important;
}
}
/* =========================================================
H2ENGINE — REVIEWS FINAL
========================================================= */
#reviews{
background:#06140e!important;
}
#reviews .section-head{
margin-bottom:18px!important;
grid-template-columns:1fr .9fr!important;
}
#reviews .section-head h2{
font-size:clamp(44px,3.8vw,60px)!important;
line-height:.96!important;
}
#reviews .section-head p{
font-size:15px!important;
line-height:1.5!important;
}
/* отзывы слева + видео справа */
#reviews .reviews-grid{
display:grid!important;
grid-template-columns:.82fr 1.18fr!important;
gap:14px!important;
align-items:stretch!important;
}
#reviews .review-stack{
display:grid!important;
gap:10px!important;
}
#reviews article.review{
min-height:126px!important;
padding:16px!important;
border:1px solid rgba(72,255,59,.3)!important;
border-radius:16px!important;
background:#07170f!important;
}
/* заголовок отзыва */
#reviews .review-head{
display:grid!important;
grid-template-columns:48px 1fr auto!important;
gap:12px!important;
align-items:center!important;
margin-bottom:10px!important;
}
#reviews .avatar{
width:48px!important;
height:48px!important;
min-width:48px!important;
border-radius:50%!important;
border:1px solid #48ff3b!important;
overflow:hidden!important;
display:grid!important;
place-items:center!important;
font-size:15px!important;
font-weight:800!important;
background:#082016!important;
}
#reviews .avatar img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
display:block!important;
}
#reviews .review-head h3{
font-size:19px!important;
line-height:1.1!important;
margin:0 0 4px!important;
}
#reviews .review-head small{
font-size:11px!important;
color:#b9c7bd!important;
}
#reviews .stars{
font-size:14px!important;
letter-spacing:1px!important;
color:#ffe500!important;
white-space:nowrap!important;
}
#reviews article.review > p{
font-size:13px!important;
line-height:1.48!important;
color:#e0e8e2!important;
margin:0!important;
}
/* видео */
#reviews .video-card{
border:1px solid rgba(72,255,59,.32)!important;
border-radius:18px!important;
overflow:hidden!important;
background:#07170f!important;
display:flex!important;
flex-direction:column!important;
}
#reviews .video-box{
position:relative!important;
flex:1!important;
min-height:390px!important;
background:#030906!important;
overflow:hidden!important;
}
#reviews .video-poster,
#reviews #review-video{
width:100%!important;
height:100%!important;
min-height:390px!important;
object-fit:contain!important;
object-position:center!important;
background:#030906!important;
display:block!important;
}
#reviews .play{
width:66px!important;
height:66px!important;
border-radius:50%!important;
font-size:24px!important;
box-shadow:0 0 30px rgba(72,255,59,.18)!important;
}
#reviews .video-caption{
min-height:54px!important;
padding:12px 16px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:14px!important;
border-top:1px solid rgba(72,255,59,.22)!important;
}
#reviews .video-caption b{
font-size:14px!important;
}
#reviews .video-caption span{
font-size:12px!important;
color:#c3d0c6!important;
}
/* нижняя статистика */
#reviews .stats{
margin-top:12px!important;
display:grid!important;
grid-template-columns:1fr 1fr 1fr 1.15fr!important;
border:1px solid rgba(72,255,59,.30)!important;
border-radius:16px!important;
overflow:hidden!important;
}
#reviews .stats > div{
min-height:74px!important;
padding:12px 16px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
border-right:1px solid rgba(72,255,59,.24)!important;
}
#reviews .stats > div:last-of-type{
border-right:0!important;
}
#reviews .stats strong{
font-size:25px!important;
line-height:1!important;
margin-bottom:5px!important;
}
#reviews .stats small{
font-size:11px!important;
color:#b9c7bd!important;
}
#reviews .stats .btn{
height:100%!important;
min-height:74px!important;
border-radius:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
/* адаптив */
@media(max-width:900px){
#reviews .reviews-grid{
grid-template-columns:1fr!important;
}
#reviews .video-box,
#reviews .video-poster,
#reviews #review-video{
min-height:360px!important;
}
#reviews .stats{
grid-template-columns:1fr 1fr!important;
}
}
@media(max-width:600px){
#reviews .review-head{
grid-template-columns:44px 1fr!important;
}
#reviews .stars{
grid-column:2!important;
}
#reviews .stats{
grid-template-columns:1fr!important;
}
#reviews .stats > div{
border-right:0!important;
border-bottom:1px solid rgba(72,255,59,.22)!important;
}
}
/* Видеоотзыв — кнопка play строго по центру */
#reviews .video-box{
position:relative!important;
}
#reviews .video-box .play{
position:absolute!important;
left:50%!important;
top:50%!important;
right:auto!important;
bottom:auto!important;
transform:translate(-50%,-50%)!important;
margin:0!important;
z-index:5!important;
width:66px!important;
height:66px!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
}
/* ===== REAL EFFECT — COMPACT ===== */
#effect{
padding:20px 0!important;
}
#effect .section-head{
margin-bottom:14px!important;
}
#effect .section-head h2{
font-size:clamp(40px,3.4vw,54px)!important;
line-height:.98!important;
}
#effect .section-head p{
font-size:14px!important;
line-height:1.45!important;
}
#effect .effect-results{
gap:12px!important;
}
#effect .effect-card{
border-radius:16px!important;
}
#effect .effect-card img{
height:330px!important;
object-fit:cover!important;
}
#effect .effect-caption{
padding:10px 14px!important;
font-size:12px!important;
}
#effect .effect-label{
padding:9px 14px!important;
font-size:13px!important;
}
#effect .effect-arrow{
width:54px!important;
height:54px!important;
font-size:20px!important;
}
#effect .final-results{
margin-top:10px!important;
}
#effect .final-results > div{
padding:12px 14px!important;
}
#effect .final-results b{
font-size:14px!important;
}
#effect .final-results small{
font-size:11px!important;
}
/* REAL EFFECT — нижние результаты строго одинаковые */
#effect .final-results{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
width:100%!important;
gap:0!important;
align-items:stretch!important;
}
#effect .final-results > div{
width:100%!important;
min-width:0!important;
min-height:84px!important;
padding:16px 22px!important;
margin:0!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:flex-start!important;
box-sizing:border-box!important;
}
#effect .final-results > div:not(:last-child){
border-right:1px solid rgba(72,255,59,.28)!important;
}
#effect .final-results b{
margin:0 0 7px!important;
line-height:1.2!important;
}
#effect .final-results small{
margin:0!important;
line-height:1.35!important;
}
/* REAL EFFECT — 3 нижних результата одинаковой ширины */
#effect .effect-results{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
width:100%!important;
gap:0!important;
align-items:stretch!important;
}
#effect .effect-results > div{
width:100%!important;
min-width:0!important;
min-height:82px!important;
padding:16px 22px!important;
margin:0!important;
box-sizing:border-box!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:flex-start!important;
}
#effect .effect-results > div:not(:last-child){
border-right:1px solid rgba(72,255,59,.28)!important;
}
#effect .effect-results b{
display:block!important;
margin:0 0 7px!important;
font-size:15px!important;
line-height:1.2!important;
}
#effect .effect-results small{
display:block!important;
margin:0!important;
font-size:12px!important;
line-height:1.35!important;
}
/* =========================================================
H2ENGINE — FAQ FINAL
========================================================= */
#faq{
padding:22px 0!important;
}
#faq .faq-grid{
display:grid!important;
grid-template-columns:1.1fr .9fr!important;
gap:18px!important;
align-items:stretch!important;
}
#faq h2{
font-size:clamp(42px,3.5vw,56px)!important;
line-height:.97!important;
letter-spacing:-.045em!important;
margin:0 0 18px!important;
}
#faq .eyebrow{
margin-bottom:12px!important;
}
/* вопросы */
#faq .faq-list{
display:grid!important;
gap:8px!important;
}
#faq .faq-list details{
margin:0!important;
border:1px solid rgba(72,255,59,.28)!important;
border-radius:14px!important;
background:#07170f!important;
overflow:hidden!important;
}
#faq .faq-list summary{
position:relative!important;
min-height:58px!important;
padding:17px 54px 17px 20px!important;
display:flex!important;
align-items:center!important;
cursor:pointer!important;
list-style:none!important;
font-size:16px!important;
line-height:1.25!important;
font-weight:750!important;
}
#faq .faq-list summary::-webkit-details-marker{
display:none!important;
}
#faq .faq-list summary::after{
content:"+"!important;
position:absolute!important;
right:20px!important;
top:50%!important;
transform:translateY(-50%)!important;
color:#48ff3b!important;
font-size:26px!important;
font-weight:700!important;
line-height:1!important;
}
#faq .faq-list details[open] summary::after{
content:"–"!important;
}
#faq .faq-list details[open] summary{
border-bottom:1px solid rgba(72,255,59,.18)!important;
}
#faq .faq-list details p{
margin:0!important;
padding:14px 20px 17px!important;
font-size:14px!important;
line-height:1.5!important;
color:#c8d4ca!important;
}
/* правая часть */
#faq .faq-art{
position:relative!important;
min-height:520px!important;
border-radius:20px!important;
overflow:hidden!important;
border:1px solid rgba(72,255,59,.28)!important;
}
#faq .faq-art > img{
width:100%!important;
height:100%!important;
min-height:520px!important;
object-fit:cover!important;
object-position:center center!important;
display:block!important;
filter:brightness(.78) contrast(1.03)!important;
}
#faq .faq-call{
left:24px!important;
right:24px!important;
bottom:24px!important;
top:auto!important;
padding:22px 24px!important;
border-radius:18px!important;
background:rgba(3,16,9,.88)!important;
backdrop-filter:blur(8px)!important;
}
#faq .faq-call b{
display:block!important;
max-width:350px!important;
font-size:24px!important;
line-height:1.15!important;
margin-bottom:10px!important;
}
#faq .faq-call span{
display:block!important;
font-size:14px!important;
line-height:1.45!important;
margin-bottom:16px!important;
color:#c8d4ca!important;
}
#faq .faq-call .btn{
min-height:50px!important;
padding:0 24px!important;
}
/* mobile */
@media(max-width:900px){
#faq .faq-grid{
grid-template-columns:1fr!important;
}
#faq .faq-art,
#faq .faq-art > img{
min-height:400px!important;
}
}
@media(max-width:600px){
#faq .faq-list summary{
font-size:14px!important;
padding:15px 48px 15px 16px!important;
}
#faq .faq-call{
left:14px!important;
right:14px!important;
bottom:14px!important;
}
}
/* ===== LOCATIONS FINAL ===== */
#locations{
padding:22px 0!important;
}
#locations .section-head{
margin-bottom:16px!important;
}
#locations .section-head h2{
font-size:clamp(42px,3.5vw,56px)!important;
line-height:.97!important;
max-width:760px!important;
}
#locations .section-head p{
font-size:15px!important;
line-height:1.5!important;
max-width:620px!important;
}
#locations .locations-grid{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:12px!important;
}
#locations .location-card{
min-height:190px!important;
padding:20px!important;
border-radius:16px!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
}
#locations .location-card h3{
font-size:18px!important;
line-height:1.2!important;
margin:12px 0 7px!important;
}
#locations .location-card p{
font-size:13px!important;
line-height:1.4!important;
margin:0 0 14px!important;
}
#locations .location-card a{
margin-top:auto!important;
font-size:14px!important;
font-weight:750!important;
}
@media(max-width:1000px){
#locations .locations-grid{
grid-template-columns:1fr 1fr!important;
}
}
@media(max-width:600px){
#locations .locations-grid{
grid-template-columns:1fr!important;
}
}
/* ===== FINAL CTA — COMPACT ===== */
#final-cta{
padding:20px 0!important;
}
#final-cta .final-grid{
grid-template-columns:1.05fr .95fr!important;
gap:18px!important;
align-items:center!important;
}
#final-cta .final-art{
height:420px!important;
min-height:420px!important;
max-height:420px!important;
border-radius:18px!important;
overflow:hidden!important;
}
#final-cta .final-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
}
#final-cta .final-copy h2{
font-size:clamp(42px,3.5vw,56px)!important;
line-height:.97!important;
margin-bottom:14px!important;
}
#final-cta .final-copy .lead{
font-size:15px!important;
line-height:1.5!important;
margin-bottom:16px!important;
}
#final-cta .final-features{
gap:10px!important;
margin:16px 0!important;
}
#final-cta .final-features > div{
min-height:78px!important;
padding:12px!important;
}
#final-cta .final-phone{
font-size:28px!important;
margin:14px 0!important;
}
@media(max-width:900px){
#final-cta .final-grid{
grid-template-columns:1fr!important;
}
#final-cta .final-art{
height:340px!important;
min-height:340px!important;
}
}
/* FINAL CTA — 4 нижних преимущества в одну строку */
#final-cta .final-results{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
width:100%!important;
gap:0!important;
margin-top:16px!important;
}
#final-cta .final-results > div{
min-width:0!important;
min-height:82px!important;
padding:14px 20px!important;
margin:0!important;
box-sizing:border-box!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:flex-start!important;
}
#final-cta .final-results > div:not(:last-child){
border-right:1px solid rgba(72,255,59,.28)!important;
}
#final-cta .final-results b{
font-size:14px!important;
line-height:1.2!important;
margin:0 0 5px!important;
}
#final-cta .final-results small{
font-size:11px!important;
line-height:1.35!important;
margin:0!important;
}
@media(max-width:800px){
#final-cta .final-results{
grid-template-columns:1fr 1fr!important;
}
}
@media(max-width:500px){
#final-cta .final-results{
grid-template-columns:1fr!important;
}
}
/* ===== FOOTER FINAL ===== */
.site-footer{
padding:34px 0 16px!important;
background:#020a06!important;
}
.site-footer .footer-main{
display:grid!important;
grid-template-columns:1.05fr .85fr 1.35fr .7fr!important;
gap:34px!important;
align-items:start!important;
}
.site-footer h3{
font-size:14px!important;
letter-spacing:.06em!important;
margin:0 0 16px!important;
}
.site-footer .footer-brand strong{
font-size:27px!important;
line-height:1!important;
}
.site-footer .footer-brand p{
font-size:13px!important;
line-height:1.5!important;
margin:10px 0 0!important;
color:#bdc9c0!important;
}
.site-footer .footer-contact a{
display:block!important;
font-size:17px!important;
font-weight:700!important;
margin-bottom:8px!important;
}
.site-footer .footer-contact p{
margin:6px 0!important;
font-size:13px!important;
line-height:1.45!important;
}
/* 4 сервиса — 2x2 */
.site-footer .footer-locations{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:9px!important;
}
.site-footer .footer-location{
min-height:88px!important;
padding:13px 14px!important;
border-radius:13px!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
}
.site-footer .footer-location b{
font-size:12px!important;
line-height:1.25!important;
}
.site-footer .footer-location a{
margin-top:auto!important;
font-size:11px!important;
font-weight:700!important;
color:#48ff3b!important;
}
/* навигация */
.site-footer .footer-nav{
display:flex!important;
flex-direction:column!important;
gap:10px!important;
}
.site-footer .footer-nav a{
font-size:13px!important;
line-height:1.3!important;
}
/* нижняя строка */
.site-footer .footer-bottom{
margin-top:24px!important;
padding-top:14px!important;
border-top:1px solid rgba(72,255,59,.22)!important;
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
gap:20px!important;
font-size:11px!important;
color:#96a59a!important;
}
@media(max-width:1000px){
.site-footer .footer-main{
grid-template-columns:1fr 1fr!important;
}
}
@media(max-width:600px){
.site-footer .footer-main{
grid-template-columns:1fr!important;
gap:24px!important;
}
.site-footer .footer-locations{
grid-template-columns:1fr!important;
}
.site-footer .footer-bottom{
flex-direction:column!important;
align-items:flex-start!important;
}
}
/* ===== SERVICE PAGES — HERO FINAL ===== */
.service-hero{
padding:34px 0 22px!important;
}
.service-hero-grid{
display:grid!important;
grid-template-columns:.98fr 1.02fr!important;
gap:28px!important;
align-items:center!important;
}
.service-copy h1{
font-size:clamp(46px,3.8vw,60px)!important;
line-height:.97!important;
letter-spacing:-.045em!important;
max-width:660px!important;
margin:14px 0 18px!important;
}
.service-copy .lead{
max-width:670px!important;
font-size:16px!important;
line-height:1.5!important;
margin-bottom:18px!important;
}
.service-facts{
display:flex!important;
flex-wrap:wrap!important;
gap:9px!important;
margin:16px 0 20px!important;
}
.service-fact{
min-height:44px!important;
padding:0 16px!important;
display:flex!important;
align-items:center!important;
border-radius:12px!important;
font-size:13px!important;
font-weight:700!important;
}
.service-hero-art{
height:430px!important;
min-height:430px!important;
max-height:430px!important;
border-radius:22px!important;
overflow:hidden!important;
}
.service-hero-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
display:block!important;
}
.service-hero .hero-actions{
gap:12px!important;
}
.service-hero .hero-actions .btn{
min-height:52px!important;
padding:0 24px!important;
}
@media(max-width:900px){
.service-hero-grid{
grid-template-columns:1fr!important;
}
.service-hero-art{
height:340px!important;
min-height:340px!important;
}
}
/* =========================================================
H2ENGINE — CATALYST PAGE / DESIGN FROM APPROVED MOCKUP
========================================================= */
.catalyst-page{
background:#020d07;
}
/* ---------- HERO ---------- */
.catalyst-page .cat-hero{
padding:34px 0 20px!important;
}
.catalyst-page .cat-hero-grid{
display:grid!important;
grid-template-columns:.92fr 1.08fr!important;
gap:28px!important;
align-items:center!important;
}
.catalyst-page .cat-hero-copy{
min-width:0!important;
}
.catalyst-page .cat-hero-copy .eyebrow{
color:#48ff3b!important;
font-size:13px!important;
font-weight:800!important;
letter-spacing:.07em!important;
margin-bottom:14px!important;
}
.catalyst-page .cat-hero-copy h1{
margin:0 0 16px!important;
max-width:680px!important;
font-size:clamp(46px,4vw,64px)!important;
line-height:.92!important;
letter-spacing:-.045em!important;
font-weight:900!important;
}
.catalyst-page .cat-hero-copy h1 span{
display:block!important;
color:#48ff3b!important;
}
.catalyst-page .cat-hero-copy .lead{
max-width:650px!important;
margin:0 0 22px!important;
font-size:17px!important;
line-height:1.45!important;
color:#d7e0da!important;
}
.catalyst-page .cat-hero-benefits{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:12px!important;
margin:0 0 18px!important;
}
.catalyst-page .cat-hero-benefits > div{
min-height:94px!important;
padding:14px!important;
border:1px solid rgba(72,255,59,.28)!important;
border-radius:15px!important;
background:#06140e!important;
display:grid!important;
grid-template-columns:42px 1fr!important;
column-gap:10px!important;
align-items:center!important;
}
.catalyst-page .cat-hero-benefits .icon{
grid-row:1 / span 2!important;
width:40px!important;
height:40px!important;
border:1px solid #48ff3b!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
color:#48ff3b!important;
}
.catalyst-page .cat-hero-benefits b{
font-size:13px!important;
line-height:1.15!important;
}
.catalyst-page .cat-hero-benefits small{
font-size:10px!important;
line-height:1.3!important;
color:#b9c7bd!important;
}
.catalyst-page .cat-hero .hero-actions{
display:flex!important;
gap:12px!important;
flex-wrap:wrap!important;
}
.catalyst-page .cat-hero .btn{
min-height:52px!important;
padding:0 24px!important;
}
.catalyst-page .cat-hero-art{
height:470px!important;
border:1px solid rgba(72,255,59,.3)!important;
border-radius:22px!important;
overflow:hidden!important;
background:#06140e!important;
}
.catalyst-page .cat-hero-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
display:block!important;
}
/* ---------- SECTION BASICS ---------- */
.catalyst-page .section{
padding:12px 0!important;
}
.catalyst-page .panel{
border:1px solid rgba(72,255,59,.28)!important;
border-radius:20px!important;
background:#06140e!important;
}
.catalyst-page .inner{
padding:24px 28px!important;
}
.catalyst-page h2{
letter-spacing:-.035em!important;
}
/* ---------- SYMPTOMS ---------- */
.catalyst-page .cat-section-title{
margin-bottom:16px!important;
}
.catalyst-page .cat-section-title h2{
margin:0 0 5px!important;
font-size:27px!important;
line-height:1!important;
}
.catalyst-page .cat-section-title p{
margin:0!important;
font-size:13px!important;
color:#c0cdc3!important;
}
.catalyst-page .cat-symptoms-layout{
display:grid!important;
grid-template-columns:1.55fr .65fr!important;
gap:18px!important;
align-items:stretch!important;
}
.catalyst-page .cat-symptom-cards{
display:grid!important;
grid-template-columns:repeat(5,1fr)!important;
gap:10px!important;
}
.catalyst-page .cat-symptom-cards article{
min-height:126px!important;
padding:14px 10px!important;
border:1px solid rgba(72,255,59,.24)!important;
border-radius:14px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
background:#07170f!important;
}
.catalyst-page .cat-symptom-cards .icon{
width:42px!important;
height:42px!important;
margin-bottom:10px!important;
color:#48ff3b!important;
}
.catalyst-page .cat-symptom-cards b{
font-size:12px!important;
line-height:1.25!important;
}
.catalyst-page .cat-check-art{
min-height:126px!important;
overflow:hidden!important;
border-radius:15px!important;
}
.catalyst-page .cat-check-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
display:block!important;
}
/* ---------- WHAT WE CLEAN + PROCESS ---------- */
.catalyst-page .cat-clean-process{
display:grid!important;
grid-template-columns:1.18fr .82fr!important;
gap:26px!important;
}
.catalyst-page .cat-clean{
padding-right:24px!important;
border-right:1px solid rgba(72,255,59,.22)!important;
}
.catalyst-page .cat-clean h2,
.catalyst-page .cat-process h2{
margin:0 0 9px!important;
font-size:25px!important;
line-height:1!important;
}
.catalyst-page .cat-clean > p{
margin:0 0 16px!important;
font-size:13px!important;
line-height:1.45!important;
color:#cbd6ce!important;
max-width:700px!important;
}
.catalyst-page .cat-clean-image{
height:210px!important;
overflow:hidden!important;
border-radius:15px!important;
}
.catalyst-page .cat-clean-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
display:block!important;
}
.catalyst-page .cat-process-list{
display:grid!important;
gap:12px!important;
margin-top:18px!important;
}
.catalyst-page .cat-process-list > div{
display:grid!important;
grid-template-columns:38px 1fr!important;
gap:12px!important;
align-items:center!important;
}
.catalyst-page .cat-process-list span{
width:36px!important;
height:36px!important;
display:grid!important;
place-items:center!important;
border:1px solid #48ff3b!important;
border-radius:50%!important;
color:#48ff3b!important;
font-size:15px!important;
font-weight:800!important;
}
.catalyst-page .cat-process-list p{
margin:0!important;
font-size:13px!important;
line-height:1.4!important;
}
/* ---------- RESULTS ---------- */
.catalyst-page .cat-results-title{
margin:0 0 16px!important;
font-size:26px!important;
}
.catalyst-page .cat-results{
display:grid!important;
grid-template-columns:repeat(5,1fr)!important;
gap:10px!important;
}
.catalyst-page .cat-results article{
min-height:105px!important;
padding:14px!important;
border:1px solid rgba(72,255,59,.24)!important;
border-radius:14px!important;
background:#07170f!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
.catalyst-page .cat-results .icon{
width:38px!important;
height:38px!important;
margin-bottom:9px!important;
color:#48ff3b!important;
}
.catalyst-page .cat-results b{
font-size:12px!important;
line-height:1.25!important;
}
/* ---------- PRICE + QUESTION ---------- */
.catalyst-page .cat-price-layout{
display:grid!important;
grid-template-columns:1.15fr .85fr!important;
gap:30px!important;
align-items:stretch!important;
}
.catalyst-page .cat-price-copy{
padding-right:26px!important;
border-right:1px solid rgba(72,255,59,.22)!important;
}
.catalyst-page .cat-price-copy h2,
.catalyst-page .cat-question h2{
margin:0 0 7px!important;
font-size:25px!important;
line-height:1.05!important;
}
.catalyst-page .cat-price-copy > p,
.catalyst-page .cat-question > p{
margin:0 0 14px!important;
font-size:13px!important;
line-height:1.45!important;
color:#c6d2c9!important;
}
.catalyst-page .cat-price-box{
min-height:105px!important;
padding:16px 20px!important;
border:1px solid rgba(72,255,59,.45)!important;
border-radius:14px!important;
display:grid!important;
grid-template-columns:54px 1fr auto!important;
gap:16px!important;
align-items:center!important;
background:#07170f!important;
}
.catalyst-page .cat-price-box .icon{
width:50px!important;
height:50px!important;
color:#48ff3b!important;
}
.catalyst-page .cat-price-box strong{
font-size:34px!important;
line-height:1!important;
}
.catalyst-page .cat-price-box small{
max-width:170px!important;
font-size:12px!important;
line-height:1.4!important;
}
.catalyst-page .cat-question{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
}
.catalyst-page .cat-phone{
display:block!important;
margin:3px 0 14px!important;
font-size:20px!important;
font-weight:800!important;
}
.catalyst-page .cat-question .btn{
width:100%!important;
min-height:50px!important;
}
/* ---------- FAQ ---------- */
.catalyst-page .cat-faq-title{
margin:0 0 14px!important;
font-size:26px!important;
}
.catalyst-page .cat-faq-grid{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:8px 14px!important;
}
.catalyst-page .cat-faq-grid details{
border:1px solid rgba(72,255,59,.24)!important;
border-radius:11px!important;
background:#07170f!important;
overflow:hidden!important;
}
.catalyst-page .cat-faq-grid summary{
position:relative!important;
min-height:48px!important;
padding:13px 48px 13px 15px!important;
list-style:none!important;
cursor:pointer!important;
font-size:12px!important;
font-weight:650!important;
}
.catalyst-page .cat-faq-grid summary::-webkit-details-marker{
display:none!important;
}
.catalyst-page .cat-faq-grid summary::after{
content:"+"!important;
position:absolute!important;
right:16px!important;
top:50%!important;
transform:translateY(-50%)!important;
color:#fff!important;
font-size:20px!important;
}
.catalyst-page .cat-faq-grid details[open] summary::after{
content:"–"!important;
color:#48ff3b!important;
}
.catalyst-page .cat-faq-grid details p{
margin:0!important;
padding:0 15px 14px!important;
font-size:12px!important;
line-height:1.45!important;
color:#c6d2c9!important;
}
/* ---------- LOCATIONS ---------- */
.catalyst-page #locations{
padding-top:12px!important;
}
.catalyst-page #locations .section-head h2{
font-size:34px!important;
}
/* ---------- TABLET ---------- */
@media(max-width:1000px){
.catalyst-page .cat-hero-grid,
.catalyst-page .cat-clean-process,
.catalyst-page .cat-price-layout{
grid-template-columns:1fr!important;
}
.catalyst-page .cat-hero-art{
height:380px!important;
}
.catalyst-page .cat-clean{
padding-right:0!important;
border-right:0!important;
}
.catalyst-page .cat-price-copy{
padding-right:0!important;
border-right:0!important;
}
.catalyst-page .cat-symptoms-layout{
grid-template-columns:1fr!important;
}
.catalyst-page .cat-symptom-cards{
grid-template-columns:repeat(3,1fr)!important;
}
.catalyst-page .cat-results{
grid-template-columns:repeat(3,1fr)!important;
}
}
/* ---------- MOBILE ---------- */
@media(max-width:650px){
.catalyst-page .cat-hero-copy h1{
font-size:40px!important;
}
.catalyst-page .cat-hero-benefits{
grid-template-columns:1fr!important;
}
.catalyst-page .cat-hero-art{
height:300px!important;
}
.catalyst-page .cat-symptom-cards,
.catalyst-page .cat-results,
.catalyst-page .cat-faq-grid{
grid-template-columns:1fr!important;
}
.catalyst-page .cat-price-box{
grid-template-columns:46px 1fr!important;
}
.catalyst-page .cat-price-box small{
grid-column:1 / -1!important;
}
}
/* CATALYST HERO — кадрируем как в макете */
.catalyst-page .cat-hero-art{
height:440px!important;
min-height:440px!important;
max-height:440px!important;
overflow:hidden!important;
}
.catalyst-page .cat-hero-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center 18%!important;
transform:scale(1.08)!important;
transform-origin:center top!important;
}
/* ===== CATALYST — SYMPTOMS COMPACT ===== */
.catalyst-page .cat-symptoms-layout{
display:grid!important;
grid-template-columns:1.7fr .7fr!important;
gap:14px!important;
align-items:start!important;
}
.catalyst-page .cat-symptom-cards{
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:10px!important;
height:190px!important;
}
.catalyst-page .cat-symptom-cards article{
min-height:0!important;
height:190px!important;
padding:14px 10px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
text-align:center!important;
border-radius:14px!important;
}
.catalyst-page .cat-symptom-cards .icon{
width:42px!important;
height:42px!important;
margin:0 0 12px!important;
}
.catalyst-page .cat-symptom-cards b{
font-size:12px!important;
line-height:1.25!important;
max-width:150px!important;
}
/* справа показываем именно нижнюю часть с Check Engine */
.catalyst-page .cat-check-art{
height:190px!important;
min-height:190px!important;
max-height:190px!important;
border-radius:14px!important;
overflow:hidden!important;
position:relative!important;
}
.catalyst-page .cat-check-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center bottom!important;
display:block!important;
}
@media(max-width:1000px){
.catalyst-page .cat-symptoms-layout{
grid-template-columns:1fr!important;
}
.catalyst-page .cat-symptom-cards{
height:auto!important;
grid-template-columns:repeat(3,1fr)!important;
}
.catalyst-page .cat-symptom-cards article{
height:140px!important;
}
.catalyst-page .cat-check-art{
height:220px!important;
max-height:220px!important;
}
}
/* CATALYST — RESULTS COMPACT */
.catalyst-page .cat-results-title{
margin:0 0 12px!important;
font-size:24px!important;
}
.catalyst-page .cat-results{
gap:10px!important;
}
.catalyst-page .cat-results article{
min-height:94px!important;
padding:12px 10px!important;
}
.catalyst-page .cat-results .icon{
width:34px!important;
height:34px!important;
margin-bottom:7px!important;
}
.catalyst-page .cat-results b{
font-size:11px!important;
line-height:1.2!important;
}
/* CATALYST HERO — убрать лишнее увеличение */
.catalyst-page .cat-hero-art img{
transform:none!important;
object-fit:cover!important;
object-position:center 20%!important;
}
/* =========================================================
H2ENGINE — RASKOKS PAGE / TOP MOCKUP
========================================================= */
.raskoks-page{
background:#020d07;
}
/* HERO */
.rsk-hero{
padding:32px 0 18px!important;
}
.rsk-hero-grid{
display:grid!important;
grid-template-columns:.9fr 1.1fr!important;
gap:28px!important;
align-items:center!important;
}
.rsk-hero-copy .eyebrow{
color:#48ff3b!important;
font-size:13px!important;
font-weight:850!important;
letter-spacing:.06em!important;
margin-bottom:13px!important;
}
.rsk-hero-copy h1{
margin:0 0 16px!important;
font-size:clamp(48px,4vw,64px)!important;
line-height:.91!important;
letter-spacing:-.045em!important;
}
.rsk-hero-copy h1 span{
display:block!important;
}
.rsk-hero-copy h1 .green{
color:#48ff3b!important;
}
.rsk-hero-copy .lead{
max-width:620px!important;
margin:0 0 20px!important;
font-size:16px!important;
line-height:1.45!important;
}
.rsk-benefits{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:11px!important;
margin-bottom:18px!important;
}
.rsk-benefits > div{
min-height:90px!important;
padding:13px!important;
border:1px solid rgba(72,255,59,.3)!important;
border-radius:15px!important;
display:flex!important;
gap:11px!important;
align-items:center!important;
background:#06140e!important;
}
.rsk-benefits .icon{
width:42px!important;
height:42px!important;
flex:0 0 42px!important;
display:grid!important;
place-items:center!important;
border:1px solid #48ff3b!important;
border-radius:50%!important;
color:#48ff3b!important;
}
.rsk-benefits b{
display:block!important;
font-size:12px!important;
line-height:1.2!important;
}
.rsk-benefits small{
display:block!important;
margin-top:5px!important;
font-size:9px!important;
line-height:1.25!important;
color:#bdc9c0!important;
}
.rsk-hero-art{
height:430px!important;
overflow:hidden!important;
border:1px solid rgba(72,255,59,.3)!important;
border-radius:22px!important;
}
.rsk-hero-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center 15%!important;
display:block!important;
}
/* SYMPTOMS */
.rsk-symptoms{
padding:10px 0!important;
}
.rsk-title{
margin-bottom:14px!important;
}
.rsk-title h2{
margin:0 0 5px!important;
font-size:25px!important;
}
.rsk-title p{
margin:0!important;
font-size:12px!important;
color:#c7d2ca!important;
}
.rsk-symptoms-layout{
display:grid!important;
grid-template-columns:1.65fr .65fr!important;
gap:14px!important;
}
.rsk-symptom-cards{
display:grid!important;
grid-template-columns:repeat(5,1fr)!important;
gap:9px!important;
}
.rsk-symptom-cards article{
height:150px!important;
padding:12px 8px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
border:1px solid rgba(72,255,59,.26)!important;
border-radius:13px!important;
background:#07170f!important;
}
.rsk-symptom-cards .icon{
width:40px!important;
height:40px!important;
margin-bottom:10px!important;
color:#48ff3b!important;
}
.rsk-symptom-cards b{
font-size:11px!important;
line-height:1.25!important;
}
.rsk-check-art{
height:150px!important;
overflow:hidden!important;
border-radius:14px!important;
}
.rsk-check-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
/* CLEAN + PROCESS */
.rsk-clean-process{
display:grid!important;
grid-template-columns:1.15fr .85fr!important;
gap:26px!important;
}
.rsk-clean{
padding-right:24px!important;
border-right:1px solid rgba(72,255,59,.22)!important;
}
.rsk-clean h2,
.rsk-process h2{
margin:0 0 8px!important;
font-size:24px!important;
}
.rsk-clean > p{
margin:0 0 15px!important;
max-width:760px!important;
font-size:12px!important;
line-height:1.45!important;
color:#cbd6ce!important;
}
.rsk-clean-cards{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:10px!important;
}
.rsk-clean-cards figure{
margin:0!important;
}
.rsk-clean-cards img{
width:100%!important;
height:120px!important;
object-fit:cover!important;
border-radius:12px!important;
border:1px solid rgba(72,255,59,.25)!important;
}
.rsk-clean-cards figcaption{
padding-top:7px!important;
text-align:center!important;
}
.rsk-clean-cards b{
display:block!important;
font-size:11px!important;
}
.rsk-clean-cards small{
display:block!important;
margin-top:2px!important;
font-size:9px!important;
color:#aebcb2!important;
}
.rsk-process{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
}
.rsk-process-list{
display:grid!important;
gap:12px!important;
margin-top:14px!important;
}
.rsk-process-list > div{
display:grid!important;
grid-template-columns:36px 1fr!important;
gap:12px!important;
align-items:center!important;
}
.rsk-process-list span{
width:35px!important;
height:35px!important;
display:grid!important;
place-items:center!important;
border:1px solid #48ff3b!important;
border-radius:50%!important;
color:#48ff3b!important;
font-weight:800!important;
}
.rsk-process-list p{
margin:0!important;
font-size:12px!important;
line-height:1.4!important;
}
/* TABLET */
@media(max-width:1000px){
.rsk-hero-grid,
.rsk-clean-process{
grid-template-columns:1fr!important;
}
.rsk-clean{
padding-right:0!important;
border-right:0!important;
}
.rsk-symptoms-layout{
grid-template-columns:1fr!important;
}
.rsk-symptom-cards{
grid-template-columns:repeat(3,1fr)!important;
}
}
/* MOBILE */
@media(max-width:650px){
.rsk-hero-copy h1{
font-size:40px!important;
}
.rsk-benefits{
grid-template-columns:1fr!important;
}
.rsk-hero-art{
height:300px!important;
}
.rsk-symptom-cards,
.rsk-clean-cards{
grid-template-columns:1fr!important;
}
}
/* RASKOKS — SYMPTOMS FINAL */
.raskoks-page .rsk-symptoms .inner{
padding:18px 22px!important;
}
.raskoks-page .rsk-title{
margin-bottom:12px!important;
}
.raskoks-page .rsk-symptom-cards article{
height:140px!important;
}
.raskoks-page .rsk-check-art{
height:140px!important;
}
.raskoks-page .rsk-symptom-cards .icon{
width:38px!important;
height:38px!important;
margin-bottom:9px!important;
}
/* ===== RASKOKS — RESULTS FINAL ===== */
.raskoks-page .section .section-head h2,
.raskoks-page .section > .container > .section-head h2{
font-size:30px!important;
line-height:1.05!important;
margin:0!important;
}
.raskoks-page .cards-5{
display:grid!important;
grid-template-columns:repeat(5,1fr)!important;
gap:10px!important;
margin-top:14px!important;
}
.raskoks-page .cards-5 article{
min-height:105px!important;
padding:14px 10px!important;
border-radius:14px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
.raskoks-page .cards-5 .icon{
width:36px!important;
height:36px!important;
margin-bottom:10px!important;
}
.raskoks-page .cards-5 b{
font-size:12px!important;
line-height:1.25!important;
}
@media(max-width:900px){
.raskoks-page .cards-5{
grid-template-columns:repeat(2,1fr)!important;
}
}
/* ===== RASKOKS — PRICE + QUESTION ===== */
.raskoks-page .rsk-price-layout{
display:grid!important;
grid-template-columns:1.25fr .75fr!important;
gap:28px!important;
align-items:stretch!important;
}
.raskoks-page .rsk-price-copy{
padding-right:28px!important;
border-right:1px solid rgba(72,255,59,.22)!important;
}
.raskoks-page .rsk-price-copy h2,
.raskoks-page .rsk-question h2{
margin:5px 0 7px!important;
font-size:25px!important;
line-height:1.05!important;
}
.raskoks-page .rsk-price-copy > p,
.raskoks-page .rsk-question > p{
margin:0 0 14px!important;
font-size:12px!important;
line-height:1.4!important;
color:#c6d2c9!important;
}
.raskoks-page .rsk-price-box{
min-height:94px!important;
padding:14px 18px!important;
display:grid!important;
grid-template-columns:50px 1fr auto!important;
gap:16px!important;
align-items:center!important;
border:1px solid rgba(72,255,59,.45)!important;
border-radius:13px!important;
background:#07170f!important;
}
.raskoks-page .rsk-price-box .icon{
width:46px!important;
height:46px!important;
color:#48ff3b!important;
}
.raskoks-page .rsk-price-box strong{
font-size:29px!important;
line-height:1!important;
}
.raskoks-page .rsk-price-box small{
font-size:11px!important;
line-height:1.35!important;
}
.raskoks-page .rsk-question{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
}
.raskoks-page .rsk-phone{
margin:2px 0 12px!important;
font-size:19px!important;
font-weight:800!important;
}
.raskoks-page .rsk-question .btn{
width:100%!important;
min-height:48px!important;
}
@media(max-width:800px){
.raskoks-page .rsk-price-layout{
grid-template-columns:1fr!important;
}
.raskoks-page .rsk-price-copy{
padding-right:0!important;
border-right:0!important;
}
}
/* RASKOKS — PRICE NOTE ALIGN */
.raskoks-page .rsk-price-box{
grid-template-columns:50px auto 1fr!important;
}
.raskoks-page .rsk-price-box strong{
white-space:nowrap!important;
}
.raskoks-page .rsk-price-box small{
justify-self:start!important;
margin-left:28px!important;
max-width:180px!important;
text-align:left!important;
}
/* ===== RASKOKS — FAQ FINAL ===== */
.raskoks-page .service-faq{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:9px 14px!important;
margin-top:14px!important;
}
.raskoks-page .service-faq details{
margin:0!important;
border:1px solid rgba(72,255,59,.26)!important;
border-radius:11px!important;
background:#07170f!important;
overflow:hidden!important;
}
.raskoks-page .service-faq summary{
position:relative!important;
min-height:50px!important;
padding:14px 48px 14px 16px!important;
display:flex!important;
align-items:center!important;
list-style:none!important;
cursor:pointer!important;
font-size:13px!important;
font-weight:700!important;
line-height:1.25!important;
}
.raskoks-page .service-faq summary::-webkit-details-marker{
display:none!important;
}
.raskoks-page .service-faq summary::after{
content:"+"!important;
position:absolute!important;
right:17px!important;
top:50%!important;
transform:translateY(-50%)!important;
font-size:21px!important;
font-weight:400!important;
color:#fff!important;
}
.raskoks-page .service-faq details[open] summary::after{
content:"–"!important;
color:#48ff3b!important;
}
.raskoks-page .service-faq details p{
margin:0!important;
padding:0 16px 15px!important;
color:#bdc9c0!important;
font-size:12px!important;
line-height:1.5!important;
}
.raskoks-page .service-faq + *{
margin-top:0!important;
}
@media(max-width:700px){
.raskoks-page .service-faq{
grid-template-columns:1fr!important;
}
}
/* ===== RASKOKS — LOCATIONS FINAL ===== */
.raskoks-page #locations{
padding:10px 0 18px!important;
}
.raskoks-page #locations .inner{
padding:20px 22px!important;
}
.raskoks-page #locations .section-head{
margin-bottom:14px!important;
}
.raskoks-page #locations .section-head h2{
font-size:32px!important;
line-height:1.05!important;
margin:4px 0 0!important;
}
.raskoks-page #locations .eyebrow{
font-size:12px!important;
}
/* =====================================================
DPF PAGE
===================================================== */
.dpf-page{
background:#020d07;
}
.dpf-hero{
padding:36px 0 20px!important;
}
.dpf-hero-grid{
display:grid!important;
grid-template-columns:.88fr 1.12fr!important;
gap:32px!important;
align-items:center!important;
}
.dpf-hero-copy .eyebrow{
color:#48ff3b!important;
font-size:13px!important;
font-weight:900!important;
letter-spacing:.06em!important;
}
.dpf-hero-copy h1{
margin:13px 0 16px!important;
font-size:clamp(52px,4.5vw,70px)!important;
line-height:.9!important;
letter-spacing:-.045em!important;
}
.dpf-hero-copy h1 span{
display:block!important;
}
.dpf-hero-copy h1 .green{
color:#48ff3b!important;
}
.dpf-hero-copy .lead{
max-width:660px!important;
font-size:16px!important;
line-height:1.45!important;
margin-bottom:20px!important;
}
.dpf-benefits{
display:grid!important;
grid-template-columns:repeat(4,1fr)!important;
gap:9px!important;
margin-bottom:18px!important;
}
.dpf-benefits > div{
min-height:82px!important;
padding:11px!important;
display:grid!important;
grid-template-columns:38px 1fr!important;
column-gap:8px!important;
align-items:center!important;
}
.dpf-benefits .icon{
grid-row:1 / span 2!important;
width:36px!important;
height:36px!important;
color:#48ff3b!important;
}
.dpf-benefits b{
font-size:11px!important;
}
.dpf-benefits small{
font-size:8px!important;
color:#bdc9c0!important;
}
.dpf-hero-art{
height:450px!important;
overflow:hidden!important;
border-radius:22px!important;
border:1px solid rgba(72,255,59,.3)!important;
}
.dpf-hero-art img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
display:block!important;
}
.dpf-title h2{
margin:0 0 5px!important;
font-size:26px!important;
}
.dpf-title p{
margin:0 0 14px!important;
font-size:12px!important;
color:#c5d1c8!important;
}
/* симптомы */
.dpf-symptoms{
display:grid!important;
grid-template-columns:repeat(5,1fr)!important;
gap:10px!important;
}
.dpf-symptoms article{
min-height:155px!important;
padding:14px 12px!important;
border:1px solid rgba(72,255,59,.25)!important;
border-radius:14px!important;
background:#07170f!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
text-align:center!important;
}
.dpf-symptoms .icon{
width:42px!important;
height:42px!important;
margin-bottom:10px!important;
color:#48ff3b!important;
}
.dpf-symptoms b{
font-size:12px!important;
line-height:1.25!important;
}
.dpf-symptoms small{
margin-top:7px!important;
font-size:9px!important;
line-height:1.35!important;
color:#bdc9c0!important;
}
/* что дает очистка */
.dpf-gains{
display:grid!important;
grid-template-columns:repeat(4,1fr)!important;
gap:10px!important;
}
.dpf-gains article{
min-height:145px!important;
padding:15px!important;
border:1px solid rgba(72,255,59,.25)!important;
border-radius:14px!important;
background:#07170f!important;
}
.dpf-gains .icon{
width:40px!important;
height:40px!important;
margin-bottom:11px!important;
color:#48ff3b!important;
}
.dpf-gains b{
display:block!important;
font-size:12px!important;
line-height:1.3!important;
}
.dpf-gains small{
display:block!important;
margin-top:7px!important;
font-size:9px!important;
line-height:1.35!important;
color:#bdc9c0!important;
}
/* процедура */
.dpf-process{
display:grid!important;
grid-template-columns:repeat(4,1fr)!important;
gap:10px!important;
}
.dpf-process article{
position:relative!important;
min-height:160px!important;
padding:36px 15px 15px!important;
border:1px solid rgba(72,255,59,.25)!important;
border-radius:14px!important;
background:#07170f!important;
}
.dpf-process .num{
position:absolute!important;
top:10px!important;
left:12px!important;
width:29px!important;
height:29px!important;
display:grid!important;
place-items:center!important;
border:1px solid #48ff3b!important;
border-radius:50%!important;
color:#48ff3b!important;
font-weight:800!important;
}
.dpf-process b{
display:block!important;
margin-top:10px!important;
font-size:12px!important;
}
.dpf-process small{
display:block!important;
margin-top:8px!important;
font-size:9px!important;
line-height:1.4!important;
color:#bdc9c0!important;
}
@media(max-width:900px){
.dpf-hero-grid{
grid-template-columns:1fr!important;
}
.dpf-benefits,
.dpf-symptoms,
.dpf-gains,
.dpf-process{
grid-template-columns:repeat(2,1fr)!important;
}
}
@media(max-width:600px){
.dpf-benefits,
.dpf-symptoms,
.dpf-gains,
.dpf-process{
grid-template-columns:1fr!important;
}
}
/* ===== DPF — COMPACT CONTENT BLOCKS ===== */
/* Когда нужна очистка */
.dpf-page .dpf-symptoms article{
min-height:135px!important;
padding:12px 10px!important;
}
/* Что даёт очистка */
.dpf-page .dpf-gains article{
min-height:125px!important;
padding:13px!important;
}
/* Как проходит процедура */
.dpf-page .dpf-process article{
min-height:125px!important;
padding:38px 14px 13px!important;
}
.dpf-page .dpf-process b{
margin-top:5px!important;
}
.dpf-page .dpf-process small{
margin-top:6px!important;
}
/* Общие отступы между секциями DPF */
.dpf-page .section{
padding:10px 0!important;
}
/* ===== DPF — REAL EFFECT ===== */
.dpf-page .dpf-effect-section{
padding:10px 0!important;
}
.dpf-page .dpf-effect-grid{
display:grid!important;
grid-template-columns:1fr 58px 1fr!important;
gap:14px!important;
align-items:center!important;
margin-top:14px!important;
}
.dpf-page .dpf-effect-card{
margin:0!important;
}
.dpf-page .dpf-effect-image{
position:relative!important;
height:230px!important;
overflow:hidden!important;
border:1px solid rgba(72,255,59,.32)!important;
border-radius:15px!important;
background:#06140e!important;
}
.dpf-page .dpf-effect-image img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
display:block!important;
}
.dpf-page .dpf-effect-label{
position:absolute!important;
left:16px!important;
bottom:14px!important;
padding:8px 13px!important;
border:1px solid #48ff3b!important;
border-radius:9px!important;
background:rgba(2,13,7,.9)!important;
color:#fff!important;
font-size:11px!important;
font-weight:800!important;
}
.dpf-page .dpf-effect-label-green{
background:#48ff3b!important;
color:#021008!important;
}
.dpf-page .dpf-effect-card figcaption{
padding:9px 5px 0!important;
font-size:10px!important;
line-height:1.4!important;
color:#bdc9c0!important;
}
.dpf-page .dpf-effect-arrow{
width:46px!important;
height:46px!important;
margin:auto!important;
display:grid!important;
place-items:center!important;
border:1px solid #48ff3b!important;
border-radius:50%!important;
color:#48ff3b!important;
font-size:25px!important;
}
.dpf-page .dpf-effect-bottom{
margin-top:15px!important;
padding:12px!important;
text-align:center!important;
border-top:1px solid rgba(72,255,59,.22)!important;
color:#48ff3b!important;
font-size:12px!important;
}
@media(max-width:700px){
.dpf-page .dpf-effect-grid{
grid-template-columns:1fr!important;
}
.dpf-page .dpf-effect-arrow{
transform:rotate(90deg)!important;
}
}
/* ===== DPF — CTA ===== */
.dpf-page .dpf-cta-section{
padding:10px 0!important;
}
.dpf-page .dpf-cta{
display:grid!important;
grid-template-columns:1.15fr .85fr!important;
gap:28px!important;
align-items:center!important;
padding:22px 28px!important;
}
.dpf-page .dpf-cta-copy h2{
margin:5px 0 8px!important;
font-size:30px!important;
line-height:1.05!important;
}
.dpf-page .dpf-cta-copy h2 span{
color:#48ff3b!important;
}
.dpf-page .dpf-cta-copy p{
margin:0!important;
max-width:520px!important;
font-size:12px!important;
line-height:1.45!important;
color:#bdc9c0!important;
}
.dpf-page .dpf-cta-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:18px!important;
align-items:center!important;
}
.dpf-page .dpf-cta-actions .btn{
width:100%!important;
min-height:52px!important;
}
.dpf-page .dpf-cta-phone{
display:flex!important;
flex-direction:column!important;
font-size:20px!important;
font-weight:800!important;
line-height:1.2!important;
}
.dpf-page .dpf-cta-phone small{
margin-top:5px!important;
font-size:10px!important;
font-weight:400!important;
color:#9eaaa2!important;
}
@media(max-width:800px){
.dpf-page .dpf-cta{
grid-template-columns:1fr!important;
}
.dpf-page .dpf-cta-actions{
grid-template-columns:1fr!important;
}
}
/* ===== H2ENGINE GLOBAL FONT — MONTSERRAT ===== */
html,
body,
button,
input,
select,
textarea{
font-family:"Montserrat", Arial, sans-serif !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.eyebrow,
nav,
.nav{
font-family:"Montserrat", Arial, sans-serif !important;
}
h1{
font-weight:900 !important;
}
h2{
font-weight:800 !important;
}
h3,
.btn,
.eyebrow{
font-weight:700 !important;
}
/* ===== HOME / WHEN TO CLEAN — MOCKUP 1:1 (2026-09-08) ===== */
#symptoms.home-symptoms-v3{
padding:0!important;
margin:0!important;
background:#00110d;
overflow:hidden;
}
.home-symptoms-v3__desktop{
display:block;
width:100%;
height:auto;
max-width:none!important;
margin:0;
}
.home-symptoms-v3__mobile{
display:none;
}
@media (max-width:820px){
.home-symptoms-v3__desktop{
display:none;
}
.home-symptoms-v3__mobile{
display:block;
padding:28px 18px 22px;
background:
radial-gradient(circle at 86% 8%,rgba(0,118,78,.09),transparent 27%),
linear-gradient(180deg,#00110d 0%,#00100c 100%);
font-family:"Montserrat",Arial,sans-serif;
}
.home-symptoms-v3__top{
display:grid;
grid-template-columns:1fr;
gap:18px;
}
.home-symptoms-v3__eyebrow{
margin:0 0 10px;
color:#19ff31;
font-size:13px;
line-height:1;
font-weight:800;
letter-spacing:.015em;
text-transform:uppercase;
}
.home-symptoms-v3__copy h2{
margin:0!important;
color:#f5f8f6!important;
font-family:"Montserrat",Arial,sans-serif!important;
font-size:clamp(36px,9vw,54px)!important;
line-height:1!important;
letter-spacing:-.045em!important;
font-weight:800!important;
}
.home-symptoms-v3__copy h2 span{
color:#24ef28;
}
.home-symptoms-v3__copy p{
margin:14px 0 0!important;
color:#f0f2f1!important;
font-family:"Montserrat",Arial,sans-serif!important;
font-size:15px!important;
line-height:1.4!important;
}
.home-symptoms-v3__callout{
display:block;
width:min(100%,420px);
height:auto;
}
.home-symptoms-v3__cards-scroll{
margin:24px -18px 0;
padding:0 18px 8px;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}
.home-symptoms-v3__cards{
display:block;
width:1088px;
max-width:none!important;
height:248px;
}
}
/* ===== WHEN TO CLEAN — desktop size/font correction 2026-09-08 ===== */
@media (min-width:821px){
#symptoms.home-symptoms-v3{
padding:0!important;
background:#00110d!important;
}
/* Больше не растягиваем цельный скрин макета */
#symptoms .home-symptoms-v3__desktop{
display:none!important;
}
/* Используем живой HTML + графику из макета */
#symptoms .home-symptoms-v3__mobile{
display:block!important;
width:min(calc(100% - 40px),1500px)!important;
margin:0 auto!important;
padding:42px 26px 38px!important;
background:transparent!important;
font-family:"Montserrat",Arial,sans-serif!important;
}
#symptoms .home-symptoms-v3__top{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(340px,430px)!important;
gap:42px!important;
align-items:center!important;
}
#symptoms .home-symptoms-v3__eyebrow{
margin:0 0 13px!important;
color:#19ff31!important;
font-family:"Montserrat",Arial,sans-serif!important;
font-size:14px!important;
line-height:1.1!important;
font-weight:800!important;
letter-spacing:.02em!important;
}
#symptoms .home-symptoms-v3__copy h2{
margin:0!important;
color:#f5f7f6!important;
font-family:"Montserrat",Arial,sans-serif!important;
font-size:clamp(42px,3vw,56px)!important;
line-height:1.02!important;
font-weight:800!important;
letter-spacing:-.035em!important;
white-space:nowrap!important;
}
#symptoms .home-symptoms-v3__copy h2 span{
color:#20ef2c!important;
}
#symptoms .home-symptoms-v3__copy p{
margin:14px 0 0!important;
color:#e1e6e3!important;
font-family:"Montserrat",Arial,sans-serif!important;
font-size:16px!important;
line-height:1.45!important;
font-weight:400!important;
}
#symptoms .home-symptoms-v3__callout{
display:block!important;
width:100%!important;
max-width:430px!important;
height:auto!important;
justify-self:end!important;
}
#symptoms .home-symptoms-v3__cards-scroll{
margin:34px 0 0!important;
padding:0!important;
overflow:visible!important;
}
#symptoms .home-symptoms-v3__cards{
display:block!important;
width:100%!important;
max-width:none!important;
height:auto!important;
}
}
/* =========================================================
H2-SYMPTOMS-LIVE-TEXT-V4
Чёткие HTML-подписи поверх оригинальной графики макета
========================================================= */
/* ---------- ПРАВАЯ ПЛАШКА ---------- */
#symptoms .home-symptoms-v4__callout{
position:relative;
display:block;
width:100%;
max-width:430px;
aspect-ratio:346 / 95;
justify-self:end;
overflow:hidden;
background-image:url("/assets/img/home-symptoms-callout.webp");
background-repeat:no-repeat;
background-position:center;
background-size:100% 100%;
font-family:"Montserrat",Arial,sans-serif;
}
/* Закрываем старый текст, который находился внутри PNG */
#symptoms .home-symptoms-v4__callout::before{
content:"";
position:absolute;
z-index:1;
left:28.5%;
right:13.5%;
top:12%;
bottom:12%;
background:
linear-gradient(
90deg,
#031611 0%,
#02140f 45%,
#01130f 100%
);
}
/* Новый живой текст */
#symptoms .home-symptoms-v4__callout span{
position:absolute;
z-index:2;
left:30.5%;
right:14%;
top:50%;
transform:translateY(-50%);
color:#f5f7f6;
font-family:"Montserrat",Arial,sans-serif;
font-size:clamp(11px,.78vw,14px);
font-weight:700;
line-height:1.52;
letter-spacing:-.015em;
-webkit-font-smoothing:antialiased;
text-rendering:geometricPrecision;
}
/* ---------- КАРТОЧКИ ---------- */
#symptoms .home-symptoms-v4__cards{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:22px;
width:100%;
margin:0;
}
/*
Оригинальная картинка 1088x248 используется как sprite.
Из неё каждая карточка получает только свой участок.
*/
#symptoms .home-symptoms-v4__card{
position:relative;
min-width:0;
aspect-ratio:162 / 248;
overflow:hidden;
border-radius:11px;
background-image:url("/assets/img/home-symptoms-cards.webp");
background-repeat:no-repeat;
/*
1088 / 162 = 6.716...
Это позволяет каждой карточке показывать свой участок
исходного изображения без потери качества композиции.
*/
background-size:671.605% 100%;
transform:translateZ(0);
backface-visibility:hidden;
}
/* Позиции 6 карточек внутри исходной картинки */
#symptoms .home-symptoms-v4__card--1{
background-position:0% 0;
}
#symptoms .home-symptoms-v4__card--2{
background-position:19.87% 0;
}
#symptoms .home-symptoms-v4__card--3{
background-position:39.85% 0;
}
#symptoms .home-symptoms-v4__card--4{
background-position:59.72% 0;
}
#symptoms .home-symptoms-v4__card--5{
background-position:79.70% 0;
}
#symptoms .home-symptoms-v4__card--6{
background-position:100% 0;
}
/*
Этот слой полностью закрывает старую подпись внутри PNG.
Верхняя часть карточки с прибором/иконкой остаётся оригинальной.
*/
#symptoms .home-symptoms-v4__label{
position:absolute;
z-index:3;
left:1px;
right:1px;
bottom:1px;
height:32.5%;
padding:
7.8%
8.5%
6.5%;
display:flex;
align-items:flex-start;
background:
linear-gradient(
180deg,
rgba(1,18,14,.99) 0%,
#01130f 34%,
#00110d 100%
);
border-radius:0 0 10px 10px;
}
/* НОВЫЙ ЧЁТКИЙ ТЕКСТ */
#symptoms .home-symptoms-v4__label strong{
display:block;
margin:0;
padding:0;
color:#fff;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:clamp(13px,.92vw,16px);
font-weight:800 !important;
line-height:1.32;
letter-spacing:-.025em;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:geometricPrecision;
text-shadow:
0 0 .01px #fff;
}
/* Маленькая зелёная линия снизу как в исходном макете */
#symptoms .home-symptoms-v4__label::after{
content:"";
position:absolute;
left:8.5%;
bottom:7.5%;
width:19%;
max-width:38px;
height:1px;
background:#15bd28;
}
/* ---------- DESKTOP ---------- */
@media (min-width:821px){
#symptoms .home-symptoms-v4__callout{
max-width:430px;
}
#symptoms .home-symptoms-v4__cards{
gap:22px;
}
}
/* ---------- MOBILE ---------- */
@media (max-width:820px){
#symptoms .home-symptoms-v4__callout{
width:min(100%,420px);
max-width:420px;
justify-self:start;
}
#symptoms .home-symptoms-v4__callout span{
font-size:clamp(10px,3vw,13px);
font-weight:700;
}
#symptoms .home-symptoms-v4__cards{
display:grid;
grid-template-columns:none;
grid-auto-flow:column;
grid-auto-columns:162px;
gap:23px;
width:max-content;
}
#symptoms .home-symptoms-v4__card{
width:162px;
height:248px;
aspect-ratio:auto;
background-size:1088px 248px;
}
#symptoms .home-symptoms-v4__card--1{
background-position:0 0;
}
#symptoms .home-symptoms-v4__card--2{
background-position:-185px 0;
}
#symptoms .home-symptoms-v4__card--3{
background-position:-369px 0;
}
#symptoms .home-symptoms-v4__card--4{
background-position:-553px 0;
}
#symptoms .home-symptoms-v4__card--5{
background-position:-738px 0;
}
#symptoms .home-symptoms-v4__card--6{
background-position:-923px 0;
}
#symptoms .home-symptoms-v4__label strong{
font-size:14px;
}
}
/* ===== SYMPTOMS V4 — final card text/blend tuning ===== */
@media (min-width:821px){
#symptoms .home-symptoms-v4__label{
height:29% !important;
padding:
8%
8.5%
5.5% !important;
background:
linear-gradient(
180deg,
rgba(1,18,14,0) 0%,
rgba(1,18,14,.82) 12%,
rgba(1,18,14,.98) 25%,
#01130f 42%,
#00110d 100%
) !important;
}
#symptoms .home-symptoms-v4__label strong{
font-size:15px !important;
font-weight:800 !important;
line-height:1.30 !important;
letter-spacing:-.02em !important;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:geometricPrecision;
}
#symptoms .home-symptoms-v4__label::after{
left:8.5% !important;
bottom:7% !important;
width:18% !important;
height:1px !important;
}
#symptoms .home-symptoms-v4__callout span{
font-weight:700 !important;
line-height:1.48 !important;
letter-spacing:-.01em !important;
}
}
/* =========================================================
SYMPTOMS V5 — полностью убираем старый текст из PNG
========================================================= */
/*
* Сам sprite больше НЕ является фоном всей карточки.
* Поэтому встроенные в PNG подписи физически не могут появиться.
*/
#symptoms .home-symptoms-v4__card{
position:relative !important;
background-image:none !important;
background:#00110d !important;
overflow:hidden !important;
border:1px solid rgba(92,125,116,.24) !important;
border-radius:11px !important;
}
/*
* В ::before показываем ТОЛЬКО верхнюю графическую часть
* оригинальной карточки.
*
* 71.5% заканчиваются выше старых надписей.
*/
#symptoms .home-symptoms-v4__card::before{
content:"" !important;
position:absolute !important;
z-index:1 !important;
left:0 !important;
right:0 !important;
top:0 !important;
width:100% !important;
height:71.5% !important;
display:block !important;
background-image:url("/assets/img/home-symptoms-cards.webp") !important;
background-repeat:no-repeat !important;
/*
* Исходник 1088px.
* Одна карточка примерно 162px.
*/
background-size:671.605% auto !important;
background-position-y:top !important;
pointer-events:none !important;
}
/* Позиция каждой карточки в исходном sprite */
#symptoms .home-symptoms-v4__card--1::before{
background-position-x:0% !important;
}
#symptoms .home-symptoms-v4__card--2::before{
background-position-x:19.87% !important;
}
#symptoms .home-symptoms-v4__card--3::before{
background-position-x:39.85% !important;
}
#symptoms .home-symptoms-v4__card--4::before{
background-position-x:59.72% !important;
}
#symptoms .home-symptoms-v4__card--5::before{
background-position-x:79.70% !important;
}
#symptoms .home-symptoms-v4__card--6::before{
background-position-x:100% !important;
}
/* =========================================================
Нижняя часть — теперь полностью CSS
========================================================= */
#symptoms .home-symptoms-v4__label{
position:absolute !important;
z-index:4 !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
/*
* Небольшой нахлёст на картинку убирает видимый стык.
*/
height:31.5% !important;
padding:
8%
8.5%
6%
8.5% !important;
display:flex !important;
align-items:flex-start !important;
overflow:hidden !important;
background:
linear-gradient(
180deg,
rgba(0,17,13,.95) 0%,
#00110d 18%,
#00110d 100%
) !important;
border-radius:0 0 10px 10px !important;
}
/*
* Старый маскирующий слой больше вообще не нужен.
*/
#symptoms .home-symptoms-v4__label::before{
content:none !important;
display:none !important;
}
/* Новый настоящий текст */
#symptoms .home-symptoms-v4__label strong{
position:relative !important;
z-index:5 !important;
display:block !important;
margin:0 !important;
padding:0 !important;
color:#fff !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:15px !important;
font-weight:800 !important;
line-height:1.30 !important;
letter-spacing:-.025em !important;
-webkit-font-smoothing:antialiased !important;
-moz-osx-font-smoothing:grayscale !important;
text-rendering:geometricPrecision !important;
text-shadow:none !important;
}
/* Зелёная полоска */
#symptoms .home-symptoms-v4__label::after{
content:"" !important;
position:absolute !important;
z-index:5 !important;
left:8.5% !important;
bottom:7% !important;
width:18% !important;
max-width:38px !important;
height:1px !important;
background:#15bd28 !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:820px){
#symptoms .home-symptoms-v4__card::before{
height:71.5% !important;
background-size:1088px 248px !important;
background-position-y:0 !important;
}
#symptoms .home-symptoms-v4__card--1::before{
background-position:0 0 !important;
}
#symptoms .home-symptoms-v4__card--2::before{
background-position:-185px 0 !important;
}
#symptoms .home-symptoms-v4__card--3::before{
background-position:-369px 0 !important;
}
#symptoms .home-symptoms-v4__card--4::before{
background-position:-553px 0 !important;
}
#symptoms .home-symptoms-v4__card--5::before{
background-position:-738px 0 !important;
}
#symptoms .home-symptoms-v4__card--6::before{
background-position:-923px 0 !important;
}
#symptoms .home-symptoms-v4__label strong{
font-size:14px !important;
}
}
/* =========================================================
SYMPTOMS FINAL — desktop 1:1 tuning
========================================================= */
@media (min-width:821px){
/* Весь блок компактнее и по центру */
#symptoms .home-symptoms-v3__mobile{
width:min(calc(100% - 40px),1180px) !important;
margin:0 auto !important;
padding:32px 0 30px !important;
}
/* Верх: заголовок + плашка */
#symptoms .home-symptoms-v3__top{
display:grid !important;
grid-template-columns:minmax(0,1fr) 350px !important;
gap:28px !important;
align-items:center !important;
}
#symptoms .home-symptoms-v3__eyebrow{
margin:0 0 11px !important;
font-size:13px !important;
line-height:1.1 !important;
font-weight:800 !important;
}
#symptoms .home-symptoms-v3__copy h2{
font-size:46px !important;
line-height:1.02 !important;
letter-spacing:-.035em !important;
white-space:nowrap !important;
}
#symptoms .home-symptoms-v3__copy p{
margin:12px 0 0 !important;
font-size:15px !important;
line-height:1.4 !important;
}
/* Правая плашка */
#symptoms .home-symptoms-v4__callout{
width:350px !important;
max-width:350px !important;
justify-self:end !important;
}
/*
* Мягко перекрываем старый текст внутри PNG,
* без заметного прямоугольника.
*/
#symptoms .home-symptoms-v4__callout::before{
content:"" !important;
display:block !important;
position:absolute !important;
z-index:1 !important;
left:32% !important;
right:15% !important;
top:19% !important;
bottom:19% !important;
background:#00110d !important;
box-shadow:
-13px 0 16px 8px #00110d,
13px 0 16px 8px #00110d !important;
}
#symptoms .home-symptoms-v4__callout span{
z-index:2 !important;
left:34% !important;
right:14% !important;
font-size:11px !important;
font-weight:700 !important;
line-height:1.48 !important;
letter-spacing:-.01em !important;
}
/* Расстояние до карточек */
#symptoms .home-symptoms-v3__cards-scroll{
margin-top:27px !important;
}
/* 6 компактных карточек */
#symptoms .home-symptoms-v4__cards{
display:grid !important;
grid-template-columns:repeat(6,minmax(0,1fr)) !important;
gap:14px !important;
width:100% !important;
}
#symptoms .home-symptoms-v4__card{
width:auto !important;
min-width:0 !important;
aspect-ratio:162 / 248 !important;
border-radius:10px !important;
}
#symptoms .home-symptoms-v4__card::before{
height:71.5% !important;
}
/* Нижняя текстовая часть */
#symptoms .home-symptoms-v4__label{
height:31% !important;
padding:8% 8.5% 6% !important;
}
#symptoms .home-symptoms-v4__label strong{
font-size:13px !important;
font-weight:800 !important;
line-height:1.28 !important;
letter-spacing:-.025em !important;
}
#symptoms .home-symptoms-v4__label::after{
left:8.5% !important;
bottom:7% !important;
width:19% !important;
max-width:32px !important;
height:1px !important;
}
}
/* На небольших ноутбуках заголовок не ломаем */
@media (min-width:821px) and (max-width:1150px){
#symptoms .home-symptoms-v3__mobile{
width:calc(100% - 32px) !important;
}
#symptoms .home-symptoms-v3__top{
grid-template-columns:minmax(0,1fr) 300px !important;
gap:20px !important;
}
#symptoms .home-symptoms-v3__copy h2{
font-size:38px !important;
}
#symptoms .home-symptoms-v4__callout{
width:300px !important;
}
#symptoms .home-symptoms-v4__label strong{
font-size:12px !important;
}
}
/* =========================================================
H2ENGINE HOME HERO — FINAL MOCKUP 1:1
desktop >= 1101px
========================================================= */
@media (min-width:1101px){
/* =======================================================
HEADER
======================================================= */
body .topbar .container{
width:min(calc(100% - 88px),1450px) !important;
max-width:1450px !important;
}
body .topbar-inner{
height:88px !important;
gap:26px !important;
}
/* В logo.png уже есть шестерёнка + H2ENGINE + подпись.
Поэтому второй текстовый логотип скрываем. */
body .topbar .brand{
min-width:300px !important;
width:300px !important;
gap:0 !important;
flex:0 0 300px !important;
}
body .topbar .brand img{
display:block !important;
width:285px !important;
height:auto !important;
max-height:72px !important;
object-fit:contain !important;
object-position:left center !important;
}
body .topbar .brand-copy{
display:none !important;
}
body .topbar .nav{
margin-left:auto !important;
gap:34px !important;
font-size:16px !important;
font-weight:600 !important;
}
body .topbar .nav a{
white-space:nowrap !important;
}
body .topbar .header-contact{
margin-left:18px !important;
text-align:right !important;
}
body .topbar .header-contact a{
font-size:20px !important;
line-height:1 !important;
font-weight:800 !important;
}
/* В макете под телефоном нет строки с графиком */
body .topbar .header-contact small{
display:none !important;
}
body .topbar > .container > .topbar-inner > .btn,
body .topbar .topbar-inner > .btn{
width:162px !important;
min-width:162px !important;
min-height:54px !important;
height:54px !important;
padding:0 22px !important;
border-radius:11px !important;
font-size:18px !important;
font-weight:800 !important;
}
/* =======================================================
HERO — ОБЩИЙ КОНТЕЙНЕР
======================================================= */
body .home-hero-v2{
padding:26px 0 20px !important;
background:
radial-gradient(
circle at 73% 34%,
rgba(35,255,45,.075),
transparent 31%
),
#020d08 !important;
}
body .home-hero-v2 > .container{
width:min(calc(100% - 88px),1450px) !important;
max-width:1450px !important;
margin-left:auto !important;
margin-right:auto !important;
}
body .home-hero-v2-grid{
display:grid !important;
grid-template-columns:
minmax(0,690px)
minmax(0,1fr) !important;
gap:28px !important;
align-items:start !important;
}
/* =======================================================
HERO — ЛЕВАЯ ЧАСТЬ
======================================================= */
body .home-hero-v2-copy{
padding:27px 0 0 !important;
min-width:0 !important;
}
body .home-hero-v2-copy .eyebrow{
margin:0 0 17px !important;
color:#36f431 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:13px !important;
line-height:1.15 !important;
font-weight:700 !important;
letter-spacing:.025em !important;
}
body .home-hero-v2-copy h1{
margin:0 !important;
max-width:675px !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:74px !important;
line-height:.96 !important;
font-weight:800 !important;
letter-spacing:-.052em !important;
color:#f3f6f4 !important;
}
body .home-hero-v2-copy h1 span{
color:#36ee2e !important;
}
body .home-hero-v2-lead{
margin:25px 0 0 !important;
max-width:655px !important;
color:#e2e7e4 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:17px !important;
line-height:1.55 !important;
font-weight:400 !important;
letter-spacing:-.01em !important;
}
/* =======================================================
4 МАЛЕНЬКИЕ КАРТОЧКИ
======================================================= */
body .home-hero-v2-facts{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:27px !important;
}
body .home-hero-v2-fact{
min-height:70px !important;
padding:9px 11px !important;
display:grid !important;
grid-template-columns:38px minmax(0,1fr) !important;
gap:9px !important;
align-items:center !important;
border:
1px solid rgba(61,255,71,.30) !important;
border-radius:12px !important;
background:
rgba(5,20,13,.92) !important;
}
body .home-hero-v2-fact .icon{
width:36px !important;
height:36px !important;
border:
1px solid #2fff32 !important;
color:#2fff32 !important;
font-size:17px !important;
}
body .home-hero-v2-fact .icon svg{
width:20px !important;
height:20px !important;
}
body .home-hero-v2-fact b{
font-family:"Montserrat",Arial,sans-serif !important;
font-size:12px !important;
line-height:1.15 !important;
font-weight:700 !important;
}
body .home-hero-v2-fact small{
margin-top:4px !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:9px !important;
line-height:1.25 !important;
color:#c5cec8 !important;
}
/* =======================================================
КНОПКИ
======================================================= */
body .home-hero-v2-actions{
display:flex !important;
gap:20px !important;
margin-top:28px !important;
}
body .home-hero-v2-actions .btn{
min-height:82px !important;
height:82px !important;
border-radius:12px !important;
padding:11px 24px !important;
}
body .home-hero-v2-actions .home-hero-price{
width:298px !important;
min-width:298px !important;
}
body .home-hero-v2-actions .home-hero-service{
width:286px !important;
min-width:286px !important;
}
body .home-hero-v2-actions .btn b{
font-family:"Montserrat",Arial,sans-serif !important;
font-size:18px !important;
line-height:1.15 !important;
font-weight:700 !important;
}
body .home-hero-v2-actions .btn small{
margin-top:5px !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:11px !important;
line-height:1.2 !important;
}
/* =======================================================
HERO — ПРАВАЯ КАРТИНКА
======================================================= */
body .home-hero-v2-art{
position:relative !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
aspect-ratio:6 / 5 !important;
border:
1px solid rgba(60,255,72,.23) !important;
border-radius:19px !important;
overflow:hidden !important;
background:#03110b !important;
}
body .home-hero-v2-art img{
position:absolute !important;
inset:0 !important;
display:block !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
object-fit:cover !important;
object-position:center center !important;
}
/* =======================================================
H2 ПЛАШКА
======================================================= */
body .home-h2-tech-card{
top:24px !important;
left:34px !important;
width:192px !important;
height:121px !important;
min-height:121px !important;
border:
1px solid #31f231 !important;
border-radius:14px !important;
background:
rgba(2,15,9,.89) !important;
backdrop-filter:none !important;
}
body .home-h2-tech-card strong{
color:#3dff39 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:40px !important;
line-height:1 !important;
font-weight:700 !important;
}
body .home-h2-tech-card span{
margin-top:9px !important;
color:#f3f5f4 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:11px !important;
line-height:1.35 !important;
font-weight:400 !important;
}
/* =======================================================
ЗНАЧОК 2019
======================================================= */
body .home-year-badge{
top:22px !important;
right:20px !important;
width:150px !important;
height:150px !important;
border:3px solid #f4f7f5 !important;
border-radius:50% !important;
background:
rgba(3,14,9,.86) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.10),
0 0 24px rgba(45,255,55,.08) !important;
overflow:hidden !important;
}
body .home-year-badge small{
position:absolute !important;
top:21px !important;
left:0 !important;
right:0 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:9px !important;
line-height:1 !important;
font-weight:700 !important;
}
body .home-year-badge::before{
content:"★ ★ ★" !important;
position:absolute !important;
top:43px !important;
left:0 !important;
right:0 !important;
color:#36f431 !important;
font-size:12px !important;
line-height:1 !important;
letter-spacing:1px !important;
text-align:center !important;
}
body .home-year-badge strong{
position:absolute !important;
top:59px !important;
left:0 !important;
right:0 !important;
margin:0 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:34px !important;
line-height:1 !important;
font-weight:700 !important;
}
body .home-year-badge span{
position:absolute !important;
top:96px !important;
left:0 !important;
right:0 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:11px !important;
line-height:1 !important;
font-weight:600 !important;
}
body .home-year-badge::after{
content:"НАДЁЖНО · ПРОФЕССИОНАЛЬНО" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:15px !important;
color:#e7ede9 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:6px !important;
line-height:1 !important;
font-weight:600 !important;
letter-spacing:.02em !important;
text-align:center !important;
}
/* =======================================================
TRUST BAR
======================================================= */
body .home-hero-trust{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
margin-top:31px !important;
min-height:134px !important;
border:
1px solid rgba(61,255,71,.23) !important;
border-radius:17px !important;
overflow:hidden !important;
background:
rgba(5,18,12,.93) !important;
}
body .home-hero-trust > div{
min-height:132px !important;
padding:19px 45px !important;
display:grid !important;
grid-template-columns:58px minmax(0,1fr) !important;
gap:17px !important;
align-items:center !important;
}
body .home-hero-trust > div + div{
border-left:
1px solid rgba(160,180,170,.21) !important;
}
body .home-hero-trust .trust-icon{
width:56px !important;
height:56px !important;
color:#30f432 !important;
}
body .home-hero-trust .trust-icon svg{
width:50px !important;
height:50px !important;
}
body .home-hero-trust p{
margin:0 !important;
color:#f0f4f1 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:16px !important;
line-height:1.25 !important;
font-weight:400 !important;
}
body .home-hero-trust b{
font-size:24px !important;
line-height:1.05 !important;
font-weight:600 !important;
}
body .home-hero-trust small{
margin-top:6px !important;
color:#e0e6e2 !important;
font-size:12px !important;
line-height:1.45 !important;
font-weight:400 !important;
}
/* =======================================================
НИЖНЯЯ H2ENGINE-ПОЛОСА
======================================================= */
body .home-hero-brandbar{
display:grid !important;
grid-template-columns:
155px
1.35fr
1.25fr
178px !important;
gap:22px !important;
align-items:center !important;
min-height:87px !important;
margin-top:21px !important;
padding:12px 18px !important;
border:
1px solid rgba(54,255,65,.22) !important;
border-radius:17px !important;
background:
linear-gradient(
90deg,
#06180f 0%,
#03120b 48%,
#04140c 100%
) !important;
}
body .home-hero-brand{
min-height:54px !important;
padding:0 14px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid #31f432 !important;
border-radius:26px !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:18px !important;
line-height:1 !important;
font-weight:700 !important;
letter-spacing:-.035em !important;
background:
linear-gradient(
90deg,
#34f435 0 27%,
#f5f7f6 27% 100%
) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
}
body .home-hero-brand-main{
font-family:"Montserrat",Arial,sans-serif !important;
color:#f2f5f3 !important;
font-size:20px !important;
line-height:1.25 !important;
font-weight:600 !important;
}
body .home-hero-brand-main span{
color:#30f230 !important;
}
body .home-hero-brandbar p{
margin:0 !important;
color:#e0e6e2 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:13px !important;
line-height:1.45 !important;
font-weight:400 !important;
}
body .home-hero-brandbar > a{
min-height:44px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:
1px solid #29e72d !important;
border-radius:8px !important;
color:#f5f7f6 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:14px !important;
line-height:1 !important;
font-weight:500 !important;
}
/* немного воздуха перед следующим блоком */
body .home-hero-v2{
margin-bottom:0 !important;
}
}
/* =========================================================
NOTEBOOK — сохраняем композицию, но не ломаем адаптив
========================================================= */
@media (min-width:1101px) and (max-width:1350px){
body .topbar .container,
body .home-hero-v2 > .container{
width:calc(100% - 48px) !important;
}
body .topbar .brand{
width:250px !important;
min-width:250px !important;
flex-basis:250px !important;
}
body .topbar .brand img{
width:240px !important;
}
body .topbar .nav{
gap:22px !important;
font-size:14px !important;
}
body .home-hero-v2-grid{
grid-template-columns:
minmax(0,600px)
minmax(0,1fr) !important;
gap:22px !important;
}
body .home-hero-v2-copy h1{
font-size:64px !important;
}
body .home-hero-v2-actions .home-hero-price{
width:270px !important;
min-width:270px !important;
}
body .home-hero-v2-actions .home-hero-service{
width:260px !important;
min-width:260px !important;
}
body .home-hero-trust > div{
padding-left:25px !important;
padding-right:25px !important;
}
}
/* =========================================================
HOME HERO — COMPACT VERSION
уменьшаем первый экран без изменения композиции
========================================================= */
@media (min-width:1101px){
/* Общая ширина */
body .topbar .container,
body .home-hero-v2 > .container{
width:min(calc(100% - 70px),1280px) !important;
max-width:1280px !important;
}
/* ---------- HEADER ---------- */
body .topbar-inner{
height:74px !important;
}
body .topbar .brand{
width:245px !important;
min-width:245px !important;
flex-basis:245px !important;
}
body .topbar .brand img{
width:230px !important;
max-height:60px !important;
}
body .topbar .nav{
gap:27px !important;
font-size:14px !important;
}
body .topbar .header-contact a{
font-size:17px !important;
}
body .topbar .topbar-inner > .btn{
width:140px !important;
min-width:140px !important;
height:48px !important;
min-height:48px !important;
font-size:16px !important;
}
/* ---------- HERO ---------- */
body .home-hero-v2{
padding:15px 0 16px !important;
}
body .home-hero-v2-grid{
grid-template-columns:minmax(0,585px) minmax(0,1fr) !important;
gap:24px !important;
}
body .home-hero-v2-copy{
padding-top:20px !important;
}
body .home-hero-v2-copy .eyebrow{
margin-bottom:13px !important;
font-size:11px !important;
}
body .home-hero-v2-copy h1{
max-width:580px !important;
font-size:60px !important;
line-height:.96 !important;
}
body .home-hero-v2-lead{
margin-top:20px !important;
max-width:565px !important;
font-size:14px !important;
line-height:1.5 !important;
}
/* ---------- 4 преимущества ---------- */
body .home-hero-v2-facts{
gap:8px !important;
margin-top:20px !important;
}
body .home-hero-v2-fact{
min-height:60px !important;
padding:7px 9px !important;
grid-template-columns:32px minmax(0,1fr) !important;
gap:7px !important;
border-radius:10px !important;
}
body .home-hero-v2-fact .icon{
width:31px !important;
height:31px !important;
}
body .home-hero-v2-fact .icon svg{
width:17px !important;
height:17px !important;
}
body .home-hero-v2-fact b{
font-size:10px !important;
}
body .home-hero-v2-fact small{
margin-top:2px !important;
font-size:8px !important;
}
/* ---------- Кнопки ---------- */
body .home-hero-v2-actions{
gap:16px !important;
margin-top:21px !important;
}
body .home-hero-v2-actions .btn{
height:66px !important;
min-height:66px !important;
border-radius:10px !important;
}
body .home-hero-v2-actions .home-hero-price{
width:250px !important;
min-width:250px !important;
}
body .home-hero-v2-actions .home-hero-service{
width:235px !important;
min-width:235px !important;
}
body .home-hero-v2-actions .btn b{
font-size:15px !important;
}
body .home-hero-v2-actions .btn small{
font-size:9px !important;
}
/* ---------- Картинка двигателя ---------- */
body .home-hero-v2-art{
aspect-ratio:1.20 / 1 !important;
max-height:490px !important;
border-radius:15px !important;
}
body .home-h2-tech-card{
top:20px !important;
left:28px !important;
width:155px !important;
height:98px !important;
min-height:98px !important;
}
body .home-h2-tech-card strong{
font-size:32px !important;
}
body .home-h2-tech-card span{
margin-top:6px !important;
font-size:9px !important;
}
body .home-year-badge{
top:18px !important;
right:17px !important;
width:122px !important;
height:122px !important;
}
body .home-year-badge small{
top:17px !important;
font-size:7px !important;
}
body .home-year-badge::before{
top:34px !important;
font-size:9px !important;
}
body .home-year-badge strong{
top:47px !important;
font-size:28px !important;
}
body .home-year-badge span{
top:78px !important;
font-size:9px !important;
}
body .home-year-badge::after{
bottom:11px !important;
font-size:5px !important;
}
/* ---------- Большая полоса преимуществ ---------- */
body .home-hero-trust{
min-height:104px !important;
margin-top:22px !important;
border-radius:14px !important;
}
body .home-hero-trust > div{
min-height:102px !important;
padding:14px 28px !important;
grid-template-columns:44px minmax(0,1fr) !important;
gap:13px !important;
}
body .home-hero-trust .trust-icon{
width:42px !important;
height:42px !important;
}
body .home-hero-trust .trust-icon svg{
width:39px !important;
height:39px !important;
}
body .home-hero-trust p{
font-size:13px !important;
}
body .home-hero-trust b{
font-size:19px !important;
}
body .home-hero-trust small{
margin-top:4px !important;
font-size:10px !important;
}
/* ---------- Нижняя H2ENGINE-полоска ---------- */
body .home-hero-brandbar{
grid-template-columns:135px 1.35fr 1.25fr 155px !important;
gap:18px !important;
min-height:68px !important;
margin-top:16px !important;
padding:8px 14px !important;
border-radius:14px !important;
}
body .home-hero-brand{
min-height:44px !important;
font-size:15px !important;
}
body .home-hero-brand-main{
font-size:16px !important;
}
body .home-hero-brandbar p{
font-size:10px !important;
line-height:1.4 !important;
}
body .home-hero-brandbar > a{
min-height:38px !important;
font-size:12px !important;
}
}
/* =========================================================
HERO — VERTICAL TIGHTENING
Только уменьшаем высоту первого экрана
========================================================= */
@media (min-width:1101px){
body .home-hero-v2{
padding-top:10px !important;
padding-bottom:10px !important;
}
body .home-hero-v2-copy{
padding-top:14px !important;
}
body .home-hero-v2-copy .eyebrow{
margin-bottom:10px !important;
}
body .home-hero-v2-lead{
margin-top:16px !important;
}
body .home-hero-v2-facts{
margin-top:16px !important;
}
body .home-hero-v2-actions{
margin-top:16px !important;
}
body .home-hero-v2-art{
max-height:465px !important;
}
body .home-hero-trust{
margin-top:14px !important;
min-height:94px !important;
}
body .home-hero-trust > div{
min-height:92px !important;
padding-top:10px !important;
padding-bottom:10px !important;
}
body .home-hero-brandbar{
margin-top:12px !important;
min-height:62px !important;
}
}
/* ===== HERO FACT ICONS — match mockup closer ===== */
.home-hero-v2-fact .icon{
font-size:0 !important;
}
.home-hero-v2-fact .icon svg{
display:block !important;
width:18px !important;
height:18px !important;
color:#2fff32 !important;
}
.home-hero-v2-fact .icon svg *{
vector-effect:non-scaling-stroke;
}
/* HERO RUB icon */
.home-hero-v2-fact .hero-ruble-icon{
font-family:Arial,"Montserrat",sans-serif !important;
font-size:20px !important;
font-weight:700 !important;
line-height:1 !important;
color:#2fff32 !important;
}
/* 2019 badge — нижняя подпись */
@media (min-width:1101px){
body .home-year-badge::after{
bottom:16px !important;
left:8px !important;
right:8px !important;
font-size:4.5px !important;
line-height:1 !important;
letter-spacing:-.03em !important;
white-space:nowrap !important;
text-align:center !important;
}
}
/* =========================================================
SERVICES — COMPACT SEO BLOCK
========================================================= */
@media (min-width:821px){
#services{
padding:18px 0 !important;
}
#services .container{
width:min(calc(100% - 48px),1280px) !important;
max-width:1280px !important;
}
#services .inner{
padding:22px 26px !important;
border-radius:18px !important;
}
#services .section-head{
grid-template-columns:1fr 1fr !important;
gap:28px !important;
margin-bottom:18px !important;
align-items:end !important;
}
#services .section-head .eyebrow{
font-size:12px !important;
margin-bottom:6px !important;
}
#services .section-head h2{
margin:0 !important;
font-size:44px !important;
line-height:.98 !important;
letter-spacing:-.04em !important;
}
#services .section-head p{
font-size:14px !important;
line-height:1.4 !important;
max-width:520px !important;
justify-self:end !important;
}
#services .services-grid{
grid-template-columns:repeat(3,1fr) !important;
gap:12px !important;
}
#services .service-card{
min-height:175px !important;
padding:18px 20px !important;
border-radius:14px !important;
}
#services .service-card .num{
font-size:20px !important;
line-height:1 !important;
}
#services .service-card h3{
margin:22px 0 10px !important;
font-size:19px !important;
line-height:1.08 !important;
}
#services .service-card p{
margin:0 0 14px !important;
font-size:13px !important;
line-height:1.42 !important;
}
#services .service-card a{
font-size:13px !important;
font-weight:800 !important;
}
#services .service-card:after{
height:80px !important;
}
}
@media (min-width:821px) and (max-width:1100px){
#services .container{
width:calc(100% - 32px) !important;
}
#services .section-head h2{
font-size:38px !important;
}
#services .service-card h3{
font-size:17px !important;
}
}
/* ===== H2 TECHNOLOGY MOCKUP 1TO1 ===== */
#technology.technology-mockup-1to1{
margin:0 !important;
padding:0 !important;
background:#00110d !important;
border:0 !important;
}
#technology .technology-mockup-1to1__frame{
width:min(calc(100% - 48px),1280px) !important;
margin:0 auto !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
overflow:hidden !important;
background:#00110d !important;
}
#technology .technology-mockup-1to1__image{
display:block !important;
width:100% !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
object-fit:contain !important;
}
#technology .technology-mockup-1to1__seo{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
@media (max-width:820px){
#technology .technology-mockup-1to1__frame{
width:100% !important;
overflow-x:auto !important;
-webkit-overflow-scrolling:touch;
}
#technology .technology-mockup-1to1__image{
width:820px !important;
max-width:none !important;
}
}
/* ===== TECHNOLOGY — compact size ===== */
@media (min-width:821px){
#technology .technology-mockup-1to1__frame{
width:86% !important;
max-width:1100px !important;
margin:0 auto !important;
}
}
/* ===== TECHNOLOGY — slightly smaller ===== */
@media (min-width:821px){
#technology .technology-mockup-1to1__frame{
width:80% !important;
max-width:1020px !important;
margin:0 auto !important;
}
}
/* ===== SYMPTOMS + TECHNOLOGY — SAME WIDTH ===== */
@media (min-width:821px){
#symptoms .home-symptoms-v3__mobile,
#technology .technology-mockup-1to1__frame{
width:min(calc(100% - 40px),1180px) !important;
max-width:1180px !important;
margin-left:auto !important;
margin-right:auto !important;
}
#technology .technology-mockup-1to1__frame img{
display:block !important;
width:100% !important;
height:auto !important;
}
}
/* ===== TECHNOLOGY LIVE TEXT V1 ===== */
#technology.technology-live{padding:22px 0 24px!important;margin:0!important;background:#00110d!important;border:0!important}
#technology .technology-live__inner{width:min(calc(100% - 40px),1180px);margin:0 auto;font-family:"Montserrat",Arial,sans-serif;color:#f4f7f5}
#technology .technology-live__top{position:relative;display:grid;grid-template-columns:43% 39% 18%;min-height:388px;overflow:hidden;background:radial-gradient(circle at 58% 42%,rgba(21,255,49,.08),transparent 34%),#00110d}
#technology .technology-live__copy{position:relative;z-index:3;padding:24px 0 0 8px}
#technology .technology-live__eyebrow{margin:0 0 22px;color:#22f431;font-size:12px;font-weight:800;letter-spacing:.015em}
#technology .technology-live__copy h2{margin:0;font-size:44px;line-height:1.02;letter-spacing:-.035em;font-weight:800;color:#f5f7f6}
#technology .technology-live__copy h2 span{color:#24ee2d}
#technology .technology-live__copy p{margin:21px 0 0;font-size:14px;line-height:1.55;font-weight:400;color:#dbe3de}
#technology .technology-live__visual{position:relative;z-index:1;overflow:hidden;min-height:335px;align-self:start}
#technology .technology-live__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 36%;filter:saturate(1.04) contrast(1.02)}
#technology .technology-live__visual:before{content:"";position:absolute;z-index:2;left:-2px;top:0;bottom:0;width:16%;background:linear-gradient(90deg,#00110d 0%,rgba(0,17,13,.84) 35%,transparent 100%)}
#technology .technology-live__visual:after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:22%;background:linear-gradient(0deg,#00110d,transparent)}
#technology .technology-live__aside{position:relative;z-index:4;padding:17px 8px 0 18px;background:linear-gradient(90deg,rgba(0,17,13,.45),#00110d 32%)}
#technology .technology-live__h2mark{display:flex;align-items:flex-start;gap:14px;margin-bottom:28px}
#technology .technology-live__h2mark strong{font-size:46px;line-height:.9;color:#2cf331;font-weight:700;letter-spacing:-.06em}
#technology .technology-live__h2mark span{font-size:9px;line-height:1.35;color:#d7ddd9;font-weight:500}
#technology .technology-live__benefit{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:center;margin:0 0 24px}
#technology .technology-live__benefit-icon{display:grid;place-items:center;width:36px;height:36px;color:#2bf633}
#technology .technology-live__benefit-icon svg{width:31px;height:31px;display:block}
#technology .technology-live__benefit b{display:block;font-size:12px;line-height:1.1;font-weight:800;color:#fff}
#technology .technology-live__benefit small{display:block;margin-top:5px;font-size:9px;line-height:1.35;color:#e1e5e3}
#technology .technology-live__strip{position:absolute;z-index:5;left:41.8%;bottom:8px;width:39%;height:43px;border:1px solid rgba(52,239,59,.14);border-radius:9px;background:rgba(1,22,15,.82);display:grid;grid-template-columns:1fr 1fr 1.15fr;align-items:center;padding:0 12px;font-size:8px;line-height:1.2;color:#cdd6d1;text-align:center}
#technology .technology-live__strip b{font-weight:700;color:#f5f7f6}
#technology .technology-live__strip span:first-child b{color:#26e833}
#technology .technology-live__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:12px}
#technology .technology-live__step{position:relative;min-height:382px;padding:18px 18px 0;border:1px solid rgba(76,181,95,.35);border-radius:13px;overflow:hidden;background:#04130e}
#technology .technology-live__step-head{display:flex;align-items:center;gap:14px;position:relative;z-index:3}
#technology .technology-live__step-head span{color:#32f437;font-size:22px;line-height:1;font-weight:800}
#technology .technology-live__step-head i{height:1px;flex:1;background:linear-gradient(90deg,rgba(50,244,55,.42),rgba(50,244,55,.1))}
#technology .technology-live__step h3{position:relative;z-index:3;margin:17px 0 11px;font-size:17px;line-height:1.15;font-weight:800;color:#fff;letter-spacing:-.015em}
#technology .technology-live__step p{position:relative;z-index:3;margin:0;font-size:11px;line-height:1.45;color:#e0e5e2;font-weight:400}
#technology .technology-live__step>img{position:absolute;z-index:1;left:0;right:0;bottom:0;width:100%;height:58%;object-fit:cover;object-position:center bottom}
#technology .technology-live__step:after{content:"";position:absolute;z-index:2;left:0;right:0;top:42%;height:25%;background:linear-gradient(180deg,#04130e 0%,rgba(4,19,14,.84) 42%,transparent 100%)}
@media(max-width:1050px) and (min-width:821px){#technology .technology-live__inner{width:calc(100% - 32px)}#technology .technology-live__copy h2{font-size:38px}#technology .technology-live__steps{gap:12px}#technology .technology-live__step{padding-left:14px;padding-right:14px}#technology .technology-live__step h3{font-size:15px}}
@media(max-width:820px){#technology.technology-live{padding:16px 0 20px!important}#technology .technology-live__inner{width:calc(100% - 24px)}#technology .technology-live__top{display:block;min-height:0}#technology .technology-live__copy{padding:8px 0 18px}#technology .technology-live__copy h2{font-size:34px}#technology .technology-live__copy p{font-size:14px}#technology .technology-live__visual{height:300px;min-height:0}#technology .technology-live__aside{padding:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:none}#technology .technology-live__h2mark{grid-column:1/-1;margin-bottom:4px}#technology .technology-live__benefit{margin:0}#technology .technology-live__strip{position:static;width:100%;height:auto;margin:14px 0 0;padding:10px;grid-template-columns:1fr;gap:5px}#technology .technology-live__steps{grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}#technology .technology-live__step{min-height:390px}#technology .technology-live__desktop-br{display:none}}
@media(max-width:540px){#technology .technology-live__steps{grid-template-columns:1fr}#technology .technology-live__step{min-height:420px}}
/* ===== TECHNOLOGY LIVE — cleanup ===== */
/* Маскируем остатки текста, которые были в исходной картинке двигателя */
#technology .technology-live__beam{
position:absolute !important;
inset:0 !important;
z-index:3 !important;
pointer-events:none !important;
}
#technology .technology-live__beam::before{
content:"" !important;
position:absolute !important;
left:0 !important;
top:36% !important;
width:30% !important;
height:19% !important;
background:linear-gradient(
90deg,
#00110d 0%,
rgba(0,17,13,.99) 65%,
rgba(0,17,13,.78) 82%,
transparent 100%
) !important;
}
#technology .technology-live__beam::after{
content:"" !important;
position:absolute !important;
left:0 !important;
top:67% !important;
width:14% !important;
height:14% !important;
background:linear-gradient(
90deg,
#00110d 0%,
rgba(0,17,13,.98) 72%,
transparent 100%
) !important;
}
/* Правые иконки — зелёные контурные, как в макете */
#technology .technology-live__benefit-icon{
color:#2bf633 !important;
}
#technology .technology-live__benefit-icon svg{
display:block !important;
width:31px !important;
height:31px !important;
fill:none !important;
stroke:#2bf633 !important;
stroke-width:2 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
#technology .technology-live__benefit-icon svg path,
#technology .technology-live__benefit-icon svg circle,
#technology .technology-live__benefit-icon svg line,
#technology .technology-live__benefit-icon svg polyline,
#technology .technology-live__benefit-icon svg polygon{
fill:none !important;
stroke:#2bf633 !important;
}
/* ===== TECHNOLOGY STRIP — remove extra middle text ===== */
#technology .technology-live__strip{
grid-template-columns:1fr 1.35fr !important;
}
#technology .technology-live__strip span:nth-child(2){
display:none !important;
}
/* INSIDE MOCKUP 1TO1 2026-09-08 */
#inside.inside-mockup-section{
padding:20px 0 24px !important;
background:#00110d !important;
}
#inside .inside-mockup-desktop{display:block !important;}
#inside .inside-mockup-mobile{display:none !important;}
#inside .inside-mockup-frame{
position:relative !important;
width:min(calc(100% - 40px),1180px) !important;
margin:0 auto !important;
}
#inside .inside-mockup-frame img{
display:block !important;
width:100% !important;
height:auto !important;
border:0 !important;
}
#inside .inside-mockup-cta{
position:absolute !important;
z-index:3 !important;
left:65.1% !important;
right:2.7% !important;
bottom:2.6% !important;
height:5.5% !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
opacity:0 !important;
cursor:pointer !important;
}
@media (max-width:820px){
#inside.inside-mockup-section{padding:0 !important;}
#inside .inside-mockup-desktop{display:none !important;}
#inside .inside-mockup-mobile{display:block !important;}
}
/* INSIDE LIVE TEXT V2 2026-09-08 */
#inside.inside-live-v2{padding:20px 0 24px!important;background:#00110d!important;overflow:hidden!important}
#inside .inside-live-v2__desktop{display:block!important}
#inside .inside-live-v2__mobile{display:none!important}
#inside .inside-live-v2__frame{position:relative!important;width:min(calc(100% - 40px),1180px)!important;aspect-ratio:1086/1448!important;margin:0 auto!important;font-family:"Montserrat",Arial,sans-serif!important;overflow:hidden!important;background:#05110d!important}
#inside .inside-live-v2__base{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;z-index:0!important}
#inside .inside-live-v2__mask{position:absolute!important;z-index:2!important;display:block!important;pointer-events:none!important;background:#07130f!important}
#inside .mask-top-left{left:2.2%!important;top:1.1%!important;width:63%!important;height:14.7%!important;background:linear-gradient(90deg,#07130f 0 87%,rgba(7,19,15,.95) 94%,transparent 100%)!important}
#inside .mask-tech{right:3.7%!important;top:1.3%!important;width:25.5%!important;height:9.6%!important;background:#07130f!important;border-radius:12px!important}
#inside .mask-left-callout{left:2.8%!important;top:17.1%!important;width:22.5%!important;height:4.5%!important;background:#07130f!important;border-radius:10px!important}
#inside .mask-left-list{left:2.5%!important;top:23.0%!important;width:29.5%!important;height:24.7%!important;background:linear-gradient(90deg,#07130f 0 91%,rgba(7,19,15,.9) 96%,transparent 100%)!important}
#inside .mask-callout-center{left:59.5%!important;top:16.3%!important;width:27.5%!important;height:6.5%!important;background:#07130f!important;border-radius:10px!important}
#inside .mask-callout-right{right:4.4%!important;top:24.1%!important;width:16.5%!important;height:7.0%!important;background:#07130f!important;border-radius:10px!important}
#inside .mask-before-head{left:3.2%!important;top:47.0%!important;width:45.4%!important;height:5.4%!important;background:#07130f!important}
#inside .mask-after-head{right:3.3%!important;top:47.0%!important;width:45.5%!important;height:5.4%!important;background:#07130f!important}
#inside .mask-benefits{left:3.2%!important;right:3.2%!important;top:77.0%!important;height:9.6%!important;background:#07130f!important;border-radius:14px!important}
#inside .mask-bottom{left:3.2%!important;right:3.2%!important;top:87.4%!important;height:8.7%!important;background:#07130f!important;border-radius:14px!important}
#inside .inside-live-v2__title{position:absolute!important;z-index:5!important;left:4.2%!important;top:1.9%!important;width:58%!important;color:#fff!important}
#inside .inside-live-v2__eyebrow{font-size:clamp(9px,.95vw,15px)!important;font-weight:700!important;color:#31ff34!important;letter-spacing:.025em!important;margin-bottom:1.2%!important}
#inside .inside-live-v2__title h2{margin:0!important;font-size:clamp(34px,4.25vw,67px)!important;line-height:.94!important;letter-spacing:-.045em!important;font-weight:800!important;color:#f3f6f4!important}
#inside .inside-live-v2__title h2 span{color:#38f238!important}
#inside .inside-live-v2__title p{margin:1.3% 0 0!important;font-size:clamp(12px,1.45vw,23px)!important;line-height:1.27!important;font-weight:400!important;color:#f3f5f4!important}
#inside .inside-live-v2__tech-card{position:absolute!important;z-index:5!important;right:4.6%!important;top:1.9%!important;width:23.7%!important;height:7.5%!important;border:1px solid #35ef3b!important;border-radius:12px!important;background:rgba(3,17,12,.96)!important;display:grid!important;grid-template-columns:42% 58%!important;align-items:center!important;color:#fff!important;overflow:hidden!important}
#inside .inside-live-v2__tech-card strong{display:flex!important;height:100%!important;align-items:center!important;justify-content:center!important;border-right:1px solid rgba(49,255,54,.45)!important;color:#f5f7f6!important;font-size:clamp(28px,3.4vw,54px)!important;font-weight:700!important;text-shadow:0 0 12px rgba(53,255,64,.45)!important}
#inside .inside-live-v2__tech-card sub{font-size:.55em!important;vertical-align:baseline!important;position:relative!important;bottom:-.1em!important}
#inside .inside-live-v2__tech-card span{padding-left:9%!important;font-size:clamp(8px,.9vw,14px)!important;line-height:1.25!important;font-weight:600!important}
#inside .inside-live-v2__feed-callout,#inside .inside-live-v2__engine-callout,#inside .inside-live-v2__exhaust-callout{position:absolute!important;z-index:6!important;background:rgba(5,20,13,.96)!important;border:1px solid #3cff36!important;border-radius:8px!important;color:#48ff3f!important;font-weight:700!important;line-height:1.3!important;box-shadow:0 0 12px rgba(32,255,48,.05)!important}
#inside .inside-live-v2__feed-callout{left:3.6%!important;top:17.4%!important;width:19.5%!important;padding:1.0% 1.2%!important;font-size:clamp(8px,.9vw,14px)!important}
#inside .inside-live-v2__engine-callout{left:60.4%!important;top:16.6%!important;width:24.7%!important;padding:1.0% 1.1%!important;font-size:clamp(8px,.9vw,14px)!important}
#inside .inside-live-v2__exhaust-callout{right:5.0%!important;top:24.5%!important;width:15.4%!important;padding:1.0% 1.0%!important;font-size:clamp(8px,.82vw,13px)!important}
#inside .inside-live-v2__zones{position:absolute!important;z-index:5!important;left:3.7%!important;top:23.1%!important;width:28.8%!important;display:flex!important;flex-direction:column!important;gap:1.5%!important;color:#fff!important}
#inside .inside-live-v2__zone{display:grid!important;grid-template-columns:57px 1fr!important;gap:15px!important;align-items:center!important;min-height:74px!important}
#inside .zone-icon{width:54px!important;height:54px!important;border:1px solid #31ff35!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#31ff35!important}
#inside .zone-icon svg{width:30px!important;height:30px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#inside .inside-live-v2__zone b{display:block!important;font-size:clamp(10px,1.12vw,18px)!important;line-height:1.05!important;font-weight:800!important;margin-bottom:4px!important}
#inside .inside-live-v2__zone p{margin:0!important;font-size:clamp(8px,.93vw,15px)!important;line-height:1.3!important;color:#e7ece9!important}
#inside .inside-live-v2__comparison-head{position:absolute!important;z-index:5!important;top:47.15%!important;height:4.7%!important;display:flex!important;align-items:center!important;color:#fff!important}
#inside .before-head{left:4.1%!important;width:43.0%!important}
#inside .after-head{right:4.1%!important;width:42.9%!important}
#inside .inside-live-v2__comparison-head b{font-size:clamp(18px,2vw,31px)!important;line-height:1!important;font-weight:800!important;white-space:nowrap!important}
#inside .after-head b{color:#52ff3f!important}
#inside .inside-live-v2__comparison-head span{margin-left:4%!important;font-size:clamp(7px,.8vw,12px)!important;line-height:1.25!important;color:#e5eae7!important}
#inside .after-head span{color:#42ff36!important}
#inside .inside-live-v2__photo-label{position:absolute!important;z-index:6!important;color:#fff!important;font-size:clamp(9px,1vw,16px)!important;line-height:1.12!important;font-weight:700!important;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(2,13,9,.92) 36%,rgba(2,13,9,.98) 100%)!important;padding:3.2% 1.0% .7%!important}
#inside .pl-b1{left:4.25%!important;top:59.4%!important;width:20.6%!important}.pl-b2{left:26.0%!important;top:59.4%!important;width:20.5%!important}.pl-a1{left:51.9%!important;top:59.4%!important;width:20.5%!important}.pl-a2{left:73.8%!important;top:59.4%!important;width:20.5%!important}
#inside .pl-b3{left:4.25%!important;top:71.5%!important;width:20.6%!important}.pl-b4{left:26.0%!important;top:71.5%!important;width:20.5%!important}.pl-a3{left:51.9%!important;top:71.5%!important;width:20.5%!important}.pl-a4{left:73.8%!important;top:71.5%!important;width:20.5%!important}
#inside .inside-live-v2__benefits{position:absolute!important;z-index:5!important;left:4.0%!important;right:4.0%!important;top:77.5%!important;height:8.4%!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;border:1px solid rgba(49,255,54,.28)!important;border-radius:12px!important;background:rgba(4,18,12,.97)!important;overflow:hidden!important}
#inside .inside-live-v2__benefits>div{display:grid!important;grid-template-columns:62px 1fr!important;gap:12px!important;align-items:center!important;padding:1.5% 2.2%!important}
#inside .inside-live-v2__benefits>div+div{border-left:1px solid rgba(140,170,155,.22)!important}
#inside .benefit-icon{width:48px!important;height:48px!important;border:1px solid #31ff35!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#31ff35!important;font-size:25px!important;font-weight:700!important}
#inside .inside-live-v2__benefits p{margin:0!important}.inside-live-v2__benefits b{display:block!important;font-size:clamp(8px,.9vw,14px)!important;line-height:1.15!important;font-weight:800!important}.inside-live-v2__benefits small{display:block!important;margin-top:7px!important;font-size:clamp(7px,.75vw,12px)!important;line-height:1.25!important;color:#e0e6e2!important}
#inside .inside-live-v2__bottom{position:absolute!important;z-index:5!important;left:4.0%!important;right:4.0%!important;top:87.8%!important;height:7.9%!important;border:1px solid rgba(49,255,54,.30)!important;border-radius:12px!important;background:rgba(4,18,12,.98)!important;display:grid!important;grid-template-columns:1fr 33%!important;gap:3%!important;align-items:center!important;padding:1.0% 2.0%!important}
#inside .bottom-info{display:grid!important;grid-template-columns:58px 1fr!important;gap:14px!important;align-items:center!important;color:#fff!important}.info-i{width:48px!important;height:48px!important;border:2px solid #31ff35!important;border-radius:50%!important;color:#31ff35!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:28px!important;font-family:Georgia,serif!important;font-style:italic!important}.bottom-info p{margin:0 0 8px!important;font-size:clamp(7px,.82vw,13px)!important}.times{display:flex!important;gap:0!important}.times span{display:flex!important;flex-direction:column!important;min-width:130px!important;padding-right:18px!important;margin-right:18px!important;border-right:1px solid rgba(180,200,188,.25)!important}.times span:last-child{border-right:0!important}.times b{font-size:clamp(9px,1vw,16px)!important}.times small{font-size:clamp(7px,.85vw,13px)!important;margin-top:3px!important}
#inside .inside-live-v2__cta{height:64%!important;border:0!important;border-radius:14px!important;background:linear-gradient(90deg,#85ff54,#4dff3c)!important;color:#041006!important;font-family:"Montserrat",Arial,sans-serif!important;font-size:clamp(10px,1.2vw,18px)!important;font-weight:800!important;cursor:pointer!important;box-shadow:0 0 18px rgba(71,255,54,.22)!important}.inside-live-v2__cta span{font-size:1.4em!important;margin-left:7%!important}
@media (max-width:820px){#inside.inside-live-v2{padding:0!important}#inside .inside-live-v2__desktop{display:none!important}#inside .inside-live-v2__mobile{display:block!important}}
/* =========================================================
INSIDE LIVE — REMOVE RASTER/GHOST TEXT
========================================================= */
/* Заголовок и описание: закрываем старые буквы под HTML */
#inside .inside-live-v2__title{
background:
linear-gradient(
90deg,
#07130f 0%,
#07130f 86%,
rgba(7,19,15,.97) 92%,
rgba(7,19,15,.70) 96%,
transparent 100%
) !important;
padding:4px 22px 10px 0 !important;
}
/* Верхняя маска старого заголовка */
#inside .mask-top-left{
left:1.5% !important;
top:.8% !important;
width:64% !important;
height:15.7% !important;
background:
linear-gradient(
90deg,
#07130f 0%,
#07130f 88%,
rgba(7,19,15,.95) 94%,
transparent 100%
) !important;
}
/* Левый список — закрываем старые подписи только под новым текстом */
#inside .inside-live-v2__zone > div{
position:relative !important;
z-index:2 !important;
background:#07130f !important;
box-shadow:
-8px 0 10px #07130f,
14px 0 18px #07130f !important;
padding:4px 5px 5px 0 !important;
}
#inside .mask-left-list{
left:2.4% !important;
top:22.7% !important;
width:30.5% !important;
height:25.7% !important;
background:
linear-gradient(
90deg,
#07130f 0%,
#07130f 90%,
rgba(7,19,15,.92) 96%,
transparent 100%
) !important;
}
/* Все зелёные выноски полностью непрозрачные */
#inside .inside-live-v2__feed-callout,
#inside .inside-live-v2__engine-callout,
#inside .inside-live-v2__exhaust-callout{
background:#06150f !important;
box-shadow:
0 0 0 5px #06150f,
0 0 12px rgba(35,255,48,.10) !important;
}
/* ДО / ПОСЛЕ — прячем старые заголовки */
#inside .inside-live-v2__comparison-head{
background:#07130f !important;
box-shadow:
-10px 0 10px #07130f,
10px 0 10px #07130f !important;
}
#inside .mask-before-head,
#inside .mask-after-head{
top:46.7% !important;
height:5.9% !important;
background:#07130f !important;
}
/* Подписи на 8 фотографиях:
старые подписи из картинки больше не просвечивают */
#inside .inside-live-v2__photo-label{
height:4.1% !important;
padding:2.1% 1% .5% !important;
background:
linear-gradient(
180deg,
rgba(3,15,10,.25) 0%,
rgba(3,15,10,.94) 24%,
#06130f 42%,
#06130f 100%
) !important;
box-shadow:
0 10px 0 #06130f !important;
}
/* Нижняя полоса преимуществ полностью перекрывает старую */
#inside .mask-benefits{
left:2.8% !important;
right:2.8% !important;
top:76.6% !important;
height:10.4% !important;
background:#07130f !important;
}
#inside .inside-live-v2__benefits{
background:#06130f !important;
}
/* Самый нижний блок — также убираем старые надписи */
#inside .mask-bottom{
left:2.8% !important;
right:2.8% !important;
top:86.7% !important;
height:10.2% !important;
background:#07130f !important;
}
#inside .inside-live-v2__bottom{
background:#06130f !important;
}
/* INSIDE CLEAN LIVE V3 2026-09-08 */
#inside.inside-clean-v3{padding:18px 0 24px!important;background:#00110d!important;overflow:hidden!important}
#inside .inside-clean-v3__desktop{display:block!important}#inside .inside-clean-v3__mobile{display:none!important}
#inside .inside-clean-v3__frame{position:relative!important;width:min(calc(100% - 40px),1180px)!important;aspect-ratio:1086/1448!important;margin:0 auto!important;background:#07130f!important;font-family:"Montserrat",Arial,sans-serif!important;overflow:hidden!important;border-radius:18px!important}
#inside .inside-clean-v3__title{position:absolute!important;left:4.2%!important;top:2.0%!important;width:58%!important;z-index:5!important;color:#fff!important}
#inside .inside-clean-v3__eyebrow{font-size:clamp(9px,.95vw,15px)!important;font-weight:700!important;color:#31ff34!important;letter-spacing:.025em!important;margin-bottom:1.2%!important}
#inside .inside-clean-v3__title h2{margin:0!important;font-size:clamp(34px,4.25vw,67px)!important;line-height:.94!important;letter-spacing:-.045em!important;font-weight:800!important;color:#f3f6f4!important}
#inside .inside-clean-v3__title h2 span{color:#38f238!important}#inside .inside-clean-v3__title p{margin:1.3% 0 0!important;font-size:clamp(12px,1.45vw,23px)!important;line-height:1.27!important;color:#f3f5f4!important}
#inside .inside-clean-v3__tech-card{position:absolute!important;z-index:7!important;right:4.6%!important;top:2%!important;width:23.7%!important;height:7.5%!important;border:1px solid #35ef3b!important;border-radius:12px!important;background:#06150f!important;display:grid!important;grid-template-columns:42% 58%!important;align-items:center!important;color:#fff!important;overflow:hidden!important}
#inside .inside-clean-v3__tech-card strong{display:flex!important;height:100%!important;align-items:center!important;justify-content:center!important;border-right:1px solid rgba(49,255,54,.45)!important;font-size:clamp(28px,3.4vw,54px)!important;font-weight:700!important;text-shadow:0 0 12px rgba(53,255,64,.45)!important}.inside-clean-v3__tech-card sub{font-size:.55em!important}.inside-clean-v3__tech-card span{padding-left:9%!important;font-size:clamp(8px,.9vw,14px)!important;line-height:1.25!important;font-weight:600!important}
#inside .inside-clean-v3__engine-wrap{position:absolute!important;left:20.5%!important;right:2.6%!important;top:12.5%!important;height:34.6%!important;z-index:1!important;overflow:hidden!important;border-radius:10px!important}
#inside .inside-clean-v3__engine-wrap>img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 48%!important;display:block!important}
#inside .inside-clean-v3__feed-callout,#inside .inside-clean-v3__engine-callout,#inside .inside-clean-v3__exhaust-callout{position:absolute!important;z-index:8!important;background:#06150f!important;border:1px solid #3cff36!important;border-radius:8px!important;color:#48ff3f!important;font-weight:700!important;line-height:1.3!important;box-shadow:0 0 0 5px #06150f!important}
#inside .inside-clean-v3__feed-callout{left:3.6%!important;top:17.4%!important;width:19.5%!important;padding:1% 1.2%!important;font-size:clamp(8px,.9vw,14px)!important}
#inside .inside-clean-v3__engine-callout{left:50.3%!important;top:9.1%!important;width:36%!important;padding:1.2% 1.5%!important;font-size:clamp(8px,.95vw,15px)!important}
#inside .inside-clean-v3__exhaust-callout{right:2.8%!important;top:30.2%!important;width:25%!important;padding:1.2% 1.3%!important;font-size:clamp(8px,.88vw,14px)!important}
#inside .inside-clean-v3__zones{position:absolute!important;z-index:9!important;left:3.7%!important;top:23.1%!important;width:29.2%!important;display:flex!important;flex-direction:column!important;gap:8px!important;color:#fff!important;background:linear-gradient(90deg,#07130f 0 86%,rgba(7,19,15,.9) 94%,transparent 100%)!important;padding-right:2%!important}
#inside .inside-clean-v3__zone{display:grid!important;grid-template-columns:54px 1fr!important;gap:14px!important;align-items:center!important;min-height:70px!important}.inside-clean-v3__zone .zone-icon{width:50px!important;height:50px!important;border:1px solid #31ff35!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#31ff35!important}.inside-clean-v3__zone .zone-icon svg{width:28px!important;height:28px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}.inside-clean-v3__zone b{font-size:clamp(10px,1.12vw,18px)!important;line-height:1.05!important;font-weight:800!important}.inside-clean-v3__zone p{margin:4px 0 0!important;font-size:clamp(8px,.93vw,15px)!important;line-height:1.3!important;color:#e7ece9!important}
#inside .inside-clean-v3__compare{position:absolute!important;top:48.5%!important;width:43%!important;height:27%!important;border:1px solid rgba(49,255,54,.25)!important;border-radius:12px!important;background:#06130f!important;padding:1.2%!important;z-index:5!important}.inside-clean-v3__compare.before{left:3.3%!important}.inside-clean-v3__compare.after{right:3.3%!important;border-color:rgba(49,255,54,.48)!important}.inside-clean-v3__compare .compare-head{height:15%!important;display:flex!important;align-items:flex-start!important;gap:5%!important}.inside-clean-v3__compare .compare-head b{font-size:clamp(18px,2vw,31px)!important;line-height:1!important;white-space:nowrap!important}.inside-clean-v3__compare.after .compare-head b{color:#52ff3f!important}.inside-clean-v3__compare .compare-head span{font-size:clamp(7px,.8vw,12px)!important;line-height:1.25!important;color:#e5eae7!important}.inside-clean-v3__compare.after .compare-head span{color:#42ff36!important}.inside-clean-v3__compare .compare-grid{height:85%!important;display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr!important;gap:2.7%!important}.inside-clean-v3__compare figure{position:relative!important;margin:0!important;overflow:hidden!important;border:1px solid rgba(210,225,216,.45)!important;border-radius:8px!important;background:#07130f!important}.inside-clean-v3__compare.after figure{border-color:#39f63d!important}.inside-clean-v3__compare figure img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}.inside-clean-v3__compare figcaption{position:absolute!important;left:0!important;right:0!important;bottom:0!important;padding:16% 5% 4%!important;background:linear-gradient(180deg,transparent,rgba(2,13,9,.96) 38%,#06130f 100%)!important;color:#fff!important;font-size:clamp(9px,1vw,16px)!important;line-height:1.12!important;font-weight:700!important}
#inside .inside-clean-v3__arrow{position:absolute!important;z-index:8!important;left:47.1%!important;color:#59ff3e!important;font-size:clamp(28px,3.2vw,48px)!important;line-height:1!important}.inside-clean-v3__arrow.arrow1{top:58%!important}.inside-clean-v3__arrow.arrow2{top:69.3%!important}
#inside .inside-clean-v3__benefits{position:absolute!important;z-index:6!important;left:3.2%!important;right:3.2%!important;top:77%!important;height:9.7%!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;border:1px solid rgba(49,255,54,.35)!important;border-radius:12px!important;background:#06130f!important;overflow:hidden!important}.inside-clean-v3__benefits>div{display:grid!important;grid-template-columns:58px 1fr!important;gap:12px!important;align-items:center!important;padding:1.5% 2.2%!important}.inside-clean-v3__benefits>div+div{border-left:1px solid rgba(140,170,155,.22)!important}.inside-clean-v3__benefits .benefit-icon{width:46px!important;height:46px!important;border:1px solid #31ff35!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#31ff35!important;font-size:23px!important}.inside-clean-v3__benefits p{margin:0!important}.inside-clean-v3__benefits b{display:block!important;font-size:clamp(8px,.9vw,14px)!important;line-height:1.15!important;font-weight:800!important}.inside-clean-v3__benefits small{display:block!important;margin-top:6px!important;font-size:clamp(7px,.75vw,12px)!important;line-height:1.25!important;color:#e0e6e2!important}
#inside .inside-clean-v3__bottom{position:absolute!important;z-index:6!important;left:3.2%!important;right:3.2%!important;top:88%!important;height:8.4%!important;border:1px solid rgba(49,255,54,.36)!important;border-radius:12px!important;background:#06130f!important;display:grid!important;grid-template-columns:1fr 33%!important;gap:3%!important;align-items:center!important;padding:1% 2%!important}.inside-clean-v3__bottom .bottom-info{display:grid!important;grid-template-columns:58px 1fr!important;gap:14px!important;align-items:center!important;color:#fff!important}.inside-clean-v3__bottom .info-i{width:48px!important;height:48px!important;border:2px solid #31ff35!important;border-radius:50%!important;color:#31ff35!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:28px!important;font-family:Georgia,serif!important;font-style:italic!important}.inside-clean-v3__bottom .bottom-info p{margin:0 0 8px!important;font-size:clamp(7px,.82vw,13px)!important}.inside-clean-v3__bottom .times{display:flex!important}.inside-clean-v3__bottom .times span{display:flex!important;flex-direction:column!important;min-width:130px!important;padding-right:18px!important;margin-right:18px!important;border-right:1px solid rgba(180,200,188,.25)!important}.inside-clean-v3__bottom .times span:last-child{border-right:0!important}.inside-clean-v3__bottom .times b{font-size:clamp(9px,1vw,16px)!important}.inside-clean-v3__bottom .times small{font-size:clamp(7px,.85vw,13px)!important;margin-top:3px!important}.inside-clean-v3__cta{height:64%!important;border:0!important;border-radius:14px!important;background:linear-gradient(90deg,#85ff54,#4dff3c)!important;color:#041006!important;font-family:"Montserrat",Arial,sans-serif!important;font-size:clamp(10px,1.2vw,18px)!important;font-weight:800!important;cursor:pointer!important}.inside-clean-v3__cta span{font-size:1.4em!important;margin-left:7%!important}
@media(max-width:820px){#inside.inside-clean-v3{padding:0!important}#inside .inside-clean-v3__desktop{display:none!important}#inside .inside-clean-v3__mobile{display:block!important}}
/* =========================================================
INSIDE HYBRID V1
1:1 графика + живые основные надписи
========================================================= */
@media (min-width:821px){
/* Та же ширина, что у symptoms / technology */
#inside.inside-mockup-section{
padding:20px 0 24px !important;
background:#00110d !important;
}
#inside .inside-hybrid-v1__frame{
position:relative !important;
width:min(calc(100% - 40px),1180px) !important;
max-width:1180px !important;
margin:0 auto !important;
overflow:hidden !important;
}
#inside .inside-hybrid-v1__frame > img{
display:block !important;
width:100% !important;
height:auto !important;
}
/* =======================================================
МАСКИ
======================================================= */
#inside .inside-hybrid-v1__mask{
position:absolute !important;
z-index:2 !important;
pointer-events:none !important;
}
/* Старый большой заголовок */
#inside .inside-hybrid-v1__mask-title{
left:2.2% !important;
top:1.0% !important;
width:65% !important;
height:14.8% !important;
background:
linear-gradient(
90deg,
#07130f 0%,
#07130f 87%,
rgba(7,19,15,.96) 93%,
rgba(7,19,15,.60) 97%,
transparent 100%
) !important;
}
/* Исходная H2-плашка */
#inside .inside-hybrid-v1__mask-tech{
right:3.1% !important;
top:1.1% !important;
width:29% !important;
height:9% !important;
background:#07130f !important;
}
/* ДО очистки */
#inside .inside-hybrid-v1__mask-before{
left:3.1% !important;
top:46.7% !important;
width:45.2% !important;
height:5.3% !important;
background:#07130f !important;
}
/* ПОСЛЕ очистки */
#inside .inside-hybrid-v1__mask-after{
right:3.1% !important;
top:46.7% !important;
width:45.2% !important;
height:5.3% !important;
background:#07130f !important;
}
/* =======================================================
ГЛАВНЫЙ ЗАГОЛОВОК
======================================================= */
#inside .inside-hybrid-v1__title{
position:absolute !important;
z-index:4 !important;
left:4.1% !important;
top:1.65% !important;
width:60% !important;
font-family:"Montserrat",Arial,sans-serif !important;
}
#inside .inside-hybrid-v1__eyebrow{
margin-bottom:10px !important;
color:#38fa38 !important;
font-size:13px !important;
line-height:1 !important;
font-weight:700 !important;
letter-spacing:.02em !important;
-webkit-font-smoothing:antialiased;
}
#inside .inside-hybrid-v1__title h2{
margin:0 !important;
color:#f4f6f5 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:56px !important;
line-height:.94 !important;
font-weight:800 !important;
letter-spacing:-.045em !important;
-webkit-font-smoothing:antialiased;
text-rendering:geometricPrecision;
}
#inside .inside-hybrid-v1__title h2 span{
color:#42f238 !important;
}
#inside .inside-hybrid-v1__title p{
margin:13px 0 0 !important;
color:#f0f3f1 !important;
font-size:18px !important;
line-height:1.3 !important;
font-weight:400 !important;
-webkit-font-smoothing:antialiased;
}
/* =======================================================
H2-ПЛАШКА
======================================================= */
#inside .inside-hybrid-v1__tech{
position:absolute !important;
z-index:4 !important;
right:4.3% !important;
top:1.9% !important;
width:24.3% !important;
height:7.4% !important;
display:grid !important;
grid-template-columns:43% 57% !important;
align-items:center !important;
overflow:hidden !important;
border:1px solid #38f53b !important;
border-radius:11px !important;
background:#06140f !important;
font-family:"Montserrat",Arial,sans-serif !important;
}
#inside .inside-hybrid-v1__tech strong{
height:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-right:
1px solid rgba(55,245,59,.42) !important;
color:#f4f7f5 !important;
font-size:43px !important;
line-height:1 !important;
font-weight:700 !important;
text-shadow:
0 0 12px rgba(55,255,62,.32) !important;
}
#inside .inside-hybrid-v1__tech sub{
font-size:.55em !important;
}
#inside .inside-hybrid-v1__tech span{
padding-left:9% !important;
color:#fff !important;
font-size:11px !important;
line-height:1.22 !important;
font-weight:600 !important;
}
/* =======================================================
ДО / ПОСЛЕ
======================================================= */
#inside .inside-hybrid-v1__compare{
position:absolute !important;
z-index:4 !important;
top:47.15% !important;
height:4.4% !important;
display:flex !important;
align-items:center !important;
font-family:"Montserrat",Arial,sans-serif !important;
}
#inside .inside-hybrid-v1__compare--before{
left:4.1% !important;
width:42.8% !important;
}
#inside .inside-hybrid-v1__compare--after{
right:4.1% !important;
width:42.8% !important;
}
#inside .inside-hybrid-v1__compare b{
color:#f4f6f5 !important;
font-size:25px !important;
line-height:1 !important;
font-weight:800 !important;
white-space:nowrap !important;
}
#inside .inside-hybrid-v1__compare--after b{
color:#4cff3d !important;
}
#inside .inside-hybrid-v1__compare span{
margin-left:5% !important;
color:#e8ece9 !important;
font-size:10px !important;
line-height:1.3 !important;
font-weight:400 !important;
}
#inside .inside-hybrid-v1__compare--after span{
color:#43f538 !important;
}
/* CTA в макете остаётся кликабельной */
#inside .inside-mockup-cta{
z-index:8 !important;
}
}
/* На ноутбуке вся композиция просто масштабируется */
@media (min-width:821px) and (max-width:1250px){
#inside .inside-hybrid-v1__title h2{
font-size:4.7vw !important;
}
#inside .inside-hybrid-v1__title p{
font-size:1.5vw !important;
}
#inside .inside-hybrid-v1__tech strong{
font-size:3.55vw !important;
}
#inside .inside-hybrid-v1__tech span{
font-size:.92vw !important;
}
#inside .inside-hybrid-v1__compare b{
font-size:2.1vw !important;
}
#inside .inside-hybrid-v1__compare span{
font-size:.84vw !important;
}
}
/* ===== INSIDE HYBRID — remove remaining title ghost ===== */
@media (min-width:821px){
#inside .inside-hybrid-v1__mask-title{
left:2.2% !important;
top:.7% !important;
width:70.5% !important;
height:16.4% !important;
background:
linear-gradient(
90deg,
#07130f 0%,
#07130f 94%,
rgba(7,19,15,.98) 97%,
rgba(7,19,15,.82) 99%,
transparent 100%
) !important;
}
}
/* =========================================================
INSIDE HYBRID — аккуратная маска без большого прямоугольника
========================================================= */
@media (min-width:821px){
/* Основная маска заканчивается сразу после живого заголовка */
#inside .inside-hybrid-v1__mask-title{
left:2.2% !important;
top:.7% !important;
width:53.5% !important;
height:16.2% !important;
overflow:visible !important;
background:
linear-gradient(
90deg,
#07130f 0%,
#07130f 93%,
rgba(7,19,15,.96) 97%,
transparent 100%
) !important;
}
/* Маленькая отдельная маска только на остаток старых букв */
#inside .inside-hybrid-v1__mask-title::after{
content:"" !important;
position:absolute !important;
left:96% !important;
top:28% !important;
width:25% !important;
height:48% !important;
background:
linear-gradient(
90deg,
#07130f 0%,
rgba(7,19,15,.99) 45%,
rgba(7,19,15,.80) 72%,
rgba(7,19,15,.35) 88%,
transparent 100%
) !important;
pointer-events:none !important;
}
}
/* INSIDE — финальная точечная маска старого текста справа */
@media (min-width:821px){
#inside .inside-hybrid-v1__mask-title::before{
content:"" !important;
position:absolute !important;
left:105% !important;
top:18% !important;
width:42% !important;
height:65% !important;
background:
linear-gradient(
90deg,
rgba(7,19,15,.98) 0%,
rgba(7,19,15,.98) 55%,
rgba(7,19,15,.85) 80%,
transparent 100%
) !important;
pointer-events:none !important;
}
}
/* INSIDE — окончательно закрываем остаток старого заголовка */
@media (min-width:821px){
#inside .inside-hybrid-v1__mask-title::before{
content:"" !important;
position:absolute !important;
left:97% !important;
top:0% !important;
width:39% !important;
height:58% !important;
background:#07130f !important;
pointer-events:none !important;
}
}
/* INSIDE — полностью закрываем остаток старого заголовка справа */
@media (min-width:821px){
#inside .inside-hybrid-v1__mask-title::before{
content:"" !important;
position:absolute !important;
left:97% !important;
top:0 !important;
width:39% !important;
height:105% !important;
background:#07130f !important;
pointer-events:none !important;
}
/* предыдущая дополнительная маска больше не нужна */
#inside .inside-hybrid-v1__mask-title::after{
display:none !important;
content:none !important;
}
}
/* =========================================================
PROCESS LIVE V3 — mockup layout with crisp live text
========================================================= */
.process-live-v3{
padding:18px 0 24px !important;
background:#00110d !important;
}
.process-live-v3__frame{
width:min(calc(100% - 40px),1180px);
margin:0 auto;
font-family:"Montserrat",Arial,sans-serif;
}
.process-live-v3__top{
position:relative;
overflow:hidden;
aspect-ratio:1086/858;
border-radius:0;
background:#05120e;
}
.process-live-v3__top-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.process-live-v3__left-mask{
position:absolute;
z-index:2;
left:0;
top:0;
width:42%;
height:100%;
background:linear-gradient(90deg,#07130f 0%,#07130f 82%,rgba(7,19,15,.98) 90%,rgba(7,19,15,.70) 96%,transparent 100%);
}
.process-live-v3__right-title-mask{
position:absolute;
z-index:2;
right:2.3%;
top:2.2%;
width:19%;
height:12%;
background:rgba(5,17,13,.94);
}
.process-live-v3__callout-mask{
position:absolute;
z-index:2;
right:4.4%;
top:39.1%;
width:17.8%;
height:13.5%;
background:rgba(5,17,13,.97);
border-radius:8px;
}
.process-live-v3__copy{
position:absolute;
z-index:4;
left:4.2%;
top:3.1%;
width:60%;
color:#fff;
}
.process-live-v3__eyebrow{
color:#44f53d;
font-size:13px;
font-weight:600;
letter-spacing:.01em;
margin-bottom:10px;
}
.process-live-v3__copy h2{
margin:0;
font-size:58px;
line-height:.98;
font-weight:800;
letter-spacing:-.045em;
color:#f4f6f5;
}
.process-live-v3__copy h2 span{color:#7bf14c;}
.process-live-v3__copy p{
margin:12px 0 0;
font-size:20px;
line-height:1.25;
font-weight:400;
color:#f3f5f4;
}
.process-live-v3__copy strong{font-weight:800;}
.process-live-v3__steps{
position:absolute;
z-index:4;
left:2.8%;
top:28.3%;
width:33.5%;
height:67.5%;
display:grid;
grid-template-rows:repeat(4,1fr);
}
.process-live-v3__step{
position:relative;
display:grid;
grid-template-columns:58px 54px minmax(0,1fr);
gap:10px;
align-items:start;
color:#fff;
}
.process-live-v3__step:not(:last-child)::after{
content:"";
position:absolute;
left:26px;
top:52px;
width:2px;
height:calc(100% - 44px);
background:linear-gradient(#50f23d,#9dff6b);
}
.process-live-v3__step:not(:last-child)::before{
content:"";
position:absolute;
left:20px;
bottom:12px;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-top:10px solid #98ff67;
}
.process-live-v3__num{
display:flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border:2px solid #75f149;
border-radius:50%;
color:#a4ff6d;
font-size:21px;
font-weight:700;
}
.process-live-v3__step-icon{
display:flex;
align-items:center;
justify-content:center;
color:#79f54b;
width:52px;
height:52px;
}
.process-live-v3__step-icon svg{width:46px;height:46px;}
.process-live-v3__step h3{
margin:0 0 5px;
font-size:18px;
line-height:1.08;
font-weight:700;
}
.process-live-v3__step p{
margin:0;
color:#e8ece9;
font-size:13px;
line-height:1.28;
}
.process-live-v3__right-title{
position:absolute;
z-index:4;
right:6.2%;
top:3.9%;
width:16%;
color:#f4f5f4;
font-size:14px;
line-height:1.35;
font-weight:400;
letter-spacing:.02em;
}
.process-live-v3__right-title span{
display:block;
width:48px;
height:2px;
margin-top:11px;
background:#4ef23c;
}
.process-live-v3__callout{
position:absolute;
z-index:4;
right:5.5%;
top:40.2%;
padding:12px 16px;
border:1px solid #45ef35;
border-radius:8px;
background:#07140f;
color:#78f64d;
font-size:13px;
line-height:1.32;
font-weight:600;
}
.process-live-v3__thumbs{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin-top:14px;
}
.process-live-v3__thumbs figure{
margin:0;
overflow:hidden;
border:1px solid rgba(74,242,60,.45);
border-radius:9px;
background:#06140f;
}
.process-live-v3__thumbs img{
display:block;
width:100%;
aspect-ratio:235/170;
object-fit:cover;
}
.process-live-v3__thumbs figcaption{
display:flex;
align-items:center;
gap:12px;
min-height:42px;
padding:0 14px;
color:#e8ecea;
font-size:12px;
letter-spacing:.015em;
}
.process-live-v3__thumbs figcaption b{color:#76f64d;font-size:18px;}
.process-live-v3__benefits{
display:grid;
grid-template-columns:repeat(4,1fr);
margin-top:18px;
border:1px solid rgba(70,241,58,.38);
border-radius:10px;
background:#06140f;
}
.process-live-v3__benefits>div{
display:grid;
grid-template-columns:55px 1fr;
grid-template-rows:auto auto;
column-gap:12px;
padding:18px 20px;
}
.process-live-v3__benefits>div+div{border-left:1px solid rgba(125,160,138,.25);}
.process-live-v3__benefit-icon{
grid-row:1/3;
align-self:center;
color:#7cf34d;
font-size:42px;
line-height:1;
}
.process-live-v3__benefits b{font-size:15px;line-height:1.12;color:#f4f6f5;}
.process-live-v3__benefits small{margin-top:6px;color:#cdd5d0;font-size:11px;line-height:1.25;}
.process-live-v3__bottom{
display:grid;
grid-template-columns:58px 1fr 310px;
align-items:center;
gap:18px;
margin-top:18px;
padding:15px 20px;
border:1px solid rgba(70,241,58,.38);
border-radius:10px;
background:#06140f;
}
.process-live-v3__info{
display:flex;
align-items:center;
justify-content:center;
width:50px;
height:50px;
border:2px solid #7af54b;
border-radius:50%;
color:#8cff59;
font-size:31px;
font-style:italic;
font-weight:600;
}
.process-live-v3__times{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
color:#fff;
}
.process-live-v3__times p{grid-column:1/-1;margin:0 0 9px;font-size:11px;color:#dde4df;}
.process-live-v3__times>div{padding:0 18px;border-right:1px solid rgba(139,174,151,.3);}
.process-live-v3__times>div:last-child{border-right:0;}
.process-live-v3__times b,.process-live-v3__times span{display:block;}
.process-live-v3__times b{font-size:14px;}
.process-live-v3__times span{margin-top:4px;font-size:11px;color:#d8dfda;}
.process-live-v3__cta{
display:flex;
align-items:center;
justify-content:space-between;
min-height:56px;
padding:0 23px;
border-radius:13px;
background:linear-gradient(180deg,#96ff5a,#55f13b);
color:#00110d;
font-size:16px;
font-weight:800;
text-decoration:none;
}
.process-live-v3__cta span{font-size:26px;font-weight:400;}
@media (max-width:900px){
.process-live-v3__frame{width:calc(100% - 24px);}
.process-live-v3__top{aspect-ratio:auto;min-height:880px;background:#07130f;}
.process-live-v3__top-image{opacity:.42;object-fit:cover;}
.process-live-v3__left-mask{width:100%;background:linear-gradient(180deg,#07130f 0%,rgba(7,19,15,.98) 55%,rgba(7,19,15,.72) 78%,transparent 100%);}
.process-live-v3__right-title-mask,.process-live-v3__callout-mask,.process-live-v3__right-title,.process-live-v3__callout{display:none;}
.process-live-v3__copy{left:6%;top:4%;width:88%;}
.process-live-v3__copy h2{font-size:42px;}
.process-live-v3__copy p{font-size:17px;}
.process-live-v3__steps{left:6%;top:25%;width:88%;height:70%;}
.process-live-v3__thumbs,.process-live-v3__benefits{grid-template-columns:1fr 1fr;}
.process-live-v3__bottom{grid-template-columns:50px 1fr;}
.process-live-v3__cta{grid-column:1/-1;}
}
@media (max-width:620px){
.process-live-v3__copy h2{font-size:34px;}
.process-live-v3__top{min-height:980px;}
.process-live-v3__step{grid-template-columns:52px 44px 1fr;gap:7px;}
.process-live-v3__step-icon svg{width:38px;height:38px;}
.process-live-v3__step h3{font-size:16px;}
.process-live-v3__step p{font-size:12px;}
.process-live-v3__thumbs,.process-live-v3__benefits{grid-template-columns:1fr;}
.process-live-v3__benefits>div+div{border-left:0;border-top:1px solid rgba(125,160,138,.25);}
.process-live-v3__times{grid-template-columns:1fr;}
.process-live-v3__times>div{padding:6px 0;border-right:0;}
}
/* ===== PROCESS: убираем ghost text + ставим иконки как в макете ===== */
#process .process-live-v3__top::before{
content:"";
position:absolute;
z-index:3;
left:0;
top:0;
width:77%;
height:35%;
background:linear-gradient(90deg,#07130f 0%,#07130f 84%,rgba(7,19,15,.98) 92%,rgba(7,19,15,.82) 97%,transparent 100%);
pointer-events:none;
}
#process .process-live-v3__left-mask{
width:45% !important;
}
#process .process-live-v3__right-title-mask{
right:1.8% !important;
top:1.8% !important;
width:22% !important;
height:19% !important;
background:#07130f !important;
}
#process .process-live-v3__copy,
#process .process-live-v3__steps,
#process .process-live-v3__right-title,
#process .process-live-v3__callout{
z-index:5 !important;
}
#process .process-live-v3__benefit-icon{
font-size:0 !important;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
grid-row:1 / 3;
color:#7cf34d;
}
#process .process-live-v3__benefit-icon::before{
content:"";
display:block;
width:40px;
height:40px;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
/* 1. Без разбора двигателя */
#process .process-live-v3__benefits > div:nth-child(1) .process-live-v3__benefit-icon::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* 2. Бензин и дизель */
#process .process-live-v3__benefits > div:nth-child(2) .process-live-v3__benefit-icon::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* 3. Турбо и атмосферные */
#process .process-live-v3__benefits > div:nth-child(3) .process-live-v3__benefit-icon::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* 4. Безопасно для двигателя */
#process .process-live-v3__benefits > div:nth-child(4) .process-live-v3__benefit-icon::before{
background-image:url("data:image/svg+xml;utf8,");
}
#process .process-live-v3__top::before{width:72% !important;height:30% !important;}
#process .process-live-v3__left-mask{width:41% !important;}
/* ===== EQUIPMENT — SAME WIDTH AS OTHER SECTIONS ===== */
@media (min-width:821px){
#equipment > .container{
width:min(calc(100% - 40px),1180px) !important;
max-width:1180px !important;
margin-left:auto !important;
margin-right:auto !important;
}
}
/* =========================================================
PRICING LIVE V4 — supplied mockup layout
========================================================= */
.pricing-live-v4{
padding:18px 0 24px !important;
background:#00110d !important;
}
.pricing-live-v4__frame{
width:min(calc(100% - 40px),1180px);
margin:0 auto;
display:grid;
grid-template-columns:31% 38% 31%;
gap:18px;
font-family:"Montserrat",Arial,sans-serif;
}
.pricing-live-v4__left{
padding:18px 4px 0;
}
.pricing-live-v4__eyebrow{
color:#42f23c;
font-size:13px;
font-weight:600;
margin-bottom:12px;
}
.pricing-live-v4__left h2{
margin:0;
color:#f5f6f5;
font-size:55px;
line-height:.96;
letter-spacing:-.045em;
font-weight:800;
}
.pricing-live-v4__left h2 span{
color:#73f448;
}
.pricing-live-v4__lead{
margin:17px 0 0;
color:#edf1ee;
font-size:17px;
line-height:1.4;
}
.pricing-live-v4__advantages{
margin-top:34px;
display:grid;
gap:25px;
}
.pricing-live-v4__advantages>div{
display:grid;
grid-template-columns:64px 1fr;
gap:16px;
align-items:center;
}
.pricing-live-v4__adv-icon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
color:#72f448;
border:1px solid #63ef42;
border-radius:50%;
}
.pricing-live-v4__adv-icon svg{
width:36px;
height:36px;
}
.pricing-live-v4__advantages b{
display:block;
color:#f5f6f5;
font-size:18px;
line-height:1.15;
}
.pricing-live-v4__advantages small{
display:block;
margin-top:5px;
color:#dbe2dd;
font-size:14px;
line-height:1.35;
}
.pricing-live-v4__cards{
align-self:start;
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
padding-top:150px;
}
.pricing-live-v4__card{
grid-column:span 2;
min-height:230px;
padding:13px 10px 14px;
border:1px solid rgba(68,239,57,.75);
border-radius:10px;
background:rgba(4,17,12,.94);
text-align:center;
overflow:hidden;
}
.pricing-live-v4__card--wide{
grid-column:span 3;
}
.pricing-live-v4__card h3{
margin:0;
color:#f7f8f7;
font-size:19px;
font-weight:700;
}
.pricing-live-v4__line{
display:block;
width:80%;
height:1px;
margin:10px auto 7px;
background:linear-gradient(90deg,transparent,#65f046 35%,#65f046 65%,transparent);
}
.pricing-live-v4__card img{
display:block;
width:92%;
height:86px;
margin:0 auto 6px;
object-fit:contain;
}
.pricing-live-v4__price{
display:block;
padding:7px 5px;
border:1px solid rgba(69,244,57,.75);
border-radius:7px;
color:#75f64f;
font-size:28px;
line-height:1;
font-weight:800;
}
.pricing-live-v4__time{
margin-top:11px;
color:#f1f3f1;
font-size:14px;
}
.pricing-live-v4__time span{
color:#78f64f;
font-size:19px;
margin-right:4px;
}
.pricing-live-v4__art{
position:relative;
min-height:685px;
overflow:hidden;
border-radius:12px;
}
.pricing-live-v4__art>img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
}
.pricing-live-v4__calc{
position:absolute;
z-index:3;
left:11%;
top:22%;
width:63%;
padding:17px 18px 20px;
border:1px solid rgba(95,255,73,.9);
border-radius:12px;
background:rgba(7,23,14,.95);
box-shadow:0 0 30px rgba(50,255,52,.15);
transform:rotate(6deg);
color:#fff;
}
.pricing-live-v4__calc label,
.pricing-live-v4__calc small{
display:block;
color:#6cf24a;
font-size:10px;
line-height:1.25;
}
.pricing-live-v4__calc select{
width:100%;
margin:10px 0 15px;
padding:10px 12px;
border:1px solid #75f34d;
border-radius:8px;
outline:0;
background:#0a2116;
color:#fff;
font:inherit;
font-size:14px;
}
.pricing-live-v4__calc strong{
display:block;
margin:5px 0 15px;
color:#eaffdf;
font-size:36px;
line-height:1;
font-weight:800;
}
.pricing-live-v4__calc-time{
margin-top:5px;
color:#fff;
font-size:17px;
}
.pricing-live-v4__bottom{
grid-column:1/-1;
display:grid;
grid-template-columns:60px 1fr 300px 220px;
gap:18px;
align-items:center;
margin-top:0;
padding:16px 20px;
border:1px solid rgba(74,243,59,.55);
border-radius:12px;
background:#06140f;
}
.pricing-live-v4__info{
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
border:2px solid #7df64e;
border-radius:50%;
color:#7df64e;
font-size:31px;
font-style:italic;
font-weight:600;
}
.pricing-live-v4__bottom p{
margin:0;
color:#e7ece8;
font-size:13px;
line-height:1.45;
}
.pricing-live-v4__primary,
.pricing-live-v4__secondary{
min-height:56px;
display:flex;
align-items:center;
justify-content:center;
border-radius:11px;
font-family:inherit;
font-size:16px;
font-weight:800;
text-decoration:none;
cursor:pointer;
}
.pricing-live-v4__primary{
justify-content:space-between;
padding:0 22px;
color:#00110d;
background:linear-gradient(180deg,#98ff5e,#57f23d);
}
.pricing-live-v4__primary span{
font-size:25px;
}
.pricing-live-v4__secondary{
border:1px solid #61ef40;
background:#07140f;
color:#f3f5f3;
}
@media (max-width:1000px){
.pricing-live-v4__frame{
grid-template-columns:1fr 1fr;
}
.pricing-live-v4__left{
grid-column:1/-1;
}
.pricing-live-v4__cards{
padding-top:0;
}
.pricing-live-v4__art{
min-height:560px;
}
.pricing-live-v4__bottom{
grid-template-columns:55px 1fr;
}
.pricing-live-v4__primary,
.pricing-live-v4__secondary{
min-height:52px;
}
}
@media (max-width:700px){
.pricing-live-v4__frame{
width:calc(100% - 24px);
grid-template-columns:1fr;
}
.pricing-live-v4__left h2{
font-size:42px;
}
.pricing-live-v4__cards{
grid-template-columns:1fr 1fr;
}
.pricing-live-v4__card,
.pricing-live-v4__card--wide{
grid-column:span 1;
}
.pricing-live-v4__art{
min-height:520px;
}
.pricing-live-v4__bottom{
grid-template-columns:50px 1fr;
}
.pricing-live-v4__primary,
.pricing-live-v4__secondary{
grid-column:1/-1;
}
}
/* ===== PRICING — скрываем старые кнопки внутри фонового изображения ===== */
#pricing .pricing-live-v4__art::after{
content:"";
position:absolute;
z-index:2;
left:0;
right:0;
bottom:0;
height:82px;
background:
linear-gradient(
180deg,
rgba(3,16,11,0) 0%,
rgba(3,16,11,.88) 28%,
#06140f 58%,
#06140f 100%
);
pointer-events:none;
}
/* Калькулятор должен оставаться поверх маски */
#pricing .pricing-live-v4__calc{
z-index:4 !important;
}
/* ===== REVIEWS — SAME WIDTH AS OTHER SECTIONS ===== */
@media (min-width:821px){
#reviews > .container{
width:min(calc(100% - 40px),1180px) !important;
max-width:1180px !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
}
/* ===== FAQ — SAME WIDTH AS OTHER SECTIONS ===== */
@media (min-width:821px){
#faq > .container{
width:min(calc(100% - 40px),1180px) !important;
max-width:1180px !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
}
/* =========================================================
FINAL SITE WIDTH — remaining sections + footer
Меняем только общую ширину контейнеров
========================================================= */
@media (min-width:821px){
/* Все стандартные оставшиеся секции */
main .section > .container{
width:min(calc(100% - 40px),1180px) !important;
max-width:1180px !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
/* Футер */
.footer .container{
width:min(calc(100% - 40px),1180px) !important;
max-width:1180px !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
}
/* =========================================================
FINAL GLOBAL CONTENT WIDTH
Все страницы сайта = 1180px
Только ширина контейнеров, без изменения содержимого
========================================================= */
@media (min-width:821px){
/* Все основные страницы и стандартные секции */
main .container{
width:min(calc(100% - 40px),1180px) !important;
max-width:1180px !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
/* Футер на всех страницах */
.footer .container{
width:min(calc(100% - 40px),1180px) !important;
max-width:1180px !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
}
/* =========================================================
CALCULATOR MODAL — support pricing-live-v4
========================================================= */
.h2-calc-modal .pricing-live-v4__calc{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:30px 24px 24px !important;
transform:none !important;
border:0 !important;
border-radius:16px !important;
background:#06140f !important;
box-shadow:none !important;
}
.h2-calc-modal .pricing-live-v4__calc label{
display:block !important;
margin:0 45px 8px 0 !important;
color:#63f246 !important;
font-size:12px !important;
font-weight:700 !important;
}
.h2-calc-modal .pricing-live-v4__calc select{
width:100% !important;
min-height:52px !important;
margin:8px 0 22px !important;
padding:0 14px !important;
border:1px solid #64ef44 !important;
border-radius:10px !important;
background:#091d14 !important;
color:#fff !important;
font-size:16px !important;
}
.h2-calc-modal .pricing-live-v4__calc small{
display:block !important;
margin-top:10px !important;
color:#64f145 !important;
font-size:11px !important;
}
.h2-calc-modal .pricing-live-v4__calc strong{
display:block !important;
margin:7px 0 20px !important;
color:#eaffdf !important;
font-size:40px !important;
line-height:1 !important;
font-weight:800 !important;
}
.h2-calc-modal .pricing-live-v4__calc-time{
margin-top:7px !important;
color:#fff !important;
font-size:18px !important;
}
/* =========================================================
HEADER LOGO — full live text
========================================================= */
@media (min-width:821px){
.topbar .brand{
position:relative !important;
width:285px !important;
min-width:285px !important;
flex-basis:285px !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
}
/* Старый PNG скрываем — его подпись физически обрезана */
.topbar .brand > img{
display:none !important;
}
/* Из того же файла показываем только шестерёнку */
.topbar .brand::before{
content:"" !important;
display:block !important;
flex:0 0 62px !important;
width:62px !important;
height:62px !important;
background-image:url("/assets/img/logo.png") !important;
background-repeat:no-repeat !important;
background-position:left center !important;
background-size:245px auto !important;
}
/* Возвращаем живой текст */
.topbar .brand-copy{
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
min-width:0 !important;
font-family:"Montserrat",Arial,sans-serif !important;
}
.topbar .brand-copy strong{
display:block !important;
color:#f4f6f5 !important;
font-size:20px !important;
line-height:1 !important;
font-weight:800 !important;
white-space:nowrap !important;
}
.topbar .brand-copy strong::first-letter{
color:#3df33a !important;
}
.topbar .brand-copy small{
display:block !important;
margin-top:6px !important;
color:#aab4ae !important;
font-size:10px !important;
line-height:1.15 !important;
font-weight:400 !important;
white-space:nowrap !important;
}
}
/* =========================================================
HEADER LOGO — FINAL FIX
Одна шестерёнка + живой полный текст
========================================================= */
@media (min-width:821px){
body .topbar .brand{
width:285px !important;
min-width:285px !important;
flex:0 0 285px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
overflow:visible !important;
}
/* Убираем дополнительную шестерёнку,
которую создала предыдущая правка */
body .topbar .brand::before{
content:none !important;
display:none !important;
background:none !important;
}
/* Используем исходный logo.png,
но показываем ТОЛЬКО шестерёнку слева */
body .topbar .brand > img{
display:block !important;
flex:0 0 62px !important;
width:62px !important;
min-width:62px !important;
max-width:62px !important;
height:62px !important;
min-height:62px !important;
max-height:62px !important;
object-fit:cover !important;
object-position:left center !important;
margin:0 !important;
}
/* Живой текст рядом */
body .topbar .brand .brand-copy{
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:flex-start !important;
width:auto !important;
min-width:195px !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
font-family:"Montserrat",Arial,sans-serif !important;
}
/* Старый текст strong скрываем визуально,
но сам элемент оставляем */
body .topbar .brand .brand-copy strong{
position:relative !important;
display:flex !important;
align-items:baseline !important;
height:24px !important;
margin:0 !important;
padding:0 !important;
font-size:0 !important;
line-height:1 !important;
white-space:nowrap !important;
}
body .topbar .brand .brand-copy strong::before{
content:"H₂" !important;
color:#35ef36 !important;
font-size:21px !important;
line-height:1 !important;
font-weight:800 !important;
letter-spacing:-.04em !important;
}
body .topbar .brand .brand-copy strong::after{
content:"ENGINE" !important;
margin-left:2px !important;
color:#f4f6f5 !important;
font-size:21px !important;
line-height:1 !important;
font-weight:800 !important;
letter-spacing:-.04em !important;
}
body .topbar .brand .brand-copy small{
display:block !important;
margin:5px 0 0 !important;
padding:0 !important;
color:#aeb7b2 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:9.5px !important;
line-height:1.15 !important;
font-weight:400 !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
}
}
/* ===== HEADER LOGO — WITHOUT GEAR ===== */
@media (min-width:821px){
body .topbar .brand{
width:220px !important;
min-width:220px !important;
flex:0 0 220px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:0 !important;
}
body .topbar .brand > img{
display:none !important;
}
body .topbar .brand::before,
body .topbar .brand::after{
content:none !important;
display:none !important;
}
body .topbar .brand .brand-copy{
margin:0 !important;
padding:0 !important;
min-width:220px !important;
}
}
/* ===== HEADER BRAND — ALIGN WITH PAGE CONTENT ===== */
@media (min-width:1101px){
body .topbar .brand{
transform:translateX(60px) !important;
}
}
/* =========================================================
GLOBAL CALCULATOR — ALL PAGES
========================================================= */
#global-calc-modal .global-calc{
display:block !important;
}
#global-calc-modal .calc-result small{
display:block;
margin-bottom:5px;
color:#b9c4bd;
font-size:11px;
}
#global-calc-modal .calc-result b{
display:block;
color:#48ff3b !important;
}
#global-calc-modal .consent{
display:flex !important;
align-items:flex-start !important;
gap:8px !important;
margin:12px 0 16px !important;
}
#global-calc-modal .consent input{
width:auto !important;
min-height:0 !important;
margin-top:3px !important;
}
#global-calc-modal .consent span{
color:#cbd4cf;
font-size:11px;
line-height:1.35;
}
/* ===== RASKOKS HERO — BUTTONS IN ONE ROW ===== */
@media (min-width:821px){
.raskoks-page .rsk-hero .hero-actions{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:14px !important;
width:100% !important;
}
.raskoks-page .rsk-hero .hero-actions .btn{
width:100% !important;
min-width:0 !important;
max-width:none !important;
margin:0 !important;
box-sizing:border-box !important;
white-space:nowrap !important;
}
}
/* ===== CATALYST HERO — BUTTONS IN ONE ROW ===== */
@media (min-width:821px){
.cat-hero .hero-actions{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:14px !important;
width:100% !important;
}
.cat-hero .hero-actions .btn{
width:100% !important;
min-width:0 !important;
max-width:none !important;
margin:0 !important;
box-sizing:border-box !important;
white-space:nowrap !important;
}
}
/* ===== CATALYST HERO — FORCE BUTTONS ONE ROW ===== */
@media (min-width:821px){
.catalyst-page .cat-hero .hero-actions{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
gap:14px !important;
flex-wrap:nowrap !important;
width:100% !important;
}
.catalyst-page .cat-hero .hero-actions .btn{
width:100% !important;
min-width:0 !important;
max-width:none !important;
margin:0 !important;
padding-left:12px !important;
padding-right:12px !important;
box-sizing:border-box !important;
white-space:nowrap !important;
}
}
/* ===== DPF HERO — EQUAL BUTTONS IN ONE ROW ===== */
@media (min-width:821px){
.dpf-page .dpf-hero .hero-actions{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:14px !important;
width:100% !important;
flex-wrap:nowrap !important;
}
.dpf-page .dpf-hero .hero-actions .btn{
width:100% !important;
min-width:0 !important;
max-width:none !important;
margin:0 !important;
padding-left:14px !important;
padding-right:14px !important;
box-sizing:border-box !important;
white-space:nowrap !important;
justify-content:center !important;
text-align:center !important;
}
}
/* =========================================================
MOBILE FINAL FIX — <= 820px
Desktop не затрагиваем
========================================================= */
@media (max-width:820px){
/* =======================================================
1. HEADER — H2ENGINE без маленькой шестерёнки
======================================================= */
body .topbar .brand{
flex:0 0 125px !important;
width:125px !important;
min-width:125px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
margin:0 !important;
padding:0 !important;
gap:0 !important;
overflow:visible !important;
transform:none !important;
}
body .topbar .brand > img{
display:none !important;
}
body .topbar .brand::before,
body .topbar .brand::after{
content:none !important;
display:none !important;
}
body .topbar .brand .brand-copy{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:center !important;
width:125px !important;
min-width:125px !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
}
body .topbar .brand .brand-copy strong{
display:flex !important;
align-items:baseline !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
font-size:0 !important;
line-height:1 !important;
white-space:nowrap !important;
}
body .topbar .brand .brand-copy strong::before{
content:"H₂" !important;
color:#39f23a !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:16px !important;
line-height:1 !important;
font-weight:800 !important;
letter-spacing:-.04em !important;
}
body .topbar .brand .brand-copy strong::after{
content:"ENGINE" !important;
margin-left:2px !important;
color:#f3f6f4 !important;
font-family:"Montserrat",Arial,sans-serif !important;
font-size:16px !important;
line-height:1 !important;
font-weight:800 !important;
letter-spacing:-.04em !important;
}
body .topbar .brand .brand-copy small{
display:block !important;
margin-top:5px !important;
color:#9fa9a3 !important;
font-size:6.5px !important;
line-height:1.1 !important;
font-weight:400 !important;
white-space:nowrap !important;
}
/* =======================================================
2. HOME TRUST — текст больше не обрезается
======================================================= */
body .home-hero-trust{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
width:100% !important;
}
body .home-hero-trust > div{
min-width:0 !important;
min-height:118px !important;
padding:12px 9px !important;
grid-template-columns:
38px minmax(0,1fr) !important;
gap:8px !important;
overflow:visible !important;
}
body .home-hero-trust .trust-icon{
width:36px !important;
height:36px !important;
}
body .home-hero-trust .trust-icon svg{
width:31px !important;
height:31px !important;
}
body .home-hero-trust p{
min-width:0 !important;
width:100% !important;
font-size:11px !important;
line-height:1.15 !important;
white-space:normal !important;
overflow:visible !important;
overflow-wrap:anywhere !important;
}
body .home-hero-trust b{
display:block !important;
font-size:17px !important;
line-height:1.05 !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
body .home-hero-trust small{
display:block !important;
font-size:8.5px !important;
line-height:1.25 !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
/* =======================================================
3. WHEN TO CLEAN — свайп остаётся,
видимый scrollbar убираем
======================================================= */
body .home-symptoms-v3__cards-scroll{
scrollbar-width:none !important;
-ms-overflow-style:none !important;
}
body .home-symptoms-v3__cards-scroll::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
/* =======================================================
4. RASKOKS — длинный мобильный заголовок стоимости
======================================================= */
body .raskoks-page .rsk-price-copy h2{
max-width:100% !important;
margin:5px 0 8px !important;
font-size:21px !important;
line-height:1.04 !important;
letter-spacing:-.035em !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}
body .raskoks-page .rsk-price-layout{
min-width:0 !important;
}
body .raskoks-page .rsk-price-copy{
min-width:0 !important;
overflow:hidden !important;
}
}
/* =========================================================
MOBILE VISUAL FIX — 2026-09-08
Только телефон, desktop не трогаем
========================================================= */
@media (max-width:820px){
/* =======================================================
1. "Что происходит внутри двигателя"
Показываем изображение ЦЕЛИКОМ, без обрезания
======================================================= */
#inside .inside-mockup-mobile .inside-art{
min-height:0 !important;
height:auto !important;
aspect-ratio:auto !important;
overflow:hidden !important;
}
#inside .inside-mockup-mobile .inside-art img{
display:block !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
object-fit:contain !important;
object-position:center center !important;
}
/* =======================================================
2. "Как проходит очистка"
Закрываем остатки старой растровой надписи справа
======================================================= */
#process.process-live-v3 .process-live-v3__top::after{
content:"" !important;
position:absolute !important;
z-index:3 !important;
right:0 !important;
top:17% !important;
width:37% !important;
height:25% !important;
background:
linear-gradient(
90deg,
rgba(7,19,15,0) 0%,
rgba(7,19,15,.97) 18%,
#07130f 38%,
#07130f 100%
) !important;
pointer-events:none !important;
}
/* Живой текст и этапы всегда выше маски */
#process .process-live-v3__copy,
#process .process-live-v3__steps{
position:absolute !important;
z-index:5 !important;
}
/* =======================================================
3. Фото этапа 04
Немного сдвигаем изображение визуально ВЛЕВО
======================================================= */
#process .process-live-v3__thumbs figure:nth-child(4) img{
object-fit:cover !important;
object-position:62% center !important;
}
/* =======================================================
4. Финальный блок главной
На телефоне полностью убираем
======================================================= */
#final-cta{
display:none !important;
}
}
/* =========================================================
DPF MOBILE — benefits 2x2 + equal buttons
========================================================= */
@media (max-width:820px){
/* 4 преимущества — две карточки в ряд */
body .dpf-page .dpf-hero .dpf-benefits{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin-top:22px !important;
}
body .dpf-page .dpf-hero .dpf-benefits > div{
min-width:0 !important;
min-height:88px !important;
display:grid !important;
grid-template-columns:40px minmax(0,1fr) !important;
grid-template-rows:auto auto !important;
column-gap:8px !important;
row-gap:2px !important;
align-items:center !important;
margin:0 !important;
padding:11px 8px !important;
box-sizing:border-box !important;
}
body .dpf-page .dpf-hero .dpf-benefits .icon{
grid-row:1 / 3 !important;
width:38px !important;
height:38px !important;
margin:0 !important;
}
body .dpf-page .dpf-hero .dpf-benefits .icon svg{
width:21px !important;
height:21px !important;
}
body .dpf-page .dpf-hero .dpf-benefits b{
min-width:0 !important;
font-size:11px !important;
line-height:1.12 !important;
white-space:normal !important;
}
body .dpf-page .dpf-hero .dpf-benefits small{
min-width:0 !important;
font-size:7.5px !important;
line-height:1.2 !important;
white-space:normal !important;
}
/* Обе CTA-кнопки — одинаковые и в одну строку */
body .dpf-page .dpf-hero .hero-actions{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
margin-top:18px !important;
}
body .dpf-page .dpf-hero .hero-actions .btn{
width:100% !important;
min-width:0 !important;
max-width:none !important;
min-height:54px !important;
height:54px !important;
margin:0 !important;
padding:0 7px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
font-size:11.5px !important;
line-height:1.1 !important;
text-align:center !important;
white-space:nowrap !important;
}
}
/* H2ENGINE desktop performance patch v7
Defer layout/paint work for heavy home-page sections below the first screen.
The hero and services remain fully rendered immediately. */
@supports (content-visibility: auto) {
@media (min-width: 900px) {
#symptoms,
#technology,
#inside,
#process,
#equipment,
#pricing,
#reviews,
#faq,
#locations,
#final-cta {
content-visibility: auto;
}
#symptoms { contain-intrinsic-size: auto 850px; }
#technology { contain-intrinsic-size: auto 1000px; }
#inside { contain-intrinsic-size: auto 1100px; }
#process { contain-intrinsic-size: auto 1000px; }
#equipment { contain-intrinsic-size: auto 900px; }
#pricing { contain-intrinsic-size: auto 1050px; }
#reviews { contain-intrinsic-size: auto 1100px; }
#faq { contain-intrinsic-size: auto 850px; }
#locations { contain-intrinsic-size: auto 850px; }
#final-cta { contain-intrinsic-size: auto 900px; }
}
}