:root{
      --bg0:#070712;
      --bg1:#0b0b1a;
      --glass: rgba(255,255,255,.08);
      --stroke: rgba(255,255,255,.14);
      --txt: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --brand1:#7c3aed; /* violet */
      --brand2:#22d3ee; /* cyan */
      --brand3:#fb7185; /* rose */
      --shadow: 0 20px 60px rgba(0,0,0,.55);
    }

    html,body{height:100%;}
    body{
      font-family:"Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--txt);
      background:
        radial-gradient(1200px 800px at 10% -10%, rgba(124,58,237,.35), transparent 55%),
        radial-gradient(1000px 700px at 110% 10%, rgba(34,211,238,.25), transparent 55%),
        radial-gradient(900px 700px at 40% 120%, rgba(251,113,133,.18), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }

    /* Subtle grain */
    .grain:before{
      content:"";
      position:fixed; inset:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
      opacity:.08; pointer-events:none;
      mix-blend-mode:overlay;
      z-index:0;
    }

    /* Navbar glass */
    .navbar{
      background: rgba(10,10,25,.45) !important;
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .navbar .nav-link{color:rgba(255,255,255,.78);}
    .navbar .nav-link:hover{color:white;}
    .badge-neon{
      background: linear-gradient(90deg, var(--brand1), var(--brand2));
      box-shadow: 0 0 24px rgba(34,211,238,.18);
    }

    /* Hero */
    .hero{
      position:relative;
      padding-top: 7rem;
      padding-bottom: 4rem;
      z-index:1;
    }
    .hero-card{
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 28px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .hero-card:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(600px 250px at 20% 0%, rgba(34,211,238,.18), transparent 60%),
                  radial-gradient(700px 300px at 80% 30%, rgba(124,58,237,.22), transparent 60%),
                  radial-gradient(700px 280px at 40% 100%, rgba(251,113,133,.16), transparent 60%);
      pointer-events:none;
      z-index:0;
    }
    .hero-inner{position:relative; z-index:1;}
    .kicker{
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(255,255,255,.78);
      font-size:.9rem;
    }
    .title{
      font-size: clamp(2.2rem, 4.3vw, 4rem);
      line-height:1.05;
      margin: .35rem 0 1rem;
    }
    .title .grad{
      background: linear-gradient(90deg, var(--brand2), var(--brand1), var(--brand3));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .lead{
      color: var(--muted);
      font-size: 1.12rem;
      max-width: 62ch;
    }

    /* Neon buttons */
    .btn-neon{
      border:0;
      background: linear-gradient(90deg, var(--brand1), var(--brand2));
      color:#081018;
      font-weight:700;
      border-radius: 14px;
      padding: .85rem 1.05rem;
      box-shadow: 0 16px 40px rgba(124,58,237,.18);
    }
    .btn-neon:hover{filter: brightness(1.05); transform: translateY(-1px);}
    .btn-ghost{
      border-radius:14px;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.88);
      padding: .85rem 1.05rem;
    }
    .btn-ghost:hover{background: rgba(255,255,255,.10); color:white; transform: translateY(-1px);}

    /* Sections */
    section{position:relative; z-index:1;}
    .section-title{
      font-size: clamp(1.4rem, 2.3vw, 2rem);
      margin-bottom:.25rem;
    }
    .section-sub{color:var(--muted);}

    /* Cards */
    .glass{
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 22px;
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    .card-hover{
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .card-hover:hover{
      transform: translateY(-4px);
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.22);
    }

    /* YouTube embeds responsive */
    .ratio{
      border-radius: 18px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
    }

    /* Footer */
    footer{
      border-top: 1px solid rgba(255,255,255,.08);
      background: rgba(10,10,25,.35);
      backdrop-filter: blur(12px);
    }

    /* Small animated glow orb */
    .orb{
      position:absolute;
      width: 520px; height: 520px;
      border-radius: 999px;
      filter: blur(44px);
      opacity:.28;
      z-index:0;
      animation: float 8s ease-in-out infinite;
    }
    .orb.one{background: rgba(34,211,238,.55); top:-240px; left:-220px;}
    .orb.two{background: rgba(124,58,237,.55); top:120px; right:-260px; animation-delay: -2s;}
    .orb.three{background: rgba(251,113,133,.45); bottom:-260px; left:20%; animation-delay:-4s;}

    @keyframes float{
      0%,100%{transform: translate(0,0) scale(1);}
      50%{transform: translate(10px, -18px) scale(1.03);}
    }
	
	.maintenance-content .lead { color: black; }