/* home.css — extracted verbatim from the original keep-online.html <style>.
   Visual design is preserved 1:1; do not restyle without a design review. */
:root{
  --bg:#f7f9f8;--surface:#fff;--surface-2:#f0f4f2;--ink:#10211a;--muted:#5b6b64;--faint:#839089;
  --line:#dfe7e3;--line-strong:#cbd7d1;--accent:#17a673;--accent-2:#0c7d72;--accent-ink:#08724e;
  --accent-soft:#e3f5ed;--navy:#102c27;--shadow-sm:0 1px 2px rgba(15,42,33,.04);
  --shadow:0 22px 60px -32px rgba(11,52,39,.32);--radius:22px;
  --display:'Sora','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --body:'IBM Plex Sans','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',monospace
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#09110e;--surface:#101b17;--surface-2:#15231d;--ink:#edf4f0;--muted:#9dafa6;--faint:#74877d;
  --line:#203129;--line-strong:#30443a;--accent:#3ad99a;--accent-2:#27b7a7;--accent-ink:#66e3ad;
  --accent-soft:#102c21;--navy:#071c17;--shadow-sm:0 1px 2px rgba(0,0,0,.35);--shadow:0 24px 70px -30px rgba(0,0,0,.9)
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:absolute;inset:0 0 auto;height:760px;pointer-events:none;background:
  radial-gradient(circle at 82% 9%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 29%),
  radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--accent-2) 8%,transparent),transparent 22%)}
