:root{
  --bg:#070709;
  --bg-2:#0d0d0f;
  --card:#111114;
  --card-2:#17171b;
  --text:#f7f7f7;
  --muted:#b7b7be;
  --muted-2:#777780;
  --line:rgba(255,255,255,.12);
  --red:#d11616;
  --red-2:#ff2b2b;
  --red-dark:#900d0d;
  --white:#fff;
  --radius:22px;
  --shadow:0 24px 70px rgba(0,0,0,.46);
  --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
::selection{background:var(--red);color:var(--white)}
.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
.section{padding:105px 0;position:relative}
.section-dark{background:radial-gradient(circle at 15% 0%,rgba(209,22,22,.16),transparent 32%),linear-gradient(180deg,#0b0b0d,#060607)}
.skip-link{position:absolute;top:16px;left:16px;background:var(--red);padding:12px 18px;border-radius:10px;z-index:999;color:#fff;opacity:0;transform:translateY(-140%);transition:opacity .2s ease,transform .2s ease}
.skip-link:focus,.skip-link:focus-visible{opacity:1;transform:none}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(7,7,9,.66);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:all .25s ease;
}
.site-header.is-scrolled{background:rgba(7,7,9,.94);box-shadow:0 14px 42px rgba(0,0,0,.38)}
.header-inner{height:86px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;position:relative;z-index:102}
.brand img{width:210px;max-height:70px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.main-nav{display:flex;align-items:center;gap:34px;font-size:13px;text-transform:uppercase;font-weight:800;letter-spacing:.08em;color:#e7e7ea}
.main-nav a{position:relative;transition:color .25s ease}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-10px;width:0;height:2px;background:var(--red-2);transition:width .25s ease}
.main-nav a:hover{color:#fff}.main-nav a:hover::after{width:100%}
.menu-toggle{display:none;background:transparent;border:0;width:42px;height:42px;position:relative;z-index:102;cursor:pointer;padding:0}
.menu-toggle span{display:block;height:2px;background:#fff;margin:8px 6px;border-radius:2px;transition:all .25s ease}
.menu-toggle.is-open span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid transparent;border-radius:12px;
  padding:14px 22px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;
  font-size:13px;line-height:1;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-120%);transition:transform .7s ease}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;box-shadow:0 16px 40px rgba(209,22,22,.30)}
.btn-primary:hover{box-shadow:0 20px 50px rgba(209,22,22,.42)}
.btn-outline{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:#fff}
.btn-outline:hover{border-color:rgba(255,255,255,.58);background:rgba(255,255,255,.08)}
.btn-lg{min-height:56px;padding-inline:26px}
.header-cta{padding:14px 18px;border-radius:14px}
.icon-whats{width:19px;height:19px;border:2px solid currentColor;border-radius:50%;display:inline-block;position:relative;flex:0 0 auto}
.icon-whats::before{content:"";position:absolute;width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);bottom:-4px;left:1px;background:transparent}
.icon-whats::after{content:"";position:absolute;width:7px;height:10px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-35deg);left:5px;top:2px;border-radius:0 0 0 6px}

.hero{min-height:92vh;padding:150px 0 70px;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.84) 34%,rgba(0,0,0,.56) 70%,rgba(0,0,0,.72) 100%),image-set(url('img/hero-metalcenter.webp') type('image/webp'));background-size:cover;background-position:center;transform:scale(1.02);animation:heroZoom 18s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(0deg,var(--bg),transparent);pointer-events:none}
.hero-metal-line{position:absolute;left:-30px;top:118px;width:150px;height:650px;border-left:5px solid var(--red);transform:skewX(-16deg);opacity:.86;filter:drop-shadow(0 0 30px rgba(209,22,22,.45))}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:0;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.08em;padding:9px 14px;border-radius:8px;box-shadow:0 14px 36px rgba(209,22,22,.24)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(42px,6.4vw,82px);line-height:.92;letter-spacing:-.055em;text-transform:uppercase;margin:24px 0 22px;max-width:850px;text-shadow:0 12px 30px rgba(0,0,0,.45)}
.hero-copy{max-width:760px;padding:38px 36px;border-radius:30px;background:linear-gradient(180deg,rgba(10,10,12,.76),rgba(10,10,12,.50));border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.hero-copy p{font-size:18px;line-height:1.68;color:#e2e2e6;max-width:none;margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.trust-strip{position:relative;z-index:3;margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.11);border-radius:24px;background:rgba(15,15,18,.78);backdrop-filter:blur(16px);box-shadow:var(--shadow);overflow:hidden}
.trust-item{display:flex;align-items:flex-start;gap:14px;padding:25px 22px;border-right:1px solid rgba(255,255,255,.10)}
.trust-item:last-child{border-right:0}.trust-item strong{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}.trust-item small{color:var(--muted);line-height:1.45}.trust-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;color:var(--red-2)}
.trust-icon::before{font-size:28px}.trust-icon[data-icon="clock"]::before{content:"◴"}.trust-icon[data-icon="helmet"]::before{content:"◉"}.trust-icon[data-icon="industry"]::before{content:"⌂"}.trust-icon[data-icon="budget"]::before{content:"▧"}

.stats{padding:26px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.stats-grid div{padding:24px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);border-radius:18px}
.stats-grid strong{font-size:46px;color:#fff;display:block;letter-spacing:-.04em}.stats-grid strong::after{content:"+";color:var(--red-2);font-size:.7em;margin-left:2px}.stats-grid div:nth-child(3) strong::after{content:""}
.stats-grid span{color:var(--muted);font-size:14px;line-height:1.5}

.section-heading{text-align:center;max-width:720px;margin:0 auto 48px}.section-heading h2,.about-copy h2,.faq-copy h2,.contact-copy h2{font-size:clamp(32px,4vw,54px);line-height:1.02;letter-spacing:-.045em;text-transform:uppercase;margin:18px 0 16px}.section-heading p,.about-copy p,.faq-copy p,.contact-copy p{color:var(--muted);font-size:17px;line-height:1.7}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{min-height:285px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:26px;position:relative;overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,.22);transition:transform .28s ease,border-color .28s ease,background .28s ease}
.service-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% -10%,rgba(209,22,22,.25),transparent 38%);opacity:0;transition:opacity .28s ease}.service-card:hover{transform:translateY(-8px);border-color:rgba(255,43,43,.45);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045))}.service-card:hover::before{opacity:1}.service-card h3{font-size:19px;text-transform:uppercase;letter-spacing:-.02em;margin:22px 0 12px;position:relative}.service-card p{color:var(--muted);font-size:14px;line-height:1.6;position:relative}.service-card a{display:inline-flex;position:relative;margin-top:10px;color:#fff;font-weight:800;font-size:13px;text-transform:uppercase}.service-card a::after{content:" →";color:var(--red-2)}
.service-icon{display:block;width:68px;height:52px;position:relative;color:#fff;filter:drop-shadow(0 12px 20px rgba(209,22,22,.25))}
.service-icon::before,.service-icon::after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.88);border-radius:2px}.icon-frame::before{clip-path:polygon(50% 0,100% 35%,100% 100%,80% 100%,80% 44%,20% 44%,20% 100%,0 100%,0 35%)}.icon-frame::after{inset:15px 12px 0;border-top:2px solid var(--red-2);border-bottom:0;border-left:0;border-right:0;transform:skewY(-18deg)}.icon-mezzanine::before{height:24px;top:26px}.icon-mezzanine::after{width:42px;height:28px;top:0;left:14px;transform:skewX(-20deg);border-color:var(--red-2)}.icon-roof::before{clip-path:polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%)}.icon-sheets::before{transform:skewX(-24deg);border-left:8px double rgba(255,255,255,.88);border-right:8px double rgba(255,255,255,.88)}.icon-gate::before{border-left:8px double rgba(255,255,255,.88);border-right:8px double rgba(255,255,255,.88)}.icon-gate::after{inset:12px 0;border-top:2px solid var(--red-2);border-bottom:2px solid var(--red-2);border-left:0;border-right:0}.icon-zinc::before{transform:skewX(-28deg);border-top:8px double rgba(255,255,255,.88);border-bottom:8px double rgba(255,255,255,.88)}.icon-gutter::before{height:28px;top:12px;transform:skewX(-25deg);border-color:rgba(255,255,255,.88)}.icon-gutter::after{inset:auto 6px 0 34px;height:26px;border-color:var(--red-2)}.icon-railing::before{height:32px;top:10px;border-top:3px solid rgba(255,255,255,.88);border-bottom:3px solid rgba(255,255,255,.88);border-left:0;border-right:0;transform:skewY(-12deg)}.icon-railing::after{inset:8px 8px;border-left:2px solid var(--red-2);border-right:2px solid var(--red-2);border-top:0;border-bottom:0}

