/* ====== Base ====== */
:root{
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --bg:#0f0f12;
  --bg2:#141418;
  --card:#1a1a21;
  --text:#ffffff;
  --muted:#b6b6c6;
  --line:#2a2a33;
  --accent:#7c5cff;
  --accent2:#00d0ff;
}

*{box-sizing:border-box}
html {
  scroll-behavior:smooth;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* Keep anchored sections visible under sticky header */
[id]{ scroll-margin-top: 90px; }

body{
  margin:0;
  font-family: var(--font-system);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(1000px 600px at 80% 20%, rgba(0,208,255,.18), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 18px}

/* ===== Header ===== */

.header{
  position: sticky;
  top: 0;
  z-index: 50;

  width: 100%;
  background: rgba(15,15,18,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);

  padding: 12px 0;
}

.header-inner{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.logo{display:flex;align-items:center;gap:10px;min-width:0}
.logo-mark{
  width:34px;height:34px;border-radius:10px;
  background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(0,208,255,.8));
  display:grid;place-items:center;font-weight:800;
}
.logo-mark img{width:20px;height:20px;display:block}
.logo-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.brand{
  font-weight:800;
  line-height:1.15;
}

.tagline{
  font-size:12px;
  color:var(--muted);
  line-height:1.25;
  margin-top:1px;
}


.nav{display:flex;gap:16px;margin-left:auto;align-items:center}
.nav a{color:var(--muted);font-size:14px}
.nav a:hover{color:var(--text)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
  will-change: transform;
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(124,92,255,.14) inset;
}
.btn:active{transform: translateY(0px) scale(.98); box-shadow:none}
.btn:focus-visible{
  outline: 2px solid rgba(0,208,255,.65);
  outline-offset: 3px;
}
.btn.primary{
  border-color: rgba(124,92,255,.65);
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,208,255,.75));
}

/* premium hover glow for primary button */
.btn.primary:hover{
  box-shadow:
    0 12px 28px rgba(0,0,0,.30),
    0 0 0 1px rgba(0,208,255,.16) inset,
    0 0 34px rgba(124,92,255,.18);
}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:hover,.btn:active{transform:none;box-shadow:none}
}
.btn.ghost{
  background: transparent;
  border-color: rgba(255,255,255,.14);
}
.btn.small{padding:9px 12px;border-radius:10px;font-size:13px}

.burger{
  display:none;
  margin-left: auto;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.mobile-nav{display:none}
.mobile-nav.open{display:block}
.mobile-links{
  display:flex;flex-direction:column;gap:12px;
  padding:12px 18px 16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.mobile-links a{color:var(--muted)}
.mobile-links a:hover{color:var(--text)}
.mobile-cta{padding:0 18px 18px}

/* ====== Hero ====== */
.hero{padding:56px 0 24px}
.hero-inner{display:grid;grid-template-columns: 1.1fr .9fr;gap:28px;align-items:center}
.hero-left h1{font-size:44px;line-height:1.06;margin:0 0 12px}
.lead{color:var(--muted);font-size:18px;line-height:1.6;margin:0 0 16px}
.bullets{margin:0 0 18px;padding-left:18px;color:var(--muted)}
.bullets li{margin:6px 0}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.hero-right{
  min-height:260px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 260px at 20% 20%, rgba(124,92,255,.32), transparent 60%),
    radial-gradient(500px 260px at 80% 70%, rgba(0,208,255,.22), transparent 60%),
    rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}
.hero-img{max-width:100%;border-radius:14px}
.hero-art{color:rgba(255,255,255,.55);font-weight:800;font-size:22px;text-align:center}

/* ====== Sections ====== */
.section{padding:44px 0}
.section.dark{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
h2{font-size:30px;margin:0 0 10px}
.subcenter{color:var(--muted);max-width:720px;margin:0 auto 18px;text-align:center;line-height:1.6}

/* ====== Scroll reveal ====== */
[data-reveal]{
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0px), var(--reveal-y, 22px), 0) scale(var(--reveal-scale, .975));
  filter: blur(var(--reveal-blur, 7px)) saturate(.88);
  transition:
    transform var(--reveal-dur, .64s) cubic-bezier(.18,.86,.22,1),
    opacity var(--reveal-dur, .64s) cubic-bezier(.18,.86,.22,1),
    filter var(--reveal-dur, .64s) cubic-bezier(.18,.86,.22,1),
    box-shadow var(--reveal-dur, .64s) cubic-bezier(.18,.86,.22,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
[data-reveal].reveal{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

[data-reveal][data-reveal-kind="section"]{
  --reveal-x: 0px;
  --reveal-y: 28px;
  --reveal-scale: .988;
  --reveal-blur: 9px;
}

.reduced-motion [data-reveal]{
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

.points{max-width:760px;margin:16px auto 0;padding-left:18px;color:var(--muted)}
.points li{margin:6px 0}

/* ====== SEO Intro (comparison block) ====== */
.seo-intro .container{position:relative}
.seo-intro-card{
  position: relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(760px 380px at 85% 70%, rgba(0,208,255,.12), transparent 55%),
    rgba(255,255,255,.03);
  padding:28px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.seo-intro-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:22px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(0,208,255,.14), rgba(255,255,255,0));
  opacity:.45;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding:1px;
}
.seo-intro-grid{display:grid;grid-template-columns: 1.15fr .85fr;gap:22px;align-items:start}
.seo-title{font-size:34px;line-height:1.08;margin:0 0 10px;letter-spacing:-.02em}
.seo-text{color:var(--muted);font-size:16px;line-height:1.7;margin:0}
.seo-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.seo-point{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  color:rgba(255,255,255,.86);
}
.seo-dot{
  width:10px;height:10px;border-radius:999px;
  margin-top:5px;flex:0 0 auto;
  background: radial-gradient(circle at 30% 30%, rgba(0,208,255,.95), rgba(124,92,255,.85));
  box-shadow: 0 0 0 3px rgba(124,92,255,.10);
}

@media (max-width: 900px){
  .seo-intro-grid{grid-template-columns:1fr}
  .seo-title{font-size:30px}
}

/* ===== Sticky split ("Technical Implementation") ===== */
.sticky-split-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:start;
}

.sticky-split-left{
  position: sticky;
  top: var(--sticky-top, 90px);
  align-self:start;
  padding-top: 2px;
}

.sticky-split-title{
  font-size:44px;
  line-height:1.06;
  margin:0 0 12px;
  letter-spacing:-.02em;
}

.sticky-split-text{
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  margin:0;
  max-width: 520px;
}

.sticky-split-cards{display:grid;gap:14px;}

.ss-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 220px at 20% 20%, rgba(124,92,255,.12), transparent 60%),
    radial-gradient(520px 220px at 80% 60%, rgba(0,208,255,.10), transparent 60%),
    rgba(0,0,0,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.ss-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background: rgba(0,208,255,.08);
  border: 1px solid rgba(0,208,255,.22);
  color: rgba(0,208,255,.95);
}

.ss-icon svg{width:20px;height:20px;display:block;}
.ss-icon img{width:20px;height:20px;display:block;}

.ss-title{margin:0 0 6px;font-size:18px;line-height:1.25;}
.ss-text{margin:0;color:var(--muted);line-height:1.6;font-size:14px;}

@media (max-width: 900px){
  .sticky-split-grid{grid-template-columns:1fr;}
  .sticky-split-left{position:relative; top:auto;}
  .sticky-split-title{font-size:34px;}
  .sticky-split-text{max-width:none;}
}

/* ===== 4-column solution cards ("Complete Development Solution") ===== */
.solution-h2{
  text-align:center;
  font-size:46px;
  line-height:1.05;
  margin:0 0 10px;
  letter-spacing:-.02em;
}

.solution-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}

.solution-card{
  padding:28px 26px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(560px 320px at 18% 16%, var(--sc-g1, rgba(124,92,255,.14)), transparent 62%),
    radial-gradient(560px 320px at 82% 72%, var(--sc-g2, rgba(0,208,255,.10)), transparent 62%),
    rgba(0,0,0,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  min-height: 320px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.solution-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  /* icon color is set per-card through --sc-accent */
  color: var(--sc-accent, rgba(0,208,255,.95));
  background:
    radial-gradient(28px 28px at 30% 30%, rgba(255,255,255,.10), transparent 70%),
    rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 28px var(--sc-g1, rgba(0,208,255,.18)),
    0 0 0 1px rgba(0,0,0,.25) inset;
}
.solution-icon .icon-inline,
.solution-icon svg,
.solution-icon img{width:22px;height:22px;display:block;}
.solution-icon .icon-inline svg{width:22px;height:22px;display:block;}

.solution-body{display:flex;flex-direction:column;gap:10px;}
.solution-title{margin:0;font-size:21px;line-height:1.28;letter-spacing:-.01em;}
.solution-text{margin:0;color:var(--muted);line-height:1.82;font-size:15px;}

.solution-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.solution-chip{
  font-size:12px;
  color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.10);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.16);
}

.solution-note{
  margin-top:auto;
  padding-top:6px;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--sc-accent, rgba(0,255,170,.78));
  font-size:13px;
  font-weight:800;
}
.solution-check{
  width:18px;height:18px;border-radius:999px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color: var(--sc-accent, rgba(0,255,170,.92));
  font-size:12px;
}

@media (max-width: 1100px){
  .solution-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px){
  .solution-h2{font-size:34px;}
  .solution-grid{grid-template-columns: 1fr;}
  .solution-card{min-height:auto;}
}

/* Stats */
.stats{display:grid;grid-template-columns: repeat(4, 1fr);gap:12px}
.stat{
  padding:16px;border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.stat-value{font-size:26px;font-weight:900}
.stat-label{color:var(--muted);margin-top:6px}

/* Cards */
.cards{display:grid;grid-template-columns: repeat(3, 1fr);gap:14px;margin-top:18px}
.card{
  padding:18px;border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.card .icon{font-size:22px;margin-bottom:10px}
.card .icon img{width:22px;height:22px;display:block}
.card .icon svg{width:22px;height:22px;display:block}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);line-height:1.6}

