:root{
  /* Mineral theme: obsidian + emerald/teal + crystal highlights */
  --bg:#050607;
  --bg2:#0A0D10;
  --panel: rgba(255,255,255,.04);
  --panel2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.10);

  --emerald:#14B8A6;     /* teal */
  --emerald2:#22C55E;    /* green */
  --crystal:#7DD3FC;     /* ice blue */
  --lime:#A3E635;        /* mineral lime */

  --text:#F8FAFC;
  --muted: rgba(248,250,252,.72);

  --whatsapp:#25D366;
  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --radius:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background: radial-gradient(circle at 20% 20%, rgba(20,184,166,.10) 0%, transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(125,211,252,.08) 0%, transparent 50%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg2) 60%, #000 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.7; /* Slightly increased */
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:all .25s ease}
ul{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Tiny mineral noise overlay */
.grain{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  z-index:0;
}

/* Top ribbon */
.ribbon{
  position:relative;
  z-index:5;
  background: rgba(0,0,0,.55);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(14px);
  padding:10px 0;
  color: var(--muted);
  font-size:.86rem;
}
.ribbon .container{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.r-left{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.chip i{color: var(--crystal)}
.r-right a{color: var(--muted); margin-left:12px}
.r-right a:hover{color: var(--crystal)}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background: rgba(5,6,7,.72);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(18px);
  padding:14px 0;
  transition:all .25s ease;
}
header.scrolled{padding:10px 0;background: rgba(5,6,7,.92)}
header .container{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* Brand */
.brand{display:flex; align-items:center; gap:12px; min-width: 240px}
.mark{
  width:42px; height:42px; border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(125,211,252,.35) 0%, transparent 55%),
    linear-gradient(135deg, rgba(20,184,166,.95), rgba(34,197,94,.92));
  box-shadow: 0 14px 32px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.mark:after{
  content:"";
  position:absolute; inset:-60% -60%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.25) 0%, transparent 55%);
  transform: rotate(12deg);
  opacity:.55;
}
.mark i{color:#00120e; font-size:1.1rem; position:relative; z-index:2}

.brandtext{line-height:1.05}
.brandtext .name{
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  letter-spacing:-.6px;
  font-size:1.22rem;
}
.brandtext .name span{
  background: linear-gradient(to right, var(--crystal), var(--emerald2));
  -webkit-background-clip:text;
  color:transparent;
}
.brandtext .tag{
  display:block;
  margin-top:4px;
  color: var(--muted);
  font-size:.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Desktop nav (unique labels) */
nav.desktop{display:flex; align-items:center; gap:22px}
nav.desktop a{
  position:relative;
  padding:8px 0;
  font-weight:700;
  font-size:.93rem;
  color: rgba(248,250,252,.92);
  white-space:nowrap;
}
nav.desktop a:hover{color: var(--crystal)}
nav.desktop a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  height:2px; width:0;
  background: linear-gradient(90deg, var(--emerald), var(--crystal), var(--lime));
  transition: width .25s ease;
}
nav.desktop a:hover::after{width:100%}

/* Actions */
.actions{display:flex; align-items:center; gap:14px}
.callbox{
  display:flex; flex-direction:column; align-items:flex-end;
  line-height:1.2;
  min-width: 170px;
}
.callbox small{color: var(--muted); font-size:.74rem}
.callbox a{
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
}
.callbox a:hover{color: var(--crystal)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight: 900;
  font-size:.92rem;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-2px); border-color: rgba(125,211,252,.28)}
.btn-ore{
  background: linear-gradient(135deg, rgba(20,184,166,.98), rgba(34,197,94,.92));
  color:#00120e;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 14px 30px rgba(20,184,166,.18);
}
.btn-ore:hover{filter: brightness(1.06)}
.btn-crystal{
  background: linear-gradient(135deg, rgba(125,211,252,.90), rgba(20,184,166,.75));
  color:#00120e;
  border-color: rgba(255,255,255,.08);
}
.btn-wa{
  background: var(--whatsapp);
  color:#fff;
  border-color: rgba(255,255,255,.12);
}

.hamburger{
  display:none;
  font-size:1.65rem;
  color:#fff;
  padding:8px 10px;
  border-radius:12px;
  border: 1px solid transparent;
  cursor:pointer;
}
.hamburger:hover{border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.03)}

/* Drawer */
.overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.6);
  z-index:80;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
}
.overlay.active{opacity:1; pointer-events:auto}

