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



:root {
  --teal:       #0d9488;
  --teal-d:     #0f766e;
  --teal-l:     #ccfbf1;
  --teal-f:     #f0fdfa;
  --blue:       #0ea5e9;
  --blue-d:     #0284c7;
  --purple:     #8b5cf6;
  --purple-d:   #7c3aed;
  --purple-l:   #ede9fe;
  --purple-f:   #f5f3ff;
  --pink:       #ec4899;
  --orange:     #f59e0b;
  --green:      #10b981;
  --red:        #ef4444;
  --tg:         #229ed9;
  --wa:         #25d366;

  --ink:        #0b1220;
  --text:       #1e293b;
  --text-2:     #334155;
  --muted:      #64748b;
  --muted-2:    #94a3b8;
  --line:       #e5e7eb;
  --line-soft:  #eef2f6;
  --arrow:      #4f8b86;
  --bg:         #ffffff;
  --bg-2:       #f8fafc;
  --bg-3:       #f1f5f9;

  --page:       #ffffff;
  --surface:    #ffffff;
  --surface-2:  #f8fafc;
  --surface-3:  #f1f5f9;

  --r-sm:       10px;
  --r:          14px;
  --r-lg:       18px;
  --r-xl:       22px;

  --sh-xs:      0 1px 2px rgba(15,23,42,.04);
  --sh-sm:      0 2px 8px rgba(15,23,42,.06);
  --sh:         0 6px 24px -4px rgba(15,23,42,.08), 0 2px 6px -2px rgba(15,23,42,.04);
  --sh-lg:      0 20px 48px -12px rgba(15,23,42,.18), 0 8px 16px -8px rgba(15,23,42,.08);
  --sh-xl:      0 32px 72px -16px rgba(15,23,42,.22), 0 12px 24px -12px rgba(15,23,42,.1);
}



html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip; }


body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text); background: var(--bg);
  line-height: 1.6; overflow-x: hidden;
  font-feature-settings: 'cv11', 'ss01';
}


a { text-decoration: none; color: inherit; }


img, svg { max-width: 100%; display: block; }


button { font-family: inherit; }



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


.sw-fade { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 54px), transparent);
           mask-image: linear-gradient(90deg, #000 calc(100% - 54px), transparent); }


.sw-drag { cursor: grabbing; scroll-behavior: auto; }


.sw-drag * { pointer-events: none; }


.tc { text-align: center; }



section { padding: 72px 0; position: relative; scroll-margin-top: 84px; }



h1, h2, h3, h4 { font-family: 'Manrope', 'Inter', sans-serif; letter-spacing: -0.02em; }



.label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 600;
  background: var(--teal-f); color: var(--teal-d);
  border: 1px solid rgba(13,148,136,.16);
  margin-bottom: 20px;
}


.label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,.18);
}


.label svg { width: 13px; height: 13px; flex-shrink: 0; }



.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}


.btn-primary {
  background: var(--ink); color: #fff;
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.08);
}


.btn-primary:hover { background: #111a2e; transform: translateY(-1px); box-shadow: var(--sh), inset 0 1px 0 rgba(255,255,255,.08); }


.btn-secondary {
  background: var(--surface); color: var(--text);
  border-color: var(--line);
  box-shadow: var(--sh-xs);
}


.btn-secondary:hover { border-color: #cbd5e1; background: var(--surface-2); }


.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: 11px; }


.btn-white { background: var(--surface); color: var(--ink); }


.btn-white:hover { background: var(--teal-f); transform: translateY(-1px); }


.btn-ghost-white {
  background: rgba(255,255,255,.1); color: #fff;
  border-color: rgba(255,255,255,.2); backdrop-filter: blur(8px);
}


.btn-ghost-white:hover { background: rgba(255,255,255,.18); }


.btn svg { width: 16px; height: 16px; flex-shrink: 0; }



.sec-title {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 700;
  line-height: 1.15; margin-bottom: 14px; color: var(--ink);
  letter-spacing: -0.025em;
}


.sec-sub {
  font-size: 16.5px; color: var(--muted);
  max-width: 580px; margin-bottom: 56px;
  line-height: 1.6;
}



.header {
  position: sticky; top: 0; z-index: 200;
  background:
    linear-gradient(180deg, rgba(13,148,136,.055), rgba(255,255,255,0) 78%),
    rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(1.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
  border-bottom: 1px solid rgba(15,23,42,.06);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}


.header.hdr-hidden { transform: translateY(-100%); }



.header.hdr-tight {
  box-shadow: 0 8px 26px -16px rgba(15,23,42,.45);
  background:
    linear-gradient(180deg, rgba(13,148,136,.03), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.94);
}


.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; transition: height .3s cubic-bezier(.4,0,.2,1); }


.header.hdr-tight .header-inner { height: 56px; }


.header-logo { display: flex; align-items: center; gap: 10px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -0.02em; }


.header-logo img { height: 34px; width: auto; transition: height .3s cubic-bezier(.4,0,.2,1); }


.header.hdr-tight .header-logo img { height: 27px; }


.header-nav { display: flex; align-items: center; gap: 3px; }


.header-nav a { padding: 10px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text); transition: color .2s, transform .2s; }



.hdr-navwrap { position: relative; display: flex; align-items: center; order: 1; }


.header-nav a.hd-pill {
  background: var(--surface-2); color: var(--text-2, #334155);
  border: 1px solid var(--line);
  padding: 7px 14px; font-weight: 600;
  transition: all .15s;
}


.header-nav a.hd-pill:hover { background: var(--surface); color: var(--ink); border-color: var(--teal-l); box-shadow: 0 2px 8px rgba(13,148,136,.08); }


.header-nav .btn { margin-left: 0px; padding: 9px 18px; font-size: 14px; }


.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }


.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }



.header-inner > .header-logo { order: 0; margin-right: auto; }


.header-nav { order: 1; }



.hdr-reg { order: 2; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; margin-right: 4px; padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #34d399 0%, var(--green) 55%, #059669 100%); box-shadow: 0 9px 24px -9px rgba(16,185,129,.8); white-space: nowrap; transition: transform .2s, box-shadow .2s; }


.hdr-reg svg, .hdr-reg span { position: relative; z-index: 1; }


.hdr-reg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.5) 50%, transparent 66%);
  transform: translateX(-125%);
}


.hdr-reg:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(16,185,129,.8); }


.hdr-reg:hover::before { animation: hdrSheen .9s ease; }


@keyframes hdrSheen { to { transform: translateX(125%); } }


.hdr-reg svg { width: 17px; height: 17px; }



.header-nav a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }


.header-nav a svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); transition: color .2s, transform .32s cubic-bezier(.34,1.3,.5,1); }


.header-nav a:not(.btn):hover { color: var(--teal-d); transform: translateY(-1px); }


.header-nav a:not(.btn):hover svg { color: var(--teal); transform: rotate(-7deg) scale(1.14); }


.header-nav a.hd-pill { background: var(--teal-f); color: var(--teal-d); border-color: var(--teal-l); }


.header-nav a.hd-pill:hover { background: var(--surface); color: var(--teal-d); border-color: var(--teal); }



.header-nav .btn.hd-kb { margin-left: 10px; padding: 10px 16px; border-radius: 999px; background: var(--teal-f); color: var(--teal-d); border: 1.5px solid var(--teal-l); box-shadow: none; font-weight: 600; transition: background .2s, border-color .2s, color .2s, transform .2s; }


.header-nav .btn.hd-kb svg { color: var(--teal); }


.header-nav .btn.hd-kb:hover { background: var(--surface); border-color: var(--teal); color: var(--teal-d); transform: translateY(-2px); }


.header-nav .btn.hd-kb:hover svg { color: var(--teal); transform: none; }



.hdr-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--teal), var(--blue)); transition: width .12s linear; }



.hdr-lang { order: 3; position: relative; margin-left: 16px; padding-left: 16px; }


.hdr-lang::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: var(--line); }


.hdr-lang-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }


.hdr-lang-btn:hover { border-color: var(--teal-l); }


.hdr-lang-name { display: none; }


.hdr-lang-flag { width: 20px; height: 14px; border-radius: 2px; overflow: hidden; display: inline-flex; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }


.hdr-lang-flag svg { width: 100%; height: 100%; display: block; }


.hdr-lang-btn > svg { width: 13px; height: 13px; color: var(--muted); }


.hdr-lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border-radius: 12px; box-shadow: 0 12px 32px rgba(11,18,32,.18); border: 1px solid var(--line); padding: 6px; z-index: 50; min-width: 152px; }


.hdr-lang-menu button { display: block; width: 100%; text-align: left; padding: 9px 13px; border: none; background: none; font-size: 14px; font-family: inherit; color: var(--text); border-radius: 8px; cursor: pointer; }


.hdr-lang-menu button:hover { background: var(--teal-f); color: var(--teal-d); }


.mob-nav { display: none; flex-direction: column; gap: 2px; padding: 10px 0 14px; border-top: 1px solid var(--line); }


.mob-nav a { padding: 11px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--text); }


.mob-nav a:hover { background: var(--surface-2); }


.mob-nav.open { display: flex; }


.mob-nav a.mob-link-ic { display: flex; align-items: center; gap: 12px; }


.mob-nav .mli {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; flex-shrink: 0;
}


.mob-nav .mli svg { width: 17px; height: 17px; position: relative; z-index: 1; }


.mob-nav .mli::before { content: ''; position: absolute; inset: 0; opacity: .14; border-radius: 9px; }


.mob-nav .mli.ic-teal { color: var(--teal-d); }


.mob-nav .mli.ic-teal::before { background: linear-gradient(135deg, var(--teal), var(--blue)); }