/* Steps */
.steps{display:grid;grid-template-columns: repeat(3, 1fr);gap:14px;margin-top:18px}
.step{
  padding:18px;border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.step-n{
  width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;
  background: rgba(124,92,255,.22);
  border:1px solid rgba(124,92,255,.30);
  font-weight:900;
  margin-bottom:10px;
}
.step-title{font-weight:800;margin-bottom:6px}
.step-text{color:var(--muted);line-height:1.6}

/* Providers */
.providers-controls{
  display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;align-items:flex-start;
  margin:18px 0 14px;
}
.providers-left{display:flex;flex-direction:column;gap:10px;flex:1;min-width:260px}
.providers-right{display:flex;justify-content:flex-end;min-width:220px}
.providers-search input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.providers-search input::placeholder{color:rgba(182,182,198,.7)}
.providers-filters{display:flex;flex-wrap:wrap;gap:8px}
.filter-btn{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--muted);
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
}
.filter-btn:hover{color:var(--text);border-color:rgba(255,255,255,.22)}
.filter-btn:active{transform: scale(.98)}
.filter-btn:focus-visible{
  outline: 2px solid rgba(0,208,255,.60);
  outline-offset: 3px;
}
.filter-btn.active{
  color:var(--text);
  border-color: rgba(124,92,255,.55);
  background: rgba(124,92,255,.18);
}
.providers-sort{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.providers-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.provider-card{
  padding:16px;border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.provider-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.provider-name{font-weight:900}
.provider-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{
  font-size:12px;color:var(--muted);
  border:1px solid rgba(255,255,255,.10);
  padding:4px 8px;border-radius:999px;
  background: rgba(0,0,0,.15);
}
.providers-empty{
  display:none;
  text-align:center;
  color:var(--muted);
  padding:18px 0 0;
}
.providers-more{
  display:flex;
  justify-content:center;
  margin-top:16px;
}

/* Testimonials */
.testimonials{display:grid;grid-template-columns: repeat(2, 1fr);gap:14px;margin-top:18px}
.t-card{
  padding:18px;border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.t-quote{color:var(--text);line-height:1.6}
.t-name{margin-top:12px;font-weight:900}
.t-role{color:var(--muted);font-size:13px;margin-top:3px}

/* ===== FAQ (spacing + readable line length + accordion UX) ===== */
.faq-list{
  margin: 18px auto 0;
  max-width: 980px;
  display: grid;
  gap: 14px;
}

.faq-item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(720px 240px at 16% 20%, rgba(124,92,255,.12), transparent 62%),
    radial-gradient(680px 260px at 86% 70%, rgba(0,208,255,.08), transparent 62%),
    rgba(0,0,0,.18);
  box-shadow: 0 16px 44px rgba(0,0,0,.32);
  overflow: hidden;
}

.faq-q{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto; /* С‚РµРєСЃС‚ + СЃС‚СЂРµР»РєР° */
  gap: 14px;
  align-items: start;

  padding: 20px 22px;
  background: transparent;
  border: 0;

  text-align: left;
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.25;
}

/* limit question line length so long titles naturally wrap */
.faq-q span:first-child{
  display: block;
  max-width: 58ch;
}

.faq-q:hover{ background: rgba(255,255,255,.03); }
.faq-q:focus-visible{
  outline: 2px solid rgba(0,208,255,.65);
  outline-offset: 4px;
}

.chev{
  opacity: .8;
  width: 22px;
  text-align: right;
  transform: translateY(2px);
  transition: transform .18s ease, opacity .18s ease;
}

.faq-item.open .chev{
  transform: rotate(180deg) translateY(-2px);
  opacity: 1;
}

.faq-a{
  padding: 0 22px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15px;
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease;
}

.faq-item.open .faq-a{
  padding: 0 22px 18px;
}

@media (max-width: 640px){
  .faq-q{ padding: 18px 16px; font-size: 16px; }
  .faq-q span:first-child{ max-width: 100%; }
  .faq-a{ padding: 0 16px; }
  .faq-item.open .faq-a{ padding: 0 16px 16px; }
}

/* Contact form */
.form{
  max-width: 720px;
  margin: 18px auto 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
label{color:rgba(255,255,255,.8);font-weight:700;font-size:13px}
input, textarea{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
textarea{resize:vertical}
.form-ok{
  max-width: 720px;
  margin: 18px auto 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(0,208,255,.25);
  background: rgba(0,208,255,.06);
  color: rgba(255,255,255,.92);
}

/* ===== Contact cards (WhatsApp / Telegram) ===== */
.contact-head{
  text-align:center;
  max-width: 820px;
  margin: 0 auto 18px;
}
.contact-title{
  font-size: 46px;
  line-height: 1.06;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.contact-sub{
  margin: 0;
  color: rgba(182,182,198,.82);
  line-height: 1.7;
}

.contact-grid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-card{
  position: relative;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(720px 280px at 18% 20%, rgba(124,92,255,.14), transparent 62%),
    radial-gradient(640px 260px at 86% 78%, rgba(0,208,255,.10), transparent 62%),
    rgba(0,0,0,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.38);
  overflow:hidden;
}

.contact-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 22px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(0,208,255,.14), rgba(255,255,255,0));
  opacity:.35;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding:1px;
}

.contact-card-top{display:flex;flex-direction:column;gap:10px;}
.contact-platform{font-weight: 950; letter-spacing: .06em; opacity:.92;}
.contact-value{color: rgba(182,182,198,.82); font-size: 15px;}

.contact-btn{
  margin-top: 18px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.contact-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.contact-btn:active{transform: translateY(0) scale(.98); box-shadow:none;}
.contact-btn:focus-visible{outline: 2px solid rgba(0,208,255,.65); outline-offset: 3px;}

.contact-btn-ic{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position: relative;
}

/* WhatsApp */
.contact-card.whatsapp{
  background:
    radial-gradient(720px 280px at 18% 20%, rgba(0, 255, 170, .12), transparent 62%),
    radial-gradient(640px 260px at 86% 78%, rgba(124,92,255,.10), transparent 62%),
    rgba(0,0,0,.18);
}
.contact-btn.whatsapp{
  border-color: rgba(0, 255, 170, .28);
  background: linear-gradient(135deg, rgba(0, 200, 120, .95), rgba(0, 255, 170, .75));
}
.contact-btn.whatsapp:hover{ box-shadow: 0 16px 38px rgba(0,0,0,.35), 0 0 28px rgba(0,255,170,.18); }
.contact-card.whatsapp .contact-btn-ic::before{
  content:"";
  width: 12px;
  height: 12px;
  display:block;
  background: rgba(255,255,255,.95);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="black" d="M16.02 3C9.39 3 4 8.39 4 15.02c0 2.11.55 4.16 1.6 5.98L4 29l8.21-1.55a11.9 11.9 0 0 0 3.81.62C22.65 28.07 28 22.68 28 16.05 28 9.42 22.65 3 16.02 3zm6.95 19.63c-.29.81-1.69 1.55-2.33 1.62-.6.07-1.36.1-2.19-.14-.5-.16-1.14-.37-1.96-.73-3.45-1.49-5.7-5.12-5.88-5.36-.18-.24-1.4-1.86-1.4-3.56 0-1.7.89-2.53 1.2-2.87.31-.34.67-.43.9-.43h.65c.21 0 .49-.08.77.59.29.7.97 2.42 1.06 2.59.09.18.14.39.03.63-.11.24-.16.39-.32.6-.16.21-.34.46-.48.62-.16.18-.33.37-.14.73.18.37.82 1.36 1.77 2.2 1.22 1.09 2.25 1.43 2.62 1.59.37.18.58.16.79-.1.21-.24.91-1.06 1.15-1.43.24-.37.49-.31.82-.2.34.11 2.12 1 2.48 1.18.36.18.6.26.69.4.09.14.09.84-.2 1.65z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="black" d="M16.02 3C9.39 3 4 8.39 4 15.02c0 2.11.55 4.16 1.6 5.98L4 29l8.21-1.55a11.9 11.9 0 0 0 3.81.62C22.65 28.07 28 22.68 28 16.05 28 9.42 22.65 3 16.02 3zm6.95 19.63c-.29.81-1.69 1.55-2.33 1.62-.6.07-1.36.1-2.19-.14-.5-.16-1.14-.37-1.96-.73-3.45-1.49-5.7-5.12-5.88-5.36-.18-.24-1.4-1.86-1.4-3.56 0-1.7.89-2.53 1.2-2.87.31-.34.67-.43.9-.43h.65c.21 0 .49-.08.77.59.29.7.97 2.42 1.06 2.59.09.18.14.39.03.63-.11.24-.16.39-.32.6-.16.21-.34.46-.48.62-.16.18-.33.37-.14.73.18.37.82 1.36 1.77 2.2 1.22 1.09 2.25 1.43 2.62 1.59.37.18.58.16.79-.1.21-.24.91-1.06 1.15-1.43.24-.37.49-.31.82-.2.34.11 2.12 1 2.48 1.18.36.18.6.26.69.4.09.14.09.84-.2 1.65z"/></svg>') center / contain no-repeat;
}

/* Telegram */
.contact-card.telegram{
  background:
    radial-gradient(720px 280px at 18% 20%, rgba(0, 208, 255, .14), transparent 62%),
    radial-gradient(640px 260px at 86% 78%, rgba(124,92,255,.10), transparent 62%),
    rgba(0,0,0,.18);
}
.contact-btn.telegram{
  border-color: rgba(0, 208, 255, .30);
  background: linear-gradient(135deg, rgba(0, 150, 220, .95), rgba(0, 208, 255, .78));
}
.contact-btn.telegram:hover{ box-shadow: 0 16px 38px rgba(0,0,0,.35), 0 0 28px rgba(0,208,255,.18); }
.contact-card.telegram .contact-btn-ic::before{
  content:"";
  width: 12px;
  height: 12px;
  display:block;
  background: rgba(255,255,255,.95);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9.04 15.49 8.7 20.2c.49 0 .7-.21.95-.46l2.28-2.18 4.72 3.45c.86.47 1.47.22 1.69-.8l3.06-14.36h0c.26-1.21-.44-1.68-1.28-1.37L1.62 9.27C.45 9.72.47 10.37 1.41 10.66l4.65 1.45L17.4 5.73c.53-.35 1.02-.16.62.19"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9.04 15.49 8.7 20.2c.49 0 .7-.21.95-.46l2.28-2.18 4.72 3.45c.86.47 1.47.22 1.69-.8l3.06-14.36h0c.26-1.21-.44-1.68-1.28-1.37L1.62 9.27C.45 9.72.47 10.37 1.41 10.66l4.65 1.45L17.4 5.73c.53-.35 1.02-.16.62.19"/></svg>') center / contain no-repeat;
}

@media (max-width: 900px){
  .contact-title{ font-size: 34px; }
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Legal */
.legal{max-width:860px}
.legal h1{font-size:36px;margin:0 0 10px}
.legal-updated{color:var(--muted);margin-bottom:18px}
.legal h2{margin-top:22px}
.legal p{color:var(--muted);line-height:1.7}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:26px 0;
  margin-top: 20px;
  background: rgba(0,0,0,.12);
}
.footer-inner{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.footer-brand{font-weight:900}
.footer-copy{color:var(--muted);font-size:13px;margin-top:4px}
.footer-right{display:flex;gap:14px;flex-wrap:wrap}
.footer-right a{color:var(--muted);font-size:13px}
.footer-right a:hover{color:var(--text)}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .stats{grid-template-columns: repeat(2, 1fr)}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .providers-grid{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}

  .nav{display:none}
  .burger{display:inline-flex}

  .header .btn.small { display:none; }

  .mobile-nav{display:none}
  .mobile-nav.open{display:block}
}

/* ===== Tabs block (featuresCards.v1 layout:"tabs") ===== */
.tabs-block{
  margin-top:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  position:relative;
}

/* Hidden measuring box used to calculate stable max height for tabs panel */
.tabs-measure{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  height:0;
}

.tabs-nav{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* РѕРєРЅРѕ РґР»СЏ РІРєР»Р°РґРѕРє */
.tabs-rail{
  position:relative;
  flex:1;
  overflow:hidden;              /* РіР»Р°РІРЅРѕРµ: РќР•Рў СЃРєСЂРѕР»Р»Р° */
  border-radius:16px;
}

/* Р»РµРЅС‚Р° РІРєР»Р°РґРѕРє */
.tabs-track{
  display:flex;
  gap:10px;
  width:max-content;
  transform: translateX(0px);
  transition: transform .25s ease;
  padding: 2px;                 /* С‡С‚РѕР±С‹ Р°РєС‚РёРІРЅР°СЏ СЂР°РјРєР° РЅРµ РѕР±СЂРµР·Р°Р»Р°СЃСЊ */
}

/* РєРЅРѕРїРєРё СЃС‚СЂРµР»РѕРє */
.tabs-rail-btn{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  font-size:20px;
  font-weight:900;
  display:grid;
  place-items:center;
}
.tabs-rail-btn:focus-visible,
.tabs-tab:focus-visible,
.tabs-arrow:focus-visible,
.sort-dd-btn:focus-visible,
.sort-dd-item:focus-visible,
.burger:focus-visible{
  outline: 2px solid rgba(0,208,255,.60);
  outline-offset: 3px;
}
.tabs-rail-btn:hover{ border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.tabs-rail-btn:active{ transform: translateY(0px); }
.tabs-rail-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
}


.tabs-tab{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.75);
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.tabs-tab:hover{ color: var(--text); border-color: rgba(255,255,255,.20); }
.tabs-tab.active{
  color: var(--text);
  border-color: rgba(0,208,255,.35);
  box-shadow: 0 0 0 1px rgba(0,208,255,.10) inset;
  background: linear-gradient(135deg, rgba(0,208,255,.10), rgba(124,92,255,.10));
}

.tabs-panel{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  padding:18px;
  align-items:center;
}

.tabs-title{
  margin:0 0 10px;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.tabs-text{
  margin:0 0 14px;
  color: var(--muted);
  line-height:1.7;
}

.tabs-bullets{
  margin:0;
  padding-left:18px;
  color: rgba(255,255,255,.86);
}
.tabs-bullets li{ margin:8px 0; }
.tabs-bullets li::marker{ color: rgba(0,208,255,.65); }

.tabs-right{
  display:flex;
  justify-content:center;
  align-items:center;
}

.tabs-media{
  width:100%;
  max-width:520px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.tabs-media-box,
.tabs-media-placeholder{
  width:100%;
  max-width:520px;
  min-height:280px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 260px at 20% 20%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(500px 260px at 80% 70%, rgba(0,208,255,.18), transparent 60%),
    rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  color: rgba(255,255,255,.65);
  font-weight:900;
  text-align:center;
}

.tabs-pager{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px 18px;
}

.tabs-counter{
  color: rgba(255,255,255,.70);
  font-weight:800;
  min-width:64px;
}

.tabs-progress{
  flex:1;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.tabs-progress-bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(0,208,255,.75), rgba(124,92,255,.75));
  border-radius:999px;
  transition: width .2s ease;
}

.tabs-controls{
  display:flex;
  gap:10px;
}
.tabs-arrow{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  font-size:20px;
  font-weight:900;
}
.tabs-arrow:hover{ border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.tabs-arrow:active{ transform: translateY(0px); }

@media (max-width: 900px){
  .tabs-panel{ grid-template-columns: 1fr; }
  .tabs-title{ font-size:28px; }
  .tabs-media-box,.tabs-media-placeholder{ min-height:220px; }
}
/* ===== Custom Sort Dropdown (Providers) ===== */
.sort-dd{
  position: relative;
  width: 100%;
  max-width: 260px;
}

.sort-dd-btn{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
  cursor: pointer;
  font-weight: 800;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.sort-dd-btn::after{
  content: "\25BE";
  opacity:.85;
  margin-left:10px;
}

.sort-dd-menu{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,15,18,.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  padding: 8px;
  display:none;
  z-index: 30;
}
.sort-dd-menu.open{ display:block; }

.sort-dd-item{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.82);
  cursor:pointer;
  font-weight: 750;
}
.sort-dd-item:hover{
  background: rgba(124,92,255,.16);
  border-color: rgba(124,92,255,.25);
  color: var(--text);
}
.seo-text{
  max-width: 860px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.8;
  text-align: left;
}
.features-subtitle{
  max-width: 860px;
  margin: 10px 0 20px;
  color: var(--muted);
  line-height: 1.7;
  text-align: left;   /* в†ђ Р’РђР–РќРћ */
}
/* Force left alignment for content sections */
.section .container > p,
.section .container > h2{
  text-align: left;
}
@media (max-width: 900px){
  .container{
    padding: 0 16px;
  }
}
/* Align section title + subtitle perfectly */
.section > .container > h1,
.section > .container > h2,
.section > .container > h3{
  margin-left: 0;
}

.section > .container > h1 + p,
.section > .container > h2 + p,
.section > .container > h3 + p{
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  max-width: 800px; /* РјРѕР¶РЅРѕ 760вЂ“900, РєР°Рє РЅСЂР°РІРёС‚СЃСЏ */
}
/* =========================
   Ambient background orbs
========================= */
.bg-orbs{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55; /* overall dial */
  filter: saturate(1.05);
}
.bg-orbs .orb{
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .14;
  transform: translate3d(0,0,0);
  animation: orbFloat 22s ease-in-out infinite;
}
.bg-orbs .o1{
  left: -140px;
  top: -140px;
  background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.9), rgba(124,92,255,0) 60%);
  animation-duration: 26s;
}
.bg-orbs .o2{
  right: -180px;
  top: 20%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle at 40% 40%, rgba(0,208,255,.85), rgba(0,208,255,0) 62%);
  animation-duration: 30s;
  animation-delay: -6s;
}
.bg-orbs .o3{
  left: 20%;
  bottom: -220px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at 35% 35%, rgba(124,92,255,.55), rgba(0,208,255,.35) 35%, rgba(0,0,0,0) 68%);
  animation-duration: 34s;
  animation-delay: -12s;
}
@keyframes orbFloat{
  0%{ transform: translate3d(0,0,0) scale(1); }
  35%{ transform: translate3d(40px,-30px,0) scale(1.06); }
  70%{ transform: translate3d(-28px,34px,0) scale(.98); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

/* Keep site content above orbs */
#app{ position: relative; z-index: 1; }
.header{ position: sticky; top: 0; z-index: 5; }
body{ position: relative; overflow-x: hidden; }

@media (prefers-reduced-motion: reduce){
  .bg-orbs{ display:none; }
}

/* =========================
   Card hover lift + shadow
========================= */
@media (hover:hover){
  .card,
  .step,
  .provider-card,
  .t-card,
  .faq-item{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    will-change: transform;
  }
  .card:hover,
  .step:hover,
  .provider-card:hover,
  .t-card:hover,
  .faq-item:hover{
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.18);
    box-shadow:
      0 18px 50px rgba(0,0,0,.34),
      0 0 0 1px rgba(124,92,255,.10) inset;
    background: rgba(255,255,255,.045);
  }
}
@media (prefers-reduced-motion: reduce){
  .card, .step, .provider-card, .t-card, .faq-item{ transition:none; }
  .card:hover, .step:hover, .provider-card:hover, .t-card:hover, .faq-item:hover{ transform:none; box-shadow:none; }
}

/* =========================
   FAQ premium upgrade
========================= */
.faq-list{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.faq-item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  overflow: hidden;
}

.faq-q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.3;
}

.faq-q:hover{
  background: linear-gradient(90deg, rgba(124,92,255,.08), rgba(0,208,255,.06));
}

.faq-q:focus-visible{
  outline: 2px solid rgba(0,208,255,.65);
  outline-offset: -2px;
}

.chev{
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .75;
  transition: transform .2s ease, opacity .2s ease;
}

.faq-item.open .chev{
  transform: rotate(180deg);
  opacity: 1;
}

.faq-a{
  padding: 0 18px;
  color: var(--muted);
  line-height: 1.65;
  opacity: 0;
  transition: max-height .28s ease, padding .28s ease, opacity .22s ease;
}

.faq-item.open .faq-a{
  padding: 0 18px 18px;
  opacity: 1;
  background: rgba(255,255,255,.02);
}

@media (prefers-reduced-motion: reduce){
  .chev{ transition:none; }
  .faq-a{ transition:none; opacity: 1; max-height: none !important; padding: 0 18px 18px; }
}


/* ===== Providers: logo support (image + fallback initials) ===== */

.provider-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.provider-logo{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.5px;
  flex: 0 0 44px;
  overflow:hidden;
}

.provider-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* ===== Providers: fix logo fallback shadow + alignment ===== */

/* РІС‹СЂР°РІРЅРёРІР°РЅРёРµ Р»РµРІРѕРіРѕ Р±Р»РѕРєР° (Р»РѕРіРѕ + РЅР°Р·РІР°РЅРёРµ) */
.provider-top,
.provider-left{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* РєРѕРЅС‚РµР№РЅРµСЂ РёРєРѕРЅРєРё */
.provider-logo{
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* СѓР±РёСЂР°РµРј Р»СЋР±С‹Рµ вЂњСЃРІРµС‡РµРЅРёСЏвЂќ Сѓ РєРѕРЅС‚РµР№РЅРµСЂР° */
  box-shadow: none !important;
  filter: none !important;
}

/* РµСЃР»Рё РІРЅСѓС‚СЂРё fallback СЃРґРµР»Р°РЅ РёР· РЅРµСЃРєРѕР»СЊРєРёС… РїР»Р°С€РµРє/Р±СѓРєРІ вЂ” РіР°СЃРёРј С‚РµРЅСЊ Сѓ РІСЃРµС… РґРµС‚РµР№ */
.provider-logo *{
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* РєР°СЂС‚РёРЅРєРё вЂ” СЃС‚СЂРѕРіРѕ РїРѕ С†РµРЅС‚СЂСѓ, Р±РµР· СЃСЉРµР·РґР° */
.provider-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: middle;
}

/* РµСЃР»Рё Сѓ Р±СѓРєРІРµРЅРЅС‹С… РїР»Р°С€РµРє РµСЃС‚СЊ СЃРІРѕРё РєР»Р°СЃСЃС‹/СЃРїР°РЅС‹ вЂ” С„РёРєСЃ СЂР°Р·РјРµСЂР° Рё С†РµРЅС‚СЂРѕРІРєРё */
.provider-logo span,
.provider-logo .initial,
.provider-logo .logo-letter,
.provider-logo .provider-initial{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.provider-logo:not(.has-img) {
    background: linear-gradient(135deg, #5B5CFF, #00C2FF);
    border: 1px solid rgba(255,255,255,0.08);
}

/* РџСЂРёР¶РёРјР°РµРј footer С‚РѕР»СЊРєРѕ РЅР° РїРѕРґСЃС‚СЂР°РЅРёС†Р°С… */
body[data-page="contact"],
body[data-page="privacy"],
body[data-page="terms"] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body[data-page="contact"] #app,
body[data-page="privacy"] #app,
body[data-page="terms"] #app {
  flex: 1;
}

body[data-page="contact"] .footer,
body[data-page="privacy"] .footer,
body[data-page="terms"] .footer {
  margin-top: auto;
}
/* === Sticky footer (СЂР°Р±РѕС‚Р°РµС‚, РїРѕС‚РѕРјСѓ С‡С‚Рѕ footer РІРЅСѓС‚СЂРё #app) === */
#app{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* С„СѓС‚РµСЂ СѓС…РѕРґРёС‚ РІРЅРёР· */
#app > footer.footer{
  margin-top: auto;
}

/* РќРћ: РіР»Р°РІРЅСѓСЋ СЃС‚СЂР°РЅРёС†Сѓ РЅРµ С‚СЂРѕРіР°РµРј (С‡С‚РѕР±С‹ РЅРµ Р»РѕРјР°Р»Р°СЃСЊ) */
body[data-page="home"] #app{
  min-height: auto;
  display: block;
}
/* Top Benefits: 2 columns */
#benefits .cards{
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px){
  #benefits .cards{
    grid-template-columns: 1fr;
  }
}
/* === Single API: make it visually different (override hard) === */
section#single-api{
  background: transparent !important;
}

