New ForntPage

README.txt

@@ -0,0 +1,10 @@
+煮糊了 OverCooked｜纯静态 HTML 版本
+
+使用方法：
+1. 将本目录内全部文件保持原有结构上传到网站根目录。
+2. 首页入口为 index.html。
+3. 定价页入口为 pricing.html。
+4. 直接双击 index.html 也可在本地浏览。
+
+本版本不依赖 Node.js、React、数据库或构建工具。
+基础版与专业版购买按钮已连接 Stripe，旗舰版按钮连接商务邮箱。

assets/apple.css

@@ -0,0 +1,365 @@
+@font-face {
+  font-family: Geist;
+  src: url("_vinext_fonts/geist-8ac0455e797f/geist-98bbbccb.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+:root {
+  --black: #060607;
+  --surface: #121214;
+  --surface-2: #1c1c1e;
+  --paper: #f5f5f7;
+  --white: #ffffff;
+  --ink: #1d1d1f;
+  --secondary: #86868b;
+  --line-dark: rgba(255, 255, 255, 0.12);
+  --line-light: rgba(29, 29, 31, 0.12);
+  --orange: #ff6b3d;
+  --blue: #2997ff;
+  --green: #30d158;
+  --ease: cubic-bezier(.22, 1, .36, 1);
+  font: 100%/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Geist, sans-serif;
+  color-scheme: dark;
+}
+
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; background: var(--black); }
+body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: inherit; -webkit-font-smoothing: antialiased; }
+a { color: inherit; text-decoration: none; }
+button { border: 0; color: inherit; font: inherit; }
+img { display: block; max-width: 100%; }
+[hidden] { display: none !important; }
+::selection { background: var(--orange); color: #fff; }
+
+@view-transition { navigation: auto; }
+::view-transition-old(root) { animation: page-fade-out .18s ease-in both; }
+::view-transition-new(root) { animation: page-fade-in .34s var(--ease) both; }
+@keyframes page-fade-out { to { opacity: 0; } }
+@keyframes page-fade-in { from { opacity: 0; } }
+
+.skip-link { position: fixed; z-index: 200; top: -5rem; left: 1rem; border-radius: .6rem; padding: .7rem 1rem; background: #fff; color: #111; transition: top .2s; }
+.skip-link:focus { top: 1rem; }
+:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
+
+/* Floating navigation */
+.site-header { position: fixed; z-index: 80; top: .75rem; right: 0; left: 0; opacity: 1; pointer-events: none; will-change: opacity; transition: opacity .26s ease; }
+.site-header.is-scroll-hidden { opacity: 0; }
+.site-header.is-scroll-hidden .nav-island { pointer-events: none; }
+.nav-island { --glass-x: 50%; --glass-y: 0%; position: relative; isolation: isolate; overflow: hidden; width: min(calc(100% - 2rem), 62rem); height: 3.3rem; margin: auto; padding: 0 .55rem 0 .95rem; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.025) 48%, rgba(255,255,255,.05)), rgba(18,18,20,.42); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 0 rgba(0,0,0,.16) inset, 0 8px 26px rgba(0,0,0,.14), 0 24px 54px rgba(0,0,0,.13); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(1.05); backdrop-filter: blur(28px) saturate(190%) contrast(1.05); pointer-events: auto; transition: background .32s ease, border-color .32s ease, box-shadow .32s ease, backdrop-filter .32s ease; }
+.nav-island::before { content: ""; position: absolute; z-index: -2; inset: 0; border-radius: inherit; background: radial-gradient(15rem 4.5rem at var(--glass-x) var(--glass-y), rgba(255,255,255,.24), transparent 70%), linear-gradient(105deg, rgba(255,255,255,.11), transparent 32%, rgba(255,255,255,.07) 58%, transparent 76%), linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%); opacity: .88; pointer-events: none; }
+.nav-island::after { content: ""; position: absolute; z-index: -1; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(105deg, rgba(255,255,255,.72), rgba(100,210,255,.16) 30%, rgba(255,255,255,.12) 50%, rgba(255,107,61,.12) 72%, rgba(255,255,255,.48)); opacity: .72; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
+.nav-island > * { position: relative; z-index: 1; }
+.site-header.is-scrolled .nav-island { border-color: rgba(255,255,255,.26); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 48%, rgba(255,255,255,.055)), rgba(18,18,20,.62); box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 10px 30px rgba(0,0,0,.19), 0 28px 60px rgba(0,0,0,.17); -webkit-backdrop-filter: blur(32px) saturate(195%) contrast(1.06); backdrop-filter: blur(32px) saturate(195%) contrast(1.06); }
+.wordmark { display: inline-flex; align-items: center; gap: .56rem; white-space: nowrap; font-size: .86rem; font-weight: 700; }
+.wordmark b { margin-left: -.25rem; color: #8e8e93; font-size: .66rem; font-weight: 650; }
+.wordmark-logo { width: 1.85rem; height: 1.85rem; flex: 0 0 auto; object-fit: contain; }
+.desktop-nav { display: flex; align-items: center; gap: .18rem; padding: .18rem; border-radius: 999px; }
+.desktop-nav a { min-width: 3.55rem; padding: .5rem .7rem; border-radius: 999px; color: #d2d2d7; text-align: center; font-size: .76rem; transition: color .2s, background .2s, transform .1s; }
+.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { background: rgba(255,255,255,.09); color: #fff; }
+.desktop-nav a:active { transform: scale(.95); }
+.nav-actions { display: flex; align-items: center; gap: .5rem; }
+.nav-contact { min-height: 2.25rem; padding: 0 .82rem 0 .92rem; display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #111113; font-size: .72rem; font-weight: 650; transition: background .18s, transform .1s; }
+.nav-contact span { color: #6e6e73; font-size: .78rem; transition: transform .18s var(--ease); }
+.nav-contact:hover { background: #fff; }
+.nav-contact:hover span { transform: translateX(.12rem); }
+.nav-contact:active { transform: scale(.96); }
+.menu-button { display: none; position: relative; width: 2.55rem; height: 2.55rem; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.08); cursor: pointer; transition: background .2s, transform .1s; }
+.menu-button:hover { background: rgba(255,255,255,.14); }
+.menu-button:active { transform: scale(.94); }
+.menu-button span { position: absolute; left: .76rem; right: .76rem; height: 1px; background: #fff; transition: top .28s var(--ease), transform .28s var(--ease); }
+.menu-button span:first-child { top: 1.03rem; }
+.menu-button span:last-child { top: 1.48rem; }
+.menu-button[aria-expanded="true"] span:first-child { top: 1.26rem; transform: rotate(45deg); }
+.menu-button[aria-expanded="true"] span:last-child { top: 1.26rem; transform: rotate(-45deg); }
+.mobile-menu { position: absolute; top: 4.15rem; right: 1rem; width: min(20rem, calc(100vw - 2rem)); padding: .55rem; border: 1px solid rgba(255,255,255,.15); border-radius: 1rem; background: rgba(25,25,28,.88); box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); pointer-events: auto; transform-origin: top right; animation: menu-in .34s var(--ease) both; }
+.mobile-menu a { display: block; padding: .9rem 1rem; border-radius: .8rem; font-size: .94rem; }
+.mobile-menu a:hover { background: rgba(255,255,255,.08); }
+@keyframes menu-in { from { opacity: 0; transform: translateY(-.5rem) scale(.95); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
+
+/* Hero */
+.hero { position: relative; height: calc(100svh - 5.5rem); min-height: 46rem; max-height: 60rem; overflow: hidden; background: #07090b; }
+.hero-media { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(4,5,7,.7) 0%, rgba(4,5,7,.45) 42%, rgba(4,5,7,.88) 100%), linear-gradient(90deg, rgba(3,5,7,.55), transparent 55%), url("../hero-cinema.png"); background-position: center 45%; background-size: cover; animation: hero-materialize 1.35s var(--ease) both; }
+.hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, transparent 0, rgba(3,4,6,.22) 48%, rgba(3,4,6,.72) 100%); }
+@keyframes hero-materialize { from { opacity: .25; transform: scale(1.08); filter: blur(12px) saturate(.5); } to { opacity: 1; transform: scale(1.01); filter: none; } }
+.hero-inner { position: relative; z-index: 2; width: min(calc(100% - 2rem), 74rem); height: 100%; margin: auto; padding-top: 6.4rem; display: flex; flex-direction: column; align-items: center; }
+.hero-copy { position: relative; z-index: 3; max-width: 48rem; text-align: center; }
+.hero-eyebrow { margin: 0 0 .65rem; display: flex; align-items: center; justify-content: center; gap: .55rem; color: #d2d2d7; font-size: .67rem; font-weight: 700; }
+.hero-eyebrow span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25rem rgba(48,209,88,.13); }
+.hero h1 { margin: 0; font-size: clamp(4.8rem, 9vw, 8.2rem); font-weight: 720; line-height: .9; letter-spacing: -.07em; }
+.hero-product { margin: .65rem 0 0; color: #d2d2d7; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 600; }
+.hero-lead { max-width: 34rem; margin: .9rem auto 0; color: #b9b9be; font-size: .98rem; line-height: 1.65; }
+.hero-actions { margin-top: 1.35rem; display: flex; align-items: center; justify-content: center; gap: .8rem; }
+.button { min-height: 2.85rem; padding: 0 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .72rem; border-radius: 999px; font-size: .8rem; font-weight: 700; transition: transform .12s, box-shadow .25s, background .25s; }
+.button:active, .text-button:active, .console-tab:active, .feature-rail-controls button:active, .plan-button:active { transform: scale(.96); transition-duration: .08s; }
+.button-primary { background: rgba(255,255,255,.94); color: #111113; box-shadow: inset 0 1px #fff, 0 10px 24px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
+.button-primary:hover { background: #fff; box-shadow: inset 0 1px #fff, 0 14px 30px rgba(0,0,0,.26); transform: translateY(-1px); }
+.text-button { min-height: 2.85rem; padding: 0 .4rem; display: inline-flex; align-items: center; gap: .55rem; color: #f5f5f7; font-size: .8rem; font-weight: 650; transition: opacity .2s, transform .1s; }
+.text-button:hover { opacity: .72; }
+
+.product-stage { --stage-width: min(57rem, 78vw); position: relative; width: var(--stage-width); margin-top: 2rem; perspective: 1200px; }
+.product-window { --rx: 0deg; --ry: 0deg; position: relative; overflow: hidden; height: 24rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: rgba(17,18,21,.79); box-shadow: 0 42px 100px rgba(0,0,0,.58), 0 1px 0 rgba(255,255,255,.08), inset 0 1px rgba(255,255,255,.11); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; will-change: transform; animation: product-in 1.05s .28s var(--ease) both; }
+@keyframes product-in { from { opacity: 0; transform: perspective(1200px) translateY(2.4rem) rotateX(4deg) scale(.94); filter: blur(10px); } to { opacity: 1; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); filter: none; } }
+.window-bar { height: 2.8rem; padding: 0 .9rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
+.traffic-lights { display: flex; gap: .32rem; }
+.traffic-lights i { width: .48rem; height: .48rem; border-radius: 50%; background: #ff5f57; }
+.traffic-lights i:nth-child(2) { background: #febc2e; }
+.traffic-lights i:nth-child(3) { background: #28c840; }
+.window-title { display: flex; align-items: center; gap: .4rem; color: #a1a1a6; font-size: .62rem; font-weight: 650; }
+.window-mark { width: .55rem; height: .55rem; border-radius: .18rem .18rem .3rem .3rem; background: var(--orange); box-shadow: 0 0 1rem rgba(255,107,61,.55); }
+.window-status { justify-self: end; display: flex; align-items: center; gap: .4rem; color: #9bd8ae; font-size: .58rem; }
+.window-status span { width: .36rem; height: .36rem; border-radius: 50%; background: var(--green); }
+.window-layout { height: calc(100% - 2.8rem); display: grid; grid-template-columns: 4rem 1fr; }
+.window-sidebar { padding: .8rem .42rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; border-right: 1px solid rgba(255,255,255,.07); }
+.console-tab { width: 3.05rem; min-height: 3rem; padding: .35rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .16rem; border-radius: .72rem; background: transparent; color: #6e6e73; cursor: pointer; transition: color .2s, background .2s, transform .1s; }
+.console-tab i { font-style: normal; font-size: .82rem; line-height: 1; }
+.console-tab span { font-size: .54rem; }
+.console-tab:hover { color: #fff; background: rgba(255,255,255,.055); }
+.console-tab.is-active { color: #fff; background: rgba(255,255,255,.11); box-shadow: 0 4px 12px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.08); }
+.window-main { min-width: 0; padding: 1.05rem 1.2rem; }
+.console-view { height: 100%; animation: view-in .34s var(--ease) both; }
+@keyframes view-in { from { opacity: 0; transform: translateY(.5rem); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
+.console-heading { display: flex; align-items: center; justify-content: space-between; }
+.console-heading small { display: block; color: #6e6e73; font-size: .56rem; }
+.console-heading h2 { margin: .08rem 0 0; font-size: 1rem; letter-spacing: -.025em; }
+.view-chip { padding: .3rem .5rem; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.05); color: #8e8e93; font-size: .53rem; }
+.metric-row { margin-top: .75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
+.metric-row article { min-width: 0; padding: .7rem .78rem; border: 1px solid rgba(255,255,255,.065); border-radius: .6rem; background: rgba(255,255,255,.048); }
+.metric-row small { display: block; color: #77777d; font-size: .54rem; }
+.metric-row strong { display: block; margin: .2rem 0 .12rem; font-size: 1.15rem; letter-spacing: -.03em; }
+.metric-row span { color: #77777d; font-size: .49rem; }
+.metric-row .trend { color: #73d995; }
+.chart-panel { height: 9.25rem; margin-top: .5rem; padding: .7rem .78rem; border: 1px solid rgba(255,255,255,.065); border-radius: .6rem; background: rgba(255,255,255,.032); }
+.panel-title { display: flex; justify-content: space-between; font-size: .56rem; }
+.panel-title small { color: #65656a; }
+.bar-chart { height: 6.8rem; padding: .6rem .15rem 0; display: flex; align-items: flex-end; gap: .38rem; background: repeating-linear-gradient(to top, transparent 0, transparent 1.55rem, rgba(255,255,255,.042) 1.58rem, rgba(255,255,255,.042) 1.62rem); }
+.bar-chart i { flex: 1; height: var(--h); min-width: .24rem; border-radius: .18rem .18rem .04rem .04rem; background: var(--orange); opacity: .88; }
+.media-list { margin-top: .8rem; display: grid; gap: .45rem; }
+.media-list article { padding: .55rem; display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.07); border-radius: .55rem; background: rgba(255,255,255,.042); }
+.poster { height: 2.75rem; border-radius: .35rem; }
+.poster-one { background: linear-gradient(140deg, #2c5269, #d49b6e); }
+.poster-two { background: linear-gradient(140deg, #785b4d, #1f2d34); }
+.poster-three { background: linear-gradient(140deg, #1b2741, #b84d42); }
+.media-list b { display: block; font-size: .66rem; }
+.media-list small { display: block; margin-top: .16rem; color: #77777d; font-size: .52rem; }
+.media-list em { color: #a1a1a6; font-size: .52rem; font-style: normal; }
+.node-map { position: relative; height: 13.5rem; margin-top: .75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: .6rem; background: rgba(255,255,255,.035); }
+.map-grid, .network-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 2rem 2rem; -webkit-mask-image: radial-gradient(circle, #000, transparent 72%); mask-image: radial-gradient(circle, #000, transparent 72%); }
+.node { position: absolute; display: flex; align-items: center; gap: .32rem; color: #a1a1a6; font-size: .52rem; }
+.node i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .28rem rgba(48,209,88,.12), 0 0 1rem rgba(48,209,88,.4); }
+.node-a { left: 26%; top: 34%; }.node-b { left: 48%; top: 65%; }.node-c { right: 18%; top: 28%; }.node-d { left: 12%; bottom: 15%; }
+.node-summary { margin-top: .45rem; display: flex; justify-content: space-between; color: #77777d; font-size: .52rem; }
+.node-summary span { display: flex; align-items: center; gap: .3rem; }
+.node-summary i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--green); }
+.node-summary b { color: #b9b9be; }
+.live-activity { position: absolute; z-index: 4; right: -1rem; bottom: 1rem; min-width: 8.6rem; padding: .58rem .76rem; display: flex; align-items: center; gap: .62rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(30,30,33,.66); box-shadow: 0 16px 40px rgba(0,0,0,.4), inset 1px 1px rgba(255,255,255,.13), inset -1px -1px rgba(255,255,255,.04); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); animation: live-in .55s 1.15s var(--ease) both; }
+.live-activity > span:last-child { display: flex; align-items: baseline; gap: .4rem; }
+.live-activity small { color: #a1a1a6; font-size: .52rem; }
+.live-activity strong { font-size: .73rem; }
+.live-activity-icon { height: .9rem; display: flex; align-items: flex-end; gap: .1rem; }
+.live-activity-icon i { width: .13rem; border-radius: 1rem; background: var(--orange); }
+.live-activity-icon i:nth-child(1) { height: .4rem; }.live-activity-icon i:nth-child(2) { height: .8rem; }.live-activity-icon i:nth-child(3) { height: .56rem; }
+@keyframes live-in { from { opacity: 0; transform: translateX(1rem) scale(.9); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
+
+.signal-strip { width: min(calc(100% - 2rem), 70rem); min-height: 5.5rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 4rem; color: #d2d2d7; }
+.signal-strip div { display: flex; align-items: baseline; gap: .7rem; }
+.signal-strip span { color: #6e6e73; font-size: .65rem; }
+.signal-strip strong { font-size: .9rem; }
+.signal-strip > i { width: 1px; height: 1.5rem; background: rgba(255,255,255,.13); }
+
+/* Content bands */
+.section-kicker { margin: 0 0 1rem; color: var(--orange); font-size: .68rem; font-weight: 750; text-transform: uppercase; }
+.platform { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: var(--paper); color: var(--ink); }
+.platform-intro { max-width: 62rem; }
+.platform-intro h2, .capabilities-head h2, .delivery-head h2, .closing h2, .plans-heading h2, .comparison-head h2, .pricing-cta h2 { margin: 0; font-size: clamp(3rem, 6vw, 5.8rem); font-weight: 680; line-height: 1; letter-spacing: -.055em; }
+.platform-intro h2 span { color: #86868b; }
+.platform-intro > p:last-child { max-width: 38rem; margin: 2rem 0 0 auto; color: #6e6e73; font-size: 1.02rem; line-height: 1.8; }
+.principle-grid { margin-top: 6rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
+.principle-grid article { min-height: 13rem; padding: 2rem 2rem 2rem 0; }
+.principle-grid article + article { padding-left: 2rem; border-left: 1px solid var(--line-light); }
+.principle-grid span { color: #a1a1a6; font-size: .66rem; }
+.principle-grid h3 { margin: 2.2rem 0 .55rem; font-size: 1.55rem; letter-spacing: -.03em; }
+.principle-grid p { max-width: 17rem; margin: 0; color: #6e6e73; font-size: .82rem; line-height: 1.65; }
+
+.capabilities { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #080809; }
+.capabilities-head { display: grid; grid-template-columns: 1fr 19rem; align-items: end; gap: 4rem; }
+.capabilities-side { display: grid; gap: 1.25rem; }
+.capabilities-side > p { margin: 0; color: #86868b; font-size: .88rem; line-height: 1.75; }
+.feature-rail-controls { display: flex; gap: .45rem; }
+.feature-rail-controls button { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; background: rgba(255,255,255,.07); box-shadow: inset 0 1px rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background .2s, opacity .2s, transform .1s; }
+.feature-rail-controls button:hover { background: rgba(255,255,255,.13); }
+.feature-rail-controls button:disabled { opacity: .28; cursor: default; }
+.feature-rail { margin-top: 5rem; padding-bottom: .7rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(35rem, calc(92vw - 2rem)); gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: none; scrollbar-width: none; cursor: grab; }
+.feature-rail:active { cursor: grabbing; }
+.feature-rail::-webkit-scrollbar { display: none; }
+.feature-card { height: 18.5rem; min-height: 0; padding: 1.35rem; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 1.25rem; border: 1px solid rgba(255,255,255,.11); border-radius: 1rem; background: #121214; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.26); }
+.feature-card:nth-child(4n + 1) { border-top-color: rgba(255,107,61,.42); }
+.feature-card:nth-child(4n + 2) { border-top-color: rgba(41,151,255,.42); }
+.feature-card:nth-child(4n + 3) { border-top-color: rgba(100,210,255,.38); }
+.feature-card:nth-child(4n + 4) { border-top-color: rgba(48,209,88,.38); }
+.feature-copy p { margin: 0 0 .85rem; color: var(--orange); font-size: .66rem; font-weight: 750; }
+.feature-copy p b { margin-right: .42rem; color: #5f5f64; font-weight: 650; }
+.feature-copy { min-width: 0; }
+.feature-copy h3 { margin: 0; font-size: clamp(1.55rem, 2.1vw, 2.05rem); font-weight: 650; line-height: 1.08; letter-spacing: 0; }
+.feature-copy span { display: block; max-width: 24rem; margin-top: 1rem; color: #86868b; font-size: .74rem; line-height: 1.6; }
+.portal-preview { min-width: 0; height: 15.75rem; padding: .75rem .75rem 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #09090a; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
+.portal-bar { height: 1.6rem; display: flex; align-items: center; justify-content: space-between; }.portal-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: #fff; }.portal-bar span { width: 3.5rem; height: .2rem; border-radius: 1rem; background: #343437; }
+.portal-hero { height: 7rem; padding: .9rem; display: flex; flex-direction: column; justify-content: flex-end; border-radius: .55rem; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.1)), url("../hero-cinema.png") center / cover; }
+.portal-hero small { color: #b9b9be; font-size: .55rem; }.portal-hero b { margin-top: .15rem; font-size: 1.25rem; }.portal-hero em { margin-top: .35rem; color: #d2d2d7; font-size: .6rem; font-style: normal; }
+.portal-posters { margin-top: .55rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }.portal-posters i { height: 5.5rem; border-radius: .4rem; background: linear-gradient(145deg, #28364d, #7f9bb0); }.portal-posters i:nth-child(2) { background: linear-gradient(145deg, #3d3f2b, #98a368); }.portal-posters i:nth-child(3) { background: linear-gradient(145deg, #4b3037, #b66f68); }.portal-posters i:nth-child(4) { background: linear-gradient(145deg, #273e3a, #71a597); }
+.operations-preview { position: relative; min-width: 0; height: 15.75rem; padding: .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #0b0b0c; }
+.op-chart { height: 14rem; padding: 1rem; border-radius: .65rem; background: #18181a; }.op-chart > span { color: #86868b; font-size: .62rem; }.op-chart > strong { display: block; margin-top: .25rem; font-size: 1.5rem; }.op-chart > div { height: 7rem; margin-top: .8rem; display: flex; align-items: flex-end; gap: .45rem; }.op-chart i { flex: 1; height: var(--h); border-radius: .25rem .25rem .08rem .08rem; background: var(--blue); opacity: .86; }
+.op-event { position: absolute; right: 1.8rem; bottom: 1.4rem; left: 3.5rem; padding: .85rem; display: grid; grid-template-columns: .55rem 1fr auto; align-items: center; gap: .65rem; border: 1px solid rgba(255,255,255,.14); border-radius: .65rem; background: rgba(37,37,40,.8); box-shadow: 0 16px 40px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }.op-event > i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }.op-event b { display: block; font-size: .68rem; }.op-event small { display: block; margin-top: .1rem; color: #86868b; font-size: .52rem; }.op-event em { color: #a9dfba; font-size: .62rem; font-style: normal; }
+.pipeline-preview { min-width: 0; min-height: 15.75rem; display: flex; flex-direction: column; justify-content: center; gap: .35rem; }
+.pipeline-step { min-height: 3.7rem; padding: 0 .8rem; display: flex; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.09); border-radius: .7rem; background: #19191b; }.pipeline-step > i { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid #4b4b50; border-radius: 50%; color: #a1a1a6; font-size: .6rem; font-style: normal; }.pipeline-step b { display: block; font-size: .7rem; }.pipeline-step small { display: block; margin-top: .1rem; color: #77777d; font-size: .52rem; }.pipeline-step.is-done > i { border-color: rgba(48,209,88,.32); background: rgba(48,209,88,.12); color: #83d99c; }.pipeline-step.is-active { border-color: rgba(41,151,255,.3); background: rgba(41,151,255,.07); }.pipeline-step.is-active > i { border: .26rem solid rgba(41,151,255,.2); background: var(--blue); box-shadow: 0 0 1.3rem rgba(41,151,255,.4); }.pipeline-preview > em { width: 1px; height: .65rem; margin-left: 1.58rem; background: #343437; }
+.network-preview { position: relative; min-width: 0; height: 15.75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #0b0b0c; }.network-card { position: absolute; top: 50%; left: 50%; width: 9rem; padding: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: .75rem; background: rgba(29,29,32,.8); box-shadow: 0 22px 50px rgba(0,0,0,.4); transform: translate(-50%,-50%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }.network-card span { color: #86868b; font-size: .58rem; }.network-card strong { display: block; margin-top: .25rem; font-size: 1.55rem; }.network-card small { display: block; margin-top: .25rem; color: #81d89a; font-size: .54rem; }.pulse { position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .45rem rgba(48,209,88,.1), 0 0 1.5rem rgba(48,209,88,.42); }.p1 { left: 18%; top: 30%; }.p2 { right: 16%; top: 24%; }.p3 { left: 26%; bottom: 20%; }.p4 { right: 24%; bottom: 24%; }
+
+.delivery { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: var(--paper); color: var(--ink); }
+.delivery-head { max-width: 58rem; }
+.delivery-steps { margin: 5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
+.delivery-steps li { min-height: 7.5rem; display: grid; grid-template-columns: 4rem 1fr 2rem; align-items: center; border-bottom: 1px solid var(--line-light); transition: padding .3s var(--ease), background .3s; }
+.delivery-steps li:hover { padding: 0 1rem; background: rgba(255,255,255,.7); }
+.delivery-steps > li > span { color: #a1a1a6; font-size: .65rem; }
+.delivery-steps h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.025em; }
+.delivery-steps p { margin: .25rem 0 0; color: #6e6e73; font-size: .78rem; }
+.delivery-steps i { color: #8e8e93; font-style: normal; text-align: right; }
+.closing { position: relative; min-height: 44rem; padding: 7rem max(1.25rem, calc((100vw - 70rem) / 2)); display: flex; align-items: center; overflow: hidden; }
+.closing-media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,5,6,.96), rgba(4,5,6,.72) 48%, rgba(4,5,6,.24)), linear-gradient(0deg, #060607, transparent 52%), url("../hero-cinema.png") center 68% / cover; }
+.closing-copy { position: relative; z-index: 1; max-width: 48rem; }
+.closing-copy > p:nth-of-type(2) { max-width: 34rem; margin: 1.5rem 0 0; color: #b9b9be; font-size: .92rem; line-height: 1.75; }
+.closing .hero-actions { justify-content: flex-start; }
+
+.site-footer { padding: 3rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #060607; }
+.footer-main { padding-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; }
+.footer-main p { margin: 0; color: #77777d; font-size: .74rem; }
+.footer-meta { padding-top: 1.35rem; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); color: #5f5f64; font-size: .66rem; }
+.footer-meta div { display: flex; gap: 1.4rem; }.footer-meta a { color: #a1a1a6; }
+
+/* Pricing */
+.pricing-page { background: var(--paper); color: var(--ink); }
+.pricing-page .site-header { color: #fff; }
+.pricing-hero { min-height: 43rem; padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)) 5rem; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 2rem; overflow: hidden; background: #070708; color: #fff; }
+.pricing-hero-copy h1 { margin: 0; font-size: clamp(3.8rem, 6vw, 5.3rem); font-weight: 680; line-height: .95; letter-spacing: -.06em; white-space: nowrap; }
+.pricing-hero-copy h1 span { color: #86868b; }
+.pricing-hero-copy > p:last-child { max-width: 38rem; margin: 1.6rem 0 0; color: #a1a1a6; font-size: .92rem; line-height: 1.75; }
+.pricing-orbit { position: relative; height: 28rem; }
+.orbit-core { position: absolute; z-index: 3; top: 50%; left: 50%; width: 6.4rem; height: 6.4rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 1.7rem; background: rgba(35,35,38,.72); box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.1); transform: translate(-50%,-50%); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }.orbit-core i { position: absolute; top: 1rem; width: .48rem; height: .48rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 1rem rgba(48,209,88,.45); }.orbit-core b { font-size: 1.25rem; }
+.orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; transform: translate(-50%,-50%); }.ring-one { width: 17rem; height: 17rem; }.ring-two { width: 25rem; height: 25rem; }
+.orbit-node { position: absolute; z-index: 2; min-width: 4.2rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(31,31,34,.62); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.2); color: #d2d2d7; text-align: center; font-size: .62rem; -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%); }.node-one { top: 17%; left: 15%; }.node-two { top: 25%; right: 8%; }.node-three { right: 18%; bottom: 14%; }
+.plans { padding: 5rem max(1.25rem, calc((100vw - 70rem) / 2)) 8rem; background: var(--paper); }
+.plans-heading { display: grid; grid-template-columns: 1fr 19rem; align-items: end; gap: 4rem; }
+.plans-heading > p { margin: 0; color: #6e6e73; font-size: .85rem; line-height: 1.72; }
+.plan-grid { margin-top: 4.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; align-items: stretch; }
+.plan { position: relative; padding: 2rem; display: flex; flex-direction: column; border: 1px solid rgba(29,29,31,.09); border-radius: .9rem; background: #fff; box-shadow: 0 14px 38px rgba(0,0,0,.045); }
+.plan-featured { background: #121214; color: #fff; border-color: #121214; box-shadow: 0 28px 70px rgba(0,0,0,.18); transform: translateY(-.65rem); }
+.plan-recommend { position: absolute; top: 1rem; right: 1rem; padding: .32rem .5rem; border-radius: 999px; background: rgba(255,107,61,.14); color: #ff9c7a; font-size: .55rem; font-weight: 750; }
+.plan-top { display: flex; align-items: center; justify-content: space-between; }
+.plan-label { margin: 0; color: var(--orange); font-size: .61rem; font-weight: 750; text-transform: uppercase; }
+.plan-top > span { color: #a1a1a6; font-size: .58rem; }
+.plan h3 { margin: 1.3rem 0 0; font-size: 1.45rem; letter-spacing: -.035em; }
+.plan-desc { min-height: 3.4rem; margin: .55rem 0 0; color: #6e6e73; font-size: .76rem; line-height: 1.6; }
+.plan-featured .plan-desc { color: #8e8e93; }
+.plan-price { margin: 1.6rem 0 1.4rem; display: flex; align-items: baseline; gap: .55rem; }
+.plan-price strong { font-size: 2.55rem; letter-spacing: -.055em; }
+.plan-price span { color: #8e8e93; font-size: .62rem; }
+.plan-button { min-height: 2.85rem; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: .75rem; font-weight: 700; transition: background .2s, transform .1s; }
+.plan-button:hover { background: #303034; }
+.plan-featured .plan-button { background: #f5f5f7; color: #111; }.plan-featured .plan-button:hover { background: #fff; }
+.plan ul { margin: 1.7rem 0 0; padding: 1.5rem 0 0; display: grid; gap: .7rem; border-top: 1px solid rgba(29,29,31,.1); list-style: none; }
+.plan-featured ul { border-color: rgba(255,255,255,.1); }
+.plan li { display: flex; gap: .55rem; color: #4f4f54; font-size: .7rem; }
+.plan-featured li { color: #c7c7cc; }
+.plan li span { color: var(--orange); }
+.payment-note { width: max-content; max-width: 100%; margin: 2rem auto 0; padding: .62rem .85rem; display: flex; justify-content: center; align-items: center; gap: .5rem; border: 1px solid rgba(29,29,31,.08); border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: 0 8px 24px rgba(0,0,0,.045), inset 0 1px rgba(255,255,255,.85); color: #6e6e73; font-size: .68rem; -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); }.payment-note i { flex: 0 0 auto; width: .38rem; height: .38rem; border-radius: 50%; background: var(--green); }
+.comparison { padding: 8rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #fff; }
+.comparison-head { max-width: 50rem; }.comparison-head > p:last-child { max-width: 35rem; margin: 1.3rem 0 0; color: #6e6e73; font-size: .86rem; line-height: 1.7; }
+.comparison-list { margin-top: 4rem; border-top: 1px solid var(--line-light); }
+.comparison-row { min-height: 4.4rem; display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); align-items: center; border-bottom: 1px solid var(--line-light); }
+.comparison-row > * { padding: 0 1rem; font-size: .72rem; }
+.comparison-row > *:first-child { padding-left: 0; }
+.comparison-header { min-height: 3.4rem; color: #86868b; }.comparison-header span { font-size: .62rem; font-weight: 650; }
+.comparison-row b { font-weight: 650; }.comparison-row span { color: #55555a; }.comparison-row .positive { color: #16894e; font-weight: 650; }.comparison-row .muted { color: #b1b1b6; }
+.pricing-cta { position: relative; min-height: 41rem; padding: 7rem max(1.25rem, calc((100vw - 70rem) / 2)); display: flex; align-items: center; overflow: hidden; color: #fff; }
+.pricing-cta-media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,5,6,.96), rgba(4,5,6,.72) 50%, rgba(4,5,6,.28)), linear-gradient(0deg, #060607, transparent 55%), url("../hero-cinema.png") center 62% / cover; }
+.pricing-cta-copy { position: relative; z-index: 1; max-width: 48rem; }.pricing-cta-copy > p:nth-of-type(2) { max-width: 36rem; margin: 1.4rem 0 2rem; color: #b9b9be; font-size: .88rem; line-height: 1.75; }
+
+.reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity .72s var(--ease), transform .72s var(--ease); }
+.reveal.is-visible { opacity: 1; transform: none; }
+
+@media (max-width: 960px) {
+  .desktop-nav { display: none; }
+  .nav-contact { display: none; }
+  .menu-button { display: block; }
+  .hero { min-height: 48rem; }
+  .hero-inner { padding-top: 6.2rem; }
+  .product-stage { --stage-width: min(44rem, 92vw); }
+  .product-window { height: 23rem; }
+  .platform, .capabilities, .delivery, .plans, .comparison { padding-top: 7rem; padding-bottom: 7rem; }
+  .capabilities-head, .plans-heading { grid-template-columns: 1fr; gap: 1.2rem; }
+  .capabilities-side > p, .plans-heading > p { max-width: 30rem; }
+  .feature-card { gap: 1.1rem; }
+  .feature-copy span { max-width: 34rem; }
+  .plan-grid { grid-template-columns: 1fr; max-width: 40rem; margin-right: auto; margin-left: auto; }
+  .plan-featured { transform: none; }
+  .plan-desc { min-height: auto; }
+  .pricing-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 8rem; }
+  .pricing-orbit { height: 22rem; }
+}
+
+@media (max-width: 640px) {
+  .site-header { top: .5rem; }
+  .nav-island { width: calc(100% - 1rem); height: 3.45rem; padding-left: .8rem; border-radius: 999px; }
+  .wordmark b { display: none; }
+  .mobile-menu { top: 3.85rem; right: .5rem; left: .5rem; width: auto; }
+  .hero { height: calc(100svh - 5rem); min-height: 45rem; max-height: 54rem; }
+  .hero-inner { width: calc(100% - 1rem); padding-top: 5.5rem; }
+  .hero h1 { font-size: 4.45rem; }
+  .hero-product { font-size: .92rem; }
+  .hero-lead { max-width: 22rem; font-size: .86rem; }
+  .hero-actions { width: min(100%, 22rem); margin-top: 1rem; }
+  .button { flex: 1; }
+  .product-stage { --stage-width: calc(100vw - 1.2rem); margin-top: 1.55rem; }
+  .product-window { height: 18.8rem; border-radius: .8rem; transform: none; }
+  .window-bar { height: 2.5rem; }.window-status { display: none; }.window-title { grid-column: 2; }
+  .window-layout { height: calc(100% - 2.5rem); grid-template-columns: 3.25rem 1fr; }
+  .window-sidebar { padding: .55rem .28rem; }.console-tab { width: 2.55rem; min-height: 2.55rem; }.console-tab span { display: none; }
+  .window-main { padding: .8rem; }.console-heading h2 { font-size: .87rem; }.view-chip { display: none; }
+  .metric-row { gap: .3rem; }.metric-row article { padding: .55rem; }.metric-row strong { font-size: .9rem; }.metric-row span { display: none; }
+  .chart-panel { height: 7.7rem; }.bar-chart { height: 5.6rem; gap: .2rem; }
+  .media-list article { grid-template-columns: 2.6rem 1fr auto; }.poster { height: 2.25rem; }.media-list article { padding: .42rem; }
+  .node-map { height: 10.8rem; }
+  .live-activity { display: none; }
+  .signal-strip { min-height: 4.4rem; gap: 1rem; }.signal-strip div { gap: .32rem; }.signal-strip span { font-size: .55rem; }.signal-strip strong { font-size: .7rem; }.signal-strip > i { height: 1rem; }
+  .platform, .capabilities, .delivery, .plans, .comparison { padding: 5.5rem 1rem; }
+  .platform-intro h2, .capabilities-head h2, .delivery-head h2, .closing h2, .plans-heading h2, .comparison-head h2, .pricing-cta h2 { font-size: 2.75rem; }
+  .platform-intro > p:last-child { margin: 1.4rem 0 0; font-size: .9rem; }
+  .principle-grid { margin-top: 3.5rem; grid-template-columns: 1fr; }.principle-grid article { min-height: auto; padding: 1.5rem 0; }.principle-grid article + article { padding-left: 0; border-top: 1px solid var(--line-light); border-left: 0; }.principle-grid h3 { margin: .9rem 0 .35rem; }
+  .feature-rail { margin-top: 3.5rem; grid-auto-columns: calc(94vw - 1rem); gap: .75rem; }.feature-rail-controls { display: none; }.feature-card { height: 15.5rem; min-height: 0; padding: .9rem; grid-template-columns: .94fr 1.06fr; gap: .7rem; }.feature-copy p { margin-bottom: .55rem; font-size: .58rem; }.feature-copy h3 { font-size: 1.12rem; line-height: 1.12; }.feature-copy span { margin-top: .72rem; font-size: .63rem; line-height: 1.5; }.portal-preview, .operations-preview, .network-preview { height: 13.7rem; border-radius: .65rem; }.portal-preview { padding: .55rem .55rem 0; }.portal-bar { height: 1.15rem; }.portal-bar i { width: .4rem; height: .4rem; }.portal-bar span { width: 2.3rem; }.portal-hero { height: 6.2rem; padding: .65rem; }.portal-hero small { font-size: .44rem; }.portal-hero b { font-size: .88rem; }.portal-hero em { font-size: .48rem; }.portal-posters { gap: .25rem; margin-top: .4rem; }.portal-posters i { height: 4.6rem; }.operations-preview { padding: .55rem; }.op-chart { height: 12.5rem; padding: .7rem; }.op-chart > span { font-size: .5rem; }.op-chart > strong { font-size: 1rem; }.op-chart > div { height: 7rem; margin-top: .65rem; gap: .25rem; }.op-event { right: .8rem; bottom: .8rem; left: 1.2rem; padding: .55rem; grid-template-columns: .4rem 1fr; gap: .4rem; }.op-event > i { width: .4rem; height: .4rem; }.op-event b { font-size: .55rem; }.op-event small { font-size: .45rem; }.op-event em { display: none; }.pipeline-preview { min-height: 13.7rem; gap: .28rem; }.pipeline-step { min-height: 3.25rem; padding: 0 .55rem; gap: .5rem; }.pipeline-step > i { width: 1.35rem; height: 1.35rem; font-size: .5rem; }.pipeline-step b { font-size: .58rem; }.pipeline-step small { font-size: .44rem; }.pipeline-preview > em { height: .45rem; margin-left: 1.2rem; }.network-card { width: 7rem; padding: .72rem; }.network-card strong { font-size: 1.2rem; }.network-card span, .network-card small { font-size: .45rem; }.pulse { width: .42rem; height: .42rem; box-shadow: 0 0 0 .3rem rgba(48,209,88,.1), 0 0 1rem rgba(48,209,88,.42); }
+  .delivery-steps { margin-top: 3.5rem; }.delivery-steps li { min-height: 6.4rem; grid-template-columns: 2.7rem 1fr 1.5rem; }.delivery-steps li:hover { padding: 0 .5rem; }.delivery-steps p { padding-right: .5rem; }
+  .closing, .pricing-cta { min-height: 39rem; padding: 5rem 1rem; }.closing-copy > p:nth-of-type(2), .pricing-cta-copy > p:nth-of-type(2) { font-size: .84rem; }.closing .hero-actions { align-items: flex-start; flex-direction: column; }.closing .button { flex: none; width: 100%; }
+  .footer-main, .footer-meta { align-items: flex-start; flex-direction: column; gap: 1rem; }.footer-meta div { width: 100%; justify-content: space-between; }
+  .pricing-hero { min-height: 45rem; padding: 7.5rem 1rem 4rem; display: block; }.pricing-hero-copy h1 { font-size: 2.55rem; }.pricing-hero-copy > p:last-child { font-size: .84rem; }.pricing-orbit { height: 18rem; margin-top: 1.5rem; }.ring-one { width: 13rem; height: 13rem; }.ring-two { width: 18rem; height: 18rem; }.orbit-core { width: 5rem; height: 5rem; border-radius: 1.35rem; }.node-one { top: 15%; left: 6%; }.node-two { top: 21%; right: 2%; }.node-three { right: 10%; bottom: 8%; }
+  .plans-heading > p { font-size: .8rem; }.plan-grid { margin-top: 3.5rem; }.plan { padding: 1.5rem; }.payment-note { width: 100%; align-items: flex-start; border-radius: 1rem; text-align: left; line-height: 1.5; }
+  .comparison-list { overflow-x: auto; }.comparison-row { min-width: 40rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
+  .reveal { opacity: 1; transform: none; }
+  .hero-media, .product-window { transform: none; }
+  .site-header.is-scroll-hidden { opacity: 1; }
+  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .nav-island, .mobile-menu, .product-window, .live-activity, .orbit-core, .orbit-node, .op-event, .network-card { background: #171719; -webkit-backdrop-filter: none; backdrop-filter: none; }
+  .button-primary, .payment-note { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
+  .nav-island::before, .nav-island::after { display: none; }
+}
+
+@media (prefers-contrast: more) {
+  .nav-island, .mobile-menu, .product-window, .feature-card { border-color: #fff; background: #050506; }
+  .payment-note { border-color: #1d1d1f; background: #fff; }
+}

assets/index-CtkHR7Eh.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}:root{--ink:#f7f6f2;--muted:#aaa9a6;--night:#060708;--paper:#f1efe9;--ember:#df9a5e;--cyan:#7cbbc5;--line:#ffffff24}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--night)}body{background:var(--night);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:SF Pro Display,SF Pro Text,PingFang SC,Microsoft YaHei,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}::selection{background:var(--ember);color:#111}.nav-shell{z-index:50;-webkit-backdrop-filter:saturate(150%)blur(20px);backdrop-filter:saturate(150%)blur(20px);background:#0507099e;border-bottom:1px solid #ffffff14;position:fixed;inset:0 0 auto}.nav{justify-content:space-between;align-items:center;max-width:1280px;height:64px;margin:auto;padding:0 28px;display:flex}.brand{leLine truncated

favicon.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 19.2727C22 20.779 20.779 22 19.2727 22H14.7273C13.221 22 12 20.779 12 19.2727V12H19.2727C20.779 12 22 13.221 22 14.7273V19.2727Z" fill="#68C4FF"/>
+<path d="M20 2C21.1046 2 22 2.89543 22 4V7C22 8.10457 21.1046 9 20 9H17C15.8954 9 15 8.10457 15 7V4C15 2.89543 15.8954 2 17 2H20Z" fill="#0C79D8"/>
+<path d="M7 15C8.10457 15 9 15.8954 9 17V20C9 21.1046 8.10457 22 7 22H4C2.89543 22 2 21.1046 2 20V17C2 15.8954 2.89543 15 4 15H7Z" fill="#0C79D8"/>
+<path d="M12 12H4.72727C3.22104 12 2 10.779 2 9.27273V4.72727C2 3.22104 3.22104 2 4.72727 2H9.27273C10.779 2 12 3.22104 12 4.72727V12Z" fill="#2E9EFF"/>
+</svg>

index.html

@@ -0,0 +1,168 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="煮糊了 OverCooked 为影视服务提供品牌门户、统一运营、媒体处理和播放节点调度。">
+  <title>煮糊了 OverCooked｜影视流媒体平台</title>
+  <link rel="icon" href="favicon.svg">
+  <link rel="stylesheet" href="assets/apple.css">
+</head>
+<body>
+  <a class="skip-link" href="#content">跳至主要内容</a>
+
+  <header class="site-header" data-header>
+    <nav class="nav-island" aria-label="主导航">
+      <a class="wordmark" href="#top" aria-label="OverCooked 首页">
+        <img class="wordmark-logo" src="overcooked-white.png" alt="" aria-hidden="true">
+        <span>OverCooked</span>
+      </a>
+      <div class="desktop-nav">
+        <a href="#platform">平台</a>
+        <a href="#capabilities">能力</a>
+        <a href="#delivery">交付</a>
+        <a href="pricing.html">定价</a>
+      </div>
+      <div class="nav-actions">
+        <a class="nav-contact" href="pricing.html">选择方案 <span aria-hidden="true">→</span></a>
+        <button class="menu-button" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="打开导航" data-menu-button><span></span><span></span></button>
+      </div>
+    </nav>
+    <div class="mobile-menu" id="mobile-menu" data-mobile-menu hidden>
+      <a href="#platform">平台</a><a href="#capabilities">能力</a><a href="#delivery">交付</a><a href="pricing.html">定价</a><a href="mailto:[email protected]">联系团队</a>
+    </div>
+  </header>
+
+  <main id="content">
+    <section class="hero" id="top">
+      <div class="hero-media" aria-hidden="true"></div>
+      <div class="hero-inner">
+        <div class="hero-copy">
+          <p class="hero-eyebrow"><span></span>为影视运营而生</p>
+          <h1>OverCooked</h1>
+          <p class="hero-product">新一代流媒体一体服务平台</p>
+          <p class="hero-lead">让天下的服主安心开服。</p>
+          <div class="hero-actions">
+            <a class="button button-primary" href="pricing.html">查看服务定价 <span aria-hidden="true">→</span></a>
+            <a class="text-button" href="#platform">了解平台 <span aria-hidden="true">↓</span></a>
+          </div>
+        </div>
+
+        <div class="product-stage" data-product-stage>
+          <div class="product-window" data-product-window aria-label="OverCooked 控制台交互预览">
+            <div class="window-bar">
+              <div class="traffic-lights" aria-hidden="true"><i></i><i></i><i></i></div>
+              <div class="window-title"><span class="window-mark"></span>Manage Console</div>
+              <div class="window-status"><span></span>服务正常</div>
+            </div>
+            <div class="window-layout">
+              <aside class="window-sidebar" aria-label="控制台视图">
+                <button class="console-tab is-active" type="button" data-console-tab="overview" aria-pressed="true"><i>⌂</i><span>概览</span></button>
+                <button class="console-tab" type="button" data-console-tab="media" aria-pressed="false"><i>▶</i><span>媒体</span></button>
+                <button class="console-tab" type="button" data-console-tab="nodes" aria-pressed="false"><i>⌁</i><span>节点</span></button>
+              </aside>
+              <div class="window-main">
+                <section class="console-view is-active" data-console-view="overview">
+                  <div class="console-heading"><div><small>7 月 29 日 · 今天</small><h2>运营概览</h2></div><span class="view-chip">实时更新</span></div>
+                  <div class="metric-row">
+                    <article><small>活跃用户</small><strong>8,642</strong><span class="trend">↑ 12.4%</span></article>
+                    <article><small>正在播放</small><strong>1,284</strong><span>实时</span></article>
+                    <article><small>节点可用率</small><strong>99.98%</strong><span>稳定</span></article>
+                  </div>
+                  <div class="chart-panel">
+                    <div class="panel-title"><span>播放趋势</span><small>最近 24 小时</small></div>
+                    <div class="bar-chart" aria-label="播放量持续增长的柱状图"><i style="--h:24%"></i><i style="--h:34%"></i><i style="--h:30%"></i><i style="--h:46%"></i><i style="--h:55%"></i><i style="--h:48%"></i><i style="--h:65%"></i><i style="--h:60%"></i><i style="--h:76%"></i><i style="--h:88%"></i><i style="--h:82%"></i><i style="--h:96%"></i></div>
+                  </div>
+                </section>
+                <section class="console-view" data-console-view="media" hidden>
+                  <div class="console-heading"><div><small>自动处理队列</small><h2>媒体中心</h2></div><span class="view-chip">3 个任务</span></div>
+                  <div class="media-list">
+                    <article><span class="poster poster-one"></span><div><b>远方来信</b><small>4K · HDR · 已就绪</small></div><em>可播放</em></article>
+                    <article><span class="poster poster-two"></span><div><b>沉默海岸</b><small>1080P · 正在转码</small></div><em>68%</em></article>
+                    <article><span class="poster poster-three"></span><div><b>城市片段</b><small>4K · HDR · 已就绪</small></div><em>可播放</em></article>
+                  </div>
+                </section>
+                <section class="console-view" data-console-view="nodes" hidden>
+                  <div class="console-heading"><div><small>全球播放网络</small><h2>节点健康</h2></div><span class="view-chip">7 个区域</span></div>
+                  <div class="node-map" aria-label="全球播放节点状态图"><div class="map-grid"></div><span class="node node-a"><i></i>上海</span><span class="node node-b"><i></i>新加坡</span><span class="node node-c"><i></i>东京</span><span class="node node-d"><i></i>洛杉矶</span></div>
+                  <div class="node-summary"><span><i></i>平均响应 42ms</span><b>运行稳定</b></div>
+                </section>
+              </div>
+            </div>
+          </div>
+          <div class="live-activity" aria-label="当前实时播放 1,284"><span class="live-activity-icon" aria-hidden="true"><i></i><i></i><i></i></span><span><small>实时播放</small><strong>1,284</strong></span></div>
+        </div>
+      </div>
+    </section>
+
+    <section class="signal-strip" aria-label="平台关键指标">
+      <div><span>可用率</span><strong>99.98%</strong></div><i></i><div><span>关键服务</span><strong>7 × 24</strong></div><i></i><div><span>统一控制台</span><strong>1 个</strong></div>
+    </section>
+
+    <section class="platform" id="platform">
+      <div class="platform-intro reveal">
+        <p class="section-kicker">OverCooked Platform</p>
+        <h2>复杂留在幕后。<br><span>运营回到一眼看清。</span></h2>
+        <p>门户、用户、订单、片库和播放节点不再散落在不同系统。所有关键状态围绕你的工作流出现，常用动作始终触手可及。</p>
+      </div>
+      <div class="principle-grid reveal">
+        <article><span>01</span><h3>看见</h3><p>重要状态实时呈现，异常不再藏在报表深处。</p></article>
+        <article><span>02</span><h3>行动</h3><p>控制与对象相邻，减少页面切换和重复确认。</p></article>
+        <article><span>03</span><h3>扩展</h3><p>从一个品牌到多节点网络，能力随业务自然生长。</p></article>
+      </div>
+    </section>
+
+    <section class="capabilities" id="capabilities">
+      <div class="capabilities-head reveal">
+        <div><p class="section-kicker">核心能力</p><h2>一个界面，<br>四种关键视角。</h2></div>
+        <div class="capabilities-side">
+          <p>连续浏览四种工作视角，看平台如何把复杂任务压缩成清楚、连贯的操作。</p>
+          <div class="feature-rail-controls" aria-label="核心能力卡片导航">
+            <button type="button" data-feature-prev aria-label="上一项能力">←</button>
+            <button type="button" data-feature-next aria-label="下一项能力">→</button>
+          </div>
+        </div>
+      </div>
+      <div class="feature-rail reveal" data-feature-rail tabindex="0" aria-label="平台核心能力">
+          <article class="feature-card">
+            <div class="feature-copy"><p><b>01</b> 品牌门户</p><h3>从第一帧开始，<br>就是你的品牌。</h3><span>首页、详情页和播放体验完整定制，多端适配与独立域名默认就绪。</span></div>
+            <div class="portal-preview" aria-hidden="true"><div class="portal-bar"><i></i><span></span></div><div class="portal-hero"><small>NOW STREAMING</small><b>远方来信</b><em>继续观看 →</em></div><div class="portal-posters"><i></i><i></i><i></i><i></i></div></div>
+          </article>
+          <article class="feature-card">
+            <div class="feature-copy"><p><b>02</b> 统一运营</p><h3>用户、套餐与订单，<br>在同一条时间线上。</h3><span>清楚掌握用户生命周期与经营数据，把日常运营动作放回业务上下文。</span></div>
+            <div class="operations-preview" aria-hidden="true"><div class="op-chart"><span>本月收入</span><strong>¥128,460</strong><div><i style="--h:28%"></i><i style="--h:42%"></i><i style="--h:36%"></i><i style="--h:58%"></i><i style="--h:71%"></i><i style="--h:66%"></i><i style="--h:86%"></i></div></div><div class="op-event"><i></i><span><b>专业套餐</b><small>刚刚完成续订</small></span><em>+¥599</em></div></div>
+          </article>
+          <article class="feature-card">
+            <div class="feature-copy"><p><b>03</b> 媒体处理</p><h3>内容进入之后，<br>流程自动向前。</h3><span>检查、转码、归类和可用性验证持续运行，团队只处理真正需要判断的部分。</span></div>
+            <div class="pipeline-preview" aria-hidden="true"><div class="pipeline-step is-done"><i>✓</i><span><b>媒体接入</b><small>S3 / WebDAV</small></span></div><em></em><div class="pipeline-step is-active"><i></i><span><b>智能转码</b><small>4K · HDR</small></span></div><em></em><div class="pipeline-step"><i></i><span><b>分发就绪</b><small>7 个节点</small></span></div></div>
+          </article>
+          <article class="feature-card">
+            <div class="feature-copy"><p><b>04</b> 节点网络</p><h3>让每一次播放，<br>走更合适的线路。</h3><span>按区域、延迟和健康状态自动调度，同时保留清楚的人工控制与审计记录。</span></div>
+            <div class="network-preview" aria-hidden="true"><div class="network-grid"></div><span class="pulse p1"></span><span class="pulse p2"></span><span class="pulse p3"></span><span class="pulse p4"></span><div class="network-card"><span>全球健康度</span><strong>99.98%</strong><small>全部区域正常</small></div></div>
+          </article>
+      </div>
+    </section>
+
+    <section class="delivery" id="delivery">
+      <div class="delivery-head reveal"><p class="section-kicker">清晰交付</p><h2>从想法到上线，<br>没有黑箱。</h2></div>
+      <ol class="delivery-steps">
+        <li class="reveal"><span>01</span><div><h3>理解业务</h3><p>品牌、内容来源、用户规模与部署环境。</p></div><i aria-hidden="true">→</i></li>
+        <li class="reveal"><span>02</span><div><h3>配置平台</h3><p>门户、控制台、权限和线路策略。</p></div><i aria-hidden="true">→</i></li>
+        <li class="reveal"><span>03</span><div><h3>接入数据</h3><p>媒体库、存储节点与现有用户体系。</p></div><i aria-hidden="true">→</i></li>
+        <li class="reveal"><span>04</span><div><h3>上线陪跑</h3><p>测试、迁移、上线与持续运行支持。</p></div><i aria-hidden="true">✓</i></li>
+      </ol>
+    </section>
+
+    <section class="closing">
+      <div class="closing-media" aria-hidden="true"></div>
+      <div class="closing-copy reveal"><p class="section-kicker">准备好开始了吗</p><h2>把注意力留给内容，<br>把平台交给我们。</h2><p>告诉我们你的业务模式和现有环境，我们会给出合适的建设与迁移方案。</p><div class="hero-actions"><a class="button button-primary" href="mailto:[email protected]">联系团队 <span aria-hidden="true">→</span></a><a class="text-button" href="pricing.html">查看方案</a></div></div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="footer-main"><a class="wordmark" href="#top"><img class="wordmark-logo" src="overcooked-white.png" alt="" aria-hidden="true"><span>煮糊了</span><b>OverCooked</b></a><p>让每一个影视服务，都有一套好平台。</p></div>
+    <div class="footer-meta"><span>© 2026 OverCooked Platform Service.</span><div><a href="pricing.html">服务定价</a><a href="mailto:[email protected]">商务联系</a></div></div>
+  </footer>
+  <script src="script.js"></script>
+</body>
+</html>

pricing.html

@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="选择适合当前规模的 OverCooked 影视流媒体平台方案，支持永久授权与定制部署。">
+  <title>服务定价｜煮糊了 OverCooked</title>
+  <link rel="icon" href="favicon.svg">
+  <link rel="stylesheet" href="assets/apple.css">
+</head>
+<body class="pricing-page">
+  <a class="skip-link" href="#content">跳至主要内容</a>
+
+  <header class="site-header" data-header>
+    <nav class="nav-island" aria-label="主导航">
+      <a class="wordmark" href="index.html" aria-label="煮糊了 OverCooked 首页"><img class="wordmark-logo" src="overcooked-white.png" alt="" aria-hidden="true"><span>煮糊了</span><b>OverCooked</b></a>
+      <div class="desktop-nav"><a href="index.html#platform">平台</a><a href="index.html#capabilities">能力</a><a href="index.html#delivery">交付</a><a href="pricing.html" aria-current="page">定价</a></div>
+      <div class="nav-actions"><a class="nav-contact" href="mailto:[email protected]">联系团队 <span aria-hidden="true">↗</span></a><button class="menu-button" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="打开导航" data-menu-button><span></span><span></span></button></div>
+    </nav>
+    <div class="mobile-menu" id="mobile-menu" data-mobile-menu hidden><a href="index.html#platform">平台</a><a href="index.html#capabilities">能力</a><a href="index.html#delivery">交付</a><a href="pricing.html">定价</a><a href="mailto:[email protected]">联系团队</a></div>
+  </header>
+
+  <main id="content">
+    <section class="pricing-hero">
+      <div class="pricing-hero-copy">
+        <p class="section-kicker">永久授权 · 按需升级</p>
+        <h1>从刚刚好开始。<br><span>随业务一起成长。</span></h1>
+        <p>一次购买，永久使用。规模变化时，保留已有配置和数据，平滑升级到下一阶段。</p>
+      </div>
+      <div class="pricing-orbit" aria-hidden="true"><span class="orbit-core"><i></i><b>OC</b></span><i class="orbit-ring ring-one"></i><i class="orbit-ring ring-two"></i><span class="orbit-node node-one">门户</span><span class="orbit-node node-two">媒体</span><span class="orbit-node node-three">节点</span></div>
+    </section>
+
+    <section class="plans" aria-labelledby="plans-title">
+      <div class="plans-heading"><div><p class="section-kicker">选择方案</p><h2 id="plans-title">现在需要多少，<br>就从多少开始。</h2></div><p>每个方案都包含完整部署能力。区别只在规模、自动化深度与支持等级。</p></div>
+      <div class="plan-grid">
+        <article class="plan reveal">
+          <div class="plan-top"><p class="plan-label">Starter</p><span>个人 / 小团队</span></div>
+          <h3>OCM 基础版</h3><p class="plan-desc">用于启动第一套独立影视服务。</p>
+          <div class="plan-price"><strong>¥399</strong><span>一次付费</span></div>
+          <a class="plan-button" href="https://buy.stripe.com/3cI00c2j0eEUdl3dUR0ZW06" target="_blank" rel="noreferrer">选择基础版 <span aria-hidden="true">→</span></a>
+          <ul><li><span>✓</span>1 个品牌门户</li><li><span>✓</span>基础用户与套餐管理</li><li><span>✓</span>2 个媒体或播放节点</li><li><span>✓</span>移动端完整适配</li><li><span>✓</span>基础运行监控</li><li><span>✓</span>工作日技术支持</li></ul>
+        </article>
+        <article class="plan plan-featured reveal">
+          <div class="plan-recommend">推荐</div>
+          <div class="plan-top"><p class="plan-label">Professional</p><span>成长型业务</span></div>
+          <h3>OCM 专业版</h3><p class="plan-desc">用于已有稳定用户规模的影视服务。</p>
+          <div class="plan-price"><strong>¥599</strong><span>一次付费</span></div>
+          <a class="plan-button" href="https://buy.stripe.com/14A28kg9Q68o5SB7wt0ZW07" target="_blank" rel="noreferrer">选择专业版 <span aria-hidden="true">→</span></a>
+          <ul><li><span>✓</span>3 个品牌门户</li><li><span>✓</span>完整用户、套餐与订单管理</li><li><span>✓</span>10 个媒体或播放节点</li><li><span>✓</span>高级品牌定制</li><li><span>✓</span>实时监控与操作审计</li><li><span>✓</span>开放接口与自动化</li><li><span>✓</span>优先技术支持</li></ul>
+        </article>
+        <article class="plan reveal">
+          <div class="plan-top"><p class="plan-label">Enterprise</p><span>多品牌 / 私有化</span></div>
+          <h3>旗舰版</h3><p class="plan-desc">用于多节点、深度集成或独立资源环境。</p>
+          <div class="plan-price"><strong>定制</strong><span>按需报价</span></div>
+          <a class="plan-button" href="mailto:[email protected]">联系定制方案 <span aria-hidden="true">↗</span></a>
+          <ul><li><span>✓</span>品牌与门户数量按需配置</li><li><span>✓</span>多节点及私有化部署</li><li><span>✓</span>独立资源与数据迁移</li><li><span>✓</span>既有系统深度集成</li><li><span>✓</span>专属功能与接口开发</li><li><span>✓</span>上线陪跑与持续运维</li><li><span>✓</span>专属服务响应</li></ul>
+        </article>
+      </div>
+      <p class="payment-note reveal"><i></i>基础版与专业版通过 Stripe 安全结账。所有方案均为永久授权。</p>
+    </section>
+
+    <section class="comparison">
+      <div class="comparison-head reveal"><p class="section-kicker">详细比较</p><h2>差异，清楚列出。</h2><p>选择当前真正会用到的能力，不为暂时不需要的规模付费。</p></div>
+      <div class="comparison-list reveal" role="table" aria-label="方案能力比较">
+        <div class="comparison-row comparison-header" role="row"><span role="columnheader">平台能力</span><span role="columnheader">基础版</span><span role="columnheader">专业版</span><span role="columnheader">旗舰版</span></div>
+        <div class="comparison-row" role="row"><b role="rowheader">品牌门户</b><span>1 个</span><span>3 个</span><span>按需配置</span></div>
+        <div class="comparison-row" role="row"><b role="rowheader">媒体及播放节点</b><span>2 个</span><span>10 个</span><span>按需配置</span></div>
+        <div class="comparison-row" role="row"><b role="rowheader">用户与套餐管理</b><span>基础</span><span class="positive">完整</span><span class="positive">完整</span></div>
+        <div class="comparison-row" role="row"><b role="rowheader">实时监控</b><span>基础</span><span class="positive">完整</span><span class="positive">完整 + 定制</span></div>
+        <div class="comparison-row" role="row"><b role="rowheader">API 与自动化</b><span class="muted">—</span><span class="positive">支持</span><span class="positive">深度定制</span></div>
+        <div class="comparison-row" role="row"><b role="rowheader">私有化部署</b><span class="muted">—</span><span class="muted">—</span><span class="positive">支持</span></div>
+        <div class="comparison-row" role="row"><b role="rowheader">技术支持</b><span>工作日</span><span>优先响应</span><span>专属响应</span></div>
+      </div>
+    </section>
+
+    <section class="pricing-cta">
+      <div class="pricing-cta-media" aria-hidden="true"></div>
+      <div class="pricing-cta-copy reveal"><p class="section-kicker">需要不同的组合？</p><h2>让方案适应业务，<br>而不是反过来。</h2><p>多品牌、特殊存储、数据迁移、私有部署或既有系统集成，都可以按实际需求组合。</p><a class="button button-primary" href="mailto:[email protected]">获取定制报价 <span aria-hidden="true">↗</span></a></div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="footer-main"><a class="wordmark" href="index.html"><img class="wordmark-logo" src="overcooked-white.png" alt="" aria-hidden="true"><span>煮糊了</span><b>OverCooked</b></a><p>让每一个影视服务，都有一套好平台。</p></div>
+    <div class="footer-meta"><span>© 2026 OverCooked Platform Service.</span><div><a href="index.html">返回首页</a><a href="mailto:[email protected]">商务联系</a></div></div>
+  </footer>
+  <script src="script.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,289 @@
+(() => {
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const header = document.querySelector("[data-header]");
+  const menuButton = document.querySelector("[data-menu-button]");
+  const mobileMenu = document.querySelector("[data-mobile-menu]");
+
+  let headerScrollTimer = 0;
+  let lastHeaderScrollY = window.scrollY;
+
+  const updateHeader = () => header?.classList.toggle("is-scrolled", window.scrollY > 20);
+  const handleHeaderScroll = () => {
+    updateHeader();
+    if (!header) return;
+
+    const currentScrollY = window.scrollY;
+    if (!reducedMotion.matches && Math.abs(currentScrollY - lastHeaderScrollY) >= 2) {
+      header.classList.add("is-scroll-hidden");
+    }
+    lastHeaderScrollY = currentScrollY;
+
+    window.clearTimeout(headerScrollTimer);
+    headerScrollTimer = window.setTimeout(() => {
+      header.classList.remove("is-scroll-hidden");
+    }, 180);
+  };
+
+  updateHeader();
+  window.addEventListener("scroll", handleHeaderScroll, { passive: true });
+  reducedMotion.addEventListener("change", () => {
+    if (reducedMotion.matches) header?.classList.remove("is-scroll-hidden");
+  });
+
+  const glassNav = document.querySelector(".nav-island");
+  if (glassNav && !reducedMotion.matches && window.matchMedia("(pointer: fine)").matches) {
+    glassNav.addEventListener("pointermove", (event) => {
+      const rect = glassNav.getBoundingClientRect();
+      glassNav.style.setProperty("--glass-x", `${event.clientX - rect.left}px`);
+      glassNav.style.setProperty("--glass-y", `${event.clientY - rect.top}px`);
+    }, { passive: true });
+
+    glassNav.addEventListener("pointerleave", () => {
+      glassNav.style.setProperty("--glass-x", "50%");
+      glassNav.style.setProperty("--glass-y", "0%");
+    });
+  }
+
+  if (menuButton && mobileMenu) {
+    const closeMenu = () => {
+      menuButton.setAttribute("aria-expanded", "false");
+      menuButton.setAttribute("aria-label", "打开导航");
+      mobileMenu.hidden = true;
+    };
+
+    menuButton.addEventListener("click", () => {
+      const opening = menuButton.getAttribute("aria-expanded") !== "true";
+      menuButton.setAttribute("aria-expanded", String(opening));
+      menuButton.setAttribute("aria-label", opening ? "关闭导航" : "打开导航");
+      mobileMenu.hidden = !opening;
+    });
+
+    mobileMenu.addEventListener("click", (event) => {
+      if (event.target.closest("a")) closeMenu();
+    });
+
+    document.addEventListener("pointerdown", (event) => {
+      if (!mobileMenu.hidden && !header.contains(event.target)) closeMenu();
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") closeMenu();
+    });
+
+    window.addEventListener("resize", () => {
+      if (window.innerWidth > 960) closeMenu();
+    }, { passive: true });
+  }
+
+  const activateSet = (buttons, panels, button, buttonKey, panelKey) => {
+    const target = button.dataset[buttonKey];
+    buttons.forEach((item) => {
+      const active = item === button;
+      item.classList.toggle("is-active", active);
+      item.setAttribute("aria-pressed", String(active));
+    });
+    panels.forEach((panel) => {
+      const active = panel.dataset[panelKey] === target;
+      panel.hidden = !active;
+      panel.classList.toggle("is-active", active);
+    });
+  };
+
+  const bindButtonSet = (buttonSelector, panelSelector, buttonKey, panelKey) => {
+    const buttons = [...document.querySelectorAll(buttonSelector)];
+    const panels = [...document.querySelectorAll(panelSelector)];
+    buttons.forEach((button, index) => {
+      button.addEventListener("click", () => activateSet(buttons, panels, button, buttonKey, panelKey));
+      button.addEventListener("keydown", (event) => {
+        if (!["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) return;
+        event.preventDefault();
+        const direction = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1;
+        const next = buttons[(index + direction + buttons.length) % buttons.length];
+        next.focus();
+        activateSet(buttons, panels, next, buttonKey, panelKey);
+      });
+    });
+  };
+
+  bindButtonSet("[data-console-tab]", "[data-console-view]", "consoleTab", "consoleView");
+
+  const featureRail = document.querySelector("[data-feature-rail]");
+  const featurePrev = document.querySelector("[data-feature-prev]");
+  const featureNext = document.querySelector("[data-feature-next]");
+  if (featureRail && featurePrev && featureNext) {
+    const originalCards = [...featureRail.querySelectorAll(".feature-card")];
+    const autoPauses = new Set();
+    let railFrame = 0;
+    let motionFrame = 0;
+    let lastMotionTime = 0;
+    let manualPauseUntil = 0;
+
+    // Three identical sets keep both automatic and manual movement seamless.
+    const cloneSet = () => {
+      const fragment = document.createDocumentFragment();
+      originalCards.forEach((card) => {
+        const clone = card.cloneNode(true);
+        clone.setAttribute("aria-hidden", "true");
+        fragment.append(clone);
+      });
+      return fragment;
+    };
+
+    featureRail.prepend(cloneSet());
+    featureRail.append(cloneSet());
+
+    const getStep = () => {
+      const card = originalCards[0];
+      if (!card) return 0;
+      const gap = parseFloat(getComputedStyle(featureRail).columnGap) || 0;
+      return card.getBoundingClientRect().width + gap;
+    };
+
+    const getLoopSpan = () => getStep() * originalCards.length;
+
+    const normalizeRail = () => {
+      const loopSpan = getLoopSpan();
+      if (!loopSpan) return;
+      if (featureRail.scrollLeft >= loopSpan * 2) featureRail.scrollLeft -= loopSpan;
+      if (featureRail.scrollLeft <= 1) featureRail.scrollLeft += loopSpan;
+    };
+
+    featureRail.scrollLeft = getLoopSpan();
+
+    const scheduleRailUpdate = () => {
+      if (railFrame) return;
+      railFrame = requestAnimationFrame(() => {
+        railFrame = 0;
+        normalizeRail();
+      });
+    };
+
+    const scrollRail = (direction) => {
+      const step = getStep();
+      if (!step) return;
+      manualPauseUntil = performance.now() + 700;
+      featureRail.scrollBy({
+        left: direction * step,
+        behavior: reducedMotion.matches ? "auto" : "smooth"
+      });
+    };
+
+    const stopAuto = () => {
+      cancelAnimationFrame(motionFrame);
+      motionFrame = 0;
+      lastMotionTime = 0;
+    };
+
+    const animateRail = (time) => {
+      if (!lastMotionTime) lastMotionTime = time;
+      const elapsed = Math.min(time - lastMotionTime, 40);
+      lastMotionTime = time;
+      if (!autoPauses.size && time >= manualPauseUntil) {
+        featureRail.scrollLeft += elapsed * 0.032;
+        normalizeRail();
+      }
+      motionFrame = requestAnimationFrame(animateRail);
+    };
+
+    const startAuto = () => {
+      if (reducedMotion.matches || document.hidden) {
+        stopAuto();
+        return;
+      }
+      if (!motionFrame) motionFrame = requestAnimationFrame(animateRail);
+    };
+
+    const pauseAuto = (reason) => autoPauses.add(reason);
+
+    const resumeAuto = (reason) => {
+      autoPauses.delete(reason);
+      startAuto();
+    };
+
+    const moveManually = (direction) => {
+      scrollRail(direction);
+      startAuto();
+    };
+
+    featurePrev.addEventListener("click", () => moveManually(-1));
+    featureNext.addEventListener("click", () => moveManually(1));
+    featureRail.addEventListener("scroll", scheduleRailUpdate, { passive: true });
+    featureRail.addEventListener("keydown", (event) => {
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+      event.preventDefault();
+      moveManually(event.key === "ArrowRight" ? 1 : -1);
+    });
+    featureRail.addEventListener("pointerdown", () => pauseAuto("pointer"), { passive: true });
+    window.addEventListener("pointerup", () => resumeAuto("pointer"), { passive: true });
+    window.addEventListener("pointercancel", () => resumeAuto("pointer"), { passive: true });
+    featureRail.addEventListener("wheel", () => {
+      manualPauseUntil = performance.now() + 900;
+    }, { passive: true });
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) stopAuto();
+      else startAuto();
+    });
+    reducedMotion.addEventListener("change", startAuto);
+    window.addEventListener("resize", () => {
+      featureRail.scrollLeft = getLoopSpan();
+      scheduleRailUpdate();
+    }, { passive: true });
+    startAuto();
+  }
+
+  const productStage = document.querySelector("[data-product-stage]");
+  const productWindow = document.querySelector("[data-product-window]");
+  if (productStage && productWindow && !reducedMotion.matches && window.matchMedia("(pointer: fine)").matches) {
+    let currentX = 0;
+    let currentY = 0;
+    let targetX = 0;
+    let targetY = 0;
+    let velocityX = 0;
+    let velocityY = 0;
+    let frame = 0;
+
+    const animateTilt = () => {
+      velocityX = (velocityX + (targetX - currentX) * 0.16) * 0.72;
+      velocityY = (velocityY + (targetY - currentY) * 0.16) * 0.72;
+      currentX += velocityX;
+      currentY += velocityY;
+      productWindow.style.setProperty("--rx", `${currentX.toFixed(3)}deg`);
+      productWindow.style.setProperty("--ry", `${currentY.toFixed(3)}deg`);
+      const moving = Math.abs(targetX - currentX) + Math.abs(targetY - currentY) + Math.abs(velocityX) + Math.abs(velocityY) > 0.003;
+      frame = moving ? requestAnimationFrame(animateTilt) : 0;
+    };
+
+    const scheduleTilt = () => {
+      if (!frame) frame = requestAnimationFrame(animateTilt);
+    };
+
+    productStage.addEventListener("pointermove", (event) => {
+      const rect = productStage.getBoundingClientRect();
+      const x = (event.clientX - rect.left) / rect.width - 0.5;
+      const y = (event.clientY - rect.top) / rect.height - 0.5;
+      targetX = Math.max(-1.5, Math.min(1.5, -y * 3));
+      targetY = Math.max(-2.1, Math.min(2.1, x * 4.2));
+      scheduleTilt();
+    }, { passive: true });
+
+    productStage.addEventListener("pointerleave", () => {
+      targetX = 0;
+      targetY = 0;
+      scheduleTilt();
+    });
+  }
+
+  const reveals = document.querySelectorAll(".reveal");
+  if (reducedMotion.matches || !("IntersectionObserver" in window)) {
+    reveals.forEach((item) => item.classList.add("is-visible"));
+  } else {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        entry.target.classList.add("is-visible");
+        observer.unobserve(entry.target);
+      });
+    }, { rootMargin: "0px 0px -7%", threshold: 0.08 });
+    reveals.forEach((item) => observer.observe(item));
+  }
+})();