/* EMPR Connect — visual alignment with the EMPR Media home page.
   Palette, fixed charcoal background, typography and button design are all
   derived from /index.html. Card-specific actions retain the Pix card style. */
:root {
  --bg: var(--empr-paper);
  --panel: var(--empr-mist);
  --panel2: var(--empr-fog);
  --line: var(--empr-line);
  --white: var(--empr-char);
  --muted: var(--empr-graphite);
  --soft: var(--empr-muted);
  --accent: var(--empr-char);
  --max: 1240px;
}
html {background:#060607;scroll-padding-top:85px}
body {
  font-family:var(--empr-font);
  color:var(--empr-char);
  background:#060607 linear-gradient(180deg,#1A1A1D 0%,#0D0D0F 38%,#050506 100%) fixed;
}
/* The same subtle neutral ambient light used by the main EMPR page. */
body::before {
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 42% 38% at 48% 0%,rgba(255,255,255,.09),transparent 72%),
             radial-gradient(ellipse 36% 32% at 62% 88%,rgba(255,255,255,.05),transparent 72%),
             radial-gradient(ellipse 50% 45% at 8% 55%,rgba(255,255,255,.04),transparent 70%);
}
header,main,footer{position:relative;z-index:1}
.shell{max-width:var(--max);padding-inline:clamp(20px,4vw,48px)}
.nav{background:rgba(26,26,29,.66);border-bottom:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav-inner{min-height:76px;gap:24px}
/* Main site nav logo is exactly 38px high. */
.nav-original-logo{height:38px;width:auto}
.brand-sep{border-left-color:rgba(255,255,255,.22)}
.brand-extra{color:var(--empr-char);font-weight:700}
.brand-extra small{color:var(--empr-muted)}
.nav-links{gap:clamp(16px,2vw,30px)}
.nav-links a{color:var(--empr-graphite);font-size:14px;font-weight:500}
.nav-links a:hover{color:var(--empr-char)}
.nav-cta{min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(245,245,246,.55);border-radius:999px;
  padding:0 24px;font-size:14px;font-weight:700;color:var(--empr-char)}
.nav-cta:hover{background:var(--empr-char);border-color:var(--empr-char);color:var(--empr-paper)}
.hero{border-bottom-color:var(--empr-line)}
.hero:before{background:radial-gradient(ellipse 60% 68% at 80% 36%,rgba(255,255,255,.065),transparent 75%),
  linear-gradient(145deg,rgba(26,26,29,.20),rgba(11,11,13,.40) 74%,rgba(5,5,6,.58))}
.hero:after{border-color:rgba(255,255,255,.045)}
.eyebrow{color:var(--empr-graphite)}
.eyebrow .dash{background:var(--empr-muted)}
.hero h1{color:var(--empr-char)}
.hero h1 .quiet{color:var(--empr-muted)}
.hero p{color:var(--empr-graphite)}
.btn{border-radius:999px;font-size:15px;font-weight:700;min-height:54px;padding:0 24px;gap:10px}
.btn-white{background:var(--empr-char);color:var(--empr-paper);border:1px solid var(--empr-char)}
.btn-white:hover{background:#D6D6DA;border-color:#D6D6DA}
.btn-outline{color:var(--empr-char);border:1px solid rgba(245,245,246,.66)}
.btn-outline:hover{background:var(--empr-char);border-color:var(--empr-char);color:var(--empr-paper)}
.hero-foot{color:var(--empr-muted)}
.device-wrap:before{border-color:rgba(255,255,255,.045)}
.float-tag{background:#19191D;border-color:rgba(255,255,255,.17);color:var(--empr-graphite)}
.float-tag svg{stroke:var(--empr-char)}
.browser{background:#202024;border-color:rgba(255,255,255,.22);box-shadow:0 38px 110px rgba(0,0,0,.65),0 0 50px rgba(255,255,255,.025)}
.browser-dots b{background:#77777E}
.address{background:#111113;border-color:var(--empr-line);color:var(--empr-graphite)}
/* The white example card is a product preview, not a dark-site UI panel. */
.card-head{background:var(--empr-mist)}
.card-kicker,.card-role{color:#77777E}
.card-action,.card-subactions a:not(.disabled-link){background:#171719;border-color:#171719}
.card-subactions a{border-color:#DADADF}
.card-qr{border-color:#E5E5E9}
.qr-label{color:#8F8F95}
.kicker{color:var(--empr-muted)}
.feature{background:linear-gradient(140deg,#19191D,#111113);border-color:var(--empr-line)}
.feature-icon{border-color:rgba(255,255,255,.22)}
.feature-icon svg{stroke:var(--empr-char)}
.feature p{color:var(--empr-graphite)}
.how{background:rgba(20,20,23,.52);border-block-color:var(--empr-line)}
.how-lead,.step p{color:var(--empr-graphite)}
.steps,.step{border-color:var(--empr-line)}
.step-num{color:var(--empr-muted)}
.cta-section{background:radial-gradient(ellipse 60% 110% at 78% 100%,rgba(255,255,255,.07),transparent 72%),transparent}
.cta-panel{background:linear-gradient(135deg,#1C1C20,#101013);border-color:var(--empr-line)}
.cta-panel p,.faq p{color:var(--empr-graphite)}
.faq{border-color:var(--empr-line)}
.footer{background:rgba(11,11,13,.68);border-top-color:var(--empr-line)}
.footer .footer-brand small,.footer-links a{color:var(--empr-graphite)}
.copyright{color:var(--empr-muted)}
@media(max-width:950px){.nav-links a{font-size:12px}}
@media(max-width:680px){
  .nav-inner{min-height:76px}
  .nav-original-logo{height:38px}
  .nav-cta{min-height:44px;padding-inline:16px;font-size:12px}
  .hero-inner{padding-block:76px 72px}
}
@media(max-width:400px){.btn{font-size:13px;min-height:50px;padding-inline:18px}}