.mob-nav .mli.ic-blue { color: #0284c7; }


.mob-nav .mli.ic-blue::before { background: linear-gradient(135deg, #0ea5e9, #6366f1); }


.mob-nav .mli.ic-purple { color: #6d28d9; }


.mob-nav .mli.ic-purple::before { background: linear-gradient(135deg, #8b5cf6, #ec4899); }


.mob-nav .mli.ic-orange { color: #c2410c; }


.mob-nav .mli.ic-orange::before { background: linear-gradient(135deg, #f59e0b, #ef4444); }


.mob-nav .mli.ic-rose { color: #be123c; }


.mob-nav .mli.ic-rose::before { background: linear-gradient(135deg, #f43f5e, #f97316); }


.mob-nav .mli.ic-green { color: #047857; }


.mob-nav .mli.ic-green::before { background: linear-gradient(135deg, #10b981, #22d3ee); }


.mob-nav a.mob-cta {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #fff; font-weight: 700; text-align: center;
  margin-top: 8px; padding: 13px 14px;
}


.mob-nav a.mob-cta:hover { background: linear-gradient(135deg, var(--teal-d), var(--blue-d)); }

@media (max-width: 400px) {

  .reg-head img { height: 32px; margin-bottom: 10px; }

  .dlg-head img { height: 34px; }
}



.hdr-theme {
  order: 4; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-left: 6px; width: 38px; height: 38px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; color: var(--muted);
  transition: border-color .2s, color .2s, background .2s;
}


.hdr-theme:hover { border-color: var(--teal-l); color: var(--teal-d); }


.hdr-theme svg { width: 17px; height: 17px; }


.hdr-theme .th-sun { display: none; }


.hdr-theme .th-auto { display: none; }


[data-theme="dark"] .hdr-theme .th-moon { display: none; }


[data-theme="dark"] .hdr-theme .th-sun { display: inline; }


.hdr-theme.is-auto .th-sun, .hdr-theme.is-auto .th-moon { display: none; }


.hdr-theme.is-auto .th-auto { display: inline; }



.hdr-skin, .hdr-more { display: none; }


.hdr-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; opacity: 0; background: #34d399; box-shadow: 0 0 10px 1px rgba(52,211,153,.75); transition: opacity .22s ease; }

@media (min-width: 769px) and (max-width: 1329px) {

  .header, .header.hdr-tight {
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: none; box-shadow: 0 12px 30px -22px rgba(6,34,37,.85);
  }


  .hdr-skin {
    display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(103deg, #062225 0%, #0a2f30 46%, #0d3b39 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 9px), transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 9px), transparent);
  }

  .hdr-skin::before {
    content: ''; position: absolute; inset: 0; opacity: .3;
    background-image: radial-gradient(circle, rgba(94,234,212,.4) 1px, transparent 1px);
    background-size: 15px 15px;
    mask-image: linear-gradient(90deg, #000 0%, transparent 42%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 42%);
  }


  .header .container { position: relative; z-index: 1; max-width: none; padding: 0 20px; }

  .header-inner, .header.hdr-tight .header-inner { height: 58px; }

  section { scroll-margin-top: 66px; }

  .header-logo img, .header.hdr-tight .header-logo img { height: 32px; }

  .header-inner > .header-logo { margin-right: 12px; }


  .hdr-navwrap { flex: 1; min-width: 0; gap: 18px; }


  .hdr-navwrap .header-nav {
    order: 0; flex: 1; min-width: 0; overflow: hidden; gap: 3px;
    justify-content: space-between;
    opacity: 0; transition: opacity .22s ease;
  }

  .hdr-navwrap .header-nav.hdr-set { opacity: 1; }

  .header-nav a, .header-nav a.btn {
    height: 36px; padding: 0 9px; margin: 0; gap: 7px;
    border: 0; border-radius: 10px; background: none; box-shadow: none;
    font-size: 13.2px; font-weight: 600; letter-spacing: -.01em;
    color: rgba(214,238,233,.8); flex-shrink: 0;
    transition: background .22s ease, color .22s ease;
  }

  .header-nav a svg { width: 14px; height: 14px; color: currentColor; opacity: .85; }

  .header-nav a:hover, .header-nav a:not(.btn):hover { background: rgba(94,234,212,.09); color: #fff; transform: none; }

  .header-nav a:hover svg, .header-nav a:not(.btn):hover svg { color: currentColor; transform: none; }

  .header-nav a.on {
    background: linear-gradient(100deg, rgba(45,212,191,.17), rgba(45,212,191,.06)); color: #fff;
    box-shadow: inset 0 0 0 1px rgba(94,234,212,.16);
  }

  .header-nav a.on .hdr-dot { opacity: 1; }


  .hdr-more { display: block; order: 1; position: relative; flex-shrink: 0; }


  .hdr-more::before {
    content: ''; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
    width: 1px; height: 20px; background: rgba(94,234,212,.17);
  }

  .hdr-more-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
    border-radius: 10px; border: 1px solid rgba(94,234,212,.16);
    background: rgba(94,234,212,.06); cursor: pointer; white-space: nowrap;
    color: rgba(214,238,233,.8); font: 600 13.2px 'Inter', sans-serif;
    transition: background .22s ease, color .22s ease;
  }

  .hdr-more-btn:hover { background: rgba(94,234,212,.13); color: #fff; }

  .hdr-more-btn svg { width: 16px; height: 16px; opacity: .85; }

  .hdr-more-list {
    position: absolute; right: 0; top: calc(100% + 9px); min-width: 214px; padding: 6px;
    border-radius: 14px; background: #0a2b2d; border: 1px solid rgba(94,234,212,.16);
    box-shadow: 0 22px 48px -16px rgba(0,0,0,.75); display: none; z-index: 6;
  }

  .hdr-more.open .hdr-more-list { display: block; }

  .hdr-more-list a {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px;
    color: rgba(214,238,233,.8); font-size: 13.2px; font-weight: 600;
    transition: background .22s ease, color .22s ease;
  }

  .hdr-more-list a:hover { background: rgba(94,234,212,.09); color: #fff; }

  .hdr-more-list a svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }

  .hdr-more-list .hdr-dot { margin-left: auto; }


  .hdr-reg {
    height: 38px; padding: 0 14px; margin: 0 0 0 8px; gap: 8px; border-radius: 12px;
    font: 700 13.5px 'Manrope', sans-serif;
    background: linear-gradient(135deg, #17c1ac, #0d9488);
    box-shadow: 0 12px 26px -14px rgba(20,184,166,.95);
  }

  .hdr-reg:hover { transform: none; box-shadow: 0 16px 32px -12px rgba(20,184,166,.95); }

  .hdr-reg:active { transform: scale(.97); }

  .hdr-reg svg { width: 16px; height: 16px; }


  .hdr-lang { margin-left: 6px; padding-left: 0; }

  .hdr-lang::before { display: none; }

  .hdr-theme {
    width: 38px; height: 38px; margin-left: 6px; border-radius: 12px;
    border-color: rgba(94,234,212,.16); background: rgba(94,234,212,.06);
    color: rgba(214,238,233,.8);
  }

  .hdr-theme:hover { background: rgba(94,234,212,.13); border-color: rgba(94,234,212,.16); color: #fff; }

  .hdr-lang-btn {
    height: 38px; padding: 0 7px; gap: 5px; border-radius: 12px;
    border-color: rgba(94,234,212,.16); background: rgba(94,234,212,.06);
    color: rgba(214,238,233,.8);
  }

  .hdr-lang-btn:hover { background: rgba(94,234,212,.13); border-color: rgba(94,234,212,.16); }

  .hdr-lang-flag { width: 21px; height: 14px; border-radius: 3px; box-shadow: none; }

  .hdr-lang-btn > svg { width: 15px; height: 15px; color: currentColor; opacity: .8; }

  .hdr-lang-menu {
    background: #0a2b2d; border-color: rgba(94,234,212,.16); border-radius: 14px;
    box-shadow: 0 22px 48px -16px rgba(0,0,0,.75);
  }

  .hdr-lang-menu button { color: rgba(214,238,233,.85); border-radius: 10px; }

  .hdr-lang-menu button:hover { background: rgba(94,234,212,.09); color: #fff; }


  .hdr-prog { background: linear-gradient(90deg, #5eead4, #2dd4bf); }
}



#hero {
  padding: 92px 0 48px;
  background: var(--surface);
  position: relative; overflow: hidden;
}



#hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 78% 52% at 50% 4%, #000 22%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 52% at 50% 4%, #000 22%, transparent 78%);
  pointer-events: none;
}



#hero::after {
  content: ''; position: absolute; inset: -18% -12% auto -12%; height: 132%; z-index: 0;
  background:
    radial-gradient(38% 42% at 84% 6%, rgba(13,148,136,.17), transparent 70%),
    radial-gradient(34% 38% at 10% 22%, rgba(14,165,233,.14), transparent 72%),
    radial-gradient(30% 34% at 58% 74%, rgba(139,92,246,.10), transparent 72%);
  filter: blur(28px);
  animation: heroDrift 26s ease-in-out infinite alternate;
  pointer-events: none;
}


.app-mockup {
  background: var(--surface); border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(15,23,42,.06),
    0 24px 64px -16px rgba(15,23,42,.22),
    0 10px 24px -12px rgba(15,23,42,.14);
  overflow: hidden; user-select: none;
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  transition: transform .4s ease;
}


.app-mockup:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }


.mock-chrome {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  display: flex; align-items: center;
}


.mc-dots { display: flex; gap: 6px; margin-right: 14px; }


.mc-dot { width: 10px; height: 10px; border-radius: 50%; }


.mc-r { background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }


.mc-y { background: #ffbd2e; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }


.mc-g { background: #28c840; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }


.mock-tabs { display: flex; gap: 2px; flex: 1; }


.mock-tab {
  padding: 5px 13px; border-radius: 7px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: all .15s;
  border: none; background: none; font-family: inherit;
}


.mock-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-xs), 0 0 0 1px var(--line); }


.mock-tab:hover:not(.active) { color: var(--text); }



.mock-next {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--line); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all .15s; flex-shrink: 0; margin-left: 4px;
}


.mock-next:hover { color: var(--ink); border-color: #cbd5e1; }


.mock-next svg { width: 13px; height: 13px; }



.mock-slides { position: relative; overflow: hidden; height: 276px; background: var(--surface); }


.mock-slide {
  position: absolute; inset: 0; padding: 14px;
  opacity: 0; transform: translateX(14px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}


.mock-slide.active { opacity: 1; transform: translateX(0); pointer-events: auto; }


.mock-slide.out { opacity: 0; transform: translateX(-14px); }



.p-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 10px; margin-bottom: 6px;
  border: 1px solid var(--line-soft); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}


.p-row:hover { border-color: var(--teal-l); box-shadow: 0 0 0 3px rgba(13,148,136,.06); }


.p-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal-l), #bae6fd);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--teal-d);
}


.p-nm { font-size: 13px; font-weight: 600; color: var(--ink); }


.p-nf { font-size: 11px; color: var(--muted); }


.p-tag { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; }


.tb { background: #dbeafe; color: #1e40af; }


.ta { background: #fef3c7; color: #92400e; }



.a-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px; margin-bottom: 6px;
  border: 1px solid var(--line-soft); background: var(--surface);
}


.a-time { font-size: 12.5px; font-weight: 700; color: var(--teal); min-width: 38px; }


.a-nm { font-size: 13px; font-weight: 600; color: var(--ink); }


.a-tp { font-size: 11px; color: var(--muted); }


.a-doc { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }


.a-free { color: var(--muted-2); font-style: italic; }



.t-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: 10px; margin-bottom: 6px;
  border: 1px solid var(--line-soft); background: var(--surface);
}


.t-chk {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid #cbd5e1;
  flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center;
}


.t-chk.done { background: var(--teal); border-color: var(--teal); }


.t-chk.done::after { content: ''; display: block; width: 4px; height: 8px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) translateY(-1px); }


.t-nm { font-size: 13px; font-weight: 600; color: var(--ink); }


.t-nm.done { text-decoration: line-through; color: var(--muted); }


.t-sf { font-size: 11px; color: var(--muted); }


.t-pri { margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; }


.pri-r { background: #fee2e2; color: #991b1b; }


.pri-b { background: #dbeafe; color: #1e40af; }


.pri-g { background: #d1fae5; color: #065f46; }



.mock-dots-nav { display: flex; justify-content: center; gap: 5px; padding: 10px 0 12px; border-top: 1px solid var(--line-soft); background: var(--surface); }


.mdn-btn { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; transition: all .25s; cursor: pointer; border: none; padding: 0; }


.mdn-btn.active { background: var(--teal); width: 20px; border-radius: 3px; }



#trust {
  padding: 40px 0 20px;
  background: var(--surface);
}



#features {
  background: linear-gradient(180deg,
    #ffffff 0%, var(--bg-2) 12%, var(--bg-2) 88%, #ffffff 100%);
  background-origin: border-box;
  padding-top: 44px; padding-bottom: 44px;
}



.to-top {
  position: fixed; left: 22px; bottom: 26px; z-index: 190;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--teal) 0%, var(--teal-d) 100%);
  box-shadow: 0 10px 26px -8px rgba(13,148,136,.55), 0 2px 6px -2px rgba(15,23,42,.2);
  opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}


.to-top.on { opacity: 1; transform: none; pointer-events: auto; }


.to-top:hover { box-shadow: 0 16px 34px -10px rgba(13,148,136,.7), 0 3px 8px -2px rgba(15,23,42,.22); }


.to-top:hover svg { transform: translateY(-2px); }


.to-top:active { transform: scale(.94); }


.to-top svg { width: 20px; height: 20px; stroke-width: 2.4; transition: transform .2s ease; }



.lang-flash {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 100% at 50% 0%,
    rgba(255,255,255,.94) 0%, rgba(240,253,250,.8) 55%, rgba(255,255,255,.6) 100%);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}


.lang-flash.go { animation: langFlash .52s ease both; }


@keyframes langFlash { 0% { opacity: 0; } 36% { opacity: 1; } 100% { opacity: 0; } }



#screenshots {
  --acc: var(--teal);

  position: relative; overflow: clip; overflow-clip-margin: 110px;

  padding: 42px 0 36px;

  background-color: color-mix(in srgb, var(--acc) 6%, var(--surface));
  background-image: linear-gradient(180deg,
    #ffffff 0%, transparent 22%, transparent 76%, #ffffff 100%);
  background-origin: border-box;
  transition: background-color .6s ease;
}



#screenshots::before {
  content: ''; position: absolute; left: 50%; top: 300px;
  width: 1100px; height: 520px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 20%, transparent), transparent 72%);
  filter: blur(46px); opacity: .55; transition: background .6s ease;
}


#screenshots .sec-title { font-size: 32px; margin-bottom: 7px; }


#screenshots .label { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {

  #hero::after { animation: none; }

  .lang-flash.go { animation: none; }
}



#comparison {
  background: linear-gradient(180deg,
    var(--bg-2) 0%, var(--bg-2) 88%, #ffffff 100%);
  background-origin: border-box;
}



#migration { background: var(--surface); }



#faq {
  background: linear-gradient(180deg,
    #ffffff 0%, var(--bg-2) 12%, var(--bg-2) 100%);
  background-origin: border-box;
}



.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }



footer {
  background:
    linear-gradient(180deg, #ffffff 0, rgba(255,255,255,.4) 26px, transparent 68px),
    var(--ink);
  background-origin: border-box;
  color: rgba(255,255,255,.6);
  padding: 72px 0 32px;
}



.demo-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(8,14,28,.75); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}


.demo-overlay.open { opacity: 1; pointer-events: all; }



.demo-iframe-wrap {
  position: relative;
  width: 100%; max-width: 1240px;
  height: min(92vh, 800px);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  transform: scale(.94) translateY(28px);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}


.demo-overlay.open .demo-iframe-wrap {
  transform: scale(1) translateY(0);
}



.demo-iframe-wrap iframe {
  width: 100%; height: 100%; border: none; display: block;
  background: #0b1220;
}



.demo-iframe-close {
  position: fixed; top: 16px; right: 16px; z-index: 1200;
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85); font-size: 17px;
  transition: background .15s, color .15s;
  font-family: inherit;
}


.demo-iframe-close:hover { background: rgba(239,68,68,.65); color: #fff; border-color: rgba(239,68,68,.45); }

@media (max-width: 768px) {

  .demo-iframe-wrap { height: 92vh; border-radius: 12px; }
}

@media (max-width: 480px) {

  .demo-overlay { padding: 0; }

  .demo-iframe-wrap { height: 100dvh; border-radius: 0; }

  .demo-iframe-close { top: 10px; right: 10px; }
}



.msg-row {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 8px; opacity: 0;
  animation: msgIn .4s ease forwards;
}


.mock-slide.active .msg-row:nth-child(1) { animation-delay: .1s; }


.mock-slide.active .msg-row:nth-child(2) { animation-delay: .8s; }


.mock-slide.active .msg-row:nth-child(3) { animation-delay: 1.5s; }


.mock-slide.active .msg-row:nth-child(4) { animation-delay: 2.2s; }


.msg-row.in { justify-content: flex-start; }


.msg-row.out { justify-content: flex-end; }


.msg-av {
  width: 24px; height: 24px; border-radius: 50%;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
  letter-spacing: -.5px;
}


.msg-tg { background: linear-gradient(135deg, #2aabee, #229ed9); }


.msg-ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }


.msg-bubble {
  position: relative; max-width: 76%;
  padding: 8px 12px;
  background: #f1f5f9; border-radius: 14px 14px 14px 4px;
  font-size: 12px; color: var(--ink); line-height: 1.4;
}


.msg-bubble-out {
  background: var(--teal); color: #fff;
  border-radius: 14px 14px 4px 14px;
}


.msg-src {
  display: block; font-size: 10px; font-weight: 700;
  color: var(--teal-d); margin-bottom: 2px;
  letter-spacing: .02em;
}


.msg-bubble-out .msg-src { color: rgba(255,255,255,.85); }


.msg-row.new-lead {
  margin-top: 6px; padding: 8px 12px;
  background: var(--teal-f); border: 1px dashed var(--teal-l);
  border-radius: 10px; color: var(--teal-d);
  font-size: 11.5px; font-weight: 600;
  align-items: center; gap: 6px;
}


.msg-row.new-lead svg { width: 14px; height: 14px; flex-shrink: 0; }



#platform {
  --crm: #10b981; --erp: #0ea5e9; --saas: #8b5cf6; --pacc: var(--crm);
  padding: 40px 0 44px;
  background-color: color-mix(in srgb, var(--pacc) 8%, var(--surface));
  background-image: linear-gradient(180deg, #fff 0%, transparent 14%, transparent 84%, #fff 100%);
  background-origin: border-box;
  transition: background-color .5s ease;
}


#platform .label { margin-bottom: 11px; }


#platform .sec-title { font-size: 34px; line-height: 1.2; margin-bottom: 8px; }


#platform .sec-sub { max-width: 640px; margin: 0 auto 18px; font-size: 15px; }

@media (max-width: 1080px) {

  #platform { padding: 28px 0 32px; }

  #platform .container { padding: 0 14px; }

  #platform .sec-title { font-size: 25px; }

  #platform .sec-sub { font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; }
}



#new-modules {
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
}


@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: .35; }
}



#saas {
  background:
    linear-gradient(180deg, #ffffff 0, rgba(255,255,255,.4) 26px, transparent 68px),
    linear-gradient(0deg, #ffffff 0, rgba(255,255,255,.4) 26px, transparent 68px),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139,92,246,.18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(13,148,136,.15), transparent 70%),
    linear-gradient(160deg, #0b1220 0%, #1a1f3a 100%);
  background-origin: border-box;
  color: #fff; position: relative; overflow: hidden;
}


#saas::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}


#saas .container { position: relative; z-index: 1; }



#pricing {
  background: linear-gradient(180deg,
    #ffffff 0%, var(--bg-2) 12%, var(--bg-2) 100%);
  background-origin: border-box;
}



#geo {
  --gacc: #0d9488;
  overflow-x: clip;
  padding: 44px 0 50px;
  background-color: color-mix(in srgb, var(--gacc) 9%, var(--surface));
  background-image: linear-gradient(180deg, #fff 0%, transparent 14%, transparent 82%, #fff 100%);
  background-origin: border-box;
  transition: background-color .7s ease;
}


#geo .sec-title { font-size: 38px; margin-bottom: 10px; }


#geo .sec-sub { max-width: 610px; margin: 0 auto 24px; font-size: 15px; }


#geo .label { margin-bottom: 12px; }

@media (max-width: 760px) {

  #geo { padding: 30px 0 34px; }

  #geo .sec-title { font-size: 26px; }

  #geo .sec-sub { font-size: 13.5px; margin-bottom: 16px; }

  @keyframes geoRoll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
}

@media (hover: hover) and (pointer: fine) {

  [data-tilt] { transition: transform .25s cubic-bezier(.22,1,.36,1); }
}

@media (prefers-reduced-motion: no-preference) {

  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }

  .reveal.on { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {

  .geo-grid { gap: 12px; }
}

@media (max-width: 768px) {

  section { padding: 64px 0; }

  .container { padding: 0 18px; }


  #features { padding-top: 36px; padding-bottom: 36px; }


  .header-nav { display: none; }


  .header-inner, .header.hdr-tight .header-inner { height: 64px; }

  .header-logo img, .header.hdr-tight .header-logo img { height: 30px; }

  .hdr-navwrap, .hdr-prog { display: none; }

  .hdr-reg { padding: 6px 10px; border-radius: 999px; margin-left: 0; margin-right: 0; }

  .hdr-lang { margin-left: 8px; padding-left: 0; }

  .hdr-lang::before { display: none; }

  section { scroll-margin-top: 72px; }

  .hamburger { display: flex; }

  .header-inner { height: 60px; }

  .header-inner > .header-logo { order: 1; margin: 0; flex: 1; justify-content: center; }

  .hdr-reg { order: 0; margin-right: 12px; padding: 5px 8px; font-size: 10.5px; gap: 3px; flex-shrink: 0; }

  .hdr-reg svg { width: 12px; height: 12px; }

  .hdr-lang { order: 2; margin-left: 4px; }

  .hdr-theme { width: 30px; height: 30px; margin-left: 4px; }

  .hdr-theme svg { width: 15px; height: 15px; }


  .mock-tabs { overflow-x: auto; scrollbar-width: none; }

  .mock-tabs::-webkit-scrollbar { display: none; }

  .mock-tab { flex-shrink: 0; }

  .msg-bubble { font-size: 12px; padding: 7px 10px; }


  .header {
    position: fixed; top: 0; left: 0; right: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }


  #hero { padding: 116px 0 56px; }

  .app-mockup { transform: none; }


  .shots-grid { grid-template-columns: 1fr; }


  .to-top { left: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); width: 42px; height: 42px; }

  .to-top svg { width: 18px; height: 18px; }


  #screenshots { padding: 56px 0 44px; }

  #screenshots::before { top: 200px; width: 100%; height: 360px; filter: blur(38px); opacity: .4; }
}

@media (max-width: 480px) {

  section { padding: 52px 0; }

  .container { padding: 0 18px; }


  #hero { padding: 104px 0 44px; }


  .mock-slides { height: 244px; }

  .mock-tab { font-size: 12px; padding: 4px 10px; }

  .p-row, .a-row, .t-row { padding: 8px 10px; gap: 9px; }

  .p-av { width: 28px; height: 28px; font-size: 10px; }

  .p-nm, .a-nm, .t-nm { font-size: 12px; }

  .p-nf, .a-tp, .t-sf { font-size: 10px; }

  .p-tag { font-size: 10px; padding: 2px 8px; }


  .label { font-size: 11.5px; padding: 5px 11px 5px 9px; }


  .sec-title { font-size: 25px; }

  .sec-sub { font-size: 14.5px; margin-bottom: 36px; }

  .cta-btns { flex-direction: column; gap: 10px; width: 100%; }

  .cta-btns .btn { width: 100%; justify-content: center; }


  .geo-card { padding: 14px 8px 12px; }

  .geo-flag { width: 56px; height: 38px; }

  .geo-name { font-size: 13px; }
}

@media (max-width: 360px) {

  .container { padding: 0 14px; }

  .geo-grid { gap: 8px; }
}


.pri-geo-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 15px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 100px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: border-color .2s, box-shadow .2s, color .2s, background .2s;
}


.pri-geo-chip img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }


.pri-geo-chip:hover { border-color: var(--teal-l); }


.pri-geo-chip[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-f); color: var(--teal-d); box-shadow: 0 4px 12px -4px rgba(13,148,136,.35); }


.pri-amt-req { font-size: 21px; letter-spacing: -0.01em; line-height: 1.2; }

@media (max-width: 480px) {

  .pri-geo-chip { flex-shrink: 0; }
}



.mm-veil, .mm { display: none; }

@media (min-width: 1330px) {


  :root { --mm-w: 210px; --mm-off: min(450px, max(318px, calc(100vw - 1390px))); }


  .mm-veil {

    --mm-fade: calc(var(--mm-off) - 20px);
    display: block; position: fixed; left: 0; top: 0; bottom: 0;
    width: min(620px, 40vw); z-index: 290; pointer-events: none; overflow: hidden;
    mix-blend-mode: multiply;
    background: linear-gradient(90deg,
      #062225 0,
      #0a2c30 calc(var(--mm-fade) * .118),
      #12403f calc(var(--mm-fade) * .237),
      #2b5c59 calc(var(--mm-fade) * .368),
      #57807c calc(var(--mm-fade) * .5),
      #8aa8a4 calc(var(--mm-fade) * .632),
      #bacfcb calc(var(--mm-fade) * .75),
      #dfeae8 calc(var(--mm-fade) * .842),
      #f6faf9 calc(var(--mm-fade) * .921),
      #ffffff var(--mm-fade),
      #ffffff 100%);
  }

  .mm-veil::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(168deg, #ffffff 0%, #ffffff 42%, #cfdedb 78%, #a8bfbb 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--mm-fade) * .342), transparent calc(var(--mm-fade) * .816));
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--mm-fade) * .342), transparent calc(var(--mm-fade) * .816));
    mix-blend-mode: multiply;
  }

  .mm-glow {
    position: absolute; left: -14%; top: 6%; width: 78%; height: 62%;
    mix-blend-mode: screen;
    background:
      radial-gradient(48% 40% at 42% 30%, rgba(28,120,108,.9), transparent 70%),
      radial-gradient(40% 34% at 20% 68%, rgba(16,90,74,.7), transparent 72%);
    filter: blur(30px);
    animation: mmBreathe 9s ease-in-out infinite alternate;
  }

  .mm-streak { position: absolute; inset: 0; opacity: .45; mix-blend-mode: screen; }

  .mm-streak path { fill: none; stroke: url(#mmGrad); stroke-width: 1.1; }

  .mm-veil::after {
    content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: screen;
    background:
      repeating-linear-gradient(0deg, rgba(94,234,212,.05) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(90deg, rgba(94,234,212,.05) 0 1px, transparent 1px 64px);
    mask-image: linear-gradient(100deg, #000 0, rgba(0,0,0,.5) 38%, transparent 62%);
    -webkit-mask-image: linear-gradient(100deg, #000 0, rgba(0,0,0,.5) 38%, transparent 62%);
  }

  .mm-dots {
    position: absolute; left: 6%; bottom: 5%; width: 46%; height: 26%;
    background-image: radial-gradient(circle, rgba(94,234,212,.4) 1px, transparent 1px);
    background-size: 15px 15px; opacity: .35;
    mask-image: radial-gradient(closest-side, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent 78%);
  }


  .mm {
    display: flex; flex-direction: column;
    position: fixed; left: 26px; top: 28px; bottom: 26px; width: var(--mm-w); z-index: 300;
  }

  .mm::before {
    content: ''; position: absolute; left: -26px; right: -34px; top: -28px; bottom: -26px;
    background: radial-gradient(58% 44% at 34% 40%, rgba(140,255,235,.09), transparent 72%);
    pointer-events: none;
  }

  .mm > * { position: relative; }

  .mm-logo { display: block; margin: 0 0 20px 0; }

  .mm-logo img { width: 211px; height: auto; }


  .mm-nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; scrollbar-width: none; }

  .mm-nav::-webkit-scrollbar { display: none; }

  .mm-grp { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px 3px; }

  .mm-grp:first-child { margin-top: 0; }

  .mm-grp span { font-size: 8.8px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: rgba(94,234,212,.5); white-space: nowrap; }

  .mm-grp i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(94,234,212,.2), transparent); }

  .mm-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px; border-radius: 10px;
    font-size: 13.2px; font-weight: 600; letter-spacing: -0.01em;
    color: rgba(214,238,233,.8);
    transition: background .22s ease, color .22s ease;
  }

  .mm-nav a:hover { background: rgba(94,234,212,.09); color: #fff; }

  .mm-nav a.on {
    background: linear-gradient(100deg, rgba(45,212,191,.17), rgba(45,212,191,.06));
    color: #fff; box-shadow: inset 0 0 0 1px rgba(94,234,212,.16);
  }

  .mm-nav a svg { flex-shrink: 0; opacity: .85; }

  .mm-dot { width: 6px; height: 6px; border-radius: 50%; margin-left: auto; flex-shrink: 0; opacity: 0; background: #34d399; box-shadow: 0 0 10px 1px rgba(52,211,153,.75); transition: opacity .22s ease; }

  .mm-nav a.on .mm-dot { opacity: 1; }


  .mm-foot { margin-top: auto; padding-top: 16px; }

  .mm-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px; border-radius: 13px; cursor: pointer;
    font-size: 14px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #17c1ac, #0d9488);
    box-shadow: 0 14px 30px -12px rgba(20,184,166,.85);
  }

  .mm-cta { margin-bottom: 74px; }

  .mm-cta:hover { box-shadow: 0 18px 36px -12px rgba(20,184,166,.95); }

  .mm-safe { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; font-size: 10px; line-height: 1.5; color: rgba(148,197,190,.5); }

  .mm-safe svg { flex-shrink: 0; margin-top: 1px; }


  section { scroll-margin-top: 12px; }

  body { padding-left: var(--mm-off); }


  section, footer {
    margin-left: calc(-1 * var(--mm-off));
    border-left: var(--mm-off) solid transparent;
    background-origin: border-box;
    background-clip: border-box;
  }

  section > .container, footer > .container { margin-left: 0; }


  #saas::before { left: calc(-1 * var(--mm-off)); }


  #saas::before { mask-image: radial-gradient(ellipse at 62% center, #000 26%, transparent 70%);
                  -webkit-mask-image: radial-gradient(ellipse at 62% center, #000 26%, transparent 70%); }


  .header { position: static; height: 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }

  .header .container { max-width: none; padding: 0; }

  .header-inner > *:not(.hdr-lang):not(.hdr-theme) { display: none; }

  .hdr-lang { position: fixed; left: 26px; bottom: 78px; z-index: 301; width: calc(var(--mm-w) - 46px); margin: 0; padding: 0; }

  .hdr-theme {
    position: fixed; left: calc(26px + var(--mm-w) - 40px); bottom: 78px; z-index: 301;
    width: 40px; height: 40px; margin: 0; border-radius: 13px;
    background: rgba(255,255,255,.05); border-color: rgba(94,234,212,.13); color: rgba(220,240,236,.9);
  }

  .hdr-theme:hover { border-color: rgba(94,234,212,.32); color: #fff; }

  .hdr-lang::before { display: none; }

  .hdr-lang-btn {
    width: 100%; justify-content: flex-start; gap: 9px; padding: 11px 12px;
    border-radius: 13px; background: rgba(255,255,255,.05);
    border-color: rgba(94,234,212,.13); color: rgba(220,240,236,.9);
  }

  .hdr-lang-btn:hover { border-color: rgba(94,234,212,.32); }

  .hdr-lang-name { display: block; font-size: 13px; font-weight: 600; }

  .hdr-lang-btn > svg { margin-left: auto; opacity: .85; }

  .hdr-lang-menu { top: auto; bottom: calc(100% + 8px); }


  .to-top { left: calc(26px + var(--mm-w) + 26px); }

  #hero { background: none; }

  #hero::before, #hero::after { display: none; }
}



@keyframes mmBreathe {
  from { opacity: .6; transform: translate3d(0,0,0) scale(1); }
  to { opacity: 1; transform: translate3d(10px,-18px,0) scale(1.09); }
}

@media (prefers-reduced-motion: reduce) {
 .mm-glow { animation: none; }
}



#svyaz {
  position: relative; padding: 54px 0 58px; overflow: hidden;
  background: linear-gradient(180deg,
    #ffffff 0%, #eef9f8 14%, #e7f6f4 48%, #f0faf9 80%, #ffffff 100%);
  background-origin: border-box;
}


#svyaz::before {
  content: ''; position: absolute; inset: -14% -10% auto -10%; height: 128%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(36% 42% at 76% 14%, rgba(13,148,136,.22), transparent 70%),
    radial-gradient(32% 38% at 97% 62%, rgba(16,185,129,.17), transparent 72%),
    radial-gradient(30% 34% at 50% 98%, rgba(14,165,233,.13), transparent 72%),
    radial-gradient(26% 30% at 4% 10%, rgba(139,92,246,.10), transparent 74%);
  filter: blur(30px);
  animation: svDrift 24s ease-in-out infinite alternate;
  mask-image: linear-gradient(180deg, transparent 11%, #000 26%, #000 76%, transparent 89%);
  -webkit-mask-image: linear-gradient(180deg, transparent 11%, #000 26%, #000 76%, transparent 89%);
}

@media (prefers-reduced-motion: reduce) {

  #svyaz::before { animation: none; }
}


#svyaz .container { position: relative; z-index: 1; }

@media (max-width: 760px) {

  #svyaz {
    padding: clamp(26px, 6.4vw, 40px) 0 clamp(24px, 6vw, 38px);
    --pad: clamp(12px, 3.6vw, 20px);
  }

  #svyaz .container { padding: 0 var(--pad); max-width: none; }


  .sv-links-pc { display: none; }
}



.art-top {position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}


.art-top .container {display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}


.art-top .header-logo img {height:30px;width:auto}


.art-nav {display:flex;align-items:center;gap:20px}


.art-nav a {font-size:14px;color:var(--muted);font-weight:600;text-decoration:none}


.art-nav a:hover {color:var(--text)}

@media(max-width:760px) {
.art-nav a:not(.btn) {display:none}
}


.article {max-width:820px;margin:0 auto;padding:40px 20px 8px}


.art-bc {font-size:13px;color:var(--muted);margin-bottom:14px}


.art-bc a {color:var(--teal-d);text-decoration:none}


.article h1 {font-family:'Manrope',sans-serif;font-size:34px;line-height:1.15;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px}


.art-lead {font-size:18px;line-height:1.65;color:var(--text);margin:0 0 28px}


.article h2 {font-family:'Manrope',sans-serif;font-size:25px;letter-spacing:-.02em;color:var(--ink);margin:36px 0 14px}


.article h3 {font-size:19px;font-weight:700;color:var(--ink);margin:24px 0 10px}


.article p {font-size:16px;line-height:1.7;color:var(--text);margin:0 0 14px}


.article ul,.article ol {margin:0 0 16px;padding-left:22px}


.article li {font-size:16px;line-height:1.7;color:var(--text);margin:6px 0}


.article table {width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;display:block;overflow-x:auto}


.article th,.article td {border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}


.article thead th {background:var(--teal-f);color:var(--teal-d);font-weight:700}


.article a {color:var(--teal-d)}


.art-faq {max-width:820px;margin:8px auto 0;padding:0 20px}


.art-faq h2 {font-family:'Manrope',sans-serif;font-size:25px;color:var(--ink);margin:24px 0 14px}


.art-faq details {border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:var(--surface)}


.art-faq summary {font-weight:700;color:var(--ink);cursor:pointer;font-size:16px}


.art-faq details p {margin:10px 0 0;color:var(--text);line-height:1.65;font-size:15px}


.art-related {max-width:820px;margin:32px auto 0;padding:0 20px}


.art-related .rel-title {font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}


.art-related a {display:inline-block;margin:0 8px 8px 0;padding:8px 14px;border:1px solid var(--line);border-radius:100px;font-size:14px;color:var(--teal-d);text-decoration:none}


.art-related a:hover {border-color:var(--teal);background:var(--teal-f)}


.art-cta {max-width:820px;margin:40px auto;padding:28px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;text-align:center}


.art-cta h2 {color:#fff;font-family:'Manrope',sans-serif;font-size:24px;margin:0 0 8px}


.art-cta p {color:rgba(255,255,255,.85);margin:0 0 18px}


.art-cta .btn {background:var(--surface);color:var(--teal-d)}


.art-foot {border-top:1px solid var(--line);margin-top:48px;padding:28px 20px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7}


.art-foot a {color:var(--teal-d);margin:0 6px;text-decoration:none}



.kb-wrap {max-width:900px;margin:8px auto 0;padding:0 20px}


.kb-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:14px}


.kb-card {display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}


.kb-card:hover {transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--teal-l)}


.kb-h {font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;color:var(--ink);line-height:1.3}


.kb-d {font-size:13px;color:var(--muted);line-height:1.5}

@media(max-width:680px) {
.kb-grid {grid-template-columns:1fr}
}



.hero-reg-row { display: flex; justify-content: center; margin-bottom: 0; }


.hero-reg-btn { background: linear-gradient(135deg, var(--teal), var(--teal-d)); color: #fff; border: none; box-shadow: 0 8px 22px -6px rgba(13,148,136,.5); }


.hero-reg-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

@media (max-width: 480px) {

  .hero-reg-row { margin-bottom: 0; width: 100%; }

  .hero-reg-btn { width: 100%; justify-content: center; padding: 14px 20px; }
}



.m-bbar { display: none; }


.m-more-sheet { display: none; }

@media (max-width: 768px) {

  .hamburger { display: none !important; }

  .header-inner { justify-content: center; }

  body { padding-bottom: 84px; transition: padding-bottom .28s ease; }

  body.bar-down { padding-bottom: 0; }


  .m-bbar {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; align-items: end;
    position: fixed; left: 8px; right: 8px; z-index: 200;
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 9px 8px 10px; border-radius: 26px;
    transition: transform .28s ease;
  }

  .m-bbar.hide { transform: translateY(140%); }


  .m-bbar::before {
    content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 26px; pointer-events: none;
    background-repeat: no-repeat;
    background-size: 46% 300%, 100% 100%;
    background-position: -14% 50%, 0 0;
  }


  .m-bbar::after {
    content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 26px; pointer-events: none;
    background-size: 15px 15px;
    mask-image:
      linear-gradient(100deg, #000 0%, transparent 58%),
      linear-gradient(90deg, transparent 0, #000 13px, #000 calc(100% - 13px), transparent 100%),
      linear-gradient(180deg, transparent 0, #000 11px, #000 calc(100% - 11px), transparent 100%);
    -webkit-mask-image:
      linear-gradient(100deg, #000 0%, transparent 58%),
      linear-gradient(90deg, transparent 0, #000 13px, #000 calc(100% - 13px), transparent 100%),
      linear-gradient(180deg, transparent 0, #000 11px, #000 calc(100% - 11px), transparent 100%);
    mask-composite: intersect; -webkit-mask-composite: source-in;
  }


  .m-bi {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 7px 2px 6px; border: 0; background: none; box-shadow: none;
    border-radius: 14px; cursor: pointer; text-decoration: none; font: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background .28s ease, box-shadow .28s ease, transform .18s cubic-bezier(.34,1.3,.5,1);
  }

  .m-bi svg {
    width: 19px; height: 19px;
    transition: color .28s ease, transform .3s cubic-bezier(.34,1.3,.5,1);
  }

  .m-bi span {
    font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: -.02em; white-space: nowrap;
    transition: color .28s ease;
  }

  .m-bi:active { transform: scale(.93); }

  .m-bi.on svg { transform: translateY(-1px); }

  .m-bi::after {
    content: ''; position: absolute; left: 50%; bottom: -3px; width: 18px; height: 3px;
    border-radius: 3px; transform: translateX(-50%) scaleX(0);
    transition: transform .3s cubic-bezier(.34,1.3,.5,1);
  }

  .m-bi.on::after { transform: translateX(-50%) scaleX(1); }


  .m-bhome { padding: 0 2px 6px; }

  .m-bhome svg {
    box-sizing: border-box; width: 28px; height: 28px; padding: 5px 4px 3px;
    border-radius: 10px;
    transition: color .28s ease, background .28s ease, box-shadow .28s ease, transform .3s cubic-bezier(.34,1.3,.5,1);
  }


  .m-more-sheet { display: block; position: fixed; inset: 0; z-index: 210; background: rgba(15,23,42,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }

  .m-more-sheet.open { opacity: 1; pointer-events: auto; }

  .m-more-card { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 20px 20px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .26s ease; }

  .m-more-sheet.open .m-more-card { transform: translateY(0); }

  .m-more-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 12px; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 17px; color: var(--ink); }

  .m-more-h button { background: none; border: none; font-size: 17px; color: var(--muted); cursor: pointer; padding: 4px 8px; }

  .m-more-card > a { display: flex; align-items: center; gap: 12px; padding: 12px 4px; font-size: 15px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--line-soft); text-decoration: none; }

  .m-mi { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

  .m-mi svg { width: 17px; height: 17px; }

  .m-mi.ic-blue { color: #0284c7; background: #e0f2fe; }

  .m-mi.ic-teal { color: var(--teal-d); background: var(--teal-l); }

  .m-mi.ic-purple { color: var(--purple-d); background: var(--purple-l); }

  .m-mi.ic-orange { color: #c2670a; background: #fff7ed; }

  .m-mi.ic-pink { color: #be185d; background: #fce7f3; }

  .m-more-reg { justify-content: center; margin-top: 12px; background: linear-gradient(135deg, var(--teal), var(--teal-d)); color: #fff !important; border-radius: 12px; border-bottom: none !important; font-weight: 700 !important; padding: 14px !important; }
}

@media (max-width: 299px) {

  .m-bi span { display: none; }

  .m-bi { padding: 9px 2px; }

  .m-bhome { padding: 3px 2px; }
}



#quiz-banner { padding: 28px 0 8px; }



.quiz-overlay {
  position: fixed; inset: 0; z-index: 1120; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; box-sizing: border-box;
  background: rgba(4,9,15,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}


.quiz-overlay.open { opacity: 1; pointer-events: all; }


.quiz-modal {
  position: relative; width: 100%; max-width: 900px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; color: var(--tx);
  background: linear-gradient(180deg, #101d29 0%, #0d1620 42%, #0b141d 100%);
  border: 1px solid var(--line); border-radius: 26px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform: translateY(18px) scale(.985); transition: transform .34s cubic-bezier(.22,1,.36,1);
}


.quiz-overlay.open .quiz-modal { transform: translateY(0) scale(1); }


.quiz-modal::before {
  content: ''; position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  background: radial-gradient(620px 240px at 50% -8%, rgba(34,197,94,.09), transparent 70%);
}


.quiz-close {
  position: absolute; right: 18px; top: 18px; z-index: 4; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(148,163,184,.07); color: var(--mut);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: color .22s ease, background .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .34s cubic-bezier(.22,1,.36,1);
}


.quiz-close:hover { color: #4ade80; background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.45);
  box-shadow: 0 0 0 4px rgba(34,197,94,.1); transform: rotate(90deg); }


.quiz-close:active { transform: rotate(90deg) scale(.9); }


.quiz-close svg { width: 19px; height: 19px; }



.quiz-head { flex-shrink: 0; padding: 28px 32px 18px; text-align: center; }


.quiz-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 10px;
  margin-bottom: 16px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(14,165,233,.16));
  border: 1px solid rgba(34,197,94,.3); color: var(--tx);
}


.quiz-badge svg { width: 15px; height: 15px; }


.quiz-progress { height: 6px; border-radius: 6px; background: rgba(148,163,184,.14); overflow: hidden; }


.quiz-progress-bar {
  height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, #16a34a, #12a594 55%, #0ea5e9);
  transition: width .38s cubic-bezier(.22,1,.36,1);
}


.quiz-step-label { margin-top: 9px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--mut); }



.quiz-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 32px 8px;
  scrollbar-width: thin; scrollbar-color: #22c55e transparent;
}


.quiz-body::-webkit-scrollbar { width: 6px; }


.quiz-body::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 6px; }


.quiz-body::-webkit-scrollbar-track { background: transparent; }



.quiz-q-title {
  font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--tx); text-align: center; margin: 6px 0 7px;
}


.quiz-q-sub { font-size: 13.5px; line-height: 1.5; color: var(--mut); text-align: center; margin: 0 0 20px; }



.quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }


.quiz-options.one { grid-template-columns: minmax(0, 1fr); }


.quiz-opt {
  display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 12px 15px;
  border-radius: 15px; cursor: pointer; text-align: left;
  background: var(--bg2); border: 1px solid var(--line); color: var(--tx);
  font: 600 14.5px 'Inter', sans-serif;
  transition: background .2s ease, border-color .2s ease, transform .18s ease, box-shadow .22s ease;
}


.quiz-opt:hover { background: #16232f; border-color: rgba(34,197,94,.4); transform: translateY(-1px); }


.quiz-opt:active { transform: scale(.985); }


.quiz-opt.selected {
  border-color: var(--ok); background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(34,197,94,.05));
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}


.quiz-opt-ic {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center;
  color: var(--sky); background: rgba(14,165,233,.14); border: 1px solid rgba(14,165,233,.26);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}


.quiz-opt-ic svg { width: 22px; height: 22px; }


.quiz-opt-flag { width: 30px; height: 21px; border-radius: 4px; display: block;
  object-fit: cover; box-shadow: 0 0 0 1px rgba(148,163,184,.24); }


.quiz-opt.selected .quiz-opt-ic { color: var(--ok); background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.45); }


.quiz-opt-txt { display: block; }


.quiz-opt-sub { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--mut); }



.quiz-result { text-align: center; }


.quiz-res-title {
  font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--tx); margin: 6px 0 18px;
}


.quiz-res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; text-align: left; }



.quiz-res-card {
  --c: var(--sky);
  padding: 15px 17px; border-radius: 16px; text-align: left;
  background: var(--bg2); border: 1px solid var(--line);
}


.quiz-res-card.gain { --c: var(--ok); }


.quiz-res-card.loss { --c: var(--warn); }



.quiz-res-icon {
  --c: var(--ok);
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; margin: 0 auto 14px;
  display: grid; place-items: center;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, #101b25);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
}


.quiz-res-icon svg { width: 26px; height: 26px; }



.quiz-res-label svg { width: 17px; height: 17px; flex-shrink: 0; }


.quiz-res-plan > svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--ok); align-self: start; }


.quiz-result > .quiz-res-icon > svg, .quiz-result > svg { width: 30px; height: 30px; }


.quiz-res-num {
  font-family: 'Manrope', sans-serif; font-size: 23px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; color: var(--c); display: block; font-variant-numeric: tabular-nums;
}


.quiz-res-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  font-weight: 700; color: var(--c); margin-bottom: 6px; }


.quiz-res-note { font-size: 12.5px; line-height: 1.45; color: var(--mut); margin: 7px 0 0; }


.quiz-res-plan {
  display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 14px;
  padding: 15px 17px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(34,197,94,.13), rgba(14,165,233,.11));
  border: 1px solid rgba(34,197,94,.3);
}


.quiz-res-plan b { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 800; color: var(--tx); }


.quiz-res-plan span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--lab); }


.quiz-detail-q { font-size: 13px; color: var(--mut); text-align: left; margin: 4px 0; }


.quiz-detail-ok { color: var(--ok); font-weight: 600; }



.quiz-lead {
  text-align: left; display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
  transition: grid-template-rows .34s cubic-bezier(.22,1,.36,1), opacity .28s ease, margin .3s ease;
}


.quiz-lead > .quiz-lead-inner { overflow: hidden; }


.quiz-lead.open { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }


.quiz-lead.expanded > .quiz-lead-inner { overflow: visible; }



.quiz-lead .quiz-phone-list { top: auto; bottom: calc(100% + 6px); max-height: 208px; }


.quiz-lead-inner {
  padding: 17px; border-radius: 16px; background: rgba(148,163,184,.06); border: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 11px 14px; align-items: start;
}


.quiz-detail-q { grid-row: span 2; align-self: center; }


.quiz-lead-send, .quiz-detail-ok { grid-column: 1 / -1; }


.quiz-lead-name, .quiz-phone-input {
  height: 48px; padding: 0 14px; border-radius: 13px; color: var(--tx);
  font: 400 14.5px 'Inter', sans-serif; outline: none;
}


.quiz-lead-name { width: 100%; background: #101b25; border: 1px solid var(--line);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease; }


.quiz-lead-name::placeholder { color: #5d7186; }


.quiz-lead-name:focus { border-color: rgba(34,197,94,.55); background: #14212e; box-shadow: 0 0 0 3px rgba(34,197,94,.14); }



.quiz-name-warn { display: none; margin-top: 7px; font-size: 12px; color: var(--warn); }


.quiz-name-warn.show { display: block; }


.quiz-cta {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; margin-top: 12px; border-radius: 14px; border: 0; cursor: pointer;
  background: linear-gradient(95deg, #16a34a 0%, #12a594 48%, #0284c7 100%);
  color: #fff; font: 700 15px 'Manrope', sans-serif;
  box-shadow: 0 12px 28px -12px rgba(14,165,233,.6);
  transition: transform .18s ease, filter .22s ease, opacity .2s ease;
}


.quiz-cta:hover { filter: brightness(1.07); }


.quiz-cta:active { transform: scale(.98); }


.quiz-cta:disabled { opacity: .6; cursor: default; }


.quiz-cta svg { width: 18px; height: 18px; }



.quiz-phone {
  position: relative; display: flex; align-items: center; height: 48px; margin-bottom: 0;
  border-radius: 13px; background: #101b25; border: 1px solid var(--line);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}


.quiz-phone:focus-within { border-color: rgba(34,197,94,.55); background: #14212e; box-shadow: 0 0 0 3px rgba(34,197,94,.14); }


.quiz-phone.sp-err { border-color: rgba(251,113,133,.6); background: rgba(251,113,133,.08); }


.quiz-phone-select {
  display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 11px; flex-shrink: 0;
  cursor: pointer; color: var(--tx); border-right: 1px solid var(--line); outline: none;
}


.quiz-phone-select:focus-visible { box-shadow: inset 0 0 0 2px rgba(34,197,94,.4); border-radius: 13px 0 0 13px; }


.quiz-phone-flag { width: 21px; height: 14px; border-radius: 3px; display: block; object-fit: cover; }


.quiz-phone-dial { font-size: 14.5px; font-weight: 600; color: var(--tx); }


.quiz-phone-caret { width: 15px; height: 15px; color: var(--mut); flex-shrink: 0; }


.quiz-phone-input { flex: 1; min-width: 0; background: none; border: 0; }


.quiz-phone-input::placeholder { color: #5d7186; }


.quiz-phone-list {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; min-width: 232px; max-height: 240px;
  overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 14px;
  background: #14212e; border: 1px solid var(--line); box-shadow: 0 18px 40px -14px rgba(0,0,0,.75);
  display: none; scrollbar-width: thin; scrollbar-color: #22c55e transparent;
}



.quiz-phone.open .quiz-phone-list { display: block; }


.quiz-phone-list::-webkit-scrollbar { width: 6px; }


.quiz-phone-list::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 6px; }


.quiz-phone-opt {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; cursor: pointer;
  color: var(--lab); font-size: 13.5px; transition: background .16s ease, color .16s ease;
}


.quiz-phone-opt:hover, .quiz-phone-opt.selected { background: rgba(34,197,94,.14); color: #fff; }


.quiz-phone-opt-name { flex: 1; min-width: 0; }


.quiz-phone-opt-dial { color: var(--mut); font-weight: 600; }


.quiz-phone-opt.selected .quiz-phone-opt-dial { color: var(--ok); }



.quiz-nav {
  position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 32px 24px; border-top: 1px solid var(--line);
}


.quiz-nav::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(11,20,29,.9)); opacity: 0; transition: opacity .25s ease;
}


.quiz-modal.more .quiz-nav::before { opacity: 1; }


.quiz-back, .quiz-next {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 13px;
  cursor: pointer; font: 600 14.5px 'Manrope', sans-serif;
  transition: background .2s ease, color .2s ease, transform .18s ease, filter .22s ease, opacity .2s ease;
}


.quiz-back { background: transparent; border: 1px solid var(--line2); color: var(--lab); }


.quiz-back:hover { background: rgba(148,163,184,.1); color: #fff; }


.quiz-back:active { transform: scale(.97); }


.quiz-back[hidden] { display: none; }



.quiz-next { margin-left: auto; }


.quiz-next {
  border: 0; font-weight: 700; color: #fff;
  background: linear-gradient(95deg, #16a34a 0%, #12a594 48%, #0284c7 100%);
  box-shadow: 0 12px 28px -12px rgba(14,165,233,.6);
}


.quiz-next:hover { filter: brightness(1.07); }


.quiz-next:active { transform: scale(.97); }


.quiz-next:disabled { opacity: .45; cursor: default; box-shadow: none; }


.quiz-back svg, .quiz-next svg { width: 17px; height: 17px; }

@media (max-width: 760px) {

  .quiz-overlay { padding: 0; align-items: flex-end; }

  .quiz-modal {
    max-width: 100%; max-height: 94vh; border-radius: 26px 26px 0 0; border-bottom: 0;
    box-shadow: 0 -24px 60px -18px rgba(0,0,0,.85), 0 -2px 26px -10px rgba(34,197,94,.14);
    transform: translateY(100%); transition: transform .44s cubic-bezier(.22,1,.36,1);
  }

  .quiz-overlay.open .quiz-modal { transform: translateY(0); }

  .quiz-close { right: 12px; top: 14px; }

  .quiz-head { padding: 26px 16px 16px; }

  .quiz-badge { font-size: 10.5px; padding: 6px 11px; margin-bottom: 14px; }

  .quiz-body { padding: 4px 16px 8px; }

  .quiz-q-title { font-size: 19px; }

  .quiz-q-sub { font-size: 13px; margin-bottom: 16px; }

  .quiz-options { grid-template-columns: minmax(0, 1fr); gap: 9px; }

  .quiz-opt { min-height: 56px; padding: 11px 13px; gap: 10px; font-size: 14px; }

  .quiz-opt-ic { width: 38px; height: 38px; border-radius: 12px; }

  .quiz-opt-ic svg { width: 20px; height: 20px; }

  .quiz-res-title { font-size: 19px; }

  .quiz-res-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .quiz-res-card { padding: 13px 14px; }

  .quiz-res-num { font-size: 22px; }

  .quiz-lead-inner { grid-template-columns: minmax(0, 1fr); }

  .quiz-nav { padding: 13px 16px calc(14px + env(safe-area-inset-bottom));
    background: rgba(9,16,23,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

  .quiz-back, .quiz-next { height: 46px; padding: 0 16px; font-size: 14px; }
}



.reg-overlay {
  position: fixed; inset: 0; z-index: 1130; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; box-sizing: border-box;
  background: rgba(4,9,15,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}


.reg-overlay.open { opacity: 1; pointer-events: all; }


.reg-modal {
  --bg2: #121e2a; --bg3: #17242f;
  --line: rgba(148,163,184,.16); --line2: rgba(148,163,184,.3);
  --tx: #e8eff7; --lab: #b7c7d8; --mut: #8296ab;
  --ok: #22c55e; --sky: #0ea5e9; --warn: #fb7185;
  position: relative; width: 100%; max-width: 880px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; color: var(--tx);
  background: linear-gradient(180deg, #101d29 0%, #0d1620 42%, #0b141d 100%);
  border: 1px solid var(--line); border-radius: 26px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform: translateY(18px) scale(.985); transition: transform .34s cubic-bezier(.22,1,.36,1);
}


.reg-overlay.open .reg-modal { transform: translateY(0) scale(1); }


.reg-modal::before {
  content: ''; position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  background: radial-gradient(620px 240px at 50% -8%, rgba(34,197,94,.09), transparent 70%);
}


.reg-grip { display: none; }



.reg-close {
  position: absolute; right: 18px; top: 18px; z-index: 4; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(148,163,184,.07); color: var(--mut);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: color .22s ease, background .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .34s cubic-bezier(.22,1,.36,1);
}


.reg-close:hover { color: #4ade80; background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.45);
  box-shadow: 0 0 0 4px rgba(34,197,94,.1); transform: rotate(90deg); }


.reg-close:active { transform: rotate(90deg) scale(.9); }


.reg-close svg { width: 19px; height: 19px; }



.reg-lang { position: absolute; left: 18px; top: 18px; z-index: 4; }


.reg-lang-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(148,163,184,.07); color: var(--lab);
  font: 600 13px 'Inter', sans-serif; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}


.reg-lang-btn:hover { background: rgba(148,163,184,.16); color: #fff; }


.reg-lang-flag svg { width: 21px; height: 14px; border-radius: 3px; display: block; }


.reg-lang-btn > svg { width: 15px; height: 15px; opacity: .7; }


.reg-lang-menu {
  position: absolute; left: 0; top: 44px; min-width: 156px; padding: 6px; border-radius: 14px;
  background: #14212e; border: 1px solid var(--line); box-shadow: 0 18px 40px -14px rgba(0,0,0,.75);
}


.reg-lang-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: 9px; border: 0;
  background: none; color: var(--lab); font: 500 13.5px 'Inter', sans-serif; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}


.reg-lang-menu button:hover { background: rgba(34,197,94,.14); color: #fff; }



.reg-pane { display: none; flex-direction: column; min-height: 0; }


.reg-modal[data-step="form"] .reg-pane-form,
.reg-modal[data-step="code"] .reg-pane-code,
.reg-modal[data-step="success"] .reg-pane-success { display: flex; }


.reg-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 30px 34px 4px;
  scrollbar-width: thin; scrollbar-color: #22c55e transparent;
}


.reg-body::-webkit-scrollbar { width: 6px; }


.reg-body::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 6px; }


.reg-body::-webkit-scrollbar-track { background: transparent; }



.reg-head { text-align: center; }


.reg-head img { height: 52px; width: auto; display: block; margin: 0 auto 14px; }


.reg-title { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800;
  letter-spacing: -.02em; color: var(--tx); margin: 0 0 7px; }


.reg-sub { font-size: 14px; line-height: 1.5; color: var(--mut); margin: 0; }


.reg-sub b { color: var(--ok); font-weight: 600; }



.reg-steps {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 20px 0; padding: 9px 9px 9px 12px; border-radius: 14px;
  background: rgba(148,163,184,.06); border: 1px solid var(--line);
}


.reg-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(14,165,233,.16));
  border: 1px solid rgba(34,197,94,.3);
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}


.reg-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(34,197,94,.2); }


.reg-steps > span:last-child { font-size: 13px; color: var(--mut); padding-right: 4px; }



.reg-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 30px; align-items: start; }


.reg-col { display: flex; flex-direction: column; gap: 15px; }


.reg-cap {
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--mut); padding-bottom: 9px; margin-bottom: 2px; border-bottom: 1px solid var(--line);
}


.reg-f { --ic: #8296ab; display: grid; grid-template-columns: 50px minmax(0,1fr); column-gap: 12px; }


.reg-f > label { grid-column: 2; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lab); margin-bottom: 7px; }


.reg-f > label i { color: var(--warn); font-style: normal; font-weight: 700; }


.reg-ic {
  grid-column: 1; grid-row: 2; width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center; color: var(--ic);
  background: color-mix(in srgb, var(--ic) 14%, #101b25);
  border: 1px solid color-mix(in srgb, var(--ic) 28%, transparent);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}


.reg-ic svg { width: 33px; height: 30px; }


.reg-f:focus-within .reg-ic { transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ic) 58%, transparent); }


.reg-in { grid-column: 2; grid-row: 2; display: flex; gap: 10px; }


.reg-f small { grid-column: 2; grid-row: 3; font-size: 11.5px; line-height: 1.45;
  color: var(--mut); margin-top: 7px; }



.reg-in input, .reg-in select {
  flex: 1; min-width: 0; height: 50px; padding: 0 14px; border-radius: 14px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--tx);
  font: 400 14.5px 'Inter', sans-serif; outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, padding .2s ease;
}


.reg-in input::placeholder { color: #5d7186; }


.reg-in input:focus, .reg-in select:focus {
  border-color: rgba(34,197,94,.55); background: #14212e; box-shadow: 0 0 0 3px rgba(34,197,94,.14);
}



.reg-f.ok .reg-in input, .reg-f.ok .reg-in select {
  border-color: rgba(34,197,94,.5);
  background: linear-gradient(180deg, rgba(34,197,94,.1), rgba(34,197,94,.03));
}


.reg-f.ok .reg-ic { border-color: color-mix(in srgb, var(--ic) 52%, transparent);
  box-shadow: 0 0 0 3px rgba(34,197,94,.1); animation: regPop .45s cubic-bezier(.22,1,.36,1); }


@keyframes regPop { 35% { transform: translateY(-3px) scale(1.08); } }


.reg-f.bad .reg-in input, .reg-f.bad .reg-in select {
  border-color: rgba(251,113,133,.6); background: rgba(251,113,133,.08);
}


.reg-wrap { position: relative; flex: 1; min-width: 0; display: flex; }


.reg-wrap input { flex: 1; min-width: 0; }


.reg-tick {
  position: absolute; right: 13px; top: 50%; margin-top: -10px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ok); color: #06210f; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transform: scale(.4);
  transition: opacity .28s ease, transform .34s cubic-bezier(.22,1,.36,1);
}


.reg-tick svg { width: 12px; height: 12px; }


.reg-f.ok .reg-tick { opacity: 1; transform: scale(1); }


.reg-f.ok .reg-wrap input { padding-right: 42px; }



.reg-sel { position: relative; flex: 1; min-width: 0; display: flex; }


.reg-sel select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }


.reg-sel select option { background: #14212e; color: var(--tx); }


.reg-sel > svg { position: absolute; right: 13px; top: 50%; margin-top: -9px; width: 18px; height: 18px;
  color: var(--mut); pointer-events: none; }


.reg-tel { display: flex; gap: 10px; flex: 1; min-width: 0; }


.reg-dial-box {
  display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 13px; border-radius: 14px;
  background: var(--bg3); border: 1px solid var(--line); font-size: 14.5px; font-weight: 600;
  flex-shrink: 0; color: var(--tx);
}


.reg-flag svg { width: 22px; height: 15px; border-radius: 3px; display: block; }



.reg-login { position: relative; flex: 1; min-width: 0; display: flex; align-items: center;
  border-radius: 14px; background: var(--bg2); border: 1px solid var(--line);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }


.reg-login:focus-within { border-color: rgba(34,197,94,.55); background: #14212e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.14); }


.reg-f.ok .reg-login { border-color: rgba(34,197,94,.5);
  background: linear-gradient(180deg, rgba(34,197,94,.1), rgba(34,197,94,.03)); }


.reg-login-prefix { padding-left: 14px; font-size: 14.5px; font-weight: 700; color: var(--ok); }


.reg-login input { background: none !important; border: 0 !important; box-shadow: none !important;
  height: 48px; padding-left: 8px; }


.reg-login-prefix[hidden] + input { padding-left: 14px; }


.reg-pass { position: relative; flex: 1; min-width: 0; display: flex; }


.reg-pass input { padding-right: 50px; }


.reg-eye {
  position: absolute; right: 6px; top: 50%; margin-top: -19px; width: 38px; height: 38px;
  border-radius: 10px; border: 0; background: transparent; color: var(--mut);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: color .18s ease, background .18s ease;
}


.reg-eye:hover { color: var(--tx); background: rgba(148,163,184,.12); }


.reg-eye svg { width: 18px; height: 18px; }



.reg-foot-bar {
  position: relative; flex-shrink: 0; padding: 20px 34px 26px; border-top: 1px solid var(--line);
}


.reg-foot-bar::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(11,20,29,.9));
  opacity: 0; transition: opacity .25s ease;
}


.reg-modal.more .reg-foot-bar::before { opacity: 1; }


.reg-bottom { display: flex; align-items: center; justify-content: space-between; gap: 22px; }


.reg-consent { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; line-height: 1.5;
  color: var(--lab); cursor: pointer; }


.reg-consent input { position: absolute; opacity: 0; pointer-events: none; }


.reg-box {
  width: 21px; height: 21px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
  border: 1.6px solid var(--line2); background: var(--bg2);
  display: grid; place-items: center; color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}


.reg-box svg { width: 13px; height: 13px; }


.reg-consent input:checked + .reg-box { background: var(--ok); border-color: var(--ok); color: #06210f;
  animation: regPop .4s cubic-bezier(.22,1,.36,1); }


.reg-consent a { color: var(--ok); text-decoration: none; font-weight: 600; }


.reg-consent a:hover { text-decoration: underline; }


.reg-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0;
  height: 52px; padding: 0 30px; border-radius: 14px; border: 0; cursor: pointer;
  background: linear-gradient(95deg, #16a34a 0%, #12a594 48%, #0284c7 100%);
  color: #fff; font: 700 15px 'Manrope', sans-serif; letter-spacing: -.01em;
  box-shadow: 0 12px 28px -12px rgba(14,165,233,.6);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease, opacity .2s ease;
}


.reg-cta:hover { filter: brightness(1.07); box-shadow: 0 16px 34px -12px rgba(14,165,233,.72); }


.reg-cta:active { transform: scale(.975); }


.reg-cta:disabled { opacity: .6; cursor: default; }


.reg-cta svg { width: 18px; height: 18px; }


.reg-note { text-align: center; font-size: 13px; color: var(--mut); margin: 16px 0 0; }


.reg-note a { color: var(--sky); text-decoration: none; font-weight: 600; }


.reg-note a:hover { text-decoration: underline; }


.reg-err {
  margin-top: 14px; padding: 11px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45;
  background: rgba(251,113,133,.12); border: 1px solid rgba(251,113,133,.34); color: #fecdd3;
}



.reg-code { display: grid; grid-template-columns: 322px minmax(0,1fr); gap: 30px; align-items: center; }


.reg-env { position: relative; display: grid; place-items: center; }


.reg-env-glow { position: absolute; width: 260px; height: 210px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34,197,94,.22), transparent 74%); filter: blur(4px); }


.reg-env svg.env { position: relative; width: 302px; height: auto; }


.env-spark circle { animation: regFloat 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }


.env-spark circle:nth-child(2) { animation-delay: .5s; }


.env-spark circle:nth-child(3) { animation-delay: 1.1s; }


.env-spark circle:nth-child(4) { animation-delay: 1.6s; }


.env-spark circle:nth-child(5) { animation-delay: 2.2s; }


.env-spark circle:nth-child(6) { animation-delay: 2.8s; }


@keyframes regFloat { 0%,100% { transform: translateY(0); opacity: .28; } 50% { transform: translateY(-9px); opacity: 1; } }



.env-ok { transform-box: fill-box; transform-origin: center;
  animation: regOkIn .55s cubic-bezier(.22,1,.36,1) .35s both; }


@keyframes regOkIn { from { opacity: 0; transform: scale(.45); } }


.env-tick { stroke-dasharray: 46; stroke-dashoffset: 46;
  animation: regDraw .45s cubic-bezier(.4,0,.2,1) .8s forwards; }


@keyframes regDraw { to { stroke-dashoffset: 0; } }


.env-ring { opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: regRing 2.4s ease-out 1.15s infinite; }


@keyframes regRing { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }



.reg-code-h { font-size: 15px; font-weight: 600; color: var(--lab); margin: 0 0 14px; }


.reg-boxes { display: flex; gap: 11px; }


.reg-boxes input {
  width: 60px; height: 68px; border-radius: 15px; text-align: center;
  background: var(--bg2); border: 1.5px solid var(--line); color: var(--tx);
  font: 700 26px 'Manrope', sans-serif; outline: none;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}


.reg-boxes input.f { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.09); }


.reg-boxes input:focus { border-color: var(--ok); background: #14212e; box-shadow: 0 0 0 4px rgba(34,197,94,.16); }


.reg-life { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mut); margin: 14px 0 0; }


.reg-life svg { width: 15px; height: 15px; }


.reg-pane-code .reg-cta { width: 100%; margin-top: 20px; }


.reg-resend-line { text-align: center; font-size: 13px; color: var(--mut); margin: 14px 0 0; }


.reg-resend, .reg-back {
  background: none; border: 0; padding: 0; cursor: pointer; font: 600 13px 'Inter', sans-serif; color: var(--sky);
}


.reg-resend:hover, .reg-back:hover { text-decoration: underline; }


.reg-resend-wait { color: var(--tx); font-variant-numeric: tabular-nums; font-weight: 700; }


.reg-change { display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; color: var(--mut); }


.reg-change .reg-back { color: var(--ok); }



.reg-done { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 34px; align-items: center; }


.reg-ok-ic {
  position: relative; width: 132px; height: 132px; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #22c55e, #0f766e);
  box-shadow: 0 18px 44px -14px rgba(34,197,94,.7);
  animation: regOkIn .55s cubic-bezier(.22,1,.36,1) .2s both;
}


.reg-ok-ic::after { content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 1.5px solid rgba(34,197,94,.3); animation: regRing 2.6s ease-out .9s infinite; }


.reg-ok-ic svg { width: 58px; height: 58px; }


.reg-ok-title { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; margin: 0 0 8px; }


.reg-ok-txt { font-size: 14px; line-height: 1.55; color: var(--mut); margin: 0 0 16px; }


.reg-ok-txt b { color: var(--tx); }


.reg-ok-card { border-radius: 15px; background: rgba(148,163,184,.06); border: 1px solid var(--line); padding: 15px 17px; }


.reg-ok-card-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lab); margin-bottom: 10px; }


