/* ---------------- Auth modal (MVP) ---------------- */
.modal{position:fixed;inset:0;z-index:999;display:none}
.modal[aria-hidden="false"]{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px)}
.modal__card{position:relative;max-width:520px;margin:10vh auto 0 auto;background:#0f1620;border:1px solid #1f2a37;border-radius:18px;box-shadow:0 20px 70px rgba(0,0,0,.45);padding:18px}
.modal__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.modal__kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.modal__title{margin:4px 0 0 0;font-size:20px}
.modal__close{border:1px solid #1f2a37;background:#0b111a;color:#e8eef7;border-radius:12px;padding:8px 10px;cursor:pointer}
.modal__close:hover{filter:brightness(1.08)}
.segToggle--modal{margin:10px 0 14px 0}
.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:12px;opacity:.8}
.field input{width:100%;padding:12px 12px;border-radius:14px;border:1px solid #1f2a37;background:#0b111a;color:#e8eef7;outline:none}
.field input:focus{border-color:#334155;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.form__row{display:flex;gap:10px;align-items:center}
.form__hint{font-size:12px;opacity:.75;line-height:1.4}
.form__msg{margin-top:2px;font-size:13px;min-height:18px}
.form__msg--ok{color:#22c55e}
.form__msg--err{color:#ef4444}
.modal__foot{margin-top:10px;border-top:1px solid #1f2a37;padding-top:10px}
.muted{opacity:.7;font-size:12px;line-height:1.4}

@media (max-width:560px){
  .modal__card{margin:8vh 14px 0 14px}
  .form__row{flex-direction:column;align-items:stretch}
}
/* Quantor — mobile-first landing (responsive: 320 → 4K)
   Breakpoints: 480 / 768 / 1024 / 1440
*/

:root{
  --bg:#121A2A;
  --card:#142040CC;
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.08);
  --txt:#EAF0FF;
  --muted:#AAB4D6;
  --radius:16px;
  --shadow: 0 18px 50px rgba(0,0,0,.25);
  --shadow2: 0 20px 60px rgba(0,0,0,.35);
  --btnGrad: linear-gradient(135deg, rgba(79,140,255,.92), rgba(138,79,255,.86));
}
.card{
  transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}
/* Reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--txt);
  background:
    radial-gradient(1000px 600px at 20% 10%, #111A3A 0%, var(--bg) 55%),
    radial-gradient(900px 600px at 90% 30%, #0F1B3B 0%, var(--bg) 60%);
  overflow-x:hidden;
}
.bg-fixed{
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("assets/bg-network.png") center / cover no-repeat;
  transform: translateZ(0); /* помогает на некоторых GPU */
}

.bg-fixed::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 25% 10%, rgba(79,140,255,.14), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(138,79,255,.12), transparent 65%),
    rgba(18,26,42,.52); 
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; }

/* Container */
.wrap{
  width:min(1120px, 100%);
  margin:0 auto;
  padding:0 16px;
}

/* Typography */
h1{
  margin:0 0 10px;
  line-height:1.06;
  letter-spacing:-.02em;
  font-size: clamp(32px, 6.2vw, 56px);
}
h2{
  margin:0 0 10px;
  letter-spacing:-.02em;
  font-size: clamp(24px, 4.6vw, 36px);
}
h3{ margin:0 0 6px; font-size:16px; letter-spacing:-.01em; }
.lead{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.55;
  font-size:15px;
  max-width:44ch;
}
.muted{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
  max-width:70ch;
}
.fineprint{
  margin:12px 0 0;
  font-size:11px;
  color: rgba(170,180,214,.72);
}

/* Topbar */
.topbar{
   position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12,18,32,.72);
}
.logo{margin:0;}
.topbar .logo{
  width: clamp(110px, 18vw, 220px);height: auto;
}
.topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: relative;
}
.brand__logo{ width: clamp(120px, 20vw, 260px);
  height: auto;
  max-width: 100%;
  display: block; }

/* Burger */
.burger{
  display: flex;
  flex-direction: column;
}
.burger span{
  width:18px; height:2px;
  border-radius:99px;
  background: rgba(234,240,255,.92);
}

/* Nav */
.nav{
  /* Mobile: off-canvas panel */
  display: flex;
  flex-direction: column;
  gap: 10px;

  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(86vw, 320px);

  padding: 86px 18px 18px;
  background: rgba(6,10,18,.94);
  border-left: 1px solid rgba(255,255,255,.10);

  transform: translateX(110%);
  transition: transform .22s ease;
  z-index: 50;

  visibility: hidden;
  pointer-events: none;
}
.nav a{
  display:block;
  padding: 12px 0;
  text-decoration:none;
  opacity:.92;
}
.nav--open{
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* When mobile nav is open: overlay + scroll lock */
body.nav-open{
  overflow: hidden;
}

body.nav-open::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 40; /* under the nav panel */
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  color:white;
  font-weight:600;
  border:1px solid rgba(255,255,255,.12);
  background: var(--btnGrad);
  box-shadow:
    0 10px 30px rgba(79,140,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.btn:active{ transform: translateY(0px); opacity:.92; }
.btn--ghost{ background: rgba(14,22,48,.35); box-shadow:none; }
.btn--sm{ padding:10px 12px; border-radius:10px; }

/* HERO */
.hero{ position:relative; padding: 26px 0 22px; }
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(5,10,20,.78) 0%,
      rgba(5,10,20,.55) 45%,
      rgba(5,10,20,.25) 100%),
    url("assets/hero-uantor.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity:1;
  filter:saturate(1.05);
  z-index:-1;
}
.hero__inner{ position:relative; display:grid; gap:18px; min-height: 78vh; align-items:center; overflow:hidden; border-radius: 24px; }
.hero__copy{ padding-top:10px; }
.cta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.bullets{
  margin:0; padding-left:18px;
  color: rgba(234,240,255,.80);
  font-size:13px;
  line-height:1.7;
}
.hero__visual{
  position: relative;
}
:focus-visible{
  outline:2px solid rgba(79,140,255,.8);
  outline-offset:3px;
  border-radius:10px;
}
.hero__visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(79,140,255,.18), transparent 70%);
  pointer-events:none;
}
.hero__visual img{ width:100%; height:auto; }
.pill{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(14,22,48,.45);
}
/* Sections */
.section{ padding:46px 0; }

/* Media block */
.media{ display:grid; gap:14px;position: relative; }
.media__phone, .media__cards{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--stroke2);
  background: rgba(10,16,34,.35);
  box-shadow: var(--shadow);
}

.media--single{
  grid-template-columns: 1fr;
  margin-top: 14px;
}
.media__mockup{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--stroke2);
  background: rgba(10,16,34,.35);
  box-shadow: var(--shadow);
}
.media__mockup img{
  display:block;
  width:100%;
  height:auto;
}
.tg-block{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items:center;
}

.tg-block__title{
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.tg-block__lead{
  margin: 0 0 18px;
  max-width: 56ch;
  line-height: 1.6;
  opacity: .85;
}

.tg-points{
  display:grid;
  gap: 14px;
  margin: 0 0 22px;
}

.tg-point{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}

.tg-point__head{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}

.tg-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(120,180,255,.9);
  box-shadow: 0 0 18px rgba(120,180,255,.35);
  flex: 0 0 auto;
}

.tg-point__text{
  margin: 0;
  line-height: 1.55;
  opacity: .85;
}

.tg-cta{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

.tg-cta__note{
  opacity: .75;
  line-height: 1.4;
}

/* media */
.tg-block__media{
  display:flex;
  justify-content:center;
}

.tg-block__img{
  width: min(520px, 100%);
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

/* responsive */
@media (max-width: 1023px){
  .tg-block{ grid-template-columns: 1fr; }
  .tg-block__media{ order: -1; }
  .tg-block__lead{ max-width: 60ch; }
}


/* Make the mockup feel premium and centered on large screens */
@media (min-width: 1024px){
  #how .media--single{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 18px;
  }
}


@media (min-width: 1024px){

  /* header layout */
  .topbar{
    background: rgba(6,10,18,.72);
  }

  .topbar__inner{
    display: flex;
    align-items: center;
    gap: 32px;
  }

  /* hide burger */
  .burger{
    display: none;
  }

  /* nav inline, right side */
  .nav{
    display: flex !important;
    align-items: center;
    gap: 28px;
    margin-left: auto;
    padding: 0;
    position: static;
    flex-direction: row;
    background: none;
    border: 0;
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    padding: 0;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    z-index: auto;
  }

  .nav a{
    display: inline-flex;
    align-items: center;
    padding: 0;
    white-space: nowrap;
    opacity: .9;
  }

  .nav a:hover{
    opacity: 1;
  }

  /* CTA button in nav */
  .nav .btn{
    margin-left: 8px;
  }
}
.cards{ display:grid; gap:12px; }
.card{
  background: var(--card);
  border:1px solid var(--stroke2);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}
.card .icon{ font-size:18px; margin-bottom:8px; opacity:.92; }
.card p{ margin:0; color:var(--muted); font-size:13px; line-height:1.55; }

/* Pills */
.pill-grid{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  padding:10px 12px;
  border-radius:999px;
  background: rgba(14,22,48,.35);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.86);
  font-size:12px;
}

/* CTA block */
.section--cta{ padding:54px 0 64px; }
.ctaBox{
  border-radius: calc(var(--radius) + 6px);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 350px at 30% 0%, rgba(79,140,255,.18), transparent 60%),
    radial-gradient(700px 350px at 80% 0%, rgba(138,79,255,.14), transparent 60%),
    rgba(14,22,48,.28);
  padding:18px;
  box-shadow: var(--shadow);
}
.form{ display:grid; gap:10px; margin-top:12px; }
.input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,10,18,.55);
  color:var(--txt);
  outline:none;
}
.input::placeholder{ color: rgba(170,180,214,.7); }

