/* sectorzero.life — the SectorZero look: near-black, hairline borders, Inter, the three-dot palette.
   Motion is transform/opacity only, starts when a section scrolls in, and stops for reduced motion. */
:root {
  --bg: #07080b; --bg2: #0c0e13; --card: #101218; --soft: #161921; --line: rgba(255, 255, 255, 0.08); --line2: rgba(255, 255, 255, 0.14);
  --ink: #f1f2f5; --mut: #8b919d; --y: #facc15; --p: #ec4899; --r: #ef4444; --rose: #f43f5e; --good: #4ade80;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.55 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; font-feature-settings: 'cv11', 'ss01'; }
a { color: inherit; text-decoration: none; }
code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85em; background: var(--soft); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
.grad { background: linear-gradient(90deg, var(--y), var(--p) 45%, var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--mut); }
section { position: relative; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 6px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 12px; font-weight: 600; font-size: 15px; border: 1px solid var(--line2); background: var(--soft); color: var(--ink); cursor: pointer; transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s; white-space: nowrap; font-family: inherit; }
.btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.28); }
.btn.primary { background: linear-gradient(90deg, var(--rose), var(--p)); border-color: transparent; color: #fff; box-shadow: 0 10px 30px -10px rgba(236, 72, 153, 0.6); }
.btn.ghost { background: rgba(255, 255, 255, 0.04); }
.btn.lg { height: 54px; padding: 0 24px; font-size: 16px; border-radius: 14px; }
.btn.sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn svg { transition: transform 0.2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.play { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #0b0c10; display: grid; place-items: center; padding-left: 2px; }

/* nav */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 max(20px, calc(50vw - 600px)); transition: background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(7, 8, 11, 0.78); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.04em; }
.links { display: flex; gap: 28px; font-size: 14px; color: var(--mut); }
.links a:hover { color: var(--ink); }
@media (max-width: 760px) { .links { display: none; } }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.up { transform: translateY(60px) scale(0.98); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; } .d3 { transition-delay: 0.24s; } .d4 { transition-delay: 0.32s; } .d5 { transition-delay: 0.4s; }

/* hero */
.hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 110px max(20px, calc(50vw - 600px)) 70px; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; opacity: 0.35; }
.g1 { width: 720px; height: 720px; background: var(--p); left: -260px; top: -260px; animation: drift 18s ease-in-out infinite alternate; }
.g2 { width: 560px; height: 560px; background: var(--y); right: -200px; bottom: -260px; opacity: 0.16; animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(140px, 90px); } }
.hero-copy { position: relative; z-index: 2; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.04); font-size: 13px; color: #d5d7dd; margin-bottom: 26px; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15); }
h1 { font-size: clamp(46px, 5.6vw, 84px); line-height: 0.98; letter-spacing: -0.055em; font-weight: 600; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--mut); max-width: 540px; margin: 26px 0 34px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.stats { display: flex; gap: 40px; margin-top: 52px; }
.stats div { display: flex; flex-direction: column; }
.stats b { font-size: 34px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stats span { font-size: 13px; color: var(--mut); }
.wall { position: relative; height: 760px; display: flex; gap: 16px; transform: perspective(1600px) rotateX(14deg) rotateY(-16deg) rotateZ(6deg); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.col { flex: 1; display: flex; flex-direction: column; gap: 16px; animation: rise 38s linear infinite; }
.col:nth-child(2) { animation-duration: 46s; animation-direction: reverse; }
.col:nth-child(3) { animation-duration: 42s; }
@keyframes rise { to { transform: translateY(-50%); } }
.poster { position: relative; aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(120% 80% at 20% 0%, var(--a), transparent 60%), linear-gradient(170deg, var(--b), #0b0c10 85%); flex: none; }
.poster b { position: absolute; left: 14px; right: 12px; bottom: 34px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.poster em { position: absolute; left: 14px; bottom: 14px; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.7); }
.poster .ico { position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; color: rgba(255, 255, 255, 0.85); }
.wall.paused .col { animation-play-state: paused; }
.poster.real { background: var(--soft); }
.poster.real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster.real::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }
.poster.real em { z-index: 1; }
img.thumb { object-fit: cover; }
.tmdb { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 100px; }
  .wall { height: 360px; margin: 0 -20px; transform: perspective(1200px) rotateX(18deg) rotateZ(4deg); }
  .stats { gap: 26px; }
}

/* sections */
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 56px; padding: 0 20px; }
.sec-head h2, .closing h2 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.05em; font-weight: 600; }
.sec-head p { color: var(--mut); font-size: 18px; margin-top: 18px; }
.sec-head.small-head h2 { font-size: clamp(30px, 4vw, 46px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); margin-bottom: 18px; }
.featured { padding: 120px max(20px, calc(50vw - 600px)) 60px; }

