:root{
      --gold:     #D4A843;
      --gold2:    #F5C842;
      --gold-dim: #8A6820;
      --dark:     #050505;
      --dark2:    #0b0b0b;
      --zinc:     #18181b;
      --variable: #D4A843;
    }
    body { font-family:'Oswald',sans-serif; background:var(--dark); color:#fff; margin:0; }
    .title-font { font-family:'Barlow Condensed',sans-serif; }

    .hero-bg {
      background:
        radial-gradient(circle at 25% 15%, rgba(212,168,67,0.22), transparent 32%),
        radial-gradient(circle at 85% 20%, rgba(245,200,66,0.14), transparent 28%),
        linear-gradient(180deg, #0a0700, #0b0b0b 55%, #050505);
    }

    .hero-badge {
      display:inline-flex; align-items:center; gap:8px;
      border-radius:50px; border:1px solid rgba(212,168,67,0.4);
      background:rgba(212,168,67,0.1); padding:10px 20px;
      font-size:14px; backdrop-filter:blur(8px); margin-bottom:24px;
      color:var(--gold);
    }

    .hero-h1 { font-size:clamp(32px,6vw,64px); font-weight:900; line-height:1.05; }
    .gradient-text {
      background:linear-gradient(90deg, var(--gold2), #fff, var(--gold));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }

    .btn-gold { background:var(--gold); color:#000; border-radius:50px; font-weight:700; border:none; padding:12px 28px; transition:all .25s; cursor:pointer; }
    .btn-gold:hover { background:var(--gold2); transform:translateY(-2px); box-shadow:0 0 24px rgba(212,168,67,0.4); }
    .btn-outline-w { border:1px solid rgba(212,168,67,0.35); color:#fff; border-radius:50px; background:transparent; padding:11px 28px; transition:all .25s; cursor:pointer; }
    .btn-outline-w:hover { background:rgba(212,168,67,0.08); color:var(--gold); border-color:rgba(212,168,67,0.6); }

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

    .globe-sphere {
      width:280px; height:280px; border-radius:50%;
      background:linear-gradient(135deg, var(--gold2) 0%, var(--gold-dim) 50%, #3d2a00 100%);
      box-shadow:0 0 80px rgba(212,168,67,.5);
      position:relative; animation:spinSlow 28s linear infinite;
    }
    .globe-blob1 { position:absolute;left:40px;top:70px;width:100px;height:50px;background:rgba(245,200,66,0.6);border-radius:50%;filter:blur(12px); }
    .globe-blob2 { position:absolute;bottom:70px;right:36px;width:110px;height:55px;background:rgba(212,168,67,0.5);border-radius:50%;filter:blur(12px); }
    .globe-blob3 { position:absolute;left:70px;bottom:100px;width:70px;height:36px;background:rgba(255,255,255,0.3);border-radius:50%;filter:blur(12px); }
    .globe-ring  { position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(212,168,67,0.4);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-label { position:absolute;background:rgba(5,5,5,0.85);backdrop-filter:blur(8px);padding:4px 14px;border-radius:50px;font-size:11px;border:1px solid rgba(212,168,67,0.5);color:var(--gold);white-space:nowrap; }
    .hl-1{top:36px;left:-8px;} .hl-2{top:100px;right:-16px;} .hl-3{bottom:58px;left:28px;} .hl-4{bottom:72px;right:20px;} .hl-5{top:0;left:50%;transform:translateX(-50%);}

    .phil-card { border-radius:20px;background:rgba(212,168,67,0.04);border:1px solid rgba(212,168,67,0.14);padding:28px;transition:border-color .3s;height:100%; }
    .phil-card:hover { border-color:rgba(212,168,67,0.5);background:rgba(212,168,67,0.07); }

    .skyline-wrap {
      height:360px; border-radius:20px; overflow:hidden;
      border:1px solid rgba(212,168,67,0.2);
      background:linear-gradient(180deg,#0a0700 0%,#1a0f00 50%,#050505 100%);
      position:relative;
    }
    .skyline-light { position:absolute;left:-10%;top:80px;height:36px;width:140px;background:rgba(212,168,67,0.14);filter:blur(8px);border-radius:50%;animation:moveLight 25s linear infinite; }
    .orb-l { position:absolute;left:40px;top:40px;width:100px;height:100px;background:rgba(212,168,67,.35);border-radius:50%;filter:blur(36px);animation:floatOrb 6s ease-in-out infinite; }
    .orb-r { position:absolute;right:70px;top:70px;width:70px;height:70px;background:rgba(138,104,32,0.75);border-radius:50%;filter:blur(36px); }
    @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:6px;padding:0 16px;height:100%; }
    .building { width:44px;background:var(--zinc);border:1px solid rgba(212,168,67,0.22);border-radius:6px 6px 0 0;position:relative;transition:all .4s ease; }
    .building:hover { transform:scaleY(1.08) translateY(-8px);border-color:rgba(212,168,67,0.65); }
    .building-windows { position:absolute;inset:6px 6px 0;display:grid;grid-template-columns:1fr 1fr;gap:3px; }
    .win { height:7px;background:rgba(212,168,67,0.5);border-radius:2px; }
    .building-beam { position:absolute;top:-70px;left:50%;width:3px;height:70px;transform:translateX(-50%);background:linear-gradient(to top,transparent,var(--gold),transparent);animation:pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

    .skyline-label { position:absolute;bottom:24px;left:24px;background:rgba(5,5,5,0.85);backdrop-filter:blur(8px);padding:20px;border-radius:14px;border:1px solid rgba(212,168,67,0.22); }

    .current-hub-box { margin-top:20px;padding:20px;border-radius:20px;background:rgba(212,168,67,0.07);border:1px solid rgba(212,168,67,0.28); }

    .hub-btn { padding:7px 18px;border-radius:50px;font-size:13px;font-weight:500;border:none;transition:all .25s;cursor:pointer; }
    .hub-btn.active   { background:var(--gold);color:#000; }
    .hub-btn.inactive { background:rgba(212,168,67,0.1);color:rgba(255,255,255,0.75); }
    .hub-btn.inactive:hover { background:rgba(212,168,67,0.2);color:#fff; }

    .feature-card { border-radius:20px;border:1px solid rgba(212,168,67,0.11);background:linear-gradient(135deg,rgba(212,168,67,0.05),transparent);padding:28px;transition:all .4s cubic-bezier(.4,0,.2,1);height:100%; }
    .feature-card:hover { transform:translateY(-6px);border-color:var(--gold);box-shadow:0 0 22px rgba(212,168,67,0.14); }
    .feature-icon-wrap { width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:rgba(212,168,67,0.11);border-radius:14px;font-size:22px;margin-bottom:20px; }

    .final-wrap { border-radius:20px;background:linear-gradient(90deg,rgba(212,168,67,0.1),rgba(138,104,32,0.07),rgba(245,200,66,0.05));border:1px solid rgba(212,168,67,0.22);padding:40px; }
    .final-inner { background:rgba(5,5,5,0.65);backdrop-filter:blur(8px);padding:28px;border-radius:20px;border:1px solid rgba(212,168,67,0.1); }
    .join-box { margin-top:28px;display:flex;align-items:center;gap:14px;background:rgba(212,168,67,0.1);padding:18px;border-radius:14px;border:1px solid rgba(212,168,67,0.2); }

    .sec-label { text-transform:uppercase;letter-spacing:.15em;color:var(--gold);font-size:12px;margin-bottom:6px;display:block; }
    .muted { color:#7a6040; }
    .muted2 { color:#a89070; }
    
    .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; }
    }