:root {
  --ink: #101826;
  --ink-soft: #5e6c7e;
  --paper: #f4f6f8;
  --white: #ffffff;
  --line: #dce3e8;
  --night: #121b2b;
  --night-2: #18263b;
  --cyan: #20d6c7;
  --violet: #7567ff;
  --coral: #ff7a61;
  --shadow: 0 24px 70px rgba(32, 45, 61, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Segoe UI", "Microsoft YaHei UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.page-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed; left: 24px; right: 24px; top: 18px; z-index: 15;
  height: 70px; padding: 0 16px 0 20px; display: flex; align-items: center;
  background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.88);
  border-radius: 19px; box-shadow: 0 10px 40px rgba(22,35,52,.08);
  backdrop-filter: blur(18px); transition: transform .35s ease, box-shadow .35s ease;
}
.site-header.scrolled { box-shadow: 0 15px 45px rgba(22,35,52,.14); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; display: block; border-radius: 11px;
  background: linear-gradient(145deg, var(--cyan), var(--violet));
  -webkit-mask: url("assets/scum-assist-logo.png") center / 78% no-repeat;
  mask: url("assets/scum-assist-logo.png") center / 78% no-repeat;
}
.brand-copy { display: grid; gap: 2px; }
.brand-copy b { font-size: 13px; letter-spacing: .04em; }
.brand-copy small { font-size: 7px; letter-spacing: .16em; color: #8290a1; }
.site-nav { display: flex; gap: 34px; margin: auto; color: #647285; font-size: 13px; }
.site-nav a { position: relative; transition: color .2s ease; }
.site-nav a::after { content: ""; position: absolute; height: 2px; left: 0; right: 100%; bottom: -8px; background: var(--cyan); transition: right .25s ease; }
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { right: 0; }
.header-download { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 17px; border-radius: 12px; color: white; background: var(--night); font-size: 12px; transition: transform .2s ease, background .2s ease; }
.header-download:hover { transform: translateY(-2px); background: #21304a; }

.hero {
  min-height: 810px; padding: 155px max(6vw, 48px) 100px; position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(380px,.82fr) minmax(560px,1.18fr); align-items: center; gap: 6vw;
}
.hero::before { content: ""; position: absolute; width: 670px; height: 670px; right: -230px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(117,103,255,.13), transparent 68%); }
.hero-orbit { position: absolute; border: 1px solid rgba(91,112,132,.12); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 520px; height: 520px; left: -350px; top: 160px; }
.orbit-two { width: 170px; height: 170px; left: -70px; top: 335px; border-color: rgba(32,214,199,.3); }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #7a8898; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.eyebrow i { width: 22px; height: 1px; background: var(--coral); position: relative; }
.eyebrow i::after { content: ""; position: absolute; width: 4px; height: 4px; right: 0; top: -1px; border-radius: 50%; background: var(--coral); }
.hero h1 { margin: 24px 0 24px; font-size: clamp(52px,5.2vw,84px); line-height: 1.05; letter-spacing: -.065em; font-weight: 780; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1.5px #778498; }
.hero-lead { max-width: 570px; color: var(--ink-soft); font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.primary-action { min-width: 262px; height: 66px; padding: 0 20px; display: flex; align-items: center; gap: 14px; border-radius: 17px; color: white; background: var(--night); box-shadow: 0 16px 35px rgba(18,27,43,.18); transition: transform .25s ease, box-shadow .25s ease; }
.primary-action:hover { transform: translateY(-3px); box-shadow: 0 22px 42px rgba(18,27,43,.25); }
.download-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--night); background: var(--cyan); font-size: 19px; font-weight: 700; }
.primary-action span:nth-child(2) { display: grid; gap: 3px; }
.primary-action b { font-size: 13px; }
.primary-action small { color: #aeb8c7; font-size: 10px; }
.text-action { font-size: 13px; font-weight: 650; }
.text-action span { display: inline-block; margin-left: 5px; transition: transform .2s ease; }
.text-action:hover span { transform: translateX(4px); }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 28px; color: #7c8999; font-size: 10px; }
.trust-row span { display: flex; align-items: center; gap: 7px; }
.trust-row span:not(:first-child)::before { content: ""; width: 3px; height: 3px; background: #b1bbc7; border-radius: 50%; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(32,214,199,.12); }

.console-shell { position: relative; perspective: 1400px; }
.console-glow { position: absolute; inset: 15% 2% -7% 13%; background: linear-gradient(130deg, rgba(32,214,199,.3), rgba(117,103,255,.3)); filter: blur(45px); border-radius: 50%; opacity: .7; }
.console-window { position: relative; height: 535px; display: grid; grid-template-columns: 66px 1fr; background: white; border: 8px solid rgba(255,255,255,.8); border-radius: 28px; overflow: hidden; box-shadow: 0 45px 100px rgba(28,42,59,.19), 0 0 0 1px rgba(150,165,180,.2); transform: rotateY(-4deg) rotateX(1.5deg); transform-origin: center left; }
.console-rail { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 15px 0; border-right: 1px solid #e7ebef; background: #fbfcfd; }
.mini-logo { width: 29px; height: 29px; border-radius: 9px; background: linear-gradient(145deg,var(--cyan),var(--violet)); -webkit-mask: url("assets/scum-assist-logo.png") center / 78% no-repeat; mask: url("assets/scum-assist-logo.png") center / 78% no-repeat; margin-bottom: 10px; }
.rail-item { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
.rail-item i { width: 15px; height: 15px; border: 1.5px solid #8b99aa; border-radius: 5px; transform: rotate(45deg); }
.rail-item:nth-child(3) i { border-radius: 50%; }
.rail-item:nth-child(4) i { border-radius: 8px 2px; }
.rail-item.active { background: var(--night); box-shadow: 0 8px 18px rgba(18,27,43,.2); }
.rail-item.active i { border-color: var(--cyan); }
.rail-settings { margin-top: auto; color: #8593a4; }
.console-content { min-width: 0; display: grid; grid-template-rows: 56px 1fr 31px; }
.console-topbar { padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e7ebef; font-size: 11px; }
.console-topbar em { margin-left: 7px; color: #9ba6b4; font-style: normal; font-size: 9px; }
.window-controls { display: flex; gap: 11px; }.window-controls i { width: 6px; height: 6px; border-radius: 50%; background: #c3ccd6; }.window-controls i:last-child { background: var(--coral); }
.console-main { padding: 27px; background: #f3f6f8; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.panel-heading small { color: #99a6b5; font-size: 8px; letter-spacing: .14em; }.panel-heading h2 { font-size: 24px; margin: 5px 0 0; }
.toggle { width: 36px; height: 19px; padding: 3px; border-radius: 20px; background: #e0e6eb; }.toggle i { display: block; width: 13px; height: 13px; border-radius: 50%; background: white; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.metric-grid { display: grid; grid-template-columns: 1.5fr .8fr; gap: 14px; }
.metric-card,.state-card,.step-grid article { border: 1px solid #e0e6eb; background: white; border-radius: 17px; }
.metric-card { padding: 22px; position: relative; overflow: hidden; }.metric-card>span,.state-card>span { color: #8290a1; font-size: 9px; }.metric-card strong { display: block; margin-top: 15px; font-size: 43px; }.metric-card strong small { color: #6d7b8d; font-size: 10px; font-weight: 500; }
.sparkline { position: absolute; right: 18px; bottom: 22px; height: 65px; width: 160px; display: flex; align-items: flex-end; gap: 7px; }.sparkline i { flex: 1; height: 30%; background: linear-gradient(var(--violet),var(--cyan)); border-radius: 5px 5px 2px 2px; opacity: .82; }.sparkline i:nth-child(2){height:48%}.sparkline i:nth-child(3){height:38%}.sparkline i:nth-child(4){height:70%}.sparkline i:nth-child(5){height:57%}.sparkline i:nth-child(6){height:92%}
.state-card { padding: 21px; color: white; background: var(--night-2); border-color: var(--night-2); }.state-card>span { color: #9eabbc; }.state-card strong { display: block; margin: 12px 0 20px; font-size: 22px; }.state-card div { padding: 10px; border-radius: 9px; background: #243751; color: #c5ceda; font-size: 8px; }.state-card div i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--cyan); }
.step-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }.step-grid article { min-height: 108px; padding: 16px; display: grid; align-content: start; gap: 7px; }.step-grid b { color: var(--violet); font-size: 9px; }.step-grid span { font-size: 10px; font-weight: 700; }.step-grid small { color: #93a0af; font-size: 8px; line-height: 1.5; }
.console-status { padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: #93a0ae; font-size: 8px; border-top: 1px solid #e8ecf0; }.console-status i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); margin-right: 4px; }.console-status b { font-weight: 500; }.status-actions { color: #526176; }

.statement { min-height: 370px; padding: 90px max(8vw,48px); display: flex; align-items: flex-end; justify-content: space-between; background: var(--night); color: white; }
.statement p { margin: 0; font-size: clamp(35px,4vw,62px); line-height: 1.25; letter-spacing: -.04em; font-weight: 670; }.statement p span { color: var(--cyan); }.statement-note { color: #66758a; font-size: 9px; letter-spacing: .16em; line-height: 1.7; text-align: right; }

.capabilities,.workflow { padding: 110px max(7vw,48px); }
.section-label { display: flex; align-items: center; gap: 13px; margin-bottom: 38px; color: #758395; font-size: 11px; font-weight: 700; letter-spacing: .08em; }.section-label span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #cdd6de; border-radius: 50%; color: var(--ink); }
.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.feature { min-height: 360px; padding: 31px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: white; transition: transform .3s ease, box-shadow .3s ease; }.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow); }.feature-large { grid-row: span 2; min-height: 736px; background: #e9edef; }.feature-wide { min-height: 245px; grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #fdfdfd; }.feature-index { color: #8895a5; font-size: 9px; letter-spacing: .15em; }.feature h3 { margin: 25px 0 10px; font-size: 25px; letter-spacing: -.03em; }.feature p { max-width: 500px; margin: 0; color: #6c7989; font-size: 13px; line-height: 1.8; }
.feature-art { height: 385px; margin: 42px -5px 35px; position: relative; border-radius: 22px; background: var(--night); overflow: hidden; }.task-art::before { content: ""; position: absolute; width: 330px; height: 330px; border: 1px solid rgba(32,214,199,.38); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 42px rgba(117,103,255,.06),0 0 0 84px rgba(32,214,199,.04); }.task-art span { position: absolute; width: 92px; height: 92px; border-radius: 26px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(5px); }.task-art span:nth-child(1){left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);background:linear-gradient(145deg,var(--cyan),var(--violet));}.task-art span:nth-child(2){left:13%;top:21%;transform:rotate(12deg)}.task-art span:nth-child(3){right:10%;bottom:13%;transform:rotate(-18deg)}
.feature-symbol { width: 110px; height: 110px; margin-top: 40px; position: relative; border-radius: 30px; background: #eff3f5; }.scan-corners { position: absolute; inset: 26px; border: 2px solid var(--violet); border-left-color: transparent; border-right-color: transparent; }.scan-corners::after { content: ""; position:absolute; left:8px; right:8px; top:24px; height:2px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.pulse-symbol { display: flex; align-items: center; justify-content:center; gap:6px; background:var(--night); }.pulse-symbol i { width: 7px; height: 38px; border-radius: 5px; background: var(--cyan); }.pulse-symbol i:nth-child(2){height:66px;background:var(--violet)}.pulse-symbol i:nth-child(3){height:26px;background:var(--coral)}
.update-track { min-width: 420px; display: flex; align-items: center; }.update-track>i { flex:1; height:1px; background:linear-gradient(90deg,var(--cyan),var(--violet)); }.version-node { min-width: 115px; height: 72px; display:grid; place-items:center; align-content:center; gap:3px; border-radius:18px; font-size:15px; font-weight:750; }.version-node small { font-size:8px;font-weight:500;letter-spacing:.08em; }.version-node.done { color:var(--night);background:var(--cyan); }.version-node.next { color:white;background:var(--night); }

.workflow { padding-top: 35px; }
.workflow-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #cfd7df; }
.workflow-grid article { min-height: 245px; padding: 27px 42px 30px 0; border-right: 1px solid #cfd7df; }.workflow-grid article+article { padding-left:42px; }.workflow-grid article:last-child { border-right: 0; }.workflow-grid b { color:var(--coral);font-size:10px; }.workflow-grid h3 { margin:55px 0 12px;font-size:21px; }.workflow-grid p { margin:0;color:#6f7c8c;font-size:12px;line-height:1.8; }

.download-section { padding: 50px 24px 24px; }
.download-panel { min-height: 540px; padding: 75px max(7vw,55px); display:grid; grid-template-columns:1.1fr .7fr; align-items:center; gap:9vw; border-radius:30px; color:white; background:var(--night); position:relative;overflow:hidden; }.download-panel::before { content:"";position:absolute;width:600px;height:600px;border-radius:50%;right:-210px;top:-260px;background:radial-gradient(circle,rgba(117,103,255,.34),transparent 67%); }.download-panel::after { content:"";position:absolute;width:330px;height:330px;border:1px solid rgba(32,214,199,.28);border-radius:50%;left:-180px;bottom:-200px; }.eyebrow.light { color:#8594a8; }.download-copy h2 { margin:22px 0;font-size:clamp(40px,4.2vw,66px);line-height:1.12;letter-spacing:-.05em; }.download-copy p { max-width:550px;color:#98a5b6;font-size:14px;line-height:1.9; }
.download-card { position:relative;z-index:2;padding:28px;border:1px solid rgba(255,255,255,.16);border-radius:24px;background:rgba(255,255,255,.08);backdrop-filter:blur(18px);box-shadow:0 25px 70px rgba(0,0,0,.25); }.download-card-top { display:flex;align-items:center;gap:12px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12); }.brand-mark.small{width:42px;height:42px}.download-card-top>span:last-child{display:grid;gap:4px}.download-card-top b{font-size:13px}.download-card-top small{color:#8e9daf;font-size:9px}.release-meta{display:flex;align-items:end;justify-content:space-between;margin:30px 0 22px;color:#8e9daf;font-size:10px}.release-meta b{color:white;font-size:34px}.download-card>a{height:58px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-radius:15px;background:var(--cyan);color:#10212a;font-size:13px;font-weight:750;transition:transform .2s ease}.download-card>a:hover{transform:translateY(-2px)}.download-card>a b{font-size:20px}.download-card>a.setup-fallback{height:auto;margin-top:15px;padding:0;display:block;text-align:center;color:#9eacbd;background:transparent;font-size:9px;font-weight:500}.download-card>a.setup-fallback:hover{color:white;transform:none}.download-tip{display:block;margin-top:12px;color:#8493a7;font-size:8px;line-height:1.6;text-align:center}
footer { min-height:140px;padding:40px max(4vw,35px);display:flex;align-items:center;justify-content:space-between;gap:30px;color:#7e8b9b;font-size:10px; }.footer-brand{min-width:210px}footer p{text-align:center}footer>span{min-width:120px;text-align:right;letter-spacing:.1em}

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

@media (max-width: 1080px) {
  .hero { grid-template-columns:1fr;padding-top:145px; }.hero-copy{max-width:720px}.console-shell{max-width:850px;width:100%;margin:15px auto 0}.console-window{transform:none}.feature-large{grid-row:auto;min-height:620px}.feature-art{height:290px}.update-track{min-width:330px}.download-panel{grid-template-columns:1fr 400px;gap:5vw}
}
@media (max-width: 760px) {
  .site-header{left:10px;right:10px;top:10px;height:60px}.site-nav{display:none}.brand-copy b{font-size:11px}.header-download{margin-left:auto;height:36px}.hero{min-height:auto;padding:125px 22px 70px;grid-template-columns:1fr}.hero h1{font-size:48px}.hero-lead{font-size:14px}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.primary-action{width:100%}.trust-row{gap:13px}.console-window{height:420px;grid-template-columns:46px 1fr;border-width:5px;border-radius:20px}.console-rail{gap:11px}.mini-logo{width:24px;height:24px}.rail-item{width:29px;height:29px}.rail-item i{width:11px;height:11px}.console-main{padding:18px}.metric-grid{grid-template-columns:1fr}.state-card{display:none}.sparkline{width:110px}.step-grid{gap:6px}.step-grid article{padding:10px;min-height:90px}.status-actions{display:none}.statement{min-height:300px;padding:65px 24px;align-items:flex-start;flex-direction:column;gap:35px}.statement p{font-size:34px}.capabilities,.workflow{padding:75px 22px}.feature-grid{grid-template-columns:1fr}.feature-large{min-height:570px}.feature-wide{grid-column:auto;display:block}.update-track{min-width:0;margin-top:35px}.workflow-grid{grid-template-columns:1fr}.workflow-grid article,.workflow-grid article+article{min-height:180px;padding:24px 0;border-right:0;border-bottom:1px solid #cfd7df}.workflow-grid h3{margin-top:30px}.download-section{padding:12px}.download-panel{padding:55px 24px;grid-template-columns:1fr;border-radius:24px}.download-copy h2{font-size:40px}.download-card{margin-top:15px}footer{flex-direction:column;text-align:center}footer>span{text-align:center}.footer-brand{min-width:0}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important} }