.about{padding-top:80px}.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center}.about-image{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.14)}.about-image img{width:100%;height:620px;object-fit:cover;filter:saturate(1.08) contrast(1.05)}.about-image::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 52%)}.about-badge{position:absolute;left:22px;bottom:22px;background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;border-radius:14px;padding:12px 16px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;z-index:1}.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}.why-grid div{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:20px}.why-grid span{display:inline-flex;color:var(--red-2);font-weight:900;margin-bottom:10px}.why-grid strong{display:block;text-transform:uppercase;margin-bottom:7px}.why-grid small{color:var(--muted);line-height:1.55}

.projects{padding-top:80px}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:16px}.project-card{position:relative;border:0;border-radius:20px;overflow:hidden;background:#111;cursor:pointer;padding:0;box-shadow:0 16px 44px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.10)}.project-card.large{grid-column:span 2;grid-row:span 2}.project-card.wide{grid-column:span 2}.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;filter:saturate(1.06) contrast(1.04)}.project-card::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 55%);z-index:1;opacity:.9}.project-card span{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.03em;text-align:left}.project-card:hover img{transform:scale(1.08);filter:saturate(1.18) contrast(1.12)}

.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.process-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:30px;min-height:270px}.process-card::after{content:"";position:absolute;right:-18px;top:50%;width:24px;height:24px;border-top:1px solid rgba(255,255,255,.20);border-right:1px solid rgba(255,255,255,.20);transform:translateY(-50%) rotate(45deg)}.process-card:last-child::after{display:none}.process-card span{display:grid;place-items:center;width:44px;height:44px;background:linear-gradient(135deg,var(--red),var(--red-dark));border-radius:50%;font-weight:900;margin-bottom:22px;box-shadow:0 14px 34px rgba(209,22,22,.35)}.process-card strong{display:block;text-transform:uppercase;font-size:18px;margin-bottom:12px}.process-card p{color:var(--muted);line-height:1.65;margin:0}

