:root{
	--font-main: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --bg1:#f6fbff;
  --bg2:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --card:rgba(255,255,255,.88);
  --border:rgba(17,24,39,.10);
  --shadow:0 18px 60px rgba(17,24,39,.12);
  --radius:20px;
}

body{
  font-family:var(--font-main);
  color:var(--text);
  background: radial-gradient(900px 500px at 20% 10%, #c9f0ff 0%, transparent 60%),
              radial-gradient(900px 500px at 85% 20%, #ffe9b6 0%, transparent 60%),
              linear-gradient(180deg,var(--bg1),var(--bg2));
  min-height:100vh;
}

a{color:inherit}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 14px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:52px;width:auto;display:block}
.brandName{font-weight:700;font-size:18px;line-height:1}
.brandTag{font-size:12px;color:var(--muted);margin-top:4px}

.links{display:flex;gap:14px;flex-wrap:wrap}
.links a{font-size:14px;text-decoration:none;color:var(--muted)}
.links a:hover{color:var(--text)}

.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  margin-top:18px;
}
.heroCard{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:28px;
  backdrop-filter: blur(8px);
}
h1{margin:0;font-size:38px;line-height:1.15}
.sub{margin:12px 0 0;color:var(--muted);font-size:16px;max-width:560px}
.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{
  padding:12px 16px;border-radius:14px;background:#111827;color:#fff;
  text-decoration:none;font-weight:600;font-size:14px;display:inline-block;
}
.btn.outline{background:transparent;color:#111827;border:1px solid #111827}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.chip{
  font-size:12px;color:#111827;background:rgba(17,24,39,.06);
  border:1px solid rgba(17,24,39,.08);
  padding:8px 10px;border-radius:999px;
}

.heroSide{display:flex;flex-direction:column;gap:14px}
.infoCard{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:18px;
  backdrop-filter: blur(8px);
}
h2{margin:0 0 8px;font-size:16px}
.muted{margin:0 0 14px;color:var(--muted);font-size:13px}
.kv{display:grid;grid-template-columns: 90px 1fr;gap:10px;margin:10px 0}
.k{color:var(--muted);font-size:13px}
.v{font-size:13px}
.v a{text-decoration:none}
.v a:hover{text-decoration:underline}

.social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.socialBtn{
  text-decoration:none;border:1px solid rgba(17,24,39,.12);
  border-radius:14px;padding:10px 12px;font-weight:600;font-size:13px;
  background:rgba(255,255,255,.9);
}
.socialBtn:hover{border-color:rgba(17,24,39,.35)}


.page{margin-top:18px}
.pageCard{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:26px;
  backdrop-filter: blur(8px);
}

.lead{margin:10px 0 0;color:var(--muted);font-size:15px;max-width:760px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.infoBox{
  border:1px solid rgba(17,24,39,.10);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,.9);
}
.infoBox h2{margin:0 0 8px;font-size:15px}
.list{margin:0;padding-left:18px;color:var(--text);font-size:14px}
.list li{margin:6px 0}
.note{
  margin-top:16px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(17,24,39,.06);
  border:1px solid rgba(17,24,39,.08);
  font-size:13px;
  color:var(--text);
}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

@media (max-width: 900px){
  .grid2{grid-template-columns:1fr}
}


@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  h1{font-size:32px}
  .social{grid-template-columns:1fr}
}

.wrap{max-width:1100px;margin:0 auto;padding:18px 26px 26px}

.brandLink{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}

.footer{padding:18px 26px;color:var(--muted);font-size:13px}
.footerInner{
  max-width:1100px;margin:0 auto;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.footerHandle{opacity:.9}

/* =========================
   2-Row Header (Topbar + Navbar)
========================= */

.jj-header{ z-index: 1030; }

/* Top thin info bar */
.jj-topbar{
  background: #f8fafc; /* very light */
  border-bottom: 1px solid rgba(17,24,39,.08);
}

.jj-top-text{
  font-size: 12px;
  color: rgba(17,24,39,.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68vw;
}

.jj-top-link{
  font-size: 12px;
  color: rgba(17,24,39,.72);
  text-decoration: none;
}
.jj-top-link:hover{ color: rgba(17,24,39,1); text-decoration: underline; }

.jj-sep{
  width: 1px;
  height: 12px;
  background: rgba(17,24,39,.18);
}

.jj-badge{
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(17,24,39,.06);
  border: 1px solid rgba(17,24,39,.10);
  color: rgba(17,24,39,.85);
}

/* Main navbar row */
.jj-navbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(17,24,39,.08);
}

.jj-logo{ height: 44px; width:auto; display:block; }

.jj-brand{ color:#111827; font-size:16px; letter-spacing:.2px; }
.jj-tagline{ color: rgba(17,24,39,.60); font-size: 12px; margin-top: 3px; }

/* Links */
.jj-navbar .nav-link{
  color: rgba(17,24,39,.78);
  font-weight: 600;
  padding: .45rem .75rem;
  border-radius: 999px;
}
.jj-navbar .nav-link:hover{
  color: rgba(17,24,39,1);
  background: rgba(17,24,39,.06);
}
.jj-navbar .nav-link.active{
  color: #111827;
  background: rgba(17,24,39,.10);
}

/* CTA */
.jj-cta{
  border-radius: 999px;
  padding: .45rem .90rem;
  font-weight: 700;
  border: 1px solid rgba(17,24,39,.14);
  background: #111827;
  color: #fff;
}
.jj-cta:hover{
  background: #0b1220;
  color: #fff;
}

/* Toggler */
.jj-toggler{
  border: 1px solid rgba(17,24,39,.18) !important;
}


@media (max-width: 576px){
  .jj-top-right a:nth-child(n+4){ display:none; } /* hides socials only */
}