:root{--navy:#10213e;--blue:#0769ef;--blue2:#3e8ef7;--gold:#d9a20f;--ink:#101d32;--muted:#52627a;--line:#d9e2ee;--mist:#f3f7fc;--white:#fff;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit}
.hub-shell{width:min(1180px,calc(100% - 40px));margin:auto}
.hub-header{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.rd-brand{display:inline-flex;align-items:center;text-decoration:none}
.rd-brand img{display:block;width:160px;height:auto}
.hub-header nav{display:flex;gap:28px;align-items:center}
.hub-header nav a{text-decoration:none;font-weight:700;font-size:14px}
.hub-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:9px;background:var(--blue);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 12px 28px rgba(7,105,239,.2)}
.hub-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#f8fbff 0%,#edf5ff 60%,#fff9e7 100%);border-top:1px solid #e5edf7;border-bottom:1px solid #e1e9f3;padding:82px 0 76px}
.hub-hero:after{content:"";position:absolute;right:-130px;top:-210px;width:620px;height:620px;border-radius:50%;border:90px solid rgba(7,105,239,.055)}
.hub-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.hub-eyebrow{color:var(--blue);font-size:13px;letter-spacing:.16em;font-weight:900}
.hub-hero h1{font-size:clamp(48px,6vw,78px);line-height:.99;letter-spacing:-.055em;margin:18px 0 24px;max-width:740px}
.hub-hero p{font-size:20px;line-height:1.65;color:var(--muted);max-width:650px}
.hub-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hub-button.secondary{background:#fff;color:var(--navy);box-shadow:none;border:1px solid #bfcde0}
.browser-art{background:#fff;border:1px solid #d8e2ef;border-radius:20px;box-shadow:0 28px 80px rgba(15,38,72,.14);overflow:hidden;transform:rotate(1deg)}
.browser-top{display:flex;gap:6px;padding:13px 15px;background:#eef3f8}
.browser-top i{width:10px;height:10px;border-radius:50%;background:#c4d0de}
.browser-screen{aspect-ratio:1.42;background:linear-gradient(90deg,rgba(6,19,27,.9),rgba(6,19,27,.36)),url('/roof-damage-inspection.png') center/cover;color:#fff;padding:40px;display:flex;align-items:center}
.browser-screen small{font-weight:900;letter-spacing:.14em;color:#ff7140}
.browser-screen b{display:block;font-size:42px;line-height:1.02;margin-top:12px;max-width:350px}
.catalog{padding:88px 0 100px}
.section-intro{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:36px}
.section-intro h2{font-size:clamp(38px,4.5vw,58px);letter-spacing:-.045em;line-height:1.03;margin:10px 0 0}
.section-intro p{max-width:430px;color:var(--muted);line-height:1.7}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.demo-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 20px 55px rgba(21,49,84,.08)}
.demo-image{aspect-ratio:1.74;background:linear-gradient(180deg,transparent 55%,rgba(7,18,28,.68)),url('/roof-damage-inspection.png') center/cover;display:flex;align-items:flex-end;padding:25px;color:#fff}
.demo-card:nth-child(2) .demo-image{background-image:linear-gradient(180deg,transparent 55%,rgba(7,18,28,.68)),url('/roof-repair-workers.png');background-position:center 58%}
.demo-image span{background:#ec5b26;padding:8px 11px;font-size:11px;font-weight:900;letter-spacing:.12em}
.demo-body{padding:28px}
.demo-body h3{font-size:29px;letter-spacing:-.025em;margin:0 0 10px}
.demo-body p{color:var(--muted);line-height:1.65;margin:0 0 20px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}
.tags span{background:#eef5ff;color:#0b5dce;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800}
.demo-link{font-weight:900;color:var(--blue);text-decoration:none}
.demo-card.coming{background:var(--mist);box-shadow:none}
.coming .demo-image{background:linear-gradient(135deg,#112541,#254a78);align-items:center;justify-content:center}
.wireframe{width:70%;height:68%;border:2px solid rgba(255,255,255,.55);border-radius:10px;padding:13px}
.wireframe:before,.wireframe:after{content:"";display:block;background:rgba(255,255,255,.28);border-radius:4px}
.wireframe:before{height:18%;margin-bottom:10px}
.wireframe:after{height:56%}
.hub-note{margin-top:54px;border-radius:18px;background:var(--navy);color:#fff;padding:42px;display:flex;justify-content:space-between;gap:35px;align-items:center}
.hub-note h2{font-size:35px;margin:0 0 9px}
.hub-note p{color:#c9d5e6;margin:0;line-height:1.6}
.hub-footer{padding:34px 0;color:#64748b;font-size:13px}
.hub-footer .hub-shell{display:flex;justify-content:space-between;gap:20px}
.demo-disclosure{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:center;gap:20px;min-height:43px;padding:8px 20px;background:#10213e;color:#fff;font:700 13px/1.3 Inter,Arial,sans-serif;text-align:center}
.demo-disclosure a{color:#fff;text-underline-offset:3px}
.demo-disclosure strong{color:#ffbf22}
.demo-disclosure .demo-cta{background:#fff;color:#10213e;border-radius:6px;padding:6px 10px;text-decoration:none}
.demo-page .site-header{top:43px}
.demo-page .sticky-actions{z-index:1001}
@media(max-width:850px){.hub-header nav a:not(.hub-button){display:none}
.hub-hero{padding:58px 0}
.hub-hero-grid,.demo-grid{grid-template-columns:1fr}
.browser-art{transform:none}
.section-intro{display:block}
.hub-note{display:block}
.hub-note .hub-button{margin-top:22px}
.demo-disclosure{position:relative;flex-wrap:wrap;gap:8px}
.demo-page .site-header{top:0}
.hub-footer .hub-shell{display:block}
.hub-footer span{display:block;margin-top:8px}
}
@media(max-width:520px){.hub-shell{width:min(100% - 28px,1180px)}
.hub-header{padding:16px 0}
.rd-brand img{width:145px}
.hub-header .hub-button{padding:0 13px;min-height:42px}
.hub-hero h1{font-size:46px}
.hub-hero p{font-size:17px}
.browser-screen{padding:28px}
.browser-screen b{font-size:31px}
.catalog{padding:62px 0}
.demo-body{padding:22px}
.hub-note{padding:28px}
.demo-disclosure .demo-long{display:none}
}