/* ════════════════════════════════════════════════════════
   MOBILEPRO — DESIGN SYSTEM
   Navy + Gold, consistent with product dashboard
════════════════════════════════════════════════════════ */
/* ── MAZZARD H — same font used by eloqwnt.com ── */
@import url('https://db.onlinewebfonts.com/c/eb5b5ee332420add9a40ee988cb6ac37?family=MazzardH-Regular');

@font-face {
  font-family: 'MazzardH';
  src: url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff') format('woff'),
       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* IBM Plex Mono still used for code/IMEI displays */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --navy:#0a1628; --navy2:#0f2040; --blue:#1a3a6e;
  --gold:#F5A623; --gold2:#ffbe4d;
  --surface:#111e35; --surface2:#162540;
  --green:#00c853; --red:#ff3d57; --amber:#ffab00;
  --text:#dce4f0; --gray:#8a96a8;
  --border:rgba(255,255,255,0.08);
  --cream:#f8f9fc; --ink:#0a1628;
  --r:10px; --r-lg:18px;
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'MazzardH','Times New Roman',sans-serif;
  background:var(--navy);
  color:var(--text);
  line-height:1.65;
  font-size:15px;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--gold);color:var(--navy);}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--navy);}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:4px;}

/* ── FOCUS STATES (accessibility) ── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}

/* ── CONTAINER ── */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media (max-width:768px){ .wrap{padding:0 20px;} }

/* ── TYPOGRAPHY ── */
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; display:block; width:24px; height:1px; background:var(--gold); opacity:.6;}

h1,h2,h3,h4{font-family:'MazzardH','Times New Roman',sans-serif; font-weight:800; color:#fff; letter-spacing:-0.5px;}
h1{font-size:56px; line-height:1.08;}
h2{font-size:38px; line-height:1.15;}
h3{font-size:22px; line-height:1.3;}
h4{font-size:16px; line-height:1.4;}
p{color:var(--gray); font-size:15px; line-height:1.75;}

.lead{font-size:18px; color:rgba(255,255,255,.6); font-weight:300; line-height:1.6;}

@media (max-width:768px){
  h1{font-size:38px;}
  h2{font-size:28px;}
}

/* ── NAV ── */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(10,22,40,0.7);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border);
  transition: background .3s, border-color .3s;
}
.site-nav.scrolled{ background:rgba(10,22,40,0.92); }
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 32px;
  height:68px; display:flex; align-items:center; gap:8px;
}
.nav-logo{
  font-family:'MazzardH','Times New Roman',sans-serif; font-weight:800; font-size:19px; color:#fff;
  letter-spacing:.5px; margin-right:auto;
}
.nav-logo span{color:var(--gold);}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-link{
  font-size:13.5px; font-weight:500; color:var(--gray);
  padding:9px 16px; border-radius:8px; transition:all .18s;
}
.nav-link:hover{color:#fff; background:rgba(255,255,255,.05);}
.nav-link.active{color:var(--gold);}
.nav-cta{
  font-size:13px; font-weight:600; color:var(--navy);
  background:var(--gold); padding:10px 22px; border-radius:8px;
  margin-left:8px; transition:background .18s, transform .18s;
  border:none; cursor:pointer; font-family:'MazzardH','Times New Roman',sans-serif;
}
.nav-cta:hover{background:var(--gold2); transform:translateY(-1px);}

.nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px;}
.nav-toggle span{display:block; width:22px; height:2px; background:#fff; border-radius:1px;}

@media (max-width:860px){
  .nav-links{
    position:fixed; top:68px; left:0; right:0; bottom:0;
    background:var(--navy); flex-direction:column; align-items:stretch;
    padding:24px; gap:4px; transform:translateX(100%);
    transition:transform .3s ease; border-top:1px solid var(--border);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-link{padding:14px 16px; font-size:15px;}
  .nav-cta{margin-left:0; margin-top:10px; text-align:center; padding:14px;}
  .nav-toggle{display:flex;}
}

/* ── BUTTONS ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'MazzardH','Times New Roman',sans-serif; font-size:14px; font-weight:600;
  padding:14px 28px; border-radius:9px; border:none; cursor:pointer;
  transition:all .2s; white-space:nowrap;
}
.btn-primary{background:var(--gold); color:var(--navy);}
.btn-primary:hover{background:var(--gold2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,166,35,.25);}
.btn-outline{background:transparent; color:#fff; border:1px solid var(--border);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold);}
.btn-lg{padding:17px 36px; font-size:15px;}
.btn-block{width:100%;}

/* ── SECTION SPACING ── */
.section{padding:100px 0;}
.section-sm{padding:64px 0;}
@media (max-width:768px){
  .section{padding:64px 0;}
  .section-sm{padding:44px 0;}
}

/* ── CARDS ── */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:32px;
}

/* ── BADGE ── */
.badge{
  display:inline-block; padding:4px 12px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
.badge-gold{background:rgba(245,166,35,.12); color:var(--gold);}
.badge-green{background:rgba(0,200,83,.12); color:var(--green);}

/* ── FOOTER ── */
.site-footer{
  border-top:1px solid var(--border); padding:56px 0 32px;
  background:var(--navy2);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px;
  margin-bottom:48px;
}
.footer-brand{font-family:'MazzardH','Times New Roman',sans-serif; font-weight:800; font-size:18px; color:#fff; margin-bottom:12px;}
.footer-brand span{color:var(--gold);}
.footer-desc{font-size:13px; color:var(--gray); max-width:280px; line-height:1.7;}
.footer-col h4{
  font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gray); margin-bottom:16px;
}
.footer-col a{
  display:block; font-size:13.5px; color:rgba(255,255,255,.65);
  margin-bottom:10px; transition:color .15s;
}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; border-top:1px solid var(--border);
  font-size:12px; color:var(--gray); flex-wrap:wrap; gap:12px;
}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .footer-grid > div:first-child{grid-column:1/-1;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ── ANIMATIONS ── */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none;}
}

/* ── DECORATIVE GLOW ── */
.glow{
  position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0;
}