:root { --bg:#0c0d12; --surface:#161820; --stroke:#ffffff1a; --stroke2:#a2b4ff66; --fg:#f3f4fa; --fg2:#bdc1d0; --fg3:#969cac; --accent:#b3bdff; --accent2:#cad1ff; --grad:linear-gradient(115deg,#edf3ff 0%,#a9c7ff 28%,#c8b7f8 57%,#f0bedf 79%,#f3f5ff 100%); --metal:linear-gradient(145deg,#ffffff0b,#ffffff02 32%,#8caeff08 54%,#edb7e808 78%,#ffffff04); color-scheme:dark; }
.demo-window-body p.eyebrow { display:block; }
.subcard { background:#fff; box-shadow:inset 0 0 0 1px var(--stroke),0 12px 45px #2420350c; }
.subcard.warn { box-shadow:inset 0 0 0 1px #be8b28; }
.badge.ok-badge,.btn.copy.copied { color:#17694c; }
.pbar { background:#e9e6ef; }
.adminnav,.msg.from-user { background:#efedf4; }
.denied strong,.badge.danger { color:#a22945; }
.t-status.s-open,.ticket-row.s-open .t-status,.kpi.warn b { color:#805a13; }
.t-status.s-answered,.ticket-row.s-answered .t-status { color:#17694c; }
.err { color:#a22945; }.ok,.okline { color:#17694c; }.note { color:#65518b; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif; }
a:hover,nav a:hover,.brand,.ticket-row:hover,.adminnav a:hover { color:var(--fg); }
:focus-visible { outline:3px solid #7862a8; outline-offset:4px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:12px; background:white; transform:translateY(-160%); }.skip-link:focus { transform:none; }
.top { padding-top:24px; padding-bottom:24px; border-bottom:1px solid var(--stroke); }.brand img { filter:none; width:32px; height:32px; }.pill { box-shadow:none; border-radius:10px; }
.btn { border-radius:10px; }.btn.primary { box-shadow:none; }.btn.ghost { background:#fff; }.btn.ghost:hover { color:var(--fg); background:#efedf4; }
.panel,.get-panel { background:#fff; box-shadow:0 16px 60px #2420350c,inset 0 0 0 1px var(--stroke); }.cookies { background:#fff; box-shadow:0 8px 60px #24203520,inset 0 0 0 1px var(--stroke); width:min(990px,calc(100% - 32px)); }.cookies .btn { flex-shrink:0; }
input,select,textarea,.bigkey,code.key,.bigcode,.sub-key .k,.linkdev,.pay-sbp,.seg,.step code { background:#f1f1f4; color:var(--fg); }.pay-rows dd.code { color:var(--fg); }.tag { color:white; }.nav-toggle:focus-visible + .nav-burger { outline:3px solid var(--accent); }.nav-burger span { background:var(--fg); }
.home-hero { text-align:center; padding:76px 0 44px; }.eyebrow { color:var(--accent); font-size:11px; letter-spacing:.14em; font-weight:650; }.home-hero h1 { font-size:clamp(54px,8vw,100px); line-height:1.02; font-weight:650; letter-spacing:-.065em; margin:24px 0; }.home-hero h1 span { color:#79777f; }.home-hero .lead { margin:0 auto; max-width:640px; font-size:18px; }.home-hero .cta { justify-content:center; margin:30px 0 18px; }.hero-note { color:var(--fg3); font-size:12px; }
.playground { margin:16px 0 100px; border:1px solid var(--stroke); border-radius:20px; padding:8px; background:white; box-shadow:0 24px 70px #2420350b; }.demo-tools { padding:12px 16px 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px; font-weight:600; }.demo-themes { display:flex; gap:4px; }.demo-themes button { border:0; border-radius:7px; background:transparent; padding:8px 13px; font:inherit; color:var(--fg2); cursor:pointer; }.demo-themes button[aria-pressed=true] { background:#eeeaf5; color:#57427e; }
.demo-desktop { height:530px; position:relative; overflow:hidden; border-radius:13px; background:#b8bdc5; color:#252735; isolation:isolate; }.demo-wallpaper { position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 25% 115%,#30365a 0%,transparent 58%),radial-gradient(ellipse at 95% 0%,#e3cfc3 0%,transparent 70%),linear-gradient(125deg,#9b9fad,#bdadbb); transition:background .5s; }.demo-desktop[data-theme=graphite] .demo-wallpaper { background:radial-gradient(ellipse at 15% 100%,#30353e,transparent 70%),linear-gradient(120deg,#77838f,#b2bac1); }.demo-desktop[data-theme=neon] .demo-wallpaper { background:radial-gradient(ellipse at 30% 120%,#632caf,transparent 70%),radial-gradient(ellipse at 100% 0%,#154f67,transparent 70%),#17172e; }
.demo-menubar { display:flex; gap:24px; padding:10px 20px; font-size:11px; background:#ffffff26; }.demo-menubar span:last-child { margin-left:auto; }.demo-window { position:absolute; width:60%; left:20%; top:70px; border-radius:12px; background:#f9f9fbe8; box-shadow:0 25px 70px #20203338,inset 0 0 0 1px #ffffff80; overflow:hidden; transition:width .3s,left .3s,top .3s; }.demo-window.maximized { width:96%; left:2%; top:42px; }.demo-window[hidden],.demo-reopen[hidden] { display:none; }.demo-titlebar { height:42px; padding:0 15px; display:flex; align-items:center; gap:18px; background:#ffffff40; font-size:11px; }.demo-lights { display:flex; gap:7px; }.demo-lights button { border:0; padding:0; width:13px; height:13px; border-radius:50%; font:600 11px/13px Arial; cursor:pointer; color:transparent; }.demo-lights button:nth-child(1) { background:#ff6058; }.demo-lights button:nth-child(2) { background:#ffbd2e; }.demo-lights button:nth-child(3) { background:#28c840; }.demo-lights svg { width:9px; height:9px; opacity:0; fill:#075e20; }.demo-lights:hover button:nth-child(1),.demo-lights:focus-within button:nth-child(1) { color:#681b17; }.demo-lights:hover button:nth-child(2),.demo-lights:focus-within button:nth-child(2) { color:#714900; }.demo-lights:hover svg,.demo-lights:focus-within svg { opacity:1; }
.demo-window-body { text-align:center; padding:22px 20px 28px; }.demo-appmark { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px; background:#6b5694; color:#fff; font-size:24px; font-weight:600; }.demo-window-body .eyebrow { font-size:8px; margin:16px 0 10px; }.demo-window-body h2 { margin:0; font-size:34px; font-weight:600; letter-spacing:-.04em; }.demo-window-body>p:not(.eyebrow) { color:#62616a; font-size:12px; }.demo-reset { background:#efedf3; border:1px solid #ddd9e6; border-radius:7px; padding:8px 13px; font:inherit; font-size:10px; color:#514565; cursor:pointer; }.demo-reopen { position:absolute; top:45%; left:50%; transform:translateX(-50%); padding:12px 20px; border:0; border-radius:9px; background:white; color:#423653; cursor:pointer; }
.demo-dock { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; border:1px solid #ffffff50; border-radius:17px; background:#ffffff30; backdrop-filter:blur(18px); padding:10px 15px; box-shadow:0 14px 30px #20203320; }.demo-dock>* { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#fcfcff; color:#65518d; font-size:24px; border:0; transition:transform .2s; }.demo-dock button { background:#6b5694; color:white; cursor:pointer; }.demo-dock>*:hover { transform:translateY(-7px) scale(1.15); }.demo-caption { display:flex; justify-content:space-between; gap:14px; padding:12px 16px 5px; font-size:10px; color:var(--fg3); }.demo-caption [role=status] { color:var(--accent); }
.demo-desktop.stock .demo-wallpaper { background:radial-gradient(ellipse at 60% 100%,#1747ad,transparent 70%),linear-gradient(120deg,#b4dcff,#408de3); }.demo-desktop.stock .demo-dock { bottom:0; width:100%; justify-content:center; border-radius:0; padding:7px; gap:12px; }.demo-desktop.stock .demo-lights button { border-radius:2px; background:#dddde5; color:#4c4c59; }.demo-desktop.stock .demo-lights svg { opacity:1; }.demo-desktop.stock .demo-window { border-radius:5px; }.demo-desktop.stock .demo-menubar { visibility:hidden; }
.home-features { margin:0 0 100px; }.home-features>.eyebrow { text-align:center; }.home-features h2 { font-weight:550; font-size:44px; letter-spacing:-.04em; }.features .card { box-shadow:none; background:transparent; border-top:1px solid var(--stroke); border-radius:0; padding:24px 12px; }.features .card:hover { transform:none; box-shadow:none; }.feature-number { font-size:10px; letter-spacing:.12em; color:var(--accent); }.features .card h3 { margin:28px 0 12px; font-weight:600; font-size:22px; }.showcase .frow { gap:64px; margin-bottom:92px; }.frow h2 { font-size:40px; font-weight:550; letter-spacing:-.045em; }.frow-media img { box-shadow:0 10px 50px #24203517; border:1px solid var(--stroke); }.frow-media img.stack { margin-top:18px; max-height:270px; object-fit:contain; background:#15151b; }.text-link { font-weight:600; font-size:13px; }
.restore-band { margin:30px 0 90px; padding:54px 12%; border-radius:16px; background:#efedf3; text-align:center; }.restore-band h2 { font-size:35px; font-weight:550; margin:20px 0; }.restore-band p { color:var(--fg2); }.how { margin-bottom:90px; }.step { box-shadow:none; background:transparent; }.stepn { box-shadow:none; }.pricing { margin-bottom:90px; }.plan.best { background:#efedf5; box-shadow:inset 0 0 0 1px #c6bbde; }.trial-cta { box-shadow:inset 0 0 0 1px var(--stroke); background:#fff; }.faq { max-width:800px; margin:0 auto 90px; }.faq details { background:transparent; border-bottom:1px solid var(--stroke); border-radius:0; box-shadow:none; }.cta-band { background:transparent; box-shadow:none; padding:40px 0 70px; }.cta-band h2 { font-size:60px; font-weight:550; letter-spacing:-.055em; }.foot { border-top:1px solid var(--stroke); }
@media(max-width:900px) { .top nav { background:#fff; }.home-hero { padding:54px 0 32px; }.demo-desktop { height:470px; }.demo-window { width:78%; left:11%; top:65px; }.demo-tools { flex-wrap:wrap; }.cookies { flex-wrap:wrap; }.cookies span { flex-basis:100%; }.showcase .frow { gap:26px; }.restore-band { padding:32px 24px; } }
@media(max-width:540px) { .home-hero h1 { font-size:58px; }.home-hero .lead { font-size:16px; }.home-hero .cta { gap:10px; }.home-hero .cta .btn { width:100%; }.demo-desktop { height:425px; }.demo-menubar { gap:14px; }.demo-menubar span:nth-child(2) { display:none; }.demo-window { width:92%; left:4%; top:50px; }.demo-window-body h2 { font-size:28px; }.demo-window-body { padding:18px 8px; }.demo-dock { gap:7px; padding:8px; }.demo-dock>* { width:32px; height:32px; font-size:21px; }.demo-caption { flex-direction:column; gap:6px; }.demo-tools { padding:10px; }.demo-themes button { padding:8px 11px; }.home-features h2,.frow h2 { font-size:32px; }.home-features,.playground { margin-bottom:64px; }.cta-band h2 { font-size:44px; }.cookies .btn { font-size:11px; }.restore-band h2 { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
.btn:disabled { opacity:.5; cursor:default; transform:none; box-shadow:none; }

/* Iridescent metal: graphite surfaces, fine reflected edges, cool highlights. */
body {
  background:radial-gradient(ellipse 65% 650px at 13% 0,#4165b71a,transparent),
    radial-gradient(ellipse 55% 700px at 95% 350px,#b464a81a,transparent),var(--bg);
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:repeating-linear-gradient(100deg,#ffffff02 0,#ffffff02 1px,transparent 1px,transparent 5px);
}
:focus-visible { outline-color:#bfd0ff; }
.skip-link { background:var(--surface); color:var(--fg); }
.brand img { filter:drop-shadow(0 0 12px #a49cff40); }
.pill { color:#171c2b!important; box-shadow:inset 0 1px 0 #ffffffa0,0 8px 30px #93a7ff14; }
.btn.primary {
  color:#171c2b; background-size:170% 100%;
  box-shadow:inset 0 1px 0 #ffffffb0,inset 0 -1px 0 #626b9633,0 8px 32px #9bafff18;
  transition:background-position .5s,filter .2s,transform .2s;
}
.btn.primary:hover { color:#171c2b; background-position:100% 50%; filter:brightness(1.08); }
.btn.ghost { background:linear-gradient(135deg,#ffffff0c,#ffffff03),#161821; }
.btn.ghost:hover { background:#242834; }
.panel,.get-panel,.subcard {
  background:var(--metal),#13151d;
  box-shadow:inset 0 1px 0 #ffffff10,inset 0 0 0 1px var(--stroke),0 18px 60px #00000038;
}
.subcard.warn { box-shadow:inset 0 0 0 1px #d6ab5666; }
.badge.ok-badge,.btn.copy.copied,.ok,.okline { color:#9be8c6; }
.pbar { background:#ffffff0b; }
.adminnav,.msg.from-user { background:#202330; }
.denied strong,.badge.danger,.err { color:#ffacbf; }
.t-status.s-open,.ticket-row.s-open .t-status,.kpi.warn b { color:#f1cf8a; }
.t-status.s-answered,.ticket-row.s-answered .t-status { color:#9be8c6; }
.note { color:var(--fg2); }
.cookies {
  background:linear-gradient(135deg,#242836,#171820 75%);
  box-shadow:inset 0 1px 0 #ffffff14,inset 0 0 0 1px #b9c8ff30,0 8px 60px #00000070;
}
input,select,textarea,.bigkey,code.key,.bigcode,.sub-key .k,.linkdev,.pay-sbp,.seg,.step code { background:#0c0f17; }
input::placeholder,textarea::placeholder { color:var(--fg3); }
.tag,.stepn { color:#171c2b; }
.tag.gold { background:var(--grad); }
.home-hero h1 span {
  color:#d7dfff;
  background:linear-gradient(110deg,#f3f7ff 0%,#abcaff 22%,#c3b2f7 43%,#f1bbdb 65%,#f5f7ff 82%,#adcaff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:metal-sheen 16s ease-in-out infinite alternate;
}
@keyframes metal-sheen { to { background-position:100% 50%; } }
.playground {
  border-color:#afbbdf30; background:var(--metal),#161820;
  box-shadow:inset 0 1px 0 #ffffff18,0 24px 70px #00000050,0 0 70px #8caaff08;
}
.demo-themes button[aria-pressed=true] { background:#c0ccff18; color:#e0e5ff; box-shadow:inset 0 0 0 1px #b8c7ff22; }
.demo-desktop { background:#171c2c; color:var(--fg); }
.demo-wallpaper {
  background:radial-gradient(ellipse at 15% 110%,#395caf88,transparent 58%),
    radial-gradient(ellipse at 95% 0%,#d092bd6b,transparent 65%),linear-gradient(125deg,#101b30,#37324c 53%,#191c2a);
}
.demo-wallpaper::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,#c7dcff08 46%,#ffffff12 48%,#ebbeed08 50%,transparent 65%);
}
.demo-desktop[data-theme=graphite] .demo-wallpaper { background:radial-gradient(ellipse at 15% 100%,#66809840,transparent 70%),linear-gradient(120deg,#11151c,#394250,#161b25); }
.demo-desktop[data-theme=neon] .demo-wallpaper { background:radial-gradient(ellipse at 30% 120%,#7938bfa0,transparent 70%),radial-gradient(ellipse at 100% 0%,#226b9290,transparent 70%),#121526; }
.demo-menubar { background:#0b0e2038; border-bottom:1px solid #ffffff10; color:#e1e5f3; }
.demo-window {
  background:linear-gradient(140deg,#323746e8,#1b1e2aea 60%,#292331ed);
  box-shadow:0 25px 70px #03050f80,inset 0 1px 0 #ffffff2b,inset 0 0 0 1px #ffffff20;
}
.demo-titlebar { background:#ffffff04; color:#d5d9e7; border-bottom:1px solid #ffffff08; }
.demo-appmark { background:var(--grad); color:#202435; box-shadow:inset 0 1px 0 #ffffff9c,0 8px 24px #9bafff20; }
.demo-window-body .eyebrow { color:#c6cfff; }
.demo-window-body>p:not(.eyebrow) { color:#c0c5d4; }
.demo-reset { background:#ffffff09; border-color:#ffffff1c; color:#dce2f5; }
.demo-reset:hover { background:#ffffff14; }
.demo-reopen { background:var(--grad); color:#171c2b; }
.demo-dock { border-color:#ffffff30; background:#cad7ff16; box-shadow:inset 0 1px 0 #ffffff22,0 14px 30px #03040a50; }
.demo-dock>* { background:linear-gradient(135deg,#dce7ff,#b9bef0 55%,#e4c1dc); color:#33354d; box-shadow:inset 0 1px 0 #ffffff80; }
.demo-dock button { background:var(--grad); color:#262a40; }
.demo-desktop.stock .demo-wallpaper { background:radial-gradient(ellipse at 60% 100%,#1747ad,transparent 70%),linear-gradient(120deg,#17334f,#2861a0); }
.frow-media img { box-shadow:0 10px 50px #00000040; }
.restore-band { border:1px solid #bdc8ff1c; background:var(--metal),#151720; box-shadow:inset 0 1px 0 #ffffff0b; }
.stepn { box-shadow:inset 0 1px 0 #ffffffa0; }
.plan { background:var(--metal),#14161e; }
.plan.best { background:linear-gradient(130deg,#9eafff15,#ffffff03 45%,#f4bbdf0b),#181b27; box-shadow:inset 0 0 0 1px #bfc8ff55,inset 0 1px 0 #ffffff1c; }
.trial-cta { box-shadow:inset 0 0 0 1px #aebfff38; background:linear-gradient(135deg,#b0c9ff0e,#d1b1df08),#151820; }
.btn:disabled { box-shadow:none; }
@media(max-width:900px) { .top nav { background:#161922; } }
@media(forced-colors:active) { .home-hero h1 span { background:none; -webkit-text-fill-color:currentColor; color:CanvasText; } }