html { scroll-behavior: smooth; }
#top, #inside, #why, #security, #notify { scroll-margin-top: 112px; }

:root {
  color-scheme: dark;
  --bg: #07070a;
  --bg-2: #0b0a10;
  --panel: rgba(19, 18, 25, 0.72);
  --panel-strong: rgba(17, 16, 23, 0.9);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.15);
  --text: #f7f5fb;
  --muted: #aaa5b3;
  --muted-2: #77717f;
  --accent: #a88df0;
  --accent-2: #6e5ca8;
  --accent-soft: rgba(147, 122, 218, 0.16);
  --success: #72d59a;
  --shadow: 0 28px 80px rgba(0,0,0,.48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 8%, rgba(85, 57, 128, .15), transparent 28%),
    radial-gradient(circle at 12% 52%, rgba(71, 58, 100, .10), transparent 26%),
    linear-gradient(180deg, #08080c 0%, #07070a 58%, #09080d 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "liga" 0, "calt" 0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }

.ambient { position: fixed; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: -1; opacity: .24; }
.ambient-a { width: 430px; height: 430px; background: #6b4ea4; right: -180px; top: 280px; }
.ambient-b { width: 360px; height: 360px; background: #3f355a; left: -180px; top: 920px; opacity: .15; }

.section-shell { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }
.glass { background: rgba(14, 13, 19, .72); border: 1px solid var(--line); backdrop-filter: blur(22px) saturate(125%); -webkit-backdrop-filter: blur(22px) saturate(125%); }
.glass-heavy { background: linear-gradient(145deg, rgba(25, 23, 31, .92), rgba(12, 11, 17, .96)); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(26px); }

.site-header {
  position: sticky;
  top: 14px;
  z-index: 30;
  width: min(1180px, calc(100% - 28px));
  margin: 14px auto 0;
  min-height: 64px;
  padding: 0 12px 0 16px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 26px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.brand { display:flex; align-items:center; gap:10px; font-weight: 760; letter-spacing: -.02em; }

.spaces-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.brand-mark .spaces-logo,
.tiny-s .spaces-logo,
.intro-mark .spaces-logo,
.rail-pfp-art .spaces-logo,
.space-pfp .spaces-logo,
.welcome-mark .spaces-logo,
.notify-orb .spaces-logo {
  width: 76%;
  height: 76%;
}
.intro-mark .spaces-logo { width: 82%; height: 82%; }
.rail-pfp-art .spaces-logo,
.space-pfp .spaces-logo { width: 84%; height: 84%; }

.brand-mark, .tiny-s { overflow:hidden;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(150,120,220,.11));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-weight: 800;
}
.brand-word { font-size: 16px; }
.beta-chip { font-size: 9px; letter-spacing: .14em; color: #b9b2c4; border: 1px solid var(--line); padding: 5px 7px; border-radius: 999px; font-weight: 700; }
.nav-links { display: flex; align-items:center; gap: 24px; margin-left: auto; }
.nav-links a { color: #aaa5b2; font-size: 13px; transition: color .2s ease, transform .2s ease; }
.nav-links a:hover { color: white; transform: translateY(-1px); }
.header-cta { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.92); color:#111017; font-size: 12px; font-weight: 780; }

.hero { min-height: 790px; padding: 116px 0 74px; display:grid; grid-template-columns: .86fr 1.14fr; align-items:center; gap: 48px; }
.eyebrow, .section-kicker { color: #a89faf; font-size: 10px; letter-spacing: .18em; font-weight: 760; }
.eyebrow { display:flex; align-items:center; gap:8px; margin-bottom: 21px; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 14px rgba(114,213,154,.5); }
.hero h1 { margin: 0; font-size: clamp(58px, 6.6vw, 94px); line-height: .93; letter-spacing: -.066em; font-weight: 760; }
.hero h1 span { background: linear-gradient(90deg, #f7f4fb 0%, #b6a2e9 62%, #8173a5 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lede { max-width: 520px; margin: 29px 0 0; color: #b1acb8; line-height: 1.67; font-size: 17px; letter-spacing: -.01em; }
.hero-actions { display:flex; gap: 11px; margin-top: 32px; flex-wrap: wrap; }
.button { min-height: 48px; display:inline-flex; align-items:center; justify-content:center; gap:18px; padding: 0 18px; border-radius: 14px; font-size: 13px; font-weight: 730; border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: #f4f1f7; color:#0e0d13; border-color:#fff; }
.button-secondary { background: rgba(255,255,255,.035); color:#c9c4cf; }
.button-secondary:hover { border-color: var(--line-strong); background: rgba(255,255,255,.055); }
.hero-trust { display:flex; gap:18px; margin-top: 24px; flex-wrap: wrap; color:#7e7886; font-size: 11px; }
.hero-trust span { display:flex; align-items:center; gap:6px; }
.hero-trust i { width:4px; height:4px; border-radius:50%; background:#696171; }

.app-stage { position: relative; perspective: 1300px; }
.app-glow { position:absolute; inset: 12% 5% -10%; background: radial-gradient(circle, rgba(130,95,190,.22), transparent 62%); filter: blur(42px); }
.app-window { position: relative; overflow:hidden; border-radius: 24px; transform: rotateY(-4deg) rotateX(1.5deg); transform-origin:center; transition: transform .45s cubic-bezier(.2,.75,.2,1); box-shadow: 0 50px 130px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.02); }
.app-stage:hover .app-window { transform: rotateY(-1.25deg) rotateX(.4deg) translateY(-5px); }
.app-titlebar { height: 46px; display:flex; align-items:center; padding:0 13px; border-bottom:1px solid rgba(255,255,255,.055); background:rgba(8,8,12,.82); }
.tiny-s { width: 23px; height: 23px; border-radius:6px; font-size:10px; }
.titlebar-name { font-size:10px; color:#837e89; margin-left:9px; }
.window-dots { margin-left:auto; display:flex; gap:10px; }
.window-dots span { width:9px; height:9px; border-radius:50%; background:#2d2b32; }
.app-layout { display:grid; grid-template-columns: 58px 184px 1fr; min-height: 472px; }
.space-rail { padding: 13px 8px; background:rgba(8,8,12,.88); border-right:1px solid rgba(255,255,255,.05); display:flex; flex-direction:column; align-items:center; gap:10px; }
.rail-home,.rail-avatar,.rail-add { width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#18171d;border:1px solid rgba(255,255,255,.055);font-size:12px;color:#938e9b;position:relative;transition:.2s ease; }
.rail-avatar.active { background:linear-gradient(145deg,#7a68ae,#453b62); color:white; border-color:rgba(180,160,230,.3); }
.rail-avatar.active::before { content:""; position:absolute; left:-10px; width:3px; height:21px; background:#eeeaf4; border-radius:10px; }
.rail-add { margin-top:auto; overflow:hidden; }
.rail-add .grid-four { position:absolute; font-size:27px; opacity:.22; color:#ac94ec; transform:scale(1.2); }
.rail-add b { position:relative; z-index:1; font-size:16px; color:#d6cfdf; }
.channel-rail { background:rgba(13,12,18,.88); border-right:1px solid rgba(255,255,255,.05); padding: 11px; display:flex; flex-direction:column; }
.space-head { display:grid; grid-template-columns:32px 1fr auto; gap:9px; align-items:center; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.05); }
.space-pfp,.mini-pfp { display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#64558e,#362f4a);font-weight:800;font-size:11px; }
.space-pfp { width:32px;height:32px; }
.space-head strong { display:block;font-size:10px; }
.space-head small { display:block;font-size:8px;color:#756f7c;margin-top:2px; }
.space-head>span { color:#716b78;font-size:10px; }
.channel-group { margin-top:15px; }
.channel-label { font-size:7px;letter-spacing:.16em;color:#615c68;font-weight:800;margin:0 7px 6px; }
.channel { color:#77717f;font-size:9px;padding:7px 8px;border-radius:7px;margin-bottom:2px; }
.channel.active { color:#d8d3dd;background:rgba(255,255,255,.055); }
.account-pill { margin-top:auto; border:1px solid rgba(255,255,255,.055); border-radius:11px; background:rgba(255,255,255,.025); padding:7px; display:flex;align-items:center;gap:8px; }
.mini-pfp { width:28px;height:28px;position:relative; }
.mini-pfp span { position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:#52cc83;border:2px solid #131218; }
.account-pill b { display:block;font-size:8px; }.account-pill small{display:block;font-size:7px;color:#68626f;margin-top:2px;}
.app-content { min-width:0; background: radial-gradient(circle at 75% 15%, rgba(91,69,130,.08), transparent 28%), rgba(10,9,14,.79); }
.content-topbar { height:55px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;padding:0 16px; }
.content-topbar strong { display:block;font-size:10px; }.content-topbar small{display:block;font-size:8px;color:#645f6b;margin-top:2px;}.top-icons{margin-left:auto;color:#68636d;font-size:11px;letter-spacing:6px;}
.content-body { padding:18px; }
.welcome-card { min-height:110px;border-radius:15px;padding:18px;background:linear-gradient(120deg,rgba(116,86,165,.17),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:14px; }
.welcome-mark { width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#8e78c7,#4a3e69);font-size:20px;font-weight:800;box-shadow:0 12px 28px rgba(63,44,88,.3); }
.welcome-card small{font-size:7px;letter-spacing:.13em;color:#80798a}.welcome-card h3{font-size:17px;margin:3px 0 3px;letter-spacing:-.03em}.welcome-card p{font-size:8px;color:#746f7b;margin:0;}
.preview-columns { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px; }
.preview-card { min-height:130px;border-radius:13px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.022);padding:13px; }
.card-icon{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(255,255,255,.07);border-radius:8px;color:#9d89d1;font-size:10px;margin-bottom:22px}.preview-card strong{display:block;font-size:9px}.preview-card p{font-size:7.5px;line-height:1.55;color:#6b6572;margin:5px 0 0;}

.signal-strip { border-block:1px solid rgba(255,255,255,.05); min-height:84px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; max-width:1440px; margin:0 auto; }
.signal-strip div { height:100%; display:flex;align-items:center;justify-content:center;gap:12px;border-right:1px solid rgba(255,255,255,.05);color:#8c8693;font-size:11px;letter-spacing:.01em; }
.signal-strip div:last-child { border-right:0; }.signal-strip span{color:#554f5b;font-size:9px;}

.feature-section { padding: 130px 0 118px; }
.section-heading { max-width:750px; }
.section-heading h2,.security-card h2,.notify-card h2 { margin:12px 0 0;font-size:clamp(38px,5vw,64px);line-height:1.03;letter-spacing:-.052em;font-weight:690; }
.section-heading p { color:#89838f;max-width:570px;font-size:15px;line-height:1.7;margin:19px 0 0; }
.feature-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:54px; }
.feature-card { min-height:310px;padding:26px;border-radius:22px;border:1px solid rgba(255,255,255,.065);background:linear-gradient(145deg,rgba(255,255,255,.033),rgba(255,255,255,.012));position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.feature-card:hover { transform:translateY(-4px);border-color:rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(255,255,255,.047),rgba(255,255,255,.016)); }
.feature-wide { grid-column:1 / -1;min-height:370px;display:grid;grid-template-columns:1fr .9fr;gap:45px;align-items:center; }
.feature-number { position:absolute;top:23px;right:24px;color:#4f4a55;font-size:9px;letter-spacing:.1em; }
.feature-card h3 { margin:16px 0 0;font-size:27px;line-height:1.16;letter-spacing:-.036em;max-width:460px; }
.feature-card p { margin:13px 0 0;color:#87818d;line-height:1.65;font-size:13px;max-width:500px; }
.feature-icon { width:44px;height:44px;display:grid;place-items:center;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(150,120,220,.07);color:#a88df0;font-size:16px;margin-top:48px; }
.mini-space-demo { min-height:250px;border:1px solid rgba(255,255,255,.065);border-radius:18px;background:#0d0c12;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.34); }
.mini-banner { height:78px;background:radial-gradient(circle at 60% 40%,rgba(142,112,198,.25),transparent 38%),linear-gradient(120deg,#15121e,#0d0c12);border-bottom:1px solid rgba(255,255,255,.055); }
.mini-profile-row { display:flex;align-items:center;gap:13px;padding:0 18px;margin-top:-22px; }
.mini-profile { width:56px;height:56px;border-radius:17px;border:5px solid #0d0c12;background:linear-gradient(145deg,#7d68b1,#403657);display:grid;place-items:center;font-weight:800; }
.mini-profile-row b{display:block;font-size:12px;margin-top:23px}.mini-profile-row small{display:block;color:#6c6673;font-size:9px;margin-top:3px;}.mini-chip-row{display:flex;gap:7px;padding:21px 18px}.mini-chip-row span{font-size:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.06);border-radius:8px;color:#77717d;background:rgba(255,255,255,.02);}

.manifesto-section { border-block:1px solid rgba(255,255,255,.05); background:linear-gradient(180deg,rgba(93,69,132,.05),transparent); }
.manifesto-inner { padding: 120px 0; }
.manifesto-inner blockquote { margin:17px 0 25px;max-width:980px;font-size:clamp(38px,5.5vw,72px);line-height:1.04;letter-spacing:-.057em;font-weight:610; }
.manifesto-inner p { max-width:690px;color:#8c8692;line-height:1.75;font-size:14px; }

.security-section { padding:118px 0; }
.security-card { border-radius:27px;padding:48px;display:grid;grid-template-columns:1fr .8fr;gap:58px;align-items:center; }
.security-card h2 { font-size:clamp(36px,4.4vw,56px);max-width:650px; }
.security-card>div>p { color:#89838f;line-height:1.68;font-size:14px;max-width:600px; }
.security-list { display:flex;flex-direction:column;gap:9px; }
.security-list>div { display:flex;align-items:center;gap:13px;border:1px solid rgba(255,255,255,.065);border-radius:14px;padding:13px;background:rgba(255,255,255,.022); }
.security-list>div>span { width:29px;height:29px;border-radius:10px;display:grid;place-items:center;color:#84dba3;background:rgba(69,151,98,.1);border:1px solid rgba(105,206,142,.12);font-size:11px; }
.security-list p{margin:0}.security-list b{display:block;font-size:11px}.security-list small{display:block;color:#6f6975;font-size:9px;margin-top:3px;}

.notify-section { padding: 32px 0 126px; }
.notify-card { position:relative;overflow:hidden;text-align:center;border:1px solid rgba(255,255,255,.075);border-radius:30px;padding:78px 28px 66px;background:radial-gradient(circle at 50% 0%,rgba(125,92,181,.17),transparent 44%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));box-shadow:0 32px 90px rgba(0,0,0,.32); }
.notify-orb { width:62px;height:62px;margin:0 auto 28px;display:grid;place-items:center;border-radius:19px;background:linear-gradient(145deg,#806bb5,#44395e);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 44px rgba(85,59,119,.31);font-weight:800;font-size:22px; }
.notify-card h2 { max-width:760px;margin-inline:auto;font-size:clamp(40px,5vw,63px); }
.notify-card>p { color:#918a98;max-width:570px;margin:18px auto 0;line-height:1.65;font-size:14px; }
.waitlist-form { display:grid;grid-template-columns:1fr auto;max-width:570px;margin:30px auto 0;padding:5px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(5,5,8,.64);box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.waitlist-form input { width:100%;background:transparent;border:0;outline:0;color:white;padding:0 14px;font-size:13px;min-height:48px; }
.waitlist-form input::placeholder { color:#5f5966; }
.waitlist-form button { min-width:132px;border:0;border-radius:12px;background:#f2eef6;color:#111016;font-weight:780;font-size:12px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:transform .18s ease,opacity .18s ease; }
.waitlist-form button:hover { transform:translateY(-1px); }.waitlist-form button:disabled{opacity:.55;cursor:wait;transform:none;}
.button-arrow{font-size:15px}.form-status{min-height:24px;margin-top:12px;font-size:11px;color:#8d8793}.form-status.success{color:#7fd79e}.form-status.error{color:#e18f9c}.privacy-line{display:block;color:#5f5966;font-size:9px;margin-top:2px}.privacy-line a{color:#88818e;text-decoration:underline;text-underline-offset:2px}.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}.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}

.footer { min-height:112px;border-top:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:space-between;gap:20px; }
.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand strong{display:block;font-size:12px}.footer-brand small{display:block;color:#5f5965;font-size:9px;margin-top:3px}.footer-links{display:flex;align-items:center;gap:18px;color:#67616d;font-size:10px}.footer-links a:hover{color:#a8a1ae}

.reveal { opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay { transition-delay:.12s; }

@media (max-width: 980px) {
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; padding-top:92px; }
  .hero-copy { max-width:760px; }
  .app-stage { width:min(780px,100%);margin:8px auto 0; }
  .feature-wide { grid-template-columns:1fr; }
  .security-card { grid-template-columns:1fr; }
  .signal-strip { grid-template-columns:repeat(2,1fr); }
  .signal-strip div:nth-child(2){border-right:0}.signal-strip div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.05)}
}

@media (max-width: 690px) {
  .section-shell { width:min(100% - 28px,1180px); }
  .site-header { top:8px;margin-top:8px;min-height:58px;border-radius:15px; }
  .beta-chip { display:none; }
  .header-cta { margin-left:auto; }
  .hero { min-height:auto;padding:82px 0 58px;gap:42px; }
  .hero h1 { font-size:clamp(54px,16vw,76px); }
  .hero-lede { font-size:15px; }
  .hero-actions { flex-direction:column;align-items:stretch; }
  .button { width:100%; }
  .app-window { transform:none!important;border-radius:18px; }
  .app-layout { grid-template-columns:48px 130px 1fr; min-height:390px; }
  .channel-rail { padding:8px; }
  .space-head { grid-template-columns:28px 1fr; }.space-head>span{display:none}.space-pfp{width:28px;height:28px}.space-head small{display:none}
  .channel { font-size:8px;padding:6px }.channel-label{font-size:6px}.account-pill>div:last-child{display:none}.account-pill{justify-content:center}.mini-pfp{width:26px;height:26px}
  .content-body { padding:10px; }.welcome-card{padding:12px;min-height:92px}.welcome-mark{width:44px;height:44px;border-radius:13px}.welcome-card p{display:none}.preview-columns{grid-template-columns:1fr}.preview-card{min-height:62px}.preview-card:nth-child(n+2){display:none}.card-icon{margin-bottom:9px}.preview-card p{display:none}
  .feature-section,.security-section { padding:88px 0; }.manifesto-inner{padding:88px 0}.notify-section{padding-bottom:88px}
  .feature-grid { grid-template-columns:1fr; }.feature-wide{grid-column:auto}.feature-card{min-height:270px;padding:22px}.mini-space-demo{min-height:220px}
  .security-card { padding:27px;border-radius:21px;gap:34px; }
  .waitlist-form { grid-template-columns:1fr;gap:5px;padding:6px; }.waitlist-form button{min-height:46px;justify-content:center;gap:15px; }
  .footer { align-items:flex-start;flex-direction:column;justify-content:center;padding-block:28px; }.footer-links{flex-wrap:wrap}
}

@media (max-width: 470px) {
  .brand-word { font-size:14px; }.header-cta{font-size:11px;padding:9px 11px}.site-header{gap:10px}
  .app-layout { grid-template-columns:44px 108px 1fr; }.space-rail{padding-inline:5px}.rail-home,.rail-avatar,.rail-add{width:34px;height:34px}.channel-rail{padding:6px}.content-topbar{height:48px;padding:0 10px}.content-topbar small,.top-icons{display:none}.welcome-card{gap:8px}.welcome-card h3{font-size:14px}.welcome-mark{width:38px;height:38px;font-size:15px}.preview-card{padding:10px}
  .signal-strip { grid-template-columns:1fr 1fr; }.signal-strip div{font-size:9px;gap:7px;min-height:64px}
}

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

/* =========================================================
   Spaces motion + product mockup pass
   ========================================================= */
body.intro-running { overflow: hidden; }
body.intro-running > :not(.site-intro) { visibility: hidden; }
body.intro-complete > :not(.site-intro) { visibility: visible; }

.site-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(111, 82, 157, .17), transparent 24%),
    radial-gradient(circle at 50% 105%, rgba(84, 62, 122, .20), transparent 36%),
    #060609;
  opacity: 1;
  transform: translateZ(0);
}
.site-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.025) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: introSweep 1.3s .25s cubic-bezier(.2,.7,.2,1) forwards;
}
.site-intro.is-leaving { animation: introExit .72s cubic-bezier(.65,0,.2,1) forwards; pointer-events:none; }
.intro-grid {
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, transparent 0, black 30%, black 78%, transparent 100%);
  animation: introGrid 2.4s ease both;
}
.intro-haze { position:absolute;border-radius:50%;filter:blur(90px);opacity:0; }
.intro-haze-a { width:44vw;height:44vw;max-width:650px;max-height:650px;background:#6f5596;left:10%;top:8%;animation:introHaze 1.8s .2s ease-out forwards; }
.intro-haze-b { width:38vw;height:38vw;max-width:560px;max-height:560px;background:#3a314d;right:8%;bottom:-12%;animation:introHaze 1.8s .48s ease-out forwards; }
.intro-brand-lockup { position:relative;z-index:4;display:grid;justify-items:center;margin-top:-9vh; }
.intro-mark {
  width:68px;height:68px;border-radius:20px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(145deg,rgba(181,157,231,.28),rgba(75,61,101,.36));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 28px 80px rgba(60,42,84,.4),0 0 0 12px rgba(255,255,255,.015);
  opacity:0;transform:scale(.74) translateY(12px);
  animation:introMark .78s .42s cubic-bezier(.18,.86,.24,1.25) forwards;
}
.intro-mark span { font-size:25px;font-weight:850;letter-spacing:-.05em;text-shadow:0 6px 20px rgba(255,255,255,.2); }
.intro-word { margin-top:17px;font-size:27px;font-weight:760;letter-spacing:-.04em;opacity:0;transform:translateY(9px);animation:introText .65s .8s ease-out forwards; }
.intro-sub { margin-top:7px;color:#77717f;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:0;animation:introText .65s 1.04s ease-out forwards; }
.intro-skyline { position:absolute;z-index:2;left:0;right:0;bottom:0;height:39vh;min-height:245px;display:flex;justify-content:center;align-items:flex-end;gap:8px;padding:0 7vw;perspective:900px; }
.intro-building {
  position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 9px;align-content:start;padding:16px 12px;
  width:clamp(62px,8vw,118px);height:var(--h);border:1px solid rgba(255,255,255,.055);border-bottom:0;border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,rgba(28,26,35,.9),rgba(10,9,14,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 -24px 80px rgba(81,60,113,.04);
  transform-origin:center bottom;transform:scaleY(.04) translateY(24px);opacity:0;
  animation:buildingRise .92s var(--delay) cubic-bezier(.17,.84,.27,1) forwards;
}
.intro-building::before { content:"";position:absolute;left:9px;right:9px;top:8px;height:1px;background:linear-gradient(90deg,transparent,rgba(180,155,225,.28),transparent); }
.intro-building span { height:4px;border-radius:999px;background:rgba(180,161,215,.1);box-shadow:0 0 12px transparent;animation:windowBlink 1.1s calc(var(--delay) + .65s) ease forwards; }
.intro-building.b1{--h:48%;--delay:.08s}.intro-building.b2{--h:64%;--delay:.16s}.intro-building.b3{--h:82%;--delay:.24s}.intro-building.b4{--h:58%;--delay:.31s}.intro-building.b5{--h:91%;--delay:.38s}.intro-building.b6{--h:70%;--delay:.45s}.intro-building.b7{--h:54%;--delay:.52s}.intro-building.b8{--h:75%;--delay:.59s}
.intro-ground { position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 4%,rgba(191,169,232,.24),transparent 96%);box-shadow:0 0 30px rgba(128,98,180,.22);opacity:0;animation:introText .5s .55s forwards; }

@keyframes introSweep { to { transform:translateX(100%); } }
@keyframes introGrid { from{opacity:0;transform:scale(1.07)} to{opacity:.13;transform:scale(1)} }
@keyframes introHaze { to{opacity:.18} }
@keyframes introMark { to{opacity:1;transform:none} }
@keyframes introText { to{opacity:1;transform:none} }
@keyframes buildingRise { 0%{opacity:0;transform:scaleY(.04) translateY(24px)} 22%{opacity:.55} 100%{opacity:1;transform:scaleY(1) translateY(0)} }
@keyframes windowBlink { 0%{background:rgba(180,161,215,.08)} 55%{background:rgba(189,163,235,.34);box-shadow:0 0 16px rgba(151,116,210,.23)} 100%{background:rgba(180,161,215,.12)} }
@keyframes introExit { 0%{opacity:1;filter:blur(0);transform:scale(1)} 58%{opacity:.6} 100%{opacity:0;filter:blur(12px);transform:scale(1.035);visibility:hidden} }

/* Site entrance after the intro */
body.intro-running .site-header,
body.intro-running .hero-copy,
body.intro-running .app-stage { opacity:0; }
body.intro-complete .site-header { animation:siteHeaderIn .7s .05s cubic-bezier(.18,.8,.2,1) both; }
body.intro-complete .hero-copy { animation:heroCopyIn .8s .12s cubic-bezier(.18,.8,.2,1) both; }
body.intro-complete .app-stage { animation:heroMockIn 1s .2s cubic-bezier(.18,.82,.2,1) both; }
@keyframes siteHeaderIn { from{opacity:0;transform:translateY(-16px) scale(.985);filter:blur(8px)} to{opacity:1;transform:none;filter:none} }
@keyframes heroCopyIn { from{opacity:0;transform:translateY(24px);filter:blur(8px)} to{opacity:1;transform:none;filter:none} }
@keyframes heroMockIn { from{opacity:0;transform:translateY(34px) scale(.96);filter:blur(13px)} to{opacity:1;transform:none;filter:none} }

/* Refined mini product preview */
.app-stage { --rx:1.1deg;--ry:-4deg;--tx:0px;--ty:0px;position:relative;perspective:1450px;isolation:isolate; }
.app-glow { inset:9% 2% -12%;background:radial-gradient(ellipse at 55% 45%,rgba(133,100,194,.25),rgba(78,58,110,.07) 38%,transparent 70%);filter:blur(48px);animation:mockGlow 5.6s ease-in-out infinite; }
.app-orbit { position:absolute;z-index:-1;border:1px solid rgba(179,156,224,.07);border-radius:50%;pointer-events:none; }
.app-orbit-a { width:72%;aspect-ratio:1;right:-12%;top:-20%;transform:rotateX(70deg) rotateZ(20deg);animation:orbitA 14s linear infinite; }
.app-orbit-b { width:45%;aspect-ratio:1;left:-4%;bottom:-24%;transform:rotateX(72deg) rotateZ(-13deg);animation:orbitA 18s linear reverse infinite;opacity:.6; }
.mock-shadow { position:absolute;left:12%;right:8%;height:45px;bottom:-22px;background:rgba(0,0,0,.72);filter:blur(28px);border-radius:50%;z-index:-1; }
.app-window {
  border-radius:23px;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--tx),var(--ty),0);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .18s cubic-bezier(.2,.72,.2,1),border-color .3s ease,box-shadow .3s ease;
  box-shadow:0 55px 140px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.018),inset 0 1px 0 rgba(255,255,255,.025);
}
.app-stage:hover .app-window { transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--tx),calc(var(--ty) - 3px),0);border-color:rgba(255,255,255,.12);box-shadow:0 64px 155px rgba(0,0,0,.62),0 0 58px rgba(110,80,158,.08),inset 0 1px 0 rgba(255,255,255,.03); }
.app-sheen { position:absolute;z-index:9;inset:-60% auto -60% -30%;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);transform:rotate(15deg) translateX(-280%);pointer-events:none;animation:appSheen 7s 2.9s ease-in-out infinite; }
.app-titlebar { height:49px;padding:0 14px;background:rgba(7,7,11,.91);position:relative; }
.tiny-s { width:24px;height:24px;border-radius:7px;font-size:10px;color:#f4f0fb;background:linear-gradient(145deg,rgba(151,124,209,.19),rgba(255,255,255,.035)); }
.titlebar-name { font-size:9px;color:#817b88;font-weight:680; }
.titlebar-center { position:absolute;left:50%;transform:translateX(-50%);font-size:6px;letter-spacing:.2em;color:#4f4a55;font-weight:800; }
.window-dots { gap:8px }.window-dots span{width:8px;height:8px;background:#29272e;animation:dotBreathe 3.8s ease-in-out infinite}.window-dots span:nth-child(2){animation-delay:.3s}.window-dots span:nth-child(3){animation-delay:.6s}
.app-layout { grid-template-columns:60px 205px 1fr;min-height:485px; }
.space-rail { padding:13px 8px 10px;gap:9px;background:rgba(7,7,11,.94); }
.space-rail button,.channel-rail button { appearance:none;border:0;font:inherit;color:inherit;cursor:default; }
.rail-home,.rail-avatar,.rail-add { width:40px;height:40px;border-radius:14px!important;border:1px solid rgba(255,255,255,.055)!important;background:#15141a!important;transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s ease,border-color .22s ease!important; }
.rail-home svg { width:16px;height:16px;fill:none;stroke:#8b8592;stroke-width:1.6;stroke-linejoin:round; }
.rail-divider { width:32px;height:1px;background:rgba(255,255,255,.055);margin:1px 0 2px; }
.rail-avatar { overflow:visible; }
.rail-avatar.active { background:linear-gradient(145deg,#7d69b0,#493d66)!important;box-shadow:0 8px 22px rgba(77,56,108,.28); }
.rail-avatar.active::before { left:-11px;height:22px;animation:activeRail 4s ease-in-out infinite; }
.rail-pfp-art { width:100%;height:100%;border-radius:inherit;display:grid;place-items:center;overflow:hidden;position:relative; }
.rail-pfp-art::before { content:"";position:absolute;inset:-15%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.15),transparent 23%),radial-gradient(circle at 70% 72%,rgba(17,13,25,.42),transparent 28%); }
.rail-pfp-art b{position:relative;font-size:12px}.rail-photo{background:linear-gradient(145deg,#171620,#111016)!important}.rail-photo-2{background:linear-gradient(145deg,#17171d,#0f0f14)!important}
.rail-avatar:hover,.rail-home:hover,.rail-add:hover { transform:translateY(-2px) scale(1.025);border-color:rgba(255,255,255,.1)!important; }
.rail-add { margin-top:auto;overflow:hidden!important; }
.rail-add .grid-four { position:absolute;inset:4px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;opacity:.26;transform:none;font-size:0; }
.rail-add .grid-four i { border:1px solid rgba(172,148,236,.48);border-radius:4px;background:rgba(155,125,222,.08); }
.rail-add b { font-size:15px;color:#ddd6e7;text-shadow:0 1px 8px #0b0910; }
.channel-rail { padding:0;background:rgba(12,11,16,.94); }
.space-head { min-height:65px;grid-template-columns:38px 1fr 25px;padding:9px 9px 9px 12px;border-bottom:1px solid rgba(255,255,255,.055);gap:9px; }
.space-pfp { width:38px;height:38px;border-radius:13px;overflow:hidden;background:linear-gradient(145deg,#7a68a9,#3e3556);box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.space-pfp span { font-size:12px; }
.space-head-copy { min-width:0; }
.space-head-copy small { color:#67616d;font-size:6px;letter-spacing:.16em;font-weight:800; }
.space-head-copy strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;margin-top:2px; }
.space-head-copy em { display:block;color:#4d4852;font-size:6px;font-style:normal;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.space-gear { width:25px;height:25px;display:grid;place-items:center;background:transparent!important;border-radius:8px!important; }
.space-gear svg{width:14px;height:14px;fill:none;stroke:#77717e;stroke-width:1.3}.space-gear:hover{background:rgba(255,255,255,.04)!important}
.nav-overview { margin:10px 9px 2px;padding:8px 9px;border-radius:9px!important;background:transparent!important;color:#77717f!important;display:flex;align-items:center;gap:8px;font-size:9px!important;text-align:left;position:relative; }
.nav-overview svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}.nav-overview.active{color:#d7d1df!important;background:rgba(138,108,190,.10)!important}.nav-overview:hover{background:rgba(255,255,255,.035)!important}
.channel-group { margin-top:11px;padding:0 8px; }
.channel-group-notes { opacity:.82; }
.channel-label { margin:0 5px 5px;display:flex;align-items:center;gap:5px;font-size:6px;color:#625c69; }
.channel-label i { margin-left:auto;font-style:normal;letter-spacing:1px;color:#413d46;font-size:5px; }
.channel { width:100%;min-height:31px;padding:0 8px!important;border-radius:9px!important;background:transparent!important;display:flex;align-items:center;gap:7px;color:#7d7784!important;text-align:left;font-size:9px!important;position:relative; }
.channel b{font-size:9px;font-weight:620}.channel em{margin-left:auto;font-style:normal;color:#4b4650;font-size:6px;letter-spacing:.08em}.channel-symbol{width:12px;text-align:center;font-size:12px;color:#625d68}.channel:hover{background:rgba(255,255,255,.03)!important;color:#aaa3b1!important}.channel.active{background:rgba(126,94,177,.115)!important;color:#ddd7e4!important;box-shadow:inset 0 0 0 1px rgba(155,126,205,.04)}
.channel.active::after,.nav-overview.active::after { content:"";position:absolute;left:-1px;width:2px;height:17px;border-radius:999px;background:#8c73bd;box-shadow:0 0 12px rgba(140,115,189,.45); }
.account-pill { margin:10px;border-radius:12px;padding:7px 8px;background:rgba(255,255,255,.025);transition:background .2s ease,border-color .2s ease; }
.account-pill:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.085)}.mini-pfp{width:29px;height:29px}.presence-dot{animation:presencePulse 2.5s ease-in-out infinite}.account-more{margin-left:auto;color:#4e4953;font-size:6px;letter-spacing:1px}
.app-content { position:relative;background:radial-gradient(circle at 78% 12%,rgba(107,78,148,.09),transparent 30%),rgba(9,9,13,.91); }
.app-content::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 50%,rgba(255,255,255,.008),transparent 67%); }
.content-topbar { height:57px;padding:0 17px;background:rgba(9,9,13,.43); }.content-title strong{font-size:10px;transition:opacity .2s ease,transform .2s ease}.content-title small{font-size:7px;color:#58535d}.top-icons{display:flex;gap:11px;align-items:center;letter-spacing:0}.top-icons span{width:20px;height:20px;display:grid;place-items:center;color:#514c56;font-size:7px}.top-icons svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.3}
.content-body { padding:18px 18px 14px;position:relative; }
.welcome-card { min-height:117px;border-radius:17px;padding:18px;overflow:hidden;position:relative;background:radial-gradient(circle at 85% -15%,rgba(156,121,212,.13),transparent 38%),linear-gradient(120deg,rgba(114,85,163,.17),rgba(255,255,255,.022));transition:transform .26s ease,border-color .26s ease; }
.welcome-card:hover{transform:translateY(-2px);border-color:rgba(179,153,223,.13)}.welcome-noise{position:absolute;inset:0;opacity:.14;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.16) 0 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(90deg,black,transparent 72%)}
.welcome-mark { position:relative;width:56px;height:56px;border-radius:17px;box-shadow:0 14px 34px rgba(71,51,97,.34),inset 0 1px 0 rgba(255,255,255,.1);animation:welcomeFloat 4.7s ease-in-out infinite; }
.welcome-card>div:last-child{position:relative}.welcome-card h3{font-size:18px}.welcome-card p{font-size:8px;color:#736d79;line-height:1.45}
.preview-columns { grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px; }.preview-card{min-height:142px;padding:14px;border-radius:14px;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease,background .25s ease}.preview-card:hover{transform:translateY(-3px);border-color:rgba(164,137,212,.13);background:rgba(255,255,255,.027)}
.card-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin-bottom:18px}.card-icon svg{width:13px;height:13px;fill:none;stroke:#a992d7;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.preview-card strong{font-size:9px}.preview-card p{font-size:7px;line-height:1.5}.card-spark{position:absolute;width:50px;height:50px;border-radius:50%;background:rgba(127,94,179,.13);filter:blur(18px);right:-22px;bottom:-25px;opacity:0;transition:opacity .25s ease}.preview-card:hover .card-spark{opacity:1}
.activity-row { height:28px;margin-top:8px;border-top:1px solid rgba(255,255,255,.035);display:flex;align-items:flex-end;gap:6px;color:#4f4a54;font-size:6px;padding:0 3px 1px; }.activity-row b{font-weight:580;color:#67616e}.activity-row i{height:8px;width:1px;background:rgba(255,255,255,.05);margin:0 3px}.activity-dot{width:5px;height:5px;border-radius:50%;background:#50c97d;box-shadow:0 0 10px rgba(80,201,125,.35)}
.mock-caption { display:flex;align-items:center;justify-content:center;gap:7px;color:#5a5460;font-size:7px;letter-spacing:.08em;text-transform:uppercase;margin-top:16px;opacity:.75; }.mock-caption i{height:9px;width:1px;background:rgba(255,255,255,.08)}.live-dot{width:5px;height:5px;border-radius:50%;background:#716087;box-shadow:0 0 11px rgba(148,119,197,.5);animation:presencePulse 2.3s ease-in-out infinite}

/* richer easing everywhere */
.button,.header-cta,.brand-mark,.notify-orb,.feature-card,.security-list>div,.mini-space-demo { transition-timing-function:cubic-bezier(.2,.8,.2,1)!important; }
.header-cta { transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background .22s ease; }.header-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,255,255,.07)}
.brand-mark { transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease; }.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.04);border-color:rgba(185,160,232,.26)}
.feature-card.visible { transition-delay:var(--reveal-delay,0ms); }
.feature-card::after { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(151,121,205,.08),transparent 34%);opacity:0;transition:opacity .3s ease; }.feature-card:hover::after{opacity:1}

@keyframes mockGlow { 0%,100%{opacity:.72;transform:scale(.98)} 50%{opacity:1;transform:scale(1.035)} }
@keyframes orbitA { to{transform:rotateX(70deg) rotateZ(380deg)} }
@keyframes appSheen { 0%,72%{transform:rotate(15deg) translateX(-300%);opacity:0} 80%{opacity:1} 92%,100%{transform:rotate(15deg) translateX(700%);opacity:0} }
@keyframes dotBreathe { 0%,100%{background:#29272e} 50%{background:#3c3842} }
@keyframes activeRail { 0%,100%{opacity:.85;transform:scaleY(.9)} 50%{opacity:1;transform:scaleY(1.08)} }
@keyframes presencePulse { 0%,100%{box-shadow:0 0 0 0 rgba(80,201,125,.0)} 50%{box-shadow:0 0 0 3px rgba(80,201,125,.08),0 0 10px rgba(80,201,125,.28)} }
@keyframes welcomeFloat { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-3px) rotate(-1deg)} }

@media (max-width:980px){
  .app-layout{grid-template-columns:58px 190px 1fr}.app-stage{max-width:800px}.titlebar-center{display:none}
  .intro-skyline{height:34vh;padding:0 3vw;gap:6px}.intro-building{width:10vw;min-width:50px;padding-inline:8px}
}
@media (max-width:690px){
  .intro-brand-lockup{margin-top:-13vh}.intro-mark{width:60px;height:60px;border-radius:18px}.intro-word{font-size:24px}.intro-skyline{height:31vh;padding:0 2vw;gap:4px}.intro-building{min-width:38px;border-radius:7px 7px 0 0;padding:11px 6px;gap:6px}
  .app-layout{grid-template-columns:48px 142px 1fr;min-height:405px}.space-head{grid-template-columns:30px 1fr;padding:8px;min-height:52px}.space-pfp{width:30px;height:30px;border-radius:10px}.space-gear,.space-head-copy em,.space-head-copy small,.channel-group-notes,.account-more{display:none}.space-head-copy strong{font-size:8px}.channel-group{padding:0 5px}.nav-overview{margin-inline:6px}.channel-label{font-size:5px}.channel{font-size:7px!important;min-height:27px}.channel b{font-size:7px}.channel em{display:none}.content-body{padding:10px}.activity-row{display:none}.mock-caption{display:none}
}
@media (max-width:470px){
  .app-layout{grid-template-columns:43px 112px 1fr}.space-head{grid-template-columns:26px 1fr;gap:6px}.space-pfp{width:26px;height:26px}.space-head-copy strong{font-size:7px}.nav-overview{font-size:7px!important;padding-inline:6px}.nav-overview svg{width:10px}.channel{padding-inline:5px!important}.channel-symbol{width:9px;font-size:9px}.account-pill{margin:6px}.account-pill>div:nth-child(2){display:none}.preview-columns{grid-template-columns:1fr}.preview-card:nth-child(n+2){display:none}.preview-card{min-height:75px}.card-icon{margin-bottom:8px}.welcome-card{min-height:88px}.welcome-card p{display:none}.welcome-mark{width:40px;height:40px;border-radius:12px}.welcome-card h3{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  /* Keep the branded Spaces startup on desktop/mobile. Reduce only ongoing motion. */
  .app-window{transform:none!important}
  .app-orbit,.app-sheen{display:none}
  .presence-dot,.live-dot,.welcome-mark,.window-dots span{animation:none!important}
  .parallax-layer,.scroll-orb{transform:none!important}
}


/* ------------------------------------------------------------
   Smooth section + page navigation
   ------------------------------------------------------------ */
html { scroll-behavior: auto; }
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -8px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(174,145,240,.85), transparent);
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease;
  opacity: 0;
}
.nav-links a.is-active::after { transform: scaleX(1); opacity: 1; }

.page-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px) scale(1.01);
  background:
    radial-gradient(circle at 50% 35%, rgba(123,92,176,.12), transparent 42%),
    rgba(7,7,11,.96);
  backdrop-filter: blur(0px);
  transition: opacity .34s ease, transform .38s cubic-bezier(.22,1,.36,1), backdrop-filter .34s ease;
}
body.page-leaving .page-transition-layer {
  opacity: 1;
  transform: translateY(0) scale(1);
  backdrop-filter: blur(12px);
}
body.page-leaving main,
body.page-leaving .site-header,
body.page-leaving .footer {
  transform: translateY(-8px) scale(.998);
  opacity: .58;
  transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: spaces-page-out .28s ease both; }
::view-transition-new(root) { animation: spaces-page-in .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes spaces-page-out { to { opacity: 0; transform: translateY(-8px) scale(.997); filter: blur(4px); } }
@keyframes spaces-page-in { from { opacity: 0; transform: translateY(10px) scale(1.003); filter: blur(7px); } }

.privacy-page { min-height: 100vh; padding: 100px 0 80px; }
.privacy-doc { max-width: 780px; }
.privacy-doc h1 { font-size: clamp(42px, 7vw, 68px); letter-spacing: -.055em; margin: 24px 0; }
.privacy-doc h2 { font-size: 18px; margin: 34px 0 8px; }
.privacy-doc p,.privacy-doc li { color: #9b95a2; line-height: 1.75; font-size: 14px; }
.privacy-doc a { text-decoration: underline; text-underline-offset: 3px; }
.privacy-back { display: inline-flex; align-items: center; gap: 8px; color: #aaa3b2; font-size: 12px; }
.privacy-box { margin-top: 24px; padding: clamp(20px,4vw,34px); border: 1px solid rgba(255,255,255,.07); border-radius: 24px; background: rgba(255,255,255,.025); box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.unsubscribe-card { max-width: 620px; margin: 15vh auto 0; padding: 32px; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: rgba(14,13,20,.86); color: #eeeaf3; }
.unsubscribe-card p { color: #aaa3b2; line-height: 1.65; }
.unsubscribe-card form { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.unsubscribe-card button,.unsubscribe-card a { border-radius: 12px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(126,94,177,.22); color: #f4effb; text-decoration: none; cursor: pointer; }
.unsubscribe-card a { background: rgba(255,255,255,.04); }

@media (prefers-reduced-motion: reduce) {
  .page-transition-layer,
  body.page-leaving main,
  body.page-leaving .site-header,
  body.page-leaving .footer { transition: none !important; }
}

/* =========================================================
   Spaces Public Motion V4
   Simple S branding + scroll storytelling
   ========================================================= */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100000;
  pointer-events: none;
  background: rgba(255,255,255,.015);
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(126,91,190,.18), rgba(188,157,245,.92), rgba(255,255,255,.8));
  box-shadow: 0 0 18px rgba(164,126,226,.28);
  will-change: transform;
}

.brand-letter {
  display: grid;
  place-items: center;
  color: #f7f2ff;
  font-weight: 820;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.055em;
  line-height: 1;
  text-indent: -.02em;
  user-select: none;
}
.brand-mark.brand-letter { font-size: 14px; }
.intro-mark.brand-letter { font-size: 25px; }
.tiny-s.brand-letter { font-size: 10px; }
.rail-pfp-art.brand-letter { font-size: 12px; }
.space-pfp.brand-letter { font-size: 12px; }
.mini-pfp.brand-letter { font-size: 9px; }
.welcome-mark.brand-letter { font-size: 20px; }
.notify-orb.brand-letter { font-size: 22px; }
.mini-profile.brand-letter { font-size: 17px; }
.story-panel-mark.brand-letter { font-size: 13px; }
.story-avatar.brand-letter { font-size: 9px; }

.site-header {
  transition: top .34s cubic-bezier(.2,.8,.2,1), background .34s ease, border-color .34s ease,
    box-shadow .34s ease, transform .34s cubic-bezier(.2,.8,.2,1);
}
.site-header.is-scrolled {
  top: 8px;
  background: rgba(11,10,15,.84);
  border-color: rgba(255,255,255,.105);
  box-shadow: 0 18px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
}

.hero { position: relative; }
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #56505f;
  font-size: 8px;
  letter-spacing: .18em;
  font-weight: 760;
  pointer-events: none;
}
.hero-scroll-cue i {
  display: block;
  width: 1px;
  height: 36px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.hero-scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(188,157,245,.86), transparent);
  transform: translateY(-120%);
  animation: spacesScrollCue 2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes spacesScrollCue { 55%,100% { transform: translateY(120%); } }

.app-stage[data-scroll-hero] {
  --scroll-lift: 0px;
  --scroll-scale: 1;
  transform: translate3d(0,var(--scroll-lift),0) scale(var(--scroll-scale));
  transform-origin: 50% 55%;
  will-change: transform;
}

.ownership-card {
  margin-top: 56px;
  min-height: 390px;
  background:
    radial-gradient(circle at 79% 28%, rgba(131,94,190,.09), transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.036),rgba(255,255,255,.012));
}
.feature-icon-letter {
  font-size: 14px;
  font-weight: 820;
  letter-spacing: -.05em;
}
.mini-space-demo[data-float-card] {
  transform: perspective(900px) rotateY(-2.4deg) rotateX(1deg);
  transform-origin: center;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.ownership-card:hover .mini-space-demo[data-float-card] {
  transform: perspective(900px) rotateY(-.8deg) rotateX(.2deg) translateY(-4px);
  box-shadow: 0 32px 78px rgba(0,0,0,.42);
}
.mini-demo-line {
  margin: 0 18px 18px;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #766f7d;
  background: rgba(255,255,255,.018);
  font-size: 9px;
}
.mini-demo-line i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6dcc8b;
  box-shadow: 0 0 12px rgba(109,204,139,.25);
}

.story-layout {
  margin-top: 90px;
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(480px,1.2fr);
  gap: clamp(50px,7vw,110px);
  align-items: start;
  position: relative;
}
.story-copy-stack { padding-bottom: 12vh; }
.story-step {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 470px;
  opacity: .26;
  transform: translateY(24px) scale(.985);
  filter: blur(.25px);
  transition: opacity .5s ease, transform .58s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.story-step.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
}
.story-index {
  color: #9b88bb;
  font-size: 9px;
  letter-spacing: .16em;
  font-weight: 760;
}
.story-step h3 {
  margin: 17px 0 0;
  font-size: clamp(36px,4.4vw,58px);
  line-height: 1.03;
  letter-spacing: -.052em;
  font-weight: 690;
}
.story-step p {
  margin: 20px 0 0;
  color: #8f8996;
  font-size: 14px;
  line-height: 1.72;
  max-width: 445px;
}
.story-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 24px;
}
.story-pills span {
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.018);
  color: #77717f;
  font-size: 9px;
  transition: border-color .3s ease, color .3s ease, transform .3s ease;
}
.story-step.is-active .story-pills span {
  color: #aaa1b1;
  border-color: rgba(174,145,224,.12);
}
.story-step.is-active .story-pills span:nth-child(2) { transition-delay: 45ms; }
.story-step.is-active .story-pills span:nth-child(3) { transition-delay: 90ms; }

.story-visual-wrap {
  position: sticky;
  top: 112px;
  min-height: calc(100vh - 142px);
  display: grid;
  align-items: center;
  perspective: 1350px;
  isolation: isolate;
}
.story-glow {
  position: absolute;
  inset: 18% 3% 13%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(124,88,181,.21), rgba(74,52,102,.05) 46%, transparent 70%);
  filter: blur(55px);
  transform: scale(var(--story-glow-scale,1));
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.story-panel {
  width: 100%;
  max-width: 680px;
  min-height: 500px;
  margin-inline: auto;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  transform: rotateY(-2.4deg) rotateX(1deg) translate3d(0,var(--story-lift,0px),0) scale(var(--story-scale,1));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
  box-shadow: 0 56px 145px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.018), inset 0 1px 0 rgba(255,255,255,.03);
}
.story-panel.is-swapping { transform: rotateY(-1.1deg) rotateX(.5deg) translateY(-3px) scale(.994); }
.story-panel-top {
  height: 72px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(8,8,12,.86);
}
.story-panel-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(145deg,#7563a1,#3e3556);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.story-panel-top small {
  display: block;
  color: #665f6d;
  font-size: 7px;
  letter-spacing: .18em;
  font-weight: 780;
  transition: opacity .18s ease, transform .18s ease;
}
.story-panel-top strong {
  display: block;
  margin-top: 4px;
  color: #eeeaf2;
  font-size: 12px;
  transition: opacity .18s ease, transform .18s ease;
}
.story-panel-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #68616f;
  font-size: 7px;
  letter-spacing: .14em;
  font-weight: 760;
}
.story-panel-status i { width: 5px;height:5px;border-radius:50%;background:#5ad084;box-shadow:0 0 10px rgba(90,208,132,.35); }
.story-panel-body { min-height: 380px;display:grid;grid-template-columns:58px 1fr;background:rgba(8,8,12,.72); }
.story-sidebar {
  padding: 15px 9px;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: rgba(7,7,11,.72);
}
.story-sidebar span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.045);
  background: rgba(255,255,255,.018);
  color: #625c68;
  font-size: 9px;
  font-weight: 720;
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}
.story-sidebar span.active { color:#efeaf5;background:rgba(128,96,178,.18);border-color:rgba(175,144,225,.12);transform:scale(1.04); }
.story-main { padding: 20px;position:relative;overflow:hidden; }
.story-main::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -90px;
  top: -120px;
  border-radius: 50%;
  background: rgba(126,91,183,.09);
  filter: blur(45px);
  pointer-events: none;
}
.story-main-head { display:flex;align-items:center;justify-content:space-between;color:#7d7683;font-size:9px;border-bottom:1px solid rgba(255,255,255,.04);padding-bottom:13px; }
.story-main-head b { color:#4e4854;letter-spacing:2px; }
.story-message { display:grid;grid-template-columns:31px 1fr;gap:10px;margin-top:17px;opacity:.92;transition:opacity .18s ease,transform .18s ease; }
.story-avatar { width:31px;height:31px;border-radius:10px;background:linear-gradient(145deg,#66558d,#342d47);border:1px solid rgba(255,255,255,.06); }
.story-avatar-alt { display:grid;place-items:center;color:#aaa1b1;font-size:9px;font-weight:800;background:linear-gradient(145deg,#232129,#15141a); }
.story-message b { display:block;color:#bcb5c3;font-size:9px; }
.story-message p { margin:4px 0 0;color:#716b77;font-size:8px;line-height:1.55;max-width:390px;transition:opacity .18s ease,transform .18s ease; }
.story-context-card {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 15px;
  background: radial-gradient(circle at 80% 20%,rgba(122,88,176,.08),transparent 35%),rgba(255,255,255,.018);
  transition: opacity .18s ease, transform .18s ease;
}
.story-context-label { color:#7f6e9d;font-size:7px;letter-spacing:.16em;font-weight:780; }
.story-context-card strong { display:block;margin-top:8px;color:#aaa3af;font-size:10px;font-weight:680; }
.story-context-bars { display:grid;gap:7px;margin-top:17px; }
.story-context-bars i { height:5px;border-radius:999px;background:rgba(255,255,255,.045);overflow:hidden;position:relative; }
.story-context-bars i::after { content:"";display:block;width:var(--bar,72%);height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(118,88,170,.48),rgba(179,147,230,.28));transform-origin:left;animation:storyBar 3.8s ease-in-out infinite; }
.story-context-bars i:nth-child(2){--bar:51%}.story-context-bars i:nth-child(3){--bar:62%}
@keyframes storyBar { 0%,100%{transform:scaleX(.72);opacity:.55}50%{transform:scaleX(1);opacity:1} }
.story-panel-foot { min-height:48px;padding:0 18px;border-top:1px solid rgba(255,255,255,.045);display:flex;align-items:center;gap:10px;color:#544e59;font-size:7px;letter-spacing:.03em;background:rgba(8,8,12,.86); }
.story-panel-foot i { width:3px;height:3px;border-radius:50%;background:#49434d; }
.story-panel.is-swapping .story-panel-top small,
.story-panel.is-swapping .story-panel-top strong,
.story-panel.is-swapping .story-message,
.story-panel.is-swapping .story-context-card { opacity:.22;transform:translateY(3px); }

.security-check svg { width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; }

.manifesto-inner blockquote { text-wrap: balance; }
.notify-card { isolation:isolate; }
.notify-card::after {
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  left:50%;
  bottom:-330px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(137,102,196,.13);
  filter:blur(70px);
  z-index:-1;
}

@media (max-width: 980px) {
  .story-layout { grid-template-columns: minmax(0,.86fr) minmax(390px,1.14fr);gap:38px; }
  .story-step { min-height:64vh; }
  .story-panel { min-height:460px; }
  .story-panel-body { min-height:340px; }
}

@media (max-width: 780px) {
  .hero-scroll-cue { display:none; }
  .ownership-card { margin-top:42px; }
  .story-layout { grid-template-columns:1fr;gap:42px;margin-top:66px; }
  .story-visual-wrap { position:relative;top:auto;min-height:auto;order:-1; }
  .story-panel { transform:none!important;min-height:420px; }
  .story-panel-body { min-height:300px; }
  .story-copy-stack { padding-bottom:0;display:grid;gap:14px; }
  .story-step { min-height:auto;max-width:none;padding:26px;border:1px solid rgba(255,255,255,.06);border-radius:20px;background:rgba(255,255,255,.018);opacity:.55;transform:none;filter:none; }
  .story-step.is-active { opacity:1; }
  .story-step h3 { font-size:clamp(30px,9vw,44px); }
}

@media (max-width: 560px) {
  .story-panel-body { grid-template-columns:44px 1fr; }
  .story-sidebar { padding-inline:5px; }
  .story-sidebar span { width:30px;height:30px;border-radius:9px; }
  .story-main { padding:15px; }
  .story-message-b { display:none; }
  .story-context-card { padding:14px; }
  .story-panel-top { padding-inline:13px;grid-template-columns:34px 1fr auto; }
  .story-panel-mark { width:34px;height:34px;border-radius:10px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .hero-scroll-cue { display:none!important; }
  .app-stage[data-scroll-hero], .story-panel, .mini-space-demo[data-float-card] { transform:none!important; }
  .story-context-bars i::after { animation:none!important; }
  .story-step { opacity:1!important;transform:none!important;filter:none!important; }
}

body.motion-ready .app-stage[data-scroll-hero] { animation: none!important; }


/* =========================================================
   Spaces Site Polish V5 - typography consistency
   ========================================================= */
:root {
  --spaces-font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --spaces-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
html,
body,
button,
input,
textarea,
select {
  font-family: var(--spaces-font-sans);
}
body {
  font-feature-settings: normal;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hero h1,
.section-heading h2,
.story-step h3,
.manifesto-inner blockquote,
.security-card h2,
.notify-card h2,
.privacy-doc h1,
.brand-letter {
  font-family: var(--spaces-font-display);
}
.hero h1,
.section-heading h2,
.story-step h3,
.manifesto-inner blockquote,
.security-card h2,
.notify-card h2 {
  font-weight: 700;
}
.brand-letter {
  font-weight: 800;
  letter-spacing: -.045em;
}
.brand,
.header-cta,
.button,
.beta-chip,
.eyebrow,
.section-kicker,
.story-index,
.story-context-label {
  font-variation-settings: normal;
}
.story-step[data-story-step="moderation"] .story-index {
  color: #b49be4;
}
.story-step[data-story-step="moderation"].is-active .story-pills span:first-child {
  color: #cbbbe8;
  border-color: rgba(174,145,224,.22);
  background: rgba(144,111,198,.07);
}


/* =========================================================
   V7 Desktop-first launch intro + real mockup icons
   ========================================================= */
.channel-symbol-icon {
  display: grid;
  place-items: center;
  flex: 0 0 12px;
  height: 14px;
}
.channel-symbol-icon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.story-sidebar .story-side-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Desktop is the primary presentation. Keep the product mockup crisp and roomy. */
@media (min-width: 1000px) {
  .hero { min-height: 760px; }
  .app-stage { transform-origin: 50% 44%; }
  .intro-video { object-fit: contain; }
}
@media (max-width: 720px) {
  .intro-video { object-fit: contain; }
}

/* =========================================================
   V9 guaranteed Spaces startup - desktop first
   Clean Spaces lockup + buildings rising along the bottom.
   No MP4 dependency, so desktop can never stall on a blank backdrop.
   ========================================================= */
.site-intro.css-intro-live {
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
}

.site-intro .intro-brand-lockup {
  z-index: 8;
  margin-top: -16vh;
  will-change: transform, opacity;
}

.site-intro .intro-mark {
  width: 72px;
  height: 72px;
  border-radius: 21px;
}

.site-intro .intro-word {
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 760;
  letter-spacing: -.045em;
}

.site-intro .intro-sub {
  margin-top: 8px;
  letter-spacing: .17em;
}

.site-intro .intro-skyline {
  z-index: 4;
  height: min(37vh, 390px);
  min-height: 230px;
  padding-inline: clamp(28px, 7vw, 128px);
  gap: clamp(5px, .7vw, 12px);
  opacity: 1;
}

/* Buildings wait until the S/Spaces lockup is visible, then grow upward. */
.site-intro .intro-building {
  animation: none;
  opacity: 0;
  transform: scaleY(.025) translateY(30px);
}

.site-intro.skyline-live .intro-building {
  animation: v9BuildingRise 1.02s calc(var(--delay) + .10s)
    cubic-bezier(.16,.86,.23,1) forwards;
}

.site-intro .intro-building::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(161,127,220,.05), transparent 42%);
  opacity: 0;
}

.site-intro.skyline-live .intro-building::after {
  animation: v9BuildingGlow 1.2s calc(var(--delay) + .55s) ease-out forwards;
}

.site-intro .intro-building span {
  animation: none;
}

.site-intro.skyline-live .intro-building span {
  animation: windowBlink 1.15s calc(var(--delay) + .72s) ease forwards;
}

.site-intro .intro-ground {
  animation: none;
  opacity: 0;
}

.site-intro.skyline-live .intro-ground {
  animation: introText .55s .42s forwards;
}

.site-intro.brand-settled .intro-brand-lockup {
  animation: v9BrandSettle .9s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes v9BuildingRise {
  0% { opacity: 0; transform: scaleY(.025) translateY(30px); filter: blur(2px); }
  24% { opacity: .58; }
  74% { filter: blur(0); }
  100% { opacity: 1; transform: scaleY(1) translateY(0); filter: none; }
}

@keyframes v9BuildingGlow {
  0% { opacity: 0; }
  55% { opacity: .85; }
  100% { opacity: .28; }
}

@keyframes v9BrandSettle {
  0% { transform: translateY(0) scale(1); }
  55% { transform: translateY(-2px) scale(1.015); }
  100% { transform: translateY(0) scale(1); }
}

@media (min-width: 1000px) {
  .site-intro .intro-brand-lockup { margin-top: -17vh; }
  .site-intro .intro-skyline { height: min(40vh, 420px); }
  .site-intro .intro-building { width: clamp(70px, 7vw, 122px); }
}

@media (max-width: 720px) {
  .site-intro .intro-brand-lockup { margin-top: -18vh; }
  .site-intro .intro-mark { width: 64px; height: 64px; border-radius: 19px; }
  .site-intro .intro-word { font-size: 28px; }
  .site-intro .intro-skyline {
    height: 34vh;
    min-height: 225px;
    padding-inline: 8px;
    gap: 4px;
  }
  .site-intro .intro-building {
    width: clamp(38px, 10.4vw, 54px);
    min-width: 0;
    padding: 12px 6px;
    gap: 6px 5px;
    border-radius: 7px 7px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the branded startup visible; only shorten it. */
  .site-intro .intro-building { filter: none; }
}



/* =========================================================
   V10 desktop intro reliability
   Windows/Chrome can report prefers-reduced-motion: reduce.
   An older global accessibility rule disables every CSS animation with
   !important, which previously left intro elements at opacity: 0.
   The short branded startup is intentionally allowed to animate; the
   rest of the site still respects reduced-motion after it opens.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .site-intro::before {
    animation: introSweep 1.3s .25s cubic-bezier(.2,.7,.2,1) forwards !important;
  }
  .site-intro .intro-grid {
    animation: introGrid 2.4s ease both !important;
  }
  .site-intro .intro-haze-a {
    animation: introHaze 1.8s .2s ease-out forwards !important;
  }
  .site-intro .intro-haze-b {
    animation: introHaze 1.8s .48s ease-out forwards !important;
  }
  .site-intro .intro-mark {
    animation: introMark .78s .42s cubic-bezier(.18,.86,.24,1.25) forwards !important;
  }
  .site-intro .intro-word {
    animation: introText .65s .8s ease-out forwards !important;
  }
  .site-intro .intro-sub {
    animation: introText .65s 1.04s ease-out forwards !important;
  }
  .site-intro.skyline-live .intro-building {
    animation: v9BuildingRise 1.02s calc(var(--delay) + .10s) cubic-bezier(.16,.86,.23,1) forwards !important;
  }
  .site-intro.skyline-live .intro-building span {
    animation: windowBlink 1.15s calc(var(--delay) + .72s) ease forwards !important;
  }
  .site-intro.skyline-live .intro-building::after {
    animation: v9BuildingGlow 1.2s calc(var(--delay) + .55s) ease-out forwards !important;
  }
  .site-intro.skyline-live .intro-ground {
    animation: introText .55s .42s forwards !important;
  }
  .site-intro.brand-settled .intro-brand-lockup {
    animation: v9BrandSettle .9s cubic-bezier(.2,.8,.2,1) both !important;
  }
  .site-intro.is-leaving {
    animation: introExit .72s cubic-bezier(.65,0,.2,1) forwards !important;
  }
}


/* =========================================================
   V11 clean presentation + mobile performance
   Desktop remains the primary showcase.
   Mobile replaces the S lockup with the real buildings MP4.
   ========================================================= */
:root {
  --v11-panel: rgba(15, 14, 20, .88);
  --v11-line: rgba(255,255,255,.075);
}

body {
  background:
    radial-gradient(circle at 74% 7%, rgba(104,75,151,.11), transparent 29%),
    linear-gradient(180deg,#07070a 0%,#08070b 55%,#07070a 100%);
}
body::before { opacity:.055; }
.ambient { opacity:.13; filter:blur(120px); }

.site-header {
  border-color:rgba(255,255,255,.07);
  background:rgba(10,9,14,.78);
  box-shadow:0 14px 45px rgba(0,0,0,.24);
}
.hero { gap:64px; }
.hero h1 { max-width:650px;font-weight:720;letter-spacing:-.06em; }
.hero-lede { color:#aaa4b0;max-width:560px; }
.button { border-radius:12px; }
.button-primary { box-shadow:0 10px 28px rgba(0,0,0,.18); }

.feature-card,
.security-card,
.notify-card,
.story-panel,
.mini-space-demo {
  border-color:var(--v11-line);
  background-color:rgba(12,11,16,.72);
}
.feature-card { border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.008)); }
.feature-card:hover { transform:translateY(-2px);background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.012)); }
.feature-icon { margin-top:42px;background:rgba(143,111,203,.055); }
.manifesto-section { background:linear-gradient(180deg,rgba(102,75,145,.035),transparent); }
.security-card { box-shadow:0 26px 80px rgba(0,0,0,.24); }
.notify-card { box-shadow:0 24px 72px rgba(0,0,0,.26); }

.intro-mobile-media { display:none; }
.intro-desktop-lockup { display:grid;justify-items:center; }

/* Mobile uses the actual building animation instead of the S tile. */
@media (max-width: 780px) {
  body::before,
  .ambient,
  .app-orbit,
  .app-sheen,
  .app-glow { display:none!important; }

  .site-intro.mobile-video-intro .intro-desktop-lockup,
  .site-intro.mobile-video-intro .intro-skyline { display:none!important; }
  .site-intro.mobile-video-intro .intro-brand-lockup {
    position:absolute;
    inset:0;
    margin:0!important;
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
  }
  .site-intro.mobile-video-intro .intro-mobile-media {
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    position:relative;
    z-index:5;
  }
  .intro-mobile-video {
    display:block;
    width:min(100vw,560px);
    height:min(100dvh,900px);
    max-width:100%;
    object-fit:contain;
    opacity:0;
    transform:scale(.985);
    transition:opacity .22s ease,transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .site-intro.mobile-video-playing .intro-mobile-video { opacity:1;transform:none; }
  .intro-mobile-fallback {
    position:absolute;
    inset:0;
    display:none;
    place-items:center;
    align-content:center;
    gap:24px;
  }
  .site-intro.mobile-video-failed .intro-mobile-video { display:none; }
  .site-intro.mobile-video-failed .intro-mobile-fallback { display:grid; }
  .mobile-fallback-buildings { height:138px;display:flex;align-items:flex-end;gap:9px; }
  .mobile-fallback-buildings i { width:24px;height:var(--mh);border-radius:7px 7px 1px 1px;background:linear-gradient(180deg,#b392f1,#59427f);box-shadow:0 0 24px rgba(140,99,210,.16); }
  .mobile-fallback-buildings i:nth-child(1){--mh:62px}.mobile-fallback-buildings i:nth-child(2){--mh:94px}.mobile-fallback-buildings i:nth-child(3){--mh:136px}.mobile-fallback-buildings i:nth-child(4){--mh:88px}.mobile-fallback-buildings i:nth-child(5){--mh:58px}
  .intro-mobile-fallback strong { font-size:34px;letter-spacing:-.045em;font-weight:650; }

  /* Mobile performance: remove expensive live blur/parallax/3D work. */
  .glass,
  .glass-heavy,
  .site-header,
  .feature-card,
  .security-card,
  .notify-card,
  .story-panel,
  .mini-space-demo {
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .site-header { background:rgba(9,9,13,.96);box-shadow:0 10px 30px rgba(0,0,0,.22); }
  .app-window,
  .app-stage:hover .app-window {
    transform:none!important;
    will-change:auto!important;
    transition:none!important;
    box-shadow:0 22px 58px rgba(0,0,0,.38)!important;
  }
  .feature-card:hover { transform:none!important; }
  .feature-card::after { display:none!important; }
  .reveal { transition:opacity .38s ease,transform .38s ease;transform:translateY(10px); }
  .story-context-bars i::after { animation:none!important; }
  .story-panel,
  .mini-space-demo,
  [data-parallax] { transform:none!important;will-change:auto!important; }
  .feature-section,
  .security-section,
  .manifesto-section,
  .notify-section,
  .scroll-story { content-visibility:auto;contain-intrinsic-size:1px 780px; }

  .hero { gap:30px;padding-top:78px;padding-bottom:48px; }
  .hero h1 { font-size:clamp(48px,14vw,66px);line-height:.95; }
  .hero-lede { margin-top:20px;font-size:14px;line-height:1.58; }
  .hero-actions { margin-top:24px; }
  .hero-trust { margin-top:18px;gap:12px; }
  .app-stage { margin-top:0; }
  .feature-section,.security-section { padding:72px 0; }
  .manifesto-inner { padding:76px 0; }
  .notify-section { padding:16px 0 78px; }
  .feature-grid { margin-top:36px;gap:10px; }
  .feature-card { min-height:220px;padding:20px;border-radius:17px; }
  .feature-icon { margin-top:28px; }
  .security-card { padding:22px;border-radius:18px;gap:26px; }
  .notify-card { padding:52px 20px 44px;border-radius:21px; }
}

@media (max-width: 470px) {
  .section-shell { width:min(100% - 22px,1180px); }
  .site-header { width:calc(100% - 16px);padding-inline:10px;border-radius:14px; }
  .header-cta { padding:9px 10px; }
  .signal-strip { display:none; }
  .app-layout { min-height:350px; }
  .feature-card h3 { font-size:23px; }
  .feature-card p { font-size:12px; }
}


/* =========================================================
   V12 canonical intro: real Spaces MP4 on desktop + mobile
   ========================================================= */
.site-intro.intro-video-only {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  background: #05050a;
  isolation: isolate;
}
.site-intro.intro-video-only::before,
.site-intro.intro-video-only::after,
.site-intro.intro-video-only .intro-grid,
.site-intro.intro-video-only .intro-haze,
.site-intro.intro-video-only .intro-brand-lockup,
.site-intro.intro-video-only .intro-skyline {
  display: none !important;
}
.intro-video-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 61%, rgba(89,55,132,.12), transparent 32%),
    #05050a;
}
.intro-brand-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  transform: scale(.995);
  transition: opacity .16s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  background: #05050a;
}
.site-intro.intro-desktop-active .intro-brand-video-desktop,
.site-intro.intro-mobile-active .intro-brand-video-mobile {
  display: block;
}
.site-intro.intro-video-playing .intro-brand-video {
  opacity: 1;
  transform: none;
}
.site-intro.intro-video-held .intro-brand-video {
  opacity: 1;
  transform: scale(1.003);
}
.intro-video-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  align-content: center;
  gap: 24px;
  color: #d9ccff;
}
.site-intro.intro-video-failed .intro-video-fallback { display: grid; }
.site-intro.intro-video-failed .intro-brand-video { display: none !important; }
.intro-fallback-buildings {
  height: 150px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.intro-fallback-buildings i {
  width: 28px;
  height: var(--ih);
  border-radius: 8px 8px 1px 1px;
  background: linear-gradient(180deg,#c3a5ff,#67458f 70%,#392851);
  box-shadow: 0 0 28px rgba(142,98,209,.18);
}
.intro-fallback-buildings i:nth-child(1){--ih:72px}
.intro-fallback-buildings i:nth-child(2){--ih:112px}
.intro-fallback-buildings i:nth-child(3){--ih:150px}
.intro-fallback-buildings i:nth-child(4){--ih:104px}
.intro-fallback-buildings i:nth-child(5){--ih:68px}
.intro-video-fallback strong {
  font-size: clamp(34px,5vw,66px);
  letter-spacing: .13em;
  font-weight: 760;
}
.site-intro.intro-video-only.is-leaving {
  animation: v12IntroExit .58s cubic-bezier(.62,0,.2,1) forwards !important;
}
@keyframes v12IntroExit {
  from { opacity: 1; transform: scale(1); filter: blur(0); }
  to { opacity: 0; transform: scale(1.018); filter: blur(7px); visibility: hidden; }
}

/* Desktop: let the widescreen source breathe and keep the built skyline visually low. */
@media (min-width: 781px) {
  .intro-brand-video-desktop {
    width: min(100vw, 1920px);
    height: min(100vh, 1080px);
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%,-50%) scale(.995);
  }
  .site-intro.intro-video-playing .intro-brand-video-desktop {
    transform: translate(-50%,-50%) scale(1);
  }
  .site-intro.intro-video-held .intro-brand-video-desktop {
    transform: translate(-50%,-50%) scale(1.004);
  }
}

/* Mobile: use the portrait source as-is and keep the expensive landing motion off. */
@media (max-width: 780px) {
  .intro-brand-video-mobile {
    width: 100vw;
    height: 100dvh;
    object-position: center center;
  }
  .site-intro.intro-video-only { background:#05050a; }
  .story-sticky,
  .app-stage,
  [data-tilt-window],
  [data-float-card],
  [data-parallax] {
    will-change: auto !important;
  }
}

/* Reduced motion must never hide the branded intro. The video is already finite
   and we keep the rest of the landing page reduced. */
@media (prefers-reduced-motion: reduce) {
  .site-intro.intro-video-only,
  .site-intro.intro-video-only .intro-video-stage,
  .site-intro.intro-video-only .intro-brand-video {
    animation-play-state: running !important;
  }
}
\n\n/* =========================================================\n   V13 HYBRID INTRO - old skyline + real full-screen MP4\n   ========================================================= */\n.site-intro.intro-hybrid {\n  position: fixed;\n  inset: 0;\n  z-index: 9999;\n  display: grid !important;\n  place-items: center;\n  overflow: hidden;\n  isolation: isolate;\n  visibility: visible !important;\n  background:\n    radial-gradient(circle at 50% 38%, rgba(111,82,157,.18), transparent 25%),\n    radial-gradient(circle at 50% 105%, rgba(84,62,122,.22), transparent 38%),\n    #05050a;\n}\n.site-intro.intro-hybrid::before {\n  content: "";\n  position: absolute;\n  inset: 0;\n  z-index: 7;\n  pointer-events: none;\n  background: linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.018) 50%, transparent 58%);\n  transform: translateX(-100%);\n  animation: v13IntroSweep 1.5s .25s cubic-bezier(.2,.7,.2,1) forwards !important;\n}\n.site-intro.intro-hybrid .intro-video-stage {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  display: grid;\n  place-items: center;\n  overflow: hidden;\n  background: #05050a;\n}\n.site-intro.intro-hybrid .intro-brand-video {\n  position: absolute;\n  inset: 0;\n  display: none;\n  width: 100vw;\n  height: 100vh;\n  width: 100dvw;\n  height: 100dvh;\n  object-fit: cover;\n  object-position: center center;\n  opacity: 0;\n  transform: scale(1.012);\n  filter: saturate(.96) contrast(1.02);\n  transition: opacity .22s ease, transform .72s cubic-bezier(.2,.8,.2,1);\n  background: #05050a;\n}\n.site-intro.intro-hybrid.intro-desktop-active .intro-brand-video-desktop,\n.site-intro.intro-hybrid.intro-mobile-active .intro-brand-video-mobile {\n  display: block;\n}\n.site-intro.intro-hybrid.intro-video-playing .intro-brand-video {\n  opacity: 1;\n  transform: scale(1);\n}\n.site-intro.intro-hybrid.intro-video-held .intro-brand-video {\n  opacity: 1;\n  transform: scale(1.004);\n}\n.site-intro.intro-hybrid.intro-video-failed .intro-brand-video {\n  display: none !important;\n}\n\n/* Old intro atmosphere stays over the MP4 so it feels like one composition. */\n.site-intro.intro-hybrid .intro-grid {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  opacity: .08;\n  background-image:\n    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),\n    linear-gradient(90deg,rgba(255,255,255,.026) 1px, transparent 1px);\n  background-size: 52px 52px;\n  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 28%, black 82%, transparent 100%);\n  mask-image: linear-gradient(to bottom, transparent 0, black 28%, black 82%, transparent 100%);\n}\n.site-intro.intro-hybrid .intro-haze {\n  position: absolute;\n  z-index: 3;\n  border-radius: 50%;\n  filter: blur(90px);\n  pointer-events: none;\n  opacity: .11;\n  mix-blend-mode: screen;\n}\n.site-intro.intro-hybrid .intro-haze-a {\n  width: 44vw; height: 44vw; max-width: 650px; max-height: 650px;\n  background: #6f5596; left: 10%; top: 8%;\n}\n.site-intro.intro-hybrid .intro-haze-b {\n  width: 38vw; height: 38vw; max-width: 560px; max-height: 560px;\n  background: #3a314d; right: 8%; bottom: -12%;\n}\n\n/* This is the OLD building-rise layer the user wanted to preserve. */\n.site-intro.intro-hybrid .intro-skyline {\n  position: absolute;\n  z-index: 8;\n  left: 0; right: 0; bottom: 0;\n  height: min(36vh, 390px);\n  min-height: 225px;\n  display: flex !important;\n  justify-content: center;\n  align-items: flex-end;\n  gap: clamp(5px,.72vw,12px);\n  padding: 0 clamp(24px,7vw,128px);\n  perspective: 900px;\n  pointer-events: none;\n}\n.site-intro.intro-hybrid .intro-building {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(2,1fr);\n  gap: 8px 9px;\n  align-content: start;\n  padding: 16px 12px;\n  width: clamp(58px,8vw,116px);\n  height: var(--h);\n  border: 1px solid rgba(215,194,255,.08);\n  border-bottom: 0;\n  border-radius: 10px 10px 0 0;\n  background: linear-gradient(180deg,rgba(29,25,39,.68),rgba(8,7,13,.93));\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 -22px 65px rgba(102,74,145,.07);\n  transform-origin: center bottom;\n  transform: scaleY(.025) translateY(30px);\n  opacity: 0;\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n}\n.site-intro.intro-hybrid .intro-building::before {\n  content: "";\n  position: absolute;\n  left: 9px; right: 9px; top: 8px; height: 1px;\n  background: linear-gradient(90deg,transparent,rgba(205,178,255,.35),transparent);\n}\n.site-intro.intro-hybrid .intro-building::after {\n  content: "";\n  position: absolute; inset: 0; pointer-events: none;\n  background: linear-gradient(180deg,rgba(161,127,220,.06),transparent 44%);\n  opacity: .2;\n}\n.site-intro.intro-hybrid .intro-building span {\n  height: 4px;\n  border-radius: 999px;\n  background: rgba(191,169,232,.09);\n  box-shadow: 0 0 12px transparent;\n}\n.site-intro.intro-hybrid .intro-building.b1{--h:48%;--delay:.08s}\n.site-intro.intro-hybrid .intro-building.b2{--h:64%;--delay:.16s}\n.site-intro.intro-hybrid .intro-building.b3{--h:82%;--delay:.24s}\n.site-intro.intro-hybrid .intro-building.b4{--h:58%;--delay:.31s}\n.site-intro.intro-hybrid .intro-building.b5{--h:91%;--delay:.38s}\n.site-intro.intro-hybrid .intro-building.b6{--h:70%;--delay:.45s}\n.site-intro.intro-hybrid .intro-building.b7{--h:54%;--delay:.52s}\n.site-intro.intro-hybrid .intro-building.b8{--h:75%;--delay:.59s}\n.site-intro.intro-hybrid.skyline-live .intro-building {\n  animation: v13BuildingRise 1.08s calc(var(--delay) + .08s) cubic-bezier(.16,.86,.23,1) forwards !important;\n}\n.site-intro.intro-hybrid.skyline-live .intro-building span {\n  animation: v13WindowBlink 1.15s calc(var(--delay) + .74s) ease forwards !important;\n}\n.site-intro.intro-hybrid .intro-ground {\n  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;\n  background: linear-gradient(90deg,transparent 4%,rgba(210,184,255,.34),transparent 96%);\n  box-shadow: 0 0 34px rgba(128,98,180,.30);\n  opacity: 0;\n}\n.site-intro.intro-hybrid.skyline-live .intro-ground {\n  animation: v13GroundIn .55s .38s forwards !important;\n}\n.site-intro.intro-hybrid.skyline-complete .intro-building {\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.055),0 -26px 80px rgba(115,80,166,.09);\n}\n\n.site-intro.intro-hybrid.is-leaving {\n  animation: v13IntroExit .64s cubic-bezier(.62,0,.2,1) forwards !important;\n  pointer-events: none;\n}\n@keyframes v13IntroSweep { to { transform: translateX(100%); } }\n@keyframes v13BuildingRise {\n  0% { opacity:0; transform:scaleY(.025) translateY(30px); filter:blur(2px); }\n  24% { opacity:.62; }\n  74% { filter:blur(0); }\n  100% { opacity:1; transform:scaleY(1) translateY(0); filter:none; }\n}\n@keyframes v13WindowBlink {\n  0% { background:rgba(180,161,215,.08); }\n  55% { background:rgba(199,172,245,.38); box-shadow:0 0 16px rgba(151,116,210,.26); }\n  100% { background:rgba(180,161,215,.12); }\n}\n@keyframes v13GroundIn { to { opacity:1; } }\n@keyframes v13IntroExit {\n  0% { opacity:1; transform:scale(1); filter:blur(0); }\n  58% { opacity:.64; }\n  100% { opacity:0; transform:scale(1.02); filter:blur(8px); visibility:hidden; }\n}\n\n@media (min-width: 781px) {\n  .site-intro.intro-hybrid .intro-brand-video-desktop {\n    width:100vw; height:100vh; object-fit:cover; object-position:center center;\n  }\n}\n@media (max-width: 780px) {\n  .site-intro.intro-hybrid .intro-brand-video-mobile {\n    width:100vw; height:100dvh; object-fit:cover; object-position:center center;\n  }\n  .site-intro.intro-hybrid .intro-skyline {\n    height: 30dvh; min-height: 205px; padding-inline: 10px; gap: 4px;\n  }\n  .site-intro.intro-hybrid .intro-building {\n    width: clamp(34px, 11vw, 58px);\n    padding: 12px 7px;\n    gap: 7px 6px;\n    border-radius: 8px 8px 0 0;\n    backdrop-filter: none;\n    -webkit-backdrop-filter: none;\n  }\n  .site-intro.intro-hybrid .intro-haze { filter:blur(62px); opacity:.075; }\n  .site-intro.intro-hybrid .intro-grid { opacity:.04; background-size:44px 44px; }\n}\n\n/* Old global reduced-motion rule must never make the intro blank. */\n@media (prefers-reduced-motion: reduce) {\n  .site-intro.intro-hybrid::before { animation:v13IntroSweep 1.5s .25s cubic-bezier(.2,.7,.2,1) forwards !important; }\n  .site-intro.intro-hybrid.skyline-live .intro-building {\n    animation:v13BuildingRise 1.08s calc(var(--delay) + .08s) cubic-bezier(.16,.86,.23,1) forwards !important;\n  }\n  .site-intro.intro-hybrid.skyline-live .intro-building span {\n    animation:v13WindowBlink 1.15s calc(var(--delay) + .74s) ease forwards !important;\n  }\n  .site-intro.intro-hybrid.skyline-live .intro-ground { animation:v13GroundIn .55s .38s forwards !important; }\n  .site-intro.intro-hybrid.is-leaving { animation:v13IntroExit .64s cubic-bezier(.62,0,.2,1) forwards !important; }\n}\n
/* =========================================================
   V14 desktop skyline spacing polish
   Desktop only: spread the building-rise layer across the
   full viewport, make the towers slightly smaller, and keep
   clear space below the MP4/logo. Mobile is intentionally
   unchanged from V13.
   ========================================================= */
@media (min-width: 781px) {
  .site-intro.intro-hybrid .intro-skyline {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: clamp(175px, 25vh, 275px);
    min-height: 175px;
    padding: 0 clamp(18px, 2vw, 42px);
    justify-content: space-between;
    gap: 0;
  }

  .site-intro.intro-hybrid .intro-building {
    width: clamp(46px, 5.2vw, 82px);
    padding: 13px 9px;
    gap: 7px 7px;
    border-radius: 8px 8px 0 0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .site-intro.intro-hybrid .intro-building span {
    height: 3px;
  }
}

/* =========================================================
   V15 DESKTOP INTRO SIMPLIFICATION
   Desktop only: keep the original intro atmosphere, remove
   the extra CSS skyline entirely, and center the real MP4.
   Mobile remains exactly as V14/V13.
   ========================================================= */
@media (min-width: 781px) {
  .site-intro.intro-hybrid .intro-skyline {
    display: none !important;
  }

  .site-intro.intro-hybrid .intro-video-stage {
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: transparent;
  }

  .site-intro.intro-hybrid .intro-brand-video-desktop {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(78vw, 1180px) !important;
    height: auto !important;
    max-height: 76vh !important;
    aspect-ratio: 16 / 9;
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(.985) !important;
    border-radius: 24px;
    box-shadow: 0 32px 110px rgba(0,0,0,.28);
    background: transparent;
  }

  .site-intro.intro-hybrid.intro-video-playing .intro-brand-video-desktop {
    transform: scale(1) !important;
  }

  .site-intro.intro-hybrid.intro-video-held .intro-brand-video-desktop {
    transform: scale(1.003) !important;
  }
}


/* =========================================================
   Spaces 404 - lightweight, cinematic, and intentionally
   independent from the main landing-page intro.
   ========================================================= */
body.error-page {
  min-height:100vh;
  margin:0;
  overflow:hidden;
  color:#f5f2f8;
  background:
    radial-gradient(circle at 50% 46%, rgba(115,76,171,.16), transparent 34%),
    radial-gradient(circle at 18% 18%, rgba(91,61,133,.08), transparent 24%),
    #08080c;
}
.error-shell {
  min-height:100vh;
  display:grid;
  place-items:center;
  position:relative;
  isolation:isolate;
  padding:32px;
}
.error-grid {
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.16;
  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:64px 64px;
  mask-image:linear-gradient(to bottom, transparent 0%, #000 24%, #000 74%, transparent 100%);
}
.error-glow {
  position:absolute;
  width:min(58vw,760px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(126,87,190,.15), transparent 64%);
  filter:blur(26px);
  z-index:-2;
  animation:errorPulse 5.4s ease-in-out infinite;
}
.error-orbit,
.error-orbit::before,
.error-orbit::after {
  position:absolute;
  border:1px solid rgba(160,128,218,.12);
  border-radius:50%;
}
.error-orbit {
  width:min(72vw,900px);
  aspect-ratio:1;
  z-index:-1;
  animation:errorSpin 28s linear infinite;
}
.error-orbit::before { content:""; inset:12%; }
.error-orbit::after { content:""; inset:27%; }
.error-dot {
  position:absolute;
  top:13%;
  left:49%;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#a98adf;
  box-shadow:0 0 28px rgba(169,138,223,.9);
}
.error-card {
  width:min(620px,100%);
  text-align:center;
  padding:42px 34px 36px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(17,16,23,.78), rgba(10,9,14,.68));
  box-shadow:0 34px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  animation:errorCardIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.error-brand {
  width:52px;
  height:52px;
  margin:0 auto 30px;
  display:grid;
  place-items:center;
  border-radius:16px;
  font-size:20px;
  font-weight:800;
  background:linear-gradient(145deg,#836bb8,#44385d);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 18px 46px rgba(76,50,108,.3);
}
.error-code {
  margin:0;
  font-size:clamp(86px,15vw,158px);
  line-height:.78;
  letter-spacing:-.085em;
  font-weight:760;
  color:transparent;
  -webkit-text-stroke:1px rgba(210,194,237,.34);
  background:linear-gradient(180deg, rgba(213,197,243,.55), rgba(127,91,188,.05));
  -webkit-background-clip:text;
  background-clip:text;
  user-select:none;
}
.error-card h1 {
  margin:30px 0 0;
  font-size:clamp(30px,5vw,48px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.error-card p {
  max-width:470px;
  margin:15px auto 0;
  color:#8e8795;
  font-size:14px;
  line-height:1.7;
}
.error-actions {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:28px;
}
.error-actions a {
  min-height:46px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:13px;
  text-decoration:none;
  font-size:12px;
  font-weight:760;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.error-home {
  color:#111016;
  background:#f2eef6;
  border:1px solid #f2eef6;
}
.error-home:hover { transform:translateY(-2px); }
.error-back {
  color:#a39ca9;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.075);
}
.error-back:hover {
  color:#eee8f4;
  border-color:rgba(255,255,255,.14);
  transform:translateY(-2px);
}
.error-foot {
  margin-top:24px;
  color:#56505d;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@keyframes errorPulse { 0%,100%{transform:scale(.94);opacity:.7} 50%{transform:scale(1.06);opacity:1} }
@keyframes errorSpin { to{transform:rotate(360deg)} }
@keyframes errorCardIn { from{opacity:0;transform:translateY(18px) scale(.985)} to{opacity:1;transform:none} }
@media (max-width:690px) {
  .error-shell { padding:18px; }
  .error-card { padding:34px 20px 30px; border-radius:22px; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .error-orbit { width:130vw; }
  .error-actions { flex-direction:column; }
  .error-actions a { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .error-glow,.error-orbit,.error-card { animation:none!important; }
}

/* =========================================================
   V17 404 — animated lost-space scene
   ========================================================= */
.error-page-v17 {
  --mx: 0;
  --my: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(112,76,174,.14), transparent 34%),
    linear-gradient(180deg, #09090e 0%, #060609 100%);
}
.error-shell-v17 {
  overflow: hidden;
  perspective: 1100px;
}
.error-shell-v17 .error-grid {
  opacity: .22;
  background-size: 58px 58px;
  transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -6px), 0) scale(1.04);
  transition: transform .22s ease-out;
}
.error-glow-a {
  width:min(64vw,820px);
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  animation:errorV17Pulse 5.5s ease-in-out infinite;
}
.error-glow-b {
  width:min(42vw,560px);
  right:-7%;
  bottom:-18%;
  background:radial-gradient(circle, rgba(91,60,145,.13), transparent 64%);
  animation:errorV17Drift 8s ease-in-out infinite alternate;
}
.error-scan {
  position:absolute;
  inset:-18% 0 auto;
  height:24%;
  z-index:-1;
  opacity:.42;
  background:linear-gradient(to bottom, transparent, rgba(172,139,226,.09), rgba(172,139,226,.02), transparent);
  filter:blur(10px);
  animation:errorV17Scan 5.8s linear infinite;
  pointer-events:none;
}
.error-spacefield {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.error-spacefield i {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  border-radius:999px;
  background:rgba(210,192,241,.55);
  box-shadow:0 0 14px rgba(169,138,223,.42);
  opacity:.2;
  animation:errorV17Star var(--duration) var(--delay) ease-in-out infinite;
}
.error-orbit-main {
  width:min(78vw,980px);
  transform:translate3d(calc(var(--mx) * 9px), calc(var(--my) * 9px), 0);
  animation:errorV17Orbit 32s linear infinite;
  transition:transform .22s ease-out;
}
.error-orbit-inner {
  width:min(54vw,690px);
  opacity:.58;
  border-style:dashed;
  animation:errorV17OrbitReverse 23s linear infinite;
}
.error-dot-a { top:8%; left:57%; }
.error-dot-b {
  top:auto;
  left:auto;
  right:11%;
  bottom:28%;
  width:4px;
  height:4px;
  opacity:.62;
}
.error-ghost-number {
  position:absolute;
  z-index:-1;
  color:transparent;
  -webkit-text-stroke:1px rgba(167,133,219,.06);
  font-size:clamp(180px,30vw,520px);
  font-weight:800;
  letter-spacing:-.11em;
  user-select:none;
  pointer-events:none;
  will-change:transform;
}
.error-ghost-number-a {
  left:-8vw;
  top:-12vh;
  transform:translate3d(calc(var(--mx) * -13px),calc(var(--my) * -10px),0) rotate(-8deg);
}
.error-ghost-number-b {
  right:-6vw;
  bottom:-18vh;
  transform:translate3d(calc(var(--mx) * 11px),calc(var(--my) * 9px),0) rotate(7deg);
  opacity:.55;
}
.error-card-v17 {
  position:relative;
  overflow:hidden;
  transform:translate3d(calc(var(--mx) * 5px),calc(var(--my) * 4px),0);
  transition:transform .2s ease-out,border-color .2s ease,box-shadow .2s ease;
  animation:errorV17CardIn .72s cubic-bezier(.2,.8,.2,1) both;
}
.error-card-v17::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.04) 48%,transparent 62%);
  transform:translateX(-120%);
  animation:errorV17Sheen 5.5s 1.2s ease-in-out infinite;
}
.error-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:26px;
  color:#81798a;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
}
.error-status i {
  width:7px;
  height:7px;
  border-radius:999px;
  background:#a98adf;
  box-shadow:0 0 16px rgba(169,138,223,.8);
  animation:errorV17Blink 1.9s ease-in-out infinite;
}
.error-code-v17 {
  position:relative;
  filter:drop-shadow(0 18px 35px rgba(92,57,145,.16));
  animation:errorV17CodeFloat 4s ease-in-out infinite;
}
.error-code-v17::before,
.error-code-v17::after {
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:transparent;
  -webkit-text-stroke:1px rgba(203,178,240,.13);
  pointer-events:none;
  opacity:0;
}
.error-code-v17::before { transform:translateX(-3px); }
.error-code-v17::after { transform:translateX(3px); }
.error-card-v17:hover .error-code-v17::before,
.error-card-v17:hover .error-code-v17::after {
  animation:errorV17Glitch .8s steps(2,end) 1;
}
.error-coordinates {
  max-width:390px;
  margin:24px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#5e5864;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.error-coordinates i {
  flex:1;
  max-width:72px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(173,142,225,.26),transparent);
}
@keyframes errorV17Pulse {
  0%,100% { opacity:.5; transform:translate(-50%,-50%) scale(.92); }
  50% { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
}
@keyframes errorV17Drift {
  from { transform:translate3d(-2%,2%,0) scale(.95); }
  to { transform:translate3d(8%,-8%,0) scale(1.08); }
}
@keyframes errorV17Scan { from{transform:translateY(-20vh)} to{transform:translateY(145vh)} }
@keyframes errorV17Star { 0%,100%{opacity:.14;transform:scale(.75)} 50%{opacity:.8;transform:scale(1.25)} }
@keyframes errorV17Orbit { to{rotate:360deg} }
@keyframes errorV17OrbitReverse { to{rotate:-360deg} }
@keyframes errorV17CardIn { from{opacity:0;transform:translateY(22px) scale(.975)} to{opacity:1;transform:translate3d(calc(var(--mx) * 5px),calc(var(--my) * 4px),0)} }
@keyframes errorV17Sheen { 0%,62%{transform:translateX(-120%)} 84%,100%{transform:translateX(120%)} }
@keyframes errorV17Blink { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes errorV17CodeFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes errorV17Glitch {
  0%{opacity:0;clip-path:inset(10% 0 70% 0)}
  20%{opacity:.55;clip-path:inset(58% 0 20% 0)}
  40%{opacity:.2;clip-path:inset(34% 0 48% 0)}
  60%{opacity:.5;clip-path:inset(74% 0 4% 0)}
  100%{opacity:0;clip-path:inset(0)}
}
@media (max-width:690px) {
  .error-ghost-number { font-size:54vw; }
  .error-orbit-main { width:146vw; }
  .error-orbit-inner { width:98vw; }
  .error-code-v17 { font-size:clamp(92px,31vw,138px); }
  .error-coordinates { gap:7px; font-size:7px; }
  .error-spacefield i:nth-child(n+13) { display:none; }
  .error-card-v17 { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .error-page-v17 .error-scan,
  .error-page-v17 .error-spacefield i,
  .error-page-v17 .error-orbit,
  .error-page-v17 .error-glow,
  .error-page-v17 .error-status i,
  .error-page-v17 .error-code-v17,
  .error-page-v17 .error-card-v17::before { animation:none!important; }
}

/* =========================================================
   V19 404 — corrected rocket orientation
   Kept intentionally independent from the landing-page intro.
   ========================================================= */
.error-page-v18 {
  background:
    radial-gradient(circle at 50% 44%, rgba(112,76,174,.16), transparent 34%),
    radial-gradient(circle at 15% 88%, rgba(72,45,112,.10), transparent 28%),
    linear-gradient(180deg,#09090e 0%,#050508 100%);
}
.error-shell-v18 .error-grid {
  opacity:.21;
  background-size:58px 58px;
  animation:errorV18GridMove 13s linear infinite !important;
  will-change:background-position,transform;
}
.error-shell-v18 .error-scan {
  animation:errorV18Scan 5.6s linear infinite !important;
}
.error-shell-v18 .error-glow-a {
  animation:errorV18Glow 6s ease-in-out infinite !important;
}
.error-shell-v18 .error-glow-b {
  animation:errorV18GlowB 9s ease-in-out infinite alternate !important;
}
.error-page-v18 .error-orbit-main {
  animation:errorV18Orbit 34s linear infinite !important;
}
.error-page-v18 .error-orbit-inner {
  animation:errorV18OrbitReverse 25s linear infinite !important;
}
.error-page-v18 .error-status i {
  animation:errorV18Beacon 1.8s ease-in-out infinite !important;
}
.error-page-v18 .error-code-v17 {
  animation:errorV18CodeFloat 4.4s ease-in-out infinite !important;
}
.error-page-v18 .error-card-v18::before {
  animation:errorV18Sheen 5.8s 1.1s ease-in-out infinite !important;
}
.error-page-v18 .error-spacefield i {
  animation:errorV18Star var(--duration) var(--delay) ease-in-out infinite !important;
}

.error-flightpaths {
  position:absolute;
  inset:-4%;
  width:108%;
  height:108%;
  z-index:-1;
  overflow:visible;
  pointer-events:none;
  opacity:.6;
  filter:drop-shadow(0 0 8px rgba(148,112,207,.07));
}
.error-flightpaths .flightpath {
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke:rgba(169,139,220,.17);
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-dasharray:8 18;
  animation:errorV18RouteDash 10s linear infinite !important;
}
.error-flightpaths .flightpath-b {
  stroke:rgba(211,194,238,.10);
  stroke-dasharray:2 21;
  animation-duration:14s !important;
  animation-direction:reverse !important;
}
.error-flightpaths .flightpath-c {
  opacity:.62;
  stroke-dasharray:14 32;
  animation-duration:18s !important;
}

.error-speedlines {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.error-speedlines .speedline {
  --w: 220px;
  position:absolute;
  width:var(--w);
  height:1px;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(199,177,232,.28),transparent);
  opacity:0;
  transform:rotate(-19deg);
  filter:blur(.1px);
  animation:errorV18SpeedLine 6.8s linear infinite !important;
}
.error-speedlines .s1 { top:14%; left:-18%; animation-delay:-1.2s !important; }
.error-speedlines .s2 { top:30%; left:-30%; --w:330px; animation-delay:-4.8s !important; opacity:.55; }
.error-speedlines .s3 { top:68%; left:-25%; --w:280px; animation-delay:-2.7s !important; }
.error-speedlines .s4 { top:80%; left:-36%; --w:190px; animation-delay:-5.9s !important; }
.error-speedlines .s5 { top:48%; left:-31%; --w:140px; animation-delay:-3.5s !important; }
.error-speedlines .s6 { top:7%; left:-23%; --w:170px; animation-delay:-6.4s !important; }

.error-rockets {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.error-rocket {
  position:absolute;
  width:38px;
  height:16px;
  opacity:0;
  filter:drop-shadow(0 0 11px rgba(158,124,216,.27));
  will-change:transform,opacity;
}
.rocket-body {
  position:absolute;
  left:4px;
  top:2px;
  width:30px;
  height:12px;
  display:block;
  /* Point the nose toward travel. The parent rotation handles flight direction. */
  clip-path:polygon(0 14%,70% 14%,100% 50%,70% 86%,0 86%);
  background:linear-gradient(90deg,rgba(104,84,139,.84),rgba(220,205,242,.88));
  box-shadow:inset 0 1px rgba(255,255,255,.25);
  z-index:2;
}
.rocket-body::before,
.rocket-body::after {
  content:"";
  position:absolute;
  left:4px;
  width:11px;
  height:5px;
  background:#17121f;
  border:1px solid rgba(184,157,225,.28);
  z-index:-1;
}
.rocket-body::before {
  top:-4px;
  clip-path:polygon(0 100%,100% 0,100% 100%);
}
.rocket-body::after {
  bottom:-4px;
  clip-path:polygon(0 0,100% 0,100% 100%);
}
.rocket-body i {
  position:absolute;
  width:5px;
  height:5px;
  right:8px;
  top:3px;
  border-radius:50%;
  background:#b89ee1;
  box-shadow:0 0 10px rgba(184,158,225,.7);
}
.rocket-body b {
  position:absolute;
  left:-10px;
  top:3px;
  width:12px;
  height:6px;
  clip-path:polygon(0 50%,100% 0,100% 100%);
  background:linear-gradient(90deg,transparent,#9c77d0 60%,#d2bbee);
  filter:blur(.3px);
  transform-origin:right center;
  animation:errorV18Flame .34s ease-in-out infinite alternate !important;
  z-index:1;
}
.rocket-trail {
  position:absolute;
  right:calc(100% - 8px);
  top:50%;
  width:82px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(166,130,219,.10),rgba(204,181,238,.36));
  transform:translateY(-50%);
  transform-origin:right center;
  border-radius:999px;
  filter:blur(.15px);
  z-index:0;
}
.rocket-a {
  top:70%; left:-12%;
  animation:errorV18RocketA 11.5s cubic-bezier(.34,.08,.66,.95) 1.1s infinite !important;
}
.rocket-b {
  top:19%; right:-14%;
  transform:scale(.72) rotate(180deg);
  animation:errorV18RocketB 15s linear 5.4s infinite !important;
}
.rocket-c {
  top:84%; left:-16%;
  transform:scale(.52) rotate(-9deg);
  animation:errorV18RocketC 19s linear 8.3s infinite !important;
  opacity:.5;
}

.error-card-v18 {
  z-index:3;
}

@keyframes errorV18GridMove {
  from { background-position:0 0,0 0; }
  to { background-position:58px 58px,58px 58px; }
}
@keyframes errorV18Scan {
  from { transform:translateY(-24vh); opacity:0; }
  14% { opacity:.45; }
  86% { opacity:.28; }
  to { transform:translateY(148vh); opacity:0; }
}
@keyframes errorV18Glow {
  0%,100% { opacity:.48; transform:translate(-50%,-50%) scale(.92); }
  50% { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
}
@keyframes errorV18GlowB {
  from { transform:translate3d(-3%,3%,0) scale(.94); opacity:.5; }
  to { transform:translate3d(9%,-8%,0) scale(1.1); opacity:.9; }
}
@keyframes errorV18Orbit { to { rotate:360deg; } }
@keyframes errorV18OrbitReverse { to { rotate:-360deg; } }
@keyframes errorV18Beacon { 0%,100%{opacity:.35;box-shadow:0 0 8px rgba(169,138,223,.4)} 50%{opacity:1;box-shadow:0 0 24px rgba(169,138,223,.95)} }
@keyframes errorV18CodeFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes errorV18Sheen { 0%,65%{transform:translateX(-120%)} 86%,100%{transform:translateX(120%)} }
@keyframes errorV18Star { 0%,100%{opacity:.13;transform:scale(.72)} 50%{opacity:.82;transform:scale(1.3)} }
@keyframes errorV18RouteDash { to { stroke-dashoffset:-260; } }
@keyframes errorV18SpeedLine {
  0% { transform:translate3d(0,0,0) rotate(-19deg); opacity:0; }
  12% { opacity:.55; }
  70% { opacity:.32; }
  100% { transform:translate3d(150vw,-48vh,0) rotate(-19deg); opacity:0; }
}
@keyframes errorV18Flame { from{transform:scaleX(.72);opacity:.65} to{transform:scaleX(1.16);opacity:1} }
@keyframes errorV18RocketA {
  0%,6% { transform:translate3d(0,0,0) rotate(-18deg) scale(.9); opacity:0; }
  10% { opacity:.9; }
  84% { opacity:.9; }
  91%,100% { transform:translate3d(132vw,-54vh,0) rotate(-18deg) scale(.9); opacity:0; }
}
@keyframes errorV18RocketB {
  0%,12% { transform:translate3d(0,0,0) rotate(164deg) scale(.68); opacity:0; }
  16% { opacity:.58; }
  82% { opacity:.58; }
  91%,100% { transform:translate3d(-128vw,47vh,0) rotate(164deg) scale(.68); opacity:0; }
}
@keyframes errorV18RocketC {
  0%,18% { transform:translate3d(0,0,0) rotate(-8deg) scale(.5); opacity:0; }
  24% { opacity:.36; }
  84% { opacity:.36; }
  94%,100% { transform:translate3d(136vw,-25vh,0) rotate(-8deg) scale(.5); opacity:0; }
}

@media (max-width:690px) {
  .error-flightpaths { width:126%; left:-13%; opacity:.44; }
  .error-speedlines .s2,.error-speedlines .s4,.error-speedlines .s6 { display:none; }
  .rocket-b,.rocket-c { display:none; }
  .rocket-a { animation-duration:13s !important; }
  .error-shell-v18 .error-grid { animation-duration:18s !important; }
}

/* The user's Windows/browser reports reduced motion. V17 therefore looked
   completely frozen. Keep this page gently alive even in that mode. */
@media (prefers-reduced-motion: reduce) {
  .error-page-v18 .error-shell-v18 .error-grid { animation:errorV18GridMove 22s linear infinite !important; }
  .error-page-v18 .error-shell-v18 .error-scan { animation:errorV18Scan 8s linear infinite !important; }
  .error-page-v18 .error-flightpaths .flightpath { animation:errorV18RouteDash 16s linear infinite !important; }
  .error-page-v18 .error-speedlines .speedline { animation:errorV18SpeedLine 10s linear infinite !important; }
  .error-page-v18 .error-rocket.rocket-a { animation:errorV18RocketA 16s linear 1s infinite !important; }
  .error-page-v18 .error-rocket.rocket-b { animation:errorV18RocketB 20s linear 5s infinite !important; }
  .error-page-v18 .error-rocket.rocket-c { animation:errorV18RocketC 24s linear 8s infinite !important; }
  .error-page-v18 .error-orbit-main { animation:errorV18Orbit 48s linear infinite !important; }
  .error-page-v18 .error-orbit-inner { animation:errorV18OrbitReverse 38s linear infinite !important; }
  .error-page-v18 .error-spacefield i { animation:errorV18Star 6s ease-in-out infinite !important; }
  .error-page-v18 .error-status i { animation:errorV18Beacon 2.4s ease-in-out infinite !important; }
  .error-page-v18 .error-code-v17 { animation:errorV18CodeFloat 6s ease-in-out infinite !important; }
  .error-page-v18 .error-glow-a { animation:errorV18Glow 9s ease-in-out infinite !important; }
  .error-page-v18 .error-glow-b { animation:errorV18GlowB 12s ease-in-out infinite alternate !important; }
  .error-page-v18 .error-card-v18::before { animation:errorV18Sheen 8s 1s ease-in-out infinite !important; }
}