/* ============================================================
ROOFIX 2026 — Unizen-styled rebuild (light / blue)
Dark feature panels on a light page. Font: Geist.
============================================================ */
/* Geist font is loaded via tags in each page's (preconnect + stylesheet)
instead of @import here — @import blocks CSS parsing until the imported file also
loads, which is especially slow on mobile networks. See in any .html page. */
:root{
--blue-50:#EFF5FF; --blue-100:#DBE8FF; --blue-200:#BFD5FF; --blue-300:#93B8FF;
--blue-400:#5D8EFB; --blue-500:#2F6BF2; --blue-600:#1D4ED8; --blue-700:#1740AE; --blue-800:#152F7E;
--white:#FFFFFF; --bg:#FFFFFF; --bg-soft:#F5F8FF; --bg-tint:#EEF4FF; --surface:#FFFFFF;
--ink:#0A1120; --ink-2:#1F2A3D; --ink-soft:#4A5567; --muted:#6B7688;
--line:#E4EAF3; --line-2:#D5DEEC;
/* dark panel */
--panel:#0B1220; --panel-2:#0E162A; --panel-line:rgba(255,255,255,.08);
--panel-ink:#E7EDFA; --panel-soft:#93A2C0; --panel-muted:#64748B;
--green:#12A150; --amber:#D97706; --red:#DC2626;
--r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;
--shadow-sm:0 1px 2px rgba(11,20,36,.05);
--shadow:0 16px 50px -16px rgba(23,64,174,.22);
--shadow-lg:0 40px 90px -28px rgba(10,17,32,.5);
--glow:0 0 40px rgba(47,107,242,.5);
--maxw:1200px; --nav-h:72px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
color:var(--ink); background:var(--bg); font-size:16px; line-height:1.6;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--blue-400);outline-offset:2px;border-radius:6px}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--blue-200)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
section{position:relative}
/* ---------- Typography (Geist, Unizen-like) ---------- */
h1,h2,h3,h4,h5{font-family:'Geist',sans-serif;font-weight:500;letter-spacing:-.035em;line-height:1.05;margin:0;color:var(--ink)}
h1{font-size:clamp(2.3rem,5.4vw,4.3rem);font-weight:600;letter-spacing:-.05em;line-height:1.0}
h2{font-size:clamp(1.85rem,3.9vw,2.9rem);font-weight:600;letter-spacing:-.045em;line-height:1.04}
h3{font-size:clamp(1.35rem,2.5vw,1.85rem);font-weight:600;letter-spacing:-.04em}
h4{font-size:1.08rem;letter-spacing:-.025em;font-weight:600}
p{margin:0 0 1rem}
.lead{font-size:1.06rem;color:var(--ink-soft);line-height:1.65}
.mono{font-family:'Geist Mono',monospace}
.grad{background:linear-gradient(120deg,var(--blue-600),var(--blue-400));-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---------- Backgrounds: dots + gridlines + glow ---------- */
.dots{background-image:radial-gradient(circle at center, rgba(29,78,216,.14) 1px, transparent 1.5px);background-size:26px 26px}
.gridlines{background-image:linear-gradient(rgba(29,78,216,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(29,78,216,.06) 1px,transparent 1px);background-size:56px 56px}
.glow-blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px);z-index:0}
/* Full-page vertical framing guide lines (Unizen-style) */
.guides{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1;pointer-events:none;display:none}
.guides span{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(29,78,216,.09) 12%,rgba(29,78,216,.09) 88%,transparent)}
@media(min-width:1025px){.guides{display:block}}
/* horizontal section dividers (align with the framed columns) */
.ruled{border-top:1px solid rgba(10,17,32,.07)}
/* Film-grain / static overlay (Unizen-style). Oversized + transform-jitter so it visibly moves. */
.grain{position:fixed;top:-50%;left:-50%;width:200%;height:200%;z-index:4;pointer-events:none;opacity:.13;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:120px 120px;animation:grain .6s steps(4) infinite}
@keyframes grain{
0%{transform:translate(0,0)} 20%{transform:translate(-6%,-8%)} 40%{transform:translate(5%,-4%)}
60%{transform:translate(-4%,6%)} 80%{transform:translate(7%,3%)} 100%{transform:translate(0,0)}
}
/* Blue aurora (flowing hero background) */
.aurora{position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:1500px;height:820px;z-index:0;pointer-events:none;filter:blur(58px);opacity:.85}
.aurora b{position:absolute;border-radius:50%;display:block}
.aurora .a1{width:760px;height:340px;left:120px;top:180px;background:radial-gradient(ellipse at center,rgba(47,107,242,.5),transparent 70%);transform:rotate(-18deg);animation:drift 16s ease-in-out infinite}
.aurora .a2{width:640px;height:280px;right:120px;top:90px;background:radial-gradient(ellipse at center,rgba(93,142,251,.42),transparent 70%);transform:rotate(14deg);animation:drift 20s ease-in-out infinite reverse}
.aurora .a3{width:520px;height:420px;left:50%;top:40px;margin-left:-260px;background:radial-gradient(ellipse at center,rgba(29,78,216,.32),transparent 68%);animation:drift 24s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(-10deg)}50%{transform:translate(40px,26px) rotate(6deg)}}
/* ---------- Pill label (gradient border) ---------- */
.pill{
display:inline-flex;align-items:center;gap:8px;padding:7px 15px 7px 12px;
border:1px solid transparent;border-radius:999px;
color:var(--blue-700);font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.45)) padding-box,linear-gradient(120deg,rgba(93,142,251,.45),rgba(29,78,216,.4) 45%,rgba(147,184,255,.45)) border-box;
}
.pill svg{width:13px;height:13px;stroke:var(--blue-500);fill:none;opacity:.8}
.pill.center{margin:0 auto}
.pill.dark{color:#aebedd;background:linear-gradient(rgba(11,18,32,.5),rgba(11,18,32,.5)) padding-box,linear-gradient(120deg,rgba(93,142,251,.4),rgba(29,78,216,.35) 45%,rgba(147,184,255,.4)) border-box}
.pill.dark svg{stroke:#8fb4ff}
.section-head{text-align:center;max-width:740px;margin:0 auto 60px}
.section-head .pill{margin-bottom:22px}
.section-head p{color:var(--ink-soft);font-size:1.08rem;margin-top:18px}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:999px;font-weight:600;font-size:.95rem;border:1px solid transparent;transition:all .22s var(--ease);white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 10px 24px -8px rgba(29,78,216,.65)}
.btn-primary:hover{background:var(--blue-700);transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(29,78,216,.75)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--blue-400);color:var(--blue-700);background:var(--blue-50)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.btn-light:hover{background:rgba(255,255,255,.2)}
.btn-lg{padding:15px 30px;font-size:1rem}
/* ---------- Nav ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:100;height:var(--nav-h);background:transparent;border-bottom:none;
transition:background .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
/* Sticky reveal once the page scrolls past the hero band (set by app.js) */
.nav.scrolled{position:fixed;background:rgba(255,255,255,.86);border-bottom:1px solid var(--line);
backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
box-shadow:0 8px 28px -18px rgba(10,17,32,.45);animation:navDrop .28s var(--ease)}
@keyframes navDrop{from{transform:translateY(-100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.nav.scrolled{animation:none}}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
.brand{display:flex;align-items:center;gap:9px;font-family:'Geist';font-weight:800;font-size:1.25rem;letter-spacing:-.04em;color:var(--ink)}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--blue-600);box-shadow:0 0 0 4px var(--blue-100),0 0 12px var(--blue-500)}
/* logo: navy PNG for the light nav, white PNG for the dark footer */
.logo-img{display:block;height:24px;width:auto}
.footer .brand{color:#fff}
.footer .brand .logo-img{height:26px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{position:relative;padding:9px 6px;font-size:.9rem;font-weight:500;color:var(--ink-soft);transition:color .18s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--blue-700);font-weight:600}
.nav-links a.active::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px;border-radius:2px;background:var(--blue-600)}
/* "For Homeowners" — the residential doorway, visually distinct from the
enterprise nav items so homeowners never feel lost on a platform site. */
.nav-links a.res-door{color:var(--ink);font-weight:600;border:1px solid var(--line-2);border-radius:999px;
padding:7px 14px;margin-left:10px;background:#fff}
.nav-links a.res-door:hover{border-color:var(--blue-400);color:var(--blue-700);background:var(--blue-50)}
.nav-links a.res-door.active{border-color:var(--blue-600);color:var(--blue-700);background:var(--blue-50)}
.nav-links a.res-door.active::after{display:none}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-right .login{font-size:.9rem;font-weight:500;color:var(--ink-soft)}
.nav-right .login:hover{color:var(--ink)}
.hamburger{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;width:42px;height:42px;align-items:center;justify-content:center}
.hamburger svg{width:20px;height:20px;stroke:var(--ink)}
/* ---------- HERO (full-viewport, centered, Unizen-style) ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;padding:calc(var(--nav-h) + 12px) 0 0;overflow:hidden;position:relative;text-align:center;isolation:isolate;background:#F6F8FF}
.hero .dots-bg{position:absolute;inset:0;z-index:0;opacity:.85;-webkit-mask:radial-gradient(ellipse 90% 80% at 50% 45%,#000,transparent 85%)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
/* occasional shooting-star light streaks rising through the hero */
.spark{position:absolute;bottom:-90px;width:1.5px;border-radius:2px;pointer-events:none;z-index:1;filter:blur(.4px);
background:linear-gradient(to top,rgba(47,107,242,0),rgba(93,142,251,.85) 45%,rgba(255,255,255,.95));opacity:0}
@keyframes shoot{0%{transform:translateY(0) scaleY(.5);opacity:0}12%{opacity:.9}100%{transform:translateY(-92vh) scaleY(1.25);opacity:0}}
.hero .wrap{position:relative;z-index:2}
.hero-main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 0}
.hero-trust{position:relative;z-index:2;padding:8px 0 40px;margin-top:auto}
.hero-trust .tlbl{text-align:center;color:var(--muted);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
/* ---------- Soft aurora accent for interior sections (subtle) ---------- */
.glowsec{overflow:hidden}
.softglow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.softglow:before,.softglow:after{content:"";position:absolute;border-radius:50%;filter:blur(94px);opacity:.55}
.softglow:before{width:46%;height:72%;left:-10%;top:-16%;background:radial-gradient(ellipse at center,rgba(47,107,242,.30),transparent 70%)}
.softglow:after{width:50%;height:76%;right:-12%;bottom:-18%;background:radial-gradient(ellipse at center,rgba(0,180,255,.22),transparent 70%)}
.softglow.warm:after{background:radial-gradient(ellipse at center,rgba(93,142,251,.26),transparent 70%)}
/* ---------- Page hero (interior pages) ---------- */
.phero{position:relative;overflow:hidden;text-align:center;padding:calc(var(--nav-h) + 64px) 0 76px;isolation:isolate;background:#F6F8FF}
.phero .wrap{position:relative;z-index:2}
.phero .dots-bg{position:absolute;inset:0;z-index:0;opacity:.7;-webkit-mask:radial-gradient(ellipse 100% 92% at 50% 26%,#000,transparent 92%)}
.phero .mesh{opacity:.72}
.phero h1{margin:20px auto 18px;max-width:16ch}
.phero .lead{max-width:660px;margin:0 auto}
.phero .hero-cta{justify-content:center;margin-top:30px}
.phero .stat-row{justify-content:center;margin-top:34px}
@media(max-width:760px){.phero{padding:calc(var(--nav-h) + 36px) 0 52px}}
/* ---------- Organic layered aurora (hero background) ---------- */
.aurora{position:absolute;inset:-15%;z-index:0;pointer-events:none;overflow:hidden;animation:auroraFloat 46s ease-in-out infinite}
.aurora span{position:absolute;display:block;will-change:transform;filter:blur(100px)}
/* L1 — pale/electric-blue ribbon, upper-left curving to lower-middle */
.aurora .a1{width:80%;height:42%;left:-16%;top:24%;opacity:.6;border-radius:35% 65% 58% 42% / 60% 35% 65% 40%;
transform:rotate(14deg) skewX(-12deg);
background:radial-gradient(ellipse at 40% 50%,rgba(67,120,255,.85) 0%,rgba(80,160,255,.5) 35%,rgba(196,225,255,.12) 65%,transparent 78%);
animation:auroraPulse 22s ease-in-out infinite}
/* L2 — saturated royal-blue fold across lower third, hollow center */
.aurora .a2{width:90%;height:48%;right:-26%;bottom:0%;opacity:.62;border-radius:65% 35% 40% 60% / 45% 65% 35% 55%;
transform:rotate(-10deg) skewX(8deg);
background:radial-gradient(ellipse at 55% 45%,rgba(28,88,235,.7) 0%,rgba(70,145,255,.4) 38%,rgba(177,220,255,.14) 67%,transparent 80%)}
/* L3 — soft cyan glow entering from the right, fading before the headline */
.aurora .a3{width:62%;height:54%;right:-18%;top:10%;opacity:.5;border-radius:60% 40% 55% 45% / 50% 55% 45% 50%;
transform:rotate(-6deg) skewY(5deg);
background:radial-gradient(ellipse at 62% 45%,rgba(0,180,255,.5) 0%,rgba(102,190,255,.26) 40%,transparent 74%);
animation:auroraPulse 28s ease-in-out infinite reverse}
/* L4 — royal-blue silk fold, lower-center */
.aurora .a4{width:72%;height:32%;left:15%;bottom:2%;opacity:.55;border-radius:42% 58% 70% 30% / 60% 38% 62% 40%;
transform:rotate(8deg) skewY(-7deg);
background:linear-gradient(115deg,transparent 6%,rgba(41,92,230,.18) 20%,rgba(36,102,255,.6) 47%,rgba(102,190,255,.32) 68%,transparent 92%)}
/* L5 — darker blue pocket for dimensionality (translucent-silk shadow) */
.aurora .a5{width:32%;height:22%;left:33%;bottom:12%;opacity:.5;border-radius:50% 50% 60% 40% / 55% 45% 55% 45%;
transform:rotate(-12deg);mix-blend-mode:multiply;
background:radial-gradient(ellipse at 50% 50%,rgba(12,40,120,.5) 0%,rgba(23,64,174,.22) 45%,transparent 72%)}
@keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2%,1.6%) scale(1.05)}}
@keyframes auroraPulse{0%,100%{opacity:.48}50%{opacity:.72}}
/* dot grid above the aurora, below the text */
.hero .dots-bg,.phero .dots-bg{z-index:1}
/* white wash behind headline for legibility */
.hero::after,.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(circle at 50% 46%,rgba(246,248,255,.92) 0%,rgba(246,248,255,.5) 22%,transparent 52%)}
.hero h1{margin:24px auto 22px;max-width:14ch}
.hero .lead{max-width:640px;margin:0 auto}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:34px 0 30px}
.trusted{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--muted);font-size:.85rem}
.avatars{display:flex}
.avatars .av{width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin-left:-9px;background:linear-gradient(135deg,var(--blue-400),var(--blue-700));box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.65rem;font-weight:700}
.avatars .av:first-child{margin-left:0}
/* left/right split hero variant (interior pages) */
.hero-split{text-align:left}
.hero-split .wrap{}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;text-align:left}
.hero-split h1,.hero-split .lead{margin-left:0;margin-right:0;max-width:none;text-align:left}
.hero-split .hero-cta{justify-content:flex-start}
.stat-row{display:flex;flex-wrap:wrap;gap:38px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .n{font-family:'Geist';font-weight:700;font-size:1.9rem;color:var(--ink);letter-spacing:-.03em}
.stat .l{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* hero floating preview cards */
.hero-float{position:relative;max-width:960px;margin:56px auto 0;height:0}
.floatcard{position:absolute;animation:float 6s ease-in-out infinite}
.floatcard:nth-child(2){animation-delay:-2s}
.floatcard:nth-child(3){animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* ---------- DARK PANEL (Unizen card) ---------- */
.panel{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--panel-line);border-radius:var(--r-lg);overflow:hidden;color:var(--panel-ink)}
.panel:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at center,rgba(255,255,255,.05) 1px,transparent 1.3px);background-size:22px 22px;opacity:.5;pointer-events:none}
.panel:after{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--blue-400),transparent);opacity:.7}
.panel .inner{position:relative;z-index:1;padding:28px}
.panel h4{color:#fff;margin-bottom:8px}
.panel p{color:var(--panel-soft);font-size:.94rem;margin:0}
.panel .kicker{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#8fb4ff;font-weight:600;margin-bottom:12px;display:block}
.panel .viz{position:relative;flex:1;min-height:190px;border-radius:var(--r);margin-bottom:22px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(47,107,242,.12),transparent 60%)}
/* light viz (capability cards) */
.viz{position:relative;flex:1;min-height:200px;border-radius:var(--r);margin-bottom:22px;display:flex;align-items:center;justify-content:center;overflow:hidden;
background:radial-gradient(circle at 50% 35%,rgba(47,107,242,.09),transparent 62%);border:1px solid var(--line)}
.viz:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(29,78,216,.06) 1px,transparent 1.3px);background-size:20px 20px;opacity:.7}
.viz>*{position:relative;z-index:1}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.bento .panel{display:flex;flex-direction:column;grid-column:span 2}
.bento .panel .inner{display:flex;flex-direction:column;flex:1}
.bento>.card{display:flex;flex-direction:column;grid-column:span 2}
.bento .wide{grid-column:span 3}
/* ---------- Light card (gradient border) ---------- */
.card{border:1px solid transparent;border-radius:var(--r-lg);padding:28px;transition:.25s var(--ease);position:relative;overflow:hidden;
background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,rgba(93,142,251,.6),rgba(219,232,255,.45) 42%,rgba(93,142,251,.18)) border-box}
.card.dotted:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(29,78,216,.07) 1px,transparent 1.3px);background-size:22px 22px;opacity:.6;pointer-events:none}
.card:after{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,var(--blue-400),transparent);opacity:.55}
.card>*{position:relative;z-index:1}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 60px -22px rgba(23,64,174,.32),0 0 0 1px rgba(93,142,251,.12);
background:linear-gradient(var(--blue-50),#fff) padding-box,linear-gradient(150deg,var(--blue-500),rgba(93,142,251,.45)) border-box}
.card h4{margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:.95rem;margin:0}
.card .kicker{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);font-weight:600;margin-bottom:14px;display:block}
/* ---------- Shared card surface ----------
The gradient border + dot texture + top highlight from .card.dotted,
available to any component that brings its own padding and layout.
Add .lift for the hover raise. Keep card styling in ONE place. */
.cardface{position:relative;overflow:hidden;border:1px solid transparent;border-radius:var(--r-lg);
background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,rgba(93,142,251,.6),rgba(219,232,255,.45) 42%,rgba(93,142,251,.18)) border-box}
.cardface:before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(circle,rgba(29,78,216,.07) 1px,transparent 1.3px);background-size:22px 22px;opacity:.6}
.cardface:after{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;opacity:.55;
background:linear-gradient(90deg,transparent,var(--blue-400),transparent)}
.cardface>*{position:relative;z-index:1}
.cardface.lift{transition:.25s var(--ease)}
.cardface.lift:hover{transform:translateY(-5px);
box-shadow:0 26px 60px -22px rgba(23,64,174,.32),0 0 0 1px rgba(93,142,251,.12);
background:linear-gradient(var(--blue-50),#fff) padding-box,linear-gradient(150deg,var(--blue-500),rgba(93,142,251,.45)) border-box}
/* soft-background sections need the face to stay white */
.soft .cardface,.bg-soft .cardface{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,rgba(93,142,251,.6),rgba(219,232,255,.45) 42%,rgba(93,142,251,.18)) border-box}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.chip{width:44px;height:44px;border-radius:12px;background:var(--blue-50);border:1px solid var(--blue-100);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.chip svg{width:22px;height:22px;stroke:var(--blue-600);fill:none}
.panel .chip{background:rgba(47,107,242,.14);border-color:rgba(47,107,242,.3)}
.panel .chip svg{stroke:#8fb4ff}
/* ---------- Bar chart (dark viz) ---------- */
.barchart{display:flex;align-items:flex-end;gap:14px;height:150px;width:100%;padding:0 6px}
.barchart .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:9px;height:100%}
.barchart .bar .fill{width:100%;border-radius:8px 8px 3px 3px;height:0;background:linear-gradient(180deg,rgba(93,142,251,.5),rgba(47,107,242,.12));transition:height 1.1s var(--ease);border:1px solid rgba(93,142,251,.3);border-bottom:none}
.barchart .bar.hot .fill{background:linear-gradient(180deg,var(--blue-500),var(--blue-700));border-color:var(--blue-400);box-shadow:0 0 24px rgba(47,107,242,.6)}
.barchart .bar .v{font-family:'Geist Mono';font-size:.74rem;font-weight:600;color:#cdd8ee}
.barchart .bar .k{font-size:.64rem;color:var(--panel-muted);text-transform:uppercase;letter-spacing:.08em}
.barchart.light .bar .fill{background:linear-gradient(180deg,var(--blue-300),var(--blue-100));border-color:var(--blue-200)}
.barchart.light .bar.hot .fill{background:linear-gradient(180deg,var(--blue-600),var(--blue-400))}
.barchart.light .bar .v{color:var(--ink-2)}
.barchart.light .bar .k{color:var(--muted)}
/* ---------- Radial gauge (tick marks) ---------- */
.gauge{position:relative;width:200px;height:200px;margin:0 auto}
.gauge svg{width:100%;height:100%}
.gauge .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:6px}
.gauge .lbl b{font-family:'Geist';font-weight:700;font-size:2.5rem;color:var(--ink);letter-spacing:-.03em}
.gauge .lbl span{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);max-width:110px;white-space:normal;text-align:center;line-height:1.35;margin-top:4px}
.gauge.dark .lbl b{color:#fff}.gauge.dark .lbl span{color:var(--panel-muted)}
/* ---------- Notification stack (light) ---------- */
.notif-stack{position:relative;width:100%;display:flex;flex-direction:column;gap:12px;padding:6px 12px}
.notif{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--blue-100);box-shadow:0 8px 24px -12px rgba(29,78,216,.35);animation:float 6s ease-in-out infinite}
.notif:nth-child(2){margin-left:24px;animation-delay:-2s}
.notif:nth-child(3){margin-left:48px;animation-delay:-4s}
.notif .ic{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--blue-600)}
.notif .ic svg{width:16px;height:16px;stroke:#fff;fill:none}
.notif b{font-size:.84rem;color:var(--ink);font-weight:600}
.notif .badge-v{margin-left:auto;width:17px;height:17px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center}
.notif .badge-v svg{width:10px;height:10px;stroke:#fff}
/* ---------- Integration orbit (light) ---------- */
.orbit{position:relative;width:100%;height:200px;display:flex;align-items:center;justify-content:center}
.orbit .ring{position:absolute;border:1px dashed var(--blue-200);border-radius:50%}
.orbit .ring.r1{width:120px;height:120px;animation:spin 24s linear infinite}
.orbit .ring.r2{width:196px;height:196px;animation:spin 40s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .core{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:flex;align-items:center;justify-content:center;box-shadow:0 0 34px rgba(47,107,242,.55);z-index:3;position:relative}
.orbit .core svg{width:28px;height:28px;stroke:#fff;fill:none}
.orbit .node{position:absolute;width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--blue-100);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 6px 16px -8px rgba(29,78,216,.4)}
.orbit .node svg{width:18px;height:18px;stroke:var(--blue-600);fill:none}
/* ---------- Progress card (light) ---------- */
.progline{height:7px;border-radius:7px;background:var(--blue-100);overflow:hidden;margin:12px 0}
.progline i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-600),var(--blue-400));border-radius:7px;box-shadow:0 0 12px rgba(47,107,242,.5);animation:load 3s var(--ease) infinite}
@keyframes load{0%{width:10%}60%{width:88%}100%{width:10%}}
.tagrow{display:flex;flex-wrap:wrap;gap:8px}
.tagrow span{font-size:.72rem;padding:5px 11px;border-radius:999px;background:var(--blue-50);border:1px solid var(--blue-100);color:var(--blue-700);font-family:'Geist Mono'}
.prog-status{font-size:.78rem;color:var(--blue-600);font-family:'Geist Mono';margin-bottom:6px}
/* role/audience label tag (replaces eyebrow) */
.rlabel{display:inline-block;font-size:.68rem;font-weight:600;color:var(--blue-700);background:var(--blue-50);border:1px solid var(--blue-100);border-radius:999px;padding:4px 11px;margin-bottom:13px;letter-spacing:.02em}
/* ---------- Consolidation diagram (many contractors → one Roofix) ---------- */
.consolidate{width:100%;max-width:440px;margin:0 auto;aspect-ratio:21/16}
.consolidate svg{width:100%;height:auto;display:block;overflow:visible}
.c-line{stroke:var(--blue-200);stroke-width:1.4;fill:none;stroke-dasharray:3 8;animation:cflow 3.4s linear infinite}
@keyframes cflow{to{stroke-dashoffset:-33}}
.c-node{fill:#A9B6CE;animation:pulseO 3s ease-in-out infinite}
.c-core-glow{animation:pulseO 3s ease-in-out infinite}
/* ---------- Stylized US map w/ live markets (home) ---------- */
.usmini{width:100%;max-width:480px;margin:0 auto;min-height:200px}
.usmini svg{width:100%;height:auto;display:block}
.usmini canvas{width:100%;height:auto;display:block;margin:0 auto;max-width:460px}
.usmini .state{fill:#DBE8FF;stroke:#F6F8FF;stroke-width:.7}
.usmini .mk{fill:var(--blue-600)}
.usmini .mkhalo{fill:rgba(29,78,216,.35);transform-box:fill-box;transform-origin:center;animation:mkpulse 2.8s ease-in-out infinite}
@keyframes mkpulse{0%{transform:scale(.5);opacity:.75}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
/* ---------- Halftone gradient icons ---------- */
.hicon{display:inline-block;width:52px;height:52px;margin-bottom:16px;line-height:0}
.hicon svg{width:100%;height:100%;display:block}
/* ---------- Interactive area chart ---------- */
.charthead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;flex-wrap:wrap;gap:6px}
.charthead .ttl{font-weight:600;color:var(--ink);font-size:1.02rem}
.charthead .sub{font-size:.82rem;color:var(--muted)}
.chartwrap{position:relative}
.chartwrap svg{width:100%;height:auto;display:block;overflow:visible}
.chartwrap .gl{stroke:var(--line)}
.chartwrap .axv,.chartwrap .axx{font-family:'Geist Mono';font-size:13px;fill:var(--muted)}
.ch-pt{fill:#fff;stroke:var(--blue-600);stroke-width:2.5;opacity:0;transition:opacity .15s}
.ch-pt.on{opacity:1}
.ch-guide{stroke:var(--blue-300);stroke-dasharray:4 4;opacity:0;transition:opacity .15s}
.ch-guide.on{opacity:1}
.ch-tip{position:absolute;transform:translate(-50%,-125%);background:var(--panel);color:#fff;border-radius:10px;padding:8px 12px;font-size:.78rem;pointer-events:none;opacity:0;transition:opacity .12s;white-space:nowrap;box-shadow:var(--shadow-lg);z-index:5}
.ch-tip.on{opacity:1}
.ch-tip b{font-family:'Geist';font-weight:700;font-size:1rem;display:block;letter-spacing:-.01em}
.ch-tip em{color:#8fb4ff;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-style:normal}
/* dark glowing bar chart */
.chart-dark{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--panel-line);border-radius:var(--r-xl);padding:28px 26px;overflow:hidden;box-shadow:var(--shadow-lg)}
.chart-dark:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1.3px);background-size:22px 22px;opacity:.4;pointer-events:none}
.chart-dark>*{position:relative;z-index:1}
.cd-head{display:flex;gap:56px;flex-wrap:wrap;margin-bottom:8px}
.cd-lbl{display:flex;align-items:center;gap:7px;font-size:.72rem;letter-spacing:.05em;color:var(--panel-soft);margin-bottom:8px}
.cd-lbl .dotm{width:9px;height:9px;border-radius:50%;flex:none}
.cd-val{font-family:'Geist';font-weight:700;font-size:2.5rem;color:#fff;letter-spacing:-.035em;line-height:1;display:block}
.cd-sub{display:block;margin-top:7px;font-size:.82rem;color:var(--panel-muted)}
.cd-sub .up{color:#5fe0a0;font-weight:700;margin-right:6px}
.cd-bar{fill:url(#bg1);transition:opacity .18s}
.cd-bar.hot{fill:url(#bg2)}
.cd-bar.dim{opacity:.28}
.cd-x{font-family:'Geist Mono';font-size:13px;fill:var(--panel-muted)}
.ch-tip.light{background:#fff;color:var(--ink);box-shadow:var(--shadow-lg)}
.ch-tip.light b{color:var(--ink)}
.ch-tip.light em{color:var(--blue-600)}
/* ---------- Isometric dot matrix ---------- */
.dotmatrix{width:100%;max-width:440px;margin:0 auto;aspect-ratio:1.2/1}
.dotmatrix ellipse{transition:opacity .4s}
.pulse{animation:pulseO 3s ease-in-out infinite}
@keyframes pulseO{0%,100%{opacity:1}50%{opacity:.55}}
/* ---------- Why grid (crosshair) ---------- */
.why{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:940px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.why:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(29,78,216,.05) 1px,transparent 1.3px);background-size:26px 26px;pointer-events:none}
.why .cell{padding:44px 40px;position:relative;z-index:1}
.why .cell:nth-child(1),.why .cell:nth-child(2){border-bottom:1px solid var(--line)}
.why .cell:nth-child(odd){border-right:1px solid var(--line)}
.why .cell p{color:var(--ink-soft);margin:0;font-size:.96rem}
.why .cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:var(--blue-600);border-radius:11px;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 0 0 7px #fff,var(--glow)}
.why .cross svg{width:18px;height:18px;stroke:#fff}
/* animated reveal (draws in on scroll) */
.why .cell{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.why.in .cell{opacity:1;transform:none}
.why.in .cell:nth-child(1){transition-delay:.05s}
.why.in .cell:nth-child(2){transition-delay:.14s}
.why.in .cell:nth-child(3){transition-delay:.23s}
.why.in .cell:nth-child(4){transition-delay:.32s}
.why .beam{position:absolute;z-index:2;pointer-events:none}
.why .beam-h{left:5%;right:5%;top:50%;height:2px;transform:scaleX(0);transform-origin:center;transition:transform .9s var(--ease) .15s;
background:linear-gradient(90deg,transparent,var(--blue-400) 22%,var(--blue-500) 50%,var(--blue-400) 78%,transparent)}
.why .beam-v{top:5%;bottom:5%;left:50%;width:2px;transform:scaleY(0);transform-origin:center;transition:transform .9s var(--ease) .15s;
background:linear-gradient(180deg,transparent,var(--blue-400) 22%,var(--blue-500) 50%,var(--blue-400) 78%,transparent)}
.why.in .beam-h{transform:scaleX(1)}
.why.in .beam-v{transform:scaleY(1)}
.why .cross{transform:translate(-50%,-50%) scale(0);opacity:0;transition:transform .5s var(--ease) .55s,opacity .3s .55s}
.why.in .cross{transform:translate(-50%,-50%) scale(1);opacity:1;animation:crossPulse 3.2s ease-in-out 1.1s infinite}
@keyframes crossPulse{0%,100%{box-shadow:0 0 0 6px #fff,0 0 0 rgba(47,107,242,0)}50%{box-shadow:0 0 0 6px #fff,0 0 26px rgba(47,107,242,.85)}}
/* ---------- Comparison table ---------- */
.ctable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ctable th,.ctable td{padding:16px 20px;text-align:left;font-size:.92rem;border-bottom:1px solid var(--line)}
.ctable thead th{background:var(--bg-soft);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ctable thead th.us{color:var(--blue-700)}
.ctable td.us{font-weight:600;color:var(--ink)}
.ctable td .tag{display:inline-block;margin-left:8px;font-size:.68rem;font-weight:600;color:var(--green);background:#E7F7EE;border-radius:6px;padding:2px 7px;font-family:'Geist Mono'}
.ctable tr:last-child td{border-bottom:none}
.ctable .metric{color:var(--ink-soft)} .ctable .them{color:var(--muted)}
/* ---------- ROI Calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow)}
.calc-in{padding:34px}
.calc-in .kicker{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);font-weight:600;margin-bottom:22px}
.field{margin-bottom:22px}
.field .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.field label{font-size:.9rem;color:var(--ink-soft)}
.field .val{font-family:'Geist Mono';font-weight:600;color:var(--blue-700)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--blue-500),var(--blue-200));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--blue-600);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(29,78,216,.5)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--blue-600);cursor:pointer;border:3px solid #fff}
.calc-out{background:var(--panel);padding:34px;border-left:1px solid var(--line);position:relative;overflow:hidden;color:#fff}
.calc-out:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1.3px);background-size:22px 22px;opacity:.5}
.calc-out>*{position:relative;z-index:1}
.calc-hero{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:24px;margin-bottom:16px}
.calc-hero .kicker{color:#8fb4ff;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.calc-hero .big{font-family:'Geist';font-weight:700;font-size:2.9rem;color:#fff;line-height:1;letter-spacing:-.03em;margin-top:8px}
.calc-hero .cap{font-size:.85rem;color:var(--panel-soft);margin-top:8px}
.calc-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.calc-mini .m{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px}
.calc-mini .m .n{font-family:'Geist';font-weight:700;font-size:1.4rem;color:#5fe0a0}
.calc-mini .m .l{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--panel-muted)}
.calc-break{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden}
.calc-break .li{display:flex;justify-content:space-between;padding:11px 16px;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.07);color:var(--panel-soft)}
.calc-break .li:last-child{border-bottom:none;font-weight:700;background:rgba(255,255,255,.04);color:#fff}
.calc-break .li span:last-child{font-family:'Geist Mono';color:#cdd8ee}
/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:.2s}
.faq-item.open{border-color:var(--blue-200);box-shadow:var(--shadow-sm)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-weight:600;font-size:1.02rem;cursor:pointer}
.faq-q .ic{flex:none;width:26px;height:26px;border-radius:8px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;transition:.25s var(--ease)}
.faq-q .ic svg{width:15px;height:15px;stroke:var(--blue-600)}
.faq-item.open .faq-q .ic{background:var(--blue-600);transform:rotate(45deg)}
.faq-item.open .faq-q .ic svg{stroke:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a p{padding:0 24px 22px;color:var(--ink-soft);margin:0;font-size:.96rem}
/* ---------- CTA glow band (dark) ---------- */
.cta{position:relative;text-align:center;padding:100px 0;overflow:hidden;background:var(--panel);border-radius:var(--r-xl);margin:0 24px}
.cta:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.045) 1px,transparent 1.3px);background-size:24px 24px;opacity:.6}
.cta-inner{position:relative;z-index:3;max-width:700px;margin:0 auto;padding:0 24px}
.cta h2,.cta h3{color:#fff}
.cta p{color:#aebbd2;margin:18px 0 32px}
.cta-glow{position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);width:820px;height:480px;background:radial-gradient(ellipse at center,rgba(47,107,242,.85),rgba(47,107,242,.32) 38%,transparent 70%);z-index:1}
/* ---------- Footer ---------- */
.footer{background:var(--panel);color:#93a1ba;padding:76px 0 32px;position:relative;overflow:hidden}
.footer:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1.3px);background-size:26px 26px}
.footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;position:relative;z-index:1}
.footer .brand{color:#fff;margin-bottom:16px}
.footer p{font-size:.88rem;line-height:1.7;max-width:280px;color:#8a99b3}
.footer h5{color:#fff;font-family:'Geist';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;font-weight:600}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer ul a{font-size:.9rem;color:#93a1ba;transition:.18s}
.footer ul a:hover{color:#fff}
.footer .contact span{display:block;font-size:.88rem;margin-bottom:9px;color:#93a1ba}
.footer-btm{border-top:1px solid rgba(255,255,255,.08);margin-top:56px;padding-top:24px;display:flex;justify-content:space-between;font-size:.82rem;color:#6d7b95;position:relative;z-index:1}
.footer-btm a{color:#6d7b95;margin-left:18px} .footer-btm a:hover{color:#fff}
/* ---------- Ticker ---------- */
.ticker{background:var(--panel);color:#cdd8ea;overflow:hidden;border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line)}
.ticker-track{display:flex;gap:46px;white-space:nowrap;padding:13px 0;animation:scroll 42s linear infinite;font-size:.8rem;letter-spacing:.05em}
.ticker-track span{display:inline-flex;align-items:center;gap:9px}
.ticker-track b{color:var(--blue-300);font-weight:600}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- Sections ---------- */
.pad{padding:100px 0} .pad-sm{padding:64px 0}
.soft{background-color:var(--bg-soft);background-image:radial-gradient(circle,rgba(29,78,216,.05) 1px,transparent 1.5px);background-size:26px 26px}
.tint{background:linear-gradient(180deg,var(--bg-soft),#fff)}
/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.step{position:relative;padding-top:20px}
.step .num{width:34px;height:34px;border-radius:50%;background:var(--blue-600);color:#fff;font-family:'Geist';font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--glow)}
.step h4{font-size:1rem;margin-bottom:6px}
.step p{font-size:.86rem;color:var(--ink-soft);margin:0}
.step:not(:last-child):after{content:"";position:absolute;top:37px;left:44px;right:-8px;height:2px;background:linear-gradient(90deg,var(--blue-300),transparent)}
/* ---------- Layer stack ---------- */
.layers{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);position:relative}
.layers:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1.3px);background-size:22px 22px}
.layer{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--panel-line);transition:.2s;position:relative;z-index:1}
.layer:last-child{border-bottom:none}
.layer:hover{background:rgba(47,107,242,.1)}
.layer .lv{font-family:'Geist Mono';font-size:.75rem;color:#8fb4ff;font-weight:600}
.layer .nm{font-weight:600;font-size:.98rem;color:#fff}
.layer .nm small{display:block;font-weight:400;color:var(--panel-muted);font-size:.8rem;font-family:'Geist Mono'}
.layer .rt{font-family:'Geist Mono';font-size:.78rem;color:var(--panel-soft);text-align:right}
/* 64px + name + stat leaves ~140px for the name on a phone — stack instead */
@media(max-width:640px){
.layer{grid-template-columns:1fr auto;gap:5px 12px;padding:14px 18px}
.layer .lv{grid-column:1 / -1;font-size:.68rem}
.layer .nm{font-size:.92rem}
.layer .nm small{font-size:.74rem}
.layer .rt{align-self:center;font-size:.72rem}
}
/* ---------- Code block ---------- */
.code{background:#070C16;border:1px solid var(--panel-line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg)}
.code-bar{display:flex;gap:7px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.code-bar i{width:11px;height:11px;border-radius:50%;background:#33405c}
.code pre{margin:0;padding:22px;overflow:auto;font-family:'Geist Mono';font-size:.82rem;line-height:1.7;color:#c3d0e8}
.code .k{color:#7ab0ff}.code .s{color:#8fdca0}.code .c{color:#5f6d86}
/* ---------- Forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:38px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.form.dotted:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(29,78,216,.05) 1px,transparent 1.3px);background-size:22px 22px;pointer-events:none}
.form>*{position:relative;z-index:1}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.form .full{grid-column:span 2}
.form input,.form select,.form textarea{width:100%;min-width:0;padding:13px 15px;border:1px solid var(--line-2);border-radius:12px;font-family:'Geist';font-size:.95rem;color:var(--ink);background:#fff;transition:.18s}
.form .field{min-width:0}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-100)}
.form textarea{resize:vertical;min-height:110px}
.form .hint{font-size:.8rem;color:var(--muted);margin-top:4px}
.form .err{color:var(--red);font-size:.78rem;margin-top:5px;display:none}
.form .field.invalid input,.form .field.invalid select,.form .field.invalid textarea{border-color:var(--red)}
.form .field.invalid .err{display:block}
.form-ok{display:none;text-align:center;padding:30px}
.form-ok .chip{margin:0 auto 18px;width:56px;height:56px;background:#E7F7EE;border-color:#c7ecd5}
.form-ok .chip svg{stroke:var(--green);width:28px;height:28px}
/* badges / marquee / states / pipeline / tabs */
.badges{display:flex;flex-wrap:wrap;gap:12px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-size:.82rem;font-weight:500;color:var(--ink-soft);background:#fff}
.badge svg{width:15px;height:15px;stroke:var(--blue-600);fill:none}
.marquee{overflow:hidden;padding:14px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:64px;white-space:nowrap;animation:scroll 34s linear infinite;align-items:center}
.marquee-track span{font-family:'Geist';font-weight:600;font-size:1.35rem;color:var(--muted);opacity:.7;letter-spacing:-.02em}
.states{display:grid;grid-template-columns:repeat(13,1fr);gap:6px}
.states .st{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:8px;font-size:.72rem;font-weight:600;color:var(--blue-800);transition:.16s;cursor:default}
.states .st small{font-family:'Geist Mono';font-size:.5rem;color:var(--muted);font-weight:400}
.states .st:hover{background:var(--blue-600);color:#fff;transform:translateY(-2px)}
.states .st:hover small{color:var(--blue-100)}
.states .st.off{background:var(--bg-soft);border-color:var(--line);color:var(--line-2)}
.pipe{display:flex;flex-direction:column;gap:10px}
.pipe .row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:14px;border:1px solid var(--line)}
.pipe .row .pct{font-family:'Geist';font-weight:700;font-size:1.5rem;min-width:74px}
.pipe .row.win{background:#EAF8F0;border-color:#c7ecd5}.pipe .row.win .pct{color:var(--green)}
.pipe .row.bad{background:#FEF1F1;border-color:#f7d4d4}.pipe .row.bad .pct{color:var(--red)}
.pipe .row.neu{background:var(--bg-soft)}.pipe .row.neu .pct{color:var(--ink)}
.pipe .row .txt b{display:block;font-size:.95rem}.pipe .row .txt small{color:var(--muted);font-size:.82rem}
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.tab{padding:10px 20px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-weight:600;font-size:.9rem;color:var(--ink-soft);transition:.18s}
.tab:hover{border-color:var(--blue-300)}
.tab.active{background:var(--blue-600);color:#fff;border-color:var(--blue-600);box-shadow:0 8px 20px -8px rgba(29,78,216,.6)}
.tabpane{display:none}.tabpane.active{display:block;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:.7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
/* ---------- Responsive ---------- */
@media(max-width:1024px){
.hero-grid{grid-template-columns:1fr;gap:40px}
.bento{grid-template-columns:repeat(4,1fr)}
.bento .panel{grid-column:span 2}.bento .wide{grid-column:span 4}
.g3,.g4{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}.step:after{display:none}
.footer .wrap{grid-template-columns:1fr 1fr}
.states{grid-template-columns:repeat(8,1fr)}
}
@media(max-width:760px){
:root{--nav-h:64px}
.nav-links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:16px;gap:4px;transform:translateY(-140%);transition:.3s var(--ease);box-shadow:var(--shadow)}
.nav-links.open{transform:translateY(0)}
.nav-links a{padding:13px}
.nav-links a.res-door{margin:6px 0 0;text-align:center;padding:13px}
.hamburger{display:flex}.nav-right .login{display:none}
.nav-right .btn-glass{display:none}
.calc,.why{grid-template-columns:1fr}
.why .cell:nth-child(odd){border-right:none}
.why .cell:nth-child(3){border-bottom:1px solid var(--line)}
.why .cross{display:none}
.why .beam{display:none}
.form-grid,.form-row,.g2,.g3,.g4{grid-template-columns:1fr!important}
.form .field.full{grid-column:auto}
.bento{grid-template-columns:1fr}.bento .panel,.bento .wide,.bento>.card{grid-column:span 1}
.calc-out{border-left:none;border-top:1px solid var(--line)}
.ctable{display:block;overflow-x:auto;white-space:nowrap}
.stat-row{gap:24px}
.footer .wrap{grid-template-columns:1fr}
.footer-btm{flex-direction:column;gap:12px}
.cta{margin:0 12px}
}
/* ============================================================
STRIPE × UNIZEN additions
============================================================ */
/* Tight pill CTAs with arrow-in-circle badge */
.btn{padding:12px 22px;font-size:.94rem;gap:9px;min-height:44px}
.btn-lg{padding:13px 26px;font-size:.98rem;min-height:50px}
.btn .ab{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-left:3px;transition:transform .22s var(--ease)}
.btn .ab svg{width:15px;height:15px;stroke-width:2.4}
.btn:hover .ab{transform:translateX(3px)}
.btn:has(.ab){padding-right:9px}
.btn-primary .ab{background:#fff}
.btn-primary .ab svg{stroke:var(--blue-600)}
/* glass secondary (Unizen-style) */
/* Light-mode glassmorphism pill: frosted white, bright top edge, gloss, soft float */
.btn-glass{
color:var(--ink);border:1px solid transparent;
backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
background:
linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.38)) padding-box,
linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.25) 55%,rgba(255,255,255,.55)) border-box;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px -12px rgba(10,17,32,.2), 0 1px 2px rgba(10,17,32,.05);
}
.btn-glass:hover{
transform:translateY(-2px);color:var(--blue-700);
background:
linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.55)) padding-box,
linear-gradient(180deg,#fff,rgba(255,255,255,.4)) border-box;
box-shadow:inset 0 1px 0 #fff, 0 16px 40px -12px rgba(29,78,216,.28), 0 1px 2px rgba(10,17,32,.05);
}
.btn-glass .ab{background:var(--blue-600)}.btn-glass .ab svg{stroke:#fff}
/* Stripe animated mesh-gradient hero background (fills full hero) */
.mesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.92;filter:blur(50px);
background:
radial-gradient(30% 34% at 18% 28%,rgba(47,107,242,.55),transparent 60%),
radial-gradient(28% 32% at 78% 22%,rgba(93,142,251,.5),transparent 60%),
radial-gradient(34% 40% at 52% 52%,rgba(29,78,216,.4),transparent 62%),
radial-gradient(30% 36% at 84% 68%,rgba(0,180,255,.34),transparent 60%),
radial-gradient(30% 36% at 14% 78%,rgba(120,90,255,.24),transparent 62%),
radial-gradient(34% 34% at 62% 88%,rgba(47,107,242,.3),transparent 62%);
background-size:170% 170%;animation:mesh 22s ease-in-out infinite}
@keyframes mesh{0%{background-position:0% 20%}50%{background-position:100% 80%}100%{background-position:0% 20%}}
/* Stripe angled gradient product band */
.slab{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:60px;color:#fff;margin:0 24px;
background:linear-gradient(118deg,#0A1120 0%,#152F7E 58%,#1D4ED8 100%)}
.slab:before{content:"";position:absolute;inset:0;opacity:.55;background-size:180% 180%;animation:mesh 22s ease-in-out infinite;
background:radial-gradient(40% 60% at 82% 18%,rgba(93,142,251,.65),transparent 60%),radial-gradient(50% 60% at 8% 92%,rgba(0,180,255,.4),transparent 60%)}
.slab:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1.3px);background-size:24px 24px}
.slab-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.12fr;gap:48px;align-items:center}
.slab h2,.slab h3{color:#fff}
.slab p{color:#bcd0ea}
/* dashboard mockup */
.mock{background:rgba(8,13,23,.72);border:1px solid rgba(255,255,255,.13);border-radius:16px;overflow:hidden;backdrop-filter:blur(8px);box-shadow:var(--shadow-lg)}
.mock .mbar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);align-items:center}
.mock .mbar i{width:10px;height:10px;border-radius:50%;background:#33405c}
.mock .mbar b{margin-left:10px;font-size:.72rem;color:#8fb4ff;font-family:'Geist Mono';font-weight:500}
.mock .mbar .live{margin-left:auto;font-size:.6rem;color:#5fe0a0;font-family:'Geist Mono'}
.mock .mbody{padding:16px}
.mtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mtile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px}
.mtile .n{font-weight:700;font-size:1.15rem;color:#fff;letter-spacing:-.02em}
.mtile .l{font-size:.58rem;color:#8fb4ff;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.mbars{display:flex;align-items:flex-end;gap:8px;height:70px;padding:10px;background:rgba(255,255,255,.03);border-radius:10px;margin-bottom:12px}
.mbars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--blue-400),rgba(47,107,242,.25))}
.mbars i.hot{background:linear-gradient(180deg,#5fe0a0,rgba(95,224,160,.25))}
.mrows .r{display:flex;justify-content:space-between;padding:9px 11px;border-radius:8px;font-size:.72rem;color:#cdd8ee;background:rgba(255,255,255,.03);margin-bottom:6px;font-family:'Geist Mono'}
.mrows .r .ok{color:#5fe0a0}
/* backbone stat band + area chart */
.backbone{text-align:center}
.bb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0 0 48px}
.bb-stats .s .n{font-family:'Geist';font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.04em;background:linear-gradient(120deg,var(--blue-600),var(--blue-400));-webkit-background-clip:text;background-clip:text;color:transparent}
.bb-stats .s .l{font-size:.82rem;color:var(--ink-soft);margin-top:4px}
.areachart{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}
.areachart svg{width:100%;height:auto;display:block}
@media(max-width:1024px){
.slab-grid{grid-template-columns:1fr;gap:32px}
.bb-stats{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media(max-width:760px){
.slab{padding:32px 18px;margin:0 14px}
/* compact auto-width pills (Unizen), not full-width */
.hero-cta{justify-content:center;flex-wrap:wrap;width:auto;gap:10px;align-items:center}
.hero-cta .btn{flex:0 0 auto;width:auto;justify-content:center;padding:12px 18px;font-size:.86rem;white-space:nowrap;gap:7px}
.hero-cta .btn .ab{width:23px;height:23px;margin-left:2px;flex:none}
.btn{padding:11px 18px;font-size:.9rem;min-height:44px}
.btn-lg{padding:12px 20px;font-size:.92rem;min-height:46px}
.btn .ab{width:25px;height:25px}
.mtiles{grid-template-columns:repeat(3,1fr)}
.trusted{flex-direction:column;gap:8px}
/* mobile spacing pass */
.wrap{padding:0 26px}
.pad{padding:56px 0}
.pad-sm{padding:38px 0}
.section-head{margin-bottom:34px}
.section-head p{font-size:1rem}
.hero-main{padding:14px 0}
.hero{padding-top:20px}
.hero .lead{font-size:1rem;max-width:none}
/* Big type filling the line made the 26px gutters read as tight.
Wider gutters in every hero + a slightly smaller h1 on phones. */
.hero .wrap,.phero .wrap,.chero .wrap{padding-left:32px;padding-right:32px}
.hero h1,.phero h1{max-width:none}
h1{font-size:clamp(1.9rem,7.4vw,2.5rem)}
h2{font-size:clamp(1.7rem,6.4vw,2.2rem)}
.cta{padding:60px 0}
.why .cell{padding:30px 22px}
.card{padding:22px}
/* capabilities bento: tighten viz + visuals on mobile */
.bento{gap:16px}
.viz{min-height:150px!important;margin-bottom:16px}
.gauge{width:168px;height:168px}
.orbit{height:200px}
.orbit .ring.r1{width:104px;height:104px}
.orbit .ring.r2{width:172px;height:172px}
.barchart{height:120px}
.notif:nth-child(2){margin-left:16px}
.notif:nth-child(3){margin-left:32px}
.notif{padding:10px 12px}
.tagrow span{font-size:.68rem;padding:4px 9px}
/* hero trust marquee on mobile */
.hero-trust{padding:4px 0 30px}
.hero-trust .tlbl{font-size:.62rem;letter-spacing:.12em;padding:0 16px;margin-bottom:14px}
.marquee-track{gap:38px}
.marquee-track span{font-size:1rem}
/* chart axis labels readable on mobile (units scale down with the SVG) */
.chartwrap .axv,.chartwrap .axx{font-size:22px}
.ch-pt{r:7}
/* dark chart metric readouts stay side-by-side on mobile */
.cd-head{gap:16px;flex-wrap:nowrap}
.cd-head>div{flex:1 1 0;min-width:0}
.cd-lbl{font-size:.64rem}
.cd-val{font-size:1.7rem}
.cd-sub{font-size:.72rem}
.chart-dark{padding:22px 18px}
/* comparison table → stacked cards (no horizontal scroll) */
.ctable{display:block;overflow:visible;white-space:normal;border:none;background:none;box-shadow:none}
.ctable thead{display:none}
.ctable tbody{display:block}
.ctable tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;padding:14px 16px}
.ctable td{display:block;border:none;padding:0}
.ctable td.metric{font-weight:600;color:var(--ink);font-size:1.02rem;margin-bottom:10px}
.ctable td.us,.ctable td.them{position:relative;padding:8px 0 8px 0;font-size:.92rem}
.ctable td.us{border-top:1px solid var(--line)}
.ctable td.us::before{content:"Roofix";display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600);font-weight:600;margin-bottom:3px}
.ctable td.them::before{content:"Local networks";display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:3px}
/* perf: continuous blurred/animated backdrops are cheap on desktop GPUs but
can cause real jank on phones. Keep the same look, just make it static
and cut blur radius so mobile isn't compositing these every frame. */
.grain{animation:none;opacity:.08}
.aurora,.aurora *,.mesh,.slab:before{animation:none!important}
.aurora{filter:blur(28px)!important}
.aurora span,.aurora b{filter:blur(36px)!important}
.mesh{filter:blur(24px)!important}
}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
.ticker-track,.marquee-track,.floatcard,.notif,.orbit .ring,.progline i,.pulse,.mesh,.slab:before,.grain,.aurora,.aurora span,.c-line,.c-node,.c-core-glow,.mkhalo{animation:none}
.reveal{opacity:1;transform:none}
}
/* ---------- Imagery: feature bands + in-card media (added) ---------- */
.feat{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin:0}
.feat>img{display:block;width:100%;height:100%;object-fit:cover}
.feat.r-16x9>img{aspect-ratio:16/9}
.feat.r-21x9>img{aspect-ratio:21/9}
.feat .feat-cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 clamp(24px,7%,72px);max-width:560px}
.feat .feat-cap h3{color:#fff;font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.08}
.feat .feat-cap p{color:rgba(255,255,255,.82);margin:0;max-width:420px}
.feat .feat-cap .pill{align-self:flex-start}
.media{display:block;width:100%;margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.media>img{display:block;width:100%;height:100%;object-fit:cover}
.media.r-16x9>img{aspect-ratio:16/9}
.media.r-3x2>img{aspect-ratio:3/2}
.viz>img.viz-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:640px){
.feat.r-16x9>img,.feat.r-21x9>img{aspect-ratio:4/3}
.feat .feat-cap{max-width:none;padding:0 22px;gap:10px}
.feat .feat-cap h3{font-size:1.2rem}
.feat .feat-cap p{font-size:.9rem}
.feat:after{background:linear-gradient(90deg,rgba(6,12,24,.8),rgba(6,12,24,.45) 60%,rgba(6,12,24,.15))}
}
/* feature-band caption legibility scrim */
.feat>img{position:relative;z-index:0}
.feat:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,12,24,.74),rgba(6,12,24,.30) 48%,rgba(6,12,24,0) 74%)}
.feat .feat-cap{z-index:2}
/* ============================================================
IMAGE SLOTS — intentional placeholders until real photography
lands. Swap the whole for:
============================================================ */
.ph{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;display:flex;align-items:center;justify-content:center;
background:linear-gradient(160deg,var(--blue-50),#F7FAFF 55%,var(--blue-100));
border:1.5px dashed var(--blue-200);text-align:center}
.ph:before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(circle,rgba(29,78,216,.10) 1px,transparent 1.4px);background-size:20px 20px;opacity:.7}
.ph.r-16x9{aspect-ratio:16/9} .ph.r-21x9{aspect-ratio:21/9} .ph.r-4x3{aspect-ratio:4/3}
.ph.r-3x2{aspect-ratio:3/2} .ph.r-1x1{aspect-ratio:1/1} .ph.r-3x4{aspect-ratio:3/4}
.ph-i{position:relative;z-index:1;padding:22px;max-width:34ch;display:flex;flex-direction:column;align-items:center;gap:7px}
.ph-i svg{width:30px;height:30px;stroke:var(--blue-500);fill:none;stroke-width:1.5;opacity:.9;margin-bottom:2px}
.ph-i b{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue-700)}
.ph-i span{font-size:.9rem;line-height:1.45;color:var(--ink-2);font-weight:500}
.ph-i em{font-style:normal;font-family:'Geist Mono';font-size:.66rem;color:var(--blue-600);opacity:.85;
background:rgba(255,255,255,.7);border:1px solid var(--blue-100);border-radius:999px;padding:3px 10px;margin-top:3px}
.ph.dark{background:linear-gradient(160deg,#0B1220,#152F7E);border-color:rgba(143,180,255,.35)}
.ph.dark:before{background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.4px)}
.ph.dark .ph-i svg{stroke:#8fb4ff} .ph.dark .ph-i b{color:#8fb4ff}
.ph.dark .ph-i span{color:#dbe6fa}
.ph.dark .ph-i em{color:#b8c8e4;background:rgba(255,255,255,.06);border-color:rgba(143,180,255,.25)}
@media(max-width:640px){
.ph.r-21x9{aspect-ratio:16/10} .ph-i{padding:16px} .ph-i span{font-size:.84rem}
}
/* ---------- Bento image cell (residential Why) ---------- */
.bento .imgcell{padding:0;min-height:280px}
.bento .imgcell::after{content:none}
.bento .imgcell>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bento .imgcell .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(6,12,24,.82),rgba(6,12,24,.2) 55%,rgba(6,12,24,.05))}
.bento .imgcell .cap{position:relative;z-index:2;margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:24px}
.bento .imgcell .cap h4{color:#fff;margin:0;font-size:1.2rem;line-height:1.12}
.bento .imgcell .cap .pill{align-self:flex-start}
/* ---------- Very small phones (iPhone SE) ---------- */
@media(max-width:360px){
.hero .wrap,.phero .wrap,.chero .wrap{padding-left:26px;padding-right:26px}
h1{font-size:clamp(1.78rem,7.6vw,2.2rem)}
.hero .lead,.phero .lead{font-size:.96rem}
.hero-cta .btn{width:100%;justify-content:center}
}