/* VKarmani Landing — Dark, smooth, bilingual-ready */

:root{
  color-scheme: dark;
  --bg0:#070a12;
  --bg1:#0b0f19;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.14);
  --text:#e9eefc;
  --muted: rgba(233,238,252,.72);
  --muted2: rgba(233,238,252,.56);
  --accent:#7c5cff;
  --accent2:#20c9ff;
  --shadow: 0 18px 80px rgba(0,0,0,.55);
  --radius: 20px;
  --radius2: 28px;
  /* A bit wider so the top navigation never gets clipped on common screens */
  --container: 1240px;
  --topbar-h: 72px;
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.2,1.1,.2,1);
  --ease-inout: cubic-bezier(.4,0,.2,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  color: var(--text);

  /* Base background. The glow layer is moved into a fixed pseudo-element below
     to avoid visible bands on long pages. */
  background: var(--bg1);
  position: relative;

  overflow-x:hidden;
}

/* FIX: Seam-free, band-free background (fixed to viewport) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(900px 900px at 15% 20%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(800px 800px at 85% 10%, rgba(32,201,255,.12), transparent 55%),
    radial-gradient(1000px 1000px at 50% 100%, rgba(124,92,255,.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 30%, #080b14 100%);

  transform: translateZ(0);
  will-change: transform;
  animation: bgFloat 18s ease-in-out infinite alternate;
}
@keyframes bgFloat{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(0,-14px,0) scale(1.02); }
}


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

/* Focus ring */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid rgba(32,201,255,.55);
  outline-offset: 3px;
}
img{ display:block; max-width:100%; height:auto; }
button, input, textarea{ font: inherit; color: inherit; }
::selection{ background: rgba(124,92,255,.35); }

.container{
  width: min(var(--container), calc(100% - clamp(28px, 6vw, 48px)));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  padding:10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border:1px solid var(--border);
  color: var(--text);
  z-index: 1000;
}
.skip-link:focus{ left: 16px; }

.topbar{
  /*
    Always-on navigation.
    We use !important here intentionally to protect the header from any accidental overrides
    (e.g., hosting panels injecting extra CSS, old cached styles, etc.).
  */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  /* Keep it above any section backgrounds */
  z-index: 99999 !important;

  background: rgba(10, 13, 24, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* Safari/Chrome paint stability on scroll */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;

  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.topbar.is-scrolled{
  box-shadow: 0 10px 50px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.10);
  background: rgba(10, 13, 24, .86);
}

.scrollbar{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 2px;
  background: rgba(255,255,255,.04);
}
.scrollbar__bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(124,92,255,.95), rgba(32,201,255,.95));
  border-radius: 0 999px 999px 0;
  box-shadow: 0 0 18px rgba(124,92,255,.35);
  transform-origin: left;
  transition: width var(--dur-1) var(--ease-out);
}

#main{ padding-top: var(--topbar-h); }

section[id]{ scroll-margin-top: calc(var(--topbar-h) + 16px); }

.nav{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 18px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 180px;
}
.brand__logo,
.footer__logo-badge{
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: #0e0f20;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transform: translateZ(0);
}
.brand__logo{
  width: 42px;
  height: 42px;
  border-radius: 14px;
}
.footer__logo-badge{
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.brand__logo::after,
.footer__logo-badge::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 2;
}
.brand__logo img,
.footer__logo-badge img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.brand__name{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 16px;
  line-height: 1;
}
.brand__tag{
  margin-left: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
}

.nav__toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  cursor:pointer;
}
.nav__toggle-bars{
  display:block;
  width: 18px;
  height: 2px;
  margin-inline:auto;
  background: rgba(233,238,252,.86);
  border-radius: 2px;
  position: relative;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(233,238,252,.86);
}
.nav__toggle-bars::before{ top:-6px; }
.nav__toggle-bars::after{ top:6px; }

