:root{
  --bg: #eef3f8;
  --bg-2:#f8fafc;
  --surface: rgba(255,255,255,.76);
  --surface-strong: rgba(255,255,255,.88);
  --text:#142033;
  --muted: rgba(20,32,51,.72);
  --border: rgba(20,32,51,.10);
  --shadow: 0 20px 55px rgba(18,35,58,.12);
  --shadow-soft: 0 12px 32px rgba(18,35,58,.08);

  --accent:#2f80ed;
  --accent-2:#d7a12e;
  --ok:#1f9d6a;
  --danger:#d92d20;

  --radius: 22px;
  --max: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background-color: var(--bg);
  background-image: url("bg-engine.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  line-height:1.55;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg, rgba(249,251,254,.78), rgba(242,246,251,.74)),
    linear-gradient(120deg, rgba(255,255,255,.22), rgba(17,24,39,.08));
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(1000px 560px at 15% 12%, rgba(47,128,237,.14), transparent 60%),
    radial-gradient(800px 480px at 88% 14%, rgba(215,161,46,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  z-index:-1;
}

main, header, footer{ position:relative; z-index:1; }
a{ color:inherit; }
.container{ max-width:var(--max); margin:0 auto; padding:0 22px; }

.skip-link{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:18px; top:14px; width:auto; height:auto; padding:10px 12px;
  background:var(--surface-strong); border:1px solid var(--border); border-radius:12px;
  box-shadow: var(--shadow);
  z-index:9999;
}

header{
  position:sticky; top:0; z-index:60;
  backdrop-filter: saturate(135%) blur(18px);
  background: rgba(255,255,255,.58);
  border-bottom: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 8px 30px rgba(18,35,58,.06);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:210px; }
.logo {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 12px 24px rgba(18,35,58,.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand strong{ font-size:15px; letter-spacing:.2px; }
.brand span{ display:block; font-size:12px; color:var(--muted); margin-top:-2px; }

nav{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
nav a{
  text-decoration:none; padding:8px 10px; border-radius:12px; color:var(--muted);
}
nav a:hover, nav a:focus-visible{
  color:var(--text); background: rgba(255,255,255,.42); outline:none;
}

.actions{ display:flex; gap:10px; align-items:center; }
.pill{
  display:flex; gap:8px; align-items:center;
  padding:10px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.66); color:var(--muted); text-decoration:none; white-space:nowrap;
  box-shadow: var(--shadow-soft);
}
.pill b{ color:var(--text); font-weight:700; }

.btn{
  border:1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.76);
  color:var(--text);
  padding:11px 15px;
  border-radius:15px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700;
  transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  user-select:none;
  box-shadow: var(--shadow-soft);
}
.btn:hover{ background: rgba(255,255,255,.92); box-shadow: 0 16px 34px rgba(18,35,58,.10); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  border-color: rgba(47,128,237,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,243,255,.92));
}
.btn.primary:hover{ border-color: rgba(47,128,237,.38); }
.btn.secondary{
  border-color: rgba(215,161,46,.22);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,247,228,.92));
}
.btn.ghost{ background: rgba(255,255,255,.28); }

.menu-btn{ display:none; }
.menu-btn .bars{ width:18px; height:2px; background:var(--text); position:relative; border-radius:2px; }
.menu-btn .bars::before,.menu-btn .bars::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text); border-radius:2px;
}
.menu-btn .bars::before{ top:-6px; }
.menu-btn .bars::after{ top:6px; }

.panel{
  border: 1px solid rgba(255,255,255,.68);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.56));
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(14px);
}
.card{
  border: 1px solid rgba(255,255,255,.72);
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.70));
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

.hero{ padding:58px 0 28px; }
.hero-grid{ display:grid; grid-template-columns: minmax(0, 1.42fr) minmax(320px, .78fr); gap:22px; align-items:stretch; }
.hero-main{
  padding:38px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.kicker{
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px;
  border:1px solid rgba(47,128,237,.16); background: rgba(255,255,255,.54); color: rgba(20,32,51,.86); font-size:12px;
  width:max-content;
}
.kicker i{
  width:8px; height:8px; border-radius:999px; background: var(--ok);
  box-shadow: 0 0 0 4px rgba(31,157,106,.10); display:inline-block;
}
h1{
  margin:18px 0 14px;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 800;
  max-width: 100%;
  text-wrap: balance;
  text-wrap: pretty;
}
.lead{
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
  margin:0 0 22px;
  max-width: 60ch;
}
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 10px; }
.inline-note{
  margin-top:12px; border:1px dashed rgba(20,32,51,.14); background: rgba(255,255,255,.58);
  border-radius: 18px; padding: 12px 14px; color: var(--muted); font-size: 13px;
}
.trust-row{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-top:24px;
}
.trust-item{
  padding:16px 16px 14px; border-radius:20px; background: rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.7); box-shadow: var(--shadow-soft);
}
.trust-item strong{ display:block; font-size:14px; line-height:1.3; margin-bottom:5px; }
.trust-item span{ display:block; color:var(--muted); font-size:13px; line-height:1.55; }
.hero-meta{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; padding-top:18px; margin-top:18px;
  border-top: 1px solid rgba(20,32,51,.08); color: var(--muted); font-size: 13px;
}
.hero-meta > div{
  padding:12px 14px;
  border-radius:18px;
  background: rgba(255,255,255,.36);
  border:1px solid rgba(255,255,255,.6);
}
.hero-meta b{ color: var(--text); display:block; margin-bottom:3px; }

