@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
    
    :root{
      --variable: #00FFD4;
    }
    body { font-family:'Inter',sans-serif; background:#000; color:#fff; min-height:100vh; }
    .title-font { font-family:'Space Grotesk',sans-serif; }

    /* HERO BG */
    .hero-bg {
      background:
        radial-gradient(circle at 25% 15%, rgba(34,211,238,0.24), transparent 32%),
        radial-gradient(circle at 85% 20%, rgba(168,85,247,0.22), transparent 28%),
        linear-gradient(180deg, #020617, #020617 55%, #000);
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* BADGE */
    .hero-badge {
      display:inline-flex; align-items:center; gap:8px;
      border-radius:50px; border:1px solid rgba(103,232,249,0.3);
      background:rgba(103,232,249,0.1); padding:10px 20px;
      font-size:14px; backdrop-filter:blur(8px); margin-bottom:24px;
    }

    /* HERO H1 */
    .hero-h1 { font-size:clamp(40px,7vw,72px); font-weight:900; line-height:1.05; }
    .gradient-text {
      background:linear-gradient(90deg,#cffafe,#fff,#fde68a);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }

    /* BUTTONS */
    .btn-cyan { background:#67e8f9; color:#000; border-radius:50px; font-weight:700; border:none; padding:12px 28px; transition:all .25s; }
    .btn-cyan:hover { background:#22d3ee; color:#000; transform:translateY(-2px); }
    .btn-outline-w { border:1px solid rgba(255,255,255,0.3); color:#fff; border-radius:50px; background:transparent; padding:11px 28px; transition:all .25s; }
    .btn-outline-w:hover { background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(103,232,249,0.5); }

    /* ORBS */
    .glow-orb { animation:floatOrb 6s ease-in-out infinite; }
    @keyframes floatOrb { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-25px)} }

    /* GLOBE */
    .globe-sphere {
      width:320px; height:320px; border-radius:50%;
      background:linear-gradient(135deg,#67e8f9 0%,#1d4ed8 50%,#10b981 100%);
      box-shadow:0 0 80px rgba(34,211,238,.45);
      position:relative; animation:spinSlow 28s linear infinite;
    }
    .globe-blob1 { position:absolute;left:48px;top:80px;width:112px;height:56px;background:rgba(110,231,183,0.7);border-radius:50%;filter:blur(12px); }
    .globe-blob2 { position:absolute;bottom:80px;right:40px;width:128px;height:64px;background:rgba(217,249,157,0.6);border-radius:50%;filter:blur(12px); }
    .globe-blob3 { position:absolute;left:80px;bottom:112px;width:80px;height:40px;background:rgba(255,255,255,0.4);border-radius:50%;filter:blur(12px); }
    .globe-ring  { position:absolute;inset:-20px;border-radius:50%;border:1px solid rgba(103,232,249,0.3);animation:spinReverse 18s linear infinite; }
    @keyframes spinSlow   { from{transform:rotate(0deg)}   to{transform:rotate(360deg)} }
    @keyframes spinReverse{ from{transform:rotate(360deg)} to{transform:rotate(0deg)} }

    /* HUB LABELS */
    .hub-label { position:absolute;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);padding:4px 14px;border-radius:50px;font-size:12px;border:1px solid rgba(103,232,249,0.5);color:#fff; }
    .hl-1{top:40px;left:-8px;}
    .hl-2{top:112px;right:-16px;}
    .hl-3{bottom:64px;left:32px;}
    .hl-4{bottom:80px;right:24px;}
    .hl-5{top:0px;left:50%;
      transform: translateX(-50%);}  

    /* PHILANTHROPY CARDS */
    .phil-card { border-radius:24px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);padding:32px;transition:border-color .3s; }
    .phil-card:hover { border-color:rgba(103,232,249,0.5); }

    /* SKYLINE */
    .skyline-wrap {
    height: 420px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(180deg, #020617 0%, #172554 50%, #000 100%);
    position: relative;
}
    .skyline-light { position:absolute;left:-10%;top:96px;height:40px;width:160px;background:rgba(255,255,255,0.1);filter:blur(8px);border-radius:50%;animation:moveLight 25s linear infinite; }
    .orb-left  { position:absolute;left:48px;top:48px;width:112px;height:112px;background:rgba(34,211,238,.5);border-radius:50%;filter:blur(40px);animation:floatOrb 6s ease-in-out infinite; }
    .orb-right { position:absolute;right:80px;top:80px;width:80px;height:80px;background:rgba(168,85,247,1);border-radius:50%;filter:blur(40px); }
    @keyframes moveLight { 0%{transform:translateX(0)} 100%{transform:translateX(1200px)} }

    #buildings { position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:0 24px;height:100%; }
    .building { width:48px;background:#0f172a;border:1px solid rgba(103,232,249,0.3);border-radius:8px 8px 0 0;position:relative;transition:all .4s ease; }
    .building:hover { transform:scaleY(1.08) translateY(-10px); }
    .building-windows { position:absolute;inset:8px 8px 0;display:grid;grid-template-columns:1fr 1fr;gap:4px; }
    .win { height:8px;background:rgba(103,232,249,0.6);border-radius:2px; }
    .building-beam { position:absolute;top:-80px;left:50%;width:4px;height:80px;transform:translateX(-50%);background:linear-gradient(to top,transparent,rgba(103,232,249,1),transparent);animation:pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

    .skyline-label { position:absolute;bottom:32px;left:32px;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);padding:24px;border-radius:16px;border:1px solid rgba(103,232,249,0.2); }

    /* CURRENT HUB */
    .current-hub-box { margin-top:24px;padding:24px;border-radius:24px;background:rgba(103,232,249,0.1);border:1px solid rgba(103,232,249,0.3); }

    /* HUB FILTER BUTTONS */
    .hub-btn { padding:8px 20px;border-radius:50px;font-size:14px;font-weight:500;border:none;transition:all .25s;cursor:pointer; }
    .hub-btn.active   { background:#67e8f9;color:#000; }
    .hub-btn.inactive { background:rgba(255,255,255,0.1);color:#fff; }
    .hub-btn.inactive:hover { background:rgba(255,255,255,0.2); }

    /* FEATURES */
    .feature-card { border-radius:24px;border:1px solid rgba(255,255,255,0.1);background:linear-gradient(135deg,rgba(255,255,255,0.05),transparent);padding:32px;transition:all .4s cubic-bezier(.4,0,.2,1);height:100%; }
    .feature-card:hover { transform:translateY(-8px);border-color:rgba(103,232,249,1); }
    .feature-icon-wrap { width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(34,211,238,0.1);border-radius:16px;font-size:24px;margin-bottom:24px; }

    /* FINAL */
    .final-wrap { border-radius:24px;background:linear-gradient(90deg,rgba(253,230,138,0.1),rgba(103,232,249,0.1),rgba(192,132,252,0.1));border:1px solid rgba(253,230,138,0.2);padding:48px; }
    .final-inner { background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);padding:32px;border-radius:24px; }
    .join-box { margin-top:32px;display:flex;align-items:center;gap:16px;background:rgba(255,255,255,0.1);padding:20px;border-radius:16px; }

    /* SECTION LABEL */
    .sec-label { text-transform:uppercase;letter-spacing:.15em;color:#22d3ee;font-size:13px;margin-bottom:8px;display:block; }
    
    .footer {
      padding: 34px 6%;
      border-top: 1px solid var(--line);
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }
  @media (max-width: 768px){
    .hero-bg {
      padding: 120px 24px 60px !important;
  }
  }
    @media(max-width:576px){
      .final-wrap { padding:24px; }
    }