/* <style> */

    /* --- Brand Colour Palette --- */

    :root{
      --blackB:#040815;       /* Midnight Cosmos */
      --ivory:#FDF7F0;        /* Soft Ivory */
      --spaceB:#031A36;       /* Deep Space Blue */
      --quantB:#98AED8;       /* Quantum Blue */
      --violet: #7683AF;      /* Dimensional Violet */
      --green: #214753;       /* Arora Green */
      --gold:#CBB052;         /* Pulse Gold */
      --radius:18px;
      --shadow:0 10px 25px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
    }

    /* --- Base styles --- */
    *{box-sizing:border-box}
    html,body{margin:0;height:100%;scroll-behavior:smooth;background:linear-gradient(180deg,var(--blackB),#111626 60%);} 
    body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:var(--ivory)}
    a{color:inherit;text-decoration:none}

    /* --- Layout containers --- 
    */
    .container{max-width:1080px;margin:0 auto;padding:24px}

    /* --- Header & Navigation --- */
    header{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(15,18,29,.6);border-bottom:1px solid rgba(255,255,255,.06);z-index:20}
    nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.6px}
    
    /* Graident Logo Default */
    
    /* New logo image styling */
/* Logo wrapper: controls visible height & cropping */
.logo-wrap {
  height: 40px;           /* visible logo height in the header */
  width: 120px;            /* or whatever width you want */
  overflow: hidden;       /* crop anything outside this box */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Actual image: slightly larger than the wrapper so top/bottom are cropped */
.logo-img {
  height: 120px;           /* make this bigger than .logo-wrap height */
  width: auto;
  object-fit: cover;      /* safe, but wrapper does most of the work */
  object-position: center;
  display: block;
}

    .menu{display:flex;gap:18px;align-items:center}
    .menu a{opacity:.85}
    .menu a:hover{opacity:1}

    /* --- Call-to-action button --- */
    .cta{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius);border:1px solid rgba(212,175,55,.35);background:linear-gradient(180deg,rgba(212,175,55,.18),rgba(212,175,55,.10)); box-shadow:var(--shadow)}
    .cta span{font-weight:600}

    /* --- Hero section --- */
    .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:56px 0}

    /* --- Card components --- */
    .card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:28px;box-shadow:var(--shadow)}

    /* --- Typography --- */
    h1{font-size:clamp(32px,6vw,56px);line-height:1.05;margin:0 0 12px}
    h2{font-size:clamp(22px,3vw,28px);margin:0 0 12px}
    p{opacity:.92;line-height:1.6}
    .muted{opacity:.75}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .pill{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);font-size:13px;opacity:.9}
    .gold{color:var(--gold)}
    .section{padding:54px 0}
    footer{padding:40px 0;opacity:.8;border-top:1px dashed rgba(255,255,255,.12)}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14)}
    .btn:hover{background:rgba(255,255,255,.06)}
    .highlight{background:linear-gradient(180deg,rgba(244,241,234,.06),rgba(244,241,234,.00));border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:18px}
    .list{display:grid;gap:10px;margin:16px 0 0;padding:0}
    .list li{list-style:none;display:flex;align-items:flex-start;gap:10px}
    .bullet{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:8px;box-shadow:0 0 0 3px rgba(212,175,55,.18)}
    
    /* Responsive */
    @media (max-width:900px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}}
    @media (max-width:620px){.grid{grid-template-columns:1fr}}

  /* </style> */