.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.testimonial-card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:28px;min-height:280px;display:flex;flex-direction:column}.stars{color:var(--red-2);letter-spacing:3px;margin-bottom:18px}.testimonial-card p{color:#e6e6e8;line-height:1.7;font-size:15px;flex:1}.testimonial-card strong{font-size:17px}.testimonial-card span{color:var(--muted);font-size:14px;margin-top:5px}

.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:58px;align-items:start}.accordion{display:grid;gap:14px}.accordion-item{text-align:left;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:0;cursor:pointer;overflow:hidden}.accordion-item span{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;font-weight:900}.accordion-item span::after{content:"+";color:var(--red-2);font-size:28px;line-height:1}.accordion-item.active span::after{content:"−"}.accordion-item p{max-height:0;margin:0;padding:0 22px;color:var(--muted);line-height:1.65;overflow:hidden;transition:max-height .28s ease,padding .28s ease}.accordion-item.active p{max-height:180px;padding:0 22px 22px}

.contact-section{background:linear-gradient(135deg,var(--red-dark),var(--red) 52%,#101014 52%);overflow:hidden}.contact-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.18),transparent 32%),url('img/gallery-08.webp') center/cover no-repeat;opacity:.12}.contact-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center}.contact-copy .eyebrow{background:rgba(0,0,0,.32);box-shadow:none}.contact-copy p{max-width:650px;color:#fff}.contact-list{display:grid;gap:12px;margin-top:26px}.contact-list a,.contact-list span{display:block;color:#fff;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:14px 16px}.quote-form{background:rgba(10,10,12,.88);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:30px;box-shadow:var(--shadow);backdrop-filter:blur(15px)}.quote-form label{display:grid;gap:8px;color:#fff;font-size:13px;text-transform:uppercase;font-weight:800;letter-spacing:.04em;margin-bottom:15px}.quote-form input,.quote-form select,.quote-form textarea{width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;border-radius:14px;padding:15px 16px;outline:none;transition:border-color .2s ease,background .2s ease}.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:rgba(255,43,43,.72);background:rgba(255,255,255,.09)}.quote-form select option{background:#111;color:#fff}.quote-form textarea{resize:vertical;min-height:110px}.quote-form button{width:100%;margin-top:8px}.quote-form small{display:block;text-align:center;color:var(--muted);line-height:1.5;margin-top:14px;text-transform:none;font-weight:400;letter-spacing:0}

.footer{padding:64px 0 26px;border-top:1px solid rgba(255,255,255,.10)}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:34px}.footer-brand img{width:210px;margin-bottom:18px}.footer p,.footer span,.footer a{display:block;color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:8px}.footer h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;color:#fff}.footer a:hover{color:#fff}.footer-bottom{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:space-between;gap:18px}

.floating-whats{position:fixed;right:22px;bottom:22px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#24d366,#128c7e);color:#fff;z-index:95;box-shadow:0 18px 45px rgba(20,180,100,.35);animation:pulse 2.5s ease infinite}.floating-whats .icon-whats{width:27px;height:27px}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:none;align-items:center;justify-content:center;padding:28px}.lightbox.is-open{display:flex}.lightbox img{max-width:min(1100px,94vw);max-height:88vh;border-radius:18px;box-shadow:var(--shadow)}.lightbox-close{position:absolute;top:22px;right:24px;width:48px;height:48px;border:1px solid rgba(255,255,255,.20);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:34px;cursor:pointer}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}.reveal.is-visible{opacity:1;transform:none}.delay-1{transition-delay:.09s}.delay-2{transition-delay:.18s}.delay-3{transition-delay:.27s}
@keyframes heroZoom{to{transform:scale(1.08)}}@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 18px 45px rgba(20,180,100,.35)}50%{transform:scale(1.07);box-shadow:0 20px 60px rgba(20,180,100,.52)}}

@media (max-width:1080px){
  .header-inner{height:78px}.brand img{width:180px}.main-nav{gap:20px}.header-cta{font-size:12px;padding:13px 15px}.hero-copy{max-width:100%;padding:34px 30px}.service-grid{grid-template-columns:repeat(2,1fr)}.about-grid,.contact-grid,.faq-grid{grid-template-columns:1fr}.project-grid{grid-template-columns:repeat(2,1fr)}.project-card.large,.project-card.wide{grid-column:span 1;grid-row:span 1}.process-grid{grid-template-columns:repeat(2,1fr)}.process-card::after{display:none}.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-brand{grid-column:span 2}
}

