:root{
  --bg:#0b1020;
  --panel:#111936;
  --muted:#94a3b8;
  --text:#e6e9f5;
  --accent:#60a5fa;
  --accent-2:#22d3ee;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(30,41,59,.55) 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{
  top:0;backdrop-filter:saturate(120%) blur(10px);
  background:rgba(11,16,32,.6);border-bottom:1px solid rgba(255,255,255,.06);z-index:50
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text)}
.brand img{width:36px;height:36px}
.brand .name{font-weight:800;letter-spacing:.6px}
.brand .pulse-dot{
  width:8px;height:8px;border-radius:999px;
  background: radial-gradient(circle at 50% 50%, #22d3ee 0%, #22d3ee 45%, rgba(34,211,238,.5) 65%, rgba(34,211,238,0) 75%);
  box-shadow: 0 0 10px rgba(34,211,238,.6), 0 0 18px rgba(165,180,252,.35);
  animation: qrfPulse 2.6s ease-in-out infinite;
}
@keyframes qrfPulse{
  0%{ transform:scale(.9); opacity:.7 }
  50%{ transform:scale(1.1); opacity:1 }
  100%{ transform:scale(.9); opacity:.7 }
}
.brand .name.breathe{
  animation: qrfBreathe 3.6s ease-in-out infinite;
}
@keyframes qrfBreathe{
  0%{ text-shadow: 0 0 0 rgba(34,211,238,0); color: var(--text) }
  50%{ text-shadow: 0 0 16px rgba(34,211,238,.24); color: #f3f6ff }
  100%{ text-shadow: 0 0 0 rgba(34,211,238,0); color: var(--text) }
}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg, rgba(96,165,250,.22), rgba(34,211,238,.22));color:var(--text);border:1px solid rgba(255,255,255,.14);padding:10px 14px;border-radius:12px;font-weight:700;text-decoration:none;box-shadow:none;}
.cta-btn:hover{transform:translateY(-1px);background:linear-gradient(135deg, rgba(96,165,250,.30), rgba(34,211,238,.28));border-color:rgba(255,255,255,.22);}
.hero{padding:72px 0 24px}
.fx-gradient{
  position: relative;
  background: linear-gradient(90deg,#eaf2ff,#a5b4fc,#38bdf8,#eaf2ff);
  -webkit-background-clip:text;background-clip:text;color: transparent;
  background-size: 320% 100%;
  animation: qrfShift 7s ease-in-out infinite;
  text-shadow: 0 2px 18px rgba(56,189,248,.16);
}

@keyframes qrfShift{
  0%{ background-position: 0% 50% }
  50%{ background-position: 100% 50% }
  100%{ background-position: 0% 50% }
}
@keyframes qrfBar{
  0%{ transform:translateX(0) }
  50%{ transform:translateX(20px) }
  100%{ transform:translateX(0) }
}
Npx;font-weight:900}
.hero p{font-size:clamp(16px, 1.2vw, 19px);color:var(--muted);max-width:720px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 28px}
.badge{
  border:1px solid rgba(255,255,255,.12);
  color:#e2e8f0;background:rgba(255,255,255,.04);
  padding:6px 10px;border-radius:999px;font-size:13px
}
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(12,1fr);margin:28px 0 50px}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;min-height:120px
}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}
.span-8{grid-column:span 8}
.span-12{grid-column:span 12}
@media (max-width:900px){.span-4,.span-6,.span-8{grid-column:span 12}}
.section{padding:38px 0;border-top:1px solid rgba(255,255,255,.06)}
.section h2{margin:0 0 16px;font-size:26px}
.list{display:grid;gap:10px}
.item{display:flex;gap:12px;align-items:flex-start}
.item .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);margin-top:10px}
.kpi{display:flex;gap:12px;align-items:center;margin:10px 0 0;color:#d1fae5}
.kpi b{font-size:22px}
.docs a{
  display:inline-flex;align-items:center;gap:10px;padding:10px 12px;margin:6px 8px 0 0;
  border-radius:10px;border:1px solid rgba(255,255,255,.12);color:var(--text);text-decoration:none
}
.docs a:hover{border-color:var(--accent-2)}
.footer{padding:28px 0 60px;color:var(--muted);text-align:center}
.small{font-size:12px;color:var(--muted)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:13px;background:rgba(2,6,23,.6);padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.08)}

/* Table styling for Key Metrics */
.table{width:100%;border-collapse:collapse;margin-top:6px}
.table th,.table td{padding:10px 12px;border:1px solid rgba(255,255,255,.12)}
.table th{background:rgba(255,255,255,.06);text-align:left}
.table tr:nth-child(even){background:rgba(255,255,255,.03)}

