:root { --ink: #14233d; --muted: #54647b; --line: #e1e8f2; --paper: #fff; --soft: #f5f7fc; --nav: #2458df; --green: #2458df; --blue: #2458df; --shadow: 0 16px 50px rgba(27, 50, 94, .06); }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { -webkit-font-smoothing: antialiased; }
a { transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
a:focus-visible { outline: 3px solid #e9951b; outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: #fff; color: var(--ink); }
.skip-link:focus { top: 12px; }
.topbar { background: rgba(255,255,255,.95); }
.brand { font-size: 1.25rem; letter-spacing: -.6px; }
.brand-mark { border-radius: 12px; background: linear-gradient(140deg, #356bf2, #193dad); }
.nav-link { font-size: .88rem; font-weight: 600; }
.nav-link:hover { background: #edf2ff; }
.hero { min-height: auto; padding: 85px 0 42px; background: radial-gradient(ellipse at 85% 15%, #dce7ff 0, transparent 48%), radial-gradient(ellipse at 0 75%, #e8f6fa 0, transparent 42%), #f8faff; }
.eyebrow { color: #315cc5; border-color: #dce5f7; background: #fff; border-radius: 999px; font-size: .72rem; letter-spacing: 1.5px; padding: 9px 14px; }
h1 { max-width: 1000px; font-size: clamp(2.6rem, 5.5vw, 4.8rem); letter-spacing: -3px; line-height: 1.09; margin: 25px 0; font-weight: 800; }
h1 em { color: #2458df; font-style: normal; }
.lead { color: var(--muted); max-width: 660px; font-size: 1.14rem; line-height: 1.8; }
.btn-main, .btn-ghost { border-radius: 11px; padding: 13px 19px; font-size: .9rem; font-weight: 650; }
.btn-main { box-shadow: 0 5px 14px #2458df20; }
.btn-main:hover { background: #1944b5; transform: translateY(-2px); }
.hero-note { color: var(--muted); font-size: .82rem; margin-top: 25px; }
.hero-note span { color: #90a5c5; padding: 0 8px; }
.hero-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 16px; margin-top: 45px; }
.mini { position: relative; border-radius: 16px; background: #ffffffd9; padding: 22px; box-shadow: none; }
.mini::after { content: '↗'; position: absolute; right: 20px; top: 20px; color: #72839d; }
.mini:hover { transform: translateY(-4px); border-color: #a8bfee; box-shadow: var(--shadow); }
.mini i { font-size: 1.25rem; }
.mini strong { font-size: 1.05rem; }
.mini span { font-size: .85rem; }
.section-pad { padding: 80px 0; }
.section-kicker { display: block; font-size: .72rem; font-weight: 800; letter-spacing: 1.8px; color: #315cc5; margin-bottom: 12px; }
.section-head { margin-bottom: 32px; }
.section-head h2, .contact-inner h2 { letter-spacing: -1px; font-weight: 750; margin-bottom: 12px; }
.section-head p { max-width: 650px; }
.system-card { border-radius: 24px; margin-bottom: 32px; }
.system-card:last-child { margin-bottom: 0; }
.system-copy { padding: clamp(24px, 3vw, 40px); }
.system-title h3 { letter-spacing: -.7px; font-weight: 750; }
.system-title > i { display: none; }
.system-title span { font-size: .9rem; font-weight: 500; }
.badge-soft { border-radius: 999px; font-size: .72rem; padding: 7px 12px; }
.summary { font-size: 1rem; line-height: 1.8; }
.audience { border-left: 3px solid var(--accent); padding: 10px 14px; background: #f6f8fc; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.audience i { color: var(--accent); margin-right: 5px; }
.feature-grid { grid-template-columns: 1fr; gap: 18px; margin: 24px 0; }
.feature-block { padding: 0; border: 0; background: transparent; }
.feature-block h4 { font-size: .9rem; }
.feature-block h4 i { color: var(--accent); }
.feature-block li { font-size: .89rem; line-height: 1.6; }
.media-wrap { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, #f7f9fd), #eef3fa); align-content: center; gap: 24px; border: 0; padding: clamp(20px, 3vw, 38px); }
.photo-panel { min-height: 250px; border-radius: 16px; border-color: #ffffff; box-shadow: 0 10px 25px #14233d12; }
.system-shot { border-radius: 14px; box-shadow: 0 20px 40px #14233d20; }
.shot-grid { grid-template-columns: 1fr; }
.shot-panel.compact { display: none; }
.shot-header { flex-wrap: wrap; }
.shot-header h3 { font-size: 1.05rem; }
.shot-main { min-width: 0; }
.shot-row { font-size: .82rem; }
.illustration-note { text-align: center; font-size: .72rem; color: var(--muted); margin: 0; }
.action-row { gap: 18px; }
.product-contact { font-size: .85rem; font-weight: 650; color: #2458df; }
.proof-band { background: #112344; padding: 72px 0; }
.proof-band .section-kicker { color: #92b7ff; }
.proof-band .section-head p { color: #b9c8df; }
.proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.proof { padding: 28px; border-radius: 16px; display: flex; flex-direction: column; gap: 14px; }
.proof:hover { background: #ffffff12; border-color: #89a8de; transform: translateY(-3px); }
.proof small { font-size: .65rem; letter-spacing: 1.3px; color: #9bbcf4; }
.proof b { font-size: 1.2rem; }
.proof span { line-height: 1.7; color: #c7d3e5; }
.proof strong { font-size: .82rem; color: #a8c7ff; margin-top: auto; }
.contact-section { background: #edf3ff; padding: 65px 0; }
.contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.contact-inner h2 { font-size: clamp(1.6rem, 3vw, 2rem); }
.contact-inner p { color: var(--muted); margin-bottom: 0; }
.contact-inner .btn-main { flex-shrink: 0; }
footer { font-size: .82rem; }
footer a { color: var(--muted); }
@media (max-width: 991.98px) { .hero { padding-top: 55px; } .hero-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .proof-grid { grid-template-columns: 1fr; } .contact-inner { align-items: flex-start; flex-direction: column; } .media-wrap { border-top: 1px solid var(--line); } .photo-panel { min-height: 290px; } }
@media (max-width: 575.98px) { html { scroll-padding-top: 90px; } .topbar .btn-main { width: auto; padding: 10px 12px; font-size: .78rem; } .brand { font-size: 1.05rem; } .brand-mark { width: 30px; height: 30px; } .hero { padding: 40px 0 26px; } h1 { letter-spacing: -1.5px; } .eyebrow { font-size: .6rem; letter-spacing: .8px; } .lead { font-size: 1rem; } .hero-strip { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; } .mini { padding: 16px 20px; } .mini i { float: left; margin: 12px 16px 12px 0; } .mini strong { margin-top: 0; } .mini span { padding-right: 12px; } .hero-note { font-size: .7rem; line-height: 1.8; } .hero-note span { padding: 0 3px; } .section-pad { padding: 45px 0; } .system-card { border-radius: 18px; } .photo-panel { min-height: 190px; } .shot-row { gap: 6px; font-size: .72rem; } .shot-panel { padding: 9px; } .shot-main { padding: 9px; } .proof-band { padding: 45px 0; } .product-contact { padding: 6px 0; } .contact-section { padding: 45px 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } a { transition: none; } }
.hero-layout { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 45px; }
.hero-copy h1 { font-size: clamp(2.5rem, 4.1vw, 3.9rem); letter-spacing: -2px; }
.hero-visual { margin: 0; position: relative; padding-bottom: 30px; min-width: 0; }
.hero-visual > img { display: block; width: 100%; height: 460px; object-fit: cover; border-radius: 26px; box-shadow: 0 24px 65px #17325b20; }
.hero-visual figcaption { position: absolute; bottom: 0; left: 20px; right: 20px; display: flex; gap: 14px; align-items: center; background: #fff; padding: 20px; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.hero-visual strong, .hero-visual small { display: block; }
.hero-visual strong { font-size: .92rem; }
.hero-visual small { color: var(--muted); font-size: .79rem; margin-top: 5px; }
.visual-icon { color: #2458df; background: #edf3ff; border-radius: 12px; padding: 12px; }
.use-cases { background: #fff; }
.use-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.use-case { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.use-case > img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.use-case-copy { padding: 26px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.use-case .section-kicker { color: var(--accent); letter-spacing: 1px; }
.use-case h3 { font-size: 1.3rem; line-height: 1.35; letter-spacing: -.4px; }
.use-case p { color: var(--muted); font-size: .91rem; line-height: 1.75; margin: 10px 0 20px; }
.resource-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; margin-bottom: 22px; }
.resource-tags span { background: #f2f5fa; border: 1px solid #e7edf5; color: #465973; padding: 5px 9px; border-radius: 6px; font-size: .72rem; }
.use-case a { color: var(--accent); font-weight: 700; font-size: .86rem; }
.image-caption { text-align: right; color: var(--muted); font-size: .74rem; margin: 16px 0 0; }
.product-photo { margin: 0; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.product-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.product-photo figcaption { padding: 14px 18px; color: var(--muted); font-size: .85rem; }
.workflow { border-top: 1px solid var(--line); padding: 28px 36px; background: #fafcff; }
.workflow h4 { font-size: 1rem; font-weight: 750; margin: 0 0 20px; }
.workflow ol { list-style: none; counter-reset: workflow; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; }
.workflow li { display: flex; align-items: flex-start; gap: 12px; counter-increment: workflow; }
.workflow li::before { content: '0' counter(workflow); background: color-mix(in srgb, var(--accent) 10%, white); color: var(--accent); font-size: .85rem; font-weight: 800; width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; }
.workflow strong { font-size: .87rem; }
.workflow p { color: var(--muted); font-size: .8rem; line-height: 1.65; margin: 6px 0 0; }
.comparison-scroll { margin-top: 34px; border: 1px solid #ffffff25; border-radius: 16px; overflow-x: auto; }
.comparison-scroll:focus-visible { outline: 3px solid #e9951b; outline-offset: 4px; }
.comparison-table { width: 100%; min-width: 740px; border-collapse: collapse; font-size: .87rem; }
.comparison-table caption { color: #c7d3e5; caption-side: top; padding: 18px 22px; font-size: .84rem; }
.comparison-table th, .comparison-table td { padding: 20px 22px; border-top: 1px solid #ffffff18; text-align: left; line-height: 1.6; vertical-align: top; }
.comparison-table thead { background: #ffffff0a; color: #fff; }
.comparison-table tbody th { color: #e0eaff; font-weight: 600; }
.comparison-table td { color: #bfcfe7; }
.faq-section { background: #fff; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; }
.faq-layout h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -1px; }
.faq-layout p { color: var(--muted); line-height: 1.8; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-list details:first-child { padding-top: 0; }
.faq-list summary { font-weight: 650; cursor: pointer; padding: 4px 0; }
.faq-list summary:focus-visible { outline: 3px solid #e9951b; outline-offset: 4px; }
.faq-list details p { font-size: .92rem; margin: 14px 0 0; }
@media (max-width: 991.98px) { .hero-layout { grid-template-columns: 1fr; gap: 24px; } .hero-visual > img { height: 370px; } .use-case-grid { gap: 14px; } .use-case-copy { padding: 20px; } .workflow ol { gap: 18px; } .faq-layout { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 767.98px) { .use-case-grid, .workflow ol { grid-template-columns: 1fr; } .use-case { max-width: 100%; } .workflow { padding: 24px; } .use-case h3 { font-size: 1.35rem; } .hero-visual > img { height: 300px; } .hero-visual figcaption { left: 12px; right: 12px; padding: 14px; } .hero-visual strong { font-size: .82rem; } .hero-visual small { font-size: .73rem; } .hero-copy h1 { letter-spacing: -1.5px; } }