:root{
  --bg:#04080b;
  --bg-2:#071017;
  --panel:#0b141c;
  --panel-2:#101c26;
  --text:#f4f7f9;
  --muted:#a9b4bd;
  --gold:#f7c62e;
  --gold-deep:#d79a00;
  --silver:#d9e1e7;
  --mic:#18baf7;
  --lights:#b27cff;
  --sound:#1fe1d0;
  --danger:#e35959;
  --line:rgba(255,255,255,.09);
  --radius:26px;
  --shadow:0 28px 80px rgba(0,0,0,.42);
  --content:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",SegoeUI,Arial,sans-serif;
  color:var(--text);
  background:#020305;
  line-height:1.55;
  min-height:100vh;
}
body::before,body::after{
  content:"";position:fixed;top:76px;bottom:0;width:245px;pointer-events:none;z-index:0;opacity:.82;
  background-size:168px 146px;background-repeat:repeat-y;
}
body::before{
  left:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='146' viewBox='0 0 168 146'%3E%3Cg fill='none' stroke='%23f7c62e' stroke-opacity='.88' stroke-width='1.9'%3E%3Cpath d='M30 2 56 17v30L30 62 4 47V17Z'/%3E%3Cpath d='M88 18 114 33v30L88 78 62 63V33Z'/%3E%3Cpath d='M146 2 172 17v30l-26 15-26-15V17Z'/%3E%3Cpath d='M59 70 85 85v30l-26 15-26-15V85Z'/%3E%3Cpath d='M117 86 143 101v30l-26 15-26-15v-30Z'/%3E%3C/g%3E%3C/svg%3E");
  filter:drop-shadow(0 0 5px rgba(247,198,46,.62)) drop-shadow(0 0 14px rgba(247,198,46,.22));
  -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.96) 38%,rgba(0,0,0,.50) 67%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.96) 38%,rgba(0,0,0,.50) 67%,transparent 100%);
}
body::after{
  right:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='146' viewBox='0 0 168 146'%3E%3Cg fill='none' stroke='%2318baf7' stroke-opacity='.9' stroke-width='1.9'%3E%3Cpath d='M30 2 56 17v30L30 62 4 47V17Z'/%3E%3Cpath d='M88 18 114 33v30L88 78 62 63V33Z'/%3E%3Cpath d='M146 2 172 17v30l-26 15-26-15V17Z'/%3E%3Cpath d='M59 70 85 85v30l-26 15-26-15V85Z'/%3E%3Cpath d='M117 86 143 101v30l-26 15-26-15v-30Z'/%3E%3C/g%3E%3C/svg%3E");
  transform:scaleX(-1);
  filter:drop-shadow(0 0 5px rgba(24,186,247,.66)) drop-shadow(0 0 15px rgba(24,186,247,.24));
  -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.96) 38%,rgba(0,0,0,.50) 67%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.96) 38%,rgba(0,0,0,.50) 67%,transparent 100%);
}
main,.site-footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
.wrap{width:min(var(--content),calc(100% - 42px));margin-inline:auto}
.eyebrow{font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:.77rem;color:var(--gold)}
.kicker{font-size:1.02rem;color:var(--muted);max-width:720px}
.grad-text{background:linear-gradient(110deg,var(--gold) 3%,#ffe37f 24%,#eef3f6 48%,#b9c3ca 78%);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
.gold{color:var(--gold)}
.section{padding:92px 0}
.section.compact{padding:66px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:42px}
.section-head h2{margin:.2rem 0 0;font-size:clamp(2rem,4vw,3.65rem);line-height:1.02;letter-spacing:-.04em}
.section-head p{max-width:560px;margin:0;color:var(--muted)}

.site-header{position:sticky;top:0;z-index:1000;background:rgba(3,7,10,.75);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.065)}
.nav{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-size:2.08rem;font-weight:900;letter-spacing:-.045em;white-space:nowrap;line-height:1}
.brand .cue{color:var(--gold)}
.brand-name{display:inline-flex;align-items:flex-start}
.brand sup{font-size:.34em;line-height:1;margin-left:3px;margin-top:.04em;color:var(--silver);font-weight:800}
.brand .works{color:#eef3f6}
.brand small{font-size:.68rem;letter-spacing:.11em;color:#cfd7dd;font-weight:750;margin-left:2px;align-self:flex-end;margin-bottom:3px;text-transform:none}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:10px 12px;border-radius:10px;color:#c9d2d8;font-size:.92rem;font-weight:650;transition:.2s ease}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:white;background:rgba(255,255,255,.07)}
.nav-links .nav-cta{margin-left:8px;background:linear-gradient(135deg,#f8ca38,#d39b08);color:#0a0a0a;font-weight:850;padding-inline:17px}
.nav-toggle{display:none;border:0;background:rgba(255,255,255,.07);color:white;border-radius:10px;width:44px;height:44px;font-size:1.3rem}

.hero{padding:74px 0 54px;overflow:hidden;position:relative}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
.hero-copy h1{font-size:clamp(3.2rem,6.6vw,6.25rem);line-height:.95;letter-spacing:-.058em;margin:14px 0 24px;max-width:1100px}
.hero-copy .lead{font-size:clamp(1.05rem,2vw,1.3rem);color:#bac5cc;max-width:720px;margin:0 0 31px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 20px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.05);font-weight:800;transition:.2s ease}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.btn.primary{background:linear-gradient(135deg,#ffd64a,#d99a00);color:#080808;border-color:transparent;box-shadow:0 12px 40px rgba(239,183,21,.20)}
.hero-visual{position:relative;min-height:520px;display:grid;place-items:center}
.hero-visual::before{content:"";position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(247,198,46,.15),rgba(24,186,247,.08) 35%,transparent 68%);filter:blur(10px)}
.hero-visual img{position:relative;width:min(820px,122%);filter:drop-shadow(0 38px 70px rgba(0,0,0,.55));transform:rotate(-1.2deg)}
.system-strip{margin-top:58px;border:1px solid rgba(255,255,255,.085);background:linear-gradient(180deg,rgba(14,24,32,.86),rgba(7,13,18,.9));border-radius:18px;padding:17px 22px;display:flex;justify-content:center;align-items:center;gap:24px;box-shadow:var(--shadow);color:#c8d2d9;font-weight:750;letter-spacing:.04em}
.system-strip i{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold)}

.headline-line{display:block}
.no-wrap-desktop{white-space:nowrap}
.product-mark{font-weight:900;letter-spacing:-.035em;font-size:clamp(1.55rem,2.5vw,2.25rem);line-height:1.05;margin-bottom:13px;text-transform:none}
.system-mark{font-size:clamp(2rem,4vw,3.15rem);color:#eef3f6;display:flex;align-items:flex-end;justify-content:center;gap:0}
.system-mark .cue{color:var(--gold);font-weight:900}
.system-mark .works{color:#eef3f6;font-weight:900}
.system-mark sup{font-size:.34em;line-height:1;margin:.08em .14em 0 .10em;align-self:flex-start;color:var(--silver)}
.system-mark .controls{font-weight:700;color:#c9d2d8;font-size:.58em;letter-spacing:.02em;margin-left:.10em;margin-bottom:.07em}
.overview-hero-inner{display:grid;justify-items:center;text-align:center}
.overview-hero .hero-copy{display:grid;justify-items:center;width:100%}
.overview-hero .hero-copy h1{max-width:1180px;margin-bottom:6px}
.overview-hero .hero-visual{min-height:430px;width:100%;margin:-4px 0 -8px}
.overview-hero .hero-visual img{width:min(860px,90%);transform:none}
.overview-hero .hero-copy-bottom{max-width:900px}
.overview-hero .hero-copy-bottom .lead{max-width:860px;margin-bottom:26px}
.centered-actions{justify-content:center}

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(14,24,32,.94),rgba(7,12,17,.94));min-height:560px;padding:29px;box-shadow:0 20px 50px rgba(0,0,0,.23);isolation:isolate;display:flex;flex-direction:column}
.product-card::before{content:"";position:absolute;inset:-35% -20% auto;height:65%;background:radial-gradient(circle,var(--accent-fade),transparent 66%);z-index:-1}
.product-card.mic{--accent:var(--mic);--accent-fade:rgba(24,186,247,.18)}
.product-card.lights{--accent:var(--lights);--accent-fade:rgba(178,124,255,.17)}
.product-card.sound{--accent:var(--sound);--accent-fade:rgba(31,225,208,.16)}
.product-card .tag{display:inline-flex;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);padding:6px 10px;border-radius:99px;font-size:.72rem;font-weight:850;letter-spacing:.12em;text-transform:none;background:rgba(0,0,0,.18)}
.product-card h3{font-size:2.15rem;margin:17px 0 8px;letter-spacing:-.045em}
.product-card p{color:var(--muted);margin:0 0 18px}
.product-card .media{height:255px;display:grid;place-items:center;margin:12px -10px 6px;flex:0 0 auto}
.product-card .media img{max-height:250px;max-width:108%;width:auto;filter:drop-shadow(0 24px 28px rgba(0,0,0,.45))}
.product-card.mic .media img{max-height:285px;max-width:124%;transform:scale(1.10)}
.product-card.lights .media img{max-height:282px;max-width:124%;transform:scale(1.09)}
.product-card.sound .media{height:230px;border:1px solid rgba(31,225,208,.18);border-radius:14px;overflow:hidden;background:#060b0f;padding:7px;margin-top:24px}
.product-card.sound .media img{width:100%;height:100%;object-fit:cover;max-height:none;border-radius:10px}
.product-card .learn{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px;color:white;font-weight:850}
.product-card .learn span{color:var(--accent)}

.promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.feature-stack{display:grid;gap:14px}
.feature{padding:22px;border:1px solid var(--line);background:rgba(9,16,22,.8);border-radius:17px}
.feature h3{margin:0 0 5px;font-size:1.08rem}
.feature p{margin:0;color:var(--muted)}
.visual-frame{padding:9px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#111c24,#070b0f);box-shadow:var(--shadow)}
.visual-frame img{border-radius:15px;width:100%}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(8,14,19,.86)}
.stat{padding:28px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat strong{display:block;font-size:1.65rem;color:white;margin-bottom:4px}
.stat span{font-size:.9rem;color:var(--muted)}

.quote-band{padding:70px 0}
.quote-box{border:1px solid rgba(247,198,46,.20);background:linear-gradient(120deg,rgba(247,198,46,.075),rgba(10,18,25,.9) 40%,rgba(24,186,247,.06));border-radius:30px;padding:clamp(30px,6vw,70px);position:relative;overflow:hidden}
.quote-box h2{font-size:clamp(2.3rem,5vw,4.7rem);line-height:1;margin:0 0 17px;letter-spacing:-.055em;max-width:920px}
.quote-box p{color:#bac4ca;max-width:720px;font-size:1.08rem}

.page-hero{padding:84px 0 52px;position:relative;overflow:hidden}
.page-hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.page-hero h1{font-size:clamp(3rem,6vw,5.45rem);line-height:.96;margin:13px 0 20px;letter-spacing:-.058em}
.page-hero p{color:#b6c2ca;font-size:1.16rem;max-width:680px}
.product-visual{min-height:470px;display:grid;place-items:center;position:relative}
.product-visual::after{content:"";position:absolute;width:66%;height:55%;border-radius:50%;background:radial-gradient(circle,var(--page-glow,rgba(255,255,255,.12)),transparent 68%);filter:blur(30px);z-index:-1}
.product-visual img{max-height:555px;max-width:112%;width:auto;filter:drop-shadow(0 35px 50px rgba(0,0,0,.55))}
.page-mic{--page-accent:var(--mic);--page-glow:rgba(24,186,247,.22)}
.page-lights{--page-accent:var(--lights);--page-glow:rgba(178,124,255,.22)}
.page-sound{--page-accent:var(--sound);--page-glow:rgba(31,225,208,.20)}
.page-accent{color:var(--page-accent,var(--gold))}

.icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.icon-card{padding:25px;border:1px solid var(--line);border-radius:18px;background:rgba(9,16,22,.82)}
.icon-card .num{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--page-accent,var(--gold)) 15%,transparent);border:1px solid color-mix(in srgb,var(--page-accent,var(--gold)) 35%,transparent);color:var(--page-accent,var(--gold));font-weight:900;margin-bottom:18px}
.icon-card h3{margin:0 0 7px;font-size:1.08rem}
.icon-card p{margin:0;color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.reverse .copy{order:2}.split.reverse .visual{order:1}
.copy h2{font-size:clamp(2.1rem,4vw,3.55rem);line-height:1.02;letter-spacing:-.045em;margin:.3rem 0 18px}
.copy p{color:var(--muted)}
.checks{display:grid;gap:11px;margin:24px 0 0;padding:0;list-style:none}
.checks li{display:flex;gap:11px;align-items:flex-start;color:#dce4e8}
.checks li::before{content:"✓";color:var(--page-accent,var(--gold));font-weight:900}
.screen-card{padding:10px;border:1px solid color-mix(in srgb,var(--page-accent,var(--gold)) 24%,rgba(255,255,255,.05));border-radius:20px;background:#071018;box-shadow:var(--shadow)}
.screen-card img{border-radius:13px}

.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:start}
.principles{display:grid;gap:14px}
.principle{border-left:3px solid var(--gold);padding:5px 0 5px 19px}
.principle h3{margin:0 0 5px}.principle p{margin:0;color:var(--muted)}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px}
.contact-card,.form-card{border:1px solid var(--line);border-radius:24px;background:rgba(9,16,22,.88);padding:30px}
.contact-card h3,.form-card h3{margin-top:0;font-size:1.5rem}
.contact-list{display:grid;gap:18px;margin-top:27px}
.contact-item span{display:block;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin-bottom:3px}
.contact-item a{font-weight:800;color:white}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
label{display:grid;gap:7px;font-size:.86rem;color:#c8d1d6;font-weight:700}
input,textarea{width:100%;border:1px solid rgba(255,255,255,.12);background:#071018;color:white;padding:13px 14px;border-radius:11px;outline:none}
input:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(247,198,46,.08)}
textarea{min-height:150px;resize:vertical}
.form-note{font-size:.78rem;color:var(--muted);margin-top:12px}

.site-footer{padding:34px 0 40px;border-top:1px solid rgba(255,255,255,.07);background:rgba(2,5,7,.68)}
.footer-grid{display:flex;justify-content:space-between;gap:26px;align-items:center}
.footer-copy{color:var(--muted);font-size:.88rem}
.footer-nav{display:flex;gap:18px;flex-wrap:wrap;color:#c7d0d6;font-size:.88rem}
.brand-line{font-size:.7rem;letter-spacing:.22em;color:var(--gold);font-weight:800;margin-top:8px;text-transform:uppercase}

@media (max-width:960px){
  body::before,body::after{width:120px;opacity:.52;background-size:150px 130px}
  .nav-toggle{display:block}.nav-links{display:none;position:absolute;left:21px;right:21px;top:68px;flex-direction:column;align-items:stretch;background:#091118;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:10px;box-shadow:var(--shadow)}.nav-links.open{display:flex}.nav-links .nav-cta{margin-left:0}
  .hero-grid,.page-hero-grid,.promise-grid,.split,.about-grid,.contact-grid{grid-template-columns:1fr}
  .hero-visual{min-height:360px}.page-hero-grid{gap:20px}.product-visual{min-height:330px}
  .product-grid,.icon-grid{grid-template-columns:1fr}.product-card{min-height:auto}.product-card .media{height:240px}
  .split.reverse .copy,.split.reverse .visual{order:initial}
  .section-head{align-items:start;flex-direction:column}
}
@media (max-width:640px){
  .wrap{width:min(var(--content),calc(100% - 28px))}.hero{padding-top:58px}.section{padding:68px 0}.hero-copy h1{font-size:3.55rem}.system-strip{gap:11px;font-size:.78rem;padding:14px 12px}.system-strip i{width:4px;height:4px}.stat-row{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--line)}.stat:last-child{border-bottom:0}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.footer-grid{align-items:flex-start;flex-direction:column}
}

.sound-hero-inner{display:grid;justify-items:center;text-align:center}
.sound-hero-inner .sound-hero-copy{display:grid;justify-items:center;width:100%}
.sound-hero-inner .sound-hero-copy h1{max-width:1180px;margin-bottom:8px}
.sound-hero-inner .sound-hero-visual{min-height:410px;width:100%;margin:2px 0 0}
.sound-hero-inner .sound-hero-visual .screen-card{width:min(980px,92%);padding:12px}
.sound-hero-inner .sound-hero-visual img{width:100%;height:auto;max-width:none;max-height:none}
.sound-hero-inner .sound-hero-bottom{display:grid;justify-items:center;max-width:900px;margin-top:-6px}
.sound-hero-inner .sound-hero-bottom p{max-width:860px;margin:0 0 26px}
.sound-hero-inner .actions{justify-content:center}
.page-lights .page-hero .product-visual img{max-height:680px;max-width:124%}
.page-mic .page-hero .product-visual img{max-height:680px;max-width:124%}
.split .product-visual{min-height:410px}
.split .product-visual img{max-height:520px}
.page-mic .split .product-visual img{max-height:590px;max-width:122%}
.site-footer .brand{font-size:1.9rem}
.site-footer .brand small{font-size:.72rem;color:#d5dde2}

@media (max-width:1200px){
  .no-wrap-desktop{white-space:normal}
  body::before,body::after{width:115px;opacity:.30}
}
@media (max-width:960px){
  body::before,body::after{width:120px;opacity:.52;background-size:150px 130px}
  body::before,body::after{display:none}
  .brand{font-size:1.7rem}
  .brand small{font-size:.58rem}
  .overview-hero .hero-visual{min-height:330px}
  .overview-hero .hero-visual img{width:min(720px,98%)}
}


/* ===== V4 FINAL REFINEMENT PASS ===== */
/* Splash-screen-derived connected honeycomb fields: blue left, gold right. */
body::before,body::after{
  top:76px;
  bottom:0;
  width:430px;
  opacity:.98;
  background-size:410px 360px;
  background-repeat:repeat-y;
  filter:none;
}
body::before{
  left:0;
  background-image:url("../img/honeycomb-left.svg");
  -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.96) 11%,rgba(0,0,0,.80) 28%,rgba(0,0,0,.56) 45%,rgba(0,0,0,.30) 61%,rgba(0,0,0,.11) 76%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.96) 11%,rgba(0,0,0,.80) 28%,rgba(0,0,0,.56) 45%,rgba(0,0,0,.30) 61%,rgba(0,0,0,.11) 76%,transparent 100%);
}
body::after{
  right:0;
  transform:none;
  background-image:url("../img/honeycomb-right.svg");
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.96) 11%,rgba(0,0,0,.80) 28%,rgba(0,0,0,.56) 45%,rgba(0,0,0,.30) 61%,rgba(0,0,0,.11) 76%,transparent 100%);
  mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.96) 11%,rgba(0,0,0,.80) 28%,rgba(0,0,0,.56) 45%,rgba(0,0,0,.30) 61%,rgba(0,0,0,.11) 76%,transparent 100%);
}
/* Lower trademark marks so they sit with the wordmark instead of floating. */
.brand sup{margin-top:.16em}
.system-mark sup{margin-top:.20em}
.product-mark sup{font-size:.36em;vertical-align:.50em;margin-left:.08em}
/* Overview card optical alignment. */
.product-card.mic .media img{transform:scale(1.10) translateY(12px)}
.product-card.lights .media img{transform:scale(1.09) translateY(-10px)}
/* CueSound: keep the strong centered composition, but give every layer air. */
.sound-hero-inner .sound-hero-copy h1{
  margin-bottom:28px;
  line-height:1.02;
  overflow:visible;
  padding-bottom:.12em;
}
.sound-hero-inner .sound-hero-copy .headline-line{padding-bottom:.04em;overflow:visible}
.sound-hero-inner .sound-hero-visual{
  min-height:0;
  margin:10px 0 34px;
}
.sound-hero-inner .sound-hero-visual .screen-card{width:min(940px,90%)}
.sound-hero-inner .sound-hero-bottom{margin-top:0;padding-top:2px}
.sound-hero-inner .sound-hero-bottom p{margin:0 0 30px}
@media (max-width:1200px){
  body::before,body::after{width:300px;opacity:.72;background-size:350px 307px}
}
@media (max-width:960px){
  body::before,body::after{display:none}
  .sound-hero-inner .sound-hero-copy h1{margin-bottom:18px}
  .sound-hero-inner .sound-hero-visual{margin:6px 0 24px}
}

/* ===== V5 FINAL BRAND MATCH PASS ===== */
/* Recreate the touchscreen splash-screen side fields: one continuous connected
   honeycomb lattice, with the brightest band inset from the browser edge and
   a rounded vignette that falls away both outward and toward the content. */
body::before,body::after{
  top:76px;
  bottom:0;
  width:620px;
  opacity:1;
  background-size:620px 582px;
  background-repeat:repeat-y;
  background-position:0 0;
  filter:none;
  -webkit-mask-image:none;
  mask-image:none;
}
body::before{
  left:0;
  background-image:url("../img/honeycomb-left.svg");
}
body::after{
  right:0;
  transform:none;
  background-image:url("../img/honeycomb-right.svg");
}
/* TM should nestle into the wordmark rather than float above it. */
.brand sup{margin-top:.27em}
.system-mark sup{margin-top:.29em}
.product-mark sup{vertical-align:.36em}
/* Overview optical alignment: leave CueMic alone; use a tight card-specific
   CueLights crop so the visible node, not its transparent source canvas, is centered. */
.product-card.lights .media{margin-top:4px;margin-bottom:14px}
.product-card.lights .media img{
  max-height:268px;
  max-width:118%;
  transform:translateY(-5px) scale(1.08);
}
@media (max-width:1400px){
  body::before,body::after{width:480px;background-size:520px 488px}
}
@media (max-width:1200px){
  body::before,body::after{width:350px;opacity:.82;background-size:430px 404px}
}
@media (max-width:960px){body::before,body::after{display:none}}

/* ===== V6 SPLASH-SCREEN VIGNETTE + CUEMIC OPTICAL POSITION ===== */
/* Keep the approved V5 honeycomb geometry, but shape the whole field like the
   CueWorks touchscreen splash screen: a narrow bright streak inset from each
   browser edge, with a short outer fade and a much broader fade toward the
   page content.  This removes the hard vertical cut-off seen in V5. */
body::before{
  -webkit-mask-image:linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.28) 7%,
    rgba(0,0,0,.66) 14%,
    #000 23%,
    #000 30%,
    rgba(0,0,0,.82) 39%,
    rgba(0,0,0,.56) 49%,
    rgba(0,0,0,.34) 60%,
    rgba(0,0,0,.17) 70%,
    rgba(0,0,0,.07) 80%,
    transparent 94%,
    transparent 100%);
  mask-image:linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.28) 7%,
    rgba(0,0,0,.66) 14%,
    #000 23%,
    #000 30%,
    rgba(0,0,0,.82) 39%,
    rgba(0,0,0,.56) 49%,
    rgba(0,0,0,.34) 60%,
    rgba(0,0,0,.17) 70%,
    rgba(0,0,0,.07) 80%,
    transparent 94%,
    transparent 100%);
}
body::after{
  -webkit-mask-image:linear-gradient(to left,
    transparent 0%,
    rgba(0,0,0,.28) 7%,
    rgba(0,0,0,.66) 14%,
    #000 23%,
    #000 30%,
    rgba(0,0,0,.82) 39%,
    rgba(0,0,0,.56) 49%,
    rgba(0,0,0,.34) 60%,
    rgba(0,0,0,.17) 70%,
    rgba(0,0,0,.07) 80%,
    transparent 94%,
    transparent 100%);
  mask-image:linear-gradient(to left,
    transparent 0%,
    rgba(0,0,0,.28) 7%,
    rgba(0,0,0,.66) 14%,
    #000 23%,
    #000 30%,
    rgba(0,0,0,.82) 39%,
    rgba(0,0,0,.56) 49%,
    rgba(0,0,0,.34) 60%,
    rgba(0,0,0,.17) 70%,
    rgba(0,0,0,.07) 80%,
    transparent 94%,
    transparent 100%);
}

