
:root{--navy:#0B1E3B;--cobalt:#1E3A8A;--gray:#64748B;--gray2:#E2E8F0}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:#0b1220;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--cobalt);text-decoration:none} a:hover{text-decoration:underline}
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--gray2)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:36px;height:36px;border-radius:10px;background:var(--navy)}
.title{font-weight:700}
.subtitle{font-size:12px;color:var(--gray)}
nav a{margin-left:12px;font-size:14px}
.hero{background:#F8FAFC}
.grid{display:grid;gap:24px}
.hero-grid{grid-template-columns:1fr; padding:24px 0}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.1fr .9fr;padding:48px 0}}
.tabs{display:flex;gap:12px;margin:12px 0}
.tab{border:1px solid var(--gray2);border-radius:999px;padding:8px 12px;background:#fff;font-size:14px}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cta{border:1px solid var(--gray2);border-radius:10px;padding:10px 14px;background:#fff}
.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.card-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:800px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--gray2);border-radius:14px;padding:14px;background:#fff}
.card h3{margin:0 0 6px 0;font-size:16px}
.badge{display:inline-block;border:1px solid var(--gray2);border-radius:999px;font-size:12px;color:var(--gray);padding:2px 8px}
.metrics{display:grid;gap:12px;margin-top:4px}
.metric{border:1px solid var(--gray2);border-radius:12px;padding:12px;background:#fff}
.metric strong{font-size:20px}
.section{padding:28px 0}
.footer{border-top:1px solid var(--gray2);margin-top:24px;padding:24px 0;color:var(--gray)}
.cover{width:100%;height:160px;object-fit:cover;border-radius:10px;border:1px solid var(--gray2);}
.viewer-note{font-size:12px;color:var(--gray)}
/* Viewer CSS (shared) */
.viewer-page{position:relative;margin:0 auto 18px auto;max-width:900px;border:1px solid var(--gray2);border-radius:8px;overflow:hidden}
.viewer-page img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
.viewer-wm{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg, rgba(11,30,59,.06) 0, rgba(11,30,59,.06) 40px, transparent 40px, transparent 80px);mix-blend-mode:multiply;pointer-events:none}
.controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--gray2);margin-bottom:12px}
select,input[type=number]{border:1px solid var(--gray2);border-radius:8px;padding:6px 8px}
@media print { html, body { display:none !important; } }
/* Hero rotator helpers */
.tabs .tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.slides .slide[hidden] { display: none; }
.hero-rotator { position: relative; }
.hero-rotator:hover { /* pause hint via cursor */ cursor: default; }

/* --- Boxed hero layout --- */
.hero { padding: 2.5rem 0 1rem; background:#F8FAFC; }
.hero-grid.two-cards { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 960px) {
  .hero-grid.two-cards { grid-template-columns: 1fr 1fr; }
}
.card {
  background: #fff;
  border: 1px solid var(--gray2, #E2E8F0);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  padding: 20px;
}
.hero-card .tabs { margin-bottom: 12px; }
.hero-card .slides { margin-top: 4px; }
.image-card img.cover { width: 100%; height: auto; border-radius: 12px; display: block; }

/* rotator helpers (ensure present) */
.tabs .tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.slides .slide[hidden] { display: none; }
.hero-rotator { position: relative; }
.hero-rotator:hover { cursor: default; }
