/* ======= Design tokens ======= */
:root{
  --bg:#0b1220; 
  --bg-2:#0f1a2b; 
  --text:#e6ecff; 
  --muted:#a9b4d0;
  --primary:#4c7dff; 
  --accent:#7a5cff; 
  --success:#28d69e; 
  --danger:#ff5c80;
  --ring:#2a4bf2;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px; 
  --radius-lg: 22px;
  --divider: rgba(255,255,255,.08);
}

/* ======= Base ======= */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  overflow-x:hidden;
  scroll-behavior:smooth;
  color-scheme: dark;
}
/* soft glow background */
body::before{
  content:""; position:fixed; inset:-40% -20% auto -20%; height:80%;
  background: radial-gradient(60% 60% at 70% 10%, rgba(76,125,255,.18), rgba(122,92,255,.10) 45%, transparent 70%);
  pointer-events:none; z-index:-1;
}

a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ width:min(1200px,92vw); margin-inline:auto; }

/* ======= Header / Nav ======= */
header{
  position:sticky; top:0; z-index:80;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(11,18,32,.92) 30%, rgba(11,18,32,.6) 100%);
  border-bottom:1px solid var(--divider);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ width:36px; height:36px; border-radius:8px; object-fit:contain; display:block; }
.brand-title{ font-size:18px; letter-spacing:.2px; }

.nav-links{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.nav a.btn{
  padding:10px 14px; border-radius:12px; 
  background:rgba(255,255,255,.06); color:var(--text);
  border:1px solid rgba(255,255,255,.08); font-weight:600;
}
.nav a.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;
  box-shadow:0 8px 22px rgba(76,125,255,.35);
}

/* Responsive nav */
@media (max-width: 980px){
  .nav { gap:12px; }
  .nav-links .btn{ padding:10px 12px; font-size:14px; border-radius:12px; }
}
@media (max-width: 720px){
  .nav{ flex-wrap:wrap; align-items:flex-start; gap:8px 10px; padding:10px 0; }
  .nav-links{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:8px 10px; }
  .nav-links .btn{ padding:8px 10px; font-size:13px; border-radius:10px; }
  section{ scroll-margin-top: 120px; }
}
@media (max-width: 420px){
  .nav-links{ gap:6px 8px; }
  .nav-links .btn{ padding:7px 9px; font-size:12px; }
}

/* ======= Sections / Hero ======= */
section{ padding:56px 0; scroll-margin-top:84px; background:var(--bg); }
.hero{ padding:64px 0 24px; }
.hero-wrap{ display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:36px; }
@media (max-width:980px){ .hero-wrap{ grid-template-columns:1fr; } }

.hero h1{ font-size:42px; line-height:1.1; margin:14px 0 12px; }
@media (max-width:520px){ .hero h1{ font-size:32px; } }
.hero p{ color:var(--muted); font-size:18px; margin:0 0 22px; }

.cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer;
  padding:14px 16px; border-radius:14px; font-weight:700; letter-spacing:.2px;
}
.btn-primary{ background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; box-shadow:0 12px 26px rgba(76,125,255,.35); }
.btn-ghost{ background:rgba(255,255,255,.06); color:var(--text); border:1px solid rgba(255,255,255,.08); }
.btn:focus-visible{ outline:4px solid rgba(76,125,255,.28); outline-offset:2px; }