section#single-api .seo-intro-card{
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

section#single-api .seo-title{
  font-size: 34px !important;
}

section#single-api .seo-intro-grid{
  grid-template-columns: 1fr !important; /* РґРµР»Р°РµС‚ РІРµСЂС‚РёРєР°Р»СЊРЅРѕ (РґСЂСѓРіРѕР№ РІРёРґ) */
  gap: 16px !important;
}

section#single-api .seo-points{
  margin-top: 8px !important;
}
/* WHAT IS block вЂ” full width single column */
section#what-is .seo-intro-grid{
  grid-template-columns: 1fr !important;
}

section#what-is .seo-intro-right{
  display: none !important;
}

section#what-is .seo-intro-left{
  max-width: 100%;
}
/* FINAL CTA centered */
section#final-cta .container{
  text-align: center !important;
}

section#final-cta .container > h2,
section#final-cta .container > p{
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   2026 Refresh Theme
========================= */
:root{
  --bg: #06131a;
  --bg2: #0b1d27;
  --card: #112630;
  --text: #f5fbff;
  --muted: #aac4cf;
  --line: #22424f;
  --accent: #2dd4bf;
  --accent2: #f4a261;
}

body{
  font-family: var(--font-system);
  background:
    radial-gradient(1000px 560px at 12% -10%, rgba(45,212,191,.18), transparent 58%),
    radial-gradient(860px 480px at 88% 12%, rgba(244,162,97,.16), transparent 54%),
    linear-gradient(180deg, #06131a 0%, #081922 46%, #06131a 100%);
}

.bg-orbs{ opacity: .45; }
.bg-orbs .o1{
  background: radial-gradient(circle at 30% 30%, rgba(45,212,191,.9), rgba(45,212,191,0) 60%);
}
.bg-orbs .o2{
  background: radial-gradient(circle at 40% 40%, rgba(244,162,97,.86), rgba(244,162,97,0) 62%);
}
.bg-orbs .o3{
  background: radial-gradient(circle at 35% 35%, rgba(45,212,191,.52), rgba(244,162,97,.30) 36%, rgba(0,0,0,0) 68%);
}

.header{
  background: rgba(6,19,26,.80);
  border-bottom-color: rgba(244,162,97,.22);
}

.logo-mark{
  background: linear-gradient(135deg, rgba(45,212,191,.95), rgba(244,162,97,.85));
  color: #082029;
}

.btn.primary{
  color: #082029;
  border-color: rgba(45,212,191,.55);
  background: linear-gradient(135deg, rgba(45,212,191,.96), rgba(244,162,97,.86));
}
.btn.primary:hover{
  box-shadow:
    0 12px 28px rgba(0,0,0,.30),
    0 0 0 1px rgba(45,212,191,.20) inset,
    0 0 34px rgba(244,162,97,.16);
}

.hero-right,
.seo-intro-card,
.tabs-block,
.card,
.step,
.provider-card,
.t-card,
.contact-card,
.legal,
.faq-item{
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}

.hero-right{
  background:
    radial-gradient(560px 240px at 18% 20%, rgba(45,212,191,.22), transparent 60%),
    radial-gradient(520px 220px at 84% 72%, rgba(244,162,97,.18), transparent 60%),
    rgba(255,255,255,.03);
}

.seo-intro-card{
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(45,212,191,.14), transparent 60%),
    radial-gradient(760px 380px at 85% 70%, rgba(244,162,97,.12), transparent 55%),
    rgba(255,255,255,.025);
}
.seo-dot{
  background: radial-gradient(circle at 30% 30%, rgba(45,212,191,.95), rgba(244,162,97,.85));
  box-shadow: 0 0 0 3px rgba(45,212,191,.11);
}

