:root{
      --bg:#0b1220;
      --bg-soft:#0f1a33;
      --card:#121c35;
      --text:#e9f0ff;
      --muted:#9fb3d9;
      --accent:#2ea8ff;
      --accent-2:#6df0ff;
      --success:#47d16c;
      --warn:#ffce3a;
      --danger:#ff5964;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius:16px;
      --radius-sm:10px;
      --maxw:1100px;
    }

    /* Reset + base */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
      color:var(--text);
      background:
        radial-gradient(6000px 8800px at 80% -10%, rgba(46,168,255,.15), transparent 60%),
        radial-gradient(6000px 8800px at -20% 20%, rgba(109,240,255,.12), transparent 60%),
        var(--bg);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    a{color:var(--accent);text-decoration:none}
    a:hover{color:var(--accent-2);text-decoration:underline}

    /* Layout */
    .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}
    header{
      position:sticky;top:0;z-index:50;
      backdrop-filter:saturate(120%) blur(8px);
      background:linear-gradient(180deg, rgba(11,18,32,.9), rgba(11,18,32,.65));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav{
      display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px;
    }
    .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.3px}
    .brand img{width:36px;height:36px;border-radius:8px;object-fit:cover}
    .brand .name{font-size:1.05rem}
    .nav-links{display:flex;gap:18px}
    .nav-links a{padding:8px 10px;border-radius:8px}
    .nav-links a:hover{background-color:rgba(255,255,255,.06);text-decoration:none}
    .menu-btn{display:none;background:none;border:0;color:var(--text);font-size:1.4rem}

    @media (max-width:760px){
      .menu-btn{display:block}
      .nav-links{
        position:absolute;inset:64px 0 auto 0; /* below header */
        display:none;flex-direction:column;padding:12px 16px;
        background:linear-gradient(180deg, rgba(13,22,40,.98), rgba(13,22,40,.95));
        border-bottom:1px solid rgba(255,255,255,.08);
      }
      .nav-links a{padding:12px}
      .nav-links.open{display:flex}
    }

    /* Hero */
    .hero{
      padding:clamp(38px,6vw,64px) 0 clamp(24px,4vw,40px);
      text-align:center;
    }
    .logo{
      width:min(180px,45vw);aspect-ratio:1/1;border-radius:24px;
      box-shadow: 0 8px 20px rgba(46,168,255,.25);
      border:1px solid rgba(255,255,255,.14);
      background: radial-gradient(60% 60% at 50% 30%, rgba(46,168,255,.15), transparent 60%);
    }
    h1{
      margin:16px 0 8px;font-size:clamp(1.6rem, 3.4vw, 2.4rem);line-height:1.2;
      letter-spacing:.5px
    }
    .subtitle{
      color:var(--muted);font-size:clamp(.95rem,2.2vw,1.05rem);
    }
    .cta{
      margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap
    }
    .btn{
      display:inline-flex;align-items:center;gap:8px;
      padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
      color:var(--text);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow:var(--shadow);transition:transform .08s ease, background .2s ease
    }
    .btn:hover{transform:translateY(-1px);text-decoration:none;background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04))}
    .btn.primary{background:linear-gradient(180deg, #2ea8ff, #0e6fd1);border-color:#2ea8ff}
    .btn.primary:hover{background:linear-gradient(180deg, #3ab7ff, #1177e0)}
    .tag{
      display:inline-block;margin-top:12px;
      padding:6px 10px;border-radius:999px;background:rgba(46,168,255,.14);
      border:1px solid rgba(46,168,255,.35);color:#bfe6ff;font-size:.9rem
    }

    /* Sections */
    section{padding:clamp(28px,5vw,56px) 0}
    .grid{
      display:grid;gap:18px;
      grid-template-columns: repeat(12, 1fr);
    }
    .card{
      grid-column: 1 / -1;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10);
      border-radius:var(--radius);padding:18px 18px 6px;box-shadow:var(--shadow)
    }
    .card h2{margin-top:4px;font-size:1.25rem}
    .card p{color:var(--muted)}
    .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 10px}
    .kpi{
      background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
      padding:14px;border-radius:var(--radius-sm);text-align:center
    }
    .kpi .v{font-weight:800;font-size:1.2rem}
    .kpi .l{color:var(--muted);font-size:.85rem}
    
    .kpis2{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:5px;margin:8px 0 10px}
    .kpi2{
      background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
      padding:14px;border-radius:var(--radius-sm);text-align:center
    }
    .kpi2 .v{font-weight:800;font-size:1.2rem}
    .kpi2 .l{color:var(--muted);font-size:.85rem}

    @media (min-width:860px){
      .card.col-6{grid-column: span 6}
      .card.col-4{grid-column: span 4}
      .card.col-8{grid-column: span 8}
    }

    /* Gallery / Bear-Trap */
    .gallery{
      display:grid;gap:14px;grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    }
    .thumb{
      position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
      background:#0e162a;cursor:zoom-in
    }
    .thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
    .thumb:hover img{transform:scale(1.03)}
    .thumb .hint{
      position:absolute;left:8px;bottom:8px;font-size:.8rem;background:rgba(0,0,0,.5);
      padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18)
    }

    /* Footer */
    footer{
      border-top:1px solid rgba(255,255,255,.08);
      padding:22px 0 36px;color:var(--muted);text-align:center
    }

    /* Lightbox */
    .lightbox{
      position:fixed;inset:0;background:rgba(0,0,0,.85);
      display:none;align-items:center;justify-content:center;z-index:1000;
      padding:20px
    }
    .lightbox.open{display:flex}
    .lightbox img{max-width:min(1200px,95vw);max-height:90vh;border-radius:14px;border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow)}
    .lightbox .close{
      position:fixed;top:14px;right:16px;font-size:1.8rem;line-height:1;background:none;border:0;color:white;cursor:pointer
    }

    /* Utility */
    .muted{color:var(--muted)}
    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
    .center{text-align:center}
  
/* Navigation and responsive accessibility */
html{scroll-padding-top:88px}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:4px}
.skip-link{position:absolute;top:-100px;left:16px;z-index:100;background:var(--bg);padding:12px 18px;border:2px solid var(--accent)}
.skip-link:focus{top:8px}
.menu-btn{cursor:pointer;min-width:44px;min-height:44px;border-radius:8px}
.nav-links a.member-link{color:var(--accent)}
.kpi{min-width:0}.kpi .v{overflow-wrap:anywhere}.kpi .l{font-size:.875rem}
@media(max-width:1000px){.kpis{grid-template-columns:1fr}.kpis2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:859px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:420px){.kpis2{grid-template-columns:1fr}.nav{gap:8px}.brand .name{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Keep fact labels within their cards and centered at every viewport. */
.kpis{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
.kpi .v,.kpi .l{display:block;width:100%;text-align:center;overflow-wrap:anywhere}