.root-vars{--blue:#0f4c81;--light:#f7f9fb;--muted:#6b7280;--accent:#0f4c81}
:root{box-sizing:border-box}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;margin:0}
.container{max-width:1100px;margin:0 auto;padding:20px}

/* Header */
.site-header{border-bottom:1px solid var(--border);background:var(--card);position:sticky;top:0;z-index:40;padding:10px 0;box-shadow:0 2px 8px rgba(16,24,40,0.03)}
.dark-theme .site-header{box-shadow:0 6px 18px rgba(2,6,23,0.45)}
.site-header .container{max-width:1200px;padding:0 20px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex-shrink:0}
.logo{width:64px;height:auto;max-height:64px;border-radius:8px}
.brand-title{font-weight:700;font-size:16px}
.brand-sub{font-size:13px;color:var(--muted)}
.main-nav{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:flex-end}
.main-nav a{margin-left:0;text-decoration:none;color:var(--muted);font-weight:600;padding:8px 12px;border-radius:8px;border-bottom:2px solid transparent;transition:all 0.3s ease;white-space:nowrap}
.main-nav a:hover{color:var(--blue);background:var(--nav-hover)}
.main-nav a.active{color:var(--blue);border-bottom-color:var(--blue);background:var(--nav-hover)}

.lang-toggle{display:flex;gap:8px;flex-shrink:0;margin-left:-8px}
.btn-lang{background:transparent;border:1px solid var(--border);color:var(--muted);padding:6px 12px;border-radius:6px;cursor:pointer;font-weight:600;transition:all 0.3s ease}
.btn-lang:hover{color:var(--blue);background:var(--nav-hover)}
.btn-lang.lang-active{border-color:var(--blue);color:var(--blue);background:transparent}

/* Hero */
.hero{display:flex;flex-direction:column;gap:12px;padding:36px 0}
.hero-title{font-size:32px;color:var(--blue);margin:0}
.lead{color:var(--muted);margin-top:6px}
/* Primary and secondary button styles */
.btn{background:var(--card);color:#fff;padding:6px 10px;border-radius:8px;text-decoration:none;border:1px solid var(--border);font-size:13px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:10px}
.small{font-size:13px;color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:18px 0;background:var(--card)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-left{display:flex;flex-direction:column}
.footer-left a{color:var(--muted);text-decoration:none}
.footer-left a:hover{color:var(--blue)}
.footer-right{color:var(--muted)}
.footer-col{flex:1;min-width:200px}
.footer-about{max-width:380px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--blue)}

/* Theme variables (light by default). Use .dark-theme on <html> for dark mode. */
:root{
	--bg:#fbfbfd;
	--card:#ffffff;
	--text:#0f1724;
	--muted:#6b7280;
	--blue:#0a66ff;
	--surface:#ffffff;
	--btn-bg:var(--blue);
	--btn-text:#ffffff;
	--border:#eef2f7;
	--nav-hover:rgba(15,76,129,0.06);
}

@media (prefers-color-scheme: dark){
	:root{
		--bg:#0b1220;
		--card:#0f1724;
		--text:#e6eef8;
		--muted:#9aa6b2;
		--blue:#58a6ff;
		--surface:#0b1220;
		--btn-bg:#2563eb;
		--btn-text:#fff;
	}
}

.dark-theme{
    --bg:#0b1622; /* softened dark navy */
    --card:#0f1b2a; /* slightly lighter card */
    --text:#dbeaf7; /* softer off-white */
    --muted:#9fb0bf; /* gentler muted */
    --blue:#4aa3dd; /* desaturated blue */
    --surface:#0c1722;
    --btn-bg:#2f5f94;
    --btn-text:#f7fbff;
    --border:rgba(255,255,255,0.06);
    --nav-hover:rgba(74,163,221,0.08);
}

body{background:var(--bg);color:var(--text);transition:background .25s ease,color .25s ease}
a, a:link, a:visited{color:var(--blue)}
.btn{background:var(--btn-bg);color:#fff}
.btn-ghost{background:transparent;color:var(--text);border:1px solid rgba(0,0,0,0.06)}
.dark-theme .btn-ghost{border-color:rgba(255,255,255,0.08)}

form input,form textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;margin-top:8px;background:var(--card);color:var(--text)}
@media(min-width:760px){.hero{flex-direction:row;align-items:center}}

/* Missing utility and component styles */
.small-muted{font-size:13px;color:var(--muted)}

.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.row > *{flex:1;min-width:260px}

.feature{display:flex;flex-direction:column;gap:8px}
.feature h3{margin:0;color:var(--blue)}
.feature p{margin:0}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}

