:root {
      --bg-main: #05060a;
      --bg-elevated: rgba(12, 14, 24, 0.9);
      --bg-soft: rgba(18, 21, 34, 0.9);
      --border-soft: rgba(255, 255, 255, 0.08);
      --text-main: #f7f7fb;
      --text-muted: #8b90a2;
      --accent-gold-start: #f9d976;
      --accent-gold-end: #f39f5a;
      --accent-teal: #4ff2c9;
      --accent-pink: #ff65d8;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: radial-gradient(circle at top left, #181b2f 0, #05060a 40%, #000 100%);
      color: var(--text-main);
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }

    .gradient-border {
      position: relative;
      border-radius: 18px;
      padding: 1px;
      background: radial-gradient(circle at 0 0, var(--accent-gold-start), transparent 55%),
                  radial-gradient(circle at 100% 0, var(--accent-teal), transparent 55%),
                  radial-gradient(circle at 100% 100%, var(--accent-pink), transparent 55%);
    }

    .glass-panel {
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(10, 12, 22, 0.96), rgba(12, 15, 28, 0.98));
      border: 1px solid var(--border-soft);
      backdrop-filter: blur(26px);
    }

    .navbar {
      padding: 18px 0;
      background: radial-gradient(circle at top left, rgba(255,255,255,0.02), transparent 60%);
    }

    .brand-logo {
      height: 46px;
      width: auto;
    }

    .brand-text {
      font-family: "Space Grotesk", system-ui, sans-serif;
      background: linear-gradient(90deg, var(--accent-gold-start), var(--accent-gold-end));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: 0.22em;
      font-size: 0.9rem;
      text-transform: uppercase;
    }

    .badge-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.28rem 0.95rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(7,10,18,0.9);
      color: var(--text-muted);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.13em;
    }

    .badge-pill-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #fff, var(--accent-teal));
      box-shadow: 0 0 14px rgba(79, 242, 201, 0.9);
    }

    .hero {
      position: relative;
      padding: 64px 0 88px;
    }

    .hero-orbit-1,
    .hero-orbit-2 {
      position: absolute;
      border-radius: 999px;
      filter: blur(32px);
      opacity: 0.6;
      pointer-events: none;
      z-index: -1;
    }

    .hero-orbit-1 {
      width: 420px;
      height: 420px;
      background: radial-gradient(circle, rgba(249,217,118,0.28), transparent 55%);
      top: -80px;
      right: -40px;
    }

    .hero-orbit-2 {
      width: 360px;
      height: 360px;
      background: radial-gradient(circle, rgba(79,242,201,0.18), transparent 55%);
      bottom: -80px;
      left: -40px;
    }

    .hero-title {
      font-family: "Space Grotesk", system-ui, sans-serif;
      font-weight: 700;
      font-size: clamp(2.4rem, 3vw + 1.4rem, 3.5rem);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .hero-title span {
      background: linear-gradient(90deg, var(--accent-gold-start), var(--accent-gold-end));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      font-size: 1.05rem;
      color: var(--text-muted);
      max-width: 540px;
    }

    .hero-meta {
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .btn-main {
      position: relative;
      overflow: hidden;
      border-radius: 999px;
      padding: 0.85rem 1.9rem;
      font-size: 0.95rem;
      font-weight: 600;
      border: none;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      background: linear-gradient(120deg, var(--accent-gold-start), var(--accent-gold-end));
      color: #141318;
      box-shadow: 0 12px 30px rgba(0,0,0,0.5);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .btn-main:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 40px rgba(0,0,0,0.75);
      color: #141318;
    }

    .btn-ghost {
      border-radius: 999px;
      padding: 0.85rem 1.7rem;
      font-size: 0.95rem;
      font-weight: 500;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(10,12,22,0.8);
      color: var(--text-main);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    }

    .btn-ghost:hover {
      border-color: rgba(255,255,255,0.34);
      background: rgba(18,21,34,0.95);
      transform: translateY(-1px);
      color: var(--text-main);
    }

    .hero-thumb-wrapper {
      padding: 1.2rem;
    }

    .hero-thumb {
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.09);
      overflow: hidden;
      box-shadow: 0 28px 70px rgba(0,0,0,0.75);
      background: radial-gradient(circle at top left, rgba(243,159,90,0.14), transparent 55%),
                  radial-gradient(circle at bottom right, rgba(79,242,201,0.14), transparent 55%),
                  #05060a;
    }

    .hero-thumb img {
      width: 100%;
      display: block;
      object-fit: cover;
    }

    .hero-thumb-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.85rem 1.1rem;
      border-top: 1px solid rgba(255,255,255,0.06);
      font-size: 0.76rem;
      color: var(--text-muted);
    }

    .hero-chip {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--accent-teal);
    }

    .feature-grid {
      padding: 24px 0 64px;
    }

    .section-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--accent-teal);
    }

    .section-title {
      font-family: "Space Grotesk", system-ui, sans-serif;
      font-size: 1.9rem;
      margin-bottom: 0.5rem;
    }

    .section-subtitle {
      color: var(--text-muted);
      max-width: 560px;
      font-size: 0.98rem;
    }

    .feature-card {
      border-radius: 16px;
      padding: 1.4rem 1.5rem;
      background: var(--bg-soft);
      border: 1px solid var(--border-soft);
      height: 100%;
      position: relative;
      overflow: hidden;
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .feature-card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background: radial-gradient(circle at top, rgba(243,159,90,0.12), transparent 60%);
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }

    .feature-card:hover {
      transform: translateY(-4px);
      border-color: rgba(243, 159, 90, 0.6);
      box-shadow: 0 18px 60px rgba(0,0,0,0.78);
    }

    .feature-card:hover::before {
      opacity: 1;
    }

    .feature-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--text-muted);
      margin-bottom: 0.5rem;
    }

    .feature-title {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
    }

    .feature-text {
      font-size: 0.92rem;
      color: var(--text-muted);
    }

    .metrics-row {
      margin-top: 24px;
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .metric-value {
      font-size: 1rem;
      font-weight: 600;
      color: var(--accent-gold-end);
    }

    footer {
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 24px 0 28px;
      color: var(--text-muted);
      font-size: 0.82rem;
    }

    footer a {
      color: var(--text-muted);
      text-decoration: none;
    }

    footer a:hover {
      color: var(--accent-teal);
    }

    @media (max-width: 991.98px) {
      .hero {
        padding-top: 40px;
      }
      .hero-thumb-wrapper {
        margin-top: 40px;
      }
      .navbar {
        padding-top: 14px;
        padding-bottom: 14px;
      }
    }