*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --bg:#f7fafc;
  --card:#ffffff;
  --text:#16324f;
  --muted:#60758d;
  --line:#d9e5f1;
  --primary:#1f6feb;
  --primary-dark:#0f4fb5;
  --accent:#18a55b;
  --soft:#eff7ff;
  --shadow:0 16px 38px rgba(16,51,85,.10);
  --radius:22px;
}

html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
.container{width:min(1120px, calc(100% - 2rem)); margin:0 auto;}

.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(217,229,241,.85);
}
.nav{
  min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:.9rem;}
.brand img{width:54px; height:54px;}
.brand span{display:flex; flex-direction:column; line-height:1.15;}
.brand strong{font-size:1.08rem;}
.brand small{color:var(--muted);}
.menu{display:flex; gap:1.4rem; color:var(--muted); font-weight:600;}
.menu a:hover{color:var(--primary);}

.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.35rem; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; font-weight:700; box-shadow:var(--shadow);
}
.button--light,
.button--ghost{
  background:#fff; color:var(--primary); border:1px solid var(--line); box-shadow:none;
}

.hero{
  padding:4.8rem 0 3rem;
  background:
    radial-gradient(circle at 80% 10%, rgba(31,111,235,.15), transparent 25%),
    linear-gradient(180deg,#fff,#f5faff 65%,#f7fafc);
}
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center;
}
.eyebrow{
  display:inline-block; margin-bottom:1rem; padding:.45rem .8rem; border-radius:999px;
  background:#e9f3ff; color:var(--primary); border:1px solid #cfe0ff; font-size:.9rem; font-weight:700;
}
.hero__content h1{
  margin:0 0 1rem; font-size:clamp(2rem,4vw,3.7rem); line-height:1.06; letter-spacing:-.03em;
}
.hero__content p{margin:0 0 1.5rem; color:var(--muted); font-size:1.08rem;}
.hero__actions{display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:1.2rem;}
.hero__checks{
  list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.9rem 1.3rem; font-weight:600;
}
.hero__checks li::before{content:"✓ "; color:var(--accent); font-weight:800;}
.hero__visual{
  background:#fff; border:1px solid var(--line); border-radius:28px; padding:1rem; box-shadow:var(--shadow);
}

.info-bar{padding:0 0 1rem;}
.info-bar__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;}
.info-item{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.2rem; box-shadow:var(--shadow); text-align:center;
}
.info-item strong{display:block; font-size:1.15rem; margin-bottom:.2rem;}
.info-item span{color:var(--muted);}

.section{padding:4.5rem 0;}
.section--soft{background:#fbfdff;}
.section__heading{text-align:center; margin-bottom:2rem;}
.section__heading--left{text-align:left;}
.section__heading h2{margin:.2rem 0 .45rem; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.1;}
.section__heading p{margin:0; color:var(--muted);}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow);
}
.card img{width:66px; height:66px; margin-bottom:1rem;}
.card h3{margin:.1rem 0 .45rem; font-size:1.16rem;}
.card p{margin:0; color:var(--muted);}

.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;}
.benefit{
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:1.4rem; box-shadow:var(--shadow);
}
.benefit h3{margin-top:0; margin-bottom:.45rem;}
.benefit p{margin:0; color:var(--muted);}

.process{
  display:grid; grid-template-columns:1fr 400px; gap:1.5rem; align-items:start;
}
.process__text ol{
  margin:0; padding-left:1.2rem;
}
.process__text li{margin-bottom:.9rem;}
.process__box{
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  border:1px solid var(--line); border-radius:24px; padding:1.5rem; box-shadow:var(--shadow);
}
.process__box h3{margin-top:0;}
.process__box p{color:var(--muted);}
.note{
  background:#eef6ff; border:1px solid #d7e9ff; border-radius:16px; padding:1rem; color:var(--text) !important;
}

.faq-layout{display:grid; grid-template-columns:1fr 420px; gap:1.5rem; align-items:start;}
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  padding:1rem 1.1rem; margin-bottom:.9rem;
}
.faq summary{
  cursor:pointer; list-style:none; font-weight:700; display:flex; align-items:center; justify-content:space-between;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--primary); font-size:1.4rem; line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq p{margin:.7rem 0 .1rem; color:var(--muted);}

.contact-box{
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  border:1px solid var(--line); border-radius:24px; padding:1.5rem; box-shadow:var(--shadow);
}
.contact-box h2{margin:.2rem 0 .35rem;}
.contact-box p{margin:0 0 1rem; color:var(--muted);}
.contact-form label{display:block; margin-bottom:.95rem;}
.contact-form span{display:block; margin-bottom:.4rem; font-weight:600;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:.85rem;}
input, textarea{
  width:100%; border:1px solid #cfe0f3; border-radius:14px; padding:.9rem 1rem; font:inherit; color:var(--text); background:#fff;
}
input:focus, textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(31,111,235,.10);
}
.contact-meta{border-top:1px solid var(--line); margin-top:1rem; padding-top:.8rem;}
.contact-meta p{margin:.25rem 0; color:var(--text);}

.site-footer{background:#0f2741; color:#d8e6f5; padding:1.2rem 0;}
.footer{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.footer nav{display:flex; gap:1rem; flex-wrap:wrap;}
.footer a:hover{color:#fff;}

@media (max-width: 980px){
  .hero__grid, .process, .faq-layout{grid-template-columns:1fr;}
  .cards, .benefits, .info-bar__grid{grid-template-columns:1fr;}
}
@media (max-width: 760px){
  .nav{flex-wrap:wrap; justify-content:center; padding:.8rem 0;}
  .menu{order:3; width:100%; justify-content:center; flex-wrap:wrap;}
  .form-grid{grid-template-columns:1fr;}
  .hero{padding-top:2.8rem;}
  .footer{flex-direction:column; text-align:center;}
}