.reg-ok-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }


.reg-ok-card li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--mut); }


.reg-ok-card li i { width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; background: rgba(34,197,94,.16); color: var(--ok); font-style: normal; }


.reg-ok-card li i svg { width: 11px; height: 11px; }


.reg-ok-btns { display: flex; gap: 11px; margin-top: 18px; }


.reg-tg-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 13px;
  background: #229ed9; color: #fff; text-decoration: none; font: 700 14px 'Manrope', sans-serif;
  transition: filter .2s ease, transform .18s ease;
}


.reg-tg-btn:hover { filter: brightness(1.08); }


.reg-tg-btn:active { transform: scale(.975); }


.reg-tg-btn svg { width: 19px; height: 19px; }


.reg-ghost {
  height: 48px; padding: 0 22px; border-radius: 13px; cursor: pointer;
  background: transparent; border: 1px solid var(--line2); color: var(--lab);
  font: 600 14px 'Manrope', sans-serif; transition: background .18s ease, color .18s ease, transform .18s ease;
}


.reg-ghost:hover { background: rgba(148,163,184,.1); color: #fff; }


.reg-ghost:active { transform: scale(.975); }

@media (max-width: 760px) {

  .reg-overlay { align-items: flex-end; padding: 0; }

  .reg-modal {
    max-width: 100%; max-height: 94vh; border-radius: 26px 26px 0 0; border-bottom: 0;
    box-shadow: 0 -24px 60px -18px rgba(0,0,0,.85), 0 -2px 26px -10px rgba(34,197,94,.14);
    transform: translateY(100%); transition: transform .44s cubic-bezier(.22,1,.36,1);
  }

  .reg-overlay.open .reg-modal { transform: translateY(0); }

  .reg-grip { display: block; position: absolute; left: 50%; top: 9px; width: 44px; height: 4px;
    margin-left: -22px; border-radius: 4px; background: rgba(148,163,184,.34); z-index: 4; }

  .reg-close { right: 12px; top: 14px; }

  .reg-lang { left: 12px; top: 14px; }


  .reg-lang-btn { height: 38px; padding: 0 8px; gap: 5px; font-size: 12.5px; }

  .reg-lang-btn #reg-lang-name {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }


  .reg-body { padding: 24px 16px 4px; }

  .reg-head img { height: 40px; margin-bottom: 12px; }

  .reg-title { font-size: 21px; }

  .reg-sub { font-size: 13px; }

  .reg-steps { margin: 12px 0; padding: 6px 8px 6px 9px; border-radius: 13px; }

  .reg-pill { padding: 6px 11px; font-size: 10.5px; }

  .reg-steps > span:last-child { font-size: 11.5px; }


  .reg-grid { grid-template-columns: minmax(0,1fr); gap: 0; }

  .reg-col { gap: 11px; }

  .reg-col + .reg-col { margin-top: 14px; }

  .reg-cap { font-size: 10.5px; }

  .reg-f { grid-template-columns: 35px minmax(0,1fr); column-gap: 10px; }

  .reg-f > label { font-size: 10.5px; margin-bottom: 5px; }

  .reg-ic { width: 35px; height: 36px; border-radius: 18px; }

  .reg-ic svg { width: 21px; height: 19px; }

  .reg-in { gap: 8px; }

  .reg-in input, .reg-in select { height: 44px; font-size: 14.5px; }

  .reg-login input { height: 44px; }

  .reg-dial-box { height: 44px; padding: 0 11px; font-size: 14.5px; }

  .reg-tel { gap: 8px; }

  .reg-eye { margin-top: -18px; width: 36px; height: 36px; }


  .reg-foot-bar { padding: 7px 14px calc(8px + env(safe-area-inset-bottom));
    background: rgba(9,16,23,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

  .reg-bottom { flex-direction: column; align-items: stretch; gap: 7px; }


  .reg-consent { font-size: 12px; line-height: 1.35; gap: 9px; }


  .reg-cta { height: 46px; font-size: 14px; border-radius: 12px; box-shadow: 0 8px 18px -10px rgba(14,165,233,.5); }

  .reg-cta { width: 100%; padding: 0 18px; }

  .reg-note { margin-top: 6px; font-size: 11px; line-height: 1.35; }


  .reg-code { grid-template-columns: minmax(0,1fr); gap: 4px; }

  .reg-env svg.env { width: 232px; }

  .reg-env-glow { width: 200px; height: 160px; }

  .reg-code-h { text-align: center; font-size: 13.5px; }

  .reg-boxes { gap: 8px; justify-content: center; }

  .reg-boxes input { width: 48px; height: 58px; border-radius: 14px; font-size: 23px; }

  .reg-life { justify-content: center; font-size: 12px; }

  .reg-pane-code .reg-cta { margin-top: 0; }


  .reg-done { grid-template-columns: minmax(0,1fr); gap: 0; text-align: center; }

  .reg-ok-ic { width: 104px; height: 104px; margin-bottom: 16px; }

  .reg-ok-ic svg { width: 46px; height: 46px; }

  .reg-ok-card { text-align: left; }

  .reg-ok-btns { flex-direction: column; }

  .reg-tg-btn, .reg-ghost { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {

  .env-spark circle, .env-ring, .reg-ok-ic::after { animation: none; }
}



.reg-modal, .modal, .attr-modal, .quiz-modal {
  --bg2: #121e2a; --bg3: #17242f;
  --line: rgba(148,163,184,.16); --line2: rgba(148,163,184,.3);
  --tx: #e8eff7; --lab: #b7c7d8; --mut: #8296ab;
  --ok: #22c55e; --sky: #0ea5e9; --warn: #fb7185;
}



.overlay {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; box-sizing: border-box;
  background: rgba(4,9,15,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}


.overlay.open { opacity: 1; pointer-events: all; }


.modal {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; color: var(--tx);
  background: linear-gradient(180deg, #101d29 0%, #0d1620 42%, #0b141d 100%);
  border: 1px solid var(--line); border-radius: 26px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform: translateY(18px) scale(.985); transition: transform .34s cubic-bezier(.22,1,.36,1);
}


.overlay.open .modal { transform: translateY(0) scale(1); }


.modal::before {
  content: ''; position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  background: radial-gradient(520px 220px at 50% -8%, rgba(34,197,94,.09), transparent 70%);
}


.modal-close, .attr-close {
  position: absolute; right: 18px; top: 18px; z-index: 4; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(148,163,184,.07); color: var(--mut);
  display: grid; place-items: center; cursor: pointer; padding: 0; font-size: 0;
  transition: color .22s ease, background .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .34s cubic-bezier(.22,1,.36,1);
}


.modal-close:hover, .attr-close:hover { color: #4ade80; background: rgba(34,197,94,.15);
  border-color: rgba(34,197,94,.45); box-shadow: 0 0 0 4px rgba(34,197,94,.1); transform: rotate(90deg); }


.modal-close:active, .attr-close:active { transform: rotate(90deg) scale(.9); }


.modal-close svg, .attr-close svg { width: 19px; height: 19px; }


.dlg-grip { display: none; }



#form-wrap, .form-ok { display: flex; flex-direction: column; min-height: 0; }


.form-ok { display: none; }


.dlg-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 30px 30px 6px;
  scrollbar-width: thin; scrollbar-color: #22c55e transparent;
}


.dlg-body::-webkit-scrollbar { width: 6px; }


.dlg-body::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 6px; }


.dlg-body::-webkit-scrollbar-track { background: transparent; }


.dlg-head { text-align: center; margin-bottom: 20px; }


.dlg-head img { height: 46px; width: auto; display: block; margin: 0 auto 13px; }


.modal-title, .attr-title {
  font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 800;
  letter-spacing: -.02em; color: var(--tx); margin: 0 0 7px;
}


.modal-sub, .attr-sub { font-size: 14px; line-height: 1.5; color: var(--mut); margin: 0; }



.dlg-f { --ic: #8296ab; display: grid; grid-template-columns: 50px minmax(0,1fr); column-gap: 12px; margin-bottom: 15px; }


.dlg-f .fl { grid-column: 2; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lab); margin-bottom: 7px; display: block; }


.dlg-f .req { color: var(--warn); }


.dlg-ic {
  grid-column: 1; grid-row: 2; width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center; color: var(--ic);
  background: color-mix(in srgb, var(--ic) 14%, #101b25);
  border: 1px solid color-mix(in srgb, var(--ic) 28%, transparent);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}


.dlg-ic svg { width: 33px; height: 30px; }


.dlg-f:focus-within .dlg-ic { transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ic) 58%, transparent); }


.dlg-f-area .dlg-ic { align-self: start; }


.dlg-in { grid-column: 2; grid-row: 2; display: flex; }



.dlg-in .quiz-phone, .reg-in .quiz-phone { width: 100%; min-width: 0; }


.dlg-wrap { position: relative; flex: 1; min-width: 0; display: flex; }


.dlg-in .fi {
  flex: 1; min-width: 0; height: 50px; padding: 0 14px; border-radius: 14px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--tx);
  font: 400 14.5px 'Inter', sans-serif; outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, padding .2s ease;
}


.dlg-in textarea.fi { height: auto; min-height: 92px; padding: 13px 14px; resize: vertical; line-height: 1.5; }


.dlg-in .fi::placeholder { color: #5d7186; }


.dlg-in .fi:focus { border-color: rgba(34,197,94,.55); background: #14212e; box-shadow: 0 0 0 3px rgba(34,197,94,.14); }


.dlg-f.ok .dlg-in .fi { border-color: rgba(34,197,94,.5);
  background: linear-gradient(180deg, rgba(34,197,94,.1), rgba(34,197,94,.03)); }


.dlg-f.ok .dlg-ic { border-color: color-mix(in srgb, var(--ic) 52%, transparent);
  box-shadow: 0 0 0 3px rgba(34,197,94,.1); animation: regPop .45s cubic-bezier(.22,1,.36,1); }


.dlg-tick {
  position: absolute; right: 13px; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ok); color: #06210f; display: grid; place-items: center; pointer-events: none;
  opacity: 0; transform: scale(.4); transition: opacity .28s ease, transform .34s cubic-bezier(.22,1,.36,1);
}


.dlg-tick svg { width: 12px; height: 12px; }


.dlg-f.ok .dlg-tick { opacity: 1; transform: scale(1); }


.dlg-f.ok .dlg-wrap .fi { padding-right: 42px; }



.dlg-foot { position: relative; flex-shrink: 0; padding: 18px 30px 26px; border-top: 1px solid var(--line); }


.dlg-foot::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(11,20,29,.9)); opacity: 0; transition: opacity .25s ease;
}


.modal.more .dlg-foot::before { opacity: 1; }


.dlg-cta {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; border-radius: 14px; border: 0; cursor: pointer;
  background: linear-gradient(95deg, #16a34a 0%, #12a594 48%, #0284c7 100%);
  color: #fff; font: 700 15px 'Manrope', sans-serif; letter-spacing: -.01em;
  box-shadow: 0 12px 28px -12px rgba(14,165,233,.6);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease, opacity .2s ease;
}


.dlg-cta:hover { filter: brightness(1.07); box-shadow: 0 16px 34px -12px rgba(14,165,233,.72); }


.dlg-cta:active { transform: scale(.975); }


.dlg-cta:disabled { opacity: .6; cursor: default; }


.dlg-cta svg { width: 18px; height: 18px; }


.dlg-ghost {
  width: 100%; height: 50px; border-radius: 14px; cursor: pointer;
  background: transparent; border: 1px solid var(--line2); color: var(--lab);
  font: 600 14.5px 'Manrope', sans-serif; transition: background .18s ease, color .18s ease, transform .18s ease;
}


.dlg-ghost:hover { background: rgba(148,163,184,.1); color: #fff; }


.dlg-ghost:active { transform: scale(.975); }


.modal-legal { font-size: 11.5px; line-height: 1.5; color: var(--mut); text-align: center; margin: 13px 0 0; }


.modal-legal a { color: var(--sky); text-decoration: none; }


.modal-legal a:hover { text-decoration: underline; }



.form-ok .dlg-body { text-align: center; padding-bottom: 24px; }


.form-ok-icon {
  position: relative; width: 104px; height: 104px; border-radius: 50%; margin: 6px auto 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #22c55e, #0f766e);
  box-shadow: 0 18px 44px -14px rgba(34,197,94,.7);
  animation: regOkIn .55s cubic-bezier(.22,1,.36,1) .1s both;
}


.form-ok-icon::after { content: ''; position: absolute; inset: -11px; border-radius: 50%;
  border: 1.5px solid rgba(34,197,94,.3); animation: regRing 2.6s ease-out .8s infinite; }


.form-ok-icon svg { width: 46px; height: 46px; }


.form-ok h3 { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; color: var(--tx); margin: 0 0 9px; }


.form-ok p { font-size: 14px; line-height: 1.55; color: var(--mut); margin: 0; }



.attr-overlay {
  position: fixed; inset: 0; z-index: 1120; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; box-sizing: border-box;
  background: rgba(4,9,15,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}


.attr-overlay.open { opacity: 1; pointer-events: all; }


.attr-modal {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 30px 30px 26px; color: var(--tx); text-align: center;
  background: linear-gradient(180deg, #101d29 0%, #0d1620 42%, #0b141d 100%);
  border: 1px solid var(--line); border-radius: 26px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform: translateY(18px) scale(.985); transition: transform .34s cubic-bezier(.22,1,.36,1);
  scrollbar-width: thin; scrollbar-color: #22c55e transparent;
}


.attr-overlay.open .attr-modal { transform: translateY(0) scale(1); }


.attr-modal::-webkit-scrollbar { width: 6px; }


.attr-modal::-webkit-scrollbar-thumb { background: #22c55e; border-radius: 6px; }


.attr-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 10px;
  margin-bottom: 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(14,165,233,.16));
  border: 1px solid rgba(34,197,94,.3); color: var(--tx);
}


.attr-badge svg { width: 15px; height: 15px; }


.attr-sub { margin-bottom: 20px !important; }


.attr-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }


.attr-chip {
  padding: 11px 17px; border-radius: 13px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--line); color: var(--lab);
  font: 600 13.5px 'Inter', sans-serif;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease;
}


.attr-chip:hover { background: rgba(34,197,94,.13); border-color: rgba(34,197,94,.42); color: #fff; }


.attr-chip:active { transform: scale(.96); }


.attr-chip.on { background: rgba(34,197,94,.2); border-color: var(--ok); color: #fff; }



.attr-chip.suggested { border-color: rgba(34,197,94,.45); color: #fff;
  box-shadow: 0 0 0 3px rgba(34,197,94,.1); }


.attr-hint {
  display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 16px;
  font-size: 12.5px; line-height: 1.45; color: var(--mut);
}


.attr-hint.show { display: flex; }


.attr-hint svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ok); }


.attr-ok { display: none; text-align: center; padding: 8px 0 4px; }


.attr-ok-icon {
  position: relative; width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #22c55e, #0f766e);
  box-shadow: 0 18px 44px -14px rgba(34,197,94,.7);
  animation: regOkIn .55s cubic-bezier(.22,1,.36,1) .1s both;
}


.attr-ok-icon::after { content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1.5px solid rgba(34,197,94,.3); animation: regRing 2.6s ease-out .8s infinite; }


.attr-ok-icon svg { width: 42px; height: 42px; }


.attr-ok h3 { font-family: 'Manrope', sans-serif; font-size: 21px; font-weight: 800; color: var(--tx); margin: 0 0 8px; }


.attr-ok p { font-size: 14px; line-height: 1.55; color: var(--mut); margin: 0; }

@media (max-width: 760px) {

  .overlay, .attr-overlay { align-items: flex-end; padding: 0; }

  .modal, .attr-modal {
    max-width: 100%; max-height: 94vh; border-radius: 26px 26px 0 0; border-bottom: 0;
    box-shadow: 0 -24px 60px -18px rgba(0,0,0,.85), 0 -2px 26px -10px rgba(34,197,94,.14);
    transform: translateY(100%); transition: transform .44s cubic-bezier(.22,1,.36,1);
  }

  .overlay.open .modal, .attr-overlay.open .attr-modal { transform: translateY(0); }

  .dlg-grip { display: block; position: absolute; left: 50%; top: 9px; width: 44px; height: 4px;
    margin-left: -22px; border-radius: 4px; background: rgba(148,163,184,.34); z-index: 4; }

  .modal-close, .attr-close { right: 12px; top: 14px; }

  .dlg-body { padding: 26px 16px 6px; }

  .dlg-head img { height: 40px; margin-bottom: 12px; }

  .modal-title, .attr-title { font-size: 21px; }

  .modal-sub, .attr-sub { font-size: 13px; }

  .dlg-f { grid-template-columns: 35px minmax(0,1fr); column-gap: 10px; margin-bottom: 11px; }

  .dlg-f .fl { font-size: 10.5px; margin-bottom: 5px; }

  .dlg-ic { width: 35px; height: 36px; border-radius: 18px; }

  .dlg-ic svg { width: 21px; height: 19px; }

  .dlg-in .fi { height: 44px; font-size: 14.5px; }

  .modal .quiz-phone { height: 44px; }


  .quiz-lead-name, .quiz-lead .quiz-phone { height: 44px; }

  .quiz-lead-name, .quiz-phone-input { font-size: 14.5px; }

  .dlg-cta { height: 46px; font-size: 14px; border-radius: 12px; box-shadow: 0 8px 18px -10px rgba(14,165,233,.5); }

  .dlg-note { font-size: 11px; line-height: 1.35; margin-top: 6px; }

  .dlg-foot { padding: 7px 14px calc(8px + env(safe-area-inset-bottom));

    background: rgba(9,16,23,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

  .attr-modal { padding: 26px 16px calc(22px + env(safe-area-inset-bottom)); }

  .attr-chip { padding: 11px 15px; font-size: 13px; }
}



.quiz-banner { overflow: hidden; }

@media (max-width: 380px) {

  .container { padding: 0 12px; }

  .header-logo { font-size: 15px; gap: 7px; }

  .header-logo img { height: 26px; width: auto; }

  .hdr-reg { margin-left: 0; margin-right: 12px; padding: 5px 8px; font-size: 10.5px; gap: 3px; }

  .hdr-reg svg { width: 12px; height: 12px; }

  .hdr-lang-btn { padding: 5px 6px; }

  .hdr-theme { width: 28px; height: 28px; margin-left: 3px; }
}



.btn-primary, .btn-white { position: relative; overflow: hidden; }


.btn-primary::after, .btn-white::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%);
  transform: translateX(-150%);
  transition: transform .75s cubic-bezier(.22,1,.36,1);
}


.btn-primary:hover::after, .btn-white:hover::after { transform: translateX(150%); }

@media (prefers-reduced-motion: reduce) {

  .btn-primary::after, .btn-white::after { display: none; }

  .reveal { transition-delay: 0ms !important; }
}



#hub {
  background: linear-gradient(180deg,
    var(--bg-2) 0%, var(--bg-2) 88%, #ffffff 100%);
  background-origin: border-box;
}



.a-time, .a-nm { color: #64748b; }


.req, .fl .req { color: #dc2626; }


#hvT1 { top: -16px; right: -10px; }


#hvT2 { bottom: 52px; left: -30px; }


#hvT3 { bottom: -14px; right: 26px; }



#clinics { padding: 44px 0 0; }

@media (max-width: 1100px) {

  #hvT1 { right: 0; }

  #hvT2 { left: 0; }
}

@media (max-width: 768px) {

  #hvT1, #hvT2, #hvT3 { inset: auto; }
}



#hero .container { max-width: 1340px; }


#hvSched { height: 172px; overflow: hidden; }


#hvInbox { height: 90px; overflow: hidden; }

@media (max-width: 1100px) {

  #hero .container { max-width: 1200px; }
}

@media (max-width: 768px) {

  #hvSched { height: auto; max-height: 172px; }

  #hvInbox { height: auto; max-height: 90px; }
}

@media (max-width: 768px) {

  #hvT1, #hvT2, #hvT3 { left: 10px; right: 10px; bottom: 10px; top: auto; }
}

@media (max-width: 760px) {

  .reg-in input, .reg-in select { height: 26px; font-size: 13.5px; }

  .reg-dial-box { height: 26px; font-size: 13.5px; }

  .reg-login input { height: 26px; }

  .reg-in, .dlg-in { align-items: center; }

  .reg-f > label { margin-bottom: 3px; }

  .reg-col { gap: 8px; }

  .reg-col + .reg-col { margin-top: 11px; }

  .reg-eye { margin-top: 0; width: 26px; height: 26px; }

  .reg-eye svg { width: 15px; height: 15px; }


  .dlg-in .fi { height: 26px; font-size: 12.5px; }

  .dlg-f { margin-bottom: 8px; }

  .dlg-f .fl { margin-bottom: 3px; }

  .dlg-f-area .fi { height: auto; min-height: 64px; }

  .modal .quiz-phone, .quiz-lead .quiz-phone { height: 26px; }

  .quiz-phone-input, .quiz-lead-name { height: 26px; font-size: 12.5px; }

  .quiz-phone-select { padding: 0 8px; gap: 5px; }

  .quiz-phone-dial { font-size: 12.5px; }


  .reg-cta { height: 29px; font-size: 14px; }

  .dlg-cta { height: 29px; font-size: 14px; }

  .reg-consent { font-size: 9px; line-height: 1.35; gap: 9px; }

  .reg-box { width: 16px; height: 17px; border-radius: 8px; flex-shrink: 0; margin-top: 4px; }

  .reg-note, .dlg-note { font-size: 10px; margin-top: 5px; }


  .reg-lang { position: static; align-self: flex-start; margin: 14px 0 0 14px; }

  .reg-lang-btn { height: 23px; padding: 0 8px; gap: 1px; font-size: 9.5px;
    border-radius: 16px; border: 1px solid rgb(0,143,11); }

  .reg-lang-flag svg { width: 17px; height: 11px; }

  .reg-lang-btn > svg { width: 12px; height: 12px; }
}



@view-transition { navigation: auto; }


::view-transition-old(root) { animation-duration: .18s; }


::view-transition-new(root) { animation-duration: .24s; }

@media (prefers-reduced-motion: reduce) {

  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}



.reg-overlay, .quiz-overlay, .overlay, .attr-overlay { height: 100dvh; }

@media (max-width: 760px) {

  .reg-modal, .quiz-modal, .modal, .attr-modal { max-height: 92dvh; }
}



html.no-scroll { overflow-y: hidden; }


body.no-scroll { overflow: hidden; padding-right: var(--lock-pad, 0px); }

@media (max-width: 760px) {

  .m-more-card { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  body.no-scroll { padding-right: 0; }
}

@media (max-width: 760px) {

  a, button, [role="button"], input[type="submit"], input[type="button"], summary {
    -webkit-tap-highlight-color: transparent;
  }
}


@keyframes heroDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.6%, 1.6%, 0) scale(1.06); }
}


.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }


.hero-inner > * { min-width: 0; max-width: 100%; }


.hero-title {
  font-size: clamp(34px, 4.8vw, 56px);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.035em;
  margin-bottom: 22px; color: var(--ink);
  overflow-wrap: break-word;
  hyphens: manual; -webkit-hyphens: manual;
}


.hero-title em {
  font-style: normal; font-weight: 700;
  background: linear-gradient(135deg, var(--teal) 0%, var(--blue) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  display: inline;
}


.hero-sub {
  font-size: 17px; color: var(--text-2); margin-bottom: 32px;
  line-height: 1.6; max-width: 520px;
}


.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }



.hero-visual { position: relative; }


.hero-visual::before {
  content: ''; position: absolute; inset: -16px;
  background: linear-gradient(135deg, rgba(13,148,136,.1), rgba(14,165,233,.08));
  border-radius: 28px; filter: blur(40px); z-index: -1;
}


.tg { background: #d1fae5; color: #065f46; }


.trust-label {
  text-align: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 24px;
}


.trust-items {
  display: flex; justify-content: center; align-items: center;
  gap: 48px; flex-wrap: wrap;
}


.trust-item {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px; font-weight: 600; color: var(--text-2);
  letter-spacing: -0.01em;
}


.trust-item svg { width: 20px; height: 20px; color: var(--teal); flex-shrink: 0; }


.qb-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap; box-sizing: border-box;
  background: linear-gradient(135deg, #042f2e 0%, #0f766e 55%, #0d9488 100%);
  border-radius: 22px; padding: 34px 38px;
  box-shadow: 0 18px 48px rgba(13,148,136,.28);
}


.qb-glow {
  position: absolute; top: -60%; right: -8%; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(16,185,129,.55) 0%, rgba(16,185,129,0) 70%);
  pointer-events: none;
}


.qb-text { position: relative; z-index: 1; flex: 1 1 360px; min-width: 0; }


.qb-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #ccfbf1; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2); padding: 6px 13px 6px 11px;
  border-radius: 999px; margin-bottom: 14px;
}


.qb-badge svg { width: 15px; height: 15px; }


.qb-title {
  font-family: 'Manrope', sans-serif; font-size: 28px; font-weight: 800;
  color: #fff; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px;
}


.qb-title em { font-style: normal; color: #6ee7b7; }


.qb-sub { font-size: 15.5px; color: rgba(255,255,255,.86); line-height: 1.55; max-width: 560px; margin: 0; }


.qb-btn {
  position: relative; z-index: 1; flex-shrink: 0; white-space: nowrap;
  background: var(--surface); color: #0f766e; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}


.qb-btn:hover { background: var(--teal-f); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.24); }


.qb-btn svg { width: 18px; height: 18px; }



.hero-chips { margin-top: 22px; display: flex; gap: 17px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }


.hero-chips i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }


.hero-chips svg { width: 15px; height: 15px; color: var(--teal); flex-shrink: 0; }



.hv-app {
  position: relative; display: grid; grid-template-columns: 172px 1fr;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 40px 90px -32px rgba(15,23,42,.34), 0 12px 28px -14px rgba(15,23,42,.14);
  min-height: 430px;
}



.hv-side { background: linear-gradient(180deg, #0f2027, #16323a); padding: 0 11px 15px; color: #cbd5e1; border-radius: 15px 0 0 15px; }


.hv-brand { margin: 0 -11px 13px; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid rgba(15,23,42,.08); border-radius: 15px 0 0 0; display: flex; justify-content: center; }


.hv-brand img { width: 100%; max-width: 128px; height: auto; display: block; }


.hv-who { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 9px; background: rgba(255,255,255,.07); font-size: 11.5px; margin-bottom: 12px; }


.hv-who i { width: 22px; height: 22px; border-radius: 6px; background: var(--teal); flex-shrink: 0; }


.hv-who b { display: block; color: #fff; font-size: 12px; font-weight: 700; }


.hv-who span { color: #94a3b8; font-size: 10px; }


.hv-cap { font-size: 9px; font-weight: 800; letter-spacing: .12em; color: #64748b; padding: 0 6px; margin: 11px 0 5px; }


.hv-nav { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: 12.5px; color: #cbd5e1; }


.hv-nav svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; }


.hv-nav.on { background: rgba(94,234,212,.14); color: #fff; font-weight: 700; }


.hv-bdg { margin-left: auto; min-width: 19px; height: 17px; padding: 0 5px; border-radius: 99px; background: var(--teal); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; transition: transform .3s; }


.hv-bdg.pop { transform: scale(1.35); }


.hv-bdg.am { background: var(--orange); }


.hv-bdg.bl { background: var(--blue); }



.hv-main { padding: 15px 17px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }


.hv-mh { display: flex; align-items: center; gap: 10px; }


.hv-mh h2 { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }


.hv-date { font-size: 11px; color: var(--muted-2); }


.hv-add { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }


.hv-add svg { width: 11px; height: 11px; }



.hv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }


.hv-kpi { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 11px; padding: 9px 11px; transition: border-color .4s, background .4s, transform .4s; }


.hv-kpi.hot { border-color: var(--teal-l); background: var(--teal-f); transform: translateY(-2px); }


.hv-kpi .t { font-size: 9.5px; color: var(--muted-2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }


.hv-kpi .v { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.25; }



.hv-cols { display: grid; grid-template-columns: 1.12fr 1fr; gap: 11px; min-height: 0; }


.hv-panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 11px; min-width: 0; }


.hv-ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }


.hv-ph b { font-size: 11.5px; font-weight: 800; color: var(--ink); }


.hv-ph span { font-size: 10px; color: var(--teal); font-weight: 700; white-space: nowrap; }


.hv-ph2 { margin-top: 11px; }



.hv-row { display: flex; align-items: center; gap: 8px; padding: 6px 5px; border-radius: 8px; font-size: 11px; }


.hv-row + .hv-row { border-top: 1px solid var(--line-soft); }


.hv-row .tm { font-size: 10.5px; font-weight: 800; color: var(--muted); width: 34px; flex-shrink: 0; font-variant-numeric: tabular-nums; }


.hv-row .av { width: 21px; height: 21px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; flex-shrink: 0; font-size: 9px; font-weight: 800; color: var(--muted); }


.hv-row .nm { min-width: 0; flex: 1; }


.hv-row .nm b { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.hv-row .nm > span { font-size: 9.5px; color: var(--muted-2); }


.hv-row .st { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: var(--surface-3); color: var(--muted); flex-shrink: 0; }


.hv-row .st.g { background: var(--teal-f); color: var(--teal-d); }


.hv-row .st.a { background: #fffbeb; color: #b45309; }



.hv-row.fresh, .hv-msg.fresh { animation: hvSlot .55s cubic-bezier(.2,.9,.3,1.2) both; }


.hv-row.flash { box-shadow: inset 0 0 0 1.5px var(--teal); background: var(--teal-f); }


@keyframes hvSlot { from { opacity: 0; transform: translateY(-9px) scale(.97); max-height: 0; } to { opacity: 1; transform: none; max-height: 60px; } }



.hv-msg { display: flex; gap: 8px; padding: 7px 5px; border-radius: 8px; font-size: 11px; }


.hv-msg + .hv-msg { border-top: 1px solid var(--line-soft); }


.hv-msg .ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }


.hv-msg .ic svg { width: 12px; height: 12px; color: #fff; }


.hv-msg .ic.tg { background: #229ED9; }


.hv-msg .ic.ig { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); }


.hv-msg .ic.wa { background: #25D366; }


.hv-msg .bd { min-width: 0; flex: 1; }


.hv-msg .bd b { display: block; font-size: 11px; font-weight: 800; color: var(--ink); }


.hv-msg .bd p { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.hv-msg .new { font-size: 8.5px; font-weight: 800; color: var(--teal-d); background: var(--teal-f); padding: 2px 5px; border-radius: 4px; height: fit-content; flex-shrink: 0; }



.hv-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; margin-top: 6px; }


.hv-bars i { flex: 1; background: var(--surface-3); border-radius: 3px 3px 0 0; transition: height .8s cubic-bezier(.2,.9,.3,1), background .8s; }


.hv-bars i.up { background: linear-gradient(180deg, var(--teal), #2dd4bf); }



.hv-toast { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -14px rgba(15,23,42,.35); font-size: 11.5px; white-space: nowrap; opacity: 0; transform: translateY(-8px) scale(.95); pointer-events: none; transition: opacity .4s, transform .45s cubic-bezier(.2,.9,.3,1.3); }


.hv-toast.show { opacity: 1; transform: none; }


.hv-toast .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }


.hv-toast .ic svg { width: 14px; height: 14px; color: #fff; }


.hv-toast .ic.tg { background: #229ED9; }


.hv-toast .ic.gr { background: var(--green); }


.hv-toast .ic.am { background: var(--orange); }


.hv-toast b { display: block; font-size: 11.5px; font-weight: 800; color: var(--ink); }


.hv-toast > div > span { font-size: 10px; color: var(--muted); }



.hv-story { margin-top: 14px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }


.hv-track { display: flex; align-items: center; gap: 5px; }


.hv-track i { width: 26px; height: 3px; border-radius: 2px; background: var(--line); transition: background .4s, width .4s; }


.hv-track i.done { background: var(--teal-l); }


.hv-track i.now { background: linear-gradient(90deg, var(--teal), var(--blue)); width: 44px; }


.hv-txt { font-size: 12.5px; font-weight: 700; color: var(--teal-d); transition: opacity .3s; }


.hv-txt.fade { opacity: 0; }


.cl-label { text-align: center; font-size: 12.5px; color: var(--muted-2); font-weight: 600; }



.cl-strip { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; background: var(--line-soft); }


.cl-item { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 14px; background: var(--surface); color: #9aa6b8; transition: color .25s, background .25s; }


.cl-item:hover { color: var(--muted); background: var(--surface-2); }


.cl-item svg { width: 26px; height: 26px; flex-shrink: 0; }


.cl-item b { font-size: 17px; font-weight: 800; letter-spacing: .13em; line-height: 1; }


.cl-item b.ser { font-family: Georgia, serif; font-weight: 400; letter-spacing: .03em; font-size: 19px; }


.cl-item i { font-style: normal; font-size: 7.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; align-self: flex-end; padding-bottom: 2px; opacity: .85; }

@media (prefers-reduced-motion: reduce) {

  .hv-row.fresh, .hv-msg.fresh { animation: none; }
}


.hero-inner { grid-template-columns: .84fr 1.16fr; gap: 46px; }


.hv-app { grid-template-columns: 160px 1fr; }


.hv-row .nm > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }


.hv-msg .bd b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



.hv-row { height: 42px; padding: 0 5px; }


.hv-msg { height: 44px; padding: 0 5px; align-items: center; }


.hv-row.fresh, .hv-msg.fresh { animation: hvSlot .5s cubic-bezier(.2,.9,.3,1.2) both; }


@keyframes hvSlot { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }



.hv-mob { display: none; }



.mj-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }


.mj-cell { position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 9px 12px; transition: background .45s, border-color .45s, transform .45s; }


.mj-cell.hot { background: var(--teal-f); border-color: var(--teal-l); transform: translateY(-2px); }


.mj-cell.hot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); transform: translateX(-120%); animation: mjSheen .8s ease; }


@keyframes mjSheen { to { transform: translateX(120%); } }


.mj-cell span { display: block; font-size: 9px; font-weight: 800; color: var(--muted-2); text-transform: uppercase; letter-spacing: .07em; }


.mj-cell b { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }


.mj-cell i { font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--green); margin-left: 5px; opacity: 0; transition: opacity .3s; }


.mj-cell.hot i { opacity: 1; }



.mj { border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface-2); overflow: hidden; }


.mj-h { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 7px; }


.mj-h b { font-size: 11px; font-weight: 800; color: var(--ink); }


.mj-live { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; color: var(--teal); }


.mj-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: mjBeat 1.9s ease-out infinite; }


@keyframes mjBeat { 0% { box-shadow: 0 0 0 0 rgba(13,148,136,.5); } 70% { box-shadow: 0 0 0 7px rgba(13,148,136,0); } 100% { box-shadow: 0 0 0 0 rgba(13,148,136,0); } }



.mj-steps { padding: 1px 11px 10px; }


.mj-st { display: grid; grid-template-columns: 28px 1fr; gap: 9px; min-height: 40px; }


.mj-rail { position: relative; display: flex; justify-content: center; }


.mj-rail::before { content: ""; position: absolute; top: 26px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--line); }


.mj-st:last-child .mj-rail::before { display: none; }


.mj-grow { position: absolute; top: 26px; width: 2px; border-radius: 2px; height: 0; background: linear-gradient(180deg, var(--teal), var(--blue)); transition: height .45s ease .08s; }


.mj-st.on .mj-grow { height: calc(100% - 20px); }


.mj-dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--muted-2); border: 2px solid var(--bg-2); transform: scale(.82); transition: background .35s, color .35s, transform .4s cubic-bezier(.34,1.4,.5,1); }


.mj-dot svg { width: 13px; height: 13px; }


.mj-st.on .mj-dot { transform: scale(1); color: #fff; }


.mj-st.on.tg .mj-dot { background: #229ED9; }


.mj-st.on.vi .mj-dot { background: var(--purple); }


.mj-st.on.gr .mj-dot { background: var(--green); }


.mj-st.on.te .mj-dot { background: var(--teal); }


.mj-st.on.am .mj-dot { background: var(--orange); }


.mj-st.now .mj-dot { box-shadow: 0 0 0 5px rgba(13,148,136,.14); }



.mj-cw { padding-bottom: 8px; }


.mj-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 8px 10px; opacity: 0; transform: translateX(12px) scale(.97); transition: opacity .38s, transform .44s cubic-bezier(.25,1.15,.4,1), box-shadow .44s, border-color .44s; }


.mj-st.on .mj-card { opacity: 1; transform: none; }


.mj-st.now .mj-card { box-shadow: 0 8px 20px -12px rgba(13,148,136,.6); border-color: var(--teal-l); }


.mj-card .hd { display: flex; align-items: baseline; gap: 7px; }


.mj-card b { font-size: 11.5px; font-weight: 800; color: var(--ink); line-height: 1.28; }


.mj-card .tm { margin-left: auto; font-size: 9px; font-weight: 800; color: var(--muted-2); flex-shrink: 0; }


.mj-card p { font-size: 10.5px; color: var(--muted); line-height: 1.32; margin-top: 2px; }


.mj-card .amt { font-size: 13px; font-weight: 800; color: var(--teal-d); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }


.mj-stars { display: flex; gap: 1px; margin-top: 3px; }


.mj-stars svg { width: 11px; height: 11px; color: var(--orange); opacity: 0; transform: scale(.5); }


.mj-st.on .mj-stars svg { animation: mjStar .36s cubic-bezier(.34,1.5,.5,1) forwards; }


.mj-st.on .mj-stars svg:nth-child(2) { animation-delay: .06s; }


.mj-st.on .mj-stars svg:nth-child(3) { animation-delay: .12s; }


.mj-st.on .mj-stars svg:nth-child(4) { animation-delay: .18s; }


.mj-st.on .mj-stars svg:nth-child(5) { animation-delay: .24s; }


@keyframes mjStar { to { opacity: 1; transform: none; } }



.mj-typing { display: inline-flex; gap: 3px; align-items: center; height: 13px; }


.mj-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); animation: mjDot 1.1s ease-in-out infinite; }


.mj-typing i:nth-child(2) { animation-delay: .15s; }


.mj-typing i:nth-child(3) { animation-delay: .3s; }


@keyframes mjDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {

  .mj-st .mj-card, .mj-st .mj-grow, .mj-st .mj-dot { opacity: 1; transform: none; height: auto; }

  .mj-stars svg { opacity: 1; transform: none; }
}


.iv-wrap { max-width: 1344px; margin: 0 auto; padding: 0 24px; position: relative; }


.iv-head { max-width: 900px; margin: 0 auto 18px; }


.iv-head .sec-sub { max-width: 640px; margin: 0 auto; font-size: 14.5px; }



.iv-mode {
  display: flex; width: fit-content; gap: 4px; padding: 4px; margin: 0 auto 12px;
  border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line);
}