/* v13: restore subtle underline for hero title */
.fx-gradient::after{content:none;display:none;}

.highlight{
  color:#f3f6ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(243,246,255,.5);
}

.highlight:hover{color:var(--accent-2); text-decoration-color: currentColor}

/* Navbar buttons — ghost style (v20) */
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  padding:10px 14px;border-radius:12px;
  font-weight:700;text-decoration:none;
  box-shadow:none;
  transition:background .2s ease,border-color .2s ease;
}
.cta-btn:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.nav nav .cta-btn{margin-left:8px}
#documents,#contact{scroll-margin-top:90px}

/* Responsive navbar: desktop fixed, mobile sticky */
.header{ position: fixed; top:0; left:0; right:0; z-index:1000; }
body{ padding-top:72px; }
#documents,#contact{ scroll-margin-top: 90px; }

@media (max-width:640px){
  .header{ position: sticky; }
  body{ padding-top:0; }
  #documents,#contact{ scroll-margin-top: 70px; }
}

/* --- Mobile navbar layout: 3 lines (brand, then Overview, then Contact) --- */
@media (max-width:640px){
  .header .container{ padding-left:16px; padding-right:16px; }
  .nav{ display:grid; grid-template-columns: 1fr; row-gap:8px; align-items:start; padding-top:10px; padding-bottom:10px; }
  .brand{ padding-left:4px; gap:8px; }
  .brand img{ width:28px; height:28px; }
  .brand .name{ font-size:14px; line-height:1.2; }
  .nav > nav{ display:grid; grid-template-columns:1fr; row-gap:8px; justify-items:start; }
  .nav > nav .cta-btn{ width:auto; padding:8px 12px; }
}

/* --- Mobile hamburger menu --- */
.menu-toggle{
  display:none; background:transparent; border:none; padding:8px; margin-right:8px;
  border-radius:10px;
}
.menu-toggle .bar{
  display:block; width:22px; height:2px; background:var(--text); margin:5px 0; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}

/* Desktop: show inline buttons; hide toggle */
@media (min-width:641px){
  .menu-toggle{ display:none; }
}

/* Mobile: show toggle, hide links by default */
@media (max-width:640px){
  .menu-toggle{ display:inline-block; }
  .nav{ grid-template-columns: auto 1fr; align-items:center; row-gap:0; }
  .nav-links{ display:none; position:absolute; right:12px; top:56px; z-index:1200;
              background:rgba(11,16,32,.95); border:1px solid rgba(255,255,255,.12);
              border-radius:12px; padding:8px; box-shadow:0 10px 24px rgba(0,0,0,.35); }
  .nav-links .cta-btn{ display:block; width:100%; margin:6px 0; text-align:left; }
  .header.open .nav-links{ display:block; }
  .header.open .menu-toggle .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .header.open .menu-toggle .bar:nth-child(2){ opacity:0; }
  .header.open .menu-toggle .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .header .container{ padding-left:14px; padding-right:14px; }
  .brand img{ width:26px; height:26px; }
  .brand .name{ font-size:14px; }
}


/* --- v27 hamburger visibility fixes --- */
/* Desktop: show links inline, hide hamburger */
@media (min-width:641px){
  .menu-toggle{ display:none !important; }
  .nav-links{ display:flex !important; gap:8px; position:static !important; background:transparent !important;
              border:none !important; box-shadow:none !important; padding:0 !important; }
  .nav-links .cta-btn{ display:inline-flex !important; width:auto !important; }
}

/* Mobile: hide links by default; show only when header has .open */
@media (max-width:640px){
  .menu-toggle{ display:inline-block !important; }
  .nav-links{ display:none !important; position:absolute; right:12px; top:56px; z-index:1200;
              background:rgba(11,16,32,.95); border:1px solid rgba(255,255,255,.12);
              border-radius:12px; padding:8px; box-shadow:0 10px 24px rgba(0,0,0,.35); }
  .nav-links .cta-btn{ display:block; width:100%; margin:6px 0; text-align:left; }
  .header.open .nav-links{ display:block !important; }
}

/* v28: tighter spacing on mobile */
@media (max-width:640px){
  .nav{ padding-top:6px; padding-bottom:6px; }
  .hero{ padding-top:12px; padding-bottom:18px; }
  .nav-links{ top:52px; } /* keep dropdown aligned to slightly shorter header */
}