/* VIQQO v1.6 — premium single-hue system */
:root{
  --accent:#7557ff!important;
  --accent-rgb:117,87,255;
  --accent-soft:rgba(117,87,255,.10)!important;
  --accent-line:rgba(117,87,255,.25)!important;
  --accent-glow:rgba(117,87,255,.34);
  --accent-glow-soft:rgba(117,87,255,.14);
  --premium-shadow:0 24px 70px rgba(17,20,49,.10),0 4px 16px rgba(17,20,49,.04);
  --premium-shadow-hover:0 34px 90px rgba(17,20,49,.15),0 8px 24px rgba(17,20,49,.06);
}
html[data-theme="dark"]{
  --accent:#8b73ff!important;
  --accent-rgb:139,115,255;
  --accent-soft:rgba(139,115,255,.12)!important;
  --accent-line:rgba(139,115,255,.30)!important;
  --accent-glow:rgba(139,115,255,.44);
  --accent-glow-soft:rgba(139,115,255,.18);
  --premium-shadow:0 28px 80px rgba(0,0,0,.40),0 8px 24px rgba(0,0,0,.20);
  --premium-shadow-hover:0 36px 110px rgba(0,0,0,.55),0 10px 30px rgba(0,0,0,.28);
}

/* Page atmosphere: premium depth, same hue only */
body{background:
  radial-gradient(880px 520px at 50% -110px,rgba(var(--accent-rgb),.095),transparent 66%),
  var(--bg)!important;
}
body:before{background:
  radial-gradient(680px 430px at 47% 9%,rgba(var(--accent-rgb),.09),transparent 69%)!important;
  opacity:1!important;
}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:
  radial-gradient(540px 340px at 88% 80%,rgba(var(--accent-rgb),.035),transparent 72%),
  radial-gradient(460px 300px at 5% 70%,rgba(var(--accent-rgb),.028),transparent 72%);
}

