:root {
  --bg: #0e0f12; --bg2: #121317; --card: #15161a; --card2: #1a1b20; --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.12);
  --fg: #ececef; --muted: #a3a4ae; --dim: #6c6d78; --acc: #ff7a3d; --acc-rgb: 255,122,61; --ok: #3fcf8e;
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", Consolas, ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.02em; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.muted { color: var(--muted); }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(14,15,18,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px var(--display); letter-spacing: -.01em; }
.brand b { color: var(--acc); }
.links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--muted); }
.links a:hover { color: var(--fg); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: var(--fg); font-weight: 600; font-size: 15px; transition: background .15s, border-color .15s, filter .15s; }
.btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 9px; }
.btn svg { width: 18px; height: 18px; }

/* hero */
.hero { text-align: center; padding: 84px 0 40px; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 5px 6px 5px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: 13.5px; color: var(--muted); }
.pill:hover { border-color: rgba(var(--acc-rgb),.5); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.pill-go { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--fg); }
.hero h1 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.04; letter-spacing: -.035em; margin: 26px 0 0; font-weight: 700; }
.lead { max-width: 640px; margin: 22px auto 0; font-size: 19px; color: var(--muted); }
.cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.fine { font-size: 13.5px; color: var(--dim); margin-top: 16px; }