.tabs-tab.active{
  border-color: rgba(45,212,191,.45);
  box-shadow: 0 0 0 1px rgba(45,212,191,.12) inset;
  background: linear-gradient(135deg, rgba(45,212,191,.14), rgba(244,162,97,.12));
}
.tabs-progress-bar{
  background: linear-gradient(90deg, rgba(45,212,191,.82), rgba(244,162,97,.78));
}

.filter-btn.active{
  border-color: rgba(45,212,191,.56);
  background: rgba(45,212,191,.18);
}
.provider-logo:not(.has-img){
  background: linear-gradient(135deg, rgba(45,212,191,.90), rgba(244,162,97,.88));
  color: #082029;
}

.legal{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 22px;
  background: rgba(255,255,255,.02);
}

.footer{
  border-top-color: rgba(244,162,97,.18);
  background: rgba(6,19,26,.52);
}

/* =========================
   2026 Button Polish
========================= */

.btn,
.contact-btn,
.filter-btn,
.tabs-tab,
.tabs-arrow,
.tabs-rail-btn,
.sort-dd-btn,
.sort-dd-item,
.burger{
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.btn{
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
  color: #f4fbff;
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
}

.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 14px 30px rgba(0,0,0,.32);
}

.btn:active{
  transform: translateY(0) scale(.98);
}

.btn.primary{
  color: #ffffff;
  border-color: rgba(45,212,191,.58);
  background:
    linear-gradient(135deg, #17b89f 0%, #2ea5c6 52%, #f09a57 100%);
  box-shadow:
    0 10px 26px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.btn.primary:hover{
  border-color: rgba(45,212,191,.78);
  box-shadow:
    0 16px 34px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 22px rgba(45,212,191,.20);
}

.btn.ghost{
  background: rgba(7, 25, 34, .82);
  border-color: rgba(255,255,255,.18);
  color: #e9f4f8;
}

.btn.ghost:hover{
  border-color: rgba(45,212,191,.54);
  background: rgba(12, 34, 45, .94);
}

.btn.small{
  padding: 10px 14px;
  border-radius: 12px;
}

.contact-btn{
  border-radius: 14px;
  font-weight: 900;
}

.contact-btn.whatsapp{
  border-color: rgba(45,212,191,.50);
  background: linear-gradient(135deg, #16a986 0%, #1ab79c 52%, #2ea5c6 100%);
  color: #ffffff;
}

.contact-btn.telegram{
  border-color: rgba(46,165,198,.50);
  background: linear-gradient(135deg, #1f8fb8 0%, #2ea5c6 52%, #51b89c 100%);
  color: #ffffff;
}

.filter-btn{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #d4e5ec;
}

.filter-btn:hover{
  border-color: rgba(255,255,255,.30);
  color: #ffffff;
}

.filter-btn.active{
  border-color: rgba(45,212,191,.64);
  background: linear-gradient(135deg, rgba(45,212,191,.28), rgba(46,165,198,.20));
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

.tabs-tab{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.24);
  color: rgba(245,251,255,.82);
}

.tabs-tab.active{
  border-color: rgba(45,212,191,.62);
  background: linear-gradient(135deg, rgba(45,212,191,.24), rgba(240,154,87,.18));
  color: #ffffff;
}

.tabs-arrow,
.tabs-rail-btn,
.sort-dd-btn{
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  color: #f4fbff;
}

.tabs-arrow:hover,
.tabs-rail-btn:hover,
.sort-dd-btn:hover{
  border-color: rgba(45,212,191,.54);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.sort-dd-item{
  color: #d7e8ef;
}

.sort-dd-item:hover{
  color: #ffffff;
  background: linear-gradient(135deg, rgba(45,212,191,.18), rgba(240,154,87,.12));
  border-color: rgba(45,212,191,.35);
}

.btn:focus-visible,
.contact-btn:focus-visible,
.filter-btn:focus-visible,
.tabs-tab:focus-visible,
.tabs-arrow:focus-visible,
.tabs-rail-btn:focus-visible,
.sort-dd-btn:focus-visible,
.sort-dd-item:focus-visible,
.burger:focus-visible{
  outline: 2px solid rgba(45,212,191,.86);
  outline-offset: 3px;
}

/* =========================
   2026 Light Modern Theme
========================= */
:root{
  --bg: #f7fbff;
  --bg2: #eef5fb;
  --card: #ffffff;
  --text: #0f1f2b;
  --muted: #5d7383;
  --line: #d6e4ef;
  --accent: #0ea5a4;
  --accent2: #3b82f6;
}

body{
  color: var(--text);
  background:
    linear-gradient(180deg, #eff4fa 0%, #dfe9f3 48%, #d3deea 100%);
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .14;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.24) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(14,31,46,.05) 0 1px, transparent 1px 3px);
}

.bg-orbs{
  opacity: .28;
}
.bg-orbs .o1{
  background: radial-gradient(circle at 30% 30%, rgba(14,165,164,.56), rgba(14,165,164,0) 62%);
}
.bg-orbs .o2{
  background: radial-gradient(circle at 40% 40%, rgba(59,130,246,.46), rgba(59,130,246,0) 62%);
}
.bg-orbs .o3{
  background: radial-gradient(circle at 35% 35%, rgba(14,165,164,.34), rgba(59,130,246,.20) 38%, rgba(0,0,0,0) 70%);
}

.header{
  background: rgba(255,255,255,.84);
  border-bottom: 1px solid rgba(15,31,43,.08);
  backdrop-filter: blur(12px);
}

.brand,
h1,h2,h3,
.step-title,
.provider-name,
.contact-platform,
.t-name,
.faq-q{
  color: #102331;
}

.tagline,
.lead,
.subcenter,
.features-subtitle,
.seo-text,
.points,
.card p,
.step-text,
.contact-sub,
.contact-value,
.legal p,
.legal-updated,
.footer-copy,
.footer-right a{
  color: var(--muted);
}

.logo-mark{
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5a4, #3b82f6);
}

.section.dark{
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}

.hero-right,
.seo-intro-card,
.tabs-block,
.card,
.step,
.provider-card,
.t-card,
.faq-item,
.contact-card,
.legal,
.form,
.form-ok{
  background: #ffffff;
  border: 1px solid #dbe8f2;
  box-shadow: 0 12px 30px rgba(18, 48, 71, .08);
}

.hero-right{
  background:
    radial-gradient(520px 220px at 18% 20%, rgba(14,165,164,.10), transparent 60%),
    radial-gradient(520px 220px at 84% 72%, rgba(59,130,246,.10), transparent 60%),
    #ffffff;
}

.seo-intro-card{
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(14,165,164,.08), transparent 60%),
    radial-gradient(760px 380px at 85% 70%, rgba(59,130,246,.07), transparent 55%),
    #ffffff;
}
.seo-dot{
  background: radial-gradient(circle at 30% 30%, rgba(14,165,164,.95), rgba(59,130,246,.80));
  box-shadow: 0 0 0 3px rgba(14,165,164,.13);
}

.btn{
  color: #163042;
  border-color: #cfe0ec;
  background: linear-gradient(180deg, #ffffff, #f3f8fc);
  box-shadow: 0 8px 20px rgba(18,48,71,.10);
}
.btn:hover{
  border-color: #b9d1e2;
}
.btn.primary{
  color: #ffffff;
  border-color: rgba(14,165,164,.32);
  background: linear-gradient(135deg, #0ea5a4 0%, #3b82f6 100%);
  box-shadow: 0 10px 24px rgba(24, 98, 165, .22);
}
.btn.ghost{
  background: #f7fbff;
  border-color: #d2e2ee;
  color: #163042;
}

.providers-search input,
.providers-sort,
input,
textarea,
.sort-dd-btn,
.sort-dd-menu{
  color: #163042;
  background: #ffffff;
  border-color: #d2e2ee;
}

.filter-btn{
  border-color: #d2e2ee;
  background: #f6fbff;
  color: #486172;
}
.filter-btn.active{
  color: #ffffff;
  border-color: rgba(14,165,164,.56);
  background: linear-gradient(135deg, #0ea5a4, #3b82f6);
}

.tabs-tab{
  background: #f4f9fd;
  border-color: #d2e2ee;
  color: #486172;
}
.tabs-tab.active{
  color: #ffffff;
  border-color: rgba(14,165,164,.56);
  background: linear-gradient(135deg, #0ea5a4, #3b82f6);
}
.tabs-arrow,
.tabs-rail-btn{
  background: #ffffff;
  border-color: #d2e2ee;
  color: #153247;
}

.tag{
  background: #f3f8fc;
  border-color: #d2e2ee;
  color: #4d6474;
}

.contact-btn.whatsapp,
.contact-btn.telegram{
  color: #ffffff;
  border-color: transparent;
}
.contact-btn.whatsapp{
  background: linear-gradient(135deg, #10b981, #0ea5a4);
}
.contact-btn.telegram{
  background: linear-gradient(135deg, #3b82f6, #0ea5a4);
}

.faq-q:hover{
  background: linear-gradient(90deg, rgba(14,165,164,.08), rgba(59,130,246,.06));
}
.faq-a{
  color: #4f6474;
}

.provider-logo:not(.has-img){
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5a4, #3b82f6);
}

.footer{
  border-top: 1px solid rgba(15,31,43,.08);
  background: rgba(255,255,255,.70);
}

/* =========================
   Hero First Screen Style
========================= */
body[data-page="home"]{
  background:
    radial-gradient(920px 540px at 8% -8%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(760px 500px at 95% 8%, rgba(255,255,255,.45), transparent 58%),
    #d9e2eb;
}

body[data-page] .header{
  background: rgba(238, 245, 251, .18);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  padding: 10px 0;
}

body[data-page] .header-inner{
  min-height: 56px;
  padding: 8px 14px;
  border-radius: 0;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  gap: 12px;
}

body[data-page] .logo-mark{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5ca4ff, #3b82f6);
  color: #ffffff;
}

body[data-page] .logo{
  gap: 9px;
  min-width: 0;
}

body[data-page] .brand{
  font-size: 15px;
  line-height: 1.05;
  font-weight: 900;
  color: #1b2c39;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page] .tagline{
  display: none;
}

body[data-page] .nav a{
  color: #394e60;
  font-size: 13px;
  font-weight: 650;
}

body[data-page] .nav a:hover{
  color: #182938;
}

body[data-page] .header .btn.primary{
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  border-color: #4a9cff;
  background: linear-gradient(135deg, #5aa8ff, #3f8fff);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(63, 143, 255, .24);
}

body[data-page] .header .btn.primary:hover{
  border-color: #2f81f0;
  background: linear-gradient(135deg, #4a9dff, #2f81f0);
}

@media (max-width: 900px){
  body[data-page] .header{
    padding: 8px 0;
  }

  body[data-page] .header-inner{
    min-height: 52px;
    padding: 7px 10px;
    border-radius: 0;
  }

  body[data-page] .brand{
    max-width: 160px;
    font-size: 14px;
  }
}

section#top{
  padding: 36px 0 34px;
}

section#top .hero-inner{
  position: relative;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.66);
  background: linear-gradient(180deg, #e1e8ef, #dce5ee);
  box-shadow: 0 20px 48px rgba(29, 49, 68, .16);
  overflow: hidden;
}

section#top .hero-inner::before{
  content: "";
  position: absolute;
  right: clamp(-180px, -16vw, -110px);
  top: 52%;
  width: clamp(420px, 58vw, 680px);
  height: clamp(190px, 24vw, 260px);
  transform: translateY(-50%);
  border-radius: 999px 0 0 999px;
  background:
    radial-gradient(130% 130% at 12% 50%, rgba(126, 74, 255, .72), transparent 58%),
    radial-gradient(110% 110% at 72% 26%, rgba(255, 84, 120, .75), transparent 56%),
    radial-gradient(100% 120% at 48% 78%, rgba(90, 194, 255, .62), transparent 60%),
    linear-gradient(120deg, rgba(106, 112, 255, .62), rgba(255, 95, 155, .58));
  background-size: 220% 220%;
  filter: saturate(1.05);
  z-index: 0;
  animation: heroBaseShimmer 11s ease-in-out infinite alternate;
}

section#top .hero-inner::after{
  content: "";
  position: absolute;
  right: clamp(34px, 7vw, 92px);
  top: 52%;
  width: clamp(146px, 18vw, 220px);
  height: clamp(250px, 28vw, 330px);
  transform: translateY(-50%);
  border-radius: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.22));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 18px 36px rgba(46, 68, 90, .18);
  backdrop-filter: blur(6px);
  z-index: 1;
}

section#top .hero-left{
  position: relative;
  z-index: 3;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

section#top .hero-left::before{
  content: none;
}

section#top .hero-left h1{
  margin: 0 0 10px;
  max-width: 11ch;
  font-size: clamp(40px, 5vw, 70px);
  line-height: .98;
  letter-spacing: -0.03em;
  color: #0b131b;
}

section#top .hero-left .lead{
  max-width: 48ch;
  margin: 0 0 18px;
  color: #4c6072;
  font-size: 16px;
  line-height: 1.55;
}

section#top .bullets{
  display: none;
}

section#top .cta-row .btn{
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

section#top .cta-row .btn.primary{
  background: #0c1015;
  border-color: #0c1015;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(15, 21, 28, .16);
}

section#top .cta-row .btn.ghost{
  background: transparent;
  border-color: rgba(11, 30, 46, .35);
  color: #13283a;
  box-shadow: none;
}

