:root {
  --accent: #1457ff;
  --accent-deep: color-mix(in srgb, var(--accent), #172033 32%);
  --accent-soft: color-mix(in srgb, var(--accent), white 74%);
  --accent-wash: color-mix(in srgb, var(--accent), white 91%);
  --ink: #172033;
  --muted: #617080;
  --line: rgba(23, 32, 51, 0.12);
  --paper: color-mix(in srgb, var(--accent), white 96%);
  --card: rgba(255, 255, 255, 0.86);
  --container: min(1200px, calc(100% - 2.5rem));
  --header-height: 68px;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; min-width: 320px; overflow-x: hidden; line-height: 1.65; background: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: var(--container); margin-inline: auto; }
main { overflow: clip; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--accent), rgba(255,255,255,.88) 94%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent), transparent 84%);
  backdrop-filter: blur(18px);
}
.header-inner { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 750; }
.brand-mark { display: block; width: 38px; height: 38px; border-radius: 12px; object-fit: cover; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent), transparent 66%); }
.brand small { display: block; color: var(--muted); font-size: 0.62rem; letter-spacing: 0.14em; }
.nav { display: flex; gap: 1.4rem; font-size: 0.84rem; color: var(--muted); }
.nav a:hover { color: var(--accent); }
.back-link { padding: 0.55rem 0.9rem; border: 1px solid color-mix(in srgb, var(--accent), transparent 72%); border-radius: 999px; color: var(--accent-deep); background: color-mix(in srgb, var(--accent), white 93%); font-size: 0.78rem; }
.back-link:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent), white 87%); }

.hero {
  display: grid;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  padding: clamp(1.75rem, 4vh, 3.25rem) 0;
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.eyebrow, .section-kicker { font: 0.7rem/1.4 "Cascadia Code", monospace; letter-spacing: 0.12em; color: var(--accent-deep); text-transform: uppercase; }
.hero h1 { margin: 0.8rem 0; color: var(--hero-ink); font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -0.065em; }
.hero-title-line { display: block; }
[data-app="snipkap"] .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(2rem, 4vw, 4rem); }
[data-app="snipkap"] .hero h1.has-title-lines { margin: .9rem 0 1.25rem; font-size: clamp(3rem, 5.35vw, 5.1rem); line-height: .98; }
.hero-lead { max-width: 42rem; color: color-mix(in srgb, var(--hero-ink), transparent 22%); font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.85; }
[data-app="aiops"] .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); gap: clamp(2rem, 4.5vw, 4.75rem); }
[data-app="aiops"] .hero h1.has-title-lines { font-family: "Cascadia Code", "Microsoft YaHei", monospace; font-size: clamp(2.8rem, 5.3vw, 5rem); letter-spacing: -.055em; }
[data-app="bsm"] .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr); gap: clamp(2rem, 4vw, 4.25rem); }
[data-app="bsm"] .hero h1.has-title-lines { font-size: clamp(3rem, 5.15vw, 4.85rem); line-height: 1.06; letter-spacing: -.055em; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 46px; padding: 0 1.25rem; border-radius: 999px; font-weight: 650; font-size: 0.88rem; }
.button-primary { color: var(--hero-button-text); background: var(--hero-ink); box-shadow: 0 14px 34px rgba(9,22,45,.24); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(9,22,45,.32); }
.button-secondary { border: 1px solid color-mix(in srgb, var(--hero-ink), transparent 54%); color: var(--hero-ink); background: color-mix(in srgb, var(--hero-ink), transparent 90%); }
.button-secondary:hover { border-color: var(--hero-ink); background: color-mix(in srgb, var(--hero-ink), transparent 82%); }
.hero-download { margin-top: 1.7rem; }
.hero-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.download-button { min-width: 13rem; }
.download-button[aria-disabled="true"] { pointer-events: none; opacity: .55; }
.platform-picker { display: flex; align-items: center; gap: .75rem; margin-top: .8rem; color: color-mix(in srgb, var(--hero-ink), transparent 24%); font-size: .68rem; }
.platform-picker > div { display: flex; gap: .35rem; flex-wrap: wrap; }
.platform-picker button { padding: .25rem .55rem; border: 1px solid color-mix(in srgb, var(--hero-ink), transparent 66%); border-radius: 999px; color: var(--hero-ink); background: color-mix(in srgb, var(--hero-ink), transparent 90%); cursor: pointer; font-size: .68rem; }
.platform-picker button[aria-pressed="true"] { color: var(--hero-button-text); border-color: var(--hero-ink); background: var(--hero-ink); }

.showcase-stage { position: relative; min-height: clamp(320px, 54vh, 460px); min-height: clamp(320px, 54svh, 460px); display: grid; align-items: stretch; overflow: visible; }
.showcase-stage figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: center; width: 100%; min-width: 0; margin: 0; }
.showcase-stage figcaption { margin-top: 1.1rem; text-align: center; color: color-mix(in srgb, var(--hero-ink), transparent 24%); font-size: .68rem; }
.hero-visual { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; isolation: isolate; }
.hero-visual .showcase-stage { z-index: 2; }
.hero-ornament { position: absolute; z-index: 1; pointer-events: none; }
.hero-value-strip {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: .45rem;
  min-width: 0;
  margin-top: .65rem;
  padding-inline: .75rem;
  flex-wrap: wrap;
}