/* Header: lighter, calmer, more expensive */
.header,nav{
  min-height:76px!important;height:76px!important;
  background:color-mix(in srgb,var(--header) 90%,transparent)!important;
  border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important;
  box-shadow:0 8px 30px rgba(14,17,45,.025)!important;
  backdrop-filter:blur(22px) saturate(145%)!important;
}
html[data-theme="dark"] .header,html[data-theme="dark"] nav{box-shadow:0 10px 38px rgba(0,0,0,.13)!important}
.nav,.navlinks{gap:30px!important;font-weight:600!important;letter-spacing:-.01em}
.nav a,.navlinks a{opacity:.62!important}.nav a:hover,.navlinks a:hover{opacity:1!important;color:var(--text)!important}
.nav a:after{height:2px!important;box-shadow:0 0 12px var(--accent-glow)!important}
.actions{gap:10px!important}
.iconbtn,.theme,.theme-global,.outline{
  background:color-mix(in srgb,var(--card) 82%,transparent)!important;
  border-color:color-mix(in srgb,var(--line-strong) 86%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important;
}

/* The VIQQO mark — one color, luminous, not gradient */
.brand,.brandword{color:var(--text)!important;-webkit-text-fill-color:currentColor!important;letter-spacing:-1.15px!important}
.brandword{font-weight:840!important;text-shadow:0 0 0 transparent!important}
.q-mini,.viqqo-mark,.brandwrap>.logo{filter:drop-shadow(0 0 8px var(--accent-glow-soft)) drop-shadow(0 0 18px rgba(var(--accent-rgb),.12))!important}
.q-mini:before,.viqqo-mark:before,.brandwrap>.logo:before{
  border-color:var(--accent)!important;
  box-shadow:0 0 10px var(--accent-glow-soft),inset 0 0 7px rgba(var(--accent-rgb),.08)!important;
}
.q-mini:after,.viqqo-mark:after,.brandwrap>.logo:after{
  background:var(--accent)!important;
  box-shadow:0 0 9px var(--accent-glow)!important;
}
.brand:hover .q-mini,.brandwrap:hover>.logo{filter:drop-shadow(0 0 10px var(--accent-glow)) drop-shadow(0 0 24px rgba(var(--accent-rgb),.20))!important}

/* Homepage premium restoration */
.hero{padding-top:64px!important}
.hero .eyebrow{
  background:color-mix(in srgb,var(--card) 74%,transparent)!important;
  border-color:var(--line)!important;
  box-shadow:0 10px 30px rgba(22,25,55,.04),inset 0 1px 0 rgba(255,255,255,.30)!important;
  backdrop-filter:blur(12px)!important;
}
.hero h1{font-weight:835!important;letter-spacing:-.057em!important;line-height:.91!important;text-wrap:balance}
.hero .grad{color:var(--accent)!important;text-shadow:0 0 28px rgba(var(--accent-rgb),.10)!important}
.sub{font-size:18.5px!important;line-height:1.62!important}
.search-wrap{margin-top:3px!important}
.search-wrap:before{inset:-30px 1% -34px!important;background:radial-gradient(ellipse,rgba(var(--accent-rgb),.17),transparent 66%)!important;filter:blur(22px)!important;opacity:.80}
.search-border,.searchborder{
  padding:1px!important;
  background:rgba(var(--accent-rgb),.74)!important;
  border-radius:25px!important;
  box-shadow:0 22px 64px rgba(var(--accent-rgb),.12),0 8px 28px rgba(20,23,54,.08)!important;
}
.search{
  border-radius:24px!important;
  background:color-mix(in srgb,var(--search-bg) 94%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42)!important;
  backdrop-filter:blur(18px)!important;
}
.qbutton,.search .q{filter:drop-shadow(0 0 7px var(--accent-glow-soft))!important}
.qbutton .qshape,.search .q,.loader-q,.qmark{
  border-color:var(--accent)!important;
  box-shadow:0 0 11px rgba(var(--accent-rgb),.18),inset 0 0 7px rgba(var(--accent-rgb),.08)!important;
}
.qbutton .qshape:after,.search .q:after,.loader-q:after,.qmark:after{box-shadow:0 0 9px var(--accent-glow)!important}
.qbutton:hover{transform:scale(1.055)!important;filter:drop-shadow(0 0 12px var(--accent-glow))!important}
.loader-q{filter:drop-shadow(0 0 11px var(--accent-glow))!important}
.loaderword{letter-spacing:.12em!important;font-weight:780!important}

.intent,.chip,.pill,.tab,.comparepill{
  background:color-mix(in srgb,var(--card) 80%,transparent)!important;
  border-color:var(--line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.23)!important;
  backdrop-filter:blur(10px)!important;
}
.intent:hover,.chip:hover,.pill:hover,.tab:hover,.comparepill:hover{border-color:var(--accent-line)!important;color:var(--text)!important;transform:translateY(-1px)}
.intent.active,.chip.active,.pill.active,.tab.active{
  color:#fff!important;background:var(--accent)!important;border-color:var(--accent)!important;
  box-shadow:0 9px 24px rgba(var(--accent-rgb),.20),0 0 0 1px rgba(var(--accent-rgb),.07)!important;
}

/* Cards on every page */
.panel,.card,.box,.result,.selectCard,.tableWrap,.recommend,.mini,.tool{
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 98%,white 2%),color-mix(in srgb,var(--card) 96%,var(--bg-soft) 4%))!important;
  border:1px solid color-mix(in srgb,var(--line) 88%,transparent)!important;
  box-shadow:var(--premium-shadow)!important;
  border-radius:22px!important;
}
html[data-theme="dark"] .panel,html[data-theme="dark"] .card,html[data-theme="dark"] .box,html[data-theme="dark"] .result,html[data-theme="dark"] .selectCard,html[data-theme="dark"] .tableWrap,html[data-theme="dark"] .recommend,html[data-theme="dark"] .mini,html[data-theme="dark"] .tool{
  background:linear-gradient(180deg,rgba(17,21,35,.97),rgba(12,16,28,.98))!important;
}
.panel:hover,.card:hover,.result:hover,.selectCard:hover,.tool:hover{
  border-color:rgba(var(--accent-rgb),.24)!important;
  box-shadow:var(--premium-shadow-hover)!important;
}
.tool,.result,.selectCard{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important}
.tool:hover,.result:hover,.selectCard:hover{transform:translateY(-4px)!important}

