html,body{
        margin:3px 3px;
        background:#0A1A2F;
        color:var(--text);
        font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial}
    a{color:var(--brand);
        text-decoration:none} 
        a:hover{
            text-decoration:underline}
    .wrap{max-width:var(--max);
        margin:0 auto;
        padding:24px}
    header{
        background:white;
    }
    h2{
        text-align: center;
        font-size: 30px;
    }
    .nav{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px}
    .logo{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:700}
    .logo span{display:inline-block;padding:.25rem .6rem;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:8px;color:#04121a}
    .btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:600;border:1px solid transparent}
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#03131c;box-shadow:var(--shadow)}
    .btn.outline{border-color:#2b3b63;color:var(--text)}
    .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:46px 0}
    .hero h1{font-size:clamp(28px,4vw,44px);line-height:1.2;margin:.2em 0}
.badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: #0f1a30;
  border: 1px solid #2e3f63;
  border-radius: 999px;
  padding: 6px 12px;
  color: #e5f1ff;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 0 8px rgba(0, 153, 255, 0.35);
}
    .grid{display:grid;gap:18px} .cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
   .grid-status {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: start;
}

.grid-status form label {
  display: block;
  margin-bottom: 12px;
}

.grid-status input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #2a3b63;
  background: #0e162b;
  color: #dfe8ff;
}

@media(max-width:900px) {
  .grid-status {
    grid-template-columns: 1fr; /* vertical on mobile */
  }
}
  .form-horizontal {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  align-items: flex-end;
}

.form-horizontal label {
  flex: 1;
}

.form-horizontal input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #2a3b63;
}


    .card{border:1px solid #23335b;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
    .card h3{margin:.12em 0 .4em}
    .muted{display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
    }
    .kpi{display:flex;gap:14px;align-items:center} .kpi .num{font-size:28px;font-weight:700;color:var(--accent)}
    .section{padding:46px 0;border-top:1px solid #1e2a45}
    .pill{display:inline-block;background:#132140;border:1px solid #21325a;padding:6px 12px;border-radius:999px;color:#c9d6f5}
    .timeline{position:relative;padding-left:22px} .timeline:before{content:"";position:absolute;left:10px;top:4px;bottom:4px;width:2px;background:#203058}
    .t-item{position:relative;margin:0 0 18px 0} .t-item:before{content:"";position:absolute;left:-2px;top:6px;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 0 0 4px rgba(56,182,255,.15)}
    footer{padding:12px 0;border-top:1px solid #060606;color:#9fb2d6;
    text-align:center;}
    .gallery {
      display: block;}

    .gallery .ph {
      width: 100%;
      height: 400px; /* increase height */
      border-radius: 12px;
      overflow: hidden;
    }

    .gallery img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .gallerys{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px
    }
    .gallerys .ph{
      aspect-ratio:16/9;
      background:#0f1c36;
      border:1px dashed #344b82;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden
    }
    .gallerys img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block
    }
    .notice{
      border-left:4px solid var(--accent);
      background:#1a2136;
      padding:12px 14px;
      border-radius:8px
    }
    .tiers{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px
    } 
    .tier{
      background:#101a33;
      border:1px solid #24345d;
      border-radius:14px;padding:16px
    }
    .tier h4{
      margin:0 0 .2rem
    }
    .disclaimer{
      font-size:.88rem;
      color:white;
        text-align:center;
    }
    @media (max-width: 900px){.hero{grid-template-columns:1fr} .cols-3,.cols-2,.tiers{grid-template-columns:1fr} .gallery{grid-template-columns:1fr 1fr}}