/* ==========================================================================
   A Cuts — landing page styles (theme matched to the plugin UI)
   ========================================================================== */
:root {
  --bg: #08090d;
  --bg-2: #0d0f15;
  --panel: #16181f;
  --panel-2: #1b1e26;
  --field: #050608;
  --border: #262a34;
  --border-2: #323846;
  --text: #eef0f5;
  --muted: #9aa1ae;
  --dim: #6b7280;
  --accent: #3d6df5;
  --accent-2: #5b46e4;
  --grad: linear-gradient(90deg, #3a6cf4 0%, #5a46e6 100%);
  --grad-soft: linear-gradient(135deg, rgba(58,108,244,.18), rgba(90,70,230,.18));
  --active: #1a2540;
  --active-border: #3a5591;
  --yt: #ff3b5c;
  --ig: #e8336d;
  --pin: #e5243b;
  --fb: #2f7cf0;
  --gold: #f2c14e;
  --ok: #34d399;
  --warn: #f59e0b;
  --danger: #f87171;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px -20px rgba(0,0,0,.7);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
svg { width: 1em; height: 1em; flex-shrink: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 820px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.grad-text { background: linear-gradient(90deg, #6f95ff, #8b74ff 60%, #b39bff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .72em 1.25em; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap;
}
.btn svg { font-size: 1.15em; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 8px 28px -10px rgba(76,90,240,.8), inset 0 1px 0 rgba(255,255,255,.15); }
.btn--primary:hover { box-shadow: 0 12px 36px -10px rgba(90,100,250,.95), inset 0 1px 0 rgba(255,255,255,.2); filter: brightness(1.08); }
.btn--ghost { background: var(--panel-2); border-color: var(--border-2); color: var(--text); }
.btn--ghost:hover { background: #22262f; border-color: #3d4453; }
.btn--google { background: #fff; color: #1f2937; }
.btn--google:hover { background: #f1f3f6; }
.btn--sm { padding: .5em .95em; font-size: .88rem; }
.btn--lg { padding: .9em 1.6em; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .65; pointer-events: none; }
.btn.is-loading::after { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.icon-btn {
  width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border-2); transition: background .2s;
}
.icon-btn:hover { background: #242833; }
.icon-btn svg { font-size: 18px; }
.link-btn { color: #8fa9ff; font-weight: 600; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.link-btn[disabled] { color: var(--dim); pointer-events: none; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(8,9,13,.78); backdrop-filter: blur(14px); border-bottom-color: var(--border); }
.nav__inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; }
.brand__logo { width: 30px; height: 30px; }
.nav__links { display: flex; gap: 4px; margin-left: 12px; padding: 4px; border: 1px solid var(--border); background: rgba(22,24,31,.6); border-radius: 12px; }
.nav__links a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-size: .9rem; font-weight: 500; transition: color .2s, background .2s; }
.nav__links a:hover, .nav__links a.is-current { color: var(--text); background: var(--active); }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav__guest { display: flex; gap: 8px; }
.nav__toggle { display: none; }
.nav__user { position: relative; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border-2); }
.user-chip__name { font-size: .88rem; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; flex-shrink: 0; background-size: cover; background-position: center; }
.avatar--lg { width: 56px; height: 56px; font-size: 1.3rem; }
.dot-status { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.dot-status.is-ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 240px; background: var(--panel); border: 1px solid var(--border-2); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); animation: pop .15s ease-out; }
.menu__head { padding: 10px 10px 12px; display: grid; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menu__head span { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; }
.menu button, .menu a { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: .9rem; text-align: left; color: var(--text); }
.menu button:hover, .menu a:hover { background: var(--active); }
.menu svg { color: var(--muted); font-size: 16px; }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 40px; text-align: center; overflow: hidden; }
.hero__glow { position: absolute; inset: -200px 0 auto; height: 900px; pointer-events: none;
  background:
    radial-gradient(600px 380px at 20% 20%, rgba(58,108,244,.22), transparent 70%),
    radial-gradient(560px 380px at 80% 25%, rgba(110,80,240,.20), transparent 70%),
    radial-gradient(900px 500px at 50% 80%, rgba(58,108,244,.10), transparent 70%);
}
.hero__glow::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%); }
.hero__inner { position: relative; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(26,37,64,.7); border: 1px solid var(--active-border); font-size: .85rem; font-weight: 600; color: #c9d5ff; }
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #6f95ff; box-shadow: 0 0 0 4px rgba(111,149,255,.2); animation: pulse 2s infinite; }
.hero__title { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 800; margin: 22px auto 18px; max-width: 900px; letter-spacing: -.035em; }
.hero__sub { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--muted); max-width: 680px; margin: 0 auto; }
.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.hero__note { margin-top: 16px; font-size: .85rem; color: var(--dim); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; }
.hero__note svg { color: var(--ok); }

/* ---------- Demo player ---------- */
.demo { margin: 56px auto 0; max-width: 1060px; scroll-margin-top: 90px; }
.demo__frame { border-radius: 18px; padding: 10px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid var(--border-2); box-shadow: 0 40px 120px -30px rgba(58,108,244,.45), var(--shadow); }
.demo__bar { display: flex; align-items: center; gap: 8px; padding: 10px 4px 2px; }
.demo__bar .icon-btn { width: 34px; height: 34px; }
.demo__segs { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-left: 6px; }
.demo-seg { display: grid; gap: 6px; text-align: left; padding: 2px 0; }
.demo-seg__lbl { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; font-weight: 600; }
.demo-seg__lbl i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.demo-seg.is-current .demo-seg__lbl { color: var(--text); }
.demo-seg__track { height: 4px; border-radius: 4px; background: #2a2e38; overflow: hidden; }
.demo-seg__track b { display: block; height: 100%; width: 0; background: var(--grad); transition: width .5s ease; }
.demo__steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.demo__steps li { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .88rem; color: var(--dim); padding: 10px; border-radius: 10px; border: 1px solid transparent; transition: all .3s; font-weight: 500; }
.demo__steps li span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border-2); font-size: .75rem; font-weight: 700; transition: all .3s; }
.demo__steps li.is-active { color: var(--text); background: var(--active); border-color: var(--active-border); }
.demo__steps li.is-active span { background: var(--grad); border-color: transparent; color: #fff; }
.demo__steps li.is-done span { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.4); color: var(--ok); }

/* Stage — everything scales with container width (cqw) */
.stage {
  container-type: inline-size; position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; text-align: left;
  background: radial-gradient(70% 90% at 15% 0%, #1b2a55 0%, transparent 60%), radial-gradient(60% 80% at 100% 100%, #2a1f5a 0%, transparent 60%), #0b0d14;
  font-size: 1.15cqw; user-select: none;
}
.stage__label { position: absolute; top: 1.4cqw; right: 1.6cqw; z-index: 6; display: flex; align-items: center; gap: .6cqw; font-size: 1cqw; font-weight: 600; color: #cfd6e4; padding: .4cqw .9cqw; border-radius: 99px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.stage__rec { width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--yt); animation: pulse 1.6s infinite; }
.scene { position: absolute; inset: 3.2cqw 3.2cqw 3.2cqw; opacity: 0; transform: scale(.97) translateY(1cqw); transition: opacity .55s ease, transform .55s ease; pointer-events: none; }
.scene.is-active { opacity: 1; transform: none; }
.win { width: 100%; height: 100%; border-radius: 1cqw; overflow: hidden; background: #0f1117; border: 1px solid #2a2f3a; box-shadow: 0 2cqw 5cqw -1cqw rgba(0,0,0,.8); display: flex; flex-direction: column; }
.win__bar { height: 3cqw; display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.2cqw; background: #171a22; border-bottom: 1px solid #262a34; flex-shrink: 0; }
.win__title { font-size: .9cqw; color: var(--muted); }
.lights { display: flex; gap: .5cqw; }
.lights i { width: .85cqw; height: .85cqw; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; }
.btab { display: flex; align-items: center; gap: .6cqw; height: 2.3cqw; margin-top: .7cqw; padding: 0 1.4cqw; background: #0f1117; border-radius: .6cqw .6cqw 0 0; font-size: .9cqw; color: #d9dde6; min-width: 14cqw; }
.btab__fav { width: 1cqw; height: 1cqw; border-radius: .25cqw; background: var(--yt); }
.burl { display: flex; align-items: center; gap: 1.2cqw; padding: .7cqw 1.2cqw; background: #0f1117; border-bottom: 1px solid #22262f; flex-shrink: 0; }
.burl__nav { color: var(--dim); font-size: 1cqw; letter-spacing: .3cqw; }
.burl__field { flex: 1; display: flex; align-items: center; gap: .7cqw; height: 2.4cqw; padding: 0 1cqw; border-radius: 99px; background: #1b1e27; font-size: 1cqw; color: #cfd4de; border: 1px solid transparent; transition: border-color .2s; }
.burl__lock { font-size: .75cqw; opacity: .7; }
.burl__text { padding: .1cqw .2cqw; border-radius: .2cqw; transition: background .2s; white-space: nowrap; overflow: hidden; }
.burl__field.is-focus { border-color: #4b74f7; }
.burl__field.is-sel .burl__text { background: #2f5be0; color: #fff; }
.bpage { flex: 1; position: relative; overflow: hidden; }

/* Page mocks */
.pg-top { display: flex; align-items: center; gap: 1.5cqw; height: 3.6cqw; padding: 0 1.6cqw; }
.pg-logo { display: flex; align-items: center; gap: .5cqw; font-weight: 800; font-size: 1.3cqw; color: #fff; }
.pg-logo svg { width: 1.9cqw; height: 1.9cqw; }
.pg-search { flex: 0 1 34cqw; height: 2.2cqw; border-radius: 99px; border: 1px solid #30343f; background: #121418; margin: 0 auto; }
.pg-av { width: 2cqw; height: 2cqw; border-radius: 50%; background: #3a3f4c; }
.pg-yt { display: grid; grid-template-columns: 1fr 22cqw; gap: 1.6cqw; padding: .4cqw 1.6cqw; }
.pg-yt .thumb { aspect-ratio: 16/9; border-radius: .9cqw; }
.pg-line { height: .9cqw; border-radius: .4cqw; background: #262a33; margin-top: .9cqw; }
.pg-title { color: #f1f3f7; font-weight: 700; font-size: 1.25cqw; margin-top: 1cqw; }
.pg-side { display: grid; gap: 1cqw; align-content: start; }
.pg-side > div { display: grid; grid-template-columns: 9cqw 1fr; gap: .8cqw; }
.pg-side .thumb { aspect-ratio: 16/9; border-radius: .5cqw; }
.pg-ig { display: grid; place-items: center; height: calc(100% - 3.6cqw); }
.pg-ig__reel { position: relative; height: 92%; aspect-ratio: 9/16; border-radius: 1cqw; overflow: hidden; }
.pg-ig__reel .thumb { position: absolute; inset: 0; }
.pg-ig__side { position: absolute; right: .8cqw; bottom: 2cqw; display: grid; gap: 1.2cqw; color: #fff; font-size: 1.4cqw; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.pg-ig__cap { position: absolute; left: 1cqw; bottom: 1.4cqw; right: 4cqw; color: #fff; font-size: .9cqw; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.pg-fb-top { background: #1c1f26; border-bottom: 1px solid #2a2e38; }
.pg-fb-top .pg-logo { color: #4a8df8; font-size: 1.6cqw; letter-spacing: -.05em; }
.pg-fb { display: flex; justify-content: center; padding: 1.4cqw; }
.pg-fb__post { width: 46cqw; background: #1c1f26; border-radius: 1cqw; padding: 1.2cqw; border: 1px solid #2a2e38; }
.pg-fb__head { display: flex; gap: .8cqw; align-items: center; font-size: 1cqw; font-weight: 700; color: #e9ecf2; }
.pg-fb__post .thumb { aspect-ratio: 16/9; border-radius: .6cqw; margin-top: 1cqw; }
.play-badge { position: absolute; inset: 0; display: grid; place-items: center; }
.play-badge i { width: 5cqw; height: 3.5cqw; border-radius: .9cqw; background: rgba(255,0,51,.92); display: grid; place-items: center; color: #fff; }
.play-badge i svg { width: 1.8cqw; height: 1.8cqw; }
.play-badge--round i { width: 4cqw; height: 4cqw; border-radius: 50%; background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.8); }

/* Thumbnails (pure CSS art) */
.thumb { position: relative; overflow: hidden; background: #222; }
.thumb::before, .thumb::after { content: ""; position: absolute; }
.t-sunset { background: linear-gradient(180deg, #ff9a6b 0%, #ff5e7e 45%, #6a3fb3 75%, #1d2050 100%); }
.t-sunset::before { width: 26%; aspect-ratio: 1; border-radius: 50%; background: #ffd27a; left: 37%; top: 30%; box-shadow: 0 0 40px #ffc36b; }
.t-sunset::after { inset: 62% 0 0; background: linear-gradient(170deg, transparent 30%, #1a1b3d 31%), linear-gradient(190deg, #22244a 40%, transparent 41%); }
.t-neon { background: linear-gradient(160deg, #0f0c29, #302b63 50%, #24243e); }
.t-neon::before { inset: 15% 20% 40%; border-radius: 12%; background: linear-gradient(135deg, #ff2fa0, #ff8a00); filter: blur(1px); opacity: .9; }
.t-neon::after { inset: 55% 10% 8%; border-radius: 8%; background: linear-gradient(135deg, #00e0ff, #7a5cff); opacity: .85; }
.t-ocean { background: linear-gradient(180deg, #8ad7ff 0%, #4aa3df 45%, #0d5c8f 70%, #08324f 100%); }
.t-ocean::before { inset: 52% -10% 0; background: repeating-linear-gradient(170deg, rgba(255,255,255,.18) 0 4%, transparent 4% 9%); }
.t-ocean::after { width: 18%; aspect-ratio: 1; border-radius: 50%; background: #fff6c9; right: 18%; top: 14%; opacity: .9; }
.t-studio { background: linear-gradient(135deg, #2b3245, #161a24); }
.t-studio::before { width: 22%; aspect-ratio: 1; border-radius: 50%; background: #c99b7a; left: 39%; top: 18%; }
.t-studio::after { width: 40%; height: 40%; border-radius: 50% 50% 0 0; background: #3d4f7a; left: 30%; bottom: 0; }
.t-broll { background: linear-gradient(135deg, #1e3c2f, #0f2018); }
.t-broll::before { inset: 40% 0 0; background: linear-gradient(160deg, #2f6a4d 40%, #1b4030 41%); }

/* Editor scene */
.editor { flex: 1; display: grid; grid-template-columns: 33cqw 1fr; min-height: 0; }
.ac { background: #0b0c10; border-right: 1px solid #23262f; padding: 1cqw; display: flex; flex-direction: column; gap: .8cqw; font-size: .85cqw; }
.ac__top { display: flex; align-items: center; gap: .8cqw; padding: .5cqw .4cqw; }
.ac__brand { display: flex; align-items: center; gap: .5cqw; font-weight: 800; font-size: 1.05cqw; }
.ac__brand svg { width: 1.7cqw; height: 1.7cqw; }
.ac__seg { display: flex; gap: .2cqw; padding: .25cqw; border-radius: .6cqw; background: #16181f; border: 1px solid #262a34; font-size: .78cqw; }
.ac__seg b { padding: .3cqw .7cqw; border-radius: .45cqw; background: var(--active); border: 1px solid var(--active-border); }
.ac__seg span { padding: .3cqw .6cqw; color: var(--muted); }
.ac__icons { margin-left: auto; display: flex; gap: .4cqw; }
.ac__icons i { width: 2cqw; height: 2cqw; display: grid; place-items: center; border-radius: .5cqw; background: #16181f; border: 1px solid #2a2e38; }
.ac__icons svg { width: 1cqw; height: 1cqw; }
.ac__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3cqw; padding: .35cqw; border-radius: .7cqw; background: #12141a; border: 1px solid #22252e; }
.ac-tab { display: flex; align-items: center; justify-content: center; gap: .4cqw; padding: .55cqw 0; border-radius: .5cqw; font-size: .74cqw; font-weight: 600; color: #c2c7d2; border: 1px solid transparent; transition: all .25s; }
.ac-tab i { width: .5cqw; height: .5cqw; border-radius: 50%; background: var(--c); }
.ac-tab.is-active { background: var(--active); border-color: var(--active-border); color: #fff; }
.ac__card { background: #16181f; border: 1px solid #23262f; border-radius: .7cqw; padding: .9cqw; display: grid; gap: .4cqw; }
.ac__card b { font-size: .92cqw; }
.ac__card small { font-size: .7cqw; color: var(--muted); }
.ac__input { display: flex; align-items: center; gap: .7cqw; height: 2.5cqw; padding: 0 .9cqw; border-radius: .5cqw; background: #000; border: 1px solid #262a34; font-size: .75cqw; color: #e6e9ef; overflow: hidden; white-space: nowrap; transition: border-color .2s, box-shadow .2s; flex: 1; min-width: 0; }
.ac__input svg { width: 1cqw; height: 1cqw; color: var(--muted); }
.ac__input span { overflow: hidden; text-overflow: ellipsis; }
.ac__input .is-ph { color: #5b616d; }
.ac__input.is-focus { border-color: #4b74f7; box-shadow: 0 0 0 .25cqw rgba(75,116,247,.2); }
.ac__input.is-paste span { animation: flash .6s ease; }
.ac__row { display: flex; gap: .6cqw; }
.ac__browse { display: grid; place-items: center; padding: 0 1cqw; border-radius: .5cqw; background: #22252e; border: 1px solid #333846; font-weight: 600; font-size: .75cqw; }
.ac__btn { display: flex; align-items: center; justify-content: center; gap: .6cqw; height: 3cqw; border-radius: .4cqw; background: var(--grad); font-weight: 600; font-size: 1cqw; transition: transform .15s, filter .2s; }
.ac__btn svg { width: 1.2cqw; height: 1.2cqw; }
.ac__btn.is-press { transform: scale(.97); filter: brightness(1.2); }
.ac__status { display: flex; justify-content: space-between; font-size: .75cqw; color: #d5d9e2; padding: .2cqw .2cqw 0; }
.ac__status .ok { color: var(--ok); }
.ac__bar { height: .5cqw; border-radius: 99px; background: #2a2d36; overflow: hidden; }
.ac__bar i { display: block; height: 100%; width: 0; background: var(--grad); }

.nle { display: grid; grid-template-rows: 1fr auto; min-height: 0; background: #13151b; }
.nle__top { display: grid; grid-template-columns: 1fr 1.25fr; min-height: 0; border-bottom: 1px solid #23262f; }
.pane-title { font-size: .75cqw; color: var(--muted); padding: .6cqw .9cqw; border-bottom: 1px solid #23262f; font-weight: 600; }
.bin { border-right: 1px solid #23262f; min-width: 0; overflow: hidden; }
.bin__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8cqw; padding: .9cqw; }
.bin-item { display: grid; gap: .3cqw; font-size: .62cqw; color: #c5cad4; min-width: 0; }
.bin-item .thumb { aspect-ratio: 16/9; border-radius: .4cqw; border: 1px solid #2c303b; }
.bin-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-item em { position: absolute; right: .3cqw; bottom: .3cqw; font-style: normal; font-size: .55cqw; background: rgba(0,0,0,.7); padding: 0 .3cqw; border-radius: .2cqw; z-index: 1; color: #fff; }
.bin-item.is-new { animation: dropIn .6s cubic-bezier(.2,1.4,.4,1) both; }
.bin-item.is-new .thumb { border-color: var(--accent); box-shadow: 0 0 0 .2cqw rgba(61,109,245,.35); }
.monitor { display: flex; flex-direction: column; min-width: 0; }
.monitor__screen { flex: 1; margin: .8cqw; border-radius: .3cqw; overflow: hidden; background: #000; display: grid; }
.monitor__screen .thumb { width: 100%; height: 100%; animation: fadeIn .5s; }
.timeline { position: relative; padding: .4cqw .8cqw .9cqw; display: grid; gap: .45cqw; }
.timeline__ruler { display: flex; justify-content: space-between; margin-left: 2.6cqw; font-size: .58cqw; color: var(--dim); border-bottom: 1px solid #23262f; padding-bottom: .3cqw; }
.track { display: grid; grid-template-columns: 2.2cqw 1fr; gap: .4cqw; align-items: center; }
.track__lbl { font-size: .62cqw; color: var(--muted); font-weight: 700; text-align: center; background: #1b1e26; border-radius: .3cqw; padding: .3cqw 0; }
.track__lane { position: relative; height: 2.2cqw; background: #0e1015; border-radius: .3cqw; }
.track--a .track__lane { height: 1.6cqw; }
.clip { position: absolute; top: .15cqw; bottom: .15cqw; border-radius: .3cqw; font-style: normal; font-size: .58cqw; color: #fff; padding: .2cqw .4cqw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #3a62c9; border: 1px solid rgba(255,255,255,.18); }
.clip--title { background: #8a5cd6; }
.clip--a { background: #1f8a6b; }
.clip.is-new { animation: clipIn .6s cubic-bezier(.2,1.3,.4,1) both; box-shadow: 0 0 0 .15cqw #fff; }
.playhead { position: absolute; top: .2cqw; bottom: .5cqw; left: calc(.8cqw + 2.6cqw); width: 2px; background: #ff4d6d; transition: left .8s ease; }
.playhead::before { content: ""; position: absolute; top: 0; left: -.4cqw; border: .4cqw solid transparent; border-top-color: #ff4d6d; }

/* Overlays */
.cursor { position: absolute; left: 60%; top: 70%; width: 2.2cqw; height: 2.2cqw; z-index: 10; transition-property: left, top; transition-timing-function: cubic-bezier(.45,.05,.25,1); transition-duration: .7s; filter: drop-shadow(0 .3cqw .5cqw rgba(0,0,0,.5)); margin: -.3cqw 0 0 -.4cqw; }
.cursor svg { width: 100%; height: 100%; }
.cursor::after { content: ""; position: absolute; left: .2cqw; top: .1cqw; width: 3cqw; height: 3cqw; margin: -1.5cqw; border-radius: 50%; border: 2px solid rgba(111,149,255,.9); opacity: 0; transform: scale(.3); }
.cursor.is-click::after { animation: ripple .5s ease-out; }
.keys { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.8); display: flex; align-items: center; gap: 1cqw; z-index: 9; opacity: 0; transition: all .25s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
.keys.is-show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.keys kbd { font-family: var(--font); min-width: 6cqw; padding: 1.2cqw 1.6cqw; border-radius: 1cqw; background: rgba(22,24,31,.92); border: 1px solid #3a4050; border-bottom-width: .45cqw; font-size: 2.4cqw; font-weight: 700; text-align: center; color: #fff; box-shadow: 0 1.5cqw 4cqw rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.keys b { font-size: 2.2cqw; color: var(--muted); }
.stage__toast { position: absolute; left: 50%; bottom: 4.5cqw; transform: translate(-50%, 2cqw); display: flex; gap: .7cqw; align-items: center; padding: .9cqw 1.6cqw; border-radius: 99px; background: rgba(22,24,31,.95); border: 1px solid #3a4050; font-size: 1.1cqw; font-weight: 600; z-index: 9; opacity: 0; transition: all .35s cubic-bezier(.2,1.3,.4,1); }
.stage__toast svg { width: 1.3cqw; height: 1.3cqw; color: var(--ok); }
.stage__toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.stage.is-paused *, .stage.is-paused *::before, .stage.is-paused *::after { animation-play-state: paused !important; }

/* ---------- Platforms strip ---------- */
.platforms { padding: 40px 0 24px; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fa9ff; margin-bottom: 12px; }
.platforms__list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.platforms__list li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); font-weight: 700; transition: border-color .25s, transform .25s; }
.platforms__list li:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-2px); }
.platforms__list svg { font-size: 26px; color: var(--c); }
.platforms__list small { display: block; margin-left: auto; color: var(--dim); font-weight: 500; font-size: .78rem; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(22,24,31,.55) 15%, rgba(22,24,31,.55) 85%, transparent); }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.section__head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; }
.lead { color: var(--muted); font-size: 1.08rem; margin-top: 14px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.step { padding: 28px; position: relative; overflow: hidden; }
.step__num { position: absolute; right: 20px; top: 14px; font-size: 3.2rem; font-weight: 800; color: rgba(255,255,255,.04); letter-spacing: -.04em; }
.step__icon, .feature__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--active-border); color: #9db4ff; margin-bottom: 18px; }
.step__icon svg, .feature__icon svg { font-size: 22px; }
.step h3, .feature h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step p, .feature p { color: var(--muted); font-size: .95rem; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { padding: 26px; transition: border-color .25s, transform .25s, background .25s; }
.feature:hover { border-color: var(--active-border); transform: translateY(-3px); background: var(--panel-2); }

/* ---------- Stats ---------- */
.stats { padding: 24px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--bg-2); padding: 30px 20px; text-align: center; }
.stat b { display: block; font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); font-size: .9rem; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.review { display: flex; flex-direction: column; overflow: hidden; transition: transform .25s, border-color .25s; }
.review:hover { transform: translateY(-4px); border-color: var(--active-border); }
.review__media { position: relative; aspect-ratio: 9 / 13; background: var(--grad-soft); cursor: pointer; overflow: hidden; border: 0; padding: 0; width: 100%; display: block; }
.review__media video, .review__media img { width: 100%; height: 100%; object-fit: cover; }
.review__ph { position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; padding-top: 24%; background:
  radial-gradient(circle at 30% 20%, rgba(111,149,255,.35), transparent 60%), radial-gradient(circle at 80% 90%, rgba(139,116,255,.3), transparent 60%), #141824; }
.review__initials { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); }
.review__play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.95); color: #111; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform .2s; }
.review__play svg { font-size: 22px; margin-left: 3px; }
.review__ph ~ .review__play { top: 68%; }
.review__media:hover .review__play { transform: scale(1.1); }
.review__soon { position: absolute; left: 10px; top: 10px; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.55); color: var(--muted); }
.review__body { padding: 16px; display: grid; gap: 8px; flex: 1; align-content: start; }
.stars { display: flex; gap: 2px; color: var(--gold); font-size: 14px; }
.review__quote { font-size: .88rem; color: #cfd4de; }
.review__who { margin-top: auto; padding-top: 8px; }
.review__who b { display: block; font-size: .9rem; }
.review__who span { font-size: .78rem; color: var(--dim); }

/* ---------- Pricing ---------- */
.billing { display: inline-flex; gap: 4px; padding: 4px; margin-top: 26px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.billing__opt { padding: 8px 18px; border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--muted); border: 1px solid transparent; display: flex; align-items: center; gap: 8px; }
.billing__opt.is-active { background: var(--active); border-color: var(--active-border); color: #fff; }
.save-badge { font-size: .7rem; padding: 2px 7px; border-radius: 99px; background: rgba(52,211,153,.15); color: var(--ok); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 22px; }
.plan { padding: 32px; position: relative; display: flex; flex-direction: column; }
.plan h3 { font-size: 1.3rem; }
.plan__desc { color: var(--muted); font-size: .92rem; margin-top: 6px; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin: 24px 0 4px; }
.plan__amt { font-size: 3rem; font-weight: 800; letter-spacing: -.04em; }
.plan__per { color: var(--muted); }
.plan__note { color: var(--dim); font-size: .82rem; margin-bottom: 20px; min-height: 1.3em; }
.plan > .btn { margin-top: auto; }
.plan__list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; font-size: .93rem; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.plan__list svg { color: var(--ok); margin-top: 4px; }
.plan--pro { background: linear-gradient(180deg, rgba(26,37,64,.75), var(--panel) 60%); border-color: var(--active-border); box-shadow: 0 30px 80px -30px rgba(58,108,244,.5); }
.plan--pro::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan__badge { position: absolute; top: -13px; right: 24px; padding: 4px 12px; border-radius: 99px; background: var(--grad); font-size: .75rem; font-weight: 700; }
.plan--pro .plan__list svg { color: #8fa9ff; }
.guarantee { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; color: var(--muted); font-size: .9rem; text-align: center; }
.guarantee svg { color: var(--ok); font-size: 18px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; transition: border-color .2s, background .2s; }
.faq details[open] { border-color: var(--active-border); background: var(--panel-2); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--muted); transition: transform .25s; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); color: #8fa9ff; }
.faq details p { padding: 0 22px 20px; color: var(--muted); }

/* ---------- CTA ---------- */
.cta { padding: 40px 0 100px; }
.cta__box { text-align: center; padding: 64px 28px; border-radius: 22px; position: relative; overflow: hidden; border: 1px solid var(--active-border);
  background: radial-gradient(500px 300px at 20% 0%, rgba(58,108,244,.35), transparent 70%), radial-gradient(500px 300px at 80% 100%, rgba(110,80,240,.35), transparent 70%), var(--panel); }
.cta__logo { width: 52px; height: 52px; margin: 0 auto 18px; }
.cta__box h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800; }
.cta__box p { color: var(--muted); margin-top: 12px; font-size: 1.05rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 56px 0 28px; background: var(--bg-2); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer__brand p { color: var(--muted); font-size: .9rem; margin: 14px 0 18px; max-width: 300px; }
.footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin-bottom: 14px; }
.footer__grid > div:not(.footer__brand) { display: grid; gap: 10px; align-content: start; }
.footer__grid a:not(.brand) { color: var(--muted); font-size: .92rem; transition: color .2s; }
.footer__grid a:hover { color: var(--text); }
.socials { display: flex; gap: 8px; }
.socials a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
.socials svg { font-size: 17px; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--dim); font-size: .85rem; }

/* ---------- Modal ---------- */
.modal { border: 0; padding: 0; background: transparent; color: var(--text); max-width: calc(100vw - 32px); width: 440px; max-height: calc(100dvh - 32px); }
.modal::backdrop { background: rgba(4,5,8,.72); backdrop-filter: blur(6px); }
.modal[open] { animation: pop .22s ease-out; }
.modal__box { position: relative; background: var(--panel); border: 1px solid var(--border-2); border-radius: 18px; padding: 32px 30px 26px; box-shadow: var(--shadow); }
.modal__close { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; }
.modal__logo { width: 40px; height: 40px; margin-bottom: 14px; }
.view h2 { font-size: 1.5rem; font-weight: 800; }
.view > .muted { margin: 6px 0 22px; font-size: .93rem; }
.demo-banner { font-size: .8rem; color: #fcd58a; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3); padding: 9px 12px; border-radius: 10px; margin: 0 36px 18px 0; }
.demo-banner code { font-size: .78rem; color: #fff; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: .8rem; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-2); }
form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
.field > span { display: flex; justify-content: space-between; }
.field__link { color: #8fa9ff; font-weight: 500; }
.field input, .pw input { width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; background: var(--field); border: 1px solid var(--border-2); color: var(--text); font: inherit; font-weight: 400; font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder { color: #565c68; }
.field input:focus { outline: none; border-color: #4b74f7; box-shadow: 0 0 0 3px rgba(75,116,247,.2); }
.field input.is-invalid { border-color: var(--danger); }
.pw { position: relative; }
.pw input { padding-right: 64px; }
.pw__toggle { position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 10px; border-radius: 7px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.pw__toggle:hover { background: var(--panel-2); color: var(--text); }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.strength i { height: 4px; border-radius: 4px; background: var(--border-2); transition: background .25s; }
.strength[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.strength[data-score="2"] i:nth-child(-n+2) { background: var(--warn); }
.strength[data-score="3"] i:nth-child(-n+3) { background: #a3e635; }
.strength[data-score="4"] i { background: var(--ok); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); }
.check input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; }
.check a { color: #8fa9ff; }
.form-error { color: var(--danger); font-size: .85rem; min-height: 0; }
.form-error:empty, .form-ok:empty { display: none; }
.form-ok { color: var(--ok); font-size: .85rem; }
.switch { text-align: center; margin-top: 18px; font-size: .88rem; color: var(--muted); }
.switch a { color: #8fa9ff; font-weight: 600; }
.mail-icon { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--active-border); color: #9db4ff; margin-bottom: 16px; }
.mail-icon svg { font-size: 28px; }
.mail-icon--ok { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.4); color: var(--ok); }
.verify-steps { margin: 0 0 18px; padding-left: 20px; color: var(--muted); font-size: .9rem; display: grid; gap: 4px; }
#verifyLive { display: grid; gap: 10px; }
.waiting { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--dim); font-size: .82rem; margin-top: 4px; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.inbox { border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.inbox__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel-2); font-size: .8rem; font-weight: 600; }
.inbox__head small { color: var(--dim); font-weight: 400; }
.inbox__mail { padding: 12px; font-size: .88rem; color: var(--muted); }
.inbox__mail code { color: #fff; font-size: 1rem; letter-spacing: .15em; background: var(--active); padding: 2px 8px; border-radius: 6px; }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp input { height: 54px; text-align: center; font-size: 1.4rem; font-weight: 700; border-radius: 10px; background: var(--field); border: 1px solid var(--border-2); color: var(--text); width: 100%; min-width: 0; }
.otp input:focus { outline: none; border-color: #4b74f7; box-shadow: 0 0 0 3px rgba(75,116,247,.2); }
.acc__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.acc__head h2 { font-size: 1.3rem; }
.acc__head .muted { font-size: .9rem; word-break: break-all; }
.acc__list { margin: 0 0 20px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.acc__list div { display: flex; justify-content: space-between; padding: 12px 14px; font-size: .9rem; }
.acc__list div + div { border-top: 1px solid var(--border); }
.acc__list dt { color: var(--muted); }
.acc__list dd { margin: 0; font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 2px 10px; border-radius: 99px; }
.badge--ok { background: rgba(52,211,153,.12); color: var(--ok); }
.badge--warn { background: rgba(245,158,11,.12); color: var(--warn); }
.badge--pro { background: var(--grad); color: #fff; }
.view[data-view="account"] .btn + .btn, .view[data-view="account"] #accVerify + .btn { margin-top: 10px; }

.modal--video { width: min(960px, calc(100vw - 32px)); }
.modal--video .modal__box { padding: 0; overflow: hidden; background: #000; }
.modal--video video { width: 100%; max-height: calc(100dvh - 120px); background: #000; }
.modal--video .modal__close { z-index: 2; background: rgba(0,0,0,.6); }
.video-meta { padding: 14px 18px; background: var(--panel); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.video-meta span { color: var(--muted); font-size: .88rem; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; inset: auto 20px 20px auto; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; z-index: 200; display: grid; gap: 10px; max-width: min(380px, calc(100vw - 40px)); }
.toasts:empty { display: none; }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border-2); box-shadow: var(--shadow); font-size: .9rem; animation: toastIn .3s cubic-bezier(.2,1.3,.4,1); }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: #8fa9ff; }
.toast--ok::before { background: var(--ok); }
.toast--err::before { background: var(--danger); }
.toast.is-out { animation: toastOut .25s ease forwards; }

/* ==========================================================================
   Plans, purchase pages, dashboard, thank-you, policy
   ========================================================================== */
.small { font-size: .85rem; }
svg.ok { color: var(--ok); }
svg.no { color: var(--dim); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--active); border: 1px solid var(--active-border); color: #c9d5ff; letter-spacing: .01em; vertical-align: middle; white-space: nowrap; }
.tag--pro { background: var(--grad); border-color: transparent; color: #fff; }
.tag--warn { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.35); color: #fcd58a; }
.badge--err { background: rgba(248,113,113,.12); color: var(--danger); }
.section--reviews { padding-top: 64px; }
#how .platforms__list { margin-top: 28px; }

/* Pricing */
.plan__panels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.compare { margin: 40px auto 0; max-width: 822px; border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; background: var(--panel); }
.compare__table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
.compare__table th, .compare__table td { padding: 13px 18px; text-align: center; border-bottom: 1px solid var(--border); }
.compare__table th[scope="row"], .compare__table thead th:first-child { text-align: left; font-weight: 500; color: #cfd4de; }
.compare__table thead th { font-weight: 700; vertical-align: bottom; background: var(--panel-2); }
.compare__table thead th span { display: block; font-size: 1rem; }
.compare__table thead th small { display: block; color: var(--muted); font-weight: 500; }
.compare__table thead th:first-child { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.compare__table td svg { font-size: 18px; }
.compare__table .is-pro { background: rgba(58,108,244,.07); }
.compare__table thead .is-pro { background: rgba(58,108,244,.16); color: #fff; }
.compare__table tfoot td, .compare__table tfoot th { border-bottom: 0; padding: 16px 18px; }
.compare__table tbody tr:hover th, .compare__table tbody tr:hover td { background: rgba(255,255,255,.02); }
.guarantee a { color: #8fa9ff; font-weight: 600; }
.feature--pro { border-color: var(--active-border); background: linear-gradient(180deg, rgba(26,37,64,.55), var(--panel)); }
.feature h3 .tag { margin-left: 4px; }
.policy-card { display: flex; gap: 18px; align-items: center; padding: 22px 24px; margin-top: 22px; border-color: var(--active-border); transition: transform .2s, background .2s; }
.policy-card:hover { transform: translateY(-2px); background: var(--panel-2); }
.policy-card .feature__icon { margin: 0; flex-shrink: 0; }
.policy-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.policy-card p { color: var(--muted); font-size: .92rem; }
.policy-card__arrow { margin-left: auto; font-size: 22px; color: #8fa9ff; flex-shrink: 0; }

/* Inner pages */
.page { position: relative; padding: 40px 0 88px; min-height: 70vh; overflow: hidden; }
.page__glow { position: absolute; inset: -260px 0 auto; height: 640px; pointer-events: none; z-index: -1;
  background: radial-gradient(520px 320px at 15% 30%, rgba(58,108,244,.2), transparent 70%), radial-gradient(520px 320px at 85% 25%, rgba(110,80,240,.18), transparent 70%); }
.container--mid { max-width: 1000px; }
.crumbs { display: flex; gap: 8px; font-size: .85rem; color: var(--dim); margin-bottom: 22px; }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--text); }
.crumbs b { color: var(--text); font-weight: 600; }

/* Buy page */
.buy { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.buy__info h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -.03em; }
.buy__info .lead { margin-top: 10px; max-width: 560px; }
.buy__price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 28px; }
.buy__price span { font-size: 3.2rem; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(90deg, #fff, #c9d5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.buy__price small { color: var(--muted); font-size: 1.05rem; }
.buy__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 32px; }
.buy__lists--one { grid-template-columns: 1fr; }
.buy__lists--one .incl { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.buy__lists h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin-bottom: 12px; }
.incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
.incl li { display: flex; gap: 10px; align-items: flex-start; }
.incl svg { margin-top: 4px; font-size: 16px; }
.incl--no li { color: var(--dim); }
.buy__upsell { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .88rem; font-weight: 600; color: #8fa9ff; }
.buy__checkout { padding: 26px; position: sticky; top: 88px; box-shadow: 0 30px 80px -30px rgba(58,108,244,.45); border-color: var(--active-border); }
.buy__checkhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.buy__checkhead h2 { font-size: 1.25rem; }
.notice { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; padding: 10px 12px; border-radius: 10px; background: var(--active); border: 1px solid var(--active-border); margin-bottom: 14px; color: #c9d5ff; }
.notice svg { margin-top: 3px; flex-shrink: 0; }
.summary { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 18px; background: var(--bg-2); }
.summary__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; font-size: .92rem; }
.summary__row + .summary__row { border-top: 1px solid var(--border); }
.summary__muted { color: var(--muted); font-size: .85rem; }
.summary__total b { font-size: 1.25rem; }
.field small.muted { font-weight: 400; }
.assure { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: .83rem; color: var(--muted); }
.assure li { display: flex; gap: 8px; align-items: flex-start; }
.assure svg { margin-top: 3px; color: #8fa9ff; }
.switch-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .86rem; color: var(--muted); }
.switch-plan b { color: #8fa9ff; }
.switch-plan svg { color: #8fa9ff; }

/* Panel mock (buy pages) */
.mock { border-radius: 14px; background: #0b0c10; border: 1px solid var(--border-2); padding: 14px; display: grid; gap: 10px; max-width: 520px; box-shadow: var(--shadow); font-size: .82rem; }
.mock__top { display: flex; align-items: center; gap: 8px; }
.mock__logo { width: 22px; height: 22px; }
.mock__seg { margin-left: auto; display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border); font-size: .75rem; }
.mock__seg > * { padding: 4px 10px; border-radius: 7px; display: inline-flex; align-items: center; gap: 4px; }
.mock__seg b { background: var(--active); border: 1px solid var(--active-border); }
.mock__seg span { color: var(--muted); }
.mock__seg .is-locked { color: var(--dim); }
.mock__tabs, .mock__sites { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 10px; background: #12141a; border: 1px solid #22252e; }
.mock__tabs span, .mock__sites span { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 0; border-radius: 7px; font-size: .72rem; font-weight: 600; color: #c2c7d2; border: 1px solid transparent; }
.mock__tabs i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.mock__sites span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.mock__tabs .is-on, .mock__sites .is-on { background: var(--active); border-color: var(--active-border); color: #fff; }
.mock__card { background: var(--panel); border: 1px solid #23262f; border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
.mock__input, .mock__url { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 8px; background: #000; border: 1px solid var(--border); color: #6b7280; font-size: .75rem; overflow: hidden; white-space: nowrap; }
.mock__url { color: #cfd4de; border-radius: 99px; background: #1b1e27; border-color: transparent; }
.mock__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border-radius: 8px; background: var(--grad); font-weight: 600; }
.mock__browser { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid #23262f; }
.mock__content { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.mock__content .thumb { aspect-ratio: 9/12; border-radius: 8px; }
.mock__lines { display: grid; gap: 8px; align-content: start; padding-top: 4px; }
.mock__lines i { height: 9px; border-radius: 4px; background: #262a33; }
.mock__lines i + i { width: 60%; }
.mock__dl { display: flex; gap: 8px; }
.mock__dl span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 8px; background: var(--grad); font-weight: 600; }
.mock__dl .ghost { background: #22252e; border: 1px solid #333846; flex: .7; }
.mock__cap { color: var(--muted); font-size: .78rem; text-align: center; }

/* Test checkout sheet */
.paysheet { width: 400px; }
.paysheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.paysheet__pp { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.paysheet .muted { font-size: .88rem; margin-bottom: 16px; }
.paysheet__sum { margin: 0 0 18px; border: 1px solid var(--border); border-radius: 12px; }
.paysheet__sum div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: .9rem; }
.paysheet__sum div + div { border-top: 1px solid var(--border); }
.paysheet__sum dt { color: var(--muted); } .paysheet__sum dd { margin: 0; font-weight: 600; text-align: right; word-break: break-all; }
.paysheet__total dd { font-size: 1.15rem; }
.paysheet .btn + .btn { margin-top: 10px; }

/* States */
.state { text-align: center; padding: 56px 28px; display: grid; justify-items: center; gap: 12px; max-width: 620px; margin: 24px auto; }
.state h1 { font-size: 1.6rem; font-weight: 800; }
.state p { max-width: 460px; }
.state__icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--active-border); color: #9db4ff; }
.state__icon svg { font-size: 28px; }
.state__icon--err { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.35); color: var(--danger); }
.state__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.spinner--lg { width: 34px; height: 34px; border-width: 3px; }
.state a:not(.btn) { color: #8fa9ff; }

/* Thank-you */
.ty__hero { text-align: center; margin: 16px 0 36px; }
.ty__check { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.45); color: var(--ok); box-shadow: 0 0 0 10px rgba(52,211,153,.05); animation: pop .5s cubic-bezier(.2,1.4,.4,1); }
.ty__check svg { font-size: 36px; }
.ty__hero .eyebrow { display: inline-flex; gap: 8px; align-items: center; }
.ty__hero h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; }
.ty__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
.ty__card { padding: 26px; }
.ty__card h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ty__card h2 svg { color: #8fa9ff; }
.keybox { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: var(--field); border: 1px dashed var(--active-border); margin-bottom: 18px; }
.keybox code { font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; color: #fff; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; word-break: break-all; }
.keybox--sm { padding: 8px 8px 8px 14px; margin-bottom: 14px; }
.keybox--sm code { font-size: 1rem; }
.keybox--sm .icon-btn { width: 32px; height: 32px; flex-shrink: 0; }
.kv { margin: 0; display: grid; }
.kv div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; font-size: .9rem; }
.kv div + div { border-top: 1px solid var(--border); }
.kv dt { color: var(--muted); flex-shrink: 0; }
.kv dd { margin: 0; font-weight: 600; text-align: right; display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-width: 0; word-break: break-word; }
.kv code { font-size: .82rem; color: #cfd4de; }
.ty__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.ty__actions .btn { flex: 1 1 220px; }
.ty__mail { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: .85rem; color: var(--muted); }
.ty__mail svg { margin-top: 3px; flex-shrink: 0; }
.act-steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.act-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: .92rem; color: #cfd4de; }
.act-steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); font-weight: 700; font-size: .8rem; color: #fff; }
.act-steps code { font-size: .8rem; background: var(--active); padding: 1px 6px; border-radius: 5px; }
.ty__card a[data-support-email], .center a, .muted a { color: #8fa9ff; }

/* Dashboard */
.dash-head { display: flex; align-items: center; gap: 18px; padding: 24px; flex-wrap: wrap; }
.avatar--xl { width: 64px; height: 64px; font-size: 1.4rem; }
.dash-head__who { flex: 1; min-width: 200px; }
.dash-head__who h1 { font-size: 1.5rem; font-weight: 800; }
.dash-head__who p { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; word-break: break-all; }
.dash-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-sec { margin-top: 34px; }
.dash-sec__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-sec__head h2 { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.dash-sec__head h2 svg { color: #8fa9ff; }
.lic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.lic { padding: 20px; }
.lic--pro { border-color: var(--active-border); background: linear-gradient(180deg, rgba(26,37,64,.6), var(--panel) 55%); }
.lic__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.lic__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.table-wrap { overflow-x: auto; }
.orders { width: 100%; border-collapse: collapse; font-size: .88rem; }
.orders th { text-align: left; font-weight: 600; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; background: var(--panel-2); }
.orders th, .orders td { padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.orders tr:last-child td { border-bottom: 0; }
.orders code { font-size: .8rem; color: #cfd4de; }
.empty { padding: 26px; text-align: center; }
.empty .state__actions { margin-top: 14px; }

/* Policy page */
.policy-hero { margin: 8px 0 28px; }
.policy-hero h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; }
.policy-hero .lead { margin: 12px 0 10px; }
.policy-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 36px; }
.policy-summary .card { padding: 18px; display: grid; gap: 2px; }
.policy-summary b { font-size: 1.6rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.policy-summary span { color: var(--muted); font-size: .85rem; }
.prose { color: #cfd4de; }
.prose h2 { font-size: 1.25rem; color: var(--text); margin: 34px 0 12px; scroll-margin-top: 90px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: #8fa9ff; font-weight: 600; }
.prose code { font-size: .85rem; background: var(--active); padding: 1px 6px; border-radius: 5px; color: #fff; }
.prose b { color: var(--text); }
.cta__box--sm { padding: 40px 24px; margin-top: 44px; }
.contact-cards { margin-bottom: 40px; }
.contact-cards .feature p + p { margin-top: 8px; }
.contact-cards a[data-support-email] { color: #8fa9ff; font-weight: 600; word-break: break-all; }
.cta__box--sm h2 { font-size: 1.6rem; }

@media (max-width: 960px) {
  .buy { grid-template-columns: minmax(0, 1fr); }
  .buy__checkout { position: static; }
  .ty__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .buy__lists { grid-template-columns: 1fr; }
  .buy__lists--one .incl { grid-template-columns: 1fr; }
  .mock { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .mock__top { flex-wrap: wrap; }
  .mock__tabs span, .mock__sites span { min-width: 0; overflow: hidden; font-size: .62rem; gap: 3px; }
  .mock__url, .mock__input { min-width: 0; }
  .policy-summary { grid-template-columns: 1fr; }
  .keybox code { font-size: 1.05rem; }
  .orders thead { display: none; }
  .orders, .orders tbody, .orders tr, .orders td { display: block; width: 100%; }
  .orders tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .orders td { border: 0; padding: 5px 16px; display: flex; justify-content: space-between; gap: 12px; white-space: normal; }
  .orders td[data-l]::before { content: attr(data-l); color: var(--muted); font-size: .8rem; }
  .policy-card { flex-wrap: wrap; }
  .dash-head__actions { width: 100%; }
  .dash-head__actions .btn { flex: 1; }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes ripple { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes flash { 0% { background: rgba(75,116,247,.6); } 100% { background: transparent; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-1.5cqw) scale(.85); } }
@keyframes clipIn { from { opacity: 0; transform: translateY(-2cqw); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* ---------- Conversion upgrade: trial CTA, trust strip, with/without, trial popup ---------- */
.hero__sub b { color: var(--text); font-weight: 600; white-space: nowrap; }
.hero__flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin: 14px auto 0; max-width: 680px; font-size: .95rem; color: #c9d5ff; font-weight: 600; }
.hero__flow svg { width: 15px; height: 15px; color: #8fa9ff; flex-shrink: 0; }
.demo__head { text-align: center; margin: 0 auto 18px; }
.demo__head h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; }
.demo__head p { color: var(--muted); font-size: .95rem; margin-top: 4px; }
.trust { list-style: none; padding: 0; margin: 34px auto 0; max-width: 1060px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); color: #cfd4de; font-size: .86rem; font-weight: 600; }
.trust svg { width: 16px; height: 16px; color: var(--ok); flex-shrink: 0; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.vs { margin: 28px auto 0; max-width: 860px; padding: 22px 24px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.vs__title { text-align: center; font-size: 1.1rem; font-weight: 800; margin-bottom: 14px; }
.vs__grid { display: grid; gap: 10px; }
.vs__row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--field); }
.vs__row--with { border-color: var(--active-border); background: var(--active); }
.vs__label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.vs__row--with .vs__label { color: #8fa9ff; }
.vs__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .93rem; font-weight: 600; color: var(--muted); }
.vs__row--without .vs__flow span { text-decoration: line-through; text-decoration-color: rgba(248,113,113,.55); }
.vs__row--with .vs__flow { color: #fff; }
.vs__flow svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--dim); }
.vs__row--with .vs__flow svg { color: #8fa9ff; }
.plan__badge--trial { left: 24px; right: auto; background: rgba(52,211,153,.14); border: 1px solid rgba(52,211,153,.45); color: var(--ok); }
.plan > .btn + .plan__fine { margin-top: 10px; }
.plan > .btn:has(+ .plan__fine) { margin-top: 0; }
.plan__fine { text-align: center; color: var(--muted); font-size: .82rem; line-height: 1.5; min-height: 4.5em; }
@media (max-width: 680px) { .plan__fine { min-height: 0; } }
.plan__fine b { color: var(--text); }
.plan__fine a { color: #8fa9ff; font-weight: 600; }
.trial-list { list-style: none; padding: 0; margin: -6px 0 20px; display: grid; gap: 8px; font-size: .92rem; color: #cfd4de; }
.trial-list li { display: flex; gap: 10px; align-items: flex-start; }
.trial-list svg { width: 16px; height: 16px; margin-top: 3px; color: var(--ok); flex-shrink: 0; }
.trial-fine { margin-top: 12px; text-align: center; color: var(--dim); font-size: .8rem; }
.trial-fine a { color: #8fa9ff; font-weight: 600; }
.trial-label { color: var(--muted); font-size: .8rem; margin-bottom: 6px; }
.trial-steps { margin-top: 16px; }
.trial-actions { display: grid; gap: 10px; }
#trialModal .view > .muted b { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .reviews { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .nav__links { display: none; position: absolute; top: 68px; left: 16px; right: 16px; flex-direction: column; margin: 0; padding: 8px; background: var(--panel); border-color: var(--border-2); box-shadow: var(--shadow); }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 14px; font-size: 1rem; }
  .nav__links a[href="/#demo"] { display: none; } /* mobile menu: no Demo item */
  .nav__toggle { display: inline-grid; }
  .steps, .features { grid-template-columns: 1fr 1fr; }
  .platforms__list { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .container { padding: 0 16px; }
  .section { padding: 72px 0; }
  .hero { padding-top: 44px; }
  .nav__guest .btn--ghost { display: none; }
  .user-chip__name { display: none; }
  .user-chip { padding: 4px; }
  .steps, .features, .plans { grid-template-columns: 1fr; }
  .reviews { grid-template-columns: repeat(5, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: thin; }
  .review { scroll-snap-align: center; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .demo { margin-top: 36px; }
  .demo__frame { padding: 6px; border-radius: 14px; }
  .demo__steps { grid-template-columns: 1fr 1fr; }
  .demo-seg__lbl { font-size: .7rem; }
  .platforms__list li { flex-wrap: wrap; }
  .platforms__list small { margin-left: 0; width: 100%; }
  .modal__box { padding: 26px 20px 20px; }
  .otp { gap: 6px; }
  .otp input { height: 48px; }
}
/* ---------- Demo: explainer video + animation tabs ---------- */
.demo__tabs { display: flex; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 16px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.demo-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9px; border: 1px solid transparent; color: var(--muted); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.demo-tab svg { width: 14px; height: 14px; }
.demo-tab small { font-size: .75rem; color: var(--dim); font-weight: 600; }
.demo-tab:hover { color: var(--text); }
.demo-tab.is-active { background: var(--active); border-color: var(--active-border); color: #fff; }
.demo-tab.is-active small { color: #9db4ff; }
.vplayer { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.vplayer video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vplayer__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(180deg, rgba(8,9,13,.05), rgba(8,9,13,.45)); color: #fff; transition: background .25s; }
.vplayer__play:hover { background: linear-gradient(180deg, rgba(8,9,13,0), rgba(8,9,13,.3)); }
.vplayer__btn { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 16px 50px -10px rgba(90,100,250,.9), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s; }
.vplayer__btn svg { width: 30px; height: 30px; margin-left: 4px; }
.vplayer__play:hover .vplayer__btn { transform: scale(1.06); }
.vplayer__txt { font-weight: 700; font-size: .95rem; padding: 6px 14px; border-radius: 99px; background: rgba(8,9,13,.65); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.vplayer.is-playing .vplayer__play { display: none; }
@media (max-width: 680px) {
  .demo-tab { padding: 7px 11px; font-size: .82rem; }
  .vplayer__btn { width: 58px; height: 58px; }
  .vplayer__btn svg { width: 24px; height: 24px; }
  .vplayer__txt { font-size: .8rem; }
}

/* conversion upgrade: responsive */
@media (max-width: 1080px) { .steps--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  .steps--4 { grid-template-columns: 1fr; }
  .nav__cta-long { display: none; }
  .hero__cta .btn--lg { width: 100%; }
  .cta .hero__cta .btn--lg { width: 100%; }
  .trust { gap: 8px; }
  .trust li { font-size: .8rem; padding: 7px 11px; }
  .vs { padding: 18px 14px; }
  .vs__row { grid-template-columns: 1fr; gap: 6px; }
  .plan { padding: 28px 20px; }
  .plans { gap: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}