:root{
 --bg: #ffffff;
 --ink: #0b1220;
 --muted: #5b667a;
 --line: #e6e9ef;
 --panel: #f7f8fb;
 --focus: #1b3a70;
 --max: 1120px;
 --radius: 14px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
 background:var(--bg);
 color:var(--ink);
 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
 line-height:1.55;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

.container{ max-width:var(--max); margin:0 auto; padding:0 20px; }

/* HEADER */
.header{
 position:sticky;
 top:0;
 background:rgba(255,255,255,0.92);
 backdrop-filter:saturate(180%) blur(10px);
 border-bottom:1px solid var(--line);
 z-index:1000;
}

.header-inner{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:14px 0;
 gap:16px;
 position:relative;
}

/* BRAND */
.brand{
 display:flex;
 align-items:center;
 min-width:0;
}

.brand-link{
 display:block;
 align-items:center;

 text-decoration:none;
 color:inherit;
 min-width:0;
}

.brand-logo{
 width:176px;
 height:60px;
 object-fit:contain;
 flex-shrink:0;
}

.brand-text{
 display:flex;
 flex-direction:column;
 min-width:0;
 text-align: center;
    margin-top: -7px;
}

.brand strong,
.brand-text strong{
 letter-spacing:0.2px;
 font-size:14px;
 line-height:1.2;
}

.brand span,
.brand-text span{
 color:var(--muted);
 font-size:12px;
 line-height:0;
}

/* DESKTOP NAV */
.nav{
 display:flex;
 gap:10px;
 align-items:center;
 justify-content:flex-end;
}

.nav a{
 font-size:13px;
 color:var(--muted);
 padding:6px 8px;
 border-radius:10px;
 transition:background 0.2s ease, color 0.2s ease;
}

.nav a:hover{
 text-decoration:none;
 color:var(--ink);
 background:var(--panel);
}

.nav a[aria-current="page"]{
 color:var(--ink);
 background:var(--panel);
 text-decoration:none;
}

/* MOBILE TOGGLE */
.nav-toggle{
 display:none;
 width:44px;
 height:44px;
 border:1px solid var(--line);
 border-radius:10px;
 background:#fff;
 cursor:pointer;
 padding:0;
 align-items:center;
 justify-content:center;
 flex-direction:column;
 gap:5px;
 flex-shrink:0;
}

.nav-toggle span{
 display:block;
 width:18px;
 height:2px;
 background:var(--ink);
 border-radius:2px;
 transition:0.3s ease;
}

.nav-toggle.active span:nth-child(1){
 transform:translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2){
 opacity:0;
}

.nav-toggle.active span:nth-child(3){
 transform:translateY(-7px) rotate(-45deg);
}

/* HERO */
.hero{
 padding:54px 0 26px 0;
}

.kicker{
 color:var(--muted);
 font-size:12px;
 letter-spacing:0.12em;
 text-transform:uppercase;
}

h1{
 font-size:40px;
 letter-spacing:-0.02em;
 margin:10px 0 10px 0;
 line-height:1.15;
}

.lead{
 color:var(--muted);
 font-size:17px;
 max-width:74ch;
}

/* CTA */
.cta-row{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
 margin-top:16px;
}

.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border:1px solid var(--line);
 padding:10px 14px;
 border-radius:999px;
 font-size:13px;
 background:#fff;
}

.btn.primary{
 border-color:rgba(27,58,112,0.28);
 background:rgba(27,58,112,0.06);
}

.btn:hover{
 text-decoration:none;
 border-color:#cdd4e2;
}

/* SECTION */
.section{
 padding:34px 0;
 border-top:1px solid var(--line);
}

.section h2{
 font-size:20px;
 margin:0 0 10px 0;
}

.section p{
 max-width:82ch;
 color:var(--muted);
 margin:0 0 12px 0;
}

/* GRID */
.grid{
 display:grid;
 grid-template-columns:repeat(12, 1fr);
 gap:14px;
}

.card{
 grid-column:span 4;
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:16px;
 background:#fff;
 min-height:120px;
}

.card h3{
 margin:0 0 6px 0;
 font-size:14px;
}

.card p{
 margin:0;
 font-size:13px;
 color:var(--muted);
}

.card .mini{
 margin-top:10px;
 font-size:12px;
 color:var(--muted);
}

