:root { --ink:#142044; --muted:#65718b; --line:#e2e6f0; --blue:#4c54ed; --soft:#f0f1ff; --canvas:#f7f8fc; --paper:#fff; color-scheme:light; scroll-behavior:auto; scroll-padding-top:100px; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font:15px/1.65 Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button,a,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p,figure { margin:0; }
h1,h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.045em; line-height:1.08; }
h1 { font-size:clamp(44px,6.2vw,82px); }
h2 { font-size:clamp(36px,4vw,52px); }
em { font-weight:400; color:var(--blue); }
.wrap { width:min(1120px,calc(100% - 64px)); margin-inline:auto; }
.skip { position:absolute; left:24px; top:-80px; padding:10px 18px; background:var(--paper); z-index:20; }
.skip:focus { top:12px; }
.site-header { width:min(1320px,calc(100% - 48px)); margin:20px auto 0; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; padding:14px 28px; border:1px solid var(--line); border-radius:12px; background:#ffffffed; position:relative; z-index:5; box-shadow:0 3px 0 #14204406; }
.logo { font:400 36px/1 Georgia,serif; letter-spacing:-2px; }
.logo span { color:var(--blue); }
.site-header nav { display:flex; gap:34px; font-size:13px; }
.site-header nav a:hover,.header-back:hover,.site-footer nav a:hover { color:var(--blue); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:52px; padding:14px 23px; border-radius:7px; border:1px solid var(--ink); background:var(--ink); color:white; font-size:13px; font-weight:600; line-height:1.5; transition:background .2s,transform .2s,box-shadow .2s; }
.button:hover { background:#26355a; transform:translateY(-2px); box-shadow:0 5px 12px #14204416; }
.button span { font-size:18px; font-weight:400; }
.button-small { min-height:42px; padding:8px 18px; gap:24px; font-size:12px; }
.button-outline { background:white; border-color:#d5daeb; color:var(--ink); }
.button-outline:hover { background:var(--soft); border-color:#b8befa; }
.eyebrow { color:#69729b; font-size:10px; font-weight:600; letter-spacing:1.7px; text-transform:uppercase; display:flex; gap:9px; align-items:center; }
.hero { text-align:center; position:relative; padding:70px 0 46px; }
.hero .eyebrow { justify-content:center; margin-bottom:24px; }
.tiny-star { font-size:20px; color:var(--blue); line-height:1; }
.hero h1 { position:relative; z-index:1; }
.hero-copy { margin:25px auto 26px; font-size:17px; line-height:1.7; color:var(--muted); max-width:560px; }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:26px; }
.video-link { display:inline-flex; align-items:center; gap:10px; font-size:13px; }
.play-icon { width:29px; height:29px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d3d8ea; border-radius:50%; font-size:9px; color:var(--blue); padding-left:2px; }
.video-link:hover .play-icon { background:var(--soft); border-color:var(--blue); }
.video-duration { color:#7b849a; font-size:11px; }
.hero-note { margin-top:18px; color:#828aa0; font-size:11px; }
.hero-decoration { position:absolute; color:#bac0ff; line-height:1; user-select:none; z-index:0; }
.decoration-one { left:2%; top:138px; font-size:52px; transform:rotate(14deg); }
.decoration-two { right:0; top:255px; font-size:91px; }
.product-section { position:relative; padding:0 35px; }
.product-section:before { content:''; position:absolute; z-index:-1; inset:48px -40px 0; border-radius:24px; background:radial-gradient(ellipse at 50% 65%,#dcdfff88,transparent 72%); }
.product-frame { background:white; border:1px solid #d9deed; border-radius:13px; overflow:hidden; box-shadow:0 22px 65px -30px #39418150,0 3px 0 #e9ebf3; }
.frame-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:12px 20px; border-bottom:1px solid var(--line); min-height:58px; }
.frame-label { display:flex; align-items:center; gap:18px; font-size:11px; color:#6c7590; }
.window-dots { display:flex; gap:5px; }
.window-dots i { width:6px; height:6px; border:1px solid #bec5d6; border-radius:50%; }
.view-switch { display:flex; border-radius:6px; padding:3px; background:#f0f2f8; gap:3px; }
.view-switch button { background:transparent; color:#788099; border:0; padding:7px 13px; border-radius:4px; font-size:10px; }
.view-switch button.selected { color:var(--ink); background:white; box-shadow:0 1px 5px #14204412; }
.preview-image { background:var(--canvas); aspect-ratio:1280/720; overflow:hidden; }
.preview-image img { width:100%; height:100%; object-fit:cover; object-position:top; }
.frame-caption { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:15px 20px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }
.frame-caption a { white-space:nowrap; color:var(--blue); }
.media-note { text-align:center; color:#8b92a4; font-size:10px; margin-top:17px; }
.principles { display:flex; justify-content:center; gap:64px; padding:44px 0 54px; border-bottom:1px solid var(--line); }
.principles p { display:flex; align-items:center; gap:11px; font-size:12px; color:#69748b; }
.principles span { color:var(--blue); font-size:19px; }
.section { padding-top:105px; padding-bottom:110px; }
.section-intro { max-width:610px; margin-bottom:45px; }
.section-intro .eyebrow,.evidence-copy .eyebrow { margin-bottom:18px; }
.section-intro>p:last-child { max-width:440px; color:var(--muted); margin-top:22px; }
.workflow-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:60px; align-items:start; }
.step { border-top:1px solid var(--line); }
.step:last-child { border-bottom:1px solid var(--line); }
.step summary { list-style:none; display:flex; align-items:center; gap:16px; cursor:pointer; padding:21px 0; font-size:16px; letter-spacing:-.3px; }
.step summary::-webkit-details-marker { display:none; }
.step-number { color:#8a92a6; font-size:10px; letter-spacing:1px; }
.step-symbol { margin-left:auto; color:#8790a6; font-size:20px; font-weight:300; }
.step[open] summary { color:var(--blue); }
.step[open] .step-symbol { transform:rotate(45deg); color:var(--blue); }
.step-body { padding:0 15px 25px 32px; color:var(--muted); font-size:13px; }
.step-caption { display:block; margin-top:16px; font-size:10px; color:#6c72ae; }
.workflow-preview { padding:12px; background:#eceefb; border:1px solid #e3e5f5; border-radius:12px; margin-top:0; }
.small-frame-heading { display:flex; align-items:center; gap:8px; padding:4px 2px 13px; font-size:10px; color:#666f96; }
.small-dot { width:5px; height:5px; border-radius:50%; background:var(--blue); display:inline-block; flex-shrink:0; }
.example-label { margin-left:auto; font-size:9px; padding:1px 7px; background:#ffffff9c; border-radius:4px; }
.workflow-preview img { border:1px solid #e0e3f0; border-radius:5px; width:100%; aspect-ratio:1280/720; object-fit:cover; object-position:top; }
.workflow-preview figcaption { font-size:10px; color:#78809c; padding:13px 2px 3px; }
.evidence-section { padding:96px 0; background:white; border-top:1px solid #edf0f6; border-bottom:1px solid #edf0f6; }
.evidence-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:80px; align-items:center; }
.evidence-visual { position:relative; background:#f0f1fc; border-radius:12px; padding:28px 0 28px 28px; }
.evidence-frame { overflow:hidden; height:490px; border:1px solid #dee2f0; border-radius:8px 0 0 8px; border-right:0; box-shadow:0 10px 25px #3c498016; }
.evidence-frame img { height:100%; width:100%; object-fit:cover; object-position:87% top; }
.evidence-label { position:absolute; bottom:55px; left:-18px; border:1px solid #dde0f1; background:white; border-radius:7px; box-shadow:0 8px 20px #19244a10; padding:12px 18px; font-size:11px; }
.evidence-label span { margin-right:8px; color:var(--blue); }
.evidence-copy>p:not(.eyebrow) { color:var(--muted); margin-top:23px; font-size:14px; }
.feature-list { padding:0; margin:26px 0 24px; list-style:none; }
.feature-list li { display:flex; gap:16px; margin-top:22px; }
.feature-list li>span { padding-top:3px; color:#858bbb; font-size:10px; }
.feature-list h3 { font-size:13px; font-weight:600; margin-bottom:6px; }
.feature-list p { font-size:12px; color:var(--muted); line-height:1.7; }
.text-link { display:inline-flex; gap:22px; color:var(--blue); font-size:12px; }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.closing { text-align:center; position:relative; padding:100px 32px; margin-top:75px; margin-bottom:75px; background:#edf0ff; border:1px solid #e2e5f8; border-radius:14px; overflow:hidden; }
.closing .eyebrow { justify-content:center; margin-bottom:22px; }
.closing h2 { font-size:clamp(38px,5.1vw,64px); }
.closing>p:not(.eyebrow) { color:var(--muted); margin:25px 0; font-size:14px; }
.closing-film { display:block; width:fit-content; margin:17px auto 0; font-size:11px; color:#727b9d; text-decoration:underline; text-underline-offset:4px; }
.closing-star { position:absolute; left:65px; top:55px; font-size:64px; color:#b7bef6; transform:rotate(13deg); }
.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:25px; padding:5px 0 30px; }
.site-footer .logo { font-size:32px; }
.site-footer>div>p { margin-top:12px; color:var(--muted); font-size:11px; }
.site-footer nav { display:flex; gap:28px; font-size:12px; }
.footer-note { width:100%; padding-top:24px; margin-top:5px; border-top:1px solid var(--line); color:#9299ab; font-size:10px; }
.header-back { color:var(--muted); margin-left:auto; font-size:12px; }
.demo-main { max-width:1030px; padding-top:65px; padding-bottom:56px; }
.demo-intro { max-width:690px; }
.demo-intro .eyebrow { margin-bottom:22px; }
.demo-intro h1 { font-size:clamp(40px,4.8vw,62px); }
.demo-intro>p:last-child { color:var(--muted); margin-top:22px; max-width:575px; font-size:15px; }
.demo-options { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:38px 0 25px; }
.demo-option { padding:28px; background:white; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; }
.demo-option.recommended { background:linear-gradient(155deg,#f0f1ff,white 78%); border-color:#cdd2f6; }
.option-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#6e7797; font-size:9px; text-transform:uppercase; letter-spacing:.7px; }
.pill { padding:4px 7px; background:#e4e6fc; color:#555fc0; border-radius:4px; text-transform:none; letter-spacing:0; white-space:nowrap; font-size:9px; }
.pill.neutral { background:#f2f4f8; color:#7c869e; }
.case-preview { display:flex; align-items:center; gap:11px; padding:20px 0 24px; margin-top:13px; min-height:103px; }
.case-preview img { width:40px; height:40px; object-fit:cover; border-radius:50%; }
.case-preview strong { display:block; font-size:12px; font-weight:500; }
.case-preview div>span { display:block; font-size:9px; color:#8991a4; margin-top:2px; }
.case-status { margin-left:auto; font-size:8px; color:#647093; background:#e9ecfa; padding:4px 6px; border-radius:4px; white-space:nowrap; }
.journey-preview { display:flex; align-items:center; gap:12px; padding:25px 0; margin-top:13px; min-height:103px; font-size:9px; color:#73809c; }
.journey-preview span { display:flex; align-items:center; gap:6px; }
.journey-preview i { display:grid; place-items:center; font-style:normal; width:22px; height:22px; border-radius:50%; border:1px solid #dce0ef; color:#747dae; }
.journey-preview b { font-weight:400; color:#c2c7db; }
.demo-option h2 { font-size:32px; letter-spacing:-1.2px; margin-bottom:15px; }
.demo-option>p { font-size:13px; color:var(--muted); line-height:1.8; }
.option-points { list-style:none; padding:0; margin:22px 0 26px; font-size:11px; color:#62708c; }
.option-points li { margin:8px 0; }
.option-points li:before { content:'✓'; color:var(--blue); font-size:10px; margin-right:10px; }
.demo-option .button { width:100%; margin-top:auto; justify-content:space-between; }
.demo-disclosure { display:flex; gap:12px; color:#858da2; font-size:10px; line-height:1.8; padding:0 5px; }
.demo-disclosure>span { font-size:18px; color:#7b82ba; }
.demo-disclosure strong { color:#65718b; font-weight:600; }
.demo-film-link { display:flex; align-items:center; justify-content:center; gap:10px; width:fit-content; margin:30px auto 0; font-size:11px; color:#667198; }
.site-footer.compact { border-top:1px solid var(--line); padding-top:26px; padding-bottom:26px; font-size:11px; color:var(--muted); }
.site-footer.compact .logo { color:var(--ink); }
.film-main { max-width:1040px; padding:55px 0 35px; }
.film-main .eyebrow { margin-bottom:20px; }
.film-main h1 { font-size:clamp(37px,5vw,60px); }
.film-main>p:not(.eyebrow) { color:var(--muted); margin:20px 0 30px; }
.film-main video { display:block; width:100%; aspect-ratio:16/9; background:#142044; border-radius:12px; box-shadow:0 15px 55px -20px #14204450; }
.film-actions { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:25px; font-size:12px; color:var(--muted); }
@media(min-width:800px) { .hero h1 { animation:arrive .65s ease both; } .hero-copy { animation:arrive .65s .06s ease both; } .hero-actions { animation:arrive .65s .12s ease both; } }
@keyframes arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1000px) { .hero-decoration { opacity:.6; }.decoration-one { left:-10px; font-size:36px; }.decoration-two { right:-15px; font-size:65px; }.principles { gap:30px; }.workflow-grid { gap:32px; grid-template-columns:1fr 1fr; }.evidence-grid { gap:45px; }.evidence-visual { padding:20px 0 20px 20px; }.evidence-frame { height:430px; }.case-status { display:none; }.journey-preview { gap:7px; font-size:8px; }.demo-option { padding:24px; }.demo-option h2 { font-size:29px; }.option-meta { font-size:8px; } }
@media(max-width:760px) { .wrap { width:calc(100% - 40px); }.site-header { width:calc(100% - 28px); margin-top:14px; padding:13px 17px; min-height:68px; gap:15px; }.site-header nav { gap:20px; font-size:11px; }.logo { font-size:31px; }.button-small { padding:8px 13px; gap:12px; }.hero { padding:55px 0 34px; }.hero h1 { font-size:clamp(43px,7vw,58px); }.hero-copy { font-size:15px; }.hero-decoration { display:none; }.product-section { padding:0; }.frame-caption { font-size:10px; }.principles { gap:12px; justify-content:space-between; padding:30px 0; }.principles p { font-size:9px; gap:5px; }.principles span { font-size:16px; }.section { padding:65px 0; }.section-intro { margin-bottom:30px; }.workflow-grid { grid-template-columns:1fr; gap:28px; }.section-intro>p:last-child { font-size:14px; }.evidence-section { padding:60px 0; }.evidence-grid { grid-template-columns:1fr; gap:42px; }.evidence-copy { grid-row:1; }.evidence-visual { padding:20px; }.evidence-frame { height:auto; border:1px solid #dee2f0; border-radius:6px; }.evidence-frame img { width:100%; height:auto; }.evidence-label { left:0; bottom:6px; }.closing { padding:65px 22px; margin-top:45px; margin-bottom:45px; }.closing-star { font-size:38px; left:24px; top:17px; }.closing>p:not(.eyebrow) { max-width:330px; margin:24px auto; }.demo-main { padding-top:45px; }.demo-options { gap:18px; grid-template-columns:1fr; }.demo-option { padding:25px; }.case-status { display:block; }.journey-preview { font-size:10px; gap:16px; }.option-meta { font-size:9px; }.demo-option h2 { font-size:34px; }.film-main { padding-top:40px; } }
@media(max-width:480px) { .site-header nav { display:none; }.site-header .header-back { display:none; }.hero .eyebrow { font-size:8px; letter-spacing:1.2px; margin-bottom:21px; }.hero h1 { font-size:43px; letter-spacing:-2px; }.hero h1 br { display:none; }.hero-copy { font-size:14px; margin-top:22px; }.hero-copy br { display:none; }.hero-actions { gap:20px; flex-direction:column; }.hero-note { font-size:9px; margin-top:18px; }.frame-toolbar { padding:10px; gap:8px; }.frame-label { font-size:9px; gap:0; }.window-dots { display:none; }.view-switch button { padding:6px 8px; font-size:8px; }.frame-caption { gap:10px; padding:12px; font-size:9px; }.frame-caption>span { max-width:210px; }.media-note { font-size:8px; }.principles { flex-wrap:wrap; justify-content:center; gap:12px 22px; }.principles p { font-size:9px; }.section-intro .eyebrow { font-size:8px; }.section-intro h2,.evidence-copy h2 { font-size:37px; }.step summary { font-size:15px; }.closing .eyebrow { font-size:8px; letter-spacing:1px; }.closing h2 { font-size:42px; }.site-footer nav { gap:19px; font-size:11px; }.site-footer { gap:24px; }.footer-note { margin-top:0; }.demo-intro h1 { font-size:40px; }.demo-intro>p:last-child { font-size:14px; }.demo-intro .eyebrow { font-size:9px; }.demo-main { padding-top:38px; }.demo-options { margin-top:28px; }.demo-option { padding:21px; }.option-meta { letter-spacing:.3px; font-size:8px; }.case-preview { gap:9px; }.case-preview div>span { font-size:8px; }.case-status { display:none; }.journey-preview { gap:10px; font-size:8px; }.demo-option h2 { font-size:31px; }.demo-film-link { font-size:10px; gap:8px; }.demo-film-link .play-icon { flex-shrink:0; }.site-footer.compact { gap:20px; }.site-footer.compact>p { display:none; }.film-actions { flex-direction:column; align-items:flex-start; }.film-main>p:not(.eyebrow) { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }

@media(max-width:760px) { .product-section:before { inset:30px 0 0; } }