section#top .hero-right{
  position: relative;
  z-index: 2;
  min-height: 360px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

section#top .hero-right::before{
  content: none;
}

section#top .hero-right::after{
  content: none;
}

section#top .hero-mouse-field{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  z-index: 1;
}

section#top .hero-mouse-field::before{
  content: none;
}

section#top .mouse-block{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.56);
  background: linear-gradient(165deg, rgba(255,255,255,.45), rgba(255,255,255,.14));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 14px 28px rgba(32, 58, 84, .14);
  transform: translate(-50%, -50%)
    translate3d(calc(var(--tx, 0px) + var(--fx, 0px) + var(--dx, 0px)), calc(var(--ty, 0px) + var(--fy, 0px) + var(--dy, 0px)), 0)
    rotate(calc(var(--rot, 0deg) + var(--frot, 0deg)))
    scale(var(--sc, 1));
  transform-origin: center center;
  will-change: transform;
  backdrop-filter: blur(8px);
  z-index: 2;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  cursor: grab;
  opacity: 1;
  filter: none;
}

section#top .mouse-block.is-dragging{
  cursor: grabbing;
}

section#top .mouse-block.is-snapping{
  animation: ropeSnapKick .22s ease-out;
}

@keyframes ropeSnapKick{
  0%{
    filter: brightness(1.08);
  }
  55%{
    filter: brightness(1);
  }
  100%{
    filter: brightness(1);
  }
}

section#top .mouse-block-title{
  font-size: 16px;
  line-height: 1.15;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: .03em;
  text-transform: uppercase;
}

section#top .mouse-block-sub{
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

section#top .mouse-block.b1{
  --x: 20%;
  --y: 24%;
  --w: 118px;
  --h: 84px;
  --r: 24px;
  background:
    radial-gradient(120% 160% at 15% 20%, rgba(255,125,183,.68), transparent 62%),
    linear-gradient(165deg, rgba(255,255,255,.46), rgba(255,255,255,.16));
}

section#top .mouse-block.b1 .mouse-block-title{
  font-size: 17px;
}

section#top .mouse-block.b1 .mouse-block-sub{
  font-size: 11px;
}

section#top .mouse-block.b2{
  --x: 62%;
  --y: 22%;
  --w: 185px;
  --h: 104px;
  --r: 32px;
  background:
    radial-gradient(120% 150% at 80% 20%, rgba(118,168,255,.64), transparent 60%),
    radial-gradient(120% 130% at 20% 80%, rgba(194,166,255,.46), transparent 66%),
    linear-gradient(165deg, rgba(255,255,255,.50), rgba(255,255,255,.18));
}

section#top .mouse-block.b2 .mouse-block-title{
  font-size: 22px;
}

section#top .mouse-block.b2 .mouse-block-sub{
  font-size: 13px;
}

section#top .mouse-block.b3{
  --x: 35%;
  --y: 53%;
  --w: 210px;
  --h: 132px;
  --r: 32px;
  background:
    radial-gradient(130% 170% at 18% 62%, rgba(120,216,255,.62), transparent 64%),
    radial-gradient(120% 140% at 80% 18%, rgba(151,164,255,.54), transparent 62%),
    linear-gradient(165deg, rgba(255,255,255,.50), rgba(255,255,255,.16));
}

section#top .mouse-block.b3 .mouse-block-title{
  font-size: 26px;
}

section#top .mouse-block.b3 .mouse-block-sub{
  font-size: 14px;
}

section#top .mouse-block.b4{
  --x: 63%;
  --y: 56%;
  --w: 124px;
  --h: 162px;
  --r: 34px;
  background:
    radial-gradient(130% 150% at 70% 30%, rgba(255,145,176,.66), transparent 60%),
    linear-gradient(165deg, rgba(255,255,255,.46), rgba(255,255,255,.14));
}

section#top .mouse-block.b4 .mouse-block-title{
  font-size: 20px;
}

section#top .mouse-block.b4 .mouse-block-sub{
  font-size: 12px;
}

section#top .mouse-block.b5{
  --x: 43%;
  --y: 77%;
  --w: 212px;
  --h: 96px;
  --r: 26px;
  background:
    radial-gradient(130% 170% at 35% 20%, rgba(145,154,255,.58), transparent 62%),
    radial-gradient(120% 140% at 75% 85%, rgba(121,214,255,.54), transparent 60%),
    linear-gradient(165deg, rgba(255,255,255,.48), rgba(255,255,255,.16));
}

section#top .mouse-block.b5 .mouse-block-title{
  font-size: 24px;
}

section#top .mouse-block.b5 .mouse-block-sub{
  font-size: 13px;
}

@keyframes heroBaseShimmer{
  0%{
    background-position: 0% 45%;
    transform: translateY(-50%) translateX(0px);
  }
  50%{
    background-position: 100% 58%;
    transform: translateY(-50%) translateX(-10px);
  }
  100%{
    background-position: 15% 32%;
    transform: translateY(-50%) translateX(6px);
  }
}

section#top .hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .07;
  border: 0;
  filter: grayscale(.2) contrast(.92);
}


@media (max-width: 900px){
  section#top .hero-inner{
    grid-template-columns: 1fr;
    padding: 24px;
  }

  section#top .hero-inner::before,
  section#top .hero-inner::after{
    display: none;
  }

  section#top .hero-right{
    min-height: 292px;
    display: block;
    margin-top: 8px;
  }

  section#top .hero-mouse-field{
    min-height: 292px;
  }

  section#top .mouse-block{
    transition: none;
    padding: 8px 10px;
    gap: 2px;
    overflow: hidden;
  }

  section#top .mouse-block-title{
    font-size: 12px;
    line-height: 1.05;
  }

  section#top .mouse-block-sub{
    font-size: 9px;
    line-height: 1.05;
  }

  section#top .mouse-block.b1{
    --x: 22%;
    --y: 20%;
    --w: 96px;
    --h: 66px;
  }
  section#top .mouse-block.b2{
    --x: 62%;
    --y: 20%;
    --w: 156px;
    --h: 90px;
  }
  section#top .mouse-block.b3{
    --x: 32%;
    --y: 52%;
    --w: 170px;
    --h: 128px;
  }
  section#top .mouse-block.b4{
    --x: 63%;
    --y: 55%;
    --w: 128px;
    --h: 156px;
  }
  section#top .mouse-block.b5{
    --x: 43%;
    --y: 80%;
    --w: 212px;
    --h: 92px;
  }

  section#top .mouse-block.b2 .mouse-block-title,
  section#top .mouse-block.b3 .mouse-block-title,
  section#top .mouse-block.b5 .mouse-block-title{ font-size: 15px; }
  section#top .mouse-block.b1 .mouse-block-title,
  section#top .mouse-block.b4 .mouse-block-title{ font-size: 12px; }
  section#top .mouse-block.b2 .mouse-block-sub,
  section#top .mouse-block.b3 .mouse-block-sub,
  section#top .mouse-block.b5 .mouse-block-sub{ font-size: 10px; }
  section#top .mouse-block.b1 .mouse-block-sub,
  section#top .mouse-block.b4 .mouse-block-sub{ font-size: 9px; }

  section#top .hero-left h1{
    max-width: none;
  }
}

