:root {
  color-scheme: dark;
  --bg: #080a10;
  --bg-soft: #0d1019;
  --surface: rgba(18, 21, 33, 0.82);
  --surface-solid: #121521;
  --surface-2: #171b2a;
  --line: rgba(255, 255, 255, 0.09);
  --line-bright: rgba(166, 140, 255, 0.28);
  --text: #f5f3ff;
  --muted: #a4a7b8;
  --faint: #737789;
  --purple: #8d6cff;
  --purple-light: #b6a3ff;
  --purple-dark: #6744f0;
  --cyan: #54d8d1;
  --green: #6ee7a7;
  --warning: #f9c76a;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  --radius: 24px;
  --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% -15%, rgba(112, 73, 255, 0.14), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  opacity: 0.22;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img, svg { max-width: 100%; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #fff; color: #111; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.ambient { position: absolute; z-index: -2; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.ambient-one { width: 480px; height: 480px; top: 500px; left: -360px; box-shadow: 0 0 150px 80px rgba(78, 207, 202, .07); }
.ambient-two { width: 520px; height: 520px; top: 1600px; right: -400px; box-shadow: 0 0 180px 100px rgba(132, 94, 247, .09); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled { background: rgba(8, 10, 16, .78); border-color: var(--line); backdrop-filter: blur(18px); }
.nav-shell { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-mark { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(181,163,255,.45); border-radius: 13px; background: linear-gradient(145deg, rgba(157,129,255,.28), rgba(80,50,180,.15)); box-shadow: inset 0 1px rgba(255,255,255,.15), 0 10px 32px rgba(105,67,240,.2); transform: rotate(-5deg); }
.brand-mark::after { content: ""; position: absolute; inset: 4px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); }
.brand-mark img { position: relative; z-index: 1; width: 28px; height: 28px; object-fit: contain; transform: rotate(5deg); }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 18px; letter-spacing: -.02em; }
.brand-copy small { margin-top: 4px; color: var(--faint); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav > a { color: #bdc0ce; font-size: 14px; font-weight: 650; transition: color .2s ease; }
.main-nav > a:hover { color: #fff; }
.main-nav .nav-cta { padding: 10px 16px; border: 1px solid var(--line-bright); border-radius: 11px; background: rgba(128,92,244,.1); color: #eee9ff; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: #fff; }
.menu-toggle span:not(.sr-only) { display: block; width: 100%; height: 2px; margin: 4px 0; background: currentColor; border-radius: 2px; }

.hero { min-height: 870px; padding-top: 170px; padding-bottom: 100px; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 60px; }
.hero-copy { position: relative; z-index: 3; min-width: 0; }
.eyebrow, .kicker { color: var(--purple-light); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid rgba(160,132,255,.2); border-radius: 999px; background: rgba(115,76,236,.08); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(110,231,167,.09), 0 0 14px rgba(110,231,167,.55); }
.hero h1 { margin: 26px 0 22px; max-width: 650px; font-size: clamp(54px, 6.2vw, 88px); line-height: .96; letter-spacing: -.065em; }
.hero h1 span { background: linear-gradient(110deg, var(--purple-light), #7654ed 75%); color: transparent; background-clip: text; }
.hero-lead { max-width: 560px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border: 1px solid transparent; border-radius: 13px; font-size: 14px; font-weight: 800; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, #997dff, #6742e8); color: #fff; box-shadow: 0 14px 38px rgba(108,67,235,.28), inset 0 1px rgba(255,255,255,.25); }
.button-primary:hover { box-shadow: 0 18px 46px rgba(108,67,235,.4), inset 0 1px rgba(255,255,255,.25); }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,.025); color: #dadce6; }
.button-ghost:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
.button-light { background: #fff; color: #17131e; }
.button-outline-light { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.07); color: #fff; }
.button.full { width: 100%; }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 580px; margin-top: 44px; border-top: 1px solid var(--line); }
.hero-proof div { padding: 22px 20px 0 0; display: grid; }
.hero-proof strong { font-size: 17px; letter-spacing: -.02em; }
.hero-proof span { margin-top: 3px; color: var(--faint); font-size: 11px; }

.hero-visual { position: relative; min-height: 570px; display: grid; place-items: center; perspective: 1400px; }
.hero-visual::before { content: ""; position: absolute; width: 540px; height: 420px; border-radius: 50%; background: rgba(106,68,236,.22); filter: blur(90px); }
.orbit { position: absolute; border: 1px solid rgba(160,137,255,.13); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 620px; height: 390px; }
.orbit-two { width: 720px; height: 470px; opacity: .42; }
.dashboard-window { position: relative; z-index: 2; width: 690px; overflow: hidden; border: 1px solid rgba(190,175,255,.2); border-radius: 20px; background: #0d1018; box-shadow: 0 38px 110px rgba(0,0,0,.62), 0 0 80px rgba(99,61,211,.12), inset 0 1px rgba(255,255,255,.08); transform: rotateY(-7deg) rotateX(3deg) rotateZ(1deg); transform-origin: center; }
.window-bar { height: 43px; display: grid; grid-template-columns: 85px 1fr auto; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); color: #666b7c; font-size: 9px; }
.window-dots { display: flex; gap: 6px; }.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #353948; }.window-dots i:first-child { background: #744ff1; }
.secure-badge { padding: 4px 7px; border-radius: 6px; background: rgba(110,231,167,.08); color: #75dca6; }
.dashboard-body { min-height: 420px; display: grid; grid-template-columns: 145px 1fr; }
.dash-side { padding: 18px 12px; border-right: 1px solid var(--line); background: #0a0d14; }
.mini-brand { display: flex; align-items: center; gap: 8px; margin: 0 6px 22px; font-size: 11px; }.mini-brand span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--purple-dark); }.mini-brand img { width: 16px; height: 16px; }
.dash-link { display: flex; align-items: center; gap: 9px; margin: 5px 0; padding: 8px; border-radius: 7px; color: #656a7b; font-size: 9px; font-weight: 700; }.dash-link i { width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 3px; }.dash-link.active { background: rgba(130,94,246,.13); color: #beaaff; }
.dash-main { padding: 22px; background: radial-gradient(circle at 90% 0, rgba(117,78,234,.08), transparent 220px); }
.dash-heading, .chart-head, .stack-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.dash-heading div, .chart-head div, .stack-top div { display: grid; }.dash-heading small, .chart-head small, .stack-top small { color: #777c8f; font-size: 7px; letter-spacing: .16em; }.dash-heading b { font-size: 17px; }.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid rgba(110,231,167,.13); border-radius: 999px; background: rgba(110,231,167,.05); color: #8be3b3; font-size: 7px; }.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 18px; }.metric-row article { display: grid; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }.metric-row small { color: #686d7d; font-size: 6px; letter-spacing: .08em; }.metric-row strong { margin-top: 4px; font-size: 17px; }.metric-row span { color: #6dc99a; font-size: 6px; }
.chart-card { margin-top: 10px; padding: 14px 14px 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.016); }.chart-head strong { font-size: 10px; }.chart-head > span { color: var(--green); font-size: 8px; }.chart-card svg { display: block; height: 118px; margin-top: 5px; overflow: visible; }.grid-line { fill: none; stroke: rgba(255,255,255,.045); stroke-width: 1; }.area { fill: url(#chartFill); }.line { fill: none; stroke: #9e82ff; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(157,129,255,.6)); }
.activity-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.014); }.activity-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(110,231,167,.1); color: var(--green); font-size: 10px; }.activity-row div { display: grid; }.activity-row b { font-size: 8px; }.activity-row small, .activity-row time { color: #6d7284; font-size: 6px; }
.floating-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(190,175,255,.18); border-radius: 13px; background: rgba(17,20,31,.86); box-shadow: 0 20px 50px rgba(0,0,0,.4); backdrop-filter: blur(12px); }
.music-card { right: -28px; bottom: 52px; min-width: 220px; padding: 11px; transform: rotate(2deg); }.album-note { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #8d6cff, #463185); font-size: 18px; }.music-card div { display: grid; flex: 1; }.music-card small { color: var(--purple-light); font-size: 6px; letter-spacing: .13em; }.music-card b { font-size: 10px; }.equalizer { display: flex; align-items: center; gap: 2px; height: 18px; }.equalizer i { width: 2px; border-radius: 2px; background: var(--purple-light); animation: eq .8s ease-in-out infinite alternate; }.equalizer i:nth-child(1) { height: 7px; }.equalizer i:nth-child(2) { height: 15px; animation-delay: -.3s; }.equalizer i:nth-child(3) { height: 10px; animation-delay: -.5s; }.equalizer i:nth-child(4) { height: 5px; animation-delay: -.15s; }
.shield-card { left: -12px; top: 72px; padding: 11px 14px; transform: rotate(-3deg); }.shield-card > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: rgba(110,231,167,.1); color: var(--green); }.shield-card div { display: grid; }.shield-card b { font-size: 9px; }.shield-card small { color: #74798a; font-size: 7px; }
@keyframes eq { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

.trust-strip { border-block: 1px solid var(--line); background: rgba(255,255,255,.012); }
.trust-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 22px; overflow: hidden; white-space: nowrap; color: #656979; font-size: 9px; font-weight: 800; letter-spacing: .2em; }.trust-inner i { width: 3px; height: 3px; flex: 0 0 auto; border-radius: 50%; background: var(--purple); box-shadow: 0 0 10px var(--purple); }

.brand-showcase { padding-top: 120px; }
.brand-showcase-inner { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 66px; min-height: 640px; overflow: hidden; padding: 68px; border: 1px solid rgba(180, 157, 255, .19); border-radius: 32px; background: radial-gradient(circle at 88% 23%, rgba(117, 75, 235, .25), transparent 34%), radial-gradient(circle at 2% 100%, rgba(37, 155, 161, .08), transparent 30%), linear-gradient(135deg, rgba(21, 23, 37, .98), rgba(11, 13, 21, .98)); box-shadow: 0 34px 100px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.055); }
.brand-showcase-inner::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .22; 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: 46px 46px; mask-image: linear-gradient(90deg, transparent, #000 70%); }
.brand-showcase-copy { position: relative; z-index: 3; }
.brand-showcase-copy h2 { margin: 17px 0 22px; font-size: clamp(43px, 4.6vw, 67px); line-height: 1.01; letter-spacing: -.058em; }
.brand-showcase-copy h2 span { background: linear-gradient(110deg, #c5b5ff, #7b58ee); color: transparent; background-clip: text; }
.brand-showcase-copy > p { max-width: 600px; margin: 0; color: #999dae; font-size: 15px; line-height: 1.8; }
.brand-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 30px 0 34px; padding: 0; list-style: none; }
.brand-options li { min-height: 100px; display: grid; grid-template-columns: 32px 1fr; align-content: start; gap: 10px; padding: 15px; border: 1px solid rgba(170, 147, 255, .12); border-radius: 14px; background: rgba(255,255,255,.018); }
.brand-options li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(134, 94, 245, .12); color: #af9aff; font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace; }
.brand-options div { display: grid; gap: 5px; }.brand-options b { color: #e8e6ef; font-size: 11px; }.brand-options small { color: #73788a; font-size: 9px; line-height: 1.55; }
.brand-showcase-visual { position: relative; min-height: 510px; }
.brand-logo-tile { position: absolute; z-index: 2; top: 8px; right: 16px; width: 218px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 25px; background: #08090b; box-shadow: 0 30px 75px rgba(0,0,0,.52); transform: rotate(5deg); }
.brand-logo-tile img { display: block; width: 100%; height: auto; }.brand-logo-tile > span { position: absolute; right: 13px; bottom: 13px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(8,9,11,.75); backdrop-filter: blur(8px); color: #c8c3d5; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.custom-profile-card { position: absolute; z-index: 4; top: 142px; left: 0; width: min(390px, 88%); min-height: 245px; overflow: hidden; border: 1px solid rgba(193, 177, 255, .22); border-radius: 24px; background: rgba(15, 17, 26, .94); box-shadow: 0 35px 85px rgba(0,0,0,.5), 0 0 60px rgba(105,68,226,.14); backdrop-filter: blur(15px); transform: rotate(-3deg); }
.custom-banner { height: 102px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 14px; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.17), transparent 25%), linear-gradient(120deg, #5831c6, #9979ff 56%, #277b82); }
.custom-banner::before { content: ""; position: absolute; inset: 0 0 auto; height: 102px; opacity: .23; background-image: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.24) 40%, rgba(255,255,255,.24) 41%, transparent 41%); background-size: 24px 24px; }
.custom-banner span { position: relative; padding: 5px 8px; border-radius: 999px; background: rgba(8,9,15,.28); color: #fff; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.custom-avatar { position: absolute; top: 63px; left: 22px; width: 78px; height: 78px; padding: 13px; border: 6px solid #0f111a; border-radius: 24px; background: #08090b; object-fit: contain; }
.custom-profile-copy { display: grid; padding: 51px 23px 12px; }.custom-profile-copy strong { display: flex; align-items: center; gap: 7px; font-size: 18px; }.custom-profile-copy strong i { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #7b5af0; color: #fff; font-size: 9px; font-style: normal; }.custom-profile-copy small { margin-top: 5px; color: #7b8091; font-size: 10px; }
.custom-status { margin: 0 23px 22px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); color: #9da1b0; font-size: 9px; }.custom-status span { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(110,231,167,.55); }
.custom-domain { position: absolute; z-index: 5; right: -2px; bottom: 18px; width: 310px; display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 11px; padding: 14px; border: 1px solid rgba(187,170,255,.2); border-radius: 16px; background: rgba(18,20,31,.92); box-shadow: 0 24px 55px rgba(0,0,0,.48); backdrop-filter: blur(14px); transform: rotate(2deg); }
.custom-domain > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(130,91,244,.13); color: #b39eff; font-size: 18px; }.custom-domain div { display: grid; min-width: 0; }.custom-domain small { color: #6e7384; font-size: 6px; letter-spacing: .15em; }.custom-domain b { overflow: hidden; margin-top: 3px; color: #dad7e7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.custom-domain i { color: #9e86f3; font-size: 13px; font-style: normal; }
.brand-orbit { position: absolute; z-index: 1; border: 1px solid rgba(167,143,255,.14); border-radius: 50%; }.brand-orbit-one { inset: 45px -40px 40px 20px; transform: rotate(-14deg); }.brand-orbit-two { inset: 90px 20px 80px -30px; opacity: .55; transform: rotate(18deg); }

.section { padding-top: 130px; padding-bottom: 130px; }
.section-heading { display: grid; grid-template-columns: 1.15fr .7fr; align-items: end; gap: 80px; margin-bottom: 54px; }
.section-heading h2, .pricing-heading h2, .panel-copy h2, .faq-copy h2, .cta-section h2, .legal-hero h1 { margin: 14px 0 0; font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -.055em; }
.section-heading p, .pricing-heading p, .faq-copy > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card { position: relative; min-height: 245px; overflow: hidden; padding: 27px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, rgba(21,24,37,.82), rgba(13,16,25,.9)); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.feature-card::before { content: ""; position: absolute; width: 160px; height: 160px; top: -100px; right: -100px; border-radius: 50%; background: var(--purple); opacity: .07; filter: blur(20px); transition: opacity .25s ease; }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(161,133,255,.24); background: linear-gradient(145deg, rgba(25,28,43,.95), rgba(14,17,27,.96)); }.feature-card:hover::before { opacity: .15; }
.feature-wide { grid-column: span 2; }
.feature-tall { grid-row: span 2; }
.feature-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(164,137,255,.2); border-radius: 12px; background: rgba(132,94,245,.1); color: var(--purple-light); font-size: 19px; font-weight: 800; }
.premium-tag, .free-tag { position: absolute; top: 27px; right: 27px; padding: 5px 8px; border-radius: 999px; font-size: 7px; font-weight: 900; letter-spacing: .13em; }.premium-tag { border: 1px solid rgba(164,137,255,.2); background: rgba(132,94,245,.08); color: var(--purple-light); }.free-tag { border: 1px solid rgba(110,231,167,.18); background: rgba(110,231,167,.07); color: var(--green); }
.feature-card h3 { margin: 32px 0 9px; font-size: 19px; letter-spacing: -.02em; }.feature-card p { margin: 0; color: #9094a6; font-size: 13px; line-height: 1.7; }
.command-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 22px; }.command-chips span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.16); color: #b3b6c5; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.shield-visual { position: relative; height: 165px; display: grid; place-items: center; margin: 30px 0 10px; }.shield-core { position: relative; z-index: 3; width: 66px; height: 76px; display: grid; place-items: center; clip-path: polygon(50% 0,92% 16%,83% 72%,50% 100%,17% 72%,8% 16%); background: linear-gradient(145deg, #9b7dff, #4f30b5); font-size: 26px; font-weight: 900; box-shadow: 0 0 50px rgba(126,86,245,.4); }.shield-visual i { position: absolute; border: 1px solid rgba(154,127,255,.16); border-radius: 50%; }.ring-a { width: 130px; height: 130px; }.ring-b { width: 190px; height: 120px; transform: rotate(20deg); }.scan-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }.dot-a { top: 17px; left: 70px; }.dot-b { right: 48px; bottom: 35px; }.dot-c { left: 40px; bottom: 45px; }
.mini-list { display: grid; gap: 10px; margin: 21px 0 0; padding: 0; list-style: none; color: #9da1b2; font-size: 11px; }.mini-list li { display: flex; align-items: center; gap: 9px; }.mini-list li span { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(110,231,167,.5); }

.panel-section { position: relative; overflow: hidden; padding: 140px 0; border-block: 1px solid var(--line); background: linear-gradient(115deg, rgba(84,49,190,.16), rgba(10,12,19,.4) 48%, rgba(29,83,91,.08)); }
.panel-section::before { content: ""; position: absolute; width: 700px; height: 700px; left: -430px; top: -250px; border-radius: 50%; box-shadow: 0 0 190px 110px rgba(119,78,239,.14); }
.panel-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 110px; }
.panel-copy p { max-width: 510px; margin: 24px 0 0; color: var(--muted); line-height: 1.8; }
.check-list { display: grid; gap: 17px; margin: 34px 0; padding: 0; list-style: none; }.check-list li { display: flex; align-items: flex-start; gap: 13px; }.check-list li > span { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; border-radius: 8px; background: rgba(110,231,167,.09); color: var(--green); font-size: 10px; }.check-list div { display: grid; }.check-list b { font-size: 14px; }.check-list small { color: #85899a; font-size: 11px; }
.text-link { display: inline-flex; align-items: center; gap: 13px; color: var(--purple-light); font-size: 13px; font-weight: 800; }.text-link span { transition: transform .2s ease; }.text-link:hover span { transform: translateX(4px); }
.panel-stack { position: relative; min-height: 475px; perspective: 1000px; }
.stack-card { position: absolute; border: 1px solid rgba(187,170,255,.15); border-radius: 20px; background: rgba(17,20,31,.92); box-shadow: var(--shadow); }
.stack-main { z-index: 3; inset: 30px 0 40px 30px; padding: 30px; transform: rotateY(-5deg) rotateZ(1deg); }.stack-top strong { font-size: 22px; }.fake-switch input { position: absolute; opacity: 0; }.fake-switch span { display: block; width: 44px; height: 24px; padding: 3px; border-radius: 999px; background: var(--purple-dark); }.fake-switch span::after { content: ""; display: block; width: 18px; height: 18px; margin-left: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.fake-form { display: grid; gap: 12px; margin-top: 34px; }.fake-form label { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; color: #a9adbd; font-size: 11px; }.fake-form span { padding: 6px 9px; border-radius: 7px; background: rgba(255,255,255,.04); color: #ece8ff; }
.save-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--green); font-size: 10px; }.save-bar button { padding: 9px 18px; border: 0; border-radius: 9px; background: var(--purple-dark); color: #fff; font-size: 10px; font-weight: 800; opacity: 1; }
.stack-back-one, .stack-back-two { width: 170px; height: 110px; display: grid; place-content: center; text-align: center; }.stack-back-one { z-index: 1; top: 0; right: -35px; transform: rotate(6deg); }.stack-back-two { z-index: 4; right: -12px; bottom: 3px; transform: rotate(-4deg); }.stack-card > span { font-size: 27px; font-weight: 900; }.stack-card > small { color: var(--faint); font-size: 7px; letter-spacing: .15em; }

.pricing-heading { max-width: 720px; margin: 0 auto 54px; text-align: center; }.pricing-heading p { max-width: 640px; margin: 22px auto 0; }
.pricing-grid { max-width: 900px; display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 0 auto; align-items: stretch; }
.price-card { position: relative; padding: 34px; border: 1px solid var(--line); border-radius: 23px; background: linear-gradient(155deg, rgba(20,23,35,.9), rgba(12,15,23,.94)); box-shadow: 0 22px 60px rgba(0,0,0,.2); }.premium-card { border-color: rgba(164,137,255,.35); background: radial-gradient(circle at 95% 2%, rgba(135,94,246,.22), transparent 230px), linear-gradient(155deg, rgba(28,25,46,.96), rgba(13,15,24,.96)); box-shadow: 0 28px 80px rgba(67,39,145,.22); }
.recommended { position: absolute; top: 0; left: 50%; padding: 6px 14px; border-radius: 0 0 9px 9px; background: linear-gradient(90deg, #8e6eff, #6e49ea); color: #fff; font-size: 7px; font-weight: 900; letter-spacing: .14em; transform: translateX(-50%); white-space: nowrap; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.plan-head small { color: var(--faint); font-size: 8px; letter-spacing: .16em; }.plan-head h3 { margin: 3px 0 0; font-size: 25px; }.plan-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.03); font-weight: 900; }.premium-icon { border-color: rgba(164,137,255,.3); background: rgba(132,94,245,.13); color: var(--purple-light); }
.price { display: flex; align-items: baseline; gap: 9px; margin: 34px 0 30px; }.price strong { font-size: 37px; line-height: 1; letter-spacing: -.04em; }.price span { color: var(--faint); font-size: 12px; }
.price-card ul { display: grid; gap: 13px; margin: 0 0 32px; padding: 27px 0 0; border-top: 1px solid var(--line); list-style: none; }.price-card li { display: flex; align-items: center; gap: 11px; color: #b6b9c7; font-size: 12px; }.price-card li span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: rgba(110,231,167,.08); color: var(--green); font-size: 8px; }.price-card li.muted { color: #686c7c; }.price-card li.muted span { background: rgba(255,255,255,.03); color: #6d7181; }
.price-note { display: block; margin-top: 13px; color: var(--faint); text-align: center; font-size: 9px; }

.faq-section { display: grid; grid-template-columns: .68fr 1.32fr; gap: 110px; }
.faq-copy { position: sticky; top: 130px; align-self: start; }.faq-copy > p { margin: 22px 0 28px; }
.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 24px 0; cursor: pointer; list-style: none; color: #d9dbe5; font-size: 15px; font-weight: 700; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--purple-light); font-size: 22px; font-weight: 400; transition: transform .2s ease; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { max-width: 720px; margin: -5px 55px 24px 0; color: #8e92a3; font-size: 13px; line-height: 1.8; }

.cta-section { position: relative; min-height: 340px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 60px; margin-bottom: 120px; padding: 60px; border: 1px solid rgba(196,181,255,.28); border-radius: 29px; background: linear-gradient(120deg, #6e46e9, #4930a5); box-shadow: 0 30px 100px rgba(80,49,175,.28); }.cta-section::before { content: "D"; position: absolute; right: 5%; top: 50%; color: rgba(255,255,255,.045); font-size: 330px; font-weight: 900; line-height: 1; transform: translateY(-50%) rotate(-9deg); }.cta-section h2 { font-size: clamp(36px,4vw,53px); }.cta-section p { margin: 18px 0 0; color: rgba(255,255,255,.7); }.cta-section .kicker { color: #ddd3ff; }.cta-actions { position: relative; z-index: 2; display: grid; gap: 10px; flex: 0 0 220px; }

.site-footer { border-top: 1px solid var(--line); background: #07090e; }.footer-grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 70px; padding-top: 65px; padding-bottom: 55px; }.footer-brand p { max-width: 330px; margin: 22px 0 0; color: #777b8d; font-size: 12px; }.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 10px; }.footer-grid h3 { margin: 0 0 8px; color: #e7e5ef; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }.footer-grid > div:not(.footer-brand) a { color: #797d8f; font-size: 12px; transition: color .2s ease; }.footer-grid > div:not(.footer-brand) a:hover { color: var(--purple-light); }.footer-bottom { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); color: #575b6b; font-size: 9px; }

.legal-page { background: radial-gradient(circle at 50% 0, rgba(113,75,237,.12), transparent 38rem), var(--bg); }
.legal-main { padding-top: 150px; padding-bottom: 100px; }
.legal-hero { max-width: 850px; padding-bottom: 52px; }.legal-hero p { max-width: 690px; margin: 22px 0 0; color: var(--muted); font-size: 16px; }.legal-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 25px; }.legal-meta span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: #8b8fa0; font-size: 10px; }
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 70px; align-items: start; }.legal-toc { position: sticky; top: 110px; display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }.legal-toc strong { margin-bottom: 7px; color: #dad7e8; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }.legal-toc a { color: #85899a; font-size: 11px; }.legal-toc a:hover { color: var(--purple-light); }
.legal-content { min-width: 0; }.legal-content section { padding: 0 0 38px; margin: 0 0 38px; border-bottom: 1px solid var(--line); }.legal-content h2 { margin: 0 0 14px; font-size: 23px; letter-spacing: -.03em; }.legal-content h3 { margin: 25px 0 8px; font-size: 15px; }.legal-content p, .legal-content li { color: #9a9eae; font-size: 13px; line-height: 1.85; }.legal-content ul { display: grid; gap: 7px; padding-left: 19px; }.legal-content a { color: var(--purple-light); text-decoration: underline; text-underline-offset: 3px; }.legal-note { padding: 18px 20px; border: 1px solid var(--line-bright); border-radius: 14px; background: rgba(129,90,244,.07); color: #bbb4d9; font-size: 12px; }

.error-page { min-height: 100vh; background: radial-gradient(circle at 75% 35%, rgba(115,74,235,.22), transparent 34%), #090b12; }
.error-main { min-height: 100vh; display: grid; align-content: center; gap: 90px; padding-block: 60px; }
.error-copy { max-width: 690px; }.error-copy h1 { margin: 16px 0 24px; font-size: clamp(62px, 10vw, 120px); line-height: .88; letter-spacing: -.07em; }.error-copy p { max-width: 570px; margin: 0 0 32px; color: var(--muted); font-size: 16px; line-height: 1.75; }

.reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 150px; }
  .hero-copy { max-width: 760px; }
  .hero-visual { min-height: 600px; }
  .dashboard-window { width: min(760px, 92vw); }
  .brand-showcase-inner { gap: 34px; padding: 50px; }
  .brand-showcase-visual { min-height: 500px; }
  .feature-grid { grid-template-columns: repeat(2,1fr); }
  .feature-tall { grid-row: auto; }
  .panel-layout { gap: 60px; }
  .panel-stack { min-height: 440px; }
  .footer-grid { gap: 35px; }
}

@media (max-width: 820px) {
  :root { --shell: min(calc(100% - 30px), 680px); }
  .shell { width: calc(100% - 30px); max-width: 680px; }
  .nav-shell { min-height: 72px; }
  .menu-toggle { position: relative; z-index: 2; display: block; flex: 0 0 42px; margin-left: auto; background: rgba(126, 87, 239, .16); }
  .main-nav { position: absolute; top: 64px; right: 15px; left: 15px; display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(12,14,22,.97); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s ease; }
  .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }.main-nav > a { padding: 10px 12px; }.main-nav .nav-cta { margin-top: 4px; text-align: center; }
  .hero { display: block; padding-top: 125px; padding-bottom: 70px; }.hero-copy { width: 100%; max-width: 100%; }.hero h1 { font-size: clamp(49px, 13vw, 72px); }.hero-lead { width: 100%; font-size: 16px; overflow-wrap: anywhere; }.hero-proof { grid-template-columns: 1fr; }.hero-proof div { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .hero-visual { width: 100%; min-height: 450px; margin-top: 35px; }.dashboard-window { width: 100%; max-width: 100%; transform: none; }.dash-side { display: none; }.dashboard-body { grid-template-columns: minmax(0, 1fr); }.dash-main { min-width: 0; }.floating-card { display: none; }.orbit { transform: none; width: 95%; }
  .trust-inner { justify-content: flex-start; overflow: hidden; }
  .brand-showcase { padding-top: 90px; }
  .brand-showcase-inner { grid-template-columns: 1fr; gap: 38px; min-height: 0; padding: 44px 34px; }
  .brand-showcase-copy h2 { font-size: clamp(39px, 9vw, 57px); }
  .brand-showcase-visual { width: min(100%, 550px); min-height: 500px; margin: 0 auto; }
  .section { padding-block: 90px; }.section-heading { grid-template-columns: 1fr; gap: 20px; }.section-heading h2, .pricing-heading h2, .panel-copy h2, .faq-copy h2, .legal-hero h1 { font-size: clamp(37px,10vw,53px); }
  .feature-grid { grid-template-columns: 1fr; }.feature-wide { grid-column: auto; }
  .panel-section { padding-block: 95px; }.panel-layout { grid-template-columns: 1fr; }.panel-stack { min-height: 410px; }.stack-main { left: 0; }.stack-back-one { right: 0; }.stack-back-two { right: 8px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .faq-section { grid-template-columns: 1fr; gap: 45px; }.faq-copy { position: static; }
  .cta-section { align-items: flex-start; flex-direction: column; padding: 38px; }.cta-actions { width: 100%; flex-basis: auto; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }.footer-brand { grid-column: 1 / -1; }.footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 20px; }
  .legal-layout { grid-template-columns: 1fr; gap: 35px; }.legal-toc { position: static; grid-template-columns: repeat(2,1fr); }.legal-toc strong { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .brand-copy small { display: none; }
  .hero h1 { max-width: 100%; font-size: 44px; overflow-wrap: normal; }
  .hero h1 span { display: block; }
  .hero-lead { max-width: 100%; }
  .hero-actions, .hero-actions .button { width: 100%; }
  .hero-visual { min-height: 365px; }
  .brand-showcase-inner { padding: 34px 22px; border-radius: 24px; }
  .brand-options { grid-template-columns: 1fr; }
  .brand-options li { min-height: 0; }
  .brand-showcase-copy .button { width: 100%; }
  .brand-showcase-visual { min-height: 420px; }
  .brand-logo-tile { right: 0; width: 150px; border-radius: 19px; }
  .custom-profile-card { top: 105px; width: 94%; transform: rotate(-2deg); }
  .custom-domain { right: 0; bottom: 2px; width: min(300px, 92%); }
  .window-bar { grid-template-columns: 55px 1fr; }.window-bar > span:not(.secure-badge) { overflow: hidden; text-overflow: ellipsis; }.secure-badge { display: none; }
  .dash-main { padding: 13px; }.metric-row { grid-template-columns: 1fr 1fr; }.metric-row article:last-child { display: none; }.chart-card svg { height: 95px; }
  .feature-card { min-height: 225px; padding: 23px; }.premium-tag, .free-tag { top: 23px; right: 23px; }.command-chips span:nth-child(n+4) { display: none; }
  .stack-main { right: 0; padding: 22px; transform: none; }.stack-back-one, .stack-back-two { display: none; }.fake-form label { align-items: flex-start; flex-direction: column; gap: 8px; }.panel-stack { min-height: 460px; }
  .price-card { padding: 27px 23px; }
  .cta-section { width: calc(100% - 30px); padding: 30px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 22px; }
  .legal-toc { grid-template-columns: 1fr; }.legal-toc strong { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}