/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#1f2937;overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:56px}
@media(min-width:768px){body{padding-bottom:64px}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;font:inherit;border:none;background:none}
input,textarea,select{font:inherit}

/* ===== VARIABLES ===== */
:root{
  --color-white:#fff;
  --color-black:#000;
  --color-gray-50:#f9fafb;
  --color-gray-100:#f3f4f6;
  --color-gray-200:#e5e7eb;
  --color-gray-300:#d1d5db;
  --color-gray-400:#9ca3af;
  --color-gray-500:#6b7280;
  --color-gray-600:#4b5563;
  --color-gray-700:#374151;
  --color-gray-800:#1f2937;
  --color-gray-900:#111827;
  --color-green-50:#f0fdf4;
  --color-green-100:#dcfce7;
  --color-green-500:#22c55e;
  --color-green-600:#16a34a;
  --color-green-700:#15803d;
  --color-red-500:#ef4444;
  --color-red-100:#fee2e2;
  --color-yellow-100:#fef9c3;
  --color-yellow-400:#facc15;
  --color-yellow-700:#a16207;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 30px rgba(0,0,0,.1);
  --shadow-xl:0 12px 40px rgba(0,0,0,.12);
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-full:9999px;
  --container:1280px;
  --header-h:64px;
}

/* ===== CONTAINER ===== */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
@media(min-width:768px){.container{padding:0 32px}}
@media(min-width:1024px){.container{padding:0 40px}}

/* ===== LAYOUT HELPERS ===== */
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-1{gap:4px}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.gap-5{gap:20px}
.gap-6{gap:24px}
.gap-7{gap:28px}
.gap-8{gap:32px}
.gap-10{gap:40px}
.gap-12{gap:48px}
.text-center{text-align:center}
.text-left{text-align:left}
.w-full{width:100%}
.flex-1{flex:1}
.flex-shrink-0{flex-shrink:0}
.inline-flex{display:inline-flex}
.block{display:block}
.inline-block{display:inline-block}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.overflow-hidden{overflow:hidden}
.z-0{z-index:0}
.z-10{z-index:10}
.z-20{z-index:20}
.z-50{z-index:50}
.z-60{z-index:60}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.left-0{left:0}
.w-full{width:100%}
.h-full{height:100%}
.object-cover{object-fit:cover}
.leading-tight{line-height:1.2}
.leading-relaxed{line-height:1.625}
.tracking-wide{letter-spacing:.05em}
.tracking-wider{letter-spacing:.1em}
.tracking-tight{letter-spacing:-.02em}
.uppercase{text-transform:uppercase}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none}
.visible{visibility:visible}

/* ===== TYPOGRAPHY ===== */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1.1}
.text-6xl{font-size:3.75rem;line-height:1.1}
.text-7xl{font-size:4.5rem;line-height:1.05}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-black{font-weight:900}
@media(max-width:767px){
  .text-5xl{font-size:2.25rem}
  .text-6xl{font-size:2.5rem}
  .text-7xl{font-size:2.75rem}
}

/* ===== COLORS ===== */
.text-white{color:var(--color-white)}
.text-black{color:var(--color-black)}
.text-gray-200{color:var(--color-gray-200)}
.text-gray-300{color:var(--color-gray-300)}
.text-gray-400{color:var(--color-gray-400)}
.text-gray-500{color:var(--color-gray-500)}
.text-gray-600{color:var(--color-gray-600)}
.text-gray-700{color:var(--color-gray-700)}
.text-gray-800{color:var(--color-gray-800)}
.text-gray-900{color:var(--color-gray-900)}
.text-green-600{color:var(--color-green-600)}
.text-green-700{color:var(--color-green-700)}
.text-red-700{color:var(--color-red-500)}
.text-yellow-700{color:var(--color-yellow-700)}
.text-yellow-900{color:#713f12}

.bg-white{background:var(--color-white)}
.bg-black\/40{background:rgba(0,0,0,.4)}
.bg-black\/50{background:rgba(0,0,0,.5)}
.bg-black\/60{background:rgba(0,0,0,.6)}
.bg-gray-50{background:var(--color-gray-50)}
.bg-gray-100{background:var(--color-gray-100)}
.bg-gray-200{background:var(--color-gray-200)}
.bg-gray-300{background:var(--color-gray-300)}
.bg-gray-400{background:var(--color-gray-400)}
.bg-gray-700{background:var(--color-gray-700)}
.bg-gray-800{background:var(--color-gray-800)}
.bg-gray-900{background:var(--color-gray-900)}
.bg-green-100{background:var(--color-green-100)}
.bg-green-50{background:var(--color-green-50)}
.bg-red-500{background:var(--color-red-500)}
.bg-red-100{background:var(--color-red-100)}
.bg-yellow-100{background:var(--color-yellow-100)}
.bg-yellow-400{background:var(--color-yellow-400)}
.bg-white\/10{background:rgba(255,255,255,.1)}
.bg-white\/20{background:rgba(255,255,255,.2)}
.bg-white\/90{background:rgba(255,255,255,.9)}

.border{border:1px solid}
.border-0{border:0}
.border-t{border-top:1px solid}
.border-b{border-bottom:1px solid}
.border-b-2{border-bottom-width:2px}
.border-b-4{border-bottom-width:4px}
.border-l-4{border-left-width:4px}
.border-y{border-top:1px solid;border-bottom:1px solid}
.border-white{ border-color:var(--color-white)}
.border-white\/20{border-color:rgba(255,255,255,.2)}
.border-white\/50{border-color:rgba(255,255,255,.5)}
.border-gray-200{border-color:var(--color-gray-200)}
.border-gray-300{border-color:var(--color-gray-300)}
.border-gray-400{border-color:var(--color-gray-400)}
.border-gray-700{border-color:var(--color-gray-700)}
.border-green-200{border-color:#bbf7d0}
.border-red-200{border-color:#fecaca}

/* ===== HEADER / NAV ===== */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:50;
  background:rgba(31,41,55,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-gray-700);
  box-shadow:var(--shadow-lg);height:var(--header-h)
}
.site-header .container{height:100%;display:flex;align-items:center;justify-content:space-between}
.site-logo{font-size:1.25rem;font-weight:900;color:var(--color-white);text-transform:uppercase;letter-spacing:-.05em}
.site-logo span{color:var(--color-gray-400)}
.nav-links{display:none;align-items:center;gap:28px}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-size:.875rem;font-weight:500;transition:color .2s;position:relative;display:inline-block}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:50%;width:0;height:2px;background:currentColor;transform:translateX(-50%);transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after{width:70%}
.nav-links a:not(.nav-cta){color:var(--color-gray-200)}
.nav-links a:not(.nav-cta):hover,.nav-links a.active{color:var(--color-white)}
.nav-cta{
  background:var(--color-gray-700);color:var(--color-white);
  padding:8px 20px;border-radius:var(--radius-full);
  font-size:.875rem;font-weight:600;transition:background .2s
}
.nav-cta:hover{background:var(--color-gray-600)}
.nav-toggle{display:block;font-size:1.5rem;color:var(--color-white);background:none;border:none}
@media(min-width:768px){.nav-toggle{display:none}}
.nav-toggle::after{display:none!important}

/* Dropdown */
.dropdown{position:relative}
.nav-dropdown .dropdown-menu{left:50%;transform:translateX(-50%)}
.nav-dropdown .dropdown-menu a::after{display:none!important}
.dropdown-menu{
  display:none;position:absolute;top:100%;left:0;width:260px;
  background:var(--color-gray-800);border:1px solid var(--color-gray-700);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:12px;z-index:60
}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{
  display:block;padding:8px 12px;font-size:.875rem;color:var(--color-gray-300);
  border-radius:var(--radius-sm);transition:all .2s
}
.dropdown-menu a:hover{color:var(--color-white);background:var(--color-gray-700)}
.dropdown-menu .divider{border-top:1px solid var(--color-gray-700);margin-top:8px;padding-top:8px}
.dropdown-menu .divider a{font-weight:600;color:var(--color-gray-200)}
.dropdown-group-label{font-size:.75rem;font-weight:600;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.08em;padding:8px 12px 4px}
.dropdown-menu .divider-group{border-top:1px solid var(--color-gray-700);margin-top:8px;padding-top:8px}
.dropdown-arrow{font-size:10px;transition:transform .2s}
.dropdown:hover .dropdown-arrow{transform:rotate(180deg)}

/* Mobile Menu */
.mobile-menu{
  position:fixed;top:0;left:0;width:100%;height:100vh;z-index:60;
  background:var(--color-gray-800);box-shadow:var(--shadow-xl);
  display:flex;flex-direction:column;padding:32px;
  transform:translateX(-100%);transition:transform .3s ease-in-out
}
.mobile-menu.active{transform:translateX(0)!important}
.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.mobile-menu-close{font-size:1.875rem;color:var(--color-gray-300)}
.mobile-menu-close:hover{color:var(--color-white)}
.mobile-nav{display:flex;flex-direction:column;gap:20px}
.mobile-nav a{font-size:1.25rem;font-weight:600;color:var(--color-gray-200);padding:8px 0;transition:color .2s}
.mobile-nav a:hover{color:var(--color-white)}
.mobile-nav .mobile-sub{font-size:1rem;font-weight:400;padding-left:20px;margin-top:-12px;color:var(--color-gray-400)}
.mobile-nav .mobile-sub2{font-size:1rem;font-weight:400;padding-left:40px;margin-top:-12px;color:var(--color-gray-400)}
.mobile-nav .mobile-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-gray-500);padding-left:20px;margin-top:-4px}
.mobile-nav .mobile-cta{
  background:var(--color-gray-700);color:var(--color-white);
  padding:12px 20px;border-radius:var(--radius-full);text-align:center;
  font-size:1rem;margin-top:16px
}
.mobile-nav .mobile-cta:hover{background:var(--color-gray-600)}