#screenshots[data-mode="pc"] .iv-h-mob,
#screenshots[data-mode="mob"] .iv-h-pc { display: none; }


.iv-mode-b {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px;
  border: 1px solid transparent; background: none; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: color .2s, background .2s, box-shadow .2s;
}


.iv-mode-b svg { width: 16px; height: 16px; stroke-width: 2; }


.iv-mode-b:hover:not(:disabled):not(.on) { color: var(--text-2); }


.iv-mode-b.on { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-xs); }


.iv-mode-b:disabled { cursor: default; }



.iv-tabs-wrap { position: relative; }



.iv-tabs-next { display: none; }



.iv-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 34px; }


.iv-tab {
  --c: var(--teal); position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 9px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap;
  box-shadow: var(--sh-xs); overflow: hidden; cursor: pointer; font-family: inherit;
  transition: color .2s, border-color .2s, box-shadow .3s, transform .25s;
}


.iv-tab-ic {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--surface));
  transition: background .25s, box-shadow .25s, transform .25s;
}


.iv-tab-ic svg { width: 17px; height: 17px; color: var(--c); stroke-width: 2.1; }


.iv-tab:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); box-shadow: var(--sh-sm); transform: translateY(-2px); }


.iv-tab:hover .iv-tab-ic { transform: scale(1.06); }


