/* ====== Design tokens ====== */
:root{
  --bg: #0b0d10;
  --surface: #111418;
  --muted: #98a2b3;
  --text: #e6e8eb;
  --brand: #46b1ff;
  --accent: #22d3ee;
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 8px 30px rgba(0,0,0,0.25);
  --shadow-2: 0 10px 40px rgba(0,0,0,0.35);
}

/* ====== Reset & base ====== */
*{ box-sizing: border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration: none }
.container{ width:min(1100px, 92%); margin-inline:auto }
.visually-hidden{ position:absolute; left:-9999px }
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.6rem 1rem; background:#000; outline:2px solid var(--brand); z-index:9999 }

/* ====== Header ====== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(17,20,24,0.75);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .7rem 0;
}
.logo{ display:flex; align-items:center; gap:.6rem; font-weight:700 }
.nav-toggle{
  display:none; border:1px solid #2a2f36; background:transparent; color:var(--text);
  padding:.55rem .8rem; border-radius:var(--radius-sm)
}
.menu{
  display:flex; gap:1.2rem; list-style:none; margin:0; padding:0
}
.menu a{ opacity:.9 }
.menu a:hover, .menu a:focus{ opacity:1; color:var(--brand) }

.cta-inline{ display:flex; gap:.6rem }

/* ====== Buttons ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1.1rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  color:#061014; font-weight:700; border:0; cursor:pointer; box-shadow: var(--shadow-1);
}
.btn--ghost{
  background:transparent; color:var(--text); border:1px solid #2a2f36; box-shadow:none;
}
.btn--block{ display:block; width:100% }

/* ====== Hero ====== */
.hero{
  position:relative; min-height: 72vh; display:grid; align-items:center;
  isolation:isolate;
}
.hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55) saturate(1.05) }
.hero__content{ position:relative; z-index:1; padding: 6rem 0 }
.hero h1{ font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.1; margin:0 0 .8rem }
.hero .lead{ font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); margin:0 0 1.2rem }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap }
.accent{ background: linear-gradient(90deg, var(--brand), var(--accent)); -webkit-background-clip:text; color:transparent }
.trust-badges{ display:flex; gap:1rem; list-style:none; padding:0; margin:1rem 0 0; color:#c6cbd3; flex-wrap:wrap }
.trust-badges li{ display:flex; align-items:center; gap:.4rem }
.trust-badges li::before{ content:"✓"; color:var(--ok); font-weight:800 }

/* ====== Sections ====== */
.section{ padding: 4.5rem 0 }
.section--alt{ background: linear-gradient(180deg, #0d1115, #0c0f13) }
.section__header h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin:0 0 .3rem }
.section__header p{ margin:0; color: var(--muted) }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.3rem }
.card{
  background: var(--surface); border:1px solid #1b2027; border-radius: var(--radius);
  padding:1.1rem; box-shadow: var(--shadow-1);
}
.card h3{ margin-top:0 }
.list{ color:#c7cdd6; padding-left:1.1rem }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem }
.plan{
  background: var(--surface); border:1px solid #1b2027; border-radius: var(--radius); padding:1.2rem;
  display:flex; flex-direction:column; gap:.7rem; box-shadow: var(--shadow-1);
}
.plan--featured{ outline:2px solid transparent; background: linear-gradient(180deg,#121720,#10151b); border-color:#273041; box-shadow: var(--shadow-2) }
.plan .price{ font-size:2rem; margin:.2rem 0 .6rem }
.fine-print{ color: var(--muted); font-size:.9rem; margin-top:1rem }

.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:1.2rem
}
.gallery__item{ background:#0e1217; border-radius:var(--radius-sm); overflow:hidden; border:1px solid #1b2027 }
.gallery__item figcaption{ padding:.6rem .7rem; color:#b8bfca; font-size:.95rem; border-top:1px solid #1b2027 }

.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.reviews blockquote{
  margin:0; padding:1rem 1.1rem; background: var(--surface); border:1px solid #20252d; border-radius:var(--radius);
  color:#d8dbe1; font-size:1.05rem; box-shadow: var(--shadow-1);
}
.reviews cite{ display:block; margin-top:.6rem; color:#9aa5b3; font-style:normal }

.contact-wrap{ display:grid; grid-template-columns: 1.2fr .9fr; gap:1.2rem }
.contact{
  background: var(--surface); border:1px solid #1b2027; border-radius: var(--radius);
  padding:1rem; box-shadow: var(--shadow-1);
}
.field{ display:flex; flex-direction:column; gap:.35rem; margin:.5rem 0 }
.field input, .field textarea{
  border:1px solid #2a2f36; background:#0e1217; color:var(--text);
  padding:.7rem .8rem; border-radius:10px; outline:0;
}
.field input:focus, .field textarea:focus{ border-color:#334155; box-shadow: 0 0 0 3px rgba(70,177,255,.25) }
.actions{ display:flex; gap:.6rem; margin-top:.8rem }

.sidebar{ display:flex; flex-direction:column; gap:1rem }
.info{ background: var(--surface); border:1px solid #1b2027; border-radius: var(--radius); padding:1rem }
.info ul{ list-style:none; padding:0; margin:0 }
.map-embed iframe{ width:100%; min-height: 240px; border:0; border-radius: var(--radius-sm) }

/* ====== Footer ====== */
.site-footer{ border-top: 1px solid #1b2027; background:#0a0c0f; padding:1rem 0; margin-top:2rem }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.site-footer nav{ display:flex; gap:1rem }
.site-footer a{ color:#b9c2cf }
.site-footer a:hover{ color:var(--brand) }

/* ====== Responsive ====== */
@media (max-width: 980px){
  .cards, .grid-3, .gallery, .reviews{ grid-template-columns:1fr 1fr }
  .contact-wrap{ grid-template-columns:1fr }
}
@media (max-width: 720px){
  .menu{ display:none }
  .nav-toggle{ display:inline-flex }
  .cards, .grid-3, .gallery, .reviews{ grid-template-columns:1fr }
  .hero__content{ padding: 4rem 0 }
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.social-links a {
  color: #fff; /* match footer text */
  transition: color 0.3s;
}

.social-links a:hover {
  color: #e1306c; /* pink for IG hover, or pick a brand color */
}

/* Small utilities */
[data-elevate].is-scrolled{ box-shadow: 0 6px 18px rgba(0,0,0,.35) }