/* Cleaner page rhythm */
.wrap,.page{padding-top:48px!important;padding-bottom:86px!important}
.pagehead{padding:58px 0 32px!important}
.pagehead h1{font-size:clamp(43px,5vw,68px)!important;font-weight:835!important;letter-spacing:-.052em!important;line-height:.95!important;text-wrap:balance}
.pagehead p{font-size:16.5px!important;line-height:1.68!important}
.crumb,.crumbs{letter-spacing:.11em!important;font-weight:700!important;color:var(--muted-2)!important}
.section{margin-top:30px!important}
.section+.section{margin-top:22px!important}

/* Results page */
.searchbox{padding:12px 0 6px!important}
.searchbox .label{font-size:11px!important;letter-spacing:.1em!important;text-transform:uppercase!important;font-weight:750!important;color:var(--muted-2)!important;margin-bottom:10px!important}
.summary{margin:24px 0 18px!important;padding:0 2px!important}.summary h1,.summary h2{letter-spacing:-.04em!important}
.layout{gap:22px!important}
.result{padding:23px!important}.rhead{gap:16px!important}.identity .logo,.tool-logo,.logo{border-radius:15px!important;box-shadow:0 12px 28px rgba(var(--accent-rgb),.16)!important;background:var(--accent)!important}
.match strong,.profileScore{color:var(--accent)!important;text-shadow:0 0 18px rgba(var(--accent-rgb),.12)!important}
.metrics{gap:10px!important}.metric{border:1px solid var(--line)!important;background:color-mix(in srgb,var(--soft) 70%,transparent)!important;border-radius:13px!important}
.result .actions{border-top:1px solid var(--line)!important;padding-top:16px!important;margin-top:18px!important}

/* Profile page */
.hero>.panel.main{padding:28px!important}.hero>.panel.side{padding:24px!important}
.profile .title,.title{letter-spacing:-.035em!important}
.badges{gap:8px!important}.badge{border-radius:999px!important;padding:7px 10px!important}
.scoreRow{border-top:1px solid var(--line)!important;padding-top:18px!important;margin-top:20px!important}
.bar{height:8px!important;border-radius:999px!important;background:var(--soft)!important;overflow:hidden}.bar i{border-radius:999px!important;box-shadow:0 0 12px rgba(var(--accent-rgb),.18)!important}
.verdictMain{position:relative;overflow:hidden}.verdictMain:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-95px;top:-100px;background:radial-gradient(circle,rgba(var(--accent-rgb),.10),transparent 68%);pointer-events:none}
.seal,.qmark{filter:drop-shadow(0 0 8px var(--accent-glow-soft))!important}

/* Compare */
.selectors{gap:14px!important}.selectCard{padding:17px!important}.recommend{padding:22px 24px!important;position:relative;overflow:hidden}.recommend:after{content:"";position:absolute;inset:auto -80px -120px auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.12),transparent 68%);pointer-events:none}
.tableWrap{margin-top:18px!important}th{font-size:11px!important;text-transform:uppercase!important;letter-spacing:.08em!important}td,th{padding:17px 18px!important}
.winner{color:var(--accent)!important;text-shadow:0 0 13px rgba(var(--accent-rgb),.12)!important}
.miniBar{height:7px!important;border-radius:999px!important;background:var(--soft)!important;overflow:hidden}.miniBar i{border-radius:999px!important;box-shadow:0 0 11px rgba(var(--accent-rgb),.18)!important}

/* Rankings / Finder / methodology */
.grid{gap:16px!important}.panel.card,.panel.box{padding:22px!important}.toprow{align-items:flex-start!important}.comparebar{padding:14px 16px!important;backdrop-filter:blur(16px)!important}
.choicegrid{gap:12px!important}.choice{border-radius:15px!important;padding:16px!important;transition:.18s!important}.choice:hover{transform:translateY(-2px)!important;border-color:var(--accent-line)!important}.choice.active{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.09)!important}
.progress{height:7px!important;border-radius:999px!important;overflow:hidden;background:var(--soft)!important}.progress i{box-shadow:0 0 12px rgba(var(--accent-rgb),.20)!important}
.callout{background:linear-gradient(90deg,rgba(var(--accent-rgb),.07),transparent 78%)!important;border-left:3px solid var(--accent)!important}