.iv-tab.on {
  color: var(--ink); border-color: color-mix(in srgb, var(--c) 46%, transparent);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--c) 60%, transparent), var(--sh-xs);
}


.iv-tab.on .iv-tab-ic { background: var(--c); box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--c) 70%, transparent); }


.iv-tab.on .iv-tab-ic svg { color: #fff; }


.iv-tab-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c);
  transform: scaleX(0); transform-origin: left; opacity: 0;
}


.iv-tab.on .iv-tab-bar { opacity: 1; }


.iv-tab.on.run .iv-tab-bar { animation: ivRun var(--iv-dur, 3s) linear forwards; }


@keyframes ivRun { from { transform: scaleX(0); } to { transform: scaleX(1); } }



.iv-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: stretch; }



.iv-stage { position: relative; }



.iv-stage::before {
  content: ''; position: absolute; inset: -30px -22px -26px; border-radius: 26px; pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 22px 22px;
  color: rgba(15,23,42,.055);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 78%);
}


.iv-stage::after {
  content: ''; position: absolute; inset: -60px -40px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(260px 200px at 12% 8%, color-mix(in srgb, var(--acc) 24%, transparent), transparent 70%),
    radial-gradient(300px 220px at 92% 88%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 72%);
  filter: blur(34px); opacity: .7; transition: background .6s ease;
}


.iv-frame {
  position: relative; padding: 7px; border-radius: 22px;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--acc) 50%, transparent) 0%,
    rgba(255,255,255,.96) 34%,
    color-mix(in srgb, var(--acc) 22%, transparent) 62%,
    rgba(255,255,255,.92) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 14%, transparent),
              0 34px 76px -20px color-mix(in srgb, var(--acc) 30%, rgba(15,23,42,.28)),
              var(--sh-lg);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, background .6s ease;
}


.iv-stage:hover .iv-frame {
  transform: translateY(-5px) scale(1.014);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 26%, transparent),
              0 52px 100px -22px color-mix(in srgb, var(--acc) 40%, rgba(15,23,42,.32)),
              0 14px 28px -14px rgba(15,23,42,.14);
}


.iv-screen { position: relative; border-radius: 16px; background: var(--surface); overflow: hidden; aspect-ratio: 1.95; }



.iv-phone {
  position: relative; width: 342px; margin: 0 auto; padding: 12px; border-radius: 50px;
  background: linear-gradient(155deg, #3a4252 0%, #111823 38%, #2b3341 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.13),
              0 44px 92px -26px color-mix(in srgb, var(--acc) 34%, rgba(15,23,42,.5)),
              0 16px 32px -16px rgba(15,23,42,.28);
  transition: box-shadow .5s ease;
}



.iv-phone::before, .iv-phone::after {
  content: ''; position: absolute; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #454e60, #242c39);
}


.iv-phone::before { left: -2px; top: 148px; height: 58px; }


.iv-phone::after { right: -2px; top: 126px; height: 86px; }


.iv-phone .iv-screen { border-radius: 38px; aspect-ratio: .585; display: flex; flex-direction: column; }


.iv-phone .iv-shot { object-position: center center; }


.iv-screen-inner { position: relative; flex: 1; min-height: 0; }



.iv-phone-bar {
  flex: 0 0 auto; height: 38px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px 2px; background: var(--surface); color: var(--ink);
  font-size: 12.5px; font-weight: 600; letter-spacing: -.01em;
}


.iv-phone-bar b { font-weight: 700; }


.iv-phone-bar span { display: inline-flex; align-items: center; gap: 5px; }


.iv-phone-bar svg { height: 11px; width: auto; }


.iv-phone-island {
  position: absolute; top: 19px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 80px; height: 23px; border-radius: 12px; background: #0a0e15;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07);
}


#screenshots[data-mode="pc"] .iv-stage[data-set="mob"],
#screenshots[data-mode="mob"] .iv-stage[data-set="pc"] { display: none; }


#screenshots[data-mode="mob"] .iv-stage::before { inset: -24px -10px -20px; }


.iv-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center top; opacity: 0; z-index: 1;
}



.iv-shot.on { opacity: 1; z-index: 2; }


.iv-shot.prev { opacity: 1; z-index: 3; animation: ivWipe .58s cubic-bezier(.65,0,.35,1) forwards; }


@keyframes ivWipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } }



.iv-sweep {
  position: absolute; top: 0; bottom: 0; width: 120px; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 34%, transparent) 62%, rgba(255,255,255,.85));
}


.iv-sweep.go { animation: ivSweep .62s cubic-bezier(.65,0,.35,1); }


@keyframes ivSweep {
  from { opacity: 1; transform: translateX(-120px); }
  to { opacity: 0; transform: translateX(calc(100% + 100vw)); }
}



.iv-rail { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }


.iv-pane { display: none; }


.iv-pane.on { display: block; animation: ivIn .45s cubic-bezier(.22,.61,.36,1) both; }


@keyframes ivIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


.iv-pane h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.02em; }


.iv-pane > p { font-size: 14px; line-height: 1.55; color: var(--muted); margin-bottom: 18px; }


.iv-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }


.iv-list li {
  display: flex; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--text-2);
  opacity: 0; animation: ivIn .4s cubic-bezier(.22,.61,.36,1) forwards;
}


.iv-pane.on .iv-list li:nth-child(1) { animation-delay: .05s; }


.iv-pane.on .iv-list li:nth-child(2) { animation-delay: .10s; }


.iv-pane.on .iv-list li:nth-child(3) { animation-delay: .15s; }


.iv-pane.on .iv-list li:nth-child(4) { animation-delay: .20s; }


.iv-pane.on .iv-list li:nth-child(5) { animation-delay: .25s; }


.iv-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--acc); transition: color .5s; }



.iv-note {
  display: flex; gap: 10px; margin-top: 18px; padding: 13px 14px; border-radius: var(--r);
  background: color-mix(in srgb, var(--acc) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--acc) 20%, transparent);
  transition: background .5s ease, border-color .5s ease;
}


