@import "tailwindcss";

:root {
  --ink: #0b1f3a;
  --muted: #526783;
  --blue: #155eef;
  --blue-dark: #0f4fd8;
  --violet: #7857ed;
  --line: #d9e5f5;
  --soft: #f5f8fe;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
main { overflow: hidden; }

.floating-entry {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  min-width: 174px;
  min-height: 64px;
  padding: 12px 20px 12px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.65);
  border-right: 0;
  border-radius: 18px 0 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: -8px 16px 38px rgba(21,94,239,.34), 0 4px 12px rgba(11,31,58,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.floating-entry:hover { transform: translate(-5px,-50%); box-shadow: -12px 20px 44px rgba(21,94,239,.4), 0 6px 14px rgba(11,31,58,.16); }
.floating-entry-c { right: 24px; top: auto; bottom: 24px; transform: none; border-right: 1px solid rgba(255,255,255,.65); border-radius: 18px; }
.floating-entry-c:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(21,94,239,.4), 0 6px 14px rgba(11,31,58,.16); }
.floating-entry:focus-visible { outline: 3px solid rgba(21,94,239,.3); outline-offset: 4px; }
.floating-entry-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--blue); background: #fff; font-size: 19px; font-weight: 850; }
.floating-entry-copy { display: grid; gap: 1px; line-height: 1.15; }
.floating-entry-copy strong { font-size: 15px; letter-spacing: .01em; }
.floating-entry-copy small { color: rgba(255,255,255,.78); font-size: 11px; }