/* ======= Insurance teaser (hero aside) ======= */
.ins-hero{
  background:linear-gradient(180deg, rgba(15,26,43,.95), rgba(15,26,43,.85));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:0 18px 36px rgba(0,0,0,.45);
  position:relative;
}
.ins-hero .ribbon{
  position:absolute; right:-8px; top:-10px;
  background:linear-gradient(135deg,var(--success),#45f1bf); color:#063424;
  padding:6px 10px; border-radius:10px; font-weight:800;
  border:1px solid rgba(255,255,255,.2);
}
.ins-hero .title{ display:flex; align-items:center; gap:12px; font-size:18px; font-weight:800; color:#d8ffe6; }
.ins-hero .title svg{ flex:0 0 auto; }
.ins-hero p{ margin:8px 0 0; color:#b3ffe0; }

/* ======= Cards (Why/Trust) ======= */
.cards{ display:grid; gap:18px; }
.card{
  background:linear-gradient(180deg, rgba(15,26,43,.9), rgba(15,26,43,.76));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.card h3{ margin:6px 0 8px; }
.card p{ margin:0; color:var(--muted); }

/* centered, responsive grid */
.cards.trust-cards{
  --col-min: 260px; --col-max: 360px;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), var(--col-max)));
  justify-content: center;
}
@media (max-width:640px){ .cards.trust-cards{ grid-template-columns: minmax(0,1fr); } }

.whyus-details summary{
  cursor:pointer;
  font-weight:800;
  color:var(--text);
  padding:8px 0;
  list-style:none;
}
.whyus-details summary::-webkit-details-marker{display:none}

.whyus-details-body{
  margin-top:10px;
}

.whyus-banner{
  margin:0;
  padding:0;
  max-width:777px;                 /* исходная ширина картинки */
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;                 /* скругление для изображения */
}

.whyus-img{
  display:block;
  width:100%;                      /* заполняет контейнер */
  height:auto;                     /* сохраняет пропорции 777×96 */
  aspect-ratio:777/96;             /* резервирует место и исключает “дёргание” */
  object-fit:contain;              /* без обрезки, без растяжения */
}

.whyus-caption{
  margin:8px 10px 10px;
  font-size:13px;
  line-height:1.35;
  color:var(--muted);
}


/* ======= Steps ======= */
.how{ background:linear-gradient(180deg, rgba(12,19,34,.9), rgba(12,19,34,.8)), var(--bg); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:980px){ .steps{ grid-template-columns:1fr 1fr; } }
.step{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:16px;
}
.step .num{
  width:28px; height:28px; display:inline-grid; place-items:center; border-radius:8px;
  background:linear-gradient(135deg,var(--primary),var(--accent)); font-weight:800;
}

/* ======= Calculator ======= */
.calc{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }
@media (max-width:980px){ .calc{ grid-template-columns:1fr; } }
.calc .panel{
  background:linear-gradient(180deg, rgba(15,26,43,.88), rgba(15,26,43,.74));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px;
}
label{ font-size:13px; color:#c6d0f7; display:block; }

/* Inputs */
input, select, textarea{
  width:100%; margin-top:6px; padding:12px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--text); background:rgba(255,255,255,.04); outline:none;
  transition: box-shadow .2s, border-color .2s;
}
input:focus, select:focus, textarea:focus{ border-color:var(--ring); box-shadow:0 0 0 4px rgba(76,125,255,.16); }
/* Make all fields the same dark style */
input, textarea, select {
  width: 100%;
  margin-top: 6px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #e6ecff;
  outline: none;
  transition: box-shadow .2s, border-color .2s;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--ring, #2a4bf2);
  box-shadow: 0 0 0 4px rgba(76,125,255,.16);
}

/* Ensure selects are dark + consistent, even if a class was forcing white before */
select,
select.select-contrast {
  background: rgba(255,255,255,.04) !important;
  color: #e6ecff !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  /* remove native arrow and add custom chevron */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239fb0d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px; /* space for the chevron */
}

/* Optional: make disabled/placeholder-ish selects a bit dimmer */
select:invalid { color: #a9b4d0; }

/* You already hide number spinners elsewhere — keeping here for completeness */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ======= Form ======= */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.form .full{ grid-column:1/-1; }
.agree{ display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--muted); }
@media (max-width:980px){ .form{ grid-template-columns:1fr; } }

/* High-contrast selects for Country & Preferred */
#country, #preferred{
  background:#ffffff; color:#111111; 
  border:1px solid #e5e7eb;
}
#country:focus, #preferred:focus{
  outline:none; box-shadow:0 0 0 4px rgba(76,125,255,.16);
}

/* ======= Footer ======= */
footer{
  padding:36px 0 96px; color:#a7b3d6; background:var(--bg);
  border-top:1px solid var(--divider);
}
.contact-links{ font-size:14px; color:var(--text); }
.contact-links .badge{
  display:inline-flex; align-items:center; padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  font-weight:800; color:var(--text); text-decoration:none;
}
.contact-links .badge:hover{ background:rgba(255,255,255,.16); text-decoration:none; }

/* ======= Chat button (bigger + pulse) ======= */
.chat-toggle{
  position:fixed; right:18px; bottom:18px; z-index:100;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 18px; font-size:16px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff; border-radius:999px; box-shadow:0 18px 36px rgba(76,125,255,.5);
  border:none; font-weight:900; cursor:pointer;
}
.chat-toggle::after{
  content:""; position:absolute; inset:-8px; border-radius:999px;
  box-shadow:0 0 0 0 rgba(124,148,255,.55);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(124,148,255,.55); }
  70%{ box-shadow:0 0 0 18px rgba(124,148,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(124,148,255,0); }
}

/* ======= Modal ======= */
.modal{ position:fixed; inset:0; display:none; place-items:center; z-index:120; background:rgba(0,0,0,.5); }
.modal-card{
  width:min(680px, 92vw); 
  background:linear-gradient(180deg, rgba(15,26,43,.98), rgba(15,26,43,.94));
  border:1px solid rgba(255,255,255,.08); 
  border-radius:18px; padding:18px; 
  box-shadow:var(--shadow);
}
.close-x{ background:none; border:none; font-size:24px; color:var(--text); cursor:pointer; }