/* ===== MAIN CONTENT ===== */
.main-content{padding-top:var(--header-h)}

/* ===== SECTIONS ===== */
.section{padding:60px 0}
.section-sm{padding:36px 0}
.section-lg{padding:72px 0}
.section-white{background:var(--color-white)}
.section-gray{background:var(--color-gray-50)}
.section-dark{background:var(--color-gray-900);color:var(--color-white)}
.section-dark .section-label{color:var(--color-gray-400);border-color:rgba(255,255,255,.2)}

.section-label{
  display:block;color:var(--color-gray-500);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px
}
.section-title{
  font-size:1.875rem;font-weight:900;color:var(--color-gray-900);margin-top:4px
}
.section-title span{border-bottom:4px solid var(--color-gray-400);display:inline-block;padding-bottom:0}
.section-dark .section-title{color:var(--color-white)}
.section-dark .section-title span{border-color:rgba(255,255,255,.3)}
.section-subtitle{color:var(--color-gray-500);font-size:.875rem;margin-top:8px;max-width:640px}
.section-header{text-align:center;margin-bottom:32px}

/* ===== HERO (Redesigned) ===== */
.hero{
  min-height:90vh;display:flex;align-items:center;overflow:hidden;
  padding:100px 0 60px;background:#0b1120;position:relative
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-gradient{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(37,211,102,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(59,130,246,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255,255,255,.02) 0%, transparent 50%);
}
.hero-particles{position:absolute;inset:0;overflow:hidden}
.hero-particles span{
  position:absolute;width:4px;height:4px;background:rgba(255,255,255,.15);border-radius:50%;
  animation:particleFloat 8s infinite ease-in-out
}
.hero-particles span:nth-child(1){top:15%;left:10%;animation-delay:0s;width:3px;height:3px}
.hero-particles span:nth-child(2){top:60%;left:20%;animation-delay:1s;width:5px;height:5px}
.hero-particles span:nth-child(3){top:30%;left:40%;animation-delay:2s;width:4px;height:4px}
.hero-particles span:nth-child(4){top:70%;left:55%;animation-delay:3s;width:3px;height:3px}
.hero-particles span:nth-child(5){top:20%;left:75%;animation-delay:4s;width:6px;height:6px}
.hero-particles span:nth-child(6){top:80%;left:85%;animation-delay:5s;width:4px;height:4px}
.hero-particles span:nth-child(7){top:45%;left:92%;animation-delay:.5s;width:3px;height:3px}
.hero-particles span:nth-child(8){top:10%;left:50%;animation-delay:1.5s;width:5px;height:5px}
.hero-particles span:nth-child(9){top:55%;left:5%;animation-delay:2.5s;width:4px;height:4px}
.hero-particles span:nth-child(10){top:35%;left:65%;animation-delay:3.5s;width:3px;height:3px}
@keyframes particleFloat{
  0%,100%{opacity:0;transform:translateY(0) scale(0)}
  25%{opacity:1;transform:translateY(-20px) scale(1)}
  75%{opacity:1;transform:translateY(20px) scale(1)}
  100%{opacity:0;transform:translateY(40px) scale(0)}
}
.hero-shapes{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-shape{
  position:absolute;border-radius:50%;opacity:.03
}
.hero-shape.shape-1{
  width:600px;height:600px;background:var(--color-green-500);
  top:-200px;right:-100px;animation:shapeFloat 12s ease-in-out infinite
}
.hero-shape.shape-2{
  width:400px;height:400px;background:#3b82f6;
  bottom:-100px;left:-100px;animation:shapeFloat 10s ease-in-out infinite reverse
}
.hero-shape.shape-3{
  width:300px;height:300px;background:var(--color-green-500);
  top:40%;left:50%;animation:shapeFloat 14s ease-in-out infinite 2s
}
@keyframes shapeFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-30px) scale(1.05)}
  66%{transform:translate(-20px,20px) scale(.95)}
}
.hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:48px;align-items:center;width:100%}
@media(min-width:992px){.hero-content{grid-template-columns:1fr 1fr}}
.hero-left{text-align:center}
@media(min-width:992px){.hero-left{text-align:left}}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);backdrop-filter:blur(8px);
  color:var(--color-white);padding:6px 16px;border-radius:var(--radius-full);
  font-size:.8rem;font-weight:600;letter-spacing:.05em;border:1px solid rgba(255,255,255,.1)
}
.hero-badge i{color:var(--color-green-500);font-size:.7rem}
.hero h1{font-size:2rem;font-weight:900;line-height:1.15;letter-spacing:-.03em;color:var(--color-white);margin-top:20px}
.hero h1 span{background:linear-gradient(135deg,#22c55e,#16a34a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;border-bottom:none;display:inline}
.hero p{font-size:.95rem;color:var(--color-gray-300);margin-top:16px;max-width:540px;line-height:1.65}
@media(min-width:992px){.hero p{margin-left:0}}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media(min-width:992px){.hero-actions{justify-content:flex-start}}
.hero-actions .btn-primary{
  background:linear-gradient(135deg,#22c55e,#16a34a);color:var(--color-white);
  padding:14px 28px;border-radius:12px;font-weight:700;font-size:.9rem;
  transition:all .2s;box-shadow:0 4px 20px rgba(34,197,94,.35),0 2px 0 #15803d;
  border:1px solid rgba(255,255,255,.1);
  display:inline-flex;align-items:center;gap:8px
}
.hero-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(34,197,94,.45),0 3px 0 #15803d}
.hero-actions .btn-primary:active{transform:translateY(1px)}
.hero-actions .btn-outline-light{
  background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--color-white);
  padding:14px 28px;border-radius:12px;font-weight:600;font-size:.9rem;
  transition:all .2s;display:inline-flex;align-items:center;gap:8px
}
.hero-actions .btn-outline-light:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}
.hero-contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media(min-width:992px){.hero-contact{justify-content:flex-start}}
.hero-contact .btn-3d{
  display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:10px;
  font-size:.8rem;font-weight:700;transition:all .2s;text-decoration:none;color:var(--color-white);border:1px solid rgba(255,255,255,.12)
}
.hero-contact .btn-3d.call{background:linear-gradient(135deg,#1a1a2e,rgba(34,197,94,.15));box-shadow:0 2px 0 rgba(255,255,255,.06)}
.hero-contact .btn-3d.call:hover{background:linear-gradient(135deg,#1a1a2e,rgba(34,197,94,.25));transform:translateY(-2px)}
.hero-contact .btn-3d.wa{background:linear-gradient(135deg,#1a1a2e,rgba(37,211,102,.15));box-shadow:0 2px 0 rgba(255,255,255,.06)}
.hero-contact .btn-3d.wa:hover{background:linear-gradient(135deg,#1a1a2e,rgba(37,211,102,.25));transform:translateY(-2px)}

/* Hero Right Showcase */
.hero-right{display:none}
@media(min-width:992px){.hero-right{display:block}}
.hero-showcase{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:32px;backdrop-filter:blur(20px);position:relative
}
.hero-showcase::before{
  content:'';position:absolute;inset:-1px;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 40%,transparent 60%,rgba(37,211,102,.1));
  border-radius:21px;z-index:-1
}
.hero-showcase-inner{text-align:center}
.hero-showcase-icon{
  width:72px;height:72px;margin:0 auto 20px;
  background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05));
  border-radius:18px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.1)
}
.hero-showcase-icon i{font-size:1.75rem;color:var(--color-green-500)}
.hero-showcase-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hsc-stat{
  background:rgba(255,255,255,.04);border-radius:12px;padding:14px 10px;
  border:1px solid rgba(255,255,255,.06);text-align:center
}
.hsc-num{display:block;font-size:1.5rem;font-weight:900;color:var(--color-white);letter-spacing:-.02em}
.hsc-label{display:block;font-size:.7rem;color:rgba(255,255,255,.5);font-weight:500;margin-top:2px}
.hero-showcase-badge{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:20px;padding:8px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  font-size:.75rem;color:rgba(255,255,255,.6);font-weight:500
}
.hero-showcase-badge i{color:var(--color-yellow-400);font-size:.85rem}
@media(min-width:768px){
  .hero h1{font-size:2.75rem}
  .hero p{font-size:1rem}
  .hero{padding:80px 0}
}
@media(min-width:1024px){.hero h1{font-size:3.25rem}}

/* Animated Stats Section */
.section-stats{
  padding:44px 0;background:linear-gradient(180deg,#0d1425 0%,#111a2e 100%);
  border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);
  position:relative
}
.section-stats::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:2px;background:linear-gradient(90deg,transparent,rgba(34,197,94,.4),transparent)
}
.stats-grid-modern{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:768px){.stats-grid-modern{grid-template-columns:repeat(4,1fr)}}
.stat-item{
  text-align:center;padding:24px 16px;background:rgba(255,255,255,.03);
  border-radius:16px;border:1px solid rgba(255,255,255,.06);transition:all .3s
}
.stat-item:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
.stat-icon{margin-bottom:10px}
.stat-icon i{font-size:1.5rem;color:var(--color-green-500);opacity:.7}
.stat-num{font-size:2rem;font-weight:900;color:var(--color-white);line-height:1}
.stat-plus,.stat-percent{font-size:1.25rem;color:var(--color-green-500);font-weight:700;margin-left:2px}
.stat-label{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:6px;letter-spacing:.03em;text-transform:uppercase}
@media(max-width:480px){
  .stat-num{font-size:1.5rem}
  .stat-item{padding:16px 12px}
  .stat-icon i{font-size:1.25rem}
}

/* ===== BUTTONS (keep existing) ===== */
.btn-3d{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;border-radius:12px;font-size:.85rem;font-weight:700;transition:all .2s;text-decoration:none;color:var(--color-white);border:1px solid rgba(255,255,255,.15)}
.btn-3d.call{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 4px 12px rgba(34,197,94,.35),0 2px 0 #15803d}
.btn-3d.call:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(34,197,94,.45),0 3px 0 #15803d}
.btn-3d.call:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(34,197,94,.3),0 1px 0 #15803d}
.btn-3d.wa{background:linear-gradient(135deg,#25d366,#1da851);box-shadow:0 4px 12px rgba(37,211,102,.35),0 2px 0 #1a8c45}
.btn-3d.wa:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,.45),0 3px 0 #1a8c45}
.btn-3d.wa:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(37,211,102,.3),0 1px 0 #1a8c45}

.fixed-contact{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);border-top:1px solid var(--color-gray-200);padding:8px 12px;display:flex;justify-content:center;gap:10px;box-shadow:0 -4px 20px rgba(0,0,0,.1)}
.fixed-contact a{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;font-size:.82rem;font-weight:700;text-decoration:none;flex:1;max-width:200px;transition:all .2s}
.fixed-contact .fc-call{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 4px 12px rgba(34,197,94,.35),0 2px 0 #15803d}
.fixed-contact .fc-call:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(34,197,94,.45),0 3px 0 #15803d}
.fixed-contact .fc-call:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(34,197,94,.3),0 1px 0 #15803d}
.fixed-contact .fc-wa{background:linear-gradient(135deg,#25d366,#1da851);color:#fff;box-shadow:0 4px 12px rgba(37,211,102,.35),0 2px 0 #1a8c45}
.fixed-contact .fc-wa:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,.45),0 3px 0 #1a8c45}
.fixed-contact .fc-wa:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(37,211,102,.3),0 1px 0 #1a8c45}
@media(min-width:768px){.fixed-contact{padding:10px 16px;gap:16px}.fixed-contact a{padding:12px 24px;font-size:.9rem;max-width:240px}}
.hero-about{min-height:60vh;min-height:450px;padding:0}

/* ===== GRIDS ===== */
.grid{display:grid;gap:32px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:768px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1024px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
}
.gap-6{gap:24px}
.gap-8{gap:32px}
.gap-10{gap:40px}
.gap-12{gap:48px}
.mt-10{margin-top:40px}

/* Stats */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:center}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-number{font-size:1.75rem;font-weight:900;color:var(--color-gray-900)}
.stat-label{font-size:.8rem;color:var(--color-gray-500);margin-top:2px;letter-spacing:.03em}

/* ===== CARDS ===== */
.card{
  background:var(--color-white);border:1px solid var(--color-gray-200);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:all .3s;display:flex;flex-direction:column
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.products-grid .card{border-radius:var(--radius-md);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.products-grid .card:hover{transform:none;box-shadow:0 2px 8px rgba(0,0,0,.12)}
/* ===== PRODUCT CARDS (Flipkart-style) ===== */
.card-image-wrap{position:relative;overflow:hidden;background:var(--color-gray-100)}
.card-image-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-image-wrap img{transform:scale(1.05)}
.card-image-wrap.ratio-3-2{padding-bottom:66.67%}
.card-image-wrap.ratio-4-3{padding-bottom:75%}
.card-image-wrap.ratio-16-9{padding-bottom:56.25%}
.card-image-wrap.ratio-70{padding-bottom:70%}
.card-image-wrap.ratio-60{padding-bottom:60%}
.card-image-wrap.ratio-75{padding-bottom:75%}
.card-body{padding:12px;display:flex;flex-direction:column;flex:1;min-width:0}
.card-badge{
  position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:var(--radius-full);
  font-size:.7rem;font-weight:700;background:var(--color-red-500);color:var(--color-white);
  z-index:2;line-height:1.2
}
.card-badge.left{left:8px;right:auto}
.card-badge.left.yellow{background:var(--color-yellow-400);color:var(--color-yellow-900)}
.card-stock{display:none}
.pd-meta .card-stock{display:inline-flex}
.card-out-of-stock{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);z-index:2;color:var(--color-white);font-weight:700;font-size:.875rem;
  backdrop-filter:blur(2px)
}
.card-out-of-stock span{background:var(--color-gray-900);padding:6px 14px;border-radius:var(--radius-full)}
.card-title{
  font-size:.95rem;font-weight:600;color:var(--color-gray-900);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px
}
.card-price{font-size:1.1rem;font-weight:700;color:var(--color-gray-900)}
.card-price-old{font-size:.75rem;color:var(--color-gray-400);text-decoration:line-through;margin-right:6px}
.card-desc{display:none}
.card-sku{display:none}
.card-delivery{display:none}
.card-specs{display:none}
.card-actions{display:flex;gap:6px;margin-top:8px}
.card-actions .btn-primary{
  flex:1;padding:7px 12px;font-size:.8rem;font-weight:600;text-align:center;
  background:var(--color-gray-800);color:var(--color-white);border-radius:var(--radius-sm);
  transition:all .2s;text-decoration:none;display:inline-block;white-space:nowrap
}
.card-actions .btn-primary:hover{background:var(--color-black)}
.card-actions .btn-icon{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--color-gray-200);border-radius:var(--radius-sm);transition:all .2s;flex-shrink:0
}
.card-actions .btn-icon:hover{background:var(--color-gray-200)}
.card-actions .btn-icon i{color:var(--color-gray-600);font-size:.8rem}
.products-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:600px){.products-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.products-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.products-grid{grid-template-columns:repeat(5,1fr)}}

/* compact price + discount row */
.card-price-wrap{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.card-discount{font-size:.7rem;font-weight:600;color:var(--color-green-700);background:var(--color-green-50);padding:1px 6px;border-radius:var(--radius-sm);white-space:nowrap}

/* Blog grid */
.blogs-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.blogs-grid{grid-template-columns:1fr 1fr}}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 24px;border-radius:var(--radius-md);
  font-weight:600;transition:all .2s;border:none
}
.btn-primary.dark{background:var(--color-gray-900);color:var(--color-white)}
.btn-primary.dark:hover{background:var(--color-black)}
.btn-outline.dark{
  background:transparent;border:2px solid var(--color-gray-900);
  color:var(--color-gray-900);padding:8px 22px
}
.btn-outline.dark:hover{background:var(--color-gray-900);color:var(--color-white)}
.btn-sm{padding:6px 16px;font-size:.875rem}
.btn-whatsapp{background:#25D366;color:var(--color-white)}
.btn-whatsapp:hover{background:#1da851}
.btn-link{
  color:var(--color-gray-700);font-size:.875rem;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
  border-bottom:1px solid var(--color-gray-300);padding-bottom:2px;transition:all .2s
}
.btn-link:hover{gap:8px}

/* ===== BADGES / TAGS ===== */
.badge{
  display:inline-block;padding:4px 12px;border-radius:var(--radius-full);
  font-size:.75rem;font-weight:500
}
.tag{
  padding:6px 20px;border-radius:var(--radius-full);
  font-size:.875rem;font-weight:500;transition:all .2s;
  background:var(--color-gray-100);color:var(--color-gray-700)
}
.tag:hover{background:var(--color-gray-200)}
.tag.active{background:var(--color-gray-900);color:var(--color-white)}
.tag-group{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* ===== HOW IT WORKS ===== */
.steps-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-top:48px}
@media(min-width:768px){.steps-grid{grid-template-columns:repeat(3,1fr)}}
.step-card{
  background:var(--color-white);border-radius:var(--radius-lg);
  padding:28px 20px;text-align:center;border:1px solid var(--color-gray-200);
  box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s
}
.step-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.step-number{
  width:56px;height:56px;border-radius:50%;background:var(--color-gray-800);
  color:var(--color-white);display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;gap:6px;margin-bottom:14px
}
.step-number i{font-size:1rem;color:rgba(255,255,255,.8)}
.step-card h3{font-weight:700;color:var(--color-gray-800);font-size:1rem}
.step-card p{color:var(--color-gray-500);font-size:.825rem;margin-top:6px;line-height:1.5}

/* ===== TESTIMONIALS ===== */
.testimonials-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.testimonials-grid{grid-template-columns:repeat(3,1fr)}}
.testimonial-card{
  background:var(--color-white);border-radius:var(--radius-lg);
  padding:20px;border:1px solid var(--color-gray-200);position:relative;
  box-shadow:var(--shadow-sm)
}
.testimonial-card .stars{color:#f59e0b;font-size:.85rem;letter-spacing:2px;margin-bottom:8px}
.testimonial-card .quote-icon{color:var(--color-gray-200);font-size:1.25rem;margin-bottom:8px;display:none}
.testimonial-card p{color:var(--color-gray-600);font-size:.85rem;line-height:1.55;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--color-gray-100)}
.testimonial-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--color-gray-400);color:var(--color-white);
  display:flex;align-items:center;justify-content:center;
  font-size:.875rem;font-weight:700;flex-shrink:0
}
.testimonial-author .name{font-weight:600;color:var(--color-gray-800);font-size:.875rem}
.testimonial-author .role{color:var(--color-gray-400);font-size:.75rem}

/* ===== TEAM ===== */
.team-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:640px){.team-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.team-grid{grid-template-columns:repeat(3,1fr)}}
.team-card{
  background:var(--color-gray-50);border-radius:var(--radius-xl);
  padding:24px;border:1px solid var(--color-gray-200);text-align:center
}
.team-avatar{
  width:96px;height:96px;border-radius:50%;
  background:var(--color-gray-400);color:var(--color-white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:700;margin:0 auto 16px
}
.team-card h4{font-size:1.125rem;font-weight:700;color:var(--color-gray-800)}
.team-card .role{color:var(--color-gray-500);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.team-card .bio{color:var(--color-gray-600);font-size:.75rem;margin-top:12px}

/* ===== FAQ ===== */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--color-white);border-radius:var(--radius-lg);
  border:1px solid var(--color-gray-200);overflow:hidden
}
.faq-question{
  width:100%;padding:16px 20px;display:flex;justify-content:space-between;
  text-align:left;font-weight:600;color:var(--color-gray-800)
}
.faq-question:hover{color:var(--color-gray-600)}
.faq-icon{color:var(--color-gray-400);font-size:.875rem;transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-answer{
  max-height:0;overflow:hidden;transition:max-height .3s ease;
  background:var(--color-gray-50)
}
.faq-answer-inner{padding:16px 20px;color:var(--color-gray-600);font-size:.875rem;border-top:1px solid var(--color-gray-200)}

/* ===== FORM ===== */
.form-card{
  background:var(--color-gray-50);padding:32px 40px;
  border-radius:var(--radius-xl);border:1px solid var(--color-gray-200);
  box-shadow:var(--shadow-sm)
}
.form-title{font-size:1.5rem;font-weight:700;color:var(--color-gray-900);margin-bottom:24px}
.form-title span{border-bottom:2px solid var(--color-gray-400)}
.form-group{margin-bottom:20px}
.form-label{
  display:block;color:var(--color-gray-600);font-size:.75rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px
}
.form-input,.form-textarea{
  width:100%;background:var(--color-white);border:1px solid var(--color-gray-200);
  border-radius:var(--radius-md);padding:12px 16px;color:var(--color-gray-800);
  font-size:.875rem;transition:box-shadow .2s;outline:none
}
.form-input:focus,.form-textarea:focus{box-shadow:0 0 0 2px var(--color-gray-300)}
.form-textarea{resize:none;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.form-row{grid-template-columns:1fr 1fr}}
.form-submit{
  width:100%;background:var(--color-gray-800);color:var(--color-white);
  padding:14px 0;border-radius:var(--radius-md);font-weight:600;
  font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;
  transition:background .2s;border:none
}
.form-submit:hover{background:var(--color-black)}
.form-msg{
  padding:16px;border-radius:var(--radius-md);margin-bottom:24px;
  font-size:.875rem;border:1px solid
}
.form-msg.success{background:var(--color-green-50);border-color:#bbf7d0;color:var(--color-green-700)}
.form-msg.error{background:var(--color-red-100);border-color:#fecaca;color:var(--color-red-500)}

/* ===== CONTACT INFO ===== */
.contact-info{display:flex;flex-direction:column;gap:32px}
.contact-item{display:flex;gap:20px;align-items:flex-start}
.contact-icon{
  width:48px;height:48px;background:var(--color-gray-100);
  border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  color:var(--color-gray-700);font-size:1rem;border:1px solid var(--color-gray-200);flex-shrink:0
}
.contact-item h4{font-weight:700;color:var(--color-gray-800);font-size:1rem;margin-bottom:4px}
.contact-item p{color:var(--color-gray-500);font-size:.875rem;line-height:1.625}
.contact-map{
  height:192px;background:var(--color-gray-100);border-radius:var(--radius-xl);
  border:1px solid var(--color-gray-200);overflow:hidden;position:relative;box-shadow:var(--shadow-md)
}
.contact-map img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.6}
.map-pin{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center
}
.map-pin-dot{width:12px;height:12px;background:var(--color-gray-700);border-radius:50%;animation:ping 1s ease-in-out infinite}
.map-pin-center{position:absolute;width:8px;height:8px;background:var(--color-gray-800);border-radius:50%}
@keyframes ping{0%{transform:scale(1);opacity:1}100%{transform:scale(2.5);opacity:0}}

/* ===== SIDEBAR ===== */
.sidebar{width:100%}
@media(min-width:1024px){.sidebar{width:320px;flex-shrink:0}}
.sidebar-widget{
  background:var(--color-gray-50);padding:20px;border-radius:var(--radius-md);
  border:1px solid var(--color-gray-200)
}
.sidebar-widget h4{font-weight:700;color:var(--color-gray-800);margin-bottom:12px;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}
.sidebar-search{position:relative}
.sidebar-search input{
  width:100%;padding:8px 12px 8px 36px;border:1px solid var(--color-gray-300);
  border-radius:var(--radius-full);font-size:.875rem;outline:none;background:var(--color-white)
}
.sidebar-search input:focus{box-shadow:0 0 0 2px var(--color-gray-300)}
.sidebar-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-gray-400);font-size:.875rem}
.sidebar-cat-list{display:flex;flex-direction:column;gap:8px}
.sidebar-cat-list a{
  color:var(--color-gray-600);font-size:.875rem;display:flex;justify-content:space-between
}
.sidebar-cat-list a:hover{color:var(--color-gray-900)}
.sidebar-cat-list a span{color:var(--color-gray-400);font-size:.75rem}
.sidebar-post{display:flex;gap:12px;padding:8px 0}
.sidebar-post:not(:last-child){border-bottom:1px solid var(--color-gray-200);padding-bottom:12px;margin-bottom:12px}
.sidebar-post-img{width:48px;height:48px;background:var(--color-gray-200);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}
.sidebar-post-img img{width:100%;height:100%;object-fit:cover}
.sidebar-post h5{font-size:.875rem;font-weight:500;color:var(--color-gray-800)}
.sidebar-post h5:hover{color:var(--color-gray-600)}
.sidebar-post .date{font-size:.75rem;color:var(--color-gray-400)}
.sidebar-newsletter{
  background:var(--color-gray-900);padding:20px;border-radius:var(--radius-md);color:var(--color-white)
}
.sidebar-newsletter h4{font-weight:700;margin-bottom:8px;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}
.sidebar-newsletter p{color:var(--color-gray-300);font-size:.75rem;margin-bottom:12px}
.sidebar-newsletter input{
  width:100%;padding:8px 12px;border-radius:var(--radius-sm);font-size:.875rem;border:none;outline:none;color:var(--color-gray-900)
}
.sidebar-newsletter button{
  width:100%;background:var(--color-white);color:var(--color-gray-900);
  padding:8px 0;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;
  margin-top:8px;transition:background .2s
}
.sidebar-newsletter button:hover{background:var(--color-gray-100)}
.sidebar-sticky{position:sticky;top:96px}
.blog-layout{display:flex;flex-direction:column;gap:48px}
@media(min-width:1024px){.blog-layout{flex-direction:row}}

/* ===== FILTER BAR ===== */
.filter-bar{
  position:sticky;top:64px;z-index:20;background:rgba(255,255,255,.95);
  backdrop-filter:blur(4px);border-bottom:1px solid var(--color-gray-200);
  padding:12px 0;box-shadow:var(--shadow-sm)
}
.filter-bar .tag-group{justify-content:center}

/* ===== PRODUCT DETAIL ===== */
.pd-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:32px}
@media(min-width:1024px){.pd-grid{grid-template-columns:1fr 1fr;gap:32px}}
.pd-image-wrap{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-gray-200);
  box-shadow:0 4px 20px rgba(0,0,0,.08);background:linear-gradient(135deg,#f8f9fa,#e9ecef);position:relative
}
.pd-image-wrap .aspect-box{aspect-ratio:4/3;overflow:hidden}
.pd-image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pd-image-wrap:hover img{transform:scale(1.03)}
.pd-image-wrap .pd-badge{
  position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#dc2626,#ef4444);
  color:var(--color-white);font-weight:800;padding:6px 14px;
  border-radius:var(--radius-full);font-size:.85rem;box-shadow:0 4px 12px rgba(220,38,38,.3);
  letter-spacing:.02em
}
.pd-sku{font-size:.75rem;color:var(--color-gray-400);text-transform:uppercase;border:1px solid var(--color-gray-200);padding:2px 8px;border-radius:var(--radius-sm)}
.pd-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pd-title{font-size:1.5rem;font-weight:700;color:var(--color-gray-900);line-height:1.2}
@media(min-width:768px){.pd-title{font-size:1.75rem}}
@media(min-width:1024px){.pd-title{font-size:2rem}}
.pd-price-area{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.pd-price-old{font-size:1.25rem;color:var(--color-gray-400);text-decoration:line-through}
.pd-price{font-size:1.875rem;font-weight:900;color:var(--color-gray-900)}
.pd-save{background:var(--color-green-100);color:var(--color-green-700);font-size:.875rem;font-weight:700;padding:2px 10px;border-radius:var(--radius-full)}
.pd-delivery{
  display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--color-green-600);
  background:var(--color-green-50);border:1px solid #bbf7d0;border-radius:var(--radius-sm);padding:8px 14px;margin-top:8px
}
.pd-actions{display:flex;flex-direction:column;gap:12px;padding-top:4px}
@media(min-width:640px){.pd-actions{flex-direction:row}}
.pd-actions a{flex:1;text-align:center;padding:12px 24px;border-radius:var(--radius-md);font-weight:600;font-size:1rem;transition:all .2s}
.pd-actions .btn-inquire{background:var(--color-gray-800);color:var(--color-white)}
.pd-actions .btn-inquire:hover{background:var(--color-black)}
.pd-actions .btn-wa{background:#25D366;color:var(--color-white)}
.pd-actions .btn-wa:hover{background:#1da851}
.pd-spec-box{background:var(--color-gray-50);border-radius:var(--radius-md);padding:16px;border:1px solid var(--color-gray-200)}
.pd-spec-box h3{font-weight:700;color:var(--color-gray-800);font-size:.85rem;border-bottom:1px solid var(--color-gray-200);padding-bottom:10px;margin-bottom:10px}
.pd-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:.85rem}
.pd-spec-grid .label{color:var(--color-gray-400)}
.pd-spec-grid .value{font-weight:600;color:var(--color-gray-800)}
.pd-highlights{list-style:none;margin:0}
.pd-highlights li{display:flex;align-items:center;gap:8px;color:var(--color-gray-700);font-size:.85rem;padding:5px 0}
.pd-highlights li:last-child{padding-bottom:0}
.pd-highlights i{color:var(--color-green-500);font-size:.8rem;flex-shrink:0}
.pd-content-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:1024px){.pd-content-grid{grid-template-columns:2fr 1fr}}
.pd-main{order:2}
.pd-sidebar{order:1}
@media(min-width:1024px){.pd-main{order:1}.pd-sidebar{order:2}}
.pd-section{margin-bottom:32px}
.pd-section:last-child{margin-bottom:0}
.pd-section h2{font-size:1.375rem;font-weight:700;color:var(--color-gray-800);border-left:4px solid var(--color-gray-400);padding-left:14px;margin-bottom:16px}
.pd-section .content{color:var(--color-gray-600);line-height:1.6;font-size:.95rem}
.pd-section .content p{margin-bottom:12px}
.pd-section .content p:last-child{margin-bottom:0}
.pd-section .content ul{margin:8px 0;padding-left:20px}
.pd-section .content ul li{margin-bottom:4px}
.pd-section .spec-content{background:var(--color-gray-50);border-radius:var(--radius-md);padding:24px;border:1px solid var(--color-gray-200);font-size:.875rem}
.spec-table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--color-gray-200)}
.spec-table{width:100%;border-collapse:collapse;font-size:.875rem}
.spec-table tr{border-bottom:1px solid var(--color-gray-100)}
.spec-table tr:last-child{border-bottom:none}
.spec-table td{padding:8px 14px}
.spec-label{font-weight:600;color:var(--color-gray-700);background:var(--color-gray-50);width:40%;white-space:nowrap}
.spec-value{color:var(--color-gray-600)}
.spec-table tr:nth-child(even) .spec-value{background:var(--color-gray-50)}
.sidebar-card{background:var(--color-gray-900);border-radius:var(--radius-md);padding:20px;color:var(--color-white);text-align:center}
.sidebar-card h4{font-weight:700;font-size:1rem;margin-bottom:6px}
.sidebar-card p{color:var(--color-gray-300);font-size:.8rem;margin-bottom:16px;line-height:1.4}
.sidebar-card a{
  display:block;background:var(--color-white);color:var(--color-gray-900);
  padding:10px 0;border-radius:var(--radius-sm);font-weight:600;transition:background .2s
}
.sidebar-card a:hover{background:var(--color-gray-100)}
.sidebar-price-box{background:var(--color-gray-50);border-radius:var(--radius-md);padding:16px;border:1px solid var(--color-gray-200);text-align:center}
.sidebar-price{font-size:1.25rem;font-weight:900;color:var(--color-gray-800)}
.sidebar-price-label{font-size:.7rem;color:var(--color-gray-400);margin-top:2px}
.sidebar-price-box a{margin-top:10px;display:block;background:var(--color-gray-800);color:var(--color-white);padding:8px 0;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;transition:background .2s}
.sidebar-price-box a:hover{background:var(--color-black)}
.sidebar-stack{display:flex;flex-direction:column;gap:16px}