/* the app mock */
.browser { max-width: 1100px; margin: 0 auto; border-radius: 22px; border: 1px solid var(--line2); background: var(--card); overflow: hidden; box-shadow: 0 60px 140px -40px rgba(236, 72, 153, 0.35), 0 30px 80px rgba(0, 0, 0, 0.6); }
.browser > .bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.browser > .bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a2e38; }
.browser > .bar span { margin: 0 auto; padding: 4px 16px; border-radius: 8px; background: var(--soft); font-size: 12px; color: var(--mut); font-family: 'JetBrains Mono', monospace; }
.app { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 460px; }
.app-side { border-right: 1px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; }
.app-side svg { margin: 0 0 18px 8px; }
.app-side b { font-weight: 500; font-size: 14px; color: var(--mut); padding: 9px 12px; border-radius: 9px; }
.app-side b.on { background: var(--soft); color: var(--ink); }
.app-main { padding: 26px 30px 84px; position: relative; }
.app-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.app-top h3 { font-size: 26px; letter-spacing: -0.03em; font-weight: 600; }
.chipset { display: flex; gap: 6px; }
.chip { font-size: 12px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line2); color: var(--mut); }
.chip.on { background: var(--ink); color: #0b0c10; border-color: transparent; font-weight: 600; }
.rows { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.row > div { flex: 1; min-width: 0; }
.row b { font-weight: 600; letter-spacing: -0.02em; }
.row span { display: block; font-size: 13px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.row strong small { font-size: 14px; color: var(--mut); font-weight: 500; }
.thumb { width: 44px; height: 60px; border-radius: 9px; flex: none; background: linear-gradient(160deg, var(--a), var(--b)); }
.track { display: block; height: 6px; border-radius: 9px; background: #252a35; overflow: hidden; margin-top: 10px; max-width: 420px; }
.track u { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, var(--rose), var(--p)); transition: width 1.6s var(--ease) 0.4s; }
.in .track u, .track.in u { width: var(--w); }
.toast-mock { position: absolute; right: 26px; bottom: 22px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: #f1f2f5; color: #0b0c10; font-weight: 600; font-size: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(16px); transition: 0.7s var(--ease) 1.8s; }
.in .toast-mock { opacity: 1; transform: none; }
.ok { width: 22px; height: 22px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; }
@media (max-width: 760px) { .app { grid-template-columns: minmax(0, 1fr); } .app-side, .chipset { display: none; } .app-main { padding: 18px; } .row { gap: 12px; padding: 12px; } .toast-mock { position: static; margin-top: 14px; } .row strong { font-size: 18px; } }

/* feature grid */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 64px auto 0; }
@media (max-width: 980px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }
.feat { padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--card), var(--bg2)); transition: border-color 0.3s, transform 0.4s var(--ease); }
.feat:hover { border-color: var(--line2); transform: translateY(-3px); }
.feat h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin: 20px 0 6px; }
.feat p { font-size: 14px; color: var(--mut); }
.art { height: 130px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.media-cycle span { position: absolute; font-size: 34px; font-weight: 600; letter-spacing: -0.04em; opacity: 0; animation: cyc 14s infinite; }
.media-cycle span:nth-child(1) { animation-delay: 0s; } .media-cycle span:nth-child(2) { animation-delay: 2s; } .media-cycle span:nth-child(3) { animation-delay: 4s; } .media-cycle span:nth-child(4) { animation-delay: 6s; } .media-cycle span:nth-child(5) { animation-delay: 8s; } .media-cycle span:nth-child(6) { animation-delay: 10s; } .media-cycle span:nth-child(7) { animation-delay: 12s; }
@keyframes cyc { 0% { opacity: 0; transform: translateY(20px); } 3%, 12% { opacity: 1; transform: none; } 15%, 100% { opacity: 0; transform: translateY(-20px); } }
.media-cycle span { background: linear-gradient(90deg, var(--y), var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ep { flex-direction: column; align-items: flex-start; padding: 0 22px; }
.ep b { font-size: 13px; color: var(--mut); font-weight: 500; }
.ep span { font-size: 18px; font-weight: 600; }
.ep .track { width: 100%; }
.web svg { width: 100%; height: 100%; padding: 8px; }
.web .lines path { fill: none; stroke: #3a3f4c; stroke-width: 1.5; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.6s var(--ease) 0.3s; }
.in .web .lines path { stroke-dashoffset: 0; }
.web circle { fill: #2a2f3b; stroke: #4a5060; }
.web circle.you { fill: #f1f2f5; stroke: none; }
.web circle.hot { fill: var(--p); stroke: none; animation: pulse 2s infinite; transform-origin: 178px 86px; }
@keyframes pulse { 50% { transform: scale(1.3); } }
.match { position: absolute; right: 10px; top: 10px; font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: linear-gradient(90deg, var(--rose), var(--p)); }
.lola { align-items: flex-end; gap: 12px; padding: 16px 22px; justify-content: flex-start; }
.day { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; }
.day b { font-size: 10px; color: var(--mut); font-weight: 500; }
.day i { width: 100%; max-width: 26px; height: 0; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--p), var(--rose)); transition: height 1.2s var(--ease) 0.3s; }
.in .day i { height: var(--h); }
.cat { position: absolute; right: 14px; top: 10px; font-size: 26px; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-6deg); } }
.award { gap: 16px; }
.cup { font-size: 46px; animation: bob 4s ease-in-out infinite; }
.award b { display: block; font-size: 16px; } .award span { font-size: 12px; color: var(--y); }
.studio { gap: 8px; }
.studio i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); transition: transform 0.3s; }
.studio i:nth-child(1) { animation: sw 5s infinite; } .studio i:nth-child(2) { animation: sw 5s 1s infinite; } .studio i:nth-child(3) { animation: sw 5s 2s infinite; } .studio i:nth-child(4) { animation: sw 5s 3s infinite; } .studio i:nth-child(5) { animation: sw 5s 4s infinite; }
@keyframes sw { 0%, 15% { transform: scale(1.4); box-shadow: 0 0 0 3px #fff; } 20%, 100% { transform: none; box-shadow: none; } }
.studio .name { position: absolute; bottom: 14px; font-size: 20px; letter-spacing: -0.02em; animation: hue 5s steps(5) infinite; }
@keyframes hue { 0% { color: #f43f5e; } 20% { color: #facc15; } 40% { color: #22c55e; } 60% { color: #60a5fa; } 80% { color: #a78bfa; } }
.chat { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; }
.chat .b { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 13px; }
.chat .l { background: #232733; align-self: flex-start; border-bottom-left-radius: 4px; }
.chat .r { background: linear-gradient(90deg, var(--rose), var(--p)); align-self: flex-end; border-bottom-right-radius: 4px; opacity: 0; transform: translateY(8px); transition: 0.6s var(--ease) 0.9s; }
.in .chat .r { opacity: 1; transform: none; }
.deals { flex-direction: column; gap: 2px; }
.deals b { font-size: 40px; font-weight: 700; color: var(--good); letter-spacing: -0.04em; }
.deals span { font-weight: 600; } .deals em { font-style: normal; font-size: 12px; color: var(--mut); }
.mail { gap: 14px; }
.env { font-size: 40px; animation: bob 3.5s ease-in-out infinite; }
.mail b { display: block; } .mail span { font-size: 12px; color: var(--mut); }

/* platforms */
.platforms { margin-top: 120px; }
.plat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .plat-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .plat-row { grid-template-columns: repeat(2, 1fr); } }
.plat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); text-align: center; transition: border-color 0.3s, transform 0.4s var(--ease); }
.plat:hover { border-color: var(--line2); transform: translateY(-4px); }
.plat svg { width: 40px; height: 40px; margin-bottom: 4px; }
.plat b { font-weight: 600; } .plat span { font-size: 13px; color: var(--mut); }
.plat code { font-size: 12px; }

/* family */
.family { padding: 140px max(20px, calc(50vw - 600px)) 40px; }
.prod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 64px; max-width: 1100px; margin: 0 auto 140px; }
.prod.rev .prod-copy { order: 2; }
@media (max-width: 900px) { .prod { grid-template-columns: 1fr; gap: 36px; margin-bottom: 100px; } .prod.rev .prod-copy { order: 0; } }
.prod .num { display: block; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--mut); margin-bottom: 8px; }
.prod .eyebrow { color: var(--tone); margin-bottom: 10px; }
.prod h3 { font-size: clamp(34px, 4vw, 50px); letter-spacing: -0.045em; font-weight: 600; line-height: 1.05; }
.prod .big { font-size: 20px; color: #c9ccd3; margin: 12px 0 24px; }
.prod ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.prod li { display: flex; gap: 12px; align-items: flex-start; color: #c9ccd3; font-size: 15px; }
.prod li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--tone); }
.prod[data-tone='indigo'] { --tone: #a5b4fc; } .prod[data-tone='green'] { --tone: #4ade80; } .prod[data-tone='amber'] { --tone: #fbbf24; } .prod[data-tone='violet'] { --tone: #c4b5fd; } .prod[data-tone='rose'] { --tone: #fda4af; }
.mock { position: relative; border-radius: 26px; border: 1px solid var(--line2); background: radial-gradient(500px 260px at 30% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%), var(--card); padding: 28px; min-height: 420px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7); overflow: hidden; }

