:root{
  --bg:#0E1626;
  --bg2:#070B12;
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.14);
  --text:#EAF0FF;
  --muted: rgba(234,240,255,.72);
  --muted2: rgba(234,240,255,.58);
  --cyan:#00F0FF;
  --green:#3DFF7A;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 22px;
  --radius2: 16px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: radial-gradient(1200px 700px at 70% 10%, rgba(0,240,255,.12), transparent 60%),
              radial-gradient(900px 700px at 20% 15%, rgba(61,255,122,.10), transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
  user-select:none; white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22)}
.btn:active{transform: translateY(0px)}
.btn.primary{
  border-color: rgba(0,240,255,.35);
  background: linear-gradient(180deg, rgba(0,240,255,.18), rgba(0,240,255,.06));
  box-shadow: 0 14px 50px rgba(0,240,255,.10);
}
.btn.primary:hover{border-color: rgba(0,240,255,.55); background: linear-gradient(180deg, rgba(0,240,255,.24), rgba(0,240,255,.08))}
.btn.green{
  border-color: rgba(61,255,122,.35);
  background: linear-gradient(180deg, rgba(61,255,122,.16), rgba(61,255,122,.06));
  box-shadow: 0 14px 50px rgba(61,255,122,.10);
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 13px;
}
.dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(0,240,255,.55);
}
.dot.green{background: var(--green); box-shadow: 0 0 18px rgba(61,255,122,.55)}
.muted{color: var(--muted)}
.small{font-size: 13px; color: var(--muted2)}

.h1{
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 14px 0 10px;
}
.h2{
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}
.p{font-size:16px; line-height:1.6; color:var(--muted); margin:0}

/* NAV */
header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(7,11,18,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px}
.mark{
  width:38px; height:38px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,240,255,.22), rgba(61,255,122,.12));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
}
.mark:before{
  content:"";
  position:absolute; inset:-30%;
  background: radial-gradient(circle at 30% 30%, rgba(0,240,255,.55), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(61,255,122,.45), transparent 55%);
  filter: blur(6px);
  transform: rotate(18deg);
}
.markSmall{width:30px;height:30px;border-radius:10px}
.brand b{letter-spacing:-.02em}
.links{display:flex; gap:18px; align-items:center}
.links a{
  color: var(--muted);
  font-size: 14px;
  padding:8px 10px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.links a:hover{background: rgba(255,255,255,.06); color: var(--text)}
.nav-cta{display:flex; gap:10px; align-items:center}
.burger{display:none}

.mobileMenu{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(7,11,18,.55);
  backdrop-filter:blur(14px);
}
.mobileMenuInner{padding:12px 20px 16px; display:flex; gap:10px; flex-wrap:wrap}

/* HERO */
.hero{padding:56px 0 18px; position:relative;}
.hero-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:22px; align-items:stretch;}
.hero-left{padding:26px 0}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.hero-note{margin-top:14px; display:flex; gap:10px; align-items:flex-start}
.hero-note .icon{
  width:32px; height:32px; border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center; flex: 0 0 auto;
}
.hero-note-title{font-weight:600; margin-bottom:4px}
.hero-right{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  min-height:420px;
}
#listenerCanvas{width:100%; height:100%; display:block;}
.hero-right-overlay{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; gap:10px; align-items:stretch; flex-wrap:wrap;
  pointer-events:none;
}
.chip{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,11,18,.45);
  backdrop-filter: blur(10px);
  color: rgba(234,240,255,.78);
  font-size: 12px;
  display:flex; align-items:center; gap:8px;
}
.chip .mini{
  width:8px; height:8px; border-radius:999px; background: var(--cyan);
  box-shadow: 0 0 16px rgba(0,240,255,.55);
}
.chip.green .mini{background: var(--green); box-shadow: 0 0 16px rgba(61,255,122,.55)}

