:root{
  --bg:#0b1220;
  --card:#111a2d;
  --text:#eaf0ff;
  --muted:#b8c4e6;
  --line:rgba(255,255,255,.12);
  --accent:#d7b25a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(215,178,90,.18), transparent 55%),
              radial-gradient(900px 500px at 80% 10%, rgba(120,160,255,.14), transparent 55%),
              var(--bg);
  line-height:1.55;
}

a{color:inherit}
img{max-width:100%;height:auto;display:block}

.container{width:min(1120px, 92vw); margin-inline:auto}
.skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.6rem .8rem; background:#000; border:1px solid var(--line); border-radius:.6rem}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,18,32,.7);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0}

.brand{display:flex; align-items:center; gap:.8rem}
.brand__dot{width:12px;height:12px;border-radius:999px;background:var(--accent); box-shadow:0 0 0 6px rgba(215,178,90,.18)}
.brand__text{display:flex; flex-direction:column; line-height:1.15}
.brand__text span{font-size:.85rem; color:var(--muted)}

.menu{display:flex; align-items:center; gap:1rem}
.menu a{opacity:.92; text-decoration:none; padding:.45rem .5rem; border-radius:.7rem}
.menu a:hover{background:rgba(255,255,255,.06)}

.burger{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--line);
  background:transparent;
  border-radius:12px;
}
.burger span{display:block; height:2px; width:18px; margin:5px auto; background:var(--text); border-radius:2px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1rem;
  border-radius:14px;
  border:1px solid rgba(215,178,90,.35);
  background: linear-gradient(180deg, rgba(215,178,90,.24), rgba(215,178,90,.08));
  text-decoration:none;
  font-weight:650;
}
.btn:hover{filter:brightness(1.06)}
.btn--ghost{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  font-weight:600;
}

.hero{padding:3.2rem 0 1.2rem}
.hero__grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:2rem; align-items:center}
.badge{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:.35rem .6rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:.9rem;
  background: rgba(255,255,255,.04);
}
h1{font-size:clamp(1.7rem, 2.8vw, 2.55rem); line-height:1.15; margin:.9rem 0}
.lead{color:var(--muted); font-size:1.05rem; max-width:60ch}
.cta{display:flex; gap:.8rem; flex-wrap:wrap; margin:1.2rem 0 1rem}

.trust{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.8rem}
.trust__item{
  padding:.65rem .8rem;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.04);
  min-width:160px;
}
.trust__kpi{display:block; font-weight:800}
.trust__label{color:var(--muted); font-size:.9rem}

.card{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
}
.card img{aspect-ratio: 3/4; object-fit:cover}
.card figcaption{padding:.7rem .9rem; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line)}

.section{padding:3rem 0}
.section--alt{background: rgba(255,255,255,.03); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section__head{margin-bottom:1.35rem}
.section__head h2{font-size:1.55rem; margin:0 0 .4rem}
.muted{color:var(--muted)}
.small{font-size:.9rem}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:1.1rem}
.panel{
  border:1px solid var(--line);
  border-radius:20px;
  background: rgba(255,255,255,.04);
  padding:1.1rem 1.1rem;
}
.panel h3{margin:.1rem 0 .55rem}
.check{padding-left:1.1rem; margin:.6rem 0 0}
.check li{margin:.3rem 0}
.tags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem}
.tags span{
  border:1px solid rgba(215,178,90,.25);
  background: rgba(215,178,90,.09);
  padding:.35rem .55rem;
  border-radius:999px;
  color:var(--text);
  font-size:.9rem;
}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.service{
  border:1px solid var(--line);
  border-radius:20px;
  background: rgba(255,255,255,.04);
  padding:1rem;
}
.service h3{margin:.15rem 0 .35rem; font-size:1.05rem}
.service p{margin:0; color:var(--muted)}

.bullets{padding-left:1.1rem; margin:.1rem 0 .7rem}
.steps{padding-left:1.2rem; margin:.1rem 0 0}
.steps li{margin:.35rem 0}

.faq details{
  border:1px solid var(--line);
  border-radius:16px;
  padding:.85rem .95rem;
  background: rgba(255,255,255,.04);
  margin:.7rem 0;
}
.faq summary{cursor:pointer; font-weight:700}
.faq p{color:var(--muted); margin:.55rem 0 0}

.form label{display:flex; flex-direction:column; gap:.35rem; margin:.7rem 0; color:var(--muted)}
input, select, textarea{
  padding:.7rem .8rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
input:focus, select:focus, textarea:focus{border-color: rgba(215,178,90,.55)}

.contact{list-style:none; padding:0; margin:.6rem 0 0}
.contact li{margin:.4rem 0; color:var(--muted)}
.contact a{color:var(--text); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25)}
.contact a:hover{border-bottom-color:rgba(215,178,90,.6)}

.footer{padding:2rem 0; border-top:1px solid var(--line); background: rgba(0,0,0,.18)}
.footer__grid{display:grid; grid-template-columns: 1.2fr .8fr 1fr; gap:1rem; align-items:center}
.footer__links{display:flex; gap:.9rem; flex-wrap:wrap}
.footer__links a{text-decoration:none; color:var(--muted)}
.footer__links a:hover{color:var(--text)}

@media (max-width: 920px){
  .hero__grid{grid-template-columns:1fr; gap:1.2rem}
  .cards{grid-template-columns: 1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .menu{
    position:fixed; inset:70px 1rem auto 1rem;
    border:1px solid var(--line);
    border-radius:18px;
    padding:.7rem;
    background: rgba(11,18,32,.92);
    backdrop-filter: blur(10px);
    display:none;
    flex-direction:column;
    align-items:stretch;
  }
  .menu a{padding:.75rem .8rem}
  .burger{display:block}
  .menu.open{display:flex}
}

@media (max-width: 560px){
  .cards{grid-template-columns: 1fr}
}