/* ===== MILESTONES ===== */
.milestones-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(min-width:768px){.milestones-grid{grid-template-columns:repeat(4,1fr)}}
.milestone{text-align:center;padding:20px}
.milestone-year{
  width:64px;height:64px;background:var(--color-gray-100);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-gray-800);font-size:1.5rem;font-weight:900;margin:0 auto 12px
}
.milestone h4{font-weight:700;color:var(--color-gray-800)}
.milestone p{color:var(--color-gray-500);font-size:.75rem;margin-top:4px}

/* ===== CERTIFICATIONS ===== */
.cert-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:32px}
.cert-item{
  background:var(--color-white);padding:12px 24px;border-radius:var(--radius-full);
  box-shadow:var(--shadow-sm);border:1px solid var(--color-gray-200);
  color:var(--color-gray-700);font-weight:600;font-size:.875rem
}

/* ===== KEYWORD GRID ===== */
.keyword-grid{display:flex;flex-wrap:wrap;gap:8px}
.keyword-tag{
  background:var(--color-gray-50);border:1px solid var(--color-gray-200);
  padding:6px 14px;border-radius:var(--radius-full);font-size:.75rem;
  color:var(--color-gray-600);transition:all .2s
}
.keyword-tag:hover{background:var(--color-gray-800);color:var(--color-white);border-color:var(--color-gray-800)}

