:root{
  --bg:#0b1020;
  --panel:#0f1730;
  --soft:#121c3a;
  --text:#e9eeff;
  --muted:rgba(233,238,255,.72);
  --line:rgba(233,238,255,.12);
  --accent:#5eead4;
  --accent2:#60a5fa;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(96,165,250,.18), transparent 55%),
              radial-gradient(900px 500px at 80% 15%, rgba(94,234,212,.12), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.5;
}

a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92%); margin:0 auto}

.muted{color:var(--muted)}
.tiny{font-size:.86rem}
.small{font-size:.92rem}
.sep{opacity:.6; margin:0 .5rem}

.topbar{
  border-bottom:1px solid var(--line);
  background: rgba(15,23,48,.7);
  backdrop-filter: blur(10px);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem 0;
  gap:1rem;
}
.badge{
  display:inline-flex; align-items:center;
  border:1px solid var(--line);
  padding:.18rem .55rem;
  border-radius:999px;
  font-size:.82rem;
  background: rgba(18,28,58,.6);
}
.toplink{opacity:.9}
.toplink:hover{opacity:1; text-decoration:underline}

.header{
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--line);
  background: rgba(11,16,32,.65);
  backdrop-filter: blur(10px);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}
.logo{display:flex; align-items:center; gap:.8rem}
.logo__mark{
  width:86px;height:86px;border-radius:22px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(94,234,212,.18), rgba(96,165,250,.14));
  border:1px solid var(--line);
  overflow:hidden;
}
.logo__mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:6px;
}
.logo__text strong{letter-spacing:.2px}

.nav{display:flex; align-items:center; gap:1rem}
.nav a{opacity:.88}
.nav a:hover{opacity:1}
.nav__toggle{
  display:none;
  border:1px solid var(--line);
  background: rgba(18,28,58,.6);
  color:var(--text);
  padding:.45rem .65rem;
  border-radius:12px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.05rem;
  border-radius:14px;
  border:1px solid rgba(94,234,212,.35);
  background: linear-gradient(135deg, rgba(94,234,212,.22), rgba(96,165,250,.16));
  box-shadow: var(--shadow);
  font-weight:700;
}
.btn:hover{transform: translateY(-1px)}
.btn--ghost{
  border:1px solid var(--line);
  background: rgba(18,28,58,.55);
  box-shadow:none;
}
.btn--small{padding:.55rem .8rem; border-radius:12px; box-shadow:none}
.btn--block{width:100%}

.hero{padding: 2.1rem 0 1.2rem}
.hero__grid{
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap:1.4rem;
  align-items:start;
}
.kicker{
  color:var(--muted);
  margin:0 0 .6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.82rem;
}
h1{font-size: clamp(2rem, 3.6vw, 3.15rem); line-height:1.08; margin:.2rem 0 .8rem}
.accent{background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:1.06rem; color:var(--muted); margin:0 0 1rem}

.hero__cta{display:flex; gap:.8rem; flex-wrap:wrap; margin: 1rem 0 1.2rem}
.hero__facts{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.75rem;
}
.fact{
  border:1px solid var(--line);
  background: rgba(18,28,58,.55);
  border-radius:22px;
  padding:.75rem;
}
.fact strong{display:block; font-size:1.02rem}

.hero__card .card{
  border:1px solid var(--line);
  background: rgba(15,23,48,.75);
  border-radius:22px;
  padding:1.1rem;
  box-shadow: var(--shadow);
}
.card h2{margin:.1rem 0 .2rem; font-size:1.2rem}
.pillgrid{
  display:flex; flex-wrap:wrap;
  gap:.5rem;
  margin:.8rem 0 .8rem;
}
.pill{
  border:1px solid var(--line);
  background: rgba(18,28,58,.55);
  color:var(--text);
  border-radius:999px;
  padding:.45rem .7rem;
  cursor:pointer;
}
.pill--active{
  border-color: rgba(94,234,212,.55);
  background: rgba(94,234,212,.12);
}
.listbox{
  border:1px solid var(--line);
  background: rgba(18,28,58,.4);
  border-radius:18px;
  padding:.7rem .85rem;
  margin: .6rem 0 1rem;
}
.listbox ul{margin:.3rem 0; padding-left:1.2rem}
.listbox li{margin:.28rem 0; color:var(--muted)}

.section{padding: 2.3rem 0}
.section--alt{background: rgba(15,23,48,.35); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section__head{margin-bottom:1.2rem}
.section__head h2{margin:.1rem 0 .35rem; font-size:1.8rem}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
}
.tile{
  border:1px solid var(--line);
  background: rgba(18,28,58,.45);
  border-radius:22px;
  padding:1.05rem;
  transition: transform .12s ease;
}
.tile:hover{transform: translateY(-2px)}
.tile h3{margin:.1rem 0 .35rem}
.tile__more{display:inline-block; margin-top:.75rem; color: rgba(94,234,212,.9); font-weight:700}

.steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
}
.step{
  border:1px solid var(--line);
  background: rgba(18,28,58,.45);
  border-radius:22px;
  padding:1.05rem;
}
.step__num{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background: rgba(94,234,212,.10);
  margin-bottom:.7rem;
  font-weight:800;
}

.pricing{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
}
.pricecard{
  position:relative;
  border:1px solid var(--line);
  background: rgba(18,28,58,.45);
  border-radius:22px;
  padding:1.15rem;
}
.pricecard--featured{
  border-color: rgba(94,234,212,.38);
  background: linear-gradient(180deg, rgba(94,234,212,.10), rgba(18,28,58,.45));
}
.ribbon{
  position:absolute; top:14px; right:14px;
  border:1px solid var(--line);
  background: rgba(94,234,212,.12);
  padding:.25rem .55rem;
  border-radius:999px;
  font-size:.82rem;
}
.price{font-size:2.0rem; margin:.3rem 0 .75rem; font-weight:800}
.price span{font-size:.95rem; opacity:.8; font-weight:700}
.pricecard ul{margin:.4rem 0 1rem; padding-left:1.2rem}
.pricecard li{margin:.25rem 0; color:var(--muted)}

.faq{
  border:1px solid var(--line);
  background: rgba(18,28,58,.45);
  border-radius:18px;
  padding:.85rem 1rem;
  margin:.8rem 0;
}
.faq summary{cursor:pointer; font-weight:700}
.faq p{color:var(--muted); margin:.6rem 0 0}

.contactgrid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:1rem;
}
.contactbox{
  border:1px solid var(--line);
  background: rgba(18,28,58,.45);
  border-radius:22px;
  padding:1.15rem;
}
.notice{
  border:1px solid var(--line);
  background: rgba(15,23,48,.55);
  border-radius:18px;
  padding:.75rem .85rem;
  margin-top:.9rem;
}

.link{color: rgba(94,234,212,.95); font-weight:700}
.link:hover{text-decoration:underline}

.form{
  border:1px solid var(--line);
  background: rgba(15,23,48,.75);
  border-radius:22px;
  padding:1.15rem;
}
label{display:block; margin:.75rem 0 .35rem; font-weight:700}
input, select, textarea{
  width:100%;
  padding:.78rem .85rem;
  border-radius:22px;
  border:1px solid var(--line);
  background: rgba(18,28,58,.45);
  color:var(--text);
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(94,234,212,.45);
}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:.8rem}
.hp{display:none}

.mapbox{
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background: rgba(18,28,58,.45);
  box-shadow: var(--shadow);
}
.mapbox iframe{
  width:100%;
  height:360px;
  border:0;
  display:block;
}
.mapnote{
  padding:.85rem 1rem;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.92rem;
}

.footer{
  border-top:1px solid var(--line);
  padding: 1.4rem 0 2.2rem;
  background: rgba(11,16,32,.7);
}
.footer__inner{
  display:flex; gap:1rem; justify-content:space-between; align-items:center;
  flex-wrap:wrap;
}
.footer__links{display:flex; gap:1rem; flex-wrap:wrap}
.footer__links a{opacity:.85}
.footer__links a:hover{opacity:1; text-decoration:underline}

/* Floating action buttons */
.fab{
  position:fixed;
  right:16px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:50;
}
.fab a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(15,23,48,.92);
  box-shadow: var(--shadow);
  font-size:22px;
}
.fab a:hover{transform: translateY(-1px)}

/* Mobile call bar */
.callbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11,16,32,.9);
  border-top:1px solid var(--line);
  backdrop-filter: blur(10px);
  display:none;
}
.callbar__inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  width:min(1120px, 92%);
  margin:0 auto;
}
.callbar .btn{box-shadow:none}

/* Responsive */
@media (max-width: 920px){
  .logo__mark{width:72px;height:72px}

  .hero__grid{grid-template-columns: 1fr}
  .hero__facts{grid-template-columns: 1fr}
  .grid, .steps, .pricing{grid-template-columns: 1fr}
  .contactgrid{grid-template-columns: 1fr}
  .row{grid-template-columns: 1fr}
  .nav__toggle{display:inline-flex}
  .nav{
    display:none;
    position:absolute;
    right:4%;
    top:76px;
    flex-direction:column;
    gap:.75rem;
    padding: .9rem;
    border:1px solid var(--line);
    border-radius:18px;
    background: rgba(15,23,48,.92);
    box-shadow: var(--shadow);
    min-width: 220px;
  }
  .nav.nav--open{display:flex}
  .callbar{display:block}
  .fab{bottom:82px;} /* avoid overlap with callbar */
}