/* Footer */
.footer{
  padding: 24px 0;
}
.footer__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.footer__logo{width: clamp(120px, 20vw, 260px);
  height: auto;
  max-width: 100%;
  display: block; }

/* -------------------------
   Breakpoints
-------------------------- */

/* 480+ */
@media (min-width: 480px){
  .wrap{ padding:0 20px; }
  .hero{ position:relative; padding: 26px 0 22px; }
  .hero__copy{ padding-top: 14px; }
  .ctaBox{ padding: 20px; }
}

/* 768+ */
@media (min-width: 768px){
  .wrap{ padding:0 24px; }
  .hero{ position:relative; padding: 26px 0 22px; }
  .hero__inner{ position:relative; display:grid; gap:18px; min-height: 78vh; align-items:center; overflow:hidden; border-radius: 24px; }
  .cards{ grid-template-columns: repeat(2, 1fr); gap:14px; }
  .media{ grid-template-columns: 1fr 1fr; gap:18px; align-items:start; }
  .form{ grid-template-columns: 1fr auto; align-items:center; }
  .input{ min-height: 44px; }
  .footer__inner{
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* 1024+ */
@media (min-width: 1024px){
  .nav{
    display: flex;
    gap: 28px;
    align-items: center;
    border-top: none;
    padding: 0;
    position: static;
    background: none;
  }
  .burger{ display:none; }
  .nav a{ display:inline-block; padding:0; }

  .hero{ position:relative; padding: 26px 0 22px; }
  .hero__inner{ position:relative; display:grid; gap:18px; min-height: 78vh; align-items:center; overflow:hidden; border-radius: 24px; }
  .hero__copy{ padding-top:0; }
  h1{ max-width: 14ch; }
  .lead{ font-size:17px; }
  .hero__visual{ transform: translateY(10px); }

  .media{
    grid-template-columns: 0.9fr 1.1fr;
    gap:24px;
  }
  .media__phone{ max-width: 340px; margin-left:auto; }
  .media__cards{ max-width: 560px; }

  .cards{ grid-template-columns: repeat(3, 1fr); gap:16px; }
}

/* 1440+ */
@media (min-width: 1440px){
  .wrap{ width:min(1240px, 100%); }
  .hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(5,10,20,.78) 0%,
      rgba(5,10,20,.55) 45%,
      rgba(5,10,20,.25) 100%),
    url("assets/hero-uantor.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity:1;
  filter:saturate(1.05);
  z-index:-1;
}
  .section{ padding: 60px 0; }
  .cards{ gap:20px; }
  .card{ padding: 20px; }
  .ctaBox{ padding: 24px; }
}

/* =========================
   Premium header + footer
   (non-destructive overrides)
   ========================= */

/* Burger button polish + animation */
.burger{
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(12,18,34,.25);
  cursor: pointer;
  transition: transform .12s ease,  border-color .18s ease;
}
.burger:hover{ background: rgba(12,18,34,.35); border-color: rgba(255,255,255,.14); }
.burger:active{ transform: scale(.98); }
.burger span{
  display:block;
  width: 18px;
  height: 2px;
  border-radius: 99px;
  transition: transform .22s ease, opacity .18s ease;
  background: rgba(234,240,255,.92);
}
.burger--open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.burger--open span:nth-child(2){ opacity: 0; }
.burger--open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Dropdown animation */
.nav{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.nav.nav--open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Nav active indicator */
.nav a{
  position: relative;
}
.nav a::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.65);
  opacity: 0;
  transform: scaleX(.6);
  transition: opacity .18s ease, transform .18s ease;
}
.nav a:hover::after{
  opacity: .55;
  transform: scaleX(.9);
}
.nav a.is-active::after{
  opacity: .9;
  transform: scaleX(1);
}

@media (min-width: 1024px){
  /* ensure no dropdown animation on desktop */
  .nav{
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
  }
  .nav a::after{ bottom: -12px; }
}

