:root {
      --haiti: #161032;
      --java: #14CFBC;
      --bright: #FFE830;
      --butterfly: #5C51A2;
      --alabaster: #FAFAFA;
      --r-lg: 16px;
      --r-xl: 26px;
      --shadow: 0 12px 40px rgba(0, 0, 0, .3);
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      color: var(--alabaster);
      background:
        radial-gradient(1100px 700px at 90% -10%, rgba(255, 232, 48, .18), transparent) no-repeat,
        radial-gradient(900px 600px at 10% 0%, rgba(92, 81, 162, .28), transparent) no-repeat,
        var(--haiti);
      -webkit-font-smoothing: antialiased;
      line-height: var(--lh-body);
    }


    /* HERO FAQ */
    .hero {
      max-width: 1200px;
      margin: var(--sp-4) auto 0;
      padding: 0 var(--sp-3)
    }

    .hero-card {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(92, 81, 162, .25), rgba(92, 81, 162, .10));
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 32px;
      box-shadow: var(--shadow);
      padding: var(--sp-4);
    }

    .hero-badge {
      color: var(--java);
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: var(--fs-micro);
      font-family: var(--font-heading)
    }

    .hero h1 {
      font-size: var(--fs-h1);
      margin: 6px 0 8px;
      line-height: var(--lh-heading);
      font-weight: 700;
      font-family: var(--font-heading)
    }

    .hero p {
      opacity: .9;
      max-width: var(--prose-max);
      margin: 0
    }

    .hero-decor {
      position: absolute;
      inset: auto -140px -140px auto;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(255, 232, 48, .22), rgba(255, 232, 48, 0));
      pointer-events: none;
    }

    /* FILTER/SEARCH (optional cosmetic, reduce “golurile”) */
    .tools {
      max-width: 1000px;
      margin: var(--sp-3) auto 0;
      padding: 0 var(--sp-3);
      display: flex;
      gap: var(--sp-2);
      flex-wrap: wrap
    }

    .search {
      flex: 1;
      min-width: 240px
    }

    .search input {
      width: 100%;
      padding: var(--sp-2);
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .1);
      background: #1a1540;
      color: #fff;
      outline: none;
    }

    .pill {
      padding: var(--sp-1) var(--sp-2);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .1);
      background: #140f35;
      cursor: pointer;
      font-weight: 700;
      font-size: var(--fs-btn);
      color: #fff;
      /* ← text alb */
    }

    .pill.active {
      border-color: var(--java);
      box-shadow: 0 0 0 3px rgba(20, 207, 188, .12) inset;
      color: #fff;
      /* ← rămâne alb și când e activ */
    }

    /* FAQ LIST */
    .faq-wrap {
      max-width: 1000px;
      margin: var(--sp-2) auto var(--sp-8);
      padding: 0 var(--sp-3);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--sp-2)
    }

    .faq-item {
      border: 1px solid rgba(255, 255, 255, .08);
      background: linear-gradient(180deg, rgba(26, 21, 64, .92), rgba(26, 21, 64, .78));
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: 0 6px 22px rgba(0, 0, 0, .24);
    }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      text-align: left;
      background: transparent;
      color: var(--alabaster);
      padding: var(--sp-3);
      border: none;
      cursor: pointer;
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      font-weight: 700;
    }

    .faq-q .k {
      color: var(--java);
      font-size: var(--fs-micro);
      letter-spacing: .18em;
      text-transform: uppercase;
      opacity: .86;
      font-family: var(--font-heading)
    }

    .faq-q .t {
      flex: 1
    }

    .faq-q .ic {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: rgba(20, 207, 188, .14);
      color: var(--java);
      font-weight: 900;
      transition: transform .2s ease;
    }

    .faq-a {
      height: 0;
      overflow: hidden;
      opacity: 0;
      padding: 0 var(--sp-3);
      transition: height .34s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
      will-change: height;
    }

    .faq-a p {
      opacity: .92;
      margin: 0 0 var(--sp-3)
    }

    .faq-item.active .faq-a {
      opacity: 1;
    }

    .faq-item.active .ic {
      transform: rotate(45deg)
    }

    .faq-item:hover {
      border-color: rgba(255, 255, 255, .14)
    }

    /* SUBTLE BAND */
    .band {
      margin-top: -26px;
      height: 90px;
      background:
        radial-gradient(180px 180px at 10% 40%, rgba(20, 207, 188, .08), transparent) repeat,
        radial-gradient(160px 160px at 70% 60%, rgba(255, 232, 48, .08), transparent) repeat;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .12), rgba(0, 0, 0, .3));
      filter: saturate(120%);
    }

    .credits {
      opacity: .75;
      font-size: var(--fs-small)
    }

    @media (max-width:820px) {
      .hero-card {
        padding: var(--sp-3)
      }

      .hero-decor {
        width: 380px;
        height: 380px;
        inset: auto -120px -120px auto
      }

      .tools {
        gap: var(--sp-1)
      }
    }