:root{
  --primary:#ef4444;
  --primary-2:#f97373;
  --bg:#0b0d12;
  --surface:#0f121a;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --text:#e5e7eb;
  --muted:#9aa3b2;
  --shadow:0 40px 120px rgba(0,0,0,.35), 0 12px 40px rgba(239,68,68,.08);
  --radius:20px;
  --accent:#3bd680;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --surface:#f8fafc;
    --card:rgba(15,23,42,.04);
    --border:rgba(15,23,42,.10);
    --text:#0f172a;
    --muted:#475569;
    --shadow:0 30px 100px rgba(15,23,42,.08), 0 10px 30px rgba(239,68,68,.08);
	--accent:#16a34a;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans, sans-serif;background:var(--bg);color:var(--text);}
a{text-decoration:none;color:inherit}

/* global container padding + safe areas */
.container{
  max-width:1200px;
  margin:0 auto;
  padding-left: calc(26px + env(safe-area-inset-left));
  padding-right: calc(26px + env(safe-area-inset-right));
}
@media (min-width:480px){
  .container{
    padding-left: calc(32px + env(safe-area-inset-left));
    padding-right: calc(32px + env(safe-area-inset-right));
  }
}
@media (min-width:1024px){
  .container{padding-left:36px;padding-right:36px}
}

/* HERO-only extra padding for all phones */
.safe-hero{
  padding-left: clamp(36px, 9vw, 64px);
  padding-right: clamp(36px, 9vw, 64px);
}
@supports (padding: max(0px)) {
  .safe-hero{
    padding-left: max(clamp(36px, 9vw, 64px), env(safe-area-inset-left));
    padding-right: max(clamp(36px, 9vw, 64px), env(safe-area-inset-right));
  }
}

.list{display:grid; gap:8px; padding:0; margin:10px 0 0; list-style:none}
    .list li{display:flex; align-items:flex-start; gap:10px}
    .list li:before{content:"✓"; color:var(--accent); font-weight:900; line-height:1.2}
	
/* Ribbon */
.ribbon{font-size:13px;border-bottom:1px solid var(--border);background:linear-gradient(90deg,var(--surface),transparent);}
.ribbon .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;color:var(--muted)}
.ribbon .contact{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--border);border-radius:999px}

/* Navbar */
.navbar{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border);backdrop-filter:blur(10px);background:rgba(11,13,18,.6);}
@media (prefers-color-scheme: light){.navbar{background:rgba(255,255,255,.7);}}
.nav{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px}
.logo{display:flex;align-items:center;gap:10px;min-width:0}
.logo img{height:60px;max-width:80vw;object-fit:contain}
.logo .ph{height:60px;width:80px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#e5e7eb,#cbd5e1);color:#334155;font-weight:800}
.menu{display:none;gap:16px;align-items:center;flex-wrap:wrap}
.menu a:hover{opacity:.85}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:var(--shadow)}
.btn-ghost{border:1px solid var(--border)}

/* Mobile menu */
.hamburger{display:inline-flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--border);border-radius:10px;background:transparent}
.bar{width:20px;height:2px;background:var(--text);opacity:.8}
@media (min-width: 860px){ .menu{display:flex} .hamburger{display:none} }

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.gradient{position:absolute;inset:-20%;background:radial-gradient(900px 500px at 10% 10%, rgba(239,68,68,.35), transparent 60%), radial-gradient(700px 400px at 90% 80%, rgba(249,115,115,.25), transparent 60%);filter:blur(10px);z-index:-1}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:20px;padding:42px 0}
@media (min-width:860px){ .hero .wrap{grid-template-columns:1.1fr .9fr;padding:84px 0;gap:28px} }
.hero h1{font-size: clamp(22px, 5vw, 46px);line-height:1.18;margin:0;text-wrap:balance}
.hero p{font-size:16px;color:var(--muted);max-width:65ch}
.hero .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.hero-card{border-radius:24px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));box-shadow:var(--shadow);min-height:220px;display:grid;place-items:center}
@media (min-width:860px){ .hero-card{min-height:300px} }

/* Sections */
.section{padding:56px 0;scroll-margin-top:88px}
.section h2{font-size: clamp(22px, 4.5vw, 34px);margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 18px}
.cards{display:grid;grid-template-columns:1fr;gap:14px}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:18px}
@media (min-width: 860px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Two column */
.grid-2{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width: 860px){ .grid-2{grid-template-columns:1.1fr .9fr} }

/* Reviews */
.reviews{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:860px){ .reviews{grid-template-columns:repeat(3,minmax(0,1fr))} }
.review{border:1px solid var(--border);border-radius:16px;padding:16px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));box-shadow:var(--shadow);font-size:15px}
.review .author{margin-top:8px;color:var(--muted);font-size:13px}

/* Footer */
.footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted);font-size:14px}

/* Floating WhatsApp */
.whats-fab{position:fixed;right:14px;bottom:14px;z-index:999;background:#25d366;color:#fff;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.whats-fab img{width:26px;height:26px;display:block}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(10px);animation:reveal .6s ease .05s forwards}
.reveal:nth-child(2){animation-delay:.12s}
.reveal:nth-child(3){animation-delay:.18s}
.reveal:nth-child(4){animation-delay:.24s}
@keyframes reveal{to{opacity:1;transform:none}}


/* =========================================
   BL-FIX: Mobile full-screen menu
   ========================================= */
@media (max-width: 859px){
  #menu{ display:none; } /* hide desktop menu on phones */
}
.mobile-menu{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  display:grid; place-items:end center;
  transition:opacity .25s ease;
  opacity:0; pointer-events:none;
}
.mobile-menu[data-state="open"]{ opacity:1; pointer-events:auto; }
.mobile-menu__sheet{
  width:100%; max-width:560px;
  background:var(--surface);
  border-top-left-radius:20px; border-top-right-radius:20px;
  box-shadow:0 -20px 60px rgba(0,0,0,.35);
  transform:translateY(16px);
  transition:transform .25s ease;
  padding:20px 22px 28px;
  border-top:1px solid var(--border);
  text-align:center;
}
.mobile-menu[data-state="open"] .mobile-menu__sheet{ transform:translateY(0) }
.mobile-link{
  display:block; padding:14px 4px; font-size:18px; border-bottom:1px solid var(--border);
}
.mobile-link:last-of-type{ border-bottom:0 }
html.menu-open, body.menu-open{ overflow:hidden } /* lock scroll when open */