.iv-note svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; color: var(--acc); stroke-width: 2; transition: color .5s; }


.iv-note p { font-size: 12.8px; line-height: 1.5; color: var(--text-2); margin: 0; }



.iv-mobnote {
  display: none; gap: 12px; align-items: center; padding: 15px 16px; border-radius: var(--r);
  background: color-mix(in srgb, var(--acc) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--acc) 24%, transparent);
  transition: background .5s ease, border-color .5s ease;
}


#screenshots[data-mode="mob"] .iv-mobnote { display: flex; }


.iv-mobnote svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--acc); stroke-width: 1.9; transition: color .5s; }


.iv-mobnote p {
  margin: 0; font-size: 13px; line-height: 1.55; font-weight: 500;
  color: color-mix(in srgb, var(--acc) 62%, #0b1220); transition: color .5s;
}



.iv-nav {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-xs);
}


.iv-nav-b {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}


.iv-nav-b svg { width: 17px; height: 17px; stroke-width: 2.3; }


.iv-nav-b:hover {
  color: var(--acc); border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  background: color-mix(in srgb, var(--acc) 7%, var(--surface)); transform: translateY(-1px);
}


.iv-nav-mid { flex: 1; min-width: 0; }


.iv-nav-mid b { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; font-variant-numeric: tabular-nums; }


.iv-nav-mid b i { font-style: normal; }


.iv-nav-dots { display: flex; gap: 4px; }


.iv-nav-dots span { flex: 1; height: 4px; border-radius: 3px; background: var(--surface-3); transition: background .35s ease, flex-grow .35s ease; }


.iv-nav-dots span.on { flex-grow: 2.4; background: var(--acc); }



.iv-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden;
}


.iv-fact { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; position: relative; }


.iv-fact + .iv-fact::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--line-soft); }


.iv-fact-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, var(--surface)); }


.iv-fact-ic svg { width: 39px; height: 34px; color: var(--c); stroke-width: 1.9; }


.iv-fact b { display: block; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }


.iv-fact span { display: block; font-size: 11.5px; line-height: 1.4; color: var(--muted); margin-top: 2px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {

  .iv-shot, .iv-pane, .iv-list li, .iv-frame { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }

  .iv-shot:not(.on) { opacity: 0 !important; }

  .iv-sweep { display: none; }

  .iv-tab.on.run .iv-tab-bar { animation: none; transform: scaleX(1); }
}



.sw-hold { display: contents; }


.sw-nav { display: none; }


.sw-nav button { display: grid; place-items: center; width: 25px; height: 26px; border-radius: 17px; cursor: pointer;
  background: #141414c4; border: 1px solid var(--line); color: var(--arrow);
  transition: color .2s, border-color .2s, opacity .25s, transform .15s; }


.sw-nav button:active { transform: scale(.9); }


.sw-nav button:disabled { opacity: 0; pointer-events: none; }


.sw-nav svg { width: 15px; height: 15px; transition: transform .3s cubic-bezier(.22,1,.36,1); }


.sw-nav button.back svg { transform: rotate(180deg); }


:root[data-theme="light"] .sw-nav button { background: rgba(255,255,255,.88); }


@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


@keyframes svDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-16px, 12px, 0) scale(1.06); }
}


.sv-dots {
  position: absolute; top: 96px; left: 57%; width: 152px; height: 100px; z-index: 0;
  background-image: radial-gradient(circle, rgba(13,148,136,.30) 1.1px, transparent 1.1px);
  background-size: 13px 13px;
  mask-image: linear-gradient(115deg, #000 12%, transparent 78%);
  -webkit-mask-image: linear-gradient(115deg, #000 12%, transparent 78%);
  pointer-events: none;
}



.sv-head { text-align: center; margin-bottom: 22px; }


.sv-label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 11px; border-radius: 100px;
  font-size: 12px; font-weight: 600;
  background: var(--teal-l); color: var(--teal-d);
  border: 1px solid transparent;
}


.sv-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,.18);
}


.sv-label svg { width: 13px; height: 13px; flex-shrink: 0; }



.sv-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 600px;
  gap: 24px; align-items: start;
}



.sv-title {
  font-size: clamp(28px, 2.9vw, 39px); font-weight: 700; line-height: 1.14;
  color: var(--ink); letter-spacing: -0.028em; margin-bottom: 14px;
}


.sv-title em { font-style: normal; color: var(--teal); }


.sv-sub {
  font-size: 16.5px; color: var(--muted); max-width: 520px;
  line-height: 1.6; margin-bottom: 32px;
}



.sv-points { display: flex; flex-direction: column; gap: 18px; max-width: 545px; }


.sv-pt { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 17px; align-items: start; }



.sv-pt-ic {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}


.sv-pt-ic svg { width: 22px; height: 22px; stroke-width: 1.9px; }


.sv-ic-teal { background: var(--teal-f);  color: var(--teal);   box-shadow: inset 0 0 0 1px rgba(13,148,136,.12); }


.sv-ic-orange { background: #fffbeb;        color: var(--orange); box-shadow: inset 0 0 0 1px rgba(245,158,11,.14); }


.sv-ic-red { background: #fef2f2;        color: var(--red);    box-shadow: inset 0 0 0 1px rgba(239,68,68,.13); }


.sv-ic-purple { background: var(--purple-f); color: var(--purple); box-shadow: inset 0 0 0 1px rgba(139,92,246,.13); }



.sv-pt-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }


.sv-pt-hd h3 { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }


.sv-tag {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px;
  white-space: nowrap; line-height: 1.4;
}


.sv-tag-teal { background: var(--teal-l);  color: var(--teal-d); }


.sv-tag-orange { background: #fef3c7;        color: #b45309; }


.sv-tag-red { background: #fee2e2;        color: #b91c1c; }


.sv-tag-purple { background: var(--purple-l); color: #7c3aed; }


.sv-pt p { font-size: 14.4px; color: var(--muted); line-height: 1.58; }


.sv-pt-arrow { display: none; }



.sv-pt { transition: opacity .3s ease; }


.sv-pt.dim { opacity: .46; }


.sv-pt.live .sv-pt-ic { transform: scale(1.1); }


.sv-pt.live.p1 .sv-pt-ic { box-shadow: inset 0 0 0 1px rgba(13,148,136,.3), 0 0 0 6px rgba(13,148,136,.10); }


.sv-pt.live.p2 .sv-pt-ic { box-shadow: inset 0 0 0 1px rgba(245,158,11,.3), 0 0 0 6px rgba(245,158,11,.11); }


.sv-pt.live.p3 .sv-pt-ic { box-shadow: inset 0 0 0 1px rgba(239,68,68,.3),  0 0 0 6px rgba(239,68,68,.11); }



.sv-stage {
  position: relative; width: 640px; height: 552px;
  transform: scale(.94); transform-origin: top left;
}


.sv-halo {
  position: absolute; left: 22px; top: -46px; width: 600px; height: 600px; z-index: 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(204,251,241,.66), rgba(240,253,250,.20) 60%, rgba(240,253,250,0) 80%);
}


.sv-pedestal {
  position: absolute; left: 150px; top: 548px; width: 340px; height: 74px; z-index: 0;
  background: radial-gradient(52% 52% at 50% 28%, rgba(13,148,136,.28), transparent 72%);
  filter: blur(11px);
  transition: opacity .5s ease, transform .5s ease;
}


.sv-pedestal::after {
  content: ''; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  width: 258px; height: 28px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(94,234,212,.72), rgba(240,253,250,0));
}


.sv-stage.alert .sv-pedestal { opacity: 1; transform: scale(1.06); }



.sv-links { position: absolute; inset: 0; z-index: 1; overflow: visible; }


.sv-links path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 6; }


.sv-links .head { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: none; }



.sv-phone {
  position: absolute; left: 170px; top: 24px; width: 296px; height: 560px; z-index: 3;
  background: var(--surface); border-radius: 32px; box-shadow: var(--sh-xl);
  display: flex; flex-direction: column; overflow: hidden;
  outline: 1px solid rgba(15,23,42,.05); outline-offset: -1px;
}


.sv-ph-top {
  display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  background: linear-gradient(135deg, var(--teal-d) 0%, var(--teal) 62%, #14a89a 100%);
  color: #fff; flex-shrink: 0;
}


.sv-ava {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.30);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}


.sv-ph-hd { min-width: 0; flex: 1; }


.sv-ph-hd b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }


.sv-ph-hd span {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: rgba(255,255,255,.86); line-height: 1.5;
}


.sv-ph-hd span svg { width: 14px; height: 14px; flex-shrink: 0; }


.sv-ph-dots { display: flex; gap: 3px; flex-shrink: 0; opacity: .8; }


.sv-ph-dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--surface); }



.sv-chat {
  flex: 1; min-height: 0; padding: 13px 13px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  background: linear-gradient(180deg, #fbfdfd 0%, #f7fbfa 100%);
  overflow: hidden;
}


.sv-bub {
  max-width: 85%; padding: 8px 11px; font-size: 13px; line-height: 1.48;
  border-radius: 14px; position: relative;
}


.sv-in { align-self: flex-start; background: var(--surface); color: var(--text-2); box-shadow: var(--sh-sm); border-bottom-left-radius: 5px; }


.sv-out { align-self: flex-end; background: linear-gradient(140deg, #d7f5ee, #cdf0e6); color: #0b3c35; border-bottom-right-radius: 5px; }


.sv-time { font-size: 10.5px; color: var(--muted-2); margin-left: 6px; }


.sv-out .sv-time { color: rgba(11,60,53,.5); }


.sv-meta {
  display: flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: 10.5px; color: rgba(11,60,53,.62); font-weight: 500;
}


.sv-tick { width: 13px; height: 13px; position: relative; flex-shrink: 0; }


.sv-tick svg { position: absolute; inset: 0; width: 13px; height: 13px; stroke-width: 3px; }


.sv-tick .t2 { opacity: 0; transform: translateX(-3px); }



.sv-typing {
  align-self: flex-start; background: var(--surface); box-shadow: var(--sh-sm);
  border-radius: 14px; border-bottom-left-radius: 5px;
  padding: 11px 13px; display: flex; gap: 4px;
}


.sv-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); display: block;
  animation: svDot 1.1s infinite ease-in-out;
}


.sv-typing i:nth-child(2) { animation-delay: .16s; }


.sv-typing i:nth-child(3) { animation-delay: .32s; }


@keyframes svDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }



.sv-card {
  align-self: stretch; background: var(--surface); border-radius: 13px; padding: 10px 11px;
  box-shadow: var(--sh-sm); border: 1px solid var(--line-soft);
}


.sv-card-hd {
  display: flex; align-items: center; gap: 7px; font-size: 12.6px; font-weight: 700;
  color: var(--ink); margin-bottom: 3px;
}


.sv-card-hd svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; stroke-width: 2.4px; }


.sv-card p { font-size: 12.2px; color: var(--muted); line-height: 1.45; }



.sv-review { align-self: stretch; text-align: center; background: var(--surface); border-radius: 14px; padding: 12px 11px 11px; box-shadow: var(--sh-sm); border: 1px solid var(--line-soft); }


.sv-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 7px; }


.sv-stars svg { width: 19px; height: 19px; fill: var(--orange); }


.sv-review-txt { font-size: 12.8px; font-weight: 600; color: var(--ink); line-height: 1.42; }


.sv-review-sub { font-size: 11px; color: var(--muted-2); margin-top: 3px; }



.sv-ph-input {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; flex-shrink: 0;
  background: var(--surface); border-top: 1px solid var(--line-soft);
}


.sv-ph-input > svg { width: 18px; height: 18px; color: var(--muted-2); flex-shrink: 0; }


.sv-ph-input span { flex: 1; font-size: 13px; color: var(--muted-2); }


.sv-send {
  width: 33px; height: 33px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, var(--teal), var(--teal-d));
  display: grid; place-items: center; box-shadow: 0 4px 12px -3px rgba(13,148,136,.5);
}


.sv-send svg { width: 15px; height: 15px; color: #fff; stroke-width: 2.2px; }



.sv-sat {
  position: absolute; z-index: 4; background: var(--surface); border-radius: 15px;
  padding: 10px 12px; box-shadow: var(--sh-lg);
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(15,23,42,.05);
}


.sv-sat-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }


.sv-sat-ic svg { width: 16px; height: 16px; stroke-width: 2px; }


.sv-sat-b { min-width: 0; }


.sv-sat-b b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.34; letter-spacing: -0.01em; }


.sv-sat-b i { font-style: normal; display: block; font-size: 10.8px; color: var(--muted-2); margin-top: 2px; }


.sv-sat-pin {
  position: absolute; left: -9px; top: -9px; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 100px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 3px 9px -2px rgba(239,68,68,.6); border: 2px solid #fff;
}



.sat-in { left: 456px; top: 42px;  width: 184px; }


.sat-ans { left: 474px; top: 214px; width: 176px; }


.sat-del { left: 456px; top: 364px; width: 172px; }


.sat-star { left: 6px;   top: 122px; width: 176px; }


.sat-low { left: 0;     top: 326px; width: 190px; }


.sat-owner { left: 8px;   top: 458px; width: 180px; }



.sat-in    .sv-sat-ic { background: #e0f2fe; color: var(--tg); }


.sat-ans   .sv-sat-ic { background: #d1fae5; color: #047857; }


.sat-del   .sv-sat-ic { background: #e0f2fe; color: var(--blue-d); }


.sat-star  .sv-sat-ic { background: #fef3c7; color: #b45309; }


.sat-low   .sv-sat-ic { background: #fee2e2; color: #b91c1c; }


.sat-owner .sv-sat-ic { background: var(--purple-l); color: #6d28d9; }



.sv-bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; margin-top: 30px; align-items: stretch;
}


.sv-panel {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh);
  border: 1px solid var(--line-soft); padding: 18px 6px;
}



.sv-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }


.sv-fact { padding: 2px 14px; position: relative; }


.sv-fact + .sv-fact::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line-soft);
}


.sv-fact-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }


.sv-fact-top svg { width: 19px; height: 19px; flex-shrink: 0; stroke-width: 2px; }


.sv-fact-n { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }


.sv-fact p { font-size: 11.4px; color: var(--muted); line-height: 1.42; }


.f-teal { color: var(--teal); }

   .f-teal   .sv-fact-n { color: var(--teal-d); }


.f-orange { color: var(--orange); }

 .f-orange .sv-fact-n { color: #b45309; }


.f-red { color: var(--red); }

    .f-red    .sv-fact-n { color: #b91c1c; }


.f-purple { color: var(--purple); }

 .f-purple .sv-fact-n { color: #6d28d9; }



.sv-chan-wrap { min-width: 0; display: flex; flex-direction: column; }


.sv-chan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; }


.sv-chan-hd { display: none; }


.sv-ch { display: flex; align-items: center; gap: 10px; padding: 2px 12px; position: relative; }


.sv-ch + .sv-ch::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line-soft);
}


.sv-ch-ic {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  flex-shrink: 0; position: relative;
}


.sv-ch-ic > svg { width: 25px; height: 25px; }


.sv-ch-b { min-width: 0; }


.sv-ch-b b { display: block; font-size: 12.6px; font-weight: 700; color: var(--ink); line-height: 1.3; letter-spacing: -0.015em; white-space: nowrap; }


.sv-ch-b i { font-style: normal; display: block; font-size: 11px; color: var(--muted-2); margin-top: 1px; }


.sv-ch-b i.on { color: var(--teal-d); font-weight: 600; }



.ch-tg .sv-ch-ic { background: var(--tg); box-shadow: 0 4px 12px -4px rgba(34,158,217,.6); }


.ch-wa .sv-ch-ic { background: var(--wa); box-shadow: 0 4px 12px -4px rgba(37,211,102,.55); }


.ch-tg .sv-ch-ic > svg, .ch-wa .sv-ch-ic > svg { color: #fff; }


.sv-ch-bot {
  position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--teal-l); display: grid; place-items: center;
  box-shadow: 0 2px 6px -1px rgba(15,23,42,.18);
}


.sv-ch-bot svg { width: 16px; height: 16px; color: var(--teal-d); }


.ch-bell .sv-ch-ic { background: #fffbeb; box-shadow: inset 0 0 0 1px rgba(245,158,11,.2); }


.ch-bell .sv-ch-ic > svg { color: var(--orange); }



.sv-anim .sv-bub, .sv-anim .sv-card, .sv-anim .sv-review, .sv-anim .sv-typing {
  opacity: 0; transform: translateY(12px);
  transition: opacity .34s ease, transform .34s ease;
}


.sv-anim .sv-sat { opacity: 0; transition: opacity .34s ease, transform .38s ease; }


.sv-anim .sat-in, .sv-anim .sat-ans, .sv-anim .sat-del { transform: translateX(18px) scale(.95); }


.sv-anim .sat-star, .sv-anim .sat-low, .sv-anim .sat-owner { transform: translateX(-18px) scale(.95); }


.sv-anim .sv-sat-pin { opacity: 0; transform: scale(.4); transition: opacity .28s ease, transform .3s ease; }


.sv-anim .sv-links path { opacity: 0; transition: opacity .4s ease; }


.sv-anim .sv-links .head { opacity: 0; transition: opacity .3s ease; }


.sv-anim .sv-stars svg { opacity: 0; transform: scale(.5); transition: opacity .3s ease, transform .3s ease; }


.sv-anim .sv-pedestal { opacity: .5; }



.sv-anim .sv-bub.go, .sv-anim .sv-card.go, .sv-anim .sv-review.go, .sv-anim .sv-typing.go {
  opacity: 1; transform: none;
  transition: opacity .3s ease, transform .36s cubic-bezier(.22,1,.36,1);
}


.sv-anim .sv-typing.off { opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .2s ease, transform .2s ease; }


.sv-anim .sv-sat.go {
  opacity: 1; transform: none;
  transition: opacity .32s ease, transform .44s cubic-bezier(.34,1.42,.64,1);
}


.sv-anim .sv-sat-pin.go { opacity: 1; transform: none; transition: opacity .24s ease, transform .42s cubic-bezier(.34,1.7,.64,1); }


.sv-anim .sv-links path.go { opacity: 1; transition: opacity .55s ease; }


.sv-anim .sv-links .head.go { opacity: 1; transition: opacity .26s ease .44s; }



.sv-anim .sv-review.go svg { opacity: 1; transform: none; transition: opacity .22s ease, transform .34s cubic-bezier(.34,1.7,.64,1); }


.sv-anim .sv-review.go .sv-stars svg:nth-child(1) { transition-delay: .10s; }


.sv-anim .sv-review.go .sv-stars svg:nth-child(2) { transition-delay: .19s; }


.sv-anim .sv-review.go .sv-stars svg:nth-child(3) { transition-delay: .28s; }


.sv-anim .sv-review.go .sv-stars svg:nth-child(4) { transition-delay: .37s; }


.sv-anim .sv-review.go .sv-stars svg:nth-child(5) { transition-delay: .46s; }



.sv-anim .sv-bub.go .sv-tick .t2 { opacity: 1; transform: none; transition: opacity .24s ease .5s, transform .3s ease .5s; }



.sv-anim .sat-low.go .sv-sat-ic svg { animation: svShake .55s ease .2s 2; transform-origin: 50% 20%; }


@keyframes svShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }



.sv-anim .sv-phone { animation: svFloat 7s ease-in-out infinite alternate; }


@keyframes svFloat { from { transform: translateY(0); } to { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {

  .sv-anim .sv-bub, .sv-anim .sv-card, .sv-anim .sv-review,
  .sv-anim .sv-sat, .sv-anim .sv-sat-pin, .sv-anim .sv-stars svg { opacity: 1; transform: none; }

  .sv-anim .sv-links path { opacity: 1; }

  .sv-anim .sv-links .head { opacity: 1; }

  .sv-anim .sv-typing { display: none; }

  .sv-anim .sv-phone { animation: none; }

  .sv-anim .sv-tick .t2 { opacity: 1; transform: none; }

  .sv-pt.dim { opacity: 1; }
}


#geo .geo-head { text-align: center; }


.geo-hl { color: var(--teal); }



.geo-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 20px;
  align-items: stretch; margin-bottom: 16px;
}



.geo-map {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 24px; padding: 16px 16px 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.94), color-mix(in srgb, var(--gacc) 12%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--gacc) 16%, transparent);
  box-shadow: 0 18px 44px -24px color-mix(in srgb, var(--gacc) 34%, transparent),
              0 2px 6px -2px rgba(15,23,42,.04);
  transition: background .7s ease, border-color .7s ease, box-shadow .7s ease;
}


.geo-canvas {
  position: relative; flex: 1; display: flex; align-items: center;
  -webkit-mask-image: radial-gradient(116% 116% at 50% 50%, #000 44%, transparent 97%);
          mask-image: radial-gradient(116% 116% at 50% 50%, #000 44%, transparent 97%);
}


.geo-svg { display: block; width: 100%; height: auto; }


.geo-svg-mob { display: none; }


.geo-sea { fill: #e9f4f6; }


.geo-ld { fill: rgba(13,148,136,.07); }


.geo-mk {
  fill: rgba(13,148,136,.20); stroke: rgba(13,148,136,.32); stroke-width: 1.1;
  transition: fill .35s ease, stroke .35s ease;
}


.geo-mk.hot { fill: color-mix(in srgb, var(--gacc) 42%, transparent);
             stroke: color-mix(in srgb, var(--gacc) 62%, transparent); }


.geo-hm { stroke: rgba(13,148,136,.6); stroke-width: 1.3; }


.geo-ln {
  fill: none; stroke: rgba(13,148,136,.42); stroke-width: 1.3;
  stroke-dasharray: 4 6; stroke-linecap: round; opacity: 0;
  animation: geoIn .7s ease forwards; animation-delay: var(--d);
  transition: stroke .45s ease, stroke-width .45s ease;
}


.geo-ln.hot { stroke: color-mix(in srgb, var(--gacc) 92%, transparent); stroke-width: 1.7; }


.geo-pn {
  fill: var(--green); opacity: 0; transition: r .4s ease;
  animation: geoIn .5s ease forwards; animation-delay: var(--d);
  filter: drop-shadow(0 0 6px rgba(16,185,129,.85));
}


.geo-pn.hot { r: 5.2; fill: var(--gacc); }


.geo-sp { fill: var(--green); opacity: 0; offset-distance: 0%;
  filter: drop-shadow(0 0 7px rgba(16,185,129,.95)); }


.geo-sp.hot { animation: geoRun .8s cubic-bezier(.4,0,.35,1) forwards; }


@keyframes geoRun {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}


@keyframes geoIn { to { opacity: 1; } }


.geo-cr { fill: var(--teal); }


.geo-wv { fill: none; stroke: rgba(13,148,136,.55); animation: geoPulse 2.2s ease-out infinite; }


.geo-wv:nth-of-type(2) { animation-delay: 1.1s; }


@keyframes geoPulse {
  0%   { r: 5; opacity: .85; stroke-width: 2; }
  100% { r: 30; opacity: 0; stroke-width: .5; }
}



.geo-chip {
  position: absolute; z-index: 2; left: var(--px); top: var(--py);
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px 8px 9px; border-radius: 12px; background: var(--surface);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 26px -12px rgba(15,23,42,.28), 0 2px 5px -2px rgba(15,23,42,.06);
  opacity: 0; transform: translateY(8px);
  animation: geoChip .5s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: var(--d, .4s);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}


@keyframes geoChip { to { opacity: 1; transform: none; } }


.geo-chip.hot {
  border-color: color-mix(in srgb, var(--gacc) 45%, transparent); transform: translateY(-4px);
  box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--gacc) 55%, transparent);
}


.geo-chip img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(15,23,42,.08); flex-shrink: 0; }


.geo-chip b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }


.geo-sup { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); margin-top: 1px; }


.geo-sup i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; }


.geo-chip-main { padding: 10px 14px 10px 11px; border-radius: 14px;
  box-shadow: 0 16px 38px -14px rgba(13,148,136,.45), 0 3px 8px -3px rgba(15,23,42,.1); }


.geo-chip-main img { width: 30px; height: 21px; }


.geo-chip-main b { font-size: 15.5px; }


.geo-tag {
  display: inline-block; margin-top: 3px; padding: 3px 9px; border-radius: 7px;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #17c1ac, #0d9488);
}



.geo-note { display: flex; align-items: center; gap: 11px; margin-top: 8px; }


.geo-note-ic {
  width: 37px; height: 37px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--teal-d); background: rgba(13,148,136,.10);
}


.geo-note p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }



.geo-nums {
  position: relative; overflow: hidden; border-radius: 24px; padding: 18px;
  background: linear-gradient(165deg, #fff 0%, #f7fdfc 62%, #eefaf8 100%);
  border: 1px solid rgba(13,148,136,.12);
  box-shadow: 0 18px 44px -24px rgba(13,148,136,.34), 0 2px 6px -2px rgba(15,23,42,.04);
  display: flex; flex-direction: column; gap: 8px;
}


.geo-nums::before {
  content: ''; position: absolute; left: -30%; top: -40%; width: 90%; height: 80%;
  background: radial-gradient(closest-side, rgba(20,184,166,.16), transparent 72%);
  filter: blur(10px); pointer-events: none;
  animation: geoDrift 11s ease-in-out infinite alternate;
}


@keyframes geoDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(46%, 34%, 0) scale(1.25); }
}