/* ===== EMPTY STATE ===== */
.empty-state{padding:96px 0;text-align:center}
.empty-state i{font-size:3rem;color:var(--color-gray-300);margin-bottom:16px}
.empty-state h3{font-size:1.25rem;font-weight:600;color:var(--color-gray-700)}
.empty-state p{color:var(--color-gray-500);margin-top:4px}

/* ===== FOOTER ===== */
.site-footer{
  background:var(--color-gray-50);padding:48px 0 24px;
  border-top:1px solid var(--color-gray-200)
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:40px}
@media(min-width:640px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-brand .site-logo{font-size:1.25rem;font-weight:900;color:var(--color-gray-900);text-transform:uppercase;letter-spacing:-.05em;display:inline-block}
.footer-brand .site-logo span{color:var(--color-gray-500)}
.footer-brand p{color:var(--color-gray-500);font-size:.875rem;line-height:1.625;margin-top:8px}
.footer-social{display:flex;gap:12px;padding-top:8px}
.footer-social a{
  width:32px;height:32px;border-radius:50%;background:var(--color-gray-200);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-gray-600);font-size:.75rem;transition:all .2s
}
.footer-social a:hover{background:var(--color-gray-300);color:var(--color-gray-900)}
.footer-col h4{font-weight:600;color:var(--color-gray-800);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:8px}
.footer-col a{color:var(--color-gray-500);font-size:.875rem;transition:color .2s}
.footer-col a:hover{color:var(--color-gray-900)}
.footer-contact li{display:flex;gap:8px;color:var(--color-gray-500);font-size:.875rem}
.footer-contact i{color:var(--color-gray-400);font-size:.75rem;margin-top:2px;flex-shrink:0}
.footer-bottom{
  padding-top:24px;border-top:1px solid var(--color-gray-200);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:.75rem;color:var(--color-gray-400)
}
@media(min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between}}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{color:var(--color-gray-400);transition:color .2s}
.footer-bottom-links a:hover{color:var(--color-gray-700)}

