* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; }

    body {
      background:#0b0b0b;
      color:#fff;
      overflow-x:hidden;
      transition: background 0.4s ease, color 0.4s ease;
    }

    .container {
      width:92%;
      max-width:1300px;
      margin:auto;
    }

    /* HERO */
    .hero {
      min-height:100vh;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      padding:60px 0;
      transform:scale(1.02);
      transform-origin:center;
    }

    .badge {
      background:#1a1a1a;
      padding:8px 16px;
      border-radius:999px;
      font-size:13px;
      color:#bbb;
      margin-bottom:28px;
      transition:0.4s;
    }

    .wave {
      display:inline-block;
      transform-origin: 70% 70%;
      animation: wave 2.2s ease-in-out infinite;
    }

    @keyframes wave {
      0% { transform: rotate(0deg); }
      10% { transform: rotate(14deg); }
      20% { transform: rotate(-8deg); }
      30% { transform: rotate(14deg); }
      40% { transform: rotate(-4deg); }
      50% { transform: rotate(10deg); }
      60% { transform: rotate(0deg); }
      100% { transform: rotate(0deg); }
    }

    .hero h2 {
      font-size: clamp(42px, 5vw, 72px);
      font-weight:600;
      line-height:1.1;
      max-width:900px;
      letter-spacing:-1.5px;
    }

    .highlight { color:#6ba36f; }

    .stats {
      display:flex;
      justify-content:center;
      gap:40px;
      margin-top:50px;
      flex-wrap:wrap;
      max-width:700px;
      width:100%;
    }

    .stat {
      display:flex;
      align-items:center;
      gap:12px;
      color:#aaa;
      font-size:14px;
      justify-content:center;
      text-align:left;
    }

    .stat-box {
      background:#1a1a1a;
      padding:10px 14px;
      border-radius:10px;
      font-weight:600;
      color:#fff;
      transition:0.4s;
    }

    .divider {
      width:1px;
      height:30px;
      background:#222;
    }

    .cta {
      margin-top:40px;
      display:flex;
      gap:16px;
      justify-content:center;
      flex-wrap:wrap;
    }

    .btn {
      padding:12px 20px;
      border-radius:999px;
      font-size:14px;
      text-decoration:none;
      transition:0.3s ease;
      border:1px solid #2a2a2a;
    }

    .btn-primary {
      background:#6ba36f;
      color:#0b0b0b;
      border:none;
    }

    .btn-primary:hover { opacity:0.85; }

    .btn-secondary {
      color:#ccc;
      background:transparent;
    }

    .btn-secondary:hover {
      background:#1a1a1a;
      color:#fff;
    }

    /* THEME ICON */
    .theme-toggle {
      display:flex;
      justify-content:center;
      margin-bottom:20px;
    }

    .theme-icon {
      width:36px;
      height:36px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      background:#1a1a1a;
      cursor:pointer;
      font-size:16px;
      transition:0.3s ease;
    }

    .theme-icon:hover {
      transform:scale(1.1);
      background:#222;
    }

    /* LIGHT MODE */
    body.light {
      background:#f5f5f5;
      color:#111;
    }

    body.light .badge { background:#eaeaea; color:#111; }
    body.light .stat-box { background:#eaeaea; color:#111; }
    body.light .divider { background:#ddd; }
    body.light .btn-secondary { color:#333; border-color:#ddd; }
    body.light .btn-secondary:hover { background:#eaeaea; }
    body.light .theme-icon { background:#eaeaea; }

  

    /* SOCIALS */
    .socials {
      margin-top:30px;
      display:flex;
      justify-content:center;
      gap:18px;
    }

    .socials a {
      width:40px;
      height:40px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      color:#aaa;
      text-decoration:none;
      transition:0.3s;
    }

    .socials a svg {
      width:22px;
      height:22px;
      fill:currentColor;
    }

    .socials a:hover {
      color:#fff;
      transform:translateY(-2px) scale(1.1);
    }

    body.light .socials a { color:#555; }
    body.light .socials a:hover { color:#000; }

    /* SCROLL TEXT */
    .scroll-text {
      margin-top:50px;
      font-size:14px;
      color:#888;
    }

    .wink {
      display:inline-block;
      animation: wink 2.5s infinite;
    }

    @keyframes wink {
      0%, 80%, 100% { transform: scale(1); }
      85% { transform: scale(1.2); }
      90% { transform: scale(0.9); }
    }

/* ALBUM SECTION */
    .albums {
      margin-top:80px;
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:30px;
    }

    .album-card {
      position:relative;
      cursor:pointer;
      overflow:hidden;
      border-radius:16px;
      background:#111;
      transition:0.3s ease;
    }

    .album-card:hover {
      transform:translateY(-6px);
    }

    .album-thumb {
      width:100%;
      aspect-ratio:16/9;
      background:#222;
      background-size:cover;
      background-position:center;
    }

    .album-overlay {
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      padding:20px;
      background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    }

    .album-title {
      font-size:18px;
      font-weight:600;
      color:#fff;
    }

    .album-meta {
      font-size:13px;
      color:#ccc;
      margin-top:4px;
    }

    .album-content {
      grid-column: 1 / -1;
      width:100%;
      max-width:1100px;
      margin:30px auto 0;
      display:none;
      grid-template-columns:repeat(2, 1fr);
      gap:24px;
    }

    .album-content.active {
      display:grid;
    }

    .album-content iframe {
      width:100%;
      aspect-ratio:16/9;
      height:auto;
      border:0;
      border-radius:12px;
    }

    .video-link {
      display:block;
      text-decoration:none;
    }

    .video-thumb {
      width:100%;
      aspect-ratio:16/9;
      border-radius:12px;
      background-size:cover;
      background-position:center;
      background-color:#222;
    }

    @media (max-width:768px) {
      .albums { grid-template-columns:1fr; }
      .album-content { grid-template-columns:1fr; }

      /* FIX STATS MOBILE */
      .stats {
        flex-direction:column;
        align-items:center;
        gap:20px;
      }

      .stat {
        width:auto;
        justify-content:center;
        text-align:center;
      }

      .divider {
        display:none;
      }
    }

  

    /* FOOTER */
    .footer {
      margin-top:120px;
      padding:40px 0 30px;
      text-align:center;
      color:#666;
      font-size:13px;
    }

    .footer span {
      color:#aaa;
    }

    body.light .footer { color:#888; }
    body.light .album-title { color:#fff; }
    body.light .album-meta { color:#ddd; }

    body.light .footer { color:#888; }