:root{
  --ink:#050a14;
  --ink-2:#0a1220;
  --ink-3:#101b2e;
  --paper:#f5f8fc;
  --white:#ffffff;
  --blue:#0b63d1;
  --blue-hi:#2a8bff;
  --text:#0b1424;
  --muted:#5b6678;
  --line-dark:rgba(255,255,255,.14);
  --line-light:#d9e1ec;
  --head:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --wrap:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--body);color:var(--text);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* type */
.eyebrow{font-family:var(--head);font-size:.72rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.h-display{font-family:var(--head);font-weight:800;text-transform:uppercase;line-height:1.02;letter-spacing:-.005em}
.on-dark{color:var(--white)}
.accent{color:var(--blue-hi)}
.on-light .accent{color:var(--blue)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:.95rem 1.5rem;border-radius:7px;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.btn svg{width:15px;height:15px;flex:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hi)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-ghost-dark{background:transparent;color:var(--text);border-color:var(--text)}
.btn-sm{padding:.8rem 1.25rem;font-size:.72rem}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line-light)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:76px}
.brand img{height:46px;width:auto}
.nav{display:flex;gap:2.4rem;font-family:var(--head);font-weight:500;font-size:.8rem;color:var(--text)}
.nav a{padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--blue)}
.menu-btn{display:none;background:none;border:1px solid var(--line-light);border-radius:6px;width:44px;height:44px;cursor:pointer;color:var(--text)}
.menu-btn svg{margin:auto;width:22px;height:22px}

/* hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;min-height:660px;display:flex;align-items:center}
.hero-scene{position:absolute;inset:0;width:100%;height:100%}
.hero-scene svg{width:100%;height:100%}
.screen-glow{animation:glow 7s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.0}to{opacity:.22}}
.hero .wrap{position:relative;width:100%;padding-top:70px;padding-bottom:70px}
.hero-copy{max-width:700px}
.hero .eyebrow{color:rgba(255,255,255,.75);margin-bottom:1.6rem}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.7rem)}
.hero p.lede{margin-top:1.6rem;max-width:460px;color:rgba(255,255,255,.88);font-size:1.02rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero-side{position:absolute;right:32px;top:50%;transform:translateY(-78%);border-left:1px solid var(--blue);padding-left:1.4rem;display:grid;gap:1.05rem;font-family:var(--head);font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.play-ring{width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center}
.play-ring::after{content:"";border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}

/* services strip */
.strip{background:var(--paper);padding:2.6rem 0}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.strip-item{padding:.6rem 2rem;text-align:center;border-left:1px solid var(--line-light)}
.strip-item:first-child{border-left:0}
.strip-item svg{width:46px;height:46px;margin:0 auto 1rem;stroke:var(--text);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.strip-item h3{font-family:var(--head);font-size:.92rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text)}
.strip-item p{margin-top:.55rem;font-size:.82rem;color:var(--muted);max-width:230px;margin-inline:auto}