/* nanorec 独立官网：明亮产品叙事、深色编辑器舞台与克制定价。 */
body[data-app="nanorec"] { --nr-ink:#15151d; --nr-muted:#696a78; --nr-line:#e7e7ee; --nr-blue:#4c9bea; --nr-violet:#6c7cff; color:var(--nr-ink); background:#fbfbfd; font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
body[data-app="nanorec"] .site-header { border-bottom-color:rgba(22,22,31,.07); background:rgba(251,251,253,.84); backdrop-filter:blur(24px) saturate(160%); }
body[data-app="nanorec"] .header-inner { min-height:72px; }
body[data-app="nanorec"] .brand-mark { width:40px; height:40px; border-radius:12px; box-shadow:0 9px 26px rgba(76,85,160,.2); }
body[data-app="nanorec"] .brand { font-size:1rem; letter-spacing:-.02em; }
body[data-app="nanorec"] .brand small { color:#8d8e99; font-size:.5rem; letter-spacing:.13em; }
body[data-app="nanorec"] .nav { color:#555661; font-size:.79rem; font-weight:650; }
.nanorec-header-cta { border:0; color:#fff; background:#17171f; }
.nanorec-header-cta:hover { color:#fff; background:var(--nr-violet); }
.nanorec-home { overflow:hidden; }
.nanorec-hero { position:relative; padding:clamp(5rem,9vw,8rem) 0 clamp(5rem,9vw,8.5rem); background:radial-gradient(circle at 50% 31%,rgba(108,124,255,.14),transparent 30%),linear-gradient(180deg,#fff 0%,#fbfbfd 58%,#f0f1f8 100%); }
.nanorec-hero::before { position:absolute; inset:0; opacity:.18; pointer-events:none; content:""; background-image:radial-gradient(#7f86ad .6px,transparent .6px); background-size:24px 24px; mask-image:linear-gradient(to bottom,#000,transparent 68%); }
.nanorec-hero-copy { position:relative; z-index:2; max-width:900px; text-align:center; }
.nanorec-pill { display:inline-flex; align-items:center; gap:.55rem; margin:0; padding:.45rem .75rem; border:1px solid #e2e3eb; border-radius:999px; color:#696b78; background:rgba(255,255,255,.78); font-size:.58rem; font-weight:750; letter-spacing:.12em; }
.nanorec-pill i { width:7px; height:7px; border-radius:50%; background:#ff3b30; box-shadow:0 0 0 5px rgba(255,59,48,.1); }
.nanorec-hero h1 { margin:1.65rem 0 1.2rem; font-size:clamp(4rem,8.3vw,8.2rem); font-weight:760; line-height:.91; letter-spacing:-.075em; }
.nanorec-hero h1 span { color:transparent; background:linear-gradient(100deg,#3e77d9,#6c7cff 52%,#9259e8); background-clip:text; -webkit-background-clip:text; }
.nanorec-hero-copy > p:not(.nanorec-pill) { max-width:690px; margin-inline:auto; color:var(--nr-muted); font-size:clamp(1rem,1.55vw,1.28rem); line-height:1.8; }
.nanorec-download { margin-top:2rem; }
.nanorec-download .hero-actions { justify-content:center; }
.nanorec-download .button { min-width:220px; }
.nanorec-download .button-primary { border-color:#17171f; color:#fff; background:#17171f; box-shadow:0 16px 45px rgba(22,22,31,.18); }
.nanorec-download .platform-picker { justify-content:center; color:#878895; }
.nanorec-stage { position:relative; z-index:1; width:min(1120px,94vw); margin:4.5rem auto 0; perspective:1500px; }
.nanorec-window { overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:24px; color:#c9cad7; background:#17171f; box-shadow:0 52px 110px rgba(40,43,82,.25),0 0 0 8px rgba(255,255,255,.58); transform:rotateX(2.2deg); }
.nanorec-window > header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:54px; padding:0 18px; border-bottom:1px solid #2b2b36; background:#1c1c25; font-size:.68rem; }
.window-dots { display:flex; gap:7px; }.window-dots i { width:9px; height:9px; border-radius:50%; background:#ff5f57; }.window-dots i:nth-child(2){background:#febc2e}.window-dots i:nth-child(3){background:#28c840}
.export-chip { justify-self:end; padding:.45rem .72rem; border-radius:8px; color:#fff; background:var(--nr-violet); font-size:.58rem; font-weight:700; }
.nanorec-workspace { display:grid; grid-template-columns:56px 1fr 180px; height:350px; }
.nanorec-workspace aside { display:grid; align-content:start; gap:16px; justify-items:center; padding-top:22px; border-right:1px solid #2a2a35; color:#898a98; }
.nanorec-workspace aside i { font-style:normal; font-size:.74rem; }
.nanorec-canvas { display:grid; place-items:center; padding:28px; background:#111118; }
.canvas-frame { position:relative; width:min(680px,92%); aspect-ratio:16/9; overflow:hidden; border-radius:11px; background:radial-gradient(circle at 68% 35%,rgba(255,255,255,.7),transparent 18%),linear-gradient(145deg,#d9e2ff,#8da7ff 38%,#6c60d7 67%,#312957); box-shadow:0 16px 35px rgba(0,0,0,.34); }
.canvas-frame::before,.canvas-frame::after { position:absolute; width:55%; height:60%; border-radius:50%; content:""; filter:blur(1px); }.canvas-frame::before{right:-8%;bottom:-28%;background:rgba(255,255,255,.32);transform:rotate(-18deg)}.canvas-frame::after{left:-10%;bottom:-34%;background:rgba(27,25,72,.32);transform:rotate(13deg)}
.focus-ring { position:absolute; top:29%; left:48%; width:86px; height:86px; border:3px solid rgba(255,255,255,.95); border-radius:50%; box-shadow:0 0 0 12px rgba(255,255,255,.15); }
.cursor-arrow { position:absolute; top:48%; left:45%; z-index:2; color:#fff; font-size:2rem; filter:drop-shadow(0 3px 2px rgba(0,0,0,.6)); transform:rotate(-45deg); }
.camera-bubble { position:absolute; right:5%; bottom:7%; z-index:2; width:64px; height:64px; border:3px solid rgba(255,255,255,.86); border-radius:50%; background:linear-gradient(145deg,#586178,#252938); }
.nanorec-inspector { padding:18px 14px; border-left:1px solid #2a2a35; background:#1b1b24; }.nanorec-inspector span{font-size:.63rem}.nanorec-inspector i{display:block;height:6px;margin-top:24px;border-radius:10px;background:linear-gradient(90deg,var(--nr-violet) 55%,#343542 55%)}.curve-line{height:90px;margin-top:30px;border-bottom:1px solid #40414e;background:linear-gradient(150deg,transparent 48%,var(--nr-violet) 49% 51%,transparent 52%)}
.nanorec-timeline { position:relative; height:190px; padding:22px 18px 16px 74px; border-top:1px solid #2c2c37; background:#1b1b24; }.timeline-ruler{height:12px;border-bottom:1px solid #353642;background:repeating-linear-gradient(90deg,#4a4b59 0 1px,transparent 1px 42px)}.track{height:26px;margin-top:10px;border-radius:6px}.zoom-track{position:relative;background:linear-gradient(90deg,#5042a8,#725eff)}.zoom-track i{position:absolute;top:8px;width:8px;height:8px;background:#fff;transform:rotate(45deg)}.zoom-track i:nth-child(1){left:8%}.zoom-track i:nth-child(2){left:36%}.zoom-track i:nth-child(3){left:68%}.zoom-track i:nth-child(4){left:91%}.video-track{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;overflow:hidden;background:#3a3b48}.video-track span{background:linear-gradient(145deg,#899eff,#413b83)}.audio-track{background:repeating-linear-gradient(90deg,#3fc27f 0 2px,transparent 2px 6px);mask-image:linear-gradient(180deg,transparent 15%,#000 45% 55%,transparent 85%)}.playhead{position:absolute;top:22px;bottom:14px;left:61%;width:2px;background:#4d90ff}.playhead::before{position:absolute;top:-1px;left:-5px;width:12px;height:9px;clip-path:polygon(0 0,100% 0,50% 100%);content:"";background:#4d90ff}
.nanorec-float { position:absolute; z-index:3; padding:.72rem .95rem; border:1px solid rgba(255,255,255,.82); border-radius:14px; color:#33343f; background:rgba(255,255,255,.9); box-shadow:0 16px 38px rgba(38,40,76,.16); backdrop-filter:blur(12px); font-size:.68rem; font-weight:720; }.float-auto{top:23%;left:-3%}.float-cursor{top:8%;right:-3%}.float-local{right:5%;bottom:-4%}
.nanorec-signal { color:#d8d9e5; background:#17171f; }.nanorec-signal .container{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.3rem;font-size:.67rem}.nanorec-signal div div{display:flex;gap:2rem;color:#8f91a2}.nanorec-signal b{font-weight:650}
.nanorec-story { padding:clamp(6rem,11vw,11rem) 0; background:#fff; }.nanorec-story-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(4rem,9vw,9rem);align-items:center}.nanorec-story-grid.reverse{grid-template-columns:1.2fr .8fr}.nanorec-story-grid > div > p,.nanorec-section-head > p{margin:0 0 1rem;color:var(--nr-violet);font-size:.6rem;font-weight:800;letter-spacing:.16em}.nanorec-story h2,.nanorec-section-head h2{margin:0;font-size:clamp(3rem,6vw,5.8rem);line-height:.98;letter-spacing:-.06em}.nanorec-story-grid > div > span,.nanorec-section-head > span{display:block;margin-top:1.5rem;color:var(--nr-muted);font-size:.94rem;line-height:1.9}
.focus-demo { position:relative; min-height:480px; overflow:hidden; border-radius:40px; background:radial-gradient(circle at 60% 35%,rgba(255,255,255,.82),transparent 19%),linear-gradient(145deg,#dbe6ff,#7f9bfb 45%,#493e97);box-shadow:0 35px 80px rgba(71,84,160,.23)}.demo-screen{position:absolute;inset:13%;border:1px solid rgba(255,255,255,.55);border-radius:22px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 8px rgba(255,255,255,.06)}.demo-cursor{position:absolute;top:46%;left:44%;z-index:2;color:#fff;font-size:3rem;font-style:normal;filter:drop-shadow(0 4px 3px rgba(0,0,0,.45));transform:rotate(-45deg)}.demo-ring{position:absolute;top:35%;left:39%;width:130px;height:130px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 18px rgba(255,255,255,.16)}.focus-demo small{position:absolute;right:7%;bottom:7%;padding:.6rem .8rem;border-radius:10px;color:#fff;background:rgba(20,20,31,.7);font-size:.58rem;letter-spacing:.1em}
.story-dark{color:#fff;background:#16161f}.story-dark .nanorec-story-grid > div > span{color:#a7a8b8}.cursor-demo{position:relative;min-height:450px;border:1px solid #30303d;border-radius:40px;background:radial-gradient(circle at 60% 42%,rgba(108,124,255,.2),transparent 28%),#1c1c25}.cursor-path{position:absolute;top:52%;left:14%;width:68%;height:2px;background:linear-gradient(90deg,transparent,var(--nr-violet),#67b9ff,transparent);transform:rotate(-13deg)}.cursor-path::before{position:absolute;inset:-38px 0;content:"";background:radial-gradient(circle,#6c7cff 0 3px,transparent 4px);background-size:74px 74px}.cursor-demo i{position:absolute;top:34%;left:62%;color:#fff;font-size:3.5rem;font-style:normal;filter:drop-shadow(0 5px 3px #000);transform:rotate(-45deg)}.cursor-demo b{position:absolute;left:8%;bottom:8%;padding:.65rem .8rem;border-radius:10px;color:#cacbd8;background:#262632;font-size:.65rem}
.story-local{background:#f3f4f8}.nanorec-story ul{display:grid;gap:.75rem;margin-top:1.8rem;padding:0;list-style:none;color:#626471;font-size:.78rem}.nanorec-story li::before{margin-right:.6rem;color:var(--nr-violet);content:"✓"}.local-orbit{position:relative;min-height:500px}.local-orbit::before,.local-orbit::after{position:absolute;top:50%;left:50%;border:1px solid #cfd1df;border-radius:50%;content:"";transform:translate(-50%,-50%)}.local-orbit::before{width:420px;height:420px}.local-orbit::after{width:300px;height:300px}.local-orbit > span{position:absolute;top:50%;left:50%;z-index:2;display:grid;width:190px;height:190px;place-items:center;padding:25px;border-radius:50%;background:#fff;box-shadow:0 25px 70px rgba(66,70,110,.18);transform:translate(-50%,-50%)}.local-orbit img{width:62px;height:62px;border-radius:17px}.local-orbit b{font-size:.9rem}.local-orbit small{color:#9495a2;font-size:.52rem;letter-spacing:.12em}.local-orbit > i{position:absolute;z-index:3;display:grid;width:78px;height:78px;place-items:center;border:1px solid #d9dbe5;border-radius:22px;color:var(--nr-violet);background:#fff;box-shadow:0 14px 30px rgba(65,70,112,.12);font-size:.55rem;font-style:normal;font-weight:800;letter-spacing:.08em}.orbit-one{top:8%;left:12%}.orbit-two{top:22%;right:2%}.orbit-three{right:18%;bottom:3%}
.nanorec-pricing{padding:clamp(6rem,11vw,11rem) 0;background:#fff}.nanorec-section-head{max-width:820px}.nanorec-section-head > span{max-width:650px}.nanorec-price-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:1.4rem;margin-top:3.5rem}.lifetime-card{padding:clamp(2rem,4vw,3.5rem);border-radius:34px;color:#fff;background:radial-gradient(circle at 85% 10%,rgba(108,124,255,.5),transparent 28%),#17171f;box-shadow:0 26px 70px rgba(24,24,34,.18)}.lifetime-card small{color:#aeb0bf;font-size:.62rem;font-weight:700;letter-spacing:.12em}.lifetime-card div{display:flex;align-items:end;gap:1rem;margin:1rem 0}.lifetime-card div b{font-size:clamp(4.3rem,7vw,7rem);line-height:1;letter-spacing:-.07em}.lifetime-card div span{padding-bottom:.8rem;color:#b7b8c7;font-size:.72rem}.lifetime-card p{max-width:480px;color:#b7b8c7;line-height:1.8}.lifetime-card ul{display:flex;flex-wrap:wrap;gap:.55rem;padding:0;list-style:none}.lifetime-card li{padding:.45rem .65rem;border:1px solid #373744;border-radius:999px;color:#d7d8e3;font-size:.62rem}.lifetime-card .button{margin-top:1.2rem;color:#17171f;background:#fff}.duration-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.duration-grid article{display:grid;align-content:space-between;min-height:145px;padding:1.45rem;border:1px solid var(--nr-line);border-radius:25px;background:#fafafd}.duration-grid article:last-child{grid-column:1/-1}.duration-grid span{color:#686a78;font-size:.72rem}.duration-grid b{font-size:2.2rem;letter-spacing:-.05em}.duration-grid small{color:#9a9ba7;font-size:.58rem}
.nanorec-faq{padding:clamp(6rem,10vw,10rem) 0;background:#f2f3f7}.nanorec-faq .faq{max-width:920px;margin:3rem auto 0}.nanorec-faq details{border-color:#e2e3ea;background:#fff}.nanorec-faq summary{font-size:.92rem}.nanorec-home .section-privacy{background:#17171f;color:#fff}.nanorec-home .privacy p,.nanorec-home .privacy a{color:#afb1c0}
@media(max-width:900px){body[data-app="nanorec"] .nav{display:none}.nanorec-workspace{grid-template-columns:44px 1fr}.nanorec-inspector{display:none}.nanorec-story-grid,.nanorec-story-grid.reverse,.nanorec-price-layout{grid-template-columns:1fr}.nanorec-story-grid.reverse>div:first-child{order:2}.nanorec-signal .container{align-items:flex-start;flex-direction:column}.nanorec-signal div div{flex-wrap:wrap}.local-orbit{min-height:430px}}
@media(max-width:600px){body[data-app="nanorec"] .container{width:calc(100% - 1.3rem)}.nanorec-header-cta{padding:.55rem .7rem;font-size:.62rem}.nanorec-hero{padding-top:3.5rem}.nanorec-hero h1{font-size:clamp(3.4rem,17vw,5rem)}.nanorec-download .hero-actions{display:grid}.nanorec-download .button{width:100%}.nanorec-stage{margin-top:3rem}.nanorec-window{border-radius:15px}.nanorec-workspace{height:210px}.nanorec-canvas{padding:12px}.nanorec-timeline{height:128px;padding-left:48px}.nanorec-float{display:none}.nanorec-story{padding:5.5rem 0}.nanorec-story h2,.nanorec-section-head h2{font-size:clamp(2.8rem,14vw,4rem)}.focus-demo,.cursor-demo{min-height:320px;border-radius:26px}.local-orbit{min-height:360px;transform:scale(.82)}.duration-grid{grid-template-columns:1fr}.duration-grid article:last-child{grid-column:auto}.lifetime-card div{align-items:flex-start;flex-direction:column}.lifetime-card div span{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.nanorec-window{transform:none}.nanorec-home *{scroll-behavior:auto!important}}
.hero-value-strip span {
  padding: .42rem .72rem;
  border: 1px solid color-mix(in srgb, var(--hero-ink), transparent 72%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--hero-ink), transparent 12%);
  background: color-mix(in srgb, var(--accent), transparent 72%);
  box-shadow: 0 10px 24px rgba(6,18,38,.12);
  backdrop-filter: blur(14px);
  font: .62rem/1.2 "Cascadia Code", "Microsoft YaHei", monospace;
}

.ops-console {
  inset: 6% 0 14%;
  overflow: hidden;
  border: 1px solid rgba(113,211,255,.28);
  border-radius: 1.4rem;
  background: linear-gradient(150deg, rgba(3,18,32,.7), rgba(10,43,67,.26));
  box-shadow: 0 28px 70px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.03);
}
.ops-console::after { content: ""; position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(113,211,255,.14) 6px); }
.ops-console-bar { display: flex; align-items: center; gap: .35rem; min-height: 38px; padding: 0 .8rem; border-bottom: 1px solid rgba(113,211,255,.16); color: #9bdcff; font: .58rem "Cascadia Code", monospace; letter-spacing: .12em; }
.ops-console-bar i { width: 7px; height: 7px; border-radius: 50%; background: #2b7aa5; }
.ops-console-bar i:first-child { background: #49d39b; }
.ops-console-bar span { margin-left: auto; }
.ops-console code { position: absolute; top: 25%; left: 6%; color: #bcecff; font: .7rem/1.5 "Cascadia Code", monospace; }
.ops-console code b { color: #50e3a4; }
.ops-node-line { position: absolute; right: 5%; bottom: 8%; left: 5%; display: flex; align-items: center; justify-content: center; gap: .5rem; color: #bcecff; font: .56rem "Cascadia Code", monospace; letter-spacing: .08em; }
.ops-node-line span { padding: .28rem .46rem; border: 1px solid rgba(113,211,255,.2); border-radius: .35rem; background: rgba(5,25,41,.76); }
.ops-node-line i { width: clamp(.4rem, 2vw, 1.5rem); height: 1px; background: linear-gradient(90deg, rgba(113,211,255,.15), #50e3a4); }

.production-flow { inset: 4% -2% 8%; border: 1px solid rgba(8,101,225,.18); border-radius: 2rem; background: rgba(255,255,255,.48); box-shadow: 0 28px 70px rgba(8,64,130,.13); backdrop-filter: blur(8px); }
.flow-label { position: absolute; top: 1.05rem; left: 1.2rem; color: #4c6788; font: .58rem "Cascadia Code", monospace; letter-spacing: .12em; }
.flow-track { position: absolute; top: 15%; right: 6%; display: flex; align-items: center; gap: .45rem; color: #173a64; font-size: .64rem; }
.flow-track b { padding: .38rem .58rem; border: 1px solid rgba(8,101,225,.18); border-radius: .55rem; background: rgba(255,255,255,.86); box-shadow: 0 8px 18px rgba(8,64,130,.08); }
.flow-track i { color: #0865e1; font-style: normal; }
.flow-ledger { position: absolute; right: 5%; bottom: 7%; display: grid; min-width: 8.6rem; padding: .68rem .8rem; border-left: 3px solid #0865e1; border-radius: .55rem; color: #4c6788; background: rgba(255,255,255,.88); box-shadow: 0 10px 24px rgba(8,64,130,.1); font-size: .58rem; }
.flow-ledger strong { color: #173a64; font-size: .72rem; }

.capture-canvas { inset: 2% 1% 8%; border: 1px dashed rgba(255,255,255,.52); background: radial-gradient(circle at 76% 24%, rgba(129,220,255,.3), transparent 24%); }
.capture-canvas::before { content: ""; position: absolute; top: 50%; left: 50%; width: 58%; height: 58%; border: 1px solid rgba(255,255,255,.18); transform: translate(-50%,-50%); }
.capture-corner { position: absolute; width: 28px; height: 28px; border-color: #fff; border-style: solid; }
.corner-tl { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.corner-tr { top: -2px; right: -2px; border-width: 3px 3px 0 0; }
.corner-bl { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; }
.corner-br { right: -2px; bottom: -2px; border-width: 0 3px 3px 0; }
.capture-label, .capture-size { position: absolute; color: rgba(255,255,255,.88); font: .58rem "Cascadia Code", monospace; letter-spacing: .1em; }
.capture-label { top: .8rem; left: .9rem; }
.capture-size { right: .9rem; bottom: .7rem; }
.capture-cursor { position: absolute; top: 25%; right: 15%; width: 16px; height: 16px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.hero-visual-ops-console,
.hero-visual-production-flow,
.hero-visual-capture-canvas {
  padding: clamp(.8rem, 1.7vw, 1.2rem);
}
.hero-visual-ops-console .hero-ornament,
.hero-visual-production-flow .hero-ornament,
.hero-visual-capture-canvas .hero-ornament {
  inset: 0;
}
.device-model {
  --model-rx: -4deg;
  --model-ry: -10deg;
  --model-scale: 1;
  position: relative;
  width: 100%;
  padding: 1rem 0 2.75rem;
  perspective: 1200px;
  perspective-origin: 50% 44%;
  touch-action: pan-y;
  outline: none;
}
.device-model:focus-visible { border-radius: 1.25rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 54%); }
.device-model-orbit {
  width: 100%;
  transform: rotateX(var(--model-rx)) rotateY(var(--model-ry)) scale(var(--model-scale));
  transform-origin: 50% 52%;
  transform-style: preserve-3d;
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
  cursor: grab;
  user-select: none;
}
.device-model.is-interacting .device-model-orbit {
  transition: none;
  will-change: transform;
  cursor: grabbing;
}
.model-toolbar {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .3rem;
  min-height: 34px;
  padding: .25rem;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 76%);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 26px rgba(23,32,51,.1);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}
.model-hint { padding: 0 .55rem; color: var(--accent-deep); font: .62rem "Cascadia Code", monospace; white-space: nowrap; }
.model-toolbar button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent), white 91%);
  cursor: pointer;
  line-height: 1;
}
.model-toolbar button:hover { color: #fff; background: var(--accent-deep); }
.model-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.device-screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--accent-wash); }
.device-screen > img { width: 100%; height: 100%; object-fit: cover; }
.device-laptop {
  position: relative;
  width: min(100%, 580px);
  margin-inline: auto;
  padding-bottom: 2.5rem;
  filter: drop-shadow(0 30px 26px rgba(8,18,34,.28));
  transform-style: preserve-3d;
}
.laptop-lid {
  position: relative;
  z-index: 5;
  width: 86%;
  aspect-ratio: 16 / 10;
  margin: auto;
  padding: 15px 15px 20px;
  border: 1px solid #4b5565;
  border-radius: 1.05rem 1.05rem .5rem .5rem;
  background: linear-gradient(145deg, #313a48, #111722 72%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.16),
    inset -8px -10px 18px rgba(0,0,0,.24),
    0 8px 0 #080d15;
  transform: translateZ(22px);
  transform-style: preserve-3d;
}
.laptop-lid::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(145deg, #7a8492, #202936 36%, #0b111a);
  transform: translateZ(-16px);
  box-shadow: 10px 0 18px rgba(5,12,22,.32);
}
.laptop-lid::after {
  content: "";
  position: absolute;
  top: 4%;
  right: -10px;
  width: 10px;
  height: 92%;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, #111824, #657080);
  transform: rotateY(90deg);
  transform-origin: left center;
}
.laptop-camera { position: absolute; top: 5px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #748296; box-shadow: 0 0 0 1px #060a10, 0 0 5px rgba(88,156,255,.5); transform: translateZ(3px); }
.laptop-lid .device-screen { border: 1px solid #05080d; border-radius: .3rem; box-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 0 18px rgba(0,0,0,.18); transform: translateZ(3px); backface-visibility: hidden; }
.laptop-hinge {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  width: 64%;
  height: 12px;
  margin: -4px auto 0;
  padding-inline: 8%;
  border-radius: 3px 3px 7px 7px;
  background: linear-gradient(180deg, #727c89, #242c38 54%, #0a1019);
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 4px 7px rgba(0,0,0,.4);
  transform: translateZ(17px);
}
.laptop-hinge i { width: 27%; height: 7px; border-radius: 999px; background: linear-gradient(90deg, #111824, #8c96a2 48%, #151c27); }
.laptop-deck {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 118px;
  margin: -2px auto -52px;
  overflow: hidden;
  border: 1px solid #929aa4;
  border-radius: .35rem .35rem 1.1rem 1.1rem;
  background: linear-gradient(150deg, #f5f7f8 0%, #bdc4cc 50%, #747e89 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.88), inset 0 -10px 16px rgba(69,78,89,.28);
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  transform: rotateX(64deg) translateZ(13px);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.laptop-deck::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,.44), transparent 28%, rgba(37,48,61,.16) 76%, rgba(255,255,255,.25));
}
.laptop-keyboard {
  position: absolute;
  top: 11%;
  left: 17%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  width: 66%;
  height: 45%;
  padding: 4px;
  border-radius: 5px;
  background: rgba(46,55,67,.35);
}
.laptop-keyboard i {
  min-width: 0;
  border: 1px solid rgba(6,11,18,.68);
  border-radius: 2px;
  background: linear-gradient(145deg, #424c59, #151c26);
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}
.laptop-trackpad {
  position: absolute;
  left: 37%;
  bottom: 6%;
  width: 26%;
  height: 28%;
  border: 1px solid rgba(78,87,98,.42);
  border-radius: 4px;
  background: rgba(221,225,229,.38);
  box-shadow: inset 0 1px rgba(255,255,255,.55);
}
.laptop-front-edge {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 17px;
  margin: -1px auto 0;
  border-radius: 2px 2px 50% 50%;
  background: linear-gradient(180deg, #aeb5bd 0%, #707985 48%, #303a46 100%);
  box-shadow: inset 0 1px #f5f7f8, 0 6px 8px rgba(6,13,22,.28);
  transform: translateZ(-1px);
}
.laptop-front-edge::after {
  content: "";
  position: absolute;
  inset: 8px 2.5% -7px;
  z-index: -1;
  border-radius: 0 0 50% 50%;
  background: #252e39;
  transform: translateZ(-11px);
}
.laptop-front-edge i { position: absolute; top: 0; left: calc(50% - 38px); width: 76px; height: 6px; border-radius: 0 0 9px 9px; background: #7b8490; box-shadow: inset 0 1px rgba(255,255,255,.35); }
.laptop-ground-shadow { position: absolute; z-index: -1; left: 6%; right: 6%; bottom: 10px; height: 28px; border-radius: 50%; background: rgba(4,12,24,.32); filter: blur(16px); transform: translateZ(-30px); }
.device-model-webgl .device-model-orbit { transform: none; }
.device-model-webgl .device-model-orbit { cursor: grab; }
.device-model-webgl.is-interacting .device-model-orbit { cursor: grabbing; }
.device-laptop {
  width: min(100%, 620px);
  height: clamp(320px, 44svh, 410px);
  padding: 0;
  filter: none;
}
.device-laptop canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}
.webgl-fallback { display: none; place-items: center; height: 100%; color: var(--hero-ink); font-size: .78rem; }
.device-laptop.webgl-unavailable canvas { display: none; }
.device-laptop.webgl-unavailable .webgl-fallback { display: grid; }
.device-phone { position: relative; width: min(220px, 62%); aspect-ratio: 9 / 19; margin: auto; padding: 9px; border: 1px solid #556171; border-radius: 2.2rem; background: linear-gradient(145deg, #2e3847, #101721 70%); box-shadow: 0 24px 48px rgba(8,18,34,.34), inset 1px 1px rgba(255,255,255,.16); transform: translateZ(12px); transform-style: preserve-3d; }
.device-phone::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 2rem; background: linear-gradient(145deg, #707b89, #111925 54%, #050a11); transform: translateZ(-15px); }
.device-phone::after { content: ""; position: absolute; top: 9%; right: -8px; width: 8px; height: 82%; border-radius: 0 5px 5px 0; background: linear-gradient(90deg, #111925, #737f8e); transform: rotateY(90deg); transform-origin: left center; }
.phone-island { position: absolute; z-index: 3; top: 15px; left: calc(50% - 29px); width: 58px; height: 14px; border-radius: 999px; background: #070b11; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); transform: translateZ(4px); }
.phone-volume, .phone-power { position: absolute; z-index: 4; width: 3px; border-radius: 3px; background: #687484; box-shadow: inset 1px 0 rgba(255,255,255,.26); }
.phone-volume { top: 24%; left: -4px; height: 17%; }
.phone-power { top: 29%; right: -4px; height: 13%; }
.device-phone .device-screen { border: 1px solid #05080d; border-radius: 1.65rem; box-shadow: inset 0 0 12px rgba(0,0,0,.16); transform: translateZ(3px); backface-visibility: hidden; }
.phone-home-indicator { position: absolute; z-index: 3; bottom: 6px; left: calc(50% - 25px); width: 50px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.72); }
.device-mixed { position: relative; min-height: 360px; display: flex; align-items: center; }
.device-mixed .device-laptop { width: 88%; }
.device-mixed .device-phone { position: absolute; right: 0; bottom: -1rem; width: 30%; }
.screen-placeholder { position: relative; height: 100%; display: grid; place-content: center; justify-items: center; gap: .45rem; padding: 1.5rem; text-align: center; background: radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--accent), transparent 60%), transparent 34%), linear-gradient(145deg, #fff, var(--accent-wash) 54%, var(--accent-soft)); }
.screen-placeholder::after { content: ""; position: absolute; inset: 8%; border: 1px solid color-mix(in srgb, var(--accent), transparent 72%); border-radius: 1rem; pointer-events: none; }
.screen-placeholder span { color: var(--accent-deep); font: .58rem "Cascadia Code", monospace; letter-spacing: .12em; }
.screen-placeholder strong { color: var(--accent-deep); font-size: 1.15rem; }
.screen-placeholder small { color: var(--muted); font-size: .66rem; }
.screen-product-logo { width: clamp(64px, 18%, 94px) !important; height: auto !important; margin: .45rem 0 .2rem; border-radius: 22%; object-fit: contain !important; filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--accent), transparent 56%)); }

.scroll-section {
  --parallax-shift: 0px;
  --content-shift: 0px;
  --section-glow: color-mix(in srgb, var(--accent), transparent 84%);
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.scroll-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  top: -24%;
  right: -12%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--section-glow), transparent 68%);
  filter: blur(2px);
  transform: translate3d(0, var(--parallax-shift), 0);
  will-change: transform;
}
.scroll-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.32), transparent 40%, rgba(255,255,255,.14));
}
.scroll-section > .container {
  position: relative;
  z-index: 1;
  transform: translate3d(0, var(--content-shift), 0);
  will-change: transform;
}
.section-hero {
  --hero-pointer-x: 72%;
  --hero-pointer-y: 38%;
  background: var(--accent);
}
.section-hero::before {
  display: block;
  z-index: 0;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  opacity: .58;
  background:
    radial-gradient(
      circle 150px at var(--hero-pointer-x) var(--hero-pointer-y),
      color-mix(in srgb, var(--accent), white 76%),
      transparent 72%
    ),
    radial-gradient(
      circle 420px at var(--hero-pointer-x) var(--hero-pointer-y),
      color-mix(in srgb, var(--accent), white 34%),
      transparent 74%
    );
  filter: blur(14px);
  mix-blend-mode: screen;
  transform: none;
  transition: opacity .35s ease;
  will-change: background;
}
.section-hero.has-pointer-glow::before { opacity: .9; }
.section-hero::after { display: none; }
.section-hero .eyebrow { color: color-mix(in srgb, var(--hero-ink), transparent 18%); }
.hero-ops-console {
  --hero-ink: #eff9ff;
  --hero-button-text: #071522;
  background:
    radial-gradient(circle at 78% 22%, rgba(55,148,255,.3), transparent 30%),
    linear-gradient(135deg, #06111d 0%, #0a2134 56%, #0b3550 100%);
}
.hero-ops-console::after {
  display: block;
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .2;
  background-image: linear-gradient(rgba(113,211,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(113,211,255,.12) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.hero-ops-console .hero-copy { align-self: center; }
.hero-ops-console .button-primary { background: #50e3a4; box-shadow: 0 16px 38px rgba(12,214,144,.24); }
.hero-ops-console .button-secondary, .hero-ops-console .platform-picker button { background: rgba(239,249,255,.07); }
.hero-ops-console .device-model { --model-ry: 7deg; }

.hero-production-flow {
  --hero-ink: #173a64;
  --hero-button-text: #fff;
  background:
    linear-gradient(rgba(8,101,225,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,101,225,.055) 1px, transparent 1px),
    radial-gradient(circle at 72% 30%, rgba(8,101,225,.18), transparent 30%),
    #f2f7fd;
  background-size: 34px 34px, 34px 34px, auto, auto;
}
.hero-production-flow::before { mix-blend-mode: multiply; opacity: .34; }
.hero-production-flow .button-primary { background: #0865e1; box-shadow: 0 16px 38px rgba(8,101,225,.22); }
.hero-production-flow .button-secondary, .hero-production-flow .platform-picker button { background: rgba(255,255,255,.68); }
.hero-production-flow .device-model { --model-ry: -3deg; }

.hero-capture-canvas {
  --hero-ink: #fff;
  --hero-button-text: #123052;
  background:
    radial-gradient(circle at 80% 18%, rgba(126,225,255,.56), transparent 22%),
    radial-gradient(circle at 12% 86%, rgba(80,38,209,.36), transparent 30%),
    linear-gradient(135deg, #0756ce 0%, #0865e1 50%, #4d55df 100%);
}
.hero-capture-canvas::before { opacity: .48; }
.hero-capture-canvas .button-primary { background: #fff; box-shadow: 0 16px 40px rgba(4,33,82,.26); }
.hero-capture-canvas .button-secondary, .hero-capture-canvas .platform-picker button { background: rgba(255,255,255,.1); }
.hero-capture-canvas .device-model { --model-ry: -12deg; }
.section-features {
  --section-glow: color-mix(in srgb, var(--accent), transparent 74%);
  background: linear-gradient(155deg, #fff, color-mix(in srgb, var(--accent), white 91%));
}
.section-features::before { top: 8%; right: auto; left: -18%; }
.section-releases {
  --section-glow: color-mix(in srgb, var(--accent), transparent 70%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent), white 84%), #fff 58%, var(--accent-wash));
}
.section-releases::before { top: 20%; right: -18%; }
.section-faq {
  --section-glow: color-mix(in srgb, var(--accent), transparent 76%);
  background: linear-gradient(155deg, #fff, color-mix(in srgb, var(--accent), white 92%));
}
.section-faq::before { top: -8%; right: auto; left: -14%; }
.section-privacy {
  --section-glow: rgba(23,32,51,.1);
  background: linear-gradient(145deg, #e9eceb, #f5f6f2);
}
.section-privacy::before { top: -45%; right: 5%; width: min(46vw, 560px); }

.motion-ready [data-scroll-section] .section-head,
.motion-ready [data-scroll-section] .highlight,
.motion-ready [data-scroll-section] .release-row,
.motion-ready [data-scroll-section] details,
.motion-ready [data-scroll-section] .privacy > *,
.motion-ready .section-hero .hero-grid > * {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .85s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready [data-scroll-section].is-visible .section-head,
.motion-ready [data-scroll-section].is-visible .highlight,
.motion-ready [data-scroll-section].is-visible .release-row,
.motion-ready [data-scroll-section].is-visible details,
.motion-ready [data-scroll-section].is-visible .privacy > *,
.motion-ready .section-hero.is-visible .hero-grid > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section {
  display: grid;
  align-items: center;
  min-height: min(860px, calc(100svh - var(--header-height)));
  padding: clamp(4.5rem, 9vh, 7rem) 0;
  border-top: 1px solid rgba(23,32,51,.08);
}
.section-head { max-width: 48rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.section h2 { margin: 0.6rem 0 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.1; letter-spacing: -0.05em; }
.section-intro { max-width: 42rem; color: var(--muted); }
#features { min-height: min(760px, calc(100svh - var(--header-height))); padding-block: clamp(3.5rem, 7vh, 5.5rem); }
#features .section-head { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr); align-items: end; max-width: none; gap: 2rem; margin-bottom: 1.35rem; }
#features .section-kicker { grid-column: 1 / -1; margin: 0; }
#features .section-intro { margin: 0; }
#features h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.highlight { min-height: 140px; padding: 1.3rem; border-radius: 1.2rem; background: linear-gradient(145deg, rgba(255,255,255,.92), color-mix(in srgb, var(--accent), rgba(255,255,255,.82) 92%)); border: 1px solid color-mix(in srgb, var(--accent), transparent 82%); box-shadow: 0 16px 42px color-mix(in srgb, var(--accent), transparent 92%); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.highlight:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent), transparent 55%); box-shadow: 0 22px 48px rgba(23,32,51,.1); }
.highlight b { display: block; margin-bottom: 1.35rem; color: var(--accent); font: 0.68rem "Cascadia Code", monospace; }
.highlight h3 { margin: 0; font-size: 1.05rem; }

.release-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; padding: clamp(1.4rem, 4vw, 2.5rem); border-radius: 1.8rem; background: var(--ink); color: #fff; }
.release-version { margin: 0; font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -0.06em; }
.release-date { color: #aeb8c7; font-size: 0.8rem; }
.download-list { display: grid; gap: 0.7rem; }
.download { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-radius: 1rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); }
.download:hover { background: rgba(255,255,255,.16); }
.download small { display: block; color: #b6c0cd; }
.coming { padding: 3rem; border: 1px dashed var(--line); border-radius: 1.5rem; text-align: center; color: var(--muted); background: rgba(255,255,255,.45); }

.release-history { position: relative; display: grid; gap: 1.5rem; }
.release-history::before { content: ""; position: absolute; top: 1.15rem; bottom: 1.15rem; left: 171px; width: 2px; border-radius: 999px; background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent), transparent 72%)); }
.release-row { position: relative; display: grid; grid-template-columns: 140px 32px minmax(0, 1fr); grid-template-areas: "meta marker body"; column-gap: 1rem; align-items: start; }
.release-meta { grid-area: meta; padding-top: .85rem; text-align: right; }
.release-meta h3 { margin: .25rem 0 .1rem; font-size: 1.35rem; }
.release-meta time { color: var(--muted); font-size: 0.76rem; }
.release-current { display: inline-flex; padding: .2rem .55rem; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent), white 90%); font-size: .65rem; font-weight: 700; }
.release-marker { grid-area: marker; position: relative; z-index: 1; display: block; width: 16px; height: 16px; margin: 1.3rem auto 0; border: 4px solid color-mix(in srgb, var(--accent), white 82%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent), transparent 86%); }
.release-row:not(.is-latest) .release-marker { width: 12px; height: 12px; margin-top: 1.45rem; border-width: 3px; background: color-mix(in srgb, var(--accent), white 34%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent), transparent 90%); }
.release-body { grid-area: body; min-width: 0; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid rgba(23,32,51,.1); border-radius: 1.35rem; background: rgba(255,255,255,.72); box-shadow: 0 18px 48px rgba(23,32,51,.06); }
.release-row.is-latest .release-body { border-color: color-mix(in srgb, var(--accent), transparent 66%); background: color-mix(in srgb, var(--accent), white 95%); }
.release-body > p { margin-top: 0; }
.change-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.change-columns h4 { margin: 0 0 0.5rem; font-size: 0.82rem; }
.change-columns ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.86rem; }
.change-columns li { margin-bottom: .55rem; padding-left: .1rem; }
.change-text { vertical-align: middle; }
.proposer-badge { display: inline-flex; align-items: center; margin-left: .55rem; padding: .12rem .48rem; border: 1px solid color-mix(in srgb, var(--accent), transparent 62%); border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent), white 92%); font-size: .62rem; font-weight: 700; line-height: 1.45; vertical-align: middle; white-space: nowrap; }
.release-downloads { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.25rem; }
.release-download { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 210px; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--card); font-size: 0.82rem; font-weight: 650; }
.release-download:hover { border-color: var(--accent); color: var(--accent); }
.release-download span { color: var(--accent); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: steps; }
.step { counter-increment: steps; padding: 1.5rem; border-left: 2px solid var(--accent); background: rgba(255,255,255,.48); }
.step::before { content: "0" counter(steps); display: block; margin-bottom: 2rem; color: var(--accent); font: 0.72rem "Cascadia Code", monospace; }
.faq { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 1rem; }
details { padding: 1.2rem 1.3rem; border: 1px solid rgba(23,32,51,.1); border-radius: 1rem; background: rgba(255,255,255,.68); box-shadow: 0 12px 32px rgba(23,32,51,.04); transition: border-color .25s ease, background .25s ease, transform .25s ease; }
details:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent), transparent 60%); }
details[open] { border-color: color-mix(in srgb, var(--accent), transparent 52%); background: rgba(255,255,255,.9); }
summary { cursor: pointer; font-weight: 650; }
details p { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.88rem; }

.ad-shell { min-height: 90px; margin: 2rem auto; display: grid; place-items: center; }
.ad-shell::before { content: "ADVERTISEMENT"; color: var(--muted); font: 0.58rem "Cascadia Code", monospace; letter-spacing: .12em; }
.ad-shell .adsbygoogle { width: 100%; }
.section-privacy { min-height: min(560px, 68svh); }
.privacy { max-width: 820px; color: var(--muted); font-size: 0.9rem; }
.privacy h2 { color: var(--ink); }
.privacy-with-account { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.privacy-support-copy { max-width: 650px; }
.official-account-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1.25rem; border: 1px solid rgba(23,32,51,.1); border-radius: 1.35rem; background: rgba(255,255,255,.72); box-shadow: 0 18px 48px rgba(23,32,51,.07); }
.official-account-card > img { display: block; width: 132px; height: 132px; padding: .35rem; object-fit: contain; border-radius: 1rem; background: #fff; }
.official-account-card h3 { margin: .2rem 0 .45rem; color: var(--ink); font-size: 1.15rem; }
.official-account-card p { margin: 0; line-height: 1.65; }
.official-account-card .official-account-kicker { color: var(--accent); font: 650 .68rem "Cascadia Code", monospace; letter-spacing: .12em; }
.official-account-card a { display: inline-flex; margin-top: .75rem; color: var(--accent); font-weight: 650; font-size: .78rem; }
.site-footer { padding: 3rem 0; border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.76rem; }
.footer-links { display: flex; gap: 1rem; }
.consent {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  width: min(420px, calc(100% - 2rem)); padding: 1.2rem;
  color: #fff; background: var(--ink); border-radius: 1.2rem;
  box-shadow: 0 18px 60px rgba(23,32,51,.28);
}
.consent[hidden] { display: none; }
.consent p { margin: 0 0 1rem; color: #c8d0da; font-size: .82rem; }
.consent-actions { display: flex; gap: .6rem; justify-content: flex-end; }
.consent button { padding: .55rem .9rem; border: 0; border-radius: 999px; cursor: pointer; }
.consent-accept { color: #fff; background: var(--accent); }

.section-discovery { min-height: auto; }
.seo-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.seo-card { display: block; padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid rgba(23,32,51,.1); border-radius: 1.35rem; background: rgba(255,255,255,.74); box-shadow: 0 18px 48px rgba(23,32,51,.05); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.seo-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent), transparent 56%); box-shadow: 0 22px 52px rgba(23,32,51,.09); }
.seo-card span { color: var(--accent); font: 700 .64rem "Cascadia Code", monospace; letter-spacing: .12em; text-transform: uppercase; }
.seo-card h3 { margin: .7rem 0 .55rem; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.seo-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.seo-card b { display: inline-block; margin-top: 1.2rem; color: var(--accent); font-size: .78rem; }

.seo-page { background: linear-gradient(180deg, color-mix(in srgb, var(--accent), white 96%), var(--bg) 35rem); }
.seo-article { padding-block: clamp(2rem, 5vw, 4rem) clamp(5rem, 9vw, 8rem); }
.breadcrumbs { display: flex; gap: .6rem; align-items: center; margin-bottom: clamp(2.5rem, 6vw, 5rem); color: var(--muted); font-size: .78rem; }
.breadcrumbs a:hover { color: var(--accent); }
.seo-article-head { max-width: 900px; margin-bottom: clamp(3rem, 7vw, 5rem); }
.seo-article-head h1 { max-width: 860px; margin: .7rem 0 1.2rem; font-size: clamp(2.5rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.06em; }
.seo-article-head > p:not(.section-kicker) { max-width: 760px; color: var(--muted); font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.85; }
.seo-article-head time { display: block; margin-top: 1rem; color: var(--muted); font-size: .76rem; }
.seo-prose { max-width: 860px; margin-inline: auto; }
.seo-prose section { padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line); }
.seo-prose h2, .seo-faq > h2, .seo-sources h2, .seo-related > h2, .seo-cta h2 { margin: 0 0 1.2rem; font-size: clamp(1.75rem, 3.5vw, 2.7rem); letter-spacing: -.04em; }
.seo-prose p, .seo-prose li, .seo-sources { color: var(--muted); line-height: 1.85; }
.seo-prose ul { padding-left: 1.25rem; }
.seo-prose li { margin-block: .55rem; }
.seo-table-wrap { margin: 0 0 clamp(3rem, 7vw, 5rem); overflow-x: auto; border: 1px solid var(--line); border-radius: 1.35rem; background: rgba(255,255,255,.82); box-shadow: 0 18px 48px rgba(23,32,51,.05); }
.seo-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.seo-table caption { padding: 1.3rem 1.5rem; color: var(--muted); font-size: .78rem; text-align: left; }
.seo-table th, .seo-table td { padding: 1rem 1.2rem; border-top: 1px solid var(--line); vertical-align: top; font-size: .84rem; line-height: 1.65; }
.seo-table thead th { color: #fff; background: var(--ink); }
.seo-table tbody th { width: 17%; color: var(--ink); background: color-mix(in srgb, var(--accent), white 95%); }
.seo-faq, .seo-sources, .seo-related, .seo-cta { margin-top: clamp(3.5rem, 8vw, 6rem); padding-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--line); }
.seo-sources { max-width: 860px; margin-inline: auto; }
.seo-sources ul { padding-left: 1.2rem; }
.seo-sources a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.seo-related .seo-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-cta { padding: clamp(2rem, 5vw, 3.5rem); border: 0; border-radius: 1.6rem; color: #fff; background: var(--ink); }
.seo-cta p { max-width: 720px; color: #c8d0da; line-height: 1.75; }
.seo-cta .button { margin-top: 1rem; }

@media (max-width: 820px) {
  :root { --container: min(100% - 2rem, 680px); }
  .nav { display: none; }
  .section { min-height: auto; padding-block: 4.5rem; }
  .section-head { margin-bottom: 2rem; }
  .seo-card-grid, .seo-related .seo-card-grid { grid-template-columns: 1fr; }
  .scroll-section::before { width: 90vw; right: -36%; opacity: .8; }
  .scroll-section > .container { transform: none; }
  .hero { min-height: calc(100svh - var(--header-height)); padding: 1.75rem 0 2.25rem; overflow: clip; }
  .hero-grid, .release-card { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  [data-app="aiops"] .hero-grid,
  [data-app="bsm"] .hero-grid,
  [data-app="snipkap"] .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .hero h1 { font-size: clamp(2.75rem, 10vw, 4.5rem); }
  [data-app="aiops"] .hero h1.has-title-lines,
  [data-app="bsm"] .hero h1.has-title-lines,
  [data-app="snipkap"] .hero h1.has-title-lines { font-size: clamp(2.75rem, 10vw, 4.5rem); }
  .hero-title-line { display: inline; }
  .hero-title-line + .hero-title-line::before { content: " "; }
  .hero-lead { max-width: 38rem; margin-block: .75rem 0; line-height: 1.7; }
  .hero-download { margin-top: 1.25rem; }
  .showcase-stage { min-height: clamp(280px, 36svh, 360px); }
  .hero-value-strip { margin-top: .35rem; }
  .hero-visual-ops-console .hero-ornament,
  .hero-visual-production-flow .hero-ornament,
  .hero-visual-capture-canvas .hero-ornament { inset: 0; }
  .device-laptop { width: min(86%, 520px); }
  .device-laptop { height: 300px; }
  #features { min-height: auto; padding-block: 4rem; }
  #features .section-head { grid-template-columns: 1fr; gap: .7rem; }
  .highlights, .steps { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .section-privacy { min-height: auto; }
  .privacy-with-account { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --container: calc(100% - 1.25rem); --header-height: 60px; }
  .header-inner { gap: .75rem; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand small { display: none; }
  .back-link { display: none; }
  .hero { min-height: calc(100svh - var(--header-height)); padding: 1.25rem 0 1.75rem; }
  .hero-grid { gap: 1.15rem; }
  .eyebrow { margin: 0; font-size: .6rem; }
  .hero h1 { margin: .45rem 0; font-size: clamp(2.55rem, 14vw, 3.6rem); }
  .official-account-card { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .official-account-card > img { width: 96px; height: 96px; border-radius: .8rem; }
  [data-app="aiops"] .hero h1.has-title-lines,
  [data-app="bsm"] .hero h1.has-title-lines,
  [data-app="snipkap"] .hero h1.has-title-lines { margin: .45rem 0; font-size: clamp(2.45rem, 13vw, 3.55rem); line-height: 1; }
  .hero-lead { margin: 0; font-size: .92rem; line-height: 1.58; }
  .hero-download { margin-top: 1rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; min-height: 43px; }
  .platform-picker { align-items: flex-start; flex-direction: column; gap: .45rem; margin-top: .65rem; }
  .showcase-stage { min-height: clamp(210px, 29svh, 280px); }
  .showcase-stage figcaption { margin-top: .55rem; }
  .hero-value-strip { justify-content: flex-start; margin-top: .2rem; padding-inline: 0; }
  .hero-value-strip span { padding: .34rem .58rem; font-size: .55rem; }
  .hero-visual-ops-console .ops-console { inset: 0; }
  .ops-console code { top: 22%; left: 4%; font-size: .58rem; }
  .ops-node-line { right: 3%; left: 3%; gap: .25rem; }
  .ops-node-line i { width: .4rem; }
  .flow-track { top: 16%; right: 3%; gap: .22rem; }
  .flow-track b { padding: .28rem .38rem; font-size: .55rem; }
  .flow-ledger { right: 3%; bottom: 5%; }
  .capture-label, .capture-size { font-size: .5rem; }
  .device-model { padding: .5rem 0 2.45rem; perspective: 900px; }
  .model-toolbar { min-height: 32px; }
  .model-hint { font-size: .56rem; }
  .model-toolbar button { width: 26px; height: 26px; }
  .device-laptop { width: min(94%, 430px); }
  .device-laptop { height: 230px; }
  .device-phone { width: min(132px, 36vw); }
  .device-mixed { min-height: 230px; }
  .device-mixed .device-laptop { width: 88%; }
  .device-mixed .device-phone { width: 28%; }
  .section { padding-block: 3.75rem; }
  .section h2 { font-size: clamp(1.9rem, 10vw, 2.65rem); }
  .highlight { min-height: 118px; }
  .release-history { gap: 1.25rem; }
  .release-history::before { top: .55rem; bottom: .55rem; left: 11px; }
  .release-row { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "marker meta" "marker body"; column-gap: .85rem; row-gap: .75rem; }
  .release-meta { padding-top: 0; text-align: left; }
  .release-meta h3 { display: inline; margin-right: .45rem; }
  .release-current { margin-right: .45rem; }
  .release-marker { margin-top: .25rem; }
  .release-row:not(.is-latest) .release-marker { margin-top: .35rem; }
  .release-body { padding: 1.25rem; }
  .change-columns { grid-template-columns: 1fr; }
  .release-download { width: 100%; min-width: 0; }
}
@media (max-height: 700px) and (min-width: 821px) {
  .hero { padding-block: 1.25rem; }
  .hero h1 { font-size: clamp(3rem, 8vh, 4.5rem); }
  [data-app="aiops"] .hero h1.has-title-lines,
  [data-app="bsm"] .hero h1.has-title-lines,
  [data-app="snipkap"] .hero h1.has-title-lines { font-size: clamp(3rem, 8vh, 4.5rem); }
  .hero-lead { line-height: 1.6; }
  .hero-download { margin-top: 1rem; }
  .showcase-stage { min-height: clamp(280px, 50svh, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-section::before,
  .scroll-section > .container { transform: none !important; }
  .device-model-orbit { transition: none; }
  .motion-ready [data-scroll-section] .section-head,
  .motion-ready [data-scroll-section] .highlight,
  .motion-ready [data-scroll-section] .release-row,
  .motion-ready [data-scroll-section] details,
  .motion-ready [data-scroll-section] .privacy > *,
  .motion-ready .section-hero .hero-grid > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* BSM — Odoo-inspired application-first product site, scoped to the BSM homepage. */
[data-app="bsm"] {
  --bsm-blue: #0865e1;
  --bsm-blue-dark: #063b8e;
  --bsm-navy: #0b1f3a;
  --bsm-sky: #edf6ff;
  --bsm-cyan: #22b8cf;
  --bsm-green: #12a474;
  --bsm-orange: #f59e0b;
  background: #fff;
}
[data-app="bsm"] .container { width: min(1240px, calc(100% - 2.5rem)); }
[data-app="bsm"] .bsm-header { background: rgba(255,255,255,.92); border-color: rgba(8,101,225,.1); }
[data-app="bsm"] .bsm-header .brand-mark { box-shadow: none; object-fit: contain; }
[data-app="bsm"] .bsm-header .brand { color: var(--bsm-navy); }
[data-app="bsm"] .bsm-header .nav { gap: 1.65rem; color: #50627a; }
[data-app="bsm"] .bsm-header-cta { border: 0; color: #fff; background: var(--bsm-blue); box-shadow: 0 9px 24px rgba(8,101,225,.22); }
[data-app="bsm"] .bsm-header-cta:hover { color: #fff; background: #0758c4; }
.bsm-home { color: var(--bsm-navy); background: #fff; }
.bsm-home p, .bsm-home h1, .bsm-home h2, .bsm-home h3 { text-wrap: balance; }

.bsm-hero { position: relative; min-height: min(900px, calc(100svh - var(--header-height))); padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(7rem, 10vw, 10rem); overflow: hidden; background: radial-gradient(circle at 73% 18%, rgba(102,191,255,.22), transparent 32%), linear-gradient(135deg, #f6fbff 0%, #eaf4ff 54%, #f9fcff 100%); }
.bsm-hero::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(8,101,225,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(8,101,225,.06) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to right, transparent, #000 35%, #000 75%, transparent); }
.bsm-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(390px,.82fr) minmax(610px,1.18fr); align-items: center; gap: clamp(3rem, 6vw, 6rem); }
.bsm-pill { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.35rem; padding: .45rem .8rem; border: 1px solid rgba(8,101,225,.18); border-radius: 999px; color: var(--bsm-blue-dark); background: rgba(255,255,255,.72); font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.bsm-pill span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--bsm-blue); box-shadow: 0 0 0 5px rgba(8,101,225,.1); }
.bsm-hero h1 { margin: 0; font-size: clamp(3.6rem, 4.5vw, 5.7rem); line-height: .98; letter-spacing: -.07em; }
.bsm-hero h1 em { position: relative; color: var(--bsm-blue); font-style: normal; }
.bsm-hero h1 em::after { content: ""; position: absolute; right: 0; bottom: -.1em; left: 0; height: .13em; border-radius: 999px; background: var(--bsm-blue); transform: rotate(-2deg); opacity: .18; }
.bsm-hero-copy > p:not(.bsm-pill) { max-width: 36rem; margin: 1.65rem 0 0; color: #4e6279; font-size: 1.08rem; line-height: 1.9; }
.bsm-hero .hero-download { margin-top: 2rem; }
.bsm-hero .button { min-height: 50px; }
.bsm-hero .button-primary { color: #fff; background: var(--bsm-blue); box-shadow: 0 14px 34px rgba(8,101,225,.25); }
.bsm-hero .button-secondary { border-color: rgba(11,31,58,.18); color: var(--bsm-navy); background: rgba(255,255,255,.7); }
.bsm-hero .platform-picker { color: #66788d; }
.bsm-hero .platform-picker button { color: var(--bsm-blue-dark); background: #fff; }
.bsm-trust { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; margin-top: 1.6rem; color: #597087; font-size: .74rem; font-weight: 650; }
.bsm-trust span::first-letter { color: var(--bsm-green); }
.bsm-hero-visual { position: relative; perspective: 1600px; }
.bsm-dashboard { position: relative; z-index: 1; min-width: 720px; overflow: hidden; border: 1px solid rgba(8,101,225,.16); border-radius: 1.35rem; background: #f7f9fc; box-shadow: 0 40px 90px rgba(20,62,110,.22), 0 2px 0 rgba(255,255,255,.8) inset; transform: rotateY(-5deg) rotateX(1.5deg); transform-origin: left center; }
.bsm-window-bar { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 1rem; color: #66788d; background: #fff; border-bottom: 1px solid #e6edf5; font-size: .62rem; }
.bsm-window-bar > span { display: flex; gap: .35rem; }
.bsm-window-bar i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #dbe3ed; }
.bsm-window-bar i:first-child { background: #ff7169; }.bsm-window-bar i:nth-child(2) { background: #ffc65a; }.bsm-window-bar i:last-child { background: #56d28b; }
.bsm-window-bar b { color: #334960; }.bsm-window-bar em { font-style: normal; letter-spacing: .08em; }
.bsm-app-shell { display: grid; grid-template-columns: 126px 1fr; min-height: 420px; }
.bsm-sidebar { display: flex; flex-direction: column; gap: .2rem; padding: .8rem .65rem; color: #afc3db; background: linear-gradient(180deg, #0c2b52, #081e39); }
.bsm-sidebar-brand { display: flex; align-items: center; gap: .5rem; padding: .25rem .45rem 1rem; color: #fff; font-size: .8rem; font-weight: 800; }
.bsm-sidebar-brand img { width: 26px; height: 26px; filter: brightness(0) invert(1); opacity: .94; }
.bsm-sidebar button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .58rem .6rem; border: 0; border-radius: .55rem; color: inherit; background: transparent; font-size: .59rem; text-align: left; cursor: pointer; }
.bsm-sidebar button span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: .35rem; background: rgba(255,255,255,.07); font-size: .64rem; }
.bsm-sidebar button.is-active, .bsm-sidebar button:hover { color: #fff; background: rgba(43,132,255,.34); }
.bsm-sidebar small { margin: auto .45rem .1rem; font-size: .42rem; letter-spacing: .12em; opacity: .6; }
.bsm-dashboard-main { min-width: 0; padding: 1.15rem 1.25rem; }
.bsm-dashboard-main > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.bsm-dashboard-main > header div { display: grid; }.bsm-dashboard-main > header small { color: #8493a5; font-size: .52rem; }.bsm-dashboard-main > header strong { font-size: .92rem; }.bsm-dashboard-main > header > span { color: #74869a; font-size: .52rem; }
.bsm-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; }
.bsm-kpi-row article { display: grid; min-width: 0; padding: .8rem; border: 1px solid #e7edf5; border-radius: .75rem; background: #fff; box-shadow: 0 8px 20px rgba(30,62,96,.04); }
.bsm-kpi-row span { color: #7b8ca0; font-size: .5rem; }.bsm-kpi-row b { margin: .25rem 0; color: #183653; font-size: .95rem; }.bsm-kpi-row i { color: #7b8ca0; font-size: .48rem; font-style: normal; }.bsm-kpi-row i.up { color: var(--bsm-green); }.bsm-kpi-row i.warn { color: var(--bsm-orange); }
.bsm-dashboard-grid { display: grid; grid-template-columns: 1.45fr .8fr; gap: .7rem; margin-top: .7rem; }
.bsm-dashboard-grid > article { padding: .9rem; border: 1px solid #e7edf5; border-radius: .75rem; background: #fff; }
.bsm-dashboard-grid header { display: flex; justify-content: space-between; margin-bottom: .8rem; font-size: .56rem; }.bsm-dashboard-grid header span { color: #8a9aab; }
.bsm-chart { display: flex; align-items: end; gap: .55rem; height: 125px; padding: .4rem .4rem 0; border-bottom: 1px solid #edf1f6; background: repeating-linear-gradient(to bottom, #edf1f6 0 1px, transparent 1px 33%); }
.bsm-chart i { flex: 1; height: var(--h); border-radius: 5px 5px 1px 1px; background: linear-gradient(180deg, #3c8cf3, var(--bsm-blue)); }
.bsm-chart-labels { display: flex; justify-content: space-around; padding-top: .4rem; color: #9aa7b6; font-size: .42rem; }
.bsm-status-card > div { display: grid; grid-template-columns: 1fr auto; gap: .25rem; margin: .65rem 0; color: #6b7c8f; font-size: .5rem; }.bsm-status-card > div b { color: #263f57; }.bsm-status-card > div i { grid-column: 1/-1; height: 4px; overflow: hidden; border-radius: 9px; background: #edf1f6; }.bsm-status-card > div i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--bsm-blue); }
.bsm-float-card { position: absolute; z-index: 2; display: grid; grid-template-columns: 34px 1fr; column-gap: .7rem; min-width: 205px; padding: .8rem .9rem; border: 1px solid rgba(8,101,225,.12); border-radius: .9rem; background: rgba(255,255,255,.94); box-shadow: 0 18px 45px rgba(18,61,106,.18); backdrop-filter: blur(12px); }
.bsm-float-card i { grid-row: 1/3; display: grid; width: 34px; height: 34px; place-items: center; border-radius: .65rem; color: #fff; background: var(--bsm-green); font-size: .7rem; font-style: normal; font-weight: 800; }.bsm-float-card span { color: #536981; font-size: .58rem; }.bsm-float-card b { font-size: .66rem; }.float-order { right: -1rem; bottom: -1.5rem; }.float-stock { top: 5rem; left: -2.2rem; min-width: 185px; }.float-stock i { background: var(--bsm-orange); }
.bsm-hero-wave { position: absolute; right: -5%; bottom: -55px; left: -5%; height: 130px; border-radius: 50% 50% 0 0 / 55% 55% 0 0; background: #fff; transform: rotate(-1.5deg); }

.bsm-section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }.bsm-section-head.centered { margin-inline: auto; text-align: center; }
.bsm-section-head > p, .bsm-story-copy > p, .bsm-local-grid > div > p, .bsm-final-cta p { margin: 0 0 .8rem; color: var(--bsm-blue); font: 750 .68rem/1.4 "Cascadia Code", monospace; letter-spacing: .13em; }
.bsm-section-head h2, .bsm-story-copy h2, .bsm-local h2, .bsm-final-cta h2 { margin: 0; font-size: clamp(2.35rem, 4.8vw, 4.25rem); line-height: 1.08; letter-spacing: -.055em; }
.bsm-story-copy h2 { font-size: clamp(2.2rem, 3.2vw, 3.8rem); }
.bsm-section-head > span, .bsm-story-copy > span, .bsm-local-grid > div > span { display: block; margin-top: 1.15rem; color: #63768a; line-height: 1.85; }
.bsm-modules { padding: clamp(5rem, 9vw, 9rem) 0; background: #fff; }
.bsm-module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.bsm-module-grid article { position: relative; min-height: 250px; padding: 1.6rem; overflow: hidden; border: 1px solid #e1ebf5; border-radius: 1.25rem; background: linear-gradient(145deg, #fff, #f7fbff); box-shadow: 0 14px 42px rgba(29,72,118,.06); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.bsm-module-grid article::before { content: ""; position: absolute; top: -35px; right: -35px; width: 105px; height: 105px; border-radius: 50%; background: var(--bsm-sky); }
.bsm-module-grid article:hover { transform: translateY(-7px); border-color: rgba(8,101,225,.3); box-shadow: 0 24px 55px rgba(29,72,118,.12); }
.bsm-module-icon { position: relative; display: grid; width: 52px; height: 52px; margin-bottom: 1.6rem; place-items: center; border-radius: 1rem; color: #fff; background: linear-gradient(145deg, #2480f2, var(--bsm-blue)); box-shadow: 0 12px 25px rgba(8,101,225,.2); font-size: 1.1rem; font-weight: 800; }
.bsm-module-grid article:nth-child(2n) .bsm-module-icon { background: linear-gradient(145deg, #22c0d7, #087aaf); }.bsm-module-grid article:nth-child(3n) .bsm-module-icon { background: linear-gradient(145deg, #27c48f, #08795b); }.bsm-module-grid article:nth-child(4n) .bsm-module-icon { background: linear-gradient(145deg, #ffb52e, #e7770d); }
.bsm-module-grid h3 { margin: 0 0 .65rem; font-size: 1.18rem; }.bsm-module-grid p { margin: 0; color: #6a7c8f; font-size: .84rem; line-height: 1.75; }.bsm-module-grid article > span { position: absolute; bottom: 1.45rem; color: var(--bsm-blue); font-size: .72rem; font-weight: 700; }.bsm-module-grid article > span b { margin-left: .25rem; transition: margin .2s ease; }.bsm-module-grid article:hover > span b { margin-left: .55rem; }

.bsm-flow { padding: clamp(5rem, 9vw, 9rem) 0; background: linear-gradient(145deg, #f0f7ff, #f8fbff 52%, #eef7ff); }
.bsm-flow-layout { display: grid; grid-template-columns: .68fr 1.32fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.bsm-flow ol { position: relative; display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }.bsm-flow ol::before { content: ""; position: absolute; top: 2rem; bottom: 2rem; left: 25px; width: 2px; background: #d5e6f7; }
.bsm-flow li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 1rem; align-items: center; padding: 1rem .7rem; border-radius: 1rem; }.bsm-flow li.is-active { background: #fff; box-shadow: 0 12px 34px rgba(29,72,118,.08); }.bsm-flow li > i { z-index: 1; display: grid; width: 52px; height: 52px; place-items: center; border: 7px solid #eef6ff; border-radius: 50%; color: #7890a7; background: #d9e7f5; font-size: .62rem; font-style: normal; font-weight: 800; }.bsm-flow li.is-active > i { color: #fff; background: var(--bsm-blue); box-shadow: 0 0 0 4px rgba(8,101,225,.11); }.bsm-flow li div { display: grid; }.bsm-flow li b { font-size: .92rem; }.bsm-flow li span { color: #6d7f92; font-size: .75rem; }
.bsm-order-mock { overflow: hidden; border: 1px solid #dce8f3; border-radius: 1.4rem; background: #fff; box-shadow: 0 28px 70px rgba(28,71,116,.13); }
.bsm-order-mock > header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.4rem; border-bottom: 1px solid #edf2f7; }.bsm-order-mock > header div { display: grid; }.bsm-order-mock > header span { color: #7a8b9d; font-size: .67rem; }.bsm-order-mock > header b { font-size: 1.05rem; }.bsm-order-mock > header em { padding: .4rem .7rem; border-radius: 999px; color: var(--bsm-blue); background: var(--bsm-sky); font-size: .67rem; font-style: normal; font-weight: 750; }
.bsm-order-customer { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; margin: 1.2rem 1.4rem; padding: 1rem; border-radius: .85rem; background: #f7faff; }.bsm-order-customer span { display: grid; }.bsm-order-customer small { color: #8a9bac; font-size: .62rem; }.bsm-order-customer b { font-size: .78rem; }
.bsm-order-table { margin: 0 1.4rem 1.3rem; overflow: hidden; border: 1px solid #e8eef5; border-radius: .8rem; }.bsm-order-table > div { display: grid; grid-template-columns: 1.3fr 1.25fr .5fr 1fr; gap: .7rem; align-items: center; min-height: 52px; padding: .55rem .85rem; border-top: 1px solid #edf2f7; font-size: .68rem; }.bsm-order-table .head { min-height: 36px; border: 0; color: #8495a7; background: #f8fafc; font-size: .58rem; }.bsm-order-table > div > span:last-child { position: relative; }.bsm-order-table i { display: block; width: 100%; height: 5px; border-radius: 9px; background: #e9f0f7; }.bsm-order-table i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--bsm-blue); }.bsm-order-table small { color: #708398; font-size: .54rem; }
.bsm-order-mock > footer { display: flex; justify-content: space-around; padding: 1rem 1.1rem; color: #8494a6; background: #f8fafc; font-size: .57rem; }.bsm-order-mock > footer span { display: flex; align-items: center; gap: .35rem; }.bsm-order-mock > footer i { width: 8px; height: 8px; border-radius: 50%; background: #c7d5e3; }.bsm-order-mock > footer .active { color: var(--bsm-blue); font-weight: 700; }.bsm-order-mock > footer .active i { background: var(--bsm-blue); box-shadow: 0 0 0 4px rgba(8,101,225,.12); }

.bsm-real-screen { position: relative; z-index: 1; width: 100%; margin: 0; overflow: hidden; border: 1px solid rgba(116,151,188,.28); border-radius: 1.35rem; background: #fff; box-shadow: 0 32px 80px rgba(24,67,113,.18), 0 2px 8px rgba(24,67,113,.08); }
.bsm-real-screen::before { content: ""; position: absolute; inset: -20% 22% auto -8%; z-index: -1; height: 55%; border-radius: 50%; background: rgba(55,151,255,.2); filter: blur(55px); }
.bsm-real-screen-media { aspect-ratio: 16 / 9; overflow: hidden; background: #eaf2fb; }
.bsm-real-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bsm-real-screen figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; padding: .85rem 1.1rem; border-top: 1px solid #e7eef6; background: rgba(255,255,255,.97); }
.bsm-real-screen figcaption span { display: inline-flex; align-items: center; gap: .45rem; color: var(--bsm-blue); font-size: .64rem; font-weight: 750; letter-spacing: .03em; white-space: nowrap; }
.bsm-real-screen figcaption span i { width: 7px; height: 7px; border-radius: 50%; background: #19bb84; box-shadow: 0 0 0 4px rgba(25,187,132,.12); }
.bsm-real-screen figcaption b { color: #425a73; font-size: .72rem; text-align: right; }
.bsm-real-hero { width: 118%; transform: rotateY(-6deg) rotateZ(1deg); transform-origin: center; }
.bsm-real-sales { transform: rotate(.6deg); }
.bsm-real-production { min-width: 720px; transform: rotate(1deg); }
.bsm-real-inventory { min-width: 720px; border-color: rgba(255,255,255,.14); box-shadow: 0 35px 90px rgba(0,0,0,.3); transform: rotate(-1deg); }
.bsm-real-inventory figcaption { border-color: rgba(255,255,255,.08); background: #102d4e; }
.bsm-real-inventory figcaption b { color: #c6d7e8; }

.bsm-story { padding: clamp(5rem, 10vw, 10rem) 0; overflow: hidden; }.bsm-story-production { background: #fff; }.bsm-story-insight { background: #091e39; color: #fff; }
.bsm-story-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; }.bsm-story-grid.reverse { grid-template-columns: 1.15fr .85fr; }.bsm-story-grid.reverse .bsm-story-copy { order: 2; }
.bsm-story-copy > span { color: #65798e; }.bsm-story-insight .bsm-story-copy > span { color: #abc0d6; }.bsm-story-copy ul { display: grid; gap: .7rem; margin: 1.5rem 0 0; padding: 0; list-style: none; color: #50667c; font-size: .83rem; }.bsm-story-insight .bsm-story-copy ul { color: #bfd0e2; }.bsm-story-copy li::before { content: "✓"; display: inline-grid; width: 21px; height: 21px; margin-right: .6rem; place-items: center; border-radius: 50%; color: var(--bsm-blue); background: var(--bsm-sky); font-size: .58rem; font-weight: 800; }
.bsm-production-board { min-width: 680px; padding: 1.2rem; border: 1px solid #e1eaf3; border-radius: 1.4rem; background: #f6f8fb; box-shadow: 0 28px 70px rgba(28,71,116,.12); transform: rotate(1deg); }.bsm-production-board > header { display: flex; justify-content: space-between; padding: .3rem .3rem 1rem; }.bsm-production-board > header b { font-size: .9rem; }.bsm-production-board > header span { color: #8091a4; font-size: .65rem; }
.bsm-board-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }.bsm-board-columns section { min-height: 310px; padding: .7rem; border-radius: .85rem; background: #edf1f6; }.bsm-board-columns h3 { display: flex; justify-content: space-between; margin: 0 0 .7rem; color: #5e7185; font-size: .68rem; }.bsm-board-columns h3 i { display: grid; min-width: 20px; height: 20px; padding-inline: .3rem; place-items: center; border-radius: 99px; color: #708397; background: #fff; font-size: .55rem; font-style: normal; }.bsm-board-columns article { display: grid; margin-bottom: .6rem; padding: .8rem; border-left: 3px solid #aebdca; border-radius: .6rem; background: #fff; box-shadow: 0 6px 18px rgba(30,58,88,.05); }.bsm-board-columns article.blue { border-color: var(--bsm-blue); }.bsm-board-columns article.green { border-color: var(--bsm-green); }.bsm-board-columns article b { font-size: .68rem; }.bsm-board-columns article span, .bsm-board-columns article small { color: #8291a1; font-size: .55rem; }.bsm-board-columns article > i { height: 4px; margin-top: .55rem; border-radius: 9px; background: #e8eef5; }.bsm-board-columns article > i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--bsm-blue); }
.bsm-insight-card { min-width: 650px; padding: 1.8rem; border: 1px solid rgba(255,255,255,.11); border-radius: 1.5rem; background: linear-gradient(145deg, #102e52, #0b2544); box-shadow: 0 35px 90px rgba(0,0,0,.28); transform: rotate(-1deg); }.bsm-insight-card > header { display: flex; justify-content: space-between; align-items: end; }.bsm-insight-card > header span { display: grid; }.bsm-insight-card > header small { color: #8fa8c1; font-size: .68rem; }.bsm-insight-card > header span b { margin-top: .3rem; font-size: 1.8rem; }.bsm-insight-card > header em { color: #8fa8c1; font-size: .68rem; font-style: normal; }.bsm-insight-card > header em b { color: #56d5a7; }
.bsm-insight-chart { position: relative; height: 235px; margin-top: 1.5rem; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.1); }.bsm-insight-chart .grid-line { position: absolute; right: 0; left: 0; height: 1px; background: rgba(255,255,255,.07); }.bsm-insight-chart .l1 { top: 25%; }.bsm-insight-chart .l2 { top: 50%; }.bsm-insight-chart .l3 { top: 75%; }.bsm-insight-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }.bsm-insight-card footer { display: flex; justify-content: space-between; padding-top: .9rem; color: #8fa8c1; font-size: .65rem; }.bsm-insight-card footer span { display: flex; align-items: center; gap: .45rem; }.bsm-insight-card footer i { width: 8px; height: 8px; border-radius: 50%; background: var(--bsm-blue); }.bsm-insight-card footer b { color: #c2d3e5; }

.bsm-local { padding: clamp(5rem, 10vw, 10rem) 0; background: linear-gradient(145deg, #f4f8fc, #eef6ff); }.bsm-local-grid { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }.bsm-local-points { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin-top: 2rem; }.bsm-local-points article { display: grid; padding: 1rem; border: 1px solid #dde9f4; border-radius: 1rem; background: rgba(255,255,255,.8); }.bsm-local-points i { color: var(--bsm-blue); font: 700 .58rem "Cascadia Code", monospace; }.bsm-local-points b { margin: .75rem 0 .2rem; font-size: .82rem; }.bsm-local-points span { color: #73869a; font-size: .66rem; line-height: 1.6; }
.bsm-network-visual { position: relative; min-height: 470px; }.network-core { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; width: 185px; height: 185px; place-items: center; padding: 1.2rem; border: 1px solid rgba(8,101,225,.25); border-radius: 50%; background: #fff; box-shadow: 0 24px 65px rgba(28,71,116,.15), 0 0 0 22px rgba(8,101,225,.05), 0 0 0 48px rgba(8,101,225,.025); transform: translate(-50%,-50%); text-align: center; }.network-core span { color: var(--bsm-blue); font: 700 .53rem "Cascadia Code", monospace; letter-spacing: .15em; }.network-core img { width: 52px; height: 52px; }.network-core b { font-size: .78rem; }.network-core small { color: #8193a6; font-size: .55rem; }.network-node { position: absolute; z-index: 2; display: grid; min-width: 130px; justify-items: center; gap: .35rem; padding: .8rem; border: 1px solid #dbe7f2; border-radius: 1rem; background: #fff; box-shadow: 0 14px 35px rgba(28,71,116,.1); }.network-node i { display: grid; width: 40px; height: 40px; place-items: center; border-radius: .75rem; color: #fff; background: var(--bsm-blue); font-style: normal; }.network-node b { font-size: .66rem; }.node-pc { top: 4%; left: 3%; }.node-mobile { top: 12%; right: 0; }.node-mobile i { background: var(--bsm-cyan); }.node-backup { right: 8%; bottom: 4%; }.node-backup i { background: var(--bsm-green); }.network-line { position: absolute; z-index: 1; height: 2px; transform-origin: left center; background: repeating-linear-gradient(90deg, rgba(8,101,225,.38) 0 6px, transparent 6px 12px); }.line-a { top: 31%; left: 25%; width: 32%; transform: rotate(22deg); }.line-b { top: 44%; left: 54%; width: 33%; transform: rotate(-29deg); }.line-c { top: 61%; left: 56%; width: 34%; transform: rotate(35deg); }

.bsm-releases { padding: clamp(5rem, 9vw, 9rem) 0; background: #fff; }.bsm-release-list { display: grid; gap: 1rem; }.bsm-release { display: grid; grid-template-columns: 180px 1fr; border: 1px solid #dce7f1; border-radius: 1.4rem; overflow: hidden; background: #fff; box-shadow: 0 18px 45px rgba(29,72,118,.06); }.bsm-release > aside { padding: 2rem; color: #fff; background: var(--bsm-navy); }.bsm-release > aside span { display: inline-flex; padding: .25rem .55rem; border-radius: 999px; color: #a9cdfa; background: rgba(255,255,255,.08); font-size: .58rem; }.bsm-release > aside h3 { margin: 1rem 0 .2rem; font-size: 2rem; }.bsm-release > aside time { color: #91a9c1; font-size: .65rem; }.bsm-release > div { padding: 2rem; }.bsm-release > div > p { margin-top: 0; color: #60758a; }.bsm-release .release-downloads { margin: .8rem 0 1.6rem; }.bsm-release .change-columns h4 { color: var(--bsm-blue); }.bsm-release .change-columns ul { color: #697d91; }
.bsm-faq { padding: clamp(5rem, 9vw, 9rem) 0; background: #f3f8fd; }.bsm-faq .faq { max-width: 980px; margin: 0 auto; }.bsm-faq details { border-color: #dce8f3; background: #fff; }.bsm-faq summary { color: var(--bsm-navy); }
.bsm-final-cta { padding: clamp(4rem, 8vw, 7rem) 0; color: #fff; background: radial-gradient(circle at 80% 20%, rgba(56,147,255,.35), transparent 35%), linear-gradient(135deg, #071d38, #0a3977); }.bsm-final-cta .container { display: flex; align-items: end; justify-content: space-between; gap: 3rem; }.bsm-final-cta h2 { font-size: clamp(2.5rem, 5vw, 4.8rem); }.bsm-final-cta div > span { display: block; margin-top: 1rem; color: #b8cce1; }.bsm-final-cta .button { min-width: 220px; color: var(--bsm-blue); background: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.bsm-home .section-privacy { background: #eef2f6; }.bsm-home .section-privacy a { color: var(--bsm-blue); }

@media (max-width: 1080px) {
  .bsm-hero-grid { grid-template-columns: .85fr 1.15fr; gap: 2.5rem; }
  .bsm-dashboard { min-width: 650px; transform: scale(.88) rotateY(-5deg); transform-origin: left center; }
  .bsm-module-grid { grid-template-columns: repeat(2, 1fr); }
  .bsm-story-grid, .bsm-story-grid.reverse { grid-template-columns: .85fr 1.15fr; gap: 3rem; }
  .bsm-production-board, .bsm-insight-card { min-width: 610px; }
  .bsm-real-hero { width: 112%; }
  .bsm-real-production, .bsm-real-inventory { min-width: 610px; }
}
@media (max-width: 820px) {
  [data-app="bsm"] .container { width: min(100% - 2rem, 680px); }
  .bsm-hero { padding-top: 3.5rem; }
  .bsm-hero-grid, .bsm-flow-layout, .bsm-story-grid, .bsm-story-grid.reverse, .bsm-local-grid { grid-template-columns: 1fr; }
  .bsm-hero h1 { font-size: clamp(3.4rem, 12vw, 5.4rem); }
  .bsm-hero-visual { margin-top: 1.5rem; }
  .bsm-dashboard { min-width: 720px; transform: scale(.84); transform-origin: left top; }
  .bsm-hero-visual { min-height: 430px; }
  .float-order { right: 0; bottom: 1rem; }.float-stock { left: -.5rem; }
  .bsm-flow-layout { gap: 2.5rem; }.bsm-flow ol { grid-template-columns: repeat(2, 1fr); }.bsm-flow ol::before { display: none; }
  .bsm-story-grid.reverse .bsm-story-copy { order: 0; }
  .bsm-production-board, .bsm-insight-card { min-width: 680px; transform: scale(.9); transform-origin: left top; }
  .bsm-real-hero { width: 100%; transform: none; }
  .bsm-real-production, .bsm-real-inventory { min-width: 680px; transform: scale(.9); transform-origin: left top; }
  .bsm-story-production .bsm-story-grid > div:last-child, .bsm-story-insight .bsm-story-grid > div:first-child { min-height: 420px; }
  .bsm-local-points { grid-template-columns: 1fr; }
  .bsm-network-visual { min-height: 430px; }
  .bsm-release { grid-template-columns: 1fr; }.bsm-release > aside { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; }.bsm-release > aside h3 { margin: 0; }.bsm-release > aside time { margin-left: auto; }
  .bsm-final-cta .container { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  [data-app="bsm"] .container { width: calc(100% - 1.25rem); }
  .bsm-hero { padding: 2.6rem 0 5.5rem; }
  .bsm-hero h1 { font-size: clamp(3rem, 15vw, 4.3rem); }
  .bsm-hero-copy > p:not(.bsm-pill) { font-size: .95rem; line-height: 1.75; }
  .bsm-trust { display: grid; }
  .bsm-hero-visual { min-height: 318px; margin-top: .6rem; }
  .bsm-dashboard { min-width: 720px; transform: scale(.55); }
  .bsm-float-card { min-width: 175px; padding: .65rem; }.float-stock { top: 2.5rem; left: auto; right: -.2rem; }.float-order { right: -.2rem; bottom: -.2rem; }
  .bsm-section-head h2, .bsm-story-copy h2, .bsm-local h2, .bsm-final-cta h2 { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .bsm-module-grid { grid-template-columns: 1fr; }.bsm-module-grid article { min-height: 225px; }
  .bsm-flow ol { grid-template-columns: 1fr; }.bsm-flow li:not(.is-active) { padding-block: .65rem; }
  .bsm-order-customer { grid-template-columns: 1fr 1fr; }.bsm-order-customer span:last-child { grid-column: 1/-1; }
  .bsm-order-table > div { grid-template-columns: 1fr .7fr .4fr; }.bsm-order-table > div span:nth-child(2) { display: none; }
  .bsm-order-mock > footer { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }
  .bsm-production-board, .bsm-insight-card { min-width: 680px; transform: scale(.55); }
  .bsm-real-production, .bsm-real-inventory { min-width: 680px; transform: scale(.55); transform-origin: left top; }
  .bsm-real-screen figcaption { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .bsm-real-screen figcaption b { text-align: left; }
  .bsm-story-production .bsm-story-grid > div:last-child, .bsm-story-insight .bsm-story-grid > div:first-child { min-height: 305px; }
  .bsm-network-visual { min-height: 390px; transform: scale(.85); }
  .network-node { min-width: 110px; }.node-pc { left: -8%; }.node-mobile { right: -8%; }.node-backup { right: -3%; }
  .bsm-release > div { padding: 1.3rem; }.bsm-release .change-columns { grid-template-columns: 1fr; }
  .bsm-final-cta .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bsm-dashboard, .bsm-production-board, .bsm-insight-card { transform: none; }
  .bsm-module-grid article { transition: none; }
}

/* Snipkap 独立官网：CleanShot 式产品叙事 + PixPin 式更新日志。 */
body[data-app="snipkap"] {
  --snipkap-blue: #2d6bff;
  --snipkap-violet: #19bfa3;
  --snipkap-ink: #0c1729;
  --snipkap-muted: #657083;
  --snipkap-line: #e4e9f1;
  --snipkap-radius: 32px;
  color: var(--snipkap-ink);
  background: #fff;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
body[data-app="snipkap"] .site-header {
  background: rgba(255,255,255,.82);
  border-bottom-color: rgba(16,18,24,.07);
  backdrop-filter: blur(22px) saturate(160%);
}
body[data-app="snipkap"] .header-inner { min-height: 72px; }
body[data-app="snipkap"] .brand { gap: .65rem; font-size: 1rem; letter-spacing: -.02em; }
body[data-app="snipkap"] .brand-mark { width: 40px; height: 40px; border-radius: 13px; box-shadow: 0 8px 24px rgba(6,103,242,.22); }
body[data-app="snipkap"] .brand small { color: #8a8e98; font-size: .52rem; letter-spacing: .13em; }
body[data-app="snipkap"] .nav { color: #4f535d; font-size: .82rem; font-weight: 600; }
body[data-app="snipkap"] .snipkap-header-cta { padding: .62rem 1rem; border: 0; color: #fff; background: var(--snipkap-ink); }
body[data-app="snipkap"] .snipkap-header-cta:hover { color: #fff; background: var(--snipkap-blue); }
.snipkap-home { overflow: hidden; }

.snipkap-hero {
  position: relative;
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(45,107,255,.16), transparent 30%),
    radial-gradient(circle at 16% 72%, rgba(25,191,163,.11), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 58%, #edf5f7 100%);
}
.snipkap-hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .38;
  background-image: radial-gradient(rgba(6,103,242,.22) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, transparent, #000 35%, transparent 85%);
}
.snipkap-hero-copy { position: relative; z-index: 2; text-align: center; }
.snipkap-pill {
  display: inline-flex;
  align-items: center;
  margin: 0 0 1.5rem;
  padding: .52rem .82rem;
  border: 1px solid rgba(6,103,242,.15);
  border-radius: 999px;
  color: #245a9c;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 28px rgba(35,75,135,.08);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.snipkap-hero h1 {
  max-width: 980px;
  margin: 0 auto;
  color: var(--snipkap-ink);
  font-size: clamp(3.7rem, 8vw, 7.4rem);
  font-weight: 760;
  line-height: .94;
  letter-spacing: -.075em;
}
.snipkap-hero h1 span {
  color: transparent;
  background: linear-gradient(100deg, #245fe5 0%, #2d6bff 48%, #16a98f 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.snipkap-hero-lead {
  max-width: 720px;
  margin: 1.75rem auto 0;
  color: #626a78;
  font-size: clamp(1rem, 1.7vw, 1.23rem);
  line-height: 1.8;
}
.snipkap-hero .hero-download { margin-top: 2rem; }
.snipkap-hero .hero-actions { justify-content: center; }
.snipkap-hero .button { min-height: 52px; padding-inline: 1.5rem; }
.snipkap-hero .button-primary { color: #fff; background: var(--snipkap-ink); box-shadow: 0 16px 40px rgba(16,18,24,.2); }
.snipkap-hero .button-primary:hover { background: var(--snipkap-blue); }
.snipkap-hero .button-secondary { color: #2f3440; border-color: #d8dce4; background: rgba(255,255,255,.78); }
.snipkap-hero .platform-picker { justify-content: center; color: #747985; }
.snipkap-hero .platform-picker button { color: #515764; border-color: #d8dce4; background: #fff; }
.snipkap-hero .platform-picker button[aria-pressed="true"] { color: #fff; border-color: var(--snipkap-blue); background: var(--snipkap-blue); }
.snipkap-trust { display: flex; justify-content: center; gap: 1.25rem; margin: 1.4rem 0 0; color: #7b808b; font-size: .72rem; }

.snipkap-product-stage {
  position: relative;
  z-index: 2;
  width: min(1100px, 100%);
  margin: clamp(3.2rem, 7vw, 6rem) auto 0;
  padding: clamp(1rem, 2vw, 1.7rem);
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 42px;
  background: rgba(255,255,255,.48);
  box-shadow: 0 50px 120px rgba(46,84,150,.22), inset 0 0 0 1px rgba(20,70,150,.06);
  backdrop-filter: blur(18px);
  transform: perspective(1500px) rotateX(3deg);
  transform-origin: center bottom;
}
.snipkap-desktop {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 28px;
  background: #111827;
  box-shadow: 0 2px 0 rgba(255,255,255,.75) inset;
}
.snipkap-wallpaper { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(135deg, #10284c 0%, #2466c9 48%, #70d8c3 100%); }
.wallpaper-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.orb-one { width: 58%; aspect-ratio: 1; top: -28%; right: -6%; background: radial-gradient(circle at 32% 38%, #d9fbff, #4c9ee8 44%, #2455a4 72%); }
.orb-two { width: 50%; aspect-ratio: 1; bottom: -40%; left: 5%; background: radial-gradient(circle at 55% 44%, #c4f5df, #36b99d 52%, #164f70 78%); }
.capture-selection { position: absolute; inset: 14% 18% 20% 15%; border: 2px solid #fff; background: rgba(255,255,255,.06); box-shadow: 0 0 0 999px rgba(7,12,28,.42); }
.selection-size { position: absolute; top: -30px; left: 0; padding: .28rem .5rem; border-radius: .35rem; color: #fff; background: rgba(7,12,28,.82); font: 600 .65rem "Cascadia Code", monospace; }
.selection-handle { position: absolute; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--snipkap-blue); }
.handle-tl { top: -6px; left: -6px; }.handle-tr { top: -6px; right: -6px; }.handle-bl { bottom: -6px; left: -6px; }.handle-br { right: -6px; bottom: -6px; }
.capture-toolbar { position: absolute; z-index: 4; bottom: 9%; left: 50%; display: flex; align-items: center; gap: .32rem; padding: .45rem; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; color: #f5f7fb; background: rgba(18,22,34,.88); box-shadow: 0 16px 44px rgba(3,5,12,.34); backdrop-filter: blur(16px); transform: translateX(-50%); }
.capture-toolbar span, .capture-toolbar b { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .55rem; border-radius: 8px; font-size: .76rem; }
.capture-toolbar span { background: rgba(255,255,255,.07); }
.capture-toolbar b { font-weight: 650; background: rgba(255,255,255,.1); }
.capture-toolbar .toolbar-primary { color: #fff; background: var(--snipkap-blue); }
.capture-hud { position: absolute; z-index: 3; top: 23%; left: 9%; display: grid; padding: .65rem .75rem; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; aspect-ratio: 1; place-content: center; color: #fff; background: rgba(17,24,39,.84); box-shadow: 0 10px 36px rgba(0,0,0,.28); text-align: center; }
.capture-hud strong { font-size: .7rem; }.capture-hud span { font-size: .48rem; opacity: .7; }
.pinned-shot { position: absolute; z-index: 5; display: grid; gap: .22rem; width: 22%; padding: 1rem; border: 1px solid rgba(255,255,255,.55); border-radius: 16px; color: #fff; background: rgba(25,32,56,.62); box-shadow: 0 20px 50px rgba(0,0,0,.28); backdrop-filter: blur(16px); }
.pinned-shot span { color: #c8d5ff; font-size: .55rem; font-weight: 700; letter-spacing: .1em; }.pinned-shot strong { font-size: .75rem; line-height: 1.4; }
.pin-one { top: 8%; right: 4%; transform: rotate(3deg); }.pin-two { right: 7%; bottom: 8%; transform: rotate(-4deg); }
.stage-float-card { position: absolute; right: -2%; bottom: 8%; display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.82); border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 18px 44px rgba(34,65,115,.2); backdrop-filter: blur(16px); transform: rotate(2deg); }
.float-dot { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: #2fca79; box-shadow: 0 0 0 5px rgba(47,202,121,.13); }.stage-float-card strong { font-size: .78rem; }.stage-float-card small { color: #858a94; font-size: .58rem; }

.snipkap-workflows { padding: clamp(6rem, 11vw, 10rem) 0; background: #fff; }
.snipkap-section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.snipkap-section-head.centered { margin-inline: auto; text-align: center; }
.snipkap-section-head > p, .story-kicker { margin: 0 0 .8rem; color: var(--snipkap-blue); font: 750 .68rem "Cascadia Code", monospace; letter-spacing: .14em; }
.snipkap-section-head h2, .story-copy h2, .snipkap-native h2, .snipkap-final-cta h2 { margin: 0; font-size: clamp(2.6rem, 5.6vw, 5.3rem); line-height: 1.02; letter-spacing: -.065em; }
.snipkap-section-head > span { display: block; max-width: 650px; margin-top: 1.3rem; color: var(--snipkap-muted); font-size: 1rem; line-height: 1.8; }
.snipkap-section-head.centered > span { margin-inline: auto; }
.workflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.workflow-card { min-height: 310px; padding: 1.6rem; border: 1px solid var(--snipkap-line); border-radius: 24px; background: linear-gradient(145deg, #fff, #fafbfe); box-shadow: 0 18px 45px rgba(30,43,75,.05); transition: transform .3s ease, box-shadow .3s ease; }
.workflow-card:hover { transform: translateY(-7px); box-shadow: 0 26px 60px rgba(30,43,75,.1); }
.workflow-icon { display: flex; align-items: flex-start; justify-content: space-between; min-height: 130px; }
.workflow-icon span { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(145deg, var(--snipkap-blue), var(--snipkap-violet)); box-shadow: 0 14px 30px rgba(61,92,224,.24); font-size: 1.25rem; font-weight: 760; }
.workflow-icon i { color: #b2b6bf; font: normal .62rem "Cascadia Code", monospace; }
.workflow-card h3 { margin: 1rem 0 .6rem; font-size: 1.25rem; letter-spacing: -.035em; }
.workflow-card p { margin: 0; color: var(--snipkap-muted); font-size: .86rem; line-height: 1.75; }

.snipkap-story { padding: clamp(6rem, 11vw, 10rem) 0; }
.story-capture { background: #f4f7fb; }
.story-annotate { color: #f6f9fc; background: #0b1728; }
.story-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.story-grid-reverse .story-copy { grid-column: 2; }.story-grid-reverse .story-visual { grid-row: 1; grid-column: 1; }
.story-copy > p:not(.story-kicker) { max-width: 570px; margin: 1.4rem 0; color: #686f7d; font-size: 1rem; line-height: 1.85; }
.story-annotate .story-copy > p:not(.story-kicker) { color: #aeb5c0; }
.story-copy ul { display: grid; gap: .65rem; margin: 1.4rem 0 0; padding: 0; list-style: none; color: #4f5663; font-size: .87rem; }
.story-annotate .story-copy ul { color: #c3c8d1; }
.story-copy li::before { margin-right: .65rem; color: var(--snipkap-blue); content: "✓"; font-weight: 800; }
.story-visual { min-width: 0; }
.capture-demo { padding: clamp(1rem, 2vw, 1.7rem); border: 1px solid #fff; border-radius: 30px; background: linear-gradient(145deg, #dceafd, #dcf5ef); box-shadow: 0 34px 80px rgba(44,66,105,.16); }
.demo-window { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 24px 50px rgba(35,46,80,.18); }
.demo-window-bar { display: flex; gap: 6px; height: 10%; padding: 1.1rem; border-bottom: 1px solid #eceef2; }.demo-window-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dfe2e8; }
.demo-content { display: grid; gap: 1rem; padding: 8%; }.demo-content span { height: 18px; border-radius: 999px; background: #edf0f5; }.demo-content span:nth-child(2) { width: 68%; }.demo-content span:nth-child(3) { width: 82%; }
.demo-selection { position: absolute; inset: 23% 13% 17% 20%; border: 2px solid var(--snipkap-blue); box-shadow: 0 0 0 999px rgba(28,34,48,.25); }.demo-selection b { position: absolute; top: -25px; left: -2px; padding: .2rem .4rem; color: #fff; background: var(--snipkap-blue); font-size: .55rem; }
.demo-magnifier { position: absolute; right: 7%; bottom: 8%; display: grid; width: 112px; aspect-ratio: 1; place-content: center; border: 6px solid #fff; border-radius: 50%; color: #fff; background: #19bfa3; box-shadow: 0 16px 34px rgba(18,99,88,.26); text-align: center; }.demo-magnifier strong { font-size: .75rem; }.demo-magnifier small { font-size: .48rem; opacity: .8; }
.annotate-demo { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem) 1.5rem 5rem; border: 1px solid rgba(255,255,255,.09); border-radius: 30px; background: radial-gradient(circle at 70% 20%, rgba(87,103,255,.28), transparent 30%), #1b202a; box-shadow: 0 38px 90px rgba(0,0,0,.34); }
.annotate-canvas { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, #edf6ff, #d8e6fa 45%, #f4dceb); }
.annotation-box { position: absolute; top: 18%; right: 15%; bottom: 25%; left: 18%; border: 5px solid #ff3f67; border-radius: 14px; transform: rotate(-2deg); }
.annotation-arrow { position: absolute; right: 20%; bottom: 12%; color: #ff3f67; font-size: 5rem; font-weight: 200; transform: rotate(-12deg); }
.annotate-canvas strong { position: absolute; top: 26%; left: 25%; padding: .45rem .75rem; border-radius: 8px; color: #fff; background: #ff3f67; font-size: clamp(.7rem, 1.3vw, 1rem); transform: rotate(-2deg); }
.annotation-blur { position: absolute; right: 5%; top: 8%; width: 22%; height: 17%; border-radius: 7px; background: repeating-linear-gradient(45deg, rgba(25,33,49,.7) 0 6px, rgba(86,100,125,.75) 6px 12px); filter: blur(2px); }
.annotate-tools { position: absolute; right: 7%; bottom: 1.5rem; left: 7%; display: flex; justify-content: center; gap: .45rem; }.annotate-tools b { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #e9ecf4; background: #292f3c; font-size: .8rem; }

.snipkap-bento { padding: clamp(6rem, 11vw, 10rem) 0; background: #fff; }
.bento-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(2, minmax(330px, auto)); gap: 1rem; }
.bento-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; padding: clamp(1.6rem, 3vw, 2.5rem); border: 1px solid var(--snipkap-line); border-radius: 30px; background: #f7f8fb; }
.bento-card > div:first-child { position: relative; z-index: 2; max-width: 520px; }.bento-card span { color: var(--snipkap-blue); font: 750 .64rem "Cascadia Code", monospace; letter-spacing: .12em; }.bento-card h3 { margin: .75rem 0 .55rem; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -.045em; }.bento-card p { margin: 0; color: var(--snipkap-muted); font-size: .86rem; line-height: 1.75; }
.bento-long { grid-row: 1 / 3; min-height: 680px; color: #fff; background: linear-gradient(155deg, #225bd3 0%, #2d6bff 52%, #19aa93 100%); }.bento-long span, .bento-long p { color: rgba(255,255,255,.8); }
.long-page { position: absolute; right: 8%; bottom: -7%; display: grid; gap: 1rem; width: 58%; min-height: 68%; padding: 2rem; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 30px 80px rgba(19,20,72,.32); transform: rotate(5deg); }.long-page i { height: 16px; border-radius: 999px; background: #e9ecf3; }.long-page i:nth-child(even) { width: 72%; }.long-page i:nth-child(3) { height: 110px; border-radius: 14px; background: linear-gradient(135deg, #d9ecff, #f2dffb); }.long-page b { position: absolute; right: -22px; bottom: 15%; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: var(--snipkap-blue); background: #fff; box-shadow: 0 12px 28px rgba(22,28,70,.28); }
.bento-gif { background: #12151c; color: #fff; }.bento-gif p { color: #aeb5c2; }.gif-timeline { display: flex; align-items: center; gap: .45rem; margin-top: 2rem; padding: 1rem; border-radius: 14px; background: #222733; }.gif-timeline b { color: #ff4964; font-size: .62rem; }.gif-timeline span { width: 34px; height: 40px; border-radius: 7px; background: linear-gradient(145deg, #2b79ed, #8956e7); }.gif-timeline i { margin-left: auto; color: #cbd1dc; font: normal .65rem "Cascadia Code", monospace; }
.bento-pin { background: linear-gradient(145deg, #f3f8ff, #eaf9f5); }.pin-stack { position: relative; min-height: 145px; margin-top: 2rem; }.pin-stack i { position: absolute; right: 12%; bottom: 0; width: 58%; aspect-ratio: 16 / 10; border: 6px solid #fff; border-radius: 14px; background: linear-gradient(135deg, #76c8ef, #386fce); box-shadow: 0 18px 35px rgba(49,70,93,.2); }.pin-stack i:nth-child(2) { right: 23%; bottom: 16px; background: linear-gradient(135deg, #ffd49f, #ff8d72); transform: rotate(-8deg); }.pin-stack i:nth-child(3) { right: 4%; bottom: 24px; background: linear-gradient(135deg, #79dfb8, #2f8aa6); transform: rotate(7deg); }

.snipkap-native { padding: clamp(6rem, 11vw, 10rem) 0; color: #fff; background: #091525; }
.native-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem, 7vw, 7rem); align-items: end; }
.snipkap-native p:not(.story-kicker) { max-width: 620px; margin: 1.5rem 0 0; color: #aeb5c1; line-height: 1.85; }
.snipkap-native dl { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border-top: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.14); }
.snipkap-native dl div { padding: 1.5rem; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }.snipkap-native dt { font-size: clamp(2.8rem, 5vw, 4.7rem); font-weight: 750; line-height: 1; letter-spacing: -.06em; }.snipkap-native dd { margin: .6rem 0 0; color: #949ca9; font-size: .76rem; }

body[data-app="snipkap"] .section-discovery { min-height: auto; padding: clamp(6rem, 10vw, 9rem) 0; background: #f5f7fa; }
body[data-app="snipkap"] .section-discovery::before, body[data-app="snipkap"] .section-discovery::after { display: none; }
body[data-app="snipkap"] .section-discovery > .container { transform: none; }
body[data-app="snipkap"] .section-discovery .section-head h2 { color: var(--snipkap-ink); font-size: clamp(2.5rem, 5vw, 4.6rem); }
body[data-app="snipkap"] .seo-card { border-color: #e4e7ec; border-radius: 22px; background: #fff; }

.snipkap-releases { padding: clamp(6rem, 11vw, 10rem) 0; background: #fff; }
.snipkap-release-list { display: grid; gap: 0; border-top: 1px solid var(--snipkap-line); }
.snipkap-release { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); padding: clamp(3rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--snipkap-line); }
.snipkap-release-meta { align-self: start; position: sticky; top: 104px; }
.snipkap-release-meta span { display: inline-flex; padding: .35rem .62rem; border-radius: 999px; color: #747986; background: #f1f2f5; font-size: .62rem; font-weight: 750; }
.snipkap-release.is-latest .snipkap-release-meta span { color: #075dd8; background: #e9f2ff; }
.snipkap-release-meta h3 { margin: 1rem 0 .2rem; font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.06em; }.snipkap-release-meta time { color: #9196a0; font-size: .75rem; }
.release-summary { max-width: 760px; margin: 0 0 2rem; color: #555c68; font-size: 1.02rem; line-height: 1.85; }
.release-download-block { margin-bottom: 2.5rem; padding: 1.4rem; border: 1px solid #dfe7f2; border-radius: 18px; background: #f7faff; }
.release-download-block h4, .release-notes-grid h4 { margin: 0 0 1rem; font-size: .85rem; }.release-download-block > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }.release-download-block a { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .75rem .85rem; border: 1px solid #e1e6ed; border-radius: 11px; background: #fff; font-size: .72rem; }.release-download-block a:hover { color: var(--snipkap-blue); border-color: var(--snipkap-blue); }.release-download-block a b { color: var(--snipkap-blue); white-space: nowrap; }
.release-notes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }.release-notes-grid section { min-width: 0; }.release-notes-grid ul { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }.release-notes-grid li { position: relative; padding-left: 1.1rem; color: #646b77; font-size: .82rem; line-height: 1.75; }.release-notes-grid li::before { position: absolute; top: .72em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--snipkap-blue); content: ""; }

.snipkap-faq { padding: clamp(6rem, 10vw, 9rem) 0; background: #f5f7fa; }
.snipkap-faq .faq { max-width: 1000px; margin-inline: auto; }.snipkap-faq details { border-color: #e1e4ea; background: #fff; box-shadow: none; }.snipkap-faq summary { font-size: .92rem; }
.snipkap-final-cta { padding: clamp(6rem, 11vw, 10rem) 0; color: #fff; background: radial-gradient(circle at 50% 0%, #4e84ff, transparent 40%), linear-gradient(145deg, #174bb8, #2d6bff 58%, #13927e); text-align: center; }
.snipkap-final-cta img { width: 72px; height: 72px; border-radius: 22px; box-shadow: 0 18px 46px rgba(15,20,80,.3); }.snipkap-final-cta p { margin: 1.5rem 0 .6rem; color: rgba(255,255,255,.72); font-size: .75rem; font-weight: 700; letter-spacing: .12em; }.snipkap-final-cta h2 { max-width: 900px; margin-inline: auto; }.snipkap-final-cta .button { margin-top: 2rem; color: #152039; background: #fff; box-shadow: 0 18px 50px rgba(19,24,91,.28); }.snipkap-final-cta > .container > span { display: block; margin-top: 1rem; color: rgba(255,255,255,.68); font-size: .68rem; }
body[data-app="snipkap"] .section-privacy { min-height: auto; padding: 5rem 0; background: #11141a; border: 0; }.snipkap-home + .site-footer, body[data-app="snipkap"] .site-footer { color: #a8afba; background: #0b0d12; border-color: rgba(255,255,255,.09); }

@media (max-width: 980px) {
  .workflow-grid { grid-template-columns: repeat(2, 1fr); }
  .story-grid, .native-grid { grid-template-columns: 1fr; }
  .story-grid-reverse .story-copy, .story-grid-reverse .story-visual { grid-column: auto; }
  .story-grid-reverse .story-copy { grid-row: 1; }
  .bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }.bento-long { grid-row: auto; grid-column: 1 / -1; min-height: 600px; }
  .release-download-block > div { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body[data-app="snipkap"] .header-inner { min-height: 62px; }
  body[data-app="snipkap"] .snipkap-header-cta { display: inline-flex; font-size: .7rem; }
  .snipkap-hero { padding-top: 4rem; }
  .snipkap-hero h1 { font-size: clamp(3rem, 15vw, 4.7rem); }
  .snipkap-hero-lead { font-size: .94rem; }
  .snipkap-trust { align-items: center; flex-direction: column; gap: .35rem; }
  .snipkap-product-stage { border-radius: 24px; transform: none; }.snipkap-desktop { border-radius: 17px; }.capture-toolbar span:nth-child(n+5), .capture-toolbar b:not(.toolbar-primary), .capture-hud, .stage-float-card { display: none; }.capture-toolbar span, .capture-toolbar b { min-width: 27px; height: 27px; }.pinned-shot { width: 28%; padding: .55rem; }.pinned-shot strong { display: none; }
  .workflow-grid, .bento-grid { grid-template-columns: 1fr; }.workflow-card { min-height: 250px; }.bento-long { grid-column: auto; min-height: 520px; }.bento-card { min-height: 330px; }
  .story-grid { gap: 3rem; }.story-grid, .native-grid { grid-template-columns: minmax(0, 1fr); }.story-copy h2, .snipkap-section-head h2, .snipkap-native h2, .snipkap-final-cta h2 { font-size: clamp(2.45rem, 12vw, 3.9rem); }.story-visual { width: 100%; min-width: 0; }.demo-magnifier { width: 82px; }.annotation-arrow { font-size: 3rem; }
  .snipkap-release { grid-template-columns: 1fr; gap: 1.5rem; }.snipkap-release-meta { position: static; }.snipkap-release-meta h3 { display: inline-block; margin: .8rem .6rem .2rem 0; }.release-notes-grid { grid-template-columns: 1fr; }
  .snipkap-faq .faq { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  body[data-app="snipkap"] .brand small { display: none; }
  .snipkap-pill { font-size: .58rem; }
  .snipkap-hero h1 { letter-spacing: -.065em; }
  .snipkap-hero .hero-actions { align-items: stretch; flex-direction: column; }.snipkap-hero .button { width: 100%; }
  .selection-size, .pin-two { display: none; }.capture-selection { inset: 13% 10% 18%; }.pin-one { width: 34%; }
  .long-page { width: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .snipkap-product-stage, .workflow-card { transform: none; transition: none; }
}

/* Snipkap 滚动视差：背景、文案与产品界面采用不同移动速度。 */
body[data-app="snipkap"] .brand small { display: none; }
.snipkap-home [data-scroll-section] {
  --parallax-shift: 0px;
  --content-shift: 0px;
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.snipkap-home [data-scroll-section] > .container { position: relative; z-index: 2; }
.snipkap-workflows::before,
.snipkap-bento::before,
.snipkap-releases::before,
.snipkap-faq::before {
  position: absolute;
  z-index: 0;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle, rgba(45,107,255,.11), rgba(25,191,163,.045) 46%, transparent 70%);
  filter: blur(4px);
  transform: translate3d(0, var(--parallax-shift), 0);
  will-change: transform;
}
.snipkap-workflows::before { top: -18%; right: -14%; }
.snipkap-bento::before { top: 8%; left: -18%; }
.snipkap-releases::before { top: 4%; right: -16%; }
.snipkap-faq::before { top: -26%; left: -12%; opacity: .65; }
.snipkap-hero-copy,
.story-copy,
.snipkap-native .native-grid > div:first-child,
.snipkap-final-cta > .container {
  transform: translate3d(0, var(--content-shift), 0);
  transition: transform .08s linear;
  will-change: transform;
}
.snipkap-product-stage,
.story-visual,
.snipkap-native dl {
  transform: translate3d(0, var(--parallax-shift), 0);
  transition: transform .08s linear;
  will-change: transform;
}
.snipkap-product-stage { transform: translate3d(0, var(--parallax-shift), 0) perspective(1500px) rotateX(3deg); }
.story-annotate::before,
.snipkap-native::before,
.snipkap-final-cta::before {
  position: absolute;
  z-index: 0;
  width: min(72vw, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle, rgba(56,123,255,.2), rgba(25,191,163,.06) 44%, transparent 70%);
  transform: translate3d(0, var(--parallax-shift), 0);
  will-change: transform;
}
.story-annotate::before { top: -42%; right: -22%; }
.snipkap-native::before { top: -38%; left: -24%; }
.snipkap-final-cta::before { top: -70%; left: 14%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%); }
.motion-ready .snipkap-home [data-scroll-section] .snipkap-section-head,
.motion-ready .snipkap-home [data-scroll-section] .workflow-card,
.motion-ready .snipkap-home [data-scroll-section] .story-copy,
.motion-ready .snipkap-home [data-scroll-section] .story-visual,
.motion-ready .snipkap-home [data-scroll-section] .bento-card,
.motion-ready .snipkap-home [data-scroll-section] .native-grid > *,
.motion-ready .snipkap-home [data-scroll-section] .snipkap-release,
.motion-ready .snipkap-home [data-scroll-section] .snipkap-final-cta > .container {
  opacity: 0;
  transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .08s linear;
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready .snipkap-home [data-scroll-section].is-visible .snipkap-section-head,
.motion-ready .snipkap-home [data-scroll-section].is-visible .workflow-card,
.motion-ready .snipkap-home [data-scroll-section].is-visible .story-copy,
.motion-ready .snipkap-home [data-scroll-section].is-visible .story-visual,
.motion-ready .snipkap-home [data-scroll-section].is-visible .bento-card,
.motion-ready .snipkap-home [data-scroll-section].is-visible .native-grid > *,
.motion-ready .snipkap-home [data-scroll-section].is-visible .snipkap-release,
.motion-ready .snipkap-home [data-scroll-section].is-visible .snipkap-final-cta > .container { opacity: 1; }

@media (max-width: 720px) {
  .snipkap-product-stage,
  .story-visual,
  .story-copy,
  .snipkap-native dl,
  .snipkap-native .native-grid > div:first-child,
  .snipkap-final-cta > .container {
    transform: none;
    transition: opacity .6s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snipkap-home [data-scroll-section] *,
  .snipkap-home [data-scroll-section]::before {
    transform: none !important;
    transition: none !important;
  }
}

/* IMS — connected inventory product site. */
:root { --ims-blue: #0d9488; --ims-blue-dark: #115e59; --ims-cyan: #2dd4bf; --ims-ink: #173c3a; --ims-muted: #667d7a; --ims-line: #dce9e6; --ims-pale: #f2f8f6; }
body[data-app="ims"] { color: var(--ims-ink); background: #fff; }
body[data-app="ims"] .site-header { border-color: rgba(18,40,75,.08); background: rgba(255,255,255,.9); }
body[data-app="ims"] .header-inner { min-height: 72px; }
body[data-app="ims"] .brand-mark { border-radius: 11px; box-shadow: 0 7px 20px rgba(36,107,253,.18); }
body[data-app="ims"] .brand small { color: #7d8ba0; letter-spacing: .12em; }
body[data-app="ims"] .nav a { color: #52627a; }
body[data-app="ims"] .nav a:hover { color: var(--ims-blue); }
.ims-header-cta { border: 0; color: #fff; background: var(--ims-blue); box-shadow: 0 10px 25px rgba(36,107,253,.2); }
.ims-home { color: var(--ims-ink); background: #fff; overflow: hidden; }
.ims-home h1, .ims-home h2, .ims-home h3, .ims-home p { text-wrap: balance; }
.ims-hero { position: relative; min-height: min(850px, calc(100svh - var(--header-height))); padding: clamp(5rem, 8vw, 8rem) 0 clamp(7rem, 10vw, 10rem); overflow: hidden; background: radial-gradient(circle at 82% 16%, rgba(45,212,191,.17), transparent 27%), radial-gradient(circle at 8% 36%, rgba(13,148,136,.1), transparent 28%), linear-gradient(155deg, #f8fcfb 0%, #edf8f5 48%, #fbfdfc 100%); }
.ims-hero::before { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(32,89,170,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(32,89,170,.07) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to right, transparent, #000 30%, #000 84%, transparent); content: ""; }
.ims-hero-orbit { position: absolute; top: -48%; right: -18%; width: min(78vw, 1050px); aspect-ratio: 1; border: 1px solid rgba(13,148,136,.1); border-radius: 50%; box-shadow: inset 0 0 0 110px rgba(13,148,136,.015), inset 0 0 0 230px rgba(45,212,191,.018); pointer-events: none; }
.ims-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(465px,.88fr) minmax(610px,1.12fr); align-items: center; gap: clamp(2.8rem, 5vw, 5.5rem); }
.ims-pill { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.3rem; color: var(--ims-blue-dark); font: 750 .68rem "Cascadia Code", monospace; letter-spacing: .09em; }
.ims-pill i { width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--ims-cyan); box-shadow: 0 0 0 5px rgba(24,184,165,.13); }
.ims-hero h1 { max-width: 780px; margin: 0; color: var(--ims-ink); font-size: clamp(3.35rem, 5.35vw, 5.85rem); line-height: 1.04; letter-spacing: -.07em; }
.ims-hero h1 span, .ims-hero h1 em { display: block; white-space: nowrap; }
.ims-hero h1 em { margin-top: .08em; color: var(--ims-blue); font-style: normal; }
.ims-hero-copy > p:not(.ims-pill) { max-width: 38rem; margin: 1.65rem 0 0; color: #576b86; font-size: 1.04rem; line-height: 1.9; }
.ims-hero .hero-download { margin-top: 2rem; }
.ims-hero .button { min-height: 50px; }
.ims-hero .button-primary { color: #fff; background: var(--ims-blue); box-shadow: 0 15px 34px rgba(36,107,253,.24); }
.ims-hero .button-secondary { border-color: rgba(16,33,60,.14); color: var(--ims-ink); background: rgba(255,255,255,.76); }
.ims-download-coming .button[aria-disabled="true"] { cursor: default; opacity: .82; }
.ims-download-coming .platform-picker { max-width: 35rem; line-height: 1.6; }
.ims-hero .platform-picker { color: #728198; }
.ims-hero .platform-picker button { color: var(--ims-blue-dark); background: #fff; }
.ims-trust { display: flex; flex-wrap: wrap; gap: .75rem 1.3rem; margin-top: 1.5rem; color: #64758c; font-size: .74rem; font-weight: 650; }
.ims-trust span::first-letter { color: var(--ims-cyan); }
.ims-hero-visual { position: relative; min-width: 0; perspective: 1500px; }
.ims-dashboard { overflow: hidden; width: min(880px, 60vw); border: 1px solid rgba(123,151,189,.22); border-radius: 19px; background: #fff; box-shadow: 0 45px 100px rgba(45,81,128,.2), 0 10px 30px rgba(38,83,142,.09); transform: rotateY(-4deg) rotateX(2deg); transform-origin: left center; }
.ims-window-bar { display: flex; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid #e7ebf1; color: #778498; background: #fbfcfe; font-size: .55rem; }
.ims-window-bar > span { display: flex; gap: 5px; }.ims-window-bar > span i { width: 7px; height: 7px; border-radius: 50%; background: #d7dde7; }.ims-window-bar b { margin-left: 13px; color: #46566c; }.ims-window-bar em { margin-left: auto; font-style: normal; }
.ims-app-shell { display: grid; grid-template-columns: 126px 1fr; min-height: 510px; }
.ims-sidebar { display: flex; flex-direction: column; gap: 3px; padding: 15px 10px 11px; color: #aab8ca; background: #122747; }
.ims-sidebar-brand { display: flex; align-items: center; gap: 7px; padding: 0 7px 15px; color: #fff; }.ims-sidebar-brand img { width: 24px; height: 24px; border-radius: 7px; }.ims-sidebar-brand b { font-size: .74rem; letter-spacing: .06em; }
.ims-sidebar > span { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 7px; font-size: .55rem; }.ims-sidebar > span i { width: 17px; color: #6f86a4; font-style: normal; font-size: .68rem; text-align: center; }.ims-sidebar > span.is-active { color: #fff; background: linear-gradient(90deg, rgba(36,107,253,.48), rgba(36,107,253,.14)); }.ims-sidebar > span.is-active i { color: #64d6c7; }.ims-sidebar > small { margin: auto auto 0; color: #5e7697; font-size: .38rem; letter-spacing: .07em; }
.ims-dashboard-main { min-width: 0; padding: 18px 20px; background: #f6f8fc; }
.ims-dashboard-main > header { display: flex; align-items: center; justify-content: space-between; }.ims-dashboard-main > header div { display: flex; flex-direction: column; gap: 3px; }.ims-dashboard-main > header small { color: #8492a6; font-size: .5rem; }.ims-dashboard-main > header strong { font-size: .85rem; }.ims-dashboard-main > header > span { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #e2e8f0; border-radius: 999px; color: #718098; background: #fff; font-size: .44rem; }.ims-dashboard-main > header > span i { width: 5px; height: 5px; border-radius: 50%; background: var(--ims-cyan); box-shadow: 0 0 0 3px rgba(24,184,165,.12); }
.ims-kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 15px; }.ims-kpi-row article { display: flex; min-width: 0; min-height: 84px; flex-direction: column; padding: 12px; border: 1px solid #e8edf4; border-radius: 10px; background: #fff; }.ims-kpi-row span { color: #7c899c; font-size: .47rem; }.ims-kpi-row b { margin-top: 7px; color: #263a55; font-size: .82rem; letter-spacing: -.03em; }.ims-kpi-row small { margin-top: auto; color: #7e8ca0; font-size: .4rem; }.ims-kpi-row small.up { color: #0f9e82; }.ims-kpi-row small.alert { color: #ee7c32; }
.ims-dashboard-grid { display: grid; grid-template-columns: 1.45fr .8fr; gap: 10px; margin-top: 10px; }.ims-dashboard-grid > article { min-width: 0; min-height: 300px; padding: 15px; border: 1px solid #e8edf4; border-radius: 11px; background: #fff; }
.ims-sales-chart > header { display: flex; justify-content: space-between; }.ims-sales-chart > header div { display: flex; flex-direction: column; gap: 3px; }.ims-sales-chart > header b, .ims-stock-list > header b { font-size: .62rem; }.ims-sales-chart > header span { color: #8b97a8; font-size: .42rem; }.ims-sales-chart > header strong { color: var(--ims-blue); font-size: .8rem; }
.ims-chart-area { position: relative; height: 195px; margin-top: 16px; overflow: hidden; }.ims-chart-area .line { position: absolute; right: 0; left: 0; height: 1px; background: #edf1f6; }.ims-chart-area .l1 { top: 20%; }.ims-chart-area .l2 { top: 50%; }.ims-chart-area .l3 { top: 80%; }.ims-chart-area svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ims-sales-chart > footer { display: flex; justify-content: space-between; color: #98a3b3; font-size: .39rem; }
.ims-stock-list > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }.ims-stock-list > header span { color: var(--ims-blue); font-size: .41rem; }.ims-stock-list > div { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid #edf1f5; }.ims-stock-list > div > i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; font-style: normal; font-size: .42rem; }.ims-stock-list i.orange { color: #e5792f; background: #fff0e4; }.ims-stock-list i.blue { color: #3375e8; background: #eaf2ff; }.ims-stock-list i.green { color: #14967f; background: #e7f8f4; }.ims-stock-list div span { min-width: 0; }.ims-stock-list div b { display: block; overflow: hidden; font-size: .46rem; text-overflow: ellipsis; white-space: nowrap; }.ims-stock-list div small { display: block; overflow: hidden; margin-top: 4px; color: #8c98a9; font-size: .36rem; text-overflow: ellipsis; white-space: nowrap; }.ims-stock-list div > em { color: #ec7b34; font: 700 .57rem sans-serif; }
.ims-float-card { position: absolute; z-index: 3; display: grid; grid-template-columns: 30px 1fr; column-gap: 9px; min-width: 180px; padding: 12px 14px; border: 1px solid rgba(116,145,184,.2); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 17px 45px rgba(37,71,115,.18); backdrop-filter: blur(12px); }.ims-float-card > i { grid-row: 1 / 3; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: var(--ims-cyan); font: normal 700 .65rem sans-serif; }.ims-float-card span { color: #2a3e58; font-size: .53rem; font-weight: 700; }.ims-float-card b { margin-top: 3px; color: #8491a3; font-size: .4rem; }.ims-float-card.float-sync { right: -3%; bottom: 5%; }.ims-float-card.float-order { top: 13%; left: -5%; }.ims-float-card.float-order > i { background: #ee8237; }
.ims-signal-strip { padding: 1.3rem 0; color: #e5f7f3; background: #153f3b; }.ims-signal-strip .container { display: grid; grid-template-columns: .8fr 2.2fr; align-items: center; gap: 3rem; }.ims-signal-strip p { margin: 0; color: #8db8b2; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }.ims-signal-strip dl { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; }.ims-signal-strip dl div { padding: .55rem 1.5rem; border-left: 1px solid rgba(255,255,255,.12); }.ims-signal-strip dt { font-size: 1.5rem; font-weight: 750; letter-spacing: -.04em; }.ims-signal-strip dd { margin: .3rem 0 0; color: #79a7a1; font-size: .61rem; }
.ims-section-head { max-width: 850px; margin-bottom: clamp(3rem, 6vw, 5rem); }.ims-section-head.centered { margin-inline: auto; text-align: center; }.ims-section-head > p, .ims-insight-copy > p, .ims-local-copy > p { margin: 0 0 1rem; color: var(--ims-blue); font: 750 .68rem "Cascadia Code", monospace; letter-spacing: .11em; }.ims-section-head h2, .ims-insight-copy h2, .ims-local-copy h2 { margin: 0; font-size: clamp(2.7rem, 5vw, 5rem); line-height: 1.06; letter-spacing: -.062em; }.ims-section-head > span { display: block; max-width: 700px; margin-top: 1.4rem; color: var(--ims-muted); font-size: .94rem; line-height: 1.85; }.ims-section-head.centered > span { margin-inline: auto; }
.ims-capabilities { padding: clamp(7rem, 12vw, 11rem) 0; background: #fff; }
.ims-capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }.ims-capability-grid article { position: relative; display: flex; min-height: 350px; flex-direction: column; overflow: hidden; padding: clamp(1.6rem, 2.6vw, 2.5rem); border: 1px solid var(--ims-line); border-radius: 25px; background: var(--ims-pale); transition: transform .25s ease, box-shadow .25s ease; }.ims-capability-grid article:hover { box-shadow: 0 24px 60px rgba(42,71,111,.11); transform: translateY(-5px); }.ims-capability-grid article.wide { grid-column: span 2; color: #fff; background: linear-gradient(145deg, #1553d8, #246bfd 56%, #1ab3a0); }.ims-capability-top { display: flex; align-items: center; justify-content: space-between; }.ims-capability-top > i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: var(--ims-blue); background: #fff; box-shadow: 0 9px 22px rgba(40,72,116,.09); font-style: normal; font-weight: 750; }.ims-capability-top small { color: #9aa6b6; font: 700 .65rem "Cascadia Code", monospace; }.ims-capability-grid .wide small { color: rgba(255,255,255,.62); }.ims-capability-grid h3 { margin: 2.3rem 0 .8rem; font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.05em; }.ims-capability-grid p { max-width: 560px; margin: 0; color: #6b7a8e; font-size: .86rem; line-height: 1.8; }.ims-capability-grid .wide p { color: rgba(255,255,255,.76); }.ims-capability-grid article > span { margin-top: auto; padding-top: 1.5rem; color: var(--ims-blue); font-size: .68rem; font-weight: 700; }.ims-capability-grid .wide > span { color: #fff; }
.ims-purchase-mini { position: absolute; right: clamp(1.5rem, 4vw, 4rem); bottom: -1rem; width: min(43%, 350px); padding: 1.3rem; border: 1px solid rgba(255,255,255,.22); border-radius: 17px 17px 0 0; color: #2b3d56; background: rgba(255,255,255,.94); box-shadow: 0 22px 50px rgba(18,37,103,.24); }.ims-purchase-mini > div { display: flex; justify-content: space-between; }.ims-purchase-mini small { color: #78879a !important; font-size: .54rem; }.ims-purchase-mini b { font-size: .63rem; }.ims-purchase-mini > i { display: block; height: 7px; margin: 1rem 0; overflow: hidden; border-radius: 99px; background: #e9eef5; }.ims-purchase-mini > i em { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ims-blue), var(--ims-cyan)); }.ims-purchase-mini footer { display: flex; justify-content: space-between; color: #77869a; font-size: .47rem; }
.ims-flow { padding: clamp(7rem, 12vw, 11rem) 0; background: #f4f7fb; }
.ims-flow ol { display: grid; grid-template-columns: repeat(5,1fr); margin: 0; padding: 0; list-style: none; }.ims-flow li { position: relative; display: flex; align-items: center; flex-direction: column; padding: 0 1rem; text-align: center; }.ims-flow li > div { display: grid; position: relative; width: 66px; height: 66px; place-items: center; border: 1px solid #dfe7f1; border-radius: 19px; color: var(--ims-blue); background: #fff; box-shadow: 0 10px 28px rgba(42,72,111,.08); }.ims-flow li > div i { font-style: normal; font-size: 1.15rem; }.ims-flow li > div small { position: absolute; top: -8px; right: -8px; display: grid; width: 25px; height: 25px; place-items: center; border: 3px solid #f4f7fb; border-radius: 50%; color: #fff; background: var(--ims-blue); font: 700 .46rem sans-serif; }.ims-flow li > b { margin-top: 1.2rem; font-size: .95rem; }.ims-flow li > span { margin-top: .45rem; color: #7a899d; font-size: .63rem; }.ims-flow li > em { position: absolute; top: 24px; right: -8px; color: #b9c5d4; font-style: normal; font-size: 1.25rem; }
.ims-flow-card { max-width: 1000px; margin: 5rem auto 0; overflow: hidden; border: 1px solid #dfe6f0; border-radius: 21px; background: #fff; box-shadow: 0 30px 80px rgba(44,74,112,.12); }.ims-flow-card > header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid #e8edf4; }.ims-flow-card > header span { display: flex; align-items: center; gap: .6rem; color: #4d6078; font-size: .72rem; font-weight: 700; }.ims-flow-card > header span i { width: 8px; height: 8px; border-radius: 50%; background: var(--ims-cyan); box-shadow: 0 0 0 5px rgba(24,184,165,.11); }.ims-flow-card > header > b { padding: .4rem .7rem; border-radius: 999px; color: #128a77; background: #e7f8f4; font-size: .58rem; }.ims-flow-card > div { display: grid; grid-template-columns: repeat(4,1fr); padding: 2rem 1.5rem; }.ims-flow-card > div span { padding-left: 1.5rem; border-left: 1px solid #e7ecf2; }.ims-flow-card > div span:first-child { border-left: 0; }.ims-flow-card small { display: block; color: #8b98a9; font-size: .6rem; }.ims-flow-card > div b { display: block; margin-top: .5rem; font-size: .82rem; }.ims-flow-card .profit { color: #0c9a81; }.ims-flow-card > footer { display: flex; align-items: center; justify-content: center; padding: 1rem; color: #617289; background: #f8fafc; font-size: .61rem; }.ims-flow-card > footer span { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }.ims-flow-card > footer span i { width: 16px; height: 16px; border: 4px solid #dce5ef; border-radius: 50%; }.ims-flow-card > footer span.done i { border-color: var(--ims-cyan); background: #fff; }.ims-flow-card > footer em { width: min(9vw, 90px); height: 1px; margin: 0 .7rem; background: #d6e0eb; }
.ims-insight { position: relative; padding: clamp(7rem, 12vw, 11rem) 0; overflow: hidden; color: #fff; background: radial-gradient(circle at 80% 20%, rgba(36,107,253,.28), transparent 28%), radial-gradient(circle at 10% 90%, rgba(24,184,165,.16), transparent 28%), #0d203b; }.ims-insight::before { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to bottom, #000, transparent); content: ""; }.ims-insight-grid { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(4rem, 8vw, 8rem); }.ims-insight-copy > p { color: #65d8cb; }.ims-insight-copy > span { display: block; margin-top: 1.5rem; color: #aebed2; line-height: 1.9; }.ims-insight-copy ul { display: grid; gap: .75rem; margin: 1.6rem 0 0; padding: 0; color: #c4d0df; list-style: none; font-size: .8rem; }.ims-insight-copy li::before { margin-right: .7rem; color: #5ed7c8; content: "✓"; font-weight: 800; }
.ims-insight-board { min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid rgba(255,255,255,.13); border-radius: 25px; background: rgba(255,255,255,.07); box-shadow: 0 35px 90px rgba(0,0,0,.28); backdrop-filter: blur(16px); }.ims-insight-board > header { display: flex; align-items: flex-start; justify-content: space-between; }.ims-insight-board > header div { display: flex; flex-direction: column; }.ims-insight-board > header small { color: #89a1bf; font-size: .65rem; }.ims-insight-board > header div > b { margin-top: .5rem; font-size: 3.4rem; line-height: 1; letter-spacing: -.07em; }.ims-insight-board > header div > b em { color: #6f86a3; font-size: .8rem; font-style: normal; letter-spacing: 0; }.ims-insight-board > header > span { padding: .5rem .75rem; border: 1px solid rgba(92,216,201,.23); border-radius: 999px; color: #94abc5; background: rgba(24,184,165,.08); font-size: .58rem; }.ims-insight-board > header > span b { color: #5bd6c6; }
.ims-health-bars { display: grid; gap: 1rem; margin-top: 2rem; padding: 1.5rem 0; border-block: 1px solid rgba(255,255,255,.1); }.ims-health-bars > div { display: grid; grid-template-columns: 90px 1fr 38px; align-items: center; gap: 1rem; color: #c4d0df; font-size: .62rem; }.ims-health-bars > div > i { display: block; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }.ims-health-bars > div > i em { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ims-blue), #55d6c6); }.ims-health-bars > div > b { color: #7f96b2; font-size: .58rem; }
.ims-warehouse-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; margin-top: 1.5rem; }.ims-warehouse-row article { display: grid; grid-template-columns: 8px 1fr; align-items: center; column-gap: .7rem; padding: 1rem; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(0,0,0,.12); }.ims-warehouse-row article > i { grid-row: 1 / 3; width: 8px; height: 36px; border-radius: 99px; background: var(--ims-blue); }.ims-warehouse-row article:nth-child(2) > i { background: #54d4c4; }.ims-warehouse-row article:nth-child(3) > i { background: #e8a45e; }.ims-warehouse-row article span b { display: block; font-size: .63rem; }.ims-warehouse-row article span small { display: block; margin-top: .35rem; color: #7e94ae; font-size: .45rem; }.ims-warehouse-row article > em { grid-column: 2; margin-top: .6rem; color: #9db0c7; font-style: normal; font-size: .52rem; }
.ims-local { padding: clamp(7rem, 12vw, 11rem) 0; background: #fff; }.ims-local-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(4rem, 8vw, 8rem); }.ims-local-visual { position: relative; min-height: 570px; border: 1px solid #e0e8f1; border-radius: 28px; background: radial-gradient(circle at center, rgba(36,107,253,.12), transparent 35%), linear-gradient(#f7faff, #f2f7fc); box-shadow: inset 0 0 80px rgba(44,86,147,.06); }.ims-local-visual::before { position: absolute; inset: 0; border-radius: inherit; opacity: .3; background-image: radial-gradient(#8ca6c7 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(circle, #000, transparent 70%); content: ""; }.ims-local-core { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; width: 170px; height: 170px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(36,107,253,.22); border-radius: 50%; background: #fff; box-shadow: 0 25px 60px rgba(36,79,137,.18); transform: translate(-50%,-50%); }.ims-local-core::before { position: absolute; inset: -25px; border: 1px dashed rgba(36,107,253,.22); border-radius: 50%; content: ""; }.ims-local-core > span { color: var(--ims-blue); font: 750 .52rem "Cascadia Code", monospace; letter-spacing: .12em; }.ims-local-core img { width: 54px; height: 54px; margin: .65rem 0; border-radius: 15px; }.ims-local-core b { font-size: .72rem; }.ims-local-core small { margin-top: .35rem; color: #8795a8; font-size: .48rem; }.ims-local-node { position: absolute; z-index: 2; display: grid; grid-template-columns: 36px 1fr; column-gap: .7rem; min-width: 150px; padding: .9rem; border: 1px solid #dfe7f0; border-radius: 13px; background: #fff; box-shadow: 0 15px 35px rgba(42,76,121,.11); }.ims-local-node > i { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--ims-blue); background: #edf3ff; font-style: normal; }.ims-local-node b { font-size: .67rem; }.ims-local-node small { margin-top: .3rem; color: #8b99aa; font-size: .47rem; }.node-manager { top: 12%; left: 8%; }.node-warehouse { top: 20%; right: 5%; }.node-backup { right: 12%; bottom: 10%; }.ims-connection { position: absolute; z-index: 1; height: 1px; background: linear-gradient(90deg, rgba(36,107,253,.15), rgba(36,107,253,.75)); transform-origin: left; }.ims-connection::after { position: absolute; top: -3px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--ims-cyan); box-shadow: 0 0 0 4px rgba(24,184,165,.12); content: ""; }.ims-connection.c1 { top: 33%; left: 29%; width: 24%; transform: rotate(25deg); }.ims-connection.c2 { top: 39%; left: 57%; width: 25%; transform: rotate(-31deg); }.ims-connection.c3 { top: 59%; left: 58%; width: 29%; transform: rotate(37deg); }
.ims-local-copy > span { display: block; margin-top: 1.5rem; color: var(--ims-muted); line-height: 1.9; }.ims-local-copy > div { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--ims-line); }.ims-local-copy article { display: grid; grid-template-columns: 44px 1fr; padding: 1.3rem 0; border-bottom: 1px solid var(--ims-line); }.ims-local-copy article > i { grid-row: 1 / 3; color: var(--ims-blue); font: normal 700 .63rem "Cascadia Code", monospace; }.ims-local-copy article b { font-size: .85rem; }.ims-local-copy article span { margin-top: .35rem; color: #8290a2; font-size: .68rem; }
.ims-releases { padding: clamp(7rem, 11vw, 10rem) 0; background: #f5f8fc; }.ims-releases .coming { border: 1px solid #dfe6ef; border-radius: 18px; color: #78879a; background: #fff; box-shadow: none; }.ims-releases .release-history { border-color: #dce5ef; }.ims-releases .release-row { border-color: #dfe6ef; }
.ims-faq { padding: clamp(7rem, 11vw, 10rem) 0; background: #fff; }.ims-faq .faq { max-width: 1000px; margin-inline: auto; }.ims-faq details { border-color: #dfe6ef; border-radius: 14px; box-shadow: none; }.ims-faq details[open] { border-color: rgba(36,107,253,.28); box-shadow: 0 18px 45px rgba(42,76,120,.08); }.ims-faq summary { font-size: .9rem; }
.ims-final-cta { padding: clamp(5rem, 9vw, 8rem) 0; color: #fff; background: radial-gradient(circle at 85% 0%, rgba(86,218,202,.28), transparent 27%), linear-gradient(125deg, #164fbf, #246bfd 60%, #149e8e); }.ims-final-cta .container { display: flex; align-items: end; justify-content: space-between; gap: 3rem; }.ims-final-cta p { margin: 0 0 1rem; color: rgba(255,255,255,.66); font: 750 .66rem "Cascadia Code", monospace; letter-spacing: .12em; }.ims-final-cta h2 { margin: 0; font-size: clamp(2.8rem, 5vw, 5rem); line-height: 1.05; letter-spacing: -.06em; }.ims-final-cta span { display: block; margin-top: 1.2rem; color: rgba(255,255,255,.74); }.ims-final-cta .button { flex: none; color: var(--ims-blue-dark); background: #fff; box-shadow: 0 18px 50px rgba(12,38,99,.25); }
body[data-app="ims"] .section-privacy { min-height: auto; padding: 5rem 0; border: 0; color: #aab7c9; background: #10213a; }
body[data-app="ims"] .section-privacy .privacy-support-copy h2 { color: #fff; }
body[data-app="ims"] .section-privacy .privacy-support-copy > p:not(.section-kicker) { color: #b7c5d6; }
.ims-home + .site-footer, body[data-app="ims"] .site-footer { color: #91a0b4; border-color: rgba(255,255,255,.08); background: #0b182b; }

@media (max-width: 1180px) {
  .ims-hero-grid { grid-template-columns: .8fr 1.2fr; }.ims-dashboard { width: 760px; }.ims-float-card.float-sync { right: -12%; }.ims-app-shell { min-height: 460px; }.ims-chart-area { height: 150px; }.ims-dashboard-grid > article { min-height: 255px; }
}
@media (max-width: 980px) {
  .ims-hero { padding-top: 4rem; }.ims-hero-grid { grid-template-columns: 1fr; }.ims-hero-copy { max-width: 760px; }.ims-dashboard { width: 100%; transform: none; }.ims-hero-visual { margin-top: 1rem; }.ims-signal-strip .container { grid-template-columns: 1fr; gap: 1rem; }.ims-capability-grid { grid-template-columns: repeat(2,1fr); }.ims-capability-grid article.wide { grid-column: span 2; }.ims-flow ol { grid-template-columns: repeat(5,1fr); }.ims-flow li { padding-inline: .4rem; }.ims-flow li > span { font-size: .56rem; }.ims-insight-grid, .ims-local-grid { grid-template-columns: 1fr; }.ims-insight-copy, .ims-local-copy { max-width: 720px; }.ims-local-copy { grid-row: 1; }.ims-local-visual { min-height: 520px; }.ims-final-cta .container { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 720px) {
  body[data-app="ims"] .header-inner { min-height: 62px; }.ims-header-cta { display: inline-flex; font-size: .66rem; }.ims-hero h1 { font-size: clamp(3.05rem, 14vw, 5rem); }.ims-hero-copy > p:not(.ims-pill) { font-size: .92rem; }.ims-dashboard { overflow: visible; min-width: 680px; transform: scale(.72); transform-origin: left top; }.ims-hero-visual { width: 100%; height: 390px; overflow: hidden; }.ims-float-card { display: none; }.ims-signal-strip dl { grid-template-columns: repeat(2,1fr); }.ims-signal-strip dl div:nth-child(3) { border-top: 1px solid rgba(255,255,255,.12); }.ims-capability-grid { grid-template-columns: 1fr; }.ims-capability-grid article.wide { grid-column: auto; min-height: 500px; }.ims-purchase-mini { right: 1.5rem; left: 1.5rem; width: auto; }.ims-section-head h2, .ims-insight-copy h2, .ims-local-copy h2 { font-size: clamp(2.55rem, 12vw, 4rem); }.ims-flow ol { grid-template-columns: 1fr; gap: 0; }.ims-flow li { display: grid; grid-template-columns: 66px 1fr; grid-template-rows: auto auto; column-gap: 1.1rem; padding: 0 0 1.5rem; text-align: left; }.ims-flow li > div { grid-row: 1 / 3; }.ims-flow li > b { margin-top: .7rem; }.ims-flow li > span { margin-top: .25rem; font-size: .63rem; }.ims-flow li > em { top: auto; right: auto; bottom: -.1rem; left: 30px; transform: rotate(90deg); }.ims-flow-card > div { grid-template-columns: repeat(2,1fr); gap: 1.5rem 0; }.ims-flow-card > div span:nth-child(3) { border-left: 0; }.ims-flow-card > footer { align-items: flex-start; flex-direction: column; gap: .45rem; padding-left: 2rem; }.ims-flow-card > footer em { width: 1px; height: 16px; margin: 0 0 0 7px; }.ims-warehouse-row { grid-template-columns: 1fr; }.ims-local-visual { min-height: 470px; }.ims-local-node { min-width: 135px; }.node-manager { left: 4%; }.node-warehouse { right: 3%; }.node-backup { right: 6%; }.ims-final-cta h2 { font-size: clamp(2.7rem, 12vw, 4rem); }
}
@media (max-width: 440px) {
  body[data-app="ims"] .brand small { display: none; }.ims-pill { font-size: .55rem; }.ims-hero .hero-actions { align-items: stretch; flex-direction: column; }.ims-hero .button { width: 100%; }.ims-dashboard { transform: scale(.58); }.ims-hero-visual { height: 320px; }.ims-signal-strip dl div { padding-inline: .8rem; }.ims-capability-grid article { min-height: 320px; }.ims-capability-grid article.wide { min-height: 520px; }.ims-flow-card > header { align-items: flex-start; flex-direction: column; gap: .8rem; }.ims-local-visual { min-height: 430px; }.ims-local-core { width: 140px; height: 140px; }.ims-local-node { min-width: 122px; padding: .7rem; }.ims-local-node > i { width: 30px; height: 30px; }.ims-local-node { grid-template-columns: 30px 1fr; }.ims-local-node small { display: none; }.node-manager { top: 9%; }.node-warehouse { top: 24%; }.ims-final-cta .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ims-capability-grid article, .ims-dashboard { transform: none; transition: none; }
}

/* AIOPS 官网：借鉴现代 SSH 产品站的沉浸式叙事，但保留岚豚自己的本地发布与回滚能力。 */
body[data-app="aiops"] {
  --aiops-night: #080b11;
  --aiops-panel: #10151e;
  --aiops-panel-2: #171d28;
  --aiops-blue: #3794ff;
  --aiops-green: #50e3a4;
  --aiops-ink: #111827;
  --aiops-muted: #647083;
  background: #f7f8fa;
}
body[data-app="aiops"] .site-header.aiops-header {
  color: #f6f9ff;
  background: rgba(8,11,17,.86);
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(1.2);
}
body[data-app="aiops"] .aiops-header .brand-mark {
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 10px 28px rgba(0,0,0,.32);
}
body[data-app="aiops"] .aiops-header .brand small,
body[data-app="aiops"] .aiops-header .nav { color: #8f9bad; }
body[data-app="aiops"] .aiops-header .nav a:hover { color: #fff; }
body[data-app="aiops"] .aiops-header .back-link {
  color: #08120f;
  border-color: var(--aiops-green);
  background: var(--aiops-green);
}

.aiops-home { color: var(--aiops-ink); background: #f7f8fa; }
.aiops-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-height));
  padding: clamp(4.75rem, 9vw, 8rem) 0 0;
  overflow: hidden;
  color: #f4f8ff;
  background:
    radial-gradient(circle at 50% 8%, rgba(55,148,255,.25), transparent 28rem),
    radial-gradient(circle at 15% 55%, rgba(80,227,164,.07), transparent 24rem),
    linear-gradient(180deg, #080b11 0%, #0b1018 72%, #111823 100%);
}
.aiops-grid-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .42;
  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: 54px 54px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.aiops-hero-copy { position: relative; z-index: 2; max-width: 1200px; text-align: center; }
.aiops-pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.5rem;
  padding: .46rem .78rem;
  border: 1px solid rgba(141,190,255,.18);
  border-radius: 999px;
  color: #aab6c7;
  background: rgba(255,255,255,.035);
  font: .68rem/1.2 "Cascadia Code", "Microsoft YaHei", monospace;
  letter-spacing: .07em;
}
.aiops-pill i,
.aiops-preview-status i,
.chip-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--aiops-green); box-shadow: 0 0 0 5px rgba(80,227,164,.1); }
.aiops-hero h1 {
  margin: 0;
  font-size: clamp(3.2rem, 6.2vw, 6.4rem);
  line-height: 1.15;
  letter-spacing: .052em;
  font-weight: 760;
}
.aiops-title-line { display: block; white-space: nowrap; }
.aiops-title-line + .aiops-title-line { margin-top: .04em; }
.aiops-hero h1 .aiops-title-accent {
  color: transparent;
  background: linear-gradient(90deg, #fff 8%, #8dbdff 52%, #55e7aa 96%);
  -webkit-background-clip: text;
  background-clip: text;
}
.aiops-hero-lead {
  max-width: 730px;
  margin: 1.8rem auto 0;
  color: #aab5c5;
  font-size: clamp(1rem, 1.65vw, 1.2rem);
  line-height: 1.85;
}
.aiops-hero .hero-download { margin-top: 1.8rem; }
.aiops-hero .hero-actions,
.aiops-hero .platform-picker { justify-content: center; }
.aiops-hero .button-primary { color: #07110d; background: var(--aiops-green); box-shadow: 0 18px 44px rgba(80,227,164,.18); }
.aiops-hero .button-secondary { color: #e8eff8; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.045); }
.aiops-hero .platform-picker { color: #788597; }
.aiops-hero .platform-picker button { color: #d7e0ea; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.aiops-hero .platform-picker button[aria-pressed="true"] { color: #07110d; border-color: var(--aiops-green); background: var(--aiops-green); }
.aiops-hero-trust { display: flex; justify-content: center; gap: 1.2rem; margin-top: 1.3rem; color: #7f8da0; font-size: .72rem; flex-wrap: wrap; }

.aiops-hero-stage {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 2rem));
  margin-top: clamp(3rem, 6vw, 5.5rem);
  padding: 0 clamp(.25rem, 2vw, 1.5rem);
  perspective: 1500px;
}
.aiops-preview {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #11161f;
  box-shadow: 0 -1px 0 rgba(255,255,255,.08), 0 44px 110px rgba(0,0,0,.55), 0 0 100px rgba(55,148,255,.1);
  transform: rotateX(1.6deg);
  transform-origin: center bottom;
}
.aiops-preview-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 54px; padding: 0 1rem; border-bottom: 1px solid rgba(255,255,255,.08); background: #171c25; }
.aiops-window-dots { display: flex; gap: 7px; }
.aiops-window-dots i { width: 9px; height: 9px; border-radius: 50%; background: #47505e; }
.aiops-window-dots i:first-child { background: #f0645d; }
.aiops-window-dots i:nth-child(2) { background: #d9a946; }
.aiops-window-dots i:last-child { background: #52b86f; }
.aiops-preview-tabs { display: flex; gap: .25rem; padding: .25rem; border-radius: 10px; background: #0f131a; }
.aiops-preview-tabs button { min-width: 72px; padding: .4rem .8rem; border: 0; border-radius: 8px; color: #738094; background: transparent; cursor: pointer; font-size: .72rem; }
.aiops-preview-tabs button[aria-selected="true"] { color: #f6f9ff; background: #273141; box-shadow: none; }
.aiops-preview-status { justify-self: end; display: inline-flex; align-items: center; gap: .5rem; color: #7f8da0; font: .6rem "Cascadia Code", monospace; letter-spacing: .12em; }
.aiops-preview-screen { position: relative; aspect-ratio: 16 / 9.5; overflow: hidden; background: #1e1e1e; }
.aiops-product-panel { width: 100%; height: 100%; animation: aiops-screen-in .42s ease both; }
.aiops-product-panel[hidden] { display: none; }
@keyframes aiops-screen-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
.aiops-ui {
  display: grid;
  grid-template-columns: 5.8em 22em minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 52em;
  overflow: hidden;
  color: #d7dde7;
  background: #151922;
  font: clamp(6px, .66vw, 10px)/1.45 "Segoe UI", "Microsoft YaHei", sans-serif;
  text-align: left;
}
.aiops-ui button { min-width: 0; padding: 0; border: 0; color: inherit; background: none; font: inherit; text-align: left; }
.aiops-ui button,
.aiops-ui label { pointer-events: none; }
.aiops-ui-rail { display: flex; flex-direction: column; align-items: center; gap: 1.2em; padding: 1.2em .7em; border-right: 1px solid #2a303b; background: #10131a; }
.aiops-ui-rail b { display: grid; width: 3.2em; height: 3.2em; place-items: center; margin-bottom: .8em; border-radius: .8em; color: #06130e; background: #50e3a4; font-size: .9em; letter-spacing: -.04em; }
.aiops-ui-rail span { display: grid; width: 3.4em; height: 3.4em; place-items: center; border-radius: .8em; color: #7f8998; font-size: 1.25em; }
.aiops-ui-rail span.is-active { color: #eaf1fb; background: #26303d; box-shadow: none; }
.aiops-ui-rail i { flex: 1; }
.aiops-ui-sidebar { display: flex; flex-direction: column; gap: .6em; min-width: 0; padding: 1.6em 1.2em; border-right: 1px solid #2a303b; background: #191e27; }
.aiops-ui-sidebar > header { display: flex; align-items: center; justify-content: space-between; min-height: 3em; margin-bottom: .5em; color: #eef3fa; font-weight: 650; }
.aiops-ui-sidebar > header button { display: grid; width: 2.6em; height: 2.6em; place-items: center; border: 1px solid #39414d; border-radius: .7em; color: #aab4c2; }
.aiops-ui-search { display: block; margin-bottom: 1em; padding: .75em .9em; overflow: hidden; border: 1px solid #323a46; border-radius: .65em; color: #687486; background: #12161e; white-space: nowrap; }
.aiops-ui-sidebar > small { margin: .8em .5em .2em; color: #626d7d; font-size: .85em; text-transform: uppercase; letter-spacing: .05em; }
.aiops-host,
.aiops-app-item,
.aiops-side-link { display: flex; align-items: center; gap: .9em; width: 100%; padding: .85em .8em !important; border-radius: .8em !important; color: #bbc5d1 !important; }
.aiops-host.is-active,
.aiops-app-item.is-active,
.aiops-side-link.is-active { background: #29313e !important; box-shadow: none; }
.aiops-host > i { width: .7em; height: .7em; flex: 0 0 auto; border-radius: 50%; background: #50e3a4; box-shadow: 0 0 0 .35em rgba(80,227,164,.08); }
.aiops-host.idle > i { background: #697384; box-shadow: none; }
.aiops-host > span,
.aiops-app-item > span,
.aiops-side-link > span { display: grid; min-width: 0; flex: 1; }
.aiops-host b,
.aiops-app-item b,
.aiops-side-link b { overflow: hidden; color: #dce3ec; font-size: .95em; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.aiops-host em,
.aiops-app-item em,
.aiops-side-link em { overflow: hidden; color: #717d8e; font-size: .78em; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.aiops-host strong { color: #697587; font-size: .75em; font-weight: 500; }
.aiops-app-item > i,
.aiops-side-link > i { display: grid; width: 2.8em; height: 2.8em; flex: 0 0 auto; place-items: center; border-radius: .7em; color: #aab7c9; background: #333c49; font-size: .78em; font-style: normal; font-weight: 700; }
.aiops-app-item > i.nginx { color: #64df9e; background: rgba(35,166,96,.16); }
.aiops-app-item > i.redis { color: #ff8787; background: rgba(224,73,73,.14); }
.aiops-app-item > i.mysql { color: #6eb4ff; background: rgba(55,148,255,.14); }
.aiops-app-item strong { color: #667284; font-size: 1.2em; }
.aiops-lock-card { display: grid; gap: .2em; margin-top: auto; padding: 1.1em; border: 1px solid #303846; border-radius: .9em; background: #12171f; }
.aiops-lock-card > i { color: #50e3a4; font-style: normal; }
.aiops-lock-card b { color: #cfd8e3; font-size: .9em; }
.aiops-lock-card span { color: #687486; font-size: .74em; }
.aiops-ui-main { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: #1e222b; }
.aiops-terminal-tabs { display: flex; align-items: end; min-height: 4.2em; padding: .6em .9em 0; border-bottom: 1px solid #303641; background: #191d25; }
.aiops-terminal-tabs button { display: flex; align-items: center; gap: .65em; min-width: 14em; padding: .85em 1em !important; border-radius: .65em .65em 0 0 !important; color: #8894a5 !important; }
.aiops-terminal-tabs button.is-active { color: #e5ebf3 !important; background: #222831 !important; box-shadow: none; }
.aiops-terminal-tabs button > i { width: .65em; height: .65em; border-radius: 50%; background: #50e3a4; }
.aiops-terminal-tabs button em { margin-left: auto; color: #667284; font-style: normal; }
.aiops-terminal-tabs button.add { min-width: 3em; }
.aiops-terminal-tabs > span { margin: 0 1em .9em auto; color: #687486; font-size: .75em; }
.aiops-terminal-body { min-height: 0; flex: 1 1 61%; padding: 1.5em 2em; overflow: hidden; color: #c9d1da; background: #171b22; font: 1.05em/1.72 "Cascadia Code", Consolas, monospace; }
.aiops-terminal-body p { margin: 0; white-space: nowrap; }
.aiops-terminal-body p + p { margin-top: .12em; }
.aiops-terminal-body p:nth-child(6) { margin-top: 1.15em; }
.aiops-terminal-body p:nth-child(10) { margin-top: 1.15em; }
.aiops-terminal-body p > i { color: #50e3a4; font-style: normal; }
.aiops-terminal-body p > strong { color: #58a6ff; font-weight: 500; }
.aiops-terminal-body p > b { color: #7c8797; font-weight: 500; }
.aiops-terminal-body .terminal-output { color: #c4ccd6; }
.aiops-terminal-body .terminal-output > i,
.aiops-terminal-body .terminal-dim span,
.aiops-terminal-body .terminal-success { color: #50e3a4; }
.aiops-terminal-body .terminal-dim { color: #6e7989; }
.aiops-terminal-body u { display: inline-block; width: .7em; height: 1.15em; background: #cbd4df; vertical-align: -.2em; animation: aiops-caret 1s steps(1) infinite; }
@keyframes aiops-caret { 50% { opacity: 0; } }
.aiops-sftp { flex: 0 0 25%; min-height: 10em; border-top: 1px solid #303641; background: #1d222a; }
.aiops-sftp > header { display: flex; align-items: center; gap: 1.1em; min-height: 3.6em; padding: 0 1.4em; border-bottom: 1px solid #2d333e; }
.aiops-sftp header b { color: #d8e0ea; }
.aiops-sftp header span { flex: 1; color: #6e7989; }
.aiops-sftp header button { padding: .45em .8em !important; border: 1px solid #39414e !important; border-radius: .55em !important; color: #9ca8b8 !important; }
.aiops-file-row { display: grid; grid-template-columns: 1fr 10em 15em; padding: .55em 1.5em; color: #9ba6b5; }
.aiops-file-row.head { color: #626d7c; background: #191e25; }
.aiops-file-row i { color: #58a6ff; font-style: normal; }
.aiops-ui-status { display: flex; align-items: center; gap: 1.4em; min-height: 2.8em; padding: 0 1.2em; color: #718093; background: #12161c; font-size: .78em; }
.aiops-ui-status span { display: inline-flex; align-items: center; gap: .45em; }
.aiops-ui-status span > i { width: .65em; height: .65em; border-radius: 50%; background: #50e3a4; }
.aiops-ui-status em { margin-left: auto; font-style: normal; }
.aiops-ui-title { display: flex; align-items: center; gap: 1em; min-height: 6.2em; padding: 0 1.8em; border-bottom: 1px solid #303641; background: #1b2028; }
.aiops-ui-title > div { display: grid; margin-right: auto; }
.aiops-ui-title small { color: #717d8d; }
.aiops-ui-title b { color: #eef3f9; font-size: 1.2em; }
.aiops-ui-title button,
.aiops-ui-title .ui-filter { padding: .65em 1em !important; border: 1px solid #38404c !important; border-radius: .65em !important; color: #909cad !important; background: #161a21 !important; }
.aiops-ui-title button.ui-primary { color: #07150f !important; border-color: #50e3a4 !important; background: #50e3a4 !important; font-weight: 650; }
.ui-badge { padding: .45em .75em; border-radius: 999px; color: #ffc36a; background: rgba(255,177,61,.1); font-size: .8em; }
.aiops-editor-layout { display: grid; grid-template-columns: 1fr 27em; gap: 1.2em; min-height: 0; flex: 1; padding: 1.5em; }
.aiops-code-card,
.aiops-release-check,
.aiops-credential-list,
.aiops-credential-detail { overflow: hidden; border: 1px solid #303744; border-radius: 1em; background: #191e26; }
.aiops-code-card > header,
.aiops-release-check > header { display: flex; align-items: center; justify-content: space-between; min-height: 4em; padding: 0 1.3em; border-bottom: 1px solid #303744; }
.aiops-code-card header span,
.aiops-release-check header b { color: #d9e1eb; }
.aiops-code-card header em,
.aiops-release-check header span { color: #50e3a4; font-size: .8em; font-style: normal; }
.aiops-code { display: grid; grid-template-columns: 3em 1fr; padding: 1.1em 0; font: 1em/1.75 "Cascadia Code", Consolas, monospace; }
.aiops-code i { padding-right: 1em; color: #505b6c; font-style: normal; text-align: right; user-select: none; }
.aiops-code code { color: #b9c4d2; }
.aiops-code code:nth-of-type(4),
.aiops-code code:nth-of-type(8) { color: #c792ea; }
.aiops-code code:nth-of-type(5),
.aiops-code code:nth-of-type(9),
.aiops-code code:nth-of-type(10) { color: #82aaff; }
.aiops-release-check { display: flex; flex-direction: column; }
.aiops-release-check ul { display: grid; gap: .9em; margin: 0; padding: 1.2em; list-style: none; }
.aiops-release-check li { display: flex; align-items: center; gap: .9em; padding: .75em; border-radius: .7em; background: #151a21; }
.aiops-release-check li > i { display: grid; width: 2.3em; height: 2.3em; flex: 0 0 auto; place-items: center; border: 1px solid #3b4350; border-radius: 50%; color: #657184; font-style: normal; }
.aiops-release-check li > i.done { color: #07150f; border-color: #50e3a4; background: #50e3a4; }
.aiops-release-check li > i.running { border-color: #3794ff; border-top-color: transparent; animation: aiops-spin 1s linear infinite; }
@keyframes aiops-spin { to { transform: rotate(360deg); } }
.aiops-release-check li span { display: grid; }
.aiops-release-check li b { color: #ccd5df; font-size: .9em; }
.aiops-release-check li em { color: #697587; font-size: .76em; font-style: normal; }
.aiops-release-check footer { display: flex; justify-content: space-between; margin-top: auto; padding: 1.2em; border-top: 1px solid #303744; color: #768295; }
.aiops-release-check footer b { color: #dce3ed; }
.aiops-vault-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1.2em; min-height: 0; flex: 1; padding: 1.5em; }
.aiops-credential-list { display: flex; flex-direction: column; }
.aiops-credential-list > header,
.aiops-credential-list > article { display: grid; grid-template-columns: 1fr 11em 12em; align-items: center; gap: 1em; padding: .9em 1.2em; border-bottom: 1px solid #2d3440; }
.aiops-credential-list > header { color: #687486; background: #171b22; font-size: .82em; }
.aiops-credential-list > article { min-height: 5em; color: #8490a1; }
.aiops-credential-list > article.is-selected { background: rgba(55,148,255,.08); box-shadow: none; }
.aiops-credential-list article > span { display: flex; align-items: center; gap: .8em; min-width: 0; }
.aiops-credential-list article i,
.detail-icon { display: grid; width: 3em; height: 3em; place-items: center; border-radius: .75em; color: #82baff; background: rgba(55,148,255,.13); font-size: .78em; font-style: normal; font-weight: 700; }
.aiops-credential-list article b { overflow: hidden; color: #d2dae4; font-size: .9em; text-overflow: ellipsis; white-space: nowrap; }
.aiops-credential-list article em,
.aiops-credential-list article time { color: #788496; font-size: .82em; font-style: normal; }
.aiops-credential-detail { padding: 1.5em; }
.aiops-credential-detail > small { display: block; margin-top: 1.3em; color: #697587; }
.aiops-credential-detail h3 { margin: .25em 0 1.2em; color: #edf2f8; font-size: 1.25em; }
.aiops-credential-detail dl { display: grid; gap: .8em; margin: 0; }
.aiops-credential-detail dl div { padding: .8em 0; border-bottom: 1px solid #303744; }
.aiops-credential-detail dt { color: #697587; font-size: .8em; }
.aiops-credential-detail dd { margin: .25em 0 0; color: #cbd4de; }
.aiops-credential-detail dd button { float: right; color: #70aeef; }
.aiops-credential-detail > p { margin-top: 1.4em; padding: .8em; border-radius: .7em; color: #80a994; background: rgba(80,227,164,.06); font-size: .78em; }
.aiops-credential-detail > p i { color: #50e3a4; font-style: normal; }
.aiops-credential-detail footer { display: flex; gap: .7em; margin-top: 1.2em; }
.aiops-credential-detail footer button { padding: .6em .8em !important; border: 1px solid #3a424f !important; border-radius: .6em !important; color: #9ca8b8 !important; }
.aiops-float-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: .55rem; padding: .68rem .85rem; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #dce7f5; background: rgba(22,29,40,.86); box-shadow: 0 16px 40px rgba(0,0,0,.3); backdrop-filter: blur(18px); font: .68rem "Cascadia Code", "Microsoft YaHei", monospace; }
.chip-live { top: 22%; left: -1rem; }
.chip-safe { top: 50%; right: -1rem; color: #b8f5d7; }

.aiops-capability-strip { padding: 2.25rem 0; color: #c7d0dc; background: #111823; border-top: 1px solid rgba(255,255,255,.06); }
.aiops-capability-strip > div { display: grid; grid-template-columns: .7fr 2.3fr; align-items: center; gap: 2rem; }
.aiops-capability-strip p { margin: 0; color: #6f7c8e; font: .65rem "Cascadia Code", monospace; letter-spacing: .12em; text-transform: uppercase; }
.aiops-capability-strip dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.aiops-capability-strip dl div { padding: .15rem 1.4rem; border-left: 1px solid rgba(255,255,255,.08); }
.aiops-capability-strip dt { color: #f6f9ff; font-size: 1.05rem; font-weight: 700; }
.aiops-capability-strip dd { margin: .18rem 0 0; color: #7f8da0; font-size: .7rem; }

.aiops-story { position: relative; display: grid; align-items: center; min-height: min(820px, calc(100svh - var(--header-height))); padding: clamp(5rem, 8vw, 7rem) 0; overflow: hidden; background: #f7f8fa; border-bottom: 1px solid #e5e8ed; }
.aiops-story-pipeline { background: #eef3f8; }
.aiops-story-security { background: #f8f9fb; }
.aiops-story-grid { display: grid; grid-template-columns: minmax(300px,.75fr) minmax(480px,1.25fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.aiops-story-grid.reverse { grid-template-columns: minmax(480px,1.25fr) minmax(300px,.75fr); }
.aiops-story-grid.reverse .aiops-story-copy { order: 2; }
.aiops-story-copy > p,
.aiops-section-head > p,
.aiops-final-cta > div > p { margin: 0 0 1rem; color: #277bd7; font: .68rem "Cascadia Code", monospace; letter-spacing: .13em; }
.aiops-story-copy h2,
.aiops-section-head h2 { margin: 0; font-size: clamp(2.75rem, 5vw, 4.8rem); line-height: 1.08; letter-spacing: -.015em; }
.aiops-story-copy > span { display: block; margin-top: 1.5rem; color: var(--aiops-muted); line-height: 1.9; }
.aiops-story-copy ul { display: grid; gap: .75rem; margin: 1.7rem 0 0; padding: 0; list-style: none; color: #334155; font-size: .86rem; }
.aiops-story-copy li { position: relative; padding-left: 1.35rem; }
.aiops-story-copy li::before { position: absolute; left: 0; color: #1ca977; content: "✓"; font-weight: 800; }
.aiops-story-visual { position: relative; padding: clamp(.8rem, 1.4vw, 1.15rem); border: 1px solid #d8dde6; border-radius: 24px; background: #11161f; box-shadow: 0 36px 90px rgba(22,34,53,.18); transform: perspective(1400px) rotateY(-2.5deg) rotateX(1deg); }
.reverse .aiops-story-visual { transform: perspective(1400px) rotateY(2.5deg) rotateX(1deg); }
.aiops-story-visual .aiops-ui { min-height: 50em; border-radius: 14px; font-size: clamp(5px, .53vw, 8px); }
.aiops-visual-label { position: absolute; top: -1.2rem; right: 1.5rem; padding: .45rem .7rem; border: 1px solid #d8dde6; border-radius: 999px; color: #657185; background: rgba(255,255,255,.88); box-shadow: 0 8px 20px rgba(20,31,48,.08); backdrop-filter: blur(10px); font: .58rem "Cascadia Code", monospace; letter-spacing: .08em; }

.aiops-workflow { position: relative; padding: clamp(6rem, 11vw, 9rem) 0; overflow: hidden; color: #f2f6fc; background: radial-gradient(circle at 78% 22%, rgba(55,148,255,.18), transparent 26rem), #090d14; }
.aiops-workflow::before { position: absolute; inset: 0; content: ""; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to right, transparent, #000); }
.aiops-section-head { position: relative; z-index: 1; max-width: 840px; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.aiops-section-head > span { display: block; max-width: 680px; margin-top: 1.4rem; color: #718096; line-height: 1.85; }
.aiops-section-head.centered { margin-inline: auto; text-align: center; }
.aiops-section-head.centered > span { margin-inline: auto; }
.aiops-workflow .aiops-section-head > p { color: var(--aiops-green); }
.aiops-workflow .aiops-section-head > span { color: #8e9aac; }
.aiops-workflow-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); }
.aiops-workflow ol { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.aiops-workflow li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; color: #8794a7; background: rgba(255,255,255,.025); }
.aiops-workflow li > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #8d9caf; background: #161c26; font: .66rem "Cascadia Code", monospace; }
.aiops-workflow li div { display: grid; }
.aiops-workflow li b { color: #e7edf6; font-size: .85rem; }
.aiops-workflow li span { color: #738095; font-size: .7rem; }
.aiops-workflow li em { color: #6f7d90; font-size: .64rem; font-style: normal; }
.aiops-workflow li.is-running { border-color: rgba(80,227,164,.3); background: rgba(80,227,164,.055); box-shadow: 0 0 42px rgba(80,227,164,.05); }
.aiops-workflow li.is-running > i { color: #082117; background: var(--aiops-green); }
.aiops-workflow li.is-running em { color: var(--aiops-green); }
.aiops-workflow aside { padding: clamp(1.8rem, 3.5vw, 3rem); border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: linear-gradient(145deg, rgba(25,33,46,.9), rgba(13,18,26,.92)); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.aiops-workflow aside > p { margin: 0 0 1rem; color: #6e7d91; font: .62rem "Cascadia Code", monospace; letter-spacing: .12em; }
.aiops-workflow aside h3 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.16; letter-spacing: -.012em; }
.aiops-rollback-log { display: grid; gap: .65rem; margin: 2rem 0; padding: 1rem; border-radius: 14px; background: #090d13; font: .68rem "Cascadia Code", "Microsoft YaHei", monospace; }
.aiops-rollback-log span { display: flex; align-items: center; gap: .65rem; color: #8e9daf; }
.aiops-rollback-log i { width: 8px; height: 8px; border-radius: 50%; background: #657386; }
.aiops-rollback-log .ok { background: var(--aiops-green); }
.aiops-rollback-log .error { background: #ff6b6b; }
.aiops-rollback-log .rollback { background: #58a6ff; box-shadow: 0 0 0 5px rgba(88,166,255,.08); }
.aiops-workflow aside small { color: #69778a; line-height: 1.7; }

.aiops-security { padding: clamp(6rem, 11vw, 9rem) 0; background: #f5f7fa; }
.aiops-security-grid { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
.aiops-security-grid article { position: relative; overflow: hidden; min-height: 230px; padding: clamp(1.6rem, 3vw, 2.5rem); border: 1px solid #e0e5ec; border-radius: 22px; background: rgba(255,255,255,.88); box-shadow: 0 18px 55px rgba(25,38,58,.06); }
.aiops-security-grid article.large { grid-row: 1 / 3; min-height: 480px; color: #f2f7ff; background: radial-gradient(circle at 80% 16%, rgba(55,148,255,.27), transparent 16rem), #0c1119; border-color: rgba(255,255,255,.08); }
.aiops-security-grid article > i { color: #2e83e0; font-size: 1.7rem; font-style: normal; }
.aiops-security-grid article.large > i { color: var(--aiops-green); }
.aiops-security-grid h3 { margin: 1.2rem 0 .7rem; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.008em; }
.aiops-security-grid p { margin: 0; max-width: 570px; color: #6d7889; }
.aiops-security-grid .large p { color: #8997a9; }
.aiops-vault-visual { position: absolute; right: clamp(1.6rem,3vw,2.5rem); bottom: clamp(1.6rem,3vw,2.5rem); left: clamp(1.6rem,3vw,2.5rem); display: grid; gap: .65rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.035); }
.aiops-vault-visual span,
.aiops-vault-visual i { color: #69778b; font: .58rem "Cascadia Code", monospace; letter-spacing: .12em; }
.aiops-vault-visual b { color: #e8eef7; font: 1.3rem "Cascadia Code", monospace; letter-spacing: .18em; }
.aiops-vault-visual i { color: var(--aiops-green); font-style: normal; }

.aiops-releases { padding: clamp(6rem, 10vw, 8rem) 0; background: #fff; }
.aiops-releases .release-history { border-top-color: #dce2ea; }
.aiops-releases .release-row { border-bottom-color: #e3e8ee; }
.aiops-faq { padding: clamp(6rem, 10vw, 8rem) 0; background: #f1f4f7; }
.aiops-faq .faq { max-width: 850px; margin-inline: auto; }
.aiops-faq details { border-color: #dce2e9; background: rgba(255,255,255,.7); }
.aiops-final-cta { position: relative; overflow: hidden; padding: clamp(6.5rem, 12vw, 10rem) 0; color: #f5f9ff; text-align: center; background: radial-gradient(circle at 50% 0, rgba(55,148,255,.36), transparent 32rem), #080c13; }
.aiops-final-cta::before { position: absolute; inset: 0; content: ""; 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: 52px 52px; mask-image: radial-gradient(circle at 50% 45%, #000, transparent 70%); }
.aiops-final-cta > div { position: relative; }
.aiops-final-cta > div > p { color: var(--aiops-green); }
.aiops-final-cta h2 { margin: 0; font-size: clamp(3rem, 6vw, 6rem); line-height: 1.06; letter-spacing: -.016em; }
.aiops-final-cta span { display: block; margin: 1.5rem auto 2rem; color: #8794a6; }
.aiops-final-cta .button { color: #07110d; background: var(--aiops-green); box-shadow: 0 20px 50px rgba(80,227,164,.15); }
body[data-app="aiops"] .section-privacy { min-height: auto; }

.motion-ready .aiops-home [data-scroll-section] .aiops-section-head,
.motion-ready .aiops-home [data-scroll-section] .aiops-story-copy,
.motion-ready .aiops-home [data-scroll-section] .aiops-story-visual,
.motion-ready .aiops-home [data-scroll-section] .aiops-workflow-grid > *,
.motion-ready .aiops-home [data-scroll-section] .aiops-security-grid > *,
.motion-ready .aiops-home [data-scroll-section] .release-row,
.motion-ready .aiops-home [data-scroll-section] details {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .72s cubic-bezier(.2,.7,.2,1), transform .82s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready .aiops-home [data-scroll-section].is-visible .aiops-section-head,
.motion-ready .aiops-home [data-scroll-section].is-visible .aiops-story-copy,
.motion-ready .aiops-home [data-scroll-section].is-visible .aiops-story-visual,
.motion-ready .aiops-home [data-scroll-section].is-visible .aiops-workflow-grid > *,
.motion-ready .aiops-home [data-scroll-section].is-visible .aiops-security-grid > *,
.motion-ready .aiops-home [data-scroll-section].is-visible .release-row,
.motion-ready .aiops-home [data-scroll-section].is-visible details { opacity: 1; transform: translate3d(0,0,0); }

@media (max-width: 980px) {
  .aiops-capability-strip > div { grid-template-columns: 1fr; }
  .aiops-capability-strip dl { grid-template-columns: repeat(2, 1fr); gap: 1.3rem 0; }
  .aiops-story-grid,
  .aiops-story-grid.reverse,
  .aiops-workflow-grid { grid-template-columns: 1fr; }
  .aiops-story-grid.reverse .aiops-story-copy { order: 0; }
  .aiops-story-copy { max-width: 680px; }
  .aiops-story-visual,
  .reverse .aiops-story-visual { transform: none; }
  .aiops-security-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .aiops-security-grid article.large { grid-column: 1 / 3; grid-row: auto; }
  .chip-live { left: .25rem; }
  .chip-safe { right: .25rem; }
}

@media (max-width: 720px) {
  body[data-app="aiops"] .aiops-header .brand small { display: none; }
  .aiops-hero { padding-top: 4rem; }
  .aiops-hero h1 { font-size: clamp(1.7rem, 7.4vw, 3.3rem); line-height: 1.18; letter-spacing: .045em; }
  .aiops-hero-lead { font-size: .94rem; }
  .aiops-preview-bar { grid-template-columns: auto 1fr; min-height: 48px; }
  .aiops-preview-tabs { justify-self: end; }
  .aiops-preview-tabs button { min-width: 52px; padding-inline: .55rem; }
  .aiops-preview-status { display: none; }
  .aiops-preview-screen { aspect-ratio: 4 / 3; }
  .aiops-preview-screen .aiops-ui { min-height: 100%; font-size: 5px; }
  .aiops-story-visual .aiops-ui { font-size: 5px; }
  .aiops-float-chip { display: none; }
  .aiops-capability-strip dl { grid-template-columns: 1fr 1fr; }
  .aiops-capability-strip dl div { padding-inline: .8rem; }
  .aiops-story { min-height: auto; }
  .aiops-story-grid { gap: 3rem; }
  .aiops-story-copy h2,
  .aiops-section-head h2 { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .aiops-security-grid { grid-template-columns: 1fr; }
  .aiops-security-grid article.large { grid-column: auto; min-height: 480px; }
  .aiops-workflow li { grid-template-columns: 38px 1fr; }
  .aiops-workflow li em { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .aiops-home *,
  .aiops-home *::before,
  .aiops-home *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* IMS brand alignment: match the desktop product's teal palette and protect semantic lines. */
.ims-capability-grid article.wide { background: linear-gradient(145deg, #115e59, #0d9488 56%, #2bbdaa); }
.ims-insight { background: radial-gradient(circle at 80% 20%, rgba(45,212,191,.24), transparent 28%), radial-gradient(circle at 10% 90%, rgba(13,148,136,.2), transparent 28%), #102f2c; }
.ims-final-cta { background: radial-gradient(circle at 85% 0%, rgba(195,255,246,.22), transparent 27%), linear-gradient(125deg, #115e59, #0d9488 60%, #2bbdaa); }
body[data-app="ims"] .section-privacy { background: #123430; }
.ims-home + .site-footer, body[data-app="ims"] .site-footer { background: #0b2522; }
body[data-app="ims"] .brand-mark { box-shadow: 0 7px 20px rgba(13,148,136,.18); }
.ims-header-cta { box-shadow: 0 10px 25px rgba(13,148,136,.2); }
.ims-hero .button-primary { box-shadow: 0 15px 34px rgba(13,148,136,.24); }
.ims-sidebar > span.is-active { background: linear-gradient(90deg, rgba(13,148,136,.52), rgba(13,148,136,.14)); }
.ims-chart-area svg stop:first-child { stop-color: #0d9488; }
.ims-chart-area svg stop:last-child { stop-color: #0d9488; }
.ims-chart-area svg path:last-child { stroke: #0d9488; }
.ims-local-visual { border-color: #dceae8; background: radial-gradient(circle at center, rgba(13,148,136,.12), transparent 35%), linear-gradient(#f8fcfb, #f0f8f6); box-shadow: inset 0 0 80px rgba(17,94,89,.06); }
.ims-local-core { border-color: rgba(13,148,136,.22); box-shadow: 0 25px 60px rgba(17,94,89,.16); }
.ims-local-core::before { border-color: rgba(13,148,136,.24); }
.ims-local-node > i { background: #e7f7f4; }
.ims-connection { background: linear-gradient(90deg, rgba(13,148,136,.15), rgba(13,148,136,.75)); }
.ims-faq details[open] { border-color: rgba(13,148,136,.3); box-shadow: 0 18px 45px rgba(17,94,89,.08); }
.ims-dashboard--real { margin: 0; background: #f7fbfa; }
.ims-dashboard--real img { display: block; width: 100%; height: auto; }
.ims-product-showcase { padding: clamp(7rem, 11vw, 10rem) 0; background: #f3f9f7; }
.ims-shot-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: start; gap: clamp(1.2rem, 2.4vw, 2rem); }
.ims-shot-card { min-width: 0; margin: 0; }
.ims-shot-card > div { overflow: hidden; border: 1px solid #d9e8e5; border-radius: 22px; background: #fff; box-shadow: 0 28px 70px rgba(17,94,89,.12); }
.ims-shot-card img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.ims-shot-card:hover img { transform: scale(1.012); }
.ims-shot-card--wide { margin-top: 4rem; }
.ims-shot-card figcaption { display: flex; align-items: flex-start; flex-direction: column; gap: .55rem; padding: 1.35rem .35rem 0; }
.ims-shot-card figcaption span { color: var(--ims-blue); font: 750 .64rem "Cascadia Code", monospace; letter-spacing: .1em; }
.ims-shot-card figcaption b { max-width: 520px; color: var(--ims-ink); font-size: .9rem; line-height: 1.65; }

@media (max-width: 980px) {
  .ims-shot-grid { grid-template-columns: 1fr; }
  .ims-shot-card--wide { margin-top: 0; }
}

@media (max-width: 720px) {
  .ims-hero h1 { font-size: clamp(2.7rem, 12vw, 4.3rem); }
  .ims-hero h1 span, .ims-hero h1 em { white-space: normal; }
}

/* 全应用站中文大标题排版：避免负字距、紧行高和移动端字号突增。 */
.hero h1 {
  font-size: clamp(3rem, 5.4vw, 5.2rem);
  line-height: 1.15;
  letter-spacing: .025em;
}
.bsm-hero h1 {
  font-size: clamp(3.2rem, 5.3vw, 5.5rem);
  line-height: 1.15;
  letter-spacing: .025em;
}
.snipkap-hero h1 {
  font-size: clamp(3.4rem, 6.6vw, 6.3rem);
  line-height: 1.14;
  letter-spacing: .03em;
}
.ims-hero h1 {
  font-size: clamp(3.1rem, 5vw, 5.2rem);
  line-height: 1.15;
  letter-spacing: .025em;
}
.section h2,
.bsm-section-head h2,
.bsm-story-copy h2,
.bsm-local h2,
.bsm-final-cta h2,
.snipkap-section-head h2,
.story-copy h2,
.snipkap-native h2,
.snipkap-final-cta h2,
.ims-section-head h2,
.ims-insight-copy h2,
.ims-local-copy h2,
.ims-final-cta h2,
.aiops-story-copy h2,
.aiops-section-head h2,
.aiops-workflow aside h3,
.aiops-final-cta h2,
.seo-article-head h1,
.seo-prose h2,
.seo-faq > h2,
.seo-sources h2,
.seo-related > h2,
.seo-cta h2 {
  line-height: 1.18;
  letter-spacing: .015em;
}

@media (max-width: 720px) {
  .hero h1,
  .bsm-hero h1,
  .snipkap-hero h1,
  .ims-hero h1 {
    font-size: clamp(2rem, 8vw, 3.3rem);
    line-height: 1.2;
    letter-spacing: .03em;
  }
  .bsm-section-head h2,
  .bsm-story-copy h2,
  .bsm-local h2,
  .bsm-final-cta h2,
  .snipkap-section-head h2,
  .story-copy h2,
  .snipkap-native h2,
  .snipkap-final-cta h2,
  .ims-section-head h2,
  .ims-insight-copy h2,
  .ims-local-copy h2,
  .ims-final-cta h2,
  .aiops-story-copy h2,
  .aiops-section-head h2,
  .aiops-final-cta h2,
  .seo-article-head h1 {
    font-size: clamp(1.95rem, 7.4vw, 2.9rem);
    line-height: 1.22;
    letter-spacing: .02em;
  }
}

/* IMS product page layout: keep the real desktop UI readable without overflow or crop. */
.ims-hero-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 3.4vw, 3.5rem);
}
.ims-hero-copy { min-width: 0; }
.ims-hero h1 {
  max-width: 650px;
  font-size: clamp(3rem, 4.15vw, 3.8rem);
}
.ims-hero-visual { width: 100%; }
.ims-dashboard {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  box-shadow: 0 32px 78px rgba(17,94,89,.16), 0 8px 24px rgba(17,94,89,.08);
  transform: none;
}
.ims-product-proof {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  margin: .9rem .2rem 0;
  color: #6f8582;
  font-size: .66rem;
  font-weight: 650;
}
.ims-product-proof i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ims-cyan);
  box-shadow: 0 0 0 4px rgba(45,212,191,.14);
}
.ims-shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ims-shot-card--wide { margin-top: 0; }
.ims-shot-card > div {
  border-radius: 17px;
  box-shadow: 0 20px 55px rgba(17,94,89,.1);
}

@media (max-width: 1180px) {
  .ims-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ims-dashboard { width: 100%; }
}

@media (max-width: 980px) {
  .ims-hero-grid { grid-template-columns: 1fr; }
  .ims-hero-copy { max-width: 760px; }
  .ims-hero-visual { margin-top: 1rem; }
  .ims-dashboard { max-width: 820px; }
  .ims-shot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ims-hero { padding-bottom: 5rem; }
  .ims-dashboard {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    transform: none;
  }
  .ims-hero-visual {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .ims-product-proof { justify-content: flex-start; }
  .ims-shot-card > div { border-radius: 12px; }
}

@media (max-width: 440px) {
  .ims-dashboard { transform: none; }
  .ims-hero-visual { height: auto; }
}

/* Snipkap 2026 product-site rewrite — clear customer story and realistic capture workflow. */
body[data-app="snipkap"] {
  --snipkap-blue: #2868f0;
  --snipkap-violet: #6d5dfc;
  --snipkap-ink: #101116;
  --snipkap-muted: #626773;
  --snipkap-line: #e6e8ed;
  color: var(--snipkap-ink);
  background: #fff;
}
body[data-app="snipkap"] .site-header { background: rgba(255,255,255,.88); }
body[data-app="snipkap"] .snipkap-header-cta { border-radius: 10px; background: #101116; }
.snipkap-home h1, .snipkap-home h2, .snipkap-home h3 { text-wrap: balance; }

.snipkap-hero {
  padding: clamp(5.5rem, 9vw, 8.5rem) 0 clamp(5rem, 8vw, 7rem);
  background: radial-gradient(circle at 50% 30%, rgba(63,115,255,.12), transparent 31%), linear-gradient(180deg, #fff 0%, #f8faff 72%, #fff 100%);
}
.snipkap-hero::before { opacity: .2; background-size: 28px 28px; }
.snipkap-pill { gap: .5rem; color: #3d526f; border-color: #e0e5ef; background: rgba(255,255,255,.88); box-shadow: 0 10px 30px rgba(22,47,86,.06); }
.snipkap-pill i { width: 7px; height: 7px; border-radius: 50%; background: #27b66f; box-shadow: 0 0 0 4px rgba(39,182,111,.12); }
.snipkap-hero h1 {
  max-width: 1050px;
  font-size: clamp(3.5rem, 6.8vw, 6.7rem);
  font-weight: 760;
  line-height: 1.11;
  letter-spacing: .022em;
}
.snipkap-hero h1 span { background: linear-gradient(100deg, #2868f0 8%, #5d78f4 48%, #20a78e 100%); background-clip: text; -webkit-background-clip: text; }
.snipkap-hero-lead { max-width: 690px; margin-top: 1.6rem; color: #5f6570; font-size: clamp(1rem, 1.45vw, 1.17rem); line-height: 1.85; }
.snipkap-hero .hero-download { margin-top: 2rem; }
.snipkap-hero .button { min-height: 54px; border-radius: 12px; }
.snipkap-hero .button-primary { background: #101116; box-shadow: 0 14px 34px rgba(16,17,22,.18); }
.snipkap-hero .button-secondary { border-color: #dfe2e8; background: #fff; }
.snipkap-trust { align-items: center; gap: .8rem; color: #747985; }
.snipkap-trust i { width: 3px; height: 3px; border-radius: 50%; background: #b5b9c2; }

.snipkap-product-stage { width: min(1120px, 100%); margin-top: clamp(3.5rem, 6vw, 5rem); padding: 12px; border: 1px solid #dfe4ec; border-radius: 30px; background: rgba(255,255,255,.9); box-shadow: 0 40px 100px rgba(31,54,93,.18), 0 8px 24px rgba(31,54,93,.08); backdrop-filter: blur(20px); transform: none; }
.snipkap-desktop { aspect-ratio: 16 / 9; border: 1px solid #cfd5df; border-radius: 20px; background: #eef1f5; box-shadow: none; }
.sk-window-bar { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 7%; min-height: 36px; padding: 0 1rem; border-bottom: 1px solid #d8dce3; color: #6d7380; background: rgba(250,251,253,.96); font-size: clamp(.45rem, .7vw, .68rem); }
.sk-window-bar > span { display: flex; gap: 6px; }.sk-window-bar > span i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }.sk-window-bar > span i:nth-child(2) { background: #febc2e; }.sk-window-bar > span i:nth-child(3) { background: #28c840; }
.sk-window-bar b { font-weight: 650; }.sk-window-bar em { justify-self: end; font-style: normal; }
.sk-window-body { position: absolute; inset: 7% 0 0; display: grid; grid-template-columns: 20% 1fr; background: #f6f7f9; }
.sk-app-sidebar { display: flex; flex-direction: column; padding: 5% 10%; border-right: 1px solid #dde1e8; color: #667080; background: #f0f2f6; font-size: clamp(.4rem, .75vw, .72rem); }
.sk-app-sidebar > strong { margin-bottom: 18%; color: #1c2432; font-size: 1.18em; }
.sk-app-sidebar nav { display: grid; gap: .45rem; }.sk-app-sidebar nav span { padding: .65em .8em; border-radius: 7px; }.sk-app-sidebar nav .active { color: #285fcf; background: #e2eaff; font-weight: 700; }
.sk-app-sidebar > small { margin-top: auto; color: #9399a4; }.sk-progress { height: 5px; margin: .6rem 0; overflow: hidden; border-radius: 99px; background: #dce0e7; }.sk-progress i { display: block; width: 75%; height: 100%; background: #2d6bff; }.sk-app-sidebar > b { color: #596272; font-size: .9em; }
.sk-app-canvas { min-width: 0; padding: 4.5% 5%; }.sk-app-canvas > header { display: flex; align-items: center; justify-content: space-between; }.sk-app-canvas header small { color: #9298a3; font-size: clamp(.38rem, .65vw, .62rem); }.sk-app-canvas h3 { margin: .3rem 0 0; font-size: clamp(.8rem, 1.6vw, 1.45rem); letter-spacing: .01em; }.sk-app-canvas header button { padding: .65em 1em; border: 0; border-radius: 7px; color: #fff; background: #2868f0; font-size: clamp(.38rem, .65vw, .62rem); }
.sk-metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; margin-top: 5%; }.sk-metric-row article { position: relative; display: grid; gap: .2rem; padding: 10%; overflow: hidden; border: 1px solid #e2e5eb; border-radius: 10px; background: #fff; }.sk-metric-row span { color: #838995; font-size: clamp(.38rem, .65vw, .62rem); }.sk-metric-row b { font-size: clamp(.8rem, 1.8vw, 1.7rem); }.sk-metric-row i { position: absolute; top: 18%; right: 10%; width: 8px; height: 8px; border-radius: 50%; background: #f7a141; }.sk-metric-row .blue { background: #4780ee; }.sk-metric-row .green { background: #31b77b; }
.sk-chart-card { margin-top: 3%; padding: 3.5% 4%; border: 1px solid #e2e5eb; border-radius: 12px; background: #fff; }.sk-chart-card header { display: flex; justify-content: space-between; font-size: clamp(.38rem, .65vw, .62rem); }.sk-chart-card header span { color: #9298a3; }.sk-bars { display: flex; align-items: end; gap: 7%; height: clamp(70px, 13vw, 150px); margin-top: 4%; border-bottom: 1px solid #e5e8ed; background: repeating-linear-gradient(to top, #edf0f4 0 1px, transparent 1px 33%); }.sk-bars i { width: 7%; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(#6e91f7, #2d6bff); }
.capture-selection { z-index: 3; inset: 13% 11% 15% 25%; border: 2px solid #fff; background: transparent; box-shadow: 0 0 0 999px rgba(13,18,28,.43), 0 0 0 1px rgba(16,20,30,.3); }
.selection-size { top: -28px; border-radius: 6px; background: rgba(14,18,27,.9); }
.sk-annotation-box { position: absolute; top: 17%; right: 13%; width: 29%; height: 27%; border: 4px solid #ff4567; border-radius: 10px; transform: rotate(-2deg); }.sk-annotation-note { position: absolute; top: 9%; right: 15%; padding: .4em .65em; border-radius: 6px; color: #fff; background: #ff4567; font-size: clamp(.42rem, .78vw, .72rem); transform: rotate(-2deg); }.sk-annotation-arrow { position: absolute; right: 26%; bottom: 22%; color: #ff4567; font-size: clamp(1.6rem, 4vw, 4rem); transform: rotate(-18deg); }
.capture-toolbar { bottom: 4%; border: 0; border-radius: 12px; background: rgba(25,29,38,.96); box-shadow: 0 18px 42px rgba(0,0,0,.3); }
.capture-toolbar span { background: transparent; }.capture-toolbar span:hover { background: rgba(255,255,255,.1); }.capture-toolbar b { background: rgba(255,255,255,.09); }
.capture-hud { top: 20%; left: 21%; border: 4px solid #fff; background: #2d6bff; }
.sk-quick-result { position: absolute; z-index: 6; right: -2.5%; bottom: 7%; display: grid; grid-template-columns: auto minmax(105px, 1fr) repeat(3, auto); align-items: center; gap: .55rem; padding: .7rem; border: 1px solid rgba(219,224,233,.9); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 22px 55px rgba(22,34,58,.24); backdrop-filter: blur(18px); }
.sk-result-thumb { position: relative; display: block; width: 52px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 7px; background: linear-gradient(135deg, #dce9ff, #b4c8f5); }.sk-result-thumb::before { position: absolute; inset: 18% 12%; border: 2px solid #ff4567; border-radius: 4px; content: ""; }.sk-result-thumb > span, .sk-result-thumb > i { position: absolute; right: 9%; bottom: 10%; width: 38%; height: 4px; border-radius: 99px; background: #2d6bff; }
.sk-quick-result p { display: grid; gap: .16rem; margin: 0; }.sk-quick-result p strong { font-size: .7rem; }.sk-quick-result p span { color: #8b919c; font-size: .5rem; }.sk-quick-result button { padding: .55rem .65rem; border: 1px solid #e0e3e9; border-radius: 7px; color: #515763; background: #fff; font-size: .56rem; }.sk-quick-result button:last-child { color: #fff; border-color: #2868f0; background: #2868f0; }
.snipkap-product-stage figcaption { position: absolute; top: calc(100% + 1rem); left: 50%; display: flex; align-items: center; gap: .5rem; color: #858b95; font-size: .64rem; white-space: nowrap; transform: translateX(-50%); }.snipkap-product-stage figcaption i { width: 6px; height: 6px; border-radius: 50%; background: #27b66f; }

.snipkap-workflows { padding: clamp(7rem, 11vw, 10rem) 0; background: #f5f6f8; }
.snipkap-section-head { max-width: 850px; }.snipkap-section-head h2, .story-copy h2, .snipkap-native h2, .snipkap-final-cta h2 { font-size: clamp(2.55rem, 5vw, 4.8rem); line-height: 1.15; letter-spacing: .018em; }.snipkap-section-head > span { max-width: 680px; color: #676c77; }
.sk-flow-demo { display: grid; grid-template-columns: 1fr 310px; width: min(1050px, 100%); margin: 0 auto 1.2rem; padding: 12px; border: 1px solid #dfe2e8; border-radius: 26px; background: #fff; box-shadow: 0 30px 70px rgba(27,39,64,.11); }
.sk-flow-screen { position: relative; min-height: 430px; overflow: hidden; border-radius: 17px; background: linear-gradient(135deg, #dbe9ff, #f1e5f6 55%, #d9f2e9); }.sk-flow-screen::before { position: absolute; inset: 10% 12%; border-radius: 16px; background: #fff; box-shadow: 0 20px 45px rgba(39,55,87,.12); content: ""; }.sk-flow-screen::after { position: absolute; inset: 19% 20%; background: repeating-linear-gradient(to bottom, #e8ebf1 0 12px, transparent 12px 28px); content: ""; }
.sk-flow-selection { position: absolute; z-index: 2; inset: 12% 13% 18%; border: 2px solid #2d6bff; box-shadow: 0 0 0 999px rgba(19,24,34,.24); }.sk-flow-selection > span { position: absolute; top: -24px; left: -2px; padding: .25rem .4rem; border-radius: 5px; color: #fff; background: #2d6bff; font-size: .55rem; }.sk-flow-selection i { position: absolute; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #2d6bff; }.sk-flow-selection i:nth-of-type(1) { top: -5px; left: -5px; }.sk-flow-selection i:nth-of-type(2) { top: -5px; right: -5px; }.sk-flow-selection i:nth-of-type(3) { bottom: -5px; left: -5px; }.sk-flow-selection i:nth-of-type(4) { right: -5px; bottom: -5px; }
.sk-flow-toolbar { position: absolute; z-index: 4; bottom: 8%; left: 50%; display: flex; gap: .3rem; padding: .4rem; border-radius: 11px; color: #fff; background: #1e222b; transform: translateX(-50%); }.sk-flow-toolbar b { display: grid; width: 30px; height: 30px; place-items: center; font-size: .68rem; }.sk-flow-toolbar em { display: grid; padding: 0 .7rem; place-items: center; border-radius: 7px; background: #2868f0; font-size: .6rem; font-style: normal; }
.sk-flow-demo > aside { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem; }.sk-flow-demo > aside header { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; border-bottom: 1px solid #eceef2; }.sk-flow-demo > aside header div { display: grid; }.sk-flow-demo > aside header b { font-size: .78rem; }.sk-flow-demo > aside header small { margin-top: .2rem; color: #9297a1; font-size: .55rem; }.sk-flow-demo > aside button { display: grid; grid-template-columns: 38px 1fr; gap: .65rem; align-items: center; padding: .72rem; border: 0; border-radius: 10px; color: #242833; background: #f5f6f8; text-align: left; }.sk-flow-demo > aside button > i { display: grid; height: 34px; place-items: center; border: 1px solid #dfe2e8; border-radius: 7px; background: #fff; font-size: .54rem; font-style: normal; }.sk-flow-demo > aside button span { display: grid; gap: .18rem; }.sk-flow-demo > aside button b { font-size: .68rem; }.sk-flow-demo > aside button small { color: #858b96; font-size: .52rem; }
.workflow-grid { grid-template-columns: repeat(3, 1fr); width: min(1050px, 100%); margin: 0 auto; padding: 0; list-style: none; }.workflow-card { min-height: 230px; padding: 1.4rem; border-radius: 18px; box-shadow: none; }.workflow-icon { min-height: 90px; }.workflow-icon span { width: 48px; height: 48px; border-radius: 14px; background: #101116; box-shadow: none; }.workflow-card h3 { letter-spacing: .01em; }

.snipkap-story { padding: clamp(7rem, 11vw, 10rem) 0; }.story-capture { background: #fff; }.story-annotate { background: #10141c; }.story-grid { grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); gap: clamp(3rem, 7vw, 7rem); }.story-copy > p:not(.story-kicker) { color: #636976; }.story-copy ul { color: #515762; }.story-copy li::before { color: #2d6bff; }.story-annotate .story-copy > p:not(.story-kicker), .story-annotate .story-copy ul { color: #b5bbc6; }
.capture-demo { padding: 14px; border-color: #dfe5ed; border-radius: 26px; background: #f1f4f9; }.demo-window { border: 1px solid #dce0e7; border-radius: 16px; }.demo-window-bar { align-items: center; height: 11%; padding: 1rem; }.demo-window-bar span { margin-left: auto; color: #9096a1; font-size: .58rem; }.sk-design-canvas { display: grid; grid-template-columns: 28% 1fr; height: 89%; }.sk-design-canvas aside { display: grid; align-content: start; gap: 1rem; padding: 18%; border-right: 1px solid #eceef2; color: #858b96; font-size: clamp(.42rem, .7vw, .65rem); }.sk-design-canvas aside b { color: #252b36; }.sk-design-preview { display: grid; place-content: center; justify-items: center; gap: 1rem; background: #f8f9fb; }.sk-design-preview small { color: #8a909b; font-size: .55rem; }.sk-design-preview button { padding: .75rem 1.2rem; border: 0; border-radius: 8px; color: #fff; background: #2d6bff; font-size: .68rem; }.sk-design-preview div { display: flex; align-items: center; gap: .4rem; color: #6f7580; font-size: .55rem; }.sk-design-preview div i { width: 12px; height: 12px; border-radius: 4px; background: #2d6bff; }
.demo-selection { inset: 18% 10% 13% 28%; border-color: #2d6bff; box-shadow: 0 0 0 999px rgba(22,28,40,.18); }.demo-magnifier { right: 4%; bottom: 5%; background: #2d6bff; }
.annotate-demo { padding: 14px 14px 4.6rem; border-radius: 26px; background: #1d232e; }.annotate-canvas { border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: #f6f7f9; }.sk-page-header { display: flex; align-items: center; gap: 1rem; height: 18%; padding: 0 8%; border-bottom: 1px solid #e4e7eb; }.sk-page-header i { width: 22px; height: 22px; border-radius: 7px; background: #2d6bff; }.sk-page-header span { width: 35%; height: 9px; border-radius: 99px; background: #dfe3e9; }.sk-page-header button { width: 18%; height: 25px; margin-left: auto; border: 0; border-radius: 6px; background: #2d6bff; }.sk-page-copy { display: grid; gap: 1rem; padding: 12%; }.sk-page-copy i { height: 11px; border-radius: 99px; background: #e2e5ea; }.sk-page-copy i:nth-child(2) { width: 72%; }.sk-page-copy i:nth-child(3) { width: 86%; }.sk-page-copy span { width: 100%; height: 90px; border-radius: 10px; background: linear-gradient(135deg, #dce9ff, #e8dbf3); }
.annotation-box { top: 8%; right: 5%; bottom: auto; left: auto; width: 28%; height: 16%; border-width: 4px; }.annotation-arrow { right: 19%; bottom: 8%; }.annotate-canvas strong { top: 33%; left: 31%; }.annotation-blur { top: 24%; right: 8%; }.annotate-tools { bottom: 1.1rem; }.annotate-tools b { background: #2a313e; }.annotate-tools em { display: grid; padding: 0 .85rem; place-items: center; border-radius: 10px; color: #fff; background: #2868f0; font-size: .65rem; font-style: normal; }

.snipkap-bento { padding: clamp(7rem, 11vw, 10rem) 0; background: #f5f6f8; }.bento-grid { grid-template-columns: 1.15fr .85fr; }.bento-card { border-color: #e0e3e8; border-radius: 24px; background: #fff; }.bento-card h3 { letter-spacing: .01em; }.bento-long { background: linear-gradient(150deg, #245bd5, #4778ee 55%, #55b7ae); }.long-page { min-height: 70%; padding: 1.4rem; border-radius: 18px 18px 0 0; }.long-page header { display: flex; gap: 5px; }.long-page header i { width: 7px; height: 7px; }.long-page strong { color: #242b38; font-size: .75rem; }.long-page > i:nth-of-type(3) { height: 95px; border-radius: 10px; background: linear-gradient(135deg, #d9ecff, #f2dffb); }
.bento-gif { background: #151922; }.gif-preview { position: relative; height: 105px; margin-top: 1.4rem; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #dbe7ff, #f0e1f6); }.gif-preview button { position: absolute; right: 10%; bottom: 18%; padding: .5rem .8rem; border: 0; border-radius: 6px; color: #fff; background: #2d6bff; font-size: .55rem; }.gif-pointer { position: absolute; z-index: 2; right: 20%; bottom: 8%; width: 16px; height: 21px; clip-path: polygon(0 0, 100% 70%, 58% 73%, 75% 100%, 57% 100%, 40% 75%, 0 100%); background: #fff; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }.gif-timeline { margin-top: .55rem; }.gif-timeline b { display: flex; align-items: center; gap: .25rem; }.gif-timeline b i { width: 6px; height: 6px; border-radius: 50%; background: #ff4964; }.gif-timeline em { margin-left: auto; color: #cbd1dc; font: normal .65rem "Cascadia Code", monospace; }
.bento-pin { background: #fff; }.pin-desktop { position: relative; min-height: 160px; margin-top: 1rem; border-radius: 14px; background: #e9edf3; }.pin-note { position: absolute; z-index: 3; top: 16%; left: 8%; display: grid; padding: .6rem .75rem; border-radius: 8px; color: #414955; background: rgba(255,255,255,.9); box-shadow: 0 12px 24px rgba(39,51,70,.12); font-family: inherit; letter-spacing: 0; }.pin-note small { color: #8a9099; font-size: .5rem; }.pin-stack { min-height: 160px; margin: 0; }
.sk-mini-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }.sk-mini-features article { display: flex; gap: .9rem; padding: 1.25rem; border: 1px solid #e0e3e8; border-radius: 18px; background: #fff; }.sk-mini-features article > i { display: grid; flex: 0 0 40px; height: 40px; place-items: center; border-radius: 12px; color: #2868f0; background: #edf3ff; font-style: normal; }.sk-mini-features div { display: grid; gap: .35rem; }.sk-mini-features b { font-size: .78rem; }.sk-mini-features span { color: #7b818c; font-size: .65rem; line-height: 1.6; }

.snipkap-native { padding: clamp(7rem, 11vw, 10rem) 0; background: #10141c; }.native-grid { align-items: center; }.snipkap-native p:not(.story-kicker) { color: #b3bac5; }.snipkap-native dl { border: 0; gap: 1px; background: rgba(255,255,255,.12); }.snipkap-native dl div { border: 0; background: #171c26; }.snipkap-native dt { letter-spacing: .01em; }.sk-privacy-note { display: flex; gap: .8rem; max-width: 620px; margin-top: 2rem; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.05); }.sk-privacy-note > i { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border-radius: 50%; color: #11161d; background: #50d29d; font-style: normal; }.sk-privacy-note span { display: grid; gap: .35rem; }.sk-privacy-note b { font-size: .72rem; }.sk-privacy-note small { color: #9ca4b0; font-size: .62rem; line-height: 1.6; }
body[data-app="snipkap"] .section-discovery { background: #fff; }.snipkap-releases { background: #f7f8fa; }.snipkap-faq { background: #fff; }.snipkap-final-cta { background: radial-gradient(circle at 50% -20%, #7797ff, transparent 45%), linear-gradient(145deg, #1d4fc4, #376df1 58%, #218f85); }.snipkap-final-cta h2 { line-height: 1.15; letter-spacing: .02em; }

@media (max-width: 980px) {
  .sk-flow-demo { grid-template-columns: 1fr 280px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-grid-reverse .story-copy, .story-grid-reverse .story-visual { grid-column: auto; }.story-grid-reverse .story-copy { grid-row: 1; }
  .sk-mini-features { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .snipkap-hero { padding-top: 4.5rem; }
  .snipkap-hero h1 { font-size: clamp(2.5rem, 10.5vw, 4rem); line-height: 1.18; letter-spacing: .025em; }
  .snipkap-trust { flex-wrap: wrap; flex-direction: row; justify-content: center; }
  .snipkap-product-stage { padding: 6px; border-radius: 18px; }.snipkap-desktop { border-radius: 12px; }.sk-window-bar { min-height: 24px; padding: 0 .5rem; }.sk-window-bar > span i { width: 6px; height: 6px; }.sk-window-bar b { display: none; }
  .sk-app-sidebar { display: none; }.sk-window-body { grid-template-columns: 1fr; }.sk-app-canvas { padding: 5%; }.capture-selection { inset: 14% 8% 17%; }.sk-annotation-note, .sk-annotation-arrow, .capture-hud { display: none; }.capture-toolbar { bottom: 4%; }.capture-toolbar span:nth-child(n+5), .capture-toolbar b:not(.toolbar-primary) { display: none; }.capture-toolbar span, .capture-toolbar b { min-width: 26px; height: 26px; }.sk-quick-result { right: 2%; bottom: -12%; grid-template-columns: auto 1fr auto; }.sk-quick-result button { display: none; }.sk-quick-result button:last-child { display: block; }.snipkap-product-stage figcaption { top: calc(100% + 3rem); width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .snipkap-workflows { padding-top: 8rem; }.sk-flow-demo { grid-template-columns: 1fr; padding: 7px; }.sk-flow-screen { min-height: 280px; }.sk-flow-demo > aside { display: grid; grid-template-columns: repeat(3, 1fr); padding: .6rem; }.sk-flow-demo > aside header { grid-column: 1 / -1; }.sk-flow-demo > aside button { grid-template-columns: 1fr; padding: .55rem; }.sk-flow-demo > aside button > i { width: 32px; }.sk-flow-demo > aside button small { display: none; }.workflow-grid { grid-template-columns: 1fr; }.workflow-card { min-height: 200px; }
  .story-grid { min-width: 0; gap: 3rem; }.story-visual { min-width: 0; width: 100%; }.snipkap-section-head h2, .story-copy h2, .snipkap-native h2, .snipkap-final-cta h2 { font-size: clamp(2.15rem, 9vw, 3.25rem); line-height: 1.2; letter-spacing: .02em; }.bento-grid { grid-template-columns: 1fr; }.bento-long { grid-column: auto; min-height: 540px; }.bento-card { min-height: 330px; }.sk-mini-features { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  .snipkap-hero h1 { font-size: clamp(2.25rem, 10vw, 3.15rem); line-height: 1.2; letter-spacing: .025em; }
  .snipkap-hero .hero-actions { align-items: stretch; flex-direction: column; }.snipkap-hero .button { width: 100%; }
  .sk-metric-row article { padding: 7%; }.sk-chart-card { margin-top: 2%; }.sk-bars { height: 70px; }.sk-quick-result { left: 5%; right: 5%; }
  .sk-flow-demo > aside button b { font-size: .6rem; }.sk-flow-toolbar b:nth-child(n+4) { display: none; }
}

/* Snipkap 官网真实运行素材：Chrome 实机背景、应用原生选区与原始输出。 */
.snipkap-product-stage--real { position: relative; overflow: visible; padding: 10px; }
.snipkap-real-media { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #cfd5df; border-radius: 20px; background: #151922; }
.snipkap-real-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.snipkap-real-proof { position: absolute; z-index: 3; top: 1.6rem; left: 1.6rem; display: flex; gap: .45rem; flex-wrap: wrap; }
.snipkap-real-proof span { display: inline-flex; align-items: center; gap: .38rem; min-height: 27px; padding: .35rem .62rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; background: rgba(13,17,25,.72); backdrop-filter: blur(12px); font-size: .58rem; font-weight: 700; letter-spacing: .03em; }
.snipkap-real-proof span:first-child { color: #0d3025; border-color: rgba(255,255,255,.72); background: rgba(220,255,241,.9); }
.snipkap-real-proof i { width: 6px; height: 6px; border-radius: 50%; background: #21b978; box-shadow: 0 0 0 4px rgba(33,185,120,.16); }

.snipkap-workflow-real { display: grid; grid-template-columns: minmax(0, 1fr) 300px; width: min(1080px, 100%); margin: 0 auto 1.25rem; padding: 10px; border: 1px solid #dfe2e8; border-radius: 26px; background: #fff; box-shadow: 0 30px 70px rgba(27,39,64,.11); }
.snipkap-workflow-real > figure { position: relative; min-width: 0; margin: 0; overflow: hidden; border-radius: 18px; background: #151922; }
.snipkap-workflow-real > figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.snipkap-workflow-real > figure figcaption { position: absolute; right: 1rem; bottom: 1rem; display: grid; gap: .15rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; color: #fff; background: rgba(14,18,26,.75); backdrop-filter: blur(12px); }
.snipkap-workflow-real > figure figcaption span { color: #7de6bc; font: 700 .52rem "Cascadia Code", monospace; letter-spacing: .1em; }
.snipkap-workflow-real > figure figcaption b { font-size: .68rem; }
.snipkap-workflow-real > aside { display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem; }
.snipkap-workflow-real > aside header { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; border-bottom: 1px solid #eceef2; }
.snipkap-workflow-real > aside header > i { width: 10px; height: 10px; border-radius: 50%; background: #27b66f; box-shadow: 0 0 0 5px rgba(39,182,111,.13); }
.snipkap-workflow-real > aside header div { display: grid; gap: .2rem; }.snipkap-workflow-real > aside header b { font-size: .8rem; }.snipkap-workflow-real > aside header small { color: #9297a1; font-size: .56rem; }
.snipkap-workflow-real > aside > div { display: grid; gap: .55rem; }
.snipkap-workflow-real > aside > div > span { display: grid; grid-template-columns: 28px 1fr; column-gap: .65rem; padding: .75rem; border-radius: 11px; background: #f5f6f8; }
.snipkap-workflow-real > aside > div i { grid-row: 1 / 3; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #2868f0; background: #e7efff; font: normal .52rem "Cascadia Code", monospace; }
.snipkap-workflow-real > aside > div b { font-size: .68rem; }.snipkap-workflow-real > aside > div small { color: #858b96; font-size: .54rem; line-height: 1.55; }

.snipkap-real-story { position: relative; margin: 0; overflow: hidden; padding: 10px; border: 1px solid rgba(131,146,171,.22); border-radius: 26px; background: #edf1f7; box-shadow: 0 34px 80px rgba(44,66,105,.16); }
.story-annotate .snipkap-real-story { border-color: rgba(255,255,255,.12); background: #1d232e; box-shadow: 0 38px 90px rgba(0,0,0,.34); }
.snipkap-real-story > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 17px; }
.snipkap-real-story figcaption { position: absolute; right: 1.4rem; bottom: 1.4rem; display: grid; gap: .18rem; padding: .7rem .85rem; border: 1px solid rgba(255,255,255,.24); border-radius: 11px; color: #fff; background: rgba(12,17,25,.76); backdrop-filter: blur(12px); }
.snipkap-real-story figcaption span { color: #7fe5bd; font: 700 .52rem "Cascadia Code", monospace; letter-spacing: .1em; }.snipkap-real-story figcaption b { font-size: .7rem; }.snipkap-real-story figcaption small { color: #bec6d1; font-size: .52rem; }

.bento-grid-real { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
.bento-grid-real .bento-card { grid-row: auto; min-height: 500px; }
.bento-grid-real .bento-long-real { min-height: 620px; }
.real-vertical-result { position: absolute; right: 7%; bottom: -4%; width: 43%; height: 68%; margin: 0; overflow: hidden; border: 8px solid rgba(255,255,255,.92); border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 30px 80px rgba(19,20,72,.32); transform: rotate(3deg); }
.real-vertical-result::after { position: absolute; right: 0; bottom: 0; left: 0; height: 20%; background: linear-gradient(transparent, rgba(28,77,186,.34)); content: ""; pointer-events: none; }
.real-vertical-result img { display: block; width: 100%; height: auto; }.real-vertical-result figcaption { position: absolute; z-index: 2; right: .55rem; bottom: .55rem; padding: .3rem .45rem; border-radius: 6px; color: #2158c5; background: rgba(255,255,255,.92); font: .52rem "Cascadia Code", monospace; }
.bento-horizontal-real { color: #fff; background: linear-gradient(145deg, #17243b, #273d64); }
.bento-horizontal-real span, .bento-horizontal-real p { color: #b9c8dd; }.bento-horizontal-real > figure { margin: 1.6rem 0 0; overflow-x: auto; border: 7px solid rgba(255,255,255,.12); border-radius: 14px; background: #dce8e8; scrollbar-color: #4e7ee5 #1e2f4d; scrollbar-width: thin; }
.bento-horizontal-real > figure img { display: block; width: 1450px; max-width: none; height: auto; }.bento-horizontal-real > figure figcaption { position: sticky; left: .65rem; display: inline-flex; margin: .55rem; padding: .3rem .48rem; border-radius: 6px; color: #fff; background: rgba(14,22,38,.8); font: .52rem "Cascadia Code", monospace; }
.bento-gif-real { min-height: 560px !important; }.bento-gif-real > figure { position: relative; margin: 1.5rem 0 0; overflow: hidden; border: 7px solid rgba(255,255,255,.1); border-radius: 16px; background: #d9ae80; }
.bento-gif-real > figure img { display: block; width: 100%; aspect-ratio: 1200 / 760; object-fit: cover; }.bento-gif-real > figure figcaption { position: absolute; bottom: .65rem; left: .65rem; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .55rem; border-radius: 7px; color: #fff; background: rgba(16,18,25,.75); font-size: .56rem; }.bento-gif-real > figure figcaption i { width: 7px; height: 7px; border-radius: 50%; background: #ff4f67; box-shadow: 0 0 0 4px rgba(255,79,103,.18); }
.bento-pin-real { background: linear-gradient(145deg, #f3f8ff, #eaf9f5); }.bento-pin-real > figure { position: relative; margin: 1.5rem 0 0; overflow: hidden; border: 7px solid #fff; border-radius: 16px; box-shadow: 0 18px 40px rgba(45,70,96,.14); }
.bento-pin-real > figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }.bento-pin-real > figure figcaption { position: absolute; right: .6rem; bottom: .6rem; padding: .35rem .5rem; border-radius: 7px; color: #fff; background: rgba(18,30,45,.76); font-size: .54rem; }

@media (max-width: 980px) {
  .snipkap-workflow-real { grid-template-columns: 1fr; }
  .snipkap-workflow-real > aside > div { grid-template-columns: repeat(3, 1fr); }
  .bento-grid-real { grid-template-columns: 1fr; }
  .bento-grid-real .bento-card { grid-column: auto; }
}
@media (max-width: 720px) {
  .snipkap-product-stage--real { padding: 5px; }.snipkap-real-media { border-radius: 16px; }.snipkap-real-proof { top: .8rem; left: .8rem; }.snipkap-real-proof span:nth-child(n+2) { display: none; }
  .snipkap-workflow-real { padding: 6px; border-radius: 18px; }.snipkap-workflow-real > figure { border-radius: 13px; }.snipkap-workflow-real > aside > div { grid-template-columns: 1fr; }
  .snipkap-real-story { padding: 5px; border-radius: 18px; }.snipkap-real-story > img { border-radius: 13px; }.snipkap-real-story figcaption { right: .7rem; bottom: .7rem; }
  .bento-grid-real .bento-card { min-height: 430px; }.bento-grid-real .bento-long-real { min-height: 570px; }.real-vertical-result { right: 8%; width: 58%; height: 60%; }
  .bento-horizontal-real > figure img { width: 1120px; }.bento-gif-real { min-height: 500px !important; }
}

/* Snipkap 使用文档。 */
body[data-app="snipkap"] .seo-card-docs {
  grid-column: 1 / -1;
  padding: clamp(1.8rem, 4vw, 3rem);
  color: #fff;
  border-color: transparent;
  background: radial-gradient(circle at 88% 0%, rgba(81,128,255,.5), transparent 32%), linear-gradient(135deg, #111827, #1c315b);
}
body[data-app="snipkap"] .seo-card-docs span,
body[data-app="snipkap"] .seo-card-docs p { color: rgba(255,255,255,.7); }
body[data-app="snipkap"] .seo-card-docs h3 { max-width: 760px; font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: .015em; }
body[data-app="snipkap"] .seo-card-docs b { color: #fff; }

.snipkap-docs-page {
  color: #171a21;
  background: #f6f7f9;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.snipkap-docs-page .docs-site-header { border-bottom-color: rgba(16,24,40,.08); background: rgba(255,255,255,.92); }
.snipkap-docs-page .docs-site-header .brand small { color: #7c8491; letter-spacing: .08em; }
.snipkap-docs-page .docs-site-header .nav { gap: 1.45rem; font-size: .76rem; }
.snipkap-docs-page .docs-site-header .nav a { color: #555d69; }
.snipkap-docs-page .site-footer { color: #9da5b2; background: #0d1118; border-color: rgba(255,255,255,.08); }
.snipkap-docs-main { overflow: clip; }

.docs-hero {
  position: relative;
  padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(5rem, 9vw, 8rem);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(63,112,255,.42), transparent 28%),
    radial-gradient(circle at 8% 85%, rgba(30,182,154,.16), transparent 27%),
    linear-gradient(145deg, #10151f 0%, #14243e 57%, #192c4b 100%);
}
.docs-hero::before {
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 80%, transparent);
  content: "";
}
.docs-hero > .container { position: relative; z-index: 1; }
.docs-breadcrumbs { display: flex; align-items: center; gap: .55rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); color: rgba(255,255,255,.54); font-size: .72rem; }
.docs-breadcrumbs a:hover { color: #fff; }
.docs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.docs-version { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.2rem; padding: .48rem .75rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #cbd8ee; background: rgba(255,255,255,.06); font-size: .68rem; font-weight: 700; }
.docs-version i { width: 7px; height: 7px; border-radius: 50%; background: #48d597; box-shadow: 0 0 0 4px rgba(72,213,151,.12); }
.docs-hero h1 { max-width: 900px; margin: 0; font-size: clamp(3rem, 5.6vw, 5.55rem); line-height: 1.14; letter-spacing: .025em; }
.docs-hero h1 span { color: #7da5ff; }
.docs-hero-grid > div > p:not(.docs-version) { max-width: 740px; margin: 1.5rem 0 0; color: #b5c0d1; font-size: clamp(.95rem, 1.6vw, 1.12rem); line-height: 1.9; }
.docs-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.docs-hero-actions .button { min-height: 50px; border-radius: 11px; }
.docs-hero-actions .button-primary { color: #11151d; background: #fff; }
.docs-hero-actions .button-secondary { color: #e6ebf4; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.07); }
.docs-overview-card { padding: 1.2rem; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.07); backdrop-filter: blur(16px); }
.docs-overview-card > span { color: #91a3bd; font-size: .62rem; font-weight: 750; letter-spacing: .12em; }
.docs-overview-card ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 1rem 0 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.12); list-style: none; }
.docs-overview-card li { display: grid; gap: .25rem; padding: 1rem; background: rgba(15,24,39,.72); }
.docs-overview-card b { font-size: 1.15rem; }.docs-overview-card small { color: #96a3b5; font-size: .58rem; }

.docs-layout { display: grid; min-width: 0; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(4rem, 8vw, 7rem); }
.docs-toc { position: sticky; min-width: 0; top: 96px; }
.docs-toc > div { width: 100%; max-width: 100%; padding: 1rem; border: 1px solid #e1e4ea; border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 14px 35px rgba(28,39,60,.05); backdrop-filter: blur(12px); }
.docs-toc p { margin: 0 0 .75rem; padding: 0 .55rem; color: #9096a0; font-size: .62rem; font-weight: 750; letter-spacing: .12em; }
.docs-toc nav { display: grid; gap: .08rem; }
.docs-toc nav a { padding: .54rem .58rem; border-radius: 8px; color: #68707c; font-size: .69rem; line-height: 1.35; }
.docs-toc nav a:hover { color: #215fdc; background: #edf3ff; }
.docs-toc-download { display: block; margin-top: .8rem; padding: .7rem; border-radius: 9px; color: #fff; background: #171a21; font-size: .68rem; font-weight: 700; text-align: center; }
.docs-article { min-width: 0; }
.docs-section { min-width: 0; scroll-margin-top: 96px; margin-bottom: 1.2rem; padding: clamp(2rem, 4vw, 3.25rem); border: 1px solid #e2e5ea; border-radius: 24px; background: #fff; box-shadow: 0 18px 45px rgba(25,36,56,.045); }
.docs-section > header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.65rem; }
.docs-section > header > span { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 11px; color: #225fdc; background: #edf3ff; font-size: .62rem; font-weight: 800; }
.docs-section > header p { margin: 0 0 .3rem; color: #2767e9; font: 750 .6rem "Cascadia Code", monospace; letter-spacing: .13em; }
.docs-section > header h2 { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.2; letter-spacing: .015em; }
.docs-section h3 { letter-spacing: .01em; }
.docs-section > p, .docs-section li, .docs-section td { color: #606875; line-height: 1.8; }
.docs-lead { max-width: 800px; margin: 0 0 1.7rem; font-size: 1rem; }
.docs-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.docs-step-grid li { padding: 1.25rem; border: 1px solid #e5e8ed; border-radius: 16px; background: #fafbfc; }
.docs-step-grid li > i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: #2767e9; font-size: .65rem; font-style: normal; font-weight: 800; }
.docs-step-grid h3 { margin: 1.1rem 0 .5rem; font-size: .92rem; }.docs-step-grid p { margin: 0; font-size: .74rem; }
.docs-step-grid li:last-child p span { margin: 0 .12rem; color: #98a0aa; }
.docs-callout { margin-top: 1.5rem; padding: 1.05rem 1.2rem; border: 1px solid #dce6fa; border-radius: 14px; background: #f2f7ff; }
.docs-callout strong { display: block; color: #245dbf; font-size: .76rem; }.docs-callout p { margin: .35rem 0 0; color: #65748b; font-size: .74rem; line-height: 1.75; }
.docs-callout.warning { border-color: #f3dfb1; background: #fff9ea; }.docs-callout.warning strong { color: #9b6911; }.docs-callout.warning p { color: #76664b; }
.docs-callout.neutral { border-color: #e3e5e9; background: #f7f8fa; }.docs-callout.neutral strong { color: #3c434d; }.docs-callout.neutral p { color: #666d77; }

.docs-platform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.docs-platform-grid article { padding: 1.5rem; border: 1px solid #e1e4ea; border-radius: 18px; background: #fafbfc; }
.docs-platform-label { display: inline-flex; padding: .36rem .62rem; border-radius: 999px; font-size: .6rem; font-weight: 800; }
.docs-platform-label.windows { color: #1e5dcc; background: #e9f1ff; }.docs-platform-label.macos { color: #6554cf; background: #f0edff; }
.docs-platform-grid h3 { margin: 1rem 0 .7rem; font-size: 1.1rem; }
.docs-platform-grid ol { display: grid; gap: .55rem; margin: 0; padding-left: 1.1rem; }.docs-platform-grid li { font-size: .76rem; }
.docs-platform-note { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid #e4e7ec; color: #7b828d; font-size: .68rem; line-height: 1.7; }

.docs-table-wrap { overflow-x: auto; border: 1px solid #e0e3e8; border-radius: 16px; }
.docs-table-wrap table { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; }
.docs-table-wrap th { padding: .8rem .9rem; color: #69717c; background: #f6f7f9; font-size: .64rem; font-weight: 750; text-align: left; }
.docs-table-wrap td { padding: .8rem .9rem; border-top: 1px solid #e8eaee; font-size: .7rem; vertical-align: top; }
.docs-table-wrap td:first-child { color: #242932; font-weight: 700; }
.docs-table-wrap tr:hover td { background: #fafcff; }
.docs-section kbd { display: inline-grid; min-width: 25px; min-height: 24px; padding: 0 .42rem; place-items: center; border: 1px solid #d7dbe2; border-bottom-width: 2px; border-radius: 6px; color: #343a45; background: #f8f9fb; box-shadow: 0 1px 0 #fff inset; font: 650 .62rem "Cascadia Code", monospace; white-space: nowrap; }

.docs-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.docs-mode-grid article { position: relative; min-height: 220px; padding: 1.25rem; overflow: hidden; border: 1px solid #e3e6eb; border-radius: 17px; background: linear-gradient(145deg, #fff, #f8f9fb); }
.docs-mode-grid article > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #2767e9, #675cf0); font-style: normal; font-weight: 800; }
.docs-mode-grid article > span { position: absolute; top: 1.2rem; right: 1.2rem; color: #a2a8b1; font-size: .56rem; }
.docs-mode-grid h3 { margin: 1.2rem 0 .5rem; font-size: .95rem; }.docs-mode-grid p { margin: 0; color: #717883; font-size: .72rem; line-height: 1.75; }
.docs-two-column { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.docs-two-column > div { padding: 1.35rem; border: 1px solid #e3e6eb; border-radius: 17px; background: #fafbfc; }
.docs-two-column h3 { margin: 0 0 .8rem; font-size: .95rem; }.docs-two-column > div > p { color: #656d78; font-size: .76rem; line-height: 1.8; }
.docs-check-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.docs-check-list li { position: relative; padding-left: 1.25rem; font-size: .73rem; }.docs-check-list li::before { position: absolute; top: .58em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #3474ec; content: ""; }
.docs-color-demo { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 2rem; margin-top: 1rem; padding: 1.5rem; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #15233c, #1f3b69); }
.docs-color-hud { display: grid; width: 150px; aspect-ratio: 1; place-content: center; border: 7px solid #fff; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #5389f6 0 10%, #2d6bff 10% 36%, #255ad0 36%); box-shadow: 0 18px 38px rgba(0,0,0,.28); text-align: center; }
.docs-color-hud strong { font-size: .82rem; }.docs-color-hud span, .docs-color-hud small { margin-top: .25rem; font-size: .52rem; opacity: .76; }
.docs-color-demo h3 { margin: 0 0 .55rem; }.docs-color-demo p, .docs-color-demo li { color: #c2cee0; font-size: .73rem; line-height: 1.75; }.docs-color-demo ul { margin-bottom: 0; padding-left: 1.1rem; }

.docs-toolbar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-top: 1.2rem; padding: .75rem; border-radius: 16px; background: #171c25; }
.docs-toolbar-grid span { display: grid; gap: .45rem; min-width: 0; padding: .65rem .35rem; justify-items: center; border-radius: 9px; color: #aeb7c5; font-size: .57rem; }
.docs-toolbar-grid i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: #fff; background: #29303d; font-style: normal; font-weight: 700; }
.docs-feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1rem; }
.docs-feature-list article { padding: 1.25rem; border: 1px solid #e3e6eb; border-radius: 16px; }.docs-feature-list h3 { margin: 0 0 .5rem; font-size: .88rem; }.docs-feature-list p { margin: 0; color: #69717d; font-size: .72rem; line-height: 1.78; }

.docs-process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
.docs-process-grid article { padding: 1.5rem; border-radius: 19px; color: #fff; background: linear-gradient(145deg, #2158ce, #3c76ee); }
.docs-process-grid article:last-child { background: linear-gradient(145deg, #171b24, #282f3d); }
.docs-process-grid article > span { color: rgba(255,255,255,.68); font-size: .61rem; font-weight: 750; letter-spacing: .1em; }
.docs-process-grid h3 { margin: .8rem 0; font-size: 1.2rem; }.docs-process-grid ol { display: grid; gap: .55rem; padding-left: 1.1rem; }.docs-process-grid li { color: rgba(255,255,255,.82); font-size: .72rem; }.docs-process-grid small { display: block; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.62); font-size: .62rem; line-height: 1.7; }
.docs-control-table td:nth-child(2) { color: #2868e8; font-weight: 700; }
.docs-safe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1rem; }
.docs-safe-grid article { padding: 1.2rem; border: 1px solid #e2e5ea; border-radius: 16px; background: #fafbfc; }.docs-safe-grid i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #2465e5; background: #eaf2ff; font-style: normal; font-weight: 800; }.docs-safe-grid h3 { margin: 1rem 0 .45rem; font-size: .84rem; }.docs-safe-grid p { margin: 0; color: #6d7480; font-size: .69rem; line-height: 1.75; }
.docs-settings-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }.docs-settings-strip span { padding: .48rem .68rem; border: 1px solid #e0e3e8; border-radius: 999px; color: #646c77; background: #fafbfc; font-size: .64rem; }
.docs-faq-list { display: grid; gap: .55rem; }
.docs-faq-list details { padding: 0 1rem; border: 1px solid #e1e4e9; border-radius: 13px; background: #fff; }
.docs-faq-list summary { padding: 1rem 0; cursor: pointer; color: #2b3038; font-size: .77rem; font-weight: 700; }
.docs-faq-list details p { margin: 0; padding: 0 0 1rem; color: #68707c; font-size: .72rem; line-height: 1.8; }
.docs-support-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; margin-top: 1rem; padding: 1.5rem; border-radius: 18px; color: #fff; background: #141922; }
.docs-support-card > div:first-child p { margin: 0 0 .45rem; color: #7fa5f8; font: 750 .58rem "Cascadia Code", monospace; letter-spacing: .12em; }.docs-support-card h3 { margin: 0 0 .45rem; font-size: 1.2rem; }.docs-support-card span { color: #aeb7c4; font-size: .7rem; line-height: 1.7; }
.docs-support-card > div:last-child { display: grid; gap: .5rem; }.docs-support-card a { padding: .7rem .85rem; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #8f9bad; font-size: .58rem; }.docs-support-card a b { color: #fff; font-size: .66rem; }

@media (max-width: 1040px) {
  .docs-hero-grid { grid-template-columns: 1fr; }.docs-overview-card { max-width: 620px; }
  .docs-layout { grid-template-columns: minmax(0, 1fr); }.docs-toc { position: static; width: 100%; }.docs-toc > div { display: flex; align-items: center; gap: .5rem; overflow-x: auto; }.docs-toc p { display: none; }.docs-toc nav { display: flex; min-width: max-content; flex: 0 0 auto; }.docs-toc nav a { white-space: nowrap; }.docs-toc-download { flex: 0 0 auto; margin: 0; white-space: nowrap; }
}

@media (max-width: 720px) {
  body[data-app="snipkap"] .seo-card-docs { grid-column: auto; }
  .snipkap-docs-page .docs-site-header .brand small { display: block; }
  .docs-hero { padding-top: 2.6rem; }.docs-breadcrumbs { margin-bottom: 2.4rem; }
  .docs-hero h1 { font-size: clamp(2.35rem, 10vw, 3.6rem); line-height: 1.2; letter-spacing: .025em; }
  .docs-hero-grid { gap: 2.4rem; }.docs-overview-card { width: 100%; }
  .docs-layout { gap: 1.2rem; padding-block: 2.5rem; }
  .docs-toc > div { margin-inline: -1rem; border-right: 0; border-left: 0; border-radius: 0; }
  .docs-section { padding: 1.4rem; border-radius: 18px; }
  .docs-section > header { gap: .7rem; }.docs-section > header h2 { font-size: clamp(1.65rem, 7vw, 2.25rem); }
  .docs-step-grid, .docs-platform-grid, .docs-mode-grid, .docs-two-column, .docs-feature-list, .docs-process-grid, .docs-safe-grid { grid-template-columns: 1fr; }
  .docs-step-grid li { min-height: auto; }
  .docs-mode-grid article { min-height: 190px; }
  .docs-color-demo { grid-template-columns: 1fr; }.docs-color-hud { margin-inline: auto; }
  .docs-toolbar-grid { grid-template-columns: repeat(4, 1fr); }
  .docs-support-card { grid-template-columns: 1fr; }.docs-support-card > div:last-child { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  .snipkap-docs-page .docs-site-header .brand small { display: none; }
  .docs-hero-actions { align-items: stretch; flex-direction: column; }.docs-hero-actions .button { width: 100%; }
  .docs-overview-card ul { grid-template-columns: 1fr 1fr; }
  .docs-section { margin-inline: -.25rem; padding: 1.15rem; }
  .docs-toolbar-grid { grid-template-columns: repeat(3, 1fr); }
  .docs-color-demo { padding: 1.1rem; }
}