/* ===== Base CSS (site-wide) ===== */

:root{
--bg:#130b1a;
  --page-bg:#130b1a;
  --ink:#f2e8ff;
  --muted:#c7b3d9;
  --panel:#1e0f2c;
  --line:#2b1840;
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;

  --brand:#ff0059;
  --brand2:#00c6ff;

  --btn:#ff2e86;
  --btn2:#ff4da0;
  --btn-bg: linear-gradient(90deg,#ff2e86,#00c6ff);
  --cta-text:#fff;

  --theme-color:#ff2e86;

  --hero-from:#1a0f25;
  --hero-to:#2b0045;
  --hero-frame:#1b0b2c;
  --hero-frame-border:#3a1c58;
  --hero-title:#ffbdf1;
  --hero-lead:#ffd5ff;

  --header-bg:#1a0f25;
  --header-border:#302053;
  --footer-ink:#c9b8ff;
  --footer-link:#ff8ce0;

  --logo-bg: linear-gradient(135deg,#ff0059,#00c6ff,#ffe600,#00ff88);
  --logo-color:#fff;
  --logo-text:#fff;

  --soft-from:#20102f;
  --soft-to:#130b1a;

  /* this is the key line */
  --h3-color:#f8d9f1;
  --h2-color:#f8d9f1;
}


/* Reset / basics */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  line-height:1.65;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:focus-visible, button:focus-visible{outline:3px solid #91e7f2;outline-offset:2px;border-radius:10px}
img,picture,video,canvas{max-width:100%;height:auto;display:block}
.container{width:min(92%,1180px);margin-inline:auto}

/* Header */
header{background:var(--header-bg);border-bottom:1px solid var(--header-border);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;gap:.8rem;padding:.8rem 0;color:#e6f7fb}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:900}
.logo{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;font-weight:900
}
.spacer{flex:1}
.cta{
  display:inline-block;
  background: var(--btn-bg, var(--btn)); /* <-- теперь поддерживает градиент тем */
  color: var(--cta-text, #06222a);
  padding:.75rem 1.1rem;border-radius:14px;font-weight:800;line-height:1;
  border:2px solid var(--btn);transition:background .2s,border-color .2s,color .2s;
}
@media (hover:hover){
  .cta:hover{background:var(--btn2);border-color:var(--btn2);color:#03161c}
}

/* Sections */
.section{padding:clamp(1.4rem,4vw,2.6rem) 0;background:var(--page-bg, var(--bg))}
.section h2{scroll-margin-top:80px}


.section-soft{background:linear-gradient(180deg,var(--soft-from),var(--soft-to))}


.band{background:#fff;box-shadow:inset 0 -1px 0 #eef2f7,inset 0 1px 0 #eef2f7}

/* Hero */
.hero{
  background:linear-gradient(180deg,var(--hero-from) 0%,var(--hero-to) 100%);
  border-bottom:1px solid var(--header-border)
}
.hero-title{
  font-size:clamp(1.9rem,5.4vw,3rem);
  font-weight:900;letter-spacing:-.02em;
  text-align:center;color:var(--hero-title)
}
.hero p.lead{
  max-width:78ch;margin:0 auto 1.1rem;
  text-align:center;color:var(--hero-lead)
}
.hero-frame{
  background:var(--hero-frame);border:1px solid var(--hero-frame-border);border-radius:16px;
  position:relative;box-shadow:0 14px 36px rgba(2,8,23,.45);
  aspect-ratio:16/9;min-height:clamp(240px, 50vw, 560px);
}
.hero-preload{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#eafcff;font-weight:900;letter-spacing:.06em}
.hero-note{position:absolute;left:0;right:0;bottom:12px;text-align:center;opacity:.45;font-weight:800;letter-spacing:.08em}

/* Headings (as in light-blue spec) */
h1{
  font-size:clamp(1.9rem,5.4vw,3rem);
  font-weight:900;letter-spacing:-.02em;
  color:var(--brand, #09A7FF);
  text-align:center;
}

.section h2{
  font-size:clamp(1.25rem,3vw,2.1rem);
  font-weight:900;margin-bottom:1rem;letter-spacing:-.02em;
  color:var(--brand, #09A7FF);
}

/* Cards grid */
.grid{display:grid;gap:1rem}
@media (min-width:900px){ .grid{grid-template-columns:1fr 1fr} }

/* Content cards */
.card{
  position:relative;
  padding:clamp(1rem, 2.4vw, 1.4rem);
  border-radius: var(--radius);
  border:1px solid #e5eef7;
  background: var(--panel);
  box-shadow:0 6px 24px rgba(2, 8, 23, .06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:5px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}
.card h2{
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); 
  line-height: 1.25;margin-bottom:.55rem;
  font-weight:900;color:var(--h3-color, #0f172a);
}
.card p,.card ul{
  color: var(--muted);
  font-size:clamp(1rem, 2.2vw, 1.0625rem);
  line-height:1.7;margin:.6rem 0 .8rem;
}

/* Lists in cards */
.card ul{
  list-style:none;padding-left:0;
  display:grid;gap:.55rem;
}
.card li{
  /*position:relative; */
  padding:.55rem .75rem .55rem 1.3rem;
  border:1px solid #eef2f7;border-radius:10px;background:#fff;
}
.card li::before{
  content:"";position:absolute;left:.55rem;top:.95rem;
  width:.5rem;height:.5rem;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--brand) 0 45%, var(--brand2) 46% 100%);
  box-shadow:0 0 0 2px #fff;
}
@media (hover:hover)){
  .card:hover{transform: translateY(-2px);box-shadow:0 10px 28px rgba(2,8,23,.12);border-color:#dbe5f0}
}

/* Comparison table (if used) */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
th,td{padding:.8rem 1rem;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}
th{background:#f7fbff;font-weight:800}
tr:last-child td{border-bottom:none}
.t-ok{white-space:nowrap}.t-ok::before{content:"✅ ";font-size:1em}
.t-no::before{content:"❌ ";font-size:1em}
.t-warn::before{content:"⚠️ ";font-size:1em}
.tag{display:inline-block;padding:.1rem .45rem;border-radius:999px;border:1px solid #cfe8f4;background:#eaf6ff;font-weight:700;font-size:.9em}

/* Tips full width block */
.tips-card{
  border-radius:20px;
  background:linear-gradient(180deg,#f8fbff 0%,#fff 100%);
  border:1px solid #e5e7eb;
  box-shadow:0 6px 24px rgba(2,8,23,.06);
  padding:clamp(1rem,2.4vw,1.6rem);
  max-width:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover){
  .tips-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(2,8,23,.1)}
}
.tips-card h3{
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  color:var(--h3-color, #0f172a);margin:1rem 0 .4rem;
  font-weight:800;position:relative;padding-left:1rem;
}
.tips-card h3::before{
  content:"";position:absolute;left:0;top:.45rem;
  width:5px;height:1.3em;border-radius:3px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
}
.tips-card p{color:var(--muted);line-height:1.65;margin:0 0 1rem;font-size:clamp(1rem,2.2vw,1.05rem)}

/* Footer */
footer{
  background:var(--footer-bg);
  color:var(--footer-ink);
  border-top:1px solid var(--header-border);
  padding:1.2rem 0;margin-top:2rem
}
footer .row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
footer a{color:var(--footer-link);transition:color .2s}
footer a:hover{color:#fff}

/* Footer brand links with vertical separators */
.footer-brands{
  display:flex;flex-wrap:wrap;gap:.75rem 1rem;justify-content:center;margin-top:.5rem
}
.footer-brands a{
  color:var(--footer-link);
  text-decoration:none;font-weight:600;position:relative;padding:0 .75rem
}
.footer-brands a:hover{color:#fff}
.footer-brands a:not(:last-child)::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  height:1em;width:1px;background-color:currentColor;opacity:.5
}

/* Media */
@media (max-width:640px){
  .nav{padding:.7rem 0}
  .cta{padding:.7rem 1rem}
}
@media (max-width:780px){#callmechat_container{height:520px}}
@media (max-width:520px){#callmechat_container{height:420px}}

/* ===== Home (generic) ===== */

/*  h2 */
.home-section {}


.home-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
  margin-bottom:1rem;
}
@media (max-width:980px){ .home-grid{ grid-template-columns:1fr; } }


.home-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.15rem;
  box-shadow:none;
}
/* h2 */
.home-card h2{ 
  font-size:clamp(1.15rem,2.4vw,1.7rem);
  margin-bottom:1rem;
}


.home-img{
  border-radius:16px;
  border:1px solid var(--line);
  width:100%;
  height:auto;
  display:block;
}


.tips-card--flat{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  margin-top:.4rem;
}
.tips-card--flat h3{ margin:.7rem 0 .35rem; font-weight:800; }
.tips-card--flat p { margin:0 0 .5rem; color:var(--muted); }

.home-full .home-card{ margin-bottom:1rem; }


.home-section .home-full:last-of-type .home-card{
  text-align:center;
  background:#f9fbff;
  border:1px solid #e5e7eb;
  border-radius:22px;
  box-shadow:0 8px 30px rgba(2,6,23,.06);
  padding:clamp(1.2rem,3.6vw,2rem);
  position:relative;overflow:hidden;
}
.home-section .home-full:last-of-type .home-card::before{
  content:"";position:absolute;left:0;top:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  border-top-left-radius:22px;border-top-right-radius:22px;
}
.home-section .home-full:last-of-type .home-card h2{
  font-size:clamp(1.6rem,4.4vw,2.6rem); 
  letter-spacing:-.02em;color:#0f172a;margin:.2rem 0 .6rem;
}
.home-section .home-full:last-of-type .home-card p{
  color:var(--muted);
  font-size:clamp(1rem,1.6vw,1.15rem);
  max-width:78ch;margin:0 auto 0.8rem;
}

.home-section .home-full:last-of-type .home-card .cta-button{
  display:inline-block;
  padding:1rem 2.2rem;
  font-weight:800;
  border-radius:14px;
  border:2px solid var(--btn);
  background:var(--btn);
  color:#fff;
  transition:transform .15s ease;
  font-size:clamp(1rem,1.6vw,1.15rem);
}
.home-section .home-full:last-of-type .home-card .cta-button:hover{
  transform:translateY(-1px);
}
/* ==== Footer (dark) ==== */
footer {
  background: #0b1220;              
  color: #cfe6ff;                   
  padding: 1.6rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
footer a { color: #8ee5ff; }
footer a:hover { color: #b5f0ff; }

/* ===== CTA block styles ===== */

.cta-card {
  background: var(--panel);
  border: 1px solid #e5eef7;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.cta-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 0.8rem;
}

.cta-text {
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 1.6rem;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-actions {
  display: flex;
  justify-content: center;
}

/* Large CTA button */
.btn-xl {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  border: none;
  border-radius: 14px;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn-xl:hover {
  background: var(--brand2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
footer, .site-footer{
  background: #0f172a;
  color: #cbd5e1;
  border-top: 1px solid rgba(255,255,255,.06);
}
footer a, .site-footer a{
  color: #7dd3fc;
}
footer a:hover, .site-footer a:hover{
  color: #bae6fd;
}
/* ===== Home Grid Blocks ===== */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: stretch; 
  gap: 2rem;
  margin-bottom: 2rem;
}

.home-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ===== IMG ===== */
.home-img {
  width: 100%;
  height: 420px;             
  object-fit: cover;         
  border-radius: var(--radius);
  display: block;
}


.home-grid > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*  */
@media (max-width: 768px) {
  .home-img {
    height: 280px;
  }
}
/* === LEGAL PAGE CLEAN STYLE === */
.legal-page ul {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0 1rem;
}

.legal-page li {
  background: none !important;
  border-radius: 0;
  padding: 0.25rem 0;
  box-shadow: none !important;
  border: none !important;
}

/*  tips-card*/
.legal-page .tips-card,
.legal-page .card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* ===== FAQ with top separators ===== */
.faq-list {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg, 22px);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  box-shadow: 0 6px 18px rgba(2,8,23,.06);
}

.faq-list .faq-q {
  position: relative;
  margin: 1.6rem 0 .6rem;
  padding-top: 1rem;                 
  font-weight: 900;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--h3-color, #0f172a);
}

.faq-list .faq-q::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--line);           
  border-radius: 999px;
}


.faq-list .faq-q::after{
  content:"";
  position:absolute; top:-1px; left:0;
  width:72px; height:4px; border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}


.faq-list .faq-q:first-of-type { margin-top: .2rem; padding-top: 0; }
.faq-list .faq-q:first-of-type::before,
.faq-list .faq-q:first-of-type::after { display: none; }

.faq-list .faq-a {
  color: var(--muted);
  margin: 0 0 1rem;
  line-height: 1.65;
}

/* ===== Language Switcher ===== */
.lang-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  color: #e2e8f0;
  cursor: pointer;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .38rem .75rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  line-height: 1;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}
.lang-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
}

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  background: #1e0f2c;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: .4rem;
  min-width: 155px;
  z-index: 200;
  box-shadow: 0 10px 32px rgba(0,0,0,.55);
  flex-direction: column;
  gap: .12rem;
}
.lang-select.open .lang-menu {
  display: flex;
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .44rem .76rem;
  border-radius: 9px;
  font-size: .9rem;
  font-weight: 600;
  color: #e2e8f0;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.lang-menu a:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.lang-menu a.lang-active {
  background: rgba(255,100,160,.15);
  color: #ffbdf1;
}

/* Footer lang-switch (legacy, kept for compat) */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.lang-switch a {
  font-size: .85rem;
  font-weight: 600;
  color: #7dd3fc;
  padding: .25rem .5rem;
  border-radius: 7px;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.lang-switch a:hover,
.lang-switch a.active {
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* RTL support */
[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}
[dir="rtl"] .tips-card h3 {
  padding-left: 0;
  padding-right: 1rem;
}
[dir="rtl"] .tips-card h3::before {
  left: auto;
  right: 0;
}
[dir="rtl"] .home-grid {
  direction: rtl;
}

@media (max-width: 640px) {
  .lang-btn { font-size: .78rem; padding: .32rem .6rem; }
  .lang-menu { min-width: 140px; }
}