/* MetalWave — Industrial Steel Blue + Molten Amber Design System (static port) */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --background:transparent; --foreground:#161e2b;
  --card:#ffffff; --card-fg:#161e2b;
  --muted:#eef1f5; --muted-fg:#5b6573;
  --secondary:#f1f4f8;
  --border:#dde2ea;
  --primary:#003a99; --primary-fg:#fff; --primary-glow:#1771e6;
  --accent:#f48a1f; --accent-fg:#1c1206; --accent-glow:#ffae33;
  --steel:#2c333d; --steel-fg:#f6f7f9;
  --radius:.75rem;
  --shadow-card:0 10px 30px -15px rgba(28,32,40,.18);
  --shadow-card-hover:0 25px 50px -20px rgba(0,58,153,.35);
  --shadow-elegant:0 20px 50px -20px rgba(0,58,153,.3);
  --shadow-glow:0 0 60px rgba(244,138,31,.4);
  --gradient-hero:linear-gradient(135deg,rgba(15,21,33,.85),rgba(20,52,99,.7));
  --gradient-primary:linear-gradient(135deg,var(--primary),var(--primary-glow));
  --gradient-spark:linear-gradient(135deg,#f48a1f,#ed5e1f);
  --gradient-steel:linear-gradient(180deg,#2c333d,#171c25);
}
*{box-sizing:border-box;border-color:var(--border);margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,h5{font-family:'Oswald',Impact,sans-serif;letter-spacing:-.02em;line-height:1.1}
.container{max-width:1400px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 2rem}}
.section{padding:4rem 0}
@media(min-width:768px){.section{padding:6rem 0}}
.heading-display{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(2.25rem,5vw,4rem);line-height:1.05}
.heading-section{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(1.875rem,4vw,3rem)}
.text-spark{background:var(--gradient-spark);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.text-primary{color:var(--primary)}
.text-muted{color:var(--muted-fg)}
.text-white{color:#fff}
.eyebrow{display:inline-block;padding:.4rem 1rem;border-radius:9999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em}
.eyebrow.primary{background:rgba(0,58,153,.1);color:var(--primary);border:1px solid rgba(0,58,153,.2)}
.eyebrow.accent{background:rgba(244,138,31,.1);color:var(--accent);border:1px solid rgba(244,138,31,.2)}
.eyebrow.accent-dark{background:rgba(244,138,31,.2);color:var(--accent-glow);border:1px solid rgba(244,138,31,.3);backdrop-filter:blur(6px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;border-radius:.6rem;font-weight:700;font-size:.95rem;transition:all .25s ease;white-space:nowrap}
.btn-lg{padding:.9rem 1.8rem;font-size:1rem}
.btn-hero{background:var(--gradient-spark);color:var(--accent-fg);box-shadow:var(--shadow-glow)}
.btn-hero:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.05)}
.btn-whatsapp{background:#25D366;color:#fff}
.btn-whatsapp:hover{background:#1ebe57;transform:translateY(-2px)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--foreground)}
.btn-outline:hover{background:var(--secondary)}

/* Navbar */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);transition:all .3s;padding:.6rem 0}
.nav.scrolled{background:rgba(255,255,255,.97);box-shadow:0 4px 20px rgba(0,0,0,.06);padding:.4rem 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-logo img{height:54px;width:auto;display:block;object-fit:contain}
.nav-links{display:none;gap:2rem;align-items:center}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-link{position:relative;font-size:.9rem;font-weight:600;color:rgba(22,30,43,.8);transition:color .2s}
.nav-link:hover{color:var(--primary)}
.nav-link::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--accent);transition:width .25s}
.nav-link:hover::after{width:100%}
.nav-actions{display:none;gap:.75rem;align-items:center}
@media(min-width:768px){.nav-actions{display:flex}}
.nav-phone{display:flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600}
.nav-phone svg{color:var(--accent)}
.nav-toggle{display:block;padding:.5rem}
@media(min-width:1024px){.nav-toggle{display:none}}
.dropdown{position:relative}
.dropdown-btn{display:inline-flex;align-items:center;gap:.25rem;font-size:.9rem;font-weight:600;color:rgba(22,30,43,.8)}
.dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.6rem;width:18rem;background:#fff;border:1px solid var(--border);border-radius:.85rem;box-shadow:var(--shadow-card-hover);overflow:hidden;opacity:0;visibility:hidden;transition:all .2s}
.dropdown:hover .dropdown-menu,.dropdown.open .dropdown-menu{opacity:1;visibility:visible;margin-top:.4rem}
.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;transition:background .2s}
.dropdown-item:hover{background:var(--secondary)}
.dropdown-icon{width:36px;height:36px;border-radius:.55rem;background:var(--gradient-primary);display:grid;place-items:center;color:#fff;flex-shrink:0;transition:transform .25s}
.dropdown-item:hover .dropdown-icon{transform:scale(1.1)}
.dropdown-item span.label{font-size:.9rem;font-weight:600}
.mobile-menu{display:none;background:#ffffff;border-top:1px solid rgba(0,0,0,0.1);animation:fadeIn .3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.mobile-menu.open{display:block}
.mobile-menu ul{padding:1.5rem 0}
.mobile-menu li>a,.mobile-menu li>button{display:block;width:100%;text-align:left;padding:.85rem 0;font-weight:600;font-size:1.05rem;transition:all 0.2s ease;color:#000000 !important}
.mobile-menu li>a:active,.mobile-menu li>button:active{color:#f48a1f;padding-left:0.5rem}
.mobile-services{display:none;padding-left:1.25rem;border-left:none;margin-left:.5rem;margin-top:0.5rem}
.mobile-services.open{display:block;animation:slideDown 0.3s ease}
.mobile-services a{font-size:.9rem;font-weight:500;color:#000000 !important;padding:0.65rem 0;display:block;transition:all 0.2s ease}
.mobile-services a:active{color:#f48a1f;padding-left:0.5rem}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* Hero slider */
.hero{position:relative;padding-top:64px}
@media(min-width:1024px){.hero{padding-top:72px}}
.slider{position:relative;overflow:hidden}
.slides{display:flex;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.slide{position:relative;flex:0 0 100%;height:78vh;min-height:560px;overflow:hidden}
.slide::before{content:'';position:absolute;inset:0;background:linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);z-index:1}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-content{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.slide-text{max-width:760px;color:#fff;padding:0 5rem}
.slide-text .eyebrow{margin-bottom:1.25rem;color:var(--accent-glow);text-shadow:2px 2px 4px rgba(0,0,0,0.8)}
.slide-text h1{margin-bottom:1.25rem;color:#fff;text-shadow:3px 3px 6px rgba(0,0,0,0.9)}
.slide-text p{font-size:1.15rem;color:rgba(255,255,255,.95);max-width:600px;margin-bottom:2rem;text-shadow:2px 2px 4px rgba(0,0,0,0.8)}
.slide-cta{display:flex;flex-wrap:wrap;gap:1rem}
.slide.active .eyebrow,.slide.active h1,.slide.active p,.slide.active .slide-cta{animation:fadeUp .7s ease both}
.slide.active h1{animation-delay:.15s}
.slide.active p{animation-delay:.3s}
.slide.active .slide-cta{animation-delay:.45s}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;display:grid;place-items:center;transition:all .25s}
.slider-arrow:hover{background:var(--accent);transform:translateY(-50%) scale(1.1)}
.slider-arrow.prev{left:0.5rem}.slider-arrow.next{right:0.5rem}
@media(max-width:768px){.slide-text{padding:0 3.5rem}}
.dots{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:.5rem}
.dot{width:8px;height:8px;border-radius:9999px;background:rgba(255,255,255,.5);transition:all .3s}
.dot.active{width:40px;background:var(--accent)}

/* Stats bar */
.stats{background:var(--steel);color:var(--steel-fg)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;text-align:center;padding:1.25rem 0}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-num{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.75rem;color:var(--accent)}
@media(min-width:768px){.stat-num{font-size:1.9rem}}
.stat-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(246,247,249,.7)}

/* Sections */
.section-head{text-align:center;max-width:780px;margin:0 auto 3rem}
.section-head h2{margin:1rem 0 1rem}
.section-head p{color:var(--muted-fg);font-size:1.05rem}
.bg-secondary{background:rgba(241,244,248,.55);position:relative;overflow:hidden}
.bg-secondary::before{content:"";position:absolute;inset:0;opacity:.03;pointer-events:none;background-image:radial-gradient(circle at 2px 2px,var(--primary) 1px,transparent 0);background-size:32px 32px}

/* Service cards */
.cards{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:#fff;border:1px solid var(--border);border-radius:1rem;padding:1.7rem;box-shadow:var(--shadow-card);transition:all .4s;overflow:hidden;display:block;height:100%}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-card-hover);border-color:rgba(0,58,153,.3)}
.card .glow{position:absolute;right:-3rem;top:-3rem;width:8rem;height:8rem;border-radius:50%;background:var(--gradient-spark);opacity:0;transition:opacity .5s}
.card:hover .glow{opacity:.1}
.card-icon{width:56px;height:56px;border-radius:.85rem;background:var(--gradient-primary);display:grid;place-items:center;color:#fff;margin-bottom:1.25rem;box-shadow:var(--shadow-elegant);transition:transform .4s}
.card:hover .card-icon{transform:scale(1.1) rotate(3deg)}
.card h3{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;transition:color .2s}
.card:hover h3{color:var(--primary)}
.card .desc{color:var(--muted-fg);font-size:.9rem;line-height:1.55;margin-bottom:1rem}
.card .feats{margin-bottom:1.25rem}
.card .feats li{display:flex;align-items:center;gap:.5rem;font-size:.875rem;padding:.15rem 0}
.card .feats li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.card .more{color:var(--primary);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:.25rem;transition:color .2s}
.card:hover .more{color:var(--accent)}

/* Why */
.why-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-item{display:flex;gap:1rem;padding:1.5rem;border-radius:.85rem;background:rgba(241,244,248,.5);border:1px solid transparent;transition:all .3s}
.why-item:hover{background:#fff;box-shadow:var(--shadow-card-hover);transform:translateY(-3px);border-color:rgba(0,58,153,.2)}
.why-item .ic{flex-shrink:0;width:48px;height:48px;border-radius:.6rem;background:var(--gradient-spark);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-glow)}
.why-item h3{font-size:1.05rem;font-weight:700;margin-bottom:.25rem}
.why-item p{font-size:.875rem;color:var(--muted-fg);line-height:1.5}

/* Gallery (marquee) */
.gallery-section{background:var(--steel);color:var(--steel-fg);overflow:hidden}
.gallery-section .section-head h2,.gallery-section .section-head p{color:#fff}
.marquee-row{overflow:hidden;margin-bottom:1.5rem;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex;gap:1.5rem;width:max-content}
.marquee-row:hover .marquee-track{animation-play-state:paused}
.marquee-row.reverse .marquee-track{animation-direction:reverse;animation-duration:50s}
.gcard{position:relative;width:240px;height:240px;flex-shrink:0;border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-elegant);cursor:pointer}
@media(min-width:768px){.gcard{width:300px;height:300px}}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.gcard:hover img{transform:scale(1.1)}
.gcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000,rgba(0,0,0,.4) 50%,transparent);opacity:.85;transition:opacity .3s;z-index:1}
.gcard:hover::after{opacity:.95}
.gcard .meta, .svc-gimg .meta{position:absolute;bottom:0;left:0;right:0;padding:1.1rem;transform:translateY(.4rem);transition:transform .3s;z-index:2}
.gcard:hover .meta, .svc-gimg:hover .meta{transform:translateY(0)}
.gcard .tag, .svc-gimg .tag{display:inline-block;padding:.35rem .75rem;border-radius:.4rem;background:#f48a1f;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}
.gcard .meta h4, .svc-gimg .meta h4{color:#fff;font-size:1.1rem;font-weight:700}
.gcard .call-btn, .svc-gimg .call-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;border-radius:.5rem;background:#16a34a;color:#fff;font-size:.8rem;font-weight:700;margin-top:.6rem;transition:all .25s;text-decoration:none;box-shadow:0 4px 12px rgba(22,163,74,.3)}
.gcard .call-btn:hover, .svc-gimg .call-btn:hover{background:#15803d;transform:translateY(-2px);box-shadow:0 6px 16px rgba(22,163,74,.4)}
.gcard .call-btn svg, .svc-gimg .call-btn svg{width:16px;height:16px}

/* Testimonials */
.tgrid{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:1100px;margin:0 auto}
@media(min-width:768px){.tgrid{grid-template-columns:repeat(2,1fr)}}
.tcard{position:relative;background:#fff;border:1px solid var(--border);border-radius:1rem;padding:1.7rem;box-shadow:var(--shadow-card);transition:all .3s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.tcard .quote-ic{position:absolute;top:1.2rem;right:1.2rem;color:rgba(0,58,153,.1);width:40px;height:40px}
.stars{display:flex;gap:.15rem;margin-bottom:.75rem;color:var(--accent)}
.tcard p.quote{color:rgba(22,30,43,.9);font-style:italic;line-height:1.6;margin-bottom:1.25rem}
.tcard .person{display:flex;align-items:center;gap:.75rem;padding-top:1rem;border-top:1px solid var(--border)}
.tcard .avatar{width:44px;height:44px;border-radius:50%;background:var(--gradient-primary);color:#fff;display:grid;place-items:center;font-weight:700}
.tcard .pname{font-weight:700}
.tcard .prole{font-size:.75rem;color:var(--muted-fg)}

/* Contact */
.contact-section{background:var(--gradient-steel);color:var(--steel-fg);position:relative;overflow:hidden}
.contact-section .section-head h2,.contact-section .section-head p{color:#fff}
.contact-section .section-head p{color:rgba(246,247,249,.75)}
.contact-section::before,.contact-section::after{content:"";position:absolute;width:24rem;height:24rem;border-radius:50%;filter:blur(80px);opacity:.1;pointer-events:none}
.contact-section::before{top:0;left:25%;background:var(--accent)}
.contact-section::after{bottom:0;right:25%;background:var(--primary)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1100px;margin:0 auto;position:relative}
@media(min-width:1024px){.contact-grid{grid-template-columns:2fr 3fr}}
.cinfo{display:flex;flex-direction:column;gap:1rem}
.cbox{display:flex;align-items:flex-start;gap:1rem;padding:1.1rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);transition:all .3s}
.cbox:hover{transform:translateY(-2px);background:rgba(255,255,255,.1);border-color:rgba(244,138,31,.4)}
.cbox.accent{background:rgba(244,138,31,.15);border-color:rgba(244,138,31,.4)}
.cbox.accent:hover{background:rgba(244,138,31,.25)}
.cbox .ic{flex-shrink:0;width:44px;height:44px;border-radius:.55rem;background:var(--gradient-spark);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-glow)}
.cbox .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(246,247,249,.6);margin-bottom:.15rem}
.cbox .val{font-weight:700;color:#fff}
.cform{background:#fff;color:var(--card-fg);border-radius:1rem;padding:1.75rem;box-shadow:var(--shadow-elegant)}
.cform .row{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1rem}
@media(min-width:640px){.cform .row.two{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;padding:.65rem .9rem;border:1px solid var(--border);border-radius:.45rem;background:var(--background);font:inherit;transition:box-shadow .15s,border-color .15s}
.field textarea{resize:none;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,58,153,.15)}
.cform button{width:100%;justify-content:center;margin-top:.25rem}
.cform .note{font-size:.7rem;text-align:center;color:var(--muted-fg);margin-top:.75rem}

/* Footer */
.footer{background:var(--steel);color:var(--steel-fg);border-top:1px solid rgba(255,255,255,.1)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;padding:3.5rem 0}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer h4{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.875rem;color:#fff;margin-bottom:1rem}
.footer ul li{padding:.25rem 0;font-size:.875rem;color:rgba(246,247,249,.7)}
.footer ul li a{transition:color .2s}
.footer ul li a:hover{color:var(--accent)}
.footer .logo{height:40px;margin-bottom:1rem;filter:brightness(0) invert(1)}
.footer .desc{font-size:.875rem;color:rgba(246,247,249,.7);line-height:1.6;margin-bottom:1rem}
.socials{display:flex;gap:.75rem}
.socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:background .2s}
.socials a:hover{background:var(--accent)}
.socials a[href*="wa.me"]:hover{background:#25D366}
.socials a[href^="tel:"]:hover{background:#25D366}
.socials a[href^="mailto:"]:hover{background:#dc3545}
.contact-list li{display:flex;gap:.5rem;align-items:flex-start;font-size:.875rem}
.contact-list svg{flex-shrink:0;margin-top:.15rem;transition:color .2s}
.contact-list li:nth-child(1) svg{color:#25D366}
.contact-list li:nth-child(2) svg{color:#25D366}
.contact-list li:nth-child(3) svg{color:#dc3545}
.contact-list li:nth-child(4) svg{color:#2563eb}
.bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.5rem 0;display:flex;flex-direction:column;gap:.5rem;justify-content:space-between;font-size:.75rem;color:rgba(246,247,249,.6)}
@media(min-width:768px){.bottom{flex-direction:row}}

/* WhatsApp FAB */
.fab{position:fixed;bottom:1.5rem;right:1.5rem;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.5);animation:pulse 2s infinite;overflow:hidden}
.fab svg{width:28px;height:28px;flex-shrink:0}
.fab:hover{transform:scale(1.1)}

/* Service detail page */
.svc-hero{position:relative;padding:8rem 0 5rem;overflow:hidden;color:#fff}
@media(max-width:768px){.svc-hero{padding:2rem 0 2rem}}
@media(max-width:480px){.svc-hero{padding:1.5rem 0 2rem}}
@media(max-width:357px){.svc-hero{padding:1.5rem 0 2rem}}
.svc-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.svc-hero .container{position:relative;z-index:2}
.svc-hero .badge-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.svc-hero .badge-icon{width:56px;height:56px;border-radius:1rem;background:var(--gradient-spark);display:grid;place-items:center;box-shadow:var(--shadow-glow)}
.svc-hero h1{margin-bottom:1.25rem;color:#2563eb}
.svc-hero p.tag{font-size:1.15rem;max-width:680px;margin-bottom:2rem;color:rgba(255,255,255,.92)}
.svc-about{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:1024px){.svc-about{grid-template-columns:2fr 1fr}}
.svc-about h2{margin:1rem 0}
.svc-about p{color:var(--muted-fg);font-size:1.05rem;line-height:1.65;margin-bottom:1rem}
.materials-card{background:rgba(241,244,248,.5);border:1px solid var(--border);border-radius:1rem;padding:1.5rem;height:fit-content}
.materials-card h3{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.25rem;margin-bottom:1rem}
.materials-card li{display:flex;gap:.5rem;align-items:flex-start;padding:.4rem 0}
.materials-card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:.55rem;flex-shrink:0}
.machines-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.machines-grid{grid-template-columns:repeat(2,1fr)}}
.machine{background:#fff;border:1px solid var(--border);border-radius:1rem;padding:1.7rem;box-shadow:var(--shadow-card);transition:all .3s}
.machine:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.machine .head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.machine .head .ic{width:44px;height:44px;border-radius:.7rem;background:var(--gradient-primary);display:grid;place-items:center;color:#fff}
.machine h3{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.2rem}
.machine li{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem;padding:.25rem 0;color:rgba(22,30,43,.85)}
.machine li svg{color:var(--primary);flex-shrink:0;margin-top:.15rem}
.svc-gallery{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:768px){.svc-gallery{grid-template-columns:repeat(4,1fr)}}
.svc-gimg{position:relative;aspect-ratio:1;border-radius:.85rem;overflow:hidden;box-shadow:var(--shadow-elegant);cursor:pointer}
.svc-gimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.svc-gimg:hover img{transform:scale(1.1)}
.svc-gimg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000,rgba(0,0,0,.2) 50%,transparent);opacity:.85;z-index:1}
.svc-gimg:hover::after{opacity:.95}
.svc-gimg .lbl{position:absolute;bottom:4.5rem;left:.75rem;right:.75rem;color:#fff;font-weight:600;font-size:.85rem;z-index:2}
.svc-gimg .call-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;border-radius:.5rem;background:#16a34a;color:#fff;font-size:.8rem;font-weight:700;margin-top:.6rem;transition:all .25s;text-decoration:none;box-shadow:0 4px 12px rgba(22,163,74,.3);position:absolute;bottom:.75rem;left:.75rem;z-index:2}
.svc-gimg .call-btn:hover{background:#15803d;transform:translateY(-2px);box-shadow:0 6px 16px rgba(22,163,74,.4)}
.svc-gimg .call-btn svg{width:16px;height:16px}
.bp-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.bp-grid{grid-template-columns:1fr 1fr}}
.bp-card{background:#fff;border:1px solid var(--border);border-radius:1rem;padding:2rem;box-shadow:var(--shadow-card)}
.bp-card.dark{background:var(--gradient-primary);color:#fff;border:0;box-shadow:var(--shadow-elegant)}
.bp-card .head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.bp-card h3{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.75rem}
.bp-card li{display:flex;gap:.75rem;align-items:flex-start;padding:.4rem 0}
.bp-card li svg{color:var(--primary);margin-top:.2rem;flex-shrink:0}
.bp-card.dark li svg{display:none}
.bp-card.dark li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-glow);margin-top:.55rem;flex-shrink:0}
.cta-final{background:var(--gradient-steel);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-final::before,.cta-final::after{content:"";position:absolute;width:24rem;height:24rem;border-radius:50%;filter:blur(80px);opacity:.15;pointer-events:none}
.cta-final::before{top:0;left:25%;background:var(--accent)}
.cta-final::after{bottom:0;right:25%;background:var(--primary)}
.cta-final .container{position:relative;z-index:1;max-width:780px}
.cta-final h2{color:#fff;margin-bottom:1rem}
.cta-final p{color:rgba(255,255,255,.8);font-size:1.05rem;margin-bottom:2rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:100;display:none;align-items:center;justify-content:center;padding:2rem;animation:fade .25s ease}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:80vh;border-radius:.75rem;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox .close,.lightbox .lprev,.lightbox .lnext{position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;backdrop-filter:blur(8px);transition:all .2s}
.lightbox .close{top:1.5rem;right:1.5rem}
.lightbox .lprev{left:1.5rem;top:50%;transform:translateY(-50%)}
.lightbox .lnext{right:1.5rem;top:50%;transform:translateY(-50%)}
.lightbox .close:hover,.lightbox .lprev:hover,.lightbox .lnext:hover{background:var(--accent)}
.lightbox .lcaption{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:#fff;font-weight:600;background:rgba(0,0,0,.6);padding:.5rem 1rem;border-radius:.4rem}

/* Toast */
.toast{position:fixed;bottom:6rem;right:1.5rem;z-index:200;background:#fff;color:var(--foreground);padding:1rem 1.25rem;border-radius:.75rem;box-shadow:0 10px 40px rgba(0,0,0,.2);border-left:4px solid var(--accent);max-width:320px;opacity:0;transform:translateY(20px);transition:all .3s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.toast strong{display:block;margin-bottom:.15rem}
.toast small{color:var(--muted-fg);font-size:.8rem}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* Animations */
@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fade{0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{box-shadow:0 8px 24px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.5)}50%{box-shadow:0 8px 24px rgba(37,211,102,.5),0 0 0 14px rgba(37,211,102,0)}}

/* Green Call Now button */
.btn-call{background:#16a34a;color:#fff;box-shadow:0 6px 18px rgba(22,163,74,.35);font-weight:700}
.btn-call:hover{background:#15803d;transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,163,74,.45)}
.btn-call svg{stroke:#fff}
@media (max-width: 640px){.nav-logo img{height:42px}}


/* Page Title Section */
.page-title-section {
  padding: 5.5rem 0 0.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  margin-top: 64px;
}

@media (min-width: 1024px) {
  .page-title-section {
    margin-top: 72px;
    padding: 6rem 0 0.75rem;
  }
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .page-title {
    font-size: 2.75rem;
  }
}

/* New Hero Section with Image */
.hero-with-image {
  padding: 0.5rem 0 4rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

@media (min-width: 768px) {
  .hero-with-image {
    padding: 0.75rem 0 5rem;
  }
}

@media (min-width: 768px) {
  .hero-with-image {
    padding: 8rem 0 6rem;
  }
}

.hero-content-wrapper {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-content-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.hero-text-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #1a1a1a;
}

@media (min-width: 768px) {
  .hero-text-content h1 {
    font-size: 3.5rem;
  }
}

.hero-text-content .tagline {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ff6b35;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.hero-text-content .description {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 2rem;
}

.hero-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-orange {
  background: #ff6b35;
  color: white;
  padding: 0.875rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn-orange:hover {
  background: #e55a2b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.btn-green {
  background: #28a745;
  color: white;
  padding: 0.875rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn-green:hover {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-whatsapp {
  background: #25d366;
  color: white;
  padding: 0.875rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn-whatsapp:hover {
  background: #20ba5a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.hero-image-wrapper {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  height: 450px;
}

.hero-image-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: white;
}

/* About Section with Materials Card */
.about-section-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .about-section-grid {
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
  }
}

.about-badge {
  display: inline-block;
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1.5rem;
}

.about-section-grid h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  color: #1a1a1a;
}

@media (min-width: 768px) {
  .about-section-grid h2 {
    font-size: 2.5rem;
  }
}

.about-section-grid p {
  font-size: 1rem;
  line-height: 1.7;
  color: #666;
  margin-bottom: 1rem;
}

.materials-box {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.materials-box h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #1a1a1a;
}

.materials-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.materials-box li {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
  color: #444;
  font-size: 0.95rem;
}

.materials-box li:last-child {
  border-bottom: none;
}

.materials-box li:before {
  content: "✓";
  color: #25d366;
  font-weight: bold;
  margin-right: 0.75rem;
}


/* Service Page Title - Mobile Fix */
.service-page-title {
  font-size: clamp(2rem, 6vw, 4rem) !important;
  font-weight: 800 !important;
  color: #ca381b !important;
  margin: 0 0 2rem 0 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  width: 100% !important;
  line-height: 1.2 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  padding: 0 1rem !important;
  display: block !important;
  white-space: normal !important;
  position: relative !important;
  z-index: 10 !important;
}

@media (max-width: 768px) {
  .service-page-title {
    font-size: 2rem !important;
    line-height: 1.3 !important;
    margin: 1rem auto 1.5rem auto !important;
    padding: 0 1rem !important;
    max-width: 100% !important;
    font-weight: 900 !important;
  }
  
  .hero-with-image {
    padding-top: 4rem !important;
  }
  
  .hero-with-image .container {
    padding-top: 1rem !important;
  }
}


/* Mobile Menu - Proper UI with moderate sizing */
@media (max-width: 768px) {
  .mobile-menu {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  
  .mobile-menu li {
    margin: 0.2rem 0;
  }
  
  .mobile-menu li > a,
  .mobile-menu li > button {
    padding: 0.9rem 0;
    font-size: 1.05rem;
    color: #f5e6d3;
  }
  
  /* Mobile menu Call Now button - green theme, left aligned */
  .mobile-menu .btn-call {
    width: auto !important;
    max-width: 200px !important;
    padding: 0.75rem 1.5rem !important;
    margin: 0.6rem 0 !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    background: #28a745 !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
  }
  
  .mobile-menu .btn-call:hover {
    background: #218838 !important;
  }
  
  /* Phone number link */
  .mobile-menu a[href^="tel:"] {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.7rem 0;
    color: #000000 !important;
  }
  
  /* Services dropdown */
  .mobile-menu #mSvcBtn {
    font-size: 1.05rem;
    padding: 0.9rem 0;
    color: #000000 !important;
  }
  
  .mobile-menu #mSvcBtn svg {
    stroke: #000000 !important;
  }
}