@media (max-width: 640px){
  section#top .hero-right,
  section#top .hero-mouse-field{
    min-height: 274px;
  }


  section#top .mouse-block.b2{ --w: 148px; }
  section#top .mouse-block.b3{ --w: 162px; }
  section#top .mouse-block.b4{ --w: 122px; }
  section#top .mouse-block.b5{ --w: 198px; }

  section#top .mouse-block.b2 .mouse-block-title,
  section#top .mouse-block.b3 .mouse-block-title,
  section#top .mouse-block.b5 .mouse-block-title{ font-size: 14px; }
}

/* iOS style for social proof stats */
body[data-page="home"] section.section.cta{
  padding-top: 18px;
}

body[data-page="home"] section.section.cta .stats{
  gap: 14px;
}

body[data-page="home"] section.section.cta .stat{
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.62);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.18));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 8px 22px rgba(20, 46, 68, .08);
}

body[data-page="home"] section.section.cta .stat-value{
  font-size: clamp(34px, 3.1vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0d1f2d;
}

body[data-page="home"] section.section.cta .stat-label{
  margin-top: 8px;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.12;
  font-weight: 580;
  color: #5a7283;
}

@media (max-width: 900px){
  body[data-page="home"] section.section.cta .stats{
    gap: 10px;
  }

  body[data-page="home"] section.section.cta .stat{
    padding: 15px 14px 13px;
    border-radius: 16px;
  }

  body[data-page="home"] section.section.cta .stat-value{
    font-size: 26px;
  }

  body[data-page="home"] section.section.cta .stat-label{
    font-size: 12px;
    margin-top: 7px;
  }
}

/* iOS style for "Aggregator vs Direct" */
body[data-page="home"] section#agg-vs-direct{
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(196, 210, 222, .56), rgba(184, 201, 214, .42)) !important;
  border-top: 1px solid rgba(156, 176, 194, .30) !important;
  border-bottom: 1px solid rgba(156, 176, 194, .30) !important;
  margin-top: 32px;
  margin-bottom: 34px;
  padding-top: 34px;
  padding-bottom: 34px;
}

body[data-page="home"] section#agg-vs-direct .seo-intro-card{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.64);
  background:
    radial-gradient(120% 120% at 78% 24%, rgba(174, 220, 232, .24), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.20));
  -webkit-backdrop-filter: blur(16px) saturate(142%);
  backdrop-filter: blur(16px) saturate(142%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 14px 36px rgba(28, 53, 74, .10);
  padding: clamp(22px, 2.3vw, 30px);
}

body[data-page="home"] section#agg-vs-direct .seo-intro-card::before{
  content: none;
}

body[data-page="home"] section#agg-vs-direct .seo-intro-grid{
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: start;
}

body[data-page="home"] section#agg-vs-direct .seo-compare{
  display: grid;
  gap: 14px;
}

body[data-page="home"] section#agg-vs-direct .seo-compare-mobile{
  display: none;
}

body[data-page="home"] section#agg-vs-direct .seo-compare-mobile-toggle{
  display: none;
}

body[data-page="home"] section#agg-vs-direct .seo-title{
  margin: 0 0 12px;
  font-size: clamp(28px, 2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: #163047;
}

body[data-page="home"] section#agg-vs-direct .seo-text{
  margin: 0;
  font-size: clamp(14px, .95vw, 16px);
  line-height: 1.62;
  color: #4f667a;
}

body[data-page="home"] section#agg-vs-direct .seo-compare-table{
  display: grid;
  gap: 10px;
  overflow: hidden;
  transition: max-height .34s ease;
}

body[data-page="home"] section#agg-vs-direct .seo-compare-wrap{
  position: relative;
}

body[data-page="home"] section#agg-vs-direct .seo-compare-wrap.is-collapsed .seo-compare-row:nth-child(5){
  opacity: .42;
}

body[data-page="home"] section#agg-vs-direct .seo-compare-row{
  display: grid;
  grid-template-columns: .9fr 1.05fr 1.15fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.52);
  background:
    radial-gradient(120% 120% at 82% 18%, rgba(169, 212, 231, .14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.20));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
}

body[data-page="home"] section#agg-vs-direct .seo-compare-row > div{
  color: #20384b;
  font-size: 15px;
  line-height: 1.36;
  font-weight: 600;
}

body[data-page="home"] section#agg-vs-direct .seo-compare-head > div{
  font-weight: 800;
  color: #102a40;
  font-size: 15px;
}

body[data-page="home"] section#agg-vs-direct .seo-compare-head{
  border-color: rgba(162,185,202,.34);
  background: rgba(228,238,246,.64);
}

body[data-page="home"] section#agg-vs-direct .seo-compare-fade{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 86px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(219,230,239,0), rgba(219,230,239,.92));
  pointer-events: none;
}

body[data-page="home"] section#agg-vs-direct .seo-compare-toggle{
  align-self: center;
  min-width: 132px;
  border-radius: 14px;
  border: 1px solid rgba(170,190,205,.60);
  background: linear-gradient(180deg, rgba(244,250,255,.95), rgba(226,237,246,.86));
  color: #163047;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 24px rgba(20, 42, 61, .14);
}

body[data-page="home"] section#agg-vs-direct .seo-compare-toggle:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 14px 28px rgba(20, 42, 61, .18);
}

body[data-page="home"] section#agg-vs-direct .seo-points{
  gap: 10px;
}

body[data-page="home"] section#agg-vs-direct .seo-point{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.54);
  background: linear-gradient(180deg, rgba(80,110,132,.24), rgba(80,110,132,.16));
  color: #f0f6fb;
  padding: 11px 12px;
}

body[data-page="home"] section#agg-vs-direct .seo-dot{
  background: radial-gradient(circle at 30% 30%, rgba(64,192,255,.96), rgba(0,146,255,.82));
  box-shadow: 0 0 0 3px rgba(64,192,255,.16);
}

@media (max-width: 900px){
  body[data-page="home"] section#agg-vs-direct{
    padding-top: 22px;
  }

  body[data-page="home"] section#agg-vs-direct .container{
    padding-left: 12px;
    padding-right: 12px;
  }

  body[data-page="home"] section#agg-vs-direct .seo-intro-card{
    border-radius: 20px;
    padding: 18px 16px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  body[data-page="home"] section#agg-vs-direct .seo-intro-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-page="home"] section#agg-vs-direct .seo-compare-wrap,
  body[data-page="home"] section#agg-vs-direct .seo-compare-toggle-desktop{
    display: none !important;
  }

  body[data-page="home"] section#agg-vs-direct .seo-compare-mobile{
    display: grid;
    gap: 12px;
  }

  body[data-page="home"] section#agg-vs-direct .seo-compare-mobile.is-collapsed .seo-mobile-col:nth-child(n+2){
    display: none;
  }

  body[data-page="home"] section#agg-vs-direct .seo-compare-mobile.is-collapsed .seo-mobile-col:first-child .seo-mobile-col-item:nth-child(n+4){
    display: none;
  }

  body[data-page="home"] section#agg-vs-direct .seo-mobile-col{
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.52);
    background:
      radial-gradient(120% 120% at 82% 18%, rgba(169, 212, 231, .14), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.20));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
    overflow: hidden;
  }

  body[data-page="home"] section#agg-vs-direct .seo-mobile-col-head{
    padding: 12px 14px;
    font-size: 34px;
    font-size: clamp(24px, 8.5vw, 34px);
    line-height: 1.1;
    color: #102a40;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.45);
    text-align: center;
  }

  body[data-page="home"] section#agg-vs-direct .seo-mobile-col-list{
    display: grid;
  }

  body[data-page="home"] section#agg-vs-direct .seo-mobile-col-item{
    padding: 16px 14px;
    color: #20384b;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.45);
  }

  body[data-page="home"] section#agg-vs-direct .seo-compare-mobile-toggle{
    display: inline-flex;
    justify-self: center;
  }

  body[data-page="home"] section#agg-vs-direct .seo-compare-row{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 11px 12px;
    border-radius: 12px;
    width: 100%;
    min-width: 0;
  }

  body[data-page="home"] section#agg-vs-direct .seo-compare-row > div{
    font-size: 14px;
    line-height: 1.42;
  }

  body[data-page="home"] section#agg-vs-direct .seo-compare-head{
    display: none;
  }

  body[data-page="home"] section#agg-vs-direct .seo-title{
    font-size: 32px;
  }

  body[data-page="home"] section#agg-vs-direct .seo-text{
    font-size: 15px;
    line-height: 1.55;
  }

  body[data-page="home"] section#agg-vs-direct .seo-compare-fade{
    height: 74px;
  }
}

@media (max-width: 640px){
  body[data-page="home"] section#agg-vs-direct .seo-title{
    font-size: 28px;
  }
}

/* Offer block: heading on top, mixed-size cards below */
body[data-page="home"] section#offer .container{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
  align-items: start;
}

body[data-page="home"] section#offer .offer-left{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body[data-page="home"] section#offer .offer-left > h2{
  margin: 0;
  text-align: left;
  font-size: 36px;
  line-height: 1.08;
}

body[data-page="home"] section#offer .offer-left > .features-subtitle,
body[data-page="home"] section#offer .offer-left > .subcenter{
  margin: 0;
  max-width: none;
  text-align: left;
}

body[data-page="home"] section#offer .cards{
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="home"] section#offer .cards > .card{ min-height: 155px; }
body[data-page="home"] section#offer .cards > .card:nth-child(1){ grid-column: span 5; min-height: 200px; }
body[data-page="home"] section#offer .cards > .card:nth-child(2){ grid-column: span 7; min-height: 180px; }
body[data-page="home"] section#offer .cards > .card:nth-child(3){ grid-column: span 4; min-height: 145px; }
body[data-page="home"] section#offer .cards > .card:nth-child(4){ grid-column: span 8; min-height: 195px; }
body[data-page="home"] section#offer .cards > .card:nth-child(5){ grid-column: span 6; min-height: 170px; }
body[data-page="home"] section#offer .cards > .card:nth-child(6){ grid-column: span 6; min-height: 145px; }

@media (max-width: 1000px){
  body[data-page="home"] section#offer .cards{
    grid-template-columns: 1fr;
  }

  body[data-page="home"] section#offer .cards > .card,
  body[data-page="home"] section#offer .cards > .card:nth-child(1),
  body[data-page="home"] section#offer .cards > .card:nth-child(2),
  body[data-page="home"] section#offer .cards > .card:nth-child(3),
  body[data-page="home"] section#offer .cards > .card:nth-child(4),
  body[data-page="home"] section#offer .cards > .card:nth-child(5),
  body[data-page="home"] section#offer .cards > .card:nth-child(6){
    grid-column: auto;
    min-height: auto;
  }
}

/* iOS staggered stack for "What We Offer" */
body[data-page="home"] section#offer{
  padding-top: 24px;
}

body[data-page="home"] section#offer .cards{
  margin-top: 18px;
  gap: 14px;
  align-items: stretch;
}

body[data-page="home"] section#offer .card{
  padding: 16px 15px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.64);
  background:
    radial-gradient(120% 120% at 78% 24%, rgba(174, 220, 232, .18), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.20));
  -webkit-backdrop-filter: blur(16px) saturate(142%);
  backdrop-filter: blur(16px) saturate(142%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 14px 34px rgba(28, 53, 74, .10);
  transform: none !important;
  min-height: 100%;
}

body[data-page="home"] section#offer .card h3{
  font-size: clamp(20px, 1.65vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: #17344c;
}

