:root{
  --bg:#0b1117;
  --card:#111827;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --brand:#22c55e; /* emerald */
  --brand-2:#16a34a;
  --accent:#38bdf8; /* sky */
  --white:#ffffff;
  --gray:#0f172a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.flex{display:flex}.between{justify-content:space-between}.center-y{align-items:center}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.9rem}
*.rounded{border-radius:12px}.shadow{box-shadow:0 10px 30px rgba(0,0,0,.25)}

/******** Header ********/
.header-grid{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:10px 0}
.nav-shell{justify-self:center; display:flex; align-items:center; gap:8px; background:rgba(148,163,184,.10); border:1px solid rgba(148,163,184,.18); border-radius:999px; padding:6px 8px; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.header-right{min-width:36px}
.site-header{position:sticky; top:0; z-index:1000; background:transparent; border:0; box-shadow:none}
.topbar{background:#0a0f14; border-bottom:1px solid rgba(148,163,184,.12); color:var(--muted); font-size:.9rem}
.topbar .container{display:flex; justify-content:space-between; align-items:center; padding:6px 20px}
.topbar a{color:var(--text); opacity:.85}
.mainbar{background:var(--card); border-bottom:1px solid rgba(148,163,184,.12)}
.logo{display:flex; align-items:center; gap:10px; color:var(--text)}
.logo-mark{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); font-weight:700}
.logo-mark.small{width:28px; height:28px; font-size:.9rem}
.logo-text{font-family:Poppins,Inter,sans-serif; font-weight:700; letter-spacing:.2px}
.logo-img{height:36px; width:auto; display:block}
.logo.has-logo-img .logo-mark{display:none}
.nav-toggle{display:none; background:rgba(148,163,184,.12); border:none; color:var(--text); padding:10px 12px; border-radius:10px}
.nav ul{display:flex; gap:14px; list-style:none; padding:0; margin:0; justify-content:center}
.nav a{color:var(--text); opacity:.9; padding:12px 8px; border-bottom:2px solid transparent; transition:border-color .15s ease,color .15s ease}
.nav a.active,.nav a:hover{color:var(--white); background:transparent; border-bottom-color:var(--brand)}
.header-ctas{display:flex; gap:10px}

/******** Buttons ********/
.btn{display:inline-block; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#04140c; padding:12px 18px; border-radius:10px; font-weight:700; border:none}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid rgba(148,163,184,.25)}
.btn.outline{background:transparent; color:var(--text); border:1px solid rgba(148,163,184,.25)}
.btn.whatsapp{background:#25D366; color:#062412}

/******** Hero ********/
.hero{position:relative; min-height:64vh; display:grid; place-items:center;}
.hero-media{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.55) saturate(1.1); pointer-events:none}
.hero:after{content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 40%, rgba(34,197,94,.25), transparent 60%); pointer-events:none}
.hero-content{position:relative; z-index:1; padding:80px 0; text-align:center}
.hero h1{font-family:Poppins,Inter,sans-serif; font-size:42px; line-height:1.2; margin:0 0 12px}
.hero p{max-width:800px; margin:0 auto 20px; color:var(--muted)}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/******** Sections ********/
.section{padding:64px 0}
.section.gray{background:linear-gradient(180deg, rgba(15,23,42,.6), rgba(15,23,42,.2))}
.section.cta{background:linear-gradient(180deg, rgba(34,197,94,.08), rgba(15,23,42,.2))}

.page-hero{padding:56px 0 24px; border-bottom:1px solid rgba(148,163,184,.12)}
.page-hero.has-bg{position:relative; min-height:42vh; display:grid; align-items:end; padding:80px 0 40px; border-bottom:none; background-size:cover; background-position:center}
.page-hero.has-bg:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,12,.10), rgba(2,6,12,.55) 70%, rgba(2,6,12,.85));}
.page-hero.has-bg .container{position:relative}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}

.cards-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:16px}
.card{background:var(--card); border:1px solid rgba(148,163,184,.12); padding:22px; border-radius:14px; display:block; color:var(--text); transition:transform .15s ease, border-color .15s}
.card:hover{transform:translateY(-2px); border-color:rgba(148,163,184,.25)}
.card-media{height:140px; background-size:cover; background-position:center; border-radius:10px; margin-bottom:12px; border:1px solid rgba(148,163,184,.15)}
.card-icon{font-size:24px; opacity:.9; margin-bottom:6px}
.catalog .card h3{margin:8px 0}
@media (max-width: 900px){.card-media{height:120px}}
@media (max-width: 640px){.card-media{height:160px}}

.about-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.stat{background:var(--card); padding:18px; border-radius:12px; border:1px solid rgba(148,163,184,.1); text-align:center}
.stat-value{font-weight:800; font-size:24px}
.stat-label{color:var(--muted)}

.benefits{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.benefit{background:var(--card); border:1px solid rgba(148,163,184,.12); padding:14px 16px; border-radius:12px}

.logo-row{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px}
.logo-box{background:var(--card); border:1px dashed rgba(148,163,184,.25); border-radius:12px; min-height:72px; display:grid; place-items:center; color:var(--muted)}

.info-card{background:var(--card); border:1px solid rgba(148,163,184,.12); border-radius:12px; padding:18px}
.cards-plain .info-card{min-height:160px}

.link-arrow{display:inline-flex; gap:8px; align-items:center}
.link-arrow:after{content:"→"}

/******** Eyebrow & Checklist ********/
.eyebrow{text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--accent); font-size:.8rem; display:inline-block; margin-bottom:6px}
.checklist{list-style:none; padding:0; margin:10px 0 16px; display:grid; gap:8px}
.checklist li{position:relative; padding-left:22px}
.checklist li:before{content:"✓"; position:absolute; left:0; top:0; color:var(--brand); font-weight:800}

