:root {
  --ink: #16243d;
  --navy: #172b4d;
  --navy-deep: #0e1c34;
  --orange: #f59b32;
  --orange-dark: #d8780e;
  --orange-soft: #fff2df;
  --paper: #f5f7fa;
  --card: #ffffff;
  --muted: #69768a;
  --line: #dde3eb;
  --green: #15845b;
  --ease: cubic-bezier(.2,.82,.2,1);
}

* { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { width: 100%; margin: 0; overflow-x: hidden; color: var(--ink); background: #fff; font-family: "MiSans", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }

.hub-shell { width: 100%; min-height: 100vh; margin: 0; overflow: hidden; background: #fff; }
.hub-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; padding: 0 clamp(24px,5vw,74px); border-bottom: 1px solid rgba(255,255,255,.09); color: #fff; background: var(--navy-deep); }
.hub-brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; text-decoration: none; }
.brand-mark { position:relative;isolation:isolate;display:block;width:40px;height:40px;clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);background:linear-gradient(145deg,#29466f,#0b1a2f 78%);filter:drop-shadow(0 8px 13px rgba(0,0,0,.24));transition:transform .3s var(--ease),filter .3s; }
.brand-mark::before { content:"";position:absolute;z-index:2;left:9px;top:7px;width:22px;height:16px;background:linear-gradient(135deg,#ffd28c,#f6a33e);clip-path:polygon(50% 0,100% 38%,50% 76%,0 38%);transition:transform .3s var(--ease),filter .3s; }
.brand-mark::after { content:"";position:absolute;z-index:2;left:9px;top:13px;width:11px;height:20px;background:linear-gradient(160deg,#e58b21,#bd6506);clip-path:polygon(0 0,100% 30%,100% 100%,0 70%); }
.brand-mark i { position:absolute;z-index:2;right:9px;top:13px;width:11px;height:20px;background:linear-gradient(200deg,#ffbb5f,#e58b21);clip-path:polygon(0 30%,100% 0,100% 70%,0 100%); }
.hub-brand:hover .brand-mark { transform:translateY(-2px) rotate(2deg);filter:drop-shadow(0 12px 17px rgba(245,155,50,.22)); }
.hub-brand:hover .brand-mark::before { transform:translateY(-1px);filter:brightness(1.08); }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { color: #fff; font-family: inherit; font-size: 17px; font-weight: 900; letter-spacing: .02em; }
.brand-copy small { margin-top: 2px; color: #8798b2; font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.hub-nav { display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.035); }
.hub-nav a { position: relative; padding: 8px 15px; border-radius: 999px; color: #aebbd0; font-size: 11px; font-weight: 750; text-decoration: none; transition: color .2s,background .2s,transform .2s; }
.hub-nav a:hover { transform: translateY(-1px); color: #fff; }
.hub-nav a.active { color: #fff; background: rgba(255,255,255,.1); }
.creator-chip { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #fff; background: rgba(255,255,255,.045); text-decoration: none; transition: transform .24s var(--ease),border-color .24s,background .24s; }
.creator-chip:hover { transform: translateY(-2px); border-color: rgba(245,155,50,.45); background: rgba(255,255,255,.08); }
.creator-chip span { color: #8494ad; font-size: 8px; }
.creator-chip strong { font-family: inherit; font-size: 12px; font-weight: 900; }

.hero { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(430px,.95fr); align-items: center; gap: clamp(38px,6vw,88px); min-height: 620px; padding: 72px clamp(28px,7vw,104px) 78px; overflow: hidden; color: #fff; background: linear-gradient(125deg,var(--navy-deep),#1d365f 66%,#24436f); }
.hero::before { content:""; position:absolute; inset:0; opacity:.32; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right,#000,transparent 85%); }
.hero-orbit { position:absolute; border:1px solid rgba(255,255,255,.08); border-radius:50%; pointer-events:none; }
.orbit-one { width:440px; height:440px; right:-100px; top:-180px; box-shadow:0 0 0 58px rgba(255,255,255,.018),0 0 0 118px rgba(255,255,255,.012); }
.orbit-two { width:210px; height:210px; left:43%; bottom:-150px; border-color:rgba(245,155,50,.16); box-shadow:0 0 0 35px rgba(245,155,50,.025); }
.hero-copy,.hero-console { position:relative; z-index:1; }
.hero-copy { animation:heroCopyIn .75s var(--ease) both; }
.hero-kicker { display:flex; align-items:center; gap:8px; margin:0 0 16px; color:#a9b9d0; font-size:10px; font-weight:850; letter-spacing:.2em; }
.hero-kicker span { width:24px; height:2px; background:var(--orange); }
.hero h1 { max-width:700px; margin:0; font-size:clamp(42px,5vw,68px); line-height:1.16; letter-spacing:0; }
.hero h1 em { display:block; margin-top:6px; color:var(--orange); font-family:inherit; font-style:normal; font-weight:900; letter-spacing:.01em; }
.hero-description { max-width:640px; margin:22px 0 0; color:#bcc9da; font-size:14px; line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:30px; }
.primary-cta,.secondary-cta { display:inline-flex; align-items:center; justify-content:center; min-height:46px; border-radius:11px; font-size:12px; font-weight:850; text-decoration:none; transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s; }
.primary-cta { gap:24px; padding:0 13px 0 18px; color:#2b1b05; background:var(--orange); box-shadow:0 12px 26px rgba(245,155,50,.18); }
.primary-cta b { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.45); transition:transform .25s var(--ease); }
.primary-cta:hover { transform:translateY(-3px); background:#ffab4b; box-shadow:0 16px 32px rgba(245,155,50,.26); }
.primary-cta:hover b { transform:translateX(3px); }
.secondary-cta { padding:0 18px; border:1px solid rgba(255,255,255,.16); color:#dbe4f0; background:rgba(255,255,255,.04); }
.secondary-cta:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); }
.hero-proof { display:flex; flex-wrap:wrap; gap:18px; margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09); }
.hero-proof > span { display:flex; align-items:center; gap:7px; color:#9eadc2; font-size:9px; }
.hero-proof i { display:grid; place-items:center; width:23px; height:23px; border:1px solid rgba(245,155,50,.35); border-radius:7px; color:var(--orange); font-size:7px; font-style:normal; }
.hero-proof strong { color:#c9d4e3; font-weight:700; }

.hero-console { width:100%; max-width:560px; justify-self:end; border:1px solid rgba(255,255,255,.14); border-radius:20px; background:rgba(8,20,39,.56); box-shadow:0 32px 70px rgba(0,0,0,.24); backdrop-filter:blur(14px); transform:perspective(1000px) rotateY(-5deg) rotateX(2deg); animation:consoleIn .85s .12s var(--ease) both; transition:transform .45s var(--ease),border-color .35s; }
.hero-console:hover { transform:perspective(1000px) rotateY(-1deg) rotateX(0) translateY(-5px); border-color:rgba(245,155,50,.35); }
.console-topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:42px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.08); color:#8292aa; font-size:8px; letter-spacing:.13em; }
.console-topbar strong { color:#a9b7ca; }
.console-topbar small { justify-self:end; padding:3px 6px; border-radius:999px; color:#78d3ad; background:rgba(50,190,134,.11); font-size:7px; font-weight:900; }
.console-dots { display:flex; gap:5px; }
.console-dots i { width:6px; height:6px; border-radius:50%; background:#52627a; }
.console-dots i:first-child { background:var(--orange); }
.console-body { padding:24px; }
.console-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.console-heading span { color:#fff; font-size:14px; font-weight:850; }
.console-heading b { padding:4px 7px; border:1px solid rgba(255,255,255,.08); border-radius:6px; color:#7f90aa; font-size:7px; letter-spacing:.1em; }
.console-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:15px; }
.console-metrics article { padding:13px; border:1px solid rgba(255,255,255,.075); border-radius:11px; background:rgba(255,255,255,.035); }
.console-metrics article.accent { border-color:rgba(245,155,50,.32); background:rgba(245,155,50,.1); }
.console-metrics small,.console-metrics strong,.console-metrics span { display:block; }
.console-metrics small { color:#7f8fa7; font-size:8px; }
.console-metrics strong { margin-top:5px; color:#fff; font-size:16px; }
.console-metrics span { margin-top:4px; color:#73849e; font-size:7px; }
.console-metrics .accent strong { color:#ffb155; }
.console-chart { margin-top:12px; padding:15px; border:1px solid rgba(255,255,255,.07); border-radius:11px; background:rgba(255,255,255,.025); }
.chart-label { display:flex; justify-content:space-between; color:#8191a8; font-size:8px; }
.chart-label strong { color:var(--orange); }
.chart-track { height:4px; margin-top:8px; overflow:hidden; border-radius:999px; background:#293a53; }
.chart-track i { display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--orange),#ffcb84); transform-origin:left; animation:progressFill 1.2s .5s var(--ease) both; }
.chart-bars { display:flex; align-items:end; gap:6px; height:66px; margin-top:14px; }
.chart-bars i { flex:1; height:var(--bar,30%); border-radius:3px 3px 0 0; background:linear-gradient(to top,rgba(245,155,50,.38),rgba(245,155,50,.9)); animation:barUp .55s var(--ease) both; }
.chart-bars i:nth-child(1){--bar:33%;animation-delay:.35s}.chart-bars i:nth-child(2){--bar:52%;animation-delay:.4s}.chart-bars i:nth-child(3){--bar:45%;animation-delay:.45s}.chart-bars i:nth-child(4){--bar:70%;animation-delay:.5s}.chart-bars i:nth-child(5){--bar:62%;animation-delay:.55s}.chart-bars i:nth-child(6){--bar:84%;animation-delay:.6s}.chart-bars i:nth-child(7){--bar:72%;animation-delay:.65s}.chart-bars i:nth-child(8){--bar:94%;animation-delay:.7s}
.console-footer { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:#76869e; font-size:8px; }
.console-footer span { display:flex; align-items:center; gap:6px; }
.console-footer span i { width:6px; height:6px; border-radius:50%; background:#48bd8d; box-shadow:0 0 0 4px rgba(72,189,141,.1); }
.console-footer strong { color:#93a2b8; letter-spacing:.08em; }
.console-library { display:grid;gap:8px;margin-top:15px; }
.console-library article { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:11px 12px;border:1px solid rgba(255,255,255,.075);border-radius:11px;background:rgba(255,255,255,.035);transition:border-color .25s,background .25s,transform .25s var(--ease); }
.hero-console:hover .console-library article:nth-child(1) { transform:translateX(3px);transition-delay:.04s; }
.hero-console:hover .console-library article:nth-child(2) { transform:translateX(3px);transition-delay:.09s; }
.hero-console:hover .console-library article:nth-child(3) { transform:translateX(3px);transition-delay:.14s; }
.hero-console:hover .console-library article:nth-child(4) { transform:translateX(3px);transition-delay:.19s; }
.console-library article:hover { border-color:rgba(245,155,50,.25);background:rgba(255,255,255,.055); }
.console-tool-icon { display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(245,155,50,.24);border-radius:8px;color:var(--orange);background:rgba(245,155,50,.08);font-size:13px;font-weight:900; }
.console-library small,.console-library strong { display:block; }
.console-library small { color:#75869f;font-size:7px; }
.console-library strong { margin-top:3px;color:#e8eef7;font-size:11px; }
.console-library article > b { padding:4px 7px;border-radius:999px;color:#68d3a5;background:rgba(62,197,142,.1);font-size:7px; }
.console-overview { display:grid;grid-template-columns:auto 1fr;align-items:end;gap:20px;margin-top:10px;padding:13px 14px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025); }
.console-overview small,.console-overview strong { display:block; }
.console-overview small { color:#75869f;font-size:7px; }.console-overview strong { margin-top:5px;color:#b9c5d6;font-size:9px; }
.console-pulse { display:flex;align-items:end;justify-content:flex-end;gap:5px;height:32px; }
.console-pulse i { width:8px;height:var(--pulse,30%);border-radius:3px 3px 1px 1px;background:linear-gradient(to top,rgba(245,155,50,.25),var(--orange));animation:barUp .55s var(--ease) both; }
.console-pulse i:nth-child(1){--pulse:28%;animation-delay:.2s}.console-pulse i:nth-child(2){--pulse:46%;animation-delay:.25s}.console-pulse i:nth-child(3){--pulse:36%;animation-delay:.3s}.console-pulse i:nth-child(4){--pulse:72%;animation-delay:.35s}.console-pulse i:nth-child(5){--pulse:55%;animation-delay:.4s}.console-pulse i:nth-child(6){--pulse:86%;animation-delay:.45s}.console-pulse i:nth-child(7){--pulse:68%;animation-delay:.5s}

.hub-stat-strip { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); background:#fff; }
.hub-stat-strip div { display:flex; align-items:center; justify-content:center; gap:10px; min-height:88px; border-right:1px solid var(--line); }
.hub-stat-strip div:last-child { border-right:0; }
.hub-stat-strip strong { color:var(--navy); font-family:inherit; font-size:23px; font-weight:900; }
.hub-stat-strip span { max-width:90px; color:var(--muted); font-size:9px; line-height:1.4; }

.tools-section { padding:82px clamp(26px,6vw,88px) 92px; background:linear-gradient(180deg,#f8fafc,#f2f5f8); scroll-margin-top:28px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.section-kicker { margin:0 0 8px; color:var(--orange-dark); font-size:10px; font-weight:900; letter-spacing:.18em; }
.section-heading h2,.roadmap-copy h2 { margin:0; color:var(--navy); font-size:clamp(28px,3.4vw,43px); line-height:1.24; letter-spacing:0; }
.section-heading > div > p:last-child,.roadmap-copy > p:last-child { margin:10px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.tool-search { display:flex; align-items:center; gap:8px; width:min(320px,100%); min-height:43px; padding:0 13px; border:1px solid #d5dce6; border-radius:11px; background:#fff; box-shadow:0 7px 18px rgba(21,38,65,.04); transition:border-color .22s,box-shadow .22s,transform .22s var(--ease); }
.tool-search:focus-within { transform:translateY(-2px); border-color:#e5a24d; box-shadow:0 0 0 3px rgba(245,155,50,.1),0 9px 20px rgba(21,38,65,.05); }
.tool-search span { color:#8d99aa; font-size:20px; line-height:1; }
.tool-search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:11px; }
.tool-filter { display:flex; align-items:center; gap:7px; margin-top:28px; padding:7px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.7); }
.tool-filter button { padding:8px 13px; border:0; border-radius:8px; color:#6c788b; background:transparent; font-size:10px; font-weight:750; transition:color .2s,background .2s,transform .2s; }
.tool-filter button:hover { transform:translateY(-1px); color:var(--navy); background:#fff; }
.tool-filter button.active { color:#291a05; background:var(--orange); }
.tool-filter > span { margin-left:auto;padding-right:8px;color:#8b96a5;font-size:9px; }
.tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }
.tool-card { position:relative; min-height:310px; padding:22px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 10px 28px rgba(21,38,65,.045); transition:transform .3s var(--ease),border-color .3s,box-shadow .3s; }
.tool-card:hover { transform:translateY(-6px); border-color:#cbd4df; box-shadow:0 18px 42px rgba(21,38,65,.09); }
.tool-card[hidden] { display:none; }
.featured-tool { grid-column:span 2; color:#fff; border-color:#29466f; background:linear-gradient(135deg,var(--navy-deep),#1d385f); box-shadow:0 17px 42px rgba(16,35,65,.16); }
.featured-tool::after { content:""; position:absolute; right:-90px; bottom:-145px; width:280px; height:280px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 38px rgba(255,255,255,.018),0 0 0 78px rgba(255,255,255,.012); }
.featured-tool:hover { border-color:#44678f; box-shadow:0 24px 50px rgba(16,35,65,.23); }
.tool-card-top { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px; }
.tool-icon { display:grid;place-items:center;width:43px;height:43px;border:1px solid #e0e5ec;border-radius:12px;color:var(--orange-dark);background:var(--orange-soft);font-size:17px;font-weight:900; }
.featured-tool .tool-icon { border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.07); }
.package-icon { position:relative; }
.package-icon::before { content:""; width:19px;height:14px;border:1px solid var(--orange);background:rgba(245,155,50,.13);transform:skewY(12deg); }
.package-icon::after { content:""; position:absolute; width:10px;height:14px;border:1px solid rgba(245,155,50,.7);transform:translateX(10px) skewY(-30deg); }
.status { display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-size:8px;font-weight:850; }
.status.available { color:#6ee0b0;background:rgba(60,195,140,.12); }
.status.available i { width:6px;height:6px;border-radius:50%;background:#52cf9b;box-shadow:0 0 0 4px rgba(82,207,155,.1); }
.status.planned { color:#8a7355;background:#f4eee5; }
.tool-number { position:relative;z-index:1;margin:22px 0 6px;color:#9ca7b6;font-size:8px;font-weight:900;letter-spacing:.17em; }
.featured-tool .tool-number { color:#7186a2; }
.tool-card h3 { position:relative;z-index:1;margin:0;color:var(--navy);font-size:20px;line-height:1.35;letter-spacing:0; }
.featured-tool h3 { color:#fff;font-size:25px; }
.tool-card > p:not(.tool-number) { position:relative;z-index:1;max-width:610px;margin:10px 0 0;color:#748094;font-size:10px;line-height:1.75; }
.featured-tool > p:not(.tool-number) { color:#b5c2d4;font-size:11px; }
.featured-tool > p:not(.tool-number) { max-width:52%; }
.tool-tags { position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px; }
.tool-tags span { padding:4px 7px;border:1px solid #e1e6ed;border-radius:6px;color:#778397;background:#f8f9fb;font-size:8px; }
.featured-tool .tool-tags span { border-color:rgba(255,255,255,.1);color:#aab9cd;background:rgba(255,255,255,.04); }
.tool-card-footer { position:absolute;z-index:2;left:22px;right:22px;bottom:20px;display:flex;align-items:end;justify-content:space-between;gap:16px; }
.tool-card-footer > span strong,.tool-card-footer > span small { display:block; }
.tool-card-footer > span strong { color:var(--orange);font-size:18px; }
.tool-card-footer > span small { margin-top:2px;color:#74869f;font-size:7px; }
.tool-card-footer a { display:inline-flex;align-items:center;gap:14px;padding:10px 11px 10px 14px;border-radius:9px;color:#2c1b04;background:var(--orange);font-size:9px;font-weight:900;text-decoration:none;transition:transform .24s var(--ease),background .24s; }
.tool-card-footer a:hover { transform:translateX(3px);background:#ffad51; }
.tool-card-footer a b { font-size:13px; }
.tool-card-footer.muted { align-items:center;color:#9aa5b3;font-size:9px; }
.tool-card-footer.muted b { display:grid;place-items:center;width:27px;height:27px;border:1px solid #e1e6ec;border-radius:8px;color:#a4aebb;background:#fafbfc;font-size:15px; }

/* 每张工具卡片中的低对比度功能缩略图 */
.card-tool-preview { position:absolute;z-index:0;pointer-events:none;user-select:none;color:#183253;opacity:.17;filter:saturate(.65);transition:opacity .35s var(--ease),filter .35s,transform .35s var(--ease); }
.tool-card:hover .card-tool-preview { opacity:.32;filter:saturate(1);transform:translateY(-3px); }
.upcoming .card-tool-preview,.live-tool .card-tool-preview { left:22px;right:22px;bottom:58px;height:72px; }
.live-tool { border-color:#d8e1eb;background:linear-gradient(155deg,#fff,#fbfcfe); }
.live-tool::after { content:"";position:absolute;right:-58px;top:-58px;width:126px;height:126px;border:1px solid rgba(245,155,50,.09);border-radius:50%;box-shadow:0 0 0 24px rgba(245,155,50,.025);pointer-events:none; }
.live-tool:hover { border-color:#edba78;box-shadow:0 20px 44px rgba(21,38,65,.1); }
.live-tool .card-tool-preview { opacity:.2; }
.live-tool:hover .card-tool-preview { opacity:.4; }
.live-card-footer > span strong { font-family:inherit; }

.fee-tool-preview { top:70px;right:24px;width:38%;height:164px;padding:12px;border:1px solid rgba(255,255,255,.28);border-radius:13px;color:#fff;background:rgba(255,255,255,.075);box-shadow:0 14px 40px rgba(0,0,0,.16);opacity:.27;transform:rotate(-1deg); }
.featured-tool:hover .fee-tool-preview { opacity:.48;transform:translateY(-3px) rotate(0deg); }
.preview-window-head { display:flex;align-items:center;gap:5px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.18); }
.preview-window-head i { width:5px;height:5px;border-radius:50%;background:var(--orange); }
.preview-window-head i:nth-child(2) { opacity:.62; }
.preview-window-head i:nth-child(3) { opacity:.34; }
.preview-window-head span { margin-left:auto;font-size:7px;font-weight:850;letter-spacing:.15em; }
.fee-preview-inputs { display:grid;grid-template-columns:1.3fr .8fr;gap:7px;margin-top:10px; }
.fee-preview-inputs span,.fee-preview-result { padding:8px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(8,26,51,.22); }
.fee-tool-preview small,.fee-tool-preview b { display:block; }
.fee-tool-preview small { margin-bottom:3px;color:#aebdd1;font-size:7px;font-weight:600; }
.fee-tool-preview b { font-size:9px; }
.fee-preview-result { display:flex;align-items:center;justify-content:space-between;margin-top:7px;border-color:rgba(245,155,50,.5);background:rgba(245,155,50,.1); }
.fee-preview-result strong { color:#ffad51;font-size:18px;letter-spacing:-.03em; }

.profit-tool-preview { display:grid;grid-template-columns:58px 1fr 62px;align-items:center;gap:11px; }
.mini-ring { display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--orange) 0 28%,#dae1e9 28% 100%); }
.mini-ring::before { content:"";grid-area:1/1;width:37px;height:37px;border-radius:50%;background:#fff; }
.mini-ring span { grid-area:1/1;z-index:1;font-size:10px;font-weight:900; }
.mini-cost-list { display:grid;gap:6px; }
.mini-cost-list i { display:block;height:6px;border-radius:999px;background:#71839b; }
.mini-cost-list i:nth-child(1) { width:88%; }
.mini-cost-list i:nth-child(2) { width:62%; }
.mini-cost-list i:nth-child(3) { width:74%; }
.mini-profit-total small,.mini-profit-total strong { display:block;text-align:right; }
.mini-profit-total small { margin-bottom:3px;font-size:7px; }
.mini-profit-total strong { color:var(--orange-dark);font-size:16px; }

.storage-tool-preview { display:flex;align-items:center;justify-content:space-between;gap:16px; }
.storage-boxes { position:relative;width:86px;height:56px; }
.storage-boxes i { position:absolute;bottom:3px;width:34px;height:31px;border:1px solid #8c6c48;background:rgba(245,155,50,.38);transform:skewY(-8deg); }
.storage-boxes i:nth-child(1) { left:3px; }
.storage-boxes i:nth-child(2) { left:29px;bottom:11px;height:40px; }
.storage-boxes i:nth-child(3) { left:55px;width:27px;height:25px; }
.storage-data { flex:1;display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.storage-data span { padding:8px;border:1px solid #a8b5c5;border-radius:7px; }
.storage-data small,.storage-data b { display:block; }
.storage-data small { margin-bottom:3px;font-size:7px; }
.storage-data b { font-size:9px; }

.ads-tool-preview { display:grid;grid-template-columns:1.25fr .9fr;align-items:end;gap:14px; }
.ads-bars { display:flex;align-items:end;gap:5px;height:58px;padding:0 7px 5px;border-bottom:1px solid #76879d; }
.ads-bars i { flex:1;min-width:5px;border-radius:3px 3px 0 0;background:#365a84; }
.ads-bars i:nth-child(1) { height:28%; }.ads-bars i:nth-child(2) { height:44%; }.ads-bars i:nth-child(3) { height:37%; }.ads-bars i:nth-child(4) { height:67%; }.ads-bars i:nth-child(5) { height:58%; }.ads-bars i:nth-child(6) { height:88%;background:var(--orange); }
.ads-metrics { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.ads-metrics span { padding:7px 5px;border:1px solid #aab6c4;border-radius:7px;text-align:center; }
.ads-metrics small,.ads-metrics b { display:block; }
.ads-metrics small { margin-bottom:3px;font-size:6px; }.ads-metrics b { font-size:9px; }

.convert-tool-preview { display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:9px; }
.convert-tool-preview > span { padding:7px 9px;border:1px solid #aab6c4;border-radius:7px; }
.convert-tool-preview small,.convert-tool-preview b { display:block; }
.convert-tool-preview small { margin-bottom:3px;font-size:6px; }.convert-tool-preview b { font-size:10px; }
.convert-tool-preview em { align-self:center;color:var(--orange-dark);font-size:17px;font-style:normal; }
.convert-row { position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding-top:5px;border-top:1px dashed #98a7ba; }
.convert-row i { font-size:8px;font-style:normal;font-weight:800; }
.ocr-card-icon { font-size:20px; }
.ocr-tool-preview { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px; }
.mini-document { position:relative;height:62px;padding:13px 10px 8px;border:1px solid #8898ac;border-radius:7px;background:rgba(255,255,255,.45);overflow:hidden; }
.mini-document > span { position:absolute;left:0;right:0;top:15px;height:2px;background:var(--orange);box-shadow:0 0 8px rgba(245,155,50,.45);animation:ocrCardScan 2.8s ease-in-out infinite; }
.mini-document i { display:block;height:5px;margin-top:5px;border-radius:99px;background:#708299; }
.mini-document i:nth-of-type(1) { width:86%; }.mini-document i:nth-of-type(2) { width:68%; }.mini-document i:nth-of-type(3) { width:78%; }
.mini-document b { position:absolute;inset:5px;border:1px solid rgba(216,120,14,.36);border-radius:4px; }
.ocr-tool-preview > em { color:var(--orange-dark);font-size:9px;font-style:normal;font-weight:900;letter-spacing:.08em; }
.mini-output { display:grid;grid-template-columns:1fr 1fr;gap:5px; }
.mini-output span { display:grid;place-items:center;height:27px;border:1px solid #8798ac;border-radius:6px;color:#1d466f;background:rgba(255,255,255,.42);font-size:9px;font-weight:900; }
.mini-output span:nth-child(2) { color:#16714d; }
.mini-output i { grid-column:1 / -1;display:block;height:4px;border-radius:99px;background:#8494a8; }
.mini-output i:last-child { width:72%; }
.empty-tools { margin-top:18px;padding:38px;border:1px dashed #cfd7e1;border-radius:14px;color:var(--muted);background:#fff;text-align:center; }
.empty-tools strong { color:var(--navy);font-size:14px; }
.empty-tools p { margin:7px 0 0;font-size:10px; }

.roadmap-section { display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:70px;padding:82px clamp(28px,7vw,104px);background:#fff;scroll-margin-top:30px; }
.roadmap-copy > p:last-child { max-width:550px; }
.roadmap-steps { display:grid;gap:9px; }
.roadmap-steps article { display:grid;grid-template-columns:48px 1fr;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fafbfc;transition:transform .25s var(--ease),border-color .25s; }
.roadmap-steps article:hover { transform:translateX(5px);border-color:#d0d8e2; }
.roadmap-steps article > span { display:grid;place-items:center;width:42px;height:42px;border-radius:10px;color:#8995a6;background:#eef1f5;font-size:10px;font-weight:900; }
.roadmap-steps article.done { border-color:#efc58d;background:#fff9f0; }
.roadmap-steps article.done > span { color:#2b1a04;background:var(--orange); }
.roadmap-steps strong,.roadmap-steps small { display:block; }
.roadmap-steps strong { color:var(--navy);font-size:12px; }
.roadmap-steps small { margin-top:3px;color:#8b96a5;font-size:8px; }

.creator-section { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;margin:0 clamp(24px,5vw,72px) 70px;padding:28px 30px;border:1px solid rgba(255,255,255,.08);border-radius:18px;color:#fff;background:linear-gradient(120deg,var(--navy-deep),#203b62);box-shadow:0 18px 42px rgba(16,35,65,.14); }
.creator-monogram { display:grid;place-items:center;width:66px;height:66px;border:1px solid rgba(255,255,255,.15);border-radius:18px;color:#271704;background:linear-gradient(145deg,#ffc474,var(--orange));font-family:inherit;font-size:34px;font-weight:900;transform:rotate(-3deg); }
.creator-section p { margin:0;color:#9eacc0;font-size:9px;line-height:1.65; }
.creator-section h2 { margin:3px 0 5px;font-family:inherit;font-size:25px;font-weight:900; }
.creator-section h2 span { color:var(--orange);font-style:normal;font-weight:900; }
.creator-section a { display:inline-flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid rgba(255,255,255,.14);border-radius:9px;color:#e5ebf3;background:rgba(255,255,255,.05);font-size:9px;font-weight:850;text-decoration:none;transition:transform .24s var(--ease),background .24s; }
.creator-section a:hover { transform:translateY(-3px);background:rgba(255,255,255,.1); }

.hub-footer { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:100px;padding:0 clamp(24px,5vw,74px);color:#8290a4;background:#0a172b; }
.footer-brand .brand-mark { width:32px;height:32px;border-radius:9px; }
.footer-brand .brand-mark::before { left:7px;top:5px;width:18px;height:13px; }
.footer-brand .brand-mark::after { left:7px;top:10px;width:9px;height:16px; }
.footer-brand .brand-mark i { right:7px;top:10px;width:9px;height:16px; }
.footer-brand .brand-copy strong { font-size:14px; }
.footer-brand .brand-copy small { font-size:6px; }
.hub-footer p { font-size:9px;text-align:center; }
.hub-footer > span { justify-self:end;font-size:8px; }
.hub-footer b { color:#aab6c8; }

.reveal-item { transition:opacity .6s var(--ease),transform .6s var(--ease); }
.motion-ready .reveal-item { opacity:0;transform:translateY(20px); }
.motion-ready .reveal-item.is-visible { opacity:1;transform:none; }

@keyframes heroCopyIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes consoleIn { from{opacity:0;transform:perspective(1000px) rotateY(-9deg) rotateX(5deg) translateY(25px)} to{opacity:1;transform:perspective(1000px) rotateY(-5deg) rotateX(2deg)} }
@keyframes progressFill { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes barUp { from{height:0;opacity:0} to{height:var(--bar);opacity:1} }
@keyframes ocrCardScan { 0%,100%{transform:translateY(-6px);opacity:.45} 50%{transform:translateY(34px);opacity:1} }

@media (max-width:1000px) {
  .hero { grid-template-columns:1fr; }
  .hero-console { justify-self:start;max-width:650px;transform:none; }
  .hero-console:hover { transform:translateY(-5px); }
  .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .featured-tool { grid-column:span 2; }
}

@media (max-width:720px) {
  .hub-header { grid-template-columns:1fr auto;min-height:68px; }
  .hub-nav { display:none; }
  .creator-chip span { display:none; }
  .hero { grid-template-columns:1fr;min-height:0;padding:62px 24px; }
  .hero h1 { font-size:39px; }
  .hero-description { font-size:12px; }
  .hero-proof { display:grid;gap:9px; }
  .console-body { padding:16px; }
  .console-metrics { grid-template-columns:1fr; }
  .hub-stat-strip { grid-template-columns:repeat(2,1fr); }
  .hub-stat-strip div:nth-child(2) { border-right:0; }
  .hub-stat-strip div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .section-heading { display:grid;align-items:start; }
  .tool-search { width:100%; }
  .tool-filter { overflow:auto; }
  .tool-filter button { flex:0 0 auto; }
  .tool-filter > span { display:none; }
  .tool-grid { grid-template-columns:1fr; }
  .featured-tool { grid-column:auto; }
  .tool-card { min-height:330px; }
  .featured-tool > p:not(.tool-number) { max-width:100%;padding-right:0; }
  .fee-tool-preview { top:auto;right:22px;bottom:62px;width:52%;height:118px;padding:9px;opacity:.2; }
  .fee-preview-inputs { gap:5px;margin-top:7px; }
  .fee-preview-inputs span { padding:5px; }
  .fee-preview-result { margin-top:5px;padding:5px 7px; }
  .fee-preview-result strong { font-size:14px; }
  .roadmap-section { grid-template-columns:1fr;gap:32px;padding:62px 24px; }
  .creator-section { grid-template-columns:auto 1fr;margin:0 18px 52px;padding:22px; }
  .creator-section > a { grid-column:1 / -1;justify-content:center; }
  .creator-monogram { width:54px;height:54px;border-radius:15px;font-size:28px; }
  .hub-footer { grid-template-columns:1fr;gap:12px;padding:24px;text-align:center; }
  .hub-footer .hub-brand { justify-self:center; }
  .hub-footer > span { justify-self:center; }
}

@media (max-width:480px) {
  .hub-header { min-height:62px;padding:0 16px; }
  .brand-mark { width:34px;height:34px; }
  .brand-mark::before { left:8px;top:6px;width:19px;height:14px; }
  .brand-mark::after { left:8px;top:11px;width:9px;height:17px; }
  .brand-mark i { right:8px;top:11px;width:9px;height:17px; }
  .brand-copy strong { font-size:15px; }
  .brand-copy small { display:none; }
  .creator-chip { padding:7px 9px; }
  .hero { padding:44px 16px 50px; }
  .hero h1 { font-size:clamp(32px,10.6vw,38px);line-height:1.12; }
  .hero-kicker { font-size:8px;letter-spacing:.14em; }
  .hero-description { margin-top:18px;font-size:11px;line-height:1.75; }
  .hero-actions { display:grid;grid-template-columns:1fr;width:100%;gap:9px;margin-top:24px; }
  .primary-cta,.secondary-cta { width:100%; }
  .primary-cta { justify-content:space-between; }
  .hero-proof { margin-top:26px;padding-top:18px; }
  .hero-console { border-radius:14px; }
  .console-topbar { grid-template-columns:1fr auto;min-height:38px;padding:0 11px; }
  .console-topbar strong { display:none; }
  .console-body { padding:13px; }
  .console-heading { gap:8px; }
  .console-heading span { font-size:12px; }
  .console-library article { gap:8px;padding:9px; }
  .console-overview { gap:10px;padding:11px; }
  .hub-stat-strip div { min-height:76px;gap:7px; }
  .hub-stat-strip strong { font-size:20px; }
  .hub-stat-strip span { max-width:74px;font-size:8px; }
  .tools-section { padding:54px 16px 62px; }
  .section-heading h2,.roadmap-copy h2 { font-size:29px; }
  .tool-filter { margin-top:22px;padding:5px; }
  .tool-card { min-height:315px;padding:18px;border-radius:14px; }
  .tool-card-footer { left:18px;right:18px;bottom:17px; }
  .fee-tool-preview { right:18px;bottom:62px;width:56%; }
  .roadmap-section { padding:54px 16px; }
  .creator-section { grid-template-columns:1fr;margin:0 12px 42px;padding:20px;text-align:center; }
  .creator-monogram { justify-self:center; }
  .creator-section > a { grid-column:auto;width:100%;justify-content:center; }
  .hub-footer { padding:22px 16px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
}