@media (max-width:780px){
  .container{width:min(100% - 28px,var(--container))}.section{padding:72px 0}.site-header{background:rgba(7,7,9,.92)}.header-inner{height:76px}.brand img{width:158px}.header-cta{display:none}.menu-toggle{display:block}.main-nav{position:fixed;left:14px;right:14px;top:86px;display:grid;gap:0;background:rgba(12,12,15,.98);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:12px;box-shadow:var(--shadow);transform:translateY(-12px);opacity:0;pointer-events:none;transition:all .25s ease}.main-nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}.main-nav a{padding:16px 14px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}.main-nav a:last-child{border-bottom:0}.main-nav a::after{display:none}
  .hero{padding:112px 0 42px;min-height:auto;text-align:center}.hero-bg{background:linear-gradient(180deg,rgba(0,0,0,.84),rgba(0,0,0,.76)),image-set(url('img/hero-metalcenter-mobile.webp') type('image/webp'));background-size:cover;background-position:center}.hero-metal-line{display:none}.hero-grid{gap:0}.hero-copy{display:grid;justify-items:center;padding:28px 20px;border-radius:24px}.eyebrow{font-size:10px;letter-spacing:.05em;justify-content:center;text-align:center}h1{font-size:clamp(32px,12vw,52px);line-height:.95;margin-top:18px;text-align:center}.hero-copy p{font-size:16px;line-height:1.6;text-align:center}.hero-actions{width:100%;display:grid;gap:12px}.hero-actions .btn{width:100%}.trust-strip{grid-template-columns:repeat(2,1fr);margin-top:24px;border-radius:20px}.trust-item{padding:18px 14px;display:grid;justify-items:center;text-align:center;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);min-height:auto}.trust-item:nth-child(2n){border-right:0}.trust-item:nth-last-child(-n+2){border-bottom:0}.trust-item strong{font-size:12px}.trust-item small{font-size:12px}.stats-grid{grid-template-columns:1fr}.stats-grid strong{font-size:40px}.section-heading{text-align:center;margin-bottom:34px}.section-heading h2,.about-copy h2,.faq-copy h2,.contact-copy h2{font-size:34px;text-align:center}.section-heading p,.about-copy p,.faq-copy p,.contact-copy p{text-align:center;font-size:15.5px}.service-grid{grid-template-columns:1fr;gap:14px}.service-card{text-align:center;min-height:auto;padding:24px;display:grid;justify-items:center}.service-card h3{font-size:18px}.about-grid{gap:30px;text-align:center}.about-image img{height:390px}.about-badge{left:50%;transform:translateX(-50%);white-space:nowrap}.why-grid{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr;grid-auto-rows:245px}.project-card span{text-align:center}.process-grid{grid-template-columns:1fr}.process-card{text-align:center;min-height:auto;display:grid;justify-items:center}.testimonial-grid{grid-template-columns:1fr}.testimonial-card{text-align:center;min-height:auto}.faq-grid{text-align:center;gap:26px}.accordion-item{text-align:left}.contact-section{background:linear-gradient(180deg,var(--red-dark),var(--red) 42%,#101014 42%)}.contact-grid{text-align:center}.contact-list a,.contact-list span{text-align:center}.quote-form{padding:22px;border-radius:22px}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-brand{grid-column:auto}.footer-brand img{margin-inline:auto}.footer-bottom{display:grid;text-align:center}.floating-whats{width:58px;height:58px;right:16px;bottom:16px}.lightbox{padding:18px}.lightbox-close{top:14px;right:14px}
}

@media (max-width:420px){
  .brand img{width:142px}.hero{padding-top:104px}.hero-copy{padding:24px 16px}.trust-strip{grid-template-columns:1fr}.trust-item{border-right:0}.trust-item:nth-last-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}.trust-item:last-child{border-bottom:0}.project-grid{grid-auto-rows:220px}.btn{font-size:12px}.footer p,.footer span,.footer a{font-size:13px}
}


/* Refinamento visual v3 - hero mais limpa, cards mais premium e mobile mais organizado */
@media (min-width: 781px){
  .hero{
    min-height: 92vh;
    padding: 150px 0 74px;
    align-items: center;
  }

  .hero-bg{
    background:
      linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 34%, rgba(0,0,0,.52) 72%, rgba(0,0,0,.70) 100%),
      image-set(url('img/hero-metalcenter.webp') type('image/webp'));
    background-size: cover;
    background-position: center;
  }

  .hero-copy{
    max-width: 760px;
    padding: 42px 40px;
    border-radius: 32px;
    background:
      linear-gradient(135deg, rgba(10,10,12,.82), rgba(10,10,12,.52)),
      radial-gradient(circle at 0% 0%, rgba(209,22,22,.20), transparent 38%);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 90px rgba(0,0,0,.52);
    position: relative;
    overflow: hidden;
  }

  .hero-copy::before{
    content: "";
    position: absolute;
    left: 0;
    top: 32px;
    bottom: 32px;
    width: 4px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--red-2), var(--red-dark));
    box-shadow: 0 0 28px rgba(209,22,22,.65);
  }

  .hero-copy p{
    max-width: 640px;
  }

  .trust-strip{
    max-width: 1040px;
    margin-top: 34px;
    margin-left: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(12,12,15,.82);
  }

  .trust-item{
    min-height: 120px;
    padding: 24px 20px;
  }
}

.hero-points{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -14px 0 30px;
}

.hero-points span{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
}

.hero-points span::before{
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--red-2);
  box-shadow: 0 0 14px rgba(255,43,43,.65);
}

.service-card{
  isolation: isolate;
}

.service-card::after{
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, transparent, var(--red-2), transparent);
  opacity: .72;
}

.inline-cta,
.project-note{
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(209,22,22,.18), rgba(255,255,255,.045)),
    rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

.inline-cta strong{
  display: block;
  font-size: 22px;
  letter-spacing: -.03em;
  margin-bottom: 6px;
}

.inline-cta span,
.project-note span{
  color: var(--muted);
  line-height: 1.55;
}

.project-note{
  justify-content: center;
  text-align: center;
}