body[data-page="home"] section#offer .card p{
  font-size: 15px;
  line-height: 1.58;
  color: #4f667a;
}

body[data-page="home"] section#offer .card .icon{
  opacity: .75;
  margin-bottom: 8px;
}

@media (max-width: 900px){
  body[data-page="home"] section#offer .card{
    border-radius: 18px;
    padding: 15px 14px;
  }

  body[data-page="home"] section#offer .card h3{
    font-size: 22px;
  }

  body[data-page="home"] section#offer .card p{
    font-size: 15px;
    line-height: 1.62;
  }
}

/* iOS style for "How to Integrate" */
body[data-page="home"] section#how{
  background:
    linear-gradient(180deg, rgba(192, 207, 220, .56), rgba(182, 199, 213, .44)) !important;
  border-top: 1px solid rgba(156, 176, 194, .30) !important;
  border-bottom: 1px solid rgba(156, 176, 194, .30) !important;
  padding-top: 34px;
  padding-bottom: 34px;
}

body[data-page="home"] section#how .container > h2{
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(32px, 3vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #17344c;
}

body[data-page="home"] section#how .container > .subcenter{
  text-align: center;
  margin: 0 auto 18px;
  max-width: 980px;
}

body[data-page="home"] section#how .steps{
  margin-top: 0;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="home"] section#how .step{
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.68);
  background:
    radial-gradient(120% 120% at 78% 24%, rgba(174, 220, 232, .18), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.22));
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 12px 30px rgba(28, 53, 74, .10);
}

body[data-page="home"] section#how .step-n{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(206,196,255,.92), rgba(189,176,245,.86));
  border: 1px solid rgba(155,136,231,.42);
  color: #17344c;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
}

body[data-page="home"] section#how .step-title{
  margin-bottom: 8px;
  color: #17344c;
  font-size: clamp(22px, 1.65vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

body[data-page="home"] section#how .step-text{
  color: #4f667a;
  line-height: 1.62;
  font-size: 15px;
}

@media (max-width: 1000px){
  body[data-page="home"] section#how .container > h2{
    text-align: center;
    font-size: 34px;
  }

  body[data-page="home"] section#how .steps{
    grid-template-columns: 1fr;
  }
}

/* iOS style for "Providers in one connection" */
body[data-page="home"] section#providers{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 16% 8%, rgba(246,250,255,.92), rgba(226,236,246,.68) 52%, rgba(214,227,239,.62) 100%),
    linear-gradient(180deg, rgba(248,252,255,.82), rgba(224,236,246,.64)) !important;
  border-top: 1px solid rgba(255,255,255,.46) !important;
  border-bottom: 1px solid rgba(171,188,203,.28) !important;
  font-family: var(--font-system);
}

body[data-page="home"] section#providers::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.20) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px);
}

body[data-page="home"] section#providers > .container{
  position: relative;
  z-index: 1;
}

body[data-page="home"] section#providers .container > h2{
  font-size: clamp(28px, 2.7vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: #17344c;
}

body[data-page="home"] section#providers .container > .subcenter{
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}

body[data-page="home"] section#providers .providers-filters{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.66);
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(33, 61, 86, .08);
}

body[data-page="home"] section#providers .filter-btn{
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #4d697f;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 13px;
  box-shadow: none;
}

body[data-page="home"] section#providers .filter-btn.active{
  color: #ffffff;
  background: linear-gradient(135deg, #1ab8cf, #3a7bef);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 8px 20px rgba(50, 116, 214, .26);
}

body[data-page="home"] section#providers .providers-search input,
body[data-page="home"] section#providers .providers-sort{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.44);
  color: #17344c;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 10px 28px rgba(33, 61, 86, .08);
  font-size: 15px;
  font-weight: 500;
}

body[data-page="home"] section#providers .sort-dd{
  max-width: 260px;
}

body[data-page="home"] section#providers .sort-dd-btn{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.44);
  color: #17344c;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 10px 28px rgba(33, 61, 86, .08);
  font-size: 15px;
  font-weight: 700;
}

body[data-page="home"] section#providers .sort-dd-btn::after{
  color: #4d677e;
}

body[data-page="home"] section#providers .sort-dd-menu{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.58);
  background: rgba(245,250,255,.56);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 18px 40px rgba(33, 61, 86, .12);
  padding: 8px;
}

body[data-page="home"] section#providers .sort-dd-item{
  color: #4e677d;
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
}

body[data-page="home"] section#providers .sort-dd-item:hover{
  color: #17344c;
  border-color: rgba(169, 194, 212, .46);
  background: rgba(229,240,248,.62);
}

body[data-page="home"] section#providers .providers-search input{
  padding-left: 14px;
}

body[data-page="home"] section#providers .providers-search input::placeholder{
  color: rgba(79,102,122,.54);
}

body[data-page="home"] section#providers .provider-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.62);
  background:
    radial-gradient(120% 120% at 80% 20%, rgba(167, 212, 231, .14), transparent 58%),
    rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 16px 36px rgba(33, 61, 86, .10);
}

body[data-page="home"] section#providers .provider-name{
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.005em;
}

body[data-page="home"] section#providers .provider-logo{
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  background: #ffffff;
  border: 1px solid rgba(170,190,205,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  padding: 0;
}

body[data-page="home"] section#providers .provider-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #ffffff;
}

body[data-page="home"] section#providers .tag{
  color: #537086;
  border: 1px solid rgba(147,173,194,.44);
  background: rgba(232,242,249,.68);
  font-size: 13px;
  font-weight: 500;
}

/* iOS style for "What Partners Say" */
body[data-page="home"] section#testimonials{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(192, 207, 220, .56), rgba(182, 199, 213, .44)) !important;
  border-top: 1px solid rgba(156, 176, 194, .30) !important;
  border-bottom: 1px solid rgba(156, 176, 194, .30) !important;
  padding-top: 30px;
  padding-bottom: 30px;
}

body[data-page="home"] section#testimonials::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .14;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(14,31,46,.045) 0 1px, transparent 1px 3px);
}

body[data-page="home"] section#testimonials .container{
  position: relative;
  z-index: 1;
}

body[data-page="home"] section#testimonials .container > h2{
  margin: 0 0 14px;
  color: #17344c;
  font-size: clamp(28px, 2.5vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

body[data-page="home"] section#testimonials .t-slider{
  display: grid;
  gap: 14px;
}

body[data-page="home"] section#testimonials .t-slider-viewport{
  overflow: hidden;
  padding: 2px 0;
  margin: -2px 0;
  cursor: grab;
  touch-action: pan-y;
}

body[data-page="home"] section#testimonials .t-slider-viewport.is-dragging{
  cursor: grabbing;
  user-select: none;
}

body[data-page="home"] section#testimonials .t-slider-track{
  display: flex;
  transition: transform .56s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

body[data-page="home"] section#testimonials .t-slide{
  flex: 0 0 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

body[data-page="home"] section#testimonials .testimonials{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0;
}

body[data-page="home"] section#testimonials .t-card{
  padding: 20px 18px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.64);
  background:
    radial-gradient(120% 120% at 78% 24%, rgba(174, 220, 232, .14), transparent 58%),
    rgba(255,255,255,.44);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 14px 34px rgba(28, 53, 74, .10);
  overflow: hidden;
  background-clip: padding-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

@media (hover:hover){
  body[data-page="home"] section#testimonials .t-card{
    transition: none;
  }

  body[data-page="home"] section#testimonials .t-card:hover{
    transform: none;
    border-color: rgba(255,255,255,.64);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      0 14px 34px rgba(28, 53, 74, .10);
  }
}

body[data-page="home"] section#testimonials .t-quote{
  color: #1a354b;
  font-size: 15px;
  line-height: 1.62;
  font-weight: 500;
}

body[data-page="home"] section#testimonials .t-name{
  margin-top: 10px;
  color: #17344c;
  font-size: 15px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.004em;
}

body[data-page="home"] section#testimonials .t-role{
  margin-top: 4px;
  color: #5a7286;
  font-size: 13px;
  font-weight: 500;
}

body[data-page="home"] section#testimonials .t-slider-bullets{
  display: flex;
  justify-content: center;
  gap: 10px;
}

body[data-page="home"] section#testimonials .t-bullet{
  position: relative;
  width: 44px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.54);
  background: rgba(222,236,247,.74);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .2s ease, background-color .2s ease;
}

body[data-page="home"] section#testimonials .t-bullet.active{
  border-color: rgba(70, 136, 238, .62);
  background: rgba(214,231,246,.88);
}

body[data-page="home"] section#testimonials .t-bullet-fill{
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, #2ab7cf, #4787ef);
  transition: transform .12s linear, opacity .24s ease;
  opacity: .96;
}

body[data-page="home"] section#testimonials .t-bullet:not(.active) .t-bullet-fill{
  opacity: .25;
}

body[data-page="home"] section#testimonials .t-bullet:focus-visible{
  outline: 2px solid rgba(71,135,239,.62);
  outline-offset: 2px;
}

@media (max-width: 900px){
  body[data-page="home"] section#testimonials .testimonials{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body[data-page="home"] section#testimonials .t-bullet{
    width: 36px;
  }
}

/* iOS style for FAQ */
body[data-page="home"] section#faq{
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding-top: 32px;
  padding-bottom: 34px;
}

body[data-page="home"] section#faq .container > h2{
  margin: 0 0 16px;
  color: #17344c;
  font-size: clamp(32px, 2.7vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

body[data-page="home"] section#faq .faq-list{
  margin-top: 12px;
  max-width: none;
  gap: 14px;
}

body[data-page="home"] section#faq .faq-item{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.66);
  background:
    radial-gradient(120% 120% at 78% 24%, rgba(174, 220, 232, .14), transparent 58%),
    rgba(255,255,255,.44);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 30px rgba(28, 53, 74, .10);
}

body[data-page="home"] section#faq .faq-q{
  padding: 16px 20px;
  color: #17344c;
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.006em;
}

body[data-page="home"] section#faq .faq-q:hover{
  background: transparent;
}

body[data-page="home"] section#faq .chev{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(229,240,248,.66);
  border: 1px solid rgba(170,193,210,.45);
  transform: none;
  transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
}

body[data-page="home"] section#faq .chev::before{
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #4f677d;
  border-bottom: 2px solid #4f677d;
  transform: rotate(45deg) translateY(-1px);
}

body[data-page="home"] section#faq .faq-item.open .chev{
  transform: rotate(180deg);
  background: rgba(215,231,244,.80);
  border-color: rgba(136,169,196,.55);
}

body[data-page="home"] section#faq .faq-a{
  color: #4f667a;
  line-height: 1.68;
  font-size: 15px;
  padding: 0 20px 0;
  max-width: 78ch;
  overflow-wrap: anywhere;
}

body[data-page="home"] section#faq .faq-item.open .faq-a{
  padding: 12px 20px 30px;
}

@media (max-width: 900px){
  body[data-page="home"] section#faq .container > h2{
    font-size: 34px;
  }

  body[data-page="home"] section#faq .faq-q{
    font-size: 18px;
    padding: 16px 16px;
  }

  body[data-page="home"] section#faq .faq-a{
    padding: 0 16px;
    max-width: 100%;
  }

  body[data-page="home"] section#faq .faq-item.open .faq-a{
    padding: 12px 16px 24px;
  }
}