.drawer{
  position:fixed; top:0; right:-100%;
  width:86%; max-width:340px; height:100vh;
  z-index:90;
  background: rgba(10,13,16,.96);
  border-left:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  box-shadow: -20px 0 70px rgba(0,0,0,.75);
  padding:22px;
  transition:right .35s cubic-bezier(.77,0,.175,1);
  display:flex; flex-direction:column;
}
.drawer.active{right:0}
.dhead{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.10);
  padding-bottom:16px; margin-bottom:16px;
}
.dclose{color: var(--muted); cursor:pointer; font-size:1.35rem}
.dnav a{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  margin-bottom:12px;
  font-weight: 900;
}
.dnav a i{color: var(--crystal); width:22px; text-align:center}
.dnav a:hover{border-color: rgba(125,211,252,.25); transform: translateY(-2px)}
.dcta{margin-top:auto; border-top:1px solid rgba(255,255,255,.10); padding-top:16px}
.dcta .btn{width:100%}

/* Mobile bottom bar */
.mobilebar{
  display:none;
  position:fixed; left:0; bottom:0; width:100%;
  z-index:70;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(10,13,16,.92);
  backdrop-filter: blur(12px);
  padding:10px 14px;
}
.mobilebar .container{display:flex; gap:10px}
.mbtn{flex:1; padding:12px; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:900}

/* HERO */
.hero{
  position:relative;
  z-index:2;
  min-height: 90vh;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-top: -92px;
  padding-top: 92px;
}
.hero .container{padding: 42px 20px 56px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
}

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(248,250,252,.88);
  font-weight: 800;
  font-size:.92rem;
  margin-bottom: 14px;
}
.kicker .dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--emerald), var(--crystal));
  box-shadow: 0 0 18px rgba(125,211,252,.25);
}

h1{
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  letter-spacing:-1px;
  font-size: 3.15rem;
  line-height:1.08;
  margin-bottom: 12px;
}
h1 .shine{
  background: linear-gradient(90deg, var(--crystal), var(--emerald), var(--lime));
  -webkit-background-clip:text;
  color:transparent;
}
.lead{
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 650px;
  margin-bottom: 18px;
}
.hero-cta{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top: 10px;
}
.hero-metrics{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 18px;
}
.metric{
  flex: 0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  min-width: 200px;
}
.metric i{color: var(--crystal)}
.metric b{display:block;font-size:.95rem}
.metric span{display:block;color: var(--muted);font-size:.86rem;margin-top:2px}