.geo-nums-h { position: relative; display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }


.geo-nums-h b {
  font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800;
  color: var(--ink); letter-spacing: -.02em;
}


.geo-nums-h i {
  flex: 1; height: 2px; border-radius: 2px; transform-origin: left;
  background: linear-gradient(90deg, rgba(13,148,136,.55), rgba(13,148,136,0));
  animation: geoBar 1s cubic-bezier(.22,.61,.36,1) .2s both;
}


@keyframes geoBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }



.geo-num {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; border-radius: 14px;
  background: rgba(255,255,255,.86); border: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(10px);
  animation: geoRow .55s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: var(--d);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}


@keyframes geoRow { to { opacity: 1; transform: none; } }


.geo-num:hover { border-color: rgba(13,148,136,.3); box-shadow: 0 10px 24px -14px rgba(13,148,136,.55); transform: translateY(-2px); }


.geo-num-ic {
  width: 40px; height: 48px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--teal-d);
  background: linear-gradient(150deg, rgba(13,148,136,.17), rgba(13,148,136,.07));
}


.geo-num-t { display: flex; align-items: baseline; gap: 6px; }


.geo-num-n { display: inline-flex; align-items: baseline; }


.geo-num-v, .geo-num-sf {
  font-family: 'Manrope', sans-serif; font-size: 25px; font-weight: 800;
  color: var(--teal); letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums;
}


.geo-num-u { font-size: 13.5px; font-weight: 600; color: var(--text); }


.geo-num-s { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }



.geo-local {
  position: relative; display: flex; align-items: center; gap: 10px; margin-top: auto;
  padding: 13px 14px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(13,148,136,.15), rgba(13,148,136,.06));
  border: 1px solid rgba(13,148,136,.16);
  opacity: 0; animation: geoRow .55s ease .78s forwards;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}


.geo-local:hover { border-color: rgba(13,148,136,.36); box-shadow: 0 12px 26px -14px rgba(13,148,136,.6); }


.geo-local:active { transform: scale(.99); }


.geo-local > svg { color: var(--teal-d); flex-shrink: 0; }


.geo-local div { flex: 1; min-width: 0; }


.geo-local b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }


.geo-local span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }



.geo-chev {
  position: absolute; right: 12px; top: 50%; margin-top: -8px;
  color: var(--teal-d); opacity: .55; transition: opacity .2s ease, transform .2s ease;
}


.geo-local:hover .geo-chev { opacity: 1; transform: translateX(3px); }



.geo-strip {
  border-radius: 20px; background: var(--surface); border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 16px 40px -26px rgba(15,23,42,.22), 0 2px 6px -2px rgba(15,23,42,.04);
  overflow: hidden;
}


.geo-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }


.geo-fx { display: flex; align-items: center; gap: 10px; padding: 14px 12px; }


.geo-fx + .geo-fx { border-left: 1px solid var(--line-soft); }


.geo-fx-ic {
  width: 37px; height: 48px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--teal-d);
  background: linear-gradient(150deg, rgba(13,148,136,.16), rgba(13,148,136,.06));
}


.geo-fx b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }


.geo-fx span { display: block; font-size: 11.5px; line-height: 1.4; color: var(--muted); margin-top: 2px; }



.geo-foot {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 16px; font-size: 13.5px; color: var(--muted);
}


.geo-foot svg { color: var(--green); transform-origin: center; animation: geoBeat 1.8s ease-in-out infinite; }


@keyframes geoBeat {
  0%, 62%, 100% { transform: scale(1); filter: none; }
  10% { transform: scale(1.28); filter: drop-shadow(0 0 7px rgba(16,185,129,.85)); }
  22% { transform: scale(1); }
  32% { transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(16,185,129,.55)); }
  44% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {

  .geo-wv, .geo-nums::before, .geo-foot svg, .geo-track { animation: none; }
}


.pf-hl {
  background: linear-gradient(95deg, #0ea5e9, #10b981 55%, #22c55e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}



.pf-board {
  position: relative; display: grid; grid-template-columns: 1fr 236px 1fr; gap: 62px;
  align-items: stretch; margin-bottom: 26px;
}


.pf-col {
  --c: var(--crm);
  position: relative; z-index: 2; text-align: left; padding: 18px 22px; border-radius: 22px;
  background: var(--surface); border: 1px solid rgba(15,23,42,.06); border-top: 3px solid var(--c);
  box-shadow: 0 20px 46px -26px rgba(15,23,42,.26), 0 2px 6px -2px rgba(15,23,42,.04);
  transition: box-shadow .45s ease, border-color .45s ease, transform .45s ease;
}


.pf-col-erp { --c: var(--erp); }


.pf-saas { --c: var(--saas); }


.pf-col.hot {
  border-color: color-mix(in srgb, var(--c) 34%, transparent); transform: translateY(-3px);
  box-shadow: 0 26px 54px -24px color-mix(in srgb, var(--c) 45%, transparent),
              0 2px 6px -2px rgba(15,23,42,.05);
}



.pf-head { display: grid; grid-template-columns: 44px 1fr; column-gap: 11px; align-items: center; }


.pf-txt { display: contents; }


.pf-ic {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface));
}


.pf-ic svg { width: 32px; height: 32px; }


.pf-head b {
  font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 800;
  letter-spacing: .01em; color: var(--c);
}


.pf-head h3 {
  grid-column: 1 / -1; font-size: 20px; font-weight: 800; color: var(--ink); margin: 13px 0 6px;
}


.pf-head p { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0 0 14px; }


.pf-chev, .pf-wire { display: none; }


.pf-list { list-style: none; display: flex; flex-direction: column; gap: 8px; text-align: left; }


.pf-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }


.pf-tick {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  color: #fff; background: var(--c);
}


.pf-tick svg { width: 13px; height: 13px; }



.pf-logo { position: relative; z-index: 3; display: grid; place-items: center; padding: 0 6px; }


.pf-logo img { width: 206px; height: auto; filter: drop-shadow(0 14px 30px rgba(15,23,42,.14)); }


.pf-logo::before, .pf-logo::after {
  content: ''; position: absolute; top: 50%; width: 59px; height: 0;
  opacity: 0; animation: pfIn .8s ease .3s forwards;
}


.pf-logo::before { left: -44px; border-top: 1.7px dashed color-mix(in srgb, var(--crm) 60%, transparent); }


.pf-logo::after { right: -44px; border-top: 1.7px dashed color-mix(in srgb, var(--erp) 60%, transparent); }


.pf-dot {
  position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  opacity: 0; animation: pfIn .6s ease .5s forwards;
}


.pf-dot.l { left: -50px; background: var(--crm); box-shadow: 0 0 0 4px color-mix(in srgb, var(--crm) 18%, transparent); }


.pf-dot.r { right: -50px; background: var(--erp); box-shadow: 0 0 0 4px color-mix(in srgb, var(--erp) 18%, transparent); }


.pf-dot.d {
  left: 50%; top: auto; bottom: -19px; margin: 0 0 0 -6px;
  background: var(--saas); box-shadow: 0 0 0 4px color-mix(in srgb, var(--saas) 18%, transparent);
}



.pf-down {
  position: absolute; left: 50%; top: 50%; bottom: -26px; width: 0; margin: 92px 0 0 -1px;
  border-left: 1.7px dashed color-mix(in srgb, var(--saas) 60%, transparent);
  opacity: 0; animation: pfIn .8s ease .45s forwards;
}


@keyframes pfIn { to { opacity: 1; } }



.pf-run {
  position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  opacity: 0; pointer-events: none;
}


.pf-run.l {
  left: -48px; background: var(--crm);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--crm) 80%, transparent));
  animation: pfRunL 1.2s cubic-bezier(.4,0,.35,1) infinite;
}


.pf-run.r {
  right: -48px; background: var(--erp);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--erp) 80%, transparent));
  animation: pfRunR 1.2s cubic-bezier(.4,0,.35,1) infinite .4s;
}


.pf-run.d {
  left: 50%; top: auto; bottom: -17px; margin: 0 0 0 -4px; background: var(--saas);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--saas) 80%, transparent));
  animation: pfRunD 1.2s cubic-bezier(.4,0,.35,1) infinite .8s;
}


@keyframes pfRunL { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translateX(55px); opacity: 0; } }


@keyframes pfRunR { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translateX(-55px); opacity: 0; } }


@keyframes pfRunD { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translateY(-82px); opacity: 0; } }



.pf-saas {
  display: grid; grid-template-columns: 310px 1fr; gap: 24px; align-items: center;
  padding: 15px 22px; margin-bottom: 14px;
}


.pf-saas .pf-head h3 { margin-top: 11px; }


.pf-saas .pf-head p { margin-bottom: 0; }


.pf-saas .pf-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 9px 28px;
}



.pf-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-radius: 20px; background: var(--surface); border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 16px 40px -26px rgba(15,23,42,.22); overflow: hidden;
}


.pf-fx {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 11px 8px; gap: 5px;
}


.pf-fx + .pf-fx { border-left: 1px solid var(--line-soft); }


.pf-fx-ic {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  color: var(--teal-d); background: linear-gradient(150deg, rgba(13,148,136,.15), rgba(13,148,136,.05));
}


.pf-fx-ic svg { width: 35px; height: 46px; }


.pf-fx:nth-child(2) .pf-fx-ic { color: var(--blue-d); background: linear-gradient(150deg, rgba(14,165,233,.15), rgba(14,165,233,.05)); }


.pf-fx:nth-child(3) .pf-fx-ic { color: var(--purple-d); background: linear-gradient(150deg, rgba(139,92,246,.15), rgba(139,92,246,.05)); }


.pf-fx:nth-child(4) .pf-fx-ic { color: #d97706; background: linear-gradient(150deg, rgba(245,158,11,.16), rgba(245,158,11,.05)); }


.pf-fx:nth-child(5) .pf-fx-ic { color: #db2777; background: linear-gradient(150deg, rgba(236,72,153,.14), rgba(236,72,153,.05)); }


.pf-fx:nth-child(6) .pf-fx-ic { color: var(--green); background: linear-gradient(150deg, rgba(16,185,129,.15), rgba(16,185,129,.05)); }


.pf-fx b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }


.pf-fx-d { display: block; font-size: 11.5px; line-height: 1.4; color: var(--muted); }


@keyframes pfWireA { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translate(-134px, 46px); opacity: 0; } }


@keyframes pfWireB { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translate(134px, 46px); opacity: 0; } }


@keyframes pfWireC { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; }
  70% { opacity: 1; } 100% { transform: translate(0, 50px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
 .pf-run, .pf-spark { display: none; }
}


.feat-intro { text-align: center; max-width: 720px; margin: 0 auto 6px; }


.feat-intro .sec-sub { margin: 0 auto; }



.feat-orbs { position: relative; height: 84px; margin: 0 auto 0; max-width: 900px; }


.feat-orb-lines { position: absolute; inset: 0; width: 100%; height: 100%; }


.feat-orb {
  position: absolute; top: 4px; width: 54px; height: 54px; border-radius: 17px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.35);
}


.feat-orb svg { width: 24px; height: 24px; }


.feat-orb-1 { left: 2%; color: var(--teal); box-shadow: var(--sh-lg), 0 0 0 1px rgba(13,148,136,.1) inset; }


.feat-orb-2 { left: 50%; top: 28px; transform: translateX(-50%); color: var(--teal-d); }


.feat-orb-3 { right: 2%; color: var(--purple-d); }



.feat-big {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-bottom: 20px;
}


.feat-big-card {
  background: var(--surface); border-radius: var(--r-lg);
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  overflow: hidden;
  display: flex; flex-direction: column;
}


.feat-big-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--teal-l);
}


.feat-big-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  margin-bottom: 14px; width: fit-content;
}


.feat-big-badge i { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }


.feat-big-badge--mint { background: var(--teal-l); color: var(--teal-d); }


.feat-big-badge--mint i { background: var(--teal); }


.feat-big-badge--blue { background: rgba(14,165,233,.14); color: var(--blue-d); }


.feat-big-badge--blue i { background: var(--blue); }


.feat-big-badge--purple { background: var(--purple-l); color: var(--purple-d); }


.feat-big-badge--purple i { background: var(--purple); }


.feat-big-card h3 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 22px; font-weight: 800; color: var(--ink);
  margin-bottom: 10px; letter-spacing: -0.02em;
}


.feat-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0;
  padding: 3px 10px; border-radius: 999px; border: 1px solid;
}


.feat-chip--mint { color: var(--teal-d); border-color: var(--teal-l); background: var(--teal-f); }


.feat-chip--purple { padding: 5px; border: 0; background: var(--purple-l); color: var(--purple-d); }


.feat-chip--purple svg { width: 14px; height: 14px; display: block; }


.feat-big-card p {
  font-size: 14px; color: var(--muted);
  line-height: 1.6; margin-bottom: 14px;
}


.feat-big-visual {
  border-radius: var(--r); border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
  padding: 8px;
  display: flex; align-items: center; justify-content: center;
  height: 222px; overflow: hidden;
}



/* Зубная карта */
.fteeth { width: 100%; font-family: 'Manrope', sans-serif; }


.fteeth-top {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface); border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: 7px 10px; border: 1px solid var(--line-soft); border-bottom: 0;
  font-size: 12px; font-weight: 700; color: var(--ink);
}


.fteeth-top-ic { color: var(--teal); display: flex; flex-shrink: 0; }


.fteeth-top-ic svg { width: 14px; height: 14px; }


.fteeth-top-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.fteeth-top-support {
  width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--bg-2); color: var(--muted);
}


.fteeth-top-support svg { width: 11px; height: 11px; }


.fteeth-top-3d {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 4px 8px; border-radius: 999px; background: var(--teal-f); color: var(--teal-d);
  font-size: 10.5px; font-weight: 700;
}


.fteeth-top-3d svg { width: 11px; height: 11px; }


.fteeth-body {
  display: flex; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-soft);
  padding: 7px 8px;
}


.fteeth-side { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }


.fteeth-side-btn {
  width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center; color: var(--muted);
  background: var(--bg-2);
}


.fteeth-side-btn svg { width: 12px; height: 12px; }


.fteeth-side-btn.on { background: var(--teal); color: #fff; }


.fteeth-rows { flex: 1; min-width: 0; }


.fteeth-row { display: flex; justify-content: space-between; gap: 2px; }


.fteeth-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; min-width: 0; }


.fteeth-num { font-size: 9px; font-weight: 700; color: var(--text-2); }


.fteeth-item img { width: 100%; max-width: 18px; height: auto; display: block; }


.fteeth-divider { position: relative; height: 1px; background: var(--line-soft); margin: 3px 0; }


.fteeth-divider-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 20px; border-radius: 50%; background: var(--teal);
  display: grid; place-items: center; color: #fff;
}


.fteeth-divider-badge svg { width: 10px; height: 10px; }


.fteeth-legend {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px;
  background: var(--surface); border: 1px solid var(--line-soft); border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: 6px 8px;
}


.fteeth-leg { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; flex-shrink: 0; }


.fteeth-leg svg { width: 10px; height: 10px; flex-shrink: 0; }


.fteeth-leg.leg-treat svg { color: var(--teal); }


.fteeth-leg.leg-car svg { color: #eab308; }


.fteeth-leg.leg-imp svg { color: var(--purple); }


.fteeth-leg.leg-fill svg { color: var(--blue); }



/* Умный календарь */
.fcal { width: 100%; font-family: 'Manrope', sans-serif; }


.fcal-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }


.fcal-today { font-size: 13.5px; font-weight: 700; color: var(--ink); }


.fcal-nav { display: inline-flex; gap: 4px; }


.fcal-nav button {
  width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--muted); font-size: 13px; cursor: default;
}


.fcal-seg { display: inline-flex; gap: 2px; margin-left: auto; background: var(--bg-2); padding: 2px; border-radius: 8px; }


.fcal-seg b { font-weight: 600; font-size: 11.5px; color: var(--muted); padding: 4px 9px; border-radius: 6px; }


.fcal-seg b.on { background: var(--teal); color: #fff; }


.fcal-body { position: relative; display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 8px; }


.fcal-times { display: flex; flex-direction: column; justify-content: space-between; padding: 26px 0 4px; font-size: 10px; color: var(--muted-2); flex-shrink: 0; }


.fcal-cols { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; position: relative; }


.fcal-col { position: relative; border-left: 1px solid var(--line-soft); padding-left: 6px; min-height: 148px; }


.fcal-doc { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; color: var(--text-2); }


.fcal-av { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-2); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; }


.fcal-av svg { width: 10px; height: 10px; }


.fcal-appt {
  position: absolute; left: 6px; right: 4px; border-radius: 8px;
  border-left: 3px solid; padding: 5px 7px; font-size: 10px; line-height: 1.35;
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
}


.fcal-appt b { font-size: 10px; font-weight: 700; }


.fcal-appt span { font-weight: 700; color: var(--ink); }


.fcal-appt i { font-style: normal; color: var(--muted); }


.fcal-appt.ap-green { background: var(--teal-f); border-color: var(--teal); }


.fcal-appt.ap-blue { background: rgba(14,165,233,.12); border-color: var(--blue); }


.fcal-appt.ap-purple { background: var(--purple-f); border-color: var(--purple); }


.fcal-appt.ap-orange { background: rgba(245,158,11,.14); border-color: #f59e0b; }



/* AI-помощник */
.fai { width: 100%; font-family: 'Manrope', sans-serif; }


.fai-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }


.fai-top-ic { width: 20px; height: 20px; color: var(--purple); flex-shrink: 0; }


.fai-top b { font-size: 14px; color: var(--ink); }


.fai-listening { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); }


.fai-listening i { font-style: normal; font-size: 11.5px; }


.fai-listening svg { width: 16px; height: 16px; color: var(--purple); }


.fai-msg {
  display: flex; align-items: center; gap: 8px;
  background: var(--teal-f); color: var(--teal-d);
  border-radius: var(--r-sm); padding: 8px 11px; font-size: 12px; font-weight: 600;
  margin-bottom: 10px;
}


.fai-msg svg { width: 14px; height: 14px; flex-shrink: 0; }


.fai-card-wrap { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 24px; }


.fai-spark { width: 16px; height: 16px; color: var(--purple); flex-shrink: 0; margin-top: 4px; }


.fai-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; box-shadow: var(--sh); flex: 1; min-width: 0;
}


.fai-card b { display: block; font-size: 12px; color: var(--ink); margin-bottom: 6px; }


.fai-card ul { display: flex; flex-direction: column; gap: 5px; }


.fai-card li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }


.fai-card li svg { width: 12px; height: 12px; color: var(--teal); flex-shrink: 0; }


.fai-mic {
  position: absolute; left: 16px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--blue), var(--purple));
  box-shadow: 0 0 0 4px rgba(139,92,246,.15);
}


.fai-mic svg { width: 15px; height: 15px; }


.feat-big-visual:has(.fai) { position: relative; }



.feat-dots { display: none; }


.feat-compact-wrap { text-align: center; }


.feat-more-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 20px; cursor: pointer; box-shadow: var(--sh-sm);
  font: inherit; transition: border-color .2s, box-shadow .2s;
}


.feat-more-toggle:hover { border-color: var(--teal-l); box-shadow: var(--sh); }


.feat-more-toggle-txt { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--ink); }


.feat-more-plus { width: 15px; height: 15px; color: var(--teal); transition: transform .25s; }


.feat-more-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .25s; }


.feat-more-toggle[aria-expanded="true"] .feat-more-plus { transform: rotate(45deg); }


.feat-more-toggle[aria-expanded="true"] .feat-more-chev { transform: rotate(180deg); }



.feat-more-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  text-align: left;
  border: 1.5px dashed transparent; border-radius: var(--r-lg);
  margin-top: 0;
  transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, margin-top .45s cubic-bezier(.22,1,.36,1), border-color .45s ease;
}


.feat-more-panel > .feat-more-inner { min-height: 0; overflow: hidden; padding: 0 32px; }


.feat-more-panel.open {
  grid-template-rows: 1fr; opacity: 1; margin-top: 20px; border-color: var(--line);
}


.feat-more-panel.open > .feat-more-inner { padding: 32px; }


.feat-compact-title {
  font-size: 18px; font-weight: 800; color: var(--ink);
  margin-bottom: 22px; text-align: center; letter-spacing: -0.01em;
}


.feat-compact {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 28px;
  text-align: left;
}


.feat-comp-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}


.feat-comp-item:nth-last-child(-n+4) { border-bottom: none; }


.feat-comp-icon {
  width: 34px; height: 34px; border-radius: 10px;
  flex-shrink: 0;
  background: var(--teal-f);
  color: var(--teal-d);
  display: flex; align-items: center; justify-content: center;
}


.feat-comp-icon svg { width: 17px; height: 17px; }


.feat-comp-text h4 { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; letter-spacing: -0.01em; }


.feat-comp-text p { font-size: 12px; color: var(--muted); line-height: 1.5; }


.feat-more-collapse {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 24px auto 0; padding: 11px 22px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}


.feat-more-collapse svg { width: 15px; height: 15px; }


.feat-more-collapse:hover { background: var(--bg-3); }

#saas {
  --s-card: #ffffff;
  --s-card-br: rgba(15,23,42,.07);
  --s-card-sh: 0 8px 24px -16px rgba(15,23,42,.28);
  --s-title: #0f172a;
  --s-muted: #64748b;
  --s-panel: #f8fafc;
  --s-panel-br: #eef2f7;
  --s-line: #eef2f7;
  --s-wire: #7dd3fc;
  --s-wire-glow: rgba(56,189,248,.5);
  --s-cloud-stroke: #a9dcf5;
  --s-cloud-fill: #fbfdff;
  --s-cloud-halo: rgba(56,189,248,.16);
  --s-dots: rgba(15,23,42,.08);
  --s-accent: #06b6d4;
  background:
    linear-gradient(180deg, #ffffff 0, rgba(255,255,255,.5) 30px, transparent 92px),
    linear-gradient(0deg, #ffffff 0, rgba(255,255,255,.5) 30px, transparent 92px),
    radial-gradient(ellipse 70% 50% at 78% 16%, rgba(56,189,248,.10), transparent 70%),
    radial-gradient(ellipse 70% 50% at 22% 84%, rgba(16,185,129,.09), transparent 70%),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f9 100%);
  background-origin: border-box;
  color: var(--s-title);
}


:root[data-theme="dark"] #saas {
  --s-card: rgba(20,28,42,.62);
  --s-card-br: rgba(255,255,255,.09);
  --s-card-sh: none;
  --s-title: #ffffff;
  --s-muted: rgba(255,255,255,.6);
  --s-panel: rgba(255,255,255,.05);
  --s-panel-br: rgba(255,255,255,.08);
  --s-line: rgba(255,255,255,.07);
  --s-wire: #22d3ee;
  --s-wire-glow: rgba(34,211,238,.85);
  --s-cloud-stroke: #22d3ee;
  --s-cloud-fill: transparent;
  --s-cloud-halo: rgba(34,211,238,.17);
  --s-dots: rgba(94,234,212,.3);
  --s-accent: #0cebc8;
  background:
    radial-gradient(ellipse 60% 40% at 80% 22%, rgba(56,189,248,.07), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 78%, rgba(13,148,136,.07), transparent 70%),
    linear-gradient(180deg, #07111a 0%, #0b1724 50%, #07111a 100%);
}


#saas::before {
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
}


:root[data-theme="dark"] #saas::before {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
}


.saas-label {
  background: #ffffff;
  color: #0d9488;
  border-color: rgba(13,148,136,.2);
  box-shadow: 0 4px 14px -10px rgba(15,23,42,.35);
}


.saas-label::before { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }


:root[data-theme="dark"] .saas-label {
  background: rgba(255,255,255,.08); color: #5eead4;
  border-color: rgba(94,234,212,.22); box-shadow: none;
  backdrop-filter: blur(8px);
}