.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto;position:relative}
h1,h2,h3{font-family:var(--display);letter-spacing:-.035em;margin:0;text-wrap:balance}
p{margin:0} a{color:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:3px}
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none;letter-spacing:-.02em}
.brand-mark{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,var(--accent),var(--accent-2));box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 75%,transparent)}
.brand-mark:after{content:"";width:10px;height:10px;border-radius:50%;background:#d9fff0;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.brand .en{color:var(--faint);font-weight:500;font-size:12px;font-family:var(--mono);letter-spacing:0}
.nav-meta{display:flex;gap:8px;align-items:center}
.nav-link,.nav-fb{font-size:13.5px;text-decoration:none;border-radius:10px;transition:.2s ease}
.nav-link{color:var(--muted);padding:8px 11px}.nav-link:hover{color:var(--ink);background:var(--surface)}
.nav-fb{color:var(--ink);font-weight:600;padding:8px 13px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm)}
.nav-fb:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-1px)}
.lang{position:relative;display:flex;align-items:center}.lang:after{content:"⌄";position:absolute;right:10px;top:50%;transform:translateY(-55%);pointer-events:none;color:var(--faint)}
.lang select{appearance:none;-webkit-appearance:none;font:inherit;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 28px 8px 11px;cursor:pointer;box-shadow:var(--shadow-sm)}
.hero{min-height:600px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:72px;padding:76px 0 70px}
.hero-copy{max-width:650px}.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:24px}
.eyebrow:before{content:"";width:28px;height:1px;background:currentColor}
h1{font-size:clamp(42px,6vw,72px);font-weight:700;line-height:1.06;letter-spacing:-.06em;margin-bottom:23px}
.lede{color:var(--muted);font-size:clamp(17px,2vw,19px);line-height:1.75;max-width:590px}
.hero-proof{display:flex;flex-wrap:wrap;gap:18px 28px;margin-top:30px;color:var(--muted);font-size:13px}
.proof-item{display:flex;align-items:center;gap:8px}.proof-item:before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:11px;font-weight:700}
.hero-visual{position:relative;min-height:410px;display:grid;place-items:center}
.orb{position:absolute;width:350px;height:350px;border-radius:42% 58% 59% 41%/47% 40% 60% 53%;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 17%,var(--surface)),color-mix(in srgb,var(--accent-2) 8%,var(--surface)));animation:drift 9s ease-in-out infinite alternate}
.app-window{position:relative;width:min(100%,390px);overflow:hidden;border:1px solid color-mix(in srgb,var(--line-strong) 75%,transparent);border-radius:24px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 34px 80px -28px rgba(6,50,37,.42);backdrop-filter:blur(14px);transform:rotate(-2deg)}
.window-bar{height:45px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 17px;gap:7px}.window-bar i{display:block;width:8px;height:8px;border-radius:50%;background:var(--line-strong)}.window-title{margin-left:auto;font:500 9px/1 var(--mono);letter-spacing:.12em;color:var(--faint)}
.window-body{padding:28px}.app-id{display:flex;align-items:center;gap:14px}.app-icon{width:55px;height:55px;border-radius:15px;box-shadow:0 12px 28px -15px rgba(0,64,48,.6)}.app-id strong{display:block;font:600 17px/1.2 var(--display)}.app-id span{font-size:12px;color:var(--faint)}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;padding:16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.status-label{font-size:12px;color:var(--faint)}.status-value{font:600 13px/1.2 var(--display);margin-top:2px}.switch{width:43px;height:24px;border-radius:99px;background:var(--accent);padding:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.switch:after{content:"";display:block;width:18px;height:18px;margin-left:19px;border-radius:50%;background:white;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.meter{height:6px;margin-top:18px;border-radius:99px;background:var(--surface-2);overflow:hidden}.meter:after{content:"";display:block;width:73%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.float-chip{position:absolute;right:-4px;bottom:34px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);font:500 11px/1 var(--mono);color:var(--accent-ink);transform:rotate(3deg)}
.tackpix-hero{position:relative;width:min(100%,430px);padding:40px 24px 82px;overflow:visible;border:1px solid color-mix(in srgb,var(--line-strong) 75%,transparent);border-radius:25px;background:color-mix(in srgb,var(--surface) 93%,transparent);box-shadow:0 34px 80px -28px rgba(6,50,37,.42);backdrop-filter:blur(14px);transform:rotate(-1.2deg)}.tackpix-hero-bar{position:absolute;inset:0 0 auto;height:40px;display:flex;align-items:center;gap:7px;padding:0 15px;border-bottom:1px solid var(--line)}.tackpix-hero-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}.tackpix-hero-bar span{margin-left:auto;color:var(--faint);font:500 9px/1 var(--mono);letter-spacing:.12em}.tackpix-hero-capture{display:block;width:100%;margin-top:18px;border-radius:13px;box-shadow:0 18px 42px -24px rgba(4,35,26,.58)}.tackpix-hero-pin{position:absolute;right:-16px;bottom:20px;width:69%;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 24px 48px -24px rgba(4,35,26,.72);transform:rotate(2.2deg)}
.section{padding:92px 0}.section-tight{padding-top:40px}.section-line{border-top:1px solid var(--line)}
.section-intro{display:grid;grid-template-columns:.82fr 1.18fr;gap:50px;align-items:end;margin-bottom:36px}.kicker{font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.section-intro h2,.sec-head h2{font-size:clamp(30px,4vw,46px);line-height:1.14;margin-top:13px}.section-copy{color:var(--muted);font-size:16px;max-width:560px;justify-self:end}
.tools{display:grid;grid-template-columns:1fr;gap:20px}.tool{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:18px;min-height:280px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.tool:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--shadow)}
.tool.featured:after{content:"";position:absolute;width:190px;height:190px;right:-70px;bottom:-85px;border-radius:50%;background:var(--accent-soft)}
.tool-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;position:relative;z-index:1}.tool-title{display:flex;align-items:center;gap:14px}.product-icon{width:46px;height:46px;border-radius:13px;object-fit:cover}.product-letter{display:grid;place-items:center;flex:0 0 auto;font:700 23px/1 var(--display);color:#f3fff9;background:linear-gradient(145deg,#25bf83,#087f61);box-shadow:0 12px 26px -14px rgba(0,92,67,.8)}.cleanc-icon,.recdisk-icon{position:relative}.cleanc-icon:after,.recdisk-icon:after{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.28);border-radius:8px}.recdisk-icon{background:linear-gradient(145deg,#4a87e8,#254b9b);box-shadow:0 12px 26px -14px rgba(28,72,154,.9)}
.tool h2{font-size:23px;letter-spacing:-.035em}.tool .sub{font:500 11px/1.3 var(--mono);color:var(--faint);letter-spacing:.05em;margin-bottom:3px}.tool>p{color:var(--muted);font-size:15px;max-width:550px;flex:1;position:relative;z-index:1}
.badge{font:500 10.5px/1 var(--mono);border-radius:999px;padding:7px 10px;background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--display);font-weight:600;font-size:13px;line-height:1;padding:13px 17px;border-radius:11px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:.2s ease}.btn:after{content:"↓";font-size:14px}.btn-primary{background:var(--ink);color:var(--bg);box-shadow:0 10px 22px -13px var(--ink)}.btn-primary:hover{background:var(--accent-ink);color:#fff;transform:translateY(-1px)}.btn-ghost{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}.btn-ghost:after{content:"↗"}
.feature-shell{display:grid;grid-template-columns:300px 1fr;gap:70px;align-items:start}.sec-head{position:sticky;top:110px}.sec-head .kicker{display:block}.sec-head p{color:var(--muted);font-size:15px;margin-top:16px;max-width:280px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.card{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:22px;min-height:155px;transition:.2s ease}.card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--surface) 94%,var(--accent-soft))}.card-no{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-bottom:22px;border-radius:9px;background:var(--surface-2);color:var(--accent-ink);font:500 10px/1 var(--mono)}.card h3{font-size:15px;margin-bottom:6px}.card p{color:var(--muted);font-size:13.5px;line-height:1.55}
.note{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:var(--navy);color:#effff8;border-radius:24px;padding:40px 44px;box-shadow:var(--shadow)}.note:after{content:"";position:absolute;right:8%;top:-100px;width:230px;height:230px;border:45px solid rgba(56,215,157,.08);border-radius:50%}.note h3{font-size:clamp(22px,3vw,30px);margin-bottom:8px}.note p{color:#a9c2b8;font-size:14.5px;max-width:700px}.note-signal{position:relative;z-index:1;width:62px;height:62px;border-radius:20px;display:grid;place-items:center;background:rgba(57,218,158,.11);border:1px solid rgba(107,237,188,.2)}.note-signal:after{content:"";width:14px;height:14px;border-radius:50%;background:#48dda5;box-shadow:0 0 0 7px rgba(72,221,165,.13),0 0 28px #48dda5}
.faq-wrap{display:grid;grid-template-columns:300px 1fr;gap:70px}.faq details{border-bottom:1px solid var(--line);padding:0}.faq details:first-child{border-top:1px solid var(--line)}.faq summary{position:relative;font-family:var(--display);font-size:15px;font-weight:600;cursor:pointer;list-style:none;padding:22px 45px 22px 0}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;right:4px;top:18px;font:400 24px/1 var(--body);color:var(--faint);transition:transform .2s}.faq details[open] summary:after{transform:rotate(45deg);color:var(--accent-ink)}.faq details p{padding:0 42px 22px 0;color:var(--muted);font-size:14.5px;max-width:58em}
footer{border-top:1px solid var(--line);margin-top:30px}.foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:34px 0 18px;color:var(--faint);font-family:var(--mono);font-size:12px}.foot .brand{color:var(--ink)}.lang-links{display:flex;flex-wrap:wrap;gap:8px 18px;padding-bottom:34px;font-family:var(--mono);font-size:11px}.lang-links a{color:var(--faint);text-decoration:none}.lang-links a:hover{color:var(--accent-ink)}
@keyframes drift{to{transform:rotate(12deg) scale(1.04)}}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:22px;padding-top:60px}.hero-copy{text-align:center;margin:auto}.eyebrow{justify-content:center}.hero-proof{justify-content:center}.hero-visual{min-height:380px}.section-intro{grid-template-columns:1fr;gap:14px}.section-copy{justify-self:start}.feature-shell,.faq-wrap{grid-template-columns:1fr;gap:32px}.sec-head{position:static}.sec-head p{max-width:600px}.tools{grid-template-columns:1fr}.tool{min-height:280px}}
@media (max-width:640px){.wrap{width:min(100% - 30px,1160px)}.nav{height:64px}.brand .en,.nav-link{display:none}.nav-fb{padding:7px 10px}.lang select{max-width:112px}.hero{min-height:auto;padding:52px 0 42px}.hero-visual{min-height:330px}.orb{width:280px;height:280px}.app-window{width:calc(100% - 18px)}.tackpix-hero{width:calc(100% - 12px);padding:38px 16px 68px}.tackpix-hero-pin{right:-4px;bottom:16px}.float-chip{right:2px}.section{padding:66px 0}.section-tight{padding-top:28px}.tools,.grid{grid-template-columns:1fr}.tool{padding:23px;min-height:310px}.tool-top{align-items:flex-start}.badge{position:absolute;right:0;top:54px}.section-intro{margin-bottom:25px}.note{grid-template-columns:1fr;padding:30px 26px}.note-signal{display:none}.faq-wrap{gap:24px}h1{font-size:clamp(39px,12vw,58px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orb{animation:none}.tool,.btn,.nav-fb{transition:none}}

/* AirDeck-inspired 2026 refresh: bright atmospheric canvas, glass surfaces,
   restrained blue accents and a denser product-story rhythm. */
:root,
:root:not([data-theme="light"]){
  color-scheme:light;
  --bg:#f8fafc;--surface:rgba(255,255,255,.72);--surface-2:rgba(241,245,249,.82);
  --ink:#020617;--muted:#475569;--faint:#64748b;--line:rgba(203,213,225,.72);
  --line-strong:#cbd5e1;--accent:#2563eb;--accent-2:#8b5cf6;--accent-ink:#2563eb;
  --accent-soft:rgba(219,234,254,.72);--navy:#020617;
  --shadow-sm:0 8px 32px rgba(15,23,42,.05),inset 0 1px 1.5px rgba(255,255,255,.95);
  --shadow:0 24px 70px -34px rgba(15,23,42,.28),inset 0 1px 1.5px rgba(255,255,255,.9);
  --radius:24px;
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI","PingFang SC","Microsoft YaHei UI",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","PingFang SC","Microsoft YaHei UI",sans-serif;
  --mono:"SF Mono","Cascadia Code","JetBrains Mono",Consolas,"Microsoft YaHei UI",monospace
}
body{
  background:
    radial-gradient(90% 60% at 15% -5%,rgba(147,197,253,.4),transparent 60%) fixed,
    radial-gradient(75% 55% at 85% 15%,rgba(216,180,254,.35),transparent 60%) fixed,
    radial-gradient(70% 60% at 50% 60%,rgba(224,231,255,.4),transparent 65%) fixed,
    var(--bg);
}
body:before{height:980px;background:radial-gradient(circle at 50% 24%,rgba(255,255,255,.78),transparent 46%)}
.wrap{width:min(1180px,calc(100% - 48px))}
header{top:0;padding:12px 0;background:transparent;border:0;backdrop-filter:none}
.nav{height:58px;padding:0 11px 0 14px;border:1px solid rgba(255,255,255,.9);border-radius:18px;background:rgba(255,255,255,.68);box-shadow:var(--shadow-sm);backdrop-filter:blur(24px) saturate(145%)}
.brand{color:#0f172a}.brand-mark{border-radius:11px;background:linear-gradient(145deg,#60a5fa,#7c3aed);box-shadow:0 10px 24px -10px rgba(37,99,235,.7)}
.brand-mark:after{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.nav-link{color:#475569}.nav-link:hover{background:rgba(255,255,255,.72);color:#0f172a}
.nav-fb,.lang select{border-color:rgba(203,213,225,.75);background:rgba(255,255,255,.72);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.hero{min-height:650px;grid-template-columns:1fr 1fr;gap:78px;padding:88px 0 54px}
.hero-copy{max-width:660px}.eyebrow{display:inline-flex;margin-bottom:23px;padding:8px 12px;border:1px solid rgba(147,197,253,.7);border-radius:999px;background:rgba(255,255,255,.64);color:#2563eb;box-shadow:0 1px 2px rgba(15,23,42,.04);letter-spacing:.1em}
.eyebrow:before{width:7px;height:7px;border-radius:50%;background:#60a5fa;box-shadow:0 0 0 5px rgba(96,165,250,.15)}
h1{max-width:680px;color:#020617;font-size:clamp(48px,6vw,78px);font-weight:800;letter-spacing:-.065em}
.lede{max-width:625px;color:#475569;font-size:clamp(17px,1.8vw,20px);line-height:1.72}
.hero-actions{margin-top:29px}.hero-actions .btn{padding:15px 20px}
.hero-actions .btn-primary:after{content:"↗"}.hero-actions .btn-ghost:after{content:"↓"}
.hero-proof{margin-top:27px;gap:14px 24px}.proof-item:before{background:rgba(219,234,254,.82);color:#2563eb}
.hero-visual{min-height:455px}.orb{width:390px;height:390px;background:linear-gradient(145deg,rgba(191,219,254,.82),rgba(221,214,254,.62));filter:blur(.2px)}
.app-window,.tackpix-hero{border-color:rgba(255,255,255,.95);background:rgba(255,255,255,.65);box-shadow:0 32px 80px -22px rgba(15,23,42,.24),inset 0 1px 2px #fff;backdrop-filter:blur(24px) saturate(135%)}
.app-window{width:min(100%,430px)}.tackpix-hero{width:min(100%,470px)}
.float-chip{right:-8px;bottom:42px;border-color:rgba(255,255,255,.9);border-radius:999px;background:rgba(255,255,255,.78);color:#2563eb;backdrop-filter:blur(16px);box-shadow:0 18px 42px -20px rgba(15,23,42,.36)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;margin-bottom:76px;border:1px solid rgba(255,255,255,.92);border-radius:22px;background:rgba(255,255,255,.62);box-shadow:var(--shadow-sm);backdrop-filter:blur(22px)}
.hero-stats>div{display:grid;gap:3px;padding:24px 27px;border-right:1px solid rgba(203,213,225,.58)}.hero-stats>div:last-child{border-right:0}
.hero-stats strong{color:#0f172a;font:800 22px/1.2 var(--display);letter-spacing:-.035em}.hero-stats span{color:#64748b;font-size:12.5px}
.section{padding:104px 0}.section-tight{padding-top:72px}.section-line{border-top:0}
.section-intro{grid-template-columns:1fr auto;align-items:end;margin-bottom:34px}.kicker{color:#2563eb}.section-intro h2,.sec-head h2{color:#0f172a;font-weight:800;letter-spacing:-.045em}.section-copy{align-self:end;padding:8px 12px;border:1px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(255,255,255,.58);color:#64748b;font:500 10px/1 var(--mono);letter-spacing:.1em;box-shadow:0 1px 2px rgba(15,23,42,.04)}.section-copy strong{color:#2563eb;font-size:12px}
.tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.tool{min-height:500px;padding:26px;border-color:rgba(255,255,255,.95);border-radius:24px;background:rgba(255,255,255,.64);box-shadow:var(--shadow-sm);backdrop-filter:blur(20px)}
.tool.featured{grid-column:auto;min-height:500px;background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(239,246,255,.68))}
.tool.featured:after{width:270px;height:270px;right:-75px;bottom:-150px;background:radial-gradient(circle,rgba(147,197,253,.38),rgba(216,180,254,.12) 60%,transparent 72%)}
.tool:hover{border-color:rgba(147,197,253,.85);box-shadow:0 22px 60px -28px rgba(37,99,235,.28),inset 0 1px 1.5px #fff}
.product-icon{width:52px;height:52px;border-radius:15px;box-shadow:0 13px 30px -18px rgba(15,23,42,.5)}
.tool h2{color:#0f172a;font-size:18px;letter-spacing:-.025em}.tool .sub{font-size:10px}.tool>p{display:-webkit-box;flex:0 0 66px;max-width:none;overflow:hidden;color:#475569;font-size:13.5px;line-height:1.65;-webkit-box-orient:vertical;-webkit-line-clamp:3}.badge{padding:6px 8px;background:rgba(219,234,254,.78);color:#2563eb;font-size:9.5px}
.tool-preview{position:relative;flex:0 0 auto;overflow:hidden;width:100%;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.94);border-radius:17px;background:rgba(248,250,252,.76);box-shadow:inset 0 1px 2px rgba(15,23,42,.05),0 16px 38px -28px rgba(15,23,42,.4)}
.tool-preview-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%;transform:scale(1.015)}
.tool-preview-ui{--preview-accent:#2563eb;--preview-soft:#dbeafe;background:linear-gradient(145deg,#eef4fb,#fff)}
/* .tool-preview-mock (home card reusing the detail mock-up) is styled in mockup.css. */
.mini-window-bar{height:28px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid rgba(148,163,184,.2);background:rgba(255,255,255,.72)}.mini-window-bar>i{width:6px;height:6px;border-radius:50%;background:#cbd5e1}.mini-window-bar>span{margin-left:auto;color:#64748b;font:600 7px/1 var(--mono);letter-spacing:.12em}
.mini-window-body{display:grid;grid-template-columns:62px 1fr;height:calc(100% - 28px)}.mini-window-body>aside{display:flex;flex-direction:column;gap:9px;align-items:center;padding:13px 9px;border-right:1px solid rgba(148,163,184,.18);background:color-mix(in srgb,var(--preview-soft) 46%,rgba(255,255,255,.72))}.mini-window-body>aside img{width:27px;height:27px;border-radius:8px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(15,23,42,.12))}.mini-window-body>aside i{display:block;width:34px;height:5px;border-radius:99px;background:rgba(100,116,139,.22)}.mini-window-body>aside i:nth-of-type(1){margin-top:5px;background:color-mix(in srgb,var(--preview-accent) 30%,transparent)}
.mini-stage{min-width:0;padding:14px}.mini-stage-head{display:flex;align-items:center;justify-content:space-between;color:#1e293b;font:700 9px/1.2 var(--display)}.mini-stage-head>span{width:34px;height:8px;border-radius:99px;background:color-mix(in srgb,var(--preview-accent) 17%,transparent)}.mini-search{display:flex;align-items:center;gap:7px;height:25px;margin-top:12px;padding:0 9px;border:1px solid rgba(148,163,184,.25);border-radius:7px;background:rgba(255,255,255,.78)}.mini-search i{width:7px;height:7px;border:2px solid var(--preview-accent);border-radius:50%}.mini-search span{width:58%;height:5px;border-radius:99px;background:rgba(100,116,139,.22)}.mini-panels{display:grid;grid-template-columns:1.15fr .85fr;gap:7px;margin-top:9px}.mini-panels i{height:48px;border:1px solid rgba(148,163,184,.18);border-radius:8px;background:linear-gradient(145deg,rgba(255,255,255,.9),color-mix(in srgb,var(--preview-soft) 44%,#fff))}.mini-panels i:first-child{grid-row:1/3;height:auto}.mini-panels i:last-child{height:27px}
.preview-cleanc{--preview-accent:#0ea5a4;--preview-soft:#ccfbf1}.preview-recdisk{--preview-accent:#2563eb;--preview-soft:#dbeafe}.preview-seekdex{--preview-accent:#4f46e5;--preview-soft:#e0e7ff}.preview-textrace{--preview-accent:#0284c7;--preview-soft:#e0f2fe}.preview-keep-online{--preview-accent:#8b5cf6;--preview-soft:#ede9fe}
.tool>.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%;margin-top:auto;padding-top:14px;border-top:1px solid rgba(203,213,225,.52)}.tool>.actions .btn{min-width:0;padding:12px 10px;font-size:11.5px;white-space:nowrap}.tool>.actions .btn-primary{order:2;background:rgba(255,255,255,.66);color:#334155;border-color:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(15,23,42,.05)}.tool>.actions .btn-primary:hover{background:#fff;color:#2563eb}.tool>.actions .btn-ghost{order:1;background:#0f172a;color:#fff;border-color:#0f172a}.tool>.actions .btn-primary:after{content:"↓"}.tool>.actions .btn-ghost:after{content:"→"}
.btn{border-radius:12px}.btn-primary{background:#0f172a;color:#fff;box-shadow:0 12px 24px -15px rgba(15,23,42,.8)}.btn-primary:hover{background:#2563eb}
.btn-ghost{border-color:rgba(203,213,225,.9);background:rgba(255,255,255,.64)}
.note{padding:52px 56px;border-radius:28px;background:radial-gradient(circle at 88% 20%,rgba(96,165,250,.23),transparent 30%),linear-gradient(135deg,#020617,#0f172a);box-shadow:0 30px 80px -35px rgba(2,6,23,.8)}
.note:after{right:5%;top:-140px;width:310px;height:310px;border-color:rgba(147,197,253,.08)}
.note .kicker{display:block;margin-bottom:14px;color:#93c5fd}.note h3{font-size:clamp(28px,4vw,42px);font-weight:800}.note p{max-width:760px;color:#cbd5e1;font-size:15px}
.note-actions{margin-top:25px}.btn-light{background:#fff;color:#0f172a}.btn-light:after{content:"↓"}.btn-light:hover{background:#dbeafe;color:#1d4ed8;transform:translateY(-1px)}
.btn-dark-ghost{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff}.btn-dark-ghost:after{content:"↗"}.btn-dark-ghost:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.13)}
.note-signal{background:rgba(96,165,250,.11);border-color:rgba(147,197,253,.24)}.note-signal:after{background:#60a5fa;box-shadow:0 0 0 7px rgba(96,165,250,.14),0 0 28px #60a5fa}
.faq details{border-color:rgba(203,213,225,.78)}.faq summary{color:#0f172a}.faq details[open] summary:after{color:#2563eb}
footer{border-top-color:rgba(203,213,225,.65)}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:60px}.hero-stats{grid-template-columns:1fr 1fr}.hero-stats>div:nth-child(2){border-right:0}.hero-stats>div:nth-child(-n+2){border-bottom:1px solid rgba(203,213,225,.58)}.tools{grid-template-columns:repeat(2,minmax(0,1fr))}.tool.featured{grid-column:auto}}
@media(max-width:640px){header{padding:8px 0}.nav{height:54px;border-radius:15px}.hero{padding-top:54px}.hero-actions{justify-content:center}.hero-stats{margin-bottom:38px}.hero-stats>div{padding:18px}.hero-stats strong{font-size:19px}.orb{width:280px;height:280px}.section{padding:72px 0}.section-tight{padding-top:46px}.section-intro{grid-template-columns:1fr}.section-copy{justify-self:start}.tools{grid-template-columns:1fr}.tool{min-height:500px}.note{padding:34px 26px}}