.form-row{display:flex;gap:12px}
.form-row input{flex:1;min-width:140px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text)}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.actions .btn{padding:12px 20px;font-weight:600}

.stats{display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap}
.stat{flex:1;min-width:120px;text-align:center;padding:12px;border-radius:8px;background:var(--bg)}
.stat > div:first-child{font-size:24px;color:var(--blue);margin-bottom:4px}

/* Section styles */
.services{margin:48px 0 32px}
.services h2{font-size:28px;color:var(--blue);margin:0}

.projects{margin:48px 0 32px}
.projects h2{font-size:28px;color:var(--blue);margin:0}

.about{margin:48px 0 32px;padding:24px;border-radius:10px;background:var(--bg)}
.about h2{font-size:28px;color:var(--blue);margin:0}

.contact{margin:48px 0 32px}
.contact h2{font-size:28px;color:var(--blue);margin:0}

/* Hero Professional Style */
.hero-professional{display:flex;flex-direction:column;justify-content:center;align-items:center}
.hero-professional .hero-title{font-size:42px;margin:0 0 16px 0;font-weight:800}
.hero-professional .lead{max-width:700px}
.hero-professional .actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:0}

.achievements{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;text-align:center;margin:48px 0;padding:32px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.achievements > div{padding:0}

/* Professional Contact Form */
#contact form input, #contact form textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;margin:0;background:var(--card);color:var(--text);font-family:inherit;font-size:14px}
#contact form input::placeholder, #contact form textarea::placeholder{color:var(--muted)}

/* About Section with Cards */
#about h2{margin:0 0 24px 0}
#about > div{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
#about h3{margin-top:0;color:var(--blue);font-size:18px}

/* Responsive improvements */
@media(max-width:768px){
  .container{padding:16px}
  .site-header .container{padding:0 16px}
  .header-inner{flex-wrap:wrap;gap:12px}
  .brand{flex:0 0 auto;min-width:auto}
  .main-nav{flex:0 1 100%;gap:6px;flex-wrap:wrap;justify-content:flex-start}
  .main-nav a{flex:1;min-width:60px;text-align:center;padding:6px 8px;font-size:12px;white-space:normal}
  .lang-toggle{flex:0 0 auto;order:-1}
  .hero{flex-direction:column}
  .hero > div{width:100%!important}
  .row{flex-direction:column}
  .row > *{width:100%}
  .footer-inner{flex-direction:column;gap:24px}
  .footer-col{width:100%}
  #quickServices .card-grid{grid-template-columns:1fr}
  .actions{flex-direction:column}
  .actions .btn{width:100%;text-align:center}
}

@media(max-width:480px){
  .container{padding:12px}
  .hero-title{font-size:24px}
  .services h2, .projects h2, .about h2, .contact h2{font-size:22px}
  .form-row{flex-direction:column}
  .form-row input{width:100%}
  .stats{flex-direction:column}
  .stat{width:100%}
}

/* Page-specific styles */
.page-hero{margin-bottom:32px;text-align:center}
.page-title{font-size:36px;color:var(--blue);margin:0;margin-bottom:12px}

/* Professional Product Page Styles */
.page-hero-modern{margin-bottom:56px;text-align:center;padding:40px 0}
.page-title-modern{font-size:44px;color:var(--blue);margin:0;margin-bottom:16px;font-weight:800}
.page-subtitle{font-size:16px;color:var(--muted);margin:0;line-height:1.6;max-width:700px;margin-left:auto;margin-right:auto}

/* Category Section */
.category-section{margin-bottom:56px}
.category-header{margin-bottom:32px}
.category-header h2{font-size:28px;color:var(--blue);margin:0;margin-bottom:12px;font-weight:700}
.category-divider{height:3px;width:80px;background:var(--blue);border-radius:2px}

/* Product Cards Enhancement */
.product-card{padding:24px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:all 0.3s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,0.1)}
.product-card h3{font-size:18px;margin:12px 0;color:var(--blue);font-weight:700}
.product-card p{font-size:14px;color:var(--muted);line-height:1.6;margin:8px 0}
.product-icon-container{font-size:48px;margin-bottom:16px;display:inline-block;padding:12px 16px;background:rgba(10,102,255,0.1);border-radius:12px}