/* CueMic overview card: position by visible/optical weight rather than the
   transparent source canvas.  Slightly larger, lower, and left of V5. */
.product-card.mic .media img{
  transform:translate(-18px,20px) scale(1.18);
}

/* ===== V6.1 HOSTED CONTACT FORM ===== */
.form-honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
.form-status{
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  background:#071018;
  color:white;
}
.form-status.success{border-color:rgba(247,198,46,.55)}
.form-status.error{border-color:rgba(255,120,120,.55)}


/* ===== V6.6 MOBILE HERO + GLOBAL HONEYCOMB CLEANUP ===== */
/* Remove the older sitewide side honeycomb fields so the richer homepage hero
   treatment stands on its own and no legacy background shows through on scroll. */
body::before,
body::after{
  display:none !important;
}


/* ===== V6.9 GLOBAL RICH HONEYCOMB FIELD FIX ===== */
/* Use the approved rich branded honeycomb art as fixed split side fields across
   the whole site. This keeps the center reading area dark while the side fields
   stay visible as the page scrolls, including on mobile. */
.overview-hero .hero-rich-bg{display:none !important;}
body::before,
body::after{
  display:block !important;
  content:"";
  position:fixed;
  top:76px;
  bottom:0;
  width:min(39vw, 560px);
  pointer-events:none;
  z-index:0;
  opacity:1;
  background-repeat:no-repeat;
  background-size:cover;
  filter:none;
  -webkit-mask-image:none;
  mask-image:none;
}
body::before{
  left:0;
  background-image:url("../img/cueworks-honeycomb-rich-left.webp");
  background-position:left center;
}
body::after{
  right:0;
  transform:none;
  background-image:url("../img/cueworks-honeycomb-rich-right.webp");
  background-position:right center;
}
@media (max-width:1200px){
  body::before,
  body::after{width:min(35vw, 430px);}
}
@media (max-width:900px){
  body::before,
  body::after{width:33vw; opacity:.98;}
}
@media (max-width:700px){
  body::before,
  body::after{top:68px; width:31vw;}
}