/* SECTIONS */
section{padding:56px 0}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:18px}
.section-head .left{max-width:720px}
.cards{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px}
.card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  position:relative; overflow:hidden;
}
.card:before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(400px 200px at 20% 10%, rgba(0,240,255,.12), transparent 60%),
              radial-gradient(400px 200px at 80% 90%, rgba(61,255,122,.10), transparent 60%);
  opacity:.75; pointer-events:none;
}
.card>*{position:relative}
.span6{grid-column: span 6;}
.span4{grid-column: span 4;}
.span12{grid-column: 1 / -1;}
.kpi{display:flex; flex-direction:column; gap:8px}
.kpi .num{font-size:28px; letter-spacing:-.02em}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color: rgba(234,240,255,.76);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,11,18,.35);
  padding: 6px 10px; border-radius: 999px;
}
.mt10{margin-top:10px}
.mt14{margin-top:14px}
.mt6{margin-top:6px}

/* HOW */
.how{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.step{
  display:flex; gap:12px; align-items:flex-start;
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.badge{
  width:34px; height:34px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.86);
  flex: 0 0 auto;
  font-weight: 700;
}

/* DEMO CHAT */
.demo{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; align-items:stretch}
.chat{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  min-height:420px;
}
.chat-top{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: rgba(7,11,18,.35);
  backdrop-filter: blur(10px);
}
.chat-title{display:flex; align-items:center; gap:10px}
.status{display:inline-flex; align-items:center; gap:8px; font-size:12px; color: rgba(234,240,255,.74)}
.status i{
  width:8px; height:8px; border-radius: 999px; background: var(--green);
  box-shadow: 0 0 16px rgba(61,255,122,.55);
  display:inline-block;
}
.chat-log{padding:16px; display:flex; flex-direction:column; gap:10px; overflow:auto; flex:1 1 auto}
.msg{
  max-width: 82%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.90);
  line-height:1.45; font-size: 14px;
}
.msg.ai{
  border-color: rgba(0,240,255,.18);
  background: linear-gradient(180deg, rgba(0,240,255,.10), rgba(255,255,255,.03));
}
.msg.user{
  margin-left:auto;
  border-color: rgba(61,255,122,.18);
  background: linear-gradient(180deg, rgba(61,255,122,.10), rgba(255,255,255,.03));
}
.chat-bottom{
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex; gap:10px;
  background: rgba(7,11,18,.35);
  backdrop-filter: blur(10px);
}
.input{
  flex: 1 1 auto;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
  color: var(--text);
  outline:none;
  font-size: 14px;
}
.input::placeholder{color: rgba(234,240,255,.45)}
.side{display:flex; flex-direction:column; gap:14px}
.panel{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 16px;
}
.signals{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.signal{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,11,18,.25);
}
.sigTitle{font-size:13px; color:rgba(234,240,255,.78)}
.bar{
  height:8px; width: 44%;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.bar > span{
  display:block; height:100%;
  width: var(--w, 40%);
  background: linear-gradient(90deg, rgba(0,240,255,.55), rgba(61,255,122,.55));
  border-radius:999px;
}
.scoreRow{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:12px}
.scoreNum{font-size:44px; letter-spacing:-.03em; font-weight:800}

/* CONTACT CTA + FORM */
.cta{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(900px 300px at 20% 10%, rgba(0,240,255,.16), transparent 60%),
              radial-gradient(900px 300px at 80% 90%, rgba(61,255,122,.12), transparent 60%),
              rgba(255,255,255,.04);
  padding: 22px;
  box-shadow: var(--shadow);
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  flex-wrap:wrap;
}
.ctaLeft{max-width:520px}
.leadForm{
  width: 420px;
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,11,18,.28);
  backdrop-filter: blur(10px);
  padding: 14px;
}
.fRow{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.fLabel{font-size:12px; color: rgba(234,240,255,.70)}
.fInput{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  padding: 12px 12px;
  color: var(--text);
  outline:none;
  font-size: 14px;
}
.fInput::placeholder{color: rgba(234,240,255,.45)}
.fInput:focus{border-color: rgba(0,240,255,.38)}
.fArea{min-height: 92px; resize: vertical}
.w100{width:100%}
.hp{display:none !important}

/* FOOTER */
footer{
  padding: 28px 0 56px;
  color: rgba(234,240,255,.55);
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(7,11,18,.35);
  backdrop-filter: blur(10px);
}
.foot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .hero-right{min-height: 360px}
  .how{grid-template-columns: 1fr}
  .demo{grid-template-columns: 1fr}
  .links{display:none}
  .burger{display:inline-flex}
  .cta{flex-direction:column}
  .ctaLeft{max-width:unset}
}
@media (max-width: 520px){
  .hero{padding-top: 34px}
  .hero-right{min-height: 320px}
  .msg{max-width: 92%}
}