/* Combined block: Final CTA + Contact cards */
body[data-page="home"] section#final-cta.final-contact-combo{
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding-top: 34px;
  padding-bottom: 34px;
  margin-bottom: 80px;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-grid{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 22px;
  align-items: start;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-left{
  text-align: left;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-left > h2{
  margin: 0 0 12px;
  text-align: left !important;
  font-size: clamp(32px, 2.8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-left > p{
  margin: 0 0 16px;
  text-align: left !important;
  max-width: none;
  color: #4f667a;
  font-size: 15px;
  line-height: 1.66;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-grid{
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-card{
  min-height: 196px;
  padding: 22px 20px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.68);
  background:
    radial-gradient(120% 120% at 80% 20%, rgba(170, 214, 232, .16), transparent 58%),
    rgba(255,255,255,.44);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  backdrop-filter: blur(20px) saturate(1.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 14px 34px rgba(28, 53, 74, .10);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-card::before{
  content: none;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-card.whatsapp,
body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-card.telegram{
  background:
    radial-gradient(120% 120% at 80% 20%, rgba(170, 214, 232, .16), transparent 58%),
    rgba(255,255,255,.44);
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-platform{
  color: #17344c;
  font-size: 30px;
  font-size: clamp(22px, 1.5vw, 30px);
  line-height: 1.2;
  letter-spacing: .04em;
  font-weight: 900;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-value{
  color: #61788c;
  font-size: 15px;
  font-weight: 600;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-card-top{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-btn{
  margin-top: auto;
  align-self: center;
  border-radius: 14px;
  border: 1px solid rgba(130,163,189,.44);
  background: linear-gradient(135deg, #45a6ef, #2f81e8);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 10px 22px rgba(47,129,232,.24);
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-btn.whatsapp,
body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-btn.telegram{
  border-color: rgba(130,163,189,.44);
  background: linear-gradient(135deg, #45a6ef, #2f81e8);
}

body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 12px 24px rgba(47,129,232,.28);
}

@media (max-width: 1000px){
  body[data-page="home"] section#final-cta.final-contact-combo .final-contact-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body[data-page="home"] section#final-cta.final-contact-combo .final-contact-right .contact-grid{
    grid-template-columns: 1fr;
  }

  body[data-page="home"] section#final-cta.final-contact-combo .final-contact-left > h2{
    font-size: 34px;
  }
}

/* Standalone Contact section in site style (contact page) */
body[data-page="contact"] section.contact{
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  padding-top: 30px;
  padding-bottom: 36px;
}

body[data-page="contact"] section.contact .contact-head{
  margin-bottom: 16px;
}

body[data-page="contact"] section.contact .contact-title{
  color: #102331;
}

body[data-page="contact"] section.contact .contact-sub{
  color: #5a7286;
  max-width: 900px;
  margin: 0 auto;
}

body[data-page="contact"] section.contact .contact-grid{
  margin-top: 16px;
  gap: 16px;
}

body[data-page="contact"] section.contact .contact-card{
  min-height: 196px;
  padding: 22px 20px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.68);
  background:
    radial-gradient(120% 120% at 80% 20%, rgba(170, 214, 232, .16), transparent 58%),
    rgba(255,255,255,.44);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  backdrop-filter: blur(20px) saturate(1.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 14px 34px rgba(28, 53, 74, .10);
}

body[data-page="contact"] section.contact .contact-card::before{
  content: none;
}

body[data-page="contact"] section.contact .contact-card.whatsapp,
body[data-page="contact"] section.contact .contact-card.telegram{
  background:
    radial-gradient(120% 120% at 80% 20%, rgba(170, 214, 232, .16), transparent 58%),
    rgba(255,255,255,.44);
}

body[data-page="contact"] section.contact .contact-platform{
  color: #17344c;
  font-size: clamp(22px, 1.5vw, 30px);
  line-height: 1.2;
  letter-spacing: .04em;
}

body[data-page="contact"] section.contact .contact-value{
  color: #61788c;
  font-size: 15px;
}

body[data-page="contact"] section.contact .contact-btn{
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(130,163,189,.44);
  background: linear-gradient(135deg, #45a6ef, #2f81e8);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 10px 22px rgba(47,129,232,.24);
}

body[data-page="contact"] section.contact .contact-btn.whatsapp,
body[data-page="contact"] section.contact .contact-btn.telegram{
  border-color: rgba(130,163,189,.44);
  background: linear-gradient(135deg, #45a6ef, #2f81e8);
}

/* Unified heading scale on Home */
body[data-page="home"] section .container > h2,
body[data-page="home"] .seo-title,
body[data-page="home"] .contact-title,
body[data-page="home"] .sticky-split-title,
body[data-page="home"] .solution-h2{
  font-size: 46px !important;
  font-weight: 700 !important;
  color: #102331 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
}

@media (max-width: 900px){
  body[data-page="home"] section .container > h2,
  body[data-page="home"] .seo-title,
  body[data-page="home"] .contact-title,
  body[data-page="home"] .sticky-split-title,
  body[data-page="home"] .solution-h2{
    font-size: 34px !important;
  }
}

/* Typography system: only 2 font weights site-wide */
body{
  font-weight: 500;
}

h1, h2, h3, h4,
.brand,
.step-title,
.provider-name,
.contact-title,
.contact-platform,
.t-name,
.faq-q,
.tabs-title,
.solution-title,
.seo-title{
  font-weight: 700 !important;
}

p, li, span, a, button, input, textarea, label,
.lead, .subcenter, .features-subtitle, .seo-text, .points, .step-text,
.contact-sub, .contact-value, .t-role, .faq-a, .footer-copy{
  font-weight: 500 !important;
}

.step-title{
  margin: 0 0 6px;
}

.provider-name{
  margin: 0;
}

.contact-platform{
  margin: 0;
}

.t-name{
  margin: 10px 0 0;
}

/* Global font lock */
body,
button,
input,
textarea,
select{
  font-family: var(--font-system) !important;
}

/* Mobile fixes: header, hero cards, intro progress, FAQ */
.burger{
  line-height: 0;
  align-items: center;
  justify-content: center;
  position: relative;
}

.burger .burger-icon{
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  flex: 0 0 auto;
}

.burger .burger-icon svg{
  width: 18px;
  height: 18px;
  display: block;
  transform: translateY(0);
}

@media (max-width: 900px){
  body[data-page] .header-inner{
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    display: grid;
    align-items: center;
  }

  body[data-page] .logo{
    min-width: 0;
  }

  body[data-page] .logo-text{
    min-width: 0;
    overflow: hidden;
  }

  body[data-page] .brand{
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page] .tagline{
    display: none;
  }

  body[data-page] .burger{
    margin-left: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  body[data-page="home"] .mobile-nav{
    background: rgba(238,245,251,.94);
    border-top: 1px solid rgba(140,167,188,.26);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  body[data-page="home"] section#top .hero-right{
    min-height: 292px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.64);
    background: linear-gradient(180deg, #e1e8ef, #dce5ee);
    box-shadow: 0 16px 34px rgba(28, 53, 74, .12);
    overflow: hidden;
  }

body[data-page="home"] section#top .hero-right::before{
  content: "";
  position: absolute;
  right: -16%;
  top: 50%;
  width: 95%;
  height: 74%;
  transform: translateY(-50%);
  border-radius: 999px 0 0 999px;
  background:
    radial-gradient(130% 130% at 12% 50%, rgba(126, 74, 255, .72), transparent 58%),
    radial-gradient(110% 110% at 72% 26%, rgba(255, 84, 120, .75), transparent 56%),
    radial-gradient(100% 120% at 48% 78%, rgba(90, 194, 255, .62), transparent 60%);
  z-index: 0;
}

  body[data-page="home"] section#top .hero-right::after{
    content: "";
    position: absolute;
    right: 10%;
    top: 12%;
    width: 28%;
    height: 76%;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.72);
    background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.18));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    z-index: 1;
  }

  body[data-page="home"] section#top .hero-mouse-field{
    position: relative;
    z-index: 2;
  }

  body[data-page="home"] section#top .mouse-block{
    pointer-events: none !important;
    touch-action: auto;
    cursor: default;
  }

  body[data-page="home"] .intro-scroll-progress{
    display: none !important;
  }
}

/* Logo icon size tune */
.logo-mark img{
  width: 26px;
  height: 26px;
  transform: scale(1.03);
  transform-origin: center;
}

/* Sticky behavior restore */
body[data-page] .header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

body[data-page] #app{
  padding-top: var(--header-offset, 92px);
}

/* ===== Intro2 (rebuilt from scratch) ===== */
body[data-page="home"] .intro2-top-section{
  padding: 0;
  margin: 0 0 18px;
}

body[data-page="home"] .intro2-top-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

body[data-page="home"] .intro2{
  --intro2-card-radius: 26px;
  --intro2-card-border: 1px solid rgba(255,255,255,.64);
  --intro2-card-bg:
    radial-gradient(120% 120% at 78% 24%, rgba(174,220,232,.24), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.20));
  --intro2-card-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 14px 36px rgba(28,53,74,.10);
  --intro2-card-blur: blur(16px) saturate(142%);
  --intro2-progress-grad: linear-gradient(90deg, #39d0ff 0%, #7ab7ff 38%, #9f97ff 67%, #f2a45e 100%);
  padding: 0;
  margin: 0;
  overflow: visible;
}

body[data-page="home"] .intro2-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  gap: 18px;
  overflow: visible;
}

body[data-page="home"] .intro2-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  overflow: visible;
}

body[data-page="home"] .intro2-sticky-wrap{
  position: relative;
  top: auto;
  align-self: start;
  margin: 0;
  z-index: 2;
}

body[data-page="home"] .intro2-steps{
  display: grid;
  gap: 14px;
}

body[data-page="home"] .intro2-card{
  border-radius: var(--intro2-card-radius);
  border: var(--intro2-card-border);
  background: var(--intro2-card-bg);
  -webkit-backdrop-filter: var(--intro2-card-blur);
  backdrop-filter: var(--intro2-card-blur);
  box-shadow: var(--intro2-card-shadow);
  padding: clamp(22px, 2.3vw, 30px);
  margin: 0;
}

body[data-page="home"] .intro2-sticky-card{
  position: relative;
  padding-bottom: clamp(38px, 4.1vw, 48px);
  box-sizing: border-box;
}

body[data-page="home"] .intro2-title,
body[data-page="home"] .intro2-step-title{
  margin: 0 0 12px;
  color: #163047;
  letter-spacing: -0.022em;
  line-height: 1.12;
}

body[data-page="home"] .intro2-title{
  font-size: clamp(30px, 2.2vw, 42px);
}

body[data-page="home"] .intro2-step-title{
  font-size: clamp(28px, 2vw, 40px);
}

body[data-page="home"] .intro2-text{
  margin: 0;
  font-size: clamp(14px, .95vw, 16px);
  line-height: 1.62;
  color: #4f667a;
}

body[data-page="home"] .intro2 .intro-scroll-progress{
  position: absolute;
  left: clamp(18px, 2.2vw, 28px);
  right: clamp(18px, 2.2vw, 28px);
  bottom: clamp(14px, 1.7vw, 18px);
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.56);
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 6px 14px rgba(27,54,75,.10);
  overflow: hidden;
}

body[data-page="home"] .intro2 .intro-scroll-progress-fill{
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--intro2-progress-grad);
  transition: width .22s ease-out;
}

@media (max-width: 900px){
  body[data-page="home"] .intro2-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body[data-page="home"] .intro2-sticky-wrap{
    position: static;
    top: auto;
  }

  body[data-page="home"] .intro2-card{
    border-radius: 20px;
    padding: 18px 16px;
  }

  body[data-page="home"] .intro2-title{
    font-size: 34px;
  }

  body[data-page="home"] .intro2-step-title{
    font-size: 32px;
  }
}

.cta-banner-center{
  text-align: center;
}

.section-unknown-type{
  padding: 18px;
  color: #bdbdbd;
}

.section-render-error{
  margin: 12px 0;
  padding: 18px;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  color: #ffb3b3;
  background: #1a1a1a;
}