:root{
      --font-base: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      --muted: #6b6b6b;
      --gold-1: #F5A623;
      --gold-2: #E8A000;
      --black-card: #2A2A2A;
      --page-bg: #ffffff;
      --section-pad: 72px;
    }
    *{ box-sizing:border-box; }
    body{
      font-family: var(--font-base);
      background: var(--page-bg);
      color: #222;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* Navbar */
    .navbar {
      background: #fff;
      padding: 16px 5vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      top: 0;
      z-index: 1000;
      border-bottom: 1px solid #eee;
    }

    .navbar-brand {
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 1px;
      color: #2A2A2A;
      text-transform: uppercase;
      text-decoration: none;
    }

    .navbar-toggler {
      border: none;
      background: none;
      font-size: 26px;
      cursor: pointer;
      color: #2A2A2A;
      transition: transform 0.3s ease;
    }

    .navbar-toggler.active {
      /*transform: rotate(90deg);*/
    }

    .navbar-toggler:focus {
      box-shadow: unset;
    }

    /* Slide-out mobile menu */
    .mobile-menu {
      position: fixed;
      top: 0;
      right: -100%;
      width: 50%;
      height: 100vh;
      background: #fff;
      box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
      padding: 80px 24px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      transition: right 0.4s ease;
      z-index: 999;
    }

    .mobile-menu.open {
      right: 0;
    }

    .mobile-menu a {
      color: #2A2A2A;
      font-weight: 600;
      text-decoration: none;
      font-size: 18px;
    }

    .mobile-menu a:hover {
      color: var(--gold-1);
    }

    /* Overlay for background blur */
    .menu-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(2px);
      z-index: 998;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
    }

    .menu-overlay.show {
      opacity: 1;
      visibility: visible;
    }

    /* Top nav */
    .topbar{
      padding: 18px 0;
      border-bottom: 1px solid #eee;
    }
    .brand{
      font-weight:700;
      letter-spacing:4px;
      font-size:18px;
    }
    .nav-toggle{
      border:0;
      background:transparent;
    }
    .main-logo {
      width: 253px;
    }

    /* HERO */
    .hero{
      padding: var(--section-pad) 0 40px;
      /*background: #F2F2F2;*/
      background-image: url(https://cdn.shopify.com/s/files/1/0423/9120/8086/files/Frame_1410103581.png?v=1762740484);
      background-repeat: no-repeat;
      background-size: cover;
      height: 563px;
    }
    .hero-left{
      padding-right: 30px;
    }
    .hero .kicker { color: var(--muted); font-weight:600; text-transform:none; margin-bottom:8px; }
    .hero h1{
      margin: 0 0 32px;
      font-weight: 700;
      font-size: 50px;
      line-height: 73px;
      letter-spacing: 0%;
      color: #fff;
    }
    .hero p.lead{
      color: #fff;
      max-width: 680px;
      margin-bottom: 32px;
      font-weight: 400;
      font-size: 16px;
      line-height: 150%;
    }
    .hero .container .row .hero-left .d-flex a {
      margin: inherit;
    }
    .btn-cta{
      background: #fff;
      color: #000;
      border: 0;
      border-radius: 36px;
      font-weight: 600;
      box-shadow: none;
      font-size: 16px;
      width: 250px;
      height: 67px;
    }
    .btn-cta2{
      background: #333333;
      color: #fff;
      border: 0;
      border-radius: 36px;
      font-weight: 600;
      box-shadow: none;
      font-size: 16px;
      width: 250px;
      height: 67px;
    }
    .btn-ghost{
      background:transparent;
      border:1px solid #ddd;
      color:#333;
      padding:10px 24px;
      border-radius:36px;
      font-weight:600;
    }

    /* card stack to the right of hero */
    .header-card {
      width: 430px;
      margin-top: -40px;
    }
    .card-stack {
      position: relative;
      width: 400px;
      height: 450px;
      margin: auto auto;
    }
    .card-stack .card {
      position: absolute;
      width: 210px;
      height: 120px;
      border-radius:8px;
      box-shadow: 0 18px 36px rgba(0,0,0,0.12);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-weight:700;
      font-size:13px;
      transform-origin:center;
      transition: transform .28s ease, box-shadow .28s ease;
    }
    .card-stack .card:nth-child(1){
      right: 8px;
      top: 8px;
      background: linear-gradient(90deg,#0b0b0b,#232323);
      transform: rotate(-16deg);
      z-index:4;
    }
    .card-stack .card:nth-child(2){
      left: 12px;
      top: 26px;
      background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
      transform: rotate(8deg);
      z-index:3;
    }
    .card-stack .card:nth-child(3){
      right: 40px;
      bottom: 8px;
      background: linear-gradient(90deg,#111111,#3a3a3a);
      transform: rotate(22deg);
      z-index:2;
    }
    .card-stack .card:hover{
      transform: translateY(-8px) scale(1.04);
      box-shadow: 0 30px 60px rgba(0,0,0,0.18);
    }

    /* Features row */
    .features{
      padding: 60px 0px;
    }
    .features .container {
      text-align: center;
    } 
    .features .container h5 {
      margin: 0 0 0px;
      color: #333;
      font-weight: 700;
      font-size: 40px;
      line-height: 74px;
      letter-spacing: 0%;
    } 
    .features .container .lead {
      color: #333;
      font-weight: 400;
      font-size: 24px;
      margin: 0 0 50px;
    } 
    .feature-item{
      padding: 33px 0px;
      text-align: center;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F2F2F2 43.35%, #F2F2F2 69.71%, rgba(255, 255, 255, 0) 98.56%);
    }
    .icon-features {
      height: 184px;
    }
    .feature-icon{
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 10px;
    }
    .feature-label{ 
      font-weight: 500;
      color: #333;
      font-size: 14px;
      line-height: 18px;
    }

    /* Membership cards */
    .membership {
      padding: 0px 0;
      text-align: center;
    }
    .membership .container h5 {
      margin: 0 0 0px;
      color: #333;
      font-weight: 700;
      font-size: 40px;
      line-height: 74px;
      letter-spacing: 0%;
    } 
    .membership .container .lead {
      color: #333;
      font-weight: 400;
      font-size: 18px;
      margin: 0 0 50px;
    } 
    .member-card{
      border-radius:28px;
      padding:28px;
      min-height:280px;
      position:relative;
      overflow:hidden;
      transition: transform .28s ease, box-shadow .28s ease;
      border: 1px solid rgba(0,0,0,0.04);
    }
    .member-card:hover{
      transform: translateY(-8px);
      box-shadow: 0 30px 60px rgba(0,0,0,0.12);
    }
    .member-card h3{
      font-size: 42px;
      margin: 40px 0px 48px 0px;
      color: #fff;
      font-weight: 700;
      text-align: center;
    }
    .member-card .muted-sm{ color: rgba(255,255,255,0.9); font-size:13px; margin-bottom:18px; }

    /* Basic card style (dark) */
    .member-basic{
      background: linear-gradient(180deg, var(--black-card), #1f1f1f);
      color: #fff;
    }
    /* Gold card style */
    .member-gold{
      background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
      color: #2b1f00;
    }

    /* Rounded inner shapes for subtle pattern (like figma) */
    .member-card::before{
      content:'';
      position:absolute;
      width:220px;
      height:220px;
      border-radius:50%;
      opacity:0.06;
      right:-50px;
      bottom:-50px;
      pointer-events:none;
    }
    .member-basic::before{ background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), transparent 40%); }
    .member-gold::before{ background: radial-gradient(circle at 60% 40%, rgba(0,0,0,0.03), transparent 30%); }

    .member-list{
      list-style: none;
      padding-left: 0;
      margin-top: 10px;
      color: rgba(255,255,255,0.95);
      font-weight: 310;
      font-size: 14px;
      line-height: 150%;
      letter-spacing: 0%;
    }
    .member-list li{
      margin-bottom:24px;
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .member-list li .dot{
      width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.9); margin-top:8px;
      flex: 0 0 8px;
    }
    .basic-member {
      width: 100%;
    }

    /* Birthday section */
    .birthday-section{
      padding: 60px 0px 40px 0px;
      border-radius:6px;
      /*background: #f2f2f2;*/
      /*background: linear-gradient(235deg, #fff, #f2f2f2);*/
      background: linear-gradient(to right, #f2f2f2, #ffffff);
      margin-top: 100px;
      display:flex;
      align-items:center;
      gap:28px;
    }
    .birthday-section .container {
      display: inline-flex;
    }
    .image-birdday {
      width: 269px;
      padding-top: 40px;
    }
    .gift-art{
      width:100%;
      max-width:320px;
      display:block;
    }
    .birthday-title{
      margin-bottom: 12px;
      font-weight: 600;
      font-size: 48px;
      line-height: 74px;
      letter-spacing: 0%;
      text-align: center;
      margin-top: 10px;
    }
    .birthday-title2{
      margin-bottom: 12px;
      text-align: left;
      margin-top: 10px;
      font-weight: 400;
      font-size: 46px;
      line-height: 84px;
      color: #0c0c0c;
    }
    .birthday-title2-lead {
      font-size: 22px;
      font-weight: 500;
      margin: -20px 0px 30px 0px;
    }
    .birthday-list{
      list-style:none;
      padding-left:0;
      margin-top:8px;
    }
    .birthday-list li{
      margin-bottom: 12px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: #0c0c0c;
      font-weight: 400;
      font-size: 20px;
      line-height: 150%;
      letter-spacing: 0%;
    }
    .birthday-list li .chk{
      width:18px;height:18px;border-radius:50%;background:#111;color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px;
      flex:0 0 18px;
      margin-top:7px;
    }
    .sec1 {
      text-align: center;
    }
    .sec2 {
      /*padding-top: 50px;*/
    }
    .text-muted-3 {
      color: #181818;
      font-size: 35px;
      font-weight: 360;
      line-height: 74px;
      margin-top: -30px;
      text-align: center;
      margin-bottom: 0px;
    }    
    .text-muted-4 {
      color: #181818;
      font-size: 18px;
      font-weight: 300;
      line-height: 74px;
      letter-spacing: 4%;
      text-align: center;
      margin-bottom: 0px;
    }

    /* CTA at bottom */
    .bottom-cta{
      padding: 0px 0 40px;
      background: #F2F2F2;
      text-align:center;
    }
    .bottom-cta .container h5 {
      padding-top: 60px;
      font-weight: 600;
      font-size: 24px;
      line-height: 100%;
      text-align: center;
      margin-bottom: 25px;
    }
    .bottom-cta p.lead{ 
      color: #333;
      margin-bottom: 43px;
      font-weight: 300;
      font-size: 16px;
      line-height: 100%;
      text-align: center;
      padding-top: 24px;
    }
    .onlydekstop {
      display: block;
    }
    .onlymobile {
      display: none;
    }
    .onlymobile2 {
      display: none;
    }
    
    .btnprivacy {
        color: #333;
        font-size: 14px;
        margin-top: 30px;
        display: block;
        font-style: italic;
    }
    /* Footer */
    footer{ padding:28px 0; color:var(--muted); text-align:center; font-size:14px; border-top:1px solid #eee; }



    /* Responsive */
    @media (max-width: 991.98px){
      .hero h1{ font-size:40px; }
      .card-stack{ margin: 30px auto 0; width: 300px; height: 220px; }
    }
    @media (max-width: 767.98px){
      .onlymobile {
        display: none;
      }
      .navbar {
        background: #fff;
        padding: 10px;
        display: flex;
        align-items: center;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid #eee;
        margin: auto auto;
      }
      .navbar-brand {
        margin: auto;
      }
      .hero {
        background-image: url(https://cdn.shopify.com/s/files/1/0423/9120/8086/files/Frame_1410103580.png?v=1762855986);
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #f2f2f2;
        height: 563px;
      }
      /*.onlymobile {
        display: block;
      }*/
      .hero{ 
        padding: 0px 0px 50px 0px; 
      }
      .hero .container .row .col-lg-5 {
        height: 370px;
        overflow: hidden;
      }
      .header-card {
        width: 100%;
        margin-top: -80px;
      }
      .hero-left{ 
        padding-right: 0;
        margin-top: 300px;
        padding-bottom: 40px;
        background: #f2f2f2;
      }
      .hero h1{ 
        font-size: 26px;
        font-weight: 500;
        margin: 28px 0px 16px 0px;
        line-height: 36px;
        text-align: center;
        color: #333;
      }
      .hero p.lead {
        color: #000;
        max-width: 680px;
        margin-bottom: 32px;
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        text-align: center;
        padding: 0px 40px;
      }
      .btn-bergabung {
        margin: auto;
        font-weight: 700 !important;
        font-size: 14px !important;
        line-height: 100%;
        height: 55px;
      }
      .navbar {
        justify-content: center;
      }
      .card-stack{ width:100%;height:180px; margin-top:22px;display:none; }
      .features .feature-icon{ width:68px;height:68px; }
      .member-card{ border-radius:20px; padding:20px; min-height:unset; }
      .birthday-section{ flex-direction:column; text-align:left; padding:24px; }
      .birthday-title{ 
        font-weight: 600;
        font-size: 34px;
        line-height: 74px;
        letter-spacing: 0%;
        text-align: center;
      }
      .mobile-menu {
        width: 80%;
      }
      .membership {
        padding: 40px 14px 30px 14px;
      }
      .features {
        margin-top: 140px;
        padding: 50px 0px 0px 0px;
      }
      .features .container h5 {
        font-weight: 700;
        font-size: 24px;
        line-height: 150%;
        text-align: center;
        width: 300px;
        margin: 0px auto 32px auto;
      }
      .features .container .gy-4 {
        text-align: center !important;
        padding: 0px 40px;
      }
      .features .container .lead {
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        text-align: center;
        margin: 4px 0px 50px 0px;
      }
      .feature-label {
        font-weight: 600;
        color: #333;
        font-size: 14px;
        line-height: 18px;
        margin-top: 30px;
      }
      .features .container .row .col-6 {
        flex: none;
        width: 50%;
        text-align: center;
        margin: auto;
      }
      .icon-features {
        height: 165px;
      }
      .feature-item{
        padding: 45px 0px;
      }
      .basic-member {
        width: 100%;
      }
      .membership .container h5 {
        font-weight: 400;
        font-size: 24px;
      }
      .membership .container .lead {
        font-weight: 400;
        font-size: 13px;
        line-height: 18px;
        text-align: center;
        padding: 0px 14px;
        margin: 0px 0px 10px;
      }
      .birthday-section {
        padding: 50px 14px;
        background: #f2f2f2;
        border-radius: 50px;
        margin: 0px 14px;
      }
      .birthday-section .container {
        display: block;
      }
      .text-muted-3 {
        font-weight: 400;
        font-size: 25px;
        line-height: 50px;
        text-align: center;
      }
      .text-muted-4 {
        font-weight: 400;
        font-size: 12px;
        line-height: 74px;
        text-align: center;
        margin-top: -10px; 
      }
      .birthday-title2 {
        font-weight: 700;
        font-size: 24px;
        line-height: 100%;
        margin-bottom: 24px;
        text-align: center;
      }
      .birthday-title2-lead {
        font-size: 12px;
        font-weight: 500;
        margin: -10px 0px 30px 0px;
        text-align: center;
      }
      .birthday-list li {
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        margin-bottom: 16px;
      }
      .birthday-list li .chk {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #111;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        flex: 0 0 18px;
        margin-top: 2px;
      }
      .bottom-cta {
        padding: 0px 0 50px;
        background: #fff;
      }
      .bottom-cta .container h5 {
        font-size: 17px;
        padding-top: 50px;
        width: 300px;
        margin: auto;
        line-height: 25px;
      }
      .bottom-cta p.lead {
        font-size: 12px;
        padding-top: 8px;
      }
      .bottom-cta p.lead {
        color: #333;
        margin-bottom: 32px;
        font-weight: 300;
        font-size: 15px;
        line-height: 24px;
        text-align: center;
        padding-top: 8px;
      }
      .btn-cta {
        background: #333;
        color: #fff;
        border: 0;
        padding: 18px 40px;
        border-radius: 36px;
        font-weight: 600;
        box-shadow: none;
        font-size: 16px;
        margin-top: 0px !important;
      }
      .mobilediv {
        height: 32px;
        background: #f2f2f2;
      }
      .hero .container .row .hero-left .d-flex a {
        margin: auto;
      }
      .btn-cta2 {
        background: #333333;
        color: #fff;
        border: 0;
        border-radius: 36px;
        font-weight: 600;
        box-shadow: none;
        font-size: 16px;
        width: 250px;
        height: 55px;
        margin-top: 20px !important;
      }
      .image-birdday {
        width: 213px;
        padding-top: 0px;
        padding-bottom: 40px;
      }
      .onlydekstop {
        display: none;
      }
      .onlymobile2 {
        display: block;
      }
    }

    /* small util */
    #menuBtn { display: none; }
    .text-muted-2 { color: var(--muted); font-size:14px; }