/* STATS */
.stat-row{
 display:flex;
 gap:12px;
 flex-wrap:wrap;
 margin-top:10px;
}

.stat{
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:12px 14px;
 background:var(--panel);
 min-width:180px;
}

.stat strong{
 display:block;
 font-size:14px;
}

.stat span{
 display:block;
 color:var(--muted);
 font-size:12px;
 margin-top:2px;
}

.hr{
 height:1px;
 background:var(--line);
 margin:18px 0;
}

/* FOOTER */
.footer{
 border-top:1px solid var(--line);
 padding:20px 0 38px 0;
 color:var(--muted);
 font-size:12px;
}

.footer .footer-grid{
 display:grid;
 grid-template-columns:repeat(12, 1fr);
 gap:14px;
}

.footer .col{
 grid-column:span 4;
}

.footer a{
 color:var(--muted);
}

.footer a:hover{
 color:var(--ink);
 text-decoration:underline;
}

/* FORM */
.form{
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:16px;
 background:#fff;
}

label{
 display:block;
 font-size:12px;
 color:var(--muted);
 margin:10px 0 6px;
}

input, select, textarea{
 width:100%;
 padding:10px 11px;
 border:1px solid var(--line);
 border-radius:12px;
 font:inherit;
 background:#fff;
}

textarea{
 min-height:110px;
 resize:vertical;
}

.form .row{
 display:grid;
 grid-template-columns:repeat(12, 1fr);
 gap:12px;
}

.form .row .span6{
 grid-column:span 6;
}

.form .row .span12{
 grid-column:span 12;
}

/* NOTICE */
.notice{
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:14px;
 background:var(--panel);
 color:var(--muted);
 font-size:13px;
}

.text-center{ text-align:center; }
.small{ font-size:12px; color:var(--muted); }
.m-b-24{ margin-bottom:24px; display:block; }
.m-t-24{ margin-top:24px; display:block; }


/* MEDIA */
.media-grid{
 display:grid;
 grid-template-columns:repeat(12, 1fr);
 gap:14px;
}

.media-card{
 grid-column:span 4;
 border:1px solid var(--line);
 border-radius:var(--radius);
 background:#fff;
 overflow:hidden;
}

.media-embed{
 position:relative;
 width:100%;
 aspect-ratio:16 / 9;
 background:var(--panel);
}

.media-embed iframe{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 border:0;
}

.media-title{
 margin:12px 14px 4px 14px;
 font-size:14px;
}

.media-meta{
 margin:0 14px 14px 14px;
 font-size:12px;
 color:var(--muted);
}

p.ecosystem-closing{
 margin-top:24px;
}
.card.h-0{ min-height: auto;}
/* RESPONSIVE */
@media (max-width: 980px){
      .header-inner.p-10 {
        padding: 10px;
    }
 h1{ font-size:34px; }
 .card{ grid-column:span 6; }
 .media-card{ grid-column:span 6; }
}

@media (min-width: 991px) and (max-width: 1096px) {

  .nav{
    gap:6px;
  }

  .nav a{
    font-size:12px;
    padding:5px 6px;
  }

  .brand-text span{
    font-size:12px;
  }

}

@media (max-width: 991px){
 .nav-toggle{
  display:inline-flex;
 }

 .nav{
  display:none;
  position:absolute;
  top:calc(100%);
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:0 0 14px 14px;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  padding:10px;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
 }

 .nav a{
  display:block;
  padding:12px 14px;
  border-radius:10px;
 }

 .brand-logo{
         width: 145px;
        height: 100%;
 }

 .brand-text strong{
  font-size:13px;
 }

 .brand-text span{
  font-size:11px;
 }
}

@media (max-width: 640px){
 h1{ font-size:30px; }
 .header-inner.p-10{ padding: 10px;}
 .card{ grid-column:span 12; }
 .media-card{ grid-column:span 12; }

 .footer .col{
  grid-column:span 12;
 }

 .form .row .span6,
 .form .row .span12{
  grid-column:span 12;
 }

 .stat{
  width:100%;
  min-width:unset;
 }

 .container{
  padding:0 16px;
 }

 .header-inner{
  gap:12px;
 }

 .brand-link{
  gap:8px;
 }

 .brand-text strong{
  font-size:12px;
 }

 .brand-text span{
  font-size:10px;
 }

 .nav-toggle{
  width:40px;
  height:40px;
 }
}