:root[data-theme="dark"] .saas-label::before { background: #5eead4; box-shadow: 0 0 0 3px rgba(94,234,212,.2); }


#saas .sec-title { color: var(--s-title); }


.saas-hl {
  background: linear-gradient(95deg, #06b6d4, #0ea5e9 60%, #6366f1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


:root[data-theme="dark"] .saas-hl { background: linear-gradient(95deg, #5eead4, #25b7ff 60%, #8b5cf6); -webkit-background-clip: text; background-clip: text; }


.saas-sub { color: var(--s-muted); max-width: 600px; margin: 0 auto 22px; }



.saas-hub {
  position: relative; display: grid; grid-template-columns: 1fr minmax(240px, 266px) 1fr;
  gap: clamp(46px, 6vw, 78px); align-items: center; text-align: left;
}


.saas-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }


.saas-side-r { order: 3; }


.saas-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; order: 2; padding: 6px 0; }


.saas-dots {
  position: absolute; inset: -20px -60px; z-index: -2; border-radius: 28px;
  background-image: radial-gradient(circle, var(--s-dots) 1px, transparent 1px);
  background-size: 17px 17px;
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 45%, #000 55%, transparent 92%);
  mask-image: radial-gradient(ellipse 100% 90% at 50% 45%, #000 55%, transparent 92%);
}



.saas-card {
  position: relative; padding: 11px 13px 12px;
  display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-content: start;
  background: var(--s-card);
  border: 1px solid var(--s-card-br);
  border-radius: 14px; box-shadow: var(--s-card-sh);
  transition: transform .3s, border-color .25s;
}


.saas-card:hover { transform: translateY(-2px); border-color: rgba(56,189,248,.45); }


.saas-card > *:not(.saas-ic):not(h3):not(p) { grid-column: 1 / -1; }


.saas-card h3, .saas-card p { grid-column: 2; }


.saas-ic {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -8px rgba(15,23,42,.55);
}


.saas-ic svg { width: 28px; height: 28px; color: #fff; }


.saas-card[data-c="1"] .saas-ic, .saas-card[data-c="5"] .saas-ic, .saas-card[data-c="6"] .saas-ic { background: #2f86f6; }


.saas-card[data-c="2"] .saas-ic, .saas-card[data-c="4"] .saas-ic { background: #14b8a6; }


.saas-card[data-c="3"] .saas-ic { background: #7c6df2; }


:root[data-theme="dark"] .saas-card[data-c="1"] .saas-ic,
:root[data-theme="dark"] .saas-card[data-c="5"] .saas-ic,
:root[data-theme="dark"] .saas-card[data-c="6"] .saas-ic { background: #38bdf8; }


:root[data-theme="dark"] .saas-card[data-c="2"] .saas-ic,
:root[data-theme="dark"] .saas-card[data-c="4"] .saas-ic { background: #34d399; }


:root[data-theme="dark"] .saas-card[data-c="3"] .saas-ic { background: #a78bfa; }


.saas-card h3 { color: var(--s-title); font-size: 14px; font-weight: 700; margin: 0 0 3px; letter-spacing: -.01em; }


.saas-card p { color: var(--s-muted); font-size: 11.5px; line-height: 1.4; margin: 0 0 9px; }



.saas-wire {
  position: absolute; width: 78px; color: var(--s-wire); pointer-events: none; z-index: 0;
  border-color: currentColor; border-style: solid; border-width: 0;
  filter: drop-shadow(0 0 4px var(--s-wire-glow));
}


.saas-wire::before {
  content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px var(--s-wire-glow);
}


.saas-wire::after {
  content: ''; position: absolute; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 9px var(--s-wire-glow);
  offset-distance: 0%; opacity: 0;
  animation: saasFlow 2.6s linear infinite;
}


.w-tl, .w-ml, .w-bl { right: 97.9%; }


.w-tr, .w-mr, .w-br { left: 97.9%; }


.w-tl, .w-tr { top: calc(62% - 92px); height: 92px; }


.w-bl, .w-br { top: 62%; height: 92px; }


.w-ml, .w-mr { top: 62%; height: 0; border-top-width: 2px; }


.w-tl { border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 22px; }


.w-bl { border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 22px; }


.w-tr { border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 22px; }


.w-br { border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 22px; }


.w-tl::before, .w-bl::before, .w-ml::before { left: -5px; }


.w-tr::before, .w-br::before, .w-mr::before { right: -5px; }


.w-tl::before, .w-tr::before { top: -4px; }


.w-bl::before, .w-br::before { bottom: -4px; }


.w-ml::before, .w-mr::before { top: -5px; }


.w-tl::after { offset-path: path('M1,1 H55 Q77,1 77,23 L77,92'); }


.w-bl::after { offset-path: path('M1,91 H55 Q77,91 77,69 L77,0'); animation-delay: .85s; }


.w-tr::after { offset-path: path('M77,1 H23 Q1,1 1,23 L1,92'); }


.w-br::after { offset-path: path('M77,91 H23 Q1,91 1,69 L1,0'); animation-delay: .85s; }


.w-ml::after { offset-path: path('M1,0 H78'); animation-delay: 1.7s; }


.w-mr::after { offset-path: path('M77,0 H0'); animation-delay: 1.7s; }


@keyframes saasFlow {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 1; }
  86% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}



.saas-os { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 6px; }


.saas-os span {
  display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 9px;
  background: var(--s-panel); border: 1px solid var(--s-panel-br);
  font-size: 11px; color: var(--s-title); font-weight: 600;
}


.saas-os svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--s-title); }



.saas-backup {
  display: flex; flex-direction: column; padding: 2px 8px; border-radius: 10px;
  background: var(--s-panel); border: 1px solid var(--s-panel-br);
}


.saas-backup-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 11px;
  border-top: 1px solid var(--s-line);
}


.saas-backup-row:first-child { border-top: none; }


.saas-backup-row span { color: var(--s-muted); flex-shrink: 0; white-space: nowrap; }


.saas-backup-row b { flex: 1; color: var(--s-title); font-weight: 400; }


.saas-backup-row svg {
  width: 14px; height: 14px; padding: 3px; box-sizing: border-box; border-radius: 50%;
  color: #fff; background: #10b981; flex-shrink: 0;
}


.saas-backup-tag {
  align-self: flex-start; margin-top: 6px; padding: 4px 10px; border-radius: 8px;
  background: rgba(16,185,129,.12); color: #0d9488; font-size: 10.5px; font-weight: 700;
}


:root[data-theme="dark"] .saas-backup-tag { background: rgba(52,211,153,.14); color: #34d399; }



.saas-passkey { display: flex; align-items: center; gap: 8px; }


.saas-pk-ic {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--s-panel); border: 1px solid var(--s-panel-br); color: #7c6df2;
}


:root[data-theme="dark"] .saas-pk-ic { background: #a78bfa; border-color: transparent; color: #fff; }


.saas-pk-ic svg { width: 17px; height: 17px; }


.saas-pk-dots {
  display: flex; align-items: center; gap: 5px; margin-left: 2px; padding: 6px 10px;
  border-radius: 999px; background: var(--s-panel); border: 1px solid var(--s-panel-br);
}


.saas-pk-dots i { width: 5px; height: 5px; border-radius: 50%; background: #7c6df2; }


.saas-pk-dots i.ok { width: 15px; height: 15px; border-radius: 50%; background: #7c6df2; display: flex; align-items: center; justify-content: center; }


.saas-pk-dots i.ok svg { width: 9px; height: 9px; color: #fff; }



.saas-ver { display: flex; align-items: center; gap: 8px; }


.saas-ver-cur, .saas-ver-new {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 11px; font-size: 10.5px;
  border: 1px solid var(--s-panel-br);
}


.saas-ver-cur { background: var(--s-panel); color: var(--s-muted); }


.saas-ver-cur b { display: block; margin-top: 3px; color: var(--s-title); font-size: 13px; font-weight: 700; }


.saas-ver-new { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.22); color: #0d9488; }


:root[data-theme="dark"] .saas-ver-new { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.24); color: #34d399; }


.saas-ver-new b { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: inherit; font-size: 13px; font-weight: 700; }


.saas-ver-new b svg { width: 12px; height: 12px; }


.saas-ver-new i { display: block; margin-top: 2px; font-style: normal; font-size: 9.5px; opacity: .8; }


.saas-ver-arr { width: 15px; height: 15px; color: var(--s-muted); flex-shrink: 0; }



.saas-devices { display: flex; gap: 8px; margin-bottom: 8px; }


.saas-devices span {
  position: relative; width: 38px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--s-panel); border: 1px solid var(--s-panel-br); color: #2f86f6;
}


:root[data-theme="dark"] .saas-devices span { background: #38bdf8; border-color: transparent; color: #fff; }


.saas-devices svg { width: 18px; height: 18px; }


.saas-devices i.ok {
  position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: #10b981; display: flex; align-items: center; justify-content: center;
}


.saas-devices i.ok svg { width: 7px; height: 7px; color: #fff; }


.saas-sync { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #0d9488; }


:root[data-theme="dark"] .saas-sync { color: #34d399; }


.saas-sync svg { width: 12px; height: 12px; flex-shrink: 0; }



.saas-map {
  position: relative; height: 58px; margin-top: 2px; border-radius: 10px; overflow: hidden;
  background-image: radial-gradient(circle, var(--s-dots) 1px, transparent 1px);
  background-size: 9px 9px;
}


.saas-map i {
  position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; margin: -2.5px;
  border-radius: 50%; background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.6);
}



.saas-core .saas-cloud { position: relative; display: flex; flex-direction: column; align-items: center; }


.saas-cloud-ring {
  position: relative; width: clamp(216px, 19.5vw, 268px); aspect-ratio: 93 / 69;
}


.saas-cloud-ring::before {
  content: ''; position: absolute; inset: 8% 4% 3%; z-index: 0; border-radius: 46% 46% 50% 50%;
  background: radial-gradient(closest-side, var(--s-cloud-halo), transparent 78%);
  filter: blur(10px);
}


.saas-cloud-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  fill: var(--s-cloud-fill); stroke: var(--s-cloud-stroke);
  stroke-width: 1.7; vector-effect: non-scaling-stroke;
}


:root[data-theme="dark"] .saas-cloud-bg {
  filter: drop-shadow(0 0 5px rgba(34,211,238,.8)) drop-shadow(0 0 16px rgba(34,211,238,.45));
}


.saas-cloud-in {
  position: absolute; z-index: 2; left: 0; right: 0; top: 26%;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}


.saas-cloud-icon {
  width: 34%; aspect-ratio: 560 / 397; overflow: hidden;
}


.saas-cloud-icon img { width: 100%; height: auto; display: block; }


.saas-cloud-name { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; color: var(--s-title); }


.saas-cloud-name b { color: var(--s-accent); font-weight: 800; }


.saas-status {
  display: flex; align-items: flex-start; gap: 7px; padding: 9px 18px; border-radius: 14px;
  background: var(--s-card); border: 1px solid var(--s-card-br); box-shadow: var(--s-card-sh);
  font-size: 11.5px; line-height: 1.45; color: var(--s-title);
}


.saas-status-dot {
  width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; flex-shrink: 0;
  background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.7);
  animation: saasPulse 2s ease infinite;
}


@keyframes saasPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }


.saas-guard {
  width: calc(100% + 44px); margin: 8px -22px 0; padding: 13px 14px; border-radius: 16px;
  background: var(--s-card); border: 1px solid var(--s-card-br); box-shadow: var(--s-card-sh);
}


.saas-guard-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }


.saas-guard-h svg {
  width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 8px;
  color: #fff; background: #2f86f6; flex-shrink: 0;
}


.saas-guard-h b { font-size: 12.5px; font-weight: 700; color: var(--s-title); }


.saas-guard-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }


.saas-guard-list > div {
  display: flex; align-items: center; gap: 5px; padding: 6px 7px; border-radius: 9px;
  background: var(--s-panel); border: 1px solid var(--s-panel-br);
}


.saas-guard-list svg { width: 14px; height: 14px; color: #2f86f6; flex-shrink: 0; }


.saas-guard-list > div:nth-child(2) svg { color: #14b8a6; }


.saas-guard-list > div:nth-child(3) svg { color: #7c6df2; }


.saas-guard-list span { font-size: 9px; line-height: 1.3; color: var(--s-muted); white-space: nowrap; }



.saas-strip {
  display: flex; align-items: center; gap: 2px; margin-top: 11px; padding: 1px 10px 5px 15px;
  background: var(--s-card); border: 1px solid var(--s-card-br); box-shadow: var(--s-card-sh);
  border-radius: 14px; text-align: left;
}


.saas-strip-fx {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  padding: 10px 16px; border-left: 1px solid var(--s-line);
}


.saas-strip-fx:first-child { border-left: none; }


.saas-strip-ic { width: 24px; height: 24px; margin-bottom: 2px; }


.saas-strip-ic svg { width: 100%; height: 100%; }


.saas-strip-fx[data-c="1"] .saas-strip-ic { color: #2f86f6; }


.saas-strip-fx[data-c="2"] .saas-strip-ic { color: #14b8a6; }


.saas-strip-fx[data-c="3"] .saas-strip-ic { color: #7c6df2; }


.saas-strip-fx[data-c="4"] .saas-strip-ic { color: #0d9488; }


:root[data-theme="dark"] .saas-strip-fx[data-c="1"] .saas-strip-ic { color: #38bdf8; }


:root[data-theme="dark"] .saas-strip-fx[data-c="2"] .saas-strip-ic { color: #34d399; }


:root[data-theme="dark"] .saas-strip-fx[data-c="3"] .saas-strip-ic { color: #a78bfa; }


:root[data-theme="dark"] .saas-strip-fx[data-c="4"] .saas-strip-ic { color: #5eead4; }


.saas-strip-fx b { font-size: 13px; font-weight: 700; color: var(--s-title); letter-spacing: -.01em; }


.saas-strip-fx span { font-size: 11px; line-height: 1.4; color: var(--s-muted); }


.saas-strip-cta {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 10px 0 20px; border-left: 1px solid var(--s-line);
}


.saas-strip-cta .btn { white-space: nowrap; }


.saas-strip-cta > span { font-size: 10.5px; color: var(--s-muted); }


@media (prefers-reduced-motion: reduce) {
  .saas-wire::after { display: none; }
  .saas-status-dot { animation: none; }
}


.pri-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  align-items: stretch;
  text-align: left;
}


.pri-card {
  position: relative; background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px 24px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column;
}


.pri-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--teal-l);
}


.pri-popular {
  border-color: var(--teal); border-width: 2px;
  transform: scale(1.04);
  background: linear-gradient(180deg, #fff 0%, var(--teal-f) 100%);
  box-shadow: 0 12px 32px -8px rgba(13,148,136,.24);
  z-index: 1;
}


.pri-popular:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 20px 48px -10px rgba(13,148,136,.32);
}


.pri-pop-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: 6px 18px; border-radius: 100px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; box-shadow: var(--sh-sm);
  white-space: nowrap;
}


.pri-name {
  font-family: 'Manrope', sans-serif;
  font-size: 24px; font-weight: 800;
  color: var(--ink); letter-spacing: -0.025em;
  margin-bottom: 4px;
}


.pri-popular .pri-name { color: var(--teal-d); }


.pri-limit {
  font-size: 13px; color: var(--muted);
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}


.pri-list {
  list-style: none; padding: 0; margin: 0 0 18px;
}


.pri-list li {
  font-size: 13.5px; color: var(--text);
  padding: 6px 0 6px 25px; position: relative;
  line-height: 1.45;
}


.pri-list li::before {
  content: ''; position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal-f) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}


.pri-popular .pri-list li::before { background-color: #fff; }


.pri-btn {
  width: 100%; justify-content: center; padding: 13px 22px;
  margin-top: auto;
}



.pri-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1020px; margin: 0 auto;
  align-items: start;
}


.pri-price {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}


.pri-cur {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--blue), var(--teal));
  box-shadow: 0 6px 16px -4px rgba(13,148,136,.45);
}


.pri-cur svg { width: 20px; height: 20px; }


.pri-cur-max { background: linear-gradient(135deg, var(--purple), var(--pink)); box-shadow: 0 6px 16px -4px rgba(139,92,246,.5); }


.pri-amt {
  font-family: 'Manrope', sans-serif;
  font-size: 40px; font-weight: 800; line-height: 1;
  color: var(--ink); letter-spacing: -0.03em;
}


.pri-popular .pri-amt { color: var(--teal-d); }


.pri-per { font-size: 14px; color: var(--muted); font-weight: 600; align-self: flex-end; margin-bottom: 4px; }


.pri-max { border-color: var(--purple); background: linear-gradient(180deg, #fff 0%, var(--purple-f) 100%); box-shadow: 0 12px 32px -8px rgba(139,92,246,.22); }


.pri-max .pri-pop-tag { background: linear-gradient(135deg, var(--purple), var(--pink)); }


.pri-max .pri-name { color: var(--purple-d); }


.pri-max .pri-list li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }


.pri-inc {
  font-size: 13px; font-weight: 700; color: var(--purple-d);
  margin-bottom: 12px; letter-spacing: -0.01em;
}


.pri-list-2col { columns: 2; column-gap: 26px; }


.pri-list-2col li { break-inside: avoid; padding-top: 5px; padding-bottom: 5px; font-size: 13px; }


.pri-max .pri-btn { background: linear-gradient(135deg, var(--purple), var(--purple-d)); border-color: transparent; }



.pri-geo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 0 0 22px; }


.pri-geo-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }


.pri-geo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }


.pri-skel {
  display: inline-block; width: 92px; height: 40px; border-radius: 8px;
  background: linear-gradient(90deg, var(--line-soft) 25%, #fff 50%, var(--line-soft) 75%);
  background-size: 200% 100%; animation: priSkel 1.2s linear infinite;
}


@keyframes priSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } }


.pri-more { margin: 0; }


.pri-more[hidden] { display: none; }


.pri-more .pri-list-2col { margin: 0 0 14px; }


.pri-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 44px; margin: 0 0 14px; padding: 10px 12px;
  background: none; border: none; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--purple-d);
  cursor: pointer; transition: background .2s;
}


.pri-toggle:hover { background: var(--purple-f); }


.pri-toggle svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .25s; }


.pri-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }


.pri-note { margin: 22px 0 0; font-size: 13px; color: var(--muted); }


.pri-seats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }


.pri-seat {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px; border-radius: 14px;
  background: var(--surface); border: 1.5px solid var(--line);
}


.pri-seat-ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-f); color: var(--teal-d);
}


.pri-seat-ic svg { width: 16px; height: 16px; }


.pri-seat-txt { display: flex; flex-direction: column; line-height: 1; }


.pri-seat-txt b {
  font-family: 'Manrope', sans-serif;
  font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
}


.pri-seat-txt small {
  margin-top: 3px; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}


.pri-max .pri-seat-ic { background: var(--purple-f); color: var(--purple-d); }


.pri-seat-bonus {
  position: relative; overflow: hidden;
  border-color: transparent;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: 0 6px 16px -6px rgba(139,92,246,.55);
  animation: seatGlow 3s ease-in-out infinite;
}


.pri-seat-bonus > * { position: relative; z-index: 1; }


.pri-seat-bonus::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.5) 50%, transparent 64%);
  transform: translateX(-130%);
  animation: seatShine 3s ease-in-out infinite;
}


@keyframes seatGlow {
  0%, 100% { box-shadow: 0 6px 16px -6px rgba(139,92,246,.55); }
  50% { box-shadow: 0 10px 26px -6px rgba(236,72,153,.8); }
}


@keyframes seatShine {
  0% { transform: translateX(-130%); }
  55%, 100% { transform: translateX(130%); }
}


.pri-seat-bonus .pri-seat-ic svg { animation: seatGift 3s ease-in-out infinite; transform-origin: 50% 62%; }


@keyframes seatGift {
  0%, 78%, 100% { transform: rotate(0deg) scale(1); }
  83% { transform: rotate(-10deg) scale(1.1); }
  88% { transform: rotate(9deg) scale(1.1); }
  93% { transform: rotate(-4deg) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {

  .pri-seat-bonus, .pri-seat-bonus .pri-seat-ic svg { animation: none; }

  .pri-seat-bonus::after { display: none; }
}


.pri-max .pri-seat-bonus .pri-seat-ic, .pri-seat-bonus .pri-seat-ic { background: rgba(255,255,255,.24); color: #fff; }


.pri-seat-bonus .pri-seat-txt b { color: #fff; }


.pri-seat-bonus .pri-seat-txt small { color: rgba(255,255,255,.88); }


.comp-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border: 1px solid var(--line);
  border-bottom: none;
  background: var(--surface);
  box-shadow: var(--sh-sm);
}


.comp-more {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 22px; text-align: left;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: linear-gradient(120deg, var(--teal-f) 0%, var(--purple-f) 100%);
  box-shadow: var(--sh-sm);
}


.comp-more-txt { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.5; }


.comp-more-link {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 10px 16px; border-radius: 100px;
  background: var(--surface); border: 1.5px solid var(--teal);
  font-size: 13px; font-weight: 800; color: var(--teal-d);
  text-decoration: none; white-space: nowrap;
  transition: transform .2s, box-shadow .2s;
}


.comp-more-link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(13,148,136,.45); }


.comp-more-link svg { width: 15px; height: 15px; }


.comp-table { width: 100%; min-width: 640px; border-collapse: collapse; }


.comp-vs { display: none; }


.comp-vs-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }


.comp-vs-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }


.comp-vs-chip {
  min-height: 44px; padding: 8px 15px; border-radius: 100px;
  background: var(--surface); border: 1.5px solid var(--line);
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}


.comp-vs-chip[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-f); color: var(--teal-d); }


.comp-table thead tr { background: var(--surface-2); }


.comp-table th {
  padding: 18px 20px; font-size: 13px; font-weight: 700;
  color: var(--muted); text-align: left;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}


.comp-table th.hl {
  background: var(--ink); color: #fff;
  text-transform: none; letter-spacing: 0;
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700;
  position: relative;
}


.comp-table th.hl::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}


.comp-table tbody tr { border-top: 1px solid var(--line-soft); transition: background .15s; }


.comp-table tbody tr:hover { background: var(--surface-2); }


.comp-table td {
  padding: 16px 20px; font-size: 14.5px;
  vertical-align: middle;
}


.comp-table td:first-child {
  font-weight: 500; color: var(--text);
}


.comp-table td.hl {
  background: linear-gradient(180deg, rgba(13,148,136,.04), rgba(13,148,136,.02));
  font-weight: 600; color: var(--teal-d);
  border-left: 2px solid var(--teal);
}


.comp-yes, .comp-no, .comp-par {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
}


.comp-yes { color: #047857; }


.comp-yes::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  background: #d1fae5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
  flex-shrink: 0;
}


.comp-no { color: var(--muted-2); }


.comp-no::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  background: #f1f5f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/10px no-repeat;
  flex-shrink: 0;
}


.comp-par { color: #a16207; font-size: 12.5px; }


.comp-par::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  background: #fef3c7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a16207'%3E%3Ccircle cx='6' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='18' cy='12' r='2'/%3E%3C/svg%3E") center/10px no-repeat;
  flex-shrink: 0;
}


.a-time.is-teal, .comp-no { color: #64748b; }


.comp-yes { color: #0f766e; }


.mig-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-bottom: 48px;
}


.mig-step {
  text-align: left; padding: 28px 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}


.mig-step:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--teal-l); }


.mig-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-family: 'Manrope', sans-serif;
  font-size: 15px; font-weight: 700;
  margin-bottom: 18px; box-shadow: var(--sh-xs);
}


.mig-step h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--ink); letter-spacing: -0.01em; }


.mig-step p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }


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


.faq-list { max-width: 780px; margin: 0 auto; }


.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 10px;
  overflow: hidden; transition: border-color .2s, box-shadow .2s;
}


.faq-item:hover { border-color: #cbd5e1; }


.faq-item.open { border-color: var(--teal-l); box-shadow: var(--sh-sm); }


.faq-q {
  padding: 18px 22px; font-size: 15px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; color: var(--ink); user-select: none;
  font-family: 'Manrope', sans-serif; letter-spacing: -0.01em;
}


.faq-ico {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: var(--surface-2); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}


.faq-item.open .faq-ico { background: var(--teal); color: #fff; }


.faq-ico svg { width: 12px; height: 12px; transition: transform .3s; }


.faq-item.open .faq-ico svg { transform: rotate(45deg); }


.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .3s ease;
  font-size: 14.5px; color: var(--text-2); line-height: 1.7;
  padding: 0 22px;
}


.faq-item.open .faq-a { max-height: 320px; padding: 0 22px 20px; }


.hub-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px; text-align: left; align-items: start;
}


.hub-col {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 16px;
}


.hub-h {
  font-family: 'Manrope', sans-serif;
  font-size: 13px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.01em; margin: 0 0 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}


.hub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }


.hub-list a {
  display: block; padding: 6px 0;
  font-size: 13.5px; line-height: 1.4; color: var(--muted);
  text-decoration: none; transition: color .15s, transform .15s;
}


.hub-list a:hover { color: var(--teal-d); transform: translateX(3px); }


.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 56px; }


.foot-info { font-size: 13px; color: rgba(255,255,255,.45); display: block; padding: 4px 0; }


.foot-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 18px; color: #fff; letter-spacing: -0.02em; }


.foot-logo img { height: 32px; width: auto; }


.foot-desc { font-size: 14px; line-height: 1.7; max-width: 340px; }


.foot-col-title { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; }


.foot-links { display: flex; flex-direction: column; gap: 10px; }


.foot-links a { font-size: 14px; color: rgba(255,255,255,.55); transition: color .15s; }


.foot-links a:hover { color: #5eead4; }


.foot-bottom { border-top: 1px solid rgba(16,185,129,.22); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }


.foot-bottom p { font-size: 13px; }


.foot-legal { display: flex; gap: 20px; }


.foot-legal a { font-size: 13px; color: rgba(255,255,255,.4); transition: color .15s; }


.foot-legal a:hover { color: rgba(255,255,255,.8); }



.foot-soc { display: inline-flex; align-items: center; gap: 7px; }


.foot-soc svg { width: 15px; height: 15px; flex-shrink: 0; }


.modal-legal a, .foot-legal a { color: #0f766e; }