/* Right crystal card */
.crystal-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 30% 25%, rgba(125,211,252,.18) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(20,184,166,.12) 0%, transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 24px;
  position:relative;
  overflow:hidden;
}
.crystal-card:before{
  content:"";
  position:absolute; inset:-40% -40%;
  background:
    conic-gradient(from 180deg at 50% 50%, rgba(125,211,252,.10), rgba(34,197,94,.10), rgba(163,230,53,.10), rgba(125,211,252,.10));
  filter: blur(24px);
  opacity:.7;
  transform: rotate(12deg);
  pointer-events:none;
}
.crystal-card *{position:relative; z-index:2}
.crystal-card h3{
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.crystal-card p{color: var(--muted); font-size:.95rem; margin-bottom: 14px}
.formlike{
  display:grid; gap:10px; margin-top: 10px;
}
.field{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.field i{color: var(--lime); margin-top:2px}
.field b{display:block;font-size:.95rem}
.field span{display:block;color: var(--muted);font-size:.86rem;margin-top:2px}
.crystal-card .btn{width:100%}

/* Sections */
section{position:relative; z-index:2; padding: 84px 0}
.title{
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 2.25rem;
  letter-spacing:-.7px;
  text-align:center;
  margin-bottom: 12px;
}
.subtitle{
  text-align:center;
  color: var(--muted);
  max-width: 860px;
  margin: 0 auto 42px;
  font-size: 1.02rem;
}

/* Mineral advantages grid */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 26px;
  transition: transform .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(125,211,252,.26);
}
.card .icon{
  width:44px;height:44px;border-radius:14px;
  background: linear-gradient(135deg, rgba(125,211,252,.75), rgba(20,184,166,.75));
  color:#00120e;
  display:flex;align-items:center;justify-content:center;
  margin-bottom: 14px;
  border:1px solid rgba(255,255,255,.08);
}
.card h3{
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  margin-bottom: 10px;
  font-size: 1.12rem;
}
.card p{color: var(--muted); font-size:.95rem}

/* Long text section */
.long{
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.long-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.panel{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 26px;
}
.panel h3{
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 1.22rem;
  margin-bottom: 12px;
}
.panel p{color: var(--muted); margin-bottom: 12px}
.panel p strong{color:#fff}
.callout{
  margin-top: 14px;
  border-left: 3px solid rgba(163,230,53,.75);
  background: rgba(0,0,0,.18);
  padding: 14px 16px;
  border-radius: 14px;
  color: rgba(248,250,252,.92);
  font-size: .95rem;
}

/* How it works */
.steps{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.step{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 22px;
}
.num{
  width:40px;height:40px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, rgba(125,211,252,.88), rgba(34,197,94,.75));
  color:#00120e;
  font-weight: 900;
  margin-bottom: 12px;
}
.step h4{font-family: Montserrat, sans-serif; font-weight: 900; margin-bottom: 6px}
.step p{color: var(--muted); font-size:.93rem}

/* FAQ */
.faq{background: rgba(0,0,0,.28); border-top:1px solid rgba(255,255,255,.10)}
.accordion{max-width: 980px; margin: 0 auto; display:grid; gap:12px}
.acc{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.acc button{
  width:100%;
  background: transparent;
  border:0;
  color:#fff;
  padding: 18px 18px;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;
  text-align:left;
  font-weight: 900;
  font-size: 1rem;
}
.acc button span{display:flex;align-items:center;gap:10px}
.acc button span i{color: var(--crystal)}
.acc .pane{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  border-top:1px solid rgba(255,255,255,.08);
}
.acc .inner{padding: 16px 18px 18px; color: var(--muted); font-size:.95rem}

/* CTA */
.cta{
  text-align:center;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 30% 40%, rgba(125,211,252,.12) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(34,197,94,.10) 0%, transparent 55%),
    rgba(0,0,0,.22);
}
.cta h2{
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 2.05rem;
  margin-bottom: 10px;
}
.cta p{color: var(--muted); max-width: 780px; margin: 0 auto 22px}
.cta .hero-cta{justify-content:center; margin:0}

/* Reviews */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.review-card {
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 24px;
  position: relative;
}
.review-card .stars {
  color: var(--emerald);
  margin-bottom: 12px;
  font-size: 0.9rem;
}
.review-card p {
  font-size: 0.95rem;
  font-style: italic;
  margin-bottom: 16px;
  color: var(--muted);
}
.review-card .author {
  font-weight: 700;
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-card .author i {
  color: var(--crystal);
  opacity: 0.7;
}

/* Service Areas */
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}
.area-tag {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.85rem;
  color: var(--muted);
  transition: all .2s;
}
.area-tag:hover {
  border-color: var(--emerald);
  color: #fff;
  background: rgba(20,184,166,.1);
}

/* Footer */
footer{
  background: rgba(0,0,0,.75);
  border-top:1px solid rgba(255,255,255,.10);
  padding: 62px 0 30px;
  position:relative;
  z-index:2;
}
.fgrid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 30px;
}
.fbrand p{color: var(--muted); font-size:.92rem; margin-top:12px; max-width: 380px}
.fcol h4{font-family: Montserrat, sans-serif; font-weight: 900; margin-bottom: 14px}
.fcol a{color: var(--muted); font-size:.92rem; display:inline-block; padding:6px 0}
.fcol a:hover{color: var(--crystal); transform: translateX(3px)}
.fcontact a i{color: var(--lime); margin-right:8px}
.fbottom{
  padding-top: 22px;
  border-top:1px solid rgba(255,255,255,.10);
  text-align:center;
  color: rgba(248,250,252,.45);
  font-size: .82rem;
}

/* Responsive */
@media (max-width: 992px){
  nav.desktop, .callbox{display:none}
  .hamburger{display:block}
  .hero-grid{grid-template-columns: 1fr; gap: 18px}
  h1{font-size: 2.55rem}
  .fgrid{grid-template-columns: 1fr 1fr}
  .long-wrap{grid-template-columns: 1fr}
}
@media (max-width: 768px){
  .ribbon{display:none}
  .actions .btn-ore{display:none}
  .mobilebar{display:block}
  body{padding-bottom: 70px}
  section{padding: 72px 0}
  .fgrid{grid-template-columns: 1fr}
}