/* about.css - Uses same header style as index; standalone file for About page */
:root{
  --blue1:#007bff; --blue2:#00c6ff; --bg:#f7f9fc; --card:#fff;
  --muted:#596572; --radius:14px; --shadow:0 10px 30px rgba(15,23,42,0.06);
  --header-h:72px; --content-max:980px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,Arial;
  background:linear-gradient(180deg,#f8fbff 0%, #eef7ff 100%);
  color:#111;
  -webkit-font-smoothing:antialiased;
}

/* Fixed header (same across pages) */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:linear-gradient(90deg,var(--blue1),var(--blue2));
  display:flex;
  align-items:center;
  box-shadow:var(--shadow);
  z-index:999;
}
.nav-wrap{max-width:1200px;margin:0 auto;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700}
.brand .brand-text{color:#fff}
.main-nav{display:flex;gap:14px}
.main-nav a{color:#fff;text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}
.main-nav a.active, .main-nav a:hover{background:rgba(255,255,255,0.08)}

/* mobile toggle */
.mobile-toggle{display:none;background:transparent;border:none;color:#fff;font-size:20px}

/* page spacing to avoid header overlap */
.page{padding-top:calc(var(--header-h) + 28px);}

/* Card layout */
.page-card{max-width:var(--content-max);margin:28px auto;background:var(--card);padding:34px;border-radius:var(--radius);box-shadow:var(--shadow)}
.page-card h1{font-size:28px;color:var(--blue1);margin:0 0 12px}
.lead{color:var(--muted);margin-bottom:16px}
.page-card h2{color:var(--blue1);margin-top:20px}
.page-card p, .page-card ul{color:var(--muted);line-height:1.7;font-size:15px}
.page-card ul{margin-left:18px}

/* footer */
.site-footer{margin-top:32px;padding:22px 0;background:transparent;text-align:center;color:#6b7280}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 18px;display:flex;justify-content:space-between;align-items:center}

/* responsive */
@media (max-width:820px){
  .main-nav{display:none}
  .mobile-toggle{display:block}
  .page-card{margin:16px;padding:20px}
}


/* ========== Mobile menu & hamburger (consolidated) ========== */

/* hamburger bars */
.hamburger{display:inline-block;width:26px;height:18px;position:relative}
.bar{ display:block; position:absolute; left:0; width:100%; height:3px; border-radius:3px; background:#fff; transform-origin:center; transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease, top .18s ease}
.bar-1{ top:0 } .bar-2{ top:7.5px } .bar-3{ top:15px }

/* animate to X when open */
body.nav-open .bar-1{ transform: translateY(7.5px) rotate(45deg); top:7.5px }
body.nav-open .bar-2{ opacity:0; transform: scaleX(0) }
body.nav-open .bar-3{ transform: translateY(-7.5px) rotate(-45deg); top:7.5px }

/* mobile menu container */
.mobile-menu{ position:fixed; inset:0; display:none; z-index:9990; pointer-events:none }
/* backdrop below panel */
.mobile-menu-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.45); z-index:9991; opacity:0; transition:opacity .28s ease }
/* panel slides in from right */
.mobile-menu-panel{ position:absolute; top:0; right:0; width:min(92%,360px); height:100%; background:linear-gradient(180deg,#fff,#f5fbff); box-shadow:-20px 0 40px rgba(10,20,40,.15); transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.9,.2,1); padding:28px 18px; display:flex; flex-direction:column; gap:18px; z-index:9992; pointer-events:auto; border-radius:8px 0 0 8px }

/* nav list inside panel */
.mobile-menu-nav{ display:flex; flex-direction:column; gap:12px; margin-top:8px }
.mobile-menu-nav a{ color:#0b1722; text-decoration:none; font-weight:700; padding:12px 10px; border-radius:8px }
.mobile-menu-nav a:hover{ background:rgba(0,123,255,0.06); color:var(--blue1) }

/* show when open */
body.nav-open .mobile-menu{ display:block; pointer-events:auto }
body.nav-open .mobile-menu-backdrop{ opacity:1 }
body.nav-open .mobile-menu-panel{ transform:translateX(0) }

/* close button in panel */
.btn-ghost{ background:transparent; border:1px solid rgba(0,0,0,0.06); padding:10px 14px; border-radius:10px; cursor:pointer; align-self:center }
#mobileClose{ position:absolute; top:16px; right:18px; font-size:22px; background:none; border:none; color:var(--blue1); cursor:pointer; z-index:9994; }

/* ensure no accidental full-screen .mobile-nav interfering */
.mobile-nav{ display:none !important }

/* small screens tweak */
@media(max-width:420px){ .mobile-menu-panel{ width:92vw } }

/* Ensure navbar becomes responsive at <=611px */
@media (max-width: 611px) {
  .main-nav { display: none !important; }
  .mobile-toggle { display: flex; }
  .nav-wrap { gap: 8px; }
  .logo { font-size: 20px; }
  .logo svg { width: 40px; height: 40px; }
  .logo .brand-text { font-size: 20px; font-weight:700 }
  .mobile-panel-head svg { width:40px;height:40px }
  .mobile-panel-head strong { font-size:20px }
}