/* product shot */
.shot { margin: 60px auto 0; max-width: 1000px; border: 1px solid var(--line2); border-radius: 14px; background: var(--bg2); overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); text-align: left; }
.shot-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #0b0c0e; }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.1); }
.shot-bar span { margin-left: 10px; font-size: 12.5px; color: var(--dim); font-weight: 600; }
.shot-body { display: grid; grid-template-columns: 54px 210px 1fr; height: 400px; }
.shot-rail { border-right: 1px solid var(--line); background: #0b0c0e; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 14px; }
.shot-rail b { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.05); }
.shot-rail b.on { background: rgba(var(--acc-rgb),.18); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb),.4); }
.shot-list { border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
.shot-list em { font-style: normal; font-size: 11px; color: var(--dim); padding: 8px 8px 3px; }
.shot-list b { font-weight: 500; padding: 6px 8px; border-radius: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-list b.on { background: rgba(255,255,255,.07); color: var(--fg); }
.shot-chat { position: relative; padding: 22px 34px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.m.me { align-self: flex-end; background: var(--card2); border: 1px solid var(--line); padding: 9px 14px; border-radius: 14px 14px 4px 14px; }
.m.ai { display: flex; gap: 12px; }
.m.ai p { margin: 2px 0 10px; }
.av { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1px solid var(--line); background: var(--card2) url("/logo.png") no-repeat center/16px; }
.tool { display: flex; align-items: center; gap: 8px; font: 12.5px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; background: var(--card); }
.tool .ok { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.code { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: #0a0b0e; border: 1px solid var(--line); font: 12.5px/1.7 var(--mono); color: #d6d8e0; }
.code .k { color: #ff8f6b; } .code .f { color: #e2b4ff; } .code .n { color: #f5c26b; }
.composer { position: absolute; left: 34px; right: 34px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 8px 0 16px; border: 1px solid var(--line2); border-radius: 14px; background: var(--card); color: var(--dim); font-size: 13.5px; }
.composer i { width: 32px; height: 32px; border-radius: 9px; background: var(--acc); }

/* strip */
.strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; padding: 34px 0; color: var(--dim); font-size: 14px; }
.strip span { width: 100%; text-align: center; font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; }
.strip b { font: 600 17px var(--display); color: #8a8b95; letter-spacing: -.01em; }

/* sections */
.sec { padding: 80px 0 20px; }
.eyebrow { color: var(--acc); font-weight: 600; font-size: 14px; margin: 0 0 10px; }
.sec h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.12; max-width: 640px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feat { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); transition: border-color .15s, background .15s; }
.feat:hover { border-color: var(--line2); background: var(--card2); }
.feat i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--acc-rgb),.1); color: var(--acc); margin-bottom: 16px; }
.feat i svg { width: 20px; height: 20px; }
.feat h3 { font-size: 17px; }
.feat p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.feat.flat { padding: 18px 20px; }
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.steps li { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.steps b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(var(--acc-rgb),.5); color: var(--acc); font-size: 14px; margin-bottom: 16px; }
.steps h3 { font-size: 17px; }
.steps p { color: var(--muted); font-size: 14.5px; margin: 6px 0 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: 15px; }
.ticks li { padding-left: 26px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.provs { display: flex; flex-wrap: wrap; gap: 8px; }
.provs span { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14px; color: var(--muted); }
.faq { margin-top: 30px; display: flex; flex-direction: column; gap: 8px; max-width: 780px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; display: flex; justify-content: space-between; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--dim); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.final { text-align: center; padding: 100px 0 80px; }
.final h2 { font-size: clamp(30px, 4vw, 44px); margin-top: 18px; }
.foot { display: flex; align-items: center; gap: 22px; padding: 26px 0 40px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13.5px; }
.foot .grow { flex: 1; }
.foot a:hover { color: var(--fg); }

@media (max-width: 900px) {
  .links { display: none; }
  .nav-in .btn { margin-left: auto; }
  .grid, .steps { grid-template-columns: 1fr; }
  .grid.two, .split { grid-template-columns: 1fr; }
  .shot-body { grid-template-columns: 1fr; height: 380px; }
  .shot-rail, .shot-list { display: none; }
  .shot-chat { padding: 18px; }
  .composer { left: 18px; right: 18px; }
  .foot { flex-wrap: wrap; }
}

/* ── SpookyScript (1 October - 1 November): night sky, pumpkin orange, witchy purple ── */
.spooky-deco { display: none; }
html.spooky {
  --bg: #0c0812; --bg2: #120c1b; --card: #160e21; --card2: #1d1329; --line: rgba(190,140,255,.12); --line2: rgba(190,140,255,.22);
  --fg: #f3ecff; --muted: #bba9d6; --dim: #7f6d9b; --acc: #ff7a18; --acc-rgb: 255,122,24;
}
html.spooky body { background:
  radial-gradient(900px 500px at 85% -10%, rgba(168,85,247,.16), transparent 60%),
  radial-gradient(700px 400px at 5% 0%, rgba(255,122,24,.08), transparent 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23e9d8ff'%3E%3Ccircle cx='12' cy='30' r='.9'/%3E%3Ccircle cx='70' cy='12' r='.6'/%3E%3Ccircle cx='140' cy='44' r='1'/%3E%3Ccircle cx='200' cy='20' r='.7'/%3E%3Ccircle cx='40' cy='120' r='.6'/%3E%3Ccircle cx='180' cy='110' r='.8'/%3E%3Ccircle cx='100' cy='160' r='.5'/%3E%3Ccircle cx='220' cy='190' r='.7'/%3E%3C/g%3E%3C/svg%3E") repeat,
  var(--bg); }
html.spooky .nav { background: rgba(12,8,18,.82); }
html.spooky .hero h1, html.spooky .sec h2, html.spooky .final h2 { font-family: "Ink Free", "Segoe Print", "Comic Sans MS", cursive; letter-spacing: 0; }
html.spooky .hero h1 { color: #ffe2c4; text-shadow: 0 0 28px rgba(255,122,24,.35), 0 3px 0 #3b1a55; }
html.spooky .btn.primary { background: linear-gradient(135deg, #ff8a1f, #e8590c 55%, #a855f7); border-color: transparent; box-shadow: 0 6px 24px rgba(255,122,24,.3); }
html.spooky .feat i, html.spooky .steps b { color: #ff9a3d; }
html.spooky .feat:hover { border-color: rgba(168,85,247,.45); }
html.spooky .shot { box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 60px rgba(168,85,247,.18), 0 0 0 1px rgba(168,85,247,.25); }
html.spooky .strip b { color: #9f8cc0; }
html.spooky .pill-dot { background: #a855f7; box-shadow: 0 0 10px #a855f7; }
html.spooky .spooky-deco { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.spooky-deco i { position: absolute; display: block; }
.spooky-deco .web { top: 60px; width: 150px; height: 150px; opacity: .22; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23e2d6ff' stroke-width='.9'%3E%3Cpath d='M0 0 L120 70 M0 0 L95 110 M0 0 L60 120 M0 0 L120 30 M0 0 L20 120'/%3E%3Cpath d='M22 13 C28 22 26 30 18 36 M40 24 C52 40 48 56 34 66 M62 36 C78 58 72 82 50 96 M84 49 C100 72 94 100 70 116'/%3E%3Cpath d='M38 22 C34 32 28 38 18 40 M70 40 C64 58 52 70 34 74 M104 60 C96 86 80 102 56 108'/%3E%3C/svg%3E"); }
.spooky-deco .web.l { left: 0; }
.spooky-deco .web.r { right: 0; transform: scaleX(-1); }
.spooky-deco .moon { top: 90px; right: 8%; width: 110px; height: 110px; border-radius: 50%; opacity: .45; z-index: -1;
  background: radial-gradient(circle at 35% 35%, #fff6dc, #f3d99a 55%, #c9a35a); box-shadow: 0 0 80px rgba(255,230,170,.35); }
.spooky-deco .bat { width: 34px; height: 16px; opacity: .7; animation: sp-bat linear infinite;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 24'%3E%3Cpath fill='%231a1024' stroke='%23a855f7' stroke-width='1.2' d='M0 6c6-6 14-6 18 2 2-4 6-4 8-1 2-3 6-3 8 1 4-8 12-8 18-2-6 1-8 6-8 10-4-3-8-3-10 1-2-3-4-4-6-2-2-2-4-1-6 2-2-4-6-4-10-1 0-4-2-9-12-10z'/%3E%3C/svg%3E"); }
.spooky-deco .b1 { top: 18%; animation-duration: 24s; animation-delay: -3s; }
.spooky-deco .b2 { top: 42%; animation-duration: 32s; animation-delay: -15s; transform: scale(.7); }
.spooky-deco .b3 { top: 70%; animation-duration: 40s; animation-delay: -27s; transform: scale(.85); }
.spooky-deco .ghost { right: -40px; bottom: 22%; width: 40px; height: 48px; opacity: .55; animation: sp-peek 13s ease-in-out infinite;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cpath fill='%23efe8ff' fill-opacity='.9' d='M17 1C8 1 2 8 2 17v21l5-4 5 4 5-4 5 4 5-4 5 4V17C32 8 26 1 17 1z'/%3E%3Ccircle cx='12' cy='16' r='2.4' fill='%231a1024'/%3E%3Ccircle cx='22' cy='16' r='2.4' fill='%231a1024'/%3E%3Cellipse cx='17' cy='24' rx='2.6' ry='3.2' fill='%231a1024'/%3E%3C/svg%3E"); }
.spooky-deco .spider { top: 60px; left: 22%; width: 1px; background: rgba(226,214,255,.45); animation: sp-drop 10s ease-in-out infinite; }
.spooky-deco .spider::after { content: ""; position: absolute; left: -12px; bottom: -18px; width: 24px; height: 21px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cg stroke='%231a1024' stroke-width='2.2' stroke-linecap='round' fill='none'%3E%3Cpath d='M14 15 6 8 2 12M14 18 4 17 1 22M15 21 7 25 5 31M26 15 34 8 38 12M26 18 36 17 39 22M25 21 33 25 35 31'/%3E%3C/g%3E%3Cellipse cx='20' cy='19' rx='8' ry='9' fill='%231a1024' stroke='%23a855f7' stroke-width='1'/%3E%3Ccircle cx='20' cy='9' r='5' fill='%231a1024' stroke='%23a855f7' stroke-width='1'/%3E%3Ccircle cx='18' cy='8.5' r='1.3' fill='%23ff7a18'/%3E%3Ccircle cx='22' cy='8.5' r='1.3' fill='%23ff7a18'/%3E%3C/svg%3E"); }
@keyframes sp-bat { 0% { left: -50px; margin-top: 0; } 25% { margin-top: -20px; } 50% { margin-top: 12px; } 75% { margin-top: -14px; } 100% { left: calc(100% + 50px); margin-top: 0; } }
@keyframes sp-peek { 0%, 60%, 100% { right: -40px; } 70%, 90% { right: -6px; } }
@keyframes sp-drop { 0%, 100% { height: 30px; } 45% { height: 140px; } 60% { height: 128px; } }
@media (prefers-reduced-motion: reduce) { .spooky-deco .bat, .spooky-deco .ghost, .spooky-deco .spider { animation: none; display: none; } }
@media (max-width: 900px) { .spooky-deco .web, .spooky-deco .moon { display: none; } }

/* live stats, release notes, phone menu */
.stats-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 30px auto 0; }
.stats-row div { min-width: 130px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); display: flex; flex-direction: column; align-items: center; }
.stats-row b { font: 700 24px var(--display); letter-spacing: -.02em; }
.stats-row span { font-size: 12.5px; color: var(--dim); }
.notes { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0 22px; }
.notes summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.notes summary::-webkit-details-marker { display: none; }
.notes summary::after { content: "+"; margin-left: auto; color: var(--dim); font-size: 20px; line-height: 1; }
.notes[open] summary::after { content: "\2212"; }
.notes-date { font-weight: 400; font-size: 13px; color: var(--dim); }
.notes-body { max-height: 520px; overflow-y: auto; color: var(--muted); font-size: 14.5px; padding-right: 6px; }
.notes-body h4 { color: var(--fg); margin: 18px 0 6px; font-size: 15px; }
.notes-body ul { margin: 0; padding-left: 20px; }
.notes-body li { margin: 4px 0; }
.notes-body code { font-family: var(--mono); font-size: 13px; background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 5px; }
.notes-body a { color: var(--acc); }
.notes .btn { margin: 16px 0 20px; }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line2); border-radius: 10px; background: none; color: var(--fg); cursor: pointer; place-items: center; }
.menu-btn svg { width: 20px; height: 20px; }
.mobile-nav { display: flex; flex-direction: column; padding: 6px 20px 14px; border-top: 1px solid var(--line); }
.mobile-nav[hidden] { display: none; }
.mobile-nav a { padding: 12px 0; color: var(--muted); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .menu-btn { display: grid; } .nav-in .btn { margin-left: auto; } .stats-row div { min-width: 0; flex: 1 1 40%; } }

[hidden] { display: none !important; }

/* Browser preview */
.bw { border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; background: var(--bg2); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.bw-bar { display: flex; gap: 6px; padding: 10px 12px; background: #0b0c0e; border-bottom: 1px solid var(--line); }
.bw-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.12); }
.bw-body { display: grid; grid-template-columns: 150px 1fr; height: 330px; }
.bw-side { padding: 10px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.bw-url { height: 22px; border-radius: 7px; background: rgba(255,255,255,.06); }
.bw-pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.bw-pins i, .bw-t i { display: grid; place-items: center; background: #fff; border-radius: 8px; aspect-ratio: 1; }
.bw-pins img, .bw-t img { width: 62%; height: 62%; object-fit: contain; }
.bw-tab { height: 22px; border-radius: 6px; background: rgba(255,255,255,.04); }
.bw-tab.on { background: rgba(255,255,255,.09); box-shadow: inset 2px 0 0 var(--acc); }
.bw-main { padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bw-h { font: 650 18px var(--display); }
.bw-search { width: 80%; height: 28px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card); }
.bw-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 8px; width: 100%; }
.bw-t { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bw-t i { width: 34px; border-radius: 50%; }
.bw-t b { font-size: 10px; font-weight: 500; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) { .bw-body { grid-template-columns: 1fr; } .bw-side { display: none; } .bw-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── team pages ───────────────────────────────────────────────────────────── */
.tm-page { position: relative; }
.tm-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(800px 420px at 50% -8%, rgba(var(--acc-rgb),.14), transparent 65%), radial-gradient(600px 400px at 90% 30%, rgba(139,108,255,.08), transparent 60%); }
.team-wrap { padding: 48px 0 70px; min-height: 72vh; }
.tm-hero { text-align: center; margin-bottom: 36px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tm-hero h2 { font-size: clamp(30px, 4.4vw, 46px); }
.tm-hero .muted { margin: 4px 0 0; }
.tm-stack { display: flex; margin-bottom: 14px; }
.tm-stack img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--bg); margin-left: -10px; background: var(--card2); object-fit: cover; }
.tm-stack img:first-child { margin-left: 0; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tc { --tm: var(--acc); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 22px 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); overflow: hidden; transition: transform .2s, border-color .2s; }
.tc::before { content: ""; position: absolute; inset: 0 0 auto; height: 90px; background: linear-gradient(180deg, color-mix(in srgb, var(--tm) 26%, transparent), transparent); }
.tc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tm) 55%, transparent); }
.tc > * { position: relative; }
.tc-av { position: relative; width: 84px; height: 84px; margin-bottom: 6px; }
.tc-av img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; position: relative; background: var(--card2); }
.tc b { font: 700 19px var(--display); letter-spacing: -.01em; }
.tc p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.tc-more { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--tm); }
.pf-ring { position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(from 0deg, var(--tm), color-mix(in srgb, var(--tm) 20%, transparent), var(--tm)); animation: pf-spin 6s linear infinite; }
.pf-ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--card); }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.tm-st { position: absolute; right: 2px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; border: 4px solid var(--card); background: #80848e; z-index: 2; }
.tm-st.s-online { background: #23a55a; } .tm-st.s-idle { background: #f0b232; } .tm-st.s-dnd { background: #f23f43; }
.bdg { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line2); }
.bdg.main { color: var(--fg); background: color-mix(in srgb, var(--tm) 20%, transparent); border-color: color-mix(in srgb, var(--tm) 55%, transparent); }
.pf-wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.pf { --tm: var(--acc); border-radius: 24px; border: 1px solid var(--line); background: var(--card); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.pf-banner { position: relative; height: 190px; background: linear-gradient(135deg, var(--tm), color-mix(in srgb, var(--tm) 30%, #000)); background-size: cover; background-position: center; }
.pf-glow { position: absolute; inset: 0; background: radial-gradient(400px 160px at 20% 120%, rgba(0,0,0,.45), transparent), linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35)); }
.pf-body { padding: 0 32px 32px; }
.pf-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: -66px; }
.pf-av { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.pf-av img { position: relative; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; background: var(--card2); }
.pf-av .tm-st { width: 26px; height: 26px; border-width: 5px; right: 6px; bottom: 8px; }
.pf-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
.pf-name { margin: 18px 0 0; font-size: clamp(32px, 5vw, 44px); letter-spacing: -.03em; }
.pf-user { margin: 2px 0 0; color: var(--dim); font-size: 15px; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.pf-live .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: #80848e; }
.pf-live .dot.s-online { background: #23a55a; box-shadow: 0 0 0 4px rgba(35,165,90,.15); } .pf-live .dot.s-idle { background: #f0b232; } .pf-live .dot.s-dnd { background: #f23f43; }
.pf-live em { font-style: italic; color: var(--fg); }
.pf-about { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.pf-about h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.pf-about p { margin: 10px 0 0; font-size: 16px; line-height: 1.75; color: var(--muted); }
.pf-rest h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin-bottom: 10px; }
.pf-rest-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pf-rest-row a { --tm: var(--acc); display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.pf-rest-row a:hover { border-color: color-mix(in srgb, var(--tm) 55%, transparent); }
.pf-rest-row img { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--tm); }
.pf-rest-row span { display: flex; flex-direction: column; min-width: 0; }
.pf-rest-row i { font-style: normal; font-size: 12.5px; color: var(--dim); }
.tm-back { color: var(--muted); font-size: 14px; text-align: center; }
.tm-back:hover { color: var(--fg); }
@media (max-width: 640px) { .pf-body { padding: 0 20px 24px; } .pf-top { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .pf-ring { animation: none; } }

/* ── homepage touches: hero grid, logo marquee, card spotlight, team strip ── */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: -40px -10vw 0; z-index: -1; pointer-events: none;
  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: 44px 44px; -webkit-mask-image: radial-gradient(600px 340px at 50% 30%, #000, transparent); mask-image: radial-gradient(600px 340px at 50% 30%, #000, transparent); }
.hero::after { content: ""; position: absolute; left: 50%; top: 60px; width: 520px; height: 260px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--acc-rgb),.18), transparent); filter: blur(10px); animation: orb 9s ease-in-out infinite alternate; }
@keyframes orb { from { transform: translateX(-56%) scale(1); } to { transform: translateX(-44%) scale(1.12); } }
.marq { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marq-track { display: flex; gap: 14px; width: max-content; animation: marq 40s linear infinite; }
.marq:hover .marq-track { animation-play-state: paused; }
.marq-track span { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 14px; color: var(--muted); white-space: nowrap; }
.marq-track img { width: 26px; height: 26px; border-radius: 8px; background: #fff; padding: 4px; }
@keyframes marq { to { transform: translateX(-50%); } }
.feat { position: relative; overflow: hidden; }
.feat::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--acc-rgb),.12), transparent 60%); }
.feat:hover::after { opacity: 1; }
.made { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.made a { --tm: var(--acc); display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); transition: border-color .2s, transform .2s; }
.made a:hover { border-color: color-mix(in srgb, var(--tm) 60%, transparent); transform: translateY(-2px); }
.made img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--tm); }
.made span { display: flex; flex-direction: column; text-align: left; }
.made i { font-style: normal; font-size: 12.5px; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .marq-track, .hero::after { animation: none; } }

/* ── admin ───────────────────────────────────────────────────────────────── */
.adm-tag { font-style: normal; font-size: 11px; font-weight: 600; color: var(--dim); border: 1px solid var(--line2); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.adm-main { padding: 40px 0 70px; }
.adm-login { max-width: 380px; margin: 8vh auto; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.adm-login form { display: flex; gap: 8px; margin-top: 8px; }
.adm-in { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); font: inherit; font-size: 14px; outline: none; }
textarea.adm-in { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.adm-in:focus { border-color: var(--acc); }
.adm-err { color: #ff8a9a; font-size: 13px; min-height: 1em; margin: 4px 0 0; }
.adm-warn { font-size: 13px; color: #f0c674; background: rgba(240,180,64,.08); border: 1px solid rgba(240,180,64,.3); padding: 10px 12px; border-radius: 10px; }
.adm-cols { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.adm-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.adm-h h2 { font-size: 22px; }
.adm-list { display: flex; flex-direction: column; gap: 6px; }
.adm-item { display: flex; flex-direction: column; align-items: flex-start; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; text-align: left; font: inherit; }
.adm-item:hover, .adm-item.on { border-color: var(--acc); }
.adm-item span { font-size: 12.5px; color: var(--dim); }
.adm-form { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.adm-form h3 { font-size: 18px; }
.adm-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.adm-form label span { font-weight: 400; font-size: 12px; color: var(--dim); }
.adm-row { display: flex; gap: 8px; align-items: center; }
.adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-preview { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); }
.adm-preview img { border-radius: 50%; }
.adm-preview div { display: flex; flex-direction: column; }
.adm-preview span { font-size: 12.5px; color: var(--dim); }
.adm-actions .grow { flex: 1; }
.adm-del { color: #ff8a9a; }
@media (max-width: 860px) { .adm-cols, .adm-grid2 { grid-template-columns: 1fr; } }

.adm-login .btn { white-space: nowrap; flex: 0 0 auto; }

/* /team, grouped by rank */
.tm-group { margin-top: 34px; }
.tm-group h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg); }
.tm-group h3 i { width: 10px; height: 10px; border-radius: 3px; background: var(--tm); box-shadow: 0 0 12px var(--tm); }
.tm-group h3 span { font-size: 12px; font-weight: 600; color: var(--dim); letter-spacing: 0; }
.tm-group h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* VoidScript² */
.tb-name .sq, .title .sq, .brand .sq, sup.sq { font-size: .62em; font-weight: 800; margin-left: 1px; vertical-align: super; line-height: 0; background: var(--grad, linear-gradient(135deg, #ff7a3d, #ffb36b)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* VoidScript² section: a little Playtest window */
.v2m { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.02); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.v2m .bw-bar { display: flex; align-items: center; gap: 6px; }
.v2m .bw-bar span { margin-left: 8px; font-size: 12px; color: var(--dim); }
.v2m-body { padding: 14px; }
.v2m-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.v2m-tabs b { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); }
.v2m-tabs b.on { color: var(--fg); border-color: var(--acc, #ff7a3d); }
.v2m-out { display: flex; flex-direction: column; gap: 4px; font: 12px/1.5 ui-monospace, Consolas, monospace; padding: 10px; border-radius: 10px; background: rgba(0,0,0,.3); }
.v2m-out span { color: var(--dim); padding-left: 8px; border-left: 2px solid transparent; }
.v2m-out .e { color: #f7a5b3; border-left-color: #f2637a; }
.v2m-out .w { color: #f3d08a; border-left-color: #f0b440; }
.v2m-out em { font-style: normal; font-family: inherit; margin-left: 8px; font-size: 11px; color: var(--acc, #ff7a3d); }