/* cards mock */
.cards-mock { display: flex; flex-direction: column; align-items: center; gap: 18px; perspective: 1200px; }
.flash { width: min(340px, 100%); height: 200px; position: relative; transform-style: preserve-3d; animation: flip 6s var(--ease) infinite; }
@keyframes flip { 0%, 35% { transform: rotateY(0); } 50%, 85% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.face { position: absolute; inset: 0; border-radius: 18px; background: #f7f7f8; color: #0b0c10; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 38px; font-weight: 600; letter-spacing: -0.03em; backface-visibility: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.face .k { font-size: 13px; color: #6b7280; font-weight: 500; letter-spacing: 0; margin-bottom: 6px; }
.face.back { transform: rotateY(180deg); background: #fff; }
.rates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(380px, 100%); }
.rates span { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line2); background: var(--soft); font-size: 13px; font-weight: 600; }
.rates em { font-style: normal; font-size: 11px; color: var(--mut); font-weight: 500; }
.rates .r1 { color: #f87171; } .rates .r2 { color: #fbbf24; } .rates .r3 { color: #4ade80; animation: tap 6s infinite; } .rates .r4 { color: #60a5fa; }
@keyframes tap { 0%, 86% { transform: none; border-color: var(--line2); } 90% { transform: scale(0.94); border-color: #4ade80; } 96% { transform: none; } }
.curve-card { width: min(380px, 100%); padding: 14px 16px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.curve-card span { font-size: 12px; } .curve-card b { display: block; font-size: 14px; color: var(--good); margin-bottom: 4px; }
.curve-card svg { width: 100%; height: 70px; }
.curve-card .tg { stroke: var(--rose); stroke-dasharray: 5 4; stroke-width: 1.5; fill: none; }
.curve-card .cv { fill: none; stroke: #60a5fa; stroke-width: 2.5; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 2s var(--ease) 0.4s; }
.in .curve-card .cv { stroke-dashoffset: 0; }
.curve-card circle { fill: #fff; }

/* finance phone */
.phone { max-width: 360px; justify-self: center; width: 100%; border-radius: 40px; padding: 26px 20px; display: flex; flex-direction: column; gap: 12px; }
.ph-top { display: flex; justify-content: space-between; color: var(--mut); font-size: 14px; }
.ph-top b { color: var(--ink); background: var(--soft); padding: 2px 10px; border-radius: 99px; font-size: 13px; }
.safe { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 20px; background: var(--soft); border: 1px solid var(--line); }
.ring { width: 86px; height: 86px; border-radius: 50%; flex: none; display: grid; place-items: center; text-align: center; background: conic-gradient(var(--good) calc(var(--p, 0) * 1%), #262b36 0); transition: --p 1.6s; line-height: 1.1; position: relative; }
.ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--soft); }
.ring b, .ring span { position: relative; } .ring b { display: block; font-size: 18px; } .ring span { font-size: 11px; color: var(--mut); }
.safe strong { display: block; font-size: 30px; letter-spacing: -0.04em; } .safe em { font-style: normal; font-size: 12px; color: var(--mut); }
.cool { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px dashed rgba(125, 211, 252, 0.45); background: rgba(125, 211, 252, 0.06); font-size: 13px; }
.cool > span { font-size: 22px; } .cool b { display: block; } .cool div span { color: var(--mut); } .cool div span b { display: inline; color: #7dd3fc; font-variant-numeric: tabular-nums; }
.txn { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.txn i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-style: normal; background: color-mix(in srgb, var(--c) 18%, var(--soft)); }
.txn div { flex: 1; } .txn b { display: block; font-weight: 500; } .txn span { font-size: 12px; color: var(--mut); } .txn em { font-style: normal; font-weight: 600; }

/* exams */
.exams { display: flex; flex-direction: column; gap: 10px; }
.ex { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); opacity: 0; transform: translateX(30px); transition: 0.7s var(--ease); }
.in .ex { opacity: 1; transform: none; }
.in .ex:nth-child(2) { transition-delay: 0.12s; } .in .ex:nth-child(3) { transition-delay: 0.24s; } .in .ex:nth-child(4) { transition-delay: 0.36s; }
.ex.dim { opacity: 0.5 !important; }
.ex b { font-weight: 600; } .ex span { display: block; font-size: 12px; color: var(--mut); }
.ex em { font-style: normal; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.ex em svg { width: 14px; height: 14px; }
.ex em.ok { background: none; width: auto; height: auto; color: var(--good); }
.ex em.no { color: #f87171; }
.ex strong { font-size: 13px; color: #fbbf24; font-weight: 600; text-align: right; min-width: 110px; }
@media (max-width: 520px) { .ex { grid-template-columns: 1fr auto; } .ex strong { grid-column: 1 / -1; text-align: left; } }
.alert { margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); font-size: 13px; animation: bob 4s ease-in-out infinite; }

/* discord */
.discord { background: #1e1f24; font-size: 14px; }
.discord .ch { color: var(--mut); font-weight: 600; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.msg { display: flex; gap: 12px; margin-bottom: 18px; }
.av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.av.u { background: linear-gradient(135deg, #60a5fa, #a78bfa); } .av.m { background: linear-gradient(135deg, var(--y), var(--rose)); color: #111; }
.msg b { font-weight: 600; font-size: 14px; } .msg p { color: #d6d8de; margin-top: 2px; }
.msg .tag { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: #5865f2; color: #fff; vertical-align: middle; margin-left: 4px; }
.typing { display: flex; gap: 4px; padding: 6px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mut); animation: dots 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: 0.4; } }
.reply { display: none; }
.discord.talked .typing { display: none; } .discord.talked .reply { display: block; animation: fadein 0.6s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }

/* account hub */
.hub { display: grid; place-items: center; }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-lines path { fill: none; stroke: rgba(253, 164, 175, 0.35); stroke-width: 1.5; stroke-dasharray: 4 6; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.core { position: relative; z-index: 2; width: 110px; height: 110px; border-radius: 30px; background: #0b0c10; border: 1px solid var(--line2); display: grid; place-items: center; box-shadow: 0 0 80px rgba(244, 63, 94, 0.35); }
.sat { position: absolute; z-index: 2; padding: 8px 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line2); font-size: 13px; font-weight: 600; animation: bob 5s ease-in-out infinite; }
/* centred on the line ends (the svg stretches to the box) */
.sat { translate: -50% -50%; }
.s1 { left: 17.5%; top: 20%; } .s2 { left: 82.5%; top: 20%; animation-delay: 1s; } .s3 { left: 15%; top: 78%; animation-delay: 2s; } .s4 { left: 85%; top: 78%; animation-delay: 3s; } .s5 { left: 50%; top: 10%; animation-delay: 1.5s; }

/* closing + footer */
.closing { text-align: center; padding: 140px 20px 160px; overflow: hidden; }
.g3 { width: 800px; height: 500px; background: var(--rose); opacity: 0.2; left: 50%; top: 40%; transform: translate(-50%, -50%); }
.big-mark { margin-bottom: 30px; }
.closing p { color: var(--mut); font-size: 18px; margin: 20px 0 34px; }
.closing .cta { justify-content: center; }
.foot { border-top: 1px solid var(--line); padding: 60px max(20px, calc(50vw - 600px)) 0; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; position: relative; }
.foot-brand { display: flex; flex-direction: column; gap: 8px; }
.foot-brand b { font-size: 19px; letter-spacing: -0.04em; } .foot-brand span { color: var(--mut); font-size: 14px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.foot-cols div { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.foot-cols b { font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.foot-cols a { color: #c9ccd3; } .foot-cols a:hover { color: #fff; }
.bar3 { grid-column: 1 / -1; display: flex; height: 4px; margin-top: 20px; border-radius: 4px; overflow: hidden; }
.bar3 i { flex: 1; } .bar3 i:nth-child(1) { background: var(--y); } .bar3 i:nth-child(2) { background: var(--p); } .bar3 i:nth-child(3) { background: var(--r); }
.copy { grid-column: 1 / -1; color: var(--mut); font-size: 13px; padding: 18px 0 30px; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: repeat(2, 1fr); } }

/* film */
dialog { margin: auto; border: 0; padding: 0; background: transparent; width: min(1100px, 94vw); overflow: visible; }
dialog::backdrop { background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(6px); }
dialog video { width: 100%; height: auto; border-radius: 18px; display: block; background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7); }
dialog .close { position: absolute; right: 0; top: -48px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: var(--soft); color: #fff; cursor: pointer; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .ex { opacity: 1 !important; transform: none !important; }
  .track u { width: var(--w) !important; } .day i { height: var(--h) !important; }
}