/******** KPI cards ********/
.kpi-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.kpi{position:relative; background:var(--card); border:1px solid rgba(148,163,184,.14); border-radius:14px; padding:20px; text-align:center; overflow:hidden; transition:transform .15s ease, border-color .15s ease}
.kpi:after{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--brand),var(--accent)); opacity:.9}
.kpi:hover{transform:translateY(-2px); border-color:rgba(148,163,184,.25)}
.kpi-value{font-weight:800; font-size:26px}
.kpi-label{color:var(--muted); font-weight:600}

/******** Founder message ********/
.founder-card{background:var(--card); border:1px solid rgba(148,163,184,.14); border-radius:16px; padding:22px; max-width:900px; margin:0 auto}
.founder-quote{font-size:1.1rem; line-height:1.7; margin:6px 0 10px; position:relative}
.founder-quote:before{content:"\201C"; position:absolute; left:-10px; top:-6px; font-size:42px; color:var(--accent); opacity:.5}
.founder-sign{color:var(--muted); font-weight:600}

/******** Forms ********/
.form{background:var(--card); border:1px solid rgba(148,163,184,.12); border-radius:14px; padding:22px}
.form-field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.form-field input,.form-field textarea, .form-field select{
  background:#0a0f14; color:var(--text); border:1px solid rgba(148,163,184,.2);
  padding:12px 12px; border-radius:10px; outline:none
}
.form-field input:focus,.form-field textarea:focus{border-color:var(--accent)}
.form-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.spec-list{display:grid; gap:8px; margin:14px 0}

/******** Map ********/
.map-embed{border-radius:14px; overflow:hidden; border:1px solid rgba(148,163,184,.12); background:#0a0f14}
.map-embed iframe{width:100%; height:320px; border:0}

/******** Footer ********/
.site-footer{border-top:1px solid rgba(148,163,184,.12); margin-top:24px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; padding:22px 0}
.footer-brand{display:flex; gap:10px; align-items:center}
.footer-links{list-style:none; padding:0; margin:0}
.footer-links li{margin:8px 0}
.socials{display:flex; gap:10px}
.copy{border-top:1px solid rgba(148,163,184,.12); padding:12px 0; text-align:center; color:var(--muted)}

/******** Posts ********/
.posts{display:grid; gap:18px}
.post{background:var(--card); border:1px solid rgba(148,163,184,.12); border-radius:12px; padding:18px}
.post h2{margin:8px 0}

/******** Steps & Badges ********/
.steps{list-style:none; padding:0; margin:12px 0; display:grid; gap:12px}
.step{display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid rgba(148,163,184,.12); border-radius:12px; padding:14px}
.step .num{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#04140c; font-weight:800}
.badges{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:10px 0}
.badge{background:rgba(148,163,184,.12); color:var(--text); border:1px solid rgba(148,163,184,.18); border-radius:999px; padding:6px 10px; font-weight:600; font-size:.9rem}

/******** Mosaic visuals ********/
.mosaic-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.mosaic-tile{position:relative; display:block; border-radius:16px; overflow:hidden; min-height:220px; background-size:cover; background-position:center; border:1px solid rgba(148,163,184,.12)}
.mosaic-tile:before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,12,.0), rgba(2,6,12,.7));}
.mosaic-overlay{position:absolute; inset:auto 0 0 0; padding:16px}
.mosaic-overlay h3{margin:0 0 4px}

/******** Responsive ********/
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr 1fr}
  .logo-row{grid-template-columns:repeat(3,1fr)}
  .cards-grid{grid-template-columns:1fr 1fr}
  .mosaic-3{grid-template-columns:1fr 1fr}
  .benefits{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:1fr}
  .mosaic-3{grid-template-columns:1fr}
  .logo-row{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .kpi-cards{grid-template-columns:1fr 1fr}
  .nav-toggle{display:inline-block}
  .nav-shell{background:transparent; border:none; box-shadow:none; padding:0}
  .nav{display:none; position:absolute; top:64px; left:20px; right:20px; background:var(--card); border:1px solid rgba(148,163,184,.2); border-radius:12px; padding:14px; box-shadow:0 12px 28px rgba(0,0,0,.35)}
  .nav ul{flex-direction:column}
  .site-header .container{position:relative}
}

/******** WhatsApp widget ********/
.wa-float{position:fixed; right:16px; bottom:16px; z-index:1200}
.wa-button{display:flex; align-items:center; gap:8px; background:#25D366; color:#062412; border:none; border-radius:999px; padding:12px 14px; font-weight:800; box-shadow:0 12px 24px rgba(0,0,0,.35); cursor:pointer}
.wa-button .icon{width:20px; height:20px}
.wa-panel{position:absolute; right:0; bottom:56px; width:280px; background:var(--card); border:1px solid rgba(148,163,184,.2); border-radius:12px; padding:12px; box-shadow:0 14px 32px rgba(0,0,0,.45); display:none}
.wa-panel.open{display:block}
.wa-panel h4{margin:4px 0 6px; font-size:1rem}
.wa-panel p{margin:0 0 10px; color:var(--muted); font-size:.9rem}
.wa-actions{display:flex; gap:8px; align-items:center}
.wa-actions .btn{flex:1}
.wa-close{position:absolute; top:6px; right:8px; background:transparent; border:none; color:var(--muted); font-weight:800; cursor:pointer}