:root{
  --bg: #232D33;
  --text: #ffffff;
  --muted: rgba(255,255,255,.78);
  --line: rgba(255,255,255,.14);

  --panel: rgba(255,255,255,.05);
  --panel2: rgba(255,255,255,.06);

  --radius: 18px;
  --shadow: 0 20px 60px rgba(0,0,0,.35);

  --max: 1120px;
  --pad: 20px;
}

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

body{
  margin:0;
  font-family: "Libre Baskerville", serif;
  color:var(--text);
  background: var(--bg);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Fixed header offset */
  padding-top: 104px; /* desktop */
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: var(--pad); top: var(--pad);
  width:auto; height:auto; padding:10px 12px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--line);
  border-radius:12px;
  z-index:9999;
}

/* =========================
   Header (Fixed, always visible)
========================= */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  backdrop-filter: blur(10px);
  background: rgba(35,45,51,.92);
  border-bottom:1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:14px;
}

/* Brand container */
.brand{
  display:flex;
  align-items:center;
}

/* Header logo images (JPG banners) */
.brand-logo{
  height: 86px;          /* larger desktop logo */
  width: auto;
  max-width: 620px;      /* allows wider banner */
  display:block;
  object-fit: contain;
}

/* Desktop nav */
.nav-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-links a{
  font-size:14px;
  color:var(--muted);
  padding:10px 10px;
  border-radius:12px;
  min-height: 44px;
  display:inline-flex;
  align-items:center;
}

.nav-links a:hover{
  background: rgba(255,255,255,.06);
  color:var(--text);
}

/* Mobile menu button (hidden on desktop) */
.menu-btn{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.menu-btn:active{ transform: scale(0.98); }

.menu-bars{
  width:18px;
  height:2px;
  background: rgba(255,255,255,.86);
  position: relative;
  display:block;
  border-radius: 2px;
}
.menu-bars::before,
.menu-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background: rgba(255,255,255,.86);
  border-radius: 2px;
}
.menu-bars::before{ top:-6px; }
.menu-bars::after{ top:6px; }

/* Mobile menu drawer */
.mobile-menu{
  border-bottom:1px solid var(--line);
  background: rgba(35,45,51,.95);
}
.mobile-menu-inner{
  padding: 10px 0 14px;
  display:grid;
  gap:10px;
}
.mobile-link{
  padding:12px 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius:14px;
  color: var(--text);
  font-weight:700;
  min-height: 44px;
  display:flex;
  align-items:center;
}

/* =========================
   Hero
========================= */
.hero{
  padding:50px 0 24px;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .9fr;
  gap:28px;
  align-items:stretch;
}

h1{
  margin:0 0 10px;
  font-size: clamp(32px, 4.8vw, 54px);
  letter-spacing:-0.6px;
  line-height:1.08;
}

.lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size:18px;
}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 18px 0 18px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:700;
  min-height: 44px;
}

.btn.primary{
  background: rgba(255,255,255,.92);
  color: #232D33;
  border-color: transparent;
}

.btn.ghost{
  background: transparent;
}

.trust{
  list-style:none;
  padding:0;
  margin: 14px 0 0;
  display:grid;
  gap:8px;
  color:var(--muted);
}

.hero-card{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: var(--panel2);
  box-shadow: var(--shadow);
}

.hero-card-inner{
  padding:18px;
}

.kicker{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.bullets{
  margin:0;
  padding-left:18px;
  color:var(--text);
}

.note{
  color:var(--muted);
  margin:12px 0 0;
}

/* =========================
   Sections
========================= */
.section{
  padding:40px 0;
}

.section.alt{
  background: rgba(255,255,255,.03);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section-head h2{
  margin:0 0 6px;
  font-size:28px;
  letter-spacing:-0.3px;
}

.section-head p{
  margin:0;
  color:var(--muted);
}

.cards{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.card{
  padding:18px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}

.card h3{margin:0 0 8px}
.card p{margin:0 0 14px; color:var(--muted)}
.mini{margin:12px 0 0; color:var(--muted); font-size:13px}

.split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:start;
}

.checkgrid{
  margin:16px 0 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.check{
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--muted);
}

.panel{
  padding:18px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
}

.social-row{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.social{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color:var(--text);
  font-weight:700;
  min-height: 44px;
  display:inline-flex;
  align-items:center;
}

/* =========================
   Footer
========================= */
.site-footer{
  padding:28px 0 36px;
  border-top:1px solid var(--line);
  background: rgba(0,0,0,.10);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:14px;
  align-items:center;
}

.brand-footer{
  font-weight:700;
  letter-spacing:-0.2px;
}

.footer-links{
  display:flex;
  gap:14px;
  color:var(--muted);
}

.footer-right{
  justify-self:end;
  text-align:right;
}

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  .cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}

  body{ padding-top: 86px; } /* tablet / hamburger header height */
}

/* Switch to hamburger early to protect spacing */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .menu-btn{ display:flex; }

  .brand-logo{
    height: 58px;
    max-width: 320px;
  }
}

@media (max-width: 700px){
  .container{ padding: 0 16px; }

  body{ padding-top: 82px; } /* mobile header height */

  .brand-logo{
    height: 56px;
    max-width: 300px;
  }

  .hero{ padding: 42px 0 18px; }
  .section{ padding: 34px 0; }
  .lead{ font-size: 17px; }

  .footer-grid{grid-template-columns:1fr; text-align:center}
  .footer-links{justify-content:center}
  .footer-right{justify-self:center; text-align:center}
}

@media (max-width: 520px){
  h1{ font-size: 34px; }
  .btn{ width: 100%; }
  .cta-row{ gap:10px; }
}