.project-note a{
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.project-note a::after{
  content: " →";
  color: var(--red-2);
}

.footer-social{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.footer-social a{
  display: inline-flex;
  margin: 0;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.045);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.direxy-credit{
  color: #fff !important;
  font-weight: 900;
  border-bottom: 1px solid rgba(255,255,255,.35);
}

.direxy-credit:hover{
  color: var(--red-2) !important;
  border-color: var(--red-2);
}

@media (max-width: 780px){
  .hero{
    padding: 104px 0 42px;
  }

  .hero-bg{
    background:
      linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.76)),
      image-set(url('img/hero-metalcenter-mobile.webp') type('image/webp'));
    background-size: cover;
    background-position: center;
  }

  .hero-copy{
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    padding: 26px 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(10,10,12,.76), rgba(10,10,12,.44));
  }

  h1{
    font-size: clamp(32px, 10.5vw, 46px);
    line-height: .98;
    letter-spacing: -.045em;
    max-width: 360px;
    margin-inline: auto;
  }

  .hero-copy p{
    max-width: 340px;
    margin-inline: auto;
  }

  .hero-points{
    justify-content: center;
    margin: -8px 0 24px;
  }

  .hero-points span{
    font-size: 10px;
    min-height: 30px;
    padding: 7px 10px;
  }

  .trust-strip{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 560px;
    margin-inline: auto;
    margin-top: 24px;
  }

  .trust-item{
    min-height: 150px;
    padding: 18px 12px;
  }

  .service-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  .service-card{
    padding: 22px 14px;
    min-height: 190px;
  }

  .service-icon{
    width: 58px;
    height: 45px;
  }

  .service-card h3{
    font-size: 14px;
    line-height: 1.15;
    margin: 16px 0 8px;
  }

  .service-card p{
    display: none;
  }

  .service-card a{
    font-size: 11px;
    margin-top: 6px;
  }

  .inline-cta,
  .project-note{
    display: grid;
    text-align: center;
    justify-items: center;
    padding: 22px 18px;
  }

  .inline-cta strong{
    font-size: 20px;
  }

  .project-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 155px;
    gap: 10px;
  }

  .project-card span{
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-size: 11px;
    line-height: 1.2;
  }

  .footer-social{
    justify-content: center;
  }

  .footer-bottom a{
    display: inline;
  }
}

@media (max-width: 360px){
  .service-grid,
  .project-grid,
  .trust-strip{
    grid-template-columns: 1fr !important;
  }

  .trust-item{
    min-height: auto;
  }
}

/* =========================================================
   AUDITORIA E CORREÇÃO FINAL V4 - PRIMEIRA DOBRA
   Objetivo: remover sensação de elementos perdidos, centralizar mobile,
   organizar hierarquia e deixar a primeira impressão mais profissional.
   ========================================================= */

/* HERO: deixa de ser flex para evitar que o bloco de diferenciais vá para o lado */
.hero{
  display:block !important;
  min-height:auto !important;
  padding:138px 0 58px !important;
  position:relative;
  overflow:hidden;
}

.hero-bg{
  background:
    linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.84) 38%, rgba(0,0,0,.56) 72%, rgba(0,0,0,.72) 100%),
    image-set(url('img/hero-metalcenter.webp') type('image/webp')) !important;
  background-size:cover !important;
  background-position:center !important;
}

.hero::after{
  height:50% !important;
  background:linear-gradient(0deg, #070709 0%, rgba(7,7,9,.72) 38%, transparent 100%) !important;
}

.hero-grid{
  width:min(var(--container),calc(100% - 40px)) !important;
  margin-inline:auto !important;
  min-height:calc(100vh - 255px);
  position:relative !important;
  z-index:3 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

.hero-copy{
  width:min(100%, 720px) !important;
  max-width:720px !important;
  margin:0 !important;
  padding:42px 40px !important;
  border-radius:28px !important;
  text-align:left !important;
  background:
    linear-gradient(135deg, rgba(10,10,12,.90), rgba(10,10,12,.60)),
    radial-gradient(circle at 0 0, rgba(209,22,22,.18), transparent 40%) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.58) !important;
  backdrop-filter:blur(14px) !important;
  overflow:hidden;
}

.hero-copy::before{
  content:"";
  position:absolute;
  left:0;
  top:34px;
  bottom:34px;
  width:4px;
  border-radius:99px;
  background:linear-gradient(180deg,var(--red-2),var(--red-dark));
  box-shadow:0 0 32px rgba(209,22,22,.65);
}

.hero-copy .eyebrow{
  margin-bottom:20px;
}

.hero-copy h1,
.hero h1{
  max-width:650px !important;
  margin:0 0 24px !important;
  font-size:clamp(46px, 5.2vw, 78px) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  text-align:left !important;
}

.hero-copy p{
  max-width:610px !important;
  margin:0 0 22px !important;
  font-size:18px !important;
  line-height:1.65 !important;
  color:#e8e8ec !important;
  text-align:left !important;
}

.hero-points{
  display:flex !important;
  justify-content:flex-start !important;
  gap:10px !important;
  margin:0 0 28px !important;
}

.hero-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
}

/* DIFERENCIAIS: agora ficam abaixo da chamada, em linha limpa */
.trust-strip{
  width:min(var(--container),calc(100% - 40px)) !important;
  margin:28px auto 0 !important;
  position:relative !important;
  z-index:3 !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  border-radius:22px !important;
  background:rgba(12,12,15,.86) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.45) !important;
  backdrop-filter:blur(16px) !important;
  overflow:hidden !important;
}

.trust-item{
  min-height:118px !important;
  padding:24px 22px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:14px !important;
  border-right:1px solid rgba(255,255,255,.10) !important;
  border-bottom:0 !important;
}

.trust-item:last-child{border-right:0 !important;}
.trust-item div{display:block !important;}
.trust-item strong{
  display:block !important;
  font-size:13px !important;
  line-height:1.22 !important;
  margin:0 0 7px !important;
}
.trust-item small{
  display:block !important;
  font-size:13px !important;
  line-height:1.45 !important;
  color:#bfc0c8 !important;
}
.trust-icon{margin-top:2px !important;}