/* Buttons */
.primary,.btn.primary{
  background:var(--accent)!important;color:#fff!important;
  border-color:var(--accent)!important;
  box-shadow:0 11px 28px rgba(var(--accent-rgb),.22),inset 0 1px 0 rgba(255,255,255,.20)!important;
  font-weight:740!important;
}
.primary:hover,.btn.primary:hover{transform:translateY(-2px)!important;box-shadow:0 15px 36px rgba(var(--accent-rgb),.28),0 0 22px rgba(var(--accent-rgb),.08)!important}
.btn:not(.primary),.outline{background:color-mix(in srgb,var(--card) 88%,transparent)!important;border:1px solid var(--line-strong)!important;box-shadow:0 8px 22px rgba(20,23,53,.035)!important}
.btn:not(.primary):hover,.outline:hover{border-color:var(--accent-line)!important;box-shadow:0 10px 28px rgba(20,23,53,.055),0 0 0 4px var(--accent-soft)!important}

/* APIX score and verification should feel credible, not decorative */
.score,.verified,.trustline{border-color:var(--line)!important}.score strong{letter-spacing:-.02em!important}
.trust-icon,.shield,.stepicon{color:var(--accent)!important;background:rgba(var(--accent-rgb),.07)!important;border-color:rgba(var(--accent-rgb),.14)!important}

/* Footer */
.footer,footer{border-top-color:var(--line)!important;background:transparent!important}
.footer a:hover,footer a:hover{color:var(--accent)!important}

/* Mobile polish */
@media(max-width:850px){
  .hero{padding-top:38px!important}.hero h1{letter-spacing:-.047em!important}
  .pagehead{padding-top:40px!important}.pagehead h1{font-size:42px!important}
  .panel,.card,.box,.result,.selectCard,.tableWrap,.recommend,.tool{border-radius:19px!important}
}
@media(max-width:520px){
  .hero h1{font-size:48px!important;line-height:.95!important}.sub{font-size:16px!important}
  .search-border,.searchborder{border-radius:20px!important}.search{border-radius:19px!important}
  .wrap,.page{padding-bottom:58px!important}
}
/* v1.6.1 brand verification pass */
html[data-theme="dark"]{--accent:#7557ff!important;--accent-rgb:117,87,255!important}
.bigq .qshape{border:9px solid var(--accent)!important;filter:drop-shadow(0 0 10px var(--accent-glow-soft))!important;box-shadow:0 0 15px rgba(var(--accent-rgb),.14),inset 0 0 10px rgba(var(--accent-rgb),.08)!important}
.bigq .qshape:after{background:var(--accent)!important;box-shadow:0 0 11px var(--accent-glow)!important}
/* Pages whose legacy header only had the wordmark now get the same glowing Q */
.header>.brand:not(:has(.q-mini)){display:flex!important;align-items:center!important;gap:11px!important;color:var(--text)!important;background:none!important;-webkit-text-fill-color:currentColor!important;position:relative!important}
.header>.brand:not(:has(.q-mini))::before{content:"";width:23px;height:23px;border:4px solid var(--accent);border-radius:50%;display:block;flex:0 0 auto;box-shadow:0 0 10px var(--accent-glow-soft),inset 0 0 7px rgba(var(--accent-rgb),.08);filter:drop-shadow(0 0 8px var(--accent-glow-soft))}
.header>.brand:not(:has(.q-mini))::after{content:"";position:absolute;width:9px;height:4px;border-radius:5px;background:var(--accent);left:23px;top:42px;transform:rotate(45deg);box-shadow:0 0 9px var(--accent-glow)}
@media(max-width:850px){.header>.brand:not(:has(.q-mini))::after{top:42px}}