@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap");

/* =========================
   LIGHT THEME (DEFAULT)
   ========================= */
:root{
  --bg:#f8fafc;
  --panel:#ffffff;
  --panel-soft:#f1f5f9;

  --brand-1:#0b67b3;
  --brand-2:#3b82f6;
  --brand-glow:#38bdf8;

  --text:#0f172a;
  --muted:#475569;

  --radius:16px;
  --container:1180px;

  --card-shadow:
    0 0 0 1px rgba(0,0,0,.05),
    0 10px 30px rgba(0,0,0,.08);

  --transition:.28s cubic-bezier(.4,0,.2,1);

  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto;
  color-scheme:light;
}

/* =========================
   DARK THEME
   ========================= */
:root.dark{
  --bg:#05080f;
  --panel:#0b1020;
  --panel-soft:#0f172a;

  --brand-1:#00b3ff;
  --brand-2:#3b82f6;
  --brand-glow:#38bdf8;

  --text:#e5edff;
  --muted:#9aa7bf;

  --card-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 10px 40px rgba(0,0,0,.6);

  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:
    radial-gradient(900px 400px at 85% -10%,rgba(0,179,255,.08),transparent),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* container */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 22px;
}

/* header */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom:1px solid rgba(0,0,0,.08);
}

:root.dark .site-header{
  border-bottom:1px solid rgba(255,255,255,.05);
}

.header-inner{
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* brand */
.brand{display:flex;align-items:center;gap:14px}
.logo{
  border-radius:14px;
  box-shadow:0 0 24px rgba(0,179,255,.35);
}
.company-name{
  margin:0;
  font-size:17px;
  font-weight:800;
}
.company-meta{
  font-size:12px;
  color:var(--muted);
}

/* nav */
.primary-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:22px;
}
.primary-nav a{
  color:var(--text);
  font-weight:600;
  padding:10px 8px;
  border-radius:10px;
  transition:var(--transition);
}
.primary-nav a:hover{
  color:var(--brand-1);
}

/* buttons */
.btn{
  padding:11px 18px;
  border-radius:14px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  transition:var(--transition);
}

.btn-primary{
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  color:#ffffff;
}

.btn-ghost{
  background:transparent;
  border:1px solid rgba(0,0,0,.15);
  color:var(--text);
}

:root.dark .btn-ghost{
  border-color:rgba(255,255,255,.15);
}

/* cards */
.card{
  background:var(--panel);
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  transition:var(--transition);
}

/* stats */
.stats{
  list-style:none;
  padding:0;
  display:flex;
  gap:18px;
  margin-top:24px;
}
.stats li{
  background:var(--panel-soft);
  padding:14px;
  border-radius:12px;
  text-align:center;
  min-width:96px;
}
.stat-value{
  font-size:22px;
  font-weight:800;
  color:var(--brand-1);
}
.stat-label{
  font-size:12px;
  color:var(--muted);
}

/* footer */
footer{
  background:var(--panel);
  border-top:1px solid rgba(0,0,0,.1);
  padding:46px 0;
}

:root.dark footer{
  border-top:1px solid rgba(255,255,255,.05);
}

/* utilities */
strong{font-weight:800}
.muted{color:var(--muted)}
.small{font-size:13px}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}