/* ===== BREADCRUMB ===== */
.breadcrumb{margin-bottom:24px}
.breadcrumb a{color:var(--color-gray-500);font-size:.875rem;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.breadcrumb a:hover{color:var(--color-gray-800)}

/* ===== PRODUCT NAV ===== */
.pd-nav-top{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
@media(min-width:768px){.pd-nav-top{flex-direction:row;justify-content:space-between;align-items:center}}
.pd-nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pd-nav-btn{
  font-size:.8125rem;color:var(--color-gray-500);border:1px solid var(--color-gray-200);
  padding:6px 14px;border-radius:var(--radius-full);transition:all .2s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap
}
.pd-nav-btn:hover{background:var(--color-gray-800);color:var(--color-white);border-color:var(--color-gray-800)}
.pd-nav-btn.all-products{background:var(--color-gray-100);border-color:var(--color-gray-300)}
.pd-nav-bottom{margin-top:32px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.pd-nav-bottom .pd-nav-btn{flex:1;justify-content:center;max-width:280px}
.pd-nav-bottom .pd-nav-btn.all-products{flex:0 1 auto;max-width:160px}
.sidebar-related{background:var(--color-white);border-radius:var(--radius-md);padding:0;border:1px solid var(--color-gray-200);overflow:hidden}
.sidebar-related h4{font-weight:700;color:var(--color-gray-800);font-size:.825rem;padding:10px 14px 8px;margin:0;border-bottom:1px solid var(--color-gray-200)}
.sidebar-related-list{display:flex;flex-direction:column;max-height:300px;overflow-y:auto}
.sidebar-related-list a{font-size:.8rem;color:var(--color-gray-600);padding:7px 14px;border-bottom:1px solid var(--color-gray-100);transition:all .15s;text-decoration:none}
.sidebar-related-list a:last-child{border-bottom:none}
.sidebar-related-list a:hover{background:var(--color-gray-50);color:var(--color-gray-900)}
.sidebar-related-list a.active{background:var(--color-gray-800);color:var(--color-white);font-weight:600}

/* ===== LINE CLAMP ===== */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ===== FADE UP ANIMATION ===== */
.fade-up{opacity:0;transform:translateY(20px);animation:fadeUp .6s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}
.delay-5{animation-delay:.5s}

/* ===== RESPONSIVE HELPERS ===== */
.show-mobile{display:block}
.hide-mobile{display:none}
@media(min-width:768px){
  .show-mobile{display:none}
  .hide-mobile{display:block}
}
.show-desktop{display:none}
@media(min-width:768px){.show-desktop{display:block}}

/* ===== MOBILE RESPONSIVENESS FIXES ===== */
@media(max-width:480px){
  .container{padding:0 16px}
  .section{padding:40px 0}
  .section-sm{padding:28px 0}
  .hero{padding:60px 0 40px}
  .hero h1{font-size:1.75rem !important;line-height:1.2}
  .hero p{font-size:.88rem !important;margin-top:16px}
  .hero-meta{gap:12px;margin-top:24px}
  .hero-meta span{font-size:.78rem}
  .hero .btn-3d,.hero .btn-primary{font-size:.8rem;padding:8px 16px}
  .hero-contact{gap:8px}
  .hero-contact .btn-call,.hero-contact .btn-wa-sm{font-size:.75rem;padding:8px 12px}
  .stats-grid{gap:12px}
  .stat-number{font-size:1.4rem}
  .section-title{font-size:1.35rem !important}
  .section-label{font-size:.7rem;padding:3px 10px}
  .section-subtitle{font-size:.82rem}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card-body{padding:10px}
  .card-title{font-size:.8rem;line-height:1.3}
  .card-price{font-size:.85rem}
  .card-price-old{font-size:.72rem}
  .card-sku{font-size:.65rem}
  .card-badge{font-size:.65rem;padding:2px 6px;top:6px;left:6px}
  .card-image-wrap.ratio-70{padding-bottom:68%}
  .card-actions{gap:6px;margin-top:8px}
  .card-actions .btn-primary{font-size:.72rem;padding:6px 10px}
  .card-actions .btn-icon{width:30px;height:30px;font-size:.72rem}
  .grid-2,.grid-3{grid-template-columns:1fr;gap:20px}
  .filter-dropdown-wrap{padding:0}
  .category-dropdown{width:100%;font-size:.82rem;padding:8px 12px}
  .fixed-contact{padding:6px 8px;gap:6px}
  .fixed-contact a{font-size:.7rem;padding:8px 10px;gap:4px}
  .fixed-contact a i{font-size:.85rem}
  .btn-3d{font-size:.78rem;padding:8px 14px}
  .section-header{margin-bottom:24px}
  .pd-gallery img{border-radius:var(--radius-md)}
  .pd-title{font-size:1.25rem !important}
  .pd-price{font-size:1.25rem}
  .pd-price-old{font-size:.9rem}
  .pd-actions{flex-direction:column;gap:10px}
  .pd-actions .btn-primary,.pd-actions .btn-whatsapp{width:100%;justify-content:center}
  .pd-nav-top{flex-direction:column;gap:8px;text-align:center}
  .pd-nav-bottom{flex-direction:column;gap:8px;align-items:stretch}
  .pd-nav-bottom .pd-nav-btn{max-width:100%}
  .keyword-grid{gap:6px}
  .keyword-tag{font-size:.75rem;padding:5px 10px}
  .faq-question{font-size:.82rem;padding:12px 14px}
  .faq-answer-inner{font-size:.8rem;padding:0 14px 14px}
  .cert-item{padding:6px 14px;font-size:.78rem}
  .team-card{padding:20px}
  .milestone{padding:16px}
  .milestone-year{font-size:1.1rem}
  .footer-grid{gap:20px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  .blog-layout{flex-direction:column}
  .sidebar{width:100%}
  .form-row{grid-template-columns:1fr}
  .products-layout{flex-direction:column}
  .about-hero h1{font-size:1.5rem}
  .welcome-section{padding:32px 0}
  .contact-bar-mobile{display:flex}
  .site-logo{font-size:1rem}
  .nav-links.active{display:flex;flex-direction:column;position:fixed;inset:0;top:56px;background:rgba(31,41,55,.98);padding:24px;gap:20px;z-index:49;align-items:center;justify-content:flex-start;padding-top:40px}
  .nav-links.active a{font-size:1.1rem;color:white}
  .hero-badge{font-size:.7rem;padding:3px 10px}
  h1.fade-up.delay-1[style*="font-size:2rem"]{font-size:1.5rem !important}
  h1.fade-up.delay-1[style*="font-size:1.75rem"]{font-size:1.35rem !important}
}

@media(max-width:380px){
  .products-grid{grid-template-columns:1fr 1fr;gap:8px}
  .card-title{font-size:.73rem}
  .card-price{font-size:.8rem}
  .hero h1{font-size:1.5rem !important}
  .container{padding:0 12px}
  .fixed-contact a{font-size:.65rem;padding:6px 8px}
}

/* Chat widget mobile fix */
@media(max-width:480px){
  #chat-widget{bottom:64px;right:8px}
  #chat-toggle{width:48px;height:48px;font-size:1.2rem}
  #chat-box{width:calc(100vw - 24px);right:-8px;max-height:480px}
  #chat-msgs{min-height:220px;max-height:280px;padding:12px}
  .chat-msg{font-size:.8rem;padding:8px 12px}
}

.form-msg.success .btn-whatsapp{transition:all .2s}
.form-msg.success .btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(37,211,102,.4)}

/* ===== MODERN PRODUCT GRID ===== */
.products-grid-modern{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:600px){.products-grid-modern{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.products-grid-modern{grid-template-columns:repeat(4,1fr)}}
.product-card-modern{
  background:var(--color-white);border:1px solid var(--color-gray-200);
  border-radius:14px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column
}
.product-card-modern:hover{box-shadow:0 12px 40px rgba(0,0,0,.1);transform:translateY(-6px);border-color:transparent}
.pcm-img-wrap{position:relative;overflow:hidden;background:var(--color-gray-100);padding-bottom:70%}
.pcm-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.product-card-modern:hover .pcm-img-wrap img{transform:scale(1.08)}
.pcm-badge{
  position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:var(--radius-full);
  font-size:.7rem;font-weight:700;background:linear-gradient(135deg,#ef4444,#dc2626);
  color:var(--color-white);z-index:2;box-shadow:0 2px 8px rgba(239,68,68,.3)
}
.pcm-oos{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);z-index:2;color:var(--color-white);font-weight:700;font-size:.85rem;
  backdrop-filter:blur(3px)
}
.pcm-oos span{background:var(--color-gray-900);padding:6px 16px;border-radius:var(--radius-full)}
.pcm-body{padding:14px;display:flex;flex-direction:column;flex:1}
.pcm-title{
  font-size:.9rem;font-weight:600;color:var(--color-gray-900);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px
}
.pcm-price-wrap{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pcm-price{font-size:1.05rem;font-weight:700;color:var(--color-gray-900)}
.pcm-price-old{font-size:.72rem;color:var(--color-gray-400);text-decoration:line-through}
.pcm-discount{font-size:.68rem;font-weight:600;color:var(--color-green-700);background:var(--color-green-50);padding:1px 6px;border-radius:4px;white-space:nowrap}
.pcm-actions{display:flex;gap:6px;margin-top:auto}
.pcm-btn{
  padding:8px 14px;font-size:.8rem;font-weight:600;text-align:center;
  border-radius:8px;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px
}
.pcm-btn-primary{
  flex:1;background:var(--color-gray-800);color:var(--color-white)
}
.pcm-btn-primary:hover{background:var(--color-black)}
.pcm-btn-wa{
  width:38px;flex:0 0 auto;background:#25D366;color:var(--color-white);font-size:.95rem
}
.pcm-btn-wa:hover{background:#1da851}

/* ===== MODERN STEPS ===== */
.steps-grid-modern{
  display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:48px
}
@media(min-width:768px){
  .steps-grid-modern{flex-direction:row;justify-content:center;align-items:flex-start}
}
.step-card-modern{
  background:var(--color-white);border-radius:16px;padding:32px 24px;text-align:center;
  border:1px solid var(--color-gray-200);box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:all .3s;flex:1;max-width:340px;position:relative
}
.step-card-modern:hover{box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-4px);border-color:transparent}
.scm-icon{
  width:64px;height:64px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--color-gray-800),var(--color-gray-700));
  border-radius:16px;display:flex;align-items:center;justify-content:center
}
.scm-icon i{font-size:1.5rem;color:var(--color-white)}
.scm-num{
  font-size:.7rem;font-weight:700;color:var(--color-gray-400);letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:8px
}
.step-card-modern h3{font-weight:700;color:var(--color-gray-800);font-size:1rem;margin-bottom:8px}
.step-card-modern p{color:var(--color-gray-500);font-size:.85rem;line-height:1.55}
.step-connector{display:none;color:var(--color-gray-300);font-size:1.5rem;padding-top:40px}
@media(min-width:768px){.step-connector{display:block}}

/* ===== MODERN TESTIMONIALS ===== */
.testimonials-grid-modern{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.testimonials-grid-modern{grid-template-columns:repeat(3,1fr)}}
.testimonial-card-modern{
  background:var(--color-white);border-radius:16px;padding:28px 24px;
  border:1px solid var(--color-gray-200);position:relative;transition:all .3s
}
.testimonial-card-modern:hover{box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-4px);border-color:transparent}
.tcm-stars{color:#f59e0b;font-size:.9rem;letter-spacing:3px;margin-bottom:10px}
.tcm-quote{color:var(--color-gray-200);font-size:1.25rem;margin-bottom:8px;display:none}
.testimonial-card-modern p{color:var(--color-gray-600);font-size:.85rem;line-height:1.6;font-style:italic}
.tcm-author{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--color-gray-100)}
.tcm-avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--color-gray-800),var(--color-gray-600));
  color:var(--color-white);display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;flex-shrink:0
}
.tcm-name{font-weight:600;color:var(--color-gray-800);font-size:.875rem}
.tcm-role{color:var(--color-gray-400);font-size:.75rem}

