/* ===== BNA Concept 4 — Modern Minimal ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy:#091745; --navy2:#12276b; --aqua:#bce8ea; --teal:#1f8f97; --ink:#0f1226;
  --muted:#6b7080; --line:#e9eaef; --paper:#fbfbfd; --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.i{width:1.15em;height:1.15em;vertical-align:-.15em;flex:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.grotesk{font-family:'Space Grotesk',sans-serif}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:6px;transition:.2s;cursor:pointer;border:1px solid transparent}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy2)}
.btn-line{border-color:var(--line);color:var(--ink)}.btn-line:hover{border-color:var(--ink)}
.btn-aqua{background:var(--aqua);color:var(--navy)}.btn-aqua:hover{filter:brightness(.96)}
.arrow{transition:.2s}.btn:hover .arrow{transform:translateX(3px)}

header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand img{height:44px}
.menu{display:flex;gap:30px;list-style:none;font-weight:500;font-size:15px;color:#3a3f4e}
.menu a:hover{color:var(--teal)}
.burger{display:none;background:none;border:0;cursor:pointer;color:var(--ink)}
.burger .i{width:24px;height:24px}

.hero{padding:92px 0 80px;border-bottom:1px solid var(--line)}
.hero .tagrow{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:26px}
.hero .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.hero h1{font-family:'Space Grotesk';font-weight:700;font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-2px;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .sub{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.hero .sub p{font-size:19px;color:#40465a;max-width:520px}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap}

.meta{border-bottom:1px solid var(--line)}
.meta .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.meta .m{padding:34px 0;border-right:1px solid var(--line)}
.meta .m:last-child{border:0}
.meta .n{font-family:'Space Grotesk';font-weight:700;font-size:36px;letter-spacing:-1px}
.meta .l{color:var(--muted);font-size:14px}

.section{padding:92px 0;border-bottom:1px solid var(--line)}
.lead-head{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:baseline;margin-bottom:56px}
.lead-head .idx{font-family:'Space Grotesk';color:var(--teal);font-weight:600;font-size:15px}
.lead-head h2{font-family:'Space Grotesk';font-weight:700;font-size:clamp(30px,4vw,48px);letter-spacing:-1px;line-height:1.05}
.lead-head p{color:var(--muted);margin-top:12px;max-width:520px}

.plist{border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:70px 1fr 2fr auto;gap:30px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:.2s}
.prow:hover{background:var(--paper);padding-left:16px;padding-right:16px}
.prow .num{font-family:'Space Grotesk';color:var(--muted);font-size:15px}
.prow h3{font-family:'Space Grotesk';font-weight:600;font-size:22px;letter-spacing:-.5px}
.prow p{color:var(--muted);font-size:15px}
.prow .go{color:var(--teal);font-weight:600;font-size:14px;white-space:nowrap}
.go .i,.buy .i{width:16px;height:16px}

.ngrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.ncard{background:#fff;padding:40px;transition:.2s}.ncard:hover{background:var(--paper)}
.ncard .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.ncard .cat{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);font-weight:600}
.ncard .date{font-size:13px;color:var(--muted)}
.ncard h3{font-family:'Space Grotesk';font-weight:600;font-size:22px;letter-spacing:-.5px;margin-bottom:12px;line-height:1.15}
.ncard p{color:var(--muted);font-size:15px;margin-bottom:18px}
.ncard a{font-weight:600;font-size:14px;border-bottom:1px solid var(--ink);padding-bottom:2px}

.sgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sgrid .s{background:#fff;height:96px;display:grid;place-items:center;text-align:center;font-size:12.5px;color:var(--muted);padding:12px;font-weight:500;transition:.2s}
.sgrid .s:hover{background:var(--paper);color:var(--ink)}

.cta{background:var(--navy);color:#fff}
.cta .wrap{padding:100px 28px;text-align:center}
.cta h2{font-family:'Space Grotesk';font-weight:700;font-size:clamp(34px,5vw,60px);letter-spacing:-1.5px;margin-bottom:18px}
.cta p{color:#aab2d0;font-size:19px;margin-bottom:30px}

footer{background:#fff;padding:64px 0 30px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
footer h4{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
footer ul{list-style:none}footer li{margin-bottom:10px;color:#3a3f4e;font-size:15px}
footer a:hover{color:var(--teal)}
.fbrand img{height:46px;margin-bottom:14px}
.copy{padding-top:24px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.page-hero{padding:70px 0;border-bottom:1px solid var(--line)}
.crumbs{font-size:13px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.page-hero h1{font-family:'Space Grotesk';font-weight:700;font-size:clamp(38px,6vw,68px);letter-spacing:-1.5px}
.prose{max-width:760px;margin:0 auto}
.prose p{margin-bottom:18px;color:#33384a;font-size:17px}
.prose h2{font-family:'Space Grotesk';font-weight:700;font-size:30px;letter-spacing:-.5px;margin:16px 0 12px}
.callout{border:1px solid var(--line);border-left:3px solid var(--aqua);padding:22px 26px;margin:24px 0;background:var(--paper)}
.table{width:100%;border-collapse:collapse;margin:20px 0}
.table th,.table td{text-align:left;padding:15px 12px;border-bottom:1px solid var(--line);font-size:15px}
.table th{font-family:'Space Grotesk';font-weight:600;color:var(--muted);font-size:13px;letter-spacing:1px;text-transform:uppercase}

.elist{border-top:1px solid var(--line)}
.erow{display:grid;grid-template-columns:120px 2fr 1fr auto;gap:30px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);transition:.2s}
.erow:hover{background:var(--paper);padding-left:16px;padding-right:16px}
.edate{font-family:'Space Grotesk';font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--teal);font-variant-numeric:tabular-nums;white-space:nowrap}
.erow h3{font-family:'Space Grotesk';font-weight:600;font-size:21px;letter-spacing:-.5px}
.erow p{color:var(--muted);font-size:15px}
.evenue{color:var(--muted);font-size:14px}
.erow .go{color:var(--teal);font-weight:600;font-size:14px;white-space:nowrap}
.enote{margin-top:24px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

.shgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.shcard{background:#fff;padding:26px;transition:.2s}.shcard:hover{background:var(--paper)}
.shimg{height:190px;margin-bottom:22px}
.ph-navy{background:var(--navy)}.ph-navy2{background:var(--navy2)}.ph-aqua{background:var(--aqua)}.ph-teal{background:var(--teal)}
.shrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.shcard h3{font-family:'Space Grotesk';font-weight:600;font-size:17px;letter-spacing:-.3px}
.price{font-family:'Space Grotesk';font-weight:600;font-size:15px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.shcard .buy{color:var(--teal);font-weight:600;font-size:14px}

@media(max-width:900px){
  .menu{display:none}.burger{display:grid;place-items:center}
  .meta .wrap,.ngrid,.sgrid,.fgrid{grid-template-columns:1fr}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .lead-head,.hero .sub{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr;gap:8px}.prow .num{display:none}
  .erow{grid-template-columns:1fr;gap:8px}
  .shgrid{grid-template-columns:repeat(2,1fr)}.shimg{height:150px}
}