/* checkbox */
.fCheck{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:12px;
  color: rgba(234,240,255,.70);
  line-height:1.45;
}
.fCheck input{
  margin-top:3px;
  width:16px; height:16px;
  accent-color: #00F0FF;
}
.fCheck a{ text-decoration: underline; text-underline-offset: 2px; }

/* 4-up cards helper */
.cards .span3{ grid-column: span 3; }
@media (max-width: 980px){
  .cards .span3{ grid-column: span 12; }
}
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.btn.disabled{ opacity:.45; pointer-events:none; }

/* brokers verticals: 4 cards only */
.cards.only4{ align-items: stretch; }
.cards.only4 .card{ min-height: 360px; }
@media (max-width: 980px){
  .cards.only4 .card{ min-height: unset; }
}

/* FAQ (SEO + AI-friendly) */
.faq details{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 14px;
  margin-top: 10px;
}
.faq summary{
  cursor: pointer;
  font-weight: 600;
  color: rgba(234,240,255,.88);
}
.faq details[open] summary{ margin-bottom: 8px; }

/* FIX: SEO / FAQ layout */
#seo .wrap{ max-width:1200px; margin:0 auto; }
#seo .cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
#seo .card{ width:100%; box-sizing:border-box; }

#seo .card.span12{ grid-column:1/-1; }
#seo .card.span6{ grid-column:span 6; }
#seo .card.span4{ grid-column:span 4; }

@media (max-width: 980px){
  #seo .card.span6,
  #seo .card.span4{ grid-column:1/-1; }
}

/* FAQ accordion full width */
#seo .faq{ width:100%; }
#seo .faq details{ width:100%; }

/* NAV: dropdown solutions */
.navLinks{ display:flex; gap:18px; align-items:center; }
.dropdown{ position:relative; }
.dropbtn{
  background:transparent;
  border:0;
  padding:10px 8px;
  color:rgba(234,240,255,.82);
  font:inherit;
  cursor:pointer;
}
.dropbtn:hover{ color:rgba(234,240,255,.95); }
.dropmenu{
  position:absolute;
  top:46px;
  left:0;
  min-width: 220px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,16,28,.88);
  backdrop-filter: blur(10px);
  padding:8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  display:none;
  z-index: 50;
}
.dropmenu a{
  display:block;
  padding:10px 10px;
  border-radius: 12px;
  color:rgba(234,240,255,.82);
}
.dropmenu a:hover{ background: rgba(255,255,255,.06); color: rgba(234,240,255,.95); }
.dropdown:hover .dropmenu{ display:block; }

/* mobile: hide desktop links */
@media (max-width: 980px){
  .navLinks{ display:none; }
}
.mobileMenu{ display:none; }
.mobileMenu.open{ display:block; }

/* === HARD FIX: FAQ LAYOUT RESET === */
.faq{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}
.faq details{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  position:relative !important;
  left:auto !important;
}
.faq summary{
  list-style:none;
}
.faq summary::-webkit-details-marker{
  display:none;
}

/* prevent accidental aside/sidebar styles */
aside, .aside, .sidebar{
  display:none !important;
}

/* ensure sections don't become flex-columns */
section, .section{
  display:block;
}

/* === LAYOUT FIX: doc pages (cases/compliance) === */
.wrap.doc{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}
.hero .wrap.doc{ display:block; }
.wrap.doc .cards{ width:100%; }
.wrap.doc .card{ width:100%; box-sizing:border-box; }

/* === FINAL HARD FIX: prevent sidebar collapse on doc pages === */
main > section { display:block; }
main > section > .wrap { width:100%; max-width:1200px; margin:0 auto; }

.cards { align-content:stretch; }
.cards > .card { min-width:0; }

/* FAQ must never be column */
.faq { display:block; width:100%; }
.faq details { width:100%; }

/* Prevent grid bleed */
.wrap:not(.cards) { grid-column: 1 / -1; }

/* RESP: cards spans */
@media (max-width: 980px){
  .span6, .span4{ grid-column: 1 / -1; }
}