/* ===== CTA SECTION ===== */
.section-cta{
  padding:60px 0;
  background:linear-gradient(135deg,#0b1120 0%,#162032 50%,#0b1120 100%);
  position:relative;overflow:hidden
}
.section-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 30% 50%, rgba(37,211,102,.06) 0%, transparent 60%);
}
.cta-card{
  position:relative;z-index:1;max-width:680px;margin:0 auto
}
.cta-title{
  font-size:1.75rem;font-weight:900;color:var(--color-white);margin-top:8px;line-height:1.2
}
.cta-title span{background:linear-gradient(135deg,#22c55e,#16a34a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-card p{color:var(--color-gray-400);font-size:.9rem;margin-top:12px;line-height:1.6}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.btn-cta-primary{
  background:linear-gradient(135deg,#22c55e,#16a34a);color:var(--color-white);
  padding:14px 32px;border-radius:12px;font-weight:700;font-size:.9rem;
  transition:all .2s;box-shadow:0 4px 20px rgba(34,197,94,.35),0 2px 0 #15803d;
  border:1px solid rgba(255,255,255,.1);
  display:inline-flex;align-items:center;gap:8px;text-decoration:none
}
.btn-cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(34,197,94,.45),0 3px 0 #15803d}
.btn-cta-outline{
  background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--color-white);
  padding:14px 28px;border-radius:12px;font-weight:600;font-size:.9rem;
  transition:all .2s;display:inline-flex;align-items:center;gap:8px;text-decoration:none
}
.btn-cta-outline:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}
.cta-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.cta-features{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:20px;font-size:.8rem;color:rgba(255,255,255,.5)}
.cta-features span{display:flex;align-items:center;gap:6px}

