:root { --ololu-blue:var(--color-brand-primary); --ololu-navy:var(--color-brand-primary-active); --ololu-ink:var(--color-text-primary); --ololu-muted:var(--color-text-muted); --ololu-line:var(--color-border-subtle); --ololu-soft:var(--color-surface-subtle); --ololu-warm:var(--color-surface-page); }
html { scroll-behavior:smooth; }
body { background:var(--ololu-warm); color:var(--ololu-ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
.material-symbols-outlined { font-family:"Material Symbols Outlined"; font-size:1rem; font-style:normal; line-height:1; vertical-align:-.15em; }
.site-header { background:color-mix(in srgb, var(--header-background) 94%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--header-border); }
.brand-lockup { align-items:center; display:inline-flex; text-decoration:none; }
.brand-lockup img { display:block; height:2rem; width:auto; }
.nav-link { color:#414752; font-size:.875rem; } .nav-link:hover,.nav-link:focus { color:var(--ololu-navy); }
.header-cta { white-space:nowrap; }
.link-primary { color:var(--ololu-navy)!important; text-decoration:none; }
.section { padding:4.5rem 0; } .section-soft { background:var(--ololu-soft); } .section-navy { background:var(--ololu-navy); color:white; }
.eyebrow { color:var(--ololu-blue); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.display-title { font-size:clamp(2rem,4vw,3rem); font-weight:700; letter-spacing:-.03em; line-height:1.16; } .section-title { font-size:clamp(1.6rem,2.5vw,2rem); font-weight:650; letter-spacing:-.02em; }
.lead-copy { color:var(--ololu-muted); font-size:1rem; line-height:1.5; max-width:34rem; }
.hero { display:flex; align-items:center; padding:4rem 0 3.5rem; } .hero-art { background:#edf3fc; border:1px solid var(--ololu-line); border-radius:.65rem; height:400px; overflow:hidden; position:relative; box-shadow:0 12px 24px rgba(27,28,28,.06); }.hero-office { height:100%; inset:0; mix-blend-mode:multiply; object-fit:cover; opacity:.45; position:absolute; width:100%; }
.app-window { background:rgba(251,249,248,.72); backdrop-filter:blur(12px); border:1px solid rgba(217,222,232,.5); border-radius:.5rem; box-shadow:0 12px 24px rgba(27,28,28,.06); padding:1rem; position:relative; width:75%; min-height:260px; }
.window-top { height:1.35rem; border-bottom:1px solid var(--ololu-line); margin-bottom:.8rem; } .window-side { width:2.3rem; border-right:1px solid var(--ololu-line); } .window-kpi,.window-card { border:1px solid var(--ololu-line); background:white; border-radius:.35rem; padding:.6rem; } .window-kpi { min-height:58px; } .window-card { min-height:55px; margin-top:.4rem; } .skeleton { background:#edf1f7; border-radius:.2rem; height:.5rem; }
.trust-bar { background:#fff; border-top:1px solid var(--ololu-line); border-bottom:1px solid var(--ololu-line); padding:1.25rem 0; }.trust-title { color:#606874; font-size:.9rem; margin:0 0 .75rem; }.trust-items { align-items:center; display:flex; flex-wrap:wrap; gap:1.35rem 3.5rem; justify-content:center; }.trust-items span { align-items:center; color:#5e6773; display:inline-flex; font-size:.88rem; font-weight:500; gap:.45rem; }.trust-items i { color:var(--ololu-blue); font-size:1rem; line-height:1; }
.icon-disc { align-items:center; background:#d7e2ff; border-radius:50%; color:var(--ololu-navy); display:inline-flex; height:2.5rem; justify-content:center; width:2.5rem; }.icon-disc i{font-size:1.1rem;}
.feature-card,.audience-card,.ecosystem-card { background:white; border:1px solid var(--ololu-line); border-radius:.5rem; height:100%; padding:1.35rem; } .feature-card:hover,.audience-card:hover,.ecosystem-card:hover { border-color:var(--ololu-blue); box-shadow:0 8px 18px rgba(25,47,83,.05); transition:.2s ease; }
.card-title { font-size:1rem; font-weight:600; margin-top:.8rem; } .card-copy { color:var(--ololu-muted); font-size:.78rem; line-height:1.5; }
.simo-panel { background:#002d61; border:1px solid rgba(255,255,255,.25); border-radius:.5rem; padding:1rem; box-shadow:0 12px 24px rgba(0,0,0,.18); }.chat-user { background:#315b99; border-radius:.5rem .5rem .15rem .5rem; color:white; font-size:.75rem; margin-left:auto; padding:.7rem; width:85%; }.chat-simo { background:white; border-radius:.5rem .5rem .5rem .15rem; color:var(--ololu-ink); font-size:.75rem; padding:.8rem; width:92%; }.offer { border:1px solid var(--ololu-line); border-radius:.25rem; font-size:.65rem; margin-top:.55rem; padding:.5rem; }
.journey-step { position:relative; padding:1rem 1rem 1rem 2.8rem; } .journey-step::before { background:var(--ololu-blue); border-radius:50%; color:white; content:attr(data-step); font-size:.75rem; font-weight:700; height:1.55rem; left:0; line-height:1.55rem; position:absolute; text-align:center; top:1rem; width:1.55rem; }
.page-hero { background:linear-gradient(130deg,#f7f9fc 0%,#e6eefb 100%); padding:5rem 0; }.page-hero p { max-width:42rem; }.content-visual { background:#fff; border:1px solid var(--ololu-line); border-radius:.75rem; min-height:280px; padding:1.5rem; }
.article-card { background:#fff; border:1px solid var(--ololu-line); border-radius:.6rem; color:inherit; display:block; height:100%; padding:1.5rem; text-decoration:none; }.article-card:hover { color:inherit; border-color:var(--ololu-blue); }
.contact-panel { background:white; border:1px solid var(--ololu-line); border-radius:.7rem; padding:2rem; }
.site-footer { background:var(--footer-background); color:var(--footer-foreground); }.site-footer a { color:var(--footer-foreground); display:block; font-size:.875rem; margin:.45rem 0; text-decoration:none; }.site-footer a:hover { color:var(--color-brand-primary); }.footer-title { color:var(--footer-heading); font-size:.72rem; font-weight:700; letter-spacing:.08em; margin:0 0 .8rem; text-transform:uppercase; }.footer-bottom { border-top:1px solid var(--footer-border); font-size:.78rem; }
@media (min-width:1200px) { .container { max-width:1080px; } .hero-art { height:360px; } }
@media (max-width:991.98px) { .hero{padding:3rem 0;} .section{padding:3.5rem 0;} .nav-link{padding:.6rem 0;} }
@media (max-width:575.98px) { .brand-lockup img { height:1.75rem; } }