.nav__toggle-bars{ transition: background var(--dur-2) var(--ease-out); }
.nav__toggle-bars::before,
.nav__toggle-bars::after{
  transition: transform var(--dur-2) var(--ease-spring), top var(--dur-2) var(--ease-spring), opacity var(--dur-2) var(--ease-out);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bars{ background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before{ top:0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after{ top:0; transform: rotate(-45deg); }

.nav__links{
  display:flex;
  align-items:center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 6px;
}
.nav__link{
  position: relative;
  font-size: 13px;
  color: var(--muted);
  padding: 10px 10px;
  border-radius: 12px;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
  white-space: nowrap;
}

.nav__link::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124,92,255,.95), rgba(32,201,255,.95));
  opacity: 0;
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}


/*
  Keep top-menu items from "jumping" when switching languages.
  We reserve a fixed width per item (big enough for RU/EN), and center the label.
*/
@media (min-width: 761px){
  /*
    Desktop/header must stay on a single row.
    (RU labels are longer; wrapping makes the topbar "grow" and looks broken.)
  */
  .nav__links{ flex-wrap: nowrap; row-gap: 0; gap: 12px; }

  .nav__link{
    flex: 0 0 auto;
    text-align: center;
    padding: 10px 8px;
  }
  /* widths are sized to fit BOTH RU and EN, while keeping items aligned */
  .nav__link[data-nav-item="benefits"]{ width: 122px; }
  .nav__link[data-nav-item="pricing"]{ width: 86px; }
  .nav__link[data-nav-item="business"]{ width: 112px; }
  .nav__link[data-nav-item="how"]{ width: 152px; }
  .nav__link[data-nav-item="faq"]{ width: 70px; }
  .nav__link[data-nav-item="contact"]{ width: 96px; }
}
.nav__link:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.nav__link:hover::after{
  opacity: .95;
  transform: scaleX(1);
}

.nav__link[aria-current="page"]{
  color: var(--text);
  background: rgba(124,92,255,.12);
}
.nav__link[aria-current="page"]::after{
  opacity: 1;
  transform: scaleX(1);
}

.nav__actions{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-left: 4px;
  /* keep actions at the far right even when links wrap */
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 1180px){
  .nav{ gap: 14px; }
  .brand{ min-width: 160px; }
  .nav__links{ gap: 10px; }
  .nav__link{ font-size: 12px; padding: 8px 8px; }
  .chip{ padding: 9px 10px; }
  .btn{ padding: 11px 12px; border-radius: 14px; }
}

.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  color: var(--muted);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.chip:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); transform: translateY(-1px); }
.chip--soft{ background: rgba(255,255,255,.04); }
.chip__dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 4px rgba(124,92,255,.12);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  cursor:pointer;
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
}
.btn:active{ transform: translateY(0px); box-shadow: none; }

.btn--primary{
  border-color: rgba(124,92,255,.55);
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(32,201,255,.9));
  box-shadow: 0 18px 55px rgba(124,92,255,.22);
}
.btn--primary:hover{ box-shadow: 0 24px 80px rgba(124,92,255,.28); }

.btn--secondary{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.btn--ghost{
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.12);
  color: var(--muted);
}
.btn--ghost:hover{ color: var(--text); background: rgba(255,255,255,.06); }

.btn--link{
  border: none;
  background: transparent;
  padding: 10px 0;
  color: var(--muted);
  border-radius: 0;
}
.btn--link:hover{ color: var(--text); box-shadow:none; transform:none; }

.hero{
  position: relative;
  padding: 60px 0 40px;
}
.hero__bg{
  position:absolute;
  inset: -140px -20px auto -20px;
  height: 440px;
  background:
    radial-gradient(420px 420px at 18% 40%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(560px 560px at 86% 10%, rgba(32,201,255,.20), transparent 60%),
    radial-gradient(500px 500px at 70% 80%, rgba(124,92,255,.18), transparent 60%);
  filter: blur(12px);
  pointer-events:none;
  opacity: .95;
  transform: translate3d(0,0,0);
  will-change: transform;
  animation: heroFloat 14s ease-in-out infinite alternate;
}
@keyframes heroFloat{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(0,-18px,0) scale(1.03); }
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}

.kicker{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  font-size: 12px;
}

.hero__title{
  margin: 16px 0 10px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.8px;
}
.hero__subtitle{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 56ch;
}

.hero__cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 18px;
}

.hero__meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 6px;
}
.meta{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 12px;
}
.meta__title{
  color: var(--muted2);
  font-size: 12px;
  margin-bottom: 6px;
}
.meta__value{ font-size: 13px; display:flex; gap: 6px; align-items: baseline; flex-wrap:wrap; }
.price{
  font-weight: 700;
  letter-spacing: .2px;
}
.muted{ color: var(--muted); }

.hero__panel .panel{
  position: relative;
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel__glow{
  position:absolute;
  inset:auto -80px -110px -80px;
  height: 240px;
  background: radial-gradient(220px 220px at 30% 40%, rgba(124,92,255,.28), transparent 65%),
              radial-gradient(260px 260px at 70% 60%, rgba(32,201,255,.20), transparent 65%);
  filter: blur(12px);
  opacity: .95;
  pointer-events:none;
}
.panel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.panel__badge{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: 12px;
}
.panel__pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(124,92,255,.28);
  background: rgba(124,92,255,.12);
  color: rgba(233,238,252,.88);
  font-size: 12px;
}
.panel__title{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: -.2px;
}
.panel__cta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  margin-top: 14px;
}

.checklist{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 10px;
}
.checklist li{
  --box: 18px;
  --box-mt: 1px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  /* Anchor the checkmark so it always sits inside the square (never drifts into text) */
  position: relative;
}
.checklist li::before{
  content:"";
  width: var(--box); height: var(--box);
  flex: 0 0 var(--box);
  border-radius: 6px;
  margin-top: var(--box-mt);
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(32,201,255,.9));
  box-shadow: 0 0 0 4px rgba(124,92,255,.14);
  mask: none;
  -webkit-mask: none;
  position: relative;
}
.checklist li::after{
  content:"";
  width: calc(var(--box) * .44);
  height: calc(var(--box) * .22);
  border-left: 2px solid rgba(10,13,24,.85);
  border-bottom: 2px solid rgba(10,13,24,.85);
  position: absolute;
  left: calc(var(--box) * .5);
  top: calc(var(--box-mt) + (var(--box) * .5));
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}
.checklist--tight{ gap: 8px; }

.section{
  position: relative;
  isolation: isolate;
  padding: 64px 0 48px;

  /* per-section glow tuning */  --sec-a: rgba(124,92,255,.085);
  --sec-b: rgba(32,201,255,.065);
  --sec-c: rgba(255,255,255,.018);
}

.section--alt{
  --sec-a: rgba(124,92,255,.085);
  --sec-b: rgba(32,201,255,.065);
  --sec-c: rgba(255,255,255,.018);
}

/* Continuous, seam-free glow layer (very soft — no hard bands) */
.section::before{
  content:"";
  position:absolute;
  left:-6vw;
  right:-6vw;
  top:-220px;
  bottom:-220px;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1100px 700px at 18% 22%, var(--sec-a), transparent 70%),
    radial-gradient(1200px 760px at 86% 78%, var(--sec-b), transparent 70%),
    radial-gradient(1400px 900px at 50% 55%, var(--sec-c), transparent 78%);
  filter: blur(28px);
  opacity: .55;
}

/* End-of-section hairline (crisp line + very subtle glow) */
.section::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height: 1px;
  z-index:-1;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(233,238,252,.18), transparent);
  opacity: .75;
  box-shadow: 0 0 10px rgba(233,238,252,.06);
}

/*
  IMPORTANT:
  The last section (#contact) is followed by the footer. Our global glow layer uses
  a negative bottom offset to create seamless transitions between sections.
  On the last section it can extend past the footer and create extra scroll space.
  We trim it here so the page ends right after the footer.
*/
#contact.section{ padding-bottom: 44px; }
#contact.section::before{ bottom: 0; }
#contact.section::after{ display:none; }