/* Footer: proper structure */
.footer{
  padding: 52px 0 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(6,10,18,.55);
}
.footer__grid{
  display: grid;
  gap: 22px;
  align-items: start;
}
.footer__brand{
  text-align: left;
}
.footer__logo{
  width: clamp(120px, 20vw, 260px);
  height: auto;
  display: block;
  margin-bottom: 10px;
}
.footer__tagline{
  margin: 0;
  color: rgba(170,180,214,.86);
  font-size: 14px;
  line-height: 1.5;
  max-width: 46ch;
}
.footer__col{
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__title{
  margin: 0 0 2px;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(234,240,255,.92);
  text-transform: uppercase;
}
.footer__col a{
  text-decoration: none;
  color: rgba(234,240,255,.86);
  opacity: .86;
  transition: opacity .18s ease, transform .18s ease;
}
.footer__col a:hover{
  opacity: 1;
  transform: translateY(-1px);
}
.footer__muted{
  opacity: .76;
}
.footer__bottom{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}
.footer__bottomLinks{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (min-width: 768px){
  .footer__grid{
    grid-template-columns: 1.2fr 1fr;
  }
  .footer__bottom{
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 1024px){
  .footer__grid{
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 28px;
  }
}

/* ===== Design polish (2026-01-03) ===== */
:root{
  --glass: rgba(14,22,48,.72);
  --glass2: rgba(14,22,48,.52);
  --accent: rgba(79,140,255,.92);
  --accent2: rgba(138,79,255,.86);
  --ring: rgba(79,140,255,.45);
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

h1,h2,h3{ letter-spacing: -.02em; }
p{ max-width: 68ch; }

.section{
  padding: clamp(56px, 7vw, 92px) 0;
}
.section + .section{
  border-top: 1px solid var(--stroke2);
}

.topbar{
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar__inner{ gap: 14px; }

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.brand__logo{
  width: clamp(110px, 16vw, 220px);
  height: auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.nav a{
  position: relative;
  font-weight: 560;
  color: rgba(234,240,255,.88);
  transition: opacity .15s ease, transform .15s ease;
}
.nav a:hover{ opacity: 1; transform: translateY(-1px); }
.nav a::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-10px;
  height:2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity:0;
  transform: scaleX(.7);
  transform-origin: center;
  transition: opacity .15s ease, transform .15s ease;
}
.nav a.is-active::after{
  opacity:1;
  transform: scaleX(1);
}
.nav a[aria-current="page"]{ opacity: 1; }

.btn{
  border-radius: 14px;
  padding: 12px 18px;
}
.btn--ghost{
  background: rgba(255,255,255,.05);
  box-shadow: none;
}
.btn--ghost:hover{
  filter: brightness(1.08);
}

.hero{ position:relative; padding: 26px 0 22px; }
.hero__copy .lead{
  font-size: clamp(15px, 1.7vw, 18px);
  color: rgba(170,180,214,.92);
}
.hero__visual img{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}

.cards{
  gap: 14px;
}
.card{
  background: linear-gradient(180deg, var(--glass), rgba(14,22,48,.38));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(79,140,255,.25);
  filter: brightness(1.03);
}
.card .icon{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  margin-bottom: 10px;
}

.media{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 26px 80px rgba(0,0,0,.35);
  overflow:hidden;
}
.media__phone img,
.media__cards img{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
}

.footer{
  padding: 56px 0 28px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(6,10,18,0), rgba(6,10,18,.55));
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 22px;
  align-items:start;
  padding-top: 10px;
}
.footer__brand{ max-width: 38ch; }
.footer__logo{
  width: clamp(120px, 14vw, 200px);
  height: auto;
  display:block;
  margin-bottom: 10px;
}
.footer__tagline{
  color: rgba(170,180,214,.90);
  line-height: 1.6;
  margin: 0;
}
.footer__col{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.footer__title{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(234,240,255,.72);
  margin: 4px 0 8px;
}
.footer__col a{
  text-decoration:none;
  color: rgba(234,240,255,.80);
  opacity:.92;
  transition: opacity .15s ease, transform .15s ease;
}
.footer__col a:hover{ opacity:1; transform: translateX(2px); }

.footer__muted{ color: rgba(170,180,214,.88) !important; }

.footer__bottom{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.footer__bottomLinks{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 900px){
  .footer__grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px){
  .footer__grid{
    grid-template-columns: 1fr;
  }
  .footer__bottom{
    justify-content: center;
    text-align:center;
  }
}


/* --- Hybrid How (Telegram Control + Steps) --- */
#how .wrap{max-width:1100px;}
.how{display:flex;flex-direction:column;gap:22px;}
.how__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:center;
  padding:18px;
  border-radius:22px;
  background: linear-gradient(180deg, rgba(10,14,22,.55), rgba(10,14,22,.25));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
}
.how__copy h2{margin:0 0 10px;}
.how__bullets{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.how__bullets li{
  display:grid;
  grid-template-columns: 14px 1fr;
  gap:10px;
  align-items:start;
  line-height:1.35;
}
.how__dot{
  width:10px;height:10px;border-radius:999px;
  margin-top:6px;
  background: radial-gradient(circle at 30% 30%, rgba(120,170,255,.95), rgba(60,120,255,.35));
  box-shadow: 0 0 0 3px rgba(79,140,255,.18);
}
.how__cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px;}
.how__note{font-size:.95rem;opacity:.9}

.how__visual{display:flex;justify-content:center;}
.how__mock{
  position:relative;
  width:min(520px, 100%);
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
}
.how__img{display:block;width:100%;height:auto;transform: scale(1.02);}
.how__mock::after{
  content:"";
  position:absolute;inset:-1px;
  background: radial-gradient(600px 220px at 20% 10%, rgba(79,140,255,.25), transparent 55%),
              radial-gradient(600px 220px at 80% 90%, rgba(0,255,210,.12), transparent 60%);
  pointer-events:none;
}

.floatCards{position:absolute;inset:0;pointer-events:none;}
.floatCard{
  position:absolute;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(10,14,22,.55);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  font-size:.92rem;
  white-space:nowrap;
}
.floatCard--cmd{left:14px;top:16px;transform: rotate(-2deg);}
.floatCard--cmd span{opacity:.9}
.floatCard--fill{right:16px;top:22px;transform: rotate(2deg);}
.floatCard--risk{left:18px;bottom:22px;transform: rotate(1deg);}
.floatCard--pnl{right:18px;bottom:18px;transform: rotate(-1deg);}

.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.stepCard{
  padding:16px 16px 14px;
  border-radius:18px;
  background: rgba(10,14,22,.40);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}
.stepCard:hover{transform: translateY(-4px);border-color: rgba(79,140,255,.28);filter: brightness(1.06);}
.stepCard h3{margin:10px 0 6px;font-size:1.02rem;}
.stepIcon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(79,140,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.stepIcon svg{width:22px;height:22px;color: rgba(180,210,255,.95);}

/* Responsive */
@media (max-width: 1023px){
  .how__grid{grid-template-columns: 1fr; padding:16px;}
  .how__visual{order:-1;}
  .floatCard{font-size:.86rem}
}
@media (max-width: 720px){
  .steps{grid-template-columns: 1fr;}
  .floatCard--cmd{left:10px;top:10px}
  .floatCard--fill{right:10px;top:12px}
  .floatCard--risk{left:10px;bottom:12px}
  .floatCard--pnl{right:10px;bottom:10px}
}


/* ===== TELEGRAM PREMIUM BLOCK ===== */
.section--telegram{
  padding: clamp(40px, 6vw, 90px) 0;
}


@media (max-width: 768px){
  }


/* ===== Subscription / Pricing ===== */
.section--pricing{ padding: clamp(44px, 7vw, 96px) 0; }
.pricingHead{
  display:flex; align-items:center; justify-content:space-between; gap: 18px;
  margin-bottom: 22px;
}
.pricingHead .lead{ max-width: 60ch; opacity:.85; }
.billingToggle{
  display:flex; gap: 8px; padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.billingToggle__btn{
  border: 0; cursor:pointer;
  padding: 10px 14px;
  border-radius: 999px;
  background: transparent;
  color: rgba(234,240,255,.85);
  font-weight: 600;
}
.billingToggle__btn.is-active{
  background: rgba(120,180,255,.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.badge{
  margin-left: 8px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(138,79,255,.18);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.92);
}
.pricingGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  align-items: stretch;
}
.planCard{
  position: relative;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.planCard__name{ margin:0; font-size: 18px; }
.planCard__desc{ margin:6px 0 12px; opacity:.82; }
.price{ display:flex; align-items:baseline; gap: 8px; margin: 4px 0 10px; }
.price__value{ font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.price__period{ opacity:.8; }
.planList{ list-style:none; padding:0; margin: 14px 0 16px; display:grid; gap: 10px; flex: 1; }
.planList li{
  position: relative;
  padding-left: 22px;
  line-height: 1.45;
  color: rgba(234,240,255,.88);
}
.planList li::before{
  content:"";
  position:absolute; left:0; top: .45em;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(120,180,255,.95);
  box-shadow: 0 0 18px rgba(120,180,255,.35);
}
.btn-block{ display:inline-flex; width:100%; justify-content:center; }
/* keep buttons aligned across plans */
.planCard .btn-block{ margin-top: auto; }
.planNote{ margin: 10px 0 0; opacity: .75; font-size: 13px; }
.planCard--featured{
  background: radial-gradient(900px 420px at 20% 10%, rgba(79,140,255,.20), transparent 55%),
              radial-gradient(900px 420px at 80% 90%, rgba(138,79,255,.14), transparent 60%),
              rgba(0,0,0,.20);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-4px);
}
.ribbon{
  position:absolute; top: 14px; right: 14px;
  font-size: 12px; padding: 6px 10px;
  border-radius: 999px;
  background: rgba(120,180,255,.18);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.pricingTrust{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  align-items: stretch;
}
.trustItem{
  display:flex; gap: 12px; align-items:flex-start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  height: 100%;
}
.trustItem p{ margin: 4px 0 0; opacity:.8; line-height:1.5; }
.trustIcon{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(120,180,255,.14);
  border: 1px solid rgba(255,255,255,.08);
}
.checkoutBox{
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}
.checkoutBox__title{ margin:0 0 8px; }
.checkoutBox__text{ margin:0 0 14px; opacity:.85; max-width: 70ch; }
.checkoutRow{ display:flex; align-items:center; justify-content:space-between; gap: 14px; flex-wrap:wrap; }
.checkoutMeta{ display:grid; gap: 6px; opacity:.92; }
.disclaimer{ margin: 12px 0 0; font-size: 12px; opacity:.75; line-height:1.5; }

/* FAQ */
.section--faq{ padding: clamp(44px, 7vw, 86px) 0; }
.faqGrid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 18px; align-items:start; }
.faqList{ display:grid; gap: 10px; }
.faqItem{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 12px 14px;
}
.faqItem summary{ cursor:pointer; font-weight: 700; }
.faqItem p{ margin: 10px 0 2px; opacity:.85; line-height:1.55; }

@media (max-width: 1023px){
  .pricingHead{ flex-direction: column; align-items:flex-start; }
  .pricingGrid{ grid-template-columns: 1fr; }
  .pricingTrust{ grid-template-columns: 1fr; }
  .faqGrid{ grid-template-columns: 1fr; }
  .planCard--featured{ transform:none; }
}

/* =========================
   HERO: mobile background image adaptation
   (keeps HTML structure and text unchanged)
   ========================= */

@media (max-width: 767px){
  /* Avoid heavy cropping on small screens */
  .hero__bg{
    background:
      linear-gradient(180deg,
        rgba(5,10,20,.82) 0%,
        rgba(5,10,20,.55) 48%,
        rgba(5,10,20,.18) 100%),
      url("assets/hero-uantor.png");
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: rgba(5,10,20,1);
  }

  /* Let the hero height follow content more naturally on mobile */
  .hero__inner{
    min-height: 0;
    /* IMPORTANT: keep horizontal padding (wrap sets it, but padding:22px 0 would override it to 0) */
    padding: 20px 16px 18px;
    align-items: start;
  }

  /* Improve readability: a soft glass panel behind copy on mobile */
  .hero__copy{
    padding-top: 0;
    background: rgba(5,10,20,.62);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 14px 14px 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Keep bullets readable and tighter */
  .bullets{ font-size: 13px; }

  /* Make header + CTA more thumb-friendly (no HTML/text changes) */
  .topbar__inner{ height: 56px; }
  .topbar .logo{ width: clamp(104px, 34vw, 160px); }
  .burger{
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .burger span{ width: 20px; }

  /* Mobile nav dropdown aligned to compact header height */
  .nav{ top: 56px; }

  /* CTA buttons: stack on mobile for easier tapping */
  .cta{ flex-direction: column; align-items: stretch; }
  .cta .btn{ width: 100%; }

  /* Improve headline + lead readability */
  h1{ font-size: clamp(30px, 7.2vw, 40px); line-height: 1.08; }
  .lead{ font-size: 15px; line-height: 1.6; max-width: 52ch; }

  /* Pricing + checkout: full-width actions */
  .planCard{ padding: 18px; border-radius: 20px; }
  .planCard .btn{ width: 100%; }
  .checkoutRow{ flex-direction: column; align-items: stretch; }
  .checkoutRow .btn{ width: 100%; }

  /* FAQ: bigger tap area */
  .faqItem{ padding: 14px 14px; }
  .faqItem summary{ padding: 6px 0; }

  /* Mobile perf: reduce expensive blur layers */
  .planCard,
  .checkoutBox,
  .faqItem,
  .billingToggle{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Disable hover lift on touch devices */
  .card:hover{ transform: none; box-shadow: var(--shadow); }
}



/* ===== Mobile polish: 10/10 tweaks (no structure/text changes) ===== */
@media (max-width: 767px){

  /* Avoid jank on mobile Safari/low-end devices */
  .bg-fixed{
    position: absolute;
  }

  /* Hero: rhythm + readability */
  .hero__inner{
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero__copy{
    padding: 16px 14px;
    border-radius: 18px;
  }

  .hero h1{
    font-size: clamp(28px, 7.2vw, 40px);
    line-height: 1.08;
  }

  .lead{
    font-size: 15px;
    line-height: 1.6;
  }

  /* CTA: full-width, consistent tap target */
  .cta{
    flex-direction: column;
    gap: 10px;
  }
  .cta .btn{
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    border-radius: 14px;
  }

  /* Lists/bullets: less “wall of text” */
  .bullets{
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
  }
}

/* Disable hover “jump” on touch devices */
@media (hover: none){
  .btn:hover{ transform: none; }
  .card:hover{ transform: none; }
  .planCard:hover{ transform: none; }
}


/* Price note under plan price (annual billed amount) */
.priceNote{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.85;
}


/* Success page */
body.success{
  background: radial-gradient(ellipse at top, rgba(11,18,32,1), rgba(5,7,13,1));
  color: #fff;
}

.successWrap{
  max-width: 560px;
  margin: 96px auto;
  padding: 0 18px;
  text-align: center;
}

.successBox{
  margin: 22px 0 26px;
  padding: 18px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  text-align: left;
}

.successBox > div{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.successActions{
  display:flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

body.success .hint{
  opacity: 0.85;
  font-size: 14px;
}


/* ===== Pricing layout polish (aligned columns/buttons) ===== */
.pricingGrid{ align-items: stretch; }
.planCard{ display:flex; flex-direction:column; height:100%; }
.planCard__head{ min-height: 168px; } /* keeps titles/price aligned */
.planCard__name{ min-height: 24px; }
.planCard__desc{ min-height: 44px; }
.price{ min-height: 64px; align-items: flex-end; }
.planNote{ min-height: 34px; }

/* consistent CTA sizing */
.btn{ min-height: 52px; }
.btn-block{ width:100%; }

/* Full-bleed network/diagram background stays edge-to-edge */
.bg-fixed{ width:100vw; }

.planCta{ margin-top:auto; }


/* ===== Demo (full-width, Quantor terminal style) ===== */
.section--demo{ padding: 64px 0; }

.demoWrap{ padding: 0 20px; }
.demoHead{
  display:flex; gap: 16px; align-items:flex-end; justify-content:space-between;
  margin-bottom: 18px;
}
.demoHead__meta{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  color: rgba(255,255,255,.82);
}
.pill--soft{ background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.10); }

/* Segmented toggle (Demo / Pseudo-real) */
.segToggle{
  display:inline-flex;
  gap: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.segToggle__btn{
  appearance:none;
  border: 0;
  padding: 7px 12px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  background: transparent;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}
.segToggle__btn + .segToggle__btn{
  border-left: 1px solid rgba(255,255,255,.10);
}
.segToggle__btn:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.segToggle__btn.is-active{
  background: rgba(120,180,255,.14);
  color: rgba(255,255,255,.96);
}


.demoGrid{
  display:grid;
  grid-template-columns: 1.05fr 1.55fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  .demoGrid{ grid-template-columns: 1fr; }
}

/* Terminal */
.demoTerminal{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(6,8,12,.68);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 560px;
}
.termTop{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dots{ display:flex; gap: 7px; }
.dots span{
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.termTitle{ font-size: 12px; letter-spacing:.08em; text-transform: uppercase; opacity:.85; }
.termRight{ display:flex; gap:10px; }
.termBtn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
}
.termBtn--ghost{ background: rgba(0,0,0,.12); }
.termBody{ padding: 14px; display:flex; flex-direction:column; gap: 14px; }
.termRow{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 520px){
  .termRow{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.kv{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.kv span{
  display:block;
  font-size: 11px;
  opacity:.72;
  letter-spacing:.10em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kv strong{ font-size: 15px; }

.sig{ padding: 6px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.14); display:inline-flex; align-items:center; justify-content:center; }
.sig--buy{ background: rgba(95,255,195,.10); border-color: rgba(95,255,195,.25); }
.sig--sell{ background: rgba(255,120,140,.10); border-color: rgba(255,120,140,.25); }
.sig--hold{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }

.termReason .termLabel, .termLog .termLabel{
  font-size: 11px;
  opacity:.72;
  letter-spacing:.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.termBox{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  padding: 12px 12px;
  line-height: 1.45;
  min-height: 66px;
}

.termControls{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items:end;
}
@media (max-width: 520px){
  .termControls{ grid-template-columns: 1fr; }
}
.select span{
  display:block;
  font-size: 11px;
  opacity:.72;
  letter-spacing:.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.select select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  outline:none;
}
.miniNote{ grid-column: 1 / -1; opacity:.72; font-size: 13px; }

.termLog .log{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  padding: 10px 12px;
  max-height: 170px;
  overflow:auto;
}
.logLine{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.5; }
.logLine.muted{ opacity:.65; }

/* Chart card */
.demoChartCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(6,8,12,.58);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 560px;
}
.chartTop{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.chartTitle{ font-size: 12px; letter-spacing:.08em; text-transform: uppercase; opacity:.85; }
.chartBadges{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
.chartStage{
  width: 100%;
  flex: 1 1 auto;
  padding: 10px 10px 0;
}
.chartStage canvas{
  width: 100%;
  height: 100%;
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.chartFoot{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.metric{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.metric span{
  display:block;
  font-size: 11px;
  opacity:.72;
  letter-spacing:.10em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.metric strong{ font-size: 15px; }

.demoHint{
  margin-top: 14px;
  opacity: .72;
  font-size: 13px;
  line-height: 1.45;
}


/* Telegram link box (auth modal) */
.tgbox{margin-top:14px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04)}
.tgbox__title{font-weight:700;font-size:14px}
.tgbox__subtitle{font-size:12px;margin-top:4px}
.tgbox__actions{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.tgbox__code{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.35);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;letter-spacing:.08em;font-size:14px}
.tgbox__hint{margin-top:10px;font-size:12px}
.tgbox__hint code{background:rgba(0,0,0,.25);padding:2px 6px;border-radius:8px}


/* ---------------- Live Demo showcase (Quantor) ---------------- */
.demoShowcase{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#07142b;
  box-shadow:none;
}

.demoShowcase__videoBg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.demoShowcase__videoBg video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  opacity:.92;
  filter:saturate(.96) contrast(1.08) brightness(.92);
}

.demoShowcase__videoShade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(4,8,20,.50) 0%, rgba(7,20,48,.18) 42%, rgba(4,8,20,.66) 100%),
    linear-gradient(90deg, rgba(3,5,13,.48) 0%, rgba(7,25,58,.10) 48%, rgba(3,5,13,.46) 100%),
    linear-gradient(177deg, transparent 0 46%, rgba(57,244,255,.16) 47%, transparent 49%),
    linear-gradient(183deg, transparent 0 57%, rgba(90,126,255,.10) 58%, transparent 60%),
    linear-gradient(rgba(142,190,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142,190,255,.018) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 86px 86px, 86px 86px;
}

.demoShowcase__content{
  position:relative;
  z-index:1;
}

.demoShowcase__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.demoShowcase__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.demoShowcase__pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  letter-spacing:.16em;
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
}
.demoShowcase__title{
  margin: 6px 0 6px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  text-shadow:0 0 30px rgba(57,244,255,.16), 0 14px 40px rgba(0,0,0,.45);
}
.demoShowcase__sub{
  margin: 0 0 16px;
  max-width: 64ch;
  color:rgba(224,240,255,.78);
}
.demoShowcase__frame{
  position:relative;
  border-radius: calc(var(--radius) + 10px);
  overflow:hidden;
  border:0;
  padding:0;
  background:rgba(4,10,26,.22);
  box-shadow:0 30px 82px rgba(0,0,0,.42);
  backdrop-filter:none;
}

.demoShowcase__glow{
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 18%, rgba(3,5,13,.22));
  pointer-events:none;
  z-index:0;
}
.demoShowcase__frameBar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  background:
    linear-gradient(90deg, rgba(7,18,42,.92), rgba(11,28,64,.86));
  border-bottom:1px solid rgba(126,184,255,.14);
}
.demoShowcase__frameBar strong{
  display:block;
  color:rgba(244,249,255,.92);
  font-size:13px;
  letter-spacing:.04em;
}
.demoShowcase__frameBar span{
  display:block;
  margin-top:2px;
  color:rgba(216,235,255,.58);
  font-size:12px;
}
.demoShowcase__frameBar a{
  color:rgba(236,247,255,.92);
  text-decoration:none;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(126,184,255,.20);
  background:rgba(255,255,255,.045);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.demoInline{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);
  gap:14px;
  padding:14px;
  min-height:560px;
  background:
    radial-gradient(760px 300px at 22% 0%, rgba(57,244,255,.10), transparent 64%),
    linear-gradient(180deg, rgba(5,12,30,.86), rgba(4,9,24,.92));
}
.demoInline__chart,
.demoInline__side{
  min-width:0;
  border-radius:18px;
  border:1px solid rgba(126,184,255,.13);
  background:linear-gradient(180deg, rgba(7,18,42,.72), rgba(3,8,22,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  overflow:hidden;
}
.demoInline__chart{
  padding:12px;
}
.demoInline__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.demoInline__top span,
.demoInline__signal span,
.demoInline__risk span{
  display:block;
  color:rgba(210,232,255,.56);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.demoInline__top strong{
  display:block;
  margin-top:3px;
  color:rgba(246,250,255,.94);
  font-size:22px;
  letter-spacing:.01em;
}
.demoInline__change{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(126,184,255,.14);
  background:rgba(255,255,255,.045);
  color:rgba(210,232,255,.72);
  font-size:12px;
  font-weight:900;
}
.demoInline__change.is-up{color:rgba(78,242,193,.96); border-color:rgba(78,242,193,.25);}
.demoInline__change.is-down{color:rgba(255,112,142,.96); border-color:rgba(255,112,142,.25);}
.demoInline__surface{
  display:block;
  width:100%;
  height:430px;
  border-radius:14px;
  border:1px solid rgba(126,184,255,.12);
  background:#030915;
}
.demoInline__side{
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:10px;
  padding:12px;
}
.demoInline__signal,
.demoInline__risk,
.demoInline__events{
  border-radius:16px;
  border:1px solid rgba(126,184,255,.12);
  background:rgba(255,255,255,.04);
}
.demoInline__signal{padding:14px;}
.demoInline__signal strong{
  display:block;
  margin-top:8px;
  color:rgba(246,250,255,.94);
  font-size:20px;
  letter-spacing:.06em;
}
.demoInline__signal small{
  display:block;
  margin-top:6px;
  color:rgba(210,232,255,.62);
  line-height:1.4;
}
.demoInline__risk{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:10px;
}
.demoInline__risk div{
  min-width:0;
  padding:10px 8px;
  border-radius:12px;
  background:rgba(4,10,26,.44);
}
.demoInline__risk strong{
  display:block;
  margin-top:5px;
  color:rgba(238,247,255,.90);
  font-size:12px;
}
.demoInline__events{
  padding:10px;
  display:grid;
  gap:8px;
  align-content:start;
}
.demoInline__event{
  padding:9px 10px;
  border-radius:12px;
  background:rgba(4,10,26,.42);
  color:rgba(224,240,255,.76);
  font-size:12px;
}
.demoInline__event strong{
  display:block;
  color:rgba(246,250,255,.90);
  margin-bottom:2px;
}
.demoShowcase__embedStatus{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  padding:10px 14px;
  border-radius:999px;
  color:rgba(236,247,255,.86);
  background:rgba(4,10,26,.76);
  border:1px solid rgba(126,184,255,.18);
  box-shadow:0 18px 46px rgba(0,0,0,.30);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  font-size:12px;
  font-weight:800;
}
.demoShowcase__frame.is-loaded .demoShowcase__embedStatus{
  opacity:0;
  transform:translate(-50%, -58%);
}
.demoShowcase__frame iframe{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height: 720px;
  border:0;
  border-radius:calc(var(--radius) + 2px);
  background:#03050d;
  box-shadow:0 18px 46px rgba(0,0,0,.34);
}
@media (max-width: 980px){
  .demoShowcase__frame iframe{ height: 720px; }
  .demoInline{grid-template-columns:1fr; min-height:0;}
  .demoInline__surface{height:360px;}
}
@media (max-width: 640px){
  .demoShowcase__top{ flex-direction:column; align-items:flex-start; }
  .demoShowcase__frameBar{align-items:flex-start; flex-direction:column;}
  .demoShowcase__frame iframe{ height: 660px; }
  .demoInline{padding:10px;}
  .demoInline__surface{height:300px;}
  .demoInline__risk{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  .demoShowcase__videoBg video{
    display:none;
  }

  .demoShowcase__videoBg{
    background:
      linear-gradient(180deg, rgba(5,12,28,.70), rgba(5,12,28,.78)),
      url("assets/bg-network.png") center / cover no-repeat;
  }
}



/* ===== CTA Button: Start Trading (Header, Soft) ===== */
.btn--cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 12px;

  font-weight: 700;
  letter-spacing: .2px;

  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, #7c7cff, #7cffd2);
  color: #0b0f17;

  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.08) inset;

  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  overflow: hidden;
  text-decoration: none;
}

.btn--cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

.btn--cta:active{
  transform: translateY(0);
  filter: brightness(.98);
}

.btn--cta:focus-visible{
  outline: none;
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 2px rgba(255,255,255,.25) inset,
    0 0 0 3px rgba(120,200,255,.35);
}

/* Safety: ensure it never disappears due to conflicting rules */
#cta-pay-header{
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap;
  margin-right: 10px;
}

/* Mobile */
@media (max-width: 768px){
  .btn--cta{
    padding: 9px 12px;
    border-radius: 11px;
    font-size: 14px;
  }
}


/* ===== CTA Button: Start Trading (Header, Soft) ===== */
.btn--cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 9px 14px;
  border-radius: 10px;

  font-weight: 600;
  letter-spacing: .15px;

  background: rgba(255,255,255,.08);
  color: #ffffff;

  border: 1px solid rgba(255,255,255,.18);

  box-shadow:
    0 6px 18px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.04) inset;

  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
  text-decoration: none;
}

.btn--cta:hover{
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

.btn--cta:active{
  transform: translateY(0);
  background: rgba(255,255,255,.11);
}

#cta-pay-header{
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-right: 10px;
  white-space: nowrap;
}

@media (max-width: 768px){
  .btn--cta{
    padding: 8px 12px;
    font-size: 14px;
  }
}


/* Soft Dark (visible): bg + overlay tint adjusted */
/* patched: --bg(1), --card(1), overlay(1), topbar(1) */


/* ===== SOFT DARK FINAL (balanced, approved) ===== */


/* ===== Quantor video background ===== */
.quantor-video-bg{
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
}
.quantor-video-bg__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
.quantor-video-bg__overlay{
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 28, .55);
}


/* Ensure video is visible above the old static background */
.quantor-video-bg{ z-index: -1; }
.bg-fixed{ display:block !important; opacity:0.25; mix-blend-mode:screen; }

/* ===== Adaptive video background ===== */
.video-bg-disabled .quantor-video-bg{
  display:none !important;
}
.video-bg-disabled body{
  background: radial-gradient(1200px 600px at 50% 20%, #0f1b33 0%, #050b14 60%, #030812 100%);
}
@media (max-width: 768px){
  .quantor-video-bg{ display:none; }
}

/* ===== mobile nav hard fix ===== */
.topbar{ position: sticky; top: 0; z-index: 100; }
.topbar__inner{ position: relative; z-index: 101; }

.burger{
  position: relative;
  z-index: 120;
}

.nav{
  z-index: 110;
}

body.nav-open::before{
  z-index: 105;
}

/* ===== mobile nav hard fix ===== */
.topbar{ position: sticky; top: 0; z-index: 100; }
.topbar__inner{ position: relative; z-index: 101; }

.burger{
  position: relative;
  z-index: 120;
}

.nav{
  z-index: 110;
}

body.nav-open::before{
  z-index: 105;
}

/* ===== burger overlay layering fix ===== */
body.nav-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(5, 10, 20, 0.55);
  z-index:90;
  pointer-events:auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:120;
}

.topbar__inner{
  position:relative;
  z-index:121;
}

.burger{
  position:relative;
  z-index:130;
}

.nav{
  position:relative;
  z-index:125;
}

@media (max-width: 1023px){
  .nav{
    position:fixed;
    top:72px;
    right:16px;
    left:16px;
    z-index:125;
  }
}

.pricing-runtime {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.pricing-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px;
  background: rgba(255,255,255,0.04);
}

.pricing-card [data-role="plan-checkout"] {
  display: inline-block;
  margin-top: 12px;
}

/* ===== Quantor product polish: launch-ready surface ===== */
body{
  background:#0f141a;
}

h1,h2,h3,.price__value{
  letter-spacing:0;
}

body .modal__kicker,
body .termTitle,
body .chartTitle,
body .tgbox__code,
body .btn,
body .btn--cta,
body .hero__eyebrow,
body .cockpitCard__label{
  letter-spacing:0;
}

.bg-fixed::after{
  background:rgba(8,12,18,.72);
}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  margin-bottom:12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  color:#b9f3d1;
  background:rgba(28,95,70,.20);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.hero h1{
  font-size:clamp(46px, 8vw, 84px);
  line-height:.94;
}

.hero .lead{
  max-width:58ch;
  font-size:17px;
  color:rgba(234,240,255,.88);
}

.btn--cta{
  background:#eaf0ff;
  color:#0f141a;
  border-color:rgba(255,255,255,.42);
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}

.sectionIntro{
  max-width:760px;
  margin-bottom:18px;
}

.section--workflow{
  padding:clamp(44px, 7vw, 86px) 0;
}

.workflowGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}

.workflowStep,
.planCard,
.checkoutBox,
.faqItem,
.trustItem,
.cockpitCard,
.appPanel,
.success__inner{
  border-radius:10px;
}

.workflowStep{
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
}

.workflowStep p{
  margin:8px 0 0;
  color:rgba(234,240,255,.76);
  line-height:1.55;
}

.stepMarker,
.trustIcon,
.card .icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(185,243,209,.10);
  color:#b9f3d1;
  font-size:12px;
  font-weight:900;
}

.planCard{
  background:rgba(255,255,255,.045);
  box-shadow:0 18px 54px rgba(0,0,0,.30);
}

.planCard--featured{
  background:
    linear-gradient(180deg, rgba(185,243,209,.12), rgba(255,255,255,.045));
  border-color:rgba(185,243,209,.32);
}

.ribbon,
.billingToggle__btn.is-active{
  background:rgba(185,243,209,.16);
  color:#f7fff9;
}

.planList li::before{
  border-radius:3px;
  background:#b9f3d1;
  box-shadow:none;
}

.pricingTrust{
  margin-top:22px;
}

.pricing-runtime{
  display:none;
}

.appShell{
  padding-top:24px;
  padding-bottom:64px;
}

.appHero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin:10px 0 18px;
}

.appHero h1{
  margin:0 0 8px;
  font-size:clamp(34px, 5vw, 56px);
}

.appPanel{
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
}

.appPanel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.cockpitGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}

.cockpitCard{
  min-height:128px;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}

.cockpitCard__label{
  display:block;
  margin-bottom:10px;
  color:rgba(234,240,255,.62);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.cockpitCard strong{
  display:block;
  font-size:22px;
  line-height:1.1;
}

.cockpitCard small{
  display:block;
  margin-top:8px;
  color:rgba(234,240,255,.68);
  line-height:1.45;
}

.readinessList{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}

.readinessList li{
  display:flex;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(0,0,0,.14);
}

.readinessList__state{
  flex:0 0 auto;
  min-width:64px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  background:rgba(245,198,107,.14);
  color:#f5d28b;
}

.readinessList li.is-ready .readinessList__state{
  background:rgba(185,243,209,.14);
  color:#b9f3d1;
}

.readinessList strong,
.readinessList small{
  display:block;
}

.readinessList small{
  margin-top:3px;
  color:rgba(234,240,255,.68);
  line-height:1.45;
}

.statusLine{
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(0,0,0,.16);
  color:rgba(234,240,255,.88);
  font-weight:700;
}

.modeGuard{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(245,198,107,.22);
  border-radius:8px;
  background:rgba(245,198,107,.08);
  color:#f5d28b;
  font-size:14px;
  font-weight:800;
  line-height:1.5;
}

.planChangeSummary{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(106, 167, 255, .22);
  border-radius:8px;
  background:rgba(106, 167, 255, .08);
  color:#dbeafe;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}

.entitlementGrid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

.entitlementGrid article{
  min-height:86px;
  padding:11px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(0,0,0,.16);
}

.entitlementGrid span{
  display:block;
  color:rgba(234,240,255,.62);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.entitlementGrid strong{
  display:block;
  margin-top:11px;
  color:#fff;
  font-size:20px;
  line-height:1.1;
}

.advancedPanel{
  margin-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:10px;
}

.advancedPanel summary{
  cursor:pointer;
  color:rgba(234,240,255,.72);
  font-weight:700;
}

.advancedPanel pre{
  max-height:360px;
  overflow:auto;
  padding:12px;
  border-radius:8px;
  background:rgba(0,0,0,.20);
}

.activationSteps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
  margin:18px 0 22px;
  padding:0;
  list-style:none;
}

.activationSteps li{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:rgba(234,240,255,.66);
  font-weight:800;
}

.activationSteps li.is-active{
  border-color:rgba(245,198,107,.45);
  background:rgba(245,198,107,.12);
  color:#f5d28b;
}

.activationSteps li.is-complete{
  border-color:rgba(185,243,209,.38);
  background:rgba(185,243,209,.12);
  color:#b9f3d1;
}

@media (max-width:1023px){
  .workflowGrid,
  .cockpitGrid,
  .readinessList,
  .activationSteps{
    grid-template-columns:1fr;
  }

  .appHero,
  .appPanel__head{
    flex-direction:column;
  }
}

.planConditions{
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid rgba(245, 198, 107, .2);
  border-radius:8px;
  background:rgba(245, 198, 107, .08);
}

.planConditions[hidden]{
  display:none;
}

.planConditions__title{
  margin:0 0 8px;
  color:#f5c66b;
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}

.planConditions ul{
  display:grid;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}

.planConditions li{
  position:relative;
  padding-left:16px;
  color:#cbd5e1;
  font-size:13px;
  line-height:1.45;
}

.planConditions li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:#f5c66b;
  box-shadow:0 0 0 4px rgba(245, 198, 107, .1);
}

.hero__inner{
  grid-template-columns:minmax(0, 1fr);
  padding:clamp(22px, 4vw, 42px);
}

.heroProduct{
  width:min(520px, 100%);
  justify-self:end;
  padding:16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(7, 12, 22, .72);
  box-shadow:0 26px 70px rgba(0,0,0,.38);
  backdrop-filter:blur(12px);
}

.heroProduct__top,
.heroProduct__next{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.heroProduct__top{
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.heroProduct__top span,
.heroProduct__next span,
.heroMetric span{
  color:rgba(234,240,255,.62);
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}

.heroProduct__top strong{
  padding:7px 9px;
  border-radius:8px;
  background:rgba(185,243,209,.14);
  color:#b9f3d1;
  font-size:12px;
}

.heroProduct__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin:12px 0;
}

.heroMetric{
  min-height:104px;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(255,255,255,.05);
}

.heroMetric strong{
  display:block;
  margin-top:10px;
  font-size:20px;
}

.heroMetric small,
.heroProduct__next strong{
  display:block;
  margin-top:5px;
  color:rgba(234,240,255,.72);
  line-height:1.35;
}

.heroProduct__next{
  align-items:flex-start;
  padding:13px;
  border:1px solid rgba(106,167,255,.22);
  border-radius:8px;
  background:rgba(106,167,255,.08);
}

.heroProduct__risk{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.heroProduct__risk span{
  padding:7px 9px;
  border:1px solid rgba(245,198,107,.22);
  border-radius:8px;
  background:rgba(245,198,107,.08);
  color:#f5d28b;
  font-size:12px;
  font-weight:800;
}

.pricingMatrix{
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(0,0,0,.18);
}

.pricingMatrix__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}

.pricingMatrix__head h3{
  margin:0 0 5px;
  font-size:20px;
}

.pricingMatrix__head p{
  margin:0;
  color:rgba(234,240,255,.68);
  line-height:1.5;
}

.pricingMatrix__scroll{
  overflow:auto;
}

.pricingMatrix table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}

.pricingMatrix th,
.pricingMatrix td{
  padding:13px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align:top;
}

.pricingMatrix thead th{
  color:#f5c66b;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0;
}

.pricingMatrix tbody th{
  color:#fff;
  font-weight:800;
}

.pricingMatrix td{
  color:rgba(234,240,255,.78);
}

.section--riskGate{
  padding-top:28px;
}

.riskGate{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:18px;
  align-items:stretch;
}

.riskGate__copy,
.riskGate__grid{
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(255,255,255,.045);
}

.riskGate__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}

.riskGate__grid article{
  min-height:138px;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(0,0,0,.16);
}

.riskGate__grid span{
  color:#f5c66b;
  font-size:12px;
  font-weight:900;
}

.riskGate__grid strong,
.riskGate__grid small{
  display:block;
}

.riskGate__grid strong{
  margin-top:10px;
  font-size:16px;
}

.riskGate__grid small{
  margin-top:7px;
  color:rgba(234,240,255,.68);
  line-height:1.45;
}

.cockpitNav{
  position:sticky;
  top:74px;
  z-index:20;
  display:flex;
  gap:8px;
  overflow:auto;
  margin:0 0 16px;
  padding:8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(7,12,22,.78);
  backdrop-filter:blur(10px);
}

.cockpitNav a{
  flex:0 0 auto;
  padding:9px 12px;
  border-radius:8px;
  color:rgba(234,240,255,.78);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.cockpitNav a:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.nextActionPanel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin:0 0 18px;
  padding:18px;
  border:1px solid rgba(106,167,255,.28);
  border-radius:10px;
  background:
    linear-gradient(135deg, rgba(106,167,255,.14), rgba(185,243,209,.08)),
    rgba(0,0,0,.20);
}

.nextActionPanel__label{
  color:#9fc5ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

.nextActionPanel h2{
  margin:6px 0 5px;
  font-size:clamp(22px, 3vw, 34px);
}

.nextActionPanel p{
  margin:0;
  color:rgba(234,240,255,.76);
  line-height:1.55;
}

.nextActionPanel__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.fileProtocolNotice{
  margin:0 0 18px;
  padding:18px;
  border:1px solid rgba(245,198,107,.34);
  border-radius:10px;
  background:
    linear-gradient(135deg, rgba(245,198,107,.16), rgba(106,167,255,.08)),
    rgba(0,0,0,.22);
}

.fileProtocolNotice__label{
  color:#f5c66b;
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

.fileProtocolNotice h2{
  margin:7px 0 6px;
  font-size:clamp(24px, 3vw, 36px);
}

.fileProtocolNotice p{
  margin:0;
  max-width:760px;
  color:rgba(234,240,255,.78);
  line-height:1.55;
}

.fileProtocolNotice__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.appSection{
  padding:18px 0;
  scroll-margin-top:138px;
}

.formGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px,1fr)) auto auto;
  gap:12px;
  align-items:end;
}

.formGrid--engine{
  grid-template-columns:repeat(3, minmax(180px,1fr));
}

.fieldCompact{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.fieldCompact span{
  color:rgba(234,240,255,.66);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.fieldCompact .input{
  width:100%;
  min-width:0;
}

.onboardingProgress{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}

.onboardingProgress li{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:rgba(234,240,255,.58);
  font-weight:900;
  text-align:center;
}

.onboardingProgress li.is-complete{
  border-color:rgba(185,243,209,.36);
  background:rgba(185,243,209,.12);
  color:#b9f3d1;
}

.onboardingProgress li.is-active{
  border-color:rgba(245,198,107,.45);
  background:rgba(245,198,107,.12);
  color:#f5d28b;
}

.successTrust{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
  margin:0 0 22px;
}

.successTrust div{
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  text-align:left;
}

.successTrust strong,
.successTrust span{
  display:block;
}

.successTrust strong{
  color:#fff;
  font-size:13px;
}

.successTrust span{
  margin-top:5px;
  color:rgba(234,240,255,.68);
  font-size:12px;
  line-height:1.4;
}

.legalHero{
  max-width:780px;
  margin:0 0 18px;
}

.legalHero h1{
  margin-top:10px;
}

.legalPanel{
  padding:18px;
}

.legalPanel p{
  color:rgba(234,240,255,.82);
  line-height:1.65;
}

.legalGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin:16px 0;
}

.legalGrid article{
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  background:rgba(0,0,0,.16);
}

.legalGrid strong,
.legalGrid span{
  display:block;
}

.legalGrid strong{
  color:#fff;
}

.legalGrid span{
  margin-top:6px;
  color:rgba(234,240,255,.68);
  line-height:1.5;
}

@media (min-width: 1024px){
  .hero__inner{
    grid-template-columns:minmax(0, .95fr) minmax(380px, .8fr);
  }
}

@media (max-width: 1023px){
  .heroProduct{
    justify-self:stretch;
  }

  .pricingMatrix__head,
  .riskGate,
  .nextActionPanel{
    grid-template-columns:1fr;
  }

  .riskGate__grid,
  .onboardingProgress,
  .successTrust,
  .legalGrid,
  .entitlementGrid{
    grid-template-columns:1fr;
  }

  .nextActionPanel__actions{
    justify-content:flex-start;
  }

  .formGrid,
  .formGrid--engine{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .heroProduct__grid{
    grid-template-columns:1fr;
  }

  .cockpitNav{
    top:64px;
    margin-left:-16px;
    margin-right:-16px;
    border-left:0;
    border-right:0;
    border-radius:0;
  }

  .nextActionPanel__actions .btn,
  .checkoutRow .btn,
  .checkoutRow .input{
    width:100%;
  }
}

/* ===== Quantor neon intelligence system ===== */
:root{
  --bg:#050713;
  --card:#0d1424e8;
  --txt:#f4f7ff;
  --muted:#aab8d8;
  --accent:#39f4ff;
  --accent2:#9b6cff;
  --stroke2:rgba(91,168,255,.18);
}

html{
  background:#050713;
}

body{
  position:relative;
  isolation:isolate;
  color:var(--txt);
  background:#050713;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}

body::before{
  z-index:-8;
  background:
    linear-gradient(180deg, rgba(4,6,14,.78) 0%, rgba(5,7,19,.92) 42%, #050713 100%),
    url("assets/bg-network.png") center top / cover no-repeat;
  opacity:.38;
  filter:saturate(.74) contrast(1.1) brightness(.58);
}

body::after{
  z-index:-7;
  background:
    linear-gradient(180deg, rgba(4,6,14,.08) 0%, rgba(4,8,22,.52) 52%, rgba(5,7,19,.98) 100%),
    linear-gradient(90deg, transparent 0 14%, rgba(57,244,255,.13) 43%, rgba(155,108,255,.14) 52%, rgba(47,132,255,.11) 62%, transparent 86%),
    linear-gradient(rgba(82,145,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82,145,255,.028) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 86px 86px, 86px 86px;
}

.quantor-video-bg,
.bg-fixed{
  display:none !important;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-width:0;
}

.brand__logo{
  display:none;
}

.brand__mark{
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:block;
  border-radius:14px;
  filter:drop-shadow(0 0 16px rgba(57,244,255,.28));
}

.brand__word{
  color:#fff;
  font-size:22px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  text-shadow:0 0 20px rgba(57,244,255,.22);
}

.topbar{
  background:rgba(4,7,17,.84);
  border-bottom:1px solid rgba(80,156,255,.16);
  box-shadow:0 18px 52px rgba(0,0,0,.38), inset 0 -1px 0 rgba(57,244,255,.05);
  backdrop-filter:blur(16px);
}

.hero__inner{
  overflow:hidden;
  background:
    linear-gradient(105deg, rgba(5,7,19,.96) 0%, rgba(7,13,31,.92) 50%, rgba(6,10,24,.72) 100%);
  border:1px solid rgba(80,156,255,.20);
  box-shadow:0 30px 92px rgba(0,0,0,.46), 0 0 64px rgba(28,103,255,.10);
}

.hero__inner::after{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:18%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(57,244,255,.82), rgba(155,108,255,.70), transparent);
  box-shadow:0 0 34px rgba(57,244,255,.36), 0 0 72px rgba(52,105,255,.24);
  opacity:.8;
}

.hero__bg{
  background:
    linear-gradient(90deg, rgba(5,7,19,.99) 0%, rgba(5,7,19,.90) 44%, rgba(5,7,19,.36) 100%),
    linear-gradient(180deg, rgba(5,7,19,.08) 0%, rgba(5,7,19,.74) 100%),
    url("assets/hero-uantor.png") right center / cover no-repeat !important;
  opacity:.72;
  filter:saturate(.82) contrast(1.08) brightness(.72);
}

.heroLogoTitle{
  display:flex;
  align-items:center;
  gap:16px;
  line-height:.94;
}

.heroLogoTitle img{
  width:clamp(70px, 10vw, 116px);
  height:clamp(70px, 10vw, 116px);
  flex:0 0 auto;
  filter:drop-shadow(0 0 24px rgba(57,244,255,.34));
}

.heroLogoTitle span{
  color:#fff;
  text-shadow:0 0 34px rgba(57,244,255,.16), 0 12px 40px rgba(0,0,0,.42);
}

.section--pricing,
.section--workflow,
.section--riskGate,
.section--faq,
.section--cards,
#security,
.appPanel,
.nextActionPanel,
.checkoutBox,
.success__inner,
.card--legal{
  background-color:rgba(9,15,31,.82);
  border-color:rgba(80,156,255,.16);
  box-shadow:0 22px 66px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(12px);
}

.planCard,
.workflowStep,
.pricingMatrix,
.riskGate__copy,
.riskGate__grid,
.cockpitCard,
.readinessList li,
.onboardingProgress li,
.trustItem,
.faqItem,
.legalGrid article,
.successTrust div,
.entitlementGrid article{
  background-color:rgba(10,18,36,.86);
  border-color:rgba(80,156,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.planCard--featured{
  border-color:rgba(57,244,255,.36);
  box-shadow:
    0 28px 78px rgba(0,0,0,.42),
    0 0 0 1px rgba(155,108,255,.18),
    0 0 46px rgba(57,244,255,.12);
}

.heroProduct,
.nextActionPanel,
.fileProtocolNotice{
  background:rgba(8,15,34,.90);
  border-color:rgba(57,244,255,.22);
}

.hero__eyebrow,
.nextActionPanel__label,
.fileProtocolNotice__label{
  color:#dffbff;
  background:rgba(57,244,255,.09);
  border-color:rgba(57,244,255,.23);
  box-shadow:0 0 18px rgba(57,244,255,.08);
}

.input,
.field input,
.fieldCompact .input,
select.input{
  background:rgba(4,8,18,.90);
  border-color:rgba(80,156,255,.18);
}

.footer__brandMark{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.footer__brandMark img{
  width:46px;
  height:46px;
  border-radius:14px;
  filter:drop-shadow(0 0 18px rgba(57,244,255,.26));
}

.footer__brandMark span{
  color:#fff;
  font-size:24px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
}

.footer__logo{
  display:none;
}

.successBrand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 auto 18px;
}

.successBrand img{
  width:48px;
  height:48px;
  border-radius:14px;
  filter:drop-shadow(0 0 18px rgba(57,244,255,.28));
}

.successBrand span{
  color:#fff;
  font-size:24px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
}

@media (max-width: 768px){
  body::before{
    opacity:.24;
    background:
      linear-gradient(180deg, rgba(4,6,14,.96), rgba(5,7,19,.98)),
      url("assets/bg-network.png") center top / cover no-repeat;
  }

  body::after{
    background-size:100% 100%, 100% 100%, 68px 68px, 68px 68px;
    opacity:.78;
  }

  .hero__bg{
    opacity:.42;
    background:
      linear-gradient(180deg, rgba(5,7,19,.98), rgba(5,7,19,.78)),
      url("assets/hero-uantor.png") top center / cover no-repeat !important;
  }

  .heroLogoTitle{
    gap:10px;
  }

  .brand__word{
    font-size:20px;
  }
}

@media (max-width: 420px){
  .heroLogoTitle{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* ===== Quantor reference style: city robot edition ===== */
body{
  background:#03050d;
}

body::before{
  background:
    linear-gradient(180deg, rgba(3,5,13,.78) 0%, rgba(5,9,24,.88) 44%, #03050d 100%),
    url("assets/bg-network.png") center top / cover no-repeat;
  opacity:.42;
  filter:saturate(.72) contrast(1.16) brightness(.50) blur(.2px);
}

body::after{
  background:
    linear-gradient(180deg, rgba(3,5,13,.18) 0%, rgba(5,11,29,.60) 54%, rgba(3,5,13,.98) 100%),
    linear-gradient(90deg, transparent 0 20%, rgba(57,244,255,.14) 43%, rgba(116,120,255,.16) 50%, rgba(57,244,255,.13) 57%, transparent 82%),
    linear-gradient(178deg, transparent 0 54%, rgba(58,130,255,.09) 55%, transparent 56%),
    linear-gradient(182deg, transparent 0 60%, rgba(58,130,255,.08) 61%, transparent 62%),
    linear-gradient(rgba(104,164,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,164,255,.026) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 92px 92px, 92px 92px;
}

.topbar{
  background:rgba(3,5,13,.78);
  border-bottom-color:rgba(79,153,255,.18);
  box-shadow:0 18px 50px rgba(0,0,0,.38), inset 0 -1px 0 rgba(57,244,255,.05);
}

.brand__mark{
  border-radius:0;
  filter:drop-shadow(0 0 13px rgba(57,244,255,.40)) drop-shadow(0 0 22px rgba(139,92,246,.18));
}

.brand__word{
  font-size:23px;
  letter-spacing:0;
}

.hero{
  min-height:auto;
  padding:0;
  display:block;
  overflow:visible;
}

.hero__inner{
  position:relative;
  min-height:min(790px, 84svh);
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(360px, .82fr);
  align-items:center;
  gap:clamp(28px, 5vw, 74px);
  padding:clamp(60px, 8vw, 106px) clamp(18px, 5vw, 66px);
  overflow:hidden;
  border:0;
  border-radius:0;
  background:linear-gradient(180deg, rgba(3,5,13,.10), rgba(3,5,13,.40));
  box-shadow:none;
}

.hero__inner::before{
  content:"";
  position:absolute;
  inset:-8% -18%;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(3,5,13,.35) 0%, rgba(3,8,21,.12) 48%, rgba(3,5,13,.80) 100%),
    repeating-linear-gradient(92deg, transparent 0 32px, rgba(72,151,255,.045) 33px, transparent 35px);
  opacity:.72;
}

.hero__inner::after{
  left:-20%;
  right:-20%;
  bottom:24%;
  height:2px;
  z-index:1;
  background:linear-gradient(90deg, transparent 9%, rgba(57,244,255,.78) 41%, rgba(151,111,255,.74) 50%, rgba(57,244,255,.62) 59%, transparent 91%);
  box-shadow:0 0 28px rgba(57,244,255,.45), 0 0 92px rgba(62,118,255,.26);
}

.hero__bg{
  inset:0;
  z-index:0;
  opacity:.50;
  filter:none;
  background:
    linear-gradient(180deg, rgba(3,5,13,.05), rgba(3,5,13,.80)),
    linear-gradient(115deg, rgba(3,5,13,.92) 0%, rgba(4,9,25,.72) 43%, rgba(7,20,50,.30) 100%) !important;
}

.hero__copy{
  position:relative;
  z-index:3;
  max-width:680px;
}

.hero__eyebrow{
  color:#c8f6ff;
  background:rgba(32,117,255,.10);
  border-color:rgba(57,244,255,.24);
  box-shadow:0 0 22px rgba(57,244,255,.10);
  text-transform:uppercase;
  letter-spacing:.13em;
}

.heroLogoTitle{
  margin:18px 0 0;
  gap:18px;
}

.heroLogoTitle img{
  width:clamp(82px, 10vw, 134px);
  height:clamp(82px, 10vw, 134px);
}

.heroLogoTitle span{
  font-size:clamp(72px, 9.2vw, 142px);
  font-weight:820;
  line-height:.82;
  letter-spacing:0;
}

.heroTagline{
  margin:18px 0 18px;
  color:#bfefff;
  font-size:clamp(18px, 2.2vw, 31px);
  font-weight:520;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 20px rgba(57,244,255,.26);
}

.hero__copy .lead{
  max-width:58ch;
  color:rgba(231,242,255,.82);
  font-size:clamp(17px, 1.45vw, 21px);
}

.hero__copy .bullets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
  margin-top:24px;
  list-style:none;
}

.hero__copy .bullets li{
  margin:0;
  padding:10px 12px;
  border:1px solid rgba(92,170,255,.20);
  border-radius:8px;
  color:rgba(230,243,255,.84);
  background:rgba(7,15,36,.50);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.btn--cta,
.btn-primary{
  background:linear-gradient(135deg, #39f4ff 0%, #4d83ff 50%, #9b6cff 100%);
  border-color:rgba(159,211,255,.50);
  color:#041021;
  box-shadow:0 15px 36px rgba(47,125,255,.28), 0 0 28px rgba(57,244,255,.14);
}

.heroRobot{
  position:relative;
  z-index:2;
  justify-self:end;
  width:min(43vw, 560px);
  min-width:340px;
  margin:0;
  isolation:isolate;
  animation:quantorAdvisorFloat 7s ease-in-out infinite;
}

.heroRobot::before{
  content:"";
  position:absolute;
  left:-16%;
  right:-8%;
  bottom:6%;
  height:34%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(57,244,255,.22), rgba(57,244,255,0));
  transform:skewY(-8deg);
  opacity:.58;
  filter:blur(16px);
}

.heroRobot::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-18%;
  bottom:15%;
  height:1px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(225,247,255,.78), rgba(57,244,255,.45), transparent);
  box-shadow:0 0 26px rgba(57,244,255,.38);
}

.heroRobot img{
  display:block;
  width:100%;
  height:min(68svh, 680px);
  object-fit:cover;
  object-position:center top;
  border-radius:18px;
  border:1px solid rgba(129,188,255,.18);
  box-shadow:0 36px 90px rgba(0,0,0,.55), 0 0 66px rgba(57,244,255,.12);
  filter:saturate(1.06) contrast(1.04) brightness(.93);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 94%, transparent 100%);
  animation:quantorAdvisorFocus 9s ease-in-out infinite;
  will-change:transform, filter;
}

.heroRobot__visor,
.heroRobot__pocket,
.heroRobot__scan{
  position:absolute;
  z-index:3;
  pointer-events:none;
}

.heroRobot__visor{
  left:48%;
  top:19.5%;
  width:24%;
  height:5.8%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(41,170,255,0), rgba(96,218,255,.94), rgba(204,247,255,.98), rgba(58,151,255,.74), rgba(41,170,255,0));
  filter:blur(4px);
  transform:translateX(-50%) rotate(-3deg);
  mix-blend-mode:screen;
  opacity:.74;
  animation:quantorVisorPulse 2.9s ease-in-out infinite;
}

.heroRobot__pocket{
  right:24%;
  top:45.6%;
  width:14%;
  height:2.2%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(57,244,255,.10), rgba(220,250,255,.96), rgba(70,155,255,.58));
  filter:blur(3px);
  mix-blend-mode:screen;
  opacity:.62;
  animation:quantorPocketPulse 3.8s ease-in-out infinite;
}

.heroRobot__scan{
  left:7%;
  right:7%;
  top:0;
  height:24%;
  border-radius:18px;
  background:linear-gradient(180deg, transparent 0%, rgba(87,197,255,.08) 45%, rgba(203,245,255,.22) 50%, rgba(87,197,255,.08) 55%, transparent 100%);
  filter:blur(1px);
  mix-blend-mode:screen;
  opacity:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 94%, transparent 100%);
  animation:quantorScanSweep 5.8s ease-in-out infinite;
}

.heroRobot__caption,
.heroRobot__chip{
  position:absolute;
  z-index:4;
  min-width:168px;
  padding:12px 14px;
  border:1px solid rgba(93,176,255,.24);
  border-radius:8px;
  background:rgba(5,12,31,.76);
  box-shadow:0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
}

.heroRobot__caption{
  left:-34px;
  bottom:38px;
}

.heroRobot__chip--top{
  right:-22px;
  top:48px;
}

.heroRobot__chip--mid{
  left:-40px;
  top:34%;
}

.heroRobot__chip--low{
  right:-36px;
  bottom:22%;
}

.heroRobot span,
.heroRobot__chip span{
  display:block;
  color:rgba(196,230,255,.68);
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.heroRobot strong,
.heroRobot__chip strong{
  display:block;
  margin-top:5px;
  color:#fff;
  font-size:15px;
  letter-spacing:0;
}

@keyframes quantorAdvisorFloat{
  0%, 100%{ transform:translate3d(0, 0, 0); }
  50%{ transform:translate3d(0, -10px, 0); }
}

@keyframes quantorAdvisorFocus{
  0%, 100%{ filter:saturate(1.06) contrast(1.04) brightness(.93); transform:scale(1); }
  50%{ filter:saturate(1.15) contrast(1.08) brightness(.98); transform:scale(1.012); }
}

@keyframes quantorVisorPulse{
  0%, 100%{ opacity:.48; filter:blur(5px); box-shadow:0 0 18px rgba(57,244,255,.32); }
  44%{ opacity:.96; filter:blur(3px); box-shadow:0 0 34px rgba(57,244,255,.72), 0 0 80px rgba(72,136,255,.42); }
  58%{ opacity:.70; }
}

@keyframes quantorPocketPulse{
  0%, 100%{ opacity:.38; box-shadow:0 0 14px rgba(57,244,255,.22); }
  45%{ opacity:.86; box-shadow:0 0 28px rgba(57,244,255,.50); }
}

@keyframes quantorScanSweep{
  0%, 18%{ opacity:0; transform:translateY(0); }
  28%{ opacity:.72; }
  64%{ opacity:.16; transform:translateY(280%); }
  100%{ opacity:0; transform:translateY(340%); }
}

@media (prefers-reduced-motion: reduce){
  .heroRobot,
  .heroRobot img,
  .heroRobot__visor,
  .heroRobot__pocket,
  .heroRobot__scan{
    animation:none;
  }
}

.section--pricing,
.section--workflow,
.section--riskGate,
.section--faq,
.section--cards,
#security,
.appPanel,
.nextActionPanel,
.checkoutBox,
.success__inner,
.card--legal{
  background-color:rgba(6,12,29,.82);
  border-color:rgba(92,170,255,.17);
}

.planCard,
.workflowStep,
.pricingMatrix,
.riskGate__copy,
.riskGate__grid,
.cockpitCard,
.readinessList li,
.onboardingProgress li,
.trustItem,
.faqItem,
.legalGrid article,
.successTrust div,
.entitlementGrid article{
  background:linear-gradient(180deg, rgba(10,20,44,.88), rgba(6,12,29,.88));
  border-color:rgba(92,170,255,.16);
}

.appHero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(92,170,255,.16);
  background:linear-gradient(105deg, rgba(5,10,26,.94), rgba(6,15,38,.88));
  box-shadow:0 26px 74px rgba(0,0,0,.36);
}

.appHero::after{
  content:"";
  position:absolute;
  right:clamp(10px, 4vw, 56px);
  bottom:-150px;
  width:min(34vw, 360px);
  height:440px;
  pointer-events:none;
  background:url("assets/quantor-robot-advisor.png") center top / cover no-repeat;
  opacity:.20;
  filter:saturate(1.05) contrast(1.05);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 54%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 54%, transparent 100%);
}

.appHero > *{
  position:relative;
  z-index:1;
}

@media (max-width: 1023px){
  .hero{
    min-height:auto;
    padding:0;
  }

  .hero__inner{
    min-height:auto;
    grid-template-columns:1fr;
    padding:56px 18px 38px;
  }

  .heroRobot{
    justify-self:center;
    width:min(92vw, 520px);
    min-width:0;
  }

  .heroRobot img{
    height:min(62svh, 620px);
  }

  .heroRobot__chip--top,
  .heroRobot__chip--mid,
  .heroRobot__chip--low,
  .heroRobot__caption{
    position:relative;
    inset:auto;
    display:inline-block;
    margin:10px 8px 0 0;
  }
}

@media (max-width: 640px){
  .heroLogoTitle span{
    font-size:clamp(58px, 18vw, 84px);
  }

  .heroTagline{
    font-size:16px;
    letter-spacing:.08em;
  }

  .heroRobot img{
    height:auto;
    max-height:560px;
  }

  .appHero::after{
    opacity:.10;
    width:260px;
  }
}

/* ===== Canonical Quantor logo lock ===== */
.brand,
.heroCanonicalLogo,
.footer__brandMark,
.successBrand{
  isolation:isolate;
}

.brand__canonical{
  display:block;
  width:auto;
  height:42px;
  max-width:clamp(132px, 15vw, 220px);
  object-fit:contain;
  border-radius:0;
  background:transparent;
  mix-blend-mode:normal;
  filter:none;
}

.heroCanonicalLogo{
  margin:18px 0 0;
  line-height:0;
}

.heroCanonicalLogo img{
  display:block;
  width:min(100%, clamp(320px, 47vw, 820px));
  height:auto;
  object-fit:contain;
  border-radius:0;
  background:transparent;
  mix-blend-mode:normal;
  filter:none;
}

.footer__brandMark{
  align-items:flex-start;
}

.footer__canonicalLogo{
  display:block;
  width:clamp(190px, 22vw, 320px);
  height:auto;
  object-fit:contain;
  border-radius:0;
  background:transparent;
  mix-blend-mode:normal;
  filter:none;
}

.successBrand img{
  width:min(72vw, 320px);
  height:auto;
  border-radius:0;
  background:transparent;
  mix-blend-mode:normal;
  filter:none;
}

@media (max-width: 640px){
  .brand__canonical{
    width:auto;
    height:38px;
    max-width:146px;
  }

  .heroCanonicalLogo img{
    width:min(100%, 430px);
  }
}