/* split section */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--paper);min-height:460px}
.split-media{background-size:cover;background-position:center}
.split-body{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding:3rem 3rem 3rem 4.4rem;max-width:760px}
.split-body .eyebrow{color:#7b8698;margin-bottom:1.2rem;font-size:.68rem}
.split-body h2{font-size:clamp(2rem,3.6vw,3.1rem);color:var(--text)}
.split-body p{margin-top:1.3rem;color:#3c4658;font-size:.95rem;max-width:430px}
.split-body .btn{margin-top:1.8rem}
.tick-list{border-left:1px solid var(--line-light);padding:.4rem 0 .4rem 1.6rem;display:grid;gap:.95rem;font-family:var(--head);font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#4a5567;align-self:center}

/* work */
.work{background:var(--ink);color:#fff;padding:4.5rem 0}
.work-grid{display:grid;grid-template-columns:minmax(260px,.9fr) 2.1fr;gap:3.5rem;align-items:center}
.work .eyebrow{color:var(--blue-hi);margin-bottom:1.3rem}
.work h2{font-size:clamp(2rem,3.6vw,3rem)}
.work p{margin:1.4rem 0 2rem;color:rgba(255,255,255,.85);max-width:320px;font-size:.95rem}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.tile img{width:100%;aspect-ratio:.72;object-fit:cover;border-radius:2px;background:var(--ink-3)}
.tile figcaption{margin-top:.8rem;text-align:center;font-family:var(--head);font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.tile{margin:0}

/* brands */
.brands{background:var(--paper);padding:2.2rem 0 2.6rem;text-align:center}
.brands .eyebrow{color:var(--text);font-size:.7rem;font-weight:600}
.brand-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.4rem 2rem;margin-top:1.7rem;color:#20283a}
.brand-row span{white-space:nowrap}
.b-control4{font-family:var(--body);font-weight:300;font-size:1.35rem;letter-spacing:.01em}
.b-control4 b{font-weight:400;display:inline-block;border:1.5px solid currentColor;border-radius:50%;padding:0 .28em;font-size:.95em;margin-left:.08em}
.b-sonos{font-family:var(--head);font-weight:800;letter-spacing:.14em;font-size:1.2rem}
.b-samsung{font-family:var(--head);font-weight:800;letter-spacing:.04em;font-size:1.15rem;transform:scaleX(1.12)}
.b-lg{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--head);font-weight:800;font-size:1.35rem}
.b-lg i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#20283a;color:#fff;font-size:.72rem;letter-spacing:0}
.b-bose{font-family:var(--head);font-weight:800;font-style:italic;letter-spacing:.06em;font-size:1.3rem}
.b-lutron{font-family:var(--head);font-weight:700;letter-spacing:.1em;font-size:1.15rem}
.b-hunter{font-family:var(--head);font-weight:700;font-size:1rem;letter-spacing:-.01em}
.b-hunter b{font-weight:500}
.b-arlo{font-family:var(--body);font-weight:300;font-size:1.7rem;letter-spacing:.01em}

/* testimonials */
.proof{position:relative;background:linear-gradient(115deg,#04070e 0%,#0b1524 55%,#101c31 100%);color:#fff;padding:5rem 0 4.5rem;overflow:hidden}
.proof::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 20%,rgba(42,139,255,.16),transparent 65%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 90px);pointer-events:none}
.proof .wrap{position:relative}
.proof-grid{display:grid;grid-template-columns:minmax(260px,1fr) 1.7fr;gap:3.5rem;align-items:center}
.proof .eyebrow{color:var(--blue-hi);margin-bottom:1.3rem}
.proof h2{font-size:clamp(2rem,3.6vw,3rem)}
.proof p.lede{margin:1.4rem 0 2rem;color:rgba(255,255,255,.85);max-width:340px;font-size:.95rem}
.quote-card{position:relative;background:rgba(8,14,26,.72);border:1px solid var(--line-dark);border-radius:16px;padding:2.2rem 4rem 2.2rem 2.6rem;backdrop-filter:blur(6px)}
.stars{display:flex;gap:.3rem;margin-bottom:1.2rem;color:var(--blue-hi)}
.stars svg{width:24px;height:24px;fill:currentColor}
.quote-card blockquote{margin:0;font-size:1.02rem;line-height:1.65;color:rgba(255,255,255,.92);max-width:520px}
.quote-card .who{margin-top:1.5rem;font-size:.82rem;color:rgba(255,255,255,.75)}
.q-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--line-dark);background:rgba(5,10,20,.85);color:#fff;cursor:pointer;display:grid;place-items:center}
.q-arrow svg{width:14px;height:14px}
.q-prev{left:-17px}.q-next{right:-17px}
.q-dots{display:flex;justify-content:center;gap:.55rem;margin-top:1.4rem}
.q-dots button{width:7px;height:7px;border-radius:50%;border:0;background:rgba(255,255,255,.35);padding:0;cursor:pointer}
.q-dots button[aria-current="true"]{background:var(--blue-hi)}

/* cta band */
.cta{position:relative;overflow:hidden;background:linear-gradient(95deg,#062660 0%,#0a4bb0 38%,#1a7cf0 68%,#2b8fff 100%);color:#fff;padding:3.2rem 0}
.cta .wrap{display:flex;align-items:center;gap:2.5rem;min-height:120px;position:relative}
.cta .eyebrow{font-size:.68rem;color:rgba(255,255,255,.9);margin-bottom:.9rem}
.cta h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.cta .btn-primary{border-color:rgba(255,255,255,.35);background:#0b63d1}
.cta .btn-primary:hover{background:#0a54b3}
.cta-phone{position:absolute;right:6%;top:-1.2rem;width:230px;transform:rotate(-6deg);filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.cta-text{position:relative}

/* footer */
.site-footer{background:#04080f;color:rgba(255,255,255,.88);padding:3.4rem 0 1.6rem}
.foot-grid{display:grid;grid-template-columns:1.3fr .8fr 1fr 1.3fr;gap:2.5rem}
.foot-brand img{height:42px;width:auto}
.foot-brand p{margin:1.1rem 0 1.4rem;font-size:.84rem;max-width:220px;color:rgba(255,255,255,.75)}
.socials{display:flex;gap:1.1rem}
.socials svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.socials .fill{fill:#fff;stroke:none}
.site-footer h3{font-family:var(--head);font-size:.86rem;font-weight:600;color:#fff;margin-bottom:1.1rem}
.foot-links{display:grid;gap:.6rem;font-size:.8rem;color:rgba(255,255,255,.78)}
.foot-links a:hover{color:#fff;text-decoration:underline}
.contact-list{display:grid;gap:1rem;font-size:.84rem}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start}
.contact-list svg{width:18px;height:18px;flex:none;margin-top:.15rem;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.foot-bottom{margin-top:3rem;padding-top:1.3rem;border-top:1px solid rgba(42,139,255,.55);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:rgba(255,255,255,.75)}
.foot-bottom .tag{font-family:var(--head);letter-spacing:.2em;text-transform:uppercase;font-size:.66rem;font-weight:500}

/* quote dialog */
dialog{border:1px solid var(--line-dark);border-radius:14px;background:#0a1220;color:#fff;padding:0;width:min(520px,92vw)}
dialog::backdrop{background:rgba(2,5,10,.7)}
.dlg{padding:2rem}
.dlg h2{font-family:var(--head);font-size:1.4rem;font-weight:800;text-transform:uppercase}
.dlg p{margin:.5rem 0 1.4rem;font-size:.88rem;color:rgba(255,255,255,.75)}
.dlg label{display:block;font-size:.78rem;font-weight:500;margin-bottom:.9rem;color:rgba(255,255,255,.9)}
.dlg input,.dlg select,.dlg textarea{display:block;width:100%;margin-top:.35rem;padding:.8rem .9rem;border-radius:8px;border:1px solid var(--line-dark);background:#050a14;color:#fff;font:inherit;font-size:.9rem}
.dlg textarea{min-height:90px;resize:vertical}
.dlg-actions{display:flex;gap:.8rem;justify-content:flex-end;margin-top:1.2rem}

/* responsive */
@media (max-width:1100px){
  .hero-side{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .work-grid,.proof-grid{grid-template-columns:1fr;gap:2.2rem}
  .split{grid-template-columns:minmax(0,1fr)}
  .split-media{min-height:340px}
  .split-body{max-width:none;padding:3rem 32px}
  .cta-phone{opacity:.55}
}
@media (max-width:900px){
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:.5rem 32px 1rem;border-bottom:1px solid var(--line-light)}
  .nav.open{display:flex}
  .nav a{padding:.9rem 0;border-bottom:1px solid var(--line-light)}
  .menu-btn{display:grid}
  .site-header .btn{display:none}
  .strip-grid{grid-template-columns:1fr 1fr;row-gap:1.6rem}
  .strip-item:nth-child(3){border-left:0}
}
@media (max-width:620px){
  .wrap{padding:0 20px}
  .strip-grid{grid-template-columns:1fr}
  .strip-item{border-left:0;border-top:1px solid var(--line-light);padding:1.4rem 0 0}
  .strip-item:first-child{border-top:0}
  .split-body{grid-template-columns:1fr}
  .tick-list{border-left:0;padding-left:0;display:flex;flex-wrap:wrap;gap:.7rem 1.2rem}
  .quote-card{padding:1.8rem 1.4rem 3.6rem}
  .q-arrow{top:auto;bottom:.9rem;transform:none}
  .q-prev{left:auto;right:3.4rem}.q-next{right:.9rem}
  .foot-grid{grid-template-columns:1fr}
  .cta .wrap{flex-direction:column;align-items:flex-start}
  .cta-phone{display:none}
  .brand-row{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .screen-glow{animation:none;opacity:.1}
  .btn{transition:none}
}


/* ===== shared additions ===== */
.site-header.dark{background:#050a14;border-bottom-color:var(--line-dark)}
.site-header.dark .nav{color:#fff}
.site-header.dark .nav a:hover{border-color:var(--blue-hi)}
.site-header.dark .menu-btn{color:#fff;border-color:var(--line-dark)}
.nav a[aria-current="page"]{border-color:var(--blue)}
.site-header.dark .nav a[aria-current="page"]{border-color:var(--blue-hi)}

.sec{padding:5rem 0}
.sec-light{background:var(--paper)}
.sec-dark{background:var(--ink);color:#fff}
.sec-head{max-width:660px;margin-bottom:2.8rem}
.sec-head .eyebrow{color:var(--blue);margin-bottom:1rem}
.sec-dark .sec-head .eyebrow{color:var(--blue-hi)}
.sec-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.sec-head p{margin-top:1rem;color:var(--muted)}
.sec-dark .sec-head p{color:rgba(255,255,255,.8)}

.check-list{display:grid;gap:.15rem}
.check-list li{position:relative;padding-left:1.5rem;margin:.32rem 0;font-size:.9rem}
.check-list li::before{content:"";position:absolute;left:.1rem;top:.42em;width:.36rem;height:.62rem;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg)}
.sec-dark .check-list li::before,.on-dark .check-list li::before{border-color:var(--blue-hi)}

/* page hero (inner pages) */
.page-hero{position:relative;background:linear-gradient(115deg,#04070e 0%,#0b1524 60%,#101c31 100%);color:#fff;padding:5.2rem 0 4.4rem;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 90% at 88% 10%,rgba(42,139,255,.18),transparent 65%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 90px);pointer-events:none}
.page-hero .wrap{position:relative}
.page-hero .eyebrow{color:var(--blue-hi);margin-bottom:1.2rem}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.7rem);max-width:17ch}
.page-hero p.lede{margin-top:1.4rem;max-width:580px;color:rgba(255,255,255,.86);font-size:1.05rem}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.svc-card{border:1px solid var(--line-light);border-radius:12px;padding:1.9rem;background:#fff}
.svc-card.wide{grid-column:span 2}
.svc-card.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.svc-card svg.ic{width:38px;height:38px;stroke:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1rem}
.svc-card.dark svg.ic{stroke:var(--blue-hi)}
.svc-card h3{font-family:var(--head);font-size:1.05rem;font-weight:700;margin-bottom:.4rem}
.svc-card p.sub{font-size:.88rem;color:var(--muted);margin-bottom:1rem}
.svc-card.dark p.sub{color:rgba(255,255,255,.75)}
.svc-card .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem}

/* TV mounting spotlight */
.tv-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.tv-grid h2{font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--text)}
.tv-grid p.body{margin:1.2rem 0 1.8rem;color:#3c4658;max-width:480px}
.addons{background:var(--ink);color:#fff;border-radius:16px;padding:2rem 2.2rem}
.addons h3{font-family:var(--head);font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-hi);margin-bottom:1.1rem}
.addons .check-list li{font-size:.95rem;padding:.55rem 0 .55rem 1.6rem;margin:0;border-bottom:1px solid var(--line-dark)}
.addons .check-list li:last-child{border-bottom:0}
.addons .check-list li::before{top:.95em}
.brackets{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem;font-size:.78rem}
.brackets span{border:1px solid var(--line-dark);border-radius:999px;padding:.4rem .9rem;color:rgba(255,255,255,.9)}
.addons .note{margin-top:1rem;font-size:.78rem;color:rgba(255,255,255,.65)}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.trust-item svg{width:34px;height:34px;stroke:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.9rem}
.trust-item h3{font-family:var(--head);font-size:.95rem;font-weight:700}
.trust-item p{margin-top:.4rem;font-size:.85rem;color:var(--muted)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:s}
.step{border-top:2px solid var(--line-light);padding-top:1.1rem}
.step::before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--head);font-weight:800;font-size:2.1rem;color:var(--blue);margin-bottom:.5rem}
.step h3{font-family:var(--head);font-size:1rem;font-weight:700}
.step p{margin-top:.5rem;font-size:.88rem;color:var(--muted)}

/* Control4 teaser on home */
.c4-band{position:relative;background:var(--ink);color:#fff;padding:5.2rem 0;overflow:hidden}
.c4-band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 82% 40%,rgba(42,139,255,.22),transparent 70%);pointer-events:none}
.c4-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:4rem;align-items:center}
.c4-band .eyebrow{color:var(--blue-hi);margin-bottom:1.2rem}
.c4-band h2{font-size:clamp(2rem,3.6vw,3rem)}
.c4-band p.lede{margin:1.3rem 0 1.8rem;max-width:480px;color:rgba(255,255,255,.86)}
.c4-band .hero-actions{margin-top:0}
.dealer{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;font-size:.8rem;color:rgba(255,255,255,.85);border:1px solid var(--line-dark);border-radius:999px;padding:.4rem .9rem}
.dealer b{color:#fff;font-family:var(--head);font-weight:700}
.c4-panel{background:#0a111e;border:1px solid var(--line-dark);border-radius:22px;padding:1.5rem;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 7px #04070d}
.c4-panel .top{display:flex;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.78);padding:.2rem .4rem}
.tiles6{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1rem}
.tile6{aspect-ratio:1;border-radius:14px;background:#0f1a2c;border:1px solid var(--line-dark);display:grid;place-content:center;justify-items:center;gap:.5rem;font:500 .72rem var(--body);color:rgba(255,255,255,.88);cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s}
.tile6 svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile6[aria-pressed="true"]{background:#0f3d86;border-color:var(--blue-hi);box-shadow:0 0 24px rgba(42,139,255,.35)}
.tile6:hover{border-color:rgba(255,255,255,.4)}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.2rem 0;font-family:var(--head);font-weight:600;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--blue);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2.5rem 1.3rem 0;color:#3c4658;font-size:.95rem;max-width:640px}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2.4rem}
.about-grid h3{font-family:var(--head);font-size:1.05rem;font-weight:700;margin-bottom:.6rem;color:var(--text)}
.about-grid p{color:#3c4658;font-size:.95rem}
.pull{margin:0;max-width:820px}
.pull p{font-family:var(--head);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.35}
.pull cite{display:block;margin-top:1.2rem;font-style:normal;font-size:.9rem;color:rgba(255,255,255,.75)}
.pull cite b{color:#fff}

/* forms */
.form-wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:3.5rem;align-items:start}
.form-card{background:#fff;border:1px solid var(--line-light);border-radius:16px;padding:2.2rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-card label{display:block;font-size:.8rem;font-weight:500;margin-bottom:1rem;color:var(--text)}
.form-card input,.form-card select,.form-card textarea{display:block;width:100%;margin-top:.35rem;padding:.85rem .95rem;border-radius:8px;border:1px solid var(--line-light);background:#fff;color:var(--text);font:inherit;font-size:.92rem}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:2px solid var(--blue-hi);border-color:var(--blue-hi)}
.form-card textarea{min-height:120px;resize:vertical}
.form-note{font-size:.78rem;color:var(--muted);margin-top:.9rem}
.form-ok{display:none;margin-top:1rem;padding:.9rem 1rem;border-radius:8px;background:#e8f2ff;color:#0a3f8f;font-size:.9rem}
.form-ok.show{display:block}
.side-card{background:var(--ink);color:#fff;border-radius:16px;padding:2rem}
.side-card h3{font-family:var(--head);font-size:1.1rem;font-weight:700;margin-bottom:1rem}
.side-card .contact-list{margin-bottom:1.6rem}
.side-card .contact-list a:hover{text-decoration:underline}
.next{display:grid;gap:1rem;counter-reset:n}
.next li{counter-increment:n;display:flex;gap:.9rem;font-size:.9rem;color:rgba(255,255,255,.85)}
.next li::before{content:counter(n);flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font:700 .75rem var(--head);color:#fff}

/* brands strip variants used on inner pages */
.brands.tight{padding:2.6rem 0}

/* ===== Control4 page ===== */
.c4-hero{position:relative;background:radial-gradient(70% 90% at 82% 25%,#0d2246 0%,#050a14 62%);color:#fff;padding:4.2rem 0 4.8rem;overflow:hidden}
.c4-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem;align-items:center}
.c4-hero .eyebrow{color:var(--blue-hi);margin-bottom:1.3rem}
.c4-hero h1{font-size:clamp(2.1rem,3.7vw,3.2rem)}
.c4-hero p.lede{margin-top:1.4rem;max-width:460px;color:rgba(255,255,255,.86);font-size:1.02rem}
.c4-hero .dealer{margin-top:1.8rem;margin-bottom:0}
.demo{background:#060b14;border:1px solid var(--line-dark);border-radius:20px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.55)}
.demo-bar{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;border-bottom:1px solid var(--line-dark);font-size:.74rem;color:rgba(255,255,255,.7)}
.demo-bar b{font-family:var(--head);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-size:.68rem}
.room{display:block;width:100%;height:auto}
.room [data-sky-a]{stop-color:#7fb4ff}
.room[data-sky="morning"] .sky-a{stop-color:#7fb4ff}
.room[data-sky="morning"] .sky-b{stop-color:#ffcf9a}
.room[data-sky="day"] .sky-a{stop-color:#4f9bff}
.room[data-sky="day"] .sky-b{stop-color:#c8e4ff}
.room[data-sky="night"] .sky-a{stop-color:#050a1e}
.room[data-sky="night"] .sky-b{stop-color:#1c2b58}
.room .sky-a,.room .sky-b{transition:stop-color 1.2s}
.room #shade{transform-box:fill-box;transform-origin:top;transform:scaleY(var(--shade));transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.room #dark{opacity:var(--dark);transition:opacity 1s}
.room #cones{opacity:var(--lights);transition:opacity 1s}
.room #tvpic,.room #tvglow{opacity:var(--tv);transition:opacity .9s}
.room #night{opacity:var(--night);transition:opacity 1s}
.room #waves{opacity:var(--music);transition:opacity .6s}
.room .wv{animation:pulse 1.6s ease-in-out infinite}
.room .wv:nth-child(2){animation-delay:.25s}
.room .wv:nth-child(3){animation-delay:.5s}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.room #lockdot{transition:fill .5s}
.demo-ui{padding:1.2rem 1.3rem 1.4rem;display:grid;gap:1.1rem}
.scene-row{display:flex;flex-wrap:wrap;gap:.5rem}
.scene-btn{font-family:var(--head);font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--line-dark);background:transparent;color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.scene-btn:hover{border-color:rgba(255,255,255,.5)}
.scene-btn[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}
.ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.6rem}
.ctrl label{display:flex;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.85);margin-bottom:.3rem}
.ctrl input[type=range]{width:100%;accent-color:var(--blue-hi)}
.switches{display:flex;gap:.5rem;flex-wrap:wrap}
.sw{display:inline-flex;align-items:center;gap:.5rem;font:500 .78rem var(--body);color:rgba(255,255,255,.9);background:#0d1626;border:1px solid var(--line-dark);border-radius:999px;padding:.5rem .85rem;cursor:pointer}
.sw i{width:26px;height:14px;border-radius:999px;background:#2a3550;position:relative;transition:background .2s}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:transform .2s}
.sw[aria-checked="true"] i{background:var(--blue-hi)}
.sw[aria-checked="true"] i::after{transform:translateX(12px)}
.demo-cap{font-size:.72rem;color:rgba(255,255,255,.55)}

.app-band{background:linear-gradient(100deg,#062660 0%,#0a4bb0 45%,#1a7cf0 100%);color:#fff;padding:5rem 0;overflow:hidden}
.app-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.app-band h2{font-size:clamp(2rem,3.6vw,3rem)}
.app-band p.lede{margin:1.2rem 0 1.8rem;max-width:480px;color:rgba(255,255,255,.9)}
.store-row{display:flex;gap:.8rem;flex-wrap:wrap}
.store{display:inline-flex;flex-direction:column;background:#000;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:10px;padding:.55rem 1.1rem;line-height:1.15;min-width:150px}
.store small{font-size:.62rem;opacity:.8}
.store b{font-family:var(--head);font-size:1rem;font-weight:600}
.store:hover{border-color:#fff}
.app-phone{display:flex;justify-content:center}
.app-phone svg{width:min(290px,70%);transform:rotate(5deg);filter:drop-shadow(0 30px 40px rgba(0,0,0,.4))}
.app-stat{margin-top:1.8rem;font-size:.85rem;color:rgba(255,255,255,.85)}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.bcard{background:#0b1322;border:1px solid var(--line-dark);border-radius:16px;padding:1.8rem;color:#fff;position:relative;overflow:hidden}
.bcard.s3{grid-column:span 3}.bcard.s2{grid-column:span 2}.bcard.s4{grid-column:span 4}
.bcard svg.ic{width:36px;height:36px;stroke:var(--blue-hi);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1rem}
.bcard h3{font-family:var(--head);font-size:1.15rem;font-weight:700}
.bcard p.tag{margin:.4rem 0 1rem;font-size:.9rem;color:rgba(255,255,255,.78);max-width:46ch}
.bcard::after{content:"";position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(42,139,255,.22),transparent 70%)}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.pillars h3{font-family:var(--head);font-size:1.15rem;font-weight:700;margin-bottom:.7rem}
.pillars p{color:#3c4658;font-size:.95rem}
.pillars>div{border-top:2px solid var(--blue);padding-top:1.2rem}

.works{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.works span{border:1px solid var(--line-dark);border-radius:999px;padding:.55rem 1.1rem;font-family:var(--head);font-size:.78rem;font-weight:600;letter-spacing:.06em;color:#fff}

@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-card.wide{grid-column:span 2}
  .tv-grid,.c4-grid,.form-wrap,.app-grid,.c4-hero-grid{grid-template-columns:minmax(0,1fr);gap:2.6rem}
  .trust,.steps{grid-template-columns:1fr 1fr}
  .about-grid,.pillars{grid-template-columns:1fr}
  .bcard.s3,.bcard.s4,.bcard.s2{grid-column:span 6}
}
@media (max-width:620px){
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .svc-card.wide{grid-column:auto}
  .svc-card .cols{grid-template-columns:1fr}
  .trust,.steps,.frow,.ctrl-grid{grid-template-columns:1fr}
  .sec{padding:3.6rem 0}
  .tiles6{gap:.55rem}
}
@media (prefers-reduced-motion:reduce){
  .room .wv{animation:none}
  .room #shade,.room #dark,.room #cones,.room #tvpic,.room #tvglow,.room #night{transition:none}
}
.next{list-style:none;padding:0;margin:0}
.site-footer a{color:inherit}

.q-arrow[hidden]{display:none}

.c4-hero-top{max-width:760px}
.c4-hero-top h1{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.house-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem 1.3rem 0}
.hchip{display:grid;background:#0d1626;border:1px solid var(--line-dark);border-radius:10px;padding:.5rem .8rem;min-width:88px}
.hchip small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-family:var(--head)}
.hchip b{font:600 .85rem var(--body);color:#fff}
.phone-tools{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.phone-tools button{font:600 .72rem var(--head);letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:.7rem 1.1rem;cursor:pointer;transition:background .2s}
.phone-tools button:hover{background:rgba(255,255,255,.14)}
.phone-hint{font-size:.74rem;color:rgba(255,255,255,.6);text-align:center;max-width:300px}
.stage2 .demo-cap{padding:.9rem 1.3rem 1.2rem}
/* ===== polish + new sections ===== */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.hero .eyebrow::before,.page-hero .eyebrow::before{background:var(--blue-hi);opacity:1}
.btn{box-shadow:0 0 0 rgba(42,139,255,0)}
.btn-primary:hover{box-shadow:0 10px 28px rgba(11,99,209,.45);transform:translateY(-1px)}
.btn svg{transition:transform .2s}.btn:hover svg{transform:translateX(3px)}
.site-header{transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 8px 30px rgba(5,10,20,.14)}
.site-header.dark.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.5)}
.svc-card,.trust-item,.bcard{transition:transform .25s,box-shadow .25s,border-color .25s}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,20,36,.10);border-color:#b9c9e3}
.bcard:hover{transform:translateY(-3px);border-color:rgba(42,139,255,.5)}
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* hero shimmer + dust */
.dust circle{animation:drift 14s ease-in-out infinite alternate}
.dust circle:nth-child(2n){animation-duration:19s;animation-delay:-4s}
.dust circle:nth-child(3n){animation-duration:23s;animation-delay:-9s}
@keyframes drift{from{transform:translate(0,0);opacity:.15}to{transform:translate(18px,-26px);opacity:.7}}
.glint{animation:glint 9s ease-in-out infinite}
@keyframes glint{0%,100%{transform:translateX(0) skewX(-18deg);opacity:0}50%{transform:translateX(640px) skewX(-18deg);opacity:.22}}
@media (prefers-reduced-motion:reduce){.dust circle,.glint{animation:none}}

/* panel scene */
.panelscene{position:relative;overflow:hidden;min-height:480px;background:#0b1220}
.ps-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wallpanel{position:absolute;left:54%;top:50%;width:min(74%,410px);transform:translate(-50%,-50%) perspective(1000px) rotateY(-13deg) rotateX(2deg);border-radius:16px;background:#04070c;padding:12px;box-shadow:-30px 30px 60px rgba(0,0,0,.55),0 0 0 1px #1c2536}
.wp-in{border-radius:8px;background:linear-gradient(160deg,#16294a,#0a1426);padding:14px}
.wp-top{display:flex;justify-content:space-between;color:#dbe6fb;font:500 .78rem var(--body);margin-bottom:12px}
.wp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wp-grid .tile6{aspect-ratio:1;border-radius:10px;font-size:.66rem;gap:.35rem}
.wp-grid .tile6 svg{width:24px;height:24px}

/* TV configurator */
.tvstage{display:grid;gap:1rem}
.tvcanvas{position:relative;border-radius:16px;overflow:hidden;perspective:1100px;background:#c9d0db;box-shadow:0 30px 70px rgba(11,20,36,.22)}
.tvcanvas>svg{display:block;width:100%;height:auto}
.tv3d{position:absolute;left:21%;top:15%;width:58%;aspect-ratio:16/9;transform-origin:50% 100%;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.tv3d .bez{position:absolute;inset:0;border-radius:4px;background:#05070b;box-shadow:0 18px 30px rgba(0,0,0,.35)}
.tv3d .pic{position:absolute;inset:1.6%;background:linear-gradient(135deg,#0b1d47,#2a56b8 55%,#7aa8ff);overflow:hidden}
.tv3d .pic svg{position:absolute;inset:0;width:100%;height:100%}
.tvstage[data-bracket="tilt"] .tv3d{transform:rotateX(-9deg) translateY(-1%)}
.tvstage[data-bracket="full"] .tv3d{transform-origin:0 50%;transform:translateX(-12%) rotateY(-24deg)}
.tvcanvas .g-wires,.tvcanvas .g-plate,.tvcanvas .g-bar,.tvcanvas .g-shelf,.tvcanvas .g-ps,.tvcanvas .g-arm{transition:opacity .5s}
.tvcanvas .g-plate,.tvcanvas .g-bar,.tvcanvas .g-shelf,.tvcanvas .g-ps,.tvcanvas .g-arm{opacity:0}
.tvstage.c-wires .g-wires{opacity:0}
.tvstage.c-wires .g-plate{opacity:1}
.tvstage.c-bar .g-bar{opacity:1}
.tvstage.c-shelf .g-shelf,.tvstage.c-ps .g-shelf{opacity:1}
.tvstage.c-ps .g-ps{opacity:1}
.tvstage[data-bracket="full"] .g-arm{opacity:1}
.tvtag{position:absolute;left:14px;top:12px;font:600 .66rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:#243049;background:rgba(255,255,255,.85);padding:.4rem .7rem;border-radius:999px}
.tvctl{background:var(--ink);color:#fff;border-radius:16px;padding:1.4rem 1.5rem}
.tvctl h3{font:600 .74rem var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-hi);margin-bottom:.9rem}
.seg2{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:4px;margin-bottom:.9rem}
.seg2 button{border:0;background:none;color:#fff;border-radius:7px;padding:.6rem .3rem;font:600 .78rem var(--body);cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--blue)}
.tvchips{display:flex;flex-wrap:wrap;gap:.5rem}
.tvchips button{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line-dark);background:transparent;color:#fff;border-radius:999px;padding:.55rem .95rem;font:500 .82rem var(--body);cursor:pointer;transition:background .2s,border-color .2s}
.tvchips button::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6)}
.tvchips button[aria-pressed="true"]{background:rgba(42,139,255,.2);border-color:var(--blue-hi)}
.tvchips button[aria-pressed="true"]::before{background:var(--blue-hi);border-color:var(--blue-hi)}
.tvctl .also{margin-top:1rem;font-size:.82rem;color:rgba(255,255,255,.75)}
.tvctl .note{margin-top:.5rem;font-size:.76rem;color:rgba(255,255,255,.6)}

/* our work gallery */
.work-grid{grid-template-columns:minmax(240px,.8fr) 2.4fr}
.tiles{grid-template-columns:repeat(3,1fr);gap:.8rem}
.tile{position:relative;overflow:hidden;border-radius:12px;background:var(--ink-3)}
.tile img{width:100%;aspect-ratio:.86;object-fit:cover;transition:transform .8s ease;border-radius:0}
.tile:hover img{transform:scale(1.06)}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.4rem .9rem .8rem;background:linear-gradient(transparent,rgba(3,6,12,.88));text-align:left;font-size:.68rem}

/* brand marquee */
.marquee{position:relative;overflow:hidden;margin-top:1.8rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:3.4rem;width:max-content;align-items:center;animation:mq 70s linear infinite;padding:.4rem 0}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.bn{white-space:nowrap;color:#20283a;font-size:1.25rem}
.bn.k1{font-family:var(--head);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.bn.k2{font-family:var(--body);font-weight:300;font-size:1.5rem}
.bn.k3{font-family:var(--head);font-weight:800;font-style:italic;letter-spacing:.05em}
.bn.k4{font-family:var(--head);font-weight:700;letter-spacing:-.01em}
.bn.k5{font-family:var(--head);font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-size:1rem}
.bn.k6{font-family:var(--body);font-weight:500;text-transform:lowercase;font-size:1.4rem}
.brands .more{margin-top:1.6rem}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.marquee .track [aria-hidden]{display:none}}

/* brands page */
.bfilter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.bfilter button{border:1px solid var(--line-light);background:#fff;color:var(--text);border-radius:999px;padding:.6rem 1.1rem;font:600 .76rem var(--head);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.bfilter button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.bcell{background:#fff;border:1px solid var(--line-light);border-radius:14px;padding:1.6rem 1.4rem;display:grid;gap:.9rem;min-height:170px;align-content:space-between;transition:transform .25s,box-shadow .25s,border-color .25s}
.bcell:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,20,36,.10);border-color:#b9c9e3}
.bcell[hidden]{display:none}
.bcell .bn{font-size:1.5rem;color:var(--text)}
.bcell small{font:600 .62rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.bcell p{font-size:.82rem;color:var(--muted);margin-top:.15rem}
.wwl{display:flex;flex-wrap:wrap;gap:.6rem}
.wwl span{border:1px solid var(--line-light);background:#fff;border-radius:999px;padding:.55rem 1rem;font-size:.88rem}
.wwgroups{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.wwgroups h3{font:700 1rem var(--head);margin-bottom:.9rem}

/* about extras */
.route{max-width:900px;margin:0 auto}
.route svg{display:block;width:100%;height:auto}
.blogs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.blogc{background:#fff;border:1px solid var(--line-light);border-radius:14px;padding:1.6rem;display:grid;gap:.8rem;align-content:space-between;min-height:170px;transition:transform .25s,box-shadow .25s}
.blogc:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,20,36,.10)}
.blogc small{font:600 .62rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.blogc b{font:700 1.02rem/1.35 var(--head)}

@media (max-width:1100px){
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .wwgroups,.blogs{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .panelscene{min-height:420px}
}
@media (max-width:620px){
  .bgrid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr;gap:.5rem}
  .wallpanel{left:50%;width:82%}
  .tvchips button{font-size:.76rem}
}
@media (max-width:620px){
  .btn{padding:.9rem 1.1rem;letter-spacing:.05em}
  .cta .btn{white-space:normal;max-width:100%}
}

/* ===== Control4 app simulator v2 (tablet + phone) ===== */
.stage2{--lights:.55;--dark:.3;--tv:0;--night:0;--shade:0;--music:0;display:grid;grid-template-columns:minmax(0,820px) minmax(0,1fr);gap:2.4rem;align-items:start;margin-top:3rem}
.stage2 .demo{position:sticky;top:96px}
.devices{position:relative;width:100%}
.dev-inner{position:absolute;left:0;top:0;transform-origin:0 0;font-family:var(--body)}
.tablet{position:absolute;right:0;top:0;width:640px;height:480px;border-radius:28px;background:#0a0a0d;padding:12px;box-shadow:inset 0 0 0 2px #45454f,0 40px 80px rgba(0,0,0,.6)}
.tab-screen{position:relative;width:100%;height:100%;border-radius:17px;overflow:hidden;color:#fff;background:radial-gradient(80% 90% at 100% 100%,rgba(206,62,84,.85),transparent 62%),radial-gradient(90% 90% at 0% 0%,rgba(74,84,196,.9),transparent 62%),radial-gradient(70% 60% at 30% 100%,rgba(70,60,160,.7),transparent 70%),#2a2860}
.tab-screen::before{content:"";position:absolute;inset:0;background:rgba(8,8,20,.28);pointer-events:none}
.phone2{position:absolute;left:0;top:44px;width:262px;height:520px;border-radius:42px;background:#050507;padding:8px;box-shadow:inset 0 0 0 2px #4a4a55,0 30px 70px rgba(0,0,0,.65);z-index:3}
.phone2::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:76px;height:20px;border-radius:12px;background:#000;z-index:20}
.ph-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;color:#fff;background:linear-gradient(180deg,#1a2e40 0%,#0d1a27 62%,#0a121c 100%)}
.pgrad{position:absolute;inset:0;background:radial-gradient(120% 40% at 50% 0%,rgba(60,130,150,.35),transparent 70%);pointer-events:none}
.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.stage2 button{font-family:var(--body);color:inherit}

/* dashboard */
.dash{position:relative;z-index:1}
.dash{padding:16px 18px 12px;height:100%;display:flex;flex-direction:column}
.dh{display:flex;align-items:center;gap:8px;min-height:26px}
.dtitle{font:500 15px var(--body);letter-spacing:.01em}
.dtime{margin-left:auto;text-align:right;line-height:1.2}.dtime b{display:block;font:500 11px var(--body)}.dtime small{font-size:9.5px;opacity:.75}
.dmore{margin-left:6px;width:22px;height:22px;background:none;border:0;cursor:pointer;display:grid;place-items:center}
.phone2 .dtitle{font-size:14px}.phone2 .dmore{margin-left:auto}
.chips2{display:flex;gap:6px;margin-top:8px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.phone2 .chips2{overflow-x:auto;scrollbar-width:none}
.chip2{flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;border:0;background:rgba(18,18,30,.62);font:500 10.5px var(--body);cursor:pointer;backdrop-filter:blur(6px)}
.chip2 .i{width:13px;height:13px}
.chip2:hover{background:rgba(40,40,60,.75)}
.albums{display:flex;gap:9px;margin-top:11px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.phone2 .albums{overflow-x:auto;scrollbar-width:none}
.alw{flex:none;width:58px;background:none;border:0;padding:0;text-align:left;cursor:pointer;display:block}
.albwrap{position:relative;display:block;width:58px;height:58px}
.alb{display:block;width:100%;height:100%;border-radius:5px;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.alb.sm{width:32px;height:32px;border-radius:4px;flex:none}
.bdg{position:absolute;right:-4px;top:-4px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-style:normal;border:1.5px solid rgba(20,20,40,.85)}
.bdg .i{width:8px;height:8px;stroke-width:2}
.bdg.g{background:#3bd16f;color:#04210f}.bdg.p{background:#f0508a;color:#fff}
.alw b{display:block;margin-top:4px;font:500 8.5px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alw small{display:block;font-size:7.5px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:58px;gap:7px;margin-top:11px}
.ct{position:relative;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:9px;border:0;background:rgba(18,18,30,.6);text-align:left;cursor:pointer;backdrop-filter:blur(8px);transition:background .25s,transform .12s;overflow:hidden}
.ct:active{transform:scale(.98)}
.ct .ti{display:grid;place-items:center;width:24px;flex:none}
.ct .ti .i{width:20px;height:20px}
.ct .tt{display:grid;line-height:1.25;min-width:0}.ct b{font:500 10.5px var(--body)}.ct small{font-size:9px;opacity:.75}
.ct.wide{grid-column:span 2;cursor:default}
.ct.wide .tt b{font-size:10.5px}
.stp{margin-left:auto;display:flex;align-items:center;gap:7px}
.stp span{font:300 30px var(--body);min-width:40px;text-align:center;letter-spacing:-.02em}
.stp button{width:20px;height:20px;border:0;background:none;cursor:pointer;display:grid;place-items:center;opacity:.9}
.stp .i{width:14px;height:14px;stroke-width:1.8}
.ct.on{background:rgba(30,30,48,.85)}
.ct:not(.on):not(.wide):not(.cam){opacity:.82}
.ct.dim{opacity:.55}
.ct.music .mus{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#ff5a6a,#e3324f);color:#fff}
.ct.music .mus .i{width:14px;height:14px;fill:currentColor}
.ct.secure .ti{color:#4be08a}.ct.secure.armed .ti{color:#8fb4ff}
.ct.cam{grid-row:span 2;padding:0;display:block;background:#000}
.ct.cam svg{position:absolute;inset:0;width:100%;height:100%}
.ct.cam .cn{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 5px;font:500 9px var(--body);background:linear-gradient(transparent,rgba(0,0,0,.7))}
.mbar{display:flex;align-items:center;gap:9px;margin-top:11px;height:46px;padding:0 10px;border-radius:9px;background:rgba(18,18,30,.65);backdrop-filter:blur(8px)}
.mt{display:grid;line-height:1.25;min-width:0}.mt b{font:500 10.5px var(--body);white-space:nowrap}.mt small{font-size:8.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr{margin-left:auto;display:flex;align-items:center;gap:14px}
.tr button{background:none;border:0;cursor:pointer;display:grid;place-items:center;padding:0}
.tr .i{width:15px;height:15px;stroke-width:1.4}
.pager{display:flex;justify-content:center;gap:4px;margin-top:8px}.pager i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35)}.pager i.on{background:#fff}

/* phone specifics */
.pstat{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:13px 22px 0;font:600 10px var(--body);height:36px}
.pstat .sr{display:flex;gap:4px;align-items:center}.pstat .i{width:11px;height:11px}.batt{width:16px;height:8px;border:1px solid rgba(255,255,255,.7);border-radius:2.500px;position:relative}.batt::after{content:"";position:absolute;inset:1px 3px 1px 1px;background:#fff;border-radius:1px}
.pbody{position:absolute;left:0;right:0;top:36px;bottom:56px;overflow-y:auto;padding:6px 14px 14px;scrollbar-width:none;z-index:1}
.pbody::-webkit-scrollbar{display:none}
.pbody.home{padding:4px 12px 10px}
.pbody.home .dash-like{}
.phone2 .dtitle{font-size:14px}
.phone2 .tgrid{grid-template-columns:1fr 1fr;grid-auto-rows:50px}
.phone2 .ct.cam{grid-row:span 1;grid-auto-rows:auto;aspect-ratio:auto;height:78px}
.phone2 .ct.wide{grid-column:span 2}
.phone2 .stp span{font-size:26px}
.phone2 .albums{margin-top:9px}
.phone2 .mbar{height:42px;margin-top:9px}.phone2 .tr{gap:9px}.phone2 .tr button:first-child,.phone2 .tr button:last-child{display:none}
.phone2 .pager{display:none}
.ptitle{font:500 15px var(--body);display:flex;align-items:center;gap:6px;margin:2px 2px 10px}
.pback{background:none;border:0;cursor:pointer;display:grid;place-items:center;margin-left:-4px}
.conv{width:100%;display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:11px;border:0;background:linear-gradient(90deg,rgba(70,128,150,.62),rgba(60,110,132,.45));text-align:left;cursor:pointer}
.ci,.ri2{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.12);flex:none}
.ci .i,.ri2 .i{width:15px;height:15px}
.cx,.rx{display:grid;line-height:1.25;min-width:0;flex:1}.cx b,.rx b{font:500 11px var(--body)}.cx small,.rx small{font-size:9px;opacity:.75}
.divl{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font-size:8.5px;opacity:.7}.divl::before,.divl::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.18)}
.rlist{display:grid;gap:7px;-webkit-mask-image:linear-gradient(transparent 0,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent 0,#000 12%,#000 88%,transparent);padding:10px 0}
.rrow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.07)}
.rrow.fade{opacity:.45}
.rmain{flex:1;display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;text-align:left;cursor:pointer;min-width:0}
.rdots,.rlock{width:22px;height:22px;display:grid;place-items:center;background:none;border:0;cursor:pointer;opacity:.85}
.rlock{opacity:.5}
.rcard,.arow{width:100%;display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:11px;background:rgba(255,255,255,.07);border:0;text-align:left;margin-bottom:7px;cursor:pointer}
.arow{cursor:default}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.dcell{display:grid;gap:3px;justify-items:start;padding:11px;border-radius:11px;background:rgba(255,255,255,.07);border:0;cursor:pointer;text-align:left}
.dcell .i{width:20px;height:20px;margin-bottom:6px}.dcell b{font:500 11px var(--body)}.dcell small{font-size:9px;opacity:.7}
.upd{display:flex;gap:8px;align-items:center;padding:9px 11px;border-radius:11px;background:rgba(240,80,138,.22);margin-bottom:9px;font-size:10px}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:56px;z-index:6;display:flex;justify-content:space-around;align-items:center;padding:0 8px 6px;background:linear-gradient(180deg,rgba(9,16,24,.55),rgba(9,16,24,.94))}
.tb{position:relative;width:38px;height:38px;border-radius:10px;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:rgba(255,255,255,.82)}
.tb .i{width:19px;height:19px}
.tb.on{background:#fff;color:#0d1a27}
.nb{position:absolute;right:-3px;top:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:#fff;color:#0d1a27;font:700 8.5px/14px var(--body);text-align:center;font-style:normal}

/* sheets + overlays */
.sheet2{position:absolute;z-index:15;background:rgba(14,14,26,.96);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);color:#fff;overflow:hidden;display:flex;flex-direction:column}
.tablet .sheet2{left:50%;top:50%;transform:translate(-50%,-50%);width:72%;max-height:88%;border-radius:14px}
.phone2 .sheet2{left:0;right:0;bottom:0;max-height:78%;border-radius:20px 20px 0 0}
.sh2h{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.1)}.sh2h b{font:500 13px var(--body)}
.sh2h button{background:none;border:0;cursor:pointer;display:grid;place-items:center}
.sh2b{padding:10px 14px 14px;overflow:auto;scrollbar-width:none}
.shsec{font:600 8.5px var(--head);letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin:11px 0 5px}
.srow{display:grid;grid-template-columns:96px 1fr 34px;gap:8px;align-items:center;font-size:10px;margin:4px 0}.srow input{width:100%;accent-color:#7fa8ff;height:18px}.sv{text-align:right;opacity:.75;font-size:9.5px}
.phone2 .srow{grid-template-columns:76px 1fr 30px}
.lrow{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;margin:5px 0;border-radius:10px;background:rgba(255,255,255,.07);border:0;text-align:left;cursor:pointer}
.lrow span{display:grid;line-height:1.25}.lrow b{font:500 11px var(--body)}.lrow small{font-size:9px;opacity:.7}
.lrow .i{width:18px;height:18px}
.lrow.armed{background:rgba(59,130,246,.35)}.lrow.warn{background:rgba(255,157,92,.25)}.lrow.big{padding:13px 12px}
.pill{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);border-radius:999px;padding:7px 12px;font:500 10px var(--body);cursor:pointer;display:inline-flex;gap:6px;align-items:center;margin:6px 6px 0 0}
.pill.sel{background:#3b82f6;border-color:#3b82f6}.pill.acc{background:#3b82f6;border-color:#3b82f6}
.pillrow{display:flex;flex-wrap:wrap}
.camrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.camrow .ct.cam{height:62px;grid-row:auto}
.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,40px);gap:5px;justify-content:center;margin-top:10px;grid-template-areas:". u ." "l ok r" ". d ."}
.dpad.dim{opacity:.4}.dpad button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);border-radius:10px;cursor:pointer;display:grid;place-items:center;font:600 10px var(--body)}
.dpad .u{grid-area:u}.dpad .l{grid-area:l}.dpad .ok{grid-area:ok;border-radius:50%}.dpad .r{grid-area:r}.dpad .d{grid-area:d}.dpad .press{background:#fff;color:#111}
.live2{position:absolute;inset:0;z-index:16;background:#000}.live2 svg{position:absolute;inset:0;width:100%;height:100%}
.lbadge{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.6);border-radius:5px;padding:3px 7px;font:700 9px var(--head);letter-spacing:.1em}.lbadge i{width:6px;height:6px;border-radius:50%;background:#ff4a4a;animation:blink 1.2s infinite}
.lname{position:absolute;left:12px;bottom:12px;font:600 12px var(--body);text-shadow:0 1px 6px #000}
.lclose{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);border:0;cursor:pointer;display:grid;place-items:center}
.ltalk{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;align-items:center;background:#3b82f6;border:0;border-radius:999px;padding:7px 12px;font:600 10px var(--body);cursor:pointer}
.callov2{position:absolute;inset:0;z-index:18;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(6,8,16,.95);text-align:center}
.callov2 b{font:600 15px var(--body);margin-top:16px}.callov2 small{font-size:10px;opacity:.75}
.callov2 button{margin-top:14px;border:0;background:#ff4a4a;color:#fff;border-radius:999px;padding:8px 26px;font:600 11px var(--body);cursor:pointer}
.callov2 .rings{position:relative;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:#3b82f6}.callov2 .rings .i{width:26px;height:26px;position:relative}
.callov2 .rings i{position:absolute;inset:0;border-radius:50%;border:2px solid #7fa8ff;animation:ring 1.8s ease-out infinite}.callov2 .rings i:nth-child(2){animation-delay:.6s}.callov2 .rings i:nth-child(3){animation-delay:1.2s}
.banner2{position:absolute;left:10px;right:10px;top:10px;z-index:19;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:14px;background:rgba(244,246,252,.97);color:#0a1020;box-shadow:0 10px 26px rgba(0,0,0,.4);animation:drop .4s ease}
.banner2 .bi{width:28px;height:28px;border-radius:8px;background:#3b82f6;color:#fff;display:grid;place-items:center;flex:none}
.banner2 .bt{display:grid;flex:1;line-height:1.2}.banner2 b{font:600 11px var(--body)}.banner2 small{font-size:9.5px;color:#4a5567}
.banner2 button{border:0;background:#3b82f6;color:#fff;border-radius:999px;padding:5px 11px;font:600 10px var(--body);cursor:pointer}
.dtoast{position:absolute;left:50%;top:54px;transform:translate(-50%,-10px);z-index:22;background:rgba(255,255,255,.96);color:#0a1020;font:600 10.5px var(--body);padding:6px 12px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.dtoast.show{opacity:1;transform:translate(-50%,0)}
.msh{transform-box:fill-box;transform-origin:top;transform:scaleY(var(--shade))}

@media (max-width:1240px){
  .stage2{grid-template-columns:minmax(0,1fr)}
  .stage2 .demo{position:static}
}
@media (max-width:1000px){
  .tablet{display:none}
  .phone2{position:relative;top:0;left:0}
}
@media (prefers-reduced-motion:reduce){.lbadge i,.callov2 .rings i{animation:none}}

.tab-screen .dash{padding-left:100px}
.phone2 .mbar{position:absolute;left:10px;right:10px;bottom:62px;z-index:5;margin:0}
.pbody.home{bottom:112px}

.mt{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit}
.alb.lg{width:64px;height:64px;border-radius:8px;flex:none}
.sess{display:flex;gap:12px;align-items:center;margin-bottom:10px}.sess.big .alb.lg{width:84px;height:84px}
.mt2{display:grid;line-height:1.3}.mt2 b{font:600 13px var(--body)}.mt2 small{font-size:10px;opacity:.75}
.sesstr{display:flex;justify-content:center;gap:22px;margin:6px 0 10px}.sesstr button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);cursor:pointer;display:grid;place-items:center}
.zrow{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;margin:4px 0}
.ztog{width:30px;height:30px;border-radius:8px;border:0;background:rgba(255,255,255,.08);display:grid;place-items:center;cursor:pointer;opacity:.7}.ztog.on{background:#3b82f6;opacity:1}
.zrow .srow{margin:0}
.conn{display:grid;gap:6px;justify-items:center;text-align:center;padding:10px 0 14px}.conn.left{justify-items:start;text-align:left;padding:0 0 12px}
.conn small{font-size:9.5px;opacity:.75}
.c4logo{height:20px;width:auto;max-width:140px;object-fit:contain}.c4logo.big{height:28px}
.logo-fb{font:800 15px var(--head);letter-spacing:.02em}
.empty{display:grid;justify-items:center;gap:6px;padding:40px 0;opacity:.7;text-align:center}.empty .i{width:26px;height:26px}
.hint{font-size:9.5px;opacity:.7;margin-bottom:8px}
.lrow.static{cursor:default}
.phone2 .srow{grid-template-columns:70px 1fr 30px}
/* ===== extra screens: rooms, routines, now playing ===== */
.pager .pd{width:6px;height:6px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer}.pager .pd.on{background:#fff}
.mbar{position:relative;overflow:hidden}.mbar .prog{position:absolute;left:0;bottom:0;height:2px;background:rgba(255,255,255,.85);border-radius:0 2px 2px 0;transition:width 1s linear}
.rart{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#fff;flex:none}.rart .i{width:17px;height:17px}
.rart.lg{width:46px;height:46px;border-radius:12px}.rart.lg .i{width:22px;height:22px}.rart.xl{width:56px;height:56px;border-radius:14px}.rart.xl .i{width:26px;height:26px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px;flex:1;min-height:0}
.rc{display:grid;gap:8px;align-content:space-between;padding:10px;border-radius:12px;background:rgba(18,18,30,.62);backdrop-filter:blur(8px)}
.rc-main{display:flex;gap:10px;align-items:center;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit}
.rc-t{display:grid;line-height:1.3;min-width:0}.rc-t b{font:600 12px var(--body)}.rc-t small{font-size:9.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-ctl{display:flex;gap:6px}.rc-ctl button{flex:1;height:28px;border-radius:8px;border:0;background:rgba(255,255,255,.09);cursor:pointer;display:grid;place-items:center}.rc-ctl button.on{background:#3b82f6}
.rtgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px;flex:1;min-height:0;align-content:start}
.rt{display:grid;gap:3px;justify-items:start;padding:11px;border-radius:12px;border:0;background:rgba(18,18,30,.62);backdrop-filter:blur(8px);cursor:pointer;text-align:left;color:inherit}
.rt b{font:600 11px var(--body)}.rt small{font-size:9.5px;opacity:.75}.rt.off{opacity:.45}.rt .ri2{margin-bottom:4px}
.rhead{display:flex;gap:12px;align-items:center;margin-bottom:6px}.rhead span:last-child{display:grid;line-height:1.3}.rhead b{font:600 15px var(--body)}.rhead small{font-size:10px;opacity:.75}
.ri2.big{width:46px;height:46px;border-radius:12px}.ri2.big .i{width:22px;height:22px}
.timeadj{display:flex;align-items:center;justify-content:center;gap:18px;margin:8px 0}.timeadj b{font:300 30px var(--body);min-width:120px;text-align:center}.timeadj button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);cursor:pointer;display:grid;place-items:center}
.days{display:flex;gap:6px;margin-bottom:8px}.day{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:none;cursor:pointer;font:600 11px var(--body)}.day.on{background:#3b82f6;border-color:#3b82f6}
.npart{display:grid;place-items:center;margin:4px 0 10px}.alb.xl{width:150px;height:150px;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.npt{display:grid;text-align:center;line-height:1.3;margin-bottom:8px}.npt b{font:600 15px var(--body)}.npt small{font-size:11px;opacity:.75}
.np-prog input{width:100%}.np-time{display:flex;justify-content:space-between;font-size:9.5px;opacity:.7;margin:-2px 0 8px}
.sesstr button.big{width:46px;height:46px;background:#fff;color:#0d1a27}
.zc{gap:6px}.zc-b{border:1px solid rgba(255,255,255,.22);background:none;color:#fff;border-radius:999px;padding:6px 10px;font:500 10px var(--body);cursor:pointer}.zc-b.on{background:#3b82f6;border-color:#3b82f6}
.camrow.c2{grid-template-columns:1fr 1fr}.camrow.c2 .ct.cam{height:74px}
.phone2 .rcard .rart{width:34px;height:34px}
/* ===== v3: splash, edit mode, lighting cards, security panel, mini player ===== */
.splash{position:absolute;inset:0;z-index:40;display:grid;place-items:center;align-content:center;gap:18px;background:linear-gradient(160deg,#0d1a27,#1a1d4a);animation:splashOut .5s ease 1.05s forwards}
.c4logo.huge{height:40px}.phone2 .c4logo.huge{height:28px}
.spin{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes splashOut{to{opacity:0;visibility:hidden}}
.editbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;border-radius:9px;background:rgba(59,130,246,.35);font-size:9.5px}.editbar button{border:0;background:#fff;color:#0d1a27;border-radius:999px;padding:4px 12px;font:700 10px var(--body);cursor:pointer}
.ct .x{position:absolute;left:5px;top:5px;width:17px;height:17px;border-radius:50%;background:#ef4444;display:grid;place-items:center;z-index:4;animation:wig .3s ease-in-out infinite alternate}.ct .x .i{width:9px;height:9px;stroke:#fff;stroke-width:2.4}
@keyframes wig{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lcard{position:relative;display:flex;gap:8px;align-items:center;padding:10px;border-radius:10px;overflow:hidden;cursor:ew-resize;background:linear-gradient(90deg,rgba(255,206,110,.5) var(--fill,0%),rgba(255,255,255,.08) var(--fill,0%))}
.lcard .lic{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:rgba(0,0,0,.25);flex:none}.lcard.on .lic{color:#ffd27a}
.lcard .ltx{display:grid;line-height:1.25;min-width:0}.lcard b{font:600 10.5px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lcard small{font-size:9px;opacity:.8}
.lcard input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.secpanel{display:grid;justify-items:center;gap:4px;padding:16px 10px;border-radius:14px;background:linear-gradient(160deg,rgba(52,211,153,.28),rgba(52,211,153,.06));text-align:center}.secpanel .i{width:30px;height:30px;color:#4be08a}.secpanel b{font:700 15px var(--body)}.secpanel small{font-size:10px;opacity:.8}
.secpanel.armed{background:linear-gradient(160deg,rgba(59,130,246,.4),rgba(59,130,246,.08))}.secpanel.armed .i{color:#8fb4ff}
.armrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}.armrow button{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;border-radius:10px;padding:9px 4px;font:600 10.5px var(--body);cursor:pointer}.armrow button.on{background:#3b82f6;border-color:#3b82f6}
.mbar.mini{position:absolute;left:10px;right:10px;bottom:62px;z-index:5;margin:0;height:42px}.mbar.mini .mt{display:flex;gap:8px;align-items:center}.mbar.mini .mtx{display:grid;line-height:1.25;min-width:0}.mbar.mini .mtx b{font:600 10.5px var(--body)}.mbar.mini .mtx small{font-size:8.5px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.hasmini .pbody{bottom:110px}

/* ===== v4: match the real Control4 X4 look (sampled from the reference) ===== */
.dev-inner{--body:Roboto,Inter,Arial,sans-serif}
.tablet{background:#1c1c20;box-shadow:inset 0 0 0 2px #56565f,inset 0 0 0 5px #0c0c0f,0 40px 80px rgba(0,0,0,.6)}
.tab-screen{background:
  radial-gradient(70% 60% at 100% 100%,rgba(184,124,108,.95),transparent 62%),
  radial-gradient(60% 70% at 0% 100%,rgba(104,20,42,.95),transparent 68%),
  radial-gradient(90% 60% at 45% 100%,rgba(160,60,64,.85),transparent 70%),
  radial-gradient(80% 70% at 0% 0%,rgba(54,66,118,1),transparent 68%),
  linear-gradient(180deg,#4a4a78 0%,#5b4d63 48%,#7a3e4c 100%)}
.tab-screen::before{background:rgba(10,4,12,.06)}
.tab-screen .dtitle{font:400 17px var(--body);letter-spacing:.01em}
.tab-screen .dtime b{font:400 12.5px var(--body)}.tab-screen .dtime small{font-size:10.5px;opacity:.85}
.tab-screen .chip2{height:29px;padding:0 13px;font:400 11.5px var(--body);background:rgba(36,24,42,.6);border:1px solid rgba(255,255,255,.07)}
.tab-screen .chip2 .i{width:15px;height:15px;stroke-width:1.4}
.tab-screen .alw{width:64px}.tab-screen .albwrap{width:64px;height:64px}.tab-screen .alb{border-radius:5px}
.tab-screen .alw b{font:400 10px var(--body);margin-top:5px}.tab-screen .alw small{font-size:9px;opacity:.7}
.ct{background:rgba(38,16,28,.62);border:1px solid rgba(255,255,255,.05);border-radius:10px;gap:11px;padding:0 12px}
.ct.on{background:rgba(38,16,28,.66)}
.ct:not(.on):not(.cam):not(.wide){opacity:1}
.ct:not(.on):not(.wide):not(.cam) .ti,.ct:not(.on):not(.wide):not(.cam) .tt b{color:rgba(255,255,255,.42)}
.ct:not(.on):not(.wide):not(.cam) .tt small{color:rgba(255,255,255,.4)}
.ct .ti .i{width:23px;height:23px;stroke-width:1.35}
.ct .tt small{font:400 9.5px var(--body);opacity:.72;order:-1}
.ct .tt b{font:400 14px var(--body);letter-spacing:.01em}
.ct.wide .tt b{font-size:13px}
.step span{font:200 42px var(--body);letter-spacing:-.02em;min-width:58px}
.step button{width:26px;height:26px}.step .i{width:20px;height:20px;stroke-width:1.2}
.ct.music .mus{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#ff5f74,#f2314d)}.ct.music .mus .i{width:20px;height:20px}
.ct.music .tt b{font-size:15px}
.ct.music:not(.on) .mus{opacity:.55}
.ct.secure .ti{color:#37e07f}.ct.secure .ti .i{width:26px;height:26px}
.mbar{height:58px;background:rgba(38,12,20,.72);border-radius:10px;padding:0 14px;gap:12px}
.mbar .alb.sm{width:40px;height:40px;border-radius:5px}
.mt b{font:400 14px var(--body)}.mt small{font-size:10.5px;opacity:.75}
.tr{gap:24px}.tr .i{width:22px;height:22px;stroke-width:1.3}
.tab-screen .pager{margin-top:9px}.tab-screen .pager .pd{width:5px;height:5px}
.tab-screen .tgrid{grid-auto-rows:60px;gap:8px}
/* phone */
.phone2{background:#050506;box-shadow:inset 0 0 0 2px #5b5b63,inset 0 0 0 5px #000,0 30px 70px rgba(0,0,0,.65)}
.phone2::before{top:16px;width:84px;height:24px;border-radius:14px}
.ph-screen{background:linear-gradient(180deg,#2d5262 0%,#33627a 36%,#274a66 62%,#1b2543 100%)}
.pgrad{background:radial-gradient(120% 45% at 50% 0%,rgba(90,170,190,.28),transparent 70%)}
.conv{background:rgba(12,40,52,.62);border:1px solid rgba(255,255,255,.1)}
.ci,.ri2{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13)}
.rrow,.rcard,.arow{background:rgba(8,32,36,.6);border:1px solid rgba(120,200,210,.14)}
.rrow.fade{opacity:.38}
.ptitle{font:400 15px var(--body)}
.cx b,.rx b{font:400 11.5px var(--body)}.cx small,.rx small{font-size:9.5px;opacity:.7}
.tabbar{background:linear-gradient(180deg,rgba(14,26,44,.2),rgba(12,20,40,.94))}
.phone2 .ct{border-radius:10px}
.phone2 .step span{font-size:32px;min-width:44px}

.tab-screen .dash{padding-top:14px;padding-bottom:10px}
.tab-screen .dash>*{flex:none}
.tab-screen .dh{min-height:24px}
.tab-screen .chips2{margin-top:6px}.tab-screen .chip2{height:27px}
.tab-screen .albums{margin-top:9px}.tab-screen .alw{width:56px}.tab-screen .albwrap{width:56px;height:56px}
.tab-screen .tgrid{grid-auto-rows:52px;gap:7px;margin-top:9px}
.tab-screen .mbar{height:50px;margin-top:9px}.tab-screen .mbar .alb.sm{width:36px;height:36px}
.tab-screen .pager{margin-top:7px}
.ct .ti .i{width:21px;height:21px}
.step span{font-size:38px}

.demo-extra{display:grid;grid-template-columns:1fr;gap:1rem;padding:0 1.3rem 1.2rem}
.mini-h{font:700 .62rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:.4rem 0 .5rem}
.wkp{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#eef1f7;padding:10px;border-radius:12px;box-shadow:inset 0 0 0 4px #d3d9e5}
.wkb{display:flex;align-items:center;gap:.5rem;padding:.65rem .7rem;border-radius:7px;border:1px solid rgba(0,0,0,.14);background:#f9fafc;color:#1a2030;font:600 .74rem var(--body);cursor:pointer;text-align:left}
.wkb i{width:7px;height:7px;border-radius:50%;background:#b5bccb;flex:none}.wkb.lit i{background:#22d3ee;box-shadow:0 0 10px #22d3ee}.wkb.lit{box-shadow:0 0 0 2px #22d3ee}
.vlog{min-height:80px;max-height:130px;overflow:auto;display:grid;gap:.4rem;align-content:start;padding:.7rem;border-radius:12px;background:rgba(255,255,255,.06);font-size:.8rem}
.vhint{color:rgba(255,255,255,.55);margin:0}.vme{justify-self:end;background:#2a8bff;padding:.4rem .8rem;border-radius:14px 14px 3px 14px;margin:0;max-width:85%}.vbot{justify-self:start;background:rgba(255,255,255,.12);padding:.4rem .8rem;border-radius:14px 14px 14px 3px;margin:0;max-width:90%}
.vchips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}.vchips button{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:.4rem .75rem;font:500 .72rem var(--body);cursor:pointer}.vchips button:hover{border-color:var(--cyan)}
.vform{display:flex;gap:.4rem}.vform input{flex:1;padding:.6rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font:500 .85rem var(--body)}.vform button{border:0;border-radius:999px;padding:.6rem 1.1rem;background:var(--grad);color:#fff;font:700 .78rem var(--body);cursor:pointer}
.stage2 .wkb{color:#1a2030}
.ct .tt small,.ct .tt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone2 .ct .tt b{font-size:13px}
/* ===== v5: Listen equalizer visual (no audio), multi-room Watch ===== */
.eqviz{display:inline-flex;align-items:flex-end;gap:3px;height:18px;margin-left:auto;flex:none}
.eqviz b{display:block;width:3px;background:#3bd16f;border-radius:2px;animation:eqb 0.9s ease-in-out infinite}
.eqviz b:nth-child(1){animation-delay:-0.6s}.eqviz b:nth-child(2){animation-delay:-0.3s}.eqviz b:nth-child(3){animation-delay:-0.75s}.eqviz b:nth-child(4){animation-delay:-0.15s}
@keyframes eqb{0%,100%{height:4px}50%{height:18px}}
@media (prefers-reduced-motion:reduce){.eqviz b{animation:none;height:9px}}
.sess{display:flex;align-items:center;gap:10px}
.climrow{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
.climrow .ti{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.07);display:grid;place-items:center;flex:none}
.climrow .ti .i{width:17px;height:17px;stroke-width:1.7}
.climrow .clx{flex:1;display:grid;line-height:1.3;min-width:0}
.climrow .clx b{font:600 13px var(--body)}.climrow .clx small{font-size:11px;opacity:.65}
.climset{display:flex;align-items:center;gap:8px;font:700 15px var(--body)}
.climset button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer}
.climset button .i{width:13px;height:13px;stroke-width:2}

/* ===== multi-page additions ===== */
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.7rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
/* nav + mega menu */
.nav{gap:1.5rem;font-size:.78rem}
.dd{position:relative}
.ddt{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem 0;border-bottom:2px solid transparent}
.ddt::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.dd:hover .ddt,.dd:focus-within .ddt{border-color:var(--blue)}
.ddm{position:absolute;left:-40px;top:100%;padding-top:14px;display:none;grid-template-columns:repeat(3,minmax(200px,1fr));gap:1.6rem;background:#fff;color:var(--text);border:1px solid var(--line-light);border-radius:14px;padding:1.6rem 1.8rem 1.2rem;box-shadow:0 30px 60px rgba(5,10,20,.18);min-width:720px;z-index:60;margin-top:10px}
.ddm::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd:hover .ddm,.dd:focus-within .ddm{display:grid}
.ddc{display:grid;gap:.15rem;align-content:start}
.ddh{font:700 .64rem var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:.5rem}
.ddm a{padding:.42rem .5rem;border-radius:8px;font:500 .84rem var(--body);color:var(--text)}
.ddm a:hover{background:var(--paper);color:var(--blue)}
.ddall{grid-column:1/-1;border-top:1px solid var(--line-light);margin-top:.4rem;padding-top:.9rem !important;display:flex;gap:.5rem;align-items:center;color:var(--blue) !important;font-weight:600 !important;background:none !important}
.ddall svg{width:14px;height:14px}
.site-header.dark .ddm{background:#0b1322;color:#fff;border-color:var(--line-dark)}
.site-header.dark .ddm a{color:#fff}.site-header.dark .ddm a:hover{background:rgba(255,255,255,.07)}
.site-header.dark .ddall{border-color:var(--line-dark)}
@media (max-width:1180px){
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:.5rem 32px 1rem;border-bottom:1px solid var(--line-light);max-height:calc(100vh - 76px);overflow:auto}
  .site-header.dark .nav{background:#050a14}
  .nav.open{display:flex}
  .nav a{padding:.9rem 0;border-bottom:1px solid var(--line-light)}
  .site-header.dark .nav a{border-color:var(--line-dark)}
  .menu-btn{display:grid}
  .site-header .btn{display:none}
  .dd .ddt::after{display:none}
  .ddm{position:static;display:grid;grid-template-columns:1fr;min-width:0;box-shadow:none;border:0;padding:.2rem 0 .6rem 1rem;margin:0;background:transparent !important}
  .ddm::before{display:none}
  .ddm a{border-bottom:0;padding:.55rem 0;font-size:.9rem}
  .ddh{margin-top:.7rem}
  .ddall{display:none !important}
}
/* breadcrumbs */
.crumbs{margin-bottom:1.6rem;font-size:.78rem}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem;color:rgba(255,255,255,.7)}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.crumbs a{color:rgba(255,255,255,.85)}.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:#fff}
/* service hero */
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem;align-items:center}
.svc-hero-grid h1{max-width:20ch}
.svc-media{border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);aspect-ratio:4/4.4;border:1px solid var(--line-dark)}
.svc-media img{width:100%;height:100%;object-fit:cover;display:block}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:4rem;align-items:start}
.intro-grid p{color:#3c4658;font-size:1.02rem;max-width:62ch}.intro-grid p+p{margin-top:1.1rem}
.why-list{display:grid;gap:1rem}
.why-list div{border-left:3px solid var(--blue);padding:.2rem 0 .2rem 1.1rem}
.why-list b{display:block;font:700 1rem var(--head)}.why-list span{font-size:.9rem;color:var(--muted)}
.incl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem 2rem}
.incl-grid li{position:relative;padding:.75rem 0 .75rem 1.7rem;border-bottom:1px solid var(--line-light);font-size:.95rem}
.incl-grid li::before{content:"";position:absolute;left:.15rem;top:1.15em;width:.4rem;height:.7rem;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg)}
.chiplinks{display:flex;flex-wrap:wrap;gap:.6rem}
.chiplinks a,.chiplinks span{border:1px solid var(--line-light);background:#fff;border-radius:999px;padding:.6rem 1.1rem;font:500 .88rem var(--body);transition:border-color .2s,color .2s,background .2s}
.chiplinks a:hover{border-color:var(--blue);color:var(--blue)}
.sec-dark .chiplinks a{background:transparent;border-color:var(--line-dark);color:#fff}
.rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.rcard-l{display:grid;gap:.4rem;align-content:start;padding:1.5rem;background:#fff;border:1px solid var(--line-light);border-radius:14px;transition:transform .25s,box-shadow .25s,border-color .25s}
.rcard-l:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,20,36,.10);border-color:#b9c9e3}
.rcard-l svg{width:30px;height:30px;stroke:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.4rem}
.rcard-l b{font:700 1.02rem var(--head)}.rcard-l span{font-size:.86rem;color:var(--muted)}
.hub-group{margin-bottom:3rem}
.hub-group h2{font:800 1.5rem var(--head);text-transform:uppercase;margin-bottom:1.2rem}
/* brands */
.brand-hero-mark{display:inline-block;font:800 clamp(2.4rem,6vw,4.6rem)/1 var(--head);letter-spacing:-.02em;color:#fff}
.tagchip{display:inline-block;font:600 .66rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-hi);border:1px solid rgba(42,139,255,.5);border-radius:999px;padding:.4rem .9rem;margin-bottom:1.2rem}
.bsearch{width:100%;max-width:520px;padding:1rem 1.2rem;border-radius:999px;border:1px solid var(--line-light);font:500 1rem var(--body);margin-bottom:1.6rem;background:#fff}
.bsearch:focus{outline:2px solid var(--blue-hi)}
.dirgroup{margin-bottom:2.2rem}
.dirgroup h3{font:700 .8rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:.9rem}
.dirgroup [hidden]{display:none}
.dirgroup a.flag{background:var(--ink);color:#fff;border-color:var(--ink)}
.dirgroup a.flag:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.flagcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.flagcards a{display:grid;gap:.5rem;padding:1.4rem;border-radius:14px;background:#fff;border:1px solid var(--line-light);min-height:150px;align-content:space-between;transition:transform .25s,box-shadow .25s,border-color .25s}
.flagcards a:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,20,36,.10);border-color:#b9c9e3}
.flagcards b{font:800 1.3rem var(--head)}.flagcards span{font-size:.84rem;color:var(--muted)}.flagcards small{font:600 .6rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
/* blog */
.postgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.postc{display:grid;gap:.7rem;align-content:space-between;padding:1.7rem;background:#fff;border:1px solid var(--line-light);border-radius:16px;min-height:220px;transition:transform .25s,box-shadow .25s}
.postc:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,20,36,.10)}
.postc small{font:600 .62rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.postc b{font:700 1.15rem/1.35 var(--head)}.postc p{font-size:.88rem;color:var(--muted)}
.article{max-width:760px;margin:0 auto}
.article h2{font:800 1.5rem var(--head);margin:2.4rem 0 .8rem}
.article p{color:#2f394b;font-size:1.06rem;line-height:1.75;margin:0 0 1rem}
.article ul{padding-left:1.2rem;margin:0 0 1rem;color:#2f394b}.article li{margin:.4rem 0;line-height:1.6}
.meta{font-size:.82rem;color:rgba(255,255,255,.7);margin-top:1rem}
/* areas */
.areagrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.areac{display:grid;gap:.5rem;padding:1.5rem;background:#fff;border:1px solid var(--line-light);border-radius:14px;transition:transform .25s,box-shadow .25s}
.areac:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,20,36,.10)}
.areac b{font:800 1.15rem var(--head)}.areac span{font-size:.86rem;color:var(--muted)}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem}
.bullets{padding:0;list-style:none;display:grid;gap:.5rem}.bullets li{padding-left:1.4rem;position:relative}.bullets li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
/* footer additions */
.foot-grid.f5{grid-template-columns:1.3fr 1.6fr 1fr .9fr 1.3fr}
.foot-links.two{grid-template-columns:1fr 1fr;column-gap:1.4rem}
/* UniFi */
.unifi-hero{background:radial-gradient(70% 90% at 85% 10%,#0a3a7a 0%,#050a14 60%);position:relative;overflow:hidden}
.pl{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2rem;align-items:start}
.pl-canvas{position:relative;background:#0b1424;border:1px solid var(--line-dark);border-radius:18px;overflow:hidden;aspect-ratio:640/400;touch-action:none}
.pl-canvas canvas,.pl-canvas svg{position:absolute;inset:0;width:100%;height:100%}
.pl-side{background:var(--ink);color:#fff;border-radius:18px;padding:1.6rem}
.pl-side h3{font:700 .72rem var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-hi);margin-bottom:.8rem}
.pl-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:4px;margin-bottom:1.2rem}
.pl-seg button{border:0;background:none;color:#fff;border-radius:7px;padding:.6rem .3rem;font:600 .78rem var(--body);cursor:pointer}
.pl-seg button[aria-pressed="true"]{background:var(--blue)}
.pl-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.pl-btns button{border:1px solid var(--line-dark);background:transparent;color:#fff;border-radius:999px;padding:.6rem 1rem;font:500 .82rem var(--body);cursor:pointer}
.pl-btns button:hover{border-color:var(--blue-hi)}
.pl-btns button[aria-pressed="true"]{background:rgba(42,139,255,.2);border-color:var(--blue-hi)}
.meter{height:12px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:.4rem 0 .6rem}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff5a5a,#f4b740,#3ddc97);transition:width .3s}
.pl-num{font:800 2.4rem var(--head)}.pl-msg{font-size:.9rem;color:rgba(255,255,255,.8);min-height:2.6em}
.pl-legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.72rem;color:rgba(255,255,255,.7);margin-top:1rem}
.pl-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.35rem}
.pl-note{font-size:.74rem;color:var(--muted);margin-top:.8rem}
.ap{cursor:grab}.ap:active{cursor:grabbing}
.prodgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.prod{background:#fff;border:1px solid var(--line-light);border-radius:16px;padding:1.6rem}
.prod svg{width:32px;height:32px;stroke:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.8rem}
.prod h3{font:700 1.05rem var(--head);margin-bottom:.4rem}.prod p{font-size:.9rem;color:var(--muted)}
.ring-art{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:520px;height:520px;pointer-events:none;opacity:.5}
.ring-art i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(42,139,255,.5);animation:ringx 4.5s ease-out infinite}
.ring-art i:nth-child(2){animation-delay:1.1s}.ring-art i:nth-child(3){animation-delay:2.2s}.ring-art i:nth-child(4){animation-delay:3.3s}
@keyframes ringx{from{transform:scale(.15);opacity:.9}to{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.ring-art i{animation:none}}
.wifi-band{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:5rem 0}
.wifi-band .wrap{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
.wifi-band h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.wifi-band p.lede{margin:1.2rem 0 1.8rem;max-width:480px;color:rgba(255,255,255,.85)}
.wifi-band .ring-art{right:6%;opacity:.7}
.wifi-band ul{display:grid;gap:.6rem}
@media (max-width:1100px){
  .svc-hero-grid,.intro-grid,.pl,.two-col,.wifi-band .wrap{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .svc-media{aspect-ratio:16/10;max-height:340px}
  .incl-grid,.rcards,.areagrid,.postgrid,.prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flagcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid.f5{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .incl-grid,.rcards,.areagrid,.postgrid,.prodgrid,.flagcards{grid-template-columns:minmax(0,1fr)}
  .ddm{padding-left:.6rem}
  .foot-grid.f5{grid-template-columns:1fr}
}

.c4-shot{display:block;position:relative;justify-self:end;max-width:640px;width:100%}
.c4-shot img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45));transition:transform .4s}
.c4-shot:hover img{transform:translateY(-4px)}
.c4-shot-cap{position:absolute;right:4%;bottom:-6px;display:inline-flex;gap:.5rem;align-items:center;background:var(--blue);color:#fff;font:600 .72rem var(--head);letter-spacing:.1em;text-transform:uppercase;padding:.7rem 1.1rem;border-radius:999px}
.c4-shot-cap svg{width:14px;height:14px}

/* ===== vibrant pass + interactive tools ===== */
:root{--cyan:#22d3ee;--violet:#8b5cf6;--amber:#f59e0b;--coral:#ff5a6a;--mint:#34d399;--grad:linear-gradient(120deg,#0b63d1,#2a8bff 45%,#22d3ee);--grad2:linear-gradient(120deg,#8b5cf6,#2a8bff)}
.accent{background:linear-gradient(100deg,#2a8bff,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.on-light .accent{background:linear-gradient(100deg,#0b63d1,#2a8bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-primary{background:var(--grad);box-shadow:0 10px 30px rgba(42,139,255,.35);border:0;transition:transform .2s,box-shadow .2s,filter .2s}
.btn-primary:hover{background:var(--grad);filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 16px 40px rgba(42,139,255,.5)}
.cta{background:linear-gradient(110deg,#062660,#0a4bb0 30%,#7c3aed 68%,#2a8bff)}
.cta .btn-primary{background:#fff;color:#0a3a8a;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cta .btn-primary:hover{background:#fff}
.eyebrow{color:var(--blue)}
.page-hero .eyebrow,.wifi-band .eyebrow,.c4-band .eyebrow{color:var(--cyan)}
.page-hero{position:relative;overflow:hidden;background:radial-gradient(60% 90% at 88% 0%,rgba(42,139,255,.35),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(139,92,246,.28),transparent 60%),#050a14}
.page-hero::after{content:"";position:absolute;inset:auto -10% -40% auto;width:520px;height:520px;background:radial-gradient(closest-side,rgba(34,211,238,.18),transparent);pointer-events:none}
.sec-light{background:linear-gradient(180deg,#f3f7ff,#eef3fb)}
.rcard-l svg,.prod svg{padding:7px;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,rgba(42,139,255,.16),rgba(34,211,238,.16));stroke:#0b63d1}
.rcards a:nth-child(3n+2) svg,.prodgrid .prod:nth-child(3n+2) svg{background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(42,139,255,.14));stroke:#6d3fe0}
.rcards a:nth-child(3n) svg,.prodgrid .prod:nth-child(3n) svg{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(255,90,106,.14));stroke:#d97706}
.rcard-l:hover{border-color:#2a8bff;box-shadow:0 20px 44px rgba(42,139,255,.18)}
.steps .step::before{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.incl-grid li::before{border-color:#22b8a0}
.why-list div{border-image:linear-gradient(180deg,#2a8bff,#8b5cf6) 1}
.chiplinks a:hover{background:var(--blue);color:#fff}
/* badges */
.dealer-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.pbadge{display:inline-flex;align-items:center;gap:.9rem;padding:.7rem 1.1rem;border-radius:14px;background:#fff;color:#0b1424;border:1px solid var(--line-light);box-shadow:0 10px 26px rgba(5,10,20,.08)}
.pbadge img{height:38px;width:auto;max-width:170px;object-fit:contain}
.pbadge .lbl{font:700 .62rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:#0b63d1;line-height:1.3}
.pbadge .logo-fb{font:800 1.05rem var(--head);color:#0b1424}
.pbadge.dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.pbadge.dark .logo-fb{color:#fff}.pbadge.dark .lbl{color:var(--cyan)}
.trustbar{background:#fff;border-bottom:1px solid var(--line-light);padding:1.2rem 0}
.trustbar .wrap{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:center;justify-content:center}
.stat{display:grid;text-align:center}.stat b{font:800 1.5rem var(--head);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.stat small{font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.logo-fb{font:800 1rem var(--head)}
.foot-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
/* tools */
.tool{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.4rem;background:linear-gradient(160deg,#0b1830,#060d1c);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:1.4rem;color:#fff;box-shadow:0 30px 70px rgba(5,10,20,.35)}
.tool-stage{position:relative;background:#0b1424;border-radius:16px;overflow:hidden;min-height:260px}
.tool-stage.light{background:#f5f8fc;color:#0b1424;padding:1.4rem}
.tool-stage svg{display:block;width:100%;height:auto}
.tool-panel{display:grid;gap:.9rem;align-content:start}
.tool-panel.wide{grid-column:1/-1;grid-column:auto}
.tool:has(.tool-panel.wide):not(.wizard){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.tool-panel h4{font:700 .68rem var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:.4rem 0 -.3rem}
.tool-stage h4.dk{color:#0b63d1;margin:0 0 .8rem;font:700 .68rem var(--head);letter-spacing:.18em;text-transform:uppercase}
.seg,.opts{display:flex;flex-wrap:wrap;gap:.4rem}
.seg button,.opts button,.bigopts button{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:.55rem .95rem;font:500 .8rem var(--body);cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.seg button:hover,.opts button:hover,.bigopts button:hover{border-color:var(--cyan)}
.seg button[aria-pressed=true],.opts button[aria-pressed=true],.bigopts button[aria-pressed=true]{background:var(--grad);border-color:transparent;box-shadow:0 6px 18px rgba(42,139,255,.4)}
.opts.sm button{padding:.4rem .7rem;font-size:.72rem}
.chip.on{display:inline-block;background:var(--grad);border-radius:999px;padding:.4rem .8rem;font-size:.75rem}
.swatches{display:flex;gap:.5rem}.sw{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.3);cursor:pointer}.sw[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 3px var(--blue-hi)}
.cname{font-size:.8rem;color:rgba(255,255,255,.75);margin:-.3rem 0 0}
.rg{display:grid;gap:.25rem;font-size:.8rem}.rg span{display:flex;justify-content:space-between;color:rgba(255,255,255,.85)}.rg b{color:var(--cyan);font-weight:600}
.rg input{width:100%;accent-color:#2a8bff}
.readout{display:grid;gap:.5rem;background:rgba(255,255,255,.06);border-radius:14px;padding:.9rem 1rem}
.readout div{display:grid;gap:.1rem}.readout small{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}.readout b{font:600 .92rem var(--body)}
.readout.dk{background:#fff;border:1px solid var(--line-light)}.readout.dk small{color:var(--muted)}.readout.dk b{color:#0b1424}
.readout .ok{color:#34d399}.readout .warn{color:#fbbf24}
.tool-badge{position:absolute;left:14px;bottom:14px;background:rgba(5,10,20,.75);border-radius:999px;padding:.45rem .9rem;font-size:.78rem;color:#fff;backdrop-filter:blur(6px)}
.tool-badge b{color:var(--cyan)}
.meter{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff5a6a,#f4b740,#34d399);transition:width .3s}
.hint-t,.fine{font-size:.76rem;color:rgba(255,255,255,.6)}.tool-stage.light .fine{color:var(--muted)}
.empty-t{color:var(--muted);padding:2rem 0;text-align:center}
.snrow{padding:.9rem 0;border-bottom:1px solid var(--line-light);display:grid;gap:.4rem}.snrow b{font:700 .95rem var(--head)}.snrow small{color:var(--muted);font-size:.78rem}
.snrow .opts button{border-color:var(--line-light);color:#0b1424;background:#fff}.snrow .opts button[aria-pressed=true]{color:#fff}
.wprow{display:grid;grid-template-columns:150px auto 1fr;gap:.6rem;align-items:center;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.wprow b{font-size:.85rem}.cnt{display:inline-flex;align-items:center;gap:.4rem}.cnt button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;cursor:pointer}.cnt i{font-style:normal;min-width:1.2rem;text-align:center;font-weight:700}
.wizard{display:block;max-width:820px;margin:0 auto}
.wz-top{display:grid;gap:.4rem;margin-bottom:1.2rem}.wz-top small{color:rgba(255,255,255,.65)}
.wizard h3{font:800 1.4rem var(--head);margin-bottom:.8rem}
.bigopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem;margin-bottom:1.2rem}.bigopts button{border-radius:14px;padding:1rem;font-size:.92rem;text-align:left}
.wz-nav{display:flex;gap:.6rem;justify-content:space-between;flex-wrap:wrap}
.planlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem;margin-bottom:1rem}.plan{display:grid;gap:.2rem;padding:1rem;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}.plan:hover{border-color:var(--cyan)}.plan b{font-family:var(--head)}.plan small{color:var(--cyan)}
.note-t{background:rgba(245,158,11,.14);border-radius:12px;padding:.8rem 1rem;font-size:.88rem;margin-bottom:1rem}
.zone{cursor:pointer}.wave{transform-box:fill-box;transform-origin:center;animation:wv 2.2s ease-out infinite}@keyframes wv{from{transform:scale(.6);opacity:.8}to{transform:scale(1.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.wave{animation:none}}
.cam{cursor:grab}.cam:active{cursor:grabbing}
.toolcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.toolc{display:grid;gap:.5rem;align-content:start;padding:1.6rem;border-radius:18px;color:#fff;position:relative;overflow:hidden;min-height:190px;transition:transform .25s,box-shadow .25s}
.toolc:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(5,10,20,.3)}
.toolc svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.toolc b{font:800 1.1rem var(--head)}.toolc span{font-size:.86rem;opacity:.9}.toolc small{font:700 .62rem var(--head);letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-top:.4rem}
.toolc:nth-child(6n+1){background:linear-gradient(135deg,#0b63d1,#22d3ee)}.toolc:nth-child(6n+2){background:linear-gradient(135deg,#7c3aed,#2a8bff)}.toolc:nth-child(6n+3){background:linear-gradient(135deg,#f59e0b,#ff5a6a)}.toolc:nth-child(6n+4){background:linear-gradient(135deg,#059669,#22d3ee)}.toolc:nth-child(6n+5){background:linear-gradient(135deg,#db2777,#8b5cf6)}.toolc:nth-child(6n){background:linear-gradient(135deg,#1d4ed8,#7c3aed)}
.cost-list li,.tip-list li{padding:.6rem 0 .6rem 1.4rem;position:relative;border-bottom:1px solid var(--line-light);font-size:.95rem}
.cost-list li::before{content:"$";position:absolute;left:0;color:#0b63d1;font-weight:800}.tip-list li::before{content:"\2605";position:absolute;left:0;color:#f59e0b}
.usecases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.usec{padding:1.4rem;border-radius:16px;background:#fff;border:1px solid var(--line-light);border-top:4px solid #2a8bff}
.usec:nth-child(4n+2){border-top-color:#8b5cf6}.usec:nth-child(4n+3){border-top-color:#f59e0b}.usec:nth-child(4n+4){border-top-color:#34d399}
.usec b{display:block;font:700 1rem var(--head);margin-bottom:.4rem}.usec span{font-size:.86rem;color:var(--muted)}
.glossary dt{font:800 1.05rem var(--head);margin-top:1.4rem;color:#0b63d1}.glossary dd{margin:.3rem 0 0;color:#2f394b}
.roomtabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}.roomtabs button{border:1px solid var(--line-light);background:#fff;border-radius:999px;padding:.7rem 1.2rem;font:600 .85rem var(--body);cursor:pointer}.roomtabs button[aria-selected=true]{background:var(--grad);color:#fff;border-color:transparent}
.roompanel{display:none}.roompanel.on{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.roomcard{padding:1.4rem;border-radius:16px;background:#fff;border:1px solid var(--line-light)}.roomcard b{display:block;font:700 1rem var(--head);margin-bottom:.4rem}.roomcard span{font-size:.88rem;color:var(--muted)}.roomcard a{display:inline-block;margin-top:.7rem;color:#0b63d1;font-weight:600;font-size:.82rem}
@media (max-width:1100px){.tool,.tool:has(.tool-panel.wide):not(.wizard){grid-template-columns:minmax(0,1fr)}.toolcards,.roompanel.on{grid-template-columns:repeat(2,minmax(0,1fr))}.usecases{grid-template-columns:repeat(2,minmax(0,1fr))}.wprow{grid-template-columns:1fr}}
@media (max-width:620px){.toolcards,.usecases,.roompanel.on{grid-template-columns:minmax(0,1fr)}.tool{padding:.9rem;border-radius:18px}}

/* ===== v2 components: partner badges, tools, new page types ===== */
.pstrip{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.dbadge{display:inline-flex;align-items:center;gap:.85rem;padding:.6rem 1rem;border-radius:14px;background:#fff;border:1px solid var(--line-light);box-shadow:0 10px 26px rgba(5,10,20,.07)}
.plogo{height:30px;width:auto;max-width:150px;object-fit:contain;display:block}
.dbadge.sn .plogo{height:22px}
.dtxt{display:grid;line-height:1.25;padding-left:.85rem;border-left:1px solid var(--line-light)}
.dtxt b{font:700 .62rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:#0b63d1}
.dtxt small{font-size:.68rem;color:var(--muted)}
.pstrip.dk .dbadge{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);box-shadow:none;backdrop-filter:blur(6px)}
.pstrip.dk .dtxt{border-color:rgba(255,255,255,.22)}.pstrip.dk .dtxt b{color:var(--cyan)}.pstrip.dk .dtxt small{color:rgba(255,255,255,.65)}
.c4big{height:46px;width:auto}
.foot-partners{padding:0 0 2.2rem;margin-bottom:2.2rem;border-bottom:1px solid var(--line-dark)}
.hero-partners{margin-top:1.8rem}
.logo-fb{font:800 1rem var(--head)}
/* nav dropdown variants */
.ddm.narrow{min-width:520px;grid-template-columns:repeat(2,minmax(200px,1fr))}
.ddm.narrow.c2{left:-20px}
.ddc.tp{background:linear-gradient(135deg,#0b63d1,#8b5cf6);border-radius:12px;padding:1.1rem;color:#fff;align-content:start;gap:.5rem}
.ddc.tp .ddh{color:#a5f3fc}.ddc.tp p{font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.92)}
.ddm .ddall.inl{grid-column:auto;border:0;padding:.4rem 0 0 !important;color:#fff !important;background:none !important}
@media (max-width:1180px){.ddm.narrow{min-width:0;grid-template-columns:1fr}.ddc.tp{display:none}}
/* sections */
.two-up{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.usegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.use{padding:1.4rem;border-radius:16px;background:#fff;border:1px solid var(--line-light);border-top:4px solid #2a8bff}
.use:nth-child(4n+2){border-top-color:#8b5cf6}.use:nth-child(4n+3){border-top-color:#f59e0b}.use:nth-child(4n+4){border-top-color:#34d399}
.use b{display:block;font:700 1rem var(--head);margin-bottom:.4rem}.use span{font-size:.86rem;color:var(--muted)}
.tips{padding:0;list-style:none;display:grid;gap:.1rem}
.tips li,.pricebox li{padding:.6rem 0 .6rem 1.4rem;position:relative;border-bottom:1px solid var(--line-light);font-size:.95rem}
.tips li::before{content:"\2605";position:absolute;left:0;color:#f59e0b}
.pricebox{background:#fff;border:1px solid var(--line-light);border-radius:16px;padding:1.3rem 1.5rem}
.pricebox h3{font:800 1.05rem var(--head);margin-bottom:.4rem}.pricebox h3 a:hover{color:var(--blue)}
.pricebox ul{padding:0}.pricebox li::before{content:"$";position:absolute;left:0;color:#0b63d1;font-weight:800}
.tool-band{background:linear-gradient(180deg,#f3f7ff,#eef3fb)}
.toolblock+.toolblock{margin-top:3rem}
.toolcard{display:grid;gap:.5rem;align-content:start;text-align:left;padding:1.5rem;border-radius:18px;color:#fff;border:0;position:relative;overflow:hidden;min-height:170px;font-family:var(--body);transition:transform .25s,box-shadow .25s;cursor:pointer}
.toolcard:hover,.toolcard[aria-selected=true]{transform:translateY(-4px);box-shadow:0 22px 50px rgba(5,10,20,.3)}
.toolcard svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.toolcard b{font:800 1.05rem var(--head)}.toolcard span{font-size:.84rem;opacity:.92}.toolcard em{font:700 .62rem var(--head);letter-spacing:.16em;text-transform:uppercase;font-style:normal;opacity:.9;margin-top:.3rem}
.toolcards .toolcard:nth-child(6n+1){background:linear-gradient(135deg,#0b63d1,#22d3ee)}.toolcards .toolcard:nth-child(6n+2){background:linear-gradient(135deg,#7c3aed,#2a8bff)}.toolcards .toolcard:nth-child(6n+3){background:linear-gradient(135deg,#f59e0b,#ff5a6a)}.toolcards .toolcard:nth-child(6n+4){background:linear-gradient(135deg,#059669,#22d3ee)}.toolcards .toolcard:nth-child(6n+5){background:linear-gradient(135deg,#db2777,#8b5cf6)}.toolcards .toolcard:nth-child(6n){background:linear-gradient(135deg,#1d4ed8,#7c3aed)}
.shadecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.shadecard{display:grid;gap:.5rem;padding:1.6rem;background:#fff;border:1px solid var(--line-light);border-radius:16px;border-left:5px solid #8b5cf6;transition:transform .25s,box-shadow .25s}
.shadecard:nth-child(3n+2){border-left-color:#2a8bff}.shadecard:nth-child(3n){border-left-color:#f59e0b}
.shadecard:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,20,36,.1)}
.shadecard b{font:800 1.05rem var(--head)}.shadecard span{font-size:.9rem;color:#3c4658}.shadecard em{font-style:normal;font-size:.78rem;color:#0b63d1;font-weight:600}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.filters button{border:1px solid var(--line-light);background:#fff;border-radius:999px;padding:.6rem 1.1rem;font:600 .82rem var(--body);cursor:pointer;transition:all .2s}
.filters button:hover{border-color:var(--blue-hi)}.filters button[aria-pressed=true]{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(42,139,255,.35)}
.faqbar{margin-bottom:1rem}.faqbar input{width:100%;max-width:560px;padding:1rem 1.3rem;border-radius:999px;border:1px solid var(--line-light);font:500 1rem var(--body)}
.tblwrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line-light);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}.tbl th,.tbl td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--line-light);vertical-align:top}
.tbl th{font:700 .68rem var(--head);letter-spacing:.14em;text-transform:uppercase;background:#f3f7ff;color:#0b63d1}.tbl tr:last-child td{border-bottom:0}
.sonos-band{background:linear-gradient(180deg,#fff,#f3f7ff)}
.shades-band{background:radial-gradient(60% 90% at 90% 10%,rgba(139,92,246,.4),transparent 60%),radial-gradient(50% 80% at 0% 100%,rgba(34,211,238,.22),transparent 60%),#070d1c;color:#fff;padding:5rem 0}
.shades-band h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.stats{background:var(--ink);color:#fff;padding:3.2rem 0;background:linear-gradient(110deg,#050a14,#0b1e46 50%,#3b1a78)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.stats .stat{text-align:center;display:grid;gap:.5rem}.stats .stat b{font:800 clamp(2.2rem,4vw,3.4rem) var(--head);line-height:1;background:linear-gradient(100deg,#22d3ee,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats .stat>span{font-size:.86rem;color:rgba(255,255,255,.78);max-width:220px;margin:0 auto}
.tline{display:grid;gap:0;max-width:820px;margin:0 auto;position:relative;counter-reset:tl}
.tline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,#2a8bff,#8b5cf6)}
.tline>div{position:relative;padding:0 0 2rem 3.4rem;counter-increment:tl}
.tline>div::before{content:counter(tl);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:800 .95rem var(--head);box-shadow:0 8px 22px rgba(42,139,255,.4)}
.tline h3{font:800 1.1rem var(--head);margin-bottom:.3rem}.tline p{color:#3c4658;font-size:.95rem}
.gl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem}
.gl>div{padding:1rem 0;border-bottom:1px solid var(--line-light)}.gl dt{font:800 1rem var(--head);color:#0b63d1}.gl dd{margin:.3rem 0 0;color:#3c4658;font-size:.92rem}
.mini-window{border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4);margin-bottom:1rem}
.mini-window svg{width:100%;height:auto}
.mz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.mzb{display:grid;gap:.15rem;justify-items:start;text-align:left;padding:1rem;border-radius:14px;border:1px solid var(--line-light);background:#fff;cursor:pointer;font-family:var(--body);position:relative;transition:transform .2s,box-shadow .2s,background .2s}
.mzb b{font:700 .9rem var(--head)}.mzb small{font-size:.74rem;color:var(--muted)}
.mzb.on{background:linear-gradient(135deg,#0b63d1,#22d3ee);color:#fff;border-color:transparent;box-shadow:0 12px 30px rgba(42,139,255,.35)}.mzb.on small{color:rgba(255,255,255,.85)}
.eq{display:flex;gap:2px;align-items:flex-end;height:16px;margin-bottom:.4rem}.eq i{width:3px;height:4px;background:currentColor;border-radius:2px;opacity:.4}
.mzb.on .eq i{opacity:1;animation:eqb 1s ease-in-out infinite}.mzb.on .eq i:nth-child(2){animation-delay:.15s}.mzb.on .eq i:nth-child(3){animation-delay:.3s}.mzb.on .eq i:nth-child(4){animation-delay:.45s}
@keyframes eqb{0%,100%{height:4px}50%{height:16px}}
@media (prefers-reduced-motion:reduce){.mzb.on .eq i{animation:none;height:10px}}
.tip-list li.done{text-decoration:line-through;opacity:.5}.tip-list li{cursor:default}#prepList li{cursor:pointer}
@media (max-width:1100px){.two-up{grid-template-columns:minmax(0,1fr);gap:2rem}.usegrid,.shadecards{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.usegrid,.shadecards,.mz,.gl{grid-template-columns:minmax(0,1fr)}.dbadge{width:100%}}
.snrow .opts button[aria-pressed=true]{background:var(--grad);color:#fff;border-color:transparent}
.c4-band .pstrip{margin-bottom:1.4rem}
.hero .pstrip,.page-hero .pstrip{margin-top:.4rem}

@media (max-width:1180px){
  .dd .ddm{display:none !important}
  .dd.open .ddm{display:grid !important}
  .dd .ddt{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.9rem 0;border-bottom:1px solid var(--line-light)}
  .site-header.dark .dd .ddt{border-color:var(--line-dark)}
  .dd .ddt::after{display:block !important;transition:transform .2s}
  .dd.open .ddt::after{transform:rotate(225deg) translateY(-2px)}
  .dd.open .ddall{display:flex !important;padding:.6rem 0 !important;border:0}
  .dd.open .ddc{margin-bottom:.4rem}
  .site-header .btn{display:none}
}

/* ===== phone prominence ===== */
.topbar{background:linear-gradient(90deg,#062660,#0a4bb0 45%,#7c3aed);color:#fff;font-size:.78rem}
.topbar .wrap{display:flex;gap:1.6rem;align-items:center;justify-content:center;padding-top:.55rem;padding-bottom:.55rem;flex-wrap:wrap}
.topbar .tb-call{display:inline-flex;align-items:center;gap:.5rem;color:#fff}.topbar .tb-call b{font:800 .92rem var(--head);letter-spacing:.03em}
.topbar svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar span{opacity:.9}.topbar .tb-mail{color:#fff;opacity:.85}
.hphone{display:inline-flex;align-items:center;gap:.6rem;margin-left:auto;margin-right:.9rem;color:inherit;white-space:nowrap}
.hphone svg{width:34px;height:34px;padding:8px;border-radius:50%;background:var(--grad);stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;box-shadow:0 8px 20px rgba(42,139,255,.4)}
.hphone span{display:grid;line-height:1.15}.hphone small{font:600 .6rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:#0b63d1}.hphone b{font:800 1.02rem var(--head)}
.site-header.dark .hphone small{color:var(--cyan)}
.site-header .wrap{gap:1.1rem}
@media (max-width:1330px){.hphone span{display:none}.hphone{margin-left:auto;margin-right:.4rem}}
@media (max-width:1180px){.hphone{display:inline-flex !important;margin-left:auto}.hphone span{display:none}.menu-btn{margin-left:.2rem}}
.foot-call{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;flex-wrap:wrap;padding:2.4rem 0;margin-bottom:2.2rem;border-bottom:1px solid var(--line-dark)}
.foot-call .eyebrow{color:var(--cyan);margin-bottom:.4rem}
.fc-num{display:block;font:800 clamp(2rem,5vw,3.6rem)/1.05 var(--head);background:linear-gradient(100deg,#fff,#7fc4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.fc-sub{color:rgba(255,255,255,.7);font-size:.92rem;margin-top:.5rem}
.foot-call .btn svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8}
.callbar{display:none}
.callfab{position:fixed;right:20px;bottom:20px;z-index:70;display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.2rem;border-radius:999px;background:var(--grad);color:#fff;font:800 .92rem var(--head);box-shadow:0 14px 34px rgba(42,139,255,.5);transition:transform .2s}
.callfab:hover{transform:translateY(-3px)}.callfab svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .callfab{display:none}
  .callbar{display:grid;grid-template-columns:1.6fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:80;background:#050a14;box-shadow:0 -8px 30px rgba(0,0,0,.35)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem .6rem;font:800 .9rem var(--head);color:#fff}
  .callbar .cb-call{background:var(--grad)}.callbar .cb-call svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8}
  .callbar .cb-quote{background:#0b1424;border-left:1px solid rgba(255,255,255,.15)}
  body{padding-bottom:58px}
  .topbar .tb-hide,.topbar .tb-mail{display:none}
}

.hero-call{display:inline-flex;align-items:center;gap:1rem;margin-top:1.8rem;color:#fff;padding:.9rem 1.4rem .9rem .9rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);transition:background .2s,transform .2s}
.hero-call:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.hc-ico{width:46px;height:46px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 10px 24px rgba(42,139,255,.5)}
.hc-ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hc-t{display:grid;line-height:1.15}.hc-t small{font:600 .64rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}.hc-t b{font:800 1.5rem var(--head);letter-spacing:.01em}


.areabar{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:2rem}.areabar input{flex:1;min-width:260px;max-width:520px;padding:1rem 1.3rem;border-radius:999px;border:1px solid var(--line-light);font:500 1rem var(--body)}
.hub-group h2 small{font:700 .7rem var(--head);letter-spacing:.14em;color:#0b63d1;background:#e8f1ff;border-radius:999px;padding:.3rem .7rem;margin-left:.6rem;vertical-align:middle}

.txt{width:100%;padding:.7rem 1rem;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font:500 .95rem var(--body)}
.rack{display:grid;gap:4px;align-content:start;background:#111827;border:6px solid #2b3446;border-radius:8px;padding:8px;max-width:340px}
.rku{border-radius:4px;display:flex;justify-content:space-between;align-items:center;padding:0 .8rem;color:#fff;font-size:.78rem;overflow:hidden}.rku small{opacity:.85;font-weight:700}
.rku.free{background:repeating-linear-gradient(45deg,#1b2436,#1b2436 8px,#222c42 8px,#222c42 16px);color:#8fa0c2}

.chk-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.chk-group{background:#fff;border:1px solid var(--line-light);border-radius:16px;padding:1.4rem 1.6rem}.chk-group h3{font:800 1.05rem var(--head);margin-bottom:.6rem;color:#0b63d1}
.chk{display:flex;gap:.7rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--line-light);cursor:pointer;font-size:.95rem}.chk input{width:18px;height:18px;accent-color:#2a8bff}
.chk:has(input:checked) span{text-decoration:line-through;opacity:.55}
.chk-sum{margin:1.4rem 0 1rem;font:700 .9rem var(--head);color:#0b63d1}
@media (max-width:760px){.chk-wrap{grid-template-columns:minmax(0,1fr)}}

/* header layout fix: centered nav, tidy top bar */
.topbar .wrap{display:flex;justify-content:center;align-items:center;gap:0;padding-top:.5rem;padding-bottom:.5rem;flex-wrap:nowrap}
.topbar .tb-i{padding:0 1.4rem;border-left:1px solid rgba(255,255,255,.3);line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
.topbar .tb-i:first-child{border-left:0}
.topbar .tb-call b{font:800 .86rem var(--head);letter-spacing:.03em}
@media (min-width:1181px){
  .site-header .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.4rem;align-items:center}
  .brand img{height:38px;width:auto}
  .nav{justify-self:center;justify-content:center;align-items:center;gap:1.6rem;white-space:nowrap;font-size:.8rem}
  .nav>a,.nav .dd{display:inline-flex;align-items:center;height:76px}
  .nav>a,.nav .ddt{padding:0;border-bottom:0;position:relative}
  .nav>a::after,.nav .ddt::before{content:"";position:absolute;left:0;right:0;bottom:22px;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .2s}
  .nav>a:hover::after,.nav>a[aria-current="page"]::after,.nav .dd:hover .ddt::before{transform:scaleX(1)}
  .nav .ddt{display:inline-flex;align-items:center;gap:.35rem}
  .dd .ddm{top:calc(100% - 6px)}
  .hactions{display:flex;align-items:center;gap:.9rem}
  .hphone{margin:0 !important}
  .hactions .btn{white-space:nowrap}
  .menu-btn{display:none}
}
@media (min-width:1181px) and (max-width:1420px){.hphone span{display:none}}
@media (max-width:1180px){
  .site-header .wrap{display:flex;justify-content:space-between;gap:.8rem}
  .brand img{height:38px}
  .hactions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
  .hactions .btn{display:none}
  .hphone{margin:0 !important}
}
@media (max-width:900px){.topbar .tb-hide{display:none}.topbar .tb-i{padding:0 .9rem}}

.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.45rem;vertical-align:middle}
.kp-stage{display:grid;place-items:center;padding:2rem;background:linear-gradient(160deg,#1c2942,#0b1424)}
.kp{display:grid;gap:8px;padding:16px;border-radius:14px;min-width:230px}
.kpb{display:flex;align-items:center;gap:.6rem;min-height:46px;padding:.5rem .9rem;border:1px solid;border-radius:8px;font:600 .8rem var(--body);cursor:pointer;text-align:left;transition:transform .12s,box-shadow .2s}
.kpb:active{transform:scale(.98)}.kpb .led{width:8px;height:8px;border-radius:50%;background:rgba(128,128,128,.5);flex:none}.kpb.lit .led{background:#22d3ee;box-shadow:0 0 12px #22d3ee}.kpb.lit{box-shadow:0 0 0 2px #22d3ee}
.kpl{display:flex;align-items:center;gap:.5rem;margin:.3rem 0;font-size:.8rem}.kpl span{width:22px;text-align:center;color:var(--cyan);font-weight:700}.kpl select{flex:1;padding:.45rem .6rem;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;font:500 .82rem var(--body)}.kpl option{color:#000}

.tour{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.tour-stage{background:#0b1424}
.hs .hpulse{transform-box:fill-box;transform-origin:center;animation:hp 1.8s ease-out infinite}@keyframes hp{from{transform:scale(.7);opacity:.6}to{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.hs .hpulse{animation:none}}
.htlinks{display:flex;flex-wrap:wrap;gap:.4rem}.htlinks a{background:var(--grad);color:#fff;border-radius:999px;padding:.4rem .8rem;font:600 .74rem var(--body)}
.tl-bar{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-bottom:1.2rem}
.tl-s{display:grid;gap:.4rem;justify-items:center;text-align:center;padding:.7rem .3rem;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font:500 .68rem var(--body);cursor:pointer}
.tl-s i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 .72rem var(--head);background:#334155}
.tl-s.best i{background:#34d399;color:#06301f}.tl-s.now i{background:#2a8bff}.tl-s.soon i{background:#f59e0b;color:#3a2400}.tl-s.late i{background:#ff5a6a}
.tl-s.cur{border-color:var(--cyan);background:rgba(34,211,238,.12)}
.tl-body h3{font:800 1.3rem var(--head);margin:.5rem 0}.tl-body p{color:rgba(255,255,255,.85);max-width:60ch}
.tl-tag{display:inline-block;font:700 .64rem var(--head);letter-spacing:.14em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px}
.tl-tag.best{background:#34d399;color:#06301f}.tl-tag.now{background:#2a8bff}.tl-tag.soon{background:#f59e0b;color:#3a2400}.tl-tag.late{background:#ff5a6a}
@media (max-width:1100px){.tour{grid-template-columns:minmax(0,1fr)}.tl-bar{grid-template-columns:repeat(4,minmax(0,1fr))}}
.readout .htlinks{display:flex}

/* ===== bigger logo / taller header ===== */
.site-header .wrap{height:88px}
.brand img{height:54px !important;width:auto}
@media (min-width:1181px){
  .nav>a,.nav .dd{height:88px}
  .nav>a::after,.nav .ddt::before{bottom:28px}
  .nav{gap:1.4rem}
  .site-header .wrap{gap:1.2rem}
}
@media (min-width:1181px) and (max-width:1520px){.hphone span{display:none}}
@media (min-width:1181px) and (max-width:1330px){.nav{gap:1.1rem;font-size:.76rem}.brand img{height:48px !important}}
@media (max-width:1180px){
  .nav{top:88px !important}
  .brand img{height:46px !important}
}
@media (max-width:520px){.brand img{height:40px !important}.site-header .wrap{height:76px}.nav{top:76px !important}}

.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-ok.bad{background:#fff1f1;color:#8a1c1c}
.form-ok a{font-weight:700;text-decoration:underline}

/* ===== new animated hero scene ===== */
.hx{position:absolute;inset:0;overflow:hidden;--glow:rgba(42,139,255,.55)}
.hx[data-scene=morning]{--glow:rgba(255,170,110,.55)}.hx[data-scene=movie]{--glow:rgba(139,92,246,.6)}.hx[data-scene=night]{--glow:rgba(40,60,120,.28)}
.hx-bg .bg{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hx[data-scene=morning] .bg-morning,.hx[data-scene=entertain] .bg-entertain,.hx[data-scene=movie] .bg-movie,.hx[data-scene=night] .bg-night{opacity:1}
.bg-entertain{background:radial-gradient(55% 80% at 76% 42%,rgba(42,139,255,.42),transparent 62%),radial-gradient(45% 60% at 100% 100%,rgba(139,92,246,.42),transparent 60%),radial-gradient(50% 60% at 8% 100%,rgba(34,211,238,.2),transparent 62%),#050a14}
.bg-morning{background:radial-gradient(55% 80% at 76% 42%,rgba(255,150,100,.5),transparent 62%),radial-gradient(45% 60% at 100% 100%,rgba(255,90,140,.4),transparent 60%),radial-gradient(50% 60% at 8% 100%,rgba(250,190,90,.2),transparent 62%),#160f1d}
.bg-movie{background:radial-gradient(55% 80% at 76% 42%,rgba(139,92,246,.5),transparent 62%),radial-gradient(45% 60% at 100% 100%,rgba(224,112,63,.4),transparent 60%),radial-gradient(50% 60% at 8% 100%,rgba(30,60,140,.3),transparent 62%),#04030c}
.bg-night{background:radial-gradient(55% 80% at 76% 42%,rgba(30,50,110,.4),transparent 62%),radial-gradient(45% 60% at 100% 100%,rgba(20,30,70,.5),transparent 60%),#02040a}
.hx::before{content:"";position:absolute;inset:-20% -40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.05) 50%,transparent 58%);animation:hxSweep 10s linear infinite;z-index:1;pointer-events:none}
@keyframes hxSweep{from{transform:translateX(-30%)}to{transform:translateX(30%)}}
.hx-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(60% 75% at 72% 45%,#000,transparent 78%);mask-image:radial-gradient(60% 75% at 72% 45%,#000,transparent 78%);animation:hxGrid 30s linear infinite}
@keyframes hxGrid{from{background-position:0 0}to{background-position:52px 52px}}
.hx-stars{position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 68%,#fff,transparent),radial-gradient(1.3px 1.3px at 47% 14%,#fff,transparent),radial-gradient(1px 1px at 63% 32%,#fff,transparent),radial-gradient(1.5px 1.5px at 81% 18%,#fff,transparent),radial-gradient(1px 1px at 90% 70%,#fff,transparent),radial-gradient(1.2px 1.2px at 72% 80%,#fff,transparent),radial-gradient(1px 1px at 38% 40%,#fff,transparent);opacity:.5;animation:hxTw 5s ease-in-out infinite alternate}
@keyframes hxTw{from{opacity:.25}to{opacity:.7}}
.hx-stage{position:absolute;right:max(210px,7vw);top:50%;transform:translateY(-46%);width:min(40vw,600px);z-index:2}
.hx-label{position:absolute;left:0;top:-34px;display:flex;align-items:center;gap:.55rem;font:700 .68rem var(--head);letter-spacing:.18em;text-transform:uppercase;color:#a5f3fc}
.hx-label i{width:8px;height:8px;border-radius:50%;background:#22d3ee;box-shadow:0 0 12px #22d3ee;animation:hxPulse 1.6s ease-in-out infinite}
@keyframes hxPulse{50%{opacity:.35}}
.hx-tv{position:relative;aspect-ratio:16/9;width:100%;border-radius:14px;background:#04060b;box-shadow:0 0 0 2px #1b2233,0 34px 90px rgba(0,0,0,.65),0 0 150px var(--glow);transition:box-shadow 1.4s ease}
.hx-screen{position:absolute;inset:8px;border-radius:8px;overflow:hidden;background:#02040a}
.hx-screen .s{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.3s ease}
.hx[data-scene=morning] .s-morning,.hx[data-scene=entertain] .s-entertain,.hx[data-scene=movie] .s-movie,.hx[data-scene=night] .s-night{opacity:1}
.hx-glare{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 38%);pointer-events:none}
.aur{animation:hxAur 9s ease-in-out infinite alternate}.aur.a2{animation-duration:12s;animation-direction:alternate-reverse}
@keyframes hxAur{from{transform:translateX(-30px) scaleY(.9)}to{transform:translateX(30px) scaleY(1.1)}}
.hx-bar{width:72%;height:13px;margin:20px auto 0;border-radius:8px;background:#0a0f1c;box-shadow:0 0 0 1px #1b2233,0 18px 40px rgba(0,0,0,.5);display:grid;place-items:center}
.hx-bar b{display:flex;gap:6px}.hx-bar i{width:4px;height:4px;border-radius:50%;background:#26324a;transition:background .6s}
.hx[data-scene=entertain] .hx-bar i,.hx[data-scene=morning] .hx-bar i{background:#22d3ee;animation:hxLed 1.1s ease-in-out infinite}
.hx-bar i:nth-child(2n){animation-delay:.2s}.hx-bar i:nth-child(3n){animation-delay:.4s}
@keyframes hxLed{50%{transform:scale(1.8);opacity:.6}}
.hx-chip{position:absolute;display:flex;align-items:center;gap:.55rem;padding:.6rem .9rem;border-radius:14px;background:rgba(12,20,40,.58);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);color:#fff;font-size:.78rem;box-shadow:0 14px 34px rgba(0,0,0,.35);animation:hxFloat 6s ease-in-out infinite;white-space:nowrap}
.hx-chip svg{width:18px;height:18px;stroke:#22d3ee;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hx-chip .k{opacity:.7}.hx-chip .v{font-weight:700;transition:opacity .35s}
.hx-c1{left:-11%;top:10%}.hx-c2{right:-7%;top:40%;animation-delay:-2s}.hx-c3{left:-4%;bottom:-16%;animation-delay:-4s}
@keyframes hxFloat{50%{transform:translateY(-8px)}}
.hx.sw .hx-chip .v{opacity:0}
.hx-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,20,.96) 0%,rgba(5,10,20,.86) 34%,rgba(5,10,20,0) 62%);z-index:3;pointer-events:none}
.hx-scenes{position:absolute;right:32px;bottom:26px;z-index:5;display:flex;gap:.3rem;padding:.35rem;border-radius:999px;background:rgba(8,14,28,.62);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16)}
.hx-scenes button{border:0;background:none;color:rgba(255,255,255,.8);border-radius:999px;padding:.55rem .95rem;font:600 .74rem var(--body);cursor:pointer;transition:background .25s,color .25s}
.hx-scenes button:hover{color:#fff}.hx-scenes button[aria-pressed=true]{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(42,139,255,.4)}
@media (max-width:1280px){.hx-stage{right:4vw;width:min(46vw,560px)}.hx-c2{right:-3%}}
@media (max-width:900px){
  .hx-stage{right:50%;top:auto;bottom:74px;transform:translateX(50%);width:min(88vw,480px);opacity:.42}
  .hx-chip,.hx-label{display:none}
  .hx-fade{background:linear-gradient(180deg,rgba(5,10,20,.92) 0%,rgba(5,10,20,.78) 55%,rgba(5,10,20,.55) 100%)}
  .hx-scenes{right:50%;transform:translateX(50%);bottom:14px;max-width:94vw;overflow-x:auto}
  .hx-scenes button{padding:.5rem .75rem;font-size:.7rem;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.hx::before,.hx-grid,.hx-stars,.aur,.hx-chip,.hx-bar i,.hx-label i{animation:none !important}}
.hero .wrap{z-index:4}
.hero-side{display:none !important}
.hx-stage{right:max(4vw,40px);width:min(42vw,620px)}
@media (min-width:1600px){.hx-stage{right:max(8vw,120px)}}
@media (max-width:1280px){.hx-stage{right:4vw;width:min(46vw,560px)}}
@media (max-width:900px){.hx-stage{right:50%;width:min(88vw,480px)}}

/* dark header pages: keep the phone number readable */
.site-header.dark .hphone{color:#fff}
.site-header.dark .hphone b{color:#fff}
.site-header.dark .hphone small{color:var(--cyan)}
.site-header.dark .brand,.site-header.dark .menu-btn{color:#fff}

/* ===== "spells 1-800-INSTALL" captions on the three main call buttons ===== */
.ph-note{display:block;font-weight:500;opacity:.72;font-size:.62em;letter-spacing:.02em;margin-top:1px}
.hphone small.ph-note{color:var(--cyan)}
.hc-t small.ph-note{color:rgba(255,255,255,.72)}
.fc-num{display:flex;flex-direction:column;line-height:1.15}
.ph-note2{font-size:.32em;font-weight:600;opacity:.7;letter-spacing:.04em;margin-top:4px;color:var(--cyan)}
@media (max-width:480px){.ph-note{font-size:.58em}}