:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --page:#f5f7fa; --surface:#fff; --ink:#0e131a; --muted:#526175; --faint:#778397; --line:#d8e0ea; --blue:#2864e8; --blue-deep:#1649b7; --cyan:#0dbbc6; --focus:#087987; --dark:#07090d; --dark-soft:#121720; --dark-ink:#f5f8fc; --dark-muted:#aeb8c8; --max:1160px; }
html[data-theme="dark"] { color-scheme:dark; --page:#080a0d; --surface:#12161b; --ink:#f4f7fb; --muted:#aab5c4; --faint:#8794a5; --line:#29313d; --blue:#4e86ff; --blue-deep:#8aafff; --cyan:#5de3eb; }
@media (prefers-color-scheme:dark) { html[data-theme="system"] { color-scheme:dark; --page:#080a0d; --surface:#12161b; --ink:#f4f7fb; --muted:#aab5c4; --faint:#8794a5; --line:#29313d; --blue:#4e86ff; --blue-deep:#8aafff; --cyan:#5de3eb; } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; overflow-x:hidden; background:var(--page); color:var(--ink); } a,button { font:inherit; } a { color:inherit; } button { cursor:pointer; } img { display:block; max-width:100%; } [hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .skip-link { position:fixed; z-index:100; left:16px; top:-60px; padding:10px 14px; border-radius:8px; background:var(--surface); box-shadow:0 10px 30px #0003; } .skip-link:focus { top:16px; }
.section-width { width:min(var(--max),calc(100% - 64px)); margin:0 auto; } .site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent); background:color-mix(in srgb,var(--page) 88%,transparent); backdrop-filter:blur(18px); } .header-inner { width:min(var(--max),calc(100% - 64px)); min-height:76px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; white-space:nowrap; font-size:16px; letter-spacing:-.02em; } .brand img { width:36px; height:36px; object-fit:contain; } .brand strong { font-weight:850; } .site-nav { display:flex; align-items:center; gap:25px; } .site-nav>a,.text-link { color:var(--muted); font-size:14px; font-weight:700; text-decoration:none; } .site-nav>a:hover,.text-link:hover { color:var(--ink); } .nav-actions { display:flex; align-items:center; gap:15px; margin-left:4px; } .button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:0 21px; border:1px solid transparent; border-radius:999px; text-decoration:none; font-size:14px; font-weight:800; transition:transform .18s ease,background .18s ease,border-color .18s ease; } .button:hover { transform:translateY(-2px); } .button-small { min-height:40px; padding:0 16px; } .button-primary { background:var(--blue); color:#fff; box-shadow:0 10px 25px #2864e833; } .button-primary:hover { background:var(--blue-deep); } .button-quiet { border-color:var(--line); color:var(--ink); } .button-quiet:hover { border-color:var(--blue); }
.theme-menu { position:relative; } .theme-button { display:grid; width:36px; height:36px; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font-size:21px; line-height:1; } .theme-button:hover { border-color:var(--blue); color:var(--blue); } .theme-choices { position:absolute; right:0; top:45px; min-width:120px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 18px 45px #0003; } .theme-choices button { display:block; width:100%; padding:8px 10px; border:0; border-radius:7px; background:transparent; color:var(--muted); text-align:left; font-size:13px; } .theme-choices button:hover,.theme-choices button[aria-checked="true"] { background:color-mix(in srgb,var(--blue) 10%,var(--surface)); color:var(--ink); } .menu-toggle { display:none; border:0; background:transparent; padding:8px; } .menu-toggle span:not(.sr-only) { display:block; width:22px; height:2px; margin:4px; background:var(--ink); }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.055em; line-height:1.04; } h2 { margin-bottom:20px; font-size:clamp(38px,4.8vw,64px); } p { color:var(--muted); line-height:1.65; } .section-kicker { margin:0 0 18px; color:var(--blue); font-size:12px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.hero { overflow:hidden; background:var(--dark); color:var(--dark-ink); } .hero-inner { padding-top:105px; } .hero-copy { max-width:850px; } .hero h1 { margin:0 0 26px; font-size:clamp(48px,7.2vw,94px); letter-spacing:-.07em; line-height:.98; } .hero h1 span { color:#87aaff; } .hero-copy>p { max-width:500px; margin-bottom:30px; color:var(--dark-muted); font-size:18px; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .hero .button-quiet { border-color:#3b4657; color:#fff; } .product-visual { position:relative; z-index:1; margin:80px 0 -140px 7%; } .product-visual::before { position:absolute; z-index:-1; top:16%; left:12%; width:70%; height:50%; border-radius:50%; background:#1456d833; content:""; filter:blur(70px); } .product-visual img { width:100%; height:auto; border:1px solid #34404f; border-radius:18px 18px 0 0; box-shadow:0 25px 75px #0008; } figcaption { margin:15px 0 0; color:#718098; font-size:12px; }
.editorial-image { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); align-items:end; gap:78px; padding-top:220px; padding-bottom:150px; } .editorial-image-frame { min-height:540px; overflow:hidden; } .editorial-image-frame img { width:100%; height:100%; min-height:540px; object-fit:cover; } .editorial-image-copy { padding-bottom:22px; } .editorial-image-copy h2 { max-width:450px; } .editorial-image-copy p:last-child { max-width:390px; margin:0; font-size:17px; }
.takeover-section { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); gap:100px; padding-top:110px; padding-bottom:150px; border-top:1px solid var(--line); } .takeover-intro { padding-top:14px; } .takeover-intro h2 span { color:var(--blue); } .takeover-intro>p:last-child { max-width:410px; margin:0; font-size:17px; } .takeover-detail { min-width:0; } .detail-labels { display:flex; justify-content:space-between; padding:0 0 13px; border-bottom:1px solid var(--line); } .detail-labels strong { color:var(--ink); font-size:13px; } .detail-labels strong:last-child { color:var(--blue); } .detail-image { height:300px; overflow:hidden; margin-top:18px; border-left:3px solid var(--cyan); } .detail-image img { width:100%; height:auto; min-height:300px; object-fit:cover; object-position:center bottom; }
.capabilities { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:100px; padding-top:110px; padding-bottom:150px; border-top:1px solid var(--line); } .capabilities-intro h2 { max-width:360px; } .capability-list { border-top:1px solid var(--line); } .capability-list>div { display:grid; grid-template-columns:minmax(220px,.9fr) minmax(180px,1.1fr); gap:32px; padding:24px 0; border-bottom:1px solid var(--line); } .capability-list strong { font-size:18px; letter-spacing:-.02em; } .capability-list span { color:var(--muted); line-height:1.55; }
.pricing-section { padding-top:110px; padding-bottom:150px; border-top:1px solid var(--line); } .pricing-intro { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:52px; } .pricing-intro h2 { max-width:600px; margin-bottom:0; } .pricing-intro>p:last-child { max-width:260px; margin:0; } .pricing-table { border-top:1px solid var(--ink); } .pricing-table-head,.pricing-row { display:grid; grid-template-columns:1.1fr 1fr 1fr 1.2fr auto; align-items:center; column-gap:22px; } .pricing-table-head { padding:13px 0; color:var(--faint); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .pricing-row { min-height:92px; border-top:1px solid var(--line); } .pricing-row h3 { margin:0; font-size:21px; } .pricing-row p { margin:0; font-size:14px; } .pricing-row .price { color:var(--ink); font-size:18px; font-weight:800; } .pricing-row .button-plan { min-height:38px; padding:0 15px; border-color:var(--line); color:var(--ink); } .extra-usage { margin:25px 0 0; color:var(--faint); font-size:14px; } .extra-usage strong { color:var(--ink); } .setup-line { display:grid; grid-template-columns:1fr auto auto 1.2fr; gap:22px; align-items:center; margin-top:62px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .setup-line strong { font-size:20px; } .setup-line span { color:var(--muted); font-size:14px; }
.faq-section { display:grid; grid-template-columns:.65fr 1.35fr; gap:100px; padding-top:110px; padding-bottom:150px; border-top:1px solid var(--line); } .faq-intro h2 { max-width:320px; } .faq-list { border-top:1px solid var(--line); } details { border-bottom:1px solid var(--line); } summary { padding:21px 0; cursor:pointer; list-style:none; font-size:18px; font-weight:750; } summary::-webkit-details-marker { display:none; } summary::after { float:right; color:var(--blue); content:'+'; font-size:23px; font-weight:400; } details[open] summary::after { content:'−'; } details p { max-width:700px; padding:0 40px 21px 0; margin:0; }
.final-cta { padding:80px 0; background:var(--dark); color:#fff; } .final-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:50px; } .final-cta h2 { max-width:720px; margin:0; } .final-cta .section-kicker { color:var(--cyan); } .final-cta .button { flex:none; }
.install-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);gap:70px;padding-top:96px;padding-bottom:96px;border-top:1px solid var(--line)}.install-section h2{max-width:520px;margin-bottom:20px}.install-section p:last-child{max-width:500px;margin:0}.install-guidance{display:grid;gap:12px}.install-guidance>div{display:grid;gap:7px;padding:18px 0;border-bottom:1px solid var(--line)}.install-guidance>div:first-child{border-top:1px solid var(--line)}.install-guidance strong{font-size:16px}.install-guidance span{color:var(--muted);font-size:14px;line-height:1.55}
.site-footer { padding:78px 0 28px; background:var(--surface); border-top:0; } .footer-inner { display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:34px; padding-bottom:72px; } .footer-brand-block p { max-width:260px; margin:20px 0 0; font-size:14px; } .footer-brand img { width:44px; height:44px; } .footer-column h2 { margin:2px 0 19px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; } .footer-column a,.footer-column span { display:block; margin-bottom:12px; color:var(--muted); font-size:14px; text-decoration:none; } .footer-column a:hover { color:var(--blue); } .footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid var(--line); color:var(--faint); font-size:12px; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid color-mix(in srgb,var(--focus) 55%,transparent); outline-offset:3px; }
@media (max-width:900px) { .editorial-image,.takeover-section,.capabilities,.faq-section,.install-section { grid-template-columns:1fr; gap:45px; } .editorial-image { padding-top:180px; } .takeover-section,.capabilities,.pricing-section,.faq-section,.install-section { padding-top:84px; padding-bottom:100px; } .takeover-intro>p:last-child { max-width:600px; } .pricing-intro { display:block; } .pricing-intro>p:last-child { margin-top:20px; } .footer-inner { grid-template-columns:1.4fr repeat(2,1fr); } }
@media (max-width:700px) { .section-width { width:min(100% - 32px,var(--max)); } .header-inner { width:calc(100% - 32px); min-height:68px; } .menu-toggle { display:block; } .site-nav { position:absolute; top:68px; left:16px; right:16px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px; border:1px solid var(--line); background:var(--surface); box-shadow:0 18px 45px #0003; } .site-nav[data-open="true"] { display:flex; } .site-nav>a,.nav-actions { padding:12px; } .nav-actions { flex-direction:column; align-items:stretch; margin:0; border-top:1px solid var(--line); } .nav-actions .button,.nav-actions .text-link { justify-content:center; text-align:center; } .theme-menu { position:absolute; top:12px; right:12px; } .theme-choices { top:42px; } .hero-inner { padding-top:72px; } .hero h1 { font-size:clamp(43px,12vw,65px); } .hero h1 br { display:none; } .hero-copy>p { font-size:16px; } .product-visual { margin:58px 0 -44px; } .product-visual img { border-radius:13px 13px 0 0; } .editorial-image { padding-top:108px; padding-bottom:82px; } .editorial-image-frame,.editorial-image-frame img { min-height:370px; } .editorial-image-copy h2 { font-size:42px; } .takeover-section { padding-top:75px; } .detail-image { height:190px; } .detail-image img { min-height:190px; } .capability-list>div { grid-template-columns:1fr; gap:9px; padding:20px 0; } .pricing-table { overflow:hidden; } .pricing-table-head { display:none; } .pricing-row { grid-template-columns:1fr 1fr; gap:8px 20px; padding:22px 0; } .pricing-row h3 { grid-column:1 / -1; } .pricing-row .support { grid-column:1 / -1; } .pricing-row .button-plan { grid-column:2; grid-row:2 / span 2; } .setup-line { grid-template-columns:1fr auto; gap:10px; } .setup-line span:last-child { grid-column:1 / -1; } .faq-section { padding-top:75px; padding-bottom:90px; } .final-cta { padding:62px 0; } .final-cta-inner { display:block; } .final-cta .button { margin-top:30px; } .footer-inner { grid-template-columns:1fr 1fr; gap:38px 24px; padding-bottom:55px; } .footer-brand-block { grid-column:1 / -1; } .footer-bottom { flex-direction:column; gap:9px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }
.hero-copy,.product-visual,.editorial-image-frame,.editorial-image-copy,.takeover-intro,.takeover-detail,.capabilities,.pricing-section,.faq-section { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1); }
.hero-copy.is-visible,.product-visual.is-visible,.editorial-image-frame.is-visible,.editorial-image-copy.is-visible,.takeover-intro.is-visible,.takeover-detail.is-visible,.capabilities.is-visible,.pricing-section.is-visible,.faq-section.is-visible { opacity:1; transform:none; }
.hero-copy.is-visible { transition-delay:.04s; }
.product-visual.is-visible { transition-delay:.12s; }
.site-header { transition:box-shadow .25s ease,background .25s ease; }
body.is-scrolled .site-header { box-shadow:0 8px 24px #00000012; }
@keyframes hero-enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button,.site-header,.hero-copy,.product-visual,.editorial-image-frame,.editorial-image-copy,.takeover-intro,.takeover-detail,.capabilities,.pricing-section,.faq-section { transition:none; } .hero-copy,.product-visual,.editorial-image-frame,.editorial-image-copy,.takeover-intro,.takeover-detail,.capabilities,.pricing-section,.faq-section { opacity:1; transform:none; } }

/* Surgical editorial compression and stronger product-first entrance. */
.hero-inner { padding-top:64px; }
.hero h1 { margin-bottom:18px; font-size:clamp(43px,5.7vw,75px); line-height:.94; }
.hero-copy>p { margin-bottom:22px; font-size:17px; }
.product-visual { margin:48px 0 -78px 3%; }
.product-visual::before { opacity:.55; }
.product-visual img { filter:brightness(1.08) contrast(1.05); box-shadow:0 22px 58px #0009; }
.editorial-image { gap:52px; padding-top:112px; padding-bottom:94px; background:linear-gradient(180deg,color-mix(in srgb,var(--dark) 5%,var(--page)),var(--page) 150px); }
.editorial-image-frame { min-height:500px; }
.editorial-image-frame img { min-height:500px; }
.editorial-image-copy { padding-bottom:12px; }
.editorial-image-copy h2 { margin-bottom:14px; }
.takeover-section { gap:60px; padding-top:78px; padding-bottom:96px; }
.takeover-intro h2 { font-size:clamp(37px,4vw,54px); }
.detail-image { height:350px; }
.detail-image img { min-height:350px; }
.capabilities { gap:60px; padding-top:78px; padding-bottom:100px; }
.pricing-section { padding-top:78px; padding-bottom:100px; }
.pricing-intro { margin-bottom:34px; }
.pricing-row { min-height:78px; }
.setup-line { margin-top:36px; }
.faq-section { gap:60px; padding-top:78px; padding-bottom:86px; }
.final-cta { padding:58px 0; }
.site-footer { padding:22px 0 26px; }
.footer-bottom { padding-top:12px; }
.hero-copy h1,.hero-copy>p,.hero-copy .hero-actions { opacity:0; transform:translateY(18px); transition:opacity .62s ease,transform .62s cubic-bezier(.22,.61,.36,1); }
.hero-copy.is-visible h1 { opacity:1; transform:none; transition-delay:.04s; }
.hero-copy.is-visible>p { opacity:1; transform:none; transition-delay:.15s; }
.hero-copy.is-visible .hero-actions { opacity:1; transform:none; transition-delay:.25s; }

@media (max-width:700px) {
  .hero-inner { padding-top:48px; }
  .hero h1 { margin-bottom:16px; font-size:clamp(39px,10.5vw,56px); line-height:.96; }
  .hero-copy>p { margin-bottom:20px; }
  .product-visual { margin:38px 0 -28px; }
  .editorial-image { gap:28px; padding-top:66px; padding-bottom:58px; background:linear-gradient(180deg,color-mix(in srgb,var(--dark) 5%,var(--page)),var(--page) 90px); }
  .editorial-image-frame,.editorial-image-frame img { min-height:300px; }
  .takeover-section,.capabilities,.pricing-section,.faq-section { padding-top:60px; padding-bottom:72px; }
  .takeover-section { gap:32px; }
  .takeover-intro h2 { font-size:36px; }
  .detail-image { height:220px; }
  .detail-image img { min-height:220px; }
  .capabilities { gap:32px; }
  .pricing-intro { margin-bottom:24px; }
  .faq-section { gap:32px; }
  .final-cta { padding:48px 0; }
  .site-footer { padding:20px 0 24px; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-copy h1,.hero-copy>p,.hero-copy .hero-actions { opacity:1; transform:none; transition:none; }
}

.editorial-image-frame {
  opacity:var(--business-image-opacity,.22);
  transform:translate3d(0,var(--business-image-y,22px),0) scale(var(--business-image-scale,.985));
  transform-origin:center center;
  transition:none;
  will-change:opacity,transform;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,#000 7%,#000 78%,rgba(0,0,0,.88) 88%,transparent 100%),linear-gradient(to right,rgba(0,0,0,.88) 0%,#000 4%,#000 96%,rgba(0,0,0,.88) 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,#000 7%,#000 78%,rgba(0,0,0,.88) 88%,transparent 100%),linear-gradient(to right,rgba(0,0,0,.88) 0%,#000 4%,#000 96%,rgba(0,0,0,.88) 100%);
  mask-composite:intersect;
}

.editorial-image-frame.is-scroll-visible {
  opacity:1;
  transform:none;
  will-change:auto;
}

@media (max-width:700px) {
  .editorial-image-frame {
    opacity:var(--business-image-opacity,.42);
    transform:translate3d(0,var(--business-image-y,10px),0) scale(var(--business-image-scale,.994));
  }
}

@media (prefers-reduced-motion:reduce) {
  .editorial-image-frame {
    opacity:1;
    transform:none;
    transition:none;
    will-change:auto;
  }
}

/* Product UI stays clearer than the business photo as it moves through view. */
.product-visual img {
  opacity:var(--hero-product-opacity,1);
  transform:translate3d(0,var(--hero-product-y,0px),0) scale(var(--hero-product-scale,1));
  transform-origin:center top;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 91%,rgba(0,0,0,.88) 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 91%,rgba(0,0,0,.88) 100%);
}

.detail-image {
  opacity:var(--takeover-product-opacity,1);
  transform:translate3d(0,var(--takeover-product-y,0px),0);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 90%,rgba(0,0,0,.88) 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 90%,rgba(0,0,0,.88) 100%);
}

@media (prefers-reduced-motion:reduce) {
  .product-visual img,.detail-image { opacity:1; transform:none; }
}

/* The final CTA should transition cleanly into the footer. */
.footer-bottom { border-top: 0; }