/* ===== HERO MOBILE FIXES ===== */
@media(max-width:767px){
  .hero{min-height:auto;padding:80px 0 48px}
  .hero h1{font-size:1.6rem !important}
  .hero p{font-size:.85rem}
  .hero-contact{gap:8px}
  .hero-contact .btn-3d{font-size:.73rem;padding:8px 14px}
  .hero-actions .btn-primary,.hero-actions .btn-outline-light{font-size:.8rem;padding:12px 20px}
  .stats-grid-modern{grid-template-columns:1fr 1fr;gap:10px}
  .stat-item{padding:16px 10px}
  .stat-num{font-size:1.35rem}
  .cta-title{font-size:1.35rem}
  .cta-actions{flex-direction:column;align-items:center}
  .btn-cta-primary,.btn-cta-outline{width:100%;justify-content:center;max-width:320px}
}
@media(max-width:380px){
  .hero h1{font-size:1.35rem !important}
  .products-grid-modern{grid-template-columns:1fr 1fr;gap:8px}
  .pcm-body{padding:10px}
  .pcm-title{font-size:.78rem}
  .pcm-price{font-size:.85rem}
  .pcm-btn{font-size:.7rem;padding:6px 10px}
}
.backdrop-blur{backdrop-filter:blur(8px)}
.backdrop-blur-sm{backdrop-filter:blur(4px)}

/* ===== ABOUT PAGE MODERN STYLES ===== */
.about-image-card{display:inline-block;position:relative}
.about-image-card img{transition:transform .4s;border-radius:var(--radius-lg)}
.about-image-card:hover img{transform:scale(1.02)}

.service-card{
  background:var(--color-white);border-radius:14px;padding:28px 24px;text-align:center;
  border:1px solid var(--color-gray-200);transition:all .3s
}
.service-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-4px);border-color:transparent}
.service-card .sc-icon{
  width:56px;height:56px;background:var(--color-gray-800);border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:var(--color-white);margin:0 auto 16px
}
.service-card .sc-icon i{font-size:1.25rem}
.service-card h3{font-weight:700;font-size:1rem;margin-bottom:8px;color:var(--color-gray-800)}
.service-card p{font-size:.8125rem;color:var(--color-gray-600);line-height:1.55}

.machine-category{
  background:var(--color-gray-50);border-radius:16px;padding:28px 24px;
  border:1px solid var(--color-gray-200);margin-top:24px;transition:all .3s
}
.machine-category:hover{box-shadow:0 4px 16px rgba(0,0,0,.04)}
.mc-title{font-size:1.1rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:10px;color:var(--color-gray-800)}
.mc-num{
  width:30px;height:30px;background:var(--color-gray-800);color:white;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0
}
.mc-desc{font-size:.85rem;color:var(--color-gray-600);margin-bottom:14px;line-height:1.55}

.why-card{
  background:var(--color-white);border-radius:14px;padding:28px 24px;
  border:1px solid var(--color-gray-200);transition:all .3s
}
.why-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-4px);border-color:transparent}
.why-card .wc-icon{
  width:48px;height:48px;background:var(--color-gray-100);border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:var(--color-gray-700);margin-bottom:18px
}
.why-card .wc-icon i{font-size:1.125rem}
.why-card h3{font-weight:700;font-size:.95rem;margin-bottom:8px;color:var(--color-gray-800)}
.why-card p{font-size:.8125rem;color:var(--color-gray-600);line-height:1.55}

