:root {
      --bg: #060606;
      --card: #111;
      --muted: #999;
      --accent: #ffbf00;
      --accent-2: #ffd24d;
      --radius: 12px;
      --gap: 18px;
      --maxw: 1100px;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color: #eee;
    }



    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      background: var(--bg);
      padding: 28px 16px;
      display: flex;
      justify-content: center;
      font-family: "Poppins", sans-serif;
      padding-top: 6em;
    }

    a {
      text-decoration: none;
      color: #ffbf00;
      font-weight: 700;
    }

    .layout-wrapper {
      margin-top: .5em;
      width: 100%;
      max-width: var(--maxw);
    }

    /* HEADER */
    .header-logo-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1em 0;
      margin-bottom: 10px;
      width: 100%;
      background: #111111;
      position: absolute;
      top: 0;
      left: 0;
    }

    .header-brand-image {
      height: 44px;
      width: auto;
    }

    /* HERO */
    .hero-section {
      background: #0b0b0b;
      border-radius: var(--radius);
      display: flex;
      gap: 18px;
      align-items: center;
      margin-bottom: var(--gap);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
      position: relative;
      width: 100%;

    }

    .hero-text {
      position: absolute;
      left: 2vw;
      top: calc(50% - 7em);
    }

    .hero-title {
      margin: 0;
      font-size: 1.4vw;
      padding-left: .5em;
    }

    .titles:before {
      content: '';
      width: .3em;
      height: .9em;
      background-color: #ffbf00;
      color: #ffbf00;
      border-radius: 1em;
      display: block;
      position: absolute;
      top: .25em;
      left: 0;
    }

    .hero-subtitle {
      margin-top: 6px;
      font-size: 2.5vw;
      font-weight: 700;
    }

    #chat-btn {
      background-color: #24cfe5;
      color: #252525;
      position: relative;
      margin-top: -.5em;
      display: block;
      width: 12vw;
      padding: .5em .8em .5em 3.6em;
      border-radius: .3em;
      font-weight: 700;
      font-size: 1.7vw;
      cursor: pointer;
    }

    #chat-btn:hover {
      filter: brightness(1.1);
      -webkit-box-shadow: 0px 0px 45px 8px rgba(66, 192, 214, 0.07);
      -moz-box-shadow: 0px 0px 45px 8px rgba(66, 192, 214, 0.07);
      box-shadow: 0px 0px 45px 8px rgba(66, 192, 214, 0.07);
    }

    #chat-bell {
      position: absolute;
      left: .25em;
      top: -.3em;
      width: 3em;
      display: inline-block;

      animation: tada-paused 1.3s infinite ease-in-out;
    }

    @keyframes tada-paused {

      0% {
        transform: scale(1) rotate(0deg);
      }

      25% {
        transform: scale(1) rotate(0deg);
      }

      49% {
        transform: scale(1) rotate(0deg);
      }

      50% {
        transform: scale(1.1) rotate(-10deg);
      }

      65% {
        transform: scale(1) rotate(10deg);
      }

      70% {
        transform: scale(1.1) rotate(-10deg);
      }

      80% {
        transform: scale(1) rotate(3deg);
      }

      90% {
        transform: scale(1) rotate(0deg);
      }

      100% {
        transform: scale(1) rotate(0deg);
      }
    }

    .hero-image {
      height: auto;
      border-radius: 8px;

      width: 100%;
    }


    /* LIVE CHAT */
    .chat-container {
      background: var(--card);
      border-radius: 10px;
      padding: 18px;
      margin-bottom: var(--gap);
    }

    .chat-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .chat-top-subtitle {
      color: #999;
    }

    .chat-window {
      background: #0d0d0d;
      border-radius: 8px;
      padding: 12px;
      min-height: 110px;
      color: var(--muted);
    }

    .chat-input-area {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }

    .chat-input-field {
      flex: 1;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #111;
      background: #070707;
      color: #eee;
    }

    .chat-send-btn {
      background: var(--accent);
      color: #000;
      padding: 10px 14px;
      border-radius: 8px;
      border: 0;
      cursor: pointer;
      font-weight: 600;
    }

    /* CTA BAND */
    .cta-band {
      margin: 3.4em 0;
      border-radius: 10px;
      padding: 2em;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .cta-text {
      color: #eee;
      text-shadow: 5px 3px 30px #00000070;
      font-weight: 600;
      font-size: 2vw;
      text-align: right;
      /* display: block; */
      width: 50%;
    }

    .cta-link-btn {
      background: var(--accent);
      padding: .5em 1.4em;
      border-radius: 8px;
      color: #000;
      font-weight: 700;
      text-decoration: none;
      /* text-align: left; */
      font-size: 2vw;
      color: #15253d;
    }

    /* HOW TO GRID */
    .howto-section-title {
      font-size: 1.5vw;
      margin: 1em 0 12px;
      position: relative;
      padding-left: .5em;
    }

    .howto-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
      gap: 1.4em;
      margin-bottom: var(--gap);
    }

    .howto-card {
      background: var(--card);
      border-radius: 12px;
      padding: 1.3em;
      min-height: 140px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* box-shadow:0 6px 16px rgba(0,0,0,0.5); */
    }

    .howto-card-header {
      display: flex;
      justify-content: space-between;
      position: relative;
    }

    .howto-card-icon {
      width: 50%;
      height: auto;
      margin: auto;
      display: block;
    }

    .howto-card-play {
      width: 2.4em;
      height: 1.8em;
      border-radius: .5em;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, var(--accent), var(--accent-2));
      color: #111;
      font-weight: 700;
      position: absolute;
      top: 0;
      right: 0;
      font-size: 1.6em;
    }

    .howto-card-title {
      margin-top: 10px;
      font-weight: 600;
      text-align: center;
      font-size: 1.2vw;
      color: #eeeeee;
    }

    /* ANDROID BANNER */
    .android-banner {
      background: #0b0b0b;
      border-radius: 12px;
      padding: 18px;
      display: flex;
      gap: 18px;
      align-items: center;
      margin-bottom: var(--gap);
    }

    .android-title {
      margin: 0;
    }

    .android-description {
      margin: 6px 0 12px;
      color: #ccc;
    }

    .android-download-btn {
      background: var(--accent);
      padding: 10px 14px;
      border-radius: 8px;
      text-decoration: none;
      color: #000;
      font-weight: 700;
    }

    .android-image {
      width: 150px;
      height: auto;
      border-radius: 8px;
    }

    /* FAQ */
    .faq-section {
      margin-bottom: 3.5em;
    }

    .faq-title {
      font-size: 1.5vw;
      margin: 6px 0 12px;
      position: relative;
      padding-left: .5em;
    }

    .faq-accordion-item {
      background: var(--card);
      margin-bottom: 10px;
      border-radius: 8px;
      overflow: hidden;
    }

    .faq-accordion-head {
      display: flex;
      justify-content: space-between;
      padding: 14px 16px;
      cursor: pointer;
      font-size: 1.1vw;
      font-weight: 700;
    }

    .faq-accordion-body {
      padding: 0 16px 16px;
      color: var(--muted);
      display: none;
    }

    .faq-accordion-body.open {
      display: block;
    }

    /* FOOTER */
    .footer-section {
      margin-top: 30px;
      color: var(--muted);
      font-size: 13px;
    }

    .footer-description {
      max-width: 650px;
    }

    .article-detail-content {
      color: #d5d5d5;
      font-size: 1vw;
      word-wrap: break-word;
    }

    .text.qt {
      color: #ffbf00;
      font-weight: 600;
      margin: 0 0 -1em 0;
    }

    .app-cta {
      background: #ffbe00;
      color: #1b1b1b;
      text-transform: uppercase;
      font-size: 1.4vw;
      padding: .6em 1.6em;
      border-radius: .3em;
    }

    .app-cta img {
      width: 1.7vw;
      height: auto;
      margin: 0 .7vw -.2em 0
    }

    .hero-image-m {
      display: none
    }

    #videoModal.modal {
      display: none;
      position: fixed;
      z-index: 99999999 !important;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
    }

    #videoModal .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 26vw;
      border-radius: .5em;
    }

    #videoModal .closevid {
      position: absolute;
      top: -19px;
      right: -40px;
      font-size: 50px;
      cursor: pointer;
      z-index: 99999;
      opacity: 1;
      color: #c5c5c5;
      text-shadow: none;
      font-weight: 400;
    }

    video {
      width: 100%;
      height: auto;
      border-radius: .5em;
      border: .2em solid #3e3e3e;
    }

    .footer-section {
      text-align: center;
      border-top: 2px solid #242424a1;
      padding: 1.1em;
      margin-top: 5em;
    }

    @media(max-width:540px) {
      .hero-section {
        flex-direction: column;
      }
    }

    @media(max-width:700px) {
      body {
        padding-top: 4.9em;
      }

      .header-brand-image {
        width: 8em;
      }

      .header-logo-bar {
        padding: .5em 0;
      }

      .hero-text {
        transform: scale(2.1);
        left: 3%;
        top: 18%;
        transform-origin: top left;
      }

      .hero-image {
        display: none;
      }

      .hero-image-m {
        display: block;
        width: 100%;
        border-radius: .5em
      }

      .hero-title {
        font-size: .5em;
        line-height: 1.5em;
      }

      .layout-wrapper {
        margin-top: 0;
      }

      .hero-subtitle {
        margin-top: 0;
      }

      .faq-section {
        margin-bottom: 2em;
      }

      .footer-section {
        margin-top: 2.5em;
      }

      #chat-btn {
        transform: scale(1.55);
        transform-origin: top left;
        border-radius: .3em;
        padding: .5em 0em .35em 3.5em;
        margin-top: -.1em;
        font-weight: 800;
        box-shadow: 00px 0px 0px 3px rgb(33 33 33 / 91%);
        -webkit-box-shadow: 0px 0px 0px 3px rgb(33 33 33 / 91%);
        -moz-box-shadow: 0px 0px 0px 3px rgb(33 33 33 / 91%);
      }

      #chat-bell {
        left: .15em;
      }

      .howto-section-title,
      .faq-title {
        font-size: 1.3em;
        line-height: 1.35em;
        margin-top: 1em;
        font-weight: 600;
      }

      .howto-grid {
        grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
        gap: 1em;
      }

      .howto-card {
        padding: 1em 1em;
      }

      .howto-card-icon {
        width: 80%;
      }

      .howto-card-title {
        font-size: .9em;
        margin: 0 auto;
      }

      .howto-card-play {
        transform-origin: top right;
        right: -.4em;
        top: -.4em;
        box-sizing: border-box;
        border: solid .25em #111111;
        font-size: 1.4em;
        height: 1.9em;
        width: 2.2em;
        padding-left: .15em;
      }

      .faq-accordion-head {
        font-size: 1.05em;
      }

      .article-detail-content {
        font-size: 1em;
      }

      .cta-band {
        padding: 1em .5em;
        display: block;
        margin: 1.8em auto;
      }

      .cta-text {
        font-size: 1.2em;
        width: 100%;
        text-align: center;
      }

      .cta-link-btn {
        width: 60%;
        margin: .5em auto .3em auto;
        text-align: center;
        display: block;
        font-size: 1.2em;
      }

      #videoModal .closevid {
        top: -.5em;
        right: -.5em;
        background: #020202;
        height: 34px;
        width: 34px;
        text-align: center;
        line-height: 34px;
        border-radius: 50em;
        border: .1em solid #3e3e3e;
        font-size: 30px;
      }

      #videoModal .modal-content {
        max-width: 86%;
      }

      .video-link:after {
        width: 30px;
        height: 30px;
        background-size: cover;
      }
    }