:root {
  --navy: #091d3a;
  --navy-2: #17365f;
  --blue: #087fe6;
  --blue-2: #22a9f2;
  --cyan: #1bc4c8;
  --red: #eb3739;
  --coral: #ff6149;
  --paper: #f4f8fd;
  --pale: #e8f4ff;
  --white: #fff;
  --text: #52677f;
  --line: #d7e6f4;
  --shadow: 0 22px 58px rgba(20, 73, 126, .115);
  --radius: 20px;
  --container: 1180px;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --motion-ease: cubic-bezier(.22, .72, .22, 1);
  --motion-soft: cubic-bezier(.45, 0, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  color: var(--navy);
  background: var(--paper);
  background-image: radial-gradient(circle at 8% 18%, rgba(8,127,230,.035), transparent 30%), radial-gradient(circle at 92% 72%, rgba(27,196,200,.035), transparent 26%);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
body.video-open { overflow: hidden; }
body { --page-accent: #087fe6; --page-accent-2: #1bc4c8; --page-rgb: 8, 127, 230; }
body[data-page="history"] { --page-accent: #087fe6; --page-accent-2: #1bc4c8; --page-rgb: 8, 127, 230; }
body[data-page="features"] { --page-accent: #0794b7; --page-accent-2: #25c5c4; --page-rgb: 7, 148, 183; }
body[data-page="examples"] { --page-accent: #3d76dc; --page-accent-2: #19b7d6; --page-rgb: 61, 118, 220; }
body[data-page="download"] { --page-accent: #087fe6; --page-accent-2: #f05a48; --page-rgb: 8, 127, 230; }
body[data-page="guide"] { --page-accent: #e46d37; --page-accent-2: #168ed5; --page-rgb: 228, 109, 55; }
body[data-page="contact"] { --page-accent: #079baa; --page-accent-2: #087fe6; --page-rgb: 7, 155, 170; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(8,127,230,.22); outline-offset: 4px; }
::selection { color: #fff; background: var(--blue); }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.section { padding: 92px 0; }
.section-soft { background: linear-gradient(180deg, #edf6ff, #f8fbff); }
.section-white { background: linear-gradient(180deg, #fff, #fbfdff); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 251, 255, .94);
  border-bottom: 1px solid rgba(162, 193, 220, .32);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(23, 66, 106, .055);
}
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 13px; min-width: max-content; }
.brand-icon {
  position: relative;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  border: 1px solid rgba(183, 203, 220, .5);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(34, 76, 112, .12), 0 1px 0 rgba(255,255,255,.96) inset;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.brand-icon img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; transition: transform .45s var(--ease); }
.brand:hover .brand-icon { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(34,76,112,.2); }
.brand:hover .brand-icon img { transform: scale(1.055); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 21px; letter-spacing: .04em; }
.brand-copy small { margin-top: 6px; color: #2e5b8b; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.main-nav { display: flex; align-items: center; gap: 8px; }
.main-nav a { position: relative; padding: 12px 12px; color: #4e6680; border-radius: 10px; font-size: 14px; font-weight: 700; transition: color .25s ease, background .25s ease; }
.main-nav a::after { content: ""; position: absolute; left: 12px; right: 100%; bottom: 6px; height: 2px; background: linear-gradient(90deg, var(--red), var(--blue)); transition: right .3s var(--ease); }
.main-nav a:hover, .main-nav a.is-active { color: var(--blue); background: #edf6ff; }
.main-nav a:hover::after, .main-nav a.is-active::after { right: 12px; }
.main-nav .nav-cta { margin-left: 4px; color: #fff; background: var(--blue); }
.main-nav .nav-cta:hover, .main-nav .nav-cta.is-active { color: #fff; background: #086fc5; }
.main-nav .nav-cta::after { display: none; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid #bfd8ee; border-radius: 10px; background: #fff; }
.menu-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: var(--navy); transition: transform .25s ease, opacity .25s ease; }

/* Shared hero */
.badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; color: #075cab; background: rgba(255,255,255,.86); border: 1px solid #b9d8f4; border-radius: 9px; box-shadow: 0 8px 25px rgba(34,105,165,.08); font-size: 13px; font-weight: 800; }
.badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(27,196,200,.13); }
.accent-rule { display: flex; width: 124px; height: 4px; margin: 20px 0; border-radius: 5px; overflow: hidden; }
.accent-rule::before, .accent-rule::after { content: ""; flex: 1; }
.accent-rule::before { background: var(--red); }
.accent-rule::after { background: var(--blue); }
.home-hero {
  position: relative;
  min-height: 740px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #eff7ff;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(242,248,255,.98) 5%, rgba(242,248,255,.91) 53%, rgba(242,248,255,.68)), url("assets/hero.jpg") center / cover no-repeat;
  filter: saturate(.65) brightness(1.15);
}
.home-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(8,127,230,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(8,127,230,.06) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent, #000); }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.04fr .96fr; gap: 62px; align-items: center; padding: 72px 0 88px; }
.hero-copy { position: relative; max-width: 650px; }
.home-hero h1 { max-width: 720px; margin: 0; font-size: 68px; line-height: 1.01; letter-spacing: 0; }
.home-hero h1 em { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; color: var(--blue); font-size: .59em; font-style: normal; font-weight: 900; letter-spacing: .025em; }
.home-hero h1 em::before { content: ""; width: 4px; height: .82em; flex: 0 0 4px; border-radius: 4px; background: linear-gradient(180deg, var(--red) 0 46%, var(--blue) 46% 100%); box-shadow: 0 0 14px rgba(8,127,230,.16); }
.home-hero h1 span { display: block; }
.home-hero h1 .hero-slogan b { display: block; font: inherit; }
.home-hero h1 .hero-slogan b:last-child { color: #102848; }
.home-hero .accent-rule { width: 138px; margin: 19px 0 20px; }
.hero-copy > p { max-width: 610px; margin: 0; padding-left: 16px; color: #506983; border-left: 2px solid rgba(8,127,230,.22); font-size: 15px; line-height: 1.85; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0; }
.hero-chips span { padding: 7px 11px 7px 8px; display: inline-flex; align-items: center; color: #075ca9; background: rgba(255,255,255,.9); border: 1px solid #c9e0f4; border-radius: 9px; box-shadow: 0 7px 18px rgba(34,89,138,.05); font-size: 11px; font-weight: 800; }
.hero-chips span::before { content: "✓"; width: 17px; height: 17px; margin-right: 7px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(145deg, var(--blue), var(--cyan)); box-shadow: 0 4px 10px rgba(8,127,230,.18); font-size: 10px; font-weight: 900; }
.hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; max-width: 580px; margin-top: 19px; }
.hero-mini-stats { max-width: 580px; margin-top: 14px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.hero-mini-stats div { position: relative; min-width: 0; padding: 12px 14px 11px; overflow: hidden; background: rgba(255,255,255,.8); border: 1px solid rgba(190,214,233,.82); border-radius: 12px; box-shadow: 0 10px 24px rgba(31,80,126,.06); backdrop-filter: blur(8px); }
.hero-mini-stats div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.hero-mini-stats div:nth-child(2)::before { background: linear-gradient(90deg, var(--red), var(--blue)); }
.hero-mini-stats div + div { border-left: 1px solid rgba(190,214,233,.82); }
.hero-mini-stats strong, .hero-mini-stats span { display: block; }
.hero-mini-stats strong { color: var(--navy); font-size: 17px; letter-spacing: 0; }
.hero-mini-stats span { margin-top: 3px; color: #71869b; font-size: 9px; }
.button { position: relative; min-height: 58px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; overflow: hidden; border: 1px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 800; transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease; }
.button::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.48) 50%, transparent 72%); transform: translateX(-130%); transition: transform .7s var(--ease); }
.button:hover::after { transform: translateX(130%); }
.button:hover { transform: translateY(-3px); }
.button:active { transform: translateY(-1px) scale(.985); }
.button-primary { color: #fff; background: linear-gradient(100deg, var(--red), var(--coral)); box-shadow: 0 15px 35px rgba(235,55,57,.22); }
.button-secondary { color: var(--navy); background: rgba(255,255,255,.92); border-color: #c9def1; box-shadow: 0 10px 28px rgba(40,91,140,.08); }
.button-blue { color: #fff; background: linear-gradient(100deg, var(--blue), var(--blue-2)); box-shadow: 0 15px 35px rgba(8,127,230,.2); }
.button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-visual { position: relative; min-height: 520px; }
.blueprint-panel { position: absolute; inset: 25px 0 25px 25px; overflow: hidden; border: 1px solid rgba(8,127,230,.3); border-radius: 26px; background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.96) 0, rgba(238,248,255,.82) 34%, transparent 68%), linear-gradient(145deg, rgba(255,255,255,.82), rgba(218,239,255,.88)); box-shadow: var(--shadow); backdrop-filter: blur(8px); transform: perspective(900px) rotateX(var(--blueprint-tilt-x, 0deg)) rotateY(var(--blueprint-tilt-y, 0deg)) translate3d(var(--blueprint-move-x, 0px), var(--blueprint-move-y, 0px), 0); transform-style: preserve-3d; will-change: transform; transition: box-shadow .4s ease, border-color .4s ease; animation: blueprintPanelGlow 5s ease-in-out infinite; }
.blueprint-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(8,127,230,.17) 0 1px, transparent 1.4px), linear-gradient(rgba(8,127,230,.085) 1px, transparent 1px), linear-gradient(90deg, rgba(8,127,230,.085) 1px, transparent 1px); background-position: 0 0, 0 0, 0 0; background-size: 34px 34px; opacity: .88; }
.blueprint-panel::after { content: ""; position: absolute; z-index: 1; width: 70%; height: 170%; left: -95%; top: -35%; pointer-events: none; background: linear-gradient(105deg, transparent 24%, rgba(255,255,255,.28) 50%, transparent 76%); transform: skewX(-14deg); animation: blueprintSheen 7s ease-in-out infinite; }
.hero-visual:hover .blueprint-panel { border-color: rgba(8,127,230,.5); box-shadow: 0 28px 70px rgba(20,73,126,.18), 0 0 45px rgba(32,169,235,.08) inset; }
.blueprint-radar { position: absolute; z-index: 1; width: 346px; height: 346px; left: 50%; top: 50%; border: 1px solid rgba(27,196,200,.11); border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 74%, rgba(27,196,200,.03) 80%, rgba(27,196,200,.2) 96%, transparent 100%); -webkit-mask: radial-gradient(circle, transparent 0 16%, #000 17% 100%); mask: radial-gradient(circle, transparent 0 16%, #000 17% 100%); transform: translate(-50%, -50%); transform-origin: center; opacity: .55; animation: blueprintRadar 9s linear infinite; }
.blueprint-radar::before, .blueprint-radar::after { content: ""; position: absolute; border: 1px solid rgba(8,127,230,.1); border-radius: 50%; }
.blueprint-radar::before { inset: 36px; }
.blueprint-radar::after { inset: 84px; }
.blueprint-geometry { position: absolute; z-index: 2; width: min(78%, 365px); aspect-ratio: 1; left: 50%; top: 50%; overflow: visible; transform: translate(-50%, -50%); filter: drop-shadow(0 0 12px rgba(8,127,230,.07)); transform-origin: center; animation: geometryBreathe 7s ease-in-out infinite; }
.blueprint-geometry path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.geometry-ring { fill: none; stroke: rgba(8,127,230,.18); stroke-width: .8; transform-box: fill-box; transform-origin: center; }
.geometry-ring-outer { stroke-dasharray: 3 11; animation: geometryRingSpin 24s linear infinite; }
.geometry-ring-inner { stroke: rgba(27,196,200,.17); stroke-dasharray: 1 9; animation: geometryRingSpin 18s linear reverse infinite; }
.geometry-octagon { stroke: rgba(8,127,230,.14); stroke-width: .8; stroke-dasharray: 6 10; animation: geometryDash 9s linear infinite; }
.geometry-measure { stroke: rgba(235,55,57,.23); stroke-width: .85; stroke-dasharray: 2 7; animation: measurePulse 4.2s ease-in-out infinite; }
.geometry-axis { stroke: rgba(8,127,230,.38); stroke-width: 1; }
.geometry-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: geometryDraw 1.9s var(--ease) forwards; }
.geometry-outer { stroke: url(#geometryOuter); stroke-width: 2.2; }
.geometry-mid { stroke: url(#geometryMid); stroke-width: 1.45; animation-delay: .28s; }
.geometry-core { fill: rgba(235,55,57,.025); stroke: rgba(235,55,57,.9); stroke-width: 1.35; animation-delay: .52s; }
.geometry-flow { stroke: rgba(73,168,241,.68); stroke-width: 1.35; stroke-dasharray: 8 16; animation: geometryDash 4.5s linear infinite; }
.geometry-depth { stroke: rgba(235,55,57,.36); stroke-width: .85; stroke-dasharray: 3 5; animation: depthPulse 3.6s ease-in-out infinite; }
.blueprint-data-dot { stroke: #fff; stroke-width: 2; }
.data-dot-blue { fill: #087fe6; }
.data-dot-cyan { fill: #1bc4c8; }
.data-dot-red { fill: #eb3739; }
.blueprint-brackets { position: absolute; z-index: 5; inset: 38px; pointer-events: none; }
.blueprint-brackets i { position: absolute; width: 25px; height: 25px; opacity: .32; animation: bracketPulse 3.8s ease-in-out infinite; }
.blueprint-brackets i:nth-child(1) { left: 0; top: 0; border-left: 1px solid var(--blue); border-top: 1px solid var(--blue); }
.blueprint-brackets i:nth-child(2) { right: 0; top: 0; border-right: 1px solid var(--cyan); border-top: 1px solid var(--cyan); animation-delay: -.95s; }
.blueprint-brackets i:nth-child(3) { right: 0; bottom: 0; border-right: 1px solid var(--blue); border-bottom: 1px solid var(--blue); animation-delay: -1.9s; }
.blueprint-brackets i:nth-child(4) { left: 0; bottom: 0; border-left: 1px solid var(--red); border-bottom: 1px solid var(--red); animation-delay: -2.85s; }
.blueprint-data-labels span { position: absolute; z-index: 3; padding: 5px 7px; color: rgba(42,91,132,.58); background: rgba(255,255,255,.64); border: 1px solid rgba(166,203,232,.52); border-radius: 6px; backdrop-filter: blur(7px); font: 800 7px/1 monospace; letter-spacing: .08em; animation: dataLabelPulse 4s ease-in-out infinite; }
.blueprint-data-labels span:nth-child(1) { left: 7%; top: 35%; }
.blueprint-data-labels span:nth-child(2) { right: 7%; top: 57%; animation-delay: -1.35s; }
.blueprint-data-labels span:nth-child(3) { left: 50%; bottom: 34px; transform: translateX(-50%); animation-delay: -2.7s; }
.blueprint-center-mark { position: absolute; z-index: 6; width: 27px; height: 27px; left: 50%; top: 50%; border: 1px solid rgba(235,55,57,.52); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 7px rgba(235,55,57,.055); animation: centerMarkPulse 2.8s ease-in-out infinite; }
.blueprint-center-mark::before, .blueprint-center-mark::after { content: ""; position: absolute; background: rgba(235,55,57,.74); }
.blueprint-center-mark::before { width: 39px; height: 1px; left: -7px; top: 12px; }
.blueprint-center-mark::after { width: 1px; height: 39px; left: 12px; top: -7px; }
.blueprint-center-mark span { position: absolute; inset: 8px; border-radius: 50%; background: rgba(235,55,57,.88); box-shadow: 0 0 12px rgba(235,55,57,.42); }
.blueprint-center-mark i { position: absolute; inset: -10px; border: 1px dashed rgba(235,55,57,.25); border-radius: 50%; animation: orbitSpin 8s linear infinite; }
.blueprint-orbit { position: absolute; z-index: 1; width: 350px; height: 350px; left: 50%; top: 50%; border: 1px dashed rgba(8,127,230,.19); border-radius: 50%; animation: blueprintOrbit 18s linear infinite; }
.blueprint-orbit::before { content: ""; position: absolute; width: 9px; height: 9px; left: -5px; top: 50%; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(8,127,230,.1), 0 0 15px rgba(8,127,230,.45); }
.blueprint-scan { position: absolute; z-index: 4; left: 7%; right: 7%; top: 17%; height: 2px; background: linear-gradient(90deg, transparent, rgba(27,196,200,.95), transparent); box-shadow: 0 0 14px rgba(27,196,200,.6); opacity: .72; animation: blueprintScan 4.4s ease-in-out infinite; }
.blueprint-scan::before { content: ""; position: absolute; left: 0; right: 0; top: -32px; height: 64px; background: linear-gradient(180deg, transparent, rgba(27,196,200,.055), transparent); }
.blueprint-scan::after { content: ""; position: absolute; width: 7px; height: 7px; right: 11%; top: -3px; border: 2px solid rgba(255,255,255,.92); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(27,196,200,.1), 0 0 15px rgba(27,196,200,.55); }
.blueprint-nodes i { position: absolute; z-index: 5; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(8,127,230,.13), 0 0 13px rgba(8,127,230,.42); animation: blueprintNode 2.6s ease-in-out infinite; }
.blueprint-nodes i::after { content: ""; position: absolute; inset: -7px; border: 1px solid currentColor; border-radius: 50%; opacity: .18; animation: nodeRipple 2.6s ease-out infinite; }
.blueprint-nodes i:nth-child(1) { left: calc(50% - 4px); top: 14%; }
.blueprint-nodes i:nth-child(2) { right: 14%; top: calc(50% - 4px); color: var(--cyan); background: var(--cyan); animation-delay: -.65s; }
.blueprint-nodes i:nth-child(3) { left: calc(50% - 4px); bottom: 14%; color: var(--red); background: var(--red); animation-delay: -1.3s; }
.blueprint-nodes i:nth-child(4) { left: 14%; top: calc(50% - 4px); color: var(--cyan); background: var(--cyan); animation-delay: -1.95s; }
.blueprint-coordinates { position: absolute; z-index: 3; inset: 15px 17px auto; display: flex; justify-content: space-between; color: rgba(42,91,132,.44); font: 800 8px/1 monospace; letter-spacing: .13em; }
.float-info { --float-rgb: 8, 127, 230; position: absolute; z-index: 3; min-width: 208px; padding: 12px 17px 12px 13px; display: flex; align-items: center; gap: 12px; isolation: isolate; color: var(--navy); background: linear-gradient(112deg, rgba(var(--float-rgb),.1), rgba(255,255,255,.98) 36%, rgba(248,252,255,.94)); border: 1px solid rgba(var(--float-rgb),.28); border-radius: 16px; box-shadow: 0 18px 42px rgba(31,84,132,.15), 0 1px 0 rgba(255,255,255,.96) inset; backdrop-filter: blur(14px) saturate(1.08); will-change: transform; transition: border-color .3s ease, box-shadow .3s ease; animation: cardFloat 4s ease-in-out infinite, floatInfoGlow 5s ease-in-out infinite; }
.float-info::before { content: ""; position: absolute; z-index: -1; width: 3px; left: -1px; top: 12px; bottom: 12px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, rgba(var(--float-rgb),.2), rgba(var(--float-rgb),1), rgba(var(--float-rgb),.2)); box-shadow: 0 0 14px rgba(var(--float-rgb),.38); }
.float-info::after { content: ""; position: absolute; top: 50%; width: 62px; height: 1px; pointer-events: none; opacity: .72; transform: translateY(-50%); background-size: 200% 100%; animation: connectionFlow 2.4s linear infinite; }
.float-info.top { --card-rotate: .18deg; right: -12px; top: 68px; }
.float-info.top::after { right: 100%; background-image: linear-gradient(90deg, transparent, rgba(8,127,230,.28), rgba(8,127,230,.95), transparent); box-shadow: -7px 0 12px rgba(8,127,230,.16); }
.float-info.bottom { --float-rgb: 235, 55, 57; --card-rotate: -.18deg; left: -8px; bottom: 68px; animation-delay: -2s, -1.1s; }
.float-info.bottom::after { left: 100%; background-image: linear-gradient(90deg, transparent, rgba(235,55,57,.92), rgba(235,55,57,.3), transparent); box-shadow: 7px 0 12px rgba(235,55,57,.14); }
.hero-visual:hover .float-info { border-color: rgba(var(--float-rgb),.48); box-shadow: 0 23px 50px rgba(31,84,132,.19), 0 0 0 5px rgba(var(--float-rgb),.055), 0 1px 0 rgba(255,255,255,.96) inset; }
.float-info b { position: relative; width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; color: var(--blue); border: 1px solid rgba(var(--float-rgb),.16); border-radius: 13px; background: linear-gradient(145deg, rgba(var(--float-rgb),.15), rgba(255,255,255,.92)); box-shadow: 0 8px 18px rgba(var(--float-rgb),.12), 0 1px 0 #fff inset; }
.float-info b::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(var(--float-rgb),.12); border-radius: 9px; }
.float-info b.red { color: var(--red); }
.float-info svg { position: relative; z-index: 1; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.float-info > span { min-width: 0; }
.float-info small, .float-info strong { display: block; }
.float-info small { display: flex; align-items: center; gap: 6px; color: rgba(70,102,132,.76); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.float-info small::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: rgb(var(--float-rgb)); box-shadow: 0 0 0 4px rgba(var(--float-rgb),.1); }
.float-info strong { margin-top: 3px; font-size: 14px; letter-spacing: .01em; white-space: nowrap; }

/* Home links */
.home-links { position: relative; margin-top: -55px; z-index: 5; padding-bottom: 100px; }
.home-links-head { margin-bottom: 20px; padding: 27px 30px; display: flex; align-items: center; justify-content: space-between; gap: 35px; background: rgba(255,255,255,.95); border: 1px solid #d6e8f7; border-radius: 20px; box-shadow: 0 22px 58px rgba(26,76,121,.13); backdrop-filter: blur(14px); }
.home-links-head small { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.home-links-head h2 { margin: 5px 0 0; font-size: 30px; letter-spacing: 0; }
.home-links-head p { max-width: 410px; margin: 0; color: var(--text); font-size: 13px; }
.quick-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 17px; }
.quick-card { --quick-rgb: 8, 127, 230; --quick-end: #eff8ff; --quick-line-a: #087fe6; --quick-line-b: #1bc4c8; --spot-x: 15%; --spot-y: 18%; position: relative; grid-column: span 6; min-height: 245px; padding: 30px; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(circle 190px at var(--spot-x) var(--spot-y), rgba(var(--quick-rgb),.13), transparent 68%), linear-gradient(145deg, rgba(255,255,255,.99), var(--quick-end)); border: 1px solid rgba(var(--quick-rgb),.18); border-radius: 20px; box-shadow: inset 0 2px 0 rgba(var(--quick-rgb),.06), 0 16px 42px rgba(27,77,124,.09); transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease; }
.quick-card:nth-child(1), .quick-card:nth-child(4) { grid-column: span 7; }
.quick-card:nth-child(2), .quick-card:nth-child(3) { grid-column: span 5; }
.quick-card::before { content: ""; position: absolute; width: 44%; height: 3px; left: -55%; top: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--quick-line-a) 24%, var(--quick-line-b) 58%, transparent); opacity: .78; filter: drop-shadow(0 0 5px rgba(var(--quick-rgb),.2)); animation: quickCardLineFlow 6.8s linear infinite; transition: opacity .35s ease, filter .35s ease; }
.quick-card::after { content: attr(data-index); position: absolute; right: 22px; top: 17px; color: rgba(var(--quick-rgb),.065); font: 900 58px/1 monospace; letter-spacing: 0; transition: color .35s ease, transform .35s var(--ease); }
.quick-card:nth-child(2) { --quick-rgb: 235, 55, 57; --quick-end: #fff5f2; --quick-line-a: #eb3739; --quick-line-b: #ff7a5d; }
.quick-card:nth-child(3) { --quick-rgb: 123, 85, 217; --quick-end: #f6f3ff; --quick-line-a: #7b55d9; --quick-line-b: #087fe6; }
.quick-card:nth-child(4) { --quick-rgb: 27, 196, 200; --quick-end: #effbfc; --quick-line-a: #1bc4c8; --quick-line-b: #087fe6; }
.quick-card:nth-child(2)::before { animation-delay: -1.7s; }
.quick-card:nth-child(3)::before { animation-delay: -3.4s; }
.quick-card:nth-child(4)::before { animation-delay: -5.1s; }
.quick-card:hover { transform: translateY(-7px); border-color: rgba(var(--quick-rgb),.56); box-shadow: 0 25px 58px rgba(27,77,124,.15), 0 0 0 5px rgba(var(--quick-rgb),.045); }
.quick-card:hover::before { opacity: 1; filter: brightness(1.12) drop-shadow(0 0 7px rgba(var(--quick-rgb),.3)); }
.quick-card:hover::after { color: rgba(var(--quick-rgb),.13); transform: translateY(4px) scale(1.035); }
.quick-card .icon-tile { width: 64px; height: 64px; color: rgb(var(--quick-rgb)); background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.96), rgba(var(--quick-rgb),.13)); border-color: rgba(var(--quick-rgb),.34); border-radius: 18px; box-shadow: 0 10px 24px rgba(var(--quick-rgb),.12), 0 1px 0 rgba(255,255,255,.9) inset; filter: drop-shadow(0 0 0 rgba(var(--quick-rgb),0)); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; animation: quickIconHalo 3.4s ease-in-out infinite; }
.quick-card .icon-tile::before { width: calc(100% - 10px); height: calc(100% - 10px); border: 0; border-radius: 15px; background: conic-gradient(from 0deg, transparent 0 14%, currentColor 20% 31%, transparent 38% 60%, currentColor 68% 79%, transparent 86% 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); opacity: .38; animation: iconOrbit 6.8s linear infinite; }
.quick-card .icon-tile::after { width: 40px; height: 40px; border-width: 1.5px; opacity: .22; animation: iconDiamondOrbit 8.6s linear infinite; }
.quick-card .icon-tile svg { width: 31px; height: 31px; stroke-width: 1.9; animation: iconCenterPulse 3.2s ease-in-out infinite; }
.quick-card:nth-child(2) .icon-tile::before, .quick-card:nth-child(2) .icon-tile::after, .quick-card:nth-child(2) .icon-tile svg { animation-delay: -1.2s; }
.quick-card:nth-child(3) .icon-tile::before, .quick-card:nth-child(3) .icon-tile::after, .quick-card:nth-child(3) .icon-tile svg { animation-delay: -2.4s; }
.quick-card:nth-child(4) .icon-tile::before, .quick-card:nth-child(4) .icon-tile::after, .quick-card:nth-child(4) .icon-tile svg { animation-delay: -3.6s; }
.quick-card:hover .icon-tile { background: radial-gradient(circle at 50% 50%, #fff, rgba(var(--quick-rgb),.2)); border-color: rgba(var(--quick-rgb),.62); box-shadow: 0 15px 32px rgba(var(--quick-rgb),.2), 0 0 0 6px rgba(var(--quick-rgb),.075); }
.quick-card.hover-card:hover .icon-tile::before { opacity: .62; }
.quick-card.hover-card:hover .icon-tile::after { opacity: .38; }
.quick-card h2 { position: relative; z-index: 1; margin: 24px 0 7px; font-size: 23px; }
.quick-card p { position: relative; z-index: 1; max-width: 430px; margin: 0; color: var(--text); font-size: 13px; }
.quick-card > span { position: relative; z-index: 1; width: max-content; margin-top: auto; padding-top: 22px; color: rgb(var(--quick-rgb)); font-size: 12px; font-weight: 900; transition: transform .3s var(--ease), text-shadow .3s ease; }
.quick-card:hover > span { transform: translateX(5px); text-shadow: 0 5px 16px rgba(var(--quick-rgb),.2); }
.home-flow-panel { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.home-flow-panel::before { display: none; }
.home-flow-step { position: relative; min-height: 270px; padding: 30px 26px; overflow: hidden; background: #fff; border: 1px solid #d5e6f3; border-radius: 18px; box-shadow: 0 14px 38px rgba(26,76,121,.075); transition: background .3s ease, transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.home-flow-step::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.home-flow-step:nth-child(2)::before { background: linear-gradient(90deg, var(--cyan), #2f90de); }
.home-flow-step:nth-child(3)::before { background: linear-gradient(90deg, #7657dc, var(--blue)); }
.home-flow-step:nth-child(4)::before { background: linear-gradient(90deg, var(--red), var(--coral)); }
.home-flow-step:hover { z-index: 1; background: linear-gradient(145deg, #fff, #eef7ff); border-color: #aed4ef; box-shadow: 0 22px 48px rgba(26,76,121,.13); transform: translateY(-6px); }
.home-flow-step:not(:last-child)::after { content: "→"; position: absolute; right: -24px; top: 50%; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; color: var(--blue); background: #fff; border: 1px solid #c4dff2; border-radius: 50%; box-shadow: 0 8px 20px rgba(24,77,123,.1); font-size: 13px; transform: translateY(-50%); }
.flow-number { width: 48px; height: 48px; display: grid; place-items: center; color: var(--blue); background: #eaf5ff; border: 1px solid #b8d9f1; border-radius: 14px; font: 900 12px/1 monospace; }
.home-flow-step small { display: block; margin-top: 31px; color: #8a9cae; font: 800 9px/1 monospace; letter-spacing: .15em; }
.home-flow-step h3 { margin: 8px 0; font-size: 21px; }
.home-flow-step p { margin: 0; color: var(--text); font-size: 13px; }
.home-flow-link { margin-top: 24px; padding: 17px 21px; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: #6f8498; background: #f6faff; border: 1px solid #d9e8f4; border-radius: 13px; font-size: 13px; }
.home-flow-link a { padding: 6px 10px; color: var(--blue); background: #eaf5ff; border-radius: 7px; font-weight: 900; }
.home-final-cta { --cta-x: 72%; --cta-y: 42%; position: relative; min-height: 238px; padding: 50px 52px; display: flex; align-items: center; justify-content: space-between; gap: 50px; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(circle at var(--cta-x) var(--cta-y), rgba(98,230,244,.34), rgba(32,176,220,.12) 20%, transparent 42%), linear-gradient(115deg, #072846 0%, #075d9b 44%, #098dce 72%, #23bad4 100%); background-size: 100% 100%, 150% 150%; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; box-shadow: 0 26px 68px rgba(11,77,129,.24), inset 0 1px 0 rgba(255,255,255,.12); animation: homeCtaGradient 12s ease-in-out infinite; transition: border-color .4s ease, box-shadow .4s ease; }
.home-final-cta:hover { border-color: rgba(255,255,255,.38); box-shadow: 0 32px 78px rgba(11,77,129,.3), inset 0 1px 0 rgba(255,255,255,.18); }
.home-final-cta::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 34px 34px; opacity: .14; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 60%, #000); mask-image: linear-gradient(90deg, transparent 20%, #000 60%, #000); animation: homeCtaGrid 9s linear infinite; }
.home-final-cta::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--red), #ff827a 18%, #fff 44%, var(--cyan) 68%, var(--red)); background-size: 220% 100%; opacity: .9; animation: homeCtaAccent 5s linear infinite; }
.home-cta-motion { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home-cta-motion::before { content: ""; position: absolute; width: 22%; height: 230%; left: -36%; top: -68%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), rgba(129,238,250,.12), transparent); filter: blur(2px); transform: rotate(18deg); animation: homeCtaSweep 8.2s ease-in-out infinite; }
.home-cta-motion::after { content: ""; position: absolute; width: 360px; height: 360px; right: 92px; top: 50%; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 44px rgba(255,255,255,.035), 0 0 0 88px rgba(255,255,255,.018); transform: translateY(-50%); animation: homeCtaRingPulse 4.5s ease-in-out infinite; }
.cta-orbit { position: absolute; top: 50%; right: 128px; border-radius: 50%; transform: translateY(-50%); }
.cta-orbit-outer { width: 282px; height: 282px; border: 1px dashed rgba(255,255,255,.24); animation: homeCtaOrbit 16s linear infinite; }
.cta-orbit-inner { width: 190px; height: 190px; margin-right: 46px; border: 1px solid rgba(126,235,246,.22); border-left-color: rgba(255,255,255,.72); border-right-color: rgba(255,255,255,.06); animation: homeCtaOrbitReverse 10s linear infinite; }
.cta-signal { position: absolute; width: 7px; height: 7px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: #7ff0f8; box-shadow: 0 0 0 6px rgba(127,240,248,.08), 0 0 18px rgba(127,240,248,.8); animation: homeCtaSignal 2.4s ease-in-out infinite; }
.cta-signal-one { left: 48%; top: 24%; }
.cta-signal-two { left: 64%; bottom: 19%; animation-delay: -.8s; }
.cta-signal-three { right: 9%; top: 25%; animation-delay: -1.6s; }
.home-final-copy, .home-final-actions { position: relative; z-index: 2; }
.home-final-copy { max-width: 610px; }
.home-final-cta small { display: inline-flex; align-items: center; gap: 8px; color: #8be8f5; font: 800 10px/1 monospace; letter-spacing: .14em; }
.home-final-cta small i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #75eff5; box-shadow: 0 0 0 5px rgba(117,239,245,.1), 0 0 16px rgba(117,239,245,.75); animation: homeCtaSignal 2s ease-in-out infinite; }
.home-final-cta h2 { width: max-content; max-width: 100%; margin: 12px 0 7px; color: #fff; background: linear-gradient(100deg, #fff 0%, #fff 39%, #9eeffc 49%, #fff 59%, #fff 100%); background-size: 230% 100%; -webkit-background-clip: text; background-clip: text; font-size: 36px; letter-spacing: 0; animation: homeCtaTitle 7s ease-in-out infinite; }
.home-final-cta p { margin: 0; color: rgba(255,255,255,.72); }
.home-final-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.home-final-actions .button { min-width: 144px; border-color: rgba(255,255,255,.2); }
.home-final-actions .button-primary { animation: homeCtaButtonPulse 3s ease-in-out infinite; }
.home-final-actions .button-secondary { background: rgba(255,255,255,.95); box-shadow: 0 14px 34px rgba(3,45,79,.15); }
.home-final-actions .button svg { transition: transform .35s var(--ease); }
.home-final-actions .button:hover svg { transform: translateX(3px) scale(1.06); }

/* Inner pages */
.page-hero { position: relative; width: 100%; height: 440px; min-height: 440px; display: grid; align-items: center; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 78% 22%, rgba(var(--page-rgb),.15), transparent 32%), linear-gradient(112deg, rgba(251,253,255,.98) 0%, rgba(247,251,255,.93) 48%, rgba(var(--page-rgb),.11) 100%); border-bottom: 1px solid rgba(var(--page-rgb),.14); border-radius: 0 0 28px 28px; box-shadow: 0 22px 56px rgba(29,76,119,.11), inset 0 -1px 0 rgba(255,255,255,.82); }
.page-hero::before { content: ""; position: absolute; inset: -8px; z-index: 0; opacity: .21; background: url("assets/hero.jpg") center / cover; filter: saturate(.62) brightness(1.3) contrast(.86); transform: scale(1.025); animation: pageHeroImageDrift 18s ease-in-out infinite; }
.page-hero::after { content: ""; position: absolute; width: 500px; height: 500px; right: -110px; top: -285px; z-index: 0; border: 1px solid rgba(var(--page-rgb),.24); border-radius: 50%; box-shadow: 0 0 0 66px rgba(var(--page-rgb),.05), 0 0 0 132px rgba(var(--page-rgb),.025); animation: pageHeroRings 8s ease-in-out infinite; }
.page-hero-motion { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.page-hero-motion::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(var(--page-rgb),.22) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--page-rgb),.2) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: linear-gradient(90deg, transparent 25%, rgba(0,0,0,.2) 48%, #000 100%); mask-image: linear-gradient(90deg, transparent 25%, rgba(0,0,0,.2) 48%, #000 100%); animation: pageHeroGridMove 12s linear infinite; }
.page-hero-motion::after { content: ""; position: absolute; width: 17%; height: 230%; left: -30%; top: -64%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), rgba(var(--page-rgb),.13), transparent); filter: blur(2px); transform: rotate(18deg); animation: pageHeroSweep 10.5s ease-in-out infinite; }
.page-hero-motion i { position: absolute; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--page-accent-2); box-shadow: 0 0 0 6px rgba(var(--page-rgb),.07), 0 0 18px rgba(var(--page-rgb),.48); animation: pageHeroNodePulse 2.7s ease-in-out infinite; }
.page-hero-motion i:nth-child(1) { left: 48%; top: 22%; }
.page-hero-motion i:nth-child(2) { left: 69%; bottom: 18%; animation-delay: -.9s; }
.page-hero-motion i:nth-child(3) { right: 8%; top: 32%; animation-delay: -1.8s; }
.page-hero-inner { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 72px; align-items: center; padding: 56px 0; }
.page-hero-inner > div:first-child { position: relative; z-index: 2; }
.page-hero h1 { margin: 17px 0 13px; font-size: 64px; line-height: 1.08; letter-spacing: 0; text-shadow: 0 8px 28px rgba(26,72,115,.08); }
.page-hero p { max-width: 700px; margin: 0; padding: 2px 0 2px 16px; color: #49637e; border-left: 2px solid transparent; border-image: linear-gradient(var(--red), var(--page-accent), var(--page-accent-2)) 1; font-size: 15px; line-height: 1.85; }
.page-hero .badge { color: var(--page-accent); background: linear-gradient(135deg, rgba(var(--page-rgb),.08), rgba(255,255,255,.94) 44%); border-color: rgba(var(--page-rgb),.32); box-shadow: 0 10px 26px rgba(var(--page-rgb),.1), inset 0 1px 0 #fff; }
.page-hero .badge i { background: var(--page-accent-2); box-shadow: 0 0 0 5px rgba(var(--page-rgb),.09), 0 0 13px rgba(var(--page-rgb),.45); animation: pageHeroNodePulse 2.3s ease-in-out infinite; }
.page-hero .accent-rule { width: 150px; height: 4px; margin: 21px 0; overflow: visible; background: linear-gradient(90deg, var(--red), var(--page-accent-2), var(--page-accent), var(--red)); background-size: 230% 100%; box-shadow: 0 5px 14px rgba(var(--page-rgb),.2); animation: pageHeroAccentFlow 4.8s linear infinite; }
.page-hero .accent-rule::before, .page-hero .accent-rule::after { display: none; }
.page-hero .history-tags span { position: relative; padding-left: 24px; color: var(--page-accent); background: rgba(255,255,255,.88); border-color: rgba(var(--page-rgb),.25); border-radius: 8px; box-shadow: 0 8px 20px rgba(var(--page-rgb),.07); transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.page-hero .history-tags span::before { content: ""; position: absolute; width: 6px; height: 6px; left: 10px; top: 50%; border-radius: 50%; background: var(--page-accent-2); box-shadow: 0 0 9px rgba(var(--page-rgb),.42); transform: translateY(-50%); }
.page-hero .history-tags span:hover { border-color: rgba(var(--page-rgb),.42); box-shadow: 0 11px 25px rgba(var(--page-rgb),.11); transform: translateY(-2px); }
.page-icon { position: relative; width: 194px; height: 194px; justify-self: end; display: grid; place-items: center; overflow: visible; color: var(--page-accent); border: 0; border-radius: 50%; background: transparent; box-shadow: none; transform: rotate(0); }
.page-icon::before { content: ""; position: absolute; width: 140px; height: 140px; left: 50%; top: 50%; z-index: 2; border: 1px solid rgba(var(--page-rgb),.3); border-radius: 50%; background: linear-gradient(rgba(var(--page-rgb),.07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--page-rgb),.065) 1px, transparent 1px), radial-gradient(circle at 34% 26%, #fff 0%, rgba(255,255,255,.96) 44%, rgba(var(--page-rgb),.08) 100%); background-size: 28px 28px, 28px 28px, 100% 100%; box-shadow: 0 24px 58px rgba(var(--page-rgb),.18), 0 0 0 9px rgba(255,255,255,.44), inset 0 1px 0 #fff; transform: translate(-50%, -50%); transition: box-shadow .4s ease, border-color .4s ease; }
.page-icon::after { content: ""; position: absolute; inset: 1px; z-index: 0; border-radius: 50%; background: repeating-conic-gradient(from -3deg, rgba(var(--page-rgb),.48) 0 1deg, transparent 1deg 12deg); opacity: .42; -webkit-mask-image: radial-gradient(circle, transparent 0 91%, #000 91.5% 94%, transparent 94.5%); mask-image: radial-gradient(circle, transparent 0 91%, #000 91.5% 94%, transparent 94.5%); animation: pageIconTicks 30s linear infinite; transition: opacity .55s ease, filter .55s ease; }
.page-icon:hover::before { border-color: rgba(var(--page-rgb),.48); box-shadow: 0 29px 66px rgba(var(--page-rgb),.24), 0 0 0 11px rgba(255,255,255,.52), 0 0 34px rgba(var(--page-rgb),.12), inset 0 1px 0 #fff; }
.page-icon:hover::after { opacity: .68; filter: drop-shadow(0 0 7px rgba(var(--page-rgb),.32)); }
.page-icon-orbit { position: absolute; width: 174px; height: 174px; left: 50%; top: 50%; z-index: 1; border: 1px solid rgba(var(--page-rgb),.18); border-top-color: var(--page-accent); border-right-color: var(--page-accent-2); border-radius: 50%; box-shadow: 0 0 18px rgba(var(--page-rgb),.08); transform: translate(-50%, -50%); animation: pageIconOrbit 13s linear infinite; transition: border-color .55s linear, box-shadow .55s linear, filter .55s linear; will-change: transform; }
.page-icon-orbit::before { content: ""; position: absolute; inset: 13px; border: 1px dashed rgba(var(--page-rgb),.22); border-radius: 50%; animation: pageIconOrbitReverse 9s linear infinite; transition: border-color .55s linear, opacity .55s linear; will-change: transform; }
.page-icon-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; left: 22px; top: 19px; border: 2px solid #fff; border-radius: 50%; background: var(--page-accent-2); box-shadow: 0 0 0 4px rgba(var(--page-rgb),.07), 0 0 13px rgba(var(--page-rgb),.46); transition: background-color .45s linear, box-shadow .45s linear; }
.page-icon svg { position: relative; z-index: 3; width: 78px; height: 78px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 8px 14px rgba(var(--page-rgb),.18)); transition: color .45s linear, filter .45s linear; }
.page-icon:hover .page-icon-orbit { border-color: rgba(var(--page-rgb),.42); border-top-color: var(--page-accent-2); border-right-color: var(--page-accent); box-shadow: 0 0 22px rgba(var(--page-rgb),.19), inset 0 0 18px rgba(var(--page-rgb),.05); filter: saturate(1.12); }
.page-icon:hover .page-icon-orbit::before { border-color: rgba(var(--page-rgb),.4); opacity: .92; }
.page-icon:hover .page-icon-orbit::after { background: #fff; box-shadow: 0 0 0 4px rgba(var(--page-rgb),.14), 0 0 18px rgba(var(--page-rgb),.68); }
.page-icon:hover svg { color: var(--page-accent-2); filter: drop-shadow(0 9px 18px rgba(var(--page-rgb),.3)); }
.section-heading { position: relative; padding: 0 0 19px 23px; display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 38px; border-bottom: 1px solid rgba(var(--page-rgb),.11); }
.section-heading::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: linear-gradient(var(--page-accent-2), var(--page-accent)); }
.section-heading small { color: var(--page-accent); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.section-heading h2 { margin: 9px 0 0; font-size: 52px; line-height: 1.15; letter-spacing: 0; }
.section-heading p { max-width: 450px; margin: 0; color: #60768d; font-size: 13px; line-height: 1.8; }
.icon-tile { position: relative; width: 68px; height: 68px; display: grid; place-items: center; color: var(--page-accent); border: 1px solid rgba(var(--page-rgb),.25); border-radius: 15px; background: rgba(var(--page-rgb),.07); overflow: hidden; }
.icon-tile::before { content: ""; position: absolute; z-index: 0; width: calc(100% - 14px); height: calc(100% - 14px); left: 50%; top: 50%; border: 1px dashed currentColor; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) rotate(0deg); transition: opacity .4s var(--motion-soft); }
.icon-tile::after { content: ""; position: absolute; width: 45px; height: 45px; left: 50%; top: 50%; border: 1px solid currentColor; opacity: .12; transform: translate(-50%, -50%) rotate(45deg); }
.icon-tile svg { position: absolute; z-index: 1; width: 33px; height: 33px; left: 50%; top: 50%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: translate(-50%, -50%); transform-origin: center; transform-box: fill-box; transition: transform .45s var(--motion-ease), filter .45s ease; }
.hover-card .icon-tile::before { animation: iconOrbit 6.8s linear infinite; animation-play-state: paused; }
.hover-card .icon-tile::after { animation: iconDiamondOrbit 8.4s linear infinite; animation-play-state: paused; }
.hover-card:hover .icon-tile::before { opacity: .3; animation-play-state: running; }
.hover-card:hover .icon-tile::after { animation-play-state: running; }
.hover-card:hover .icon-tile svg { transform: translate(-50%, -50%) scale(1.07); filter: drop-shadow(0 0 5px currentColor); }
.quick-card.hover-card .icon-tile::before, .quick-card.hover-card .icon-tile::after { animation-play-state: running; }

/* History */
#journey, #team-stories, #feature-releases, #next-update { scroll-margin-top: 104px; }
.history-chapter-nav { position: relative; z-index: 4; background: rgba(255,255,255,.94); border-bottom: 1px solid #d7e7f4; box-shadow: 0 12px 30px rgba(25,73,116,.055); backdrop-filter: blur(14px); }
.history-chapter-nav .container { min-height: 70px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.history-chapter-nav a { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; color: #597189; border-left: 1px solid #e2edf6; font-size: 13px; font-weight: 800; transition: color .3s ease, background .3s ease; }
.history-chapter-nav a:last-child { border-right: 1px solid #e2edf6; }
.history-chapter-nav a::after { content: ""; position: absolute; height: 3px; left: 24%; right: 24%; bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--red), var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: center; transition: transform .38s var(--motion-ease); }
.history-chapter-nav a:hover { color: var(--navy); background: linear-gradient(180deg, rgba(238,247,255,.38), rgba(238,247,255,.82)); }
.history-chapter-nav a:hover::after { transform: scaleX(1); }
.history-chapter-nav a span { min-width: 29px; color: var(--page-accent); font: 900 10px/1 monospace; letter-spacing: .08em; }
.history-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.history-intro { position: sticky; top: 120px; align-self: start; }
.history-intro h2 { margin: 16px 0 13px; font-size: 42px; line-height: 1.2; letter-spacing: 0; }
.history-intro h2 em { position: relative; display: inline-block; color: inherit; font-style: normal; }
.history-intro h2 em::after { content: ""; position: absolute; width: 92px; height: 3px; left: 1px; bottom: -7px; background: linear-gradient(90deg, var(--red), var(--blue), var(--cyan), var(--red)); background-size: 220% 100%; border-radius: 999px; box-shadow: 0 4px 12px rgba(8,127,230,.18); animation: historyTitleAccent 4.8s linear infinite; }
.history-intro-rule { position: relative; width: 170px; height: 1px; margin: 22px 0 17px; display: block; overflow: visible; background: linear-gradient(90deg, #b8d9ef, rgba(184,217,239,0)); }
.history-intro-rule::before { content: ""; position: absolute; width: 6px; height: 6px; left: 0; top: 50%; border: 2px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px rgba(235,55,57,.45), 0 0 13px rgba(235,55,57,.5); transform: translateY(-50%); }
.history-intro-rule i { position: absolute; width: 34px; height: 1px; left: 0; top: 0; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: historyRuleScan 3.8s ease-in-out infinite; }
.history-intro p { max-width: 430px; margin: 0; padding: 2px 0 2px 16px; color: var(--text); border-left: 2px solid transparent; border-image: linear-gradient(var(--red), var(--blue), var(--cyan)) 1; line-height: 1.85; }
.history-stamp { position: relative; width: 230px; height: 230px; margin-top: 35px; isolation: isolate; }
.history-stamp::before { content: ""; position: absolute; inset: 12px; z-index: -2; border-radius: 50%; background: radial-gradient(circle, rgba(8,127,230,.09), rgba(31,192,210,.035) 42%, transparent 70%); box-shadow: 0 20px 48px rgba(29,82,129,.1); animation: historyStampGlow 4s ease-in-out infinite; }
.history-stamp::after { content: ""; position: absolute; inset: 18px; z-index: -1; opacity: .22; border-radius: 50%; background-image: linear-gradient(rgba(8,127,230,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(8,127,230,.2) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(circle, #000, transparent 68%); mask-image: radial-gradient(circle, #000, transparent 68%); }
.history-stamp-ticks { position: absolute; inset: 5px; z-index: 0; border-radius: 50%; background: repeating-conic-gradient(from -3deg, rgba(8,127,230,.5) 0 1deg, transparent 1deg 12deg); opacity: .34; -webkit-mask-image: radial-gradient(circle, transparent 0 94%, #000 94.5% 96%, transparent 96.5%); mask-image: radial-gradient(circle, transparent 0 94%, #000 94.5% 96%, transparent 96.5%); animation: historyTicksSpin 32s linear infinite; }
.history-stamp-sweep { position: absolute; inset: 34px; z-index: 0; border-radius: 50%; background: conic-gradient(from 210deg, transparent 0 62%, rgba(8,127,230,.06) 72%, rgba(31,192,210,.24) 82%, transparent 92%); filter: blur(.4px); animation: historySweepSpin 9s linear infinite; }
.history-stamp-orbit { position: absolute; left: 50%; top: 50%; z-index: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.history-stamp-orbit-outer { width: 202px; height: 202px; border: 1px dashed rgba(8,127,230,.4); animation: historyOrbitSpin 15s linear infinite; transition: border-color .45s linear, filter .45s linear; }
.history-stamp-orbit-outer::before { content: ""; position: absolute; width: 8px; height: 8px; left: 25px; top: 21px; border: 2px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(235,55,57,.07), 0 0 14px rgba(235,55,57,.5); }
.history-stamp-orbit-inner { width: 146px; height: 146px; border: 1px solid rgba(8,127,230,.18); border-top-color: rgba(8,127,230,.7); border-right-color: rgba(31,192,210,.65); animation: historyOrbitSpinReverse 10s linear infinite; transition: border-color .45s linear, filter .45s linear; }
.history-stamp-orbit-inner::after { content: ""; position: absolute; width: 7px; height: 7px; right: 13px; bottom: 25px; border: 2px solid #fff; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(31,192,210,.07), 0 0 13px rgba(31,192,210,.5); }
.history-stamp-core { position: absolute; width: 96px; height: 96px; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; color: var(--navy); background: rgba(255,255,255,.96); border: 1px solid #cbe2f3; border-radius: 50%; box-shadow: 0 14px 35px rgba(28,82,129,.15), inset 0 1px 0 #fff; transform: translate(-50%, -50%); animation: historyCorePulse 3.4s ease-in-out infinite; }
.history-stamp-core::before { content: ""; position: absolute; inset: -7px; z-index: -1; border: 1px solid; border-color: var(--red) var(--blue) var(--cyan) transparent; border-radius: 50%; opacity: .72; animation: historyCoreRingSpin 7s linear infinite; }
.history-stamp-core::after { content: ""; position: absolute; inset: 9px; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), rgba(233,246,255,.45) 46%, transparent 72%); }
.history-stamp-core img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(22,76,119,.14)); animation: historyLogoBreath 3.6s ease-in-out infinite; }
.history-stamp-label { --label-rgb: 8,127,230; position: absolute; z-index: 3; min-width: 64px; padding: 7px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--navy); background: linear-gradient(135deg, rgba(var(--label-rgb),.08), rgba(255,255,255,.97) 48%); border: 1px solid rgba(var(--label-rgb),.28); border-radius: 8px; box-shadow: 0 10px 24px rgba(28,82,129,.12), inset 0 1px 0 #fff; font-size: 11px; font-weight: 900; letter-spacing: 0; animation: historyLabelFloat 3.2s ease-in-out infinite; }
.history-stamp-label::after { content: ""; position: absolute; height: 1px; background: linear-gradient(90deg, rgba(var(--label-rgb),.55), rgba(var(--label-rgb),.08)); transform-origin: center; }
.history-stamp-label i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--label-rgb)); box-shadow: 0 0 10px rgba(var(--label-rgb),.52); animation: historyLabelDotPulse 2.2s ease-in-out infinite; }
.history-label-team { --label-rgb: 235,55,57; left: -3px; top: 18px; }
.history-label-team::after { width: 27px; right: -25px; top: 64%; transform: rotate(18deg); }
.history-label-product { --label-rgb: 8,127,230; right: -7px; top: 97px; animation-delay: -1.05s; }
.history-label-product::after { width: 27px; left: -25px; top: 50%; background: linear-gradient(90deg, rgba(var(--label-rgb),.08), rgba(var(--label-rgb),.55)); }
.history-label-growth { --label-rgb: 31,192,210; left: 13px; bottom: 3px; animation-delay: -2.1s; }
.history-label-growth::after { width: 27px; right: -23px; top: 12%; transform: rotate(-27deg); }
.history-stamp:hover .history-stamp-orbit-outer { border-color: rgba(8,127,230,.62); filter: drop-shadow(0 0 7px rgba(8,127,230,.18)); }
.history-stamp:hover .history-stamp-orbit-inner { border-color: rgba(31,192,210,.42); border-top-color: rgba(8,127,230,.86); border-right-color: rgba(31,192,210,.84); filter: drop-shadow(0 0 6px rgba(31,192,210,.16)); }
.history-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.history-tags span { padding: 7px 12px; color: #17639f; background: rgba(255,255,255,.78); border: 1px solid #bad8ef; border-radius: 999px; font-size: 11px; font-weight: 800; }
.timeline { --timeline-progress: 0px; position: relative; display: grid; gap: 22px; }
.timeline::before { content: ""; position: absolute; left: 28px; top: 22px; bottom: 22px; width: 4px; background: #dfebf5; border: 1px solid #cbdfee; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 5px rgba(226,239,248,.42); }
.timeline::after { content: ""; position: absolute; left: 28px; top: 22px; width: 4px; height: var(--timeline-progress); max-height: calc(100% - 44px); background: linear-gradient(180deg, var(--red), #7661df 38%, var(--blue) 68%, var(--cyan)); background-size: 100% 220%; border-radius: 999px; box-shadow: 0 0 12px rgba(8,127,230,.45), 0 0 24px rgba(31,192,210,.15); animation: timelineRailFlow 4s linear infinite; }
.timeline-item { --stage-rgb: 8,127,230; position: relative; z-index: 1; margin-left: 88px; padding: 30px 34px; overflow: visible; background: radial-gradient(circle at 0 0, rgba(var(--stage-rgb),.08), transparent 36%), #fff; border: 1px solid #d8e8f6; border-radius: 16px; box-shadow: 0 14px 38px rgba(27,77,124,.07), inset 3px 0 0 rgba(var(--stage-rgb),.1); transition: transform .42s var(--ease), border-color .35s ease, box-shadow .35s ease, background .35s ease; }
.timeline-item:nth-of-type(1) { --stage-rgb: 235,55,57; }
.timeline-item:nth-of-type(2) { --stage-rgb: 8,127,230; }
.timeline-item:nth-of-type(3) { --stage-rgb: 102,91,208; }
.timeline-item:nth-of-type(4) { --stage-rgb: 22,155,205; }
.timeline-item:nth-of-type(5) { --stage-rgb: 27,181,184; }
.timeline-item:nth-of-type(6) { --stage-rgb: 10,128,176; }
.timeline-item::before { content: attr(data-step); position: absolute; width: 44px; height: 44px; left: -80px; top: 31px; z-index: 3; display: grid; place-items: center; box-sizing: border-box; color: rgb(var(--stage-rgb)); background: #fff; border: 6px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(var(--stage-rgb),.48), 0 7px 18px rgba(29,79,123,.13); font: 900 10px/1 monospace; transition: color .3s ease, background .3s ease, box-shadow .35s ease, transform .4s var(--ease); }
.timeline-item::after { content: ""; position: absolute; width: 58px; height: 2px; left: -58px; top: 52px; z-index: 1; background: linear-gradient(90deg, rgba(var(--stage-rgb),.7), rgba(var(--stage-rgb),.16)); transform: scaleX(.42); transform-origin: left; transition: transform .45s var(--ease), box-shadow .35s ease; }
.timeline-item.is-passed::before { color: #fff; background: rgb(var(--stage-rgb)); box-shadow: 0 0 0 1px rgba(var(--stage-rgb),.5), 0 0 0 7px rgba(var(--stage-rgb),.08), 0 8px 22px rgba(var(--stage-rgb),.24); }
.timeline-item.is-passed::after { transform: scaleX(1); }
.timeline-item.is-current { border-color: rgba(var(--stage-rgb),.42); background: radial-gradient(circle at 0 0, rgba(var(--stage-rgb),.14), transparent 42%), linear-gradient(135deg, #fff, rgba(var(--stage-rgb),.035)); box-shadow: 0 23px 52px rgba(27,77,124,.13), inset 4px 0 0 rgb(var(--stage-rgb)); transform: translateY(-3px); }
.timeline-item.is-current::before { animation: timelineNodePulse 2s ease-in-out infinite; }
.timeline-item.is-current::after { box-shadow: 0 0 12px rgba(var(--stage-rgb),.45); }
.timeline-item:hover { z-index: 2; border-color: rgba(var(--stage-rgb),.5); box-shadow: 0 25px 56px rgba(27,77,124,.14), inset 4px 0 0 rgb(var(--stage-rgb)); transform: translateY(-5px); }
.timeline-item:hover::before { color: #fff; background: rgb(var(--stage-rgb)); box-shadow: 0 0 0 1px rgba(var(--stage-rgb),.55), 0 0 0 9px rgba(var(--stage-rgb),.1), 0 10px 25px rgba(var(--stage-rgb),.28); transform: scale(1.08); }
.timeline-item:hover::after { transform: scaleX(1); box-shadow: 0 0 12px rgba(var(--stage-rgb),.45); }
.timeline-index { position: absolute; right: 24px; top: 15px; color: rgb(var(--stage-rgb)); font: 900 48px/1 monospace; opacity: .065; pointer-events: none; transition: opacity .35s ease, transform .45s var(--ease); }
.timeline-item:hover .timeline-index, .timeline-item.is-current .timeline-index { opacity: .13; transform: translateY(3px) scale(1.06); }
.timeline-item small { position: relative; z-index: 1; color: rgb(var(--stage-rgb)); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.timeline-item h3 { position: relative; z-index: 1; margin: 9px 0; padding-right: 48px; font-size: 22px; }
.timeline-item p { position: relative; z-index: 1; margin: 0; color: var(--text); font-size: 14px; }
.timeline-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.timeline-tags span { padding: 5px 9px; color: rgb(var(--stage-rgb)); background: rgba(var(--stage-rgb),.065); border: 1px solid rgba(var(--stage-rgb),.18); border-radius: 6px; font-size: 10px; font-weight: 800; transition: background .3s ease, border-color .3s ease; }
.timeline-item:hover .timeline-tags span { background: rgba(var(--stage-rgb),.1); border-color: rgba(var(--stage-rgb),.28); }
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.value-card { position: relative; padding: 30px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 38px rgba(27,77,124,.065); transition: transform .35s var(--ease), box-shadow .35s ease; }
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.value-card h3 { margin: 20px 0 8px; }
.value-card p { margin: 0; color: var(--text); font-size: 14px; }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.event-card { --event-rgb: 8,127,230; display: block; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 16px 40px rgba(27,77,124,.07); transition: transform .38s var(--motion-ease), box-shadow .38s ease, border-color .38s ease; }
.event-card:nth-child(2) { --event-rgb: 18,91,150; }
.event-card:nth-child(3) { --event-rgb: 235,82,64; }
.event-card:hover { transform: translateY(-5px); border-color: rgba(var(--event-rgb),.34); box-shadow: 0 25px 58px rgba(27,77,124,.14); }
.event-card:focus-visible { outline: 3px solid rgba(8,127,230,.22); outline-offset: 4px; }
.event-visual { position: relative; height: 210px; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(145deg, #0878d5, #23b5dd); }
.event-cover-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.event-visual.has-uploaded-image .event-cover-image { opacity: 1; }
.event-visual.has-uploaded-image::before { z-index: 2; opacity: .08; }
.event-visual.has-uploaded-image::after { display: none; }
.event-visual.has-uploaded-image > svg { opacity: 0; }
.event-visual.has-uploaded-image > span { z-index: 3; padding: 6px 8px; border-radius: 4px; background: rgba(9,35,55,.45); color: #fff; opacity: 1; }
.event-visual::before { content: ""; position: absolute; inset: -28px; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 28px 28px; transition: opacity .5s ease, transform .7s var(--motion-ease); }
.event-visual::after { content: ""; position: absolute; width: 176px; height: 176px; right: -62px; top: -70px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.78) 0 1deg, transparent 1deg 14deg); opacity: .3; -webkit-mask-image: radial-gradient(circle, transparent 0 88%, #000 89% 92%, transparent 93%); mask-image: radial-gradient(circle, transparent 0 88%, #000 89% 92%, transparent 93%); animation: eventRingSpin 24s linear infinite; transition: opacity .45s ease, filter .45s ease; }
.event-team { background: linear-gradient(145deg, #123c6a, #1689ba); }
.event-release { background: linear-gradient(145deg, #e84242, #ff7b45); }
.event-visual svg { position: relative; z-index: 1; width: 88px; height: 88px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; transition: transform .55s var(--ease); }
.event-card:hover .event-visual svg { transform: translateY(-7px) scale(1.06); }
.event-card:hover .event-visual::before { opacity: .29; transform: translate3d(8px, 8px, 0); }
.event-card:hover .event-visual::after { opacity: .64; filter: drop-shadow(0 0 7px rgba(255,255,255,.24)); }
.event-visual > span { position: absolute; z-index: 1; left: 20px; bottom: 17px; font: 800 9px/1 monospace; letter-spacing: .15em; opacity: .72; }
.event-copy { min-height: 226px; padding: 27px; display: flex; flex-direction: column; }
.event-copy small { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.event-copy h3 { margin: 9px 0; font-size: 21px; }
.event-copy p { margin: 0; color: var(--text); font-size: 14px; }
.event-link { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--blue); border-top: 1px solid rgba(var(--event-rgb),.11); font-size: 11px; font-weight: 900; }
.event-link i { font-style: normal; transition: transform .25s ease; }
.event-card:hover .event-link i { transform: translateX(5px); }
.release-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.release-card { --release-rgb: 8,127,230; position: relative; min-height: 250px; padding: 29px; display: grid; grid-template-columns: 62px 1fr; gap: 20px; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 100% 100%, rgba(var(--release-rgb),.07), transparent 35%), linear-gradient(145deg, #fff, #fbfdff); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 32px rgba(27,77,124,.045); transition: transform .38s var(--motion-ease), border-color .35s ease, box-shadow .38s ease; }
.release-card:nth-child(1) { --release-rgb: 8,127,230; }
.release-card:nth-child(2) { --release-rgb: 61,118,220; }
.release-card:nth-child(3) { --release-rgb: 20,166,184; }
.release-card:nth-child(4) { --release-rgb: 235,82,64; }
.release-card::after { content: attr(data-index); position: absolute; z-index: -1; right: 18px; bottom: -13px; color: rgba(var(--release-rgb),.055); font: 900 86px/1 monospace; letter-spacing: 0; transition: color .38s ease, transform .5s var(--motion-ease); }
.release-card:hover { transform: translateY(-5px); border-color: rgba(var(--release-rgb),.35); box-shadow: 0 24px 54px rgba(27,77,124,.12); }
.release-card:hover::after { color: rgba(var(--release-rgb),.1); transform: translateY(-4px); }
.release-card > div { position: relative; z-index: 1; }
.release-index { position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; color: rgb(var(--release-rgb)); background: rgba(var(--release-rgb),.07); border: 1px solid rgba(var(--release-rgb),.22); border-radius: 15px; box-shadow: inset 0 1px 0 #fff; font: 900 14px/1 monospace; transition: transform .42s var(--motion-ease), background .35s ease, box-shadow .35s ease; }
.release-card:hover .release-index { background: rgba(var(--release-rgb),.12); box-shadow: 0 12px 26px rgba(var(--release-rgb),.14), inset 0 1px 0 #fff; transform: translateY(-3px); }
.release-status { position: absolute; z-index: 3; right: 24px; top: 24px; padding: 6px 9px; display: inline-flex; align-items: center; gap: 7px; color: rgb(var(--release-rgb)); background: rgba(255,255,255,.82); border: 1px solid rgba(var(--release-rgb),.18); border-radius: 7px; font-size: 9px; font-weight: 900; }
.release-status i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--release-rgb)); box-shadow: 0 0 0 4px rgba(var(--release-rgb),.08); }
.release-card small { color: #7e95ab; font: 800 10px/1 monospace; letter-spacing: .12em; }
.release-card h3 { margin: 10px 0 8px; font-size: 21px; }
.release-card p { margin: 0; color: var(--text); font-size: 14px; }
.release-tags { display: flex; gap: 7px; margin-top: 15px; }
.release-tags span { padding: 4px 8px; color: rgb(var(--release-rgb)); background: rgba(var(--release-rgb),.065); border: 1px solid rgba(var(--release-rgb),.1); border-radius: 5px; font-size: 10px; font-weight: 800; }
.journey-cta { --journey-x: 74%; --journey-y: 42%; position: relative; min-height: 230px; margin-top: 75px; padding: 46px 48px; display: flex; align-items: center; justify-content: space-between; gap: 48px; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(circle at var(--journey-x) var(--journey-y), rgba(91,226,240,.32), rgba(23,163,211,.1) 22%, transparent 43%), linear-gradient(116deg, #092c51 0%, #075c9a 45%, #078fd0 73%, #20b8d2 100%); background-size: 100% 100%, 150% 150%; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; box-shadow: 0 26px 66px rgba(10,76,129,.24), inset 0 1px 0 rgba(255,255,255,.13); animation: journeyCtaGradient 13s ease-in-out infinite; transition: border-color .4s ease, box-shadow .4s ease; }
.journey-cta:hover { border-color: rgba(255,255,255,.4); box-shadow: 0 32px 76px rgba(10,76,129,.3), inset 0 1px 0 rgba(255,255,255,.18); }
.journey-cta::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 36px 36px; opacity: .13; -webkit-mask-image: linear-gradient(90deg, transparent 16%, #000 58%, #000); mask-image: linear-gradient(90deg, transparent 16%, #000 58%, #000); animation: journeyCtaGrid 10s linear infinite; }
.journey-cta::after { content: ""; position: absolute; inset: 0 0 auto; z-index: 4; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--red), #ff8279 18%, #fff 43%, var(--cyan) 68%, var(--red)); background-size: 230% 100%; opacity: .9; animation: journeyCtaAccent 5.4s linear infinite; }
.journey-cta-motion { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.journey-cta-motion::before { content: ""; position: absolute; width: 21%; height: 240%; left: -34%; top: -70%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.21), rgba(112,235,247,.1), transparent); filter: blur(2px); transform: rotate(17deg); animation: journeyCtaSweep 8.8s ease-in-out infinite; }
.journey-cta-motion::after { content: ""; position: absolute; width: 205px; height: 205px; right: 225px; top: 50%; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 0 38px rgba(255,255,255,.028), 0 0 0 76px rgba(255,255,255,.015); transform: translateY(-50%) rotate(45deg); animation: journeyDiamondDrift 8s ease-in-out infinite; }
.journey-route { position: absolute; left: 43%; right: 178px; bottom: 35px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.7), rgba(93,232,242,.8)); box-shadow: 0 0 12px rgba(90,225,240,.22); }
.journey-route::before { content: ""; position: absolute; width: 10px; height: 10px; left: 0; top: 50%; border: 2px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(235,55,57,.08), 0 0 18px rgba(255,89,82,.7); transform: translate(-50%, -50%); animation: journeyRouteRunner 5.2s linear infinite; }
.journey-route i { position: absolute; width: 9px; height: 9px; top: 50%; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: #1bc0d2; box-shadow: 0 0 0 5px rgba(27,192,210,.08), 0 0 15px rgba(27,192,210,.65); transform: translate(-50%, -50%); animation: journeyRouteNode 2.5s ease-in-out infinite; }
.journey-route i:nth-child(1) { left: 0; }
.journey-route i:nth-child(2) { left: 50%; animation-delay: -.8s; }
.journey-route i:nth-child(3) { left: 100%; animation-delay: -1.6s; }
.journey-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #8df2f7; box-shadow: 0 0 0 5px rgba(141,242,247,.07), 0 0 18px rgba(141,242,247,.75); animation: journeySpark 2.6s ease-in-out infinite; }
.journey-spark-one { left: 48%; top: 24%; }
.journey-spark-two { left: 66%; top: 35%; animation-delay: -.9s; }
.journey-spark-three { right: 11%; bottom: 24%; animation-delay: -1.8s; }
.journey-cta-copy, .journey-cta .button { position: relative; z-index: 2; }
.journey-cta-copy { width: min(100%, 670px); min-width: 0; }
.journey-cta small { display: inline-flex; align-items: center; gap: 8px; color: #8de9f4; font: 800 10px/1 monospace; letter-spacing: .14em; }
.journey-cta small i { width: 7px; height: 7px; display: block; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(235,55,57,.1), 0 0 16px rgba(255,92,84,.72); animation: journeyLabelPulse 2s ease-in-out infinite; }
.journey-cta h2 { width: max-content; max-width: 100%; margin: 12px 0 7px; color: #fff; background: linear-gradient(100deg, #fff 0%, #fff 39%, #9deefa 49%, #fff 59%, #fff 100%); background-size: 230% 100%; -webkit-background-clip: text; background-clip: text; font-size: 32px; letter-spacing: 0; animation: journeyTitleShine 7.5s ease-in-out infinite; }
.journey-cta p { margin: 0; color: rgba(255,255,255,.72); }
.journey-cta .button { flex: 0 0 auto; min-width: 166px; color: var(--navy); background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.65); box-shadow: 0 14px 34px rgba(0,0,0,.16); animation: journeyButtonGlow 3.2s ease-in-out infinite; }
.journey-cta .button svg { transition: transform .35s var(--ease); }
.journey-cta .button:hover svg { transform: translateX(4px) scale(1.06); }

/* Story detail pages */
body.story-page { --story-color: #087fe6; --story-color-2: #1bc4c8; --story-deep: #0a315d; }
body.story-team-page { --story-color: #1688b8; --story-color-2: #25c5c4; --story-deep: #113b65; }
body.story-release-page { --story-color: #ee4a43; --story-color-2: #ff8a3f; --story-deep: #672a35; }
.story-detail-hero { position: relative; min-height: 430px; display: grid; align-items: center; overflow: hidden; color: #fff; background: linear-gradient(125deg, var(--story-deep), var(--story-color) 66%, var(--story-color-2)); border-radius: 0 0 30px 30px; box-shadow: 0 20px 55px rgba(19,65,106,.16); }
.story-detail-hero::before { content: ""; position: absolute; inset: 0; opacity: .13; background: url("assets/hero.jpg") center / cover; mix-blend-mode: screen; }
.story-detail-hero::after { content: ""; position: absolute; width: 480px; height: 480px; right: -110px; top: -200px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.045), 0 0 0 140px rgba(255,255,255,.025); }
.story-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) 280px; align-items: center; gap: 70px; padding: 75px 0; }
.story-back { margin-bottom: 24px; display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 800; }
.story-back i { font-style: normal; transition: transform .25s ease; }
.story-back:hover i { transform: translateX(-4px); }
.story-detail-hero h1 { max-width: 720px; margin: 0; font-size: 68px; line-height: 1.08; letter-spacing: 0; }
.story-detail-hero p { max-width: 700px; margin: 18px 0 0; color: rgba(255,255,255,.75); font-size: 16px; }
.story-hero-tags { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 8px; }
.story-hero-tags span { padding: 7px 10px; color: rgba(255,255,255,.88); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 7px; font-size: 10px; font-weight: 800; backdrop-filter: blur(8px); }
.story-hero-mark { position: relative; width: 220px; height: 220px; justify-self: end; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 36px; background: rgba(255,255,255,.1); box-shadow: 0 25px 60px rgba(3,25,48,.18); backdrop-filter: blur(11px); transform: rotate(4deg); }
.story-hero-mark::before { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(255,255,255,.18); border-radius: 27px; }
.story-hero-mark svg { width: 104px; height: 104px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.story-hero-mark span { position: absolute; right: 18px; bottom: 16px; color: rgba(255,255,255,.58); font: 800 8px/1 monospace; letter-spacing: .13em; }
.story-content-section { padding: 95px 0; }
.story-content-section.soft { background: linear-gradient(180deg, #eef7ff, #f9fcff); }
.story-lead { display: grid; grid-template-columns: 1.08fr .92fr; gap: 28px; align-items: stretch; }
.story-lead.reverse { grid-template-columns: .92fr 1.08fr; }
.story-lead.reverse .story-copy-panel { order: -1; }
.story-copy-panel { padding: 42px; background: linear-gradient(145deg, #fff, #fbfdff); border: 1px solid #d4e6f4; border-radius: 24px; box-shadow: 0 20px 50px rgba(25,72,114,.09); }
.story-copy-panel small { color: var(--story-color); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.story-copy-panel h2 { margin: 12px 0 15px; font-size: 42px; line-height: 1.2; letter-spacing: 0; }
.story-copy-panel > p { margin: 0; color: var(--text); font-size: 15px; }
.story-copy-panel > p + p { margin-top: 12px; }
.story-facts { margin-top: 28px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #e0ebf4; }
.story-facts div { padding: 20px 12px 0 0; }
.story-facts strong, .story-facts span { display: block; }
.story-facts strong { color: var(--navy); font-size: 18px; }
.story-facts span { color: #8799ab; font-size: 10px; }
.story-photo-slot { --slot-color: var(--story-color); position: relative; min-height: 280px; margin: 0; display: grid; place-items: center; overflow: hidden; color: #fff; background: radial-gradient(circle at 72% 20%, rgba(255,255,255,.23), transparent 25%), linear-gradient(138deg, var(--story-deep), var(--slot-color)); border-radius: 21px; box-shadow: 0 18px 46px rgba(16,69,113,.14); }
.story-photo-slot::before { content: ""; position: absolute; inset: 0; opacity: .19; background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 30px 30px; }
.story-photo-slot::after { content: ""; position: absolute; width: 190px; height: 190px; right: -65px; bottom: -100px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.055), 0 0 0 70px rgba(255,255,255,.025); }
.story-photo-slot[data-tone="cyan"] { --slot-color: #1ab7c4; }
.story-photo-slot[data-tone="orange"] { --slot-color: #f17b39; }
.story-photo-slot[data-tone="red"] { --slot-color: #ef4248; }
.story-photo-slot[data-tone="purple"] { --slot-color: #715bd7; }
.story-photo-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.story-photo-slot.has-uploaded-image .story-photo-image { opacity: 1; }
.story-photo-slot.has-uploaded-image::before { z-index: 2; opacity: .07; }
.story-photo-slot.has-uploaded-image::after { display: none; }
.story-photo-slot.has-uploaded-image .story-photo-placeholder { opacity: 0; pointer-events: none; }
.story-photo-slot.has-uploaded-image figcaption { z-index: 3; padding: 6px 8px; border-radius: 4px; background: rgba(9,35,55,.42); color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.story-photo-placeholder { position: relative; z-index: 2; display: grid; place-items: center; text-align: center; }
.story-photo-placeholder svg { width: 62px; height: 62px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.story-photo-placeholder strong { margin-top: 13px; font-size: 15px; }
.story-photo-placeholder span { margin-top: 3px; color: rgba(255,255,255,.65); font-size: 9px; letter-spacing: .06em; }
.story-photo-slot figcaption { position: absolute; z-index: 2; left: 17px; right: 17px; bottom: 14px; display: flex; justify-content: space-between; color: rgba(255,255,255,.56); font: 800 8px/1 monospace; letter-spacing: .1em; }
.story-section-head { margin-bottom: 28px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.story-section-head small { color: var(--story-color); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.story-section-head h2 { margin: 8px 0 0; font-size: 44px; line-height: 1.15; letter-spacing: 0; }
.story-section-head p { max-width: 420px; margin: 0; color: var(--text); font-size: 13px; }
.story-photo-mosaic { display: grid; grid-template-columns: repeat(12,1fr); grid-auto-rows: 170px; gap: 16px; }
.story-photo-mosaic .story-photo-slot { min-height: 0; border-radius: 17px; }
.story-photo-mosaic .mosaic-main { grid-column: span 7; grid-row: span 2; }
.story-photo-mosaic .mosaic-side { grid-column: span 5; }
.story-photo-mosaic .mosaic-third { grid-column: span 4; }
.story-text-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.story-text-card { position: relative; min-height: 245px; padding: 29px; overflow: hidden; background: linear-gradient(145deg, #fff, #fbfdff); border: 1px solid #d7e7f3; border-radius: 20px; box-shadow: 0 15px 40px rgba(25,72,114,.075); transition: transform .32s var(--ease), box-shadow .32s ease, border-color .32s ease; }
.story-text-card:hover { transform: translateY(-5px); border-color: #abd4f0; box-shadow: 0 22px 48px rgba(25,72,114,.13); }
.story-text-card::before { content: attr(data-index); position: absolute; right: 18px; top: 16px; color: #edf4fa; font: 900 44px/1 monospace; }
.story-text-card small { position: relative; z-index: 1; color: var(--story-color); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.story-text-card h3 { position: relative; z-index: 1; margin: 31px 0 10px; font-size: 21px; }
.story-text-card p { position: relative; z-index: 1; margin: 0; color: var(--text); font-size: 13px; }
.story-record-list { position: relative; margin-top: 12px; padding-left: 34px; }
.story-record-list::before { content: ""; position: absolute; left: 8px; top: 13px; bottom: 13px; width: 1px; background: linear-gradient(var(--story-color), rgba(8,127,230,.1)); }
.story-record { position: relative; padding: 22px 25px; background: rgba(255,255,255,.88); border: 1px solid #d8e8f4; border-radius: 15px; }
.story-record + .story-record { margin-top: 13px; }
.story-record::before { content: ""; position: absolute; width: 11px; height: 11px; left: -32px; top: 30px; border: 3px solid #f4f9fd; border-radius: 50%; background: var(--story-color); box-shadow: 0 0 0 5px rgba(8,127,230,.09); }
.story-record small { color: var(--story-color); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.story-record h3 { margin: 5px 0 4px; font-size: 19px; }
.story-record p { margin: 0; color: var(--text); font-size: 13px; }
.story-quote { margin: 28px 0 0; padding: 28px 32px; color: #fff; background: linear-gradient(115deg, var(--story-deep), var(--story-color)); border-radius: 17px; box-shadow: 0 16px 40px rgba(14,69,112,.16); }
.story-quote p { margin: 0; font-size: 19px; font-weight: 700; }
.story-quote span { display: block; margin-top: 9px; color: rgba(255,255,255,.65); font-size: 10px; }
.story-detail-cta { margin-top: 65px; padding: 34px 38px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #fff; background: linear-gradient(120deg, var(--story-deep), var(--story-color) 70%, var(--story-color-2)); border-radius: 20px; box-shadow: 0 20px 50px rgba(11,66,110,.18); }
.story-detail-cta h2 { margin: 0; font-size: 28px; }
.story-detail-cta p { margin: 4px 0 0; color: rgba(255,255,255,.68); font-size: 12px; }
.story-detail-cta .button { flex: 0 0 auto; color: var(--navy); background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.13); }

/* Features */
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.feature-card { position: relative; min-height: 295px; padding: 31px; overflow: hidden; background: linear-gradient(145deg, #fff, #fbfdff); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 15px 40px rgba(27,77,124,.065); transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease; }
.feature-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: #a8d5f8; }
.feature-card:first-child { grid-column: span 2; color: #fff; background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2)); border: 0; }
.feature-card:first-child .icon-tile { color: #fff; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25); }
.feature-card:first-child p { color: rgba(255,255,255,.75); }
.feature-card h2 { margin: 40px 0 10px; font-size: 24px; }
.feature-card p { margin: 0; color: var(--text); font-size: 14px; }
.feature-card .card-index { float: right; color: rgba(9,29,58,.2); font: 800 11px/1 monospace; letter-spacing: .12em; }
.feature-card:first-child .card-index { color: rgba(255,255,255,.45); }

/* Cases */
.case-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.case-card { --case-rgb: 61,118,220; --case-a: #3d76dc; --case-b: #19b7d6; position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(145deg, #fff, #f9fcff); border: 1px solid rgba(var(--case-rgb),.2); border-radius: 21px; box-shadow: inset 0 2px 0 rgba(var(--case-rgb),.055), 0 16px 42px rgba(27,77,124,.075); transition: transform .38s var(--motion-ease), box-shadow .38s ease, border-color .38s ease; }
.case-card::before { content: ""; position: absolute; z-index: 5; width: 42%; height: 3px; left: -52%; top: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--case-a) 24%, var(--case-b) 58%, transparent); filter: drop-shadow(0 0 5px rgba(var(--case-rgb),.22)); animation: caseAccentFlow 8.2s linear infinite; }
.case-card:hover { transform: translateY(-6px); border-color: rgba(var(--case-rgb),.48); box-shadow: 0 24px 58px rgba(27,77,124,.14), 0 0 0 5px rgba(var(--case-rgb),.035); }
.case-card.main { grid-row: span 2; }
.case-card[data-case="frame"] { --case-rgb: 25,183,214; --case-a: #19b7d6; --case-b: #3d76dc; }
.case-card[data-case="output"] { --case-rgb: 235,55,57; --case-a: #eb3739; --case-b: #3d76dc; }
.case-card[data-case="niche"] { --case-rgb: 13,153,180; --case-a: #0d99b4; --case-b: #3d76dc; }
.case-card[data-case="profile"] { --case-rgb: 27,158,137; --case-a: #1b9e89; --case-b: #3d76dc; }
.case-card[data-case="cross"] { --case-rgb: 221,88,101; --case-a: #dd5865; --case-b: #3d76dc; }
.case-card[data-case="frame"]::before { animation-delay: -2.7s; }
.case-card[data-case="output"]::before { animation-delay: -5.4s; }
.case-card[data-case="niche"]::before { animation-delay: -6.4s; }
.case-card[data-case="profile"]::before { animation-delay: -4.2s; }
.case-card[data-case="cross"]::before { animation-delay: -1.8s; }
.case-image { position: relative; height: 335px; overflow: hidden; background: radial-gradient(circle at 32% 48%, rgba(255,255,255,.98), transparent 31%), linear-gradient(145deg, #edf7ff, #f8fbff 56%, #eaf5ff); border-bottom: 1px solid rgba(var(--case-rgb),.13); }
.case-image::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .62; background-image: linear-gradient(rgba(var(--case-rgb),.105) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--case-rgb),.105) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.58), #000 50%, rgba(0,0,0,.38)); mask-image: linear-gradient(90deg, rgba(0,0,0,.58), #000 50%, rgba(0,0,0,.38)); }
.case-image::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.42), transparent 26% 77%, rgba(255,255,255,.36)), linear-gradient(180deg, rgba(255,255,255,.18), transparent 34%, rgba(227,241,255,.38)); }
.case-engineering { position: absolute; z-index: 2; inset: 0; }
.case-engineering svg { width: 100%; height: 100%; display: block; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .65s var(--motion-ease), filter .5s ease; }
.case-card:hover .case-engineering svg { transform: translateY(-2px); filter: drop-shadow(0 10px 18px rgba(var(--case-rgb),.08)); }
.case-stage { position: absolute; z-index: 3; top: 25px; padding: 5px 9px; color: #315b83; background: rgba(255,255,255,.83); border: 1px solid rgba(var(--case-rgb),.2); border-radius: 6px; box-shadow: 0 7px 18px rgba(36,86,132,.06); font-size: 9px; font-weight: 900; }
.case-stage-input { left: 27%; }
.case-stage-output { right: 9%; color: #087c9d; }
.case-dimensions, .case-output-guides { stroke: rgba(61,118,220,.28); stroke-width: 1; }
.case-dimension-dash { stroke-dasharray: 4 7; }
.case-model-back { fill: rgba(80,147,221,.09); stroke: rgba(61,118,220,.52); stroke-width: 1.25; }
.case-cabinet-top-face { fill: rgba(231,243,255,.82); }
.case-cabinet-side-face { fill: rgba(214,234,253,.7); }
.case-cabinet-bottom-face { fill: rgba(223,239,255,.66); }
.case-model-panel { fill: url(#casePanelFill); stroke: #3d76dc; stroke-width: 2; }
.case-cabinet-back-panel { fill: rgba(61,118,220,.04); stroke: rgba(61,118,220,.28); stroke-width: .9; }
.case-cabinet-interior { fill: rgba(61,118,220,.035); stroke: rgba(61,118,220,.52); stroke-width: 1; }
.case-cabinet-divider-face { fill: rgba(231,243,255,.88); stroke: rgba(61,118,220,.62); stroke-width: 1.05; }
.case-cabinet-recess { stroke: rgba(25,139,180,.28); stroke-width: .9; }
.case-cabinet-joint-lines { stroke: rgba(61,118,220,.68); stroke-width: 1.15; }
.case-model-highlight { stroke: #19b7d6; stroke-width: 1.45; stroke-dasharray: 26 310; animation: caseModelHighlight 7s linear infinite; }
.case-model-shell circle, .case-output-pieces circle { fill: #19b7d6; stroke: #fff; stroke-width: 1.7; }
.case-route { stroke: #19b7d6; stroke-width: 2; stroke-dasharray: 8 9; animation: caseRouteFlow 3.8s linear infinite; }
.case-route-arrow { stroke: #19b7d6; stroke-width: 1.7; }
.case-route-node { fill: #eb3739; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(235,55,57,.28)); animation: caseRouteNode 3.8s linear infinite; }
.case-piece { fill: url(#caseAccentFill); stroke: #3d76dc; stroke-width: 1.55; }
.case-piece-detail { stroke: rgba(25,139,180,.72); stroke-width: 1; }
.case-piece-accent { stroke: #eb5960; stroke-width: 1.45; }
.case-output-pieces { filter: drop-shadow(0 7px 10px rgba(61,118,220,.08)); }
.case-piece-back { fill: rgba(255,255,255,.82); }
.case-piece-divider { fill: rgba(230,247,255,.94); stroke: #19a4c2; }
.case-piece-shelf { fill: rgba(226,243,255,.96); }
.case-explode-guides { stroke: rgba(61,118,220,.3); stroke-width: 1; stroke-dasharray: 3 6; }
.case-exploded-part { transform-box: fill-box; transform-origin: center; }
.case-exploded-top { animation: caseExplodeTop 7.2s linear infinite alternate; }
.case-exploded-bottom { animation: caseExplodeBottom 7.2s linear infinite alternate; }
.case-exploded-left { animation: caseExplodeLeft 7.2s linear infinite alternate; }
.case-exploded-right { animation: caseExplodeRight 7.2s linear infinite alternate; }
.case-cabinet-divider-part { animation: caseCabinetDivider 7.2s linear infinite alternate; }
.case-cabinet-shelf-part { animation: caseCabinetShelf 7.2s linear infinite alternate; }
.case-image-scan { position: absolute; z-index: 4; height: 1px; left: 5%; right: 5%; top: 13%; pointer-events: none; opacity: .65; background: linear-gradient(90deg, transparent, rgba(25,183,214,.2) 8%, rgba(25,183,214,.9) 50%, rgba(61,118,220,.2) 92%, transparent); box-shadow: 0 0 9px rgba(25,183,214,.28); animation: caseImageScan 6.8s linear infinite alternate; }
.case-label { position: absolute; z-index: 5; left: 20px; top: 20px; padding: 7px 11px; display: flex; align-items: center; gap: 7px; color: #fff; background: rgba(221,53,60,.92); border: 1px solid rgba(255,255,255,.52); border-radius: 8px; box-shadow: 0 8px 22px rgba(45,28,42,.14); backdrop-filter: blur(9px); font-size: 11px; font-weight: 800; }
.case-label i { width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.case-image-tags { position: absolute; z-index: 5; left: 20px; right: 20px; bottom: 17px; display: flex; flex-wrap: wrap; gap: 7px; }
.case-image-tags span { padding: 6px 9px; color: #315b83; background: rgba(255,255,255,.84); border: 1px solid rgba(var(--case-rgb),.2); border-radius: 7px; box-shadow: 0 6px 16px rgba(36,86,132,.055); backdrop-filter: blur(8px); font-size: 10px; font-weight: 800; }
.case-copy { position: relative; z-index: 2; padding: 27px; }
.case-copy small { color: rgb(var(--case-rgb)); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.case-copy h2 { margin: 8px 0; font-size: 24px; }
.case-copy p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.75; }
.case-result { margin-top: 15px; padding-top: 12px; display: flex; align-items: center; gap: 8px; color: #48637c; border-top: 1px solid rgba(var(--case-rgb),.13); font-size: 11px; font-weight: 800; }
.case-result i { width: 7px; height: 7px; flex: 0 0 auto; background: rgb(var(--case-rgb)); border: 2px solid rgba(var(--case-rgb),.13); border-radius: 50%; box-sizing: content-box; }
.case-mini { display: grid; grid-template-columns: 178px minmax(0,1fr); min-height: 270px; }
.case-mini .case-copy { align-self: stretch; display: flex; justify-content: center; flex-direction: column; }
.case-art { position: relative; min-width: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.86), transparent 42%), linear-gradient(145deg, rgba(var(--case-rgb),.15), rgba(var(--case-rgb),.035)); border-right: 1px solid rgba(var(--case-rgb),.1); }
.case-art::before { content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none; background-image: linear-gradient(rgba(var(--case-rgb),.12) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--case-rgb),.12) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 24%, #000 78%, transparent); }
.case-art svg { position: relative; z-index: 2; width: 148px; height: 202px; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .55s var(--motion-ease), filter .45s ease; }
.case-card:hover .case-art svg { transform: translateY(-3px) scale(1.025); filter: drop-shadow(0 8px 13px rgba(var(--case-rgb),.13)); }
.case-art-scan { position: absolute; z-index: 3; height: 1px; left: 12%; right: 12%; top: 22%; opacity: .6; background: linear-gradient(90deg, transparent, rgb(var(--case-rgb)), transparent); box-shadow: 0 0 8px rgba(var(--case-rgb),.34); animation: caseArtScan 5.6s linear infinite alternate; }
.case-card[data-case="output"] .case-art-scan { animation-delay: -2.8s; }
.case-diagram-grid { stroke: rgba(var(--case-rgb),.18); stroke-width: .8; }
.case-diagram-main, .case-diagram-sheet { fill: rgba(var(--case-rgb),.035); stroke: rgb(var(--case-rgb)); stroke-width: 1.55; }
.case-diagram-back { stroke: rgba(var(--case-rgb),.48); stroke-width: 1.2; }
.case-diagram-check { stroke: #1aa98f; stroke-width: 2.1; }
.case-diagram-flow { stroke: rgba(var(--case-rgb),.72); stroke-width: 1.2; stroke-dasharray: 7 8; animation: caseDiagramFlow 4.8s linear infinite; }
.case-art circle { fill: rgb(var(--case-rgb)); stroke: #fff; stroke-width: 1.6; }
.case-niche { grid-column: 1 / -1; min-height: 330px; display: grid; grid-template-columns: minmax(290px,.68fr) minmax(0,1.32fr); }
.case-niche .case-copy { padding: 38px; display: flex; justify-content: center; flex-direction: column; background: linear-gradient(145deg, #fff, #f7fcff); }
.case-niche .case-copy h2 { font-size: 27px; }
.case-niche .case-copy p { max-width: 390px; }
.case-niche-art { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(circle at 29% 49%, rgba(255,255,255,.98), transparent 30%), linear-gradient(145deg, rgba(var(--case-rgb),.13), rgba(var(--case-rgb),.025)); border-left: 1px solid rgba(var(--case-rgb),.13); }
.case-niche-art::before { content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none; background-image: linear-gradient(rgba(var(--case-rgb),.11) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--case-rgb),.11) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 45%, rgba(0,0,0,.5)); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 45%, rgba(0,0,0,.5)); }
.case-niche-art svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .65s var(--motion-ease), filter .5s ease; }
.case-niche:hover .case-niche-art svg { transform: translateY(-2px); filter: drop-shadow(0 9px 16px rgba(var(--case-rgb),.07)); }
.case-niche-stage { position: absolute; z-index: 4; top: 20px; padding: 5px 9px; color: #315b83; background: rgba(255,255,255,.86); border: 1px solid rgba(var(--case-rgb),.22); border-radius: 6px; box-shadow: 0 7px 18px rgba(36,86,132,.055); font-size: 9px; font-weight: 900; }
.case-niche-stage-model { left: 18%; }
.case-niche-stage-parts { right: 11%; color: #087c9d; }
.case-niche-scan { position: absolute; z-index: 3; height: 1px; left: 5%; right: 5%; top: 17%; opacity: .58; background: linear-gradient(90deg, transparent, rgba(var(--case-rgb),.88), transparent); box-shadow: 0 0 8px rgba(var(--case-rgb),.28); animation: caseNicheScan 6.8s linear infinite alternate; }
.case-niche-cad-shell { fill: rgba(255,255,255,.54); stroke: #0d99b4; stroke-width: 1.25; }
.case-niche-cad-cavity { fill: rgba(61,118,220,.035); stroke: rgba(61,118,220,.7); stroke-width: 1.1; }
.case-niche-cad-column { fill: rgba(13,153,180,.07); stroke: rgba(13,153,180,.74); stroke-width: 1.1; }
.case-niche-cad-detail { stroke: #0d99b4; stroke-width: 1.15; }
.case-niche-cad-center { stroke: rgba(61,118,220,.2); stroke-width: .8; stroke-dasharray: 5 8; }
.case-niche-dimensions { stroke: #14aeca; stroke-width: 1; }
.case-niche-dimension-extension { stroke: rgba(13,153,180,.72); }
.case-niche-dimension-line, .case-niche-segment-line { stroke: #0d99b4; }
.case-niche-dimensions marker path { fill: #0d99b4; stroke: none; }
.case-niche-dimension-text, .case-niche-segment-text { fill: #087f9b; stroke: none; font-family: Consolas, "Microsoft YaHei", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0; }
.case-niche-segment-text { font-size: 9px; }
.case-niche-model circle, .case-niche-parts circle { fill: #19b7d6; stroke: #fff; stroke-width: 1.7; }
.case-niche-route path:first-child { stroke: #19b7d6; stroke-width: 2; stroke-dasharray: 8 9; animation: caseRouteFlow 3.8s linear infinite; }
.case-niche-route circle { fill: #eb3739; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(235,55,57,.28)); animation: caseRouteNode 3.8s linear infinite; }
.case-niche-explode-guides { stroke: rgba(var(--case-rgb),.3); stroke-width: 1; stroke-dasharray: 3 6; }
.case-niche-part { fill: url(#nichePanelFill); stroke: #0d99b4; stroke-width: 1.5; }
.case-niche-back { fill: rgba(255,255,255,.8); }
.case-niche-detail { stroke: rgba(61,118,220,.55); stroke-width: 1; }
.case-niche-accent { stroke: #eb5960; stroke-width: 1.35; }
.case-niche-frame { fill-rule: evenodd; stroke: rgba(61,118,220,.52); stroke-width: 1.15; stroke-dasharray: 7 6; }
.case-exploded-divider { animation: caseExplodeDivider 7.2s linear infinite alternate; }
.case-exploded-shelf { transform-box: fill-box; transform-origin: center; }
.case-exploded-shelf-one { animation: caseExplodeShelfOne 7.2s linear infinite alternate; }
.case-exploded-shelf-two { animation: caseExplodeShelfTwo 7.2s linear infinite alternate; }
.case-niche-tags { position: absolute; z-index: 4; right: 20px; bottom: 17px; display: flex; gap: 7px; }
.case-niche-tags span { padding: 5px 8px; color: #315b83; background: rgba(255,255,255,.86); border: 1px solid rgba(var(--case-rgb),.2); border-radius: 7px; box-shadow: 0 6px 15px rgba(36,86,132,.05); font-size: 9px; font-weight: 900; }
.case-profile { grid-column: 1 / -1; min-height: 330px; display: grid; grid-template-columns: minmax(290px,.68fr) minmax(0,1.32fr); }
.case-profile .case-copy { padding: 38px; display: flex; justify-content: center; flex-direction: column; background: linear-gradient(145deg, #fff, #f7fcff); }
.case-profile .case-copy h2 { font-size: 27px; }
.case-profile .case-copy p { max-width: 390px; }
.case-profile-art { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(circle at 45% 22%, rgba(255,255,255,.98), transparent 29%), linear-gradient(145deg, rgba(var(--case-rgb),.13), rgba(61,118,220,.025)); border-left: 1px solid rgba(var(--case-rgb),.13); }
.case-profile-art::before { content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none; background-image: linear-gradient(rgba(var(--case-rgb),.11) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--case-rgb),.11) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.65), #000 60%, rgba(0,0,0,.4)); mask-image: linear-gradient(180deg, rgba(0,0,0,.65), #000 60%, rgba(0,0,0,.4)); }
.case-profile-art svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.case-profile-stage { position: absolute; z-index: 4; top: 20px; padding: 5px 9px; color: #315b83; background: rgba(255,255,255,.86); border: 1px solid rgba(var(--case-rgb),.22); border-radius: 6px; box-shadow: 0 7px 18px rgba(36,86,132,.055); font-size: 9px; font-weight: 900; }
.case-profile-stage-complete { left: 18%; }
.case-profile-stage-parts { right: 11%; color: #087c86; }
.case-profile-scan { position: absolute; z-index: 3; height: 1px; left: 5%; right: 5%; top: 17%; pointer-events: none; opacity: .58; background: linear-gradient(90deg, transparent, rgba(var(--case-rgb),.9), rgba(25,183,214,.82), transparent); box-shadow: 0 0 8px rgba(var(--case-rgb),.3); animation: caseNicheScan 6.8s linear infinite alternate; }
.case-profile-outline { fill: url(#profilePartFill); stroke: #159b72; stroke-width: 2.2; }
.case-profile-inner { stroke: #16b8a5; stroke-width: 1.25; }
.case-profile-centerline { stroke: rgba(61,118,220,.28); stroke-width: .9; stroke-dasharray: 5 7; }
.case-profile-cut { stroke: rgba(219,98,104,.48); stroke-width: 1; stroke-dasharray: 4 6; }
.case-profile-complete circle { fill: #16b8a5; stroke: #fff; stroke-width: 1.6; }
.case-profile-route path:first-child { stroke: #19b7d6; stroke-width: 1.8; stroke-dasharray: 6 7; animation: caseProfileRouteFlow 3.8s linear infinite; }
.case-profile-route path:nth-child(2) { stroke: #19b7d6; stroke-width: 1.6; }
.case-profile-route circle { fill: #eb3739; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 0 5px rgba(235,55,57,.25)); animation: caseProfileRouteNode 3.8s linear infinite; }
.case-profile-explode-guides { stroke: rgba(61,118,220,.28); stroke-width: 1; stroke-dasharray: 3 6; }
.case-profile-section { fill: url(#profilePartFill); stroke: #159b72; stroke-width: 1.45; }
.case-profile-section-inner { stroke: rgba(61,118,220,.62); stroke-width: 1; }
.case-profile-part-guide { stroke: rgba(61,118,220,.38); stroke-width: 1; }
.case-profile-static-curve { stroke: #159b72; stroke-width: 1.55; }
.case-profile-static-base { fill: rgba(225,177,45,.1); stroke: #d2a528; stroke-width: 1.4; }
.case-profile-static-fold { stroke: #db6268; stroke-width: 1.45; }
.case-profile-parts circle { fill: #16b8a5; stroke: #fff; stroke-width: 1.6; }
.case-profile-baseline { stroke: rgba(61,118,220,.22); stroke-width: 1; stroke-dasharray: 5 8; }
.case-profile-tags { position: absolute; z-index: 4; right: 20px; bottom: 17px; display: flex; gap: 7px; }
.case-profile-tags span { padding: 5px 8px; color: #315b83; background: rgba(255,255,255,.88); border: 1px solid rgba(var(--case-rgb),.2); border-radius: 7px; box-shadow: 0 6px 15px rgba(36,86,132,.05); font-size: 9px; font-weight: 900; }
.case-cross { grid-column: 1 / -1; min-height: 330px; display: grid; grid-template-columns: minmax(290px,.68fr) minmax(0,1.32fr); }
.case-cross .case-copy { padding: 38px; display: flex; justify-content: center; flex-direction: column; background: linear-gradient(145deg, #fff, #f7fcff); }
.case-cross .case-copy h2 { font-size: 27px; }
.case-cross .case-copy p { max-width: 390px; }
.case-cross-art { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.98), transparent 30%), linear-gradient(145deg, rgba(var(--case-rgb),.1), rgba(61,118,220,.025)); border-left: 1px solid rgba(var(--case-rgb),.13); }
.case-cross-art::before { content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none; background-image: linear-gradient(rgba(var(--case-rgb),.09) 1px, transparent 1px), linear-gradient(90deg, rgba(61,118,220,.085) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.5), #000 50%, rgba(0,0,0,.42)); mask-image: linear-gradient(90deg, rgba(0,0,0,.5), #000 50%, rgba(0,0,0,.42)); }
.case-cross-art svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.case-cross-stage { position: absolute; z-index: 4; top: 20px; padding: 5px 9px; color: #315b83; background: rgba(255,255,255,.86); border: 1px solid rgba(var(--case-rgb),.22); border-radius: 6px; box-shadow: 0 7px 18px rgba(36,86,132,.055); font-size: 9px; font-weight: 900; }
.case-cross-stage-complete { left: 18%; }
.case-cross-stage-parts { right: 0; color: #a84450; }
.case-cross-scan { position: absolute; z-index: 3; height: 1px; left: 5%; right: 5%; top: 17%; pointer-events: none; opacity: .58; background: linear-gradient(90deg, transparent, rgba(var(--case-rgb),.88), rgba(25,183,214,.72), transparent); box-shadow: 0 0 8px rgba(var(--case-rgb),.25); animation: caseNicheScan 6.8s linear infinite alternate; }
.case-cross-corner-guides { stroke: rgba(61,118,220,.3); stroke-width: 1; }
.case-cross-centerline { stroke: rgba(61,118,220,.28); stroke-width: .9; stroke-dasharray: 5 7; }
.case-cross-outline { stroke: #d95865; stroke-width: 2.1; }
.case-cross-fold { stroke: #d95865; stroke-width: 1.8; }
.case-cross-complete circle, .case-cross-parts circle { fill: #e45a66; stroke: #fff; stroke-width: 1.6; }
.case-cross-route path:first-child { stroke: #19b7d6; stroke-width: 1.8; stroke-dasharray: 6 7; animation: caseProfileRouteFlow 3.8s linear infinite; }
.case-cross-route path:nth-child(2) { stroke: #19b7d6; stroke-width: 1.6; }
.case-cross-route circle { fill: #eb3739; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 0 5px rgba(235,55,57,.25)); animation: caseProfileRouteNode 3.8s linear infinite; }
.case-cross-flat-outline { fill: rgba(255,255,255,.38); stroke: #d95865; stroke-width: 1.45; }
.case-cross-flat-fold { stroke: #159b72; stroke-width: 1.05; stroke-dasharray: 7 7; }
.case-cross-flat-centerline { stroke: rgba(21,155,114,.78); stroke-width: 1; stroke-dasharray: 12 9; }
.case-cross-flat-relief { stroke: rgba(217,88,101,.72); stroke-width: 1.1; }
.case-cross-flat-dimensions { stroke: #159b72; stroke-width: .9; }
.case-cross-flat-dimensions marker path { fill: #159b72; stroke: none; }
.case-cross-flat-dimensions text { fill: #138565; stroke: none; font-family: Consolas, "Microsoft YaHei", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.case-cross-flat-dimensions .case-cross-main-size { font-size: 12px; }
.case-cross-baseline { stroke: rgba(61,118,220,.2); stroke-width: 1; stroke-dasharray: 5 8; }
.case-cross-tags { position: absolute; z-index: 4; right: 20px; bottom: 17px; display: flex; gap: 7px; }
.case-cross-tags span { padding: 5px 8px; color: #315b83; background: rgba(255,255,255,.88); border: 1px solid rgba(var(--case-rgb),.2); border-radius: 7px; box-shadow: 0 6px 15px rgba(36,86,132,.05); font-size: 9px; font-weight: 900; }
.case-card[data-case="multi-cross"] { --case-rgb: 38,145,118; --case-a: #269176; --case-b: #dd5865; }
.case-card[data-case="multi-cross"]::before { animation-delay: -3.2s; }
.case-multi-cross { grid-column: 1 / -1; min-height: 330px; display: grid; grid-template-columns: minmax(290px,.68fr) minmax(0,1.32fr); }
.case-multi-cross .case-copy { padding: 38px; display: flex; justify-content: center; flex-direction: column; background: linear-gradient(145deg, #fff, #f7fcff); }
.case-multi-cross .case-copy h2 { font-size: 27px; }
.case-multi-cross .case-copy p { max-width: 390px; }
.case-multi-cross-art { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.98), transparent 30%), linear-gradient(145deg, rgba(var(--case-rgb),.11), rgba(61,118,220,.025)); border-left: 1px solid rgba(var(--case-rgb),.13); }
.case-multi-cross-art::before { content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none; background-image: linear-gradient(rgba(var(--case-rgb),.1) 1px, transparent 1px), linear-gradient(90deg, rgba(61,118,220,.085) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.5), #000 50%, rgba(0,0,0,.42)); mask-image: linear-gradient(90deg, rgba(0,0,0,.5), #000 50%, rgba(0,0,0,.42)); }
.case-multi-cross-art svg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.case-multi-cross-stage { position: absolute; z-index: 4; top: 20px; padding: 5px 9px; color: #315b83; background: rgba(255,255,255,.88); border: 1px solid rgba(var(--case-rgb),.22); border-radius: 6px; box-shadow: 0 7px 18px rgba(36,86,132,.055); font-size: 11px; line-height: 1.35; font-weight: 900; }
.case-multi-cross-stage-source { left: 18%; }
.case-multi-cross-stage-flat { right: 8%; color: #176e5c; }
.case-multi-cross-scan { position: absolute; z-index: 3; height: 1px; left: 5%; right: 5%; top: 17%; pointer-events: none; opacity: .5; background: linear-gradient(90deg, transparent, rgba(221,88,101,.76), rgba(25,183,214,.72), transparent); box-shadow: 0 0 8px rgba(var(--case-rgb),.22); animation: caseNicheScan 6.8s linear infinite alternate; }
.case-multi-cross-guides { stroke: rgba(61,118,220,.3); stroke-width: 1; }
.case-multi-cross-axis { stroke: rgba(65,87,104,.6); stroke-width: 1.1; }
.case-multi-cross-source-outline { stroke: #d95865; stroke-width: 2.2; }
.case-multi-cross-node { fill: #fff; stroke: #526b7d; stroke-width: 1.4; }
.case-multi-cross-route path:first-child { stroke: #19b7d6; stroke-width: 1.8; stroke-dasharray: 6 7; animation: caseProfileRouteFlow 3.8s linear infinite; }
.case-multi-cross-route path:nth-child(2) { stroke: #19b7d6; stroke-width: 1.6; }
.case-multi-cross-flat-outline { fill: rgba(255,255,255,.42); stroke: #55736f; stroke-width: 1.45; }
.case-multi-cross-flat-fold { stroke: #159b72; stroke-width: 1.1; stroke-dasharray: 7 7; }
.case-multi-cross-flat-center { stroke: rgba(21,155,114,.8); stroke-width: 1; stroke-dasharray: 12 9; }
.case-multi-cross-flat-relief { stroke: rgba(21,155,114,.72); stroke-width: 1.15; }
.case-multi-cross-dimensions { stroke: #14785f; stroke-width: .9; }
.case-multi-cross-art marker path { fill: #14785f; stroke: none; }
.case-multi-cross-dimensions text { fill: #126c58; stroke: none; font-family: Consolas, "Microsoft YaHei", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.case-multi-cross-dimensions .case-multi-cross-main-size { font-size: 12px; }
.case-multi-cross-baseline { stroke: rgba(61,118,220,.2); stroke-width: 1; stroke-dasharray: 5 8; }
.case-multi-cross:hover .case-multi-cross-art svg { transform: translateY(-2px); filter: drop-shadow(0 9px 16px rgba(var(--case-rgb),.07)); }
@media (max-width: 900px) {
  .case-multi-cross { grid-template-columns: 1fr; }
  .case-multi-cross-art { min-height: 310px; order: -1; border-left: 0; border-bottom: 1px solid rgba(var(--case-rgb),.13); }
}
@media (max-width: 620px) {
  .case-multi-cross .case-copy { padding: 27px 24px; }
  .case-multi-cross .case-copy h2 { font-size: 24px; }
  .case-multi-cross-art { min-height: 255px; }
  .case-multi-cross-stage { top: 14px; font-size: 10px; }
  .case-multi-cross-stage-source { left: 14%; }
  .case-multi-cross-stage-flat { right: 6%; }
  .case-multi-cross-scan { animation-name: caseNicheScanMobile; }
  .case-multi-cross-dimensions text { font-size: 15px; }
  .case-multi-cross-dimensions .case-multi-cross-main-size { font-size: 18px; }
}
.examples-stage-section { overflow: clip; }
.case-follow-up { position: relative; min-height: 176px; margin-top: 64px; margin-bottom: -92px; padding: 36px 0 34px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 56px; isolation: isolate; color: var(--navy); }
.case-follow-up::before { content: ""; position: absolute; width: 100vw; height: 100%; left: 50%; top: 0; z-index: -2; transform: translateX(-50%); background: linear-gradient(180deg, rgba(251,253,255,.98), rgba(234,245,253,.96)); border-top: 1px solid rgba(153,193,222,.35); border-bottom: 1px solid rgba(153,193,222,.46); box-shadow: inset 0 1px 0 #fff, 0 -15px 38px rgba(20,72,115,.045); }
.case-follow-up::after { content: ""; position: absolute; width: 100vw; height: 100%; left: 50%; top: 0; z-index: -1; pointer-events: none; transform: translateX(-50%); background-image: linear-gradient(rgba(8,127,230,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(8,127,230,.05) 1px, transparent 1px), linear-gradient(90deg, transparent, rgba(8,127,230,.25), rgba(27,196,200,.32), transparent); background-size: 40px 40px, 40px 40px, 100% 1px; background-position: 0 0, 0 0, 0 0; background-repeat: repeat, repeat, no-repeat; opacity: .42; -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0,0,0,.65) 20%, #000 76%, transparent 100%); mask-image: linear-gradient(90deg, transparent 2%, rgba(0,0,0,.65) 20%, #000 76%, transparent 100%); }
.case-follow-copy, .case-follow-actions { position: relative; z-index: 2; }
.case-follow-copy { max-width: 620px; padding-left: 18px; }
.case-follow-copy::before { content: ""; position: absolute; width: 3px; left: 0; top: 2px; bottom: 2px; border-radius: 3px; background: linear-gradient(180deg, var(--blue), var(--cyan)); box-shadow: 0 0 12px rgba(8,127,230,.12); }
.case-follow-up small { display: inline-flex; align-items: center; gap: 8px; color: #0872c8; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.case-follow-up small::before { content: ""; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgba(27,196,200,.09); }
.case-follow-up h3 { margin: 8px 0 0; color: var(--navy); font-size: 27px; line-height: 1.3; }
.case-follow-route { --follow-route-length: min(43vw,520px); position: absolute; width: var(--follow-route-length); height: 1px; right: 38px; bottom: 22px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(8,127,230,.23) 18%, rgba(27,196,200,.3) 80%, transparent); }
.case-follow-route::before { content: ""; position: absolute; width: 82px; height: 1px; left: 0; top: 0; background: linear-gradient(90deg, transparent, rgba(8,127,230,.8), rgba(27,196,200,.75), transparent); filter: drop-shadow(0 0 4px rgba(8,127,230,.25)); animation: caseFollowScan 8.2s linear infinite; }
.case-follow-route i { display: none; }
.case-follow-route i:nth-child(1) { left: 12%; }
.case-follow-route i:nth-child(2) { left: 53%; animation-delay: -1.2s; }
.case-follow-route i:nth-child(3) { left: 92%; animation-delay: -2.4s; }
.case-follow-actions { display: grid; grid-template-columns: repeat(2,minmax(150px,auto)); gap: 11px; }
.case-follow-actions a { min-height: 52px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #174f79; background: rgba(255,255,255,.82); border: 1px solid #c4dced; border-radius: 8px; box-shadow: 0 9px 24px rgba(20,73,126,.075), inset 0 1px 0 #fff; backdrop-filter: blur(8px); font-size: 12px; font-weight: 900; transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s var(--motion-ease); }
.case-follow-actions a:last-child { color: #fff; background: linear-gradient(105deg, #087fe6, #159fca); border-color: transparent; box-shadow: 0 12px 28px rgba(8,127,230,.18); }
.case-follow-actions a:hover { color: #0768ae; background: #fff; border-color: #8dc0e4; box-shadow: 0 13px 28px rgba(20,73,126,.12), inset 0 1px 0 #fff; transform: translateY(-2px); }
.case-follow-actions a:last-child:hover { color: #fff; background: linear-gradient(105deg, #0673d1, #128eba); border-color: transparent; box-shadow: 0 15px 32px rgba(8,127,230,.24); }
.case-follow-actions a:focus-visible { outline: 3px solid rgba(8,127,230,.25); outline-offset: 3px; }
.case-follow-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--motion-ease); }
.case-follow-actions a:hover svg { transform: translateX(3px); }

@keyframes caseAccentFlow { from { transform: translateX(0); } to { transform: translateX(362%); } }
@keyframes caseFollowGrid { from { background-position: 0 0, 0 0, -260px 0; } to { background-position: 32px 0, 32px 0, calc(100vw + 260px) 0; } }
@keyframes caseFollowScan { from { transform: translateX(-82px); } to { transform: translateX(var(--follow-route-length)); } }
@keyframes caseFollowNode { 0%,100% { opacity: .62; } 50% { opacity: 1; box-shadow: 0 0 0 6px rgba(124,234,241,.08), 0 0 17px rgba(124,234,241,.68); } }
@keyframes caseImageScan { from { transform: translateY(0); } to { transform: translateY(250px); } }
@keyframes caseArtScan { from { transform: translateY(0); } to { transform: translateY(154px); } }
@keyframes caseDiagramFlow { to { stroke-dashoffset: -60; } }
@keyframes caseModelHighlight { to { stroke-dashoffset: -336; } }
@keyframes caseRouteFlow { to { stroke-dashoffset: -68; } }
@keyframes caseRouteNode { from { transform: translateX(0); } to { transform: translateX(70px); } }
@keyframes caseExplodeTop { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes caseExplodeBottom { from { transform: translateY(0); } to { transform: translateY(3px); } }
@keyframes caseExplodeLeft { from { transform: translateX(0); } to { transform: translateX(-3px); } }
@keyframes caseExplodeRight { from { transform: translateX(0); } to { transform: translateX(3px); } }
@keyframes caseCabinetDivider { from { transform: translateX(0); } to { transform: translateX(2px); } }
@keyframes caseCabinetShelf { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes caseExplodeDivider { from { transform: translateX(0); } to { transform: translateX(2px); } }
@keyframes caseExplodeShelfOne { from { transform: translate(0); } to { transform: translate(3px, -2px); } }
@keyframes caseExplodeShelfTwo { from { transform: translate(0); } to { transform: translate(3px, 2px); } }
@keyframes caseNicheScan { from { transform: translateY(0); } to { transform: translateY(220px); } }
@keyframes caseNicheScanMobile { from { transform: translateY(0); } to { transform: translateY(180px); } }
@keyframes caseProfileRouteFlow { to { stroke-dashoffset: -52; } }
@keyframes caseProfileRouteNode { from { transform: translateX(0); } to { transform: translateX(60px); } }

/* Download */
.download-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.download-card { position: relative; min-height: 480px; padding: 36px; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(145deg, #fff, #f9fcff); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 22px 58px rgba(20,73,126,.11); }
.download-card.primary { color: #fff; background: linear-gradient(145deg, var(--page-accent), #0f315c); border: 0; }
.version-top { display: flex; justify-content: space-between; color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.download-card.primary .version-top { color: #93e9ff; }
.version-number { margin-top: auto; display: flex; align-items: flex-end; gap: 10px; font-weight: 900; }
.version-main { font-size: 105px; line-height: .82; letter-spacing: 0; }
.version-decimal { margin-bottom: 3px; padding: 7px 9px 6px; color: #d92f36; background: #fff0ef; border: 1px solid #ffc7c4; border-radius: 9px; box-shadow: 0 8px 18px rgba(217,47,54,.12); font-size: 25px; line-height: 1; letter-spacing: 0; }
.download-card.primary .version-decimal { color: #12385e; background: #ffdc4d; border-color: #ffe988; box-shadow: 0 9px 20px rgba(255,220,77,.22); }
.download-card h2 { margin: 32px 0 6px; }
.download-card p { margin: 0; color: var(--text); }
.download-card.primary p { color: rgba(255,255,255,.68); }
.download-card .button { margin-top: 28px; }
.download-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin-top: 30px; }
.note-card { padding: 20px; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 13px; font-size: 13px; }
.note-card b { display: block; margin-bottom: 5px; color: var(--navy); }
.plugin-reserve { margin-top: 105px; padding-top: 90px; border-top: 1px solid #d3e4f2; }
.plugin-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.plugin-slot { position: relative; min-height: 350px; padding: 29px; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(236,247,255,.82)); border: 1px dashed #9bcbee; border-radius: 22px; box-shadow: 0 12px 34px rgba(27,77,124,.045); transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease; }
.plugin-slot::before { content: ""; position: absolute; width: 190px; height: 190px; right: -95px; bottom: -95px; border-radius: 50%; background: radial-gradient(circle, rgba(8,127,230,.14), transparent 68%); opacity: .55; transition: transform .55s var(--ease), opacity .35s ease; }
.plugin-slot:hover { transform: translateY(-7px); border-color: var(--blue); box-shadow: var(--shadow); }
.plugin-slot:hover::before { opacity: 1; transform: scale(1.18); }
.slot-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; color: #7690a9; font: 800 10px/1 monospace; letter-spacing: .12em; }
.slot-top b { padding: 6px 9px; color: var(--blue); background: #e7f4ff; border: 1px solid #b8daf4; border-radius: 999px; font-family: inherit; }
.slot-icon { position: relative; z-index: 1; width: 82px; height: 82px; margin-top: 48px; display: grid; place-items: center; color: var(--blue); background: rgba(232,246,255,.9); border: 1px dashed #8dc6ef; border-radius: 22px; transition: transform .55s var(--ease), background .35s ease; }
.slot-icon::before { content: ""; position: absolute; inset: 11px; border: 1px solid currentColor; border-radius: 16px; opacity: .18; transform: rotate(45deg); transition: transform .65s var(--ease); }
.slot-icon span, .slot-icon i { position: absolute; width: 25px; height: 2px; background: currentColor; border-radius: 2px; }
.slot-icon i { transform: rotate(90deg); }
.plugin-slot:hover .slot-icon { transform: translateY(-5px) rotate(-3deg); background: #fff; }
.plugin-slot:hover .slot-icon::before { transform: rotate(135deg) scale(1.08); }
.plugin-slot h3 { position: relative; z-index: 1; margin: 32px 0 8px; font-size: 22px; }
.plugin-slot p { position: relative; z-index: 1; margin: 0; color: var(--text); font-size: 14px; }
.plugin-slot button { position: relative; z-index: 1; min-height: 46px; margin-top: auto; color: #7a90a4; background: rgba(255,255,255,.74); border: 1px solid #cfdfec; border-radius: 9px; font-weight: 800; cursor: not-allowed; }

/* Guide */
.guide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; counter-reset: guide; }
.guide-step { position: relative; min-height: 300px; padding: 30px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 38px rgba(27,77,124,.06); transition: transform .35s var(--ease), box-shadow .35s ease; }
.guide-step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.guide-step::after { counter-increment: guide; content: "0" counter(guide); position: absolute; right: -8px; bottom: -35px; color: #edf5fc; font-size: 120px; line-height: 1; font-weight: 900; }
.guide-step h2 { position: relative; z-index: 1; margin: 40px 0 10px; font-size: 22px; }
.guide-step p { position: relative; z-index: 1; margin: 0; color: var(--text); font-size: 14px; }
.guide-hero-stats { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.guide-hero-stats span { padding: 8px 12px; color: #60768d; background: rgba(255,255,255,.76); border: 1px solid rgba(190,211,228,.78); border-radius: 9px; font-size: 11px; font-weight: 700; backdrop-filter: blur(8px); }
.guide-hero-stats strong { margin-right: 4px; color: var(--page-accent); font-size: 15px; }
.tutorial-library-section { position: relative; overflow: hidden; background: linear-gradient(180deg, #eef7ff 0%, #f8fbff 48%, #fff 100%); }
.tutorial-library-section::before { content: ""; position: absolute; width: 520px; height: 520px; right: -220px; top: 80px; border: 1px solid rgba(8,127,230,.08); border-radius: 50%; box-shadow: 0 0 0 80px rgba(8,127,230,.025), 0 0 0 160px rgba(27,196,200,.018); }
.tutorial-library-section .container { position: relative; z-index: 1; }
.tutorial-overview { margin-bottom: 28px; display: block; }
.tutorial-install-card { min-height: 142px; padding: 24px 26px; display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 20px; color: #fff; border-radius: 18px; background: linear-gradient(120deg, #0b4f8d, #087fe6 58%, #1caec9); box-shadow: 0 20px 48px rgba(9,83,145,.2); transition: transform .3s var(--ease), box-shadow .3s ease; }
.tutorial-install-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(9,83,145,.27); }
.tutorial-install-icon { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 15px; background: rgba(255,255,255,.12); box-shadow: 0 12px 28px rgba(3,45,85,.14); }
.tutorial-install-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tutorial-install-copy small, .tutorial-install-copy strong, .tutorial-install-copy span { display: block; }
.tutorial-install-copy small { color: rgba(255,255,255,.7); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.tutorial-install-copy strong { margin-top: 4px; font-size: 20px; }
.tutorial-install-copy span { margin-top: 5px; color: rgba(255,255,255,.76); font-size: 12px; }
.tutorial-install-card > b { white-space: nowrap; font-size: 12px; }
.tutorial-install-card > b i { display: inline-block; margin-left: 6px; font-style: normal; transition: transform .25s ease; }
.tutorial-install-card:hover > b i { transform: translateX(4px); }
.tutorial-toolbar { position: relative; z-index: 3; margin-bottom: 17px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: rgba(255,255,255,.92); border: 1px solid #d5e7f5; border-radius: 15px; box-shadow: 0 12px 32px rgba(24,72,115,.07); backdrop-filter: blur(12px); }
.tutorial-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.tutorial-filters button { min-height: 40px; padding: 0 14px; color: #61768c; background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 800; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; }
.tutorial-filters button:hover { color: var(--blue); background: #f0f7fd; }
.tutorial-filters button.is-active { color: #fff; background: linear-gradient(100deg, var(--blue), #19a7df); border-color: transparent; box-shadow: 0 8px 20px rgba(8,127,230,.2); }
.tutorial-search { min-width: 230px; min-height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 9px; color: #6d8297; background: #f5f9fc; border: 1px solid #dce9f3; border-radius: 10px; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.tutorial-search:focus-within { background: #fff; border-color: #8dc5ef; box-shadow: 0 0 0 4px rgba(8,127,230,.07); }
.tutorial-search svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tutorial-search input { width: 100%; color: var(--navy); background: transparent; border: 0; outline: 0; font: inherit; font-size: 12px; }
.tutorial-search input::placeholder { color: #91a2b3; }
.tutorial-results-meta { margin: 0 4px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #75899d; font-size: 11px; }
.tutorial-results-meta strong { color: var(--page-accent); font-size: 14px; }
.tutorial-results-meta span:last-child { display: inline-flex; align-items: center; gap: 8px; }
.tutorial-results-meta i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(27,196,200,.1); }
.tutorial-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.tutorial-video-card { --card-color: #168ed5; --card-color-2: #20c1c7; --card-deep: #092e59; position: relative; padding: 0; overflow: hidden; color: var(--navy); background: #fff; border: 1px solid #d5e6f3; border-radius: 19px; box-shadow: 0 14px 36px rgba(25,72,114,.08); text-align: left; cursor: pointer; transform: translateY(0); transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease; animation: tutorialCardIn .48s var(--ease) both; animation-delay: var(--card-delay, 0s); }
.tutorial-video-card[data-category="module2"] { --card-color: #4c79d8; --card-color-2: #13afc5; --card-deep: #172b5d; }
.tutorial-video-card[data-category="output"] { --card-color: #f08a31; --card-color-2: #ee4050; --card-deep: #572532; }
.tutorial-video-card[data-category="advanced"] { --card-color: #7660e2; --card-color-2: #258bd5; --card-deep: #282052; }
.tutorial-video-card:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--card-color) 35%, #d5e6f3); box-shadow: 0 22px 50px rgba(25,72,114,.15); }
.video-card-visual { position: relative; height: 188px; display: block; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--card-color-2) 70%, #fff), transparent 27%), linear-gradient(138deg, var(--card-deep) 0%, var(--card-color) 62%, var(--card-color-2) 118%); }
.video-card-cover { position: absolute; z-index: 1; inset: 0; display: block; overflow: hidden; opacity: .76; }
.video-card-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,31,54,.1), rgba(9,31,54,.52)); }
.video-card-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(.94); transition: transform .65s var(--ease), filter .65s var(--ease); }
.tutorial-video-card:hover .video-card-cover img { transform: scale(1.045); filter: saturate(1) contrast(1); }
.video-card-visual::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(180deg, transparent, #000 24%, #000); }
.video-card-visual::after { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -92px; bottom: -128px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.055), 0 0 0 72px rgba(255,255,255,.025); transition: transform .65s var(--ease); }
.tutorial-video-card:hover .video-card-visual::after { transform: scale(1.12) rotate(12deg); }
.video-card-head { position: absolute; z-index: 5; left: 14px; right: 14px; top: 13px; display: flex; align-items: center; justify-content: space-between; }
.video-card-head > b { padding: 6px 8px; color: rgba(255,255,255,.92); background: rgba(5,22,43,.17); border: 1px solid rgba(255,255,255,.17); border-radius: 7px; backdrop-filter: blur(7px); font: 900 8px/1 monospace; letter-spacing: .12em; }
.video-card-signal { padding: 6px 8px; display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.9); background: rgba(5,22,43,.17); border: 1px solid rgba(255,255,255,.17); border-radius: 7px; backdrop-filter: blur(7px); font: 800 8px/1 monospace; letter-spacing: .12em; }
.video-card-signal i { width: 5px; height: 5px; border-radius: 50%; background: #73fff4; box-shadow: 0 0 0 4px rgba(115,255,244,.13), 0 0 9px rgba(115,255,244,.65); }
.video-card-schematic { position: absolute; z-index: 2; width: 194px; height: 126px; left: 50%; top: 53%; color: #fff; transform: translate(-50%, -50%) rotate(var(--schematic-rotate, 0deg)); transition: transform .55s var(--ease), opacity .4s ease; opacity: .72; }
.tutorial-video-card[data-variant="1"] { --schematic-rotate: -2deg; }
.tutorial-video-card[data-variant="2"] { --schematic-rotate: 2deg; }
.tutorial-video-card[data-variant="3"] { --schematic-rotate: -1deg; }
.video-card-schematic svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255,255,255,.12)); transition: transform .55s var(--ease); }
.video-card-schematic .schematic-main { stroke: rgba(255,255,255,.86); stroke-dasharray: 54 10; stroke-dashoffset: 0; animation: videoSchematicTrace 5.8s linear infinite; animation-play-state: paused; }
.video-card-schematic .schematic-flow { stroke: rgba(115,255,244,.82); stroke-dasharray: 6 11; animation: geometryDash 3.8s linear infinite; animation-play-state: paused; }
.video-card-schematic circle { fill: #fff; stroke: rgba(255,255,255,.35); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: videoNodeSignal 2.8s ease-in-out infinite; animation-play-state: paused; }
.video-card-schematic circle:nth-of-type(2) { animation-delay: -1.4s; }
.video-card-schematic > i { position: absolute; width: 7px; height: 7px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: var(--card-color-2); box-shadow: 0 0 0 5px rgba(255,255,255,.08), 0 0 12px rgba(255,255,255,.35); animation: videoNodeSignal 2.8s ease-in-out infinite; animation-play-state: paused; }
.video-card-schematic > i:first-of-type { left: 10%; top: 45%; }
.video-card-schematic > i:last-of-type { right: 8%; bottom: 16%; animation-delay: -1.4s; }
.tutorial-video-card:hover .video-card-schematic { opacity: .94; transform: translate(-50%, -50%) rotate(var(--schematic-rotate, 0deg)); }
.tutorial-video-card:hover .video-card-schematic .schematic-main,
.tutorial-video-card:hover .video-card-schematic .schematic-flow,
.tutorial-video-card:hover .video-card-schematic circle,
.tutorial-video-card:hover .video-card-schematic > i { animation-play-state: running; }
.video-card-scan { position: absolute; z-index: 3; left: 8%; right: 8%; top: 30%; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(115,255,244,.95) 48%, rgba(255,255,255,.92) 52%, transparent); box-shadow: 0 0 12px rgba(115,255,244,.62); animation: videoCardScan 4.2s linear infinite; animation-play-state: paused; }
.tutorial-video-card:hover .video-card-scan { animation-play-state: running; }
.video-card-coordinate { position: absolute; z-index: 4; left: 14px; right: 14px; bottom: 11px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.52); font: 800 7px/1 monospace; letter-spacing: .11em; }
.video-card-play { position: absolute; z-index: 6; width: 51px; height: 51px; left: 50%; top: 52%; display: grid; place-items: center; color: var(--card-color); background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.78); border-radius: 50%; box-shadow: 0 14px 34px rgba(5,26,48,.27), 0 0 0 9px rgba(255,255,255,.1); transform: translate(-50%, -50%); transition: transform .35s var(--ease), box-shadow .35s ease; }
.video-card-play::before { content: ""; position: absolute; inset: -14px; border: 1px dashed rgba(255,255,255,.28); border-radius: 50%; animation: videoPlayOrbit 8s linear infinite; animation-play-state: paused; transition: opacity .3s ease; }
.video-card-play svg { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
.tutorial-video-card:hover .video-card-play { transform: translate(-50%, -50%) scale(1.09); box-shadow: 0 18px 42px rgba(5,26,48,.32), 0 0 0 13px rgba(255,255,255,.12); }
.tutorial-video-card:hover .video-card-play::before { opacity: .82; animation-play-state: running; }
.video-card-body { min-height: 226px; padding: 19px 20px 20px; display: flex; flex-direction: column; }
.video-card-meta { margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.video-card-meta small { padding: 4px 7px; color: var(--card-color); background: color-mix(in srgb, var(--card-color) 9%, #fff); border-radius: 6px; font-size: 9px; font-weight: 900; }
.video-card-meta b { color: #9aabba; font: 800 8px/1 monospace; letter-spacing: .1em; }
.video-card-body > strong { font-size: 18px; line-height: 1.45; }
.video-card-description { min-height: 66px; margin: 11px 0 14px; padding-left: 12px; color: #526b83; border-left: 2px solid var(--card-color-2); font-size: 12px; line-height: 1.78; }
.video-card-foot { margin-top: auto; padding-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid color-mix(in srgb, var(--card-color) 14%, #e6eef5); }
.video-card-series { min-width: 0; display: block; color: #778b9f; font-size: 11px; line-height: 1.6; }
.video-play-count { flex: 0 0 auto; padding: 4px 7px; color: #356c92; background: #edf6fb; border-radius: 6px; font-size: 11px; font-weight: 800; line-height: 1.35; }
.tutorial-empty { padding: 65px 20px; display: grid; place-items: center; color: #74889c; background: rgba(255,255,255,.8); border: 1px dashed #c8ddea; border-radius: 17px; text-align: center; }
.tutorial-empty[hidden] { display: none; }
.tutorial-empty strong { color: var(--navy); font-size: 20px; }
.tutorial-empty span { margin-top: 4px; font-size: 12px; }
.video-modal { position: fixed; z-index: 200; inset: 0; padding: 24px; display: grid; place-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
.video-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.video-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(3,18,35,.76); backdrop-filter: blur(9px); cursor: default; }
.video-modal-dialog { position: relative; z-index: 1; width: min(100%, 980px); overflow: hidden; background: #f7fbff; border: 1px solid rgba(255,255,255,.32); border-radius: 20px; box-shadow: 0 35px 100px rgba(0,18,38,.42); transform: translateY(18px) scale(.98); transition: transform .35s var(--ease); }
.video-modal.is-open .video-modal-dialog { transform: none; }
.video-modal-head { min-height: 82px; padding: 16px 19px 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border-bottom: 1px solid #dce8f2; }
.video-modal-head small, .video-modal-head strong { display: block; }
.video-modal-head small { color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.video-modal-head strong { margin-top: 3px; font-size: 20px; }
.video-modal-close { position: relative; width: 44px; height: 44px; flex: 0 0 auto; padding: 0; background: #eef6fc; border: 1px solid #d2e4f2; border-radius: 11px; cursor: pointer; transition: background .25s ease, transform .25s ease; }
.video-modal-close:hover { background: #e2f1fc; transform: rotate(3deg); }
.video-modal-close span { position: absolute; width: 18px; height: 2px; left: 12px; top: 20px; background: var(--navy); transform: rotate(45deg); }
.video-modal-close span:last-child { transform: rotate(-45deg); }
.video-player-shell { position: relative; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; background: radial-gradient(circle at center, #17324d, #061523 68%); }
.video-player-shell video { position: relative; z-index: 2; width: 100%; height: 100%; display: block; background: transparent; object-fit: contain; }
.video-player-loading { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; gap: 15px; color: rgba(255,255,255,.68); background: radial-gradient(circle at center, rgba(22,66,101,.94), rgba(4,18,31,.98)); font-size: 11px; letter-spacing: .08em; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; }
.video-player-shell.is-ready .video-player-loading { opacity: 0; visibility: hidden; }
.video-player-loading i { width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.2); border-top-color: #32cbd1; border-radius: 50%; animation: orbitSpin .8s linear infinite; }
.video-modal-foot { min-height: 58px; padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #7c8fa2; background: #fff; border-top: 1px solid #dce8f2; font-size: 11px; }
.video-modal-foot a { color: var(--blue); font-weight: 800; }
.accordion { max-width: 900px; margin: auto; border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item button { width: 100%; min-height: 75px; padding: 0; display: flex; justify-content: space-between; align-items: center; border: 0; background: none; text-align: left; cursor: pointer; font-weight: 800; }
.accordion-item button i { position: relative; width: 22px; height: 22px; border: 1px solid #bcd8ee; border-radius: 50%; }
.accordion-item button i::before, .accordion-item button i::after { content: ""; position: absolute; width: 10px; height: 1px; left: 5px; top: 10px; background: var(--blue); transition: transform .25s; }
.accordion-item button i::after { transform: rotate(90deg); }
.accordion-item.is-open button i::after { transform: none; }
.accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.accordion-panel p { min-height: 0; overflow: hidden; margin: 0; color: var(--text); font-size: 14px; }
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-item.is-open .accordion-panel p { padding: 0 35px 24px 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 30px; }
.contact-panel { position: relative; min-height: 500px; padding: 42px; overflow: hidden; isolation: isolate; background: linear-gradient(145deg, #fff, #f9fcff); border: 1px solid #cfe1ee; border-radius: 22px; box-shadow: 0 24px 64px rgba(20,73,126,.1), 0 1px 0 #fff inset; }
.contact-panel.blue { display: flex; flex-direction: column; color: #fff; background: linear-gradient(135deg, #079baa 0%, #08788f 44%, #12365f 100%); border-color: transparent; box-shadow: 0 28px 66px rgba(9,74,110,.2); }
.contact-panel.blue::before { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .2; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: linear-gradient(135deg, transparent 18%, #000 68%); mask-image: linear-gradient(135deg, transparent 18%, #000 68%); }
.contact-panel.blue::after { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; right: -78px; top: -80px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.018); animation: contactRingSpin 18s linear infinite; }
.contact-panel-scan { position: absolute; z-index: -1; width: 28%; height: 180%; left: -46%; top: -38%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), rgba(112,235,247,.08), transparent); filter: blur(1px); transform: rotate(16deg); animation: contactPanelScan 10s linear infinite; }
.contact-panel-copy { position: relative; z-index: 1; }
.contact-panel h2 { margin: 12px 0 13px; font-size: 36px; line-height: 1.18; }
.contact-panel p { color: var(--text); }
.contact-panel.blue p { max-width: 470px; margin: 0; color: rgba(255,255,255,.76); line-height: 1.8; }
.contact-list { position: relative; z-index: 2; margin-top: auto; padding-top: 26px; display: grid; gap: 13px; }
.value-card::before,
.release-card::before,
.feature-card:not(:first-child)::before,
.download-card:not(.primary)::before,
.guide-step::before,
.contact-panel:not(.blue)::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--page-accent-2), var(--page-accent)); opacity: .86; }
.contact-person { min-height: 88px; padding: 13px 15px; display: grid; grid-template-columns: 54px minmax(0,1fr) 38px; align-items: center; gap: 15px; color: var(--navy); background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.72); border-radius: 14px; box-shadow: 0 13px 30px rgba(5,46,81,.13), 0 1px 0 #fff inset; transition: transform .38s var(--motion-ease), box-shadow .38s ease, border-color .38s ease; }
.contact-person-icon { position: relative; width: 50px; height: 50px; display: grid; place-items: center; color: var(--page-accent); background: linear-gradient(145deg, #f0fbfc, #e6f6fb); border: 1px solid #c7e7eb; border-radius: 13px; }
.contact-person-icon::after { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(var(--page-rgb),.38); border-radius: 50%; animation: contactIconSpin 8s linear infinite; }
.contact-person-icon svg { position: relative; z-index: 1; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-person-copy { min-width: 0; }
.contact-person-copy small, .contact-person-copy strong { display: block; }
.contact-person-copy small { display: flex; align-items: center; gap: 7px; color: #667f96; font-size: 12px; font-weight: 700; }
.contact-person-copy small i { width: 6px; height: 6px; flex: 0 0 auto; background: #20bf92; border: 2px solid #daf7ed; border-radius: 50%; box-sizing: content-box; }
.contact-person-copy strong { margin-top: 4px; color: #087fc5; font-size: 19px; letter-spacing: .06em; }
.contact-person-arrow { width: 36px; height: 36px; display: grid; place-items: center; color: #168cba; background: #eaf7fa; border: 1px solid #d3ebef; border-radius: 10px; transition: transform .35s var(--motion-ease), color .35s ease, background .35s ease; }
.contact-person-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-person:hover { border-color: rgba(109,229,238,.9); transform: translateY(-3px); box-shadow: 0 18px 38px rgba(4,42,76,.19), 0 0 0 4px rgba(96,224,234,.09); }
.contact-person:hover .contact-person-arrow { color: #fff; background: var(--page-accent); transform: translateX(3px); }
.qr-panel { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(var(--page-rgb),.065), transparent 36%), linear-gradient(145deg, #fff, #f9fcff); }
.qr-panel::after { content: ""; position: absolute; z-index: -1; width: 280px; height: 280px; left: 50%; top: 46%; border: 1px dashed rgba(var(--page-rgb),.13); border-radius: 50%; transform: translate(-50%, -50%); animation: contactQrOrbit 22s linear infinite; }
.qr-panel-status { position: absolute; left: 24px; top: 24px; padding: 7px 10px; display: flex; align-items: center; gap: 7px; color: #49738e; background: rgba(242,250,254,.92); border: 1px solid #d8eaf4; border-radius: 9px; font-size: 11px; font-weight: 800; }
.qr-panel-status i { width: 7px; height: 7px; background: #20bf92; border: 2px solid #d9f7ec; border-radius: 50%; box-sizing: content-box; }
.qr-code-frame { position: relative; width: 246px; height: 246px; padding: 14px; overflow: hidden; background: #fff; border: 1px solid #d8e7f1; border-radius: 18px; box-shadow: 0 20px 48px rgba(24,76,121,.11), 0 0 0 8px rgba(255,255,255,.72); }
.qr-code-frame img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 9px; }
.qr-code-corners { position: absolute; z-index: 3; inset: 7px; pointer-events: none; background: linear-gradient(var(--page-accent), var(--page-accent)) left top / 24px 2px no-repeat, linear-gradient(var(--page-accent), var(--page-accent)) left top / 2px 24px no-repeat, linear-gradient(var(--page-accent), var(--page-accent)) right top / 24px 2px no-repeat, linear-gradient(var(--page-accent), var(--page-accent)) right top / 2px 24px no-repeat, linear-gradient(var(--page-accent), var(--page-accent)) left bottom / 24px 2px no-repeat, linear-gradient(var(--page-accent), var(--page-accent)) left bottom / 2px 24px no-repeat, linear-gradient(var(--page-accent), var(--page-accent)) right bottom / 24px 2px no-repeat, linear-gradient(var(--page-accent), var(--page-accent)) right bottom / 2px 24px no-repeat; }
.qr-code-scan { position: absolute; z-index: 2; height: 2px; left: 15px; right: 15px; top: 15px; pointer-events: none; opacity: .68; background: linear-gradient(90deg, transparent, #28d2cb 18%, #087fe6 50%, #28d2cb 82%, transparent); box-shadow: 0 0 8px rgba(8,127,230,.26); animation: qrScan 4.8s linear infinite alternate; }
.qr-panel-copy { position: relative; z-index: 2; margin-top: 25px; }
.qr-panel-copy strong { display: block; color: var(--navy); font-size: 21px; }
.qr-panel-copy p { margin: 7px 0 0; color: #6e8297; font-size: 13px; }

@keyframes contactPanelScan { from { transform: translateX(0) rotate(16deg); } to { transform: translateX(620%) rotate(16deg); } }
@keyframes contactRingSpin { to { transform: rotate(360deg); } }
@keyframes contactIconSpin { to { transform: rotate(360deg); } }
@keyframes contactQrOrbit { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes qrScan { from { transform: translateY(0); } to { transform: translateY(214px); } }
@keyframes qrScanMobile { from { transform: translateY(0); } to { transform: translateY(190px); } }

/* Footer and floating actions */
.site-footer { position: relative; padding: 54px 0 28px; overflow: hidden; color: #627a91; background: radial-gradient(circle at 12% 0, rgba(8,127,230,.08), transparent 28%), radial-gradient(circle at 92% 100%, rgba(27,196,200,.09), transparent 25%), linear-gradient(135deg, #edf6fd, #e5f1fa); border-top: 1px solid #c8deee; box-shadow: 0 -14px 40px rgba(27,77,124,.04); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--red), var(--blue), var(--cyan), var(--red)); background-size: 200% 100%; animation: menuAccentFlow 6s linear infinite; }
.site-footer::after { content: ""; position: absolute; width: 260px; height: 260px; right: -120px; bottom: -190px; border: 1px solid rgba(8,127,230,.13); border-radius: 50%; box-shadow: 0 0 0 42px rgba(8,127,230,.03), 0 0 0 84px rgba(27,196,200,.02); }
.footer-inner { position: relative; z-index: 1; padding: 26px 30px; display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-areas: "brand description"; align-items: center; column-gap: 34px; overflow: hidden; background: rgba(255,255,255,.68); border: 1px solid rgba(187,213,233,.76); border-radius: 22px; box-shadow: 0 18px 48px rgba(25,73,116,.08), 0 1px 0 rgba(255,255,255,.9) inset; backdrop-filter: blur(12px); }
.footer-inner::before { content: ""; position: absolute; width: 260px; height: 76px; right: 30px; top: 24px; pointer-events: none; background-image: radial-gradient(circle, rgba(8,127,230,.18) 0 1px, transparent 1.5px), linear-gradient(90deg, transparent, rgba(8,127,230,.16), rgba(27,196,200,.18), transparent); background-size: 18px 18px, 100% 1px; background-position: 0 0, center; background-repeat: repeat, no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); opacity: .52; }
.footer-inner .brand { grid-area: brand; padding: 7px 13px 7px 7px; background: rgba(255,255,255,.88); border: 1px solid #d5e6f3; border-radius: 14px; box-shadow: 0 10px 25px rgba(29,78,122,.08); }
.footer-inner .brand-icon { width: 48px; height: 48px; flex-basis: 48px; }
.footer-inner .brand-copy strong { color: var(--navy); font-size: 18px; }
.footer-inner p { position: relative; grid-area: description; max-width: 360px; margin: 0; padding-left: 25px; color: #587089; font-size: 13px; line-height: 1.8; }
.footer-inner p::before { content: ""; position: absolute; width: 3px; left: 0; top: 3px; bottom: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--blue), var(--cyan)); box-shadow: 0 0 12px rgba(8,127,230,.18); }
.floating-tools { position: fixed; z-index: 60; right: 18px; bottom: 28px; display: grid; gap: 9px; }
.floating-tools a { width: 52px; height: 52px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.32); border-radius: 15px; background: linear-gradient(145deg, #1d8be5, #296ab7); box-shadow: 0 12px 28px rgba(15,91,159,.24), 0 0 0 0 rgba(8,127,230,.14); transition: transform .25s ease, box-shadow .25s ease; }
.floating-tools a:last-child { background: linear-gradient(145deg, #0ea6b4, #1f78b8); }
.floating-tools a:hover { transform: translateY(-5px) scale(1.035); box-shadow: 0 18px 36px rgba(15,91,159,.3), 0 0 0 6px rgba(8,127,230,.08); }
.floating-tools svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Reveal motion */
.motion-paused, .motion-paused::before, .motion-paused::after,
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .62s var(--motion-ease), transform .62s var(--motion-ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .06s; }.reveal:nth-child(3) { transition-delay: .12s; }.reveal:nth-child(4) { transition-delay: .18s; }
@keyframes geometryDraw { to { stroke-dashoffset: 0; } }
@keyframes geometryDash { to { stroke-dashoffset: -96; } }
@keyframes blueprintRadar { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes geometryBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(.996) rotate(-.12deg); } 50% { transform: translate(-50%, -50%) scale(1.01) rotate(.12deg); } }
@keyframes geometryRingSpin { to { transform: rotate(360deg); } }
@keyframes measurePulse { 0%, 100% { opacity: .24; } 50% { opacity: .65; stroke-dashoffset: -18; } }
@keyframes depthPulse { 0%, 100% { opacity: .28; } 50% { opacity: .82; stroke-dashoffset: -14; } }
@keyframes bracketPulse { 0%, 100% { opacity: .25; filter: drop-shadow(0 0 0 rgba(8,127,230,0)); } 50% { opacity: .54; filter: drop-shadow(0 0 4px rgba(8,127,230,.24)); } }
@keyframes dataLabelPulse { 0%, 100% { opacity: .42; box-shadow: 0 0 0 rgba(8,127,230,0); } 50% { opacity: .82; box-shadow: 0 5px 14px rgba(8,127,230,.08); } }
@keyframes nodeRipple { from { opacity: .32; transform: scale(.55); } to { opacity: 0; transform: scale(1.45); } }
@keyframes blueprintPanelGlow { 0%, 100% { border-color: rgba(8,127,230,.28); box-shadow: var(--shadow); } 50% { border-color: rgba(27,196,200,.48); box-shadow: 0 28px 70px rgba(20,73,126,.17), 0 0 36px rgba(27,196,200,.08) inset; } }
@keyframes blueprintSheen { 0%, 28% { left: -95%; opacity: 0; } 42% { opacity: .75; } 65%, 100% { left: 130%; opacity: 0; } }
@keyframes centerMarkPulse { 50% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 13px rgba(235,55,57,0); } }
@keyframes connectionFlow { to { background-position: 200% 0; } }
@keyframes floatInfoGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(var(--float-rgb),0)); } 50% { filter: drop-shadow(0 5px 9px rgba(var(--float-rgb),.12)); } }
@keyframes cardFloat { 0%, 100% { transform: translate3d(var(--card-x, 0px), var(--card-y, 0px), 0) rotate(var(--card-rotate, 0deg)); } 50% { transform: translate3d(var(--card-x, 0px), calc(var(--card-y, 0px) - 5px), 0) rotate(var(--card-rotate, 0deg)); } }
@keyframes iconPulse { 50% { transform: scale(1.08) rotate(-3deg); } }
@keyframes iconOrbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes iconDiamondOrbit { 0% { transform: translate(-50%, -50%) rotate(45deg) scale(1); } 50% { transform: translate(-50%, -50%) rotate(225deg) scale(1.03); } 100% { transform: translate(-50%, -50%) rotate(405deg) scale(1); } }
@keyframes iconCenterPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 0 currentColor); } 50% { transform: translate(-50%, -50%) scale(1.06); filter: drop-shadow(0 0 4px currentColor); } }
@keyframes quickIconHalo { 0%, 100% { filter: drop-shadow(0 0 0 rgba(var(--quick-rgb),0)); } 50% { filter: drop-shadow(0 0 6px rgba(var(--quick-rgb),.24)); } }
@keyframes quickCardLineFlow { from { transform: translateX(0); } to { transform: translateX(350%); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes menuItemIn { from { opacity: 0; filter: blur(5px); transform: translateX(-22px) scale(.985); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes menuArrowPulse { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(4px, -50%); } }
@keyframes menuAccentFlow { to { background-position: 200% 0; } }
@keyframes activeMenuSweep { 0%, 42% { transform: translateX(-125%); } 68%, 100% { transform: translateX(125%); } }
@keyframes statusPulse { 50% { box-shadow: 0 0 0 8px rgba(27,196,200,0); } }
@keyframes blueprintOrbit { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes blueprintScan { 0%, 100% { top: 16%; opacity: .18; } 45%, 55% { opacity: .85; } 50% { top: 82%; } }
@keyframes blueprintNode { 50% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(8,127,230,0), 0 0 15px rgba(8,127,230,.5); } }
@keyframes pageHeroImageDrift { 0%, 100% { transform: scale(1.025) translateX(0); } 50% { transform: scale(1.04) translateX(-4px); } }
@keyframes pageHeroRings { 0%, 100% { opacity: .7; transform: scale(.985); } 50% { opacity: .95; transform: scale(1.018); } }
@keyframes pageHeroGridMove { to { background-position: 36px 36px; } }
@keyframes pageHeroSweep { 0%, 12% { left: -30%; opacity: 0; } 25% { opacity: .8; } 62%, 100% { left: 116%; opacity: 0; } }
@keyframes pageHeroNodePulse { 0%, 100% { opacity: .58; transform: scale(.84); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes pageHeroAccentFlow { to { background-position: 230% 0; } }
@keyframes pageIconFloat { 0%, 100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-6px) rotate(-1deg); } }
@keyframes pageIconOrbit { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pageIconOrbitReverse { from { transform: rotate(360deg); } to { transform: rotate(0); } }
@keyframes pageIconTicks { to { transform: rotate(360deg); } }
@keyframes pageIconNodePulse { 0%, 100% { opacity: .55; transform: scale(.78); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes pageHeroSvgPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes tutorialCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes videoSchematicTrace { to { stroke-dashoffset: -256; } }
@keyframes videoNodeSignal {
  0%, 100% { opacity: .48; filter: drop-shadow(0 0 0 rgba(115,255,244,0)); }
  50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(115,255,244,.9)); }
}
@keyframes videoCardScan {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: .45; }
  78% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(0, 86px, 0); }
}
@keyframes videoPlayOrbit { to { transform: rotate(360deg); } }
@keyframes homeCtaGradient { 0%, 100% { background-position: center, 0% 50%; } 50% { background-position: center, 100% 50%; } }
@keyframes homeCtaGrid { to { background-position: 34px 34px; } }
@keyframes homeCtaAccent { to { background-position: 220% 0; } }
@keyframes homeCtaSweep { 0%, 12% { left: -36%; opacity: 0; } 24% { opacity: 1; } 62%, 100% { left: 118%; opacity: 0; } }
@keyframes homeCtaRingPulse { 0%, 100% { opacity: .72; transform: translateY(-50%) scale(.985); } 50% { opacity: .96; transform: translateY(-50%) scale(1.018); } }
@keyframes homeCtaOrbit { from { transform: translateY(-50%) rotate(0); } to { transform: translateY(-50%) rotate(360deg); } }
@keyframes homeCtaOrbitReverse { from { transform: translateY(-50%) rotate(360deg); } to { transform: translateY(-50%) rotate(0); } }
@keyframes homeCtaSignal { 0%, 100% { opacity: .58; transform: scale(.84); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes homeCtaTitle { 0%, 28% { background-position: 100% 0; } 55%, 100% { background-position: -110% 0; } }
@keyframes homeCtaButtonPulse { 0%, 100% { box-shadow: 0 15px 35px rgba(235,55,57,.22); } 50% { box-shadow: 0 17px 39px rgba(235,55,57,.34), 0 0 0 4px rgba(255,94,86,.06); } }
@keyframes timelineRailFlow { to { background-position: 0 220%; } }
@keyframes timelineNodePulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--stage-rgb),.5), 0 0 0 7px rgba(var(--stage-rgb),.08), 0 8px 22px rgba(var(--stage-rgb),.24); } 50% { box-shadow: 0 0 0 1px rgba(var(--stage-rgb),.6), 0 0 0 10px rgba(var(--stage-rgb),0), 0 9px 26px rgba(var(--stage-rgb),.34); } }
@keyframes journeyCtaGradient { 0%, 100% { background-position: center, 0% 50%; } 50% { background-position: center, 100% 50%; } }
@keyframes journeyCtaGrid { to { background-position: 36px 36px; } }
@keyframes journeyCtaAccent { to { background-position: 230% 0; } }
@keyframes journeyCtaSweep { 0%, 12% { left: -34%; opacity: 0; } 25% { opacity: 1; } 63%, 100% { left: 118%; opacity: 0; } }
@keyframes journeyDiamondDrift { 0%, 100% { opacity: .6; transform: translateY(-50%) rotate(45deg) scale(.985); } 50% { opacity: .9; transform: translateY(-50%) rotate(48deg) scale(1.018); } }
@keyframes journeyRouteRunner { 0%, 8% { left: 0; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 94%, 100% { left: 100%; opacity: 0; } }
@keyframes journeyRouteNode { 0%, 100% { opacity: .62; transform: translate(-50%, -50%) scale(.86); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } }
@keyframes journeyLabelPulse { 0%, 100% { opacity: .64; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes journeySpark { 0%, 100% { opacity: .46; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes journeyTitleShine { 0%, 30% { background-position: 100% 0; } 58%, 100% { background-position: -110% 0; } }
@keyframes journeyButtonGlow { 0%, 100% { box-shadow: 0 14px 34px rgba(0,0,0,.16); } 50% { box-shadow: 0 18px 42px rgba(3,56,93,.26), 0 0 0 5px rgba(255,255,255,.08); } }
@keyframes historyTitleAccent { to { background-position: 220% 0; } }
@keyframes historyRuleScan { 0%, 10% { left: 0; opacity: 0; } 25%, 75% { opacity: 1; } 90%, 100% { left: 138px; opacity: 0; } }
@keyframes historyStampGlow { 0%, 100% { opacity: .7; transform: scale(.985); } 50% { opacity: .96; transform: scale(1.018); } }
@keyframes historyOrbitSpin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes historyOrbitSpinReverse { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0); } }
@keyframes historyTicksSpin { to { transform: rotate(360deg); } }
@keyframes historySweepSpin { to { transform: rotate(360deg); } }
@keyframes historyCoreRingSpin { to { transform: rotate(360deg); } }
@keyframes historyCorePulse { 0%, 100% { box-shadow: 0 14px 35px rgba(28,82,129,.15), 0 0 0 0 rgba(8,127,230,.08), inset 0 1px 0 #fff; } 50% { box-shadow: 0 16px 39px rgba(28,82,129,.19), 0 0 0 7px rgba(8,127,230,0), inset 0 1px 0 #fff; } }
@keyframes historyLogoBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes historyLabelFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes historyLabelDotPulse { 0%, 100% { opacity: .62; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes eventRingSpin { to { transform: rotate(360deg); } }

@media (max-width: 1120px) {
  .main-nav { gap: 2px; }
  .main-nav a { padding-inline: 8px; font-size: 13px; }
  .hero-layout { gap: 35px; }
  .history-layout { gap: 50px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-card { grid-column: auto !important; }
}

@media (max-width: 900px) {
  body::before { content: ""; position: fixed; inset: 80px 0 0; z-index: 80; pointer-events: none; background: rgba(7, 32, 59, .32); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
  body.menu-open::before { opacity: 1; visibility: visible; }
  .section { padding: 74px 0; }
  .menu-toggle { display: block; position: relative; z-index: 3; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
  .menu-toggle.is-open { border-color: #80bdec; background: #fff; box-shadow: 0 0 0 5px rgba(8,127,230,.08), 0 10px 25px rgba(26,76,121,.14); }
  .main-nav {
    position: absolute;
    inset: calc(100% + 8px) 12px auto;
    max-height: calc(100vh - 80px);
    padding: 24px 18px 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 9px;
    overflow-y: auto;
    background: radial-gradient(circle at 100% 0, rgba(8,127,230,.1), transparent 38%), radial-gradient(circle at 0 100%, rgba(235,55,57,.07), transparent 34%), rgba(255,255,255,.97);
    border: 1px solid rgba(172, 207, 235, .88);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(24, 70, 112, .27), 0 2px 0 rgba(255,255,255,.85) inset;
    backdrop-filter: blur(20px) saturate(1.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scaleY(.98);
    transform-origin: top;
    transition: opacity .25s, visibility .25s, transform .25s;
  }
  .main-nav::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--red), var(--blue), var(--cyan), var(--red)); background-size: 200% 100%; animation: menuAccentFlow 4s linear infinite; }
  .main-nav::after { content: "快速导航"; grid-column: 1 / -1; order: -1; margin: 0 2px 5px; color: #7890a8; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .main-nav a { position: relative; min-height: 52px; padding: 10px 48px 10px 16px; display: flex; align-items: center; overflow: hidden; color: var(--navy); background: rgba(255,255,255,.72); border: 1px solid rgba(205,225,241,.85); border-radius: 12px; font-size: 16px; box-shadow: 0 5px 15px rgba(33,80,124,.045); transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease); }
  .main-nav a::after { content: ""; display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.72) 50%, transparent 75%); transform: translateX(-125%); }
  .main-nav a::before { content: "→"; position: absolute; right: 18px; top: 50%; color: var(--blue); font-size: 21px; font-weight: 500; opacity: 0; transform: translate(-10px, -50%); transition: opacity .25s ease, transform .35s var(--ease); }
  .main-nav.is-open a { animation: menuItemIn .42s var(--ease) both; }
  .main-nav.is-open a:nth-child(2) { animation-delay: .04s; }
  .main-nav.is-open a:nth-child(3) { animation-delay: .08s; }
  .main-nav.is-open a:nth-child(4) { animation-delay: .12s; }
  .main-nav.is-open a:nth-child(5) { animation-delay: .16s; }
  .main-nav.is-open a:nth-child(6) { animation-delay: .20s; }
  .main-nav.is-open a:nth-child(7) { animation-delay: .24s; }
  .main-nav.is-open a:nth-child(8) { animation-delay: .28s; }
  .main-nav.is-open a:nth-child(9) { animation-delay: .32s; }
  .main-nav a:hover { color: var(--blue); background: linear-gradient(100deg, #edf7ff, #fff5f3); border-color: #a9d2f1; box-shadow: 0 12px 28px rgba(29, 100, 158, .15); transform: translateY(-3px); }
  .main-nav a:hover::after { transform: translateX(125%); transition: transform .7s var(--ease); }
  .main-nav a.is-active { color: var(--blue); background: linear-gradient(100deg, #e5f3ff, #f7fbff 58%, #fff3f1); border-color: #9dcdf2; box-shadow: inset 4px 0 0 var(--blue), 0 9px 22px rgba(29, 100, 158, .11); }
  .main-nav a.is-active::after { animation: activeMenuSweep 4s ease-in-out infinite; }
  .main-nav a:hover::before, .main-nav a.is-active::before { opacity: 1; transform: translate(0, -50%); }
  .main-nav a.is-active::before { animation: menuArrowPulse 1.8s ease-in-out infinite; }
  .main-nav .nav-cta { grid-column: 1 / -1; margin: 3px 0 0; justify-content: center; color: #fff; background: linear-gradient(100deg, #087fe6, #1ba9e6); border-color: transparent; text-align: center; box-shadow: 0 12px 28px rgba(8,127,230,.2); }
  .main-nav .nav-cta:hover, .main-nav .nav-cta.is-active { color: #fff; background: linear-gradient(100deg, #076fc9, #1598d0); border-color: transparent; box-shadow: 0 15px 32px rgba(8,127,230,.28); }
  .main-nav .nav-cta::before { color: #fff; }
  .menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero-layout { grid-template-columns: 1fr; min-height: 740px; padding: 65px 0 110px; }
  .hero-visual { position: absolute; width: 520px; right: -250px; bottom: -20px; opacity: .5; }
  .hero-copy { position: relative; z-index: 4; }
  .home-hero h1 { max-width: 680px; }
  .value-grid, .guide-grid { grid-template-columns: 1fr; }
  .home-flow-panel { grid-template-columns: repeat(2, 1fr); }
  .home-flow-step::after { display: none !important; }
  .home-final-cta { align-items: flex-start; flex-direction: column; }
  .home-cta-motion::after { right: -40px; }
  .cta-orbit { right: -5px; }
  .cta-signal-one { left: 62%; }
  .home-links { margin-top: -60px; }
  .page-hero-inner { grid-template-columns: 1fr 170px; }
  .page-icon { width: 158px; height: 158px; }
  .page-icon::before { width: 116px; height: 116px; background-size: 24px 24px, 24px 24px, 100% 100%; }
  .page-icon-orbit { width: 146px; height: 146px; }
  .page-icon-orbit::before { inset: 11px; }
  .page-icon svg { width: 64px; height: 64px; }
  .history-layout, .contact-grid { grid-template-columns: 1fr; }
  .history-intro { position: static; }
  .history-stamp { margin: 34px auto 6px; }
  .event-grid { grid-template-columns: repeat(2, 1fr); }
  .event-card:last-child { grid-column: 1 / -1; }
  .feature-grid { grid-template-columns: repeat(2,1fr); }
  .feature-card:first-child { grid-column: span 2; }
  .case-grid { grid-template-columns: 1fr; }
  .case-card.main { grid-row: auto; }
  .case-niche { grid-template-columns: 1fr; }
  .case-niche-art { min-height: 310px; order: -1; border-left: 0; border-bottom: 1px solid rgba(var(--case-rgb),.13); }
  .case-profile { grid-template-columns: 1fr; }
  .case-profile-art { min-height: 310px; order: -1; border-left: 0; border-bottom: 1px solid rgba(var(--case-rgb),.13); }
  .case-cross { grid-template-columns: 1fr; }
  .case-cross-art { min-height: 310px; order: -1; border-left: 0; border-bottom: 1px solid rgba(var(--case-rgb),.13); }
  .download-grid { grid-template-columns: 1fr; }
  .download-notes { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: auto minmax(0,1fr); grid-template-areas: "brand description"; }
}

@media (max-width: 620px) {
  .container { width: min(calc(100% - 24px), var(--container)); }
  .section { padding: 64px 0; }
  .case-follow-up { margin-bottom: -64px; }
  .header-inner { min-height: 80px; }
  .main-nav { inset: calc(100% + 7px) 8px auto; padding: 21px 10px 12px; gap: 7px; border-radius: 17px; }
  .main-nav::after { margin-left: 7px; }
  .main-nav a { min-height: 47px; padding: 8px 45px 8px 14px; font-size: 15px; }
  .brand-icon { width: 42px; height: 42px; }
  .brand-copy strong { font-size: 20px; }
  .brand-copy small { font-size: 9px; }
  .home-hero { min-height: 690px; }
  .home-hero::before { background: linear-gradient(rgba(240,247,255,.78), rgba(240,247,255,.88)), url("assets/hero.jpg") center / cover no-repeat; }
  .home-hero h1 { font-size: 43px; }
  .home-hero h1 em { margin-bottom: 5px; font-size: .62em; letter-spacing: .025em; }
  .hero-layout { min-height: 690px; padding: 30px 0 85px; }
  .hero-copy > p { font-size: 15px; }
  .hero-chips { gap: 8px; }
  .hero-chips span { font-size: 12px; }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-mini-stats { gap: 6px; padding: 0; }
  .hero-mini-stats div { padding: 10px 8px 9px; }
  .hero-mini-stats strong { font-size: 14px; }
  .hero-mini-stats span { font-size: 8px; }
  .hero-visual { width: 390px; right: -250px; bottom: -40px; }
  .blueprint-panel { inset: 40px 0 40px 25px; }
  .blueprint-radar { opacity: .28; }
  .blueprint-brackets, .blueprint-data-labels { display: none; }
  .float-info { display: none; }
  .home-links { margin-top: -28px; padding-bottom: 65px; }
  .home-links-head { padding: 21px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .quick-grid { gap: 12px; }
  .quick-grid, .home-flow-panel { grid-template-columns: 1fr; }
  .quick-card { min-height: 190px; padding: 25px; }
  .quick-card h2 { margin-top: 20px; }
  .home-flow-step { min-height: 220px; }
  .home-flow-link { align-items: flex-start; flex-direction: column; gap: 6px; }
  .home-final-cta { min-height: 0; padding: 34px 30px; }
  .home-final-cta h2 { font-size: 29px; }
  .home-final-actions { width: 100%; flex-direction: column; }
  .home-final-actions .button { width: 100%; }
  .home-cta-motion { opacity: .65; }
  .home-cta-motion::after { width: 270px; height: 270px; right: -115px; }
  .cta-orbit { right: -100px; }
  .cta-orbit-outer { width: 250px; height: 250px; }
  .cta-orbit-inner { width: 166px; height: 166px; margin-right: 42px; }
  .page-hero { height: auto; min-height: 390px; }
  .page-hero-inner { height: auto; grid-template-columns: 1fr; padding: 55px 0; }
  .page-hero h1 { font-size: 42px; }
  .page-icon { display: none; }
  .history-chapter-nav .container { width: 100%; min-height: 58px; padding: 0 12px; display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .history-chapter-nav .container::-webkit-scrollbar { display: none; }
  .history-chapter-nav a { min-width: 126px; min-height: 58px; flex: 0 0 auto; gap: 8px; }
  .history-chapter-nav a:first-child { border-left: 0; }
  .history-chapter-nav a:last-child { border-right: 0; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 30px; }
  .section-heading h2 { font-size: 34px; }
  .history-intro h2 { font-size: 34px; }
  .history-intro p { padding-left: 13px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card:first-child { grid-column: auto; }
  .timeline { gap: 17px; }
  .timeline::before, .timeline::after { left: 19px; }
  .timeline-item { margin-left: 64px; padding: 25px 22px; }
  .timeline-item::before { left: -65px; top: 27px; }
  .timeline-item::after { width: 43px; left: -43px; top: 48px; }
  .timeline-item h3 { padding-right: 32px; font-size: 20px; }
  .timeline-index { right: 17px; top: 16px; font-size: 38px; }
  .event-grid, .release-grid { grid-template-columns: 1fr; }
  .event-card:last-child { grid-column: auto; }
  .release-card { padding: 26px 22px; grid-template-columns: 58px 1fr; gap: 16px; }
  .release-status { right: 18px; top: 18px; }
  .journey-cta { min-height: 0; padding: 34px 30px; align-items: flex-start; flex-direction: column; gap: 30px; }
  .journey-cta-copy, .journey-cta-copy h2, .journey-cta-copy p { width: 100%; max-width: 100%; }
  .journey-cta .button { width: 100%; }
  .journey-cta-motion { opacity: .62; }
  .journey-cta-motion::after { right: -78px; }
  .journey-route { left: 28px; right: 28px; bottom: 18px; }
  .journey-spark-one { left: 72%; }
  .journey-spark-two { left: 88%; }
  .case-image { height: 270px; }
  .case-image-tags { left: 16px; right: 16px; bottom: 14px; }
  .case-copy { padding: 24px; }
  .case-mini { grid-template-columns: 1fr; }
  .case-art { min-height: 210px; border-right: 0; border-bottom: 1px solid rgba(var(--case-rgb),.1); }
  .case-art svg { height: 190px; }
  .case-art-scan { left: 12%; }
  .case-niche .case-copy { padding: 27px 24px; }
  .case-niche .case-copy h2 { font-size: 24px; }
  .case-niche-art { min-height: 255px; }
  .case-niche-stage { top: 14px; }
  .case-niche-dimension-text { font-size: 16px; }
  .case-niche-segment-text { font-size: 14px; }
  .case-niche-tags { left: auto; right: 14px; bottom: 13px; gap: 5px; }
  .case-niche-tags span { padding: 4px 6px; font-size: 8px; }
  .case-niche-scan { animation-name: caseNicheScanMobile; }
  .case-profile .case-copy { padding: 27px 24px; }
  .case-profile .case-copy h2 { font-size: 24px; }
  .case-profile-art { min-height: 255px; }
  .case-profile-stage { top: 14px; }
  .case-profile-stage-complete { left: 14%; }
  .case-profile-stage-parts { right: 6%; }
  .case-profile-scan { animation-name: caseNicheScanMobile; }
  .case-profile-tags { right: 14px; bottom: 13px; gap: 5px; }
  .case-profile-tags span { padding: 4px 6px; font-size: 8px; }
  .case-cross .case-copy { padding: 27px 24px; }
  .case-cross .case-copy h2 { font-size: 24px; }
  .case-cross-art { min-height: 255px; }
  .case-cross-stage { top: 14px; }
  .case-cross-stage-complete { left: 14%; }
  .case-cross-stage-parts { right: 6%; }
  .case-cross-scan { animation-name: caseNicheScanMobile; }
  .case-cross-flat-dimensions text { font-size: 15px; }
  .case-cross-flat-dimensions .case-cross-main-size { font-size: 18px; }
  .case-cross-tags { right: 14px; bottom: 13px; gap: 5px; }
  .case-cross-tags span { padding: 4px 6px; font-size: 8px; }
  .case-follow-up { min-height: 210px; padding: 30px 0; grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .case-follow-up h3 { font-size: 26px; }
  .case-follow-route { --follow-route-length: 78vw; width: var(--follow-route-length); right: -4vw; bottom: 18px; opacity: .58; }
  .case-follow-actions { width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .download-card { min-height: 430px; padding: 28px; }
  .version-main { font-size: 82px; }
  .version-decimal { margin-bottom: 2px; padding: 6px 8px 5px; font-size: 20px; }
  .plugin-reserve { margin-top: 75px; padding-top: 65px; }
  .plugin-slot-grid { grid-template-columns: 1fr; }
  .plugin-slot { min-height: 330px; }
  .contact-panel { min-height: 0; padding: 28px; }
  .contact-panel h2 { font-size: 30px; }
  .contact-person { min-height: 82px; grid-template-columns: 48px minmax(0,1fr) 34px; gap: 12px; }
  .contact-person-icon { width: 46px; height: 46px; }
  .contact-person-copy strong { font-size: 17px; }
  .contact-person-arrow { width: 32px; height: 32px; }
  .qr-panel { min-height: 440px; padding-top: 62px; }
  .qr-panel-status { left: 20px; top: 20px; }
  .qr-code-frame { width: 222px; height: 222px; }
  .qr-code-scan { animation-name: qrScanMobile; }
  .site-footer { padding: 38px 0 22px; }
  .footer-inner { padding: 23px 20px; grid-template-columns: 1fr; grid-template-areas: "brand" "description"; gap: 17px; }
  .footer-inner .brand { width: max-content; }
  .footer-inner p { padding-left: 17px; }
  .footer-inner::before { width: 150px; height: 56px; right: -12px; top: 22px; opacity: .32; }
  .floating-tools { right: 8px; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; gap: 6px; }
  .floating-tools a { width: 44px; height: 44px; border-radius: 13px; }
}

@media (max-width: 480px) {
  .main-nav { grid-template-columns: 1fr; }
  .main-nav .nav-cta { grid-column: auto; }
  .case-follow-actions { grid-template-columns: 1fr; }
}

@media (max-width: 1120px) {
  .tutorial-video-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .story-hero-inner { grid-template-columns: minmax(0,1fr) 190px; gap: 35px; }
  .story-hero-mark { width: 180px; height: 180px; }
  .story-text-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .tutorial-toolbar { align-items: stretch; flex-direction: column; }
  .tutorial-search { width: 100%; }
  .video-modal { padding: 15px; }
  .story-lead, .story-lead.reverse { grid-template-columns: 1fr; }
  .story-lead.reverse .story-copy-panel { order: initial; }
  .story-photo-mosaic .mosaic-main { grid-column: span 12; }
  .story-photo-mosaic .mosaic-side { grid-column: span 6; }
  .story-photo-mosaic .mosaic-third { grid-column: span 4; }
}

@media (max-width: 620px) {
  .guide-hero-stats { gap: 7px; }
  .guide-hero-stats span { padding: 7px 9px; font-size: 10px; }
  .tutorial-library-section { padding-top: 72px; }
  .tutorial-install-card { padding: 22px; grid-template-columns: 54px minmax(0,1fr); gap: 15px; }
  .tutorial-install-icon { width: 54px; height: 54px; }
  .tutorial-install-copy strong { font-size: 17px; }
  .tutorial-install-card > b { grid-column: 1 / -1; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.18); }
  .tutorial-toolbar { padding: 9px; }
  .tutorial-filters { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 7px; overflow: visible; }
  .tutorial-filters button { width: 100%; min-width: 0; padding-inline: 8px; }
  .tutorial-results-meta { align-items: flex-start; flex-direction: column; gap: 6px; }
  .tutorial-video-grid { grid-template-columns: 1fr; }
  .video-card-visual { height: 180px; }
  .video-modal { padding: 7px; }
  .video-modal-dialog { border-radius: 15px; }
  .video-modal-head { min-height: 74px; padding: 13px 12px 13px 17px; }
  .video-modal-head strong { font-size: 16px; line-height: 1.35; }
  .video-modal-close { width: 40px; height: 40px; }
  .video-modal-close span { left: 10px; top: 18px; }
  .video-modal-foot { padding: 12px 17px; align-items: flex-start; flex-direction: column; gap: 4px; }
  .story-detail-hero { min-height: 380px; }
  .story-hero-inner { grid-template-columns: 1fr; padding: 55px 0; }
  .story-detail-hero h1 { font-size: 42px; }
  .story-detail-hero p { font-size: 14px; }
  .story-hero-mark { display: none; }
  .story-content-section { padding: 72px 0; }
  .story-copy-panel { padding: 28px; }
  .story-copy-panel h2 { font-size: 32px; }
  .story-facts { grid-template-columns: 1fr; }
  .story-facts div { padding-top: 14px; }
  .story-section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .story-section-head h2 { font-size: 34px; }
  .story-photo-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .story-photo-mosaic .mosaic-main, .story-photo-mosaic .mosaic-side, .story-photo-mosaic .mosaic-third { grid-column: auto; grid-row: auto; min-height: 240px; }
  .story-text-grid { grid-template-columns: 1fr; }
  .story-text-card { min-height: 220px; }
  .story-detail-cta { padding: 28px; align-items: flex-start; flex-direction: column; }
  .story-detail-cta .button { width: 100%; }
}

/* Site-wide refinement */
:root { --shadow: 0 18px 46px rgba(20, 73, 126, .095); --radius: 14px; }
.section { padding: 78px 0; }
.page-hero { height: 420px; min-height: 420px; border-radius: 0 0 18px 18px; box-shadow: 0 18px 46px rgba(29,76,119,.09), inset 0 -1px 0 rgba(255,255,255,.82); }
.page-hero-inner { grid-template-columns: minmax(0,1fr) 220px; gap: 56px; padding: 48px 0; }
.page-hero h1 { margin: 14px 0 12px; font-size: 58px; }
.page-hero .accent-rule { width: 132px; height: 3px; margin: 18px 0; }
.page-icon { width: 178px; height: 178px; }
.page-icon::before { width: 130px; height: 130px; background-size: 26px 26px, 26px 26px, 100% 100%; }
.page-icon-orbit { width: 160px; height: 160px; }
.page-icon svg { width: 70px; height: 70px; }
.section-heading { padding-left: 18px; padding-bottom: 16px; gap: 36px; margin-bottom: 30px; }
.section-heading h2 { font-size: 43px; }
.section-heading p { max-width: 420px; line-height: 1.72; }
.button { min-height: 52px; padding: 0 20px; border-radius: 8px; font-size: 14px; }
.feature-card, .case-card, .download-card, .plugin-slot, .contact-panel, .story-copy-panel, .story-text-card, .event-card, .release-card { border-radius: 14px; box-shadow: 0 14px 36px rgba(20,73,126,.075); }
.feature-card { min-height: 260px; padding: 26px; }
.quick-card, .home-links-head { border-radius: 14px; }
.footer-inner { padding: 22px 26px; border-radius: 14px; }
.floating-tools a { width: 50px; height: 50px; border-radius: 12px; }
.release-section-head { margin-top: 72px; }
.case-copy small, .case-stage, .case-niche-stage, .case-profile-stage, .case-cross-stage { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 11px; line-height: 1.35; letter-spacing: .04em; }
.case-result { font-size: 12px; line-height: 1.45; }
.case-image-tags span, .case-niche-tags span, .case-profile-tags span, .case-cross-tags span { font-size: 10px; line-height: 1.35; }
.hero-mini-stats span { font-size: 10px; }
.case-niche-segment-text { font-size: 10px; }
.case-grid svg circle { display: none; }
.page-hero-motion i:first-child { display: none; }
.footer-inner { min-height: 92px; padding: 18px 24px; grid-template-columns: 190px minmax(0,1fr); column-gap: 36px; }
.footer-inner .brand { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.footer-inner .brand-icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 10px; }
.footer-inner .brand-copy strong { font-size: 19px; }
.footer-inner p { max-width: none; padding-left: 20px; font-size: 13px; }
.footer-inner::after { content: ""; position: absolute; width: 220px; height: 1px; right: 34px; top: 50%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(8,127,230,.16), rgba(27,196,200,.28)); }
.event-visual > span, .release-status, .release-card small { font-size: 10px; line-height: 1.35; letter-spacing: .05em; }
.story-hero-mark span, .story-photo-slot figcaption, .story-photo-placeholder span, .story-text-card small, .story-record small { font-size: 10px; line-height: 1.4; letter-spacing: .05em; }
.tutorial-install-copy small, .video-card-head > b, .video-card-signal, .video-card-meta small, .video-modal-head small { font-size: 10px; line-height: 1.35; letter-spacing: .05em; }
.video-card-coordinate, .video-card-meta b { font-size: 9px; line-height: 1.3; letter-spacing: .05em; }
.tutorial-filters button { min-height: 42px; }
.quick-card:hover, .feature-card:hover, .case-card:hover, .event-card:hover, .release-card:hover, .story-text-card:hover, .plugin-slot:hover { transform: translateY(-4px); }
.js .reveal { transform: translateY(12px); transition-duration: .5s; }

@media (max-width: 900px) {
  .page-hero { height: 400px; min-height: 400px; }
  .page-hero-inner { grid-template-columns: minmax(0,1fr) 176px; gap: 32px; }
  .page-hero h1 { font-size: 50px; }
  .page-icon { width: 158px; height: 158px; }
  .page-icon::before { width: 116px; height: 116px; }
  .page-icon-orbit { width: 146px; height: 146px; }
  .page-icon svg { width: 62px; height: 62px; }
  .section-heading h2 { font-size: 38px; }
}

@media (max-width: 620px) {
  .section { padding: 58px 0; }
  .page-hero { height: auto; min-height: 370px; border-radius: 0 0 14px 14px; }
  .page-hero-inner { grid-template-columns: 1fr; gap: 0; padding: 48px 0 52px; }
  .page-hero h1 { font-size: 40px; }
  .page-hero p { font-size: 14px; line-height: 1.75; }
  .page-icon { display: none; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 26px; }
  .section-heading h2 { font-size: 32px; }
  .section-heading p { max-width: none; }
  .feature-card { min-height: 0; padding: 23px; }
  .case-copy small, .case-stage, .case-niche-stage, .case-profile-stage, .case-cross-stage { font-size: 10px; }
  .case-result { font-size: 11px; }
  .case-image-tags span, .case-niche-tags span, .case-profile-tags span, .case-cross-tags span { font-size: 9px; }
  .hero-mini-stats span { font-size: 9px; }
  .footer-inner { padding: 21px 20px; }
  .footer-inner { grid-template-columns: 1fr; grid-template-areas: "brand" "description"; row-gap: 17px; }
  .footer-inner::after { display: none; }
  .tutorial-filters button { min-height: 44px; }
  .release-section-head { margin-top: 48px; }
  .floating-tools a { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .blueprint-data-dot { display: none; }
}

/* Precision pass: quieter rhythm, clearer hierarchy, and steadier motion. */
html { text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p { text-wrap: balance; }
p { text-wrap: pretty; }
.site-header { background: rgba(248, 251, 255, .91); box-shadow: 0 7px 24px rgba(23, 66, 106, .06); }
.header-inner { min-height: 78px; }
.brand-icon { box-shadow: 0 8px 20px rgba(34, 76, 112, .1), 0 1px 0 rgba(255,255,255,.96) inset; }
.main-nav a { min-height: 46px; display: inline-flex; align-items: center; }
.main-nav .nav-cta { min-height: 48px; }
.section { position: relative; }
.section + .section { border-top: 1px solid rgba(159, 193, 219, .18); }
.section-heading p { color: #5f748a; }
.home-links-head { box-shadow: 0 18px 42px rgba(26,76,121,.1), 0 1px 0 rgba(255,255,255,.95) inset; }
.quick-card, .home-flow-step, .feature-card, .case-card, .download-card, .plugin-slot, .contact-panel, .story-copy-panel, .story-text-card, .event-card, .release-card, .tutorial-video-card { will-change: transform; }
.quick-card:focus-visible, .home-flow-step:focus-visible, .feature-card:focus-visible, .case-card:focus-visible, .download-card:focus-visible, .plugin-slot:focus-visible, .tutorial-video-card:focus-visible { outline: 3px solid rgba(8,127,230,.28); outline-offset: 5px; }
.quick-card p, .home-flow-step p, .feature-card p, .story-text-card p, .case-result { text-wrap: pretty; }
.button { letter-spacing: .01em; }
.button:focus-visible, .floating-tools a:focus-visible { outline-offset: 3px; }
.floating-tools a { backdrop-filter: blur(10px); }
.footer-inner p { text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  .blueprint-panel { animation-duration: 8.5s; }
  .blueprint-scan { animation-duration: 6.8s; }
  .page-hero-motion i, .page-hero .badge i { animation-duration: 4.2s; }
  .home-final-cta small i { animation-duration: 3.8s; }
  .quick-card .icon-tile { animation-duration: 4.8s; }
}

@media (max-width: 1120px) {
  .header-inner { gap: 18px; }
  .brand-copy strong { font-size: 20px; }
  .main-nav a { padding-inline: 9px; }
}

@media (max-width: 620px) {
  .header-inner { min-height: 76px; }
  .site-header { box-shadow: 0 6px 20px rgba(23, 66, 106, .07); }
  .section + .section { border-top-color: rgba(159, 193, 219, .24); }
  .home-links-head { margin-bottom: 16px; }
  .quick-card, .home-flow-step { box-shadow: 0 12px 28px rgba(27,77,124,.08); }
  .floating-tools { right: 12px; gap: 6px; }
  .floating-tools a { width: 42px; height: 42px; border-radius: 12px; }
  .floating-tools svg { width: 20px; height: 20px; }
}

/* Home page rhythm pass */
@media (min-width: 1121px) {
  .home-hero { min-height: 615px; }
  .hero-layout { gap: 48px; padding: 45px 0 58px; }
  .hero-visual { min-height: 510px; }
  .blueprint-panel { inset: 18px 0 18px 18px; border-radius: 22px; }
  .quick-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
  .quick-card, .quick-card:nth-child(1), .quick-card:nth-child(2), .quick-card:nth-child(3), .quick-card:nth-child(4) { grid-column: auto; min-height: 285px; padding: 26px; }
  .quick-card h2 { margin-top: 20px; font-size: 21px; }
  .quick-card p { font-size: 12px; line-height: 1.7; }
  .quick-card > span { padding-top: 18px; font-size: 11px; }
  .home-links { padding-bottom: 78px; }
  .home-flow-step { min-height: 238px; padding: 25px 23px; }
  .home-flow-step small { margin-top: 25px; }
  .home-flow-step p { font-size: 12px; line-height: 1.7; }
  .home-flow-link { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .blueprint-panel, .quick-card::before, .quick-card .icon-tile, .home-flow-step::before { animation: none; }
}

/* Home workflow refinement */
.home-flow .section-heading {
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e0ebf4;
}
.home-flow .section-heading::before {
  width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
}
.home-flow .section-heading p {
  max-width: 430px;
  line-height: 1.75;
}
.home-flow-panel {
  gap: 16px;
}
.home-flow-step {
  min-height: 220px;
  padding: 25px 23px 23px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 15px;
  align-content: start;
  overflow: visible;
  background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%);
  border-color: #d8e6f1;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(24, 75, 119, .065), inset 0 1px 0 rgba(255, 255, 255, .9);
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease;
}
.home-flow-step::before {
  left: 22px;
  right: auto;
  width: 54px;
  height: 3px;
  border-radius: 0 0 3px 3px;
}
.home-flow-step:hover {
  background: linear-gradient(145deg, #ffffff 0%, #f8fcff 100%);
  border-color: #b9d7ec;
  box-shadow: 0 18px 38px rgba(24, 75, 119, .11), inset 0 1px 0 #fff;
  transform: translateY(-4px);
}
.home-flow-step:not(:last-child)::after {
  content: "\2192";
  right: -18px;
  top: 50%;
  z-index: 4;
  width: 20px;
  height: 20px;
  color: #86b8db;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  transform: translateY(-50%);
}
.flow-number {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  color: #0875cc;
  background: linear-gradient(145deg, #f4faff, #e6f3fd);
  border-color: #b8d9ef;
  border-radius: 11px;
  box-shadow: inset 0 1px 0 #fff, 0 7px 16px rgba(30, 112, 177, .09);
  letter-spacing: 0;
}
.home-flow-step small {
  grid-column: 2;
  margin: 2px 0 0;
  color: #7690a7;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0;
}
.home-flow-step h3 {
  grid-column: 2;
  margin: 7px 0 0;
  color: #0b2746;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}
.home-flow-step p {
  grid-column: 1 / -1;
  margin: 25px 0 0;
  padding-top: 18px;
  color: #526b82;
  border-top: 1px solid #e5eef5;
  font-size: 12px;
  line-height: 1.78;
}
.home-flow-link {
  margin-top: 18px;
  min-height: 58px;
  padding: 12px 13px 12px 19px;
  color: #60778e;
  background: linear-gradient(90deg, #f8fbfe, #f3f9fd);
  border-color: #dce9f3;
  border-radius: 10px;
  box-shadow: inset 3px 0 0 #26b9cb;
}
.home-flow-link a {
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  color: #0875cc;
  background: #fff;
  border: 1px solid #cfe2f1;
  border-radius: 7px;
  box-shadow: 0 6px 14px rgba(20, 84, 134, .06);
  transition: color .25s ease, border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.home-flow-link a:hover {
  color: #0564ad;
  border-color: #a9cee8;
  box-shadow: 0 9px 19px rgba(20, 84, 134, .1);
  transform: translateX(3px);
}

@media (max-width: 980px) {
  .home-flow-step { min-height: 205px; }
  .home-flow-step:not(:last-child)::after { display: none; }
}

@media (max-width: 620px) {
  .home-flow .section-heading { margin-bottom: 22px; padding-bottom: 18px; }
  .home-flow-panel { gap: 12px; }
  .home-flow-step { min-height: 0; padding: 22px 20px 20px; }
  .home-flow-step::before { left: 20px; width: 48px; }
  .home-flow-step p { margin-top: 21px; padding-top: 15px; }
  .home-flow-link { padding: 15px 16px; }
}

/* Home quick-links heading refinement */
.home-links {
  margin-top: -36px;
}
.home-links-head {
  position: relative;
  margin-bottom: 24px;
  padding: 17px 0 21px 19px;
  align-items: flex-end;
  gap: 42px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d8e7f2;
  border-radius: 0;
  box-shadow: none !important;
  backdrop-filter: none;
}
.home-links-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 21px;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  border-radius: 3px;
}
.home-links-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 86px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  border-radius: 2px;
}
.home-links-head small {
  font-size: 10px;
  letter-spacing: 0;
}
.home-links-head h2 {
  margin-top: 7px;
  color: #0b2746;
  font-size: 30px;
  line-height: 1.2;
}
.home-links-head p {
  max-width: 440px;
  padding-bottom: 2px;
  color: #5b7187;
  line-height: 1.7;
  text-align: right;
}

@media (max-width: 900px) {
  .home-links { margin-top: -28px; }
  .home-links-head {
    padding: 16px 0 18px 16px;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .home-links-head::before { top: 16px; bottom: 18px; }
  .home-links-head p { max-width: none; padding-bottom: 0; text-align: left; }
}

@media (max-width: 620px) {
  .home-links-head { margin-bottom: 18px; padding-left: 14px; }
  .home-links-head h2 { font-size: 26px; }
}

/* Home quick-links compact panel */
.home-links {
  margin-top: -40px;
}
.home-links-head {
  min-height: 104px;
  margin-bottom: 20px;
  padding: 20px 25px 20px 27px;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(112deg, #fff 0%, #fdfefe 62%, #f3f9fd 100%);
  border: 1px solid #d4e4f0;
  border-radius: 11px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 13px 30px rgba(23, 73, 116, .075) !important;
}
.home-links-head::before {
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 4px;
  background: linear-gradient(180deg, #25c5ce, var(--blue));
  border-radius: 0 4px 4px 0;
  box-shadow: 3px 0 12px rgba(8, 127, 230, .11);
}
.home-links-head::after {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  width: 38%;
  height: auto;
  pointer-events: none;
  background-image: linear-gradient(rgba(79, 149, 201, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 149, 201, .12) 1px, transparent 1px);
  background-size: 22px 22px;
  border-radius: 0 11px 11px 0;
  opacity: .34;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 46%);
  mask-image: linear-gradient(90deg, transparent, #000 46%);
}
.home-links-head > * {
  position: relative;
  z-index: 1;
}
.home-links-head h2 {
  margin-top: 6px;
  font-size: 29px;
}
.home-links-head p {
  max-width: 455px;
  padding: 4px 0 4px 25px;
  color: #536b82;
  border-left: 1px solid #dce8f1;
  line-height: 1.7;
  text-align: left;
}

@media (max-width: 900px) {
  .home-links { margin-top: -28px; }
  .home-links-head {
    min-height: 0;
    padding: 20px 21px 20px 23px;
    gap: 11px;
  }
  .home-links-head::before { top: 20px; bottom: 20px; }
  .home-links-head::after { right: 0; width: 54%; }
  .home-links-head p { padding: 11px 0 0; border-top: 1px solid #e1ebf3; border-left: 0; }
}

@media (max-width: 620px) {
  .home-links-head { padding: 18px 18px 18px 21px; border-radius: 9px; }
  .home-links-head::before { top: 18px; bottom: 18px; }
  .home-links-head h2 { font-size: 25px; }
}

/* Case CTA balance pass */
@property --case-follow-border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.case-follow-up { min-height: 154px; margin-top: 48px; margin-bottom: -46px; padding: 28px 30px 26px; gap: 36px; overflow: hidden; border-radius: 14px; box-shadow: 0 14px 34px rgba(20,72,115,.06); }
.case-follow-up::before { --case-follow-border-angle: 0deg; width: 100%; left: 0; transform: none; background: linear-gradient(90deg, rgba(251,253,255,.99), rgba(245,251,255,.98) 58%, rgba(235,247,253,.97)) padding-box, conic-gradient(from var(--case-follow-border-angle), rgba(153,193,222,.3) 0deg 300deg, rgba(8,127,230,.38) 314deg, rgba(8,127,230,.7) 330deg, rgba(27,196,200,.56) 344deg, rgba(153,193,222,.3) 360deg) border-box; border: 1px solid transparent; border-radius: inherit; box-shadow: inset 0 1px 0 #fff; animation: caseFollowBorderOrbit 14s linear infinite; transition: box-shadow .6s ease; }
.case-follow-up::after { width: 100%; left: 0; transform: none; background-size: 48px 48px, 48px 48px, 100% 1px; background-position: 0 0, 0 0, 0 0; border-radius: inherit; opacity: .16; -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.64) 18%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.64) 18%, #000 84%, transparent); animation: caseFollowGridDrift 16s linear infinite; transition: opacity .6s ease; }
.case-follow-up:hover::before { box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgba(20,72,115,.035); }
.case-follow-up:hover::after { opacity: .21; }
.case-follow-copy { max-width: none; padding-left: 20px; }
.case-follow-copy::before { width: 2px; top: 1px; bottom: 1px; background: linear-gradient(180deg, var(--blue), var(--cyan), var(--blue)); background-size: 100% 200%; opacity: .8; box-shadow: none; animation: caseFollowAccentFlow 5.5s linear infinite; }
.case-follow-up small { gap: 7px; color: #176da9; letter-spacing: .08em; }
.case-follow-up small::before { width: 18px; height: 1px; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: 0; box-shadow: none; }
.case-follow-up h3 { margin-top: 9px; display: flex; align-items: center; gap: 22px; color: #0d2948; font-size: 26px; line-height: 1.25; white-space: nowrap; }
.case-follow-up h3::after { content: ""; height: 1px; min-width: 72px; flex: 1 1 auto; background-image: linear-gradient(90deg, rgba(8,127,230,.25), rgba(27,196,200,.15) 62%, transparent), linear-gradient(90deg, transparent, rgba(8,127,230,.82), rgba(27,196,200,.62), transparent); background-size: 100% 1px, 96px 1px; background-position: 0 50%, -96px 50%; background-repeat: no-repeat; animation: caseFollowGuideSweep 8s linear infinite; }
.case-follow-actions { padding-left: 0; border-left: 0; }
.case-follow-actions a { min-height: 48px; min-width: 158px; }
.case-follow-route { display: none; }
body[data-page="examples"] .site-footer { border-top-color: rgba(153,193,222,.16); box-shadow: none; }
body[data-page="examples"] .site-footer::before { height: 1px; background: linear-gradient(90deg, transparent, rgba(8,127,230,.14) 28%, rgba(27,196,200,.18) 72%, transparent); background-size: 100% 100%; animation: none; }

@keyframes caseFollowGridDrift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 48px 48px, 48px 48px, 0 0; } }
@keyframes caseFollowBorderOrbit { to { --case-follow-border-angle: 360deg; } }
@keyframes caseFollowAccentFlow { from { background-position: 0 0; } to { background-position: 0 200%; } }
@keyframes caseFollowGuideSweep { from { background-position: 0 50%, -96px 50%; } to { background-position: 0 50%, calc(100% + 96px) 50%; } }

@media (max-width: 900px) {
  .case-follow-up { gap: 28px; }
  .case-follow-up h3 { white-space: normal; }
  .case-follow-up h3::after { display: none; }
}

@media (max-width: 620px) {
  .case-follow-up { min-height: 210px; margin-top: 48px; margin-bottom: -26px; padding: 28px 22px; gap: 22px; border-radius: 12px; }
  .case-follow-copy { padding-left: 17px; }
  .case-follow-up h3 { font-size: 25px; line-height: 1.3; }
  .case-follow-actions a { min-height: 50px; }
}

/* Site-wide finishing pass */
html { text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.section-heading small,
.page-hero .badge,
.button,
.main-nav a { letter-spacing: 0; }
.section-heading p,
.page-hero p { color: #536b82; }
.page-hero p { text-shadow: 0 1px 0 rgba(255, 255, 255, .48); }
.main-nav a {
  transition: color .25s ease, background .25s ease, transform .25s var(--ease);
}
.main-nav a:hover { transform: translateY(-1px); }
.main-nav .nav-cta {
  box-shadow: 0 9px 22px rgba(8, 127, 230, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.main-nav .nav-cta:hover { box-shadow: 0 12px 26px rgba(8, 127, 230, .24), inset 0 1px 0 rgba(255, 255, 255, .2); }
.button { transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease, background .25s ease; }
.button:hover { transform: translateY(-2px); }
.button-secondary:hover { border-color: #a8cce8; box-shadow: 0 14px 30px rgba(40, 91, 140, .12); }
.feature-card:hover,
.case-card:hover,
.plugin-slot:hover,
.tutorial-video-card:hover { transform: translateY(-4px); }
.floating-tools {
  right: 8px;
  bottom: 22px;
  gap: 8px;
}
.floating-tools a {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: 0 10px 23px rgba(15, 91, 159, .2), 0 0 0 0 rgba(8, 127, 230, .12);
}
.floating-tools a:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 28px rgba(15, 91, 159, .26), 0 0 0 5px rgba(8, 127, 230, .07);
}
.floating-tools svg { width: 21px; height: 21px; }
.site-footer { border-top-color: #c3dbe9; }
.footer-inner { box-shadow: 0 14px 38px rgba(25, 73, 116, .065), 0 1px 0 rgba(255, 255, 255, .92) inset; }

@media (max-width: 980px) {
  .floating-tools { right: 10px; }
}

@media (max-width: 620px) {
  .floating-tools { right: 10px; bottom: 16px; gap: 6px; }
  .floating-tools a { width: 42px; height: 42px; border-radius: 10px; }
  .floating-tools svg { width: 20px; height: 20px; }
}

/* Independent text-explanation entry and library */
.tutorial-text-entry {
  position: relative;
  min-height: 106px;
  margin-top: 23px;
  padding: 17px 23px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  color: var(--navy);
  background: linear-gradient(105deg, #fff 0%, #f8fbfe 62%, #eff8fc 100%);
  border: 1px solid #cfe2ef;
  border-radius: 11px;
  box-shadow: 0 12px 28px rgba(23, 73, 116, .08), inset 0 1px 0 #fff;
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.tutorial-text-entry::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 54px;
  margin-left: -23px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  border-radius: 0 4px 4px 0;
}
.tutorial-text-entry:hover {
  border-color: #a8cfe8;
  box-shadow: 0 17px 35px rgba(23, 73, 116, .12), inset 0 1px 0 #fff;
  transform: translateY(-3px);
}
.tutorial-text-entry-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #eaf5fd;
  border: 1px solid #bddcf0;
  border-radius: 10px;
}
.tutorial-text-entry-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tutorial-text-entry-copy { min-width: 0; display: flex; flex-direction: column; }
.tutorial-text-entry-copy small { color: var(--blue); font-size: 10px; font-weight: 900; line-height: 1.2; }
.tutorial-text-entry-copy strong { margin-top: 5px; font-size: 19px; line-height: 1.25; }
.tutorial-text-entry-copy span { margin-top: 4px; color: #61788e; font-size: 12px; line-height: 1.55; }
.tutorial-text-entry > b { min-height: 36px; padding: 0 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--blue); background: #fff; border: 1px solid #c7deee; border-radius: 7px; font-size: 11px; white-space: nowrap; }
.tutorial-text-entry > b i { font-style: normal; transition: transform .25s var(--ease); }
.tutorial-text-entry:hover > b i { transform: translateX(3px); }

.tutorial-text-page-section { background: linear-gradient(180deg, #fff, #f7fbfe); }
.tutorial-text-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tutorial-text-card { --text-rgb: 8, 127, 230; position: relative; min-height: 314px; padding: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--navy); background: #fff; border: 1px solid rgba(var(--text-rgb), .2); border-radius: 14px; box-shadow: 0 14px 36px rgba(25, 72, 114, .075); text-align: left; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease; }
.tutorial-text-card:nth-child(4n + 2) { --text-rgb: 76, 121, 216; }
.tutorial-text-card:nth-child(4n + 3) { --text-rgb: 240, 138, 49; }
.tutorial-text-card:nth-child(4n + 4) { --text-rgb: 118, 96, 226; }
.tutorial-text-card:hover { border-color: rgba(var(--text-rgb), .48); box-shadow: 0 22px 48px rgba(25, 72, 114, .13); transform: translateY(-4px); }
.tutorial-text-card-media { position: relative; height: 142px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(rgba(var(--text-rgb), .08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--text-rgb), .08) 1px, transparent 1px), linear-gradient(140deg, #f7fbfe, #edf6fc); background-size: 22px 22px, 22px 22px, 100% 100%; }
.tutorial-text-card-media::after { content: ""; position: absolute; width: 170px; height: 170px; right: -82px; bottom: -105px; border: 1px solid rgba(var(--text-rgb), .2); border-radius: 50%; box-shadow: 0 0 0 25px rgba(var(--text-rgb), .035), 0 0 0 50px rgba(var(--text-rgb), .025); }
.tutorial-text-card-media.has-image { background: #eaf2f8; }
.tutorial-text-card-media img { width: 100%; height: 100%; object-fit: cover; }
.tutorial-text-card-media > b { position: absolute; z-index: 2; right: 14px; top: 12px; color: rgba(var(--text-rgb), .48); font: 900 31px/1 monospace; }
.tutorial-text-card-placeholder { position: relative; z-index: 2; display: grid; place-items: center; gap: 6px; color: #7b92a5; }
.tutorial-text-card-placeholder svg { width: 32px; height: 32px; fill: none; stroke: rgb(var(--text-rgb)); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; opacity: .78; }
.tutorial-text-card-placeholder small { font-size: 10px; font-weight: 800; }
.tutorial-text-card-copy { min-height: 172px; padding: 17px 19px 16px; display: flex; flex-direction: column; }
.tutorial-text-card-copy > small { color: rgb(var(--text-rgb)); font-size: 9px; font-weight: 900; line-height: 1.2; }
.tutorial-text-card-copy > strong { margin-top: 7px; color: #102d4b; font-size: 17px; line-height: 1.35; }
.tutorial-text-card-copy > span { margin-top: 8px; display: -webkit-box; overflow: hidden; color: #637b91; font-size: 11px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tutorial-text-card-copy > b { margin-top: auto; padding-top: 12px; color: rgb(var(--text-rgb)); font-size: 10px; font-weight: 900; }
.tutorial-text-card-copy > b i { font-style: normal; transition: transform .25s var(--ease); }
.tutorial-text-card:hover .tutorial-text-card-copy > b i { display: inline-block; transform: translateX(3px); }

.tutorial-text-modal { position: fixed; z-index: 210; inset: 0; padding: 24px; display: grid; place-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
.tutorial-text-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.tutorial-text-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(3, 18, 35, .72); backdrop-filter: blur(9px); cursor: default; }
.tutorial-text-modal-dialog { position: relative; z-index: 1; width: min(100%, 980px); max-height: calc(100vh - 48px); overflow: hidden; background: #f7fbff; border: 1px solid rgba(255, 255, 255, .32); border-radius: 18px; box-shadow: 0 35px 100px rgba(0, 18, 38, .42); transform: translateY(18px) scale(.98); transition: transform .35s var(--ease); }
.tutorial-text-modal.is-open .tutorial-text-modal-dialog { transform: none; }
.tutorial-text-modal-head { min-height: 78px; padding: 15px 19px 15px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border-bottom: 1px solid #dce8f2; }
.tutorial-text-modal-head small, .tutorial-text-modal-head strong { display: block; }
.tutorial-text-modal-head small { color: var(--blue); font-size: 10px; font-weight: 900; }
.tutorial-text-modal-head strong { margin-top: 3px; font-size: 20px; }
.tutorial-text-modal-body { max-height: calc(100vh - 126px); overflow: auto; display: grid; grid-template-columns: 1.15fr .85fr; }
.tutorial-text-gallery { min-height: 420px; padding: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-content: start; gap: 12px; background: linear-gradient(145deg, #eaf4fc, #f7fbfe); }
.tutorial-text-gallery figure { margin: 0; overflow: hidden; background: #fff; border: 1px solid #cfe1ee; border-radius: 9px; box-shadow: 0 8px 20px rgba(25, 72, 114, .08); }
.tutorial-text-gallery figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tutorial-text-gallery figcaption { padding: 7px 9px; color: #70869a; font-size: 10px; }
.tutorial-text-gallery-placeholder { min-height: 370px; display: grid; place-content: center; justify-items: center; gap: 8px; color: #7890a4; background: linear-gradient(rgba(8, 127, 230, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 127, 230, .055) 1px, transparent 1px), #fff; background-size: 22px 22px; border: 1px dashed #b8d5e9; border-radius: 10px; text-align: center; }
.tutorial-text-gallery-placeholder svg { width: 46px; height: 46px; fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tutorial-text-gallery-placeholder strong { color: #17314e; font-size: 15px; }
.tutorial-text-gallery-placeholder span { font-size: 11px; }
.tutorial-text-modal-copy { padding: 42px 35px; background: #fff; border-left: 1px solid #dce8f2; }
.tutorial-text-modal-copy > small { color: var(--blue); font-size: 10px; font-weight: 900; }
.tutorial-text-modal-copy h3 { margin: 12px 0 16px; color: #102d4b; font-size: 28px; line-height: 1.3; }
.tutorial-text-modal-copy p { margin: 0; color: #526b83; font-size: 14px; line-height: 1.9; }

@media (max-width: 1120px) {
  .tutorial-text-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tutorial-text-entry { grid-template-columns: 44px minmax(0, 1fr); padding: 15px 18px 15px 22px; }
  .tutorial-text-entry::before { margin-left: -22px; }
  .tutorial-text-entry > b { grid-column: 2; justify-self: start; }
  .tutorial-text-modal { padding: 15px; }
  .tutorial-text-modal-body { grid-template-columns: 1fr; }
  .tutorial-text-modal-copy { border-top: 1px solid #dce8f2; border-left: 0; }
}
@media (max-width: 620px) {
  .tutorial-text-entry { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; min-height: 98px; padding: 14px 15px 14px 19px; }
  .tutorial-text-entry::before { margin-left: -19px; height: 48px; }
  .tutorial-text-entry-icon { width: 42px; height: 42px; }
  .tutorial-text-entry-icon svg { width: 23px; height: 23px; }
  .tutorial-text-entry-copy strong { font-size: 17px; }
  .tutorial-text-entry-copy span { font-size: 11px; }
  .tutorial-text-grid { grid-template-columns: 1fr; gap: 14px; }
  .tutorial-text-card { min-height: 0; }
  .tutorial-text-card-media { height: 156px; }
  .tutorial-text-modal { padding: 7px; }
  .tutorial-text-modal-dialog { max-height: calc(100vh - 14px); border-radius: 14px; }
  .tutorial-text-modal-head { min-height: 72px; padding: 12px 12px 12px 17px; }
  .tutorial-text-modal-head strong { font-size: 16px; }
  .tutorial-text-modal-body { max-height: calc(100vh - 86px); }
  .tutorial-text-gallery { min-height: 260px; padding: 14px; }
  .tutorial-text-gallery-placeholder { min-height: 220px; }
  .tutorial-text-modal-copy { padding: 25px 20px 28px; }
  .tutorial-text-modal-copy h3 { font-size: 23px; }
}

/* Text-guide detail rhythm */
.tutorial-text-page .page-hero { height: 392px; min-height: 392px; }
.tutorial-mode-nav { position: relative; z-index: 4; background: rgba(255, 255, 255, .94); border-bottom: 1px solid #d7e7f3; box-shadow: 0 10px 24px rgba(25, 73, 116, .055); backdrop-filter: blur(12px); }
.tutorial-mode-nav .container { min-height: 66px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tutorial-mode-nav a { position: relative; min-height: 66px; padding: 11px 20px; display: flex; align-items: center; justify-content: center; gap: 11px; color: #708399; border-left: 1px solid #e1edf5; transition: color .25s ease, background .25s ease; }
.tutorial-mode-nav a:last-child { border-right: 1px solid #e1edf5; }
.tutorial-mode-nav a span { min-width: 0; }
.tutorial-mode-nav strong { white-space: nowrap; }
.tutorial-mode-nav a::after { content: ""; position: absolute; left: 19%; right: 19%; bottom: 0; height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, var(--red) 0%, var(--blue) 25%, var(--cyan) 50%, var(--blue) 75%, var(--red) 100%); background-size: 200% 100%; opacity: 0; filter: drop-shadow(0 0 4px rgba(8,127,230,.2)); transform: scaleX(.45); transform-origin: center; animation: tutorialModeLineFlow 4.6s linear infinite; animation-play-state: paused; transition: transform .38s var(--ease), opacity .25s ease, filter .3s ease; }
.tutorial-mode-nav a:hover, .tutorial-mode-nav a.is-active { color: var(--blue); background: #f2f8fd; }
.tutorial-mode-nav a:hover::after, .tutorial-mode-nav a.is-active::after { opacity: 1; transform: scaleX(1); animation-play-state: running; filter: drop-shadow(0 0 6px rgba(8,127,230,.28)); }
@keyframes tutorialModeLineFlow { from { background-position: 0 50%; } to { background-position: -200% 50%; } }
@media (prefers-reduced-motion: reduce) { .tutorial-mode-nav a::after { animation: none; background-position: 50% 50%; } }
.tutorial-mode-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tutorial-mode-nav span { display: flex; flex-direction: column; gap: 2px; }
.tutorial-mode-nav small { font-size: 9px; line-height: 1.15; }
.tutorial-mode-nav strong { font-size: 13px; line-height: 1.2; }
.tutorial-text-page-section { padding-top: 68px; }
.tutorial-text-page-section .section-heading { margin-bottom: 24px; }
.tutorial-text-page-section .tutorial-toolbar { margin-bottom: 13px; border-radius: 12px; box-shadow: 0 9px 24px rgba(24, 72, 115, .055); }
.tutorial-text-page-section .tutorial-results-meta { color: #647c92; }
.tutorial-text-card { border-radius: 12px; box-shadow: 0 12px 30px rgba(25, 72, 114, .065); }
.tutorial-text-card:hover { box-shadow: 0 18px 38px rgba(25, 72, 114, .11); }
.tutorial-text-card-copy > span { color: #5b7289; font-size: 12px; line-height: 1.7; }
.tutorial-text-card-copy > b { padding-top: 13px; font-size: 11px; }

@media (max-width: 900px) {
  .tutorial-text-page .page-hero { height: 380px; min-height: 380px; }
  .tutorial-mode-nav a { padding-inline: 12px; }
}
@media (max-width: 620px) {
  .tutorial-text-page .page-hero { height: 365px; min-height: 365px; }
  .tutorial-mode-nav .container { min-height: 58px; }
  .tutorial-mode-nav a { min-height: 58px; padding: 9px 8px; gap: 7px; }
  .tutorial-mode-nav svg { width: 20px; height: 20px; }
  .tutorial-mode-nav small { font-size: 8px; }
  .tutorial-mode-nav strong { font-size: 12px; }
  .tutorial-mode-nav a { gap: 5px; }
  .tutorial-mode-nav svg { width: 18px; height: 18px; }
  .tutorial-toolbar-title > span:last-child { display: none; }
  .tutorial-text-page-section { padding-top: 55px; }
}

/* Keep the complete site comfortably scaled on 2K and ultrawide displays. */
@media (min-width: 1600px) {
  .container {
    width: calc(100% - 96px);
    max-width: 2200px;
  }

  .header-inner { min-height: 88px; }
  .brand-icon { width: 49px; height: 49px; flex-basis: 49px; }
  .brand-copy strong { font-size: 23px; }
  .main-nav { gap: 10px; }
  .main-nav a { min-height: 50px; padding: 13px 15px; font-size: 15px; }

  .page-hero { height: 480px; min-height: 480px; }
  .page-hero-inner {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 96px;
    padding: 60px 0;
  }
  .page-hero h1 { font-size: 68px; }
  .page-hero p { max-width: 900px; font-size: 16px; }
  .page-icon-orbit { width: 190px; height: 190px; }
  .page-icon svg { width: 82px; height: 82px; }

  .section { padding: 94px 0; }
  .section-heading { gap: 54px; margin-bottom: 38px; }
  .section-heading h2 { font-size: 48px; }
  .section-heading p { max-width: 560px; font-size: 14px; }

  .home-hero { min-height: 690px; }
  .hero-layout { gap: 76px; padding: 62px 0 72px; }
  .hero-copy { max-width: 780px; }
  .home-hero h1 { max-width: 860px; font-size: 72px; }
  .hero-copy > p { max-width: 720px; font-size: 16px; }
  .hero-actions, .hero-mini-stats { max-width: 680px; }
  .hero-visual { min-height: 560px; }
  .blueprint-geometry { width: min(74%, 480px); }
  .blueprint-radar, .blueprint-orbit { width: 440px; height: 440px; }

  .feature-grid, .guide-grid, .case-grid, .download-grid, .contact-grid { gap: 24px; }
  .feature-card { min-height: 320px; padding: 34px; }
  .guide-step { min-height: 320px; padding: 34px; }
  .tutorial-video-grid, .tutorial-text-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .tutorial-toolbar { padding: 14px; }
  .tutorial-filters button { min-height: 44px; padding-inline: 16px; font-size: 13px; }
  .tutorial-search { width: 320px; }

  .footer-inner { min-height: 104px; padding: 22px 30px; }
  .footer-inner p { font-size: 14px; }
}

/* Site-wide text clarity pass for Windows and high-resolution displays. */
body {
  color: #435e78;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

.quick-card,
.home-flow-step,
.feature-card,
.case-card,
.download-card,
.plugin-slot,
.contact-panel,
.story-copy-panel,
.story-text-card,
.event-card,
.release-card,
.tutorial-video-card {
  will-change: auto;
}

.hero-copy > p,
.page-hero p,
.section-heading p,
.home-links-head p,
.quick-card p,
.home-flow-step p,
.feature-card p,
.history-intro p,
.timeline-item p,
.event-copy p,
.release-copy p,
.story-copy-panel p,
.story-section-head p,
.story-text-card p,
.story-record p,
.case-copy p,
.download-card p,
.note-card,
.guide-step p,
.tutorial-install-copy span,
.tutorial-results-meta,
.video-card-description,
.video-card-series,
.accordion-panel p,
.contact-panel p,
.qr-panel-copy p,
.footer-inner p,
.tutorial-text-card-copy > span,
.tutorial-text-modal-copy p {
  color: #435f79;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0;
  text-shadow: none;
}

.feature-card:first-child p,
.download-card.primary p,
.contact-panel.blue p,
.story-detail-hero p,
.story-detail-cta p {
  color: rgba(255, 255, 255, .86);
}

.brand-copy small,
.hero-chips span,
.hero-mini-stats span,
.float-info small,
.home-links-head small,
.section-heading small,
.home-flow-step small,
.history-stamp-label,
.history-tags span,
.timeline-item small,
.timeline-tags span,
.event-copy small,
.event-link,
.release-status,
.release-tags span,
.story-back,
.story-hero-tags span,
.story-copy-panel small,
.story-facts span,
.story-section-head small,
.story-text-card small,
.story-record small,
.case-stage,
.case-label,
.case-image-tags span,
.case-copy small,
.case-result,
.case-niche-stage,
.case-niche-tags span,
.case-profile-stage,
.case-profile-tags span,
.case-cross-stage,
.case-cross-tags span,
.case-follow-up small,
.version-top,
.guide-hero-stats span,
.video-card-head > b,
.video-card-signal,
.video-card-meta small,
.video-card-meta b,
.video-modal-head small,
.video-modal-foot,
.contact-person-copy small,
.qr-panel-status,
.tutorial-text-card-copy > small,
.tutorial-text-modal-head small {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0;
}

.home-flow-link {
  color: #4d687f;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.home-flow-link a { font-size: 13px; font-weight: 800; }
.video-card-description { min-height: 72px; }
.video-card-series { font-size: 12px; }
.tutorial-empty span { color: #526b83; font-size: 14px; font-weight: 500; }
.story-detail-cta p { font-size: 14px; font-weight: 500; line-height: 1.75; letter-spacing: 0; }

@media (min-width: 1600px) {
  .hero-copy > p,
  .page-hero p,
  .section-heading p,
  .home-links-head p,
  .quick-card p,
  .home-flow-step p,
  .feature-card p,
  .history-intro p,
  .timeline-item p,
  .event-copy p,
  .release-copy p,
  .story-copy-panel p,
  .story-section-head p,
  .story-text-card p,
  .story-record p,
  .case-copy p,
  .download-card p,
  .note-card,
  .guide-step p,
  .contact-panel p,
  .qr-panel-copy p,
  .footer-inner p {
    font-size: 15px;
  }

  .brand-copy small,
  .hero-mini-stats span,
  .home-links-head small,
  .section-heading small,
  .home-flow-step small,
  .timeline-item small,
  .event-copy small,
  .story-section-head small,
  .case-copy small,
  .guide-hero-stats span {
    font-size: 12px;
  }
}

/* Cross-page detail polish and a permanently closed blueprint outline. */
.geometry-line {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
.geometry-flow {
  stroke-dasharray: 10 18;
  stroke-linecap: round;
  animation-duration: 5.2s;
  animation-timing-function: linear;
}

.page-hero h1 { color: #0b2747; font-weight: 900; }
.page-hero .badge { font-size: 14px; letter-spacing: 0; }
.page-hero p { color: #3f5a74; font-weight: 500; }
.section-heading { align-items: center; }
.section-heading::before { box-shadow: 0 0 14px rgba(var(--page-rgb), .18); }
.section-heading p { max-width: 620px; }

.history-chapter-nav a { color: #425f79; font-size: 14px; letter-spacing: 0; }
.history-chapter-nav a span { font-size: 11px; letter-spacing: 0; }
.timeline-tags span { font-size: 11px; letter-spacing: 0; }

.feature-card:not(:first-child),
.guide-step,
.download-card:not(.primary),
.timeline-item,
.tutorial-video-card,
.tutorial-text-card,
.contact-panel:not(.blue) {
  border-color: #cbddeb;
  box-shadow: 0 14px 34px rgba(24, 72, 115, .075), inset 0 1px 0 rgba(255, 255, 255, .92);
}
.feature-card h2,
.guide-step h2,
.timeline-item h3,
.case-copy h2,
.video-card-body > strong,
.tutorial-text-card-copy > strong {
  color: #102f4f;
}

.tutorial-filters button { color: #4d687f; font-size: 14px; letter-spacing: 0; }
.tutorial-search input { color: #173b5c; font-size: 14px; font-weight: 500; }
.tutorial-results-meta { color: #526b83; font-size: 13px; }
.video-card-series { color: #617990; font-size: 13px; }
.tutorial-text-card-copy > strong { font-size: 19px; }
.tutorial-text-card-copy > b { font-size: 12px; letter-spacing: 0; }
.tutorial-mode-nav small { color: #587189; font-size: 11px; }
.tutorial-mode-nav strong { color: #294d6f; font-size: 15px; }
.contact-person-copy small,
.qr-panel-status { font-size: 12px; }

@media (min-width: 1600px) {
  .feature-card { min-height: 290px; padding: 32px; }
  .guide-step { min-height: 285px; padding: 32px; }
  .download-card { min-height: 460px; }
  .timeline-item { padding: 32px 38px; }
}

@media (max-width: 900px) {
  .section-heading { align-items: flex-start; }
  .history-chapter-nav a { font-size: 13px; }
  .tutorial-mode-nav strong { font-size: 13px; }
}

/* Stronger wide-screen typography for full-window viewing. */
@media (min-width: 1600px) {
  .brand-copy strong { font-size: 25px; }
  .brand-copy small { font-size: 13px; }
  .main-nav a { padding-inline: 17px; font-size: 17px; }

  .home-hero h1 { font-size: 76px; }
  .hero-copy > p { font-size: 17px; font-weight: 500; }
  .hero-chips span { font-size: 14px; }
  .hero-mini-stats strong { font-size: 20px; }
  .hero-mini-stats span { font-size: 13px; }
  .button { font-size: 16px; }

  .page-hero .badge { font-size: 15px; }
  .page-hero h1 { font-size: 72px; }
  .page-hero p { font-size: 17px; }
  .section-heading small,
  .home-links-head small { font-size: 13px; }
  .section-heading h2 { font-size: 52px; }

  .section-heading p,
  .home-links-head p,
  .quick-card p,
  .home-flow-step p,
  .feature-card p,
  .history-intro p,
  .timeline-item p,
  .event-copy p,
  .release-copy p,
  .story-copy-panel p,
  .story-section-head p,
  .story-text-card p,
  .story-record p,
  .case-copy p,
  .download-card p,
  .note-card,
  .guide-step p,
  .tutorial-install-copy span,
  .contact-panel p,
  .qr-panel-copy p,
  .footer-inner p {
    font-size: 16px;
  }

  .quick-card h2,
  .feature-card h2,
  .guide-step h2 { font-size: 24px; }
  .quick-card > span,
  .home-flow-link,
  .home-flow-link a { font-size: 14px; }
  .home-flow-step small,
  .timeline-item small,
  .event-copy small,
  .case-copy small,
  .version-top,
  .guide-hero-stats span { font-size: 13px; }
  .history-chapter-nav a { font-size: 15px; }
  .timeline-item h3 { font-size: 25px; }
  .timeline-tags span,
  .case-result { font-size: 12px; }

  .tutorial-filters button,
  .tutorial-search input { font-size: 15px; }
  .tutorial-results-meta { font-size: 14px; }
  .video-card-body > strong { font-size: 20px; }
  .video-card-description,
  .tutorial-text-card-copy > span { font-size: 15px; }
  .video-card-series { font-size: 14px; }
  .tutorial-text-card-copy > strong { font-size: 21px; }
  .tutorial-text-card-copy > small,
  .tutorial-text-card-copy > b,
  .video-card-meta small { font-size: 13px; }
  .tutorial-mode-nav small { font-size: 12px; }
  .tutorial-mode-nav strong { font-size: 16px; }

  .contact-person-copy small,
  .qr-panel-status { font-size: 13px; }
  .contact-person-copy strong { font-size: 21px; }

  .release-card p,
  .plugin-slot p,
  .accordion-panel p,
  .story-detail-cta p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0;
  }
  .release-card h3,
  .plugin-slot h3 { font-size: 24px; }
  .accordion-item button { font-size: 17px; }
}

/* Final interaction and layout consistency pass. */
html { scrollbar-gutter: stable; }
body { min-width: 320px; }
.container > * { min-width: 0; }
a, button, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(8, 127, 230, .34);
  outline-offset: 4px;
}

.section-heading h2,
.feature-card h2,
.guide-step h2,
.timeline-item h3,
.case-copy h2,
.download-card h2,
.contact-panel h2 {
  font-weight: 900;
  text-wrap: balance;
}
.section-heading p,
.quick-card p,
.home-flow-step p,
.feature-card p,
.timeline-item p,
.case-copy p,
.download-card p,
.guide-step p,
.contact-panel p,
.tutorial-text-card-copy > span,
.video-card-description {
  text-wrap: pretty;
}

.floating-tools a { position: relative; }
.floating-tools a::before {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  z-index: 2;
  width: max-content;
  max-width: 150px;
  padding: 7px 10px;
  color: #234661;
  background: rgba(255, 255, 255, .96);
  border: 1px solid #cfe1ee;
  border-radius: 8px;
  box-shadow: 0 9px 22px rgba(25, 72, 114, .14);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(5px, -50%);
  transition: opacity .2s ease, transform .25s var(--ease);
}
.floating-tools a:hover::before,
.floating-tools a:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}

.tutorial-toolbar {
  border-color: #bfd9eb;
  box-shadow: 0 14px 32px rgba(24, 72, 115, .085), 0 1px 0 rgba(255, 255, 255, .95) inset;
}
.tutorial-filters button { min-width: 84px; }
.tutorial-filters button.is-active {
  box-shadow: 0 8px 20px rgba(8, 127, 230, .2), 0 0 0 3px rgba(8, 127, 230, .08);
}
.tutorial-search input::placeholder { color: #74899d; }
.tutorial-text-entry,
.tutorial-install-card,
.home-flow-link {
  border-color: #c2dced;
  box-shadow: 0 14px 32px rgba(24, 72, 115, .075), 0 1px 0 rgba(255, 255, 255, .95) inset;
}

@media (max-width: 620px) {
  .floating-tools a::before { display: none; }
  .tutorial-filters button { min-width: 0; }
}

/* Classic case entry and expandable case library for the tutorial pages. */
.tutorial-case-entry {
  background: linear-gradient(105deg, #fff 0%, #fffaf7 58%, #fff3ee 100%);
  border-color: #efd4c8;
}
.tutorial-case-entry::before {
  background: linear-gradient(180deg, var(--red), #f29c62, var(--blue));
}
.tutorial-case-entry .tutorial-text-entry-icon {
  color: #c55648;
  background: #fff0eb;
  border-color: #f1c7bb;
}
.tutorial-case-entry > b {
  color: #b84b40;
  border-color: #efc6ba;
}
.tutorial-case-entry:hover {
  border-color: #e2a99a;
  box-shadow: 0 17px 35px rgba(160, 79, 57, .13), inset 0 1px 0 #fff;
}
.tutorial-classic-cases {
  margin-top: 66px;
  padding-top: 58px;
  border-top: 1px solid #d9e8f2;
  scroll-margin-top: 104px;
}
.tutorial-classic-heading {
  margin-bottom: 24px;
}
.tutorial-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tutorial-case-card {
  --classic-rgb: 8, 127, 230;
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(var(--classic-rgb), .2);
  border-radius: 14px;
  box-shadow: 0 13px 31px rgba(25, 72, 114, .07);
  transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.tutorial-case-card:nth-child(2) { --classic-rgb: 13, 153, 180; }
.tutorial-case-card:nth-child(3) { --classic-rgb: 221, 88, 101; }
.tutorial-case-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: -44%;
  top: 0;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--classic-rgb), .9), transparent);
  animation: classicCaseScan 6.5s linear infinite;
}
.tutorial-case-card:hover {
  border-color: rgba(var(--classic-rgb), .48);
  box-shadow: 0 21px 42px rgba(25, 72, 114, .13);
  transform: translateY(-4px);
}
.tutorial-case-visual {
  position: relative;
  height: auto;
  aspect-ratio: 21 / 10;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(rgba(var(--classic-rgb), .08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--classic-rgb), .08) 1px, transparent 1px), linear-gradient(145deg, #f8fbfe, #edf6fb);
  background-size: 22px 22px, 22px 22px, 100% 100%;
}
.tutorial-case-visual::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(var(--classic-rgb), .2);
  border-radius: 50%;
  box-shadow: 0 0 0 25px rgba(var(--classic-rgb), .035), 0 0 0 50px rgba(var(--classic-rgb), .025);
}
.tutorial-case-visual svg {
  position: relative;
  z-index: 2;
  width: 74%;
  height: 74%;
  fill: none;
  stroke: rgb(var(--classic-rgb));
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 8px rgba(var(--classic-rgb), .13));
}
.tutorial-case-visual.has-cover {
  background: #edf4f8;
}
.tutorial-case-visual.has-cover::before,
.tutorial-case-visual.has-cover i {
  display: none;
}
.tutorial-case-visual.has-cover img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.tutorial-case-visual i {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  right: 20%;
  top: 21%;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgb(var(--classic-rgb));
  box-shadow: 0 0 0 5px rgba(var(--classic-rgb), .1), 0 0 15px rgba(var(--classic-rgb), .45);
  animation: classicCaseNode 2.8s ease-in-out infinite;
}
.tutorial-case-copy {
  min-height: 174px;
  padding: 17px 19px 16px;
  display: flex;
  flex-direction: column;
}
.tutorial-case-copy small {
  color: rgb(var(--classic-rgb));
  font-size: 12px;
  font-weight: 900;
}
.tutorial-case-copy strong {
  margin-top: 7px;
  color: #102f4f;
  font-size: 20px;
  line-height: 1.35;
}
.tutorial-case-copy span {
  margin-top: 8px;
  color: #526b83;
  font-size: 14px;
  line-height: 1.7;
}
.tutorial-case-copy b {
  margin-top: auto;
  padding-top: 13px;
  color: rgb(var(--classic-rgb));
  font-size: 12px;
  font-weight: 900;
}
.tutorial-case-copy b i {
  font-style: normal;
  transition: transform .25s var(--ease);
}
.tutorial-case-copy .tutorial-case-play-count {
  width: max-content;
  margin-top: 11px;
  padding: 5px 8px;
  color: #356c92;
  background: #edf6fb;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;
}
.tutorial-case-card:hover .tutorial-case-copy b i {
  display: inline-block;
  transform: translateX(3px);
}
.tutorial-toolbar-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #294d6f;
  white-space: nowrap;
}
.tutorial-toolbar-title strong { font-size: 14px; font-weight: 900; }
.tutorial-toolbar-title > span:last-child { color: #71869a; font-size: 12px; font-weight: 600; }
.tutorial-toolbar-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(8, 127, 230, .1); }
.tutorial-case-actions {
  margin-top: auto !important;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: inherit !important;
  font-size: inherit !important;
}
.tutorial-case-action {
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--classic-rgb));
  background: rgba(var(--classic-rgb), .075);
  border: 1px solid rgba(var(--classic-rgb), .2);
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.tutorial-case-action:hover {
  color: #fff;
  background: rgb(var(--classic-rgb));
  border-color: rgb(var(--classic-rgb));
  transform: translateY(-2px);
}
.tutorial-case-action:disabled {
  color: #8294a6;
  background: #f1f5f8;
  border-color: #dbe5ed;
  cursor: not-allowed;
  opacity: .82;
  transform: none;
}
.tutorial-video-card:disabled {
  cursor: not-allowed;
  opacity: .8;
}
.tutorial-video-card:disabled:hover {
  border-color: var(--line);
  box-shadow: 0 14px 36px rgba(25, 72, 114, .075);
  transform: none;
}
@keyframes classicCaseScan {
  0%, 10% { left: -44%; opacity: 0; }
  24%, 74% { opacity: 1; }
  90%, 100% { left: 118%; opacity: 0; }
}
@keyframes classicCaseNode {
  0%, 100% { opacity: .55; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.16); }
}

@media (max-width: 900px) {
  .tutorial-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tutorial-case-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .tutorial-classic-cases { margin-top: 50px; padding-top: 44px; }
  .tutorial-case-grid { grid-template-columns: 1fr; gap: 14px; }
  .tutorial-case-card:last-child { grid-column: auto; }
  .tutorial-case-visual { height: auto; }
  .tutorial-case-copy { min-height: 0; }
  .tutorial-case-action { flex: 1 1 120px; min-height: 40px; }
}

/* Typography clarity pass: keep supporting text readable on Windows displays. */
body {
  font-size: 16px;
}

.hero-copy > p,
.page-hero p,
.section-heading p,
.home-links-head p,
.quick-card p,
.home-flow-step p,
.feature-card p,
.history-intro p,
.timeline-item p,
.event-copy p,
.release-card p,
.story-copy-panel p,
.story-section-head p,
.story-text-card p,
.story-record p,
.case-copy p,
.download-card p,
.plugin-slot p,
.note-card,
.guide-step p,
.tutorial-install-copy span,
.tutorial-text-entry-copy span,
.tutorial-results-meta,
.video-card-description,
.video-card-series,
.accordion-panel p,
.contact-panel p,
.qr-panel-copy p,
.footer-inner p,
.tutorial-text-card-copy > span,
.tutorial-text-modal-copy p {
  color: #38546f;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.78;
}

.brand-copy small,
.hero-chips span,
.hero-mini-stats span,
.float-info small,
.home-links-head small,
.section-heading small,
.home-flow-step small,
.history-stamp-label,
.history-tags span,
.timeline-item small,
.timeline-tags span,
.event-copy small,
.event-link,
.release-card small,
.release-status,
.release-tags span,
.story-back,
.story-hero-tags span,
.story-copy-panel small,
.story-facts span,
.story-section-head small,
.story-text-card small,
.story-record small,
.case-stage,
.case-label,
.case-image-tags span,
.case-copy small,
.case-result,
.case-niche-stage,
.case-niche-tags span,
.case-profile-stage,
.case-profile-tags span,
.case-cross-stage,
.case-cross-tags span,
.case-follow-up small,
.version-top,
.guide-hero-stats span,
.tutorial-install-copy small,
.video-card-head > b,
.video-card-signal,
.video-card-meta small,
.video-card-meta b,
.video-modal-head small,
.video-modal-foot,
.contact-person-copy small,
.qr-panel-status,
.tutorial-text-entry-copy small,
.tutorial-text-entry > b,
.tutorial-text-card-placeholder small,
.tutorial-text-card-copy > small,
.tutorial-text-card-copy > b,
.tutorial-text-gallery figcaption,
.tutorial-text-gallery-placeholder span,
.tutorial-text-modal-head small,
.tutorial-mode-nav small {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0;
}

.main-nav a { font-size: 16px; }
.button { font-size: 16px; }
.badge,
.page-hero .badge { font-size: 15px; }
.history-chapter-nav a,
.tutorial-filters button,
.tutorial-search input { font-size: 15px; }
.tutorial-mode-nav strong { font-size: 16px; }

.quick-card h2,
.home-flow-step h3,
.feature-card h2,
.guide-step h2,
.timeline-item h3,
.event-copy h3,
.release-card h3,
.case-copy h2,
.plugin-slot h3,
.video-card-body > strong,
.tutorial-text-card-copy > strong {
  color: #0f2f4f;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.4;
}

.release-card { min-height: 272px; }
.release-card small { color: #52708b; }
.release-status { padding: 7px 10px; }
.release-tags span { padding: 5px 9px; }
.video-card-description { min-height: 82px; }
.tutorial-text-card-copy { min-height: 190px; }
.tutorial-text-entry-copy strong { font-size: 20px; }
.tutorial-text-modal-head strong { font-size: 21px; }
.tutorial-text-gallery-placeholder strong { font-size: 17px; }

@media (min-width: 1600px) {
  .main-nav a { font-size: 18px; }
  .button { font-size: 17px; }

  .hero-copy > p,
  .page-hero p,
  .section-heading p,
  .home-links-head p,
  .quick-card p,
  .home-flow-step p,
  .feature-card p,
  .history-intro p,
  .timeline-item p,
  .event-copy p,
  .release-card p,
  .story-copy-panel p,
  .story-section-head p,
  .story-text-card p,
  .story-record p,
  .case-copy p,
  .download-card p,
  .plugin-slot p,
  .note-card,
  .guide-step p,
  .tutorial-install-copy span,
  .tutorial-text-entry-copy span,
  .tutorial-results-meta,
  .video-card-description,
  .video-card-series,
  .accordion-panel p,
  .contact-panel p,
  .qr-panel-copy p,
  .footer-inner p,
  .tutorial-text-card-copy > span,
  .tutorial-text-modal-copy p {
    font-size: 17px;
  }

  .brand-copy small,
  .hero-chips span,
  .hero-mini-stats span,
  .home-links-head small,
  .section-heading small,
  .home-flow-step small,
  .history-stamp-label,
  .history-tags span,
  .timeline-item small,
  .timeline-tags span,
  .event-copy small,
  .event-link,
  .release-card small,
  .release-status,
  .release-tags span,
  .story-section-head small,
  .story-text-card small,
  .story-record small,
  .case-copy small,
  .case-result,
  .version-top,
  .guide-hero-stats span,
  .video-card-head > b,
  .video-card-signal,
  .video-card-meta small,
  .video-card-meta b,
  .contact-person-copy small,
  .qr-panel-status,
  .tutorial-text-card-copy > small,
  .tutorial-text-card-copy > b,
  .tutorial-mode-nav small {
    font-size: 14px;
  }

  .quick-card h2,
  .home-flow-step h3,
  .feature-card h2,
  .guide-step h2,
  .timeline-item h3,
  .event-copy h3,
  .release-card h3,
  .case-copy h2,
  .plugin-slot h3,
  .video-card-body > strong,
  .tutorial-text-card-copy > strong {
    font-size: 26px;
  }

  .release-card { min-height: 292px; padding: 34px; }
  .tutorial-mode-nav strong { font-size: 17px; }
  .tutorial-filters button,
  .tutorial-search input { font-size: 16px; }
}

@media (max-width: 620px) {
  .hero-copy > p,
  .page-hero p,
  .section-heading p,
  .home-links-head p,
  .quick-card p,
  .home-flow-step p,
  .feature-card p,
  .history-intro p,
  .timeline-item p,
  .event-copy p,
  .release-card p,
  .story-copy-panel p,
  .story-section-head p,
  .story-text-card p,
  .story-record p,
  .case-copy p,
  .download-card p,
  .plugin-slot p,
  .note-card,
  .guide-step p,
  .tutorial-install-copy span,
  .tutorial-text-entry-copy span,
  .tutorial-results-meta,
  .video-card-description,
  .video-card-series,
  .accordion-panel p,
  .contact-panel p,
  .qr-panel-copy p,
  .footer-inner p,
  .tutorial-text-card-copy > span,
  .tutorial-text-modal-copy p {
    font-size: 15px;
    line-height: 1.75;
  }

  .brand-copy small,
  .hero-mini-stats span,
  .home-links-head small,
  .section-heading small,
  .home-flow-step small,
  .timeline-item small,
  .timeline-tags span,
  .release-card small,
  .release-status,
  .release-tags span,
  .story-section-head small,
  .story-text-card small,
  .case-copy small,
  .case-result,
  .tutorial-install-copy small,
  .video-card-head > b,
  .video-card-signal,
  .video-card-meta small,
  .video-card-meta b,
  .tutorial-text-card-copy > small,
  .tutorial-text-card-copy > b,
  .tutorial-mode-nav small {
    font-size: 12px;
  }

  .quick-card h2,
  .home-flow-step h3,
  .feature-card h2,
  .guide-step h2,
  .timeline-item h3,
  .event-copy h3,
  .release-card h3,
  .case-copy h2,
  .plugin-slot h3,
  .video-card-body > strong,
  .tutorial-text-card-copy > strong {
    font-size: 21px;
  }

  .release-card { min-height: 0; }
  .tutorial-text-card-copy { min-height: 0; }
}

/* Catch unclassed labels in hero and CTA modules as well. */
main small:not(.badge) {
  font-size: 13px !important;
  line-height: 1.45;
}

@media (min-width: 1600px) {
  main small:not(.badge) { font-size: 14px !important; }
}

@media (max-width: 620px) {
  main small:not(.badge) { font-size: 12px !important; }
}

.story-detail-hero p,
.story-detail-cta p {
  color: rgba(255, 255, 255, .88);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.78;
}

@media (min-width: 1600px) {
  .story-detail-hero p,
  .story-detail-cta p { font-size: 17px; }
}

@media (max-width: 620px) {
  .story-detail-hero p,
  .story-detail-cta p { font-size: 15px; }
}

/* Double-section example dimensions based on the 400 x 400 reference part. */
.case-cross-flat-dimensions text {
  font-size: 11px;
}
.case-cross-flat-dimensions .case-cross-main-size {
  font-size: 14px;
}
.case-cross-flat-dimensions .case-cross-stock-size {
  fill: #d95865;
  font-size: 19px;
  font-weight: 900;
}

@media (min-width: 1600px) {
  .case-cross-flat-dimensions text { font-size: 12px; }
  .case-cross-flat-dimensions .case-cross-main-size { font-size: 15px; }
  .case-cross-flat-dimensions .case-cross-stock-size { font-size: 20px; }
}

@media (max-width: 620px) {
  .case-cross-flat-dimensions text { font-size: 15px; }
  .case-cross-flat-dimensions .case-cross-main-size { font-size: 18px; }
  .case-cross-flat-dimensions .case-cross-stock-size { font-size: 20px; }
}

/* Keep iOS Safari from inflating text independently of the responsive layout. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 620px) {
  .header-inner { gap: 12px; }
  .brand { min-width: 0; flex: 1 1 auto; gap: 10px; }
  .brand-copy { min-width: 0; }
  .brand-copy strong,
  .brand-copy small { white-space: nowrap; }
  .brand-copy strong { font-size: clamp(17px, 5.2vw, 20px); }
}

/* Touch devices have no hover state, so hover-only motion runs gently by default. */
@keyframes mobileIconBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: translate(-50%, -50%) scale(1.07); filter: drop-shadow(0 0 6px currentColor); }
}

@keyframes mobileButtonSheen {
  0%, 58% { transform: translateX(-130%); }
  84%, 100% { transform: translateX(130%); }
}

@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .hover-card .icon-tile::before {
    opacity: .3;
    animation-play-state: running;
  }
  .hover-card .icon-tile::after {
    animation-play-state: running;
  }
  .hover-card .icon-tile svg {
    animation: mobileIconBreathe 4.8s ease-in-out infinite;
  }
  .button::after {
    animation: mobileButtonSheen 6.2s ease-in-out infinite;
  }
  .floating-tools a:active {
    transform: translateY(-2px) scale(.97);
  }
}

/* Keep the blue installation banner readable after the site-wide text pass. */
.tutorial-install-copy small { color: rgba(255, 255, 255, .9); }
.tutorial-install-copy span { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px rgba(0, 39, 78, .16); }
.tutorial-install-card > b { color: #fff; text-shadow: 0 1px 2px rgba(0, 39, 78, .16); }

/* Keep the current and historical download cards on the same visual grid. */
.download-grid { align-items: stretch; }
.download-card { align-self: stretch; }
.download-card.primary { border: 1px solid transparent; }
.download-card-actions { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 12px; }
.download-card-actions .button { min-width: 0; margin-top: 0; padding-inline: 14px; white-space: nowrap; }
.download-card.primary .button-guide { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .38); box-shadow: 0 13px 30px rgba(0, 28, 62, .16); }
.download-card.primary .button-guide:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .65); box-shadow: 0 16px 34px rgba(0, 28, 62, .22); }
.tutorial-text-card { scroll-margin-top: 168px; }
.tutorial-text-card.is-deep-linked { border-color: #ff8056; box-shadow: 0 0 0 4px rgba(255, 128, 86, .14), 0 20px 44px rgba(25, 72, 114, .15); }
@media (max-width: 620px) {
  .download-card-actions { grid-template-columns: 1fr; }
}
.plugin-download-link{position:relative;z-index:1;min-height:46px;margin-top:auto;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#fff;background:linear-gradient(100deg,var(--blue),var(--blue-2));border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;box-shadow:0 12px 28px rgba(8,127,230,.18);transition:transform .25s var(--ease),box-shadow .25s ease}.plugin-download-link:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(8,127,230,.24)}.plugin-download-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Center the home quick-entry content within each card. */
.quick-card { align-items: center; text-align: center; }
.quick-card p { max-width: 260px; }

/* Add restrained brand-color depth to the homepage headline. */
.home-hero .hero-slogan b { width: max-content; max-width: 100%; }
.home-hero .hero-slogan b:first-child {
  color: #176cad;
  background: linear-gradient(102deg, #16395d 0%, #087fe6 54%, #1bc4c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-hero .hero-slogan b:last-child {
  color: #102848;
  background: linear-gradient(102deg, #102848 0%, #123e69 58%, #087fe6 82%, #eb3739 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Product customization */
body[data-page="custom"] { --page-accent: #176f9e; --page-accent-2: #e75049; --page-rgb: 23, 111, 158; }
.custom-page-hero .page-icon svg { width: 128px; height: 128px; }

.custom-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.custom-type-card {
  position: relative;
  min-height: 330px;
  padding: 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d5e5f1;
  border-top: 3px solid #087fe6;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(22, 68, 105, .07);
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.custom-type-card:nth-child(2) { border-top-color: #1aa9ab; }
.custom-type-card:nth-child(3) { border-top-color: #e75049; }
.custom-type-card:hover { transform: translateY(-5px); border-color: #a9cee7; box-shadow: 0 20px 42px rgba(22, 68, 105, .12); }
.custom-type-index { position: absolute; right: 23px; top: 22px; color: #9bb0c1; font: 800 12px/1 monospace; }
.custom-type-icon, .custom-module-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #087fe6;
  background: #eaf5fd;
  border: 1px solid #bfdaee;
  border-radius: 8px;
}
.custom-type-card:nth-child(2) .custom-type-icon { color: #118c91; background: #e8f8f7; border-color: #bce2df; }
.custom-type-card:nth-child(3) .custom-type-icon { color: #cf4642; background: #fff0ef; border-color: #f0c7c5; }
.custom-type-icon svg, .custom-module-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.custom-type-card h3 { margin: 28px 0 8px; color: #102f4f; font-size: 24px; line-height: 1.35; }
.custom-type-card p { margin: 0; color: #536b82; font-size: 15px; line-height: 1.8; }
.custom-type-tags, .custom-module-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.custom-type-tags { margin-top: 25px; }
.custom-type-tags span, .custom-module-tags span { padding: 5px 8px; color: #46667f; background: #f0f5f8; border-radius: 4px; font-size: 12px; font-weight: 700; }

.custom-module-layout { display: grid; grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr); gap: 38px; align-items: stretch; }
.custom-reference { min-width: 0; margin: 0; display: flex; flex-direction: column; overflow: hidden; background: #102f4f; border-radius: 8px; box-shadow: 0 18px 42px rgba(18, 55, 87, .15); }
.custom-reference img { width: 100%; aspect-ratio: 2.15 / 1; object-fit: cover; background: #fff; }
.custom-reference figcaption { flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: center; border-top: 3px solid #21a9c2; }
.custom-reference figcaption small { color: #64d1df; font-size: 12px; font-weight: 900; }
.custom-reference figcaption strong { margin-top: 11px; color: #fff; font-size: 26px; line-height: 1.45; }
.custom-reference figcaption span { margin-top: 9px; color: #bfd0de; font-size: 14px; line-height: 1.8; }
.custom-module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 25px; }
.custom-module-item { min-width: 0; min-height: 172px; padding: 20px 0; display: grid; grid-template-columns: 48px 1fr; gap: 14px; border-top: 1px solid #cbdde9; }
.custom-module-icon { width: 48px; height: 48px; }
.custom-module-icon svg { width: 24px; height: 24px; }
.custom-module-item h3 { margin: 1px 0 6px; color: #123554; font-size: 19px; line-height: 1.4; }
.custom-module-item p { margin: 0; color: #566f85; font-size: 14px; line-height: 1.72; }
.custom-module-tags { margin-top: 12px; }
.custom-module-tags span { padding: 3px 7px; font-size: 11px; }

.custom-process { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; border-top: 1px solid #c9dce9; }
.custom-process-step { position: relative; min-height: 245px; padding: 31px 25px 25px; border-right: 1px solid #d9e6ef; }
.custom-process-step:last-child { border-right: 0; }
.custom-process-step::before { content: ""; position: absolute; width: 8px; height: 8px; left: 25px; top: -5px; background: #087fe6; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #8dc4e8; }
.custom-process-step:nth-child(2)::before { background: #1aa9ab; }
.custom-process-step:nth-child(3)::before { background: #e75049; }
.custom-process-step:nth-child(4)::before { background: #7657dc; }
.custom-process-step > span { color: #7590a6; font: 800 12px/1 monospace; }
.custom-process-step h3 { margin: 43px 0 9px; color: #123554; font-size: 21px; }
.custom-process-step p { margin: 0; color: #587187; font-size: 14px; line-height: 1.75; }

.custom-fit-band { padding: 78px 0; color: #fff; background: #102f4f; border-top: 4px solid #1aa9ab; }
.custom-fit-layout { display: grid; grid-template-columns: 1.2fr 1fr .72fr; gap: 42px; align-items: start; }
.custom-fit-copy small, .custom-cta-inner small { color: #61d2df; font-size: 12px; font-weight: 900; }
.custom-fit-copy h2 { margin: 12px 0 12px; color: #fff; font-size: 38px; line-height: 1.3; }
.custom-fit-copy p { margin: 0; color: #bfd0de; font-size: 15px; line-height: 1.8; }
.custom-fit-list { display: grid; gap: 13px; padding-top: 7px; }
.custom-fit-list span { min-height: 45px; padding: 10px 0; display: flex; align-items: center; gap: 11px; color: #e4eef5; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14px; font-weight: 700; }
.custom-fit-list i { width: 8px; height: 8px; flex: 0 0 8px; background: #25c5c4; border-radius: 50%; box-shadow: 0 0 0 5px rgba(37,197,196,.12); }
.custom-evaluation { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.18); }
.custom-evaluation strong { display: block; margin-bottom: 18px; color: #fff; font-size: 18px; }
.custom-evaluation p { margin: 0; padding: 8px 0; color: #b9cad8; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 13px; }

.custom-cta-band { padding: 72px 0; color: #fff; background: #16466e; border-top: 1px solid rgba(255,255,255,.13); }
.custom-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.custom-cta-inner h2 { margin: 10px 0 8px; color: #fff; font-size: 36px; line-height: 1.3; }
.custom-cta-inner p { max-width: 670px; margin: 0; color: #c9d9e5; font-size: 15px; }
.custom-cta-actions { flex: 0 0 auto; display: flex; gap: 10px; }
.custom-call-button { color: #fff; background: transparent; border-color: rgba(255,255,255,.42); box-shadow: none; }
.custom-call-button:hover { border-color: #fff; box-shadow: 0 12px 28px rgba(4,24,41,.16); }
.custom-call-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1120px) and (min-width: 901px) {
  .main-nav { gap: 0; }
  .main-nav a { padding-inline: 6px; font-size: 14px; }
}
@media (max-width: 980px) {
  .custom-type-grid { grid-template-columns: 1fr; }
  .custom-type-card { min-height: 0; }
  .custom-module-layout { grid-template-columns: 1fr; }
  .custom-reference { display: grid; grid-template-columns: 1.05fr .95fr; }
  .custom-reference img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .custom-reference figcaption { border-top: 0; border-left: 3px solid #21a9c2; }
  .custom-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-process-step:nth-child(2) { border-right: 0; }
  .custom-process-step:nth-child(-n+2) { border-bottom: 1px solid #d9e6ef; }
  .custom-fit-layout { grid-template-columns: 1fr 1fr; }
  .custom-fit-copy { grid-column: 1 / -1; }
  .custom-cta-inner { align-items: flex-start; flex-direction: column; gap: 28px; }
}
@media (max-width: 900px) {
  .main-nav.is-open a:nth-child(8) { animation-delay: .28s; }
}
@media (max-width: 680px) {
  .custom-page-hero .page-icon { display: none; }
  .custom-type-card { padding: 23px 21px; }
  .custom-type-card h3 { font-size: 22px; }
  .custom-type-card p { font-size: 14px; }
  .custom-module-list { grid-template-columns: 1fr; }
  .custom-module-item { min-height: 0; padding: 19px 0; }
  .custom-reference { display: flex; }
  .custom-reference img { width: 100%; height: auto; aspect-ratio: 2.15 / 1; }
  .custom-reference figcaption { padding: 23px 21px; border-left: 0; border-top: 3px solid #21a9c2; }
  .custom-reference figcaption strong { font-size: 22px; }
  .custom-process { grid-template-columns: 1fr; }
  .custom-process-step { min-height: 0; padding: 26px 15px 28px 24px; border-right: 0; border-bottom: 1px solid #d9e6ef; }
  .custom-process-step:last-child { border-bottom: 0; }
  .custom-process-step::before { left: 24px; }
  .custom-process-step h3 { margin-top: 25px; }
  .custom-fit-band { padding: 60px 0; }
  .custom-fit-layout { grid-template-columns: 1fr; gap: 31px; }
  .custom-fit-copy { grid-column: auto; }
  .custom-fit-copy h2 { font-size: 30px; }
  .custom-evaluation { padding-left: 0; padding-top: 26px; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .custom-cta-band { padding: 58px 0; }
  .custom-cta-inner h2 { font-size: 29px; }
  .custom-cta-actions { width: 100%; flex-direction: column; }
  .custom-cta-actions .button { width: 100%; }
}

/* Product customization motion refinement */
.custom-page-hero .page-icon::before { animation: customHeroCore 5.8s ease-in-out infinite; }
.custom-page-hero .page-icon svg { overflow: visible; animation: customHeroIconDrift 6.4s ease-in-out infinite; }
.custom-hero-module { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.custom-hero-module-a { animation: customHeroDraw 1s .15s var(--motion-ease) forwards, customHeroModuleA 5.6s 1.2s ease-in-out infinite; }
.custom-hero-module-b { animation: customHeroDraw 1s .32s var(--motion-ease) forwards, customHeroModuleB 6.2s 1.4s ease-in-out infinite; }
.custom-hero-module-c { animation: customHeroDraw 1s .49s var(--motion-ease) forwards, customHeroModuleC 5.9s 1.55s ease-in-out infinite; }
.custom-hero-connector {
  stroke-dasharray: 7 6;
  stroke-dashoffset: 26;
  opacity: 0;
  animation: customHeroConnectorIn .7s .78s ease forwards, customHeroConnectorFlow 3.8s 1.45s linear infinite;
}
.custom-hero-detail { opacity: 0; animation: customHeroDetailIn .45s 1s ease forwards, customHeroDetailPulse 3.6s 1.45s ease-in-out infinite; }

.custom-type-card > * { position: relative; z-index: 1; }
.custom-type-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 34%;
  height: 3px;
  left: -42%;
  top: -1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #43c9d0, #087fe6, transparent);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(8, 127, 230, .28));
}
.custom-type-card:nth-child(2)::before { background: linear-gradient(90deg, transparent, #54d3c6, #118c91, transparent); }
.custom-type-card:nth-child(3)::before { background: linear-gradient(90deg, transparent, #ff8d78, #e75049, transparent); }
.custom-type-card::after {
  content: "";
  position: absolute;
  width: 116px;
  height: 116px;
  right: -62px;
  bottom: -62px;
  pointer-events: none;
  border: 1px solid rgba(8, 127, 230, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(8, 127, 230, .025), 0 0 0 40px rgba(8, 127, 230, .018);
  opacity: .7;
  transition: transform .55s var(--ease), opacity .35s ease;
}
.custom-type-card:hover::after { opacity: 1; transform: translate(-7px, -7px) scale(1.08); }
.custom-type-card.is-visible::before { animation: customTypeRail 5.6s .8s var(--motion-ease) infinite; }
.js .custom-type-card .custom-type-tags span { opacity: 0; transform: translateY(7px); }
.js .custom-type-card.is-visible .custom-type-tags span { animation: customTagIn .45s var(--motion-ease) forwards; }
.js .custom-type-card.is-visible .custom-type-tags span:nth-child(1) { animation-delay: .28s; }
.js .custom-type-card.is-visible .custom-type-tags span:nth-child(2) { animation-delay: .38s; }
.js .custom-type-card.is-visible .custom-type-tags span:nth-child(3) { animation-delay: .48s; }

.custom-reference { position: relative; isolation: isolate; }
.custom-reference::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 2px;
  left: 0;
  top: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, rgba(86, 225, 230, .92), transparent 96%);
  box-shadow: 0 0 13px rgba(86, 225, 230, .52);
  opacity: 0;
  animation: customReferenceScan 7.2s 1.1s ease-in-out infinite;
}
.custom-reference img { transform-origin: center; animation: customReferenceBreathe 9s ease-in-out infinite; }
.custom-reference figcaption { position: relative; z-index: 2; }
.custom-reference figcaption::before {
  content: "";
  position: absolute;
  width: 46px;
  height: 3px;
  left: 30px;
  top: 0;
  background: linear-gradient(90deg, #28c6cd, #087fe6);
  animation: customCaptionSignal 4.8s ease-in-out infinite;
}

.custom-module-item { position: relative; overflow: hidden; transition: transform .3s var(--ease), background-color .3s ease; }
.custom-module-item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, #22bfc4, #087fe6 55%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .75s var(--motion-ease);
}
.custom-module-item.is-visible::before { transform: scaleX(1); }
.custom-module-item:nth-child(2)::before { transition-delay: .08s; }
.custom-module-item:nth-child(3)::before { transition-delay: .14s; }
.custom-module-item:nth-child(4)::before { transition-delay: .2s; }
.custom-module-item:nth-child(5)::before { transition-delay: .26s; }
.custom-module-item:nth-child(6)::before { transition-delay: .32s; }
.custom-module-item > * { position: relative; z-index: 1; }
.custom-module-item:hover { background: rgba(255,255,255,.5); transform: translateX(5px); }
.custom-module-icon { position: relative; overflow: visible; transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .35s var(--ease); }
.custom-module-icon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  right: -4px;
  top: -4px;
  background: #1bc4c8;
  border: 2px solid #f4f8fd;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(27,196,200,.1);
  animation: customModuleSignal 3.6s ease-in-out infinite;
}
.custom-module-item:nth-child(2n) .custom-module-icon::after { animation-delay: -1.8s; }
.custom-module-item:hover .custom-module-icon { color: #fff; background: #087fe6; border-color: #087fe6; transform: translateY(-3px) rotate(-2deg); }

.custom-process { position: relative; overflow: hidden; }
.custom-process::after {
  content: "";
  position: absolute;
  width: 20%;
  height: 2px;
  left: 0;
  top: -1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #25c5c4, #087fe6, transparent);
  box-shadow: 0 0 10px rgba(8,127,230,.34);
  transform: translateX(-110%);
  animation: customProcessRunner 7.6s 1.1s var(--motion-ease) infinite;
}
.custom-process-step::before { animation: customProcessNode 3.8s ease-in-out infinite; }
.custom-process-step:nth-child(2)::before { animation-delay: -.95s; }
.custom-process-step:nth-child(3)::before { animation-delay: -1.9s; }
.custom-process-step:nth-child(4)::before { animation-delay: -2.85s; }
.custom-process-step > span { transition: color .3s ease, transform .3s var(--ease); }
.custom-process-step:hover > span { color: #087fe6; transform: translateY(-2px); }

.custom-fit-band, .custom-cta-band { position: relative; overflow: hidden; isolation: isolate; }
.custom-fit-band::before, .custom-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  background-image: linear-gradient(rgba(118, 208, 222, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(118, 208, 222, .15) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: customBandGrid 13s linear infinite;
}
.custom-fit-band::after {
  content: "";
  position: absolute;
  width: 15%;
  height: 190%;
  left: -24%;
  top: -45%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(87, 216, 224, .14), transparent);
  transform: skewX(-14deg);
  animation: customBandSweep 10s 1.5s ease-in-out infinite;
}
.custom-fit-layout, .custom-cta-inner { position: relative; z-index: 1; }
.custom-fit-list i { animation: customFitDot 3.4s ease-in-out infinite; }
.custom-fit-list span:nth-child(2) i { animation-delay: -.85s; }
.custom-fit-list span:nth-child(3) i { animation-delay: -1.7s; }
.custom-fit-list span:nth-child(4) i { animation-delay: -2.55s; }
.custom-cta-actions .button-primary { animation: customCtaPulse 4.4s ease-in-out infinite; }

@keyframes customHeroCore {
  0%, 100% { box-shadow: 0 24px 58px rgba(var(--page-rgb),.18), 0 0 0 9px rgba(255,255,255,.44), inset 0 1px 0 #fff; }
  50% { box-shadow: 0 27px 64px rgba(var(--page-rgb),.23), 0 0 0 12px rgba(255,255,255,.36), 0 0 28px rgba(var(--page-rgb),.11), inset 0 1px 0 #fff; }
}
@keyframes customHeroIconDrift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(.6deg); } }
@keyframes customHeroDraw { from { stroke-dashoffset: 100; opacity: .15; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes customHeroModuleA { 0%, 100% { transform: translate(0); } 50% { transform: translate(1px, -1px); } }
@keyframes customHeroModuleB { 0%, 100% { transform: translate(0); } 50% { transform: translate(-1px, 1px); } }
@keyframes customHeroModuleC { 0%, 100% { transform: translate(0); } 50% { transform: translate(0, -1.5px); } }
@keyframes customHeroConnectorIn { from { opacity: 0; } to { opacity: .9; } }
@keyframes customHeroConnectorFlow { to { stroke-dashoffset: -26; } }
@keyframes customHeroDetailIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes customHeroDetailPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; filter: drop-shadow(0 0 4px currentColor); } }
@keyframes customTypeRail { 0%, 12% { left: -42%; opacity: 0; } 22%, 72% { opacity: 1; } 86%, 100% { left: 112%; opacity: 0; } }
@keyframes customTagIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes customReferenceScan { 0%, 14% { top: 0; opacity: 0; } 24% { opacity: .85; } 58% { top: 45%; opacity: .68; } 70%, 100% { top: 45%; opacity: 0; } }
@keyframes customReferenceBreathe { 0%, 100% { transform: scale(1); filter: saturate(.92); } 50% { transform: scale(1.012); filter: saturate(1.06); } }
@keyframes customCaptionSignal { 0%, 100% { width: 46px; opacity: .65; } 50% { width: 88px; opacity: 1; } }
@keyframes customModuleSignal { 0%, 100% { opacity: .55; transform: scale(.82); box-shadow: 0 0 0 4px rgba(27,196,200,.08); } 50% { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 7px rgba(27,196,200,0), 0 0 9px rgba(27,196,200,.42); } }
@keyframes customProcessRunner { 0%, 9% { transform: translateX(-110%); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 92%, 100% { transform: translateX(510%); opacity: 0; } }
@keyframes customProcessNode {
  0%, 100% { box-shadow: 0 0 0 1px #8dc4e8, 0 0 0 0 rgba(8,127,230,.16); }
  50% { box-shadow: 0 0 0 1px #8dc4e8, 0 0 0 7px rgba(8,127,230,0), 0 0 12px rgba(8,127,230,.2); }
}
@keyframes customBandGrid { to { background-position: 42px 42px; } }
@keyframes customBandSweep { 0%, 15% { left: -24%; opacity: 0; } 27% { opacity: 1; } 68%, 100% { left: 115%; opacity: 0; } }
@keyframes customFitDot { 0%, 100% { transform: scale(.82); opacity: .65; } 50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 7px rgba(37,197,196,0), 0 0 10px rgba(37,197,196,.45); } }
@keyframes customCtaPulse {
  0%, 100% { box-shadow: 0 15px 35px rgba(235,55,57,.22); }
  50% { box-shadow: 0 18px 40px rgba(235,55,57,.35), 0 0 0 5px rgba(255,255,255,.04); }
}

@media (prefers-reduced-motion: no-preference) {
  .custom-type-card.is-visible .custom-type-icon { animation: customTypeIconIn .65s var(--motion-ease) both, customTypeIconBreathe 5.2s .85s ease-in-out infinite; }
  .custom-type-card:nth-child(2).is-visible .custom-type-icon { animation-delay: .08s, .93s; }
  .custom-type-card:nth-child(3).is-visible .custom-type-icon { animation-delay: .16s, 1.01s; }
}
@keyframes customTypeIconIn { from { opacity: .25; transform: translateY(7px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes customTypeIconBreathe { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-1deg); } }

@media (max-width: 680px) {
  .custom-type-card.is-visible::before { animation-duration: 7.2s; }
  .custom-reference::before { animation-duration: 8.6s; }
  .custom-process::after { display: none; }
  .custom-fit-band::after { animation-duration: 12s; }
}
@media (prefers-reduced-motion: reduce) {
  .custom-page-hero .page-icon::before,
  .custom-page-hero .page-icon svg,
  .custom-hero-module,
  .custom-hero-connector,
  .custom-hero-detail,
  .custom-type-card::before,
  .custom-type-card .custom-type-icon,
  .custom-type-card .custom-type-tags span,
  .custom-reference::before,
  .custom-reference img,
  .custom-reference figcaption::before,
  .custom-module-icon::after,
  .custom-process::after,
  .custom-process-step::before,
  .custom-fit-band::before,
  .custom-fit-band::after,
  .custom-cta-band::before,
  .custom-fit-list i,
  .custom-cta-actions .button-primary { animation: none !important; }
  .custom-hero-module, .custom-hero-connector, .custom-hero-detail,
  .js .custom-type-card .custom-type-tags span { opacity: 1; transform: none; stroke-dashoffset: 0; }
}

/* Full-width rich text guide modal */
.tutorial-text-modal-dialog{width:min(100%,1120px);border-radius:8px}
.tutorial-text-modal-body{display:block;max-height:calc(100vh - 126px);overflow:auto;background:#fff}
.tutorial-text-modal-copy{padding:34px clamp(24px,5vw,64px) 42px;border:0;background:#fff}
.tutorial-text-modal-copy>small,.tutorial-text-modal-copy>h3,.tutorial-rich-text{width:min(100%,920px);margin-left:auto;margin-right:auto}
.tutorial-text-modal-copy>h3{margin-top:10px;margin-bottom:24px;padding-bottom:19px;border-bottom:1px solid #e0e9f0;font-size:28px;line-height:1.35}
.tutorial-rich-text{color:#38546f;font-size:16px;font-weight:500;line-height:1.9;overflow-wrap:anywhere}
.tutorial-rich-text p{margin:0 0 15px;color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}
.tutorial-rich-text h1,.tutorial-rich-text h2,.tutorial-rich-text h3,.tutorial-rich-text h4{margin:1.25em 0 .55em;color:#153653;line-height:1.4}
.tutorial-rich-text h1{font-size:27px}
.tutorial-rich-text h2{font-size:23px}
.tutorial-rich-text h3{padding:0;border:0;font-size:20px}
.tutorial-rich-text h4{font-size:18px}
.tutorial-rich-text strong,.tutorial-rich-text b{color:#173a57;font-weight:800}
.tutorial-rich-text ol,.tutorial-rich-text ul{margin:0 0 17px;padding-left:1.65em}
.tutorial-rich-text li{margin:6px 0;padding-left:3px}
.tutorial-rich-text blockquote{margin:18px 0;padding:12px 17px;border-left:4px solid #087fe6;background:#f2f8fc;color:#42617a}
.tutorial-rich-text a{color:#087fe6;text-decoration:underline;text-underline-offset:3px}
.tutorial-rich-text pre{overflow:auto;margin:16px 0;padding:15px 17px;border-radius:6px;background:#153247;color:#f5f9fc;font:14px/1.7 Consolas,monospace}
.tutorial-rich-text hr{margin:24px 0;border:0;border-top:1px solid #c8d7e1}
.tutorial-rich-text .ql-align-center{text-align:center}
.tutorial-rich-text .ql-align-right{text-align:right}
.tutorial-rich-text .ql-align-justify{text-align:justify}
.tutorial-rich-text .ql-direction-rtl{direction:rtl}
.tutorial-rich-text .ql-indent-1{margin-left:2.5em}
.tutorial-rich-text .ql-indent-2{margin-left:5em}
.tutorial-rich-text .ql-indent-3{margin-left:7.5em}
.tutorial-rich-text .ql-indent-4{margin-left:10em}
.tutorial-rich-text .ql-indent-5{margin-left:12.5em}
.tutorial-rich-text .ql-indent-6{margin-left:15em}
.tutorial-rich-text .ql-indent-7{margin-left:17.5em}
.tutorial-rich-text .ql-indent-8{margin-left:20em}
.tutorial-rich-text .ql-line-height-1{line-height:1}.tutorial-rich-text .ql-line-height-1-5{line-height:1.5}.tutorial-rich-text .ql-line-height-1-75{line-height:1.75}.tutorial-rich-text .ql-line-height-2{line-height:2}.tutorial-rich-text .ql-line-height-2-5{line-height:2.5}.tutorial-rich-text .ql-line-height-3{line-height:3}
.tutorial-rich-text .ql-spacing-before-0{margin-top:0}.tutorial-rich-text .ql-spacing-before-4{margin-top:4px}.tutorial-rich-text .ql-spacing-before-8{margin-top:8px}.tutorial-rich-text .ql-spacing-before-12{margin-top:12px}.tutorial-rich-text .ql-spacing-before-16{margin-top:16px}.tutorial-rich-text .ql-spacing-before-24{margin-top:24px}
.tutorial-rich-text .ql-spacing-after-0{margin-bottom:0}.tutorial-rich-text .ql-spacing-after-4{margin-bottom:4px}.tutorial-rich-text .ql-spacing-after-8{margin-bottom:8px}.tutorial-rich-text .ql-spacing-after-12{margin-bottom:12px}.tutorial-rich-text .ql-spacing-after-16{margin-bottom:16px}.tutorial-rich-text .ql-spacing-after-24{margin-bottom:24px}
.tutorial-rich-text .ql-font-simsun{font-family:SimSun,"宋体",serif}
.tutorial-rich-text .ql-font-simhei{font-family:SimHei,"黑体",sans-serif}
.tutorial-rich-text .ql-font-kaiti{font-family:KaiTi,"楷体",serif}
.tutorial-rich-text .ql-font-fangsong{font-family:FangSong,"仿宋",serif}
.tutorial-rich-text .ql-font-arial{font-family:Arial,sans-serif}
.tutorial-rich-text .ql-font-times{font-family:"Times New Roman",serif}
.tutorial-rich-text .ql-size-12{font-size:12px}
.tutorial-rich-text .ql-size-14{font-size:14px}
.tutorial-rich-text .ql-size-16{font-size:16px}
.tutorial-rich-text .ql-size-18{font-size:18px}
.tutorial-rich-text .ql-size-20{font-size:20px}
.tutorial-rich-text .ql-size-24{font-size:24px}
.tutorial-rich-text .ql-size-28{font-size:28px}
.tutorial-rich-text .ql-size-32{font-size:32px}
.tutorial-rich-text .ql-color-black{color:#111827}.tutorial-rich-text .ql-color-red{color:#c92f35}.tutorial-rich-text .ql-color-orange{color:#c45f0a}.tutorial-rich-text .ql-color-green{color:#13795b}.tutorial-rich-text .ql-color-blue{color:#087fe6}.tutorial-rich-text .ql-color-purple{color:#7b3fc6}.tutorial-rich-text .ql-color-gray{color:#667785}
.tutorial-rich-text .ql-background-yellow{background-color:#fff176}.tutorial-rich-text .ql-background-lightyellow{background-color:#fff9c4}.tutorial-rich-text .ql-background-lightblue{background-color:#d9efff}.tutorial-rich-text .ql-background-lightgreen{background-color:#ddf5e7}.tutorial-rich-text .ql-background-pink{background-color:#ffe0ea}.tutorial-rich-text .ql-background-lightgray{background-color:#eef2f5}
.tutorial-text-gallery{min-height:0;padding:28px clamp(20px,4vw,48px) 38px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;border-top:1px solid #dce8f2;background:#f2f7fa}
.tutorial-text-gallery figure{border-radius:7px;box-shadow:0 7px 20px rgba(25,72,114,.07)}
.tutorial-text-gallery figure img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#fff}
.tutorial-text-gallery figcaption{padding:9px 11px;font-size:12px}
@media(max-width:620px){.tutorial-text-modal-dialog{border-radius:7px}.tutorial-text-modal-body{max-height:calc(100vh - 86px)}.tutorial-text-modal-copy{padding:25px 19px 30px}.tutorial-text-modal-copy>h3{margin-bottom:18px;padding-bottom:15px;font-size:22px}.tutorial-rich-text{font-size:15px;line-height:1.82}.tutorial-rich-text h1{font-size:23px}.tutorial-rich-text h2{font-size:20px}.tutorial-rich-text h3{font-size:18px}.tutorial-text-gallery{padding:18px 14px 24px;grid-template-columns:1fr}}