@media (max-width: 760px){
  .section{ padding: 56px 0 44px; }
}
.section__head{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content:flex-start;
  gap: 10px;
  margin-bottom: 24px;
}
.section__title{
  margin: 0;
  font-size: 28px;
  letter-spacing: -.4px;
}
.section__subtitle{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  max-width: 72ch;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.card{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.card:hover .icon{
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.card h3{
  margin: 12px 0 8px;
  font-size: 15px;
}
.card p{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.icon{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  display:grid;
  place-items:center;
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.icon svg{ width: 22px; height: 22px; color: rgba(233,238,252,.88); }

.pricing{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.pricecard{
  display:flex;
  flex-direction:column;
  height:100%;
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
  position: relative;
  overflow:hidden;
}
.pricecard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.pricecard__tag{
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124,92,255,.14);
  border: 1px solid rgba(124,92,255,.30);
  color: rgba(233,238,252,.92);
  font-size: 12px;
}
.pricecard__top{
  margin-bottom: 12px;
}
.pricecard__name{
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.2px;
}
.pricecard__price{
  margin-top: 10px;
  display:flex;
  align-items: baseline;
  gap: 10px;
}
.big{
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.8px;
}
.pricecard__desc{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.pricecard__cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
}
.pricecard--featured{
  background: linear-gradient(180deg, rgba(124,92,255,.12), rgba(255,255,255,.04));
  border-color: rgba(124,92,255,.22);
}
.fineprint{
  margin: 18px 0 0;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.6;
}

.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: start;
}
.split--biz{
  grid-template-areas:
    "intro ."
    "bullets card";
  grid-template-rows: auto auto;
}
.split--biz .biz-intro{ grid-area: intro; }
.split--biz .bullets{ grid-area: bullets; margin-top: 0; }
.split--biz .split__right{ grid-area: card; }

@media (max-width: 980px){
  .split--biz{
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "bullets"
      "card";
  }
}
.bullets{
  margin-top: 18px;
  display:grid;
  gap: 12px;
}
.bullet{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.bullet__icon{
  width: 28px; height: 28px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(233,238,252,.84);
}
.bullet__title{
  font-weight: 700;
  font-size: 14px;
}
.bullet__desc{
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.glass{
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.glass::before{
  content:"";
  position:absolute;
  inset:-60px -60px auto -60px;
  height: 200px;
  background: radial-gradient(240px 240px at 25% 40%, rgba(124,92,255,.24), transparent 62%),
              radial-gradient(260px 260px at 70% 50%, rgba(32,201,255,.16), transparent 62%);
  filter: blur(14px);
  opacity: .9;
  pointer-events:none;
}
.glass__title{ margin: 0 0 8px; font-size: 16px; position: relative; }
.glass__desc{ margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height:1.6; position: relative; }
.glass__actions{ display:flex; flex-wrap:wrap; gap: 10px; position: relative; }
.glass__hint{ margin-top: 12px; color: var(--muted2); font-size: 12px; line-height:1.6; position: relative; }

.steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.step{
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.step__num{
  display:inline-block;
  font-weight: 800;
  letter-spacing: .5px;
  color: rgba(233,238,252,.66);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.step__title{ margin: 12px 0 8px; font-size: 15px; }
.step__desc{ margin: 0; color: var(--muted); font-size: 13px; line-height:1.65; }

.center{ display:flex; justify-content:center; margin-top: 18px; }

.faq{
  display:grid;
  gap: 10px;
}
.faq__item{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.faq__q{
  cursor:pointer;
  font-weight: 700;
  list-style: none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__a{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.contact{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 14px;
  align-items: start;
}
.contact__cards{
  display:grid;
  gap: 12px;
}
.contactcard{
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.contactcard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.contactcard__top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}
.contactcard__icon{
  width: 34px; height: 34px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.contactcard__title{ font-weight: 800; }
.contactcard__desc{ color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.contactcard__link{ color: rgba(233,238,252,.88); font-size: 13px; opacity: .9; }

.form{
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.form__title{ margin:0 0 6px; font-size: 16px; }
.form__desc{ margin:0 0 14px; color: var(--muted); font-size: 13px; line-height:1.6; }
.form__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field{ display:grid; gap: 8px; }
.field--full{ grid-column: 1 / -1; }
.field__label{ color: var(--muted2); font-size: 12px; }
.field__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,13,24,.45);
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.field__input:focus{
  border-color: rgba(124,92,255,.35);
  background: rgba(10,13,24,.60);
}
.field__textarea{ resize: vertical; min-height: 120px; }

.form__actions{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 10px;
  margin-top: 14px;
}
.form__hint{
  color: var(--muted2);
  font-size: 12px;
}
.form__hint.is-ok{ color: rgba(32,201,255,.85); }
.form__hint.is-bad{ color: rgba(255,97,137,.85); }

.footer{
  padding: 18px 0;
  border-top: 0;
  background: rgba(255,255,255,.01);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 10px;
  align-items: start;
}
.footer__logo{
  display:flex;
  gap: 12px;
  align-items:center;
}
.footer__name{
  font-weight: 800;
  letter-spacing: .2px;
}
.footer__note{
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.footer__small{
  margin-top: 8px;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.6;
}
.footer__links{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  align-content: start;
}
.footer__links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  font-size: 13px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition:
    transform 220ms var(--ease-out),
    background 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}
.footer__links a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: rgba(122,162,247,.45);
  transform: translateY(-1px);
}
.footer__links a:active{
  transform: translateY(0);
  background: rgba(255,255,255,.045);
}
.footer__links a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(122,162,247,.35), 0 10px 24px rgba(0,0,0,.18);
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))){
  .footer__links a{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.footer__actions{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items:flex-start;
}

.reveal{
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition:
    opacity 600ms var(--ease-out),
    transform 800ms var(--ease-spring);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* =============================
   Quality upgrade: smoother motion
   - cursor glow + gentle tilt
   - ripple clicks
   - nicer FAQ open state
   ============================= */

:root{
  --glow1: rgba(124,92,255,.18);
  --glow2: rgba(32,201,255,.14);
}

/* Ripple effect (added via JS) */
.btn, .chip, .nav__link{ position:relative; overflow:hidden; }
.ripple{
  position:absolute;
  left:0; top:0;
  border-radius:999px;
  transform: translate(-50%,-50%) scale(0);
  background: rgba(233,238,252,.32);
  opacity: .8;
  pointer-events:none;
  filter: blur(.2px);
  animation: ripple 650ms var(--ease-out) forwards;
}
@keyframes ripple{
  to{ transform: translate(-50%,-50%) scale(1); opacity:0; }
}

/* Cursor-glow + gentle tilt (JS writes --mx/--my/--rx/--ry) */
.fx-surface{
  --lift: 0px;
  --rx: 0deg;
  --ry: 0deg;
  --p: 900px;
  transform: translateY(var(--lift)) perspective(var(--p)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
}
.fx-surface::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(440px 240px at var(--mx, 50%) var(--my, 0%), var(--glow1), transparent 60%),
    radial-gradient(420px 260px at calc(var(--mx, 50%) + 60px) calc(var(--my, 0%) + 80px), var(--glow2), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  mix-blend-mode: screen;
}
.fx-surface::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.fx-surface:hover::before,
.fx-surface:focus-within::before{ opacity: .85; }
.fx-surface:hover::after,
.fx-surface:focus-within::after{ opacity: .55; }

/* Override “lift” transforms so tilt doesn't fight with hover */
.card.fx-surface{ position:relative; overflow:hidden; }
.card.fx-surface:hover{ --lift:-3px; box-shadow: 0 18px 65px rgba(0,0,0,.35); }

.pricecard.fx-surface{ --p: 1000px; }
.pricecard.fx-surface:hover{ --lift:-2px; }

.contactcard.fx-surface{ --p: 900px; }
.contactcard.fx-surface:hover{ --lift:-2px; }

.hero__panel .panel.fx-surface{ --p: 1100px; transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.hero__panel .panel.fx-surface:hover{ --lift:-2px; box-shadow: 0 26px 90px rgba(0,0,0,.55); }

/* Featured card: subtle animated accent */
.pricecard--featured::before{
  content:"";
  position:absolute;
  inset:-40px;
  border-radius: inherit;
  background: conic-gradient(from 180deg, rgba(124,92,255,.0), rgba(124,92,255,.26), rgba(32,201,255,.18), rgba(124,92,255,.0));
  filter: blur(18px);
  opacity: .55;
  animation: spin 10s linear infinite;
  pointer-events:none;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* FAQ polish */
.faq__item{
  position: relative;
  overflow:hidden;
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.faq__item:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.055); }
.faq__item[open]{ border-color: rgba(124,92,255,.22); background: rgba(255,255,255,.06); }
.faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.faq__q::after{
  content:"";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-right: 2px solid rgba(233,238,252,.72);
  border-bottom: 2px solid rgba(233,238,252,.72);
  transform: rotate(45deg);
  opacity: .75;
  transition: transform var(--dur-2) var(--ease-spring), opacity var(--dur-2) var(--ease-out);
}
.faq__item[open] .faq__q::after{ transform: rotate(225deg); opacity: 1; }
.faq__a{ overflow:hidden; }


@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero{ padding-top: 42px; }
  .hero__meta{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pricing{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__links{ justify-content: flex-start; }
}

@media (max-width: 760px){
  /* Mobile: collapsible menu (burger) */
  .nav{ justify-content: space-between; flex-wrap: nowrap; }
  .brand{ min-width: 0; }
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; }

  .nav__links{
    position: absolute;
    top: calc(100% + 10px);
    left: 12px;
    right: 12px;

    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;

    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10, 13, 24, .82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 90px rgba(0,0,0,.55);

    max-height: calc(100vh - var(--topbar-h) - 22px);
    overflow:auto;

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring), visibility 0s linear var(--dur-2);
  }

  .nav__links.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring), visibility 0s;
  }

  .nav__link{
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--text);
    font-size: 14px;
  }
  .nav__link::after{ display:none; }

  .nav__actions{
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.10);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .nav__actions .btn,
  .nav__actions .chip{ width: 100%; justify-content: center; }

  body.nav-open{ overflow:hidden; }
  body.nav-open::after{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99998;
  }

  .topbar{ padding-top: env(safe-area-inset-top); }
  #main{ padding-top: var(--topbar-h); }
  section[id]{ scroll-margin-top: calc(var(--topbar-h) + 16px); }
}
@media (max-width: 560px){
  .hero{ padding: 46px 0 32px; }
  .hero__title{ font-size: clamp(30px, 8.2vw, 44px); line-height: 1.08; }
  .hero__subtitle{ font-size: 14px; }
  .hero__cta .btn{ width: 100%; }

  .cards{ grid-template-columns: 1fr; }
  .section__title{ font-size: 24px; }

  .pricecard__cta{ flex-direction: column; }
  .pricecard__cta .btn{ width: 100%; }

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

@media (prefers-reduced-motion: reduce){
  .pricecard--featured::before{ animation:none; }
  .ripple{ animation:none; opacity:0; }
  .fx-surface{ transform:none; }
  html{ scroll-behavior:auto; }
  body::before{ animation:none; }
  .hero__bg{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .chip, .card, .pricecard, .contactcard { transition:none; }
  .scrollbar__bar{ transition:none; }
}

/* Fallbacks for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .topbar{ background: rgba(10, 13, 24, .92); }
  @media (max-width: 760px){
    .nav__links{ background: rgba(10, 13, 24, .92); }
  }
}





/* Legal section + document pages — unified with the main landing visual language */
.legal-layout{
  display:grid;
  gap: 18px;
  align-items:start;
}
.legal-layout--stacked{
  grid-template-columns: 1fr;
}
.legal-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.legal-card{
  display:flex;
  gap: 14px;
  min-height: 100%;
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.035));
  box-shadow: 0 16px 44px rgba(0,0,0,.22);
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.legal-card:hover{
  transform: translateY(-2px);
  border-color: rgba(124,92,255,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
  box-shadow: 0 22px 56px rgba(0,0,0,.28);
}
.legal-card__icon{
  flex: 0 0 46px;
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(124,92,255,.16), rgba(32,201,255,.10));
  color: rgba(233,238,252,.94);
  font-size: 18px;
  font-weight: 800;
}
.legal-card__title{ margin: 2px 0 8px; font-size: 16px; }
.legal-card__desc{ margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.legal-card__link{ color: rgba(233,238,252,.88); font-size: 13px; }

.legal-summary{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}
.legal-summary__text{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.legal-summary__text a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  margin-left: 10px;
}
.legal-summary__text a:hover{
  border-color: rgba(122,162,247,.45);
}

.form__legal{
  margin: 14px 0 8px;
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.7;
}
.form__legal-links{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.form__legal-links a{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 12px;
}
.form__legal-links a:hover{ color: var(--text); border-color: rgba(122,162,247,.45); background: rgba(255,255,255,.05); }

.legal-page{
  padding: 42px 0 76px;
}
.legal-shell{
  width: min(1080px, calc(100% - clamp(28px, 6vw, 48px)));
  margin-inline: auto;
}
.legal-hero{
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 28px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1200px 320px at 0% 0%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(1000px 260px at 100% 0%, rgba(32,201,255,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
  box-shadow: var(--shadow);
}
.legal-hero::after{
  content:"";
  position:absolute;
  inset:auto -80px -120px auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(124,92,255,.18), transparent 65%);
  pointer-events:none;
}
.legal-hero__kicker{
  display:inline-flex; align-items:center;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--muted); font-size: 12px; margin-bottom: 14px;
}
.legal-hero__title{ margin: 0 0 8px; font-size: clamp(30px, 4.2vw, 46px); line-height:1.05; letter-spacing: -.02em; }
.legal-hero__subtitle{ margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.72; max-width: 840px; }
.legal-hero__meta{ display:flex; flex-wrap:wrap; gap:10px; color: var(--muted2); font-size: 12px; margin-bottom: 14px; }
.legal-hero__meta span{ padding: 7px 11px; border-radius:999px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.legal-hero__summary{ margin: 0; color: rgba(233,238,252,.88); font-size: 14px; line-height: 1.8; max-width: 760px; }
.legal-overview{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.legal-overview__item{
  min-height: 100%;
  padding: 16px 16px 15px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.legal-overview__label{
  display:block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
}
.legal-overview__value{
  display:block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}
.legal-tabs{
  position: sticky;
  top: calc(var(--topbar-h) + 14px);
  z-index: 10;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 0 0 18px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(9, 13, 24, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
}
.legal-tabs a{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  color: var(--muted); font-size: 13px;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.legal-tabs a:hover, .legal-tabs a.is-current{ color: var(--text); border-color: rgba(122,162,247,.45); background: rgba(255,255,255,.07); transform: translateY(-1px); }
.legal-doc{
  padding: clamp(22px, 3vw, 34px);
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}
.legal-doc__lead{
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.legal-doc h2{
  margin: 30px 0 14px;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.legal-doc h2::before{
  content:"";
  display:block;
  width: 44px;
  height: 2px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124,92,255,.95), rgba(32,201,255,.95));
}
.legal-doc h3{ margin: 20px 0 10px; font-size: 16px; }
.legal-doc p{ margin: 0 0 14px; color: var(--text); line-height: 1.8; font-size: 14px; }
.legal-doc ul{ margin: 0 0 16px 0; padding-left: 20px; color: var(--text); }
.legal-doc li{ margin: 0 0 8px; line-height: 1.78; font-size: 14px; color: rgba(233,238,252,.92); }
.legal-doc .doc-clause{ color: rgba(233,238,252,.92); }
.legal-doc a{ color: #b7d8ff; text-decoration: none; border-bottom: 1px solid rgba(183,216,255,.28); }
.legal-doc a:hover{ border-color: rgba(183,216,255,.55); }
.legal-doc .doc-contact{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.legal-doc .doc-contact a{ color: var(--text); border-bottom: 1px solid rgba(255,255,255,.16); }

.legal-doc + .footer,
.legal-page + .footer{
  margin-top: 8px;
}

@media (max-width: 980px){
  .legal-summary{ flex-direction: column; align-items: flex-start; }
  .legal-summary__text a{ margin-left: 0; display: inline-block; margin-top: 6px; }
  .legal-overview{ grid-template-columns: 1fr; }
  .legal-tabs{ top: calc(var(--topbar-h) + 10px); }
}
@media (max-width: 760px){
  .legal-cards{ grid-template-columns: 1fr; }
  .legal-page{ padding: 28px 0 52px; }
  .legal-hero, .legal-doc{ padding: 20px; border-radius: 24px; }
  .legal-tabs{ position: static; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .legal-tabs a{ width: 100%; justify-content: flex-start; }
}