/* Cabeçalho mais estável */
.site-header{background:rgba(7,7,9,.84) !important;}
.header-inner{height:82px !important;}
.brand img{width:180px !important;}

/* Serviços: reduz poluição visual no desktop sem perder conversão */
.service-card{
  min-height:260px !important;
}

.inline-cta,
.project-note{
  width:min(100%, 980px);
  margin-inline:auto;
}

/* Rodapé: crédito e redes sociais alinhados */
.footer-social{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.footer-social a{
  display:inline-flex !important;
  margin:0 !important;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.045);
  color:#fff !important;
  font-size:12px !important;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.direxy-credit{
  display:inline !important;
  color:#fff !important;
  font-weight:900;
  border-bottom:1px solid rgba(255,255,255,.35);
}
.direxy-credit:hover{color:var(--red-2) !important;border-color:var(--red-2);}

/* Tablet */
@media (max-width:1080px){
  .hero{padding:126px 0 48px !important;}
  .hero-grid{min-height:auto !important;}
  .hero-copy{max-width:680px !important;}
  .hero-copy h1,.hero h1{font-size:clamp(42px,7vw,66px) !important;}
  .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .trust-item:nth-child(2){border-right:0 !important;}
  .trust-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.10) !important;}
}

/* Mobile: primeira dobra realmente centralizada e sem nada vazando para o lado */
@media (max-width:780px){
  .container{width:min(100% - 26px,var(--container)) !important;}
  .site-header{background:rgba(7,7,9,.96) !important;}
  .header-inner{height:72px !important;}
  .brand img{width:150px !important;}
  .menu-toggle{display:block !important;}

  .hero{
    padding:92px 0 42px !important;
    text-align:center !important;
  }

  .hero-bg{
    background:
      linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.80) 56%, rgba(0,0,0,.90) 100%),
      image-set(url('img/hero-metalcenter-mobile.webp') type('image/webp')) !important;
    background-size:cover !important;
    background-position:center top !important;
  }

  .hero-grid{
    width:min(100% - 26px, 560px) !important;
    min-height:auto !important;
    display:block !important;
    margin-inline:auto !important;
  }

  .hero-copy{
    width:100% !important;
    max-width:560px !important;
    margin-inline:auto !important;
    padding:24px 18px 22px !important;
    border-radius:24px !important;
    text-align:center !important;
    background:linear-gradient(180deg, rgba(10,10,12,.88), rgba(10,10,12,.64)) !important;
  }

  .hero-copy::before{display:none !important;}

  .hero-copy .eyebrow{
    justify-content:center !important;
    max-width:100% !important;
    margin:0 auto 18px !important;
    font-size:9px !important;
    padding:8px 10px !important;
    line-height:1.1 !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .hero-copy h1,
  .hero h1{
    max-width:330px !important;
    margin:0 auto 18px !important;
    font-size:clamp(31px, 10vw, 44px) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
    text-align:center !important;
    text-wrap:balance;
  }

  .hero-copy p{
    max-width:330px !important;
    margin:0 auto 20px !important;
    font-size:15px !important;
    line-height:1.6 !important;
    text-align:center !important;
  }

  .hero-points{
    justify-content:center !important;
    gap:8px !important;
    margin:0 auto 22px !important;
  }
  .hero-points span{
    min-height:29px !important;
    padding:7px 9px !important;
    font-size:10px !important;
    letter-spacing:.04em !important;
  }

  .hero-actions{
    width:100% !important;
    max-width:330px !important;
    margin-inline:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .hero-actions .btn{
    width:100% !important;
    min-height:52px !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .trust-strip{
    width:min(100% - 26px, 560px) !important;
    margin:22px auto 0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    border-radius:20px !important;
  }
  .trust-item{
    min-height:auto !important;
    padding:17px 12px !important;
    display:grid !important;
    justify-items:center !important;
    text-align:center !important;
    gap:10px !important;
    border-right:1px solid rgba(255,255,255,.10) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
  }
  .trust-item:nth-child(2n){border-right:0 !important;}
  .trust-item:nth-last-child(-n+2){border-bottom:0 !important;}
  .trust-item strong{font-size:11px !important;line-height:1.15 !important;}
  .trust-item small{font-size:11px !important;line-height:1.35 !important;}
  .trust-icon{width:30px !important;height:30px !important;margin:0 !important;}
  .trust-icon::before{font-size:24px !important;}

  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .service-card{
    min-height:170px !important;
    padding:20px 12px !important;
  }
  .service-card p{display:none !important;}
  .service-card h3{font-size:13px !important;line-height:1.18 !important;}
  .service-card a{font-size:10px !important;}

  .inline-cta,.project-note{
    display:grid !important;
    justify-items:center !important;
    text-align:center !important;
  }

  .project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:145px !important;
    gap:10px !important;
  }
  .project-card span{font-size:10px !important;line-height:1.2 !important;text-align:center !important;}

  .footer-social{justify-content:center !important;}
  .footer-bottom a{display:inline !important;}
}

@media (max-width:360px){
  .hero-copy h1,.hero h1{font-size:30px !important;max-width:285px !important;}
  .hero-copy p{font-size:14px !important;max-width:285px !important;}
  .hero-points span{font-size:9px !important;padding:7px 8px !important;}
  .trust-strip{grid-template-columns:1fr !important;}
  .trust-item{border-right:0 !important;}
  .trust-item:not(:last-child){border-bottom:1px solid rgba(255,255,255,.10) !important;}
  .service-grid,.project-grid{grid-template-columns:1fr !important;}
}

/* Ajuste de altura final para a hero caber melhor na primeira tela */
@media (min-width:781px){
  .hero{padding:112px 0 46px !important;}
  .hero-grid{min-height:470px !important;}
}


/* V5 icon corrections */

.icon-whats{
  width:20px;
  height:20px;
  display:inline-block;
  flex:0 0 auto;
  background:url('img/icons/whatsapp.svg') center/contain no-repeat;
  border:none;
  border-radius:0;
  position:relative;
}
.icon-whats::before,.icon-whats::after{display:none !important;content:none !important;}
.floating-whats .icon-whats{width:28px;height:28px;}

.service-icon{
  display:block;
  width:72px;
  height:72px;
  position:relative;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:drop-shadow(0 10px 18px rgba(209,22,22,.18));
}
.service-icon::before,.service-icon::after{display:none !important;content:none !important;}
.icon-frame{background-image:url('img/icons/warehouse.svg');}
.icon-mezzanine{background-image:url('img/icons/mezzanine.svg');}
.icon-roof{background-image:url('img/icons/coverage.svg');}
.icon-sheets{background-image:url('img/icons/roof.svg');}
.icon-gate{background-image:url('img/icons/gate.svg');}
.icon-zinc{background-image:url('img/icons/sheet.svg');}
.icon-gutter{background-image:url('img/icons/gutter.svg');}
.icon-railing{background-image:url('img/icons/railing.svg');}

.trust-icon{
  width:34px;height:34px;flex:0 0 34px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.trust-icon::before{display:none !important;content:none !important;}
.trust-icon[data-icon="clock"]{background-image:url('img/icons/whatsapp.svg');opacity:0;}
/* replace trust icons with simpler glyphs via mask-like inline SVG data URIs */
.trust-icon[data-icon="clock"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'%3E%3Ccircle cx='18' cy='18' r='12' stroke='%23ff2b2b' stroke-width='2.8'/%3E%3Cpath d='M18 11v7l4 3' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");opacity:1;}
.trust-icon[data-icon="helmet"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M9 21a9 9 0 0 1 18 0' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M7 21h22' stroke='%23ff2b2b' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M18 12v5' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");}
.trust-icon[data-icon="industry"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M7 28V15l8 5v-5l8 5V8l6 4v16H7Z' stroke='%23ffffff' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M11 28v-6' stroke='%23ff2b2b' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");}
.trust-icon[data-icon="budget"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none'%3E%3Crect x='8' y='7' width='20' height='22' rx='3' stroke='%23ffffff' stroke-width='2.5'/%3E%3Cpath d='M12 13h12M12 18h12M12 23h7' stroke='%23ff2b2b' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");}

@media (max-width:780px){
  .service-icon{width:62px;height:62px;}
  .floating-whats{display:grid;place-items:center;}
  .floating-whats .icon-whats{width:26px;height:26px;}
}


/* V6 auditoria final: animações e WhatsApp flutuante premium */
:root{--ease-out:cubic-bezier(.16,1,.3,1);}

.site-header{
  animation: headerDrop .65s var(--ease-out) both;
}

.hero-copy.reveal.is-visible{
  animation: heroCardIn .9s var(--ease-out) both;
}

.hero-points span{
  opacity:0;
  transform:translateY(8px) scale(.96);
  animation: microTagIn .55s var(--ease-out) forwards;
}
.hero-points span:nth-child(1){animation-delay:.18s;}
.hero-points span:nth-child(2){animation-delay:.28s;}
.hero-points span:nth-child(3){animation-delay:.38s;}

.hero-actions .btn{
  will-change:transform, box-shadow;
}
.hero-actions .btn-primary{
  animation: ctaBreath 3.4s ease-in-out infinite;
}

.trust-strip.is-visible .trust-item{
  opacity:0;
  transform:translateY(16px);
  animation: cardUp .62s var(--ease-out) forwards;
}
.trust-strip.is-visible .trust-item:nth-child(1){animation-delay:.04s;}
.trust-strip.is-visible .trust-item:nth-child(2){animation-delay:.12s;}
.trust-strip.is-visible .trust-item:nth-child(3){animation-delay:.20s;}
.trust-strip.is-visible .trust-item:nth-child(4){animation-delay:.28s;}

.service-card.reveal.is-visible .service-icon{
  animation: iconPop .72s var(--ease-out) both;
}
.service-card:hover .service-icon,
.service-card:focus-within .service-icon{
  transform:translateY(-4px) scale(1.06);
  filter:drop-shadow(0 16px 26px rgba(209,22,22,.30));
}
.service-icon{transition:transform .32s var(--ease-out), filter .32s ease;}

.project-card.reveal.is-visible img{
  animation: imageSettle .9s var(--ease-out) both;
}
.project-card::after{
  content:"";
  position:absolute;
  inset:-80% -60%;
  z-index:3;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.18) 50%,transparent 62%);
  transform:translateX(-70%) rotate(8deg);
  opacity:0;
  pointer-events:none;
}
.project-card:hover::after,
.project-card:focus-visible::after{
  opacity:1;
  animation: shineSweep .9s ease forwards;
}

.inline-cta.reveal.is-visible,
.project-note.reveal.is-visible{
  animation: softGlow .9s var(--ease-out) both;
}

.floating-whats{
  right:24px;
  bottom:24px;
  width:auto;
  height:60px;
  min-width:60px;
  padding:0 18px 0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#20c76f,#0f9c63);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  overflow:visible;
  animation: whatsFloat 2.6s ease-in-out infinite;
  box-shadow:0 18px 46px rgba(23,190,106,.42), 0 0 0 8px rgba(23,190,106,.08);
}
.floating-whats::before,
.floating-whats::after{
  content:"";
  position:absolute;
  inset:-8px;
  border:1px solid rgba(37,211,102,.55);
  border-radius:999px;
  opacity:0;
  transform:scale(.84);
  animation: whatsRing 2.4s ease-out infinite;
}
.floating-whats::after{animation-delay:1.2s;}
.floating-whats .icon-whats{
  width:28px;
  height:28px;
  position:relative;
  z-index:2;
  animation: whatsIconWiggle 4.2s ease-in-out infinite;
}
.floating-label{
  position:relative;
  z-index:2;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.floating-ring{display:none;}

@keyframes headerDrop{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes heroCardIn{from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes microTagIn{to{opacity:1;transform:none}}
@keyframes ctaBreath{0%,100%{box-shadow:0 16px 40px rgba(209,22,22,.30)}50%{box-shadow:0 18px 54px rgba(255,43,43,.48)}}
@keyframes cardUp{to{opacity:1;transform:none}}
@keyframes iconPop{0%{opacity:0;transform:scale(.72) rotate(-3deg)}65%{opacity:1;transform:scale(1.08) rotate(0)}100%{opacity:1;transform:scale(1)}}
@keyframes imageSettle{from{transform:scale(1.055);filter:saturate(1.18) contrast(1.10)}to{transform:scale(1);filter:saturate(1.06) contrast(1.04)}}
@keyframes shineSweep{from{transform:translateX(-70%) rotate(8deg)}to{transform:translateX(70%) rotate(8deg)}}
@keyframes softGlow{0%{box-shadow:0 0 0 rgba(209,22,22,0);transform:translateY(18px)}100%{box-shadow:0 20px 70px rgba(209,22,22,.12);transform:none}}
@keyframes whatsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes whatsRing{0%{opacity:.65;transform:scale(.82)}70%,100%{opacity:0;transform:scale(1.28)}}
@keyframes whatsIconWiggle{0%,88%,100%{transform:rotate(0) scale(1)}90%{transform:rotate(-9deg) scale(1.05)}93%{transform:rotate(9deg) scale(1.05)}96%{transform:rotate(-5deg) scale(1.02)}}

@media (max-width:780px){
  .reveal{transform:translateY(20px);transition-duration:.65s;}
  .hero-copy.reveal.is-visible{animation:mobileHeroIn .72s var(--ease-out) both;}
  .hero-actions .btn-primary{animation:mobileCtaPulse 2.8s ease-in-out infinite;}
  .trust-strip.is-visible .trust-item{animation-duration:.48s;}
  .service-card.reveal.is-visible{animation:mobileCardPop .58s var(--ease-out) both;}
  .project-card.reveal.is-visible{animation:mobileCardPop .58s var(--ease-out) both;}
  .process-card.reveal.is-visible,
  .testimonial-card.reveal.is-visible{animation:mobileCardPop .58s var(--ease-out) both;}

  .floating-whats{
    right:16px !important;
    bottom:16px !important;
    width:62px !important;
    height:62px !important;
    min-width:62px !important;
    padding:0 !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    box-shadow:0 18px 44px rgba(23,190,106,.50), 0 0 0 7px rgba(23,190,106,.09) !important;
    animation:whatsFloatMobile 2.2s ease-in-out infinite !important;
  }
  .floating-whats .icon-whats{width:30px !important;height:30px !important;}
  .floating-label{
    position:absolute;
    right:72px;
    bottom:11px;
    display:inline-flex;
    align-items:center;
    height:40px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(10,10,12,.88);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 12px 34px rgba(0,0,0,.34);
    backdrop-filter:blur(12px);
    font-size:10px;
    opacity:0;
    transform:translateX(10px) scale(.96);
    animation:mobileWhatsLabel 7s ease-in-out infinite;
    pointer-events:none;
  }

  .main-nav.is-open a{
    opacity:0;
    transform:translateY(8px);
    animation:menuItemIn .28s ease forwards;
  }
  .main-nav.is-open a:nth-child(1){animation-delay:.03s;}
  .main-nav.is-open a:nth-child(2){animation-delay:.07s;}
  .main-nav.is-open a:nth-child(3){animation-delay:.11s;}
  .main-nav.is-open a:nth-child(4){animation-delay:.15s;}
  .main-nav.is-open a:nth-child(5){animation-delay:.19s;}
}

@keyframes mobileHeroIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mobileCtaPulse{0%,100%{transform:none;box-shadow:0 16px 40px rgba(209,22,22,.32)}50%{transform:translateY(-2px);box-shadow:0 20px 58px rgba(255,43,43,.50)}}
@keyframes mobileCardPop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes whatsFloatMobile{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.03)}}
@keyframes mobileWhatsLabel{0%,18%,100%{opacity:0;transform:translateX(10px) scale(.96)}24%,48%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes menuItemIn{to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}


/* V8 correction: clearer NR-35 hardhat icon */
.trust-icon[data-icon="helmet"]{background-image:url('img/icons/hardhat.svg') !important;}