.site-header { position: relative; z-index: 30; height: 78px; border-bottom: 1px solid rgba(217,229,245,.62); background: rgba(255,255,255,.9); backdrop-filter: blur(16px); }
.nav-wrap { width: min(1370px, calc(100% - 64px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 25px; font-weight: 800; letter-spacing: -.04em; }
.brand-image { display: block; width: 128px; height: auto; }
.brand-mark { position: relative; display: inline-block; width: 38px; height: 38px; transform: rotate(-30deg); }
.brand-mark i { position: absolute; width: 27px; height: 15px; border: 5px solid var(--blue); border-radius: 9px; }
.brand-mark i:first-child { left: 1px; top: 5px; }
.brand-mark i:last-child { right: 0; bottom: 4px; }
.desktop-nav { display: flex; align-items: center; gap: 52px; font-size: 15px; font-weight: 600; }
.desktop-nav a { position: relative; padding: 27px 0; }
.desktop-nav a::after { position: absolute; content: ""; height: 2px; left: 50%; right: 50%; bottom: 18px; background: var(--blue); transition: .2s ease; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { left: 0; right: 0; }
.login-button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--blue); color: var(--blue); border-radius: 8px; padding: 11px 17px; font-size: 14px; font-weight: 650; transition: .2s ease; }
.login-button:hover { background: #edf4ff; transform: translateY(-1px); }
.mobile-menu { display: none; position: relative; }

.hero { position: relative; width: min(1370px, calc(100% - 64px)); min-height: 765px; margin: auto; display: grid; grid-template-columns: 38% 62%; align-items: center; padding: 50px 0 76px; }
.hero-copy { position: relative; z-index: 3; padding-right: 32px; animation: rise .55s ease both; }
.tag-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.tag-row span { border: 1px solid rgba(21,94,239,.66); color: var(--blue); border-radius: 6px; padding: 7px 10px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.82); }
.eyebrow { margin: 0 0 12px; color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: .16em; }
.hero h1 { margin: 0; max-width: 560px; font-size: clamp(48px, 4.25vw, 68px); line-height: 1.1; letter-spacing: -.055em; font-weight: 850; white-space: normal; }
.hero h1 span { display: inline-block; margin-top: 8px; background: linear-gradient(90deg, var(--blue), var(--violet)); color: transparent; background-clip: text; -webkit-background-clip: text; }
.hero-lead { margin: 28px 0 0; max-width: 510px; color: var(--muted); font-size: 19px; line-height: 1.85; }
.hero-actions { display: flex; gap: 16px; margin-top: 34px; }
.primary-button, .secondary-button { min-height: 58px; padding: 0 28px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border-radius: 8px; font-size: 17px; font-weight: 700; transition: .2s ease; }
.primary-button { color: #fff; background: var(--blue); box-shadow: 0 12px 28px rgba(21,94,239,.24); }
.primary-button:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(21,94,239,.28); }
.secondary-button { color: var(--blue); border: 1px solid var(--blue); background: #fff; }
.secondary-button:hover { background: #eff5ff; transform: translateY(-2px); }
.trust-row { display: flex; gap: 20px; margin: 38px 0 0; padding: 0; list-style: none; color: #60738e; font-size: 13px; }
.trust-row li { display: flex; align-items: center; gap: 7px; }
.trust-row i { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: var(--blue); background: #edf4ff; font-style: normal; font-weight: 800; }
.hero-visual { position: relative; z-index: 2; animation: rise .65s .08s ease both; }
.hero-orbit { position: absolute; border: 1px solid rgba(21,94,239,.07); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 840px; height: 600px; right: -160px; top: 82px; transform: rotate(8deg); }
.orbit-two { width: 700px; height: 720px; right: -90px; top: 18px; transform: rotate(-18deg); }

/* B version: first-screen result showcase */
.hero-b { grid-template-columns: 40% 60%; }
.hero-b .hero-copy { padding-right: 48px; }
.hero-b .hero-lead { max-width: 540px; }
.result-showcase { position: relative; min-height: 610px; padding: 45px 30px 48px 72px; }
.result-showcase-glow { position: absolute; inset: 12% 6% 8% 12%; border-radius: 50%; background: radial-gradient(circle, rgba(94,129,255,.22), rgba(131,95,237,.08) 52%, transparent 72%); filter: blur(18px); }
.result-main-card { position: relative; z-index: 2; width: calc(100% - 34px); margin-left: auto; border: 1px solid rgba(199,215,242,.95); border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 30px 80px rgba(30,75,146,.19), 0 8px 24px rgba(25,65,130,.08); overflow: hidden; }
.result-card-head { height: 62px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e8eef8; background: rgba(255,255,255,.94); }
.result-head-brand { display: flex; align-items: center; gap: 11px; }
.result-head-brand span { padding: 7px 9px; border-radius: 8px; color: #fff; background: linear-gradient(135deg,var(--blue),var(--violet)); font-size: 11px; font-weight: 850; }
.result-head-brand b { font-size: 14px; }
.result-card-head > i { color: #8194af; font-size: 11px; font-style: normal; }
.result-image-wrap { position: relative; height: 392px; padding: 20px; background: linear-gradient(145deg,#f3f7ff,#fbfcff 52%,#f1edff); }
.result-image-wrap::before { position: absolute; content: ""; inset: 0; opacity: .5; background-image: linear-gradient(#dfe8f7 1px, transparent 1px), linear-gradient(90deg,#dfe8f7 1px,transparent 1px); background-size: 24px 24px; }
.result-image-wrap img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; border: 1px solid #dfe8f7; border-radius: 13px; object-fit: contain; background: #fff; box-shadow: 0 18px 38px rgba(32,75,140,.12); }
.result-ready { position: absolute; z-index: 3; right: 34px; top: 34px; padding: 9px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(137,213,178,.8); border-radius: 999px; color: #17613f; background: rgba(241,255,248,.94); backdrop-filter: blur(10px); font-size: 11px; font-weight: 750; box-shadow: 0 8px 20px rgba(42,115,82,.09); }
.result-ready i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #28a66d; font-style: normal; }
.result-card-foot { min-height: 84px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.result-card-foot > div:first-child { display: grid; gap: 5px; }
.result-card-foot > div:first-child span { color: #8a9bb2; font-size: 10px; }
.result-card-foot > div:first-child b { font-size: 13px; }
.result-capabilities { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.result-capabilities span { padding: 6px 8px; border-radius: 6px; color: #41628f; background: #edf4ff; font-size: 9px; font-weight: 700; }
.result-float { position: absolute; z-index: 4; min-width: 154px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(208,220,242,.94); border-radius: 14px; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); box-shadow: 0 16px 35px rgba(31,75,143,.16); animation: resultFloat 4.8s ease-in-out infinite; }
.result-float > span { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 9px; color: var(--blue); background: #edf4ff; font-size: 10px; font-weight: 850; }
.result-float > div { display: grid; gap: 3px; }.result-float b { font-size: 12px; }.result-float small { color: #7d8fa8; font-size: 10px; }
.result-float-one { left: 2px; top: 106px; }
.result-float-two { right: -16px; top: 230px; animation-delay: -1.6s; }
.result-float-three { left: 20px; bottom: 92px; animation-delay: -3.1s; }
.result-summary { position: absolute; z-index: 5; right: 24px; bottom: 8px; min-width: 260px; padding: 13px 16px; display: grid; gap: 4px; border-radius: 13px; color: #fff; background: linear-gradient(120deg,#0f50d7,#7857ed); box-shadow: 0 16px 32px rgba(21,94,239,.25); }
.result-summary b { font-size: 12px; }.result-summary span { color: rgba(255,255,255,.8); font-size: 10px; }
@keyframes resultFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.product-shot-shell { position: relative; width: 100%; height: 610px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 24px 70px rgba(27,79,155,.15); overflow: hidden; }
.product-shot-toolbar { height: 54px; padding: 0 18px; display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); color: #6e819a; font-size: 12px; }
.product-shot-toolbar > span { justify-self: center; padding: 7px 14px; border: 1px solid #e1e9f4; border-radius: 999px; background: #f8faff; }
.product-shot-toolbar > b { color: var(--blue); font-size: 12px; }
.window-dots { display: flex; gap: 7px; }
.window-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d3deec; }
.window-dots i:first-child { background: #8eb3fa; }.window-dots i:nth-child(2) { background: #b4c9ef; }
.product-shot-frame { position: relative; height: 430px; padding: 20px; background: linear-gradient(135deg,#f8fbff,#edf4ff); overflow: hidden; }
.product-shot-frame::after { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(217,229,245,.74); border-radius: 12px; pointer-events: none; box-shadow: inset 0 0 40px rgba(255,255,255,.25); }
.product-shot-frame img { width: 100%; height: 100%; display: block; border-radius: 12px; object-fit: cover; object-position: center 24%; box-shadow: 0 16px 35px rgba(33,75,132,.11); }
.product-shot-note { height: 126px; padding: 0 28px; display: flex; align-items: center; gap: 17px; border-top: 1px solid #edf2f8; background: #fff; }
.product-shot-note > span { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 12px; color: #fff; background: var(--blue); font-size: 12px; font-weight: 800; }
.product-shot-note div { display: grid; gap: 6px; }.product-shot-note b { font-size: 15px; }.product-shot-note small { color: #8192a9; }

.research-shell { position: relative; width: 100%; height: 610px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 24px 70px rgba(27,79,155,.15); overflow: hidden; }
.research-toolbar { height: 55px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 0 17px; color: #4d627f; font-size: 13px; }
.mini-brand { width: 29px; height: 29px; display: grid; place-items: center; color: #fff; border-radius: 8px; background: var(--blue); font-weight: 800; font-style: italic; }
.document-name { color: var(--ink); font-weight: 650; }
.toolbar-divider { width: 1px; height: 26px; margin-left: auto; background: var(--line); }
.toolbar-actions { display: flex; gap: 20px; font-size: 17px; }
.save-button { border: 0; border-radius: 6px; color: #fff; background: var(--blue); padding: 8px 18px; cursor: default; }
.research-body { display: grid; grid-template-columns: 52px 1fr; height: calc(100% - 55px); }
.tool-rail { display: flex; align-items: center; flex-direction: column; gap: 18px; padding-top: 16px; border-right: 1px solid var(--line); color: #526783; font-size: 17px; }
.tool-rail span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; }
.tool-rail .active { color: var(--blue); background: #edf4ff; }
.canvas-area { position: relative; overflow: hidden; background-color: #fcfdff; background-image: linear-gradient(#edf3fb 1px, transparent 1px), linear-gradient(90deg, #edf3fb 1px, transparent 1px); background-size: 24px 24px; }
.flow-node { position: absolute; z-index: 2; width: 184px; min-height: 65px; padding: 10px 12px; text-align: center; border: 1.5px solid var(--blue); border-radius: 8px; color: #1747a5; background: rgba(255,255,255,.96); box-shadow: 0 5px 12px rgba(21,94,239,.07); }
.flow-node strong, .flow-node small { display: block; }
.flow-node strong { font-size: 12px; }
.flow-node small { margin-top: 6px; padding: 4px; border: 1px solid #ccdcf8; border-radius: 4px; color: #5b6d87; font-size: 10px; }
.node-root { left: 38%; top: 22px; }
.node-left { left: 13%; top: 132px; }
.node-right { right: 17%; top: 132px; }
.node-center { left: 38%; top: 255px; }
.node-bottom-left { left: 13%; top: 398px; }
.node-bottom-right { right: 17%; top: 398px; }
.flow-node.purple { border-color: var(--violet); color: #6845ce; }
.flow-node.selected { outline: 1.5px dashed var(--blue); outline-offset: 6px; box-shadow: 0 0 0 8px rgba(21,94,239,.05); }
.handle { position: absolute; width: 7px; height: 7px; border: 1px solid #fff; border-radius: 50%; background: var(--blue); }
.handle.h1 { left: -10px; top: -10px; }.handle.h2 { right: -10px; top: -10px; }.handle.h3 { left: -10px; bottom: -10px; }.handle.h4 { right: -10px; bottom: -10px; }
.flow-line { position: absolute; z-index: 1; background: var(--blue); opacity: .9; }
.line-v-1 { width: 2px; height: 46px; left: calc(38% + 91px); top: 87px; }
.line-h-1 { height: 2px; width: 43%; left: 22%; top: 108px; }
.line-v-2 { width: 2px; height: 24px; left: calc(13% + 91px); top: 109px; }
.line-v-3 { width: 2px; height: 24px; right: calc(17% + 91px); top: 109px; }
.line-h-2 { height: 2px; width: 43%; left: 22%; top: 373px; }
.line-v-4 { width: 2px; height: 78px; left: calc(38% + 91px); top: 320px; }
.ai-panel { position: absolute; z-index: 4; right: 14px; top: 36px; width: 188px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.97); box-shadow: 0 14px 34px rgba(24,70,137,.16); }
.ai-title { color: var(--ink); font-size: 12px; font-weight: 750; }.ai-title span { color: var(--blue); }
.ai-panel p { margin: 8px 0 12px; color: #5c6e88; font-size: 10px; line-height: 1.6; }
.ai-panel button { width: 100%; padding: 8px; border: 0; border-radius: 5px; color: #fff; background: var(--blue); font-size: 10px; }
.zoom { position: absolute; right: 12px; bottom: 14px; display: grid; gap: 7px; place-items: center; width: 35px; padding: 8px 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #3f5574; box-shadow: 0 5px 16px rgba(31,71,126,.1); }.zoom small { font-size: 8px; }

.section { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 120px 0; }
.section-kicker { margin: 0 0 18px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.section h2 { margin: 0; font-size: clamp(36px, 3.2vw, 50px); line-height: 1.25; letter-spacing: -.04em; }
.section-heading { display: grid; grid-template-columns: 1.1fr .75fr; gap: 80px; align-items: end; }
.section-heading > p { margin: 0 0 6px; color: var(--muted); line-height: 1.9; font-size: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 62px; }
.feature-card { position: relative; min-height: 300px; padding: 32px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; transition: .25s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(30,75,137,.1); }
.feature-card > span { color: #aabbd1; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.feature-card h3 { margin: 66px 0 16px; font-size: 25px; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.8; }
.feature-card b { display: inline-block; margin-top: 24px; color: var(--blue); font-size: 14px; }
.feature-line { position: absolute; left: 32px; right: 32px; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--blue), transparent); transform: scaleX(0); transform-origin: left; transition: .3s ease; }.feature-card:hover .feature-line { transform: scaleX(1); }

.cases-section { width: 100%; max-width: none; padding-left: max(24px, calc((100% - 1240px)/2)); padding-right: max(24px, calc((100% - 1240px)/2)); background: var(--soft); }
.center-heading { text-align: center; }.center-heading > p:last-child { color: var(--muted); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
.case-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; transition: .25s ease; }.case-card:hover { transform: translateY(-5px); box-shadow: 0 20px 55px rgba(27,76,147,.12); }
.case-preview { position: relative; height: 230px; background: linear-gradient(135deg, #f9fbff, #edf4ff); overflow: hidden; }
.case-preview::before { content: ""; position: absolute; inset: 0; opacity: .65; background-image: linear-gradient(#e4ecf8 1px, transparent 1px), linear-gradient(90deg,#e4ecf8 1px,transparent 1px); background-size: 22px 22px; }
.real-case-preview::before { display: none; }
.real-case-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.real-case-preview > span { position: absolute; z-index: 2; left: 16px; top: 16px; padding: 7px 10px; border-radius: 999px; color: #fff; background: rgba(11,31,58,.78); backdrop-filter: blur(8px); font-size: 11px; font-weight: 750; }
.case-root, .case-node { position: absolute; z-index: 2; border: 1px solid var(--blue); border-radius: 6px; background: #fff; color: #2451a2; text-align: center; font-size: 11px; font-weight: 650; box-shadow: 0 4px 10px rgba(20,80,170,.08); }
.case-root { left: 50%; top: 32px; width: 110px; padding: 9px; transform: translateX(-50%); }.case-node { width: 90px; padding: 12px 5px; top: 137px; }
.case-node.n1 { left: 8%; }.case-node.n2 { left: 50%; transform: translateX(-50%); }.case-node.n3 { right: 8%; }
.case-stem { position: absolute; z-index: 1; top: 77px; left: 20%; right: 20%; height: 60px; border-top: 2px solid var(--blue); border-left: 2px solid var(--blue); border-right: 2px solid var(--blue); }
.violet .case-root, .violet .case-node { border-color: var(--violet); color: #6746c8; }.cyan .case-root, .cyan .case-node { border-color: #149ec2; color: #0a7d9c; }
.case-copy { padding: 26px; }.case-copy > span { color: var(--blue); font-size: 12px; font-weight: 750; }.case-copy h3 { margin: 10px 0; font-size: 21px; }.case-copy p { min-height: 58px; margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }.case-copy small { display: block; margin-top: 22px; color: #98a8bd; }

.tutorial-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; align-items: center; }
.tutorial-intro > p:not(.section-kicker) { color: var(--muted); line-height: 1.8; }.text-link { display: inline-flex; gap: 9px; margin-top: 22px; color: var(--blue); font-weight: 700; }
.step-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.step-list li { display: grid; grid-template-columns: 72px 1fr; gap: 22px; padding: 29px 0; border-bottom: 1px solid var(--line); }.step-list li > span { color: var(--blue); font-weight: 800; letter-spacing: .13em; }.step-list h3 { margin: 0 0 8px; font-size: 21px; }.step-list p { margin: 0; color: var(--muted); line-height: 1.7; }

.faq-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; }.faq-title > p:last-child { color: var(--muted); }.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 22px 0; }.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 700; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--blue); font-size: 22px; transition: .2s ease; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { margin: 16px 52px 0 0; color: var(--muted); line-height: 1.8; }

.final-cta { width: min(1240px, calc(100% - 48px)); margin: 0 auto 100px; padding: 56px 64px; display: flex; align-items: center; justify-content: space-between; gap: 40px; border-radius: 20px; color: #fff; background: linear-gradient(115deg, #0f50d7, #215fee 60%, #674fe3); box-shadow: 0 26px 70px rgba(21,94,239,.22); }.final-cta p { margin: 0 0 12px; color: #cfe0ff; font-size: 13px; font-weight: 700; letter-spacing: .12em; }.final-cta h2 { max-width: 720px; margin: 0; font-size: clamp(28px,3vw,42px); line-height: 1.3; }.final-cta a { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 17px 24px; border-radius: 8px; background: #fff; color: var(--blue); font-weight: 750; transition: .2s ease; }.final-cta a:hover { transform: translateY(-2px); }
.site-footer { width: min(1240px, calc(100% - 48px)); margin: auto; padding: 48px 0 36px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; border-top: 1px solid var(--line); }.site-footer > p { color: var(--muted); font-size: 13px; }.site-footer > div { display: flex; gap: 24px; font-size: 13px; }.site-footer small { grid-column: 1/-1; color: #98a8bd; }

/* SEO landing pages */
.seo-page { min-height: 100vh; overflow: hidden; }
.subpage-footer { margin-top: 12px; }
.breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; color: #7588a3; font-size: 13px; }
.breadcrumb a { color: var(--blue); }

.topic-hero { position: relative; width: min(1240px, calc(100% - 48px)); min-height: 650px; margin: auto; padding: 88px 0 96px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 76px; align-items: center; }
.topic-copy h1 { margin: 0; max-width: 650px; font-size: clamp(44px, 4.2vw, 66px); line-height: 1.12; letter-spacing: -.052em; }
.topic-lead { max-width: 610px; margin: 26px 0 0; color: var(--muted); font-size: 18px; line-height: 1.9; }
.topic-visual { position: relative; min-height: 470px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 25px 70px rgba(27,79,155,.14); overflow: hidden; }
.topic-canvas-head { height: 58px; padding: 0 18px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.topic-canvas-head span { padding: 7px 9px; border-radius: 7px; background: var(--blue); color: #fff; font-weight: 800; }
.topic-canvas-head b { color: var(--ink); }
.topic-canvas-head i { margin-left: auto; color: #8ca0ba; font-style: normal; }
.topic-canvas { position: relative; min-height: 412px; padding: 54px 42px; text-align: center; background-color: #fcfdff; background-image: linear-gradient(#edf3fb 1px, transparent 1px), linear-gradient(90deg, #edf3fb 1px, transparent 1px); background-size: 24px 24px; }
.topic-canvas > strong { position: relative; z-index: 2; display: inline-block; min-width: 190px; padding: 14px 20px; border: 1.5px solid var(--blue); border-radius: 9px; background: #fff; color: #1747a5; box-shadow: 0 8px 22px rgba(21,94,239,.1); }
.topic-connectors { position: absolute; z-index: 1; left: 20%; right: 20%; top: 138px; height: 60px; border-top: 2px solid #769df0; border-left: 2px solid #769df0; border-right: 2px solid #769df0; }
.topic-connectors::before { content: ""; position: absolute; left: 50%; top: -50px; width: 2px; height: 50px; background: #769df0; }
.topic-node-row { position: relative; z-index: 2; margin-top: 100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.topic-node-row span { min-height: 74px; padding: 14px 10px; display: grid; place-items: center; border: 1px solid #b9cff7; border-radius: 8px; background: #fff; color: #385d9e; font-size: 13px; font-weight: 700; }
.topic-output { margin: 42px auto 0; width: fit-content; padding: 10px 14px; border-radius: 999px; color: #3f628d; background: #eef4ff; font-size: 12px; }

.topic-section { border-top: 1px solid #edf2f9; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 58px; }
.benefit-grid article { min-height: 250px; padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.benefit-grid article > span { color: #a8bad0; font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.benefit-grid h3 { margin: 54px 0 14px; font-size: 22px; }
.benefit-grid p { margin: 0; color: var(--muted); line-height: 1.8; }

.topic-workflow { display: grid; grid-template-columns: .82fr 1.18fr; gap: 100px; align-items: start; }
.topic-workflow > div > p:last-child { color: var(--muted); line-height: 1.85; }
.topic-workflow ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.topic-workflow li { display: grid; grid-template-columns: 65px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.topic-workflow li > span { color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.topic-workflow h3 { margin: 0 0 8px; font-size: 20px; }
.topic-workflow li p { margin: 0; color: var(--muted); line-height: 1.75; }
.seo-faq { display: grid; grid-template-columns: .68fr 1.32fr; gap: 100px; }

.related-section { padding-top: 90px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.related-grid > a { min-height: 235px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: .25s ease; }
.related-grid > a:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(30,75,137,.1); }
.related-grid span { color: var(--blue); font-size: 12px; font-weight: 800; }
.related-grid h3 { margin: 34px 0 12px; font-size: 22px; }
.related-grid p { margin: 0; color: var(--muted); line-height: 1.75; }
.related-grid b { display: block; margin-top: 22px; color: var(--blue); font-size: 13px; }

/* Knowledge center */
.home-knowledge-section { border-top: 1px solid var(--line); }
.home-article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
.home-article-grid > a { min-height: 285px; padding: 30px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg,#fff,#f7faff); transition: .25s ease; }
.home-article-grid > a:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(30,75,137,.1); }
.home-article-grid > a > div { display: flex; justify-content: space-between; color: var(--blue); font-size: 12px; font-weight: 800; }.home-article-grid i { color: #afbed1; font-style: normal; letter-spacing: .12em; }
.home-article-grid h3 { margin: 48px 0 15px; font-size: 22px; line-height: 1.45; }.home-article-grid p { margin: 0; color: var(--muted); line-height: 1.75; }.home-article-grid b { margin-top: auto; padding-top: 22px; color: var(--blue); font-size: 13px; }
.knowledge-more { display: flex; width: fit-content; margin: 34px auto 0; color: var(--blue); font-weight: 750; }

.article-list-hero { padding-bottom: 50px; }.category-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 28px; }.category-row span { padding: 8px 13px; border: 1px solid #d9e5f7; border-radius: 999px; color: #46648b; background: #f7faff; font-size: 12px; }
.article-grid-section { padding-top: 30px; }.article-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.article-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; transition: .25s ease; }.article-card:hover { transform: translateY(-5px); box-shadow: 0 20px 55px rgba(27,76,147,.12); }
.article-cover { position: relative; height: 230px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #fff; background: linear-gradient(135deg,#154fc8,#6d55e7); }
.article-cover::after,.article-detail-cover::after { content: ""; position: absolute; width: 220px; height: 220px; right: -60px; bottom: -100px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.06),0 0 0 65px rgba(255,255,255,.04); }
.article-cover.cover-2,.article-detail-cover.cover-2 { background: linear-gradient(135deg,#4338ca,#8b5cf6); }.article-cover.cover-3,.article-detail-cover.cover-3 { background: linear-gradient(135deg,#087ea4,#2864dc); }
.article-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.article-cover > span,.article-cover > strong,.article-cover > i { position: relative; z-index: 1; }.article-cover > span { font-size: 12px; font-weight: 750; letter-spacing: .08em; }.article-cover > strong { font-size: 26px; line-height: 1.35; }.article-cover > i { position: absolute; right: 25px; top: 25px; font-style: normal; opacity: .65; }
.article-card-copy { padding: 26px; }.article-card-copy > div { display: flex; justify-content: space-between; gap: 12px; color: #899ab1; font-size: 12px; }.article-card-copy > div span { color: var(--blue); font-weight: 750; }.article-card-copy h2 { margin: 16px 0 13px; font-size: 22px; line-height: 1.45; }.article-card-copy p { min-height: 76px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }.article-read-link { display: inline-block; margin-top: 22px; color: var(--blue); font-size: 13px; font-weight: 750; }

.article-detail-head { width: min(900px,calc(100% - 48px)); margin: auto; padding: 80px 0 52px; text-align: center; }.article-detail-head .breadcrumb { justify-content: center; }.article-detail-head h1 { margin: 0 auto; max-width: 880px; font-size: clamp(42px,5vw,66px); line-height: 1.18; letter-spacing: -.05em; }.article-summary { max-width: 760px; margin: 25px auto 0; color: var(--muted); font-size: 18px; line-height: 1.85; }.article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 28px; color: #8596ac; font-size: 13px; }
.article-detail-cover { position: relative; width: min(1120px,calc(100% - 48px)); height: 430px; margin: 0 auto; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 20px; color: #fff; background: linear-gradient(135deg,#154fc8,#6d55e7); overflow: hidden; }.article-detail-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.article-detail-cover span,.article-detail-cover strong { position: relative; z-index: 1; }.article-detail-cover span { font-size: 14px; font-weight: 750; letter-spacing: .1em; }.article-detail-cover strong { max-width: 700px; font-size: clamp(36px,5vw,64px); }
.article-content-layout { width: min(1050px,calc(100% - 48px)); margin: 76px auto 105px; display: grid; grid-template-columns: 260px 1fr; gap: 82px; align-items: start; }.article-content-layout aside { position: sticky; top: 110px; padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }.article-content-layout aside b { font-size: 14px; }.article-content-layout aside p { color: var(--muted); font-size: 13px; line-height: 1.75; }.article-content-layout aside a { color: var(--blue); font-size: 13px; font-weight: 750; }
.article-body { color: #283d59; font-size: 18px; line-height: 2; }.article-body h2 { margin: 54px 0 20px; color: var(--ink); font-size: 31px; line-height: 1.35; }.article-body h2:first-child { margin-top: 0; }.article-body p { margin: 0 0 25px; }.article-related { border-top: 1px solid var(--line); }.article-related .section-heading > a { color: var(--blue); font-weight: 750; }

/* Owner-only article management */
.admin-shell { min-height: 100vh; padding-bottom: 80px; background: #f5f8fd; }.admin-header { height: 74px; padding: 0 max(24px,calc((100% - 1320px)/2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: #fff; }.admin-header > a { color: var(--blue); font-size: 13px; font-weight: 750; }.admin-header > div { display: flex; align-items: center; gap: 10px; }.admin-header > div span { padding: 7px 9px; border-radius: 7px; color: #fff; background: var(--blue); font-size: 12px; font-weight: 850; }.admin-header > small { justify-self: end; color: #7e90a8; }
.admin-intro { width: min(1320px,calc(100% - 48px)); margin: 0 auto; padding: 62px 0 34px; }.admin-intro h1 { margin: 0; font-size: 46px; letter-spacing: -.04em; }.admin-intro > p:last-child { color: var(--muted); }
.admin-workspace { width: min(1320px,calc(100% - 48px)); margin: auto; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr); gap: 24px; align-items: start; }.article-editor,.article-admin-list { padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 10px 35px rgba(31,71,126,.05); }.editor-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }.editor-heading span { color: var(--blue); font-size: 12px; font-weight: 800; }.editor-heading h2,.article-admin-list h2 { margin: 6px 0 0; font-size: 26px; }.editor-heading small { color: #8a9bb0; }
.article-editor > label,.editor-two-col label { display: grid; gap: 9px; margin-bottom: 22px; color: #2c405b; font-size: 14px; font-weight: 700; }.article-editor input,.article-editor textarea,.article-editor select { width: 100%; padding: 13px 14px; border: 1px solid #d7e1ef; border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-weight: 400; outline: none; }.article-editor input:focus,.article-editor textarea:focus,.article-editor select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,94,239,.1); }.article-editor textarea { resize: vertical; line-height: 1.7; }.article-editor .content-editor { min-height: 390px; }.article-editor label small { color: #8b9bb0; font-size: 11px; font-weight: 400; }.editor-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.slug-field { display: flex; align-items: center; border: 1px solid #d7e1ef; border-radius: 8px; overflow: hidden; }.slug-field span { align-self: stretch; padding: 13px 5px 13px 13px; color: #71859f; background: #f5f8fd; font-weight: 400; }.slug-field input { border: 0; border-radius: 0; }.editor-actions { display: flex; align-items: center; gap: 18px; }.editor-actions button { padding: 14px 24px; border: 0; border-radius: 8px; color: #fff; background: var(--blue); font-weight: 750; cursor: pointer; }.editor-actions button:disabled { opacity: .55; }.editor-actions span { color: #5e738e; font-size: 13px; }
.admin-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 30px; }.admin-stats > div { padding: 15px 8px; display: grid; gap: 4px; text-align: center; border-radius: 10px; background: var(--soft); }.admin-stats b { color: var(--blue); font-size: 25px; }.admin-stats span { color: #7c8da4; font-size: 11px; }.empty-state { padding: 28px 0; color: var(--muted); line-height: 1.8; }.admin-article-items { margin-top: 18px; display: grid; gap: 12px; }.admin-article-items article { padding: 18px; border: 1px solid var(--line); border-radius: 11px; }.admin-article-items article > div:first-child { display: flex; gap: 9px; align-items: center; }.admin-article-items article span { padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 750; }.admin-article-items article span.published { color: #087a4d; background: #e9f8f1; }.admin-article-items article span.draft { color: #806522; background: #fff7dc; }.admin-article-items article small { color: #8b9cb1; }.admin-article-items h3 { margin: 13px 0 7px; font-size: 16px; line-height: 1.5; }.admin-article-items p { margin: 0; color: #8294aa; font-size: 11px; overflow-wrap: anywhere; }.admin-article-items article > div:last-child { display: flex; gap: 8px; margin-top: 15px; }.admin-article-items button,.admin-article-items a { padding: 7px 9px; border: 1px solid #d7e1ef; border-radius: 6px; color: #456285; background: #fff; font-size: 11px; cursor: pointer; }.admin-article-items .danger { margin-left: auto; color: #bd4250; border-color: #f0ced2; }

/* Cases and tutorial pages */
.listing-hero { width: min(1000px, calc(100% - 48px)); margin: auto; padding: 88px 0 66px; text-align: center; }
.listing-hero .breadcrumb { justify-content: center; }
.listing-hero h1 { margin: 0; font-size: clamp(42px, 4.7vw, 66px); line-height: 1.16; letter-spacing: -.05em; }
.listing-hero > p:last-child { max-width: 760px; margin: 25px auto 0; color: var(--muted); font-size: 17px; line-height: 1.85; }
.tutorial-hero .primary-button { margin-top: 32px; }
.example-list { padding-top: 50px; }
.example-list > article { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; padding: 54px 0; border-top: 1px solid var(--line); }
.example-list > article:last-child { border-bottom: 1px solid var(--line); }
.example-copy > span { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .09em; }
.example-copy h2 { margin: 14px 0 15px; font-size: 32px; }
.example-copy p { color: var(--muted); line-height: 1.85; }
.example-copy a { display: inline-block; margin-top: 18px; color: var(--blue); font-weight: 700; }
.example-flow { position: relative; min-height: 310px; padding: 42px; border: 1px solid var(--line); border-radius: 15px; text-align: center; background-color: #fbfdff; background-image: linear-gradient(#edf3fb 1px, transparent 1px), linear-gradient(90deg, #edf3fb 1px, transparent 1px); background-size: 22px 22px; }
.example-flow strong,.example-flow b,.example-flow span { position: relative; z-index: 2; border: 1px solid #aac4f3; border-radius: 7px; background: #fff; color: #315caa; }
.example-flow strong { display: inline-block; min-width: 145px; padding: 13px; }
.example-flow i { display: block; width: 2px; height: 38px; margin: auto; background: #759bea; }
.example-flow div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.example-flow span { padding: 15px 8px; font-size: 12px; }
.example-flow b { display: inline-block; margin-top: 30px; min-width: 145px; padding: 12px; font-size: 13px; }
.case-notes { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }
.case-notes ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.case-notes li { padding: 24px 0; display: grid; grid-template-columns: 135px 1fr; gap: 20px; border-bottom: 1px solid var(--line); }
.case-notes li b { color: var(--ink); }
.case-notes li span { color: var(--muted); line-height: 1.75; }
.case-facts { margin: 24px 0 0; display: grid; gap: 10px; }
.case-facts > div { padding: 11px 13px; display: grid; grid-template-columns: 78px 1fr; gap: 12px; border-radius: 8px; background: var(--soft); }
.case-facts dt { color: var(--blue); font-size: 12px; font-weight: 800; }
.case-facts dd { margin: 0; color: #566c89; font-size: 12px; line-height: 1.6; }

.guide-choice-section { padding-top: 50px; }
.guide-choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.guide-choice-card { position: relative; min-height: 430px; padding: 40px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; transition: .25s ease; }
.guide-choice-card::after { position: absolute; content: ""; width: 250px; height: 250px; right: -95px; bottom: -120px; border: 1px solid rgba(21,94,239,.14); border-radius: 50%; box-shadow: 0 0 0 34px rgba(21,94,239,.045),0 0 0 68px rgba(21,94,239,.025); }
.guide-choice-card.tutorial-choice::after { border-color: rgba(120,87,237,.2); box-shadow: 0 0 0 34px rgba(120,87,237,.05),0 0 0 68px rgba(120,87,237,.025); }
.guide-choice-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(26,73,141,.13); }
.guide-choice-card > span { color: var(--blue); font-size: 12px; font-weight: 850; letter-spacing: .09em; }.tutorial-choice > span { color: var(--violet); }
.guide-choice-card h2 { margin: 44px 0 15px; font-size: 36px; }
.guide-choice-card > p { max-width: 480px; margin: 0; color: var(--muted); line-height: 1.8; }
.guide-choice-card ul { margin: 27px 0 0; padding: 0; display: grid; gap: 11px; list-style: none; color: #405875; font-size: 14px; }
.guide-choice-card li { display: flex; align-items: center; gap: 9px; }.guide-choice-card li::before { content: "✓"; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #edf4ff; font-size: 10px; font-weight: 900; }.tutorial-choice li::before { color: var(--violet); background: #f1edff; }
.guide-choice-card b { position: relative; z-index: 2; margin-top: auto; padding-top: 35px; color: var(--blue); font-size: 15px; }.tutorial-choice b { color: var(--violet); }.guide-choice-card b i { margin-left: 6px; font-style: normal; }
.guide-decision-section { background: var(--soft); border-top: 1px solid #e8eef8; border-bottom: 1px solid #e8eef8; }
.guide-decision-inner { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; align-items: start; }
.guide-decision-list { display: grid; gap: 12px; }
.guide-decision-list article { padding: 22px 24px; display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.guide-decision-list span { color: var(--ink); font-weight: 800; }.guide-decision-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }.guide-decision-list a { color: var(--blue); font-size: 13px; font-weight: 800; white-space: nowrap; }

.tutorial-guide { max-width: 1050px; padding-top: 52px; }
.tutorial-guide article { display: grid; grid-template-columns: 100px 1fr; gap: 34px; padding: 50px 0; border-top: 1px solid var(--line); }
.tutorial-guide article:last-child { border-bottom: 1px solid var(--line); }
.tutorial-guide article > span { color: var(--blue); font-size: 14px; font-weight: 850; letter-spacing: .18em; }
.tutorial-guide h2 { font-size: 31px; }
.tutorial-guide article p { margin: 14px 0 20px; color: var(--muted); line-height: 1.85; }
.tutorial-guide aside { padding: 14px 17px; border-left: 3px solid var(--blue); background: var(--soft); color: #536b89; line-height: 1.7; }
.tutorial-guide aside b { margin-right: 12px; color: var(--blue); }
.trouble-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }
.trouble-grid { display: grid; gap: 14px; }
.trouble-grid article { padding: 23px 25px; border: 1px solid var(--line); border-radius: 12px; }
.trouble-grid b { color: var(--ink); }
.trouble-grid p { margin: 9px 0 0; color: var(--muted); line-height: 1.75; }

.not-found { width: min(760px, calc(100% - 48px)); min-height: 620px; margin: auto; padding: 100px 0; display: grid; place-content: center; text-align: center; }
.not-found > span { color: #d4e1f7; font-size: 92px; font-weight: 900; letter-spacing: -.07em; }
.not-found h1 { margin: 8px 0 14px; font-size: 46px; }
.not-found p { margin: 0 auto; max-width: 560px; color: var(--muted); line-height: 1.8; }
.not-found > div { margin-top: 30px; display: flex; justify-content: center; gap: 14px; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 44% 56%; min-height: 700px; }.hero h1 { white-space: normal; font-size: 52px; }.research-shell,.product-shot-shell { height: 550px; }.product-shot-frame { height: 385px; }.product-shot-note { height: 111px; }.ai-panel { display: none; }.flow-node { transform: scale(.86); transform-origin: top left; }.node-right,.node-bottom-right { right: 8%; }
  .hero-b { grid-template-columns: 43% 57%; }.hero-b .hero-copy { padding-right: 30px; }.result-showcase { min-height: 560px; padding: 36px 18px 44px 56px; }.result-image-wrap { height: 342px; }.result-float-two { right: -10px; }.result-float { min-width: 138px; padding: 10px; }
  .desktop-nav { gap: 28px; }.section-heading { gap: 42px; }.tutorial-section,.faq-section { gap: 60px; }
}

@media (max-width: 860px) {
  .nav-wrap { width: min(100% - 36px, 720px); }.desktop-nav,.login-button { display: none; }.mobile-menu { display: block; }.mobile-menu summary { list-style: none; border: 1px solid var(--line); border-radius: 7px; padding: 8px 12px; color: var(--blue); font-size: 14px; font-weight: 700; cursor: pointer; }.mobile-menu summary::-webkit-details-marker { display: none; }.mobile-menu nav { position: absolute; right: 0; top: 46px; width: 180px; padding: 8px; display: grid; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 16px 36px rgba(24,70,137,.15); }.mobile-menu nav a { padding: 11px; border-radius: 6px; }.mobile-menu nav a:hover { background: var(--soft); }
  .hero { width: min(100% - 36px,720px); grid-template-columns: 1fr; padding-top: 70px; }.hero-copy { padding: 0; }.hero h1 { max-width: 650px; }.hero-lead { max-width: 650px; }.hero-visual { margin-top: 52px; }.research-shell,.product-shot-shell { height: 540px; }.product-shot-frame { height: 380px; }.product-shot-note { height: 106px; }.hero-orbit { display: none; }
  .hero-b .hero-copy { padding-right: 0; }.result-showcase { min-height: 610px; padding: 42px 42px 50px 70px; }.result-image-wrap { height: 390px; }
  .section { width: min(100% - 36px,720px); padding: 88px 0; }.section-heading,.tutorial-section,.faq-section { grid-template-columns: 1fr; gap: 38px; }.feature-grid,.case-grid,.home-article-grid,.article-grid { grid-template-columns: 1fr; }.feature-card { min-height: 240px; }.feature-card h3 { margin-top: 42px; }.cases-section { width: 100%; padding-left: max(18px,calc((100% - 720px)/2)); padding-right: max(18px,calc((100% - 720px)/2)); }.case-copy p { min-height: auto; }.article-card-copy p { min-height: auto; }.article-content-layout { width: min(100% - 36px,720px); grid-template-columns: 1fr; gap: 36px; }.article-content-layout aside { position: static; }.admin-workspace { grid-template-columns: 1fr; }.admin-header { grid-template-columns: auto 1fr; }.admin-header > div { justify-self: end; }.admin-header > small { display: none; }
  .final-cta { width: min(100% - 36px,720px); padding: 42px; align-items: flex-start; flex-direction: column; }.site-footer { width: min(100% - 36px,720px); grid-template-columns: 1fr; }.site-footer small { grid-column: auto; }
  .topic-hero { width: min(100% - 36px,720px); grid-template-columns: 1fr; gap: 52px; padding: 70px 0 78px; }.topic-copy h1 { max-width: 700px; }.benefit-grid,.related-grid,.guide-choice-grid { grid-template-columns: 1fr; }.benefit-grid article { min-height: 210px; }.benefit-grid h3 { margin-top: 36px; }.topic-workflow,.seo-faq,.case-notes,.trouble-section,.guide-decision-inner { grid-template-columns: 1fr; gap: 40px; }.example-list > article { grid-template-columns: 1fr; gap: 34px; }.example-list > article:nth-child(even) .example-copy { order: 0; }.listing-hero { width: min(100% - 36px,720px); }.tutorial-guide { width: min(100% - 36px,720px); }.subpage-footer { margin-top: 0; }
}

@media (max-width: 560px) {
  .floating-entry { right: 12px; top: auto; bottom: 18px; transform: none; min-width: auto; min-height: 52px; padding: 9px 16px 9px 9px; border-right: 1px solid rgba(255,255,255,.65); border-radius: 15px; gap: 9px; }
  .floating-entry:hover { transform: translateY(-3px); }
  .floating-entry-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; }
  .floating-entry-copy strong { font-size: 14px; }
  .floating-entry-copy small { display: none; }
  .site-header { height: 68px; }.brand { font-size: 21px; }.brand-image { width: 108px; }.brand-mark { transform: rotate(-30deg) scale(.82); margin-left: -3px; }
  .hero { min-height: auto; padding: 54px 0 70px; }.tag-row { margin-bottom: 22px; }.tag-row span { font-size: 11px; }.eyebrow { font-size: 12px; }.hero h1 { font-size: 42px; line-height: 1.18; }.hero-lead { margin-top: 22px; font-size: 16px; line-height: 1.75; }.hero-actions { display: grid; }.primary-button,.secondary-button { width: 100%; min-height: 54px; font-size: 16px; }.trust-row { flex-wrap: wrap; gap: 12px 18px; margin-top: 28px; }
  .hero-b .hero-visual { margin-top: 34px; }.result-showcase { min-height: 465px; margin: 0 -8px; padding: 32px 6px 54px 28px; }.result-main-card { width: calc(100% - 8px); border-radius: 15px; }.result-card-head { height: 48px; padding: 0 12px; }.result-head-brand b { font-size: 11px; }.result-card-head > i { display: none; }.result-image-wrap { height: 270px; padding: 10px; }.result-image-wrap img { border-radius: 9px; }.result-ready { right: 17px; top: 17px; padding: 6px 8px; font-size: 9px; }.result-ready i { width: 15px; height: 15px; }.result-card-foot { min-height: 70px; padding: 11px 12px; }.result-card-foot > div:first-child b { font-size: 10px; }.result-capabilities { max-width: 128px; }.result-capabilities span { padding: 4px 5px; font-size: 7px; }.result-float { min-width: 116px; padding: 8px; border-radius: 10px; gap: 7px; }.result-float > span { width: 24px; height: 24px; border-radius: 7px; font-size: 8px; }.result-float b { font-size: 9px; }.result-float small { font-size: 8px; }.result-float-one { left: -4px; top: 72px; }.result-float-two { right: -7px; top: 210px; }.result-float-three { display: none; }.result-summary { right: 0; bottom: 5px; min-width: 220px; padding: 10px 12px; }
  .research-shell,.product-shot-shell { height: 405px; border-radius: 11px; }.product-shot-toolbar { height: 45px; grid-template-columns: 55px 1fr; padding: 0 12px; }.product-shot-toolbar > span { padding: 6px 9px; font-size: 9px; }.product-shot-toolbar > b { display: none; }.window-dots { gap: 5px; }.window-dots i { width: 7px; height: 7px; }.product-shot-frame { height: 276px; padding: 12px; }.product-shot-frame::after { inset: 12px; }.product-shot-note { height: 84px; padding: 0 16px; gap: 11px; }.product-shot-note > span { width: 34px; height: 34px; border-radius: 9px; }.product-shot-note b { font-size: 13px; }.product-shot-note small { font-size: 10px; }.research-toolbar { height: 46px; padding: 0 10px; }.toolbar-actions,.toolbar-divider { display: none; }.save-button { margin-left: auto; padding: 6px 10px; }.research-body { grid-template-columns: 38px 1fr; height: calc(100% - 46px); }.tool-rail { gap: 10px; font-size: 13px; }.tool-rail span { width: 25px; height: 25px; }.flow-node { width: 130px; min-height: 52px; padding: 6px; }.flow-node strong { font-size: 9px; }.flow-node small { font-size: 7px; margin-top: 4px; }.node-root { left: 31%; top: 16px; }.node-left { left: 3%; top: 105px; }.node-right { right: 2%; top: 105px; }.node-center { left: 31%; top: 205px; }.node-bottom-left { display: none; }.node-bottom-right { left: 31%; right: auto; top: 295px; }.flow-line,.zoom { display: none; }
  .section { padding: 74px 0; }.section h2 { font-size: 34px; }.section-heading > p { font-size: 15px; }.feature-card { padding: 26px; }.case-preview { height: 210px; }.tutorial-section,.faq-section { gap: 32px; }.step-list li { grid-template-columns: 52px 1fr; }.faq-list summary { font-size: 16px; }.final-cta { margin-bottom: 68px; padding: 32px 26px; }.final-cta a { width: 100%; justify-content: center; }.site-footer > div { flex-wrap: wrap; }
  .breadcrumb { margin-bottom: 25px; }.topic-hero { padding: 54px 0 68px; }.topic-copy h1 { font-size: 41px; }.topic-lead { font-size: 16px; }.topic-visual { min-height: 395px; }.topic-canvas { min-height: 337px; padding: 42px 16px; }.topic-canvas > strong { min-width: 160px; font-size: 13px; }.topic-connectors { left: 17%; right: 17%; top: 124px; height: 55px; }.topic-node-row { margin-top: 88px; gap: 7px; }.topic-node-row span { min-height: 66px; padding: 10px 4px; font-size: 10px; }.topic-output { margin-top: 32px; font-size: 10px; }.benefit-grid { margin-top: 38px; }.related-grid { margin-top: 38px; }.listing-hero { padding: 58px 0 34px; }.listing-hero h1 { font-size: 40px; }.listing-hero > p:last-child { font-size: 15px; }.example-list { padding-top: 34px; }.example-list > article { padding: 42px 0; }.example-copy h2 { font-size: 28px; }.example-flow { min-height: 275px; padding: 32px 16px; }.case-notes li,.case-facts > div { grid-template-columns: 1fr; gap: 7px; }.guide-choice-card { min-height: 390px; padding: 28px; }.guide-choice-card h2 { margin-top: 34px; font-size: 31px; }.guide-decision-list article { grid-template-columns: 1fr; gap: 8px; }.tutorial-guide article { grid-template-columns: 55px 1fr; gap: 18px; padding: 40px 0; }.tutorial-guide h2 { font-size: 26px; }.tutorial-guide aside b { display: block; margin: 0 0 4px; }.not-found { min-height: 520px; padding: 70px 0; }.not-found > span { font-size: 72px; }.not-found h1 { font-size: 36px; }.not-found > div { display: grid; }.not-found .primary-button,.not-found .secondary-button { width: 100%; }
  .article-detail-head { width: min(100% - 36px,720px); padding-top: 55px; }.article-detail-head h1 { font-size: 39px; }.article-summary { font-size: 16px; }.article-detail-cover { width: min(100% - 36px,720px); height: 300px; padding: 28px; }.article-body { font-size: 16px; }.article-body h2 { font-size: 26px; }.article-content-layout { margin-top: 50px; margin-bottom: 75px; }.admin-intro,.admin-workspace { width: min(100% - 30px,720px); }.admin-intro { padding-top: 40px; }.admin-intro h1 { font-size: 36px; }.article-editor,.article-admin-list { padding: 22px; }.editor-two-col { grid-template-columns: 1fr; gap: 0; }.slug-field span { display: none; }.admin-header { padding: 0 16px; }.admin-header > div b { font-size: 13px; }
}

/* Homepage visual restored from the approved AI research diagram version */
.home-topic-visual { min-height: 610px; }
.home-topic-visual .topic-canvas { min-height: 552px; padding-top: 70px; }
.home-topic-visual .topic-connectors { top: 154px; }
.home-topic-visual .topic-node-row { margin-top: 116px; }
.home-topic-visual .topic-output { margin-top: 36px; }

@media (max-width: 1180px) {
  .home-topic-visual { min-height: 550px; }
  .home-topic-visual .topic-canvas { min-height: 492px; padding-top: 55px; }
  .home-topic-visual .topic-connectors { top: 139px; }
  .home-topic-visual .topic-node-row { margin-top: 102px; }
}

@media (max-width: 860px) {
  .home-topic-visual { min-height: 510px; }
  .home-topic-visual .topic-canvas { min-height: 452px; }
}

@media (max-width: 560px) {
  .home-topic-visual { min-height: 395px; }
  .home-topic-visual .topic-canvas { min-height: 337px; padding: 42px 16px; }
  .home-topic-visual .topic-connectors { top: 124px; }
  .home-topic-visual .topic-node-row { margin-top: 88px; }
  .home-topic-visual .topic-output { margin-top: 32px; }
}

/* C version: focused SEM landing page */
.sem-page { --sem-navy:#071a35; --sem-blue:#1264f4; --sem-purple:#7257ed; min-height:100vh; color:var(--sem-navy); background:#fff; }
.sem-header { position:relative; z-index:30; width:min(1320px,calc(100% - 56px)); height:74px; margin:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid #e8eef8; }
.sem-brand { justify-self:start; display:inline-flex; }.sem-brand img { width:124px; height:auto; display:block; }
.sem-header > span { color:#70829c; font-size:12px; }.sem-header-cta { justify-self:end; min-height:42px; padding:0 17px; display:inline-flex; align-items:center; gap:8px; border-radius:8px; color:#fff; background:var(--sem-blue); font-size:14px; font-weight:750; box-shadow:0 10px 24px rgba(18,100,244,.22); }.sem-header-cta i { font-style:normal; }
.sem-hero { position:relative; width:min(1320px,calc(100% - 56px)); min-height:680px; margin:auto; padding:72px 0 82px; display:grid; grid-template-columns:.88fr 1.12fr; gap:68px; align-items:center; }
.sem-hero::before { position:absolute; content:""; width:560px; height:560px; right:-120px; top:40px; border-radius:50%; background:radial-gradient(circle,rgba(76,123,255,.12),transparent 70%); pointer-events:none; }
.sem-hero-copy { position:relative; z-index:2; }.sem-kicker { margin:0 0 18px; display:flex; align-items:center; gap:9px; color:#315b93; font-size:13px; font-weight:800; letter-spacing:.08em; }.sem-kicker i { width:32px; height:28px; display:grid; place-items:center; border-radius:8px; color:#fff; background:linear-gradient(135deg,var(--sem-blue),var(--sem-purple)); font-style:normal; letter-spacing:0; }
.sem-hero h1 { max-width:590px; margin:0; font-size:clamp(46px,4vw,59px); line-height:1.1; letter-spacing:-.05em; }.sem-hero h1 span { display:block; margin-top:8px; color:transparent; background:linear-gradient(90deg,var(--sem-blue),var(--sem-purple)); background-clip:text; -webkit-background-clip:text; }
@media (min-width:721px) { .sem-hero h1 span { white-space:nowrap; } }
.sem-lead { max-width:560px; margin:26px 0 0; color:#516681; font-size:18px; line-height:1.85; }
.sem-actions { margin-top:32px; display:flex; gap:13px; flex-wrap:wrap; }.sem-primary,.sem-secondary { min-height:56px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:9px; font-size:16px; font-weight:800; transition:.2s ease; }.sem-primary { color:#fff; background:linear-gradient(110deg,var(--sem-blue),#245fe8 58%,var(--sem-purple)); box-shadow:0 15px 32px rgba(18,100,244,.24); }.sem-primary:hover { transform:translateY(-2px); box-shadow:0 19px 38px rgba(18,100,244,.3); }.sem-secondary { color:var(--sem-blue); border:1px solid #bcd0f5; background:#fff; }.sem-secondary:hover { background:#f4f8ff; transform:translateY(-2px); }
.sem-trust { margin:27px 0 0; padding:0; display:flex; gap:10px 18px; flex-wrap:wrap; color:#60728b; list-style:none; font-size:12px; }.sem-trust li { display:flex; align-items:center; gap:6px; }.sem-trust i { width:19px; height:19px; display:grid; place-items:center; border-radius:50%; color:#1264f4; background:#edf4ff; font-style:normal; font-weight:900; }
.sem-transform { position:relative; z-index:2; min-height:522px; padding:20px; border:1px solid #d9e4f4; border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,249,255,.96)); box-shadow:0 30px 82px rgba(27,74,143,.16); }
.sem-transform-label { height:44px; display:grid; grid-template-columns:1fr 100px 1fr; align-items:center; text-align:center; color:#72849d; font-size:11px; }.sem-transform-label b { color:var(--sem-blue); font-size:10px; letter-spacing:.08em; }
.sem-transform-stage { min-height:392px; display:grid; grid-template-columns:.9fr 72px 1.1fr; gap:10px; align-items:center; }
.sem-input-card,.sem-output-card { position:relative; min-width:0; height:330px; border:1px solid #dfe7f3; border-radius:16px; background:#fff; box-shadow:0 14px 35px rgba(29,72,135,.09); overflow:hidden; }
.sem-file-head { height:76px; padding:14px; display:flex; align-items:center; gap:11px; border-bottom:1px solid #edf1f7; }.sem-file-head > span { width:42px; height:46px; display:grid; place-items:center; border-radius:9px; color:#fff; background:#3b79ef; font-size:10px; font-weight:850; }.sem-file-head div { display:grid; gap:4px; }.sem-file-head b { font-size:12px; }.sem-file-head small { color:#8697ae; font-size:9px; }
.sem-doc-lines { padding:28px 20px 12px; display:grid; gap:13px; }.sem-doc-lines i { height:7px; border-radius:999px; background:#e9eef6; }.sem-doc-lines i:nth-child(2),.sem-doc-lines i:nth-child(5) { width:78%; }.sem-doc-lines i:nth-child(3) { width:91%; }.sem-doc-lines i:nth-child(6) { width:62%; }
.sem-input-sources { padding:20px 18px 12px; display:grid; gap:10px; }.sem-input-sources > b { color:#71839c; font-size:9px; }.sem-input-sources > div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.sem-input-sources span { min-height:58px; padding:8px; display:grid; place-items:center; border:1px solid #cdddf6; border-radius:9px; color:#244f91; background:linear-gradient(145deg,#f7faff,#edf4ff); text-align:center; font-size:10px; font-weight:850; }
.sem-format-row { margin:0 18px; padding-top:12px; display:flex; align-items:center; gap:6px; border-top:1px solid #edf1f7; }.sem-format-row b { margin-right:2px; color:#71839c; font-size:8px; }.sem-format-row span { padding:5px 7px; border-radius:5px; color:#315f9c; background:#edf4ff; font-size:8px; font-weight:800; }
.sem-keywords { padding:15px 18px; display:flex; gap:6px; flex-wrap:wrap; }.sem-keywords span { padding:5px 7px; border-radius:5px; color:#41648f; background:#edf4ff; font-size:8px; font-weight:750; }
.sem-ai-arrow { display:grid; place-items:center; gap:10px; color:var(--sem-blue); }.sem-ai-arrow span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,var(--sem-blue),var(--sem-purple)); font-size:11px; font-weight:900; box-shadow:0 10px 22px rgba(18,100,244,.22); }.sem-ai-arrow i { font-size:23px; font-style:normal; }
.sem-output-card { padding:12px; background:linear-gradient(135deg,#f6f9ff,#f1efff); }.sem-output-carousel { position:relative; width:100%; height:100%; overflow:hidden; border-radius:11px; background:#fff; box-shadow:0 9px 22px rgba(35,76,137,.1); }.sem-output-carousel img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:#fff; opacity:0; animation:sem-output-rotate 24s infinite; }.sem-output-carousel img:nth-child(2) { animation-delay:6s; }.sem-output-carousel img:nth-child(3) { animation-delay:12s; }.sem-output-carousel img:nth-child(4) { animation-delay:18s; }@keyframes sem-output-rotate { 0%,22% { opacity:1; } 25%,100% { opacity:0; } }.sem-done { position:absolute; right:20px; top:20px; z-index:3; padding:7px 9px; display:flex; align-items:center; gap:6px; border:1px solid #bfe6d2; border-radius:999px; color:#1b714d; background:rgba(244,255,249,.94); font-size:9px; font-weight:800; backdrop-filter:blur(8px); }.sem-done i { width:15px; height:15px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#2fa970; font-style:normal; }.sem-carousel-count { position:absolute; left:20px; bottom:20px; z-index:3; padding:6px 9px; border-radius:999px; color:#315b93; background:rgba(255,255,255,.92); font-size:8px; font-weight:850; box-shadow:0 6px 18px rgba(35,76,137,.12); backdrop-filter:blur(8px); }
.sem-output-actions { height:50px; display:flex; align-items:center; justify-content:flex-end; gap:8px; }.sem-output-actions span { padding:6px 9px; border-radius:6px; color:#47668f; background:#edf4ff; font-size:9px; font-weight:750; }
.sem-sweep-demo { position:relative; z-index:2; min-height:522px; padding:20px; border:1px solid #d9e4f4; border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,249,255,.96)); box-shadow:0 30px 82px rgba(27,74,143,.16); overflow:hidden; }
.sem-sweep-label { height:44px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; color:#72849d; text-align:center; font-size:11px; }.sem-sweep-label b { color:var(--sem-blue); font-size:10px; letter-spacing:.08em; }
.sem-sweep-stage { position:relative; height:392px; overflow:hidden; border:1px solid #dfe8f5; border-radius:16px; background:linear-gradient(145deg,#f9fbff,#eef4fe); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); }
.sem-sweep-input,.sem-sweep-output { position:absolute; inset:0; }
.sem-sweep-input { padding:34px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(145deg,#f9fbff,#eef4fe); }
.sem-sweep-file { width:82%; margin:0 auto; padding:17px; display:grid; grid-template-columns:45px 1fr auto; gap:12px; align-items:center; border:1px solid #d7e3f4; border-radius:13px; background:#fff; box-shadow:0 14px 34px rgba(36,82,145,.1); }.sem-sweep-file > i { grid-row:1; width:45px; height:50px; display:grid; place-items:center; border-radius:9px; color:#fff; background:linear-gradient(145deg,#1f68ff,#7358ed); font-size:10px; font-style:normal; font-weight:900; }.sem-sweep-file > div { display:grid; gap:5px; }.sem-sweep-file b { font-size:14px; }.sem-sweep-file small { color:#7d90aa; font-size:10px; }.sem-sweep-file em { padding:5px 8px; border-radius:999px; color:#1c7a55; background:#e9faf2; font-size:8px; font-style:normal; font-weight:850; }
.sem-sweep-copy { width:82%; margin:16px auto 0; padding:16px 18px; border:1px solid #e0e8f4; border-radius:12px; background:rgba(255,255,255,.88); }.sem-sweep-copy > span { color:#577297; font-size:9px; font-weight:850; }.sem-sweep-typed { width:0; max-width:100%; margin:10px 0 12px; overflow:hidden; color:#1d3d69; white-space:nowrap; font-size:12px; font-weight:750; animation:sem-sweep-type 9s steps(20,end) infinite; }.sem-sweep-copy > div { display:grid; gap:7px; }.sem-sweep-copy > div i { height:5px; border-radius:999px; background:#e3eaf4; }.sem-sweep-copy > div i:nth-child(2) { width:78%; }.sem-sweep-copy > div i:nth-child(3) { width:58%; }
.sem-sweep-tags { width:82%; margin:12px auto 0; display:flex; gap:7px; }.sem-sweep-tags span { padding:6px 9px; border-radius:6px; color:#3d6091; background:#fff; font-size:8px; font-weight:800; box-shadow:0 6px 14px rgba(34,80,145,.06); }
.sem-sweep-output { z-index:2; padding:16px; background:#fff; clip-path:inset(0 100% 0 0); animation:sem-sweep-reveal 9s ease-in-out infinite; }.sem-sweep-output img { width:100%; height:100%; display:block; object-fit:contain; border-radius:11px; background:#fff; }.sem-sweep-output > span { position:absolute; right:26px; top:26px; padding:7px 10px; display:flex; align-items:center; gap:6px; border:1px solid #bfe6d2; border-radius:999px; color:#1b714d; background:rgba(244,255,249,.95); font-size:9px; font-weight:850; opacity:0; animation:sem-sweep-complete 9s ease infinite; }.sem-sweep-output > span i { width:15px; height:15px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#2fa970; font-style:normal; }
.sem-sweep-beam { position:absolute; z-index:4; left:5%; top:0; bottom:0; width:3px; opacity:0; background:linear-gradient(180deg,transparent,#54a5ff 12%,#7558ed 88%,transparent); box-shadow:0 0 18px 5px rgba(66,126,255,.35); animation:sem-sweep-beam 9s ease-in-out infinite; }.sem-sweep-beam i { position:absolute; left:50%; top:46%; width:42px; height:42px; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:13px; color:#fff; background:linear-gradient(135deg,var(--sem-blue),var(--sem-purple)); box-shadow:0 10px 25px rgba(18,100,244,.3); font-size:11px; font-style:normal; font-weight:900; }.sem-sweep-beam span { position:absolute; left:50%; top:calc(46% + 29px); padding:5px 7px; transform:translateX(-50%); border-radius:999px; color:#315b93; background:rgba(255,255,255,.94); white-space:nowrap; font-size:8px; font-weight:850; box-shadow:0 5px 14px rgba(35,76,137,.12); }
.sem-sweep-foot { height:50px; display:grid; grid-template-columns:1fr 1.25fr 1fr; align-items:center; gap:8px; color:#6f829b; text-align:center; font-size:9px; }.sem-sweep-foot b { color:#315b93; }
@keyframes sem-sweep-type { 0%,4% { width:0; } 22%,88% { width:100%; } 96%,100% { width:0; } }
@keyframes sem-sweep-reveal { 0%,25% { clip-path:inset(0 100% 0 0); } 68%,92% { clip-path:inset(0 0 0 0); } 100% { clip-path:inset(0 100% 0 0); } }
@keyframes sem-sweep-beam { 0%,22% { left:5%; opacity:0; } 25% { left:5%; opacity:1; } 68% { left:95%; opacity:1; } 72%,100% { left:95%; opacity:0; } }
@keyframes sem-sweep-complete { 0%,67% { opacity:0; transform:translateY(-4px); } 72%,92% { opacity:1; transform:none; } 100% { opacity:0; } }
.sem-proof { position:relative; width:min(1320px,calc(100% - 56px)); margin:0 auto; padding:28px 30px 30px; border:1px solid #d8e5f8; border-radius:22px; background:linear-gradient(125deg,#f7faff 0%,#fff 48%,#f7f5ff 100%); box-shadow:0 22px 60px rgba(35,77,136,.1); overflow:hidden; }.sem-proof::before { position:absolute; content:""; width:260px; height:260px; right:-110px; top:-150px; border-radius:50%; background:radial-gradient(circle,rgba(114,82,230,.15),transparent 68%); pointer-events:none; }.sem-proof-heading { position:relative; z-index:1; margin-bottom:20px; display:flex; align-items:center; gap:13px; }.sem-proof-heading span { padding:6px 9px; border-radius:6px; color:#fff; background:linear-gradient(135deg,var(--sem-blue),var(--sem-purple)); font-size:8px; font-weight:900; letter-spacing:.16em; }.sem-proof-heading b { font-size:15px; letter-spacing:-.01em; }.sem-proof-list { position:relative; z-index:1; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; list-style:none; counter-reset:sem-proof; }.sem-proof-list li { position:relative; min-height:118px; padding:20px; display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:center; border:1px solid rgba(205,220,244,.9); border-radius:14px; background:rgba(255,255,255,.9); box-shadow:0 8px 22px rgba(38,78,137,.055); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }.sem-proof-list li:hover { transform:translateY(-4px); border-color:#afc9f3; box-shadow:0 15px 32px rgba(38,78,137,.11); }.sem-proof-list li > i { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:var(--sem-blue); background:linear-gradient(145deg,#eaf3ff,#f0edff); font-size:10px; font-style:normal; font-weight:900; box-shadow:inset 0 0 0 1px rgba(56,112,221,.08); }.sem-proof-list li:nth-child(2) > i { color:#4167d7; background:linear-gradient(145deg,#eaf0ff,#f1efff); }.sem-proof-list li:nth-child(3) > i { color:#6849cc; background:linear-gradient(145deg,#f0efff,#f8efff); }.sem-proof-list li:nth-child(4) > i { color:#167f9e; background:linear-gradient(145deg,#e9f8ff,#eef5ff); }.sem-proof-list li > div { min-width:0; display:grid; gap:7px; }.sem-proof-list b { font-size:14px; }.sem-proof-list span { color:#74869e; font-size:10px; line-height:1.55; }.sem-proof-list li:not(:last-child)::after { position:absolute; z-index:2; content:"›"; right:-19px; top:50%; width:24px; height:24px; display:grid; place-items:center; transform:translateY(-50%); border:1px solid #d1def2; border-radius:50%; color:#6e8abe; background:#fff; font-size:17px; box-shadow:0 4px 10px rgba(42,78,132,.08); }
.sem-section { width:min(1180px,calc(100% - 48px)); margin:auto; padding:112px 0; }.sem-section-head { text-align:center; }.sem-section-head > p,.sem-benefit-copy > p,.sem-faq-inner > div:first-child > p { margin:0 0 14px; color:var(--sem-blue); font-size:11px; font-weight:900; letter-spacing:.18em; }.sem-section-head h2,.sem-benefit-copy h2,.sem-faq-inner h2 { margin:0; font-size:clamp(34px,3.2vw,48px); line-height:1.25; letter-spacing:-.04em; }.sem-section-head > span,.sem-benefit-copy > span,.sem-faq-inner > div:first-child > span { display:block; margin-top:16px; color:#6b7d95; line-height:1.7; }
#sem-cases { width:min(1320px,calc(100% - 56px)); }.sem-case-grid { margin-top:54px; display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }.sem-case-card { position:relative; border:1px solid #dce6f4; border-radius:17px; background:#fff; overflow:hidden; box-shadow:0 10px 30px rgba(32,74,135,.06); transition:box-shadow .22s ease,border-color .22s ease; }.sem-case-card:hover { border-color:#b9cff2; box-shadow:0 20px 45px rgba(32,74,135,.12); }
.sem-real-case,.sem-mini-flow { position:relative; height:225px; overflow:hidden; background:linear-gradient(135deg,#f8faff,#edf4ff); }.sem-real-case { height:auto; aspect-ratio:16/9; padding:10px; cursor:zoom-in; outline:none; }.sem-real-case:focus-visible { box-shadow:inset 0 0 0 3px rgba(18,100,244,.45); }.sem-real-case > img { width:100%; height:100%; display:block; object-fit:contain; border-radius:10px; background:#fff; }.sem-real-case > span { position:absolute; left:18px; top:18px; padding:7px 10px; border-radius:999px; color:#fff; background:rgba(7,26,53,.78); font-size:9px; font-weight:800; backdrop-filter:blur(7px); }.sem-case-zoom { display:none; }
@media (hover:hover) and (pointer:fine) { .sem-case-zoom { position:fixed; inset:0; z-index:2000; padding:54px; display:grid; place-items:center; visibility:hidden; opacity:0; background:rgba(5,17,36,.78); backdrop-filter:blur(8px); pointer-events:none; transition:opacity .18s ease,visibility .18s ease; }.sem-real-case:hover .sem-case-zoom,.sem-real-case:focus .sem-case-zoom { visibility:visible; opacity:1; }.sem-case-zoom figure { width:min(1280px,calc(100vw - 108px)); margin:0; padding:14px 14px 12px; border:1px solid rgba(255,255,255,.28); border-radius:18px; background:#fff; box-shadow:0 30px 100px rgba(0,0,0,.38); }.sem-case-zoom img { width:100%; max-height:calc(100vh - 130px); display:block; object-fit:contain; border-radius:12px; background:#fff; }.sem-case-zoom figcaption { padding:11px 5px 1px; color:#344d70; text-align:center; font-size:13px; font-weight:800; } }
.sem-mini-flow { padding:30px 22px; display:grid; align-content:start; justify-items:center; background-image:linear-gradient(#e7eef9 1px,transparent 1px),linear-gradient(90deg,#e7eef9 1px,transparent 1px); background-size:22px 22px; }.sem-mini-flow > b { position:relative; z-index:2; min-width:118px; padding:10px; text-align:center; border:1px solid var(--sem-blue); border-radius:7px; color:#2352a5; background:#fff; font-size:11px; }.sem-mini-flow > i { width:2px; height:46px; background:#7da3ef; }.sem-mini-flow > div { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.sem-mini-flow > div span { min-height:50px; padding:7px; display:grid; place-items:center; text-align:center; border:1px solid #b9cff6; border-radius:7px; color:#3c5f98; background:#fff; font-size:9px; font-weight:750; }.violet .sem-mini-flow > b { border-color:var(--sem-purple); color:#6848cb; }.cyan .sem-mini-flow > b { border-color:#159dbf; color:#0f7f9b; }
.sem-case-copy { padding:23px; }.sem-case-copy > span { color:var(--sem-blue); font-size:10px; font-weight:850; }.sem-case-copy h3 { margin:9px 0 10px; font-size:20px; }.sem-case-copy p { min-height:68px; margin:0; color:#62758f; font-size:13px; line-height:1.75; }.sem-center-action { margin-top:40px; display:flex; justify-content:center; }
.sem-floating-wall { position:relative; height:760px; margin-top:54px; isolation:isolate; }.sem-floating-wall::before { position:absolute; inset:8% 15%; z-index:-1; content:""; border-radius:50%; background:radial-gradient(circle,rgba(83,124,244,.14),rgba(114,87,237,.07) 44%,transparent 72%); filter:blur(10px); }
.sem-wall-card { position:absolute; z-index:2; animation:sem-wall-float 6.5s ease-in-out infinite alternate; }.sem-wall-card-inner { overflow:hidden; border:1px solid rgba(205,220,244,.95); border-radius:18px; background:#fff; box-shadow:0 24px 60px rgba(26,70,135,.17); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }.sem-wall-card img { width:100%; aspect-ratio:16/9; display:block; object-fit:contain; background:#fff; }.sem-wall-card-inner > div { min-height:64px; padding:13px 16px; display:grid; gap:5px; border-top:1px solid #edf1f7; }.sem-wall-card span { color:var(--sem-blue); font-size:9px; font-weight:850; }.sem-wall-card b { overflow:hidden; color:#152b49; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.sem-wall-card:hover,.sem-wall-card:focus { z-index:10; outline:none; }.sem-wall-card:hover .sem-wall-card-inner,.sem-wall-card:focus .sem-wall-card-inner { transform:scale(1.045); border-color:#aac5f0; box-shadow:0 34px 82px rgba(26,70,135,.26); }
.sem-wall-card-1 { --wall-r:-1deg; width:46%; left:27%; top:8%; z-index:5; animation-duration:7.5s; }.sem-wall-card-2 { --wall-r:-3deg; width:34%; left:0; top:2%; animation-delay:-1.8s; }.sem-wall-card-3 { --wall-r:3deg; width:32%; right:0; top:13%; animation-delay:-3.2s; animation-duration:8.2s; }.sem-wall-card-4 { --wall-r:2deg; width:35%; left:8%; bottom:1%; animation-delay:-4.4s; animation-duration:7.8s; }.sem-wall-card-5 { --wall-r:-2deg; width:36%; right:6%; bottom:0; animation-delay:-2.6s; animation-duration:8.6s; }
@keyframes sem-wall-float { from { transform:translateY(0) rotate(var(--wall-r)); } to { transform:translateY(-12px) rotate(var(--wall-r)); } }
.sem-benefit-section { background:linear-gradient(145deg,#f7faff,#f3f1ff); border-top:1px solid #e8eef8; border-bottom:1px solid #e8eef8; }.sem-benefit-inner { display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; }.sem-benefit-copy h2 { font-size:clamp(34px,2.9vw,44px); }.sem-benefit-copy h2 span { display:block; white-space:nowrap; }.sem-benefit-grid { display:grid; gap:12px; }.sem-benefit-grid article { min-height:142px; padding:25px; display:grid; grid-template-columns:52px 1fr; column-gap:18px; border:1px solid #dce6f4; border-radius:15px; background:rgba(255,255,255,.9); }.sem-benefit-grid i { grid-row:1/3; width:46px; height:46px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,var(--sem-blue),var(--sem-purple)); font-size:11px; font-style:normal; font-weight:850; }.sem-benefit-grid h3 { margin:1px 0 7px; font-size:19px; }.sem-benefit-grid p { margin:0; color:#62758f; font-size:13px; line-height:1.75; }
.sem-steps ol { margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; list-style:none; }
.sem-workflow-combined { position:relative; width:min(1320px,calc(100% - 56px)); margin:0 auto; padding:54px 50px 58px; border:1px solid #d8e5f8; border-radius:24px; background:linear-gradient(125deg,#f7faff 0%,#fff 48%,#f7f5ff 100%); box-shadow:0 22px 60px rgba(35,77,136,.1); overflow:hidden; }
.sem-workflow-combined::before { position:absolute; content:""; width:320px; height:320px; right:-120px; top:-180px; border-radius:50%; background:radial-gradient(circle,rgba(114,82,230,.14),transparent 68%); pointer-events:none; }
.sem-workflow-combined > * { position:relative; z-index:1; }
.sem-workflow-combined .sem-section-head > span { max-width:760px; margin-left:auto; margin-right:auto; }
.sem-workflow-combined ol { margin-top:40px; }
.sem-steps li { position:relative; min-width:0; padding:20px 20px 26px; border:1px solid #dce6f4; border-radius:18px; background:#fff; box-shadow:0 16px 44px rgba(27,79,145,.06); }
.sem-steps li > span { display:inline-grid; place-items:center; width:34px; height:25px; margin-bottom:14px; border-radius:999px; color:var(--sem-blue); background:#edf4ff; font-size:11px; font-weight:900; letter-spacing:.1em; }
.sem-step-visual { position:relative; height:208px; overflow:hidden; border:1px solid #e0e9f6; border-radius:13px; background:linear-gradient(145deg,#f7faff,#eef4fd); }
.sem-steps h3 { margin:22px 0 9px; color:#10233f; font-size:20px; }
.sem-steps p { margin:0; color:#62758f; font-size:13px; line-height:1.75; }
.sem-steps li:not(:last-child)::after { position:absolute; content:"→"; right:-14px; top:155px; z-index:2; width:28px; height:28px; display:grid; place-items:center; border:1px solid #d6e2f4; border-radius:50%; color:var(--sem-blue); background:#fff; font-size:13px; }
.sem-step-upload { display:flex; flex-direction:column; justify-content:center; padding:20px; }
.sem-upload-file { position:relative; display:grid; grid-template-columns:42px 1fr; gap:3px 12px; align-items:center; padding:17px; border:1px solid #d8e4f5; border-radius:12px; background:#fff; box-shadow:0 12px 30px rgba(40,93,160,.1); }
.sem-upload-file i { grid-row:1/3; width:42px; height:48px; display:grid; place-items:center; border-radius:8px; color:#fff; background:linear-gradient(145deg,#236bff,#4897ff); font-size:10px; font-style:normal; font-weight:900; }
.sem-upload-file b { color:#183152; font-size:14px; }.sem-upload-file small { color:#7a8da8; font-size:10px; }
.sem-upload-formats { display:flex; gap:7px; margin:12px auto 0; }.sem-upload-formats span { padding:5px 9px; border:1px solid #dbe6f5; border-radius:999px; color:#54708f; background:#fff; font-size:9px; font-weight:700; }
.sem-live-result { background:#f5f7fa; }
.sem-live-result > img { width:100%; height:100%; display:block; object-fit:contain; background:#fff; }
.sem-live-result > b { position:absolute; left:10px; top:10px; z-index:2; padding:6px 9px; border-radius:999px; color:#fff; background:#1769ff; box-shadow:0 5px 16px rgba(23,105,255,.25); font-size:10px; }
.sem-live-result > a { position:absolute; right:10px; bottom:10px; z-index:2; padding:7px 10px; border:1px solid rgba(255,255,255,.8); border-radius:8px; color:#fff; background:rgba(11,32,63,.82); backdrop-filter:blur(7px); font-size:10px; font-weight:800; text-decoration:none; }
.sem-step-edit { display:flex; flex-direction:column; justify-content:center; padding:17px; }
.sem-edit-canvas { position:relative; display:flex; flex-direction:column; align-items:center; padding:13px 10px; border:1px solid #d9e5f5; border-radius:11px; background:#fff; }
.sem-edit-canvas b,.sem-edit-canvas span { display:grid; place-items:center; min-height:29px; padding:0 10px; border:1px solid #79a3ff; border-radius:6px; color:#19488f; background:#f5f8ff; font-size:10px; }
.sem-edit-canvas i { width:1px; height:17px; background:#79a3ff; }.sem-edit-canvas div { display:flex; gap:14px; }.sem-edit-canvas div::before { position:absolute; content:""; left:29%; right:29%; top:59px; height:1px; background:#79a3ff; }
.sem-edit-actions { display:flex; justify-content:center; gap:6px; margin-top:10px; }.sem-edit-actions span { padding:5px 7px; border-radius:6px; color:#4d6788; background:#fff; font-size:9px; font-weight:700; }
.sem-faq-section { background:#071a35; color:#fff; }.sem-faq-inner { display:grid; grid-template-columns:.72fr 1.28fr; gap:86px; }.sem-faq-inner > div:first-child > span { color:#9eb0c8; }.sem-faq-list { border-top:1px solid rgba(255,255,255,.18); }.sem-faq-list details { padding:21px 0; border-bottom:1px solid rgba(255,255,255,.18); }.sem-faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none; cursor:pointer; font-size:16px; font-weight:750; }.sem-faq-list summary::-webkit-details-marker { display:none; }.sem-faq-list summary span { color:#7da8ff; font-size:22px; transition:.2s ease; }.sem-faq-list details[open] summary span { transform:rotate(45deg); }.sem-faq-list p { margin:14px 45px 0 0; color:#aebed2; font-size:13px; line-height:1.8; }
.sem-final { width:min(1180px,calc(100% - 48px)); margin:100px auto; padding:54px 60px; display:flex; align-items:center; justify-content:space-between; gap:50px; border-radius:22px; color:#fff; background:linear-gradient(115deg,#0e54dc,#1667f2 55%,#7355e6); box-shadow:0 28px 70px rgba(18,100,244,.22); }.sem-final p { margin:0 0 10px; color:#cfe0ff; font-size:11px; font-weight:850; letter-spacing:.12em; }.sem-final h2 { max-width:700px; margin:0; font-size:clamp(28px,3vw,41px); line-height:1.28; }.sem-final span { display:block; margin-top:12px; color:rgba(255,255,255,.76); font-size:12px; }.sem-final > a { flex:none; min-height:56px; padding:0 22px; display:flex; align-items:center; gap:9px; border-radius:9px; color:var(--sem-blue); background:#fff; font-weight:850; }.sem-final > a i { font-style:normal; }
.sem-footer { width:min(1180px,calc(100% - 48px)); margin:auto; padding:34px 0 42px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; border-top:1px solid #e4ebf5; color:#70829b; }.sem-footer img { width:108px; height:auto; }.sem-footer p { margin:0; font-size:12px; }.sem-footer small { font-size:11px; }.sem-mobile-cta { display:none; }

@media (max-width:1050px) {
  .sem-hero { grid-template-columns:1fr; gap:48px; padding-top:62px; }.sem-hero-copy { max-width:720px; }.sem-transform,.sem-sweep-demo { width:min(100%,760px); margin:auto; }.sem-proof-list { grid-template-columns:repeat(2,1fr); }.sem-proof-list li:nth-child(2)::after { display:none; }.sem-workflow-combined { padding:48px 32px 52px; }.sem-benefit-inner,.sem-faq-inner { grid-template-columns:1fr; gap:45px; }
}

@media (max-width:720px) {
  .sem-header { width:calc(100% - 36px); height:66px; grid-template-columns:1fr auto; }.sem-header > span { display:none; }.sem-brand img { width:106px; }.sem-header-cta { min-height:38px; padding:0 13px; font-size:12px; }
  .sem-hero { width:calc(100% - 36px); min-height:auto; padding:52px 0 64px; }.sem-hero h1 { font-size:43px; line-height:1.15; }.sem-lead { font-size:16px; }.sem-actions { display:grid; }.sem-primary,.sem-secondary { width:100%; }.sem-trust { gap:10px; }
  .sem-transform { min-height:0; padding:12px; border-radius:17px; }.sem-transform-label { height:36px; grid-template-columns:1fr 60px 1fr; font-size:8px; }.sem-transform-label b { font-size:7px; }.sem-transform-stage { min-height:278px; grid-template-columns:.9fr 38px 1.1fr; gap:5px; }.sem-input-card,.sem-output-card { height:245px; border-radius:11px; }.sem-file-head { height:58px; padding:9px; gap:7px; }.sem-file-head > span { width:30px; height:34px; border-radius:6px; font-size:7px; }.sem-file-head b { font-size:8px; }.sem-file-head small { font-size:6px; }.sem-input-sources { padding:10px 8px 6px; gap:5px; }.sem-input-sources > b { font-size:6px; }.sem-input-sources > div { gap:4px; }.sem-input-sources span { min-height:39px; padding:4px; border-radius:6px; font-size:7px; }.sem-format-row { margin:0 8px; padding-top:6px; gap:3px; }.sem-format-row b,.sem-format-row span { font-size:5px; }.sem-format-row span { padding:3px; }.sem-keywords { padding:7px 8px; gap:3px; }.sem-keywords span { padding:3px; font-size:5px; }.sem-ai-arrow { gap:6px; }.sem-ai-arrow span { width:29px; height:29px; border-radius:8px; font-size:8px; }.sem-ai-arrow i { font-size:16px; }.sem-output-card { padding:6px; }.sem-done { right:9px; top:9px; padding:4px 5px; font-size:6px; }.sem-done i { width:11px; height:11px; }.sem-carousel-count { left:9px; bottom:9px; padding:4px 5px; font-size:5px; }.sem-output-actions { height:42px; gap:4px; }.sem-output-actions span { padding:5px; font-size:7px; }
  .sem-sweep-demo { min-height:0; padding:12px; border-radius:17px; }.sem-sweep-label { height:36px; font-size:8px; }.sem-sweep-label b { font-size:7px; }.sem-sweep-stage { height:278px; border-radius:11px; }.sem-sweep-input { padding:14px; }.sem-sweep-file,.sem-sweep-copy,.sem-sweep-tags { width:92%; }.sem-sweep-file { padding:10px; grid-template-columns:32px 1fr; gap:8px; }.sem-sweep-file > i { width:32px; height:36px; border-radius:7px; font-size:7px; }.sem-sweep-file b { font-size:9px; }.sem-sweep-file small { font-size:6px; }.sem-sweep-file em { display:none; }.sem-sweep-copy { margin-top:10px; padding:10px; }.sem-sweep-typed { font-size:8px; }.sem-sweep-tags { margin-top:8px; gap:4px; }.sem-sweep-tags span { padding:4px; font-size:6px; }.sem-sweep-output { padding:7px; }.sem-sweep-output > span { right:13px; top:13px; padding:4px 5px; font-size:6px; }.sem-sweep-beam i { width:30px; height:30px; border-radius:9px; font-size:8px; }.sem-sweep-beam span { top:calc(46% + 21px); font-size:6px; }.sem-sweep-foot { height:42px; font-size:6px; }
  .sem-proof { width:calc(100% - 36px); padding:22px 16px 18px; border-radius:18px; }.sem-proof-heading { margin:0 4px 17px; align-items:flex-start; flex-direction:column; gap:9px; }.sem-proof-heading b { font-size:17px; }.sem-proof-list { grid-template-columns:1fr; gap:10px; }.sem-proof-list li { min-height:86px; padding:15px; grid-template-columns:40px 1fr; }.sem-proof-list li > i { width:40px; height:40px; }.sem-proof-list li:not(:last-child)::after { content:"↓"; right:auto; left:23px; top:auto; bottom:-18px; width:20px; height:20px; transform:none; font-size:10px; }.sem-proof-list li:nth-child(2)::after { display:grid; }
  .sem-section,#sem-cases { width:calc(100% - 36px); padding:78px 0; }.sem-section-head { text-align:left; }.sem-section-head h2,.sem-benefit-copy h2,.sem-faq-inner h2 { font-size:34px; }.sem-benefit-copy h2 { font-size:32px; }.sem-benefit-copy h2 span { white-space:normal; }.sem-case-grid,.sem-steps ol { grid-template-columns:1fr; }.sem-floating-wall { height:auto; display:grid; gap:14px; }.sem-wall-card,.sem-wall-card-1,.sem-wall-card-2,.sem-wall-card-3,.sem-wall-card-4,.sem-wall-card-5 { position:relative; inset:auto; width:100%; animation:none; transform:none; }.sem-wall-card-inner > div { min-height:58px; }.sem-workflow-combined { width:calc(100% - 36px); padding:40px 16px 34px; border-radius:18px; }.sem-workflow-combined .sem-section-head > span { margin-left:0; }.sem-workflow-combined ol { margin-top:32px; }.sem-real-case { height:auto; aspect-ratio:16/9; padding:7px; cursor:default; }.sem-real-case > span { left:14px; top:14px; }.sem-case-copy p { min-height:auto; }.sem-center-action .sem-primary { width:100%; }.sem-benefit-grid article { grid-template-columns:42px 1fr; padding:20px; }.sem-benefit-grid i { width:38px; height:38px; border-radius:10px; }.sem-benefit-grid h3 { font-size:17px; }.sem-steps li { min-height:180px; }.sem-steps li:not(:last-child)::after { content:"↓"; right:50%; top:auto; bottom:-14px; transform:translateX(50%); }.sem-faq-list summary { font-size:15px; }.sem-faq-list p { margin-right:20px; }
  .sem-final { width:calc(100% - 36px); margin:72px auto 94px; padding:36px 26px; align-items:flex-start; flex-direction:column; }.sem-final > a { width:100%; justify-content:center; }.sem-footer { width:calc(100% - 36px); padding-bottom:90px; grid-template-columns:1fr; }.sem-footer p { display:none; }.sem-mobile-cta { position:fixed; left:12px; right:12px; bottom:12px; z-index:1200; min-height:54px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(255,255,255,.55); border-radius:14px; color:#fff; background:linear-gradient(110deg,var(--sem-blue),var(--sem-purple)); font-weight:850; box-shadow:0 16px 34px rgba(18,100,244,.33); }
}

@media (prefers-reduced-motion:reduce) { .sem-output-carousel img { animation:none; }.sem-output-carousel img:first-child { opacity:1; }.sem-sweep-input,.sem-sweep-beam { display:none; }.sem-sweep-output { clip-path:none; animation:none; }.sem-sweep-output > span { opacity:1; animation:none; }.sem-wall-card { animation:none; } }


/* C版独立静态站补充样式 */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
#product, #workflow, #sem-cases, #faq { scroll-margin-top: 96px; }
.static-footer { border-top: 1px solid #e7eef9; padding: 28px 20px 100px; color: #667792; background: #fff; }
.static-footer-inner { width: min(1180px, 100%); margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.static-footer a { color: #2266f5; }
.static-footer p { margin: 0; }
.mobile-menu summary { cursor: pointer; }
@media (max-width: 760px) {
  .static-footer-inner { display: block; }
  .static-footer p + p { margin-top: 10px; }
}