/* Product Specs */
.product-specs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.spec{display:inline-block;padding:6px 12px;background:var(--bg);border-radius:6px;font-size:12px;color:var(--muted);border:1px solid var(--border)}

/* Product Actions */
.product-actions{display:flex;gap:8px;margin-top:16px}
.product-actions .btn{flex:1;text-align:center;padding:8px 10px;font-size:12px;margin:0;background:var(--blue);color:#fff;border:none;text-decoration:none}
.btn-whatsapp{background:linear-gradient(135deg, #25d366 0%, #128c7e 100%);color:#fff;border:none}
.btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,211,102,0.4)}

/* CTA Section */
.cta-section{margin-top:64px;padding:48px;border-radius:16px;background:linear-gradient(135deg, var(--blue) 0%, rgba(10,102,255,0.9) 100%);color:#fff;text-align:center}
.cta-content h2{font-size:32px;margin:0;margin-bottom:16px;font-weight:800}
.cta-content p{font-size:16px;margin:0 0 24px 0;line-height:1.6;opacity:0.95}
.btn-primary{background:#fff;color:var(--blue);padding:12px 32px;border-radius:8px;text-decoration:none;font-weight:600;display:inline-block;transition:all 0.3s ease}
.btn-primary:hover{background:rgba(255,255,255,0.95);transform:translateY(-2px)}

/* Product Grid */
.service-card, .product-card{display:flex;flex-direction:column;transition:all 0.3s ease}
.service-card:hover, .product-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(15,76,129,0.12)}
.service-icon, .product-icon{font-size:32px;margin-bottom:12px}

.service-list{list-style:none;padding:0;margin:12px 0 0 0}
.service-list li{padding:6px 0;color:var(--muted);font-size:14px;border-bottom:1px solid var(--border)}
.service-list li:last-child{border-bottom:none}

.product-specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.spec{display:inline-block;padding:4px 8px;background:var(--bg);border-radius:4px;font-size:12px;color:var(--muted);border:1px solid var(--border)}

.services-detail{margin-top:24px}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.products-section{display:block}

.service-process{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}

/* Responsive for pages */
@media(max-width:768px){
  .page-title-modern{font-size:32px}
  .page-subtitle{font-size:14px}
  .category-header h2{font-size:24px}
  .category-divider{width:60px}
  .products-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
  .product-card{padding:16px}
  .product-icon-container{font-size:36px}
  .cta-section{padding:32px 24px}
  .cta-content h2{font-size:24px}
  .page-title{font-size:28px}
  .products-grid, .services-detail{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
  .product-card, .service-card{padding:16px}
  .hero-professional .hero-title{font-size:28px}
  .achievements{grid-template-columns:repeat(2,1fr);gap:20px}
  #contact > div{grid-template-columns:1fr!important}
}

@media(max-width:480px){
  .page-hero-modern{padding:24px 0;margin-bottom:32px}
  .page-title-modern{font-size:24px}
  .page-subtitle{font-size:13px}
  .category-section{margin-bottom:32px}
  .category-header h2{font-size:18px}
  .products-grid{grid-template-columns:1fr;gap:12px}
  .product-card{padding:12px}
  .product-icon-container{font-size:32px;padding:8px 12px}
  .cta-section{padding:24px 16px;margin-top:32px}
  .cta-content h2{font-size:20px}
  .cta-content p{font-size:14px;margin-bottom:16px}
  .page-title{font-size:24px}
  .products-grid, .services-detail{grid-template-columns:1fr;gap:12px}
  .contact-grid{grid-template-columns:1fr!important}
  .hero-professional .hero-title{font-size:22px}
  .hero-professional .lead{font-size:16px}
  .hero-professional{margin:-12px -12px 24px -12px;padding:40px 12px}
  .achievements{grid-template-columns:1fr;gap:16px;margin:24px 0;padding:16px 0}
  .actions{flex-direction:column}
  .actions .btn{width:100%;text-align:center}
  #about > div{grid-template-columns:1fr}
}