:root { color-scheme: light; --ink:#172c40; --muted:#556d81; --blue:#196bb6; --deep:#0e3d68; --cyan:#11c9dc; --line:#dbe7f2; --paper:#f6faff; font-family: "Segoe UI", Aptos, Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:#fff; color:var(--ink); }
a { color:inherit; }
img { max-width:100%; height:auto; }
.shell { width:min(1190px, calc(100% - 48px)); margin-inline:auto; }
.skip { position:absolute; left:-9999px; top:8px; background:#fff; padding:10px; z-index:10; }
.skip:focus { left:12px; }
:focus-visible { outline:3px solid #0078c8; outline-offset:4px; }
.site-header { background:#fff; border-bottom:1px solid #e7eef5; }
.header-inner { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.company { display:flex; align-items:center; width:158px; flex:none; }
.company img { display:block; width:158px; height:auto; }
nav { display:flex; align-items:center; gap:31px; flex-wrap:wrap; }
nav a { text-decoration:none; color:#3a5268; font-size:15px; font-weight:600; }
nav a:hover, .footer-links a:hover { color:var(--blue); }
nav .nav-contact { color:var(--deep); border:1px solid #b5cee3; border-radius:7px; padding:10px 16px; }
.hero { display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:64px; min-height:670px; padding-block:72px 76px; }
.eyebrow,.section-kicker { color:var(--blue); font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 29px; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px #e2fbfd; }
.product-lockup { display:block; max-width:315px; width:62%; height:auto; margin:0 0 20px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(40px,4.25vw,62px); letter-spacing:-.049em; line-height:1.095; margin-bottom:24px; }
h1 span { color:var(--blue); }
.hero-summary { color:var(--muted); max-width:560px; font-size:19px; line-height:1.65; margin-bottom:28px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-bottom:21px; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:17px; padding:12px 19px; border-radius:8px; text-decoration:none; font-size:15px; font-weight:700; }
.button.primary { background:var(--deep); color:#fff; }
.button.primary:hover { background:#0a5e9c; }
.button.secondary { border:1px solid #b9cee0; color:var(--deep); }
.button.secondary:hover { background:#eef6fc; }
.hero-note { color:#65798a; font-size:14px; line-height:1.5; margin-bottom:0; }
.drawing-board { position:relative; border:1px solid #bdd2e7; border-radius:15px; overflow:hidden; box-shadow:0 23px 55px #11395917, 0 4px 10px #11395911; background-color:#f8fbff; background-image:linear-gradient(#dceaf8 1px, transparent 1px),linear-gradient(90deg,#dceaf8 1px, transparent 1px),linear-gradient(#c3ddf5 1px, transparent 1px),linear-gradient(90deg,#c3ddf5 1px, transparent 1px); background-size:16px 16px,16px 16px,80px 80px,80px 80px; background-position:0 49px; }
.board-top { display:flex; align-items:center; justify-content:space-between; min-height:49px; padding:0 18px; border-bottom:1px solid #d6e5f2; background:#fff; }
.board-chip { font-weight:700; color:var(--deep); font-size:14px; }
.board-unit { color:#647e93; font-size:13px; }
.plan { width:100%; display:block; margin:14px 0 0; }
.board-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #c4d9ea; background:#f0f7fc; padding:15px 18px; font-size:14px; }
.board-footer strong { color:var(--deep); }
.board-caption { font-size:12px; color:#586f80; margin:0; padding:0 18px 11px; background:#f0f7fc; }
.proof-strip { background:#eff6fc; border-top:1px solid #e0edf7; border-bottom:1px solid #e0edf7; }
.proof-inner { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:21px; padding:21px 0; font-size:13px; font-weight:700; color:#385975; text-transform:uppercase; letter-spacing:.055em; }
.proof-inner i { width:3px; height:3px; border-radius:50%; background:#87a9c5; }
.features { padding-block:96px 102px; }
.section-heading { max-width:645px; margin-bottom:40px; }
.section-kicker { margin-bottom:15px; }
h2 { font-size:clamp(31px,3vw,42px); letter-spacing:-.038em; line-height:1.18; margin-bottom:16px; }
.section-heading > p:last-child,.pricing-inner > div:first-child > p:last-child,.detail-copy p { color:var(--muted); font-size:17px; line-height:1.65; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.feature-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:30px 27px 28px; min-height:270px; box-shadow:0 4px 18px #15385909; }
.feature-number { color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.12em; }
h3 { font-size:21px; line-height:1.25; letter-spacing:-.025em; margin:25px 0 13px; }
.feature-card p { color:var(--muted); font-size:15px; line-height:1.67; margin:0; }
.pricing-wrap { background:#0d365c; color:#fff; }
.pricing-inner { display:grid; grid-template-columns:1fr 390px; gap:70px; align-items:center; padding-block:78px; }
.pricing-inner .section-kicker { color:#89e6ef; }
.pricing-inner > div:first-child > p:last-child { color:#c8dfef; max-width:630px; }
.price-card { background:#fff; color:var(--ink); border-radius:13px; padding:30px; box-shadow:0 20px 55px #001b35aa; }
.price-label { color:#54718b; font-size:13px; font-weight:700; letter-spacing:.03em; }
.price { color:var(--deep); font-size:51px; font-weight:800; letter-spacing:-.055em; margin:10px 0 5px; }
.price span { color:#54718b; font-size:17px; font-weight:600; letter-spacing:0; }
.price-card > p:not(.price) { color:var(--muted); font-size:15px; margin-bottom:22px; }
.availability { background:#ebf7fc; border-left:3px solid var(--cyan); color:#285671; border-radius:0 5px 5px 0; padding:13px 14px; font-size:14px; line-height:1.45; }
.details { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; padding-block:92px 87px; }
.detail-copy p { margin-bottom:19px; }
.site-footer { background:#f5f9fc; border-top:1px solid #e4edf4; }
.footer-inner { display:grid; grid-template-columns:1fr auto auto; gap:35px; align-items:center; padding-block:30px; }
.footer-inner strong { font-size:18px; color:var(--deep); }
.footer-brand img { display:block; width:94px; height:auto; mix-blend-mode:multiply; }
.footer-inner p { font-size:13px; color:var(--muted); margin:4px 0 0; }
.footer-links { display:flex; gap:25px; font-size:14px; font-weight:600; }
.footer-links a { text-decoration:none; }
.footer-inner small { font-size:13px; color:#697d8e; }
.privacy-main { max-width:820px; padding-block:74px 100px; }
.privacy-main h1 { margin-bottom:24px; }
.privacy-lead { font-size:20px; line-height:1.6; color:#466277; border-bottom:1px solid var(--line); padding-bottom:31px; }
.privacy-main section { margin-top:36px; }
.privacy-main h2 { font-size:23px; margin-bottom:10px; }
.privacy-main section p { color:var(--muted); font-size:16px; line-height:1.72; }
.privacy-main section a { color:var(--blue); }
.updated { margin-top:45px; color:#6d8293; font-size:14px; }
@media (max-width:950px) { .hero { gap:35px; } .product-lockup { width:76%; } .pricing-inner { grid-template-columns:1fr 330px; gap:30px; } .details { gap:35px; } }
@media (max-width:760px) { .shell { width:min(100% - 32px,620px); } .header-inner { padding-block:16px; align-items:flex-start; flex-direction:column; gap:17px; } nav { gap:16px 22px; } nav .nav-contact { padding:5px 10px; } .hero { grid-template-columns:1fr; gap:38px; padding-block:50px 56px; } .product-lockup { max-width:270px; width:70%; } h1 { font-size:clamp(38px,9vw,54px); } .hero-summary { font-size:17px; } .feature-grid,.pricing-inner,.details { grid-template-columns:1fr; } .features,.details { padding-block:68px; } .feature-grid { gap:12px; } .feature-card { min-height:0; } .pricing-inner { padding-block:64px; } .footer-inner { grid-template-columns:1fr; gap:19px; } .proof-inner { justify-content:flex-start; gap:13px; } .proof-inner i { display:none; } .proof-inner span { flex-basis:calc(50% - 7px); } }
@media (max-width:390px) { .proof-inner span { flex-basis:100%; } .board-footer { flex-direction:column; align-items:flex-start; } nav { gap:12px; font-size:14px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }