*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#fff;font-family:Arial,Helvetica,sans-serif;background:#080603 url("assets/page-hangar-bg.jpg") center top/cover fixed no-repeat}.shell{width:min(1510px,96vw);margin:auto}.topbar{height:74px;position:sticky;top:0;z-index:60;background:rgba(3,3,3,.95);border-bottom:1px solid #4d3509;backdrop-filter:blur(8px)}.nav{height:100%;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;min-width:270px;text-decoration:none;color:#fff}.brand-mark{width:49px;height:49px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(145deg,#ffd45d,#b87908);color:#111;font-weight:900;font-style:italic;font-size:21px}.brand-copy{display:flex;flex-direction:column}.brand-copy strong{font-size:23px}.brand-copy strong span{color:#dda023}.brand-copy small{font-size:8px;color:#aaa;letter-spacing:.85px;margin-top:4px}.menu{display:flex;gap:25px;flex:1}.menu a{color:#eee;text-decoration:none;font-size:13px;font-weight:700}.nav-tools{display:flex;align-items:center;gap:8px}.lang{white-space:nowrap}.lang button{border:0;background:none;color:#888;font-weight:900}.lang .active{color:#efb32b}.phones{display:flex;flex-direction:column;font-size:13px;font-weight:900;white-space:nowrap}.phones a{color:#fff;text-decoration:none}.mini{border:1px solid #64460d;border-radius:7px;padding:7px 10px;color:#efb32b;text-decoration:none;text-align:center;font-size:10.5px;line-height:1.2}.hero{position:relative;min-height:calc(100vh - 74px);background:url("assets/hero-scene-exact.jpg") center center/cover no-repeat;border-bottom:1px solid rgba(151,101,16,.55)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.26) 0%,rgba(0,0,0,.10) 43%,rgba(0,0,0,.03) 100%);pointer-events:none}.hero-inner{min-height:calc(100vh - 74px);display:flex;align-items:center;position:relative;z-index:2}.hero-copy{width:43%;padding:26px 0 50px 42px}.eyebrow{font-size:12px;letter-spacing:4px;color:#e6ad29;margin-bottom:15px}.hero h1{font-size:clamp(29px,2.65vw,43px);line-height:1.07;margin:0 0 12px;font-weight:900;text-shadow:0 2px 9px rgba(0,0,0,.52)}.hero h1 span{color:#efb32b}.hero p{font-size:12px;color:#e4e4e4;line-height:1.5;margin:0 0 11px;text-shadow:0 1px 5px #000}.legal{font-size:12.5px;color:#efb32b;font-weight:900;margin-bottom:18px}.hero-actions{display:flex;gap:14px;margin-bottom:22px}.btn{border-radius:7px;padding:12px 18px;font-size:12px;font-weight:900;cursor:pointer}.gold{border:0;background:linear-gradient(135deg,#ffd45d,#bf7d09);color:#111}.dark{border:1px solid #765310;background:rgba(5,5,5,.72);color:#fff}.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:465px}.benefits i{display:grid;place-items:center;width:39px;height:39px;border:1px solid #76520d;border-radius:50%;font-style:normal;color:#efb32b;margin-bottom:6px;background:rgba(0,0,0,.23)}.benefits span{font-size:10.5px;line-height:1.35;color:#ddd}.float-stack{position:absolute;right:18px;top:54%;transform:translateY(-20%);z-index:3;display:flex;flex-direction:column;gap:10px}.float{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;text-decoration:none;border:0;font-size:18px;cursor:pointer}.wa{background:#18c46b;color:#fff}.fg{background:linear-gradient(145deg,#ffd45d,#b87808);color:#111}.services{padding:30px 0 20px;background:rgba(6,4,1,.42);backdrop-filter:blur(3px)}.section-title{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 16px}.section-title span{width:165px;height:1px;background:linear-gradient(90deg,transparent,#bd8518)}.section-title span:last-child{background:linear-gradient(90deg,#bd8518,transparent)}.section-title h2{font-size:18px;letter-spacing:5px;margin:0}.service-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.service-card{height:205px;border:1px solid rgba(125,86,13,.82);border-radius:8px;background:rgba(7,6,3,.67);color:#fff;padding:7px 9px 10px;text-align:center;text-decoration:none;overflow:hidden;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.16)}.service-card img{display:block;width:100%;height:105px;object-fit:contain;background:rgba(3,3,3,.45);border-radius:5px}.service-card h3{margin:7px 0;color:#efb32b;font-size:12.5px}.service-card p{margin:0;color:#d5d5d5;font-size:10.2px;line-height:1.4}.video-service{display:flex;flex-direction:column;align-items:center;justify-content:center}.big-play{width:50px;height:50px;border:1px solid #845b10;border-radius:8px;display:grid;place-items:center;color:#efb32b;font-size:23px;margin-bottom:18px}.contact-bar{margin-top:14px;min-height:64px;display:grid;grid-template-columns:1.45fr 1.15fr 1.1fr 1.15fr 1.05fr 1fr auto;border:1px solid rgba(96,68,14,.84);border-radius:8px;background:rgba(7,6,3,.72);overflow:hidden}.contact-bar>div{display:flex;align-items:center;gap:9px;padding:8px 11px;border-right:1px solid #2b210d;font-size:10.5px;color:#ddd}.contact-bar i{width:31px;height:31px;border:1px solid #61460e;border-radius:50%;display:grid;place-items:center;color:#efb32b;font-style:normal}.contact-bar a,.contact-bar button{background:none;border:0;padding:0;color:#efb32b;text-decoration:none;font-size:9.8px}.footer-cta{margin:8px;border:1px solid #74510e;border-radius:7px;background:#0a0a0a;color:#efb32b;font-weight:900;padding:0 16px}.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.86);display:none;place-items:center;padding:20px}.modal.open{display:grid}.modal-card{width:min(640px,96vw);background:#0c0c0c;border:1px solid #6a4a0d;border-radius:14px;padding:25px;position:relative}.modal-card h2{font-size:32px;margin:5px 0 18px}.modal-close{position:absolute;right:16px;top:11px;background:none;border:0;color:#aaa;font-size:30px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal input,.modal textarea,.ai-panel textarea{width:100%;background:#141414;border:1px solid #453410;border-radius:8px;color:#fff;padding:13px;margin:5px 0}.full{width:100%;margin-top:10px}.status{margin-top:8px;font-size:12px;color:#e7b94f}.ai-fab{position:fixed;right:24px;bottom:24px;z-index:80;width:58px;height:58px;border:0;border-radius:50%;background:linear-gradient(145deg,#ffd456,#b97808);color:#111;font-weight:900}.ai-fab small{display:block}.ai-panel{position:fixed;right:18px;top:90px;z-index:110;width:min(420px,calc(100vw - 36px));height:min(620px,calc(100vh - 110px));background:#090909;border:1px solid #6c4c0f;border-radius:14px;display:none;flex-direction:column;overflow:hidden}.ai-panel.open{display:flex}.ai-head{padding:16px;border-bottom:1px solid #2f2410;display:flex;justify-content:space-between}.ai-head div{display:flex;flex-direction:column;gap:5px}.ai-head span{color:#e8ab27;font-size:11px}.ai-head button{border:0;background:none;color:#aaa;font-size:26px}.ai-chat{flex:1;overflow:auto;padding:14px}.ai-msg{padding:12px;border-radius:10px;margin-bottom:9px;white-space:pre-wrap;line-height:1.45}.ai-msg.bot{background:#151515}.ai-msg.user{background:#664910;margin-left:34px}.ai-panel form{padding:12px;border-top:1px solid #2f2410}.ai-actions{display:flex;gap:7px}.ai-actions button{flex:1;padding:11px}.sr-only{position:absolute;left:-99999px}.loading{opacity:.6}.error{color:#ff8585}@media(max-width:1250px){.menu{display:none}.mini{display:none}.hero-copy{width:52%;padding-left:24px}.hero h1{font-size:34px}.service-grid{grid-template-columns:repeat(4,1fr)}.contact-bar{grid-template-columns:repeat(3,1fr)}.footer-cta{min-height:52px}}@media(max-width:760px){.topbar{height:68px}.brand{min-width:0}.brand-copy strong{font-size:19px}.brand-copy small,.phones{display:none}.hero{min-height:760px;background-position:62% center}.hero-inner{min-height:760px;align-items:flex-start}.hero-copy{width:100%;padding:42px 14px 20px}.hero h1{font-size:32px;max-width:360px}.hero p{max-width:340px}.benefits{grid-template-columns:repeat(2,1fr);max-width:260px}.float-stack{display:none}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card{height:195px}.contact-bar{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.section-title span{width:48px}}
/* ===== FINAL: REMOVE PRESS BRAKE, CONTINUE HANGAR AS ONE PHOTO ===== */
body{
background:#080603 url("assets/page-hangar-no-pressbrake.jpg") center top/cover fixed no-repeat !important;
}
.hero{
background:url("assets/hero-scene-no-pressbrake.jpg") center center/cover no-repeat !important;
}
.press-brake-backdrop,
.hero-pressbrake-bg{
display:none !important;
background:none !important;
}
.hero:after{
background:linear-gradient(
90deg,
rgba(0,0,0,.20) 0%,
rgba(0,0,0,.08) 42%,
rgba(0,0,0,.02) 100%
) !important;
}
/* Keep left side visibly as the same hangar, not a black panel */
.hero-copy{
background:transparent !important;
}
.hero-copy:before,
.hero-copy:after{
display:none !important;
}
/* ===== FINAL: BACKGROUND REMOVED ===== */
html, body{
background:#050505 !important;
background-image:none !important;
background-attachment:initial !important;
}
.hero{
background:#050505 !important;
background-image:none !important;
}
.hero::before,
.hero::after{
background:none !important;
background-image:none !important;
}
.services,
main,
.contact-bar{
background-image:none !important;
}
/* No hangar/background image behind the title */
.hero-copy{
background:transparent !important;
}
/* ===== USER UPLOADED LASER IMAGE AS BACKGROUND ===== */
html, body{
background:#050505 !important;
}
.hero{
background:
linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.05) 64%, rgba(0,0,0,.02) 100%),
url("assets/user-laser-background.jpg") center center / cover no-repeat !important;
background-color:#050505 !important;
}
.hero::before,
.hero::after{
background:none !important;
background-image:none !important;
}
.hero-copy{
background:transparent !important;
}
/* Keep the uploaded machine visible and undistorted */
@media (min-width:761px){
.hero{
background-position:center center !important;
}
}
/* ===== SMALLER LASER + SAME HANGAR MOOD ===== */
.hero{
background:
linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.04) 100%),
url("assets/user-laser-background.jpg") 78% center / auto 78% no-repeat,
#070604 !important;
}
/* Benefit icons exactly in the compact gold-outline style of the supplied reference */
.benefits{
gap:22px !important;
max-width:475px !important;
}
.benefits > div{
text-align:center;
}
.benefits i{
width:37px !important;
height:37px !important;
margin:0 auto 6px !important;
border:1px solid #a87308 !important;
color:#e8a900 !important;
background:rgba(0,0,0,.28) !important;
font-size:0 !important;
position:relative;
}
.benefits > div:nth-child(1) i::before{content:"✧";font-size:22px;}
.benefits > div:nth-child(2) i::before{content:"▦";font-size:20px;}
.benefits > div:nth-child(3) i::before{content:"◇";font-size:21px;}
.benefits > div:nth-child(4) i::before{content:"▱";font-size:20px;}
.benefits span{
display:block;
text-align:center;
font-size:10px !important;
color:#d9d9d9 !important;
}
@media(max-width:760px){
.hero{
background:
linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.12)),
url("assets/user-laser-background.jpg") 68% 76% / auto 48% no-repeat,
#070604 !important;
}
}
/* ===== FINAL STYLE MATCH: GOLD HANGAR ===== */
body{
background:#070604 !important;
}
.hero{
min-height:610px !important;
background:
linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.38) 35%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.08) 100%),
url("assets/user-laser-background.jpg") center center / cover no-repeat !important;
border-bottom:0 !important;
}
.hero-inner{
min-height:610px !important;
align-items:center !important;
}
.hero-copy{
width:48% !important;
padding-left:58px !important;
padding-bottom:35px !important;
}
.hero h1{
font-size:clamp(31px,2.5vw,42px) !important;
line-height:1.08 !important;
max-width:520px !important;
}
.hero-actions{
margin-bottom:25px !important;
}
/* Put the laser image visually on the right inside a rounded gold contour.
The photo itself remains undistorted and smaller. */
.hero::before{
content:"" !important;
position:absolute !important;
right:5.8% !important;
top:12.5% !important;
width:42% !important;
height:61% !important;
border:2px solid #d99a16 !important;
border-radius:34px !important;
box-shadow:
0 0 0 1px rgba(255,207,85,.10),
0 12px 34px rgba(0,0,0,.30) !important;
pointer-events:none !important;
z-index:1 !important;
}
/* Reduce visible machine area by overlaying a hangar continuation on the far right
and keeping the source image proportional. */
.hero::after{
content:"" !important;
position:absolute !important;
inset:0 !important;
background:
radial-gradient(circle at 77% 42%, rgba(255,187,45,.06), transparent 25%),
linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.10)) !important;
pointer-events:none !important;
z-index:0 !important;
}
.hero-copy,
.float-stack{
position:relative !important;
z-index:3 !important;
}
/* Compact four gold icon cards matching the user's supplied icon sample */
.benefits{
display:grid !important;
grid-template-columns:repeat(4,112px) !important;
gap:16px !important;
max-width:none !important;
}
.benefits > div{
min-height:108px !important;
border:1px solid #8b620f !important;
border-radius:10px !important;
background:rgba(4,4,4,.48) !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
padding:11px 8px !important;
}
.benefits i{
width:42px !important;
height:42px !important;
border:0 !important;
margin:0 auto 7px !important;
background:transparent !important;
color:#efb020 !important;
}
.benefits > div:nth-child(1) i::before{content:"♢";font-size:32px;line-height:1;}
.benefits > div:nth-child(2) i::before{content:"▦";font-size:30px;line-height:1;}
.benefits > div:nth-child(3) i::before{content:"◇";font-size:32px;line-height:1;}
.benefits > div:nth-child(4) i::before{content:"▱";font-size:30px;line-height:1;}
.benefits span{
font-size:10px !important;
line-height:1.35 !important;
text-align:center !important;
}
/* Services: same black/gold card style */
.services{
padding-top:34px !important;
background:
linear-gradient(rgba(5,4,2,.68),rgba(5,4,2,.72)),
url("assets/user-laser-background.jpg") center bottom / cover fixed no-repeat !important;
}
.service-card{
border:1px solid #8a6110 !important;
border-radius:10px !important;
background:rgba(6,6,6,.78) !important;
}
.service-card img{
border-radius:8px !important;
background:rgba(4,4,4,.50) !important;
}
/* User's advertising sign photo: render in gold style */
.service-card[data-service="Рекламные щиты"] img{
filter:
sepia(.85)
saturate(1.8)
hue-rotate(350deg)
brightness(.92)
contrast(1.14) !important;
}
/* Gold hover glow, especially for advertising sign */
.service-card:hover,
.service-card[data-service="Рекламные щиты"]:hover{
border-color:#e0a21f !important;
box-shadow:0 0 22px rgba(218,153,24,.20) !important;
}
/* Bottom contact strip stays integrated */
.contact-bar{
background:rgba(6,5,3,.82) !important;
border-color:#75530f !important;
}
@media(max-width:1250px){
.hero::before{
right:3% !important;
width:45% !important;
}
.benefits{
grid-template-columns:repeat(4,95px) !important;
gap:10px !important;
}
}
@media(max-width:760px){
.hero{
min-height:760px !important;
background-position:65% center !important;
}
.hero-copy{
width:100% !important;
padding-left:16px !important;
}
.hero::before{
right:5% !important;
top:48% !important;
width:90% !important;
height:36% !important;
border-radius:22px !important;
}
.benefits{
grid-template-columns:repeat(2,1fr) !important;
max-width:260px !important;
}
}
/* ===== ONLY BACKGROUND REPLACED WITH USER IMAGE 55 ===== */
.hero{
background:
linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.02) 70%, rgba(0,0,0,.00) 100%),
url("assets/hero-background-55.jpg") center center / cover no-repeat !important;
}
/* keep everything else unchanged */
/* ===== FINAL LAYOUT FIX ===== */
/* 1) Raise "Our Services" section higher */
.services{
margin-top:-38px !important;
padding-top:10px !important;
position:relative !important;
z-index:4 !important;
}
.section-title{
margin-top:0 !important;
margin-bottom:10px !important;
}
/* 2) Remove the gold rounded contour on the right */
.hero::before{
display:none !important;
content:none !important;
border:0 !important;
box-shadow:none !important;
}
/* 3) Move floating side buttons from right to left */
.float-stack{
left:18px !important;
right:auto !important;
top:54% !important;
transform:translateY(-20%) !important;
z-index:5 !important;
}
/* Keep hero content readable with the buttons on left */
.hero-copy{
padding-left:88px !important;
}
@media(max-width:1250px){
.services{
margin-top:-24px !important;
}
.hero-copy{
padding-left:72px !important;
}
}
@media(max-width:760px){
.services{
margin-top:0 !important;
padding-top:18px !important;
}
.hero-copy{
padding-left:16px !important;
}
.float-stack{
display:none !important;
}
}
/* ===== ONE SCREEN SITE — BACKGROUND 77 ===== */
html, body{
margin:0 !important;
min-height:100% !important;
}
body{
background:
linear-gradient(90deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.24) 34%,rgba(0,0,0,.05) 100%),
url("assets/background-77.png") center center / cover fixed no-repeat !important;
}
/* One desktop screen */
@media (min-width: 1000px) and (min-height: 760px){
body{
height:100vh !important;
overflow:hidden !important;
}
.topbar{
height:64px !important;
background:rgba(3,3,3,.82) !important;
backdrop-filter:blur(7px) !important;
}
.brand-mark{
width:42px !important;
height:42px !important;
}
.brand-copy strong{font-size:20px !important;}
.brand-copy small{font-size:7px !important;}
.menu{gap:20px !important;}
.menu a{font-size:12px !important;}
.phones{font-size:12px !important;}
.mini{padding:6px 9px !important;font-size:9.5px !important;}
main{
height:calc(100vh - 64px) !important;
display:grid !important;
grid-template-rows: 44% 56% !important;
overflow:hidden !important;
}
.hero{
min-height:0 !important;
height:auto !important;
background:transparent !important;
border:0 !important;
position:relative !important;
}
.hero::before,
.hero::after{
display:none !important;
content:none !important;
}
.hero-inner{
min-height:0 !important;
height:100% !important;
align-items:center !important;
}
.hero-copy{
width:43% !important;
padding:12px 0 6px 76px !important;
background:transparent !important;
}
.eyebrow{
font-size:10px !important;
margin-bottom:8px !important;
}
.hero h1{
font-size:clamp(25px,2.15vw,35px) !important;
line-height:1.04 !important;
margin-bottom:7px !important;
max-width:480px !important;
}
.hero p{
font-size:10.5px !important;
line-height:1.35 !important;
margin-bottom:6px !important;
}
.legal{
font-size:11px !important;
margin-bottom:10px !important;
}
.hero-actions{
gap:9px !important;
margin-bottom:11px !important;
}
.btn{
padding:9px 14px !important;
font-size:10.5px !important;
}
.benefits{
grid-template-columns:repeat(4,84px) !important;
gap:11px !important;
max-width:none !important;
}
.benefits > div{
min-height:67px !important;
padding:5px 4px !important;
border:0 !important;
background:transparent !important;
}
.benefits i{
width:29px !important;
height:29px !important;
margin:0 auto 3px !important;
border:1px solid #a87308 !important;
border-radius:50% !important;
background:rgba(0,0,0,.25) !important;
}
.benefits > div:nth-child(1) i::before{font-size:18px !important;}
.benefits > div:nth-child(2) i::before{font-size:17px !important;}
.benefits > div:nth-child(3) i::before{font-size:18px !important;}
.benefits > div:nth-child(4) i::before{font-size:17px !important;}
.benefits span{
font-size:8.5px !important;
line-height:1.2 !important;
}
.float-stack{
left:14px !important;
right:auto !important;
top:45% !important;
gap:7px !important;
}
.float{
width:36px !important;
height:36px !important;
font-size:14px !important;
}
.services{
margin:0 !important;
padding:0 0 7px !important;
background:transparent !important;
backdrop-filter:none !important;
overflow:hidden !important;
}
.services > .shell{
height:100% !important;
display:grid !important;
grid-template-rows: 30px 1fr 53px !important;
}
.section-title{
height:30px !important;
margin:0 !important;
align-self:center !important;
}
.section-title h2{
font-size:14px !important;
letter-spacing:4px !important;
}
.section-title span{
width:115px !important;
}
.service-grid{
min-height:0 !important;
display:grid !important;
grid-template-columns:repeat(8,1fr) !important;
gap:6px !important;
align-items:stretch !important;
}
.service-card{
min-height:0 !important;
height:auto !important;
padding:5px 6px 7px !important;
border-radius:8px !important;
background:rgba(5,5,4,.58) !important;
backdrop-filter:blur(3px) !important;
}
.service-card img{
height:72px !important;
object-fit:contain !important;
background:rgba(0,0,0,.18) !important;
}
.service-card h3{
font-size:9.5px !important;
margin:4px 0 4px !important;
}
.service-card p{
font-size:7.9px !important;
line-height:1.25 !important;
}
.big-play{
width:38px !important;
height:38px !important;
margin-bottom:9px !important;
font-size:18px !important;
}
.contact-bar{
margin:5px 0 0 !important;
min-height:48px !important;
height:48px !important;
grid-template-columns:1.45fr 1.05fr 1.05fr 1.12fr 1.05fr .9fr auto !important;
background:rgba(5,5,4,.66) !important;
backdrop-filter:blur(3px) !important;
}
.contact-bar > div{
padding:5px 8px !important;
gap:6px !important;
font-size:8.7px !important;
}
.contact-bar i{
width:26px !important;
height:26px !important;
font-size:13px !important;
}
.contact-bar a,
.contact-bar button{
font-size:8px !important;
}
.footer-cta{
margin:5px !important;
padding:0 10px !important;
font-size:9px !important;
}
.ai-fab{
width:46px !important;
height:46px !important;
right:14px !important;
bottom:14px !important;
}
}
/* Keep mobile/tablet usable */
@media(max-width:999px), (max-height:759px){
body{
overflow:auto !important;
background-attachment:scroll !important;
}
}
/* ===== FINAL USER REQUEST ===== */
/* 1) Make "Наши услуги" cards about 1.5x smaller */
@media (min-width:1000px) and (min-height:760px){
.services > .shell{
grid-template-rows: 26px 1fr 48px !important;
}
.section-title{
height:26px !important;
}
.section-title h2{
font-size:13px !important;
letter-spacing:3px !important;
}
.service-grid{
gap:5px !important;
align-items:center !important;
}
.service-card{
height:132px !important;
min-height:132px !important;
padding:4px 5px 5px !important;
border-radius:7px !important;
}
.service-card img{
height:60px !important;
}
.service-card h3{
font-size:8.7px !important;
margin:3px 0 3px !important;
}
.service-card p{
font-size:7.2px !important;
line-height:1.2 !important;
}
.big-play{
width:34px !important;
height:34px !important;
margin-bottom:7px !important;
font-size:16px !important;
}
/* 2) Move floating phone/mail/arrow buttons to the RIGHT */
.float-stack{
left:auto !important;
right:14px !important;
top:45% !important;
transform:translateY(-20%) !important;
z-index:8 !important;
}
.float{
width:34px !important;
height:34px !important;
font-size:13px !important;
}
/* keep the text area in its normal position */
.hero-copy{
padding-left:76px !important;
padding-right:24px !important;
}
}
@media(max-width:999px), (max-height:759px){
.float-stack{
left:auto !important;
right:12px !important;
}
}
/* ===== FINAL USER LAYOUT ===== */
/* Remove floating buttons completely */
.float-stack,
.float,
.wa,
.fg{
display:none !important;
}
/* Keep hero image area taller so services begin where the laser/press-brake image ends */
@media (min-width:1000px) and (min-height:760px){
main{
height:calc(100vh - 64px) !important;
display:grid !important;
grid-template-rows: 62% 38% !important;
overflow:hidden !important;
}
.hero{
min-height:0 !important;
height:100% !important;
}
.hero-inner{
height:100% !important;
min-height:0 !important;
align-items:center !important;
position:relative !important;
}
.hero-copy{
width:42% !important;
padding:18px 0 8px 54px !important;
}
.hero h1{
font-size:clamp(25px,2.1vw,34px) !important;
line-height:1.04 !important;
margin-bottom:8px !important;
}
.legal{
margin-bottom:10px !important;
}
.hero-actions{
margin-bottom:10px !important;
}
.benefits{
grid-template-columns:repeat(4,78px) !important;
gap:10px !important;
}
.benefits > div{
min-height:58px !important;
}
/* Slogan above the laser on the right */
.hero-slogan-right{
position:absolute !important;
right:8% !important;
top:8% !important;
z-index:7 !important;
text-align:right !important;
max-width:430px !important;
padding:10px 14px !important;
border-radius:8px !important;
background:rgba(0,0,0,.24) !important;
backdrop-filter:blur(2px) !important;
}
.hero-slogan-right span{
display:block !important;
color:#efb32b !important;
font-size:10px !important;
letter-spacing:3px !important;
margin-bottom:5px !important;
}
.hero-slogan-right strong{
display:block !important;
color:#fff !important;
font-size:14px !important;
line-height:1.35 !important;
font-weight:700 !important;
text-shadow:0 2px 6px rgba(0,0,0,.7) !important;
}
/* Services start exactly after hero */
.services{
margin-top:0 !important;
padding:0 0 6px !important;
height:100% !important;
overflow:hidden !important;
}
.services > .shell{
height:100% !important;
display:grid !important;
grid-template-rows: 27px 1fr 48px !important;
}
.section-title{
margin:0 !important;
height:27px !important;
}
.service-card{
height:120px !important;
min-height:120px !important;
}
.service-card img{
height:54px !important;
}
}
@media(max-width:999px), (max-height:759px){
.hero-slogan-right{
position:static !important;
margin:8px 16px 0 !important;
text-align:left !important;
}
}
/* ===== FINAL: RED BLOCK TO RIGHT UNDER SLOGAN + BIGGER BOTTOM BAR ===== */
@media (min-width:1000px) and (min-height:760px){
/* Move the entire hero text/buttons/benefits block to the RIGHT, under the slogan */
.hero-copy{
position:absolute !important;
left:auto !important;
right:7.5% !important;
top:17% !important;
width:34% !important;
max-width:500px !important;
padding:0 !important;
z-index:6 !important;
text-align:left !important;
}
.eyebrow{
font-size:8px !important;
letter-spacing:2.5px !important;
margin-bottom:5px !important;
}
.hero h1{
font-size:clamp(19px,1.55vw,27px) !important;
line-height:1.02 !important;
margin:0 0 6px !important;
max-width:430px !important;
}
.legal{
font-size:9px !important;
margin:0 0 7px !important;
}
.hero-actions{
gap:7px !important;
margin-bottom:8px !important;
}
.hero-actions .btn{
padding:7px 10px !important;
font-size:8.5px !important;
border-radius:5px !important;
}
.benefits{
grid-template-columns:repeat(4,62px) !important;
gap:8px !important;
max-width:none !important;
}
.benefits > div{
min-height:48px !important;
padding:3px 2px !important;
}
.benefits i{
width:24px !important;
height:24px !important;
margin-bottom:2px !important;
}
.benefits span{
font-size:7px !important;
line-height:1.12 !important;
}
/* Keep the slogan above the moved block */
.hero-slogan-right{
right:7.5% !important;
top:5% !important;
max-width:500px !important;
padding:6px 9px !important;
text-align:right !important;
z-index:8 !important;
}
.hero-slogan-right span{
font-size:8px !important;
letter-spacing:2.5px !important;
margin-bottom:3px !important;
}
.hero-slogan-right strong{
font-size:11px !important;
line-height:1.25 !important;
}
/* Slightly enlarge the bottom contact strip marked in green */
.services > .shell{
grid-template-rows:27px 1fr 62px !important;
}
.contact-bar{
height:60px !important;
min-height:60px !important;
margin-top:5px !important;
}
.contact-bar > div{
padding:7px 10px !important;
gap:8px !important;
font-size:10px !important;
}
.contact-bar i{
width:31px !important;
height:31px !important;
font-size:15px !important;
}
.contact-bar a,
.contact-bar button{
font-size:9px !important;
}
.footer-cta{
margin:6px !important;
padding:0 14px !important;
font-size:10px !important;
}
}
@media(max-width:999px), (max-height:759px){
.hero-copy{
position:static !important;
width:auto !important;
max-width:none !important;
padding:24px 16px 8px !important;
}
.hero-slogan-right{
position:static !important;
margin:8px 16px 0 !important;
text-align:left !important;
}
}
/* ===== FINAL NAVIGATION BUTTONS ===== */
.menu-buttons{
display:flex !important;
align-items:center;
gap:9px !important;
}
.menu-buttons .nav-btn{
appearance:none;
border:1px solid transparent;
background:transparent;
color:#f2f2f2;
font:inherit;
font-size:12px;
font-weight:700;
padding:8px 12px;
border-radius:7px;
cursor:pointer;
transition:.18s ease;
}
.menu-buttons .nav-btn:hover,
.menu-buttons .nav-btn.active{
color:#efb32b;
border-color:#74510e;
background:rgba(18,12,3,.68);
}
.nav-popovers{
position:fixed;
left:50%;
top:72px;
width:min(1040px,92vw);
transform:translateX(-50%);
z-index:95;
pointer-events:none;
}
.nav-popover{
display:none;
width:100%;
max-height:min(570px,calc(100vh - 95px));
overflow:auto;
border:1px solid #805a12;
border-radius:14px;
padding:18px;
background:
linear-gradient(135deg,rgba(14,10,4,.97),rgba(4,4,4,.98));
box-shadow:0 24px 60px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,210,102,.06);
backdrop-filter:blur(12px);
pointer-events:auto;
}
.nav-popover.open{display:block;}
.popover-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
border-bottom:1px solid rgba(130,91,16,.45);
padding-bottom:12px;
margin-bottom:14px;
}
.popover-head span{
color:#d69b20;
font-size:9px;
font-weight:800;
letter-spacing:2.4px;
}
.popover-head h3{
margin:5px 0 0;
font-size:22px;
}
.popover-close{
border:0;
background:transparent;
color:#aaa;
font-size:28px;
line-height:1;
cursor:pointer;
}
.popover-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:9px;
}
.services-list button,
.services-list a{
min-height:64px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border:1px solid #67490f;
border-radius:9px;
background:rgba(4,4,4,.58);
color:#efb32b;
font-size:11px;
font-weight:800;
text-decoration:none;
padding:10px;
cursor:pointer;
}
.services-list button:hover,
.services-list a:hover{
border-color:#d0921c;
background:rgba(31,20,4,.72);
}
.production-cards{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}
.production-cards article{
min-height:150px;
border:1px solid #64470f;
border-radius:10px;
padding:15px;
background:rgba(5,5,5,.58);
}
.production-cards b{
color:#efb32b;
font-size:23px;
display:block;
margin-bottom:8px;
}
.production-cards strong{
display:block;
color:#fff;
font-size:15px;
margin-bottom:7px;
}
.production-cards p,
.about-text p{
color:#d7d7d7;
font-size:12px;
line-height:1.55;
margin:0;
}
.about-text{
display:grid;
gap:12px;
}
.company-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:2px;
}
.company-tags span{
border:1px solid #67490f;
border-radius:999px;
padding:8px 11px;
color:#efb32b;
font-size:10px;
font-weight:800;
}
.contact-choice{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}
.contact-choice a{
border:1px solid #6c4c0f;
border-radius:10px;
background:rgba(5,5,5,.62);
padding:14px 16px;
text-decoration:none;
color:#fff;
}
.contact-choice a:hover{
border-color:#db9b1c;
}
.contact-choice small{
display:block;
color:#d79a1d;
margin-bottom:4px;
}
.contact-choice strong{
font-size:18px;
}
@media(max-width:900px){
.nav-popovers{top:68px;}
.popover-grid,
.production-cards,
.contact-choice{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
.menu-buttons{gap:3px !important;}
.menu-buttons .nav-btn{font-size:10px;padding:7px 7px;}
.nav-popovers{width:96vw;}
.popover-grid,
.production-cards,
.contact-choice{grid-template-columns:1fr;}
}
/* ===== REQUESTED POSITION / HEADER CLEANUP ===== */
/* Top phone numbers removed from markup; keep hidden in case an old copy remains */
.topbar .phones{
display:none !important;
}
/* Give freed header space to menu / WhatsApp buttons */
.nav-tools{
margin-left:auto !important;
}
/* Move slogan and full hero information block farther to the right edge */
@media (min-width:1000px) and (min-height:760px){
.hero-slogan-right{
right:1.4% !important;
top:4.5% !important;
max-width:470px !important;
}
.hero-copy{
left:auto !important;
right:1.4% !important;
top:16.5% !important;
width:34% !important;
max-width:500px !important;
padding:0 !important;
}
/* keep the hero block compact enough not to cover the laser */
.hero h1{
font-size:clamp(19px,1.48vw,26px) !important;
line-height:1.02 !important;
}
.hero-actions .btn{
padding:7px 9px !important;
font-size:8.3px !important;
}
.benefits{
grid-template-columns:repeat(4,60px) !important;
gap:7px !important;
}
}
/* Production panel accommodates the extra robot-welding card cleanly */
.production-cards{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.production-cards article:last-child{
grid-column:1 / -1;
min-height:110px;
}
@media(max-width:700px){
.production-cards{
grid-template-columns:1fr !important;
}
.production-cards article:last-child{
grid-column:auto;
}
}
/* ===== FINAL POSITION FIX ===== */
/* Блок заголовка и преимуществ — максимально вправо, почти к краю */
@media (min-width:1000px){
.hero-slogan-right{
right:0.6% !important;
left:auto !important;
top:4.5% !important;
max-width:455px !important;
text-align:right !important;
}
.hero-copy{
left:auto !important;
right:0.6% !important;
top:16.5% !important;
width:32.5% !important;
max-width:475px !important;
padding:0 !important;
text-align:left !important;
}
.hero h1{
font-size:clamp(18px,1.42vw,25px) !important;
line-height:1.01 !important;
}
.hero-actions{
gap:6px !important;
margin-bottom:7px !important;
}
.hero-actions .btn{
padding:6px 8px !important;
font-size:8px !important;
}
.benefits{
grid-template-columns:repeat(4,58px) !important;
gap:6px !important;
}
.benefits > div{
min-height:46px !important;
}
.benefits i{
width:23px !important;
height:23px !important;
}
.benefits span{
font-size:6.8px !important;
}
}
/* «Наши услуги» опущены примерно на 50 мм (~190px) ниже,
чтобы начинаться после окончания листогиба и лазера */
@media (min-width:1000px) and (min-height:760px){
body{
overflow-y:auto !important;
}
main{
height:auto !important;
min-height:calc(100vh - 64px) !important;
display:block !important;
overflow:visible !important;
}
.hero{
min-height:670px !important;
height:670px !important;
}
.hero-inner{
min-height:670px !important;
height:670px !important;
}
.services{
margin-top:190px !important;
padding-top:0 !important;
height:auto !important;
overflow:visible !important;
}
.services > .shell{
height:auto !important;
display:block !important;
}
.section-title{
margin:0 0 12px !important;
height:auto !important;
}
.service-grid{
min-height:0 !important;
}
.contact-bar{
margin-top:14px !important;
}
}
@media(max-width:999px){
.hero-slogan-right,
.hero-copy{
position:static !important;
width:auto !important;
max-width:none !important;
margin:0 14px !important;
padding:0 !important;
}
.services{
margin-top:24px !important;
}
}
/* ===== FINAL ONE-SCREEN FIX ===== */
/* Desktop: EVERYTHING stays on one screen */
@media (min-width:1000px) and (min-height:760px){
html, body{
height:100% !important;
}
body{
height:100vh !important;
overflow:hidden !important;
}
.topbar{
height:64px !important;
}
main{
height:calc(100vh - 64px) !important;
min-height:0 !important;
display:grid !important;
grid-template-rows:64% 36% !important;
overflow:hidden !important;
}
/* HERO ends just above services */
.hero{
height:100% !important;
min-height:0 !important;
overflow:hidden !important;
position:relative !important;
}
.hero-inner{
width:100% !important;
max-width:none !important;
height:100% !important;
min-height:0 !important;
position:static !important;
margin:0 !important;
}
/* SLOGAN: force it to the far right edge */
.hero-slogan-right{
position:absolute !important;
left:auto !important;
right:18px !important;
top:24px !important;
width:430px !important;
max-width:430px !important;
margin:0 !important;
padding:5px 8px !important;
text-align:right !important;
z-index:20 !important;
}
.hero-slogan-right span{
font-size:8px !important;
letter-spacing:2.2px !important;
margin-bottom:2px !important;
}
.hero-slogan-right strong{
font-size:10px !important;
line-height:1.2 !important;
}
/* TITLE + AI CALC + BUTTONS: force to the far right edge under slogan */
.hero-copy{
position:absolute !important;
left:auto !important;
right:18px !important;
top:86px !important;
width:430px !important;
max-width:430px !important;
margin:0 !important;
padding:0 !important;
z-index:19 !important;
text-align:left !important;
background:transparent !important;
}
.eyebrow{
font-size:7px !important;
letter-spacing:2px !important;
margin-bottom:3px !important;
}
.hero h1{
font-size:24px !important;
line-height:1.00 !important;
margin:0 0 5px !important;
max-width:430px !important;
}
.legal{
font-size:8px !important;
margin:0 0 6px !important;
}
.hero-actions{
display:flex !important;
gap:6px !important;
margin:0 0 7px !important;
}
.hero-actions .btn{
padding:6px 8px !important;
font-size:7.8px !important;
border-radius:5px !important;
}
.benefits{
display:grid !important;
grid-template-columns:repeat(4,54px) !important;
gap:6px !important;
max-width:none !important;
}
.benefits > div{
min-height:43px !important;
padding:2px 1px !important;
}
.benefits i{
width:22px !important;
height:22px !important;
margin:0 auto 2px !important;
}
.benefits span{
font-size:6.4px !important;
line-height:1.05 !important;
}
/* SERVICES: lower than before, but still inside the SAME screen */
.services{
height:100% !important;
min-height:0 !important;
margin:0 !important;
padding:4px 0 5px !important;
overflow:hidden !important;
background:rgba(5,4,2,.42) !important;
}
.services > .shell{
height:100% !important;
display:grid !important;
grid-template-rows:26px minmax(0,1fr) 56px !important;
overflow:hidden !important;
}
.section-title{
height:26px !important;
margin:0 !important;
}
.section-title h2{
font-size:13px !important;
letter-spacing:3.5px !important;
}
.section-title span{
width:105px !important;
}
.service-grid{
min-height:0 !important;
display:grid !important;
grid-template-columns:repeat(8,1fr) !important;
gap:5px !important;
align-items:stretch !important;
overflow:hidden !important;
}
.service-card{
height:auto !important;
min-height:0 !important;
padding:4px 5px 5px !important;
}
.service-card img{
height:58px !important;
object-fit:contain !important;
}
.service-card h3{
font-size:8.6px !important;
margin:3px 0 3px !important;
}
.service-card p{
font-size:7.1px !important;
line-height:1.18 !important;
}
.big-play{
width:34px !important;
height:34px !important;
margin-bottom:7px !important;
font-size:16px !important;
}
/* Bottom bar stays visible and slightly larger */
.contact-bar{
height:54px !important;
min-height:54px !important;
margin:2px 0 0 !important;
}
.contact-bar > div{
padding:6px 8px !important;
gap:7px !important;
font-size:9px !important;
}
.contact-bar i{
width:29px !important;
height:29px !important;
font-size:14px !important;
}
.contact-bar a,
.contact-bar button{
font-size:8.2px !important;
}
.footer-cta{
margin:5px !important;
padding:0 12px !important;
font-size:9px !important;
}
}
/* Tablet/mobile remain scrollable */
@media(max-width:999px), (max-height:759px){
body{
overflow:auto !important;
}
main{
height:auto !important;
display:block !important;
overflow:visible !important;
}
.hero{
height:auto !important;
min-height:620px !important;
}
.hero-slogan-right,
.hero-copy{
position:static !important;
width:auto !important;
max-width:none !important;
margin:0 14px !important;
padding:0 !important;
}
.services{
margin:0 !important;
height:auto !important;
overflow:visible !important;
}
}
/* ===== FINAL USER CHANGE ===== */
@media (min-width:1000px) and (min-height:760px){
/* 1) Make service buttons/cards two sizes smaller */
.service-grid{
gap:4px !important;
}
.service-card{
padding:3px 4px 4px !important;
border-radius:6px !important;
}
.service-card img{
height:46px !important;
}
.service-card h3{
font-size:7.7px !important;
margin:2px 0 2px !important;
}
.service-card p{
font-size:6.3px !important;
line-height:1.12 !important;
}
.big-play{
width:29px !important;
height:29px !important;
margin-bottom:5px !important;
font-size:14px !important;
}
/* Slightly compact the section title too */
.section-title h2{
font-size:12px !important;
letter-spacing:3px !important;
}
/* 2) Move slogan slightly LEFT and place it directly above the heading */
.hero-slogan-right{
right:78px !important;
top:28px !important;
width:430px !important;
max-width:430px !important;
text-align:left !important;
padding:4px 0 !important;
}
.hero-copy{
right:18px !important;
top:82px !important;
width:430px !important;
max-width:430px !important;
}
.hero-slogan-right span{
text-align:left !important;
}
.hero-slogan-right strong{
text-align:left !important;
}
}
@media(max-width:999px), (max-height:759px){
.hero-slogan-right{
text-align:left !important;
}
}
/* ===== FINAL: USER UPLOADED BACKGROUND / NO HEADING / NO SLOGAN ===== */
body,
.page,
.site-shell,
.hero,
.hero-stage,
.main-stage{
background-image:url("assets/iron-lazer-main-background.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
background-attachment:fixed !important;
}
/* Remove only hero title/copy and slogan. Other controls/content remain untouched. */
.hero-copy,
.hero-slogan-right{
display:none !important;
}
/* Keep the service section positioning and sizing from the previous approved version. */
/* ===== FINAL HERO RIGHT + FULL-IMAGE SERVICE CARDS ===== */
/* Restore heading and slogan */
.hero-copy,
.hero-slogan-right{
display:block !important;
}
/* Right-side compact hero panel */
@media (min-width:1000px) and (min-height:760px){
.hero-slogan-right{
position:absolute !important;
right:18px !important;
top:26px !important;
width:410px !important;
max-width:410px !important;
padding:8px 12px !important;
margin:0 !important;
border:1px solid rgba(210,150,24,.65) !important;
border-radius:10px !important;
background:rgba(5,5,5,.42) !important;
backdrop-filter:blur(4px) !important;
text-align:left !important;
z-index:20 !important;
}
.hero-slogan-right span{
display:block !important;
color:#efb32b !important;
font-size:8px !important;
letter-spacing:2.2px !important;
margin-bottom:3px !important;
}
.hero-slogan-right strong{
display:block !important;
color:#fff !important;
font-size:10px !important;
line-height:1.25 !important;
}
.hero-copy{
position:absolute !important;
right:18px !important;
left:auto !important;
top:92px !important;
width:410px !important;
max-width:410px !important;
margin:0 !important;
padding:10px 12px !important;
border:1px solid rgba(210,150,24,.65) !important;
border-radius:12px !important;
background:rgba(5,5,5,.40) !important;
backdrop-filter:blur(4px) !important;
z-index:19 !important;
}
.eyebrow{
font-size:7px !important;
letter-spacing:2px !important;
margin-bottom:3px !important;
}
.hero h1{
font-size:22px !important;
line-height:1.02 !important;
margin:0 0 5px !important;
max-width:390px !important;
}
.legal{
font-size:8px !important;
margin-bottom:7px !important;
}
/* AI calculator and application as compact button-like actions */
.hero-actions{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:7px !important;
margin:0 0 8px !important;
}
.hero-actions .btn{
min-height:34px !important;
padding:7px 8px !important;
font-size:8.2px !important;
border-radius:8px !important;
border:1px solid #8a6110 !important;
box-shadow:0 6px 18px rgba(0,0,0,.18) !important;
}
.hero-actions .gold{
background:linear-gradient(135deg,#ffd45d,#bd7b08) !important;
color:#111 !important;
}
.hero-actions .dark{
background:rgba(5,5,5,.64) !important;
color:#fff !important;
}
.benefits{
grid-template-columns:repeat(4,55px) !important;
gap:7px !important;
}
.benefits > div{
min-height:43px !important;
}
.benefits i{
width:22px !important;
height:22px !important;
}
.benefits span{
font-size:6.4px !important;
line-height:1.05 !important;
}
/* Services slightly smaller overall */
.service-grid{
gap:5px !important;
}
.service-card{
position:relative !important;
min-height:0 !important;
height:112px !important;
padding:0 !important;
overflow:hidden !important;
border-radius:8px !important;
border:1px solid #805a10 !important;
background:#050505 !important;
}
/* Images fill the whole card/button */
.service-card img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
border-radius:0 !important;
background:none !important;
filter:brightness(.72) saturate(.9) contrast(1.05) !important;
transition:transform .22s ease, filter .22s ease !important;
}
.service-card::after{
content:"" !important;
position:absolute !important;
inset:0 !important;
background:linear-gradient(180deg,rgba(0,0,0,.06) 10%,rgba(0,0,0,.18) 46%,rgba(0,0,0,.80) 100%) !important;
z-index:1 !important;
}
.service-card h3,
.service-card p,
.service-card .big-play{
position:relative !important;
z-index:2 !important;
}
.service-card h3{
position:absolute !important;
left:7px !important;
right:7px !important;
bottom:22px !important;
margin:0 !important;
color:#ffc23e !important;
font-size:8.3px !important;
text-shadow:0 2px 6px #000 !important;
}
.service-card p{
position:absolute !important;
left:7px !important;
right:7px !important;
bottom:6px !important;
margin:0 !important;
color:#f0f0f0 !important;
font-size:6.2px !important;
line-height:1.12 !important;
text-shadow:0 1px 5px #000 !important;
}
.service-card:hover img{
transform:scale(1.05) !important;
filter:brightness(.86) saturate(1.05) contrast(1.05) !important;
}
.video-service{
justify-content:flex-end !important;
align-items:stretch !important;
padding:0 !important;
}
.video-service .big-play{
position:absolute !important;
top:17px !important;
left:50% !important;
transform:translateX(-50%) !important;
width:32px !important;
height:32px !important;
margin:0 !important;
border-radius:50% !important;
background:rgba(0,0,0,.42) !important;
border:1px solid #d69a1b !important;
display:grid !important;
place-items:center !important;
color:#efb32b !important;
font-size:14px !important;
}
/* Keep one-screen layout */
main{
grid-template-rows:64% 36% !important;
}
}
/* mobile/tablet fallback */
@media(max-width:999px), (max-height:759px){
.hero-slogan-right,
.hero-copy{
display:block !important;
position:static !important;
width:auto !important;
max-width:none !important;
margin:8px 14px !important;
}
.service-card{
position:relative !important;
overflow:hidden !important;
}
}
/* ===== FINAL: SERVICES LOWER + HOVER SOUND ===== */
@media (min-width:1000px) and (min-height:760px){
/* Move "Наши услуги" slightly lower */
.services{
transform:translateY(18px) !important;
}
/* compensate so bottom content stays inside the same screen */
.services > .shell{
height:calc(100% - 18px) !important;
}
}
/* Smooth hover feedback for clickable elements */
button,
a,
.service-card,
.nav-btn{
transition:
transform .14s ease,
border-color .14s ease,
box-shadow .14s ease,
filter .14s ease !important;
}
button:hover,
a:hover,
.service-card:hover,
.nav-btn:hover{
transform:translateY(-1px);
}
/* ===== FINAL: SERVICES LOWER + BLINKING VIDEO BUTTON ===== */
@media (min-width:1000px) and (min-height:760px){
/* Lower the services a little more so they start just below the press brake */
.services{
transform:translateY(34px) !important;
}
.services > .shell{
height:calc(100% - 34px) !important;
}
}
/* Video button: distinct IRON LAZER identity */
.video-service{
position:relative !important;
overflow:hidden !important;
isolation:isolate !important;
border-color:#a97712 !important;
box-shadow:0 0 0 rgba(239,179,43,0) !important;
animation:videoCardBlink 2.2s ease-in-out infinite !important;
}
.video-service::before{
content:"" !important;
position:absolute !important;
inset:-35% !important;
z-index:0 !important;
background:
radial-gradient(circle, rgba(255,196,61,.20) 0%, rgba(255,196,61,.08) 22%, transparent 56%) !important;
opacity:.55 !important;
animation:videoGlowBreath 2.2s ease-in-out infinite !important;
pointer-events:none !important;
}
.video-service::after{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:1 !important;
background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.72)) !important;
pointer-events:none !important;
}
.video-il-icon,
.video-play-pulse,
.video-service h3,
.video-service p{
position:relative !important;
z-index:2 !important;
}
.video-il-icon{
position:absolute !important;
top:8px !important;
left:50% !important;
transform:translateX(-50%) !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:2px !important;
pointer-events:none !important;
}
.video-il-mark{
width:34px !important;
height:34px !important;
display:grid !important;
place-items:center !important;
border-radius:8px !important;
background:linear-gradient(145deg,#ffd45d,#b87908) !important;
color:#101010 !important;
font-size:15px !important;
font-style:italic !important;
font-weight:900 !important;
box-shadow:0 0 14px rgba(239,179,43,.28) !important;
}
.video-il-name{
color:#efb32b !important;
font-size:6.4px !important;
letter-spacing:1px !important;
font-weight:900 !important;
white-space:nowrap !important;
}
.video-play-pulse{
position:absolute !important;
top:45px !important;
left:50% !important;
transform:translateX(-50%) !important;
width:28px !important;
height:28px !important;
border:1px solid #d89b1b !important;
border-radius:50% !important;
display:grid !important;
place-items:center !important;
color:#ffbf2d !important;
background:rgba(0,0,0,.48) !important;
font-size:12px !important;
animation:playPulse 1.5s ease-in-out infinite !important;
box-shadow:0 0 12px rgba(239,179,43,.25) !important;
}
.video-service h3{
bottom:20px !important;
}
.video-service p{
bottom:5px !important;
}
/* Hover: bright gold glow */
.video-service:hover{
transform:translateY(-2px) scale(1.015) !important;
border-color:#ffd15b !important;
box-shadow:
0 0 12px rgba(255,199,67,.35),
0 0 28px rgba(255,174,26,.28),
inset 0 0 18px rgba(255,194,55,.08) !important;
filter:brightness(1.08) !important;
}
.video-service:hover .video-il-mark{
box-shadow:
0 0 10px rgba(255,210,100,.55),
0 0 26px rgba(255,175,28,.42) !important;
}
.video-service:hover .video-play-pulse{
color:#fff0b5 !important;
border-color:#ffe39a !important;
box-shadow:0 0 18px rgba(255,200,67,.55) !important;
}
@keyframes videoCardBlink{
0%,100%{
border-color:#8a6110;
box-shadow:0 0 0 rgba(239,179,43,0);
}
50%{
border-color:#e4a322;
box-shadow:0 0 15px rgba(239,179,43,.24);
}
}
@keyframes videoGlowBreath{
0%,100%{opacity:.22; transform:scale(.96);}
50%{opacity:.72; transform:scale(1.04);}
}
@keyframes playPulse{
0%,100%{transform:translateX(-50%) scale(.94); opacity:.76;}
50%{transform:translateX(-50%) scale(1.08); opacity:1;}
}
@media(max-width:999px), (max-height:759px){
.services{
transform:none !important;
}
.services > .shell{
height:auto !important;
}
}
/* ===== ABOUT COMPANY: DESCRIPTION + SMALL AUTOPLAY VIDEO ===== */
.about-company-layout{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
gap:18px;
align-items:center;
}
.about-company-copy{
display:grid;
gap:12px;
}
.about-company-video-wrap{
position:relative;
width:100%;
max-width:340px;
justify-self:end;
overflow:hidden;
border:1px solid #805a12;
border-radius:12px;
background:#050505;
box-shadow:0 12px 32px rgba(0,0,0,.36), 0 0 18px rgba(215,154,29,.10);
}
.about-company-video{
display:block;
width:100%;
aspect-ratio:16/9;
object-fit:cover;
background:#050505;
}
.about-video-badge{
position:absolute;
left:8px;
bottom:7px;
padding:4px 7px;
border:1px solid rgba(223,163,38,.65);
border-radius:6px;
background:rgba(0,0,0,.62);
color:#efb32b;
font-size:7px;
font-weight:900;
letter-spacing:1px;
pointer-events:none;
}
@media(max-width:760px){
.about-company-layout{
grid-template-columns:1fr;
}
.about-company-video-wrap{
max-width:none;
justify-self:stretch;
}
}
/* ===== CALLBACK BUTTON / BOLAT WHATSAPP ===== */
.callback-btn{
border:1px solid #8a6110 !important;
background:rgba(5,5,5,.62) !important;
color:#efb32b !important;
}
.callback-btn:hover{
border-color:#e0a21f !important;
box-shadow:0 0 16px rgba(224,162,31,.20) !important;
}
.callback-card{
width:min(460px,94vw) !important;
}
.callback-note{
color:#cfcfcf;
font-size:12px;
line-height:1.45;
margin:0 0 10px;
}
.callback-whatsapp{
display:block;
margin-top:12px;
text-align:center;
color:#efb32b;
text-decoration:none;
font-size:12px;
font-weight:800;
}
.callback-whatsapp:hover{
text-decoration:underline;
}
@media(min-width:1000px) and (min-height:760px){
.hero-actions{
grid-template-columns:1fr 1fr !important;
grid-auto-rows:auto !important;
}
.callback-btn{
grid-column:1 / -1 !important;
min-height:30px !important;
font-size:7.8px !important;
}
}
/* ===== HOMEPAGE CALCULATORS ===== */
.service-link-card{text-decoration:none;color:inherit;display:block;cursor:pointer}
.service-card-placeholder{height:190px;display:flex;align-items:center;justify-content:center;font-size:72px;background:radial-gradient(circle at 50% 30%,rgba(225,165,32,.28),rgba(10,8,5,.96));border-bottom:1px solid rgba(225,165,32,.25)}
.mangal-card .service-card-placeholder{font-size:64px}
.quick-calculators{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0 8px}
.quick-calc-box{padding:26px;border:1px solid rgba(225,165,32,.35);background:linear-gradient(135deg,rgba(225,165,32,.08),rgba(10,8,5,.94));border-radius:16px}
.quick-calc-box span{font-size:11px;letter-spacing:.16em;color:#e1a520;font-weight:900}
.quick-calc-box h3{font-size:24px;margin:8px 0 10px;color:#fff}
.quick-calc-box p{color:#cfc8ba;line-height:1.55;margin-bottom:18px}
@media(max-width:760px){.quick-calculators{grid-template-columns:1fr}.service-card-placeholder{height:150px}}
/* ===== COMPACT HOMEPAGE FIX: CALCULATOR + MANGAL ===== */
.service-mini-actions{
display:flex !important;
justify-content:flex-end !important;
gap:7px !important;
margin:0 0 6px auto !important;
max-width:360px !important;
height:34px !important;
}
.service-mini-btn{
flex:1 1 0 !important;
min-width:0 !important;
height:34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
padding:4px 8px !important;
border:1px solid rgba(225,165,32,.55) !important;
border-radius:7px !important;
background:rgba(5,5,5,.72) !important;
color:#fff !important;
text-decoration:none !important;
box-shadow:0 0 10px rgba(225,165,32,.08) !important;
}
.service-mini-btn:hover{
border-color:#efb32b !important;
box-shadow:0 0 14px rgba(239,179,43,.22) !important;
transform:translateY(-1px) !important;
}
.service-mini-btn .mini-icon{
color:#efb32b !important;
font-size:15px !important;
line-height:1 !important;
}
.service-mini-btn span:last-child{
min-width:0 !important;
display:flex !important;
flex-direction:column !important;
line-height:1.02 !important;
}
.service-mini-btn b{
color:#efb32b !important;
font-size:7.7px !important;
letter-spacing:.4px !important;
white-space:nowrap !important;
}
.service-mini-btn small{
color:#ddd !important;
font-size:6.3px !important;
white-space:nowrap !important;
}
/* Hide old oversized homepage promo blocks/cards if browser keeps old cached markup */
.quick-calculators,
.service-card.service-link-card{
display:none !important;
}
/* Desktop one-screen layout: reserve just a thin row for mini buttons */
@media (min-width:1000px) and (min-height:760px){
.services > .shell{
grid-template-rows:26px 34px minmax(0,1fr) 54px !important;
}
.service-grid{
min-height:0 !important;
gap:4px !important;
}
.service-card{
min-width:0 !important;
}
}
/* Smaller laptop screens */
@media (min-width:1000px) and (max-height:850px){
.service-mini-actions{
height:30px !important;
margin-bottom:4px !important;
}
.service-mini-btn{
height:30px !important;
padding:3px 7px !important;
}
.services > .shell{
grid-template-rows:24px 30px minmax(0,1fr) 50px !important;
}
}
/* Mobile/tablet: mini buttons stack and stay visible */
@media(max-width:999px){
.service-mini-actions{
max-width:none !important;
width:100% !important;
height:auto !important;
margin:8px 0 10px !important;
}
.service-mini-btn{
min-height:38px !important;
height:auto !important;
}
}
/* ===== SERVICE BUTTONS: 9 COMPACT CARDS + TEXT VIDEO LINK ===== */
/* Text-only video link after Contacts in top navigation */
.nav-works-link{
display:inline-flex !important;
align-items:center !important;
color:#d9d4ca !important;
text-decoration:none !important;
font-size:10px !important;
font-weight:700 !important;
letter-spacing:.2px !important;
white-space:nowrap !important;
padding:5px 2px !important;
}
.nav-works-link:hover{
color:#efb32b !important;
}
/* New calculator / mangal buttons look like the existing service cards */
.extra-service-card{
text-decoration:none !important;
color:inherit !important;
}
.extra-service-visual{
width:100% !important;
height:48px !important;
display:grid !important;
place-items:center !important;
font-size:26px !important;
background:
radial-gradient(circle at 50% 35%,rgba(239,179,43,.24),rgba(6,5,3,.98) 68%) !important;
border-bottom:1px solid rgba(190,132,18,.28) !important;
}
.calc-visual{color:#efb32b !important;font-weight:900 !important;}
.mangal-visual{font-size:23px !important;}
/* "Видео наших работ" is now just text after contacts */
.after-contacts-works{
display:flex !important;
justify-content:flex-end !important;
align-items:center !important;
height:18px !important;
margin-top:2px !important;
padding-right:4px !important;
}
.after-contacts-works a{
color:#d6d0c5 !important;
text-decoration:none !important;
font-size:7.5px !important;
font-weight:800 !important;
letter-spacing:.6px !important;
text-transform:uppercase !important;
}
.after-contacts-works a:hover{
color:#efb32b !important;
}
/* Hide old compact mini row / old video card if an old browser fragment remains */
.service-mini-actions,
.video-service{
display:none !important;
}
/* Desktop: all service buttons slightly smaller, 9 cards across.
This keeps calculator + mangal at the far right after the original buttons. */
@media (min-width:1000px) and (min-height:760px){
.services > .shell{
grid-template-rows:24px minmax(0,1fr) 52px 18px !important;
}
.service-grid{
grid-template-columns:repeat(9,minmax(0,1fr)) !important;
gap:4px !important;
align-items:stretch !important;
min-height:0 !important;
}
.service-card{
height:102px !important;
min-height:0 !important;
padding:0 !important;
border-radius:7px !important;
}
.service-card img{
height:52px !important;
object-fit:cover !important;
}
.service-card h3{
left:5px !important;
right:5px !important;
bottom:21px !important;
font-size:7.4px !important;
}
.service-card p{
left:5px !important;
right:5px !important;
bottom:5px !important;
font-size:5.7px !important;
line-height:1.08 !important;
}
.extra-service-visual{
height:52px !important;
}
.contact-bar{
height:50px !important;
min-height:50px !important;
}
.contact-bar > div{
padding:5px 7px !important;
font-size:8.3px !important;
}
.contact-bar i{
width:26px !important;
height:26px !important;
font-size:13px !important;
}
.footer-cta{
font-size:8.3px !important;
padding:0 10px !important;
}
}
/* Slightly smaller top menu buttons too, but not excessively */
@media (min-width:1000px){
.nav-btn{
padding:6px 10px !important;
font-size:9px !important;
}
.menu-buttons{
gap:7px !important;
}
}
/* Responsive fallback */
@media(max-width:999px){
.service-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.nav-works-link{
font-size:12px !important;
}
.after-contacts-works{
justify-content:center !important;
margin:8px 0 !important;
height:auto !important;
}
.after-contacts-works a{
font-size:10px !important;
}
}
/* ===== FINAL DESKTOP SERVICE ALIGNMENT ===== */
@media (min-width:1000px) and (min-height:700px){
.services .shell{
width:100% !important;
max-width:none !important;
padding-left:8px !important;
padding-right:8px !important;
margin-left:0 !important;
margin-right:0 !important;
}
.services .section-title{
justify-content:flex-start !important;
text-align:left !important;
padding-left:0 !important;
}
.service-grid{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
justify-content:start !important;
grid-template-columns:repeat(9,minmax(0,1fr)) !important;
gap:3px !important;
}
/* Slight reduction only, enough for all 9 cards */
.service-card{
height:98px !important;
border-radius:7px !important;
}
.service-card img,
.extra-service-visual{
height:49px !important;
}
.service-card h3{
font-size:7px !important;
line-height:1.02 !important;
left:4px !important;
right:4px !important;
bottom:20px !important;
}
.service-card p{
font-size:5.35px !important;
line-height:1.04 !important;
left:4px !important;
right:4px !important;
bottom:4px !important;
}
.mangal-service-card h3{
font-size:6.7px !important;
}
}
/* ===== COMPLETE MOBILE RESPONSIVE FIX ===== */
@media (max-width:999px){
html,body{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
overflow-x:hidden !important;
}
body{
min-height:100svh !important;
}
.page,
.site-shell,
main,
.hero,
.services{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
}
/* Background behaves naturally on phone, no fixed attachment */
body,
.page,
.site-shell,
.hero,
.hero-stage,
.main-stage{
background-attachment:scroll !important;
background-position:center top !important;
}
/* Header */
.topbar{
position:relative !important;
height:auto !important;
min-height:54px !important;
padding:8px 10px !important;
display:grid !important;
grid-template-columns:1fr auto !important;
gap:8px !important;
align-items:center !important;
}
.brand,
.logo{
min-width:0 !important;
font-size:17px !important;
}
.lang-switch{
position:static !important;
justify-self:end !important;
transform:none !important;
}
.menu-buttons{
grid-column:1 / -1 !important;
width:100% !important;
display:flex !important;
flex-wrap:wrap !important;
justify-content:flex-start !important;
gap:5px !important;
margin:4px 0 0 !important;
}
.nav-btn,
.nav-works-link{
flex:0 0 auto !important;
padding:6px 8px !important;
min-height:30px !important;
font-size:9px !important;
border-radius:7px !important;
}
/* Hero becomes a normal vertical section */
.hero{
position:relative !important;
min-height:520px !important;
height:auto !important;
padding:12px 12px 20px !important;
display:flex !important;
flex-direction:column !important;
justify-content:flex-end !important;
overflow:hidden !important;
}
.hero-copy,
.hero-slogan-right{
position:static !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:100% !important;
max-width:100% !important;
margin:8px 0 !important;
padding:11px !important;
text-align:left !important;
transform:none !important;
}
.hero-copy h1,
.hero h1{
font-size:25px !important;
line-height:1.04 !important;
max-width:100% !important;
}
.hero-copy .legal,
.hero-copy p{
font-size:10px !important;
line-height:1.35 !important;
}
.hero-actions{
width:100% !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:7px !important;
}
.hero-actions .btn,
.callback-btn{
width:100% !important;
min-height:38px !important;
padding:8px !important;
font-size:9px !important;
}
.benefits{
width:100% !important;
grid-template-columns:repeat(2,1fr) !important;
gap:6px !important;
}
/* Services under hero, no one-screen constraint on phone */
main{
display:block !important;
height:auto !important;
min-height:0 !important;
}
.services{
position:relative !important;
height:auto !important;
min-height:0 !important;
transform:none !important;
padding:12px 10px 24px !important;
}
.services .shell{
width:100% !important;
max-width:100% !important;
height:auto !important;
min-height:0 !important;
padding:0 !important;
display:block !important;
}
.section-title{
margin:0 0 10px !important;
}
.service-grid{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
height:auto !important;
min-height:0 !important;
}
.service-card{
position:relative !important;
width:100% !important;
height:126px !important;
min-height:126px !important;
overflow:hidden !important;
border-radius:10px !important;
transform:none !important;
}
.service-card img,
.extra-service-visual{
height:70px !important;
}
.service-card h3{
font-size:9px !important;
left:7px !important;
right:7px !important;
bottom:27px !important;
}
.service-card p{
font-size:7px !important;
left:7px !important;
right:7px !important;
bottom:7px !important;
line-height:1.12 !important;
}
.contact-bar{
width:100% !important;
height:auto !important;
min-height:0 !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:6px !important;
margin-top:10px !important;
}
.contact-bar > div,
.contact-bar > a{
min-width:0 !important;
min-height:46px !important;
padding:7px !important;
font-size:8px !important;
}
.footer-cta{
grid-column:1 / -1 !important;
min-height:42px !important;
}
.after-contacts-works{
margin:10px 0 0 !important;
justify-content:center !important;
}
/* popovers/modals fit viewport */
.nav-popover,
.modal,
.modal-card{
max-width:calc(100vw - 20px) !important;
}
.nav-popover{
position:fixed !important;
left:10px !important;
right:10px !important;
top:70px !important;
width:auto !important;
max-height:calc(100svh - 90px) !important;
overflow:auto !important;
}
.modal-card{
width:calc(100vw - 24px) !important;
max-height:calc(100svh - 30px) !important;
overflow:auto !important;
margin:auto !important;
}
}
@media (max-width:520px){
.hero-actions{
grid-template-columns:1fr !important;
}
.service-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.contact-bar{
grid-template-columns:1fr !important;
}
.service-card{
height:120px !important;
min-height:120px !important;
}
}
@media (max-width:360px){
.service-grid{
grid-template-columns:1fr !important;
}
}
/* =========================================================
FINAL REQUEST: CENTER TITLE / HERO BUTTONS / MANGAL / FOOTER
========================================================= */
/* "НАШИ УСЛУГИ" — only the title, centered */
.services-title-only{
width:100% !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
text-align:center !important;
padding:0 !important;
}
.services-title-only h2{
margin:0 auto !important;
text-align:center !important;
font-size:14px !important;
letter-spacing:2.1px !important;
}
.services-title-only span{
display:none !important;
}
/* 4 main action buttons: larger and balanced */
.hero-actions{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:8px !important;
width:min(820px,100%) !important;
}
.hero-actions .btn{
min-height:42px !important;
padding:10px 12px !important;
font-size:9.4px !important;
letter-spacing:.45px !important;
border-radius:9px !important;
white-space:nowrap !important;
}
.hero-calc-btn{
border:1px solid #b78216 !important;
background:
linear-gradient(135deg,rgba(239,179,43,.16),rgba(8,7,5,.88)) !important;
color:#ffd366 !important;
box-shadow:0 0 16px rgba(225,165,32,.12) !important;
}
.hero-calc-btn:hover{
border-color:#ffd366 !important;
box-shadow:0 0 22px rgba(225,165,32,.24) !important;
}
/* Remove the tiny graphic icons under hero, keep benefit text */
.benefits i{
display:none !important;
}
.benefits > div{
padding-left:0 !important;
justify-content:center !important;
text-align:center !important;
}
/* Service image format smaller so full drawing is visible, style unchanged */
.service-card img{
width:92% !important;
height:46px !important;
margin:2px auto 0 !important;
display:block !important;
object-fit:contain !important;
object-position:center !important;
transform:none !important;
}
/* Mangal card: premium dark/gold brazier with animated fire */
.mangal-service-card{
position:relative !important;
overflow:hidden !important;
background:
radial-gradient(circle at 50% 24%,rgba(255,176,34,.12),transparent 38%),
linear-gradient(180deg,#17120a 0%,#070605 78%) !important;
border-color:#9c6d12 !important;
}
.mangal-service-card p{
display:none !important;
}
.mangal-service-card h3{
bottom:8px !important;
color:#ffd46c !important;
font-size:7.2px !important;
text-shadow:0 0 10px rgba(255,182,36,.20) !important;
}
.mangal-art{
position:absolute !important;
left:50% !important;
top:4px !important;
width:76px !important;
height:61px !important;
transform:translateX(-50%) scale(.82) !important;
transform-origin:top center !important;
}
.brazier-bowl{
position:absolute !important;
left:9px !important;
bottom:13px !important;
width:58px !important;
height:18px !important;
border:2px solid #d09a27 !important;
border-top-color:#f0bf54 !important;
background:linear-gradient(180deg,#46310f,#151009) !important;
clip-path:polygon(0 0,100% 0,88% 100%,12% 100%) !important;
box-shadow:0 0 10px rgba(231,165,38,.18) !important;
}
.brazier-bowl span{
position:relative !important;
display:inline-block !important;
width:3px !important;
height:3px !important;
border-radius:50% !important;
background:#dba735 !important;
margin:7px 4px 0 !important;
}
.brazier-legs i{
position:absolute !important;
bottom:0 !important;
width:3px !important;
height:15px !important;
background:linear-gradient(#c89527,#5e4210) !important;
transform-origin:top !important;
}
.brazier-legs i:first-child{left:20px !important;transform:rotate(8deg) !important;}
.brazier-legs i:last-child{right:20px !important;transform:rotate(-8deg) !important;}
.flame{
position:absolute !important;
bottom:29px !important;
border-radius:55% 55% 45% 45% !important;
transform-origin:50% 100% !important;
filter:drop-shadow(0 0 7px rgba(255,111,0,.58)) !important;
}
.flame-a{
left:28px !important;
width:18px !important;
height:29px !important;
background:linear-gradient(180deg,#fff0a3 0%,#ffb521 42%,#ff5a00 100%) !important;
animation:mangalFlameA .72s ease-in-out infinite alternate !important;
}
.flame-b{
left:14px !important;
width:16px !important;
height:22px !important;
background:linear-gradient(180deg,#ffe377,#ff8a00 65%,#e53b00 100%) !important;
animation:mangalFlameB .58s ease-in-out infinite alternate !important;
}
.flame-c{
right:13px !important;
width:15px !important;
height:24px !important;
background:linear-gradient(180deg,#ffe58c,#ff9c13 55%,#f04a00 100%) !important;
animation:mangalFlameC .66s ease-in-out infinite alternate !important;
}
@keyframes mangalFlameA{
from{transform:scaleY(.86) rotate(-4deg);opacity:.82}
to{transform:scaleY(1.08) rotate(4deg);opacity:1}
}
@keyframes mangalFlameB{
from{transform:scaleY(.90) rotate(5deg);opacity:.75}
to{transform:scaleY(1.10) rotate(-6deg);opacity:1}
}
@keyframes mangalFlameC{
from{transform:scaleY(.86) rotate(-6deg);opacity:.80}
to{transform:scaleY(1.06) rotate(5deg);opacity:1}
}
/* Service row after moving calculator to hero: 8 cards fit comfortably */
@media (min-width:1000px) and (min-height:700px){
.service-grid{
grid-template-columns:repeat(8,minmax(0,1fr)) !important;
gap:5px !important;
}
.service-card{
height:100px !important;
}
}
/* Remove bottom CTA since request button already exists above */
#openQuoteFooter{
display:none !important;
}
/* Bottom contact area: larger than before, without the giant CTA */
.contact-bar{
grid-template-columns:repeat(6,minmax(0,1fr)) !important;
gap:5px !important;
min-height:62px !important;
height:62px !important;
}
.contact-bar > div{
min-height:60px !important;
padding:8px 9px !important;
font-size:9px !important;
line-height:1.25 !important;
}
.contact-bar > div i{
width:30px !important;
height:30px !important;
font-size:14px !important;
}
/* ---------------- MOBILE ---------------- */
@media(max-width:999px){
.services-title-only h2{
font-size:16px !important;
}
.hero-actions{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
width:100% !important;
}
.hero-actions .btn{
min-height:42px !important;
font-size:9px !important;
}
.service-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.service-card img{
width:88% !important;
height:64px !important;
}
.mangal-art{
top:7px !important;
transform:translateX(-50%) scale(1.02) !important;
}
.mangal-service-card h3{
bottom:10px !important;
font-size:9px !important;
}
.contact-bar{
height:auto !important;
min-height:0 !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.contact-bar > div{
min-height:54px !important;
font-size:9px !important;
}
}
@media(max-width:520px){
.hero-actions{
grid-template-columns:1fr 1fr !important;
}
.hero-actions .btn{
white-space:normal !important;
line-height:1.15 !important;
}
.contact-bar{
grid-template-columns:1fr !important;
}
}
/* =========================================================
PC + MOBILE POLISH
========================================================= */
/* Mobile slogan hidden on PC */
.mobile-hero-slogan{
display:none;
}
/* ---------- DESKTOP / PC ---------- */
@media (min-width:1000px){
/* The four benefit phrases are removed ONLY on PC.
Mobile keeps them. */
.benefits{
display:none !important;
}
/* Center only the "НАШИ УСЛУГИ" text on the entire PC width */
.services-title-only{
width:100% !important;
max-width:none !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
text-align:center !important;
margin:0 auto !important;
padding:0 !important;
}
.services-title-only h2{
width:auto !important;
margin:0 auto !important;
text-align:center !important;
transform:none !important;
left:auto !important;
right:auto !important;
}
/* Keep PC layout stable after removing benefits */
.hero-copy{
justify-content:center !important;
}
/* Make calculator button look like a physical calculator */
.hero-calc-btn{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
background:
linear-gradient(145deg,#1b1812 0%,#0a0907 55%,#17130d 100%) !important;
border:1px solid #c68d19 !important;
box-shadow:
inset 0 1px 0 rgba(255,227,153,.12),
inset 0 -1px 0 rgba(0,0,0,.75),
0 6px 18px rgba(0,0,0,.28),
0 0 14px rgba(211,151,27,.11) !important;
color:#f5c958 !important;
}
.hero-calc-btn:hover{
border-color:#ffd76c !important;
box-shadow:
inset 0 1px 0 rgba(255,227,153,.18),
0 8px 22px rgba(0,0,0,.35),
0 0 20px rgba(225,165,32,.22) !important;
}
/* Keep service title centered even with previous left-alignment rules */
.services .section-title{
justify-content:center !important;
text-align:center !important;
padding-left:0 !important;
}
}
/* Realistic small calculator icon */
.calc-mini-icon{
position:relative !important;
display:inline-block !important;
width:23px !important;
height:28px !important;
flex:0 0 23px !important;
border:1px solid #d2a33a !important;
border-radius:4px !important;
background:linear-gradient(180deg,#2a251b,#0c0b08) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 0 8px rgba(225,165,32,.12) !important;
}
.calc-mini-icon i{
position:absolute !important;
display:block !important;
}
.calc-screen{
left:3px !important;
right:3px !important;
top:3px !important;
height:6px !important;
border:1px solid rgba(240,195,85,.45) !important;
border-radius:2px !important;
background:linear-gradient(180deg,#6a653f,#33311e) !important;
box-shadow:inset 0 0 4px rgba(0,0,0,.45) !important;
}
.calc-key{
width:4px !important;
height:4px !important;
border-radius:1px !important;
background:#b98722 !important;
box-shadow:0 0 2px rgba(255,210,80,.18) !important;
}
.k1{left:4px!important;top:13px!important}.k2{left:10px!important;top:13px!important}.k3{left:16px!important;top:13px!important}
.k4{left:4px!important;top:20px!important}.k5{left:10px!important;top:20px!important}.k6{left:16px!important;top:20px!important}
/* ---------- REALISTIC FIRE / MANGAL ---------- */
.mangal-art{
overflow:visible !important;
}
.fire-glow{
position:absolute !important;
left:13px !important;
right:13px !important;
bottom:23px !important;
height:29px !important;
border-radius:50% !important;
background:radial-gradient(ellipse at center,
rgba(255,227,119,.55) 0%,
rgba(255,118,15,.28) 38%,
rgba(255,67,0,.10) 64%,
transparent 76%) !important;
filter:blur(4px) !important;
animation:fireGlowPulse .8s ease-in-out infinite alternate !important;
}
.flame{
mix-blend-mode:screen !important;
border-radius:58% 42% 62% 38% / 72% 68% 32% 28% !important;
box-shadow:
0 0 7px rgba(255,166,28,.32),
0 0 13px rgba(255,80,0,.20) !important;
}
.flame-a{
background:
radial-gradient(circle at 50% 70%,#fff8bf 0 14%,#ffd840 15% 29%,#ff8a00 30% 62%,#f23c00 63% 100%) !important;
}
.flame-b,
.flame-c{
background:
radial-gradient(circle at 50% 72%,#ffe99b 0 12%,#ffc326 13% 30%,#ff7a00 31% 66%,#da2d00 67% 100%) !important;
}
.embers{
position:absolute !important;
left:7px !important;
right:7px !important;
bottom:2px !important;
height:6px !important;
border-radius:50% !important;
background:
radial-gradient(circle at 15% 50%,#ffbd35 0 2px,transparent 3px),
radial-gradient(circle at 35% 60%,#ff6a00 0 2px,transparent 3px),
radial-gradient(circle at 58% 45%,#ffd156 0 2px,transparent 3px),
radial-gradient(circle at 78% 55%,#ff7a00 0 2px,transparent 3px),
linear-gradient(180deg,#4c2308,#140b05) !important;
box-shadow:0 0 8px rgba(255,105,0,.32) !important;
}
.spark{
position:absolute !important;
width:2px !important;
height:2px !important;
border-radius:50% !important;
background:#ffd76a !important;
box-shadow:0 0 5px #ff8c18 !important;
opacity:0 !important;
}
.s1{left:24px!important;bottom:48px!important;animation:sparkOne 1.15s ease-out infinite!important}
.s2{left:45px!important;bottom:43px!important;animation:sparkTwo 1.35s .25s ease-out infinite!important}
.s3{left:35px!important;bottom:51px!important;animation:sparkThree 1.05s .5s ease-out infinite!important}
@keyframes fireGlowPulse{
from{opacity:.72;transform:scale(.94)}
to{opacity:1;transform:scale(1.08)}
}
@keyframes sparkOne{
0%{opacity:0;transform:translate(0,0) scale(.7)}
18%{opacity:1}
100%{opacity:0;transform:translate(-7px,-20px) scale(.2)}
}
@keyframes sparkTwo{
0%{opacity:0;transform:translate(0,0) scale(.7)}
20%{opacity:1}
100%{opacity:0;transform:translate(9px,-24px) scale(.15)}
}
@keyframes sparkThree{
0%{opacity:0;transform:translate(0,0) scale(.7)}
22%{opacity:1}
100%{opacity:0;transform:translate(2px,-26px) scale(.1)}
}
/* ---------- MOBILE ---------- */
@media (max-width:999px){
/* Put menu immediately after logo, in two rows left-to-right */
.topbar .nav{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:7px !important;
}
.brand{
order:1 !important;
width:100% !important;
}
.menu-buttons{
order:2 !important;
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:5px !important;
margin:0 !important;
padding:0 !important;
}
.menu-buttons .nav-btn,
.menu-buttons .nav-works-link{
width:100% !important;
min-width:0 !important;
height:34px !important;
min-height:34px !important;
padding:6px 5px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
font-size:8.5px !important;
line-height:1.05 !important;
white-space:normal !important;
border:1px solid rgba(213,155,30,.32) !important;
border-radius:7px !important;
background:rgba(5,5,5,.52) !important;
}
/* second row: two buttons centered across the width */
.menu-buttons > :nth-child(4){
grid-column:1 / 2 !important;
}
.menu-buttons > :nth-child(5){
grid-column:2 / 4 !important;
}
.nav-tools{
order:3 !important;
width:100% !important;
}
/* Keep benefit phrases on mobile */
.benefits{
display:grid !important;
}
/* Hide the old right slogan and show the higher slogan right after H1 */
.hero-slogan-right{
display:none !important;
}
.mobile-hero-slogan{
display:block !important;
width:100% !important;
margin:7px 0 9px !important;
padding:0 !important;
text-align:left !important;
}
.mobile-hero-slogan span{
display:block !important;
color:#d49b21 !important;
font-size:8px !important;
font-weight:900 !important;
letter-spacing:1.6px !important;
margin-bottom:3px !important;
}
.mobile-hero-slogan strong{
display:block !important;
color:#eee7da !important;
font-size:10px !important;
line-height:1.25 !important;
font-weight:700 !important;
}
/* Lift hero content visually higher */
.hero{
justify-content:flex-start !important;
padding-top:18px !important;
}
.hero-copy{
margin-top:0 !important;
}
/* Calculator stays realistic on mobile too */
.hero-calc-btn{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:7px !important;
background:linear-gradient(145deg,#1b1812,#090806) !important;
border:1px solid #b98418 !important;
color:#f4c958 !important;
box-shadow:
inset 0 1px 0 rgba(255,228,158,.10),
0 5px 12px rgba(0,0,0,.25) !important;
}
.calc-mini-icon{
transform:scale(.88) !important;
transform-origin:center !important;
}
}
/* Very narrow phones: keep the two-row menu readable */
@media (max-width:390px){
.menu-buttons{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.menu-buttons > :nth-child(4),
.menu-buttons > :nth-child(5){
grid-column:auto !important;
}
.menu-buttons > :nth-child(5){
grid-column:1 / -1 !important;
}
}
/* =========================================================
MOBILE MENU + 2x2 GOLD ACTION GRID + PC SERVICE CARD HEIGHT
========================================================= */
/* ===== Shared 4 main action buttons: gold glow on PC and mobile ===== */
.hero-actions{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:9px !important;
width:min(560px,100%) !important;
}
.hero-actions .hero-main-action{
min-height:48px !important;
padding:11px 13px !important;
border:1px solid rgba(226,166,37,.78) !important;
border-radius:10px !important;
color:#ffd76a !important;
background:
linear-gradient(145deg,rgba(39,29,12,.92),rgba(8,7,5,.96)) !important;
box-shadow:
inset 0 1px 0 rgba(255,231,165,.10),
0 0 0 1px rgba(255,204,83,.03),
0 0 18px rgba(225,165,32,.18) !important;
text-shadow:0 0 10px rgba(255,205,78,.18) !important;
transition:.2s ease !important;
}
.hero-actions .hero-main-action:hover{
border-color:#ffd76a !important;
color:#fff0b0 !important;
box-shadow:
inset 0 1px 0 rgba(255,242,198,.16),
0 0 22px rgba(225,165,32,.34),
0 0 44px rgba(225,165,32,.12) !important;
transform:translateY(-1px) !important;
}
/* Keep physical calculator look while also matching the gold action grid */
.hero-calc-btn{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:9px !important;
}
.calc-screen{
overflow:hidden !important;
}
.calc-screen b{
display:block !important;
padding:0 1px !important;
color:#211f11 !important;
font-size:4px !important;
line-height:5px !important;
font-family:monospace !important;
text-align:right !important;
letter-spacing:.2px !important;
}
/* ===== PC only ===== */
@media (min-width:1000px){
/* "НАШИ УСЛУГИ" centered */
.services-title-only,
.services .section-title{
width:100% !important;
justify-content:center !important;
text-align:center !important;
padding:0 !important;
}
.services-title-only h2{
margin:0 auto !important;
text-align:center !important;
}
/* Make service cards taller only, keep same width */
.service-card{
height:122px !important;
min-height:122px !important;
}
/* Increase image area vertically without stretching style */
.service-card img{
width:94% !important;
height:68px !important;
margin:3px auto 0 !important;
object-fit:contain !important;
object-position:center !important;
transform:none !important;
}
.extra-service-visual{
height:68px !important;
}
.service-card h3{
bottom:24px !important;
font-size:7.6px !important;
}
.service-card p{
bottom:6px !important;
font-size:5.8px !important;
}
/* Mangal card gets the same taller footprint */
.mangal-art{
top:5px !important;
transform:translateX(-50%) scale(.98) !important;
}
.mangal-service-card h3{
bottom:10px !important;
font-size:7.5px !important;
}
}
/* ===== MOBILE ONLY ===== */
@media (max-width:999px){
/* Hide mobile slogan completely; PC slogan remains */
.mobile-hero-slogan{
display:none !important;
}
/* Top navigation directly after logo:
5 items left-to-right over exactly two rows */
.topbar .nav{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:8px !important;
}
.brand{
order:1 !important;
width:100% !important;
margin:0 !important;
}
.menu-buttons{
order:2 !important;
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
grid-auto-rows:42px !important;
gap:7px !important;
margin:0 !important;
padding:0 !important;
}
.menu-buttons .nav-btn,
.menu-buttons .nav-works-link{
width:100% !important;
min-width:0 !important;
height:42px !important;
min-height:42px !important;
padding:7px 6px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
font-size:10.5px !important;
font-weight:800 !important;
line-height:1.05 !important;
white-space:normal !important;
border:1px solid rgba(222,164,38,.45) !important;
border-radius:9px !important;
background:
linear-gradient(180deg,rgba(24,19,11,.84),rgba(7,6,4,.80)) !important;
color:#f0eadf !important;
box-shadow:0 0 10px rgba(225,165,32,.07) !important;
}
.menu-buttons .nav-btn:hover,
.menu-buttons .nav-works-link:hover{
color:#ffd66a !important;
border-color:#d9a12c !important;
}
/* row 2 layout: Contacts + Video */
.menu-buttons > :nth-child(4){
grid-column:1 / 2 !important;
}
.menu-buttons > :nth-child(5){
grid-column:2 / 4 !important;
}
.nav-tools{
order:3 !important;
width:100% !important;
}
/* Main four actions = clean 2x2 grid */
.hero-actions{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
margin-top:10px !important;
}
.hero-actions .hero-main-action{
width:100% !important;
min-height:50px !important;
padding:10px 8px !important;
font-size:10px !important;
line-height:1.08 !important;
white-space:normal !important;
}
/* Calculator looks like a real compact unit on mobile */
.hero-calc-btn{
background:
linear-gradient(145deg,#1e1a12 0%,#090806 60%,#15120d 100%) !important;
border:1px solid #c58f20 !important;
box-shadow:
inset 0 1px 0 rgba(255,234,179,.11),
inset 0 -1px 0 rgba(0,0,0,.72),
0 5px 12px rgba(0,0,0,.26),
0 0 18px rgba(225,165,32,.18) !important;
}
.calc-mini-icon{
width:26px !important;
height:31px !important;
flex-basis:26px !important;
transform:none !important;
border-radius:5px !important;
border-color:#d9aa3f !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 0 10px rgba(225,165,32,.15) !important;
}
.calc-screen{
height:7px !important;
background:linear-gradient(180deg,#8a8653,#4d4a2d) !important;
}
.calc-key{
width:5px !important;
height:5px !important;
border-radius:1.5px !important;
background:linear-gradient(180deg,#dbac3f,#7f5a12) !important;
}
.k1{left:4px!important;top:14px!important}.k2{left:10.5px!important;top:14px!important}.k3{left:17px!important;top:14px!important}
.k4{left:4px!important;top:21px!important}.k5{left:10.5px!important;top:21px!important}.k6{left:17px!important;top:21px!important}
/* The desktop slogan remains hidden on mobile */
.hero-slogan-right{
display:none !important;
}
}
/* Narrow phones: preserve exactly 2 rows for the 5 menu items */
@media (max-width:390px){
.menu-buttons{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
.menu-buttons > :nth-child(4){
grid-column:1 / 2 !important;
}
.menu-buttons > :nth-child(5){
grid-column:2 / 4 !important;
}
.menu-buttons .nav-btn,
.menu-buttons .nav-works-link{
font-size:9px !important;
}
.hero-actions .hero-main-action{
font-size:9px !important;
}
}
/* =========================================================
HARD FINAL OVERRIDES — PC + MOBILE
========================================================= */
/* Bigger legal entity names in both versions */
.legal-large{
font-size:14px !important;
font-weight:800 !important;
letter-spacing:.35px !important;
color:#eee7da !important;
}
@media(max-width:999px){
.legal-large{
font-size:12px !important;
line-height:1.25 !important;
}
}
/* Shared four main buttons: strict 2×2 grid + gold glow */
.hero-actions{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:min(590px,100%) !important;
}
.hero-actions .hero-main-action,
.hero-actions #openCalc,
.hero-actions #openQuoteTop,
.hero-actions #callbackBtn,
.hero-actions #heroCalcButton{
min-height:50px !important;
border:1px solid #c9901b !important;
border-radius:10px !important;
color:#ffd76a !important;
background:
linear-gradient(145deg,rgba(40,29,11,.95),rgba(8,7,5,.97)) !important;
box-shadow:
inset 0 1px 0 rgba(255,235,179,.12),
0 0 18px rgba(225,165,32,.20),
0 0 34px rgba(225,165,32,.08) !important;
text-shadow:0 0 10px rgba(255,205,78,.22) !important;
}
.hero-actions .hero-main-action:hover,
.hero-actions #openCalc:hover,
.hero-actions #openQuoteTop:hover,
.hero-actions #callbackBtn:hover,
.hero-actions #heroCalcButton:hover{
border-color:#ffd76a !important;
box-shadow:
inset 0 1px 0 rgba(255,242,202,.17),
0 0 26px rgba(225,165,32,.38),
0 0 48px rgba(225,165,32,.14) !important;
}
/* --------------------- PC VERSION --------------------- */
@media (min-width:1000px){
/* Force actual visible change on PC */
.hero-actions{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
width:570px !important;
gap:10px !important;
}
.hero-actions .btn{
min-height:52px !important;
font-size:10.5px !important;
padding:12px 14px !important;
}
/* Remove the 4 benefit phrases on PC only */
.benefits{
display:none !important;
}
/* Center "НАШИ УСЛУГИ" absolutely */
.services-title-only,
.services .section-title{
width:100% !important;
max-width:none !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
text-align:center !important;
margin:0 auto !important;
padding:0 !important;
transform:none !important;
}
.services-title-only h2,
.services .section-title h2{
margin:0 auto !important;
text-align:center !important;
transform:none !important;
position:static !important;
left:auto !important;
right:auto !important;
}
/* PC only: service cards taller, same width */
.service-grid{
grid-template-columns:repeat(8,minmax(0,1fr)) !important;
gap:5px !important;
}
.service-card{
width:100% !important;
height:138px !important;
min-height:138px !important;
max-height:138px !important;
}
.service-card img{
width:94% !important;
height:82px !important;
margin:3px auto 0 !important;
object-fit:contain !important;
object-position:center !important;
transform:none !important;
}
.service-card h3{
font-size:8px !important;
bottom:25px !important;
}
.service-card p{
font-size:6px !important;
bottom:6px !important;
}
/* Mangal remains same width, taller footprint */
.mangal-art{
top:12px !important;
transform:translateX(-50%) scale(1.08) !important;
}
.mangal-service-card h3{
bottom:9px !important;
}
}
/* --------------------- MOBILE VERSION --------------------- */
@media (max-width:999px){
/* Menu after logo, left-to-right in exactly two rows and larger */
.topbar .nav{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:8px !important;
}
.brand{
order:1 !important;
width:100% !important;
}
.menu-buttons{
order:2 !important;
width:100% !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,46px) !important;
gap:7px !important;
margin:0 !important;
}
.menu-buttons .nav-btn,
.menu-buttons .nav-works-link{
width:100% !important;
min-width:0 !important;
height:46px !important;
min-height:46px !important;
padding:8px 6px !important;
font-size:11px !important;
font-weight:800 !important;
line-height:1.08 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
white-space:normal !important;
border:1px solid rgba(221,163,38,.50) !important;
border-radius:9px !important;
color:#f3ede3 !important;
background:linear-gradient(180deg,rgba(29,23,13,.88),rgba(8,7,5,.82)) !important;
}
.menu-buttons > :nth-child(4){grid-column:1 / 2 !important;}
.menu-buttons > :nth-child(5){grid-column:2 / 4 !important;}
.nav-tools{
order:3 !important;
}
/* Benefits = one single row, 4 equal cells */
.benefits{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:4px !important;
width:100% !important;
margin-top:8px !important;
}
.benefits > div{
min-width:0 !important;
padding:4px 2px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
.benefits > div span{
font-size:6.7px !important;
line-height:1.05 !important;
white-space:normal !important;
}
/* Four action buttons strict 2×2 */
.hero-actions{
width:100% !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:9px !important;
margin-top:10px !important;
}
.hero-actions .btn{
width:100% !important;
min-height:52px !important;
font-size:10px !important;
line-height:1.08 !important;
white-space:normal !important;
padding:10px 8px !important;
}
/* Calculator mobile more realistic */
.hero-calc-btn{
position:relative !important;
overflow:hidden !important;
background:
linear-gradient(145deg,#211b11 0%,#0a0907 58%,#19150e 100%) !important;
border-color:#d2a034 !important;
box-shadow:
inset 0 1px 0 rgba(255,236,188,.13),
inset 0 -2px 0 rgba(0,0,0,.60),
0 5px 12px rgba(0,0,0,.30),
0 0 20px rgba(225,165,32,.20) !important;
}
.hero-calc-btn:after{
content:"" !important;
position:absolute !important;
inset:2px !important;
border-radius:8px !important;
border:1px solid rgba(255,220,117,.05) !important;
pointer-events:none !important;
}
.calc-mini-icon{
width:29px !important;
height:34px !important;
flex-basis:29px !important;
border-radius:5px !important;
border:1px solid #d6ab4a !important;
background:linear-gradient(180deg,#312a1b,#100e0a) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.09),
0 0 11px rgba(225,165,32,.14) !important;
}
.calc-screen{
left:3px !important;
right:3px !important;
top:3px !important;
height:8px !important;
background:linear-gradient(180deg,#9b9760,#545137) !important;
box-shadow:inset 0 0 3px rgba(0,0,0,.52) !important;
}
.calc-screen b{
font-size:4.5px !important;
line-height:7px !important;
}
.calc-key{
width:5px !important;
height:5px !important;
background:linear-gradient(180deg,#e0b54b,#7e5811) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 1px 1px rgba(0,0,0,.40) !important;
}
/* Mangal: drop visual slightly lower so title remains visible */
.mangal-art{
top:15px !important;
transform:translateX(-50%) scale(.96) !important;
}
.mangal-service-card h3{
bottom:8px !important;
z-index:4 !important;
background:linear-gradient(180deg,transparent,rgba(6,5,3,.72)) !important;
padding-top:6px !important;
}
/* Contact items = 2 columns, exactly 3 rows */
.contact-bar{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-template-rows:repeat(3,minmax(58px,auto)) !important;
gap:7px !important;
height:auto !important;
min-height:0 !important;
margin-top:10px !important;
}
.contact-bar > div{
min-width:0 !important;
min-height:58px !important;
height:auto !important;
padding:8px !important;
font-size:9px !important;
line-height:1.17 !important;
}
/* AI button directly after "Видео наших работ" block */
.ai-launcher-final{
position:static !important;
order:2 !important;
width:100% !important;
max-width:none !important;
margin:7px 0 0 !important;
}
/* Remove bottom video link entirely on mobile */
.after-contacts-works{
display:none !important;
}
/* On mobile service cards stay normal mobile size.
PC-only height increase does not apply here. */
.service-card{
height:126px !important;
min-height:126px !important;
}
}
/* Narrow mobile still keeps 4 benefits in one row, just smaller text */
@media (max-width:390px){
.benefits > div span{
font-size:5.9px !important;
}
.menu-buttons .nav-btn,
.menu-buttons .nav-works-link{
font-size:9.6px !important;
}
}
/* =========================================================
23.08 FINAL — EXACT PC + MOBILE OVERRIDES
This block is intentionally LAST so older rules cannot win.
========================================================= */
/* ---------- PC ONLY: do NOT change the PC background ---------- */
@media (min-width:1000px){
/* Slogan: left side, high above/near the press brake */
.hero-slogan-right{
display:block !important;
position:absolute !important;
left:2.6vw !important;
right:auto !important;
top:20px !important;
width:330px !important;
max-width:330px !important;
margin:0 !important;
padding:8px 10px !important;
border:0 !important;
border-left:2px solid rgba(224,164,37,.82) !important;
border-radius:0 !important;
background:linear-gradient(90deg,rgba(4,4,4,.58),rgba(4,4,4,.06)) !important;
backdrop-filter:none !important;
box-shadow:none !important;
text-align:left !important;
z-index:30 !important;
}
.hero-slogan-right span{
display:block !important;
margin:0 0 3px !important;
color:#e8ad2d !important;
font-size:8px !important;
letter-spacing:2.2px !important;
}
.hero-slogan-right strong{
display:block !important;
color:#f2f2f2 !important;
font-size:10px !important;
line-height:1.25 !important;
font-weight:700 !important;
}
/* Raise the main heading/control panel */
.hero-copy{
display:block !important;
position:absolute !important;
right:2.2vw !important;
left:auto !important;
top:28px !important;
width:410px !important;
max-width:410px !important;
margin:0 !important;
padding:10px 12px !important;
border:1px solid rgba(196,139,24,.42) !important;
border-radius:10px !important;
background:rgba(5,5,5,.32) !important;
backdrop-filter:blur(2px) !important;
box-shadow:none !important;
z-index:31 !important;
}
.hero-copy .eyebrow{
margin:0 0 7px !important;
font-size:8px !important;
letter-spacing:3px !important;
}
.hero-copy h1,
.hero h1{
margin:0 0 7px !important;
font-size:25px !important;
line-height:1.03 !important;
}
.hero-copy .legal{
margin:0 0 9px !important;
font-size:11px !important;
}
/* Four buttons: strict 2x2, minimalist */
.hero-actions{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-auto-rows:42px !important;
gap:7px !important;
width:100% !important;
margin:0 !important;
}
.hero-actions > .btn,
.hero-actions > a.btn,
.hero-actions > button.btn{
width:100% !important;
min-width:0 !important;
height:42px !important;
min-height:42px !important;
margin:0 !important;
padding:7px 9px !important;
border:1px solid rgba(211,155,35,.68) !important;
border-radius:7px !important;
background:rgba(8,8,7,.76) !important;
color:#f0bd4a !important;
box-shadow:0 0 10px rgba(216,158,35,.10) !important;
text-shadow:none !important;
font-size:9px !important;
font-weight:800 !important;
letter-spacing:.25px !important;
line-height:1.05 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:5px !important;
}
.hero-actions > .btn:hover{
background:rgba(20,16,8,.88) !important;
border-color:#e2aa38 !important;
box-shadow:0 0 13px rgba(216,158,35,.18) !important;
}
.hero-actions .calc-mini-icon{
width:20px !important;
height:23px !important;
flex:0 0 20px !important;
transform:scale(.78) !important;
}
.benefits{
display:none !important;
}
}
/* ---------- MOBILE ONLY ---------- */
@media (max-width:999px){
/* User supplied image ONLY for mobile. PC remains untouched. */
body{
background:#050403 !important;
background-image:none !important;
}
.hero{
background-image:
linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.64) 100%),
url("assets/mobile-production-background.png") !important;
background-size:cover !important;
background-position:center top !important;
background-repeat:no-repeat !important;
background-attachment:scroll !important;
min-height:720px !important;
height:auto !important;
padding:0 10px 18px !important;
overflow:hidden !important;
}
.hero:after{
background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.08) 52%,rgba(0,0,0,.72)) !important;
}
.hero-inner{
min-height:720px !important;
height:auto !important;
width:100% !important;
display:flex !important;
align-items:flex-end !important;
justify-content:flex-end !important;
padding:0 !important;
}
/* Mobile heading/content is compact and anchored at bottom,
so the new machine background remains clearly visible. */
.hero-copy{
display:block !important;
position:relative !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:10px !important;
border:1px solid rgba(201,145,29,.44) !important;
border-radius:10px !important;
background:rgba(4,4,4,.62) !important;
backdrop-filter:blur(2px) !important;
z-index:5 !important;
}
.hero-copy .eyebrow{
margin:0 0 5px !important;
font-size:8px !important;
letter-spacing:2.5px !important;
}
.hero-copy h1,
.hero h1{
margin:0 0 6px !important;
max-width:100% !important;
font-size:20px !important;
line-height:1.03 !important;
}
.hero-copy .legal{
margin:0 0 8px !important;
font-size:9px !important;
line-height:1.15 !important;
}
/* No slogan on mobile */
.hero-slogan-right,
.mobile-hero-slogan{
display:none !important;
}
/* Four main actions: EXACT 2x2, minimalist and readable */
.hero-actions{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,44px) !important;
gap:7px !important;
width:100% !important;
margin:0 0 8px !important;
}
.hero-actions > .btn,
.hero-actions > a.btn,
.hero-actions > button.btn{
width:100% !important;
min-width:0 !important;
height:44px !important;
min-height:44px !important;
margin:0 !important;
padding:7px 6px !important;
border:1px solid rgba(215,158,37,.72) !important;
border-radius:7px !important;
background:rgba(8,8,7,.82) !important;
color:#f0bd4a !important;
box-shadow:0 0 9px rgba(215,158,37,.10) !important;
text-shadow:none !important;
font-size:8.7px !important;
font-weight:800 !important;
letter-spacing:0 !important;
line-height:1.05 !important;
white-space:normal !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:4px !important;
}
.hero-actions .calc-mini-icon{
width:18px !important;
height:21px !important;
flex:0 0 18px !important;
transform:scale(.72) !important;
}
/* Four promises remain on mobile, exactly one row */
.benefits{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:3px !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
}
.benefits > div{
min-width:0 !important;
padding:3px 1px !important;
text-align:center !important;
}
.benefits span{
font-size:6px !important;
line-height:1.05 !important;
}
/* Prevent horizontal overflow on phone */
html,body{
width:100% !important;
max-width:100% !important;
overflow-x:hidden !important;
}
.shell,
.topbar .shell,
.services .shell{
width:100% !important;
max-width:100% !important;
}
}
@media (max-width:430px){
.hero{
min-height:680px !important;
background-size:cover !important;
background-position:center top !important;
}
.hero-inner{
min-height:680px !important;
}
.hero-copy h1,
.hero h1{
font-size:18px !important;
}
.hero-actions > .btn,
.hero-actions > a.btn,
.hero-actions > button.btn{
font-size:8px !important;
}
}
/* =========================================================
FINAL POLISH 2 — PC + MOBILE
========================================================= */
/* Unified top navigation typography/style */
.nav-top-item,
.nav-btn,
.nav-works-link{
font-family:inherit !important;
font-weight:800 !important;
letter-spacing:.45px !important;
text-transform:uppercase !important;
}
/* Remove any circular AI leftovers globally */
#aiLauncher,
.ai-launcher-final,
.ai-launcher,
.ai-fab,
.ai-round,
.ai-button-round{
display:none !important;
}
/* Mangal visual slightly lower, title always visible */
.mangal-art{
top:18px !important;
}
.mangal-service-card h3{
z-index:10 !important;
bottom:7px !important;
background:linear-gradient(180deg,transparent 0%,rgba(5,4,2,.88) 45%,rgba(5,4,2,.98) 100%) !important;
padding:9px 4px 4px !important;
}
/* ---------- PC ---------- */
@media (min-width:1000px){
/* Slogan much larger, using headline-like typography */
.hero-slogan-right{
left:2.5vw !important;
top:22px !important;
width:560px !important;
max-width:560px !important;
padding:14px 16px !important;
}
.hero-slogan-right span{
font-size:18px !important;
line-height:1 !important;
letter-spacing:4px !important;
font-weight:900 !important;
margin-bottom:8px !important;
}
.hero-slogan-right strong{
font-family:inherit !important;
font-size:30px !important;
line-height:1.02 !important;
font-weight:900 !important;
letter-spacing:-.6px !important;
text-transform:uppercase !important;
color:#fff !important;
}
/* Raise main heading a bit */
.hero-copy{
top:20px !important;
}
/* Hero actions:
row 1 = Рассчитать заказ + Обратный звонок
row 2 = Оставить заявку + Калькулятор */
.hero-actions{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,46px) !important;
gap:8px !important;
width:100% !important;
}
.hero-actions #openCalc{
grid-column:1 !important;
grid-row:1 !important;
}
.hero-actions #callbackBtn{
grid-column:2 !important;
grid-row:1 !important;
}
.hero-actions #openQuoteTop{
grid-column:1 !important;
grid-row:2 !important;
}
.hero-actions #heroCalcButton{
grid-column:2 !important;
grid-row:2 !important;
}
/* "Рассчитать заказ" styled like callback */
.hero-actions #openCalc,
.hero-actions #callbackBtn{
min-height:46px !important;
font-size:11.5px !important;
font-weight:900 !important;
letter-spacing:.4px !important;
border:1px solid rgba(215,158,37,.74) !important;
border-radius:8px !important;
background:rgba(8,8,7,.80) !important;
color:#f0bd4a !important;
box-shadow:0 0 12px rgba(215,158,37,.12) !important;
}
/* Second row a touch calmer/minimal */
.hero-actions #openQuoteTop,
.hero-actions #heroCalcButton{
min-height:46px !important;
font-size:10.5px !important;
border-radius:8px !important;
background:rgba(8,8,7,.70) !important;
}
/* Top nav all same visual treatment */
.menu-buttons .nav-top-item,
.menu-buttons .nav-btn,
.menu-buttons .nav-works-link{
min-height:34px !important;
padding:7px 11px !important;
border:1px solid rgba(194,140,25,.34) !important;
border-radius:7px !important;
background:rgba(7,7,6,.46) !important;
color:#e9e3d8 !important;
font-size:9px !important;
}
.menu-buttons .nav-top-item:hover,
.menu-buttons .nav-btn:hover,
.menu-buttons .nav-works-link:hover{
color:#f0bd4a !important;
border-color:rgba(220,162,39,.62) !important;
}
/* Mangal lower on PC too */
.mangal-art{
top:22px !important;
transform:translateX(-50%) scale(1.04) !important;
}
}
/* ---------- MOBILE ---------- */
@media (max-width:999px){
/* Background follows the user while scrolling down */
body{
background:
linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.18)),
url("assets/mobile-production-background.png") center top / cover fixed !important;
background-attachment:fixed !important;
}
.hero,
.services,
main,
.site-shell,
.page{
background-color:transparent !important;
}
.hero{
background:
linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.14) 55%,rgba(0,0,0,.60)),
url("assets/mobile-production-background.png") center top / cover no-repeat !important;
}
.services{
background:rgba(4,4,4,.38) !important;
backdrop-filter:blur(1px) !important;
}
/* Top nav same style everywhere, slightly larger */
.menu-buttons .nav-top-item,
.menu-buttons .nav-btn,
.menu-buttons .nav-works-link{
font-size:10.5px !important;
font-weight:800 !important;
letter-spacing:.25px !important;
text-transform:uppercase !important;
border:1px solid rgba(207,151,32,.48) !important;
border-radius:8px !important;
background:rgba(6,6,5,.66) !important;
color:#efe8dc !important;
}
/* 2x2 hero actions, keep same order as PC */
.hero-actions{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-template-rows:repeat(2,46px) !important;
gap:8px !important;
}
.hero-actions #openCalc{
grid-column:1 !important;
grid-row:1 !important;
}
.hero-actions #callbackBtn{
grid-column:2 !important;
grid-row:1 !important;
}
.hero-actions #openQuoteTop{
grid-column:1 !important;
grid-row:2 !important;
}
.hero-actions #heroCalcButton{
grid-column:2 !important;
grid-row:2 !important;
}
.hero-actions > .btn,
.hero-actions > a.btn,
.hero-actions > button.btn{
min-height:46px !important;
font-size:9.5px !important;
font-weight:900 !important;
border:1px solid rgba(215,158,37,.72) !important;
border-radius:8px !important;
background:rgba(7,7,6,.78) !important;
color:#f0bd4a !important;
box-shadow:0 0 11px rgba(215,158,37,.12) !important;
}
/* Mangal lower so the title is unobstructed */
.mangal-art{
top:20px !important;
transform:translateX(-50%) scale(.92) !important;
}
.mangal-service-card h3{
bottom:6px !important;
padding-top:10px !important;
}
/* Mobile legal names larger */
.legal-large,
#legalLine{
font-size:12.5px !important;
font-weight:900 !important;
}
}
/* iOS fixed-background fallback: use pseudo fixed layer */
@supports (-webkit-touch-callout:none){
@media (max-width:999px){
body:before{
content:"" !important;
position:fixed !important;
inset:0 !important;
z-index:-2 !important;
background:url("assets/mobile-production-background.png") center top / cover no-repeat !important;
}
body{
background:transparent !important;
}
}
}
/* MOBILE ONLY — CLEAN BACKGROUND / NO SHADOW PANELS */
@media (max-width:999px){
/* Keep production background visible through the whole scroll */
html, body{ background-color:#050505 !important; }
body:before{
content:"" !important;
display:block !important;
position:fixed !important;
inset:0 !important;
z-index:-10 !important;
background:url("assets/mobile-production-background.png") center top / cover no-repeat !important;
pointer-events:none !important;
}
body{
background:transparent !important;
background-image:none !important;
}
.hero, main, .page, .site-shell, .services, section,
.services-section, .production-section, .about-section, .contacts-section,
footer, .footer, .contact-section{
background:transparent !important;
background-image:none !important;
}
/* Remove dark/shadow cards and glows, preserve text + drawings */
.service-card, .service-tile, .service-item, .mangal-service-card,
.contact-card, .info-card, .production-card, .about-card,
.feature-card, .hero-card, .quick-card, .menu-buttons a, .menu-buttons button,
.hero-actions .btn, .hero-actions button, .hero-actions a,
[class*="card"], [class*="panel"], [class*="box"]{
box-shadow:none !important;
text-shadow:none !important;
}
.service-card, .service-tile, .service-item, .mangal-service-card,
.production-card, .about-card, .feature-card{
background:transparent !important;
background-image:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.services{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* No artificial shadows behind images/icons/text */
.service-card img, .service-tile img, .service-item img,
.service-icon, .service-art, .mangal-art, svg{
filter:none !important;
box-shadow:none !important;
}
h1,h2,h3,h4,p,span,a,strong,small{ text-shadow:none !important; }
/* Mangal drawing lower — mobile only */
.mangal-art{
top:42px !important;
transform:translateX(-50%) scale(.90) !important;
}
.mangal-service-card h3{
position:relative !important;
z-index:20 !important;
background:transparent !important;
padding-top:0 !important;
}
}
/* =========================================================
MOBILE ONLY — TOP SHADOWS + REMOVE GAP AFTER RU/KZ
PC VERSION IS NOT TOUCHED
========================================================= */
@media (max-width:999px){
/* Upper area: remove every remaining dark shadow/backdrop,
keeping logo, text, drawings and borders readable. */
.topbar,
.topbar .shell,
.topbar .nav,
.brand,
.brand-mark,
.brand-copy,
.brand-copy strong,
.brand-copy small,
.menu,
.menu-buttons,
.menu-buttons .nav-btn,
.menu-buttons .nav-works-link,
.nav-tools,
.lang,
.lang button,
.mini{
box-shadow:none !important;
text-shadow:none !important;
filter:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.topbar{
position:relative !important;
top:auto !important;
height:auto !important;
min-height:0 !important;
padding:4px 0 0 !important;
margin:0 !important;
background:transparent !important;
background-image:none !important;
border-bottom:0 !important;
}
.topbar .shell{
padding:0 8px !important;
margin:0 auto !important;
}
.topbar .nav{
height:auto !important;
min-height:0 !important;
padding:0 !important;
margin:0 !important;
gap:5px !important;
}
.brand{
margin:0 !important;
padding:2px 0 !important;
min-height:0 !important;
background:transparent !important;
}
.brand-mark{
box-shadow:none !important;
}
/* Menu buttons keep only outline/text — no dark shadow panel. */
.menu-buttons{
margin:0 !important;
padding:0 !important;
gap:5px !important;
}
.menu-buttons .nav-btn,
.menu-buttons .nav-works-link{
box-shadow:none !important;
text-shadow:none !important;
}
/* RU/KZ line: compact; hide redundant top WhatsApp/TikTok minis
so there is no large empty area underneath the language switch. */
.nav-tools{
width:100% !important;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 0 2px !important;
gap:0 !important;
display:flex !important;
justify-content:flex-start !important;
align-items:center !important;
}
.nav-tools .mini{
display:none !important;
}
.lang{
height:24px !important;
min-height:24px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
line-height:1 !important;
}
.lang button{
margin:0 !important;
padding:2px 4px !important;
line-height:1 !important;
background:transparent !important;
}
.lang span{
margin:0 1px !important;
line-height:1 !important;
}
/* Pull hero directly up under RU/KZ. */
.hero{
margin-top:0 !important;
padding-top:0 !important;
}
.hero-inner{
margin-top:0 !important;
}
}
/* =========================================================
MOBILE ONLY — REAL GAP FIX (content was anchored too low)
========================================================= */
@media (max-width:999px){
/* Header ends immediately after language selector */
.topbar{
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:3px 0 0 !important;
}
.topbar .shell,
.topbar .nav{
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding-bottom:0 !important;
}
.nav-tools{
height:22px !important;
min-height:22px !important;
max-height:22px !important;
margin:0 !important;
padding:0 !important;
}
.lang{
height:22px !important;
min-height:22px !important;
margin:0 !important;
padding:0 !important;
}
/* THIS removes the real large blank gap:
the hero was ~680–720px high and its text was aligned to the bottom. */
.hero{
margin-top:0 !important;
padding-top:0 !important;
min-height:680px !important;
}
.hero-inner{
min-height:680px !important;
height:auto !important;
display:flex !important;
align-items:flex-start !important;
justify-content:flex-start !important;
margin:0 !important;
padding:4px 0 0 !important;
}
.hero-copy{
position:relative !important;
top:auto !important;
right:auto !important;
left:auto !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:8px 10px 10px !important;
}
/* Keep the new mobile background visible below the upper content */
.hero{
background-position:center top !important;
}
/* 4 advantages in ONE row, larger but guaranteed inside the row */
.benefits{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:3px !important;
width:100% !important;
max-width:100% !important;
margin:6px 0 0 !important;
}
.benefits > div{
min-width:0 !important;
width:100% !important;
padding:4px 1px !important;
overflow:hidden !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
.benefits > div span{
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
color:#f0eadf !important;
font-size:clamp(8.5px,2.55vw,11.5px) !important;
font-weight:800 !important;
line-height:1.03 !important;
letter-spacing:-0.2px !important;
white-space:normal !important;
word-break:normal !important;
overflow-wrap:normal !important;
text-align:center !important;
}
}
@media (max-width:390px){
.benefits > div span{
font-size:clamp(7.4px,2.45vw,9px) !important;
letter-spacing:-0.3px !important;
}
}
/* =========================================================
MOBILE ONLY — REMOVE GAP AFTER THE 4 BENEFIT BLOCKS
========================================================= */
@media (max-width:999px){
/* The remaining gap was caused by the hero still keeping a large minimum height.
Let the hero end immediately after the four benefit blocks. */
.hero{
min-height:auto !important;
height:auto !important;
padding-bottom:6px !important;
margin-bottom:0 !important;
}
.hero-inner{
min-height:0 !important;
height:auto !important;
padding-bottom:0 !important;
margin-bottom:0 !important;
}
.hero-copy{
margin-bottom:0 !important;
}
.benefits{
margin-bottom:0 !important;
padding-bottom:0 !important;
}
/* Pull "Наши услуги" and everything below directly upward */
.services{
margin-top:0 !important;
padding-top:5px !important;
transform:none !important;
}
.services .shell{
margin-top:0 !important;
padding-top:0 !important;
}
.services-title-only,
.services .section-title{
margin-top:0 !important;
padding-top:0 !important;
margin-bottom:6px !important;
}
main{
margin-top:0 !important;
padding-top:0 !important;
}
}
/* =========================================================
STABLE STRONG SIDES — LIGHTWEIGHT, NO HEAVY JS/CSS
========================================================= */
.stable-strong-sides,
.pc-strong-content{
width:100%;
box-sizing:border-box;
}
.stable-strong-inner{
width:min(1180px,100%);
margin:0 auto;
}
.stable-kicker{
text-align:center;
color:#d8a12f;
font-weight:800;
letter-spacing:.18em;
margin:0 0 8px;
}
.stable-strong-inner h2{
text-align:center;
margin:0;
line-height:1.12;
}
.stable-strong-inner h3{
text-align:center;
color:#d8a12f;
line-height:1.35;
margin:10px 0 14px;
}
.stable-intro{
max-width:900px;
margin:0 auto 24px;
text-align:center;
line-height:1.55;
}
.stable-strong-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.stable-strong-grid article{
padding:18px;
border:1px solid rgba(204,150,39,.45);
border-radius:10px;
background:rgba(7,6,4,.72);
box-sizing:border-box;
}
.stable-strong-grid article span{
color:#d8a12f;
font-weight:800;
font-size:12px;
}
.stable-strong-grid h4{
color:#f1c258;
margin:6px 0 8px;
line-height:1.3;
}
.stable-strong-grid p{
margin:0;
line-height:1.5;
}
.pc-strong-details{
display:inline-block;
position:relative;
margin-left:8px;
}
.pc-strong-details > summary{
list-style:none;
cursor:pointer;
border:1px solid rgba(194,140,25,.45);
border-radius:7px;
padding:7px 10px;
font-size:9px;
font-weight:800;
color:#e9e3d8;
background:rgba(7,7,6,.50);
}
.pc-strong-details > summary::-webkit-details-marker{display:none;}
.pc-strong-details[open]{
position:fixed;
inset:0;
z-index:99999;
margin:0;
padding:28px 20px;
background:rgba(0,0,0,.94);
overflow:auto;
box-sizing:border-box;
}
.pc-strong-details[open] > summary{
position:sticky;
top:0;
margin-left:auto;
width:max-content;
z-index:2;
}
.pc-strong-content{
padding:20px 0 50px;
}
@media (min-width:1000px){
#strongSidesMobile{display:none !important;}
}
@media (max-width:999px){
.pc-strong-details{display:none !important;}
#strongSidesMobile{
display:block !important;
padding:42px 14px 0 !important;
box-sizing:border-box !important;
}
.stable-strong-grid{
grid-template-columns:1fr !important;
gap:10px !important;
}
.stable-strong-grid article{
text-align:center !important;
}
#strongSidesMobile::after{
content:"";
display:block;
height:50vh;
min-height:320px;
background:transparent;
}
}
/* =========================================================
24.08.2026 — MV CARDS + PC STABILITY + FINAL ORDER CARD
These overrides intentionally come LAST.
========================================================= */
/* PC: force a stable interactive header and working popovers. */
@media (min-width:1000px){
.topbar{
position:sticky !important;
top:0 !important;
z-index:1000 !important;
display:block !important;
min-height:74px !important;
background:rgba(3,3,3,.94) !important;
border-bottom:1px solid rgba(174,121,22,.55) !important;
backdrop-filter:blur(8px) !important;
-webkit-backdrop-filter:blur(8px) !important;
}
.topbar .nav{
display:flex !important;
align-items:center !important;
min-height:74px !important;
pointer-events:auto !important;
}
.menu-buttons{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
}
.menu-buttons .nav-btn,
.menu-buttons .nav-works-link,
.pc-strong-details > summary{
pointer-events:auto !important;
cursor:pointer !important;
}
.nav-tools{
display:flex !important;
visibility:visible !important;
}
.nav-popovers{
top:78px !important;
z-index:1100 !important;
pointer-events:none !important;
}
.nav-popover{
background:linear-gradient(145deg,rgba(15,11,5,.985),rgba(3,3,3,.99)) !important;
border:1px solid rgba(196,141,30,.72) !important;
box-shadow:0 24px 70px rgba(0,0,0,.76) !important;
backdrop-filter:blur(14px) !important;
-webkit-backdrop-filter:blur(14px) !important;
pointer-events:auto !important;
}
.nav-popover.open{display:block !important;}
.hero{
background-image:url("assets/iron-lazer-main-background.png") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
}
/* MV: restore dark translucent material INSIDE the four top-menu buttons. */
@media (max-width:999px){
.nav-popovers{
position:fixed !important;
top:8px !important;
left:50% !important;
width:calc(100vw - 18px) !important;
max-width:680px !important;
max-height:calc(100dvh - 16px) !important;
transform:translateX(-50%) !important;
z-index:100000 !important;
pointer-events:none !important;
}
.nav-popover{
max-height:calc(100dvh - 16px) !important;
overflow:auto !important;
padding:14px !important;
border:1px solid rgba(211,154,34,.78) !important;
border-radius:15px !important;
background:linear-gradient(145deg,rgba(17,13,7,.965),rgba(5,5,5,.975)) !important;
background-image:linear-gradient(145deg,rgba(17,13,7,.965),rgba(5,5,5,.975)) !important;
box-shadow:0 22px 60px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,213,112,.07) !important;
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
pointer-events:auto !important;
}
.nav-popover.open{display:block !important;}
#servicesMenu .services-list button,
#servicesMenu .services-list a,
#productionMenu .production-cards article,
#aboutMenu .about-company-copy,
#aboutMenu .about-company-video-wrap,
#contactsMenu .contact-choice a{
background:rgba(8,8,7,.82) !important;
background-image:linear-gradient(145deg,rgba(19,15,8,.84),rgba(5,5,5,.88)) !important;
border-color:rgba(181,130,28,.62) !important;
box-shadow:inset 0 1px 0 rgba(255,222,143,.045),0 7px 18px rgba(0,0,0,.20) !important;
backdrop-filter:blur(3px) !important;
-webkit-backdrop-filter:blur(3px) !important;
}
#aboutMenu .about-company-copy{
padding:13px !important;
border:1px solid rgba(181,130,28,.50) !important;
border-radius:10px !important;
}
#aboutMenu .about-company-layout{
gap:10px !important;
}
#productionMenu .production-cards,
#contactsMenu .contact-choice,
#servicesMenu .services-list{
background:transparent !important;
}
/* After item 16: a slightly larger clean transparent pause. */
#strongSidesMobile::after{display:none !important;}
.strong-mobile-gap{
display:block !important;
height:58vh !important;
min-height:380px !important;
max-height:620px !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
pointer-events:none !important;
}
/* Final lower card — deliberately darker than the background, but still translucent. */
.waiting-orders-card{
display:block !important;
width:min(620px,100%) !important;
margin:0 auto 34px !important;
padding:25px 18px 22px !important;
text-align:center !important;
border:1px solid rgba(214,158,39,.68) !important;
border-radius:16px !important;
background:linear-gradient(145deg,rgba(15,12,7,.91),rgba(4,4,4,.91)) !important;
background-image:linear-gradient(145deg,rgba(15,12,7,.91),rgba(4,4,4,.91)) !important;
box-shadow:0 20px 50px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,220,130,.08) !important;
backdrop-filter:blur(7px) !important;
-webkit-backdrop-filter:blur(7px) !important;
}
.waiting-orders-kicker{
margin:0 0 7px !important;
color:#dba630 !important;
font-size:11px !important;
font-weight:900 !important;
letter-spacing:.22em !important;
}
.waiting-orders-card h3{
margin:0 0 12px !important;
color:#f2c65f !important;
font-size:clamp(22px,6vw,32px) !important;
line-height:1.08 !important;
font-weight:900 !important;
}
.waiting-orders-card > p:not(.waiting-orders-kicker){
max-width:540px !important;
margin:0 auto !important;
color:#f1eee8 !important;
font-size:13px !important;
line-height:1.65 !important;
}
.waiting-orders-actions{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:9px !important;
margin-top:18px !important;
}
.waiting-order-btn{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:44px !important;
padding:10px 12px !important;
border:1px solid rgba(216,160,38,.72) !important;
border-radius:9px !important;
background:rgba(9,8,6,.90) !important;
color:#f0bd4a !important;
text-decoration:none !important;
font:inherit !important;
font-size:10px !important;
font-weight:900 !important;
letter-spacing:.05em !important;
cursor:pointer !important;
box-shadow:none !important;
}
}
@media (max-width:420px){
.strong-mobile-gap{min-height:410px !important;}
.waiting-orders-actions{grid-template-columns:1fr !important;}
}
/* =========================================================
24.08.2026 — HEADER / STRONG SIDES / CALLBACK FINAL FIX
========================================================= */
/* Reliable PC strong-sides button: always clickable above the header layers. */
@media (min-width:1000px){
.pc-strong-details{
z-index:1201 !important;
pointer-events:auto !important;
}
.pc-strong-details > summary{
position:relative !important;
z-index:1202 !important;
pointer-events:auto !important;
user-select:none !important;
-webkit-user-select:none !important;
}
.pc-strong-details[open]{
z-index:120000 !important;
}
body.pc-strong-open{
overflow:hidden !important;
}
}
/* MV: RU/ҚАЗ sits on the SAME top row as the logo, on the right. */
@media (max-width:999px){
.topbar .shell,
.topbar .nav{
position:relative !important;
}
.topbar .nav{
padding-top:0 !important;
}
.brand{
width:calc(100% - 92px) !important;
max-width:calc(100% - 92px) !important;
align-self:flex-start !important;
padding-right:4px !important;
}
.nav-tools{
position:absolute !important;
top:5px !important;
right:0 !important;
left:auto !important;
width:auto !important;
min-width:82px !important;
height:49px !important;
min-height:49px !important;
max-height:49px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
z-index:20 !important;
}
.lang{
height:auto !important;
min-height:0 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
white-space:nowrap !important;
}
.lang button{
padding:4px 3px !important;
font-size:11px !important;
line-height:1 !important;
}
.lang span{
margin:0 1px !important;
}
}
/* =========================================================
24.08.2026 — FIX 4R: PC STRONG MODAL + MV SERVICE SHADOW
Stable targeted patch; calculator/mobile layout untouched.
========================================================= */
.pc-strong-trigger{
list-style:none;cursor:pointer;border:1px solid rgba(194,140,25,.45);border-radius:7px;
padding:7px 10px;font:inherit;font-size:9px;font-weight:800;color:#e9e3d8;
background:rgba(7,7,6,.50);white-space:nowrap;
}
.pc-strong-modal{display:none;}
@media (min-width:1000px){
.pc-strong-trigger{display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative!important;z-index:1202!important;pointer-events:auto!important;flex:0 0 auto!important;transform:none!important;}
.pc-strong-trigger:hover{color:#ffd66a!important;border-color:#d9a12c!important;box-shadow:0 0 15px rgba(225,165,32,.14)!important;}
.pc-strong-modal.open{display:block!important;position:fixed!important;inset:0!important;z-index:120000!important;padding:22px!important;background:rgba(0,0,0,.94)!important;overflow:auto!important;overscroll-behavior:contain!important;}
.pc-strong-modal-panel{position:relative!important;width:min(1240px,calc(100vw - 44px))!important;min-height:calc(100vh - 44px)!important;margin:0 auto!important;padding:18px 22px 46px!important;border:1px solid rgba(194,140,25,.60)!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(16,12,6,.985),rgba(3,3,3,.99))!important;box-shadow:0 28px 90px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,220,130,.06)!important;}
.pc-strong-modal-close{position:sticky!important;top:0!important;z-index:4!important;display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;margin:0 0 4px auto!important;padding:0!important;border:1px solid rgba(216,160,38,.68)!important;border-radius:9px!important;background:rgba(7,7,6,.94)!important;color:#f0bd4a!important;font-size:26px!important;line-height:1!important;cursor:pointer!important;}
.pc-strong-modal .pc-strong-content{display:block!important;padding:0 0 20px!important;}
body.pc-strong-open{overflow:hidden!important;}
}
@media (max-width:999px){
.pc-strong-trigger,.pc-strong-modal{display:none!important;}
#servicesMenu .services-list{gap:10px!important;overflow:visible!important;}
#servicesMenu .services-list>button,#servicesMenu .services-list>a{position:relative!important;background:linear-gradient(145deg,rgba(19,15,8,.88),rgba(5,5,5,.92))!important;border:1px solid rgba(181,130,28,.64)!important;box-shadow:inset 0 1px 0 rgba(255,222,143,.05),0 9px 22px rgba(0,0,0,.42),0 0 14px rgba(225,165,32,.10)!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important;}
}
/* ==========================================================
24-08 SERVICE REALISTIC V2 — PC + MOBILE
Only .service-card[data-service] is affected. Mangal is untouched.
========================================================== */
.service-card[data-service]{position:relative!important;isolation:isolate;transform:translateZ(0);}
.service-card[data-service] img{transition:filter .18s ease,transform .18s ease!important;}
.service-card[data-service].svc-real-running{cursor:wait!important;pointer-events:none!important;}
.service-card[data-service].svc-real-running img{filter:brightness(.54) contrast(1.22) saturate(1.12)!important;transform:scale(1.025)!important;}
.svc-real-stage{position:absolute;z-index:35;display:block;overflow:hidden;border-radius:inherit;pointer-events:none;opacity:0;transform:translateZ(0);perspective:520px;contain:layout paint style;}
.svc-real-running .svc-real-stage{opacity:1;}
.svc-real-stage,.svc-real-stage *{box-sizing:border-box;}
.svc-real-stage:after{content:"";position:absolute;inset:0;z-index:80;pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 0 40%,rgba(0,0,0,.18) 75%,rgba(0,0,0,.42) 100%);}
.svc-real-caption{position:absolute;z-index:90;left:50%;bottom:5px;transform:translate(-50%,7px);white-space:nowrap;padding:4px 9px;border-radius:999px;background:rgba(3,3,3,.82);border:1px solid rgba(239,179,43,.88);box-shadow:0 4px 14px rgba(0,0,0,.55),inset 0 0 8px rgba(239,179,43,.08);color:#ffd978;font-size:7.5px;line-height:1.1;font-weight:900;letter-spacing:.075em;text-shadow:0 1px 3px #000;opacity:0;}
.svc-real-running .svc-real-caption{animation:svcRealCaption 1.42s ease both;}
@keyframes svcRealCaption{0%,6%{opacity:0;transform:translate(-50%,8px)}13%,84%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-3px)}}
/* metal reflection over the real photo */
.svc-real-stage:before{content:"";position:absolute;z-index:2;inset:-40% -60%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.12) 48%,rgba(255,211,108,.08) 51%,transparent 57%);transform:translateX(-45%);opacity:0;}
.svc-real-running .svc-real-stage:before{animation:svcMetalSweep 1.38s ease-out both;}
@keyframes svcMetalSweep{0%,8%{opacity:0;transform:translateX(-45%)}18%{opacity:.75}70%{opacity:.45}100%{opacity:0;transform:translateX(45%)}}
/* realistic sparks used by laser / weld / tube */
.svc-real-sparks{position:absolute;z-index:72;inset:0;overflow:hidden;}
.svc-real-sparks i{--ang:calc((var(--i) - 9) * 9deg);position:absolute;left:52%;top:53%;width:2px;height:12px;border-radius:999px;background:linear-gradient(#fff,#ffe07a 35%,#ff8a10 72%,transparent);box-shadow:0 0 4px #fff,0 0 8px #ff9b16;opacity:0;transform:rotate(var(--ang));transform-origin:50% 100%;}
.svc-real-running .svc-real-sparks i{animation:svcRealSpark 1.02s cubic-bezier(.16,.65,.24,1) both;animation-delay:calc(.22s + var(--i)*.018s);}
@keyframes svcRealSpark{0%{opacity:0;translate:0 0;scale:.25}5%{opacity:1}28%{opacity:1}100%{opacity:0;translate:calc((var(--i) - 9)*3.5px) calc(25px + (var(--i)%4)*8px);scale:.08}}
/* ---------- LASER ---------- */
.svc-laser-machine{position:absolute;z-index:30;inset:0;}
.svc-laser-machine .rail{position:absolute;left:7%;right:7%;top:17%;height:7px;border-radius:2px;background:linear-gradient(#9a9c9c,#252729 48%,#070809);box-shadow:0 3px 8px rgba(0,0,0,.7);}
.svc-laser-machine .head{position:absolute;left:13%;top:12%;width:26px;height:39px;border-radius:4px 4px 7px 7px;background:linear-gradient(90deg,#141516 0,#777a7b 29%,#27292a 48%,#a77317 50%,#343434 67%,#0f1010);border:1px solid rgba(214,163,60,.72);box-shadow:0 4px 8px #000,inset 2px 0 3px rgba(255,255,255,.18);}
.svc-laser-machine .nozzle{position:absolute;left:calc(13% + 8px);top:48%;width:10px;height:18px;clip-path:polygon(15% 0,85% 0,100% 62%,62% 100%,38% 100%,0 62%);background:linear-gradient(90deg,#5a410e,#f1c764 40%,#705119);filter:drop-shadow(0 2px 2px #000);}
.svc-laser-machine .beam{position:absolute;left:calc(13% + 12px);top:62%;width:2px;height:22%;background:linear-gradient(#eaffff,#fff 17%,#ffe86d 42%,#ff5a00 76%,transparent);box-shadow:0 0 4px #fff,0 0 9px #65eaff,0 0 15px #ffad19,0 0 23px #ff4b00;opacity:0;}
.svc-laser-machine .melt{position:absolute;left:calc(13% + 7px);top:81%;width:13px;height:5px;border-radius:50%;background:#fff7d2;box-shadow:0 0 6px #fff,0 0 13px #ffb526,0 0 19px #ff5a00;opacity:0;}
.svc-laser-machine .kerf{position:absolute;left:14%;top:84%;width:0;height:2px;background:linear-gradient(90deg,#fff7b8,#ffb51c 42%,#802500);box-shadow:0 0 5px #ffb51c,0 0 10px #ff4d00;}
.svc-real-running .svc-laser-machine .head{animation:svcLaserHead 1.36s cubic-bezier(.18,.72,.2,1) both;}
.svc-real-running .svc-laser-machine .nozzle{animation:svcLaserNozzle 1.36s cubic-bezier(.18,.72,.2,1) both;}
.svc-real-running .svc-laser-machine .beam{animation:svcLaserBeam 1.36s cubic-bezier(.18,.72,.2,1) both;}
.svc-real-running .svc-laser-machine .melt{animation:svcLaserMelt 1.36s cubic-bezier(.18,.72,.2,1) both;}
.svc-real-running .svc-laser-machine .kerf{animation:svcLaserKerf 1.36s ease-out both;}
@keyframes svcLaserHead{0%,8%{left:13%}90%,100%{left:76%}}
@keyframes svcLaserNozzle{0%,8%{left:calc(13% + 8px)}90%,100%{left:calc(76% + 8px)}}
@keyframes svcLaserBeam{0%,10%,96%,100%{opacity:0}15%,90%{opacity:1}0%,8%{left:calc(13% + 12px)}90%,100%{left:calc(76% + 12px)}}
@keyframes svcLaserMelt{0%,11%,96%,100%{opacity:0}16%,91%{opacity:1}0%,8%{left:calc(13% + 7px)}90%,100%{left:calc(76% + 7px)}}
@keyframes svcLaserKerf{0%,12%{width:0}90%,100%{width:65%}}
/* ---------- PRESS BRAKE ---------- */
.svc-press{position:absolute;z-index:30;inset:0;transform-style:preserve-3d;}
.svc-press .upper{position:absolute;left:8%;right:8%;top:7%;height:17px;background:linear-gradient(#777b7d,#202224 48%,#090a0b);border-bottom:2px solid #a77a22;box-shadow:0 5px 10px rgba(0,0,0,.7);}
.svc-press .punch{position:absolute;left:16%;right:16%;top:22%;height:15px;clip-path:polygon(0 0,100% 0,63% 100%,37% 100%);background:linear-gradient(#a4aaad,#313538 45%,#17191a);filter:drop-shadow(0 3px 3px rgba(0,0,0,.65));}
.svc-press .lower{position:absolute;left:24%;right:24%;bottom:13%;height:18px;clip-path:polygon(0 100%,15% 0,42% 0,50% 60%,58% 0,85% 0,100% 100%);background:linear-gradient(#53585a,#141617);box-shadow:0 5px 8px #000;}
.svc-press .sheet{position:absolute;top:56%;width:38%;height:5px;background:linear-gradient(#f0d18a,#9f7a2d 48%,#4e380c);box-shadow:0 2px 4px rgba(0,0,0,.65),0 0 4px rgba(255,211,100,.28);backface-visibility:hidden;}
.svc-press .sheet.left{left:12%;transform-origin:100% 50%;}
.svc-press .sheet.right{right:12%;transform-origin:0 50%;}
.svc-press .bend-glow{position:absolute;left:47%;top:55%;width:6%;height:8px;border-radius:50%;background:rgba(255,215,119,.7);box-shadow:0 0 8px rgba(255,205,89,.7);opacity:0;}
.svc-real-running .svc-press .upper{animation:svcPressUpper 1.38s ease-in-out both;}
.svc-real-running .svc-press .punch{animation:svcPressPunch 1.38s ease-in-out both;}
.svc-real-running .svc-press .sheet.left{animation:svcSheetLeft 1.38s ease-in-out both;}
.svc-real-running .svc-press .sheet.right{animation:svcSheetRight 1.38s ease-in-out both;}
.svc-real-running .svc-press .bend-glow{animation:svcBendGlow 1.38s ease both;}
@keyframes svcPressUpper{0%,8%{translate:0 0}47%,66%{translate:0 35px}100%{translate:0 4px}}
@keyframes svcPressPunch{0%,8%{translate:0 0}47%,66%{translate:0 34px}100%{translate:0 4px}}
@keyframes svcSheetLeft{0%,26%{transform:rotateZ(0)}50%,68%{transform:rotateZ(28deg)}100%{transform:rotateZ(19deg)}}
@keyframes svcSheetRight{0%,26%{transform:rotateZ(0)}50%,68%{transform:rotateZ(-28deg)}100%{transform:rotateZ(-19deg)}}
@keyframes svcBendGlow{0%,34%,78%,100%{opacity:0}48%,65%{opacity:1}}
/* ---------- WELDING ROBOT ---------- */
.svc-robot{position:absolute;z-index:34;inset:0;}
.svc-robot .base{position:absolute;right:8%;bottom:10%;width:35px;height:22px;border-radius:6px 6px 3px 3px;background:linear-gradient(90deg,#3d2b08,#d2a340 40%,#68480e 70%,#1e1608);box-shadow:0 5px 8px #000;}
.svc-robot .arm{position:absolute;height:11px;border-radius:999px;background:linear-gradient(#d1a23b,#76500f 48%,#291c08);box-shadow:0 2px 5px #000,inset 0 1px 2px rgba(255,255,255,.18);transform-origin:100% 50%;}
.svc-robot .a1{right:20%;bottom:30%;width:55px;transform:rotate(-52deg);}
.svc-robot .a2{right:48%;bottom:53%;width:44px;transform:rotate(22deg);transform-origin:100% 50%;}
.svc-robot .joint{position:absolute;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e1b65b,#6a470d 55%,#1e1607 75%);box-shadow:0 2px 4px #000;}
.svc-robot .j1{right:18%;bottom:29%;}.svc-robot .j2{right:45%;bottom:50%;}
.svc-robot .torch{position:absolute;left:30%;top:50%;width:28px;height:5px;border-radius:5px;background:linear-gradient(90deg,#8b8f90,#d9b252,#46494a);transform:rotate(22deg);transform-origin:100% 50%;}
.svc-robot .seam{position:absolute;left:19%;right:23%;top:67%;height:2px;background:linear-gradient(90deg,#37393a,#d98a18 20%,#fff1af 50%,#d98a18 72%,#333);box-shadow:0 0 5px rgba(255,167,33,.5);}
.svc-robot .arc{position:absolute;left:31%;top:61%;width:10px;height:10px;border-radius:50%;background:#efffff;box-shadow:0 0 5px #fff,0 0 12px #58e4ff,0 0 23px #126dff,0 0 37px rgba(0,92,255,.78);opacity:0;}
.svc-real-running .svc-robot .a1{animation:svcRobotA1 1.4s ease-in-out both;}
.svc-real-running .svc-robot .a2{animation:svcRobotA2 1.4s ease-in-out both;}
.svc-real-running .svc-robot .torch{animation:svcRobotTorch 1.4s ease-in-out both;}
.svc-real-running .svc-robot .arc{animation:svcWeldArc 1.4s steps(11,end) both;}
.svc-real-running .svc-robot .seam{animation:svcWeldSeam 1.4s ease both;}
@keyframes svcRobotA1{0%,8%{transform:rotate(-52deg)}42%{transform:rotate(-34deg)}72%{transform:rotate(-42deg)}100%{transform:rotate(-47deg)}}
@keyframes svcRobotA2{0%,8%{transform:rotate(22deg)}42%{transform:rotate(2deg)}72%{transform:rotate(14deg)}100%{transform:rotate(18deg)}}
@keyframes svcRobotTorch{0%,8%{left:30%;top:50%}42%{left:48%;top:55%}76%{left:63%;top:51%}100%{left:66%;top:49%}}
@keyframes svcWeldArc{0%,13%,95%,100%{opacity:0}17%{opacity:1}23%{opacity:.25}28%{opacity:1}35%{opacity:.45}40%,88%{opacity:1}91%{opacity:.2}}
@keyframes svcWeldSeam{0%,16%{filter:brightness(.45)}75%{filter:brightness(1.75)}100%{filter:brightness(.85)}}
/* ---------- TUBE CUTTER ---------- */
.svc-tube-machine{position:absolute;z-index:32;inset:0;}
.svc-tube-machine .body{position:absolute;left:5%;top:18%;width:46px;height:58%;border-radius:5px;background:linear-gradient(90deg,#121314,#5d6163 33%,#222426 67%,#070808);box-shadow:0 4px 10px #000;}
.svc-tube-machine .chuck{position:absolute;left:13%;top:27%;width:52px;height:52px;border-radius:50%;border:7px solid #787d80;background:radial-gradient(circle,#0b0c0d 0 25%,#3a3e40 27% 42%,#111 44%);box-shadow:0 3px 9px #000,inset 0 0 0 2px #a57a28;}
.svc-tube-machine .chuck b{position:absolute;left:50%;top:50%;width:26px;height:6px;background:linear-gradient(#d0a247,#65460d);transform-origin:0 50%;}
.svc-tube-machine .chuck b:nth-child(1){transform:rotate(0deg) translate(7px,-3px)}.svc-tube-machine .chuck b:nth-child(2){transform:rotate(90deg) translate(7px,-3px)}.svc-tube-machine .chuck b:nth-child(3){transform:rotate(180deg) translate(7px,-3px)}.svc-tube-machine .chuck b:nth-child(4){transform:rotate(270deg) translate(7px,-3px)}
.svc-tube-machine .pipe{position:absolute;left:31%;right:4%;top:48%;height:15px;border-radius:999px;background:linear-gradient(#a8afb2 0,#3c4245 30%,#171a1c 52%,#777e81 68%,#24282a 100%);box-shadow:0 4px 8px #000;}
.svc-tube-machine .pipe-highlight{position:absolute;left:32%;right:5%;top:50%;height:2px;background:linear-gradient(90deg,transparent 0,#edf6f7 30%,transparent 62%);opacity:.8;}
.svc-tube-machine .cut-head{position:absolute;right:24%;top:18%;width:16px;height:32px;background:linear-gradient(90deg,#171819,#9f7621,#303234);clip-path:polygon(10% 0,90% 0,100% 75%,65% 100%,35% 100%,0 75%);box-shadow:0 3px 6px #000;}
.svc-tube-machine .cut-glow{position:absolute;right:27%;top:49%;width:8px;height:8px;border-radius:50%;background:#fff2be;box-shadow:0 0 5px #fff,0 0 12px #ffbd31,0 0 20px #ff4f00;opacity:0;}
.svc-real-running .svc-tube-machine .chuck{animation:svcChuck 1.35s linear both;}
.svc-real-running .svc-tube-machine .pipe,.svc-real-running .svc-tube-machine .pipe-highlight{animation:svcPipeRoll .18s linear infinite;}
.svc-real-running .svc-tube-machine .cut-glow{animation:svcTubeGlow 1.35s ease both;}
@keyframes svcChuck{to{transform:rotate(1080deg)}}
@keyframes svcPipeRoll{0%{filter:brightness(.72)}50%{filter:brightness(1.38)}100%{filter:brightness(.72)}}
@keyframes svcTubeGlow{0%,12%,94%,100%{opacity:0}18%,88%{opacity:1}}
/* ---------- SIGN LIGHTING ---------- */
.svc-sign-real{position:absolute;z-index:30;inset:0;display:grid;place-items:center;}
.svc-sign-real .frame{position:absolute;left:14%;right:14%;top:18%;bottom:20%;border:3px solid #403613;border-radius:5px;background:linear-gradient(145deg,rgba(7,7,7,.93),rgba(23,20,12,.92));box-shadow:0 7px 14px rgba(0,0,0,.72);}
.svc-sign-real strong{position:relative;z-index:4;font-size:12px;letter-spacing:.16em;color:#292313;text-shadow:none;}
.svc-sign-real .lightwash{position:absolute;z-index:3;left:17%;right:17%;top:22%;bottom:25%;background:radial-gradient(ellipse at 50% 50%,rgba(255,215,106,.36),transparent 63%);opacity:0;}
.svc-sign-real .floor-glow{position:absolute;z-index:2;left:20%;right:20%;bottom:7%;height:18%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,177,35,.4),transparent 70%);filter:blur(3px);opacity:0;}
.svc-real-running .svc-sign-real .frame{animation:svcSignFrame 1.4s ease both;}
.svc-real-running .svc-sign-real strong{animation:svcSignText 1.4s ease both;}
.svc-real-running .svc-sign-real .lightwash,.svc-real-running .svc-sign-real .floor-glow{animation:svcSignGlow 1.4s ease both;}
@keyframes svcSignFrame{0%,20%{border-color:#403613;box-shadow:0 7px 14px #000}29%{border-color:#ddb13e;box-shadow:0 0 10px #ffc745,0 0 20px rgba(255,160,20,.35)}35%{border-color:#493b14;box-shadow:0 7px 14px #000}46%,100%{border-color:#e2b640;box-shadow:0 0 8px #ffe078,0 0 24px rgba(255,168,29,.48),0 7px 14px #000}}
@keyframes svcSignText{0%,22%{color:#292313;text-shadow:none}29%{color:#fff5ca;text-shadow:0 0 5px #fff,0 0 12px #ffc940,0 0 25px #ff8a00}36%{color:#3a2f12;text-shadow:none}47%,100%{color:#ffdb68;text-shadow:0 0 4px #fff6ce,0 0 11px #ffc642,0 0 24px rgba(255,137,0,.84)}}
@keyframes svcSignGlow{0%,40%{opacity:0}48%,100%{opacity:1}}
/* ---------- SLIDING SUPPORT ---------- */
.svc-support-real{position:absolute;z-index:31;inset:0;}
.svc-support-real .pipe{position:absolute;left:8%;right:8%;top:42%;height:19px;border-radius:999px;background:linear-gradient(#a4abad,#3a3f42 36%,#181b1d 54%,#7a8184 70%,#222628);box-shadow:0 5px 8px #000;}
.svc-support-real .shoe{position:absolute;left:30%;right:30%;bottom:12%;height:17px;background:linear-gradient(#6b7072,#1b1e20);clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);box-shadow:0 4px 6px #000;}
.svc-support-real .clamp{position:absolute;top:18%;width:34%;height:59%;border:5px solid #be9137;border-bottom-color:#5a3e0d;box-shadow:0 2px 5px #000;}
.svc-support-real .clamp.left{left:-12%;border-right:0;border-radius:45% 0 0 45%;}.svc-support-real .clamp.right{right:-12%;border-left:0;border-radius:0 45% 45% 0;}
.svc-support-real .bolt{position:absolute;top:18%;width:6px;height:62%;background:repeating-linear-gradient(180deg,#d4b15a 0 2px,#50370b 2px 4px);opacity:0;}.svc-support-real .b1{left:38%}.svc-support-real .b2{right:38%}
.svc-support-real .nut{position:absolute;top:18%;width:17px;height:10px;background:linear-gradient(#dfbd65,#72500f);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);opacity:0;}.svc-support-real .n1{left:calc(38% - 6px)}.svc-support-real .n2{right:calc(38% - 6px)}
.svc-real-running .svc-support-real .clamp.left{animation:svcClampLeft 1.4s cubic-bezier(.16,.8,.2,1) both;}.svc-real-running .svc-support-real .clamp.right{animation:svcClampRight 1.4s cubic-bezier(.16,.8,.2,1) both;}
.svc-real-running .svc-support-real .bolt{animation:svcBoltShow 1.4s ease both;}.svc-real-running .svc-support-real .nut{animation:svcSupportNut 1.4s cubic-bezier(.2,.75,.2,1) both;}
@keyframes svcClampLeft{0%,8%{left:-12%}55%,100%{left:17%}}@keyframes svcClampRight{0%,8%{right:-12%}55%,100%{right:17%}}
@keyframes svcBoltShow{0%,42%{opacity:0}52%,100%{opacity:1}}@keyframes svcSupportNut{0%,48%{opacity:0;top:17%;transform:rotate(0)}54%{opacity:1}88%,100%{opacity:1;top:55%;transform:rotate(720deg)}}
/* ---------- ANCHOR GROUP ---------- */
.svc-anchor-real{position:absolute;z-index:31;inset:0;}
.svc-anchor-real .plate{position:absolute;left:14%;right:14%;bottom:13%;height:15px;background:linear-gradient(#8e9497,#292d2f 45%,#141617);transform:perspective(120px) rotateX(18deg);box-shadow:0 6px 9px #000;}
.svc-anchor-real .rod{position:absolute;bottom:22%;width:6px;height:59%;background:repeating-linear-gradient(180deg,#bdc1c3 0 2px,#4f5457 2px 4px);box-shadow:1px 0 2px #000;}.svc-anchor-real .r1{left:27%}.svc-anchor-real .r2{left:43%}.svc-anchor-real .r3{right:43%}.svc-anchor-real .r4{right:27%}
.svc-anchor-real .nut{position:absolute;top:12%;width:17px;height:10px;background:linear-gradient(#e0bd66,#6d4a0c 55%,#2d1e06);clip-path:polygon(24% 0,76% 0,100% 50%,76% 100%,24% 100%,0 50%);box-shadow:0 2px 3px #000;}
.svc-anchor-real .n1{left:calc(27% - 6px)}.svc-anchor-real .n2{left:calc(43% - 6px)}.svc-anchor-real .n3{right:calc(43% - 6px)}.svc-anchor-real .n4{right:calc(27% - 6px)}
.svc-real-running .svc-anchor-real .nut{animation:svcAnchorNut 1.4s cubic-bezier(.14,.73,.2,1) both;}.svc-real-running .svc-anchor-real .n2{animation-delay:.04s}.svc-real-running .svc-anchor-real .n3{animation-delay:.08s}.svc-real-running .svc-anchor-real .n4{animation-delay:.12s}
@keyframes svcAnchorNut{0%,8%{top:12%;transform:rotate(0)}86%,100%{top:59%;transform:rotate(1080deg)}}
@media(max-width:760px){
.svc-real-caption{font-size:6.6px;bottom:4px;padding:3px 7px;max-width:94%;overflow:hidden;text-overflow:ellipsis;}
.svc-laser-machine .head{width:21px;height:32px}.svc-tube-machine .chuck{width:44px;height:44px;border-width:6px}.svc-sign-real strong{font-size:10px}.svc-robot .a1{width:46px}.svc-robot .a2{width:37px}
}
/* ==========================================================
24-08 SERVICES LIVE 3D V3 — website UI, no photos in 7 service cards
Mangal visual is unchanged until click.
========================================================== */
.service-card[data-service] > img{display:none!important;}
.service-card[data-service] .svc-3d-icon{
position:relative!important;left:auto!important;top:auto!important;
display:block!important;width:94%!important;height:82px!important;
margin:3px auto 0!important;opacity:1!important;overflow:hidden!important;
border-radius:7px!important;perspective:620px!important;isolation:isolate!important;
background:
radial-gradient(ellipse at 50% 115%,rgba(212,151,27,.19),transparent 48%),
linear-gradient(180deg,#15130f 0%,#090909 55%,#040404 100%)!important;
border:1px solid rgba(177,126,28,.35)!important;
box-shadow:inset 0 1px 0 rgba(255,231,177,.06),inset 0 -18px 35px rgba(0,0,0,.45),0 5px 12px rgba(0,0,0,.42)!important;
transform-style:preserve-3d!important;
}
.service-card[data-service] .svc-3d-icon::before{
content:"";position:absolute;left:4%;right:4%;bottom:5px;height:19px;z-index:0;
background:linear-gradient(180deg,rgba(62,58,49,.55),rgba(9,9,9,.15));
transform:perspective(110px) rotateX(63deg);transform-origin:center bottom;
border-top:1px solid rgba(205,166,79,.13);box-shadow:0 -4px 15px rgba(0,0,0,.5);
}
.service-card[data-service] .svc-3d-icon::after{
content:"";position:absolute;inset:0;z-index:50;pointer-events:none;
background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 17% 74%,rgba(221,165,47,.04));
mix-blend-mode:screen;
}
.service-card[data-service] .svc-real-caption{opacity:0!important;transition:opacity .15s ease!important;z-index:60!important;}
.service-card[data-service].svc-real-running .svc-real-caption{opacity:1!important;}
.service-card[data-service].svc-real-running .svc-3d-icon{
box-shadow:inset 0 1px 0 rgba(255,235,190,.09),0 0 18px rgba(234,175,52,.24),0 8px 18px rgba(0,0,0,.5)!important;
}
/* Laser: richer machine body, 3D bed and moving gantry. */
.svc-3d-icon[data-kind="laser"] .svc-laser-machine::before{
content:"";position:absolute;left:8%;right:7%;bottom:17%;height:25%;z-index:-1;
background:linear-gradient(180deg,#55595b 0,#1b1d1e 35%,#080909 100%);
clip-path:polygon(4% 0,96% 0,100% 88%,90% 100%,8% 100%,0 84%);
border-top:1px solid #8d6b25;box-shadow:0 7px 9px #000;
}
.svc-3d-icon[data-kind="laser"] .svc-laser-machine::after{
content:"";position:absolute;left:13%;right:12%;bottom:32%;height:7%;
background:repeating-linear-gradient(90deg,#1e2122 0 5px,#555b5e 5px 7px,#0d0e0f 7px 11px);
transform:skewX(-8deg);box-shadow:0 2px 5px #000;
}
.svc-3d-icon[data-kind="laser"] .rail{top:18%!important;height:10px!important;left:15%!important;right:13%!important;background:linear-gradient(#a37521,#332409)!important;box-shadow:0 2px 4px #000!important;}
.svc-3d-icon[data-kind="laser"] .head{z-index:8!important;border-radius:4px!important;background:linear-gradient(90deg,#101112,#a57b27 34%,#292b2c 68%,#080909)!important;box-shadow:3px 4px 8px #000,inset 1px 0 rgba(255,232,173,.18)!important;}
.svc-3d-icon[data-kind="laser"] .nozzle{z-index:9!important;background:linear-gradient(90deg,#d8dad9,#6f7475 35%,#d4a84e 70%,#4a4d4e)!important;}
/* Press brake: full side frames + ram, more machine-like at rest. */
.svc-3d-icon[data-kind="bend"] .svc-press::before,.svc-3d-icon[data-kind="bend"] .svc-press::after{
content:"";position:absolute;top:12%;bottom:12%;width:13%;border-radius:4px;
background:linear-gradient(90deg,#101112,#84611d 42%,#2c2d2d 72%,#090a0a);box-shadow:0 4px 8px #000;
}
.svc-3d-icon[data-kind="bend"] .svc-press::before{left:8%}.svc-3d-icon[data-kind="bend"] .svc-press::after{right:8%}
.svc-3d-icon[data-kind="bend"] .upper{left:12%!important;right:12%!important;height:16%!important;background:linear-gradient(#6c501a,#18191a)!important;border-bottom:2px solid #9d7628!important;box-shadow:0 5px 9px #000!important;}
.svc-3d-icon[data-kind="bend"] .lower{left:16%!important;right:16%!important;background:linear-gradient(#7e8587,#222526 40%,#0b0c0c)!important;box-shadow:0 5px 8px #000!important;}
/* Robot cell: platform and stronger metallic volume. */
.svc-3d-icon[data-kind="weld"] .svc-robot::before{
content:"";position:absolute;left:8%;right:7%;bottom:13%;height:17%;
background:linear-gradient(#505558,#151718 50%,#080909);transform:skewX(-10deg);box-shadow:0 6px 9px #000;
}
.svc-3d-icon[data-kind="weld"] .base{background:radial-gradient(ellipse at 50% 15%,#d0a445,#5d410e 44%,#19160e 72%,#070707)!important;box-shadow:0 5px 8px #000!important;}
.svc-3d-icon[data-kind="weld"] .arm{height:10px!important;background:linear-gradient(#e0b850 0,#755216 38%,#30240f 65%,#b8882d)!important;box-shadow:0 3px 5px #000!important;border-radius:8px!important;}
/* Tube cutter: long machine bed + control block. */
.svc-3d-icon[data-kind="tube"] .svc-tube-machine::before{
content:"";position:absolute;left:8%;right:4%;bottom:14%;height:23%;
background:linear-gradient(#515658,#17191a 42%,#080909);clip-path:polygon(3% 0,97% 0,100% 85%,92% 100%,5% 100%,0 82%);box-shadow:0 7px 9px #000;
}
.svc-3d-icon[data-kind="tube"] .body{z-index:2!important;border:1px solid rgba(197,148,48,.38)!important;}
.svc-3d-icon[data-kind="tube"] .chuck{z-index:5!important;box-shadow:0 4px 10px #000,inset 0 0 0 2px #a57a28,0 0 0 1px #222!important;}
.svc-3d-icon[data-kind="tube"] .pipe{z-index:4!important;}
/* Sign: freestanding illuminated pylon, with feet. */
.svc-3d-icon[data-kind="sign"] .svc-sign-real::before,.svc-3d-icon[data-kind="sign"] .svc-sign-real::after{
content:"";position:absolute;bottom:8%;width:4px;height:18%;background:linear-gradient(#806020,#24201a);z-index:1;
}
.svc-3d-icon[data-kind="sign"] .svc-sign-real::before{left:30%}.svc-3d-icon[data-kind="sign"] .svc-sign-real::after{right:30%}
.svc-3d-icon[data-kind="sign"] .frame{left:18%!important;right:18%!important;top:10%!important;bottom:24%!important;border-width:2px!important;transform:perspective(300px) rotateY(-4deg)!important;box-shadow:7px 7px 13px #000,inset 0 0 18px rgba(255,191,55,.03)!important;}
.svc-3d-icon[data-kind="sign"] strong{font-size:9px!important;letter-spacing:.11em!important;}
/* Support: pipe and foot are visible as a real assembly before click. */
.svc-3d-icon[data-kind="support"] .pipe{top:39%!important;height:17px!important;z-index:4!important;}
.svc-3d-icon[data-kind="support"] .shoe{z-index:2!important;height:18px!important;background:linear-gradient(#858b8e,#282b2d 42%,#101112)!important;box-shadow:0 5px 7px #000!important;}
.svc-3d-icon[data-kind="support"] .clamp{z-index:5!important;filter:drop-shadow(0 3px 2px #000);}
/* Anchor group: realistic base plate perspective + threaded rods. */
.svc-3d-icon[data-kind="anchor"] .plate{left:10%!important;right:10%!important;bottom:10%!important;height:18px!important;transform:perspective(150px) rotateX(28deg)!important;background:linear-gradient(#9da2a5,#303436 46%,#111314)!important;box-shadow:0 8px 10px #000!important;}
.svc-3d-icon[data-kind="anchor"] .rod{z-index:3!important;filter:drop-shadow(2px 1px 1px #000);}
.svc-3d-icon[data-kind="anchor"] .nut{z-index:5!important;filter:drop-shadow(0 2px 1px #000);}
/* MANGAL: no change at rest. These elements are completely invisible until click. */
.mangal-cooked-fx{position:absolute;inset:0;z-index:20;opacity:0;pointer-events:none;transition:none;}
.mangal-cooked-fx .skewer{position:absolute;left:15%;right:10%;height:3px;background:linear-gradient(90deg,#d9ddde,#6d7274 40%,#e5e7e7);transform-origin:50% 50%;filter:drop-shadow(0 2px 1px #000);}
.mangal-cooked-fx .k1{top:39%;transform:rotate(-4deg) translateX(-12px)}
.mangal-cooked-fx .k2{top:52%;transform:rotate(3deg) translateX(12px)}
.mangal-cooked-fx .skewer b{position:absolute;top:-7px;width:15px;height:13px;border-radius:40% 45% 38% 50%;background:linear-gradient(145deg,#d98430 0,#8e351b 35%,#4d1d12 63%,#c76824 83%,#522012 100%);box-shadow:inset 2px 2px 3px rgba(255,190,95,.35),0 2px 3px #000;}
.mangal-cooked-fx .skewer b::after{content:"";position:absolute;left:3px;right:3px;top:2px;height:2px;border-radius:50%;background:rgba(255,211,117,.48);}
.mangal-cooked-fx .skewer b:nth-child(1){left:17%}.mangal-cooked-fx .skewer b:nth-child(2){left:35%}.mangal-cooked-fx .skewer b:nth-child(3){left:53%}.mangal-cooked-fx .skewer b:nth-child(4){left:71%}
.mangal-cooked-fx .steam{position:absolute;bottom:48%;width:3px;height:20px;border-radius:50%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.42),transparent);filter:blur(1px);opacity:0;}
.mangal-cooked-fx .st1{left:39%}.mangal-cooked-fx .st2{left:61%}
.mangal-service-card.mangal-cooked-running .mangal-cooked-fx{animation:mangalCookedReveal 1.4s ease both;}
.mangal-service-card.mangal-cooked-running .mangal-cooked-fx .k1{animation:mangalSkewer1 1.4s cubic-bezier(.2,.75,.2,1) both;}
.mangal-service-card.mangal-cooked-running .mangal-cooked-fx .k2{animation:mangalSkewer2 1.4s cubic-bezier(.2,.75,.2,1) both;}
.mangal-service-card.mangal-cooked-running .mangal-cooked-fx .steam{animation:mangalSteam .9s .38s ease-in-out infinite;}
.mangal-service-card.mangal-cooked-running .fire-glow{animation:mangalFireFinish 1.4s ease both;}
@keyframes mangalCookedReveal{0%,8%{opacity:0}20%,100%{opacity:1}}
@keyframes mangalSkewer1{0%,10%{transform:rotate(-4deg) translateX(-34px) translateY(-8px)}34%,100%{transform:rotate(-4deg) translateX(0) translateY(0)}}
@keyframes mangalSkewer2{0%,10%{transform:rotate(3deg) translateX(34px) translateY(-8px)}38%,100%{transform:rotate(3deg) translateX(0) translateY(0)}}
@keyframes mangalSteam{0%{opacity:0;transform:translateY(6px) scaleY(.7)}50%{opacity:.7}100%{opacity:0;transform:translateY(-11px) scaleY(1.25)}}
@keyframes mangalFireFinish{0%,100%{filter:none}45%{filter:brightness(1.35) saturate(1.35)}}
@media(max-width:999px){
.service-card[data-service] .svc-3d-icon{height:72px!important;width:94%!important;margin:3px auto 0!important;}
.svc-3d-icon[data-kind="sign"] strong{font-size:8px!important;}
}
@media(max-width:420px){
.service-card[data-service] .svc-3d-icon{height:70px!important;}
}
/* ===== Services realistic 3D render icons V4 ===== */
.svc-photo-stage{overflow:hidden;display:block}
.svc-photo-stage .svc-render-asset{position:absolute;inset:0;border-radius:12px;background:radial-gradient(circle at 50% 18%,rgba(255,217,118,.12),rgba(6,6,6,.05) 35%,rgba(4,4,4,.95) 100%);overflow:hidden;isolation:isolate}
.svc-photo-stage .svc-render-photo{position:absolute;left:50%;top:50%;transform:translate(-50%,-53%);width:90%;height:84%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.55)) drop-shadow(0 4px 8px rgba(255,190,72,.18));transition:transform .35s ease, filter .35s ease, opacity .35s ease}
.svc-photo-stage[data-kind="weld"] .svc-render-photo{width:76%;height:92%;object-position:center 12%}
.svc-photo-stage[data-kind="sign"] .svc-render-photo{width:78%;height:88%;object-position:center 35%;border-radius:10px;box-shadow:0 0 0 1px rgba(218,160,49,.18),0 14px 28px rgba(0,0,0,.35)}
.svc-photo-stage[data-kind="support"] .svc-render-photo{width:92%;height:84%;object-position:center center;border-radius:10px}
.svc-photo-stage[data-kind="anchor"] .svc-render-photo{width:80%;height:68%;image-rendering:auto;filter:drop-shadow(0 14px 16px rgba(0,0,0,.5)) drop-shadow(0 3px 6px rgba(255,187,64,.14))}
.svc-photo-stage .svc-floor{position:absolute;left:10%;right:10%;bottom:10px;height:16px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(240,177,46,.24),rgba(40,24,4,.16) 45%,rgba(0,0,0,0) 70%);filter:blur(2px);opacity:.9}
.svc-photo-stage .fx-sparks b{position:absolute;width:3px;height:16px;border-radius:999px;background:linear-gradient(180deg,#fff8cb,#ffcb5b 55%,rgba(255,118,16,.2));left:50%;top:58%;opacity:0;transform-origin:50% 0;box-shadow:0 0 6px rgba(255,210,92,.45)}
.svc-photo-stage[data-kind="laser"] .fx-sparks b{left:62%;top:63%}
.svc-photo-stage[data-kind="weld"] .fx-sparks b{left:60%;top:61%}
.svc-photo-stage[data-kind="tube"] .fx-sparks b{left:68%;top:58%}
.svc-photo-stage .fx-head,.svc-photo-stage .fx-beam,.svc-photo-stage .fx-kerf,.svc-photo-stage .fx-glow,.svc-photo-stage .fx-punch,.svc-photo-stage .fx-sheet,.svc-photo-stage .fx-fold,.svc-photo-stage .fx-arc,.svc-photo-stage .fx-seam,.svc-photo-stage .fx-rotor,.svc-photo-stage .fx-pipe,.svc-photo-stage .fx-cut,.svc-photo-stage .fx-sign-glow,.svc-photo-stage .fx-sign-reflect,.svc-photo-stage .fx-clamp,.svc-photo-stage .fx-nut,.svc-photo-stage .fx-rod{position:absolute;pointer-events:none;opacity:.92}
.svc-photo-stage[data-kind="laser"] .fx-head{left:46%;top:25%;width:16%;height:30%;border-radius:10px;background:linear-gradient(180deg,rgba(255,233,180,.18),rgba(0,0,0,0) 26%),linear-gradient(90deg,#161616,#3d3d3d 40%,#101010);box-shadow:0 0 0 1px rgba(255,191,70,.10),0 10px 16px rgba(0,0,0,.32)}
.svc-photo-stage[data-kind="laser"] .fx-beam{left:56%;top:55%;width:2px;height:0;background:linear-gradient(180deg,rgba(158,226,255,.0),rgba(132,238,255,.95) 35%,rgba(255,220,126,.96));box-shadow:0 0 10px rgba(87,235,255,.75),0 0 22px rgba(255,206,83,.5)}
.svc-photo-stage[data-kind="laser"] .fx-kerf{left:56%;top:68%;width:0;height:2px;background:linear-gradient(90deg,#ffefab,#ffbd49);box-shadow:0 0 12px rgba(255,202,94,.8)}
.svc-photo-stage[data-kind="laser"] .fx-glow{left:52%;top:64%;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff7bf 0,#ffc148 45%,rgba(255,136,24,0) 75%);filter:blur(.4px)}
.svc-photo-stage[data-kind="bend"] .fx-punch{left:42%;top:16%;width:18%;height:18%;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#747474,#1c1c1c 55%,#6b6b6b);box-shadow:0 0 0 1px rgba(255,198,74,.15),0 8px 14px rgba(0,0,0,.35)}
.svc-photo-stage[data-kind="bend"] .fx-sheet{left:25%;top:64%;width:50%;height:4px;background:linear-gradient(90deg,#827253,#e7d6a6,#7a6845);box-shadow:0 0 10px rgba(255,214,132,.22)}
.svc-photo-stage[data-kind="bend"] .fx-fold{top:63%;width:18%;height:4px;background:linear-gradient(90deg,#6c5d3d,#d7c696,#7a6845);transform-origin:center center}
.svc-photo-stage[data-kind="bend"] .fx-left{left:29%}.svc-photo-stage[data-kind="bend"] .fx-right{left:53%}
.svc-photo-stage[data-kind="bend"] .fx-glow{left:46%;top:61%;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,rgba(255,235,178,.75),rgba(255,185,62,.7) 45%,rgba(255,137,22,0) 80%)}
.svc-photo-stage[data-kind="weld"] .fx-arc{left:58%;top:58%;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#ffffff 0,#8be4ff 30%,rgba(57,177,255,.82) 48%,rgba(57,177,255,0) 72%);filter:blur(.25px);opacity:0}
.svc-photo-stage[data-kind="weld"] .fx-seam{left:48%;top:69%;width:24%;height:3px;background:linear-gradient(90deg,rgba(255,209,90,.2),#ffd875,rgba(255,209,90,.1));opacity:0;box-shadow:0 0 10px rgba(255,220,121,.28)}
.svc-photo-stage[data-kind="tube"] .fx-rotor{left:15%;top:34%;width:26%;height:26%;border-radius:50%;border:4px solid rgba(216,174,79,.9);box-shadow:inset 0 0 0 3px rgba(34,34,34,.55),0 0 10px rgba(255,197,75,.24)}
.svc-photo-stage[data-kind="tube"] .fx-rotor::before,.svc-photo-stage[data-kind="tube"] .fx-rotor::after{content:"";position:absolute;left:50%;top:50%;width:70%;height:2px;background:rgba(255,222,149,.9);transform:translate(-50%,-50%)}
.svc-photo-stage[data-kind="tube"] .fx-rotor::after{transform:translate(-50%,-50%) rotate(90deg)}
.svc-photo-stage[data-kind="tube"] .fx-pipe{left:33%;top:46%;width:42%;height:10px;border-radius:999px;background:linear-gradient(180deg,#979797,#efefef 48%,#7c7c7c);box-shadow:0 3px 5px rgba(0,0,0,.22)}
.svc-photo-stage[data-kind="tube"] .fx-cut{left:67%;top:43%;width:8px;height:18px;border-radius:8px;background:radial-gradient(circle at 50% 70%,#fff8b9 0,#ffc24b 40%,rgba(255,139,28,.1) 72%);box-shadow:0 0 14px rgba(255,198,84,.5)}
.svc-photo-stage[data-kind="sign"] .fx-sign-glow{inset:20% 16% 28% 16%;border-radius:10px;background:radial-gradient(circle at 50% 48%,rgba(255,208,98,.0) 0,rgba(255,208,98,.0) 36%,rgba(255,208,98,.34) 66%,rgba(255,208,98,0) 100%);mix-blend-mode:screen;opacity:.25}
.svc-photo-stage[data-kind="sign"] .fx-sign-reflect{left:20%;right:20%;bottom:12px;height:18px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,197,84,.44),rgba(255,197,84,.08) 40%,rgba(0,0,0,0) 68%);filter:blur(2px);opacity:.28}
.svc-photo-stage[data-kind="support"] .fx-clamp{top:38%;width:24px;height:40px;border:3px solid rgba(221,221,221,.95);border-radius:18px;background:rgba(36,36,36,.38);box-shadow:0 5px 10px rgba(0,0,0,.28)}
.svc-photo-stage[data-kind="support"] .fx-clamp.left{left:30%}.svc-photo-stage[data-kind="support"] .fx-clamp.right{right:30%}
.svc-photo-stage[data-kind="support"] .fx-nut{top:63%;width:13px;height:13px;background:linear-gradient(135deg,#7b7b7b,#efefef 52%,#666);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);box-shadow:0 3px 6px rgba(0,0,0,.25)}
.svc-photo-stage[data-kind="support"] .fx-nut.n1{left:39%}.svc-photo-stage[data-kind="support"] .fx-nut.n2{right:39%}
.svc-photo-stage[data-kind="anchor"] .fx-rod{top:34%;width:5px;height:34%;background:linear-gradient(180deg,#5d5d5d,#efefef 46%,#747474);box-shadow:0 0 2px rgba(0,0,0,.25)}
.svc-photo-stage[data-kind="anchor"] .fx-rod.r1{left:31%}.svc-photo-stage[data-kind="anchor"] .fx-rod.r2{left:43%}.svc-photo-stage[data-kind="anchor"] .fx-rod.r3{left:55%}.svc-photo-stage[data-kind="anchor"] .fx-rod.r4{left:67%}
.svc-photo-stage[data-kind="anchor"] .fx-nut{top:53%;width:12px;height:12px;background:linear-gradient(135deg,#7f7f7f,#f4f4f4 52%,#666);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);box-shadow:0 2px 5px rgba(0,0,0,.25)}
.svc-photo-stage[data-kind="anchor"] .fx-nut.n1{left:28%}.svc-photo-stage[data-kind="anchor"] .fx-nut.n2{left:40%}.svc-photo-stage[data-kind="anchor"] .fx-nut.n3{left:52%}.svc-photo-stage[data-kind="anchor"] .fx-nut.n4{left:64%}
.service-card .svc-real-caption{position:absolute;left:8px;right:8px;bottom:7px;padding:5px 7px;border-radius:8px;background:rgba(10,10,10,.76);border:1px solid rgba(235,178,58,.28);font-size:9px;font-weight:800;letter-spacing:.4px;color:#f7d37a;opacity:0;transform:translateY(8px);transition:all .28s ease;z-index:4;text-align:center;box-shadow:0 10px 16px rgba(0,0,0,.28)}
.service-card.svc-real-running .svc-real-caption{opacity:1;transform:translateY(0)}
.service-card:hover .svc-photo-stage .svc-render-photo{transform:translate(-50%,-54%) scale(1.03);filter:drop-shadow(0 20px 24px rgba(0,0,0,.58)) drop-shadow(0 5px 10px rgba(255,193,78,.2))}
.service-card.svc-real-running .svc-render-photo{filter:drop-shadow(0 22px 26px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(255,192,78,.16))}
.service-card.svc-real-running[data-service="Лазерная резка"] .fx-head{animation:svcLaserHead 1.25s ease-in-out forwards}.service-card.svc-real-running[data-service="Лазерная резка"] .fx-beam{animation:svcLaserBeam 1.25s ease-in-out forwards}.service-card.svc-real-running[data-service="Лазерная резка"] .fx-kerf{animation:svcLaserKerf 1.25s ease-in-out forwards}.service-card.svc-real-running[data-service="Лазерная резка"] .fx-glow{animation:svcLaserGlow 1.25s ease-in-out forwards}.service-card.svc-real-running[data-service="Лазерная резка"] .fx-sparks b{animation:svcSparkBurst 780ms linear infinite;animation-delay:calc(var(--i)*22ms)}
.service-card.svc-real-running[data-service="Гибка металла"] .fx-punch{animation:svcPunch 1.18s ease-in-out forwards}.service-card.svc-real-running[data-service="Гибка металла"] .fx-sheet{animation:svcSheetCenter 1.18s ease-in-out forwards}.service-card.svc-real-running[data-service="Гибка металла"] .fx-left{animation:svcFoldLeft 1.18s ease-in-out forwards}.service-card.svc-real-running[data-service="Гибка металла"] .fx-right{animation:svcFoldRight 1.18s ease-in-out forwards}.service-card.svc-real-running[data-service="Гибка металла"] .fx-glow{animation:svcGlowPulse 1.18s ease-in-out forwards}
.service-card.svc-real-running[data-service="Сварочные работы"] .svc-render-photo{animation:svcWeldRobot 1.2s ease-in-out forwards}.service-card.svc-real-running[data-service="Сварочные работы"] .fx-arc{animation:svcArcFlash 1.05s ease-in-out forwards}.service-card.svc-real-running[data-service="Сварочные работы"] .fx-seam{animation:svcSeamGlow 1.1s ease-in-out forwards}.service-card.svc-real-running[data-service="Сварочные работы"] .fx-sparks b{animation:svcSparkBurst 700ms linear infinite;animation-delay:calc(var(--i)*18ms)}
.service-card.svc-real-running[data-service="Трубообработка"] .fx-rotor{animation:svcRotorSpin 1s linear infinite}.service-card.svc-real-running[data-service="Трубообработка"] .fx-pipe{animation:svcPipeSpin 1.15s ease-in-out forwards}.service-card.svc-real-running[data-service="Трубообработка"] .fx-cut{animation:svcTubeCut 1.15s ease-in-out forwards}.service-card.svc-real-running[data-service="Трубообработка"] .fx-sparks b{animation:svcSparkBurst 720ms linear infinite;animation-delay:calc(var(--i)*18ms)}
.service-card.svc-real-running[data-service="Рекламные щиты"] .svc-render-photo{animation:svcSignOn 1.15s ease-in-out forwards}.service-card.svc-real-running[data-service="Рекламные щиты"] .fx-sign-glow{animation:svcSignGlow 1.15s ease-in-out forwards}.service-card.svc-real-running[data-service="Рекламные щиты"] .fx-sign-reflect{animation:svcSignReflect 1.15s ease-in-out forwards}
.service-card.svc-real-running[data-service="Скользящие опоры"] .fx-clamp.left{animation:svcClampLeft 1.1s ease-in-out forwards}.service-card.svc-real-running[data-service="Скользящие опоры"] .fx-clamp.right{animation:svcClampRight 1.1s ease-in-out forwards}.service-card.svc-real-running[data-service="Скользящие опоры"] .fx-nut.n1{animation:svcNutSpinDown 1.1s ease-in-out forwards}.service-card.svc-real-running[data-service="Скользящие опоры"] .fx-nut.n2{animation:svcNutSpinDown 1.1s ease-in-out forwards .08s}
.service-card.svc-real-running[data-service="Анкерные группы"] .fx-nut.n1{animation:svcAnchorNut 1.1s ease-in-out forwards}.service-card.svc-real-running[data-service="Анкерные группы"] .fx-nut.n2{animation:svcAnchorNut 1.1s ease-in-out forwards .06s}.service-card.svc-real-running[data-service="Анкерные группы"] .fx-nut.n3{animation:svcAnchorNut 1.1s ease-in-out forwards .12s}.service-card.svc-real-running[data-service="Анкерные группы"] .fx-nut.n4{animation:svcAnchorNut 1.1s ease-in-out forwards .18s}
@keyframes svcLaserHead{0%{transform:translateX(-22px)}20%{transform:translateX(-8px)}75%{transform:translateX(34px)}100%{transform:translateX(58px)}}
@keyframes svcLaserBeam{0%,12%{height:0;top:57%}18%{height:18%;top:45%}75%{height:18%;top:45%;left:64%}100%{height:18%;top:45%;left:72%}}
@keyframes svcLaserKerf{0%,12%{width:0;left:56%}22%{width:8%;left:56%}75%{width:18%;left:56%}100%{width:22%;left:56%}}
@keyframes svcLaserGlow{0%,10%{transform:scale(.5);opacity:0}20%,80%{transform:scale(1.4);opacity:1}100%{transform:scale(1);opacity:.75}}
@keyframes svcSparkBurst{0%{opacity:0;transform:translate(0,0) rotate(calc(var(--i)*16deg)) scale(.55)}12%{opacity:1}100%{opacity:0;transform:translate(calc((var(--i) - 8) * 2px),calc(18px + (var(--i)%6)*4px)) rotate(calc(var(--i)*16deg)) scale(1)}}
@keyframes svcPunch{0%,20%{transform:translateY(0)}55%,72%{transform:translateY(34px)}100%{transform:translateY(0)}}
@keyframes svcSheetCenter{0%,20%{transform:scaleX(1)}58%{transform:scaleX(.92)}100%{transform:scaleX(.97)}}
@keyframes svcFoldLeft{0%,25%{transform:rotate(0deg)}58%,72%{transform:rotate(-28deg)}100%{transform:rotate(-18deg)}}
@keyframes svcFoldRight{0%,25%{transform:rotate(0deg)}58%,72%{transform:rotate(28deg)}100%{transform:rotate(18deg)}}
@keyframes svcGlowPulse{0%,18%{opacity:0;transform:scale(.6)}55%{opacity:1;transform:scale(1.35)}100%{opacity:.25;transform:scale(1)}}
@keyframes svcWeldRobot{0%{transform:translate(-50%,-53%) rotate(0deg)}25%{transform:translate(-49%,-53%) rotate(1deg)}60%{transform:translate(-50%,-53%) rotate(-1.2deg)}100%{transform:translate(-50%,-53%) rotate(0deg)}}
@keyframes svcArcFlash{0%,18%{opacity:0;transform:scale(.2)}25%,70%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(.65)}}
@keyframes svcSeamGlow{0%,18%{opacity:0;width:0}35%,80%{opacity:1;width:24%}100%{opacity:.2;width:26%}}
@keyframes svcRotorSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes svcPipeSpin{0%{transform:translateX(0)}25%,80%{transform:translateX(10px)}100%{transform:translateX(0)}}
@keyframes svcTubeCut{0%,12%{opacity:0;transform:scale(.6)}22%,78%{opacity:1;transform:scale(1.15)}100%{opacity:.35;transform:scale(.85)}}
@keyframes svcSignOn{0%,10%{filter:brightness(.55) saturate(.75) drop-shadow(0 14px 18px rgba(0,0,0,.55))}20%{filter:brightness(1.35) saturate(1.18) drop-shadow(0 0 14px rgba(255,202,88,.35))}34%{filter:brightness(.75) saturate(.9)}52%,100%{filter:brightness(1.2) saturate(1.1) drop-shadow(0 0 18px rgba(255,203,93,.42))}}
@keyframes svcSignGlow{0%,12%{opacity:.05}22%{opacity:.9}35%{opacity:.2}52%,100%{opacity:.72}}
@keyframes svcSignReflect{0%,12%{opacity:.1;transform:scaleX(.7)}52%,100%{opacity:.75;transform:scaleX(1.12)}}
@keyframes svcClampLeft{0%,18%{transform:translateX(-16px)}56%,74%{transform:translateX(0)}100%{transform:translateX(-3px)}}
@keyframes svcClampRight{0%,18%{transform:translateX(16px)}56%,74%{transform:translateX(0)}100%{transform:translateX(3px)}}
@keyframes svcNutSpinDown{0%{transform:translateY(-10px) rotate(0)}60%{transform:translateY(0) rotate(540deg)}100%{transform:translateY(1px) rotate(720deg)}}
@keyframes svcAnchorNut{0%{transform:translateY(-12px) rotate(0)}55%{transform:translateY(0) rotate(520deg)}100%{transform:translateY(3px) rotate(720deg)}}
@media (max-width:760px){.svc-photo-stage .svc-render-photo{width:88%;height:82%}.svc-photo-stage[data-kind="weld"] .svc-render-photo{width:78%;height:91%}.svc-photo-stage[data-kind="anchor"] .svc-render-photo{width:84%;height:72%}.service-card .svc-real-caption{font-size:8px;bottom:6px;left:6px;right:6px;padding:4px 6px}}
/* ===== IRON LAZER LIVE 3D LASER MOCKUP ===== */
.laser3d-card{position:relative;overflow:hidden}
.laser3d-card .laser3d-stage{
position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:118px!important;
display:block!important;overflow:hidden;border-radius:8px;
background:
radial-gradient(120% 85% at 72% 12%,rgba(255,191,65,.16),transparent 42%),
linear-gradient(180deg,#12100c 0%,#090806 54%,#050505 100%);
border:1px solid rgba(207,151,39,.32);
box-shadow:inset 0 1px 0 rgba(255,228,162,.08),inset 0 -18px 30px rgba(0,0,0,.36),0 8px 18px rgba(0,0,0,.24);
isolation:isolate;
}
.laser3d-canvas{display:block;width:100%;height:100%;touch-action:manipulation}
.laser3d-hint{
position:absolute;left:8px;right:8px;bottom:5px;z-index:4;text-align:center;
font-size:7.2px;letter-spacing:1.05px;font-weight:900;color:rgba(255,220,143,.82);
text-shadow:0 1px 5px #000;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
.laser3d-card.svc-real-running .laser3d-hint{opacity:0;transform:translateY(4px)}
.laser3d-card .svc-real-caption,.tube3d-card .svc-real-caption{z-index:5;bottom:5px!important;top:auto!important;font-size:7px!important;letter-spacing:.65px!important}
@media(max-width:760px){
.laser3d-card .laser3d-stage{height:112px!important}
.laser3d-hint{font-size:6.7px;letter-spacing:.8px}
}
/* ===== IRON LAZER LIVE 3D TUBE CUTTER MOCKUP ===== */
.tube3d-card{position:relative;overflow:hidden}
.tube3d-card .tube3d-stage{
position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:118px!important;
display:block!important;overflow:hidden;border-radius:8px;
background:
radial-gradient(115% 90% at 76% 16%,rgba(255,191,65,.16),transparent 38%),
linear-gradient(180deg,#12100c 0%,#090806 54%,#050505 100%);
border:1px solid rgba(207,151,39,.32);
box-shadow:inset 0 1px 0 rgba(255,228,162,.08),inset 0 -18px 30px rgba(0,0,0,.36),0 8px 18px rgba(0,0,0,.24);
isolation:isolate;
}
.tube3d-canvas{display:block;width:100%;height:100%;touch-action:manipulation}
.tube3d-hint{
position:absolute;left:8px;right:8px;bottom:5px;z-index:4;text-align:center;
font-size:7.2px;letter-spacing:1.05px;font-weight:900;color:rgba(255,220,143,.82);
text-shadow:0 1px 5px #000;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
.tube3d-card.svc-real-running .tube3d-hint{opacity:0;transform:translateY(4px)}
@media(max-width:760px){
.tube3d-card .tube3d-stage{height:112px!important}
.tube3d-hint{font-size:6.7px;letter-spacing:.8px}
}
/* ===== GOLD PHOTO -> LIVE 3D SERVICE CARDS V5 ===== */
.service3d-card{position:relative!important;overflow:hidden!important}
.service3d-card .service-visual-switch{
position:relative;width:100%;height:118px;margin:0 auto 4px;border-radius:8px;overflow:hidden;
background:radial-gradient(110% 90% at 70% 10%,rgba(255,194,71,.14),transparent 42%),linear-gradient(180deg,#12100c,#060606);
border:1px solid rgba(207,151,39,.30);box-shadow:inset 0 1px rgba(255,228,162,.07),0 7px 18px rgba(0,0,0,.24);
}
.service3d-card .service-gold-photo{
position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;
object-fit:contain!important;background:transparent!important;border-radius:0!important;padding:4px!important;
opacity:1;transform:scale(1);filter:drop-shadow(0 12px 12px rgba(0,0,0,.55)) saturate(1.08) contrast(1.04);
transition:opacity .30s ease,transform .45s ease,filter .35s ease;z-index:2;
}
.service3d-card[data-kind="sign"] .service-gold-photo,.service3d-card[data-kind="support"] .service-gold-photo,.service3d-card[data-kind="anchor"] .service-gold-photo{object-fit:contain!important;object-position:center 50%!important;padding:4px!important;filter:drop-shadow(0 14px 18px rgba(0,0,0,.58)) saturate(1.06) contrast(1.05)!important}
.service3d-card[data-kind="support"] .service-gold-photo{object-fit:contain!important;object-position:center 50%!important;padding:3px!important;filter:drop-shadow(0 14px 18px rgba(0,0,0,.56)) saturate(1.06) contrast(1.05)!important}
.service3d-card[data-kind="anchor"] .service-gold-photo{object-fit:contain!important;object-position:center 50%!important;padding:4px!important;filter:drop-shadow(0 14px 18px rgba(0,0,0,.58)) saturate(1.06) contrast(1.05)!important}
.service3d-card .service3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transform:scale(.965);transition:opacity .30s .10s ease,transform .45s .08s ease;z-index:1;touch-action:manipulation}
.service3d-card .service3d-caption{position:absolute;left:7px;right:7px;bottom:5px;z-index:4;padding:4px 5px;border-radius:5px;background:rgba(0,0,0,.64);border:1px solid rgba(222,164,51,.38);color:#ffd36d;font-size:7px;font-weight:900;letter-spacing:.65px;text-align:center;opacity:0;transform:translateY(5px);transition:opacity .2s .18s ease,transform .25s .18s ease;text-shadow:0 1px 4px #000}
.service3d-card.service3d-running .service-gold-photo{opacity:0;transform:scale(1.07);filter:blur(2px) saturate(.9)}
.service3d-card.service3d-running .service3d-canvas{opacity:1;transform:scale(1);z-index:3}
.service3d-card.service3d-running .service3d-caption{opacity:1;transform:translateY(0)}
@media (hover:hover) and (pointer:fine){.service3d-card:not(.service3d-running):hover .service-gold-photo{transform:scale(1.035);filter:drop-shadow(0 15px 16px rgba(0,0,0,.58)) saturate(1.12) contrast(1.06)}}
@media(max-width:760px){.service3d-card .service-visual-switch{height:112px}.service3d-card .service3d-caption{font-size:6.5px;letter-spacing:.5px}}
/* ===== LIVE ANIMATED GOLD DRAWINGS FOR SERVICE CARDS (except mangal) ===== */
.service3d-card .service-visual-switch{isolation:isolate;overflow:hidden}
.service3d-card .service-visual-switch::before,.service3d-card .service-visual-switch::after{content:"";position:absolute;pointer-events:none;z-index:2;opacity:.95;transition:opacity .22s ease,transform .22s ease}
.service3d-card .service-gold-photo{will-change:transform,filter;transform-origin:center center}
.service3d-card.service3d-running .service-visual-switch::before,.service3d-card.service3d-running .service-visual-switch::after{opacity:0!important}
.service3d-card.service3d-running .service-gold-photo{animation:none!important}
.service3d-card[data-kind="laser"] .service-gold-photo{animation:svcGoldLaserIdle 4.1s ease-in-out infinite}
.service3d-card[data-kind="bend"] .service-gold-photo{animation:svcGoldBendIdle 4.6s ease-in-out infinite}
.service3d-card[data-kind="weld"] .service-gold-photo{animation:svcGoldWeldIdle 3.6s ease-in-out infinite}
.service3d-card[data-kind="tube"] .service-gold-photo{animation:svcGoldTubeIdle 4.4s ease-in-out infinite}
.service3d-card[data-kind="sign"] .service-gold-photo{animation:svcGoldSignIdle 3.4s ease-in-out infinite}
.service3d-card[data-kind="support"] .service-gold-photo{object-fit:contain!important;object-position:center 50%!important;padding:3px!important;filter:drop-shadow(0 14px 18px rgba(0,0,0,.56)) saturate(1.06) contrast(1.05)!important}
.service3d-card[data-kind="anchor"] .service-gold-photo{object-fit:contain!important;object-position:center 50%!important;padding:4px!important;filter:drop-shadow(0 14px 18px rgba(0,0,0,.58)) saturate(1.06) contrast(1.05)!important}
.service3d-card[data-kind="laser"] .service-visual-switch::before{left:-20%;top:54%;width:34%;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,204,95,.95),rgba(255,247,206,.98),transparent);box-shadow:0 0 7px rgba(255,186,55,.9),0 0 18px rgba(255,170,22,.55);animation:svcLaserSweep 2.4s linear infinite}
.service3d-card[data-kind="laser"] .service-visual-switch::after{width:16px;height:16px;left:28%;top:46%;border-radius:50%;background:radial-gradient(circle,rgba(255,252,226,.95) 0 24%,rgba(255,195,83,.75) 24% 56%,rgba(255,150,24,.16) 56% 100%);filter:blur(.2px);animation:svcLaserSpark 1.08s steps(3,end) infinite}
.service3d-card[data-kind="bend"] .service-visual-switch::before{left:15%;right:15%;top:18%;height:8px;border-radius:4px;background:linear-gradient(180deg,rgba(255,236,179,.88),rgba(216,152,44,.88));box-shadow:0 0 10px rgba(255,181,54,.22);animation:svcBendPress 2.1s ease-in-out infinite}
.service3d-card[data-kind="bend"] .service-visual-switch::after{left:24%;right:26%;bottom:24%;height:16px;border-radius:0 0 22px 22px;background:radial-gradient(ellipse at 50% 0%,rgba(255,211,119,.36),transparent 68%);animation:svcBendSheet 2.1s ease-in-out infinite}
.service3d-card[data-kind="weld"] .service-visual-switch::before{width:30px;height:30px;left:57%;top:47%;border-radius:50%;background:radial-gradient(circle,rgba(214,244,255,.98) 0 20%,rgba(100,188,255,.82) 20% 42%,rgba(56,146,255,.10) 42% 100%);box-shadow:0 0 12px rgba(78,170,255,.75);animation:svcWeldArc 1.25s steps(3,end) infinite}
.service3d-card[data-kind="weld"] .service-visual-switch::after{left:56%;top:53%;width:48px;height:22px;background:radial-gradient(circle at 12% 20%,rgba(255,230,165,.9) 0 9%,transparent 10%),radial-gradient(circle at 38% 48%,rgba(255,196,93,.95) 0 8%,transparent 9%),radial-gradient(circle at 67% 35%,rgba(255,133,39,.92) 0 8%,transparent 9%),radial-gradient(circle at 88% 64%,rgba(255,224,168,.92) 0 8%,transparent 9%);animation:svcWeldSparks .9s steps(4,end) infinite}
.service3d-card[data-kind="tube"] .service-visual-switch::before{left:12%;top:38%;width:30px;height:30px;border:3px solid rgba(255,214,126,.92);border-top-color:rgba(255,244,211,.98);border-right-color:rgba(255,165,36,.82);border-radius:50%;box-shadow:0 0 10px rgba(255,192,72,.25);animation:svcTubeSpin 1.8s linear infinite}
.service3d-card[data-kind="tube"] .service-visual-switch::after{left:20%;top:53%;width:34%;height:2px;border-radius:999px;background:linear-gradient(90deg,rgba(255,182,61,.12),rgba(255,224,140,.95),rgba(255,248,211,.96),transparent);box-shadow:0 0 8px rgba(255,186,55,.65);animation:svcTubeCut 2.1s linear infinite}
.service3d-card[data-kind="sign"] .service-visual-switch::before{left:20%;right:20%;top:24%;bottom:28%;border-radius:10px;background:linear-gradient(180deg,rgba(255,220,142,.12),rgba(255,170,51,.30));box-shadow:0 0 0 1px rgba(255,204,108,.32),0 0 14px rgba(255,185,62,.24),inset 0 0 18px rgba(255,227,157,.18);animation:svcSignLight 1.85s ease-in-out infinite}
.service3d-card[data-kind="sign"] .service-visual-switch::after{left:-22%;top:15%;width:40%;height:125%;transform:rotate(12deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(255,229,152,.34),transparent);animation:svcSignSweep 2.6s ease-in-out infinite}
.service3d-card[data-kind="support"] .service-visual-switch::before{inset:0;background:radial-gradient(circle at 30% 52%,rgba(255,216,122,.30) 0 9%,transparent 17%),radial-gradient(circle at 62% 52%,rgba(255,216,122,.26) 0 9%,transparent 17%),radial-gradient(circle at 24% 52%,rgba(255,244,204,.26) 0 3%,transparent 8%),radial-gradient(circle at 68% 52%,rgba(255,244,204,.22) 0 3%,transparent 8%);animation:svcSupportClamp 2.4s ease-in-out infinite}
.service3d-card[data-kind="support"] .service-visual-switch::after{left:17%;top:56%;width:58%;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,212,115,.95),rgba(255,248,214,.96),rgba(255,212,115,.95),transparent);box-shadow:0 0 8px rgba(255,196,85,.5);animation:svcSupportTighten 2.2s ease-in-out infinite}
.service3d-card[data-kind="anchor"] .service-visual-switch::before{inset:0;background:linear-gradient(180deg,transparent 18%,rgba(255,220,132,.28) 18% 72%,transparent 72%),linear-gradient(180deg,transparent 26%,rgba(255,237,184,.24) 26% 78%,transparent 78%),linear-gradient(180deg,transparent 10%,rgba(255,210,110,.28) 10% 65%,transparent 65%),linear-gradient(180deg,transparent 19%,rgba(255,230,173,.24) 19% 70%,transparent 70%);background-size:8px 56px,8px 50px,8px 62px,8px 52px;background-position:30% 21%,46% 33%,58% 14%,72% 26%;background-repeat:no-repeat;animation:svcAnchorGlint 2.6s ease-in-out infinite}
.service3d-card[data-kind="anchor"] .service-visual-switch::after{left:-24%;top:10%;width:42%;height:125%;transform:rotate(14deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),rgba(255,225,140,.30),transparent);animation:svcAnchorSweep 3s ease-in-out infinite}
@keyframes svcGoldLaserIdle{0%,100%{transform:translate3d(0,0,0) scale(1)}35%{transform:translate3d(1px,-2px,0) scale(1.018)}68%{transform:translate3d(-1px,1px,0) scale(1.01)}}
@keyframes svcGoldBendIdle{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-2px,0) scale(1.014)}}
@keyframes svcGoldWeldIdle{0%,100%{transform:translate3d(0,0,0) scale(1)}30%{transform:translate3d(1px,-1px,0) scale(1.012)}65%{transform:translate3d(-1px,1px,0) scale(1.018)}}
@keyframes svcGoldTubeIdle{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(1px,-1px,0) scale(1.017)}}
@keyframes svcGoldSignIdle{0%,100%{transform:translate3d(0,0,0) scale(1);filter:drop-shadow(0 14px 16px rgba(0,0,0,.58)) brightness(1)}50%{transform:translate3d(0,-1px,0) scale(1.012);filter:drop-shadow(0 14px 18px rgba(0,0,0,.58)) brightness(1.08)}}
@keyframes svcGoldSupportIdle{0%,100%{transform:translate3d(0,0,0) scale(1)}45%{transform:translate3d(0,-1px,0) scale(1.014)}70%{transform:translate3d(0,1px,0) scale(1.01)}}
@keyframes svcGoldAnchorIdle{0%,100%{transform:translate3d(0,0,0) scale(1)}40%{transform:translate3d(0,-2px,0) scale(1.012)}75%{transform:translate3d(0,0,0) scale(1.017)}}
@keyframes svcLaserSweep{0%{transform:translateX(-12%) scaleX(.72);opacity:0}14%{opacity:1}50%{opacity:1}100%{transform:translateX(285%) scaleX(1);opacity:0}}
@keyframes svcLaserSpark{0%,100%{transform:scale(.75);opacity:.36}40%{transform:scale(1.18);opacity:1}65%{transform:scale(.92);opacity:.82}}
@keyframes svcBendPress{0%,100%{transform:translateY(0)}40%,58%{transform:translateY(19px)}70%{transform:translateY(10px)}}
@keyframes svcBendSheet{0%,100%{transform:translateY(0) scaleY(.85);opacity:.18}40%,58%{transform:translateY(-3px) scaleY(1.22);opacity:.42}70%{transform:translateY(-1px) scaleY(1.03);opacity:.28}}
@keyframes svcWeldArc{0%,100%{transform:scale(.72);opacity:.32}30%{transform:scale(1.15);opacity:1}60%{transform:scale(.82);opacity:.74}}
@keyframes svcWeldSparks{0%,100%{transform:translateY(0) scale(.7);opacity:.25}30%{transform:translateY(1px) scale(1);opacity:1}55%{transform:translateY(4px) scale(.9);opacity:.85}}
@keyframes svcTubeSpin{to{transform:rotate(360deg)}}
@keyframes svcTubeCut{0%{transform:translateX(-8%);opacity:.08}20%{opacity:1}100%{transform:translateX(155%);opacity:0}}
@keyframes svcSignLight{0%,100%{opacity:.32;filter:brightness(1)}50%{opacity:.95;filter:brightness(1.1)}}
@keyframes svcSignSweep{0%{transform:translateX(-8%) rotate(12deg);opacity:0}20%{opacity:.7}100%{transform:translateX(245%) rotate(12deg);opacity:0}}
@keyframes svcSupportClamp{0%,100%{transform:scale(1);opacity:.56}50%{transform:scale(1.04);opacity:1}}
@keyframes svcSupportTighten{0%,100%{transform:scaleX(.82);opacity:.18}50%{transform:scaleX(1.08);opacity:.9}}
@keyframes svcAnchorGlint{0%,100%{filter:brightness(.96);opacity:.32}48%{filter:brightness(1.16);opacity:.9}}
@keyframes svcAnchorSweep{0%{transform:translateX(-6%) rotate(14deg);opacity:0}18%{opacity:.55}100%{transform:translateX(255%) rotate(14deg);opacity:0}}
@media (hover:hover) and (pointer:fine){.service3d-card:not(.service3d-running):hover .service-visual-switch::before,.service3d-card:not(.service3d-running):hover .service-visual-switch::after{opacity:1}}
@media (prefers-reduced-motion:reduce){.service3d-card .service-gold-photo,.service3d-card .service-visual-switch::before,.service3d-card .service-visual-switch::after{animation:none!important}}
/* V13: no 3D effects, use glowing live photos */
.service3d-card .service3d-canvas,.service3d-card .service3d-caption{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.service3d-card .service-visual-switch{overflow:hidden;isolation:isolate}
.service3d-card .service-gold-photo{position:relative;z-index:1;transition:transform .28s ease,filter .28s ease,opacity .28s ease;will-change:transform,filter;animation:svcPhotoBreath 4.8s ease-in-out infinite}
.service3d-card .service-visual-switch::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle at 50% 52%,rgba(255,215,118,.14) 0 20%,rgba(255,192,70,.08) 20% 42%,transparent 60%);mix-blend-mode:screen;animation:svcGlowPulse 3.4s ease-in-out infinite}
.service3d-card .service-visual-switch::after{content:"";position:absolute;left:-28%;top:-10%;width:44%;height:130%;pointer-events:none;z-index:2;background:linear-gradient(90deg,transparent,rgba(255,236,179,.06),rgba(255,215,118,.22),rgba(255,245,212,.08),transparent);transform:rotate(14deg);animation:svcGlowSweep 3.8s ease-in-out infinite}
.service3d-card[data-kind="support"] .service-visual-switch::before,.service3d-card[data-kind="anchor"] .service-visual-switch::before{background:radial-gradient(circle at 50% 52%,rgba(255,217,124,.18) 0 24%,rgba(255,193,73,.10) 24% 48%,transparent 65%)}
.service3d-card.service-photo-live-running .service-gold-photo{transform:scale(1.02);filter:brightness(1.11) saturate(1.08) drop-shadow(0 0 14px rgba(255,197,84,.38))!important}
.service3d-card.service-photo-live-running .service-visual-switch::before{animation:svcGlowPulseFast .65s ease-in-out 1}
.service3d-card.service-photo-live-running .service-visual-switch::after{animation:svcGlowSweepFast .65s ease-in-out 1}
.service3d-card.service-photo-live-running{box-shadow:0 0 0 1px rgba(237,183,71,.34),0 18px 42px rgba(0,0,0,.34),0 0 22px rgba(255,193,71,.16)}
@keyframes svcPhotoBreath{0%,100%{transform:translateY(0) scale(1);filter:brightness(1)}50%{transform:translateY(-1px) scale(1.012);filter:brightness(1.04)}}
@keyframes svcGlowPulse{0%,100%{opacity:.36}50%{opacity:.85}}
@keyframes svcGlowSweep{0%{transform:translateX(-8%) rotate(14deg);opacity:0}15%{opacity:.35}100%{transform:translateX(255%) rotate(14deg);opacity:0}}
@keyframes svcGlowPulseFast{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes svcGlowSweepFast{0%{transform:translateX(-5%) rotate(14deg);opacity:.1}100%{transform:translateX(265%) rotate(14deg);opacity:.65}}
@media (hover:hover) and (pointer:fine){.service3d-card:hover .service-gold-photo{transform:translateY(-1px) scale(1.018);filter:brightness(1.06) saturate(1.04)!important}.service3d-card:hover .service-visual-switch::before{opacity:1}}
@media (prefers-reduced-motion:reduce){.service3d-card .service-gold-photo,.service3d-card .service-visual-switch::before,.service3d-card .service-visual-switch::after{animation:none!important}}
/* ===== V14: MOBILE MANGAL DARKER + AD SIGN IRON LAZER LIGHT-UP ===== */
.service3d-card[data-kind="sign"] .service-visual-switch{position:relative!important}
.sign-iron-live{
position:absolute;z-index:5;left:24%;right:27%;top:31%;height:25%;
display:flex;align-items:center;justify-content:center;pointer-events:none;
color:#ffe7a2;font-weight:950;font-size:8.5px;letter-spacing:.095em;white-space:nowrap;
opacity:0;transform:scale(.94);text-shadow:none;
}
.service3d-card[data-kind="sign"].service-photo-live-running .sign-iron-live{
animation:signIronIgnite 1.05s cubic-bezier(.18,.76,.18,1) both;
}
.service3d-card[data-kind="sign"].service-photo-live-running .service-gold-photo{
filter:brightness(1.13) saturate(1.12) drop-shadow(0 0 13px rgba(255,194,73,.36))!important;
}
.service3d-card[data-kind="sign"].service-photo-live-running .service-visual-switch::before{
background:radial-gradient(ellipse at 49% 43%,rgba(255,229,151,.54) 0 12%,rgba(255,189,58,.22) 26%,rgba(255,166,27,.08) 44%,transparent 65%)!important;
animation:signBoardGlow 1.05s ease both!important;
}
@keyframes signIronIgnite{
0%{opacity:0;transform:scale(.90);color:#6c5120;text-shadow:none}
13%{opacity:.24;color:#c18a2e;text-shadow:0 0 3px rgba(255,177,41,.32)}
24%{opacity:.9;color:#fff5cd;text-shadow:0 0 4px #fff2bd,0 0 9px #ffc54f,0 0 18px rgba(255,159,23,.76)}
34%{opacity:.38;color:#b77f29;text-shadow:0 0 3px rgba(255,173,37,.28)}
46%{opacity:1;transform:scale(1);color:#fff6d2;text-shadow:0 0 4px #fff7d8,0 0 10px #ffd164,0 0 20px rgba(255,166,31,.88),0 0 30px rgba(255,142,18,.42)}
100%{opacity:1;transform:scale(1);color:#ffe9a5;text-shadow:0 0 3px #fff1be,0 0 9px #ffc857,0 0 18px rgba(255,157,24,.74)}
}
@keyframes signBoardGlow{
0%{opacity:.12;filter:brightness(.8)}
30%{opacity:1;filter:brightness(1.25)}
52%{opacity:.54;filter:brightness(1)}
100%{opacity:.9;filter:brightness(1.12)}
}
@media(max-width:760px){
.mangal-service-card{
background:
radial-gradient(circle at 50% 24%,rgba(170,108,14,.065),transparent 38%),
linear-gradient(180deg,#0c0905 0%,#020201 80%)!important;
border-color:#68460c!important;
box-shadow:inset 0 0 24px rgba(0,0,0,.58),0 7px 16px rgba(0,0,0,.32)!important;
}
.mangal-service-card .fire-glow{opacity:.56!important}
.mangal-service-card .flame{filter:brightness(.82) saturate(.90)!important}
.mangal-service-card .brazier-bowl{background:linear-gradient(180deg,#2c1e0a,#0b0805)!important;border-color:#8f661b!important;border-top-color:#b8872b!important;box-shadow:0 0 7px rgba(175,111,17,.12)!important}
.mangal-service-card h3{color:#cda84e!important;text-shadow:0 0 6px rgba(180,120,23,.10)!important}
.mangal-service-card.mangal-cooked-running .mangal-cooked-fx{filter:brightness(1.08)!important}
.sign-iron-live{left:23%;right:26%;top:30%;font-size:7.4px;letter-spacing:.08em}
}
/* ===== V15: KZ/RU/ENG + bright sign text + mobile mangal same shadow ===== */
.lang{gap:0!important}
.lang button{min-width:0!important}
@media(max-width:760px){.lang button{font-size:10px!important;padding:3px 2px!important}.lang span{margin:0!important}}
/* Services menu now contains 22 unique entries; scroll stays usable on PC/MV. */
#servicesMenu .services-list{align-items:stretch!important}
#servicesMenu .services-list>a,#servicesMenu .services-list>button{line-height:1.25!important}
@media(min-width:901px){#servicesMenu .services-list{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:620px){#servicesMenu .services-list{grid-template-columns:1fr!important}}
/* Advertising sign: illuminate the LETTERS themselves in bright gold on click. */
.service3d-card[data-kind="sign"] .sign-iron-live{
display:flex!important;position:absolute!important;z-index:80!important;
left:16%!important;right:19%!important;top:31%!important;height:30%!important;
align-items:center!important;justify-content:center!important;pointer-events:none!important;
font-family:Arial,Helvetica,sans-serif!important;font-size:12px!important;font-weight:1000!important;
letter-spacing:.12em!important;white-space:nowrap!important;color:#ffbf32!important;
opacity:0!important;transform:scale(.90)!important;
text-shadow:0 0 2px #fff7c8,0 0 5px #ffe08a,0 0 10px #ffbf32,0 0 18px #ff9d00,0 0 30px rgba(255,151,0,.82)!important;
filter:brightness(1.2)!important;
}
.service3d-card[data-kind="sign"].sign-ignite-now .sign-iron-live{
animation:signLettersGoldV15 1.42s steps(1,end) both!important;
}
.service3d-card[data-kind="sign"].sign-ignite-now .service-gold-photo{
filter:brightness(1.22) saturate(1.15) drop-shadow(0 0 17px rgba(255,188,52,.48))!important;
}
@keyframes signLettersGoldV15{
0%{opacity:0;transform:scale(.88);color:#5d4318}
8%{opacity:.28;color:#c98a22}
15%{opacity:1;transform:scale(1.03);color:#fff3b8;text-shadow:0 0 3px #fff,0 0 7px #ffe89b,0 0 15px #ffc432,0 0 26px #ff9d00,0 0 42px rgba(255,145,0,.9)}
23%{opacity:.42;color:#b77a19}
31%{opacity:1;transform:scale(1);color:#ffd75e;text-shadow:0 0 3px #fff6c8,0 0 8px #ffe16e,0 0 18px #ffb51e,0 0 34px rgba(255,147,0,.9)}
42%{opacity:.70;color:#ffc13a}
52%,100%{opacity:1;transform:scale(1.015);color:#fff0a5;text-shadow:0 0 3px #fff,0 0 9px #ffe27d,0 0 20px #ffb51e,0 0 38px #ff9200,0 0 54px rgba(255,141,0,.72)}
}
@media(max-width:760px){
.service3d-card[data-kind="sign"] .sign-iron-live{left:15%!important;right:18%!important;top:30%!important;font-size:10px!important;letter-spacing:.09em!important}
/* No extra darkening: mangal keeps its original colors, only the same card shadow as other services. */
.mangal-service-card{
background:radial-gradient(circle at 50% 24%,rgba(255,176,34,.12),transparent 38%),linear-gradient(180deg,#17120a 0%,#070605 78%)!important;
border-color:#9c6d12!important;
box-shadow:0 8px 20px rgba(0,0,0,.16)!important;
}
.mangal-service-card .fire-glow{opacity:1!important}
.mangal-service-card .flame{filter:drop-shadow(0 0 7px rgba(255,111,0,.58))!important}
.mangal-service-card .brazier-bowl{background:linear-gradient(180deg,#46310f,#151009)!important;border-color:#d09a27!important;border-top-color:#f0bf54!important;box-shadow:0 0 10px rgba(231,165,38,.18)!important}
.mangal-service-card h3{color:#ffd46c!important;text-shadow:0 0 10px rgba(255,182,36,.20)!important}
}
/* ===== V16 REFERENCE GOLD SERVICE ICONS ===== */
.service3d-card .service-visual-switch{height:118px!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:radial-gradient(circle at 50% 44%,rgba(232,174,52,.08),transparent 52%),linear-gradient(180deg,#0d0b07,#050504)!important;border:1px solid rgba(194,139,35,.34)!important}
.service3d-card .service-gold-photo,.service3d-card .service3d-canvas,.service3d-card .service3d-caption,.service3d-card .sign-iron-live{display:none!important}
.svc-reference-icon-wrap{width:100%;height:100%;display:grid;place-items:center;position:relative;z-index:3}
.svc-ref-icon{width:82px;height:76px;color:#e6ab2c;overflow:visible;filter:drop-shadow(0 0 5px rgba(233,170,42,.18));transition:transform .22s ease,filter .22s ease,color .22s ease}
.service3d-card:hover .svc-ref-icon{color:#ffd25b;transform:translateY(-2px) scale(1.025);filter:drop-shadow(0 0 8px rgba(255,194,55,.34))}
.service3d-card.service-icon-live-running .svc-ref-icon{color:#ffd568;filter:drop-shadow(0 0 10px rgba(255,191,50,.50))}
/* Laser: blinking point is centered under the cutting head. */
.svc-ref-laser .laser-core{fill:#ffe796;stroke:none;transform-origin:60px 64px;animation:laserCoreIdleV16 1.25s steps(2,end) infinite}
.svc-ref-laser .laser-beam{stroke:#ffc33f;opacity:.52}
.svc-ref-laser .laser-spark{opacity:.58}
.service3d-card.service-icon-live-running .svc-ref-laser .laser-core{animation:laserCoreClickV16 .38s steps(2,end) infinite}
.service3d-card.service-icon-live-running .svc-ref-laser .laser-beam,.service3d-card.service-icon-live-running .svc-ref-laser .laser-spark{stroke:#fff0a5;filter:drop-shadow(0 0 4px #ffb521);opacity:1}
@keyframes laserCoreIdleV16{0%,44%{opacity:.35;transform:scale(.78)}45%,100%{opacity:1;transform:scale(1.15)}}
@keyframes laserCoreClickV16{0%,49%{opacity:.3;transform:scale(.75)}50%,100%{opacity:1;transform:scale(1.45)}}
/* Tube cutter: small rotor centered on the drum/tube. */
.svc-ref-tube .tube-rotor,.svc-ref-tube .tube-rotor-cross{transform-box:fill-box;transform-origin:center}
.svc-ref-tube .tube-rotor{stroke-width:2.5}
.svc-ref-tube .tube-rotor-cross{stroke-width:2;animation:tubeRotorV16 2s linear infinite}
.service3d-card.service-icon-live-running .svc-ref-tube .tube-rotor-cross{animation-duration:.65s}
@keyframes tubeRotorV16{to{transform:rotate(360deg)}}
/* Bend icon intentionally has no long glowing bar. */
.svc-ref-bend .bend-punch{transform-origin:60px 37px;animation:bendPunchV16 2.8s ease-in-out infinite}
.service3d-card.service-icon-live-running .svc-ref-bend .bend-punch{animation-duration:.9s}
@keyframes bendPunchV16{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* Welding icon */
.svc-ref-weld .weld-core{fill:#ffd25c;stroke:none;opacity:.45;animation:weldBlinkV16 1.1s steps(2,end) infinite}
.service3d-card.service-icon-live-running .svc-ref-weld .weld-core{fill:#fff2a9;opacity:1;filter:drop-shadow(0 0 5px #ffb326)}
@keyframes weldBlinkV16{0%,45%{opacity:.25}46%,100%{opacity:.88}}
/* Advertising sign: front-facing and only the letters ignite bright gold for 2.5 seconds. */
.svc-ref-sign .sign-svg-text{font:900 10px Arial,Helvetica,sans-serif;letter-spacing:.06em;fill:#9d741f;stroke:none;filter:none}
.service3d-card[data-kind="sign"].sign-ignite-now .svc-ref-sign .sign-svg-text{animation:signGoldTextV16 2.5s ease-in-out both}
.service3d-card[data-kind="sign"].sign-ignite-now .svc-ref-sign{filter:drop-shadow(0 0 13px rgba(255,188,48,.48))}
@keyframes signGoldTextV16{
0%{fill:#6c4b14;filter:none;opacity:.35}
8%{fill:#ffbf2d;opacity:1;filter:drop-shadow(0 0 3px #ffc13a)}
15%{fill:#fff2a8;filter:drop-shadow(0 0 4px #fff4c5) drop-shadow(0 0 10px #ffc229) drop-shadow(0 0 18px #ff9700)}
24%{fill:#9e6a15;filter:none;opacity:.48}
34%{fill:#ffe06a;opacity:1;filter:drop-shadow(0 0 4px #fff6c8) drop-shadow(0 0 12px #ffc02f) drop-shadow(0 0 24px #ff9800)}
50%,100%{fill:#fff0a0;opacity:1;filter:drop-shadow(0 0 4px #fff8d3) drop-shadow(0 0 12px #ffc32f) drop-shadow(0 0 26px #ff9700) drop-shadow(0 0 40px rgba(255,143,0,.75))}
}
/* WhatsApp: realistic green bubble + white handset */
.wa-real-mini{display:flex!important;align-items:center;gap:7px!important;padding:6px 9px!important;border-color:rgba(37,211,102,.45)!important;color:#fff!important;background:linear-gradient(180deg,rgba(37,211,102,.12),rgba(6,18,10,.32))!important}
.wa-real-mark{width:24px;height:24px;display:inline-grid;place-items:center;flex:0 0 auto;filter:drop-shadow(0 2px 5px rgba(37,211,102,.28))}
.wa-real-mark svg{width:24px;height:24px;display:block;overflow:visible}
.wa-real-mark svg circle{fill:#25D366;stroke:#69ef9a;stroke-width:.7}
.wa-real-mark svg path{fill:#fff;stroke:#fff;stroke-width:.25;transform:scale(.82);transform-origin:center}
.wa-real-mini b{color:#7bf0a6!important}
.wa-contact-real{display:flex!important;align-items:center!important;gap:9px!important}
.wa-contact-real .wa-real-mark{width:27px;height:27px}.wa-contact-real .wa-real-mark svg{width:27px;height:27px}
.wa-contact-real>span:last-child{display:flex;flex-direction:column}
.wa-contact-real small{color:#74e99d!important}.wa-contact-real strong{color:#fff!important}
/* KZ / RU / ENG: keep all three clickable above overlapping header layers. */
.lang{position:relative!important;z-index:120!important;display:flex!important;align-items:center!important}
.lang button{position:relative!important;z-index:121!important;pointer-events:auto!important;cursor:pointer!important;padding:5px 4px!important}
.lang button[data-lang="en"]{display:inline-block!important;visibility:visible!important;opacity:1!important}
.lang button.active{color:#efb32b!important;text-shadow:0 0 8px rgba(239,179,43,.26)}
@media(max-width:760px){
.service3d-card .service-visual-switch{height:112px!important}
.svc-ref-icon{width:74px;height:69px}
.lang button{font-size:9.5px!important;padding:3px 1.5px!important}
.wa-real-mini{display:none!important}
}
/* ===== V19: revert PC background + restore photo cards + icons only in Services dropdown ===== */
/* Main Our Services cards: restore the photo version that existed before reference SVG icons. */
.service-grid .service3d-card .service-gold-photo{
display:block!important;visibility:visible!important;opacity:1!important;
width:100%!important;height:100%!important;position:relative!important;z-index:1!important;
object-fit:contain!important;animation:svcPhotoBreath 4.8s ease-in-out infinite!important;
}
.service-grid .service3d-card[data-kind="laser"] .service-gold-photo,
.service-grid .service3d-card[data-kind="bend"] .service-gold-photo,
.service-grid .service3d-card[data-kind="weld"] .service-gold-photo,
.service-grid .service3d-card[data-kind="tube"] .service-gold-photo{padding:0!important}
.service-grid .service3d-card .svc-reference-icon-wrap{display:none!important}
.service-grid .service3d-card .service3d-canvas,.service-grid .service3d-card .service3d-caption{display:none!important}
.service-grid .service3d-card[data-kind="sign"] .sign-iron-live{display:block!important}
/* 15 gold icons live only in the Services popup. */
#servicesMenu .services-list-icons{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
#servicesMenu .services-list-icons>button,#servicesMenu .services-list-icons>a{
position:relative!important;min-height:86px!important;display:grid!important;
grid-template-columns:42px 1fr!important;align-items:center!important;justify-items:start!important;
gap:9px!important;text-align:left!important;padding:10px 11px 10px 10px!important;color:#f2bd45!important;
}
#servicesMenu .services-list-icons>button::before,#servicesMenu .services-list-icons>a::before{
content:attr(data-num);position:absolute;right:7px;top:5px;font-size:7px;font-weight:900;
color:rgba(239,179,43,.52);letter-spacing:.04em
}
#servicesMenu .svc-menu-icon{width:40px;height:40px;display:grid;place-items:center;color:#efb32b;filter:drop-shadow(0 0 5px rgba(239,179,43,.18))}
#servicesMenu .svc-menu-icon svg{width:38px;height:38px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
#servicesMenu .svc-menu-label{display:block;padding-right:8px;color:#f0c35e;font-size:10.5px;font-weight:800;line-height:1.25}
#servicesMenu .services-list-icons>button:hover .svc-menu-icon,#servicesMenu .services-list-icons>a:hover .svc-menu-icon{color:#ffd56a;filter:drop-shadow(0 0 8px rgba(255,198,74,.44));transform:translateY(-1px)}
#servicesMenu .svc-menu-icon{transition:transform .18s ease,color .18s ease,filter .18s ease}
@media(max-width:760px){
#servicesMenu .services-list-icons{grid-template-columns:1fr!important;gap:7px!important}
#servicesMenu .services-list-icons>button,#servicesMenu .services-list-icons>a{min-height:62px!important;grid-template-columns:34px 1fr!important;padding:7px 10px!important}
#servicesMenu .svc-menu-icon{width:32px;height:32px}
#servicesMenu .svc-menu-icon svg{width:30px;height:30px}
#servicesMenu .svc-menu-label{font-size:10px}
}
/* ===== V20 CLEAN: PC old background + PC photo sizing + mobile-only machine effects ===== */
/* PC: exactly ONE old site background. No extra image layer, no gradient layer, no pseudo overlay. */
@media (min-width:1000px){
.hero{
background-color:#070604!important;
background-image:url("assets/hero-background-55.jpg")!important;
background-position:center center!important;
background-size:cover!important;
background-repeat:no-repeat!important;
background-attachment:scroll!important;
}
.hero::before,.hero::after{display:none!important;content:none!important;background:none!important;background-image:none!important}
/* PC only: photos in Our Services are smaller, centered and stay inside their frames. */
.service-grid .service3d-card .service-gold-photo{
width:84%!important;height:84%!important;max-width:84%!important;max-height:84%!important;
margin:8% auto!important;object-fit:contain!important;object-position:center!important;
}
}
/* Press brake: remove the feeding/descending bar effect everywhere. */
.service3d-card[data-kind="bend"] .service-visual-switch::before,
.service3d-card[data-kind="bend"] .service-visual-switch::after{display:none!important;content:none!important;animation:none!important}
/* Mobile only: keep the current photo cards; correct only the requested live effects. */
@media (max-width:999px){
/* Laser: no sweeping bar. One blinking point directly under the real cutting head. */
.service3d-card[data-kind="laser"] .service-visual-switch::before{display:none!important;content:none!important}
.service3d-card[data-kind="laser"] .service-visual-switch::after{
display:block!important;content:""!important;left:45%!important;top:55.5%!important;
width:10px!important;height:10px!important;border-radius:50%!important;
background:radial-gradient(circle,#fff9d8 0 20%,#ffd765 21% 44%,#ff9c19 45% 66%,rgba(255,145,18,.08) 67% 100%)!important;
box-shadow:0 0 5px #fff0a3,0 0 10px #ffc33b,0 0 18px rgba(255,139,12,.72)!important;
transform:translate(-50%,-50%)!important;animation:mvLaserHeadBlinkV20 .82s steps(2,end) infinite!important;
}
/* Tube cutter: smaller rotation ring, centered on the real front drum. */
.service3d-card[data-kind="tube"] .service-visual-switch::before{
display:block!important;content:""!important;left:22%!important;top:58%!important;
width:18px!important;height:18px!important;border-width:2px!important;border-style:solid!important;
border-color:rgba(255,215,126,.94) rgba(255,157,30,.72) rgba(255,215,126,.50) rgba(255,244,211,.98)!important;
border-radius:50%!important;background:transparent!important;box-shadow:0 0 7px rgba(255,192,72,.24)!important;
transform:translate(-50%,-50%) rotate(0deg)!important;animation:mvTubeRotorV20 1.8s linear infinite!important;
}
}
@keyframes mvLaserHeadBlinkV20{
0%,44%{opacity:.34;transform:translate(-50%,-50%) scale(.72)}
45%,100%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
}
@keyframes mvTubeRotorV20{
from{transform:translate(-50%,-50%) rotate(0deg)}
to{transform:translate(-50%,-50%) rotate(360deg)}
}
/* Two realistic WhatsApp buttons placed inside the mobile waiting card, right after the quote button. */
.mobile-bottom-whatsapp{display:none}
@media (max-width:999px){
.waiting-orders-card .mobile-bottom-whatsapp{
display:flex!important;justify-content:center!important;align-items:center!important;gap:7px!important;
width:auto!important;max-width:310px!important;margin:10px auto 0!important;padding:0!important;
}
.waiting-orders-card .mobile-wa-real{
min-height:36px!important;height:36px!important;min-width:116px!important;max-width:138px!important;
flex:1 1 0!important;display:flex!important;align-items:center!important;justify-content:center!important;
gap:5px!important;padding:4px 7px!important;border-radius:9px!important;
border:1px solid rgba(37,211,102,.50)!important;
background:linear-gradient(180deg,rgba(37,211,102,.16),rgba(4,18,9,.88))!important;
box-shadow:0 5px 12px rgba(0,0,0,.24),0 0 8px rgba(37,211,102,.08)!important;
text-decoration:none!important;
}
.waiting-orders-card .mobile-wa-mark{width:22px!important;height:22px!important;flex:0 0 22px!important;filter:drop-shadow(0 1px 4px rgba(37,211,102,.32))!important}
.waiting-orders-card .mobile-wa-mark svg{width:22px!important;height:22px!important;display:block}
.waiting-orders-card .mobile-wa-mark circle{fill:#25D366;stroke:#7af0a6;stroke-width:.8}
.waiting-orders-card .mobile-wa-mark path{fill:#fff;stroke:#fff;stroke-width:.22;transform:scale(.82);transform-origin:center}
.waiting-orders-card .mobile-wa-real>span:last-child{display:flex;flex-direction:column;line-height:1;text-align:left}
.waiting-orders-card .mobile-wa-real b{font-size:8.5px!important;color:#8cf3af!important}
.waiting-orders-card .mobile-wa-real small{font-size:8px!important;margin-top:2px!important;color:#fff!important}
}
/* ===== V21 FINAL APPLIED OVERRIDES ===== */
/* PC: restore the original pre-replacement hero background as ONE image only. */
@media (min-width:1000px){
.hero{
background:#050505 url("assets/pc-user-bg-v22.png") center center / cover no-repeat scroll!important;
background-image:url("assets/pc-user-bg-v22.png")!important;
}
.hero::before,.hero::after{display:none!important;content:none!important;background:none!important;background-image:none!important;box-shadow:none!important;filter:none!important}
.hero-inner,.hero-copy{background:transparent!important;background-image:none!important}
/* PC: make all service photos visibly smaller, without affecting mobile. */
.service-grid .service3d-card .service-gold-photo{
position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;
object-fit:contain!important;object-position:center!important;padding:3px!important;
object-position:center center!important;animation:none!important;transform:scale(.79)!important;transform-origin:50% 50%!important;
}
}
/* Press-brake: no descending / feeding beam effect in either version. */
.service3d-card[data-kind="bend"] .service-visual-switch::before,
.service3d-card[data-kind="bend"] .service-visual-switch::after{
display:none!important;content:none!important;animation:none!important;opacity:0!important;
}
/* Dedicated effect layers, hidden outside mobile. */
.mv-laser-head-dot,.mv-tube-rotor{display:none}
@media (max-width:999px){
/* Kill all legacy pseudo effects for laser and tube so only the corrected effects remain. */
.service3d-card[data-kind="laser"] .service-visual-switch::before,
.service3d-card[data-kind="laser"] .service-visual-switch::after,
.service3d-card[data-kind="tube"] .service-visual-switch::before,
.service3d-card[data-kind="tube"] .service-visual-switch::after{
display:none!important;content:none!important;animation:none!important;opacity:0!important;
}
/* Laser: exact point directly under the actual cutting head (photo coordinates). */
.mv-laser-head-dot{
display:block!important;position:absolute!important;z-index:20!important;
left:42.8%!important;top:46.0%!important;width:8px!important;height:8px!important;
border-radius:50%!important;pointer-events:none!important;
background:radial-gradient(circle,#fffbdc 0 20%,#ffd35a 21% 46%,#ff9717 47% 65%,rgba(255,136,10,.06) 66% 100%)!important;
box-shadow:0 0 4px #fff1a1,0 0 9px #ffc03a,0 0 15px rgba(255,133,10,.72)!important;
transform:translate(-50%,-50%) scale(.78)!important;
animation:mvLaserExactBlinkV21 .86s steps(2,end) infinite!important;
}
/* Tube cutter: smaller ring, centered on the front chuck/drum. */
.mv-tube-rotor{
display:block!important;position:absolute!important;z-index:20!important;
left:13.9%!important;top:40.2%!important;width:13px!important;height:13px!important;
border:1.5px solid rgba(255,215,126,.95)!important;border-right-color:#ff9b1e!important;
border-bottom-color:rgba(255,215,126,.48)!important;border-radius:50%!important;
background:rgba(0,0,0,.10)!important;box-shadow:0 0 5px rgba(255,192,72,.22)!important;
transform:translate(-50%,-50%) rotate(0deg)!important;pointer-events:none!important;
animation:mvTubeExactRotorV21 1.85s linear infinite!important;
}
.mv-tube-rotor i{position:absolute;inset:3px;border:1px solid rgba(255,231,169,.55);border-radius:50%;display:block}
.service3d-card[data-kind="tube"] .service-gold-photo{object-position:center center!important}
/* Remove the old single WhatsApp CTA in the waiting card; keep only the two mini contacts right under the button. */
.waiting-orders-actions{justify-content:center!important}
.waiting-orders-actions .waiting-order-btn{width:min(72%,250px)!important;margin-inline:auto!important}
}
@keyframes mvLaserExactBlinkV21{
0%,44%{opacity:.28;transform:translate(-50%,-50%) scale(.68)}
45%,100%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}
@keyframes mvTubeExactRotorV21{
from{transform:translate(-50%,-50%) rotate(0deg)}
to{transform:translate(-50%,-50%) rotate(360deg)}
}
/* Advertising sign: text sits on the face of the photographed sign, centered and tilted with it. */
.service3d-card[data-kind="sign"] .sign-iron-live{
display:block!important;position:absolute!important;z-index:40!important;
left:46%!important;top:42%!important;width:49%!important;height:auto!important;right:auto!important;
text-align:center!important;white-space:nowrap!important;pointer-events:none!important;
font-family:Arial,Helvetica,sans-serif!important;font-size:7.2px!important;font-weight:950!important;
letter-spacing:.065em!important;line-height:1!important;color:#ffd45f!important;
opacity:0!important;transform:translate(-50%,-50%) rotate(-5.2deg) scale(.94)!important;
transform-origin:center!important;
text-shadow:0 0 2px #fff3bd,0 0 6px #ffd65c,0 0 12px #ffad1f,0 0 22px rgba(255,143,0,.76)!important;
}
.service3d-card[data-kind="sign"].sign-ignite-now .sign-iron-live{
animation:signPhotoAlignedGoldV21 2.5s ease-in-out both!important;
}
@media (min-width:1000px){
/* Photo itself is 82% on PC, so keep the glowing letters on the scaled sign face. */
.service3d-card[data-kind="sign"] .sign-iron-live{
left:46.7%!important;top:43.4%!important;width:40.2%!important;font-size:6.2px!important;
}
}
@keyframes signPhotoAlignedGoldV21{
0%{opacity:0;filter:brightness(.7);transform:translate(-50%,-50%) rotate(-5.2deg) scale(.90)}
9%{opacity:.28;color:#a8741c}
17%{opacity:1;color:#fff3b0;text-shadow:0 0 3px #fff8d6,0 0 8px #ffd96d,0 0 16px #ffb224,0 0 28px rgba(255,145,0,.82)}
25%{opacity:.44;color:#bf8421}
34%{opacity:1;color:#ffe078;text-shadow:0 0 3px #fff5c3,0 0 9px #ffd35b,0 0 18px #ffa91d,0 0 32px rgba(255,137,0,.84)}
43%{opacity:.66}
52%,92%{opacity:1;filter:brightness(1.2);transform:translate(-50%,-50%) rotate(-5.2deg) scale(1);color:#fff0a0;text-shadow:0 0 3px #fff,0 0 10px #ffe176,0 0 20px #ffae1f,0 0 38px rgba(255,137,0,.78)}
100%{opacity:.92;filter:brightness(1.06);transform:translate(-50%,-50%) rotate(-5.2deg) scale(.99)}
}
/* ===== V23 FINAL FIXES ===== */
/* PC hero background: keep the machines untouched, but show more background downward. */
@media (min-width:1000px){
.hero{
background:#050505 url("assets/pc-user-bg-v22.png") center 38% / cover no-repeat scroll!important;
background-image:url("assets/pc-user-bg-v22.png")!important;
}
}
/* Welding spark: center it directly under the welding head in both versions. */
.service3d-card[data-kind="weld"] .service-visual-switch::before{
left:77.2%!important;top:70.6%!important;width:26px!important;height:26px!important;
border-radius:50%!important;
background:radial-gradient(circle,rgba(255,249,225,.98) 0 19%,rgba(255,205,92,.88) 20% 44%,rgba(255,155,41,.18) 45% 100%)!important;
box-shadow:0 0 10px rgba(255,197,76,.78),0 0 20px rgba(255,148,31,.36)!important;
}
.service3d-card[data-kind="weld"] .service-visual-switch::after{
left:70.8%!important;top:75.2%!important;width:42px!important;height:18px!important;
}
/* PC tube cutter: smaller ring, lowered onto the real drum and centered. */
@media (min-width:1000px){
.service3d-card[data-kind="tube"] .service-visual-switch::before{
left:14.2%!important;top:59.0%!important;width:16px!important;height:16px!important;border-width:2px!important;
border-color:rgba(255,215,126,.96) rgba(255,157,30,.76) rgba(255,215,126,.48) rgba(255,244,211,.98)!important;
box-shadow:0 0 7px rgba(255,192,72,.24)!important;transform:translate(-50%,-50%) rotate(0deg)!important;
}
.service3d-card[data-kind="tube"] .service-visual-switch::after{
left:21.5%!important;top:59.5%!important;width:24%!important;height:2px!important;
}
/* PC laser spark on the photo: under the head center. */
.service3d-card[data-kind="laser"] .service-visual-switch::after{
left:42.3%!important;top:50.2%!important;width:12px!important;height:12px!important;
transform:translate(-50%,-50%)!important;
}
}
/* Mobile: exact spark under the laser head. */
@media (max-width:999px){
.mv-laser-head-dot{left:42.3%!important;top:50.2%!important;width:8px!important;height:8px!important}
/* Mobile tube cutter: smaller ring, dropped onto the drum and centered. */
.mv-tube-rotor{left:14.2%!important;top:59.0%!important;width:11px!important;height:11px!important}
.mv-tube-rotor i{inset:2.5px!important}
/* Mobile backup pseudo ring if shown anywhere. */
.service3d-card[data-kind="tube"] .service-visual-switch::before{left:14.2%!important;top:59.0%!important;width:11px!important;height:11px!important}
.service3d-card[data-kind="tube"] .service-visual-switch::after{left:22.0%!important;top:59.5%!important;width:22%!important;height:2px!important}
.service3d-card[data-kind="weld"] .service-visual-switch::before{left:77.2%!important;top:70.8%!important;width:22px!important;height:22px!important}
.service3d-card[data-kind="weld"] .service-visual-switch::after{left:71.0%!important;top:75.4%!important;width:36px!important;height:16px!important}
}