:root { --navy:#101828; --ink:#172033; --slate:#344054; --muted:#667085; --soft:#98a2b3; --canvas:#f7f8fc; --line:#e5e9f0; --coral:#f15f3d; --coral-light:#ff8562; --coral-wash:#fff0eb; --green:#12b76a; color:var(--ink); background:var(--canvas); font-family:Manrope,Arial,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--canvas); }
a { color:inherit; text-decoration:none; } button { font:inherit; }
.site-shell { overflow:hidden; }
.site-header,.hero,.section,.trust-bar,.site-footer { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.site-header { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; height:82px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--navy); font-size:20px; font-weight:800; letter-spacing:-1.15px; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; color:#fff; background:linear-gradient(140deg,var(--coral-light),var(--coral)); border:1px solid rgb(255 255 255 /.3); border-radius:10px; box-shadow:0 8px 16px rgb(241 95 61 /.2); }
.brand-mark svg { width:69%; height:69%; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.15; }
.site-nav { display:flex; align-items:center; gap:28px; color:var(--muted); font-size:13px; font-weight:700; }
.site-nav a:not(.nav-app):hover { color:var(--coral); }
.nav-app { display:inline-flex; align-items:center; gap:7px; margin-left:3px; padding:10px 14px; color:#fff; background:var(--navy); border-radius:8px; box-shadow:0 4px 10px rgb(16 24 40 /.14); }
.nav-app span { color:#ff9a80; font-size:16px; line-height:0; }.menu-toggle { display:none; }
.section-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.hero { min-height:630px; padding:68px 0 62px; }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 20px; color:var(--muted); font-family:"DM Mono",monospace; font-size:10px; font-weight:500; letter-spacing:.82px; text-transform:uppercase; }
.eyebrow i { display:inline-block; width:7px; height:7px; background:var(--coral); border-radius:50%; box-shadow:0 0 0 5px rgb(241 95 61 /.1); }
.hero h1,.section h2,.closing h2 { max-width:620px; margin:0; color:var(--navy); font-size:clamp(43px,5.3vw,68px); font-weight:800; line-height:1.05; letter-spacing:-3.25px; }
.hero h1 em { color:var(--coral); font-style:normal; }.hero-lede { max-width:535px; margin:25px 0 29px; color:var(--muted); font-size:17px; line-height:1.72; }
.hero-actions { display:flex; align-items:center; gap:23px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:0 20px; border-radius:10px; font-size:13px; font-weight:800; transition:transform .18s ease,background .18s ease; }.button:hover { transform:translateY(-2px); }.button span { font-size:19px; font-weight:400; }.button-primary { color:#fff; background:var(--coral); box-shadow:0 10px 22px rgb(241 95 61 /.24); }.button-primary:hover { background:#df4e2f; }
.text-link { display:inline-flex; align-items:center; gap:8px; color:var(--slate); font-size:13px; font-weight:800; }.text-link:hover { color:var(--coral); }.text-link span { color:var(--coral); font-size:17px; }.microcopy { margin:19px 0 0; color:var(--soft); font-size:11px; }
.signal-stage { position:relative; min-height:475px; }.stage-halo { position:absolute; border-radius:50%; filter:blur(1px); }.halo-one { top:2%; right:4%; width:315px; height:315px; background:radial-gradient(circle,rgb(255 133 98 /.22),rgb(255 133 98 / 0) 66%); }.halo-two { bottom:2%; left:3%; width:260px; height:260px; background:radial-gradient(circle,rgb(53 111 184 /.11),rgb(53 111 184 / 0) 69%); }
.product-window { position:absolute; z-index:1; inset:44px 0 30px 20px; overflow:hidden; background:#fff; border:1px solid #e1e6ef; border-radius:18px; box-shadow:0 28px 56px rgb(16 24 40 /.13); }.window-bar { display:flex; align-items:center; gap:12px; height:44px; padding:0 15px; color:var(--soft); background:#fcfcfd; border-bottom:1px solid #edf0f4; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.4px; text-transform:uppercase; }.window-dots { display:flex; gap:5px; }.window-dots i { width:6px; height:6px; background:#d4dae3; border-radius:50%; }.live { display:flex; align-items:center; gap:5px; margin-left:auto; color:#027a48; }.live b,.trust-status b { width:6px; height:6px; background:var(--green); border-radius:50%; }.product-content { padding:22px 22px 18px; }.source-change,.impact-card { padding:15px; border:1px solid #ebedf1; border-radius:11px; background:#fff; }.source-change { background:#fffaf8; border-color:#f8d8d0; }.source-top,.impact-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }.status-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 7px; border-radius:5px; font-size:9px; font-weight:800; }.status-pill b { width:5px; height:5px; border-radius:50%; }.changed { color:#a74511; background:#fff0cc; }.changed b { background:#f79009; }.high { color:#b42318; background:#fee4e2; }.high b { background:#d92d20; }.timestamp,.confidence { color:var(--soft); font-size:9px; }.source-title { display:flex; align-items:center; gap:9px; margin-top:15px; }.source-glyph,.workflow-glyph { display:grid; place-items:center; flex:0 0 auto; width:27px; height:27px; color:#c9452b; background:#ffeae4; border-radius:8px; font-weight:800; }.source-title strong,.impact-card > strong { display:block; color:var(--ink); font-size:12px; }.source-title small { display:block; margin-top:3px; color:var(--soft); font-size:9px; }.change-lines { display:grid; gap:6px; margin:15px 0 1px 36px; }.change-lines span { display:block; height:5px; background:#f1ddd8; border-radius:9px; }.change-lines span:nth-child(2) { width:78%; }.change-lines span:nth-child(3) { width:59%; }.mapping-flow { display:flex; align-items:center; justify-content:center; gap:10px; height:58px; color:#98a2b3; font-family:"DM Mono",monospace; font-size:8px; text-transform:uppercase; letter-spacing:.6px; }.mapping-flow span { width:43px; height:1px; background:#cfd7e3; }.impact-card { box-shadow:0 6px 16px rgb(16 24 40 /.04); }.impact-card > strong { margin:13px 0 11px; }.workflow-row { display:flex; align-items:center; gap:8px; padding:10px; color:var(--slate); background:#f7f8fc; border-radius:7px; font-size:10px; font-weight:700; }.workflow-row .workflow-glyph { width:22px; height:22px; color:#2b68c8; background:#e9f2ff; font-size:12px; }.workflow-row i { margin-left:auto; color:var(--coral); font-size:14px; font-style:normal; }.impact-card p { margin:9px 0 0; color:var(--soft); font-size:9px; }.floating-note { position:absolute; z-index:2; display:flex; align-items:center; gap:9px; padding:10px 13px; background:#fff; border:1px solid #e8ebf0; border-radius:10px; box-shadow:0 12px 24px rgb(16 24 40 /.11); }.note-one { top:18px; left:-19px; }.note-two { right:-20px; bottom:3px; }.note-icon { display:grid; place-items:center; width:21px; height:21px; color:#027a48; background:#eafaf1; border-radius:50%; font-size:11px; font-weight:800; }.note-icon.coral { color:#b54708; background:#fff0cc; }.floating-note b,.floating-note small { display:block; }.floating-note b { color:var(--slate); font-size:10px; }.floating-note small { margin-top:2px; color:var(--soft); font-size:8px; }
.trust-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:88px; padding:0 28px; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 8px 20px rgb(16 24 40 /.025); }.trust-bar p { margin:0; color:var(--slate); font-size:13px; font-weight:800; }.trust-bar > div { display:flex; align-items:center; gap:12px; color:var(--muted); font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.45px; text-transform:uppercase; }.trust-bar i { width:18px; height:1px; background:#d7dde6; }.trust-status { display:flex; align-items:center; gap:7px; color:var(--soft); font-size:10px; }
.section { padding:143px 0 0; }.section-heading { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:end; margin-bottom:47px; }.section h2 { font-size:clamp(34px,4vw,48px); letter-spacing:-2.1px; }.section-heading .eyebrow { grid-column:1 / -1; margin-bottom:-39px; }.section-heading > p:last-child { max-width:505px; margin:0; color:var(--muted); font-size:16px; line-height:1.7; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.feature-card { position:relative; min-height:298px; padding:25px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 22px rgb(16 24 40 /.025); transition:transform .2s ease,box-shadow .2s ease; }.feature-card:hover { transform:translateY(-5px); box-shadow:0 20px 35px rgb(16 24 40 /.08); }.feature-number { position:absolute; top:25px; right:25px; color:#b2bccb; font-family:"DM Mono",monospace; font-size:10px; }.feature-icon { display:grid; place-items:center; width:43px; height:43px; border-radius:12px; }.feature-icon svg { width:22px; height:22px; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }.detect { color:#b54708; background:#fff3df; }.map { color:#2b68c8; background:#e9f2ff; }.act { color:#027a48; background:#eafaf1; }.feature-card h3 { margin:45px 0 10px; color:var(--navy); font-size:18px; letter-spacing:-.45px; }.feature-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.72; }
.workflow-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; padding-bottom:13px; }.workflow-copy p:not(.eyebrow) { max-width:440px; margin:22px 0 26px; color:var(--muted); font-size:15px; line-height:1.75; }.accent { color:var(--coral); }.workflow-steps { position:relative; display:grid; gap:10px; margin:0; padding:0; list-style:none; }.workflow-steps::before { position:absolute; top:47px; bottom:47px; left:22px; width:1px; background:#dce2eb; content:""; }.workflow-steps li { position:relative; display:flex; align-items:center; gap:17px; min-height:93px; padding:16px; background:#fff; border:1px solid var(--line); border-radius:12px; }.workflow-steps li > span { display:grid; place-items:center; z-index:1; width:29px; height:29px; color:var(--coral); background:#fff0eb; border-radius:9px; font-family:"DM Mono",monospace; font-size:10px; font-weight:500; }.workflow-steps b,.workflow-steps small { display:block; }.workflow-steps b { color:var(--slate); font-size:13px; }.workflow-steps small { max-width:300px; margin-top:4px; color:var(--soft); font-size:11px; line-height:1.5; }
.security-section { padding-top:130px; }.security-panel { display:grid; grid-template-columns:1.15fr .85fr; gap:60px; padding:57px 58px; color:#d5dce8; background:var(--navy); border-radius:18px 18px 0 0; }.eyebrow.light { color:#aebbd0; }.security-panel .eyebrow i { background:#ff8562; }.security-panel h2,.closing h2 { color:#fff; }.security-panel h2 { font-size:clamp(31px,3.7vw,45px); }.security-panel p:not(.eyebrow) { max-width:580px; margin:22px 0 0; color:#aebbd0; font-size:15px; line-height:1.75; }.security-panel ul { display:grid; align-content:center; gap:18px; margin:0; padding:0; list-style:none; font-size:13px; font-weight:700; }.security-panel li { display:flex; align-items:center; gap:10px; }.security-panel li span { display:grid; place-items:center; width:20px; height:20px; color:#101828; background:#8ee6ba; border-radius:50%; font-size:11px; }.security-metrics { display:grid; grid-template-columns:repeat(3,1fr); padding:27px 58px; background:#172238; border-top:1px solid #2b3850; border-radius:0 0 18px 18px; }.security-metrics div { padding:0 26px; border-left:1px solid #31405a; }.security-metrics div:first-child { padding-left:0; border:0; }.security-metrics strong,.security-metrics span { display:block; }.security-metrics strong { color:#fff; font-size:17px; }.security-metrics span { margin-top:5px; color:#9eacc2; font-size:10px; }
.closing { margin-top:143px; padding:70px 72px; background:linear-gradient(128deg,#101828 0%,#172941 68%,#314e67 100%); border-radius:18px; }.closing h2 { max-width:650px; font-size:clamp(34px,4vw,50px); }.closing p:not(.eyebrow) { max-width:550px; margin:20px 0 0; color:#b9c5d8; font-size:15px; line-height:1.7; }.closing-action { display:grid; justify-items:start; gap:14px; }.button-light { color:var(--navy); background:#fff; box-shadow:0 10px 25px rgb(0 0 0 /.17); }.closing-action small { color:#aebbd0; font-size:10px; }
.site-footer { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:27px; padding:39px 0 42px; color:var(--muted); }.site-footer .brand { font-size:18px; }.site-footer .brand-mark { width:27px; height:27px; border-radius:8px; }.site-footer p,.site-footer small { margin:0; font-size:11px; }.site-footer > a:last-of-type { color:var(--coral); font-size:11px; font-weight:800; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:920px) { .site-header,.hero,.section,.trust-bar,.site-footer { width:min(100% - 40px,680px); }.hero { grid-template-columns:1fr; gap:30px; padding-top:56px; }.hero-copy { max-width:650px; }.signal-stage { min-height:450px; max-width:620px; width:100%; }.section-heading { grid-template-columns:1fr; gap:17px; }.section-heading .eyebrow { grid-column:auto; margin-bottom:0; }.feature-grid { grid-template-columns:1fr; }.feature-card { min-height:230px; }.feature-card h3 { margin-top:29px; }.workflow-section { grid-template-columns:1fr; gap:50px; }.security-panel { grid-template-columns:1fr; gap:35px; padding:43px 38px; }.security-metrics { padding:24px 38px; }.closing { grid-template-columns:1fr; gap:35px; padding:52px 42px; }.trust-status { display:none; } }
@media (max-width:620px) { .site-header,.hero,.section,.trust-bar,.site-footer { width:calc(100% - 32px); }.site-header { height:72px; }.site-nav { position:absolute; top:64px; right:0; left:0; display:none; align-items:stretch; gap:0; padding:10px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 36px rgb(16 24 40 /.12); }.site-nav.open { display:grid; }.site-nav a { padding:12px; }.nav-app { justify-content:center; margin:5px 0 0; }.menu-toggle { display:grid; gap:5px; padding:8px; background:transparent; border:0; }.menu-toggle span { display:block; width:19px; height:1.5px; background:var(--slate); }.hero { min-height:0; padding:49px 0 73px; }.hero h1,.section h2,.closing h2 { font-size:40px; letter-spacing:-2.1px; }.hero-lede { margin:20px 0 25px; font-size:15px; }.hero-actions { flex-wrap:wrap; gap:17px; }.signal-stage { min-height:395px; }.product-window { inset:28px 0 27px 0; border-radius:14px; }.product-content { padding:14px; }.note-one { top:0; left:-6px; }.note-two { right:-8px; bottom:0; }.floating-note { padding:8px 9px; }.floating-note small { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.trust-bar { display:grid; gap:10px; padding:20px; }.trust-bar > div { justify-content:flex-start; }.section { padding-top:92px; }.section-heading { margin-bottom:30px; }.feature-card { min-height:0; padding:22px; }.workflow-section { gap:38px; }.security-section { padding-top:92px; }.security-panel { padding:36px 25px; }.security-metrics { gap:13px; padding:20px 25px; }.security-metrics div { padding:0 0 0 13px; }.security-metrics strong { font-size:14px; }.security-metrics span { font-size:9px; }.closing { margin-top:92px; padding:39px 27px; }.site-footer { grid-template-columns:1fr 1fr; gap:19px; padding:32px 0; }.site-footer p { grid-column:1 / -1; }.site-footer small { text-align:right; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; } }