.hero-aside{ padding:18px; display:flex; flex-direction:column; gap:12px; }
.aside-card{
  background: rgba(255,255,255,.58); border:1px solid rgba(255,255,255,.74);
  border-radius: var(--radius); padding:18px;
}
.aside-card h3{ margin:2px 0 10px; font-size:15px; }
.list{ margin:0; padding-left:18px; color: var(--muted); font-size:13px; line-height:1.6; }
.list li{ margin:6px 0; }
.badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.badge{
  border:1px solid rgba(20,32,51,.08); background: rgba(255,255,255,.48); border-radius:999px;
  padding:8px 11px; font-size:12px; color: var(--muted); white-space:nowrap;
}

section{ padding:26px 0; }
.section-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-title h2{ margin:0; font-size:22px; letter-spacing:-.2px; }
.section-title p{ margin:0; color: var(--muted); font-size:13px; }
.confidence-band{
  margin-bottom:14px; display:grid; grid-template-columns: repeat(2, 1fr); gap:12px;
}
.confidence-band > div{
  padding:15px 16px; border-radius:18px; border:1px solid rgba(255,255,255,.72);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58));
  box-shadow: var(--shadow-soft); color: var(--muted);
}
.confidence-band strong{ color: var(--text); }

.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.chiprow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.chip{
  font-size:12px; color: rgba(20,32,51,.82); padding:6px 10px; border-radius:999px;
  border:1px solid rgba(20,32,51,.08); background: rgba(255,255,255,.46);
}
.chip.accent{ border-color: rgba(47,128,237,.18); background: rgba(235,243,255,.85); }
.chip.warn{ border-color: rgba(215,161,46,.20); background: rgba(255,247,228,.90); }
.chip.ok{ border-color: rgba(31,157,106,.18); background: rgba(236,250,244,.90); }

.service{ display:grid; grid-template-columns: 1.05fr .95fr; gap:14px; align-items:stretch; }
.service .card h3{ margin:0 0 8px; font-size:17px; }
.service .card p{ margin:0; color: var(--muted); font-size:13px; }
.steps{ margin:10px 0 0; padding-left:18px; color: var(--muted); font-size:13px; }
.steps li{ margin:6px 0; }
.service-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

.cta-strip{
  border:1px solid rgba(255,255,255,.78);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(244,248,255,.82));
  border-radius: calc(var(--radius) + 8px);
  padding:16px;
  display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  box-shadow: var(--shadow-soft);
}
.cta-strip h3{ margin:0; font-size:16px; }
.cta-strip p{ margin:4px 0 0; color: var(--muted); font-size:13px; }

details{
  border:1px solid rgba(255,255,255,.76);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  border-radius: 18px; padding:12px 14px; box-shadow: var(--shadow-soft);
}
summary{ cursor:pointer; list-style:none; font-weight:800; outline:none; }
summary::-webkit-details-marker{ display:none; }
details p{ margin:8px 0 0; color: var(--muted); font-size:13px; }

footer{
  padding:28px 0 42px; margin-top:16px; border-top:1px solid rgba(255,255,255,.42); color: var(--muted);
  background: rgba(255,255,255,.26); backdrop-filter: blur(10px);
}
.footer-grid{ display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:14px; }
.footer-grid a{ color: var(--muted); text-decoration:none; }
.footer-grid a:hover{ color: var(--text); }

.fab{
  position:fixed; right:16px; bottom:16px; z-index:80; display:flex; gap:10px; align-items:center;
}
.fab .btn{ box-shadow: 0 14px 34px rgba(16,24,40,.10); }

@media (max-width: 980px){
  .hero-grid, .service, .grid-3, .grid-2, .footer-grid, .confidence-band{ grid-template-columns: 1fr; }
  .trust-row, .hero-meta{ grid-template-columns: 1fr; }
  nav.desktop{ display:none; }
  .menu-btn{ display:inline-flex; }
  .actions .pill{ display:none; }
  .hero-grid{ gap:16px; }
  .hero-main{ padding:30px; }
  .fab{ left:16px; right:16px; }
  .fab .btn{ flex:1; }
}

@media (max-width: 640px){
  body::before{
    background: linear-gradient(180deg, rgba(249,251,254,.88), rgba(242,246,251,.84));
  }
  .container{ padding:0 16px; }
  .hero{ padding-top:34px; }
  .hero-main{ padding:22px; }
  h1{ font-size: clamp(32px, 8.2vw, 48px); line-height:1.02; }
  .lead{ font-size:15px; line-height:1.58; }
  .btn{ width:100%; }
  .hero-cta .btn{ width:100%; }
  .card, .aside-card{ padding:16px; }
}

:focus-visible{
  outline: 3px solid rgba(47,128,237,.35); outline-offset: 2px; border-radius: 14px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}