!DOCTYPE html
html lang=en
  head
    meta charset=UTF-8 
    titleGG Collective – MUDRAtitle
    meta name=viewport content=width=device-width, initial-scale=1.0 

    !-- Fonts --
    link
      href=httpsfonts.googleapis.comcss2family=Space+Groteskwght@300;400;500;600;700&display=swap
      rel=stylesheet
    

    style
      root {
        --bg-deep #050608;
        --bg-dark #0b0c10;
        --bg-card #101218;
        --border #1f222c;
        --accent-cyan #3ed7f5;
        --accent-cyan-soft #26a7c2;
        --accent-gold #e3c76a;
        --text-main #f5f5f7;
        --text-muted #a0a3ad;
        --text-soft #6b6e78;
      }

       {
        box-sizing border-box;
        margin 0;
        padding 0;
      }

      body {
        background var(--bg-deep);
        color var(--text-main);
        font-family Space Grotesk, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, sans-serif;
      }

      a {
        text-decoration none;
        color inherit;
      }

      .container {
        max-width 1440px;
        margin 0 auto;
        padding 0 24px;
      }

       NAVBAR 
      .navbar {
        position sticky;
        top 0;
        z-index 50;
        background var(--bg-dark);
        border-bottom 1px solid var(--border);
      }

      .navbar-inner {
        height 80px;
        display flex;
        align-items center;
        justify-content space-between;
      }

      .navbar-left {
        display flex;
        align-items center;
        gap 12px;
      }

      .navbar-logo {
        width 40px;
        height 40px;
        border-radius 999px;
        background #111;
        border 1px solid var(--border);
      }

      .navbar-title {
        font-size 13px;
        color var(--text-soft);
      }

      .navbar-menu {
        display flex;
        gap 32px;
        font-size 13px;
      }

      .navbar-menu a {
        color var(--text-soft);
        transition color 0.2s ease;
      }

      .navbar-menu ahover {
        color var(--text-main);
      }

      .navbar-actions {
        display flex;
        align-items center;
        gap 12px;
        font-size 13px;
      }

      .btn-outline-small {
        padding 6px;
        border-radius 8px;
        border 1px solid var(--border);
        background transparent;
        color var(--text-soft);
        cursor pointer;
      }

      .btn-outline-smallhover {
        color var(--text-main);
      }

      .btn-ghost {
        padding 10px 22px;
        border-radius 999px;
        border 1px solid var(--accent-cyan);
        background transparent;
        color var(--text-main);
        cursor pointer;
        font-size 13px;
        transition background 0.2s ease;
      }

      .btn-ghosthover {
        background rgba(62, 215, 245, 0.08);
      }

       BUTTONS 
      .btn-primary {
        padding 10px 26px;
        border-radius 999px;
        border none;
        cursor pointer;
        font-size 15px;
        background var(--accent-cyan-soft);
        color #050608;
        box-shadow 0 0 40px rgba(62, 215, 245, 0.35);
        transition background 0.2s ease, transform 0.1s ease;
      }

      .btn-primaryhover {
        background var(--accent-cyan);
        transform translateY(-1px);
      }

      .btn-secondary {
        padding 10px 26px;
        border-radius 999px;
        border 1px solid var(--border);
        background #161922;
        color var(--text-soft);
        font-size 15px;
        cursor pointer;
        transition background 0.2s ease;
      }

      .btn-secondaryhover {
        background #1f222c;
      }

       SECTIONS 
      .section {
        padding 96px 0;
      }

      .section-alt {
        padding 96px 0;
        background #161922;
      }

      .section-soft {
        padding 96px 0;
        background #101218;
      }

       HERO 
      .hero {
        position relative;
        overflow hidden;
        background radial-gradient(
          circle at 50% 30%,
          rgba(62, 215, 245, 0.1) 0%,
          transparent 60%
        );
      }

      .hero-grid {
        display grid;
        grid-template-columns minmax(0, 1.2fr) minmax(0, 1fr);
        gap 64px;
        align-items center;
      }

      .hero-label {
        font-size 13px;
        letter-spacing 0.05em;
        color var(--text-soft);
        margin-bottom 8px;
      }

      .hero-title {
        font-size 38px;
        line-height 1.1;
        margin-bottom 16px;
      }

      .hero-body {
        font-size 15px;
        line-height 1.6;
        color var(--text-muted);
        max-width 480px;
      }

      .hero-buttons {
        display flex;
        gap 16px;
        margin-top 24px;
      }

      .hero-card {
        border-radius 24px;
        border 1px solid var(--border);
        box-shadow 0 22px 46px -18px rgba(0, 0, 0, 0.45);
        overflow hidden;
        background #050608;
        height 100%;
        min-height 260px;
      }

      .hero-card-placeholder {
        width 100%;
        height 100%;
        min-height 260px;
        background linear-gradient(135deg, #050608, #161922);
        display flex;
        align-items center;
        justify-content center;
        color var(--accent-cyan);
        font-size 14px;
        letter-spacing 0.08em;
        text-transform uppercase;
      }

       CARDS & GRID 
      .cards-3 {
        display grid;
        grid-template-columns repeat(3, minmax(0, 1fr));
        gap 24px;
      }

      .card {
        background var(--bg-card);
        border-radius 24px;
        padding 24px;
        border 1px solid var(--border);
        box-shadow 0 22px 46px -18px rgba(0, 0, 0, 0.45);
      }

      .card-title {
        font-size 18px;
        margin-bottom 8px;
      }

      .card-body {
        font-size 15px;
        line-height 1.6;
        color var(--text-muted);
      }

       SECTION TITLES 
      .section-title {
        font-size 26px;
        text-align center;
        margin-bottom 40px;
      }

       FEATURED PRODUCT 
      .featured-grid {
        display grid;
        grid-template-columns minmax(0, 1.2fr) minmax(0, 1fr);
        gap 64px;
        align-items center;
      }

      .pill {
        display inline-flex;
        align-items center;
        padding 4px 10px;
        border-radius 999px;
        border 1px solid var(--border);
        background #101218;
        font-size 11px;
        color var(--text-soft);
      }

      .pill-price {
        display inline-flex;
        align-items center;
        padding 6px 14px;
        border-radius 999px;
        border 1px solid var(--accent-gold);
        background #161922;
        font-size 13px;
        color var(--accent-gold);
      }

      .featured-title {
        font-size 24px;
        margin 18px 0 8px;
      }

      .featured-body {
        font-size 15px;
        line-height 1.6;
        color var(--text-muted);
        margin 16px 0 24px;
      }

      .featured-card {
        border-radius 24px;
        border 1px solid var(--border);
        background linear-gradient(145deg, #050608, #161922);
        min-height 260px;
        box-shadow 0 22px 46px -18px rgba(0, 0, 0, 0.45);
        display flex;
        align-items center;
        justify-content center;
        color var(--accent-cyan);
        text-transform uppercase;
        font-size 14px;
        letter-spacing 0.08em;
      }

       GESTURE DEMO TEASER 
      .gesture-teaser-card {
        max-width 720px;
        margin 0 auto;
      }

      .gesture-box {
        position relative;
        border-radius 20px;
        border 1px solid var(--border);
        background #050608;
        overflow hidden;
        padding 40px 24px;
        display flex;
        align-items center;
        justify-content center;
      }

      .grid-overlay {
        position absolute;
        inset 0;
        opacity 0.1;
        background-image linear-gradient(
            to right,
            rgba(62, 215, 245, 0.6) 1px,
            transparent 1px
          ),
          linear-gradient(
            to bottom,
            rgba(62, 215, 245, 0.6) 1px,
            transparent 1px
          );
        background-size 40px 40px;
      }

      .gesture-inner {
        position relative;
        z-index 1;
        text-align center;
        display flex;
        flex-direction column;
        gap 12px;
        align-items center;
      }

      .gesture-icon {
        width 48px;
        height 48px;
        border-radius 999px;
        border 1px solid #1f222c;
        display flex;
        align-items center;
        justify-content center;
        color var(--accent-cyan);
        font-size 22px;
      }

      .gesture-link {
        margin-top 6px;
        padding 8px 18px;
        border-radius 999px;
        border 1px solid var(--border);
        background #101218;
        color var(--text-soft);
        font-size 13px;
        cursor pointer;
        transition background 0.2s ease;
      }

      .gesture-linkhover {
        background #161922;
      }

       FOOTER 
      .footer {
        background var(--bg-dark);
        border-top 1px solid var(--border);
      }

      .footer-grid {
        display grid;
        grid-template-columns repeat(4, minmax(0, 1fr));
        gap 32px;
        margin-bottom 32px;
      }

      .footer-title {
        font-size 13px;
        margin-bottom 12px;
      }

      .footer-text {
        font-size 13px;
        line-height 1.6;
        color var(--text-soft);
      }

      .footer-list {
        list-style none;
        font-size 13px;
        color var(--text-soft);
      }

      .footer-list li + li {
        margin-top 6px;
      }

      .footer-list ahover {
        color var(--text-muted);
      }

      .footer-bottom {
        border-top 1px solid var(--border);
        padding-top 16px;
        font-size 13px;
        color var(--text-soft);
      }

       RESPONSIVE 
      @media (max-width 960px) {
        .hero-grid,
        .featured-grid,
        .cards-3,
        .footer-grid {
          grid-template-columns 1fr;
        }

        .hero-grid {
          gap 40px;
        }

        .hero-buttons {
          flex-direction column;
          align-items flex-start;
        }

        .navbar-menu {
          display none;
        }
      }
    style
  head

  body
    !-- NAVBAR --
    header class=navbar
      div class=container navbar-inner
        div class=navbar-left
          div class=navbar-logodiv
          div class=navbar-titleGG Collective Recordsdiv
        div

        nav class=navbar-menu
          a href=#topHomea
          a href=#musicMusica
          a href=#techTecha
          a href=#packsPacksa
          a href=#communityCommunitya
          a href=#supportSupporta
        nav

        div class=navbar-actions
          span style=color var(--text-soft)Accountspan
          button class=btn-outline-small🛒button
          button class=btn-ghostJoin Collectivebutton
        div
      div
    header

    main id=top
      !-- HERO --
      section class=hero section
        div class=container
          div class=hero-grid
            div
              div class=hero-labelGG COLLECTIVE RECORDSdiv
              h1 class=hero-title
                Dark-matte tools for gesture-controlled music.
              h1
              p class=hero-body
                MUDRA - ముద్ర is a gesture control engine for MIDI and OSC. Your
                webcam tracks pinch and twist gestures from both hands and turns
                them into precise CC data for music, performance and visuals.
              p
              div class=hero-buttons
                button class=btn-primary
                  View MUDRA - ముద్ర – €49.99
                button
                button class=btn-secondaryDiscover ILEbutton
              div
            div

            div class=hero-card
              div class=hero-card-placeholder
                MUDRA INTERFACE PREVIEW
              div
            div
          div
        div
      section

      !-- THREE PILLARS --
      section class=section id=music
        div class=container
          h2 class=section-titleMusic. Tech. Packs.h2
          div class=cards-3
            div class=card
              h3 class=card-titleMusich3
              p class=card-body
                A home for genre-bending artists whose sets blur rap, psy,
                hitech and experimental club.
              p
            div
            div class=card
              h3 class=card-titleTechh3
              p class=card-body
                Gesture-aware tools and visual systems engineered around MUDRA –
                your hands as a controller.
              p
            div
            div class=card
              h3 class=card-titlePacksh3
              p class=card-body
                Ableton templates, FX racks and TouchDesigner setups tuned for
                live control with MUDRA.
              p
            div
          div
        div
      section

      !-- FEATURED PRODUCT --
      section class=section-alt id=tech
        div class=container
          div class=featured-grid
            div
              span class=pillSOFTWAREspan
              h2 class=featured-title style=margin-top 16px
                MUDRA - ముద్ర – Gesture Control for MIDIOSC
              h2
              div style=margin 12px 0
                span class=pill-price€49.99span
              div
              p class=featured-body
                Dual-hand pinch and twist recognition, lockunlock gestures,
                MIDI CC and OSC output, cinematic intro and a dark-matte
                interface tuned for performance.
              p
              button class=btn-primaryOpen Product Pagebutton
            div

            div class=featured-card
              MUDRA ACTIVE VIEW
            div
          div
        div
      section

      !-- GESTURE DEMO TEASER --
      section class=section id=packs
        div class=container
          div style=max-width 640px; margin 0 auto 40px; text-align center
            h2 class=section-title style=margin-bottom 16px
              Try gestures in your browser.
            h2
            p
              style=
                font-size 15px;
                line-height 1.6;
                color var(--text-muted);
              
            
              On the MUDRA page you can enable your webcam and see hand tracking
              overlays that mirror the plugin’s feeling before you install the
              desktop app.
            p
          div

          div class=card gesture-teaser-card
            div class=gesture-box
              div class=grid-overlaydiv
              div class=gesture-inner
                div class=gesture-icon📷div
                div
                  style=
                    font-size 14px;
                    color var(--text-soft);
                    max-width 320px;
                  
                
                  Enable your webcam on the MUDRA page to preview gesture
                  tracking overlays.
                div
                button class=gesture-link
                  View Demo on MUDRA Page →
                button
              div
            div
          div
        div
      section
    main

    !-- FOOTER --
    footer class=footer id=support
      div class=container style=padding 64px 24px 32px
        div class=footer-grid
          div
            h3 class=footer-titleGG COLLECTIVEh3
            p class=footer-text
              A label and tech lab building tools for gesture-controlled music
              and visuals.
            p
          div

          div
            h3 class=footer-titleNavigateh3
            ul class=footer-list
              lia href=#topHomeali
              lia href=#musicMusicali
              lia href=#techTechali
              lia href=#packsPacksali
              lia href=#communityCommunityali
              lia href=#supportSupportali
            ul
          div

          div
            h3 class=footer-titleConnecth3
            ul class=footer-list
              lia href=#Instagramali
              lia href=#TikTokali
              lia href=#YouTubeali
              lia href=#Discordali
            ul
          div

          div
            h3 class=footer-titleLegalh3
            ul class=footer-list
              lia href=#Termsali
              lia href=#Privacyali
              lia href=#Refundsali
              lia href=#Cookiesali
            ul
          div
        div

        div class=footer-bottom
          © 2025 GG Collective Records.
        div
      div
    footer
  body
html