@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --svc-ink: #150e2b;
  --svc-ink-soft: #4b4460;
  --svc-violet: #6d28d9;
  --svc-violet-light: #8b5cf6;
  --svc-teal: #14b8a6;
  --svc-amber: #f59e0b;
  --svc-bg: #f7f6fb;
  --svc-card: #ffffff;
  --svc-border: #e7e3f5;
  --svc-shadow: 0 10px 30px rgba(30, 20, 70, 0.08);
  --svc-shadow-hover: 0 16px 40px rgba(30, 20, 70, 0.16);
  --svc-radius: 18px;
}

.svc-wrap { font-family: 'Inter', sans-serif; color: var(--svc-ink); background: var(--svc-bg); overflow: hidden; }
.svc-wrap * { box-sizing: border-box; }
.svc-wrap h1, .svc-wrap h2, .svc-wrap h3 { font-family: 'Poppins', sans-serif; margin: 0; }

.svc-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* HERO */
.svc-hero {
  background: radial-gradient(1200px 500px at 15% -10%, #a78bfa33, transparent),
              linear-gradient(120deg, #1e1240 0%, #3b1d6e 45%, #6d28d9 100%);
  color: #fff;
  padding: 90px 0 100px;
  position: relative;
}
.svc-hero .svc-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #e9e4ff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.svc-hero h1 {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  max-width: 720px;
}
.svc-hero h1 span { color: #a7f3d0; }
.svc-hero p.svc-sub {
  font-size: 18px;
  color: #d9d3f5;
  max-width: 620px;
  margin-top: 18px;
  line-height: 1.6;
}
.svc-hero .svc-cta-row { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

.svc-btn {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.svc-btn:hover { transform: translateY(-2px); }
.svc-btn-primary { background: #fff; color: var(--svc-violet); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.svc-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.svc-btn-solid { background: linear-gradient(120deg, var(--svc-violet), var(--svc-violet-light)); color: #fff; box-shadow: 0 10px 24px rgba(109,40,217,0.35); }

/* SECTIONS */
.svc-section { padding: 70px 0; }
.svc-section-tight { padding: 40px 0; }
.svc-kicker { color: var(--svc-violet); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.svc-h2 { font-size: 32px; font-weight: 700; margin-bottom: 14px; }
.svc-lead { color: var(--svc-ink-soft); font-size: 16px; line-height: 1.7; max-width: 680px; }

/* CARD GRID */
.svc-grid { display: grid; gap: 22px; margin-top: 36px; }
.svc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.svc-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .svc-grid-2, .svc-grid-3 { grid-template-columns: 1fr; } }

.svc-card {
  background: var(--svc-card);
  border: 1px solid var(--svc-border);
  border-radius: var(--svc-radius);
  padding: 28px;
  box-shadow: var(--svc-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--svc-shadow-hover); }
.svc-card .svc-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--svc-violet), var(--svc-violet-light));
  color: #fff;
}
.svc-card h3 { font-size: 19px; margin-bottom: 8px; }
.svc-card p { color: var(--svc-ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; }
.svc-card .svc-link { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--svc-violet); text-decoration: none; font-size: 14.5px; }
.svc-card .svc-link:hover { text-decoration: underline; }

/* REGION CARDS */
.svc-region-card { background: var(--svc-card); border: 1px solid var(--svc-border); border-radius: var(--svc-radius); padding: 24px; box-shadow: var(--svc-shadow); display: flex; gap: 16px; align-items: flex-start; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.svc-region-card:hover { transform: translateY(-4px); box-shadow: var(--svc-shadow-hover); }
.svc-region-flag { font-size: 30px; line-height: 1; }
.svc-region-card h3 { font-size: 17px; margin-bottom: 6px; }
.svc-region-card p { color: var(--svc-ink-soft); font-size: 14px; line-height: 1.55; margin: 0; }

/* STATS STRIP */
.svc-stats { background: var(--svc-ink); color: #fff; padding: 40px 0; }
.svc-stats .svc-grid-3 { margin-top: 0; }
.svc-stat h3 { font-size: 34px; font-weight: 800; color: #a78bfa; }
.svc-stat p { color: #cfc9e6; font-size: 14px; margin-top: 4px; }

/* TIMELINE */
.svc-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 36px; }
.svc-tl-step { display: flex; gap: 20px; position: relative; padding-bottom: 34px; }
.svc-tl-step:last-child { padding-bottom: 0; }
.svc-tl-dot { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--svc-violet), var(--svc-teal)); color: #fff; font-weight: 700; font-family: 'Poppins',sans-serif; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size: 14px; }
.svc-tl-step:not(:last-child)::before {
  content: ''; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--svc-border);
}
.svc-tl-step h3 { font-size: 17px; margin-bottom: 4px; }
.svc-tl-step p { color: var(--svc-ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* FAQ ACCORDION */
.svc-faq-item { border-bottom: 1px solid var(--svc-border); padding: 18px 0; }
.svc-faq-q { font-family:'Poppins',sans-serif; font-weight: 600; font-size: 15.5px; cursor: pointer; display:flex; justify-content: space-between; align-items:center; }
.svc-faq-q .svc-faq-toggle { font-size: 20px; color: var(--svc-violet); transition: transform 0.2s ease; }
.svc-faq-item.open .svc-faq-toggle { transform: rotate(45deg); }
.svc-faq-a { color: var(--svc-ink-soft); font-size: 14.5px; line-height: 1.65; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.svc-faq-item.open .svc-faq-a { max-height: 400px; margin-top: 10px; }

/* SCROLL REVEAL */
.svc-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.svc-reveal.svc-visible { opacity: 1; transform: translateY(0); }

/* CTA BAND */
.svc-cta-band {
  background: linear-gradient(120deg, #6d28d9, #4c1d95);
  border-radius: 24px;
  padding: 44px;
  text-align: center;
  color: #fff;
  margin: 60px auto 0;
}
.svc-cta-band h2 { font-size: 26px; margin-bottom: 10px; }
.svc-cta-band p { color: #d9d3f5; margin-bottom: 24px; }

/* WIZARD FORM */
.svc-wizard { background: var(--svc-card); border-radius: 24px; box-shadow: var(--svc-shadow); padding: 40px; max-width: 640px; margin: 0 auto; border: 1px solid var(--svc-border); }
.svc-progress { display: flex; align-items: center; margin-bottom: 30px; }
.svc-progress-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--svc-border); color: var(--svc-ink-soft); font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background 0.2s ease, color 0.2s ease; }
.svc-progress-dot.active { background: linear-gradient(135deg, var(--svc-violet), var(--svc-violet-light)); color: #fff; }
.svc-progress-line { flex: 1; height: 2px; background: var(--svc-border); margin: 0 8px; }
.svc-progress-line.active { background: var(--svc-violet-light); }

.svc-step-title { font-family:'Poppins',sans-serif; font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.svc-step-sub { color: var(--svc-ink-soft); font-size: 14px; margin-bottom: 22px; }

.svc-choice { display: block; border: 1.5px solid var(--svc-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; font-size: 14.5px; transition: border-color 0.15s ease, background 0.15s ease; }
.svc-choice:hover { border-color: var(--svc-violet-light); background: #faf8ff; }
.svc-choice input { margin-right: 10px; }
.svc-choice.checked { border-color: var(--svc-violet); background: #f4f0fe; }

.svc-field { margin-bottom: 16px; }
.svc-field label { display:block; font-size: 13px; font-weight: 600; color: var(--svc-ink-soft); margin-bottom: 6px; }
.svc-field input[type=text], .svc-field textarea {
  width: 100%; border: 1.5px solid var(--svc-border); border-radius: 10px; padding: 12px 14px;
  font-family: 'Inter', sans-serif; font-size: 14.5px; color: var(--svc-ink);
}
.svc-field input[type=text]:focus, .svc-field textarea:focus { outline: none; border-color: var(--svc-violet-light); }

.svc-wizard-actions { display: flex; justify-content: space-between; margin-top: 24px; }
.svc-wizard-actions .svc-btn-ghost { color: var(--svc-ink-soft); border-color: var(--svc-border); }

@media (max-width: 640px) {
  .svc-hero h1 { font-size: 32px; }
  .svc-hero { padding: 60px 0 70px; }
  .svc-section { padding: 46px 0; }
  .svc-wizard { padding: 26px; }
}

/* COMPARISON TABLE */
.svc-table { width: 100%; border-collapse: collapse; margin-top: 30px; background: var(--svc-card); border-radius: var(--svc-radius); overflow: hidden; box-shadow: var(--svc-shadow); }
.svc-table th, .svc-table td { padding: 16px 20px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--svc-border); }
.svc-table th { font-family: 'Poppins', sans-serif; font-weight: 700; background: #f4f0fe; color: var(--svc-violet); font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.svc-table td.svc-good { color: #0f9d58; font-weight: 600; }
.svc-table td.svc-bad { color: #d93025; font-weight: 600; }
.svc-table tr:last-child td { border-bottom: none; }
@media (max-width: 700px) { .svc-table { font-size: 13px; } .svc-table th, .svc-table td { padding: 10px 12px; } }

/* TESTIMONIAL */
.svc-testimonial { background: linear-gradient(120deg, #f4f0fe, #ffffff); border: 1px solid var(--svc-border); border-radius: var(--svc-radius); padding: 34px; box-shadow: var(--svc-shadow); position: relative; }
.svc-testimonial .svc-quote-mark { font-family: 'Poppins', sans-serif; font-size: 60px; color: var(--svc-violet-light); line-height: 1; opacity: 0.4; }
.svc-testimonial p.svc-quote-text { font-size: 18px; line-height: 1.6; color: var(--svc-ink); font-weight: 500; margin: 10px 0 20px; }
.svc-testimonial .svc-quote-author { font-family:'Poppins',sans-serif; font-weight: 700; font-size: 14.5px; }
.svc-testimonial .svc-quote-role { color: var(--svc-ink-soft); font-size: 13.5px; }

/* LOGO STRIP */
.svc-logo-strip { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center; margin-top: 30px; opacity: 0.65; }
.svc-logo-strip span { font-family:'Poppins',sans-serif; font-weight:700; font-size: 15px; color: var(--svc-ink-soft); }

/* COUNTRY PILL LIST */
.svc-pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.svc-pill { background: #f4f0fe; color: var(--svc-violet); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }

/* PROGRESS BAR (replaces plain dots) */
.svc-progressbar-wrap { margin-bottom: 26px; }
.svc-progressbar-label { display:flex; justify-content:space-between; font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:600; color: var(--svc-ink-soft); margin-bottom:8px; }
.svc-progressbar-track { height: 8px; background: var(--svc-border); border-radius: 999px; overflow:hidden; }
.svc-progressbar-fill { height: 100%; background: linear-gradient(90deg, var(--svc-violet), var(--svc-teal)); border-radius: 999px; transition: width 0.35s ease; }

/* TILE GRID (interactive selectable cards, replaces plain checkbox/radio lists) */
.svc-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 4px; }
.svc-tile-grid.svc-tile-grid-1col { grid-template-columns: 1fr; }
.svc-tile {
  border: 1.5px solid var(--svc-border);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  position: relative;
}
.svc-tile:hover { border-color: var(--svc-violet-light); background: #faf8ff; transform: translateY(-2px); }
.svc-tile.selected { border-color: var(--svc-violet); background: #f4f0fe; box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
.svc-tile .svc-tile-icon { font-size: 22px; flex-shrink:0; }
.svc-tile .svc-tile-check { position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--svc-border); display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; background:#fff; }
.svc-tile.selected .svc-tile-check { background: var(--svc-violet); border-color: var(--svc-violet); }

/* STEP TRANSITION ANIMATION */
.svc-qstep { transition: opacity 0.25s ease, transform 0.25s ease; }
.svc-qstep.svc-step-hidden { opacity: 0; transform: translateX(16px); position:absolute; pointer-events:none; }

/* REVIEW STEP */
.svc-review-item { display:flex; justify-content:space-between; align-items:flex-start; padding: 12px 0; border-bottom: 1px solid var(--svc-border); gap: 12px; }
.svc-review-item:last-child { border-bottom:none; }
.svc-review-label { font-size:12.5px; color: var(--svc-ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; min-width:120px; }
.svc-review-value { font-size:14.5px; color: var(--svc-ink); text-align:right; flex:1; }
.svc-review-edit { font-size:12.5px; color: var(--svc-violet); cursor:pointer; font-weight:600; white-space:nowrap; }

/* SCROLLABLE TABLE WRAPPER (mobile) */
.svc-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.svc-table-wrap .svc-table { min-width: 480px; }

/* ===== MOBILE FIXES FOR THE SITE'S SHARED HEADER/NAV ===== */
/* This targets the OLD grid header (.header-nav, .col span_X_of_8, .tf-logo, .mainnav-nor)
   used site-wide, so the menu doesn't overflow or overlap on phones. */
@media only screen and (max-width: 700px) {
  .header-nav { height: auto !important; padding: 14px 10px !important; }
  .header-nav .col { width: 100% !important; margin: 4px 0 !important; float: none !important; text-align: center !important; }
  .header-nav .tf-logo { text-align: center !important; }
  .header-nav .rgt { text-align: center !important; }
  .mainnav-nor, .mainnav-ovr {
    display: inline-block;
    font-size: 12.5px !important;
    margin: 4px 6px !important;
  }
  /* Top bar with SIGN IN / JOIN */
  .section.group[style*="background-color: #e9e9e9"] .col { width: 100% !important; float: none !important; text-align: center !important; margin: 2px 0 !important; }
  .topnav-nor { display: inline-block; margin: 4px 6px !important; }
}
@media only screen and (max-width: 420px) {
  .mainnav-nor, .mainnav-ovr { font-size: 11.5px !important; margin: 3px 4px !important; }
}