.cert-grid-modern{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cert-item-modern{
  background:var(--color-white);padding:12px 24px;border-radius:12px;
  border:1px solid var(--color-gray-200);color:var(--color-gray-700);
  font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:8px;transition:all .3s
}
.cert-item-modern:hover{box-shadow:0 8px 24px rgba(0,0,0,.06);transform:translateY(-2px);border-color:transparent}
.cert-item-modern i{color:var(--color-green-500)}

.team-grid-modern{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.team-grid-modern{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.team-grid-modern{grid-template-columns:repeat(3,1fr)}}
.team-card-modern{
  background:var(--color-white);border-radius:16px;padding:32px 24px;text-align:center;
  border:1px solid var(--color-gray-200);transition:all .3s
}
.team-card-modern:hover{box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-4px);border-color:transparent}
.tcm-avatar-lg{
  width:80px;height:80px;border-radius:50%;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--color-gray-800),var(--color-gray-600));
  color:var(--color-white);display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;font-weight:700
}
.team-card-modern h4{font-weight:700;font-size:1rem;color:var(--color-gray-800)}
.team-card-modern .tcm-role{font-size:.75rem;color:var(--color-gray-400);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.team-card-modern .tcm-bio{font-size:.8rem;color:var(--color-gray-500);margin-top:10px}

.milestones-grid-modern{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(min-width:768px){.milestones-grid-modern{grid-template-columns:repeat(4,1fr)}}
.milestone-modern{
  text-align:center;padding:28px 16px;background:var(--color-white);
  border-radius:16px;border:1px solid var(--color-gray-200);transition:all .3s;position:relative
}
.milestone-modern:hover{box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-4px);border-color:transparent}
.mm-year{font-size:1.5rem;font-weight:900;color:var(--color-gray-800);letter-spacing:-.02em}
.mm-dot{width:6px;height:6px;background:var(--color-green-500);border-radius:50%;margin:10px auto;opacity:.5}
.milestone-modern h4{font-weight:700;font-size:.95rem;color:var(--color-gray-800)}
.milestone-modern p{font-size:.78rem;color:var(--color-gray-500);margin-top:4px}

@media(max-width:767px){
  .about-image-card{width:100%}
  .machine-category{padding:20px 16px}
  .mc-title{font-size:.95rem}
  .service-card,.why-card{padding:20px 16px}
  .milestones-grid-modern{grid-template-columns:1fr 1fr;gap:12px}
  .milestone-modern{padding:20px 12px}
}

/* ===== BLOG MODERN ===== */
.blogs-grid-modern{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.blogs-grid-modern{grid-template-columns:1fr 1fr}}
.blog-card-modern{
  background:var(--color-white);border:1px solid var(--color-gray-200);
  border-radius:14px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column
}
.blog-card-modern:hover{box-shadow:0 12px 40px rgba(0,0,0,.1);transform:translateY(-4px);border-color:transparent}
.bcm-img-wrap{position:relative;overflow:hidden;background:var(--color-gray-100);padding-bottom:56%}
.bcm-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blog-card-modern:hover .bcm-img-wrap img{transform:scale(1.05)}
.bcm-cat{
  position:absolute;top:14px;left:14px;padding:4px 12px;border-radius:9999px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--color-gray-700);
  font-size:.7rem;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.08)
}
.bcm-body{padding:18px;display:flex;flex-direction:column;flex:1;min-width:0}
.bcm-meta{display:flex;align-items:center;gap:12px;font-size:.75rem;color:var(--color-gray-400);margin-bottom:8px}
.bcm-meta i{font-size:.7rem}
.bcm-title{
  font-size:1.05rem;font-weight:700;color:var(--color-gray-900);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px
}
.bcm-desc{font-size:.82rem;color:var(--color-gray-500);line-height:1.5;flex:1;margin-bottom:12px}
.bcm-link{
  display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;
  color:var(--color-gray-800);transition:all .2s
}
.bcm-link:hover{gap:10px;color:var(--color-black)}
.bcm-link i{font-size:.7rem;transition:transform .2s}

/* ===== BLOG DETAIL ===== */
.breadcrumb-link{
  display:inline-flex;align-items:center;gap:8px;color:var(--color-gray-500);
  font-size:.875rem;transition:color .2s
}
.breadcrumb-link:hover{color:var(--color-gray-800)}
.bd-title{
  font-size:1.75rem;font-weight:800;color:var(--color-gray-900);line-height:1.15;letter-spacing:-.02em
}
@media(min-width:640px){.bd-title{font-size:2.25rem}}
@media(min-width:1024px){.bd-title{font-size:2.75rem}}
.bd-image-wrap{
  border-radius:16px;overflow:hidden;border:1px solid var(--color-gray-200);
  box-shadow:0 4px 20px rgba(0,0,0,.06);margin-bottom:40px
}
.bd-image-wrap img{width:100%;height:auto;display:block}
.bd-content{
  color:var(--color-gray-700);line-height:1.7;font-size:1rem;margin-bottom:48px
}
.bd-content p{margin-bottom:16px}
.bd-content h2,.bd-content h3{color:var(--color-gray-900);font-weight:700;margin-top:32px;margin-bottom:12px}
.bd-content h2{font-size:1.375rem}
.bd-content h3{font-size:1.125rem}
.bd-content ul,.bd-content ol{padding-left:24px;margin-bottom:16px}
.bd-content ul li{list-style:disc;margin-bottom:6px;color:var(--color-gray-600)}
.bd-content ol li{list-style:decimal;margin-bottom:6px;color:var(--color-gray-600)}
.bd-content img{border-radius:12px;margin:24px 0}
.bd-content a{color:var(--color-gray-800);font-weight:600;text-decoration:underline}
.bd-cta{margin-top:32px}
.bd-cta-inner{
  background:var(--color-gray-50);border-radius:16px;padding:32px 24px;
  border:1px solid var(--color-gray-200);text-align:center
}
@media(min-width:640px){.bd-cta-inner{text-align:left;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:32px 40px}}
.bd-cta-inner h3{font-size:1.125rem;font-weight:700;color:var(--color-gray-800);margin-bottom:4px}
.bd-cta-inner p{font-size:.85rem;color:var(--color-gray-500)}
.btn-cta-primary-sm{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  background:var(--color-gray-800);color:var(--color-white);
  padding:12px 28px;border-radius:10px;font-weight:600;font-size:.88rem;
  transition:all .2s;text-decoration:none
}
@media(min-width:640px){.btn-cta-primary-sm{margin-top:0}}
.btn-cta-primary-sm:hover{background:var(--color-black)}

/* ===== CONTACT PAGE MODERN ===== */
.contact-item-modern{display:flex;gap:20px;align-items:flex-start;padding:20px;background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:14px;transition:all .3s}
.contact-item-modern:hover{box-shadow:0 8px 24px rgba(0,0,0,.06);transform:translateY(-2px);border-color:transparent}
.cim-icon{
  width:48px;height:48px;background:var(--color-gray-100);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-gray-700);font-size:1rem;border:1px solid var(--color-gray-200);flex-shrink:0
}
.contact-item-modern h4{font-weight:700;color:var(--color-gray-800);font-size:.95rem;margin-bottom:4px}
.contact-item-modern p{color:var(--color-gray-500);font-size:.85rem;line-height:1.55}
.contact-map-modern{
  height:180px;background:var(--color-gray-100);border-radius:14px;
  border:1px solid var(--color-gray-200);overflow:hidden;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.04)
}
.contact-map-modern img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.6}

.form-card-modern{
  background:var(--color-white);padding:32px 36px;border-radius:16px;
  border:1px solid var(--color-gray-200);box-shadow:0 4px 20px rgba(0,0,0,.04)
}
.form-card-modern:hover{box-shadow:0 8px 30px rgba(0,0,0,.06)}
.fcm-title{font-size:1.375rem;font-weight:700;color:var(--color-gray-900);margin-bottom:24px}
.fcm-title span{border-bottom:3px solid var(--color-gray-400)}
.fcm-submit{
  width:100%;background:linear-gradient(135deg,#22c55e,#16a34a);color:var(--color-white);
  padding:14px 0;border-radius:10px;font-weight:700;font-size:.88rem;
  transition:all .2s;border:none;box-shadow:0 4px 16px rgba(34,197,94,.25),0 2px 0 #15803d
}
.fcm-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(34,197,94,.35),0 3px 0 #15803d}
.fcm-submit:active{transform:translateY(1px)}
.fcm-msg{
  padding:16px;border-radius:10px;margin-bottom:24px;font-size:.875rem;border:1px solid
}
.fcm-msg.success{background:var(--color-green-50);border-color:#bbf7d0;color:var(--color-green-700)}
.fcm-msg.error{background:var(--color-red-100);border-color:#fecaca;color:var(--color-red-500)}

/* Mobile fixes for new pages */
@media(max-width:767px){
  .form-card-modern{padding:24px 20px}
  .contact-item-modern{padding:16px}
  .bd-title{font-size:1.5rem!important}
  .bd-image-wrap{margin-bottom:24px;border-radius:12px}
  .bd-content{font-size:.9rem}
  .bd-cta-inner{padding:24px 20px}
}
.nav-phone,.mobile-phone{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--color-primary,#2563eb);text-decoration:none;white-space:nowrap}
.nav-phone:hover,.mobile-phone:hover{opacity:.8}
.mobile-phone{padding:12px 0;font-size:.9rem;color:var(--color-primary,#2563eb)}
@media(max-width:768px){
  .nav-phone{display:none}
}