:root{
      --es-bg:#151516;
      --es-surface:#202022;
      --es-surface-soft:#1b1c21;
      --es-border:#2a2b32;
      --es-border-soft:#2f303a;
      --es-text:#f5f7fb;
      --es-muted:#9aa3b2;
      --es-accent:#FF4136;
      --es-radius:16px;
      --es-shadow:0 10px 30px rgba(0,0,0,.55);
      --es-max:1320px; /* leveämpi sivu */
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:#151516;
      color:var(--es-text);
    }

    .faq-shell{
      max-width:var(--es-max);
      margin:32px auto 72px;
      padding:0 24px;
      display:grid;
      grid-template-columns:minmax(0,1.9fr) minmax(280px,0.9fr);
      gap:28px;
    }
    @media (max-width: 992px){
      .faq-shell{
        grid-template-columns:minmax(0,1fr);
        margin-top:20px;
      }
    }

    /* Fade in animaatio korteille */
    @keyframes faqFadeInUp {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .faq-card{
      background:var(--es-surface);
      border-radius:var(--es-radius);
      border:1px solid var(--es-border);
      box-shadow:var(--es-shadow);
      overflow:hidden;
      opacity:0;
      transform:translateY(10px);
      animation:faqFadeInUp .35s cubic-bezier(.22,1,.36,1) forwards;
    }
    .faq-shell .faq-card:nth-child(2){
      animation-delay:.06s;
    }

    /* LEFT: FAQ MAIN */
    .faq-main-header{
      padding:22px 22px 8px;
      border-bottom:1px solid var(--es-border-soft);
      background:#202022; /* ei gradienttia */
    }
    .faq-main-title{
      font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);
      font-weight:700;
      margin:0 0 4px;
      letter-spacing:.02em;
    }
    .faq-main-sub{
      margin:0;
      color:var(--es-muted);
      font-size:.95rem;
    }

    .faq-tabs{
      display:flex;
      flex-wrap:nowrap;          /* ei mene päällekkäin desktopilla */
      gap:10px;
      padding:14px 22px 14px;
      border-bottom:1px solid var(--es-border-soft);
      background:#151516;
      overflow-x:auto;
      scrollbar-width:none;
    }
    .faq-tabs::-webkit-scrollbar{display:none;}

    @media (max-width: 768px){
      .faq-tabs{
        flex-wrap:wrap;          /* mobiilissa saa mennä kahdelle riville */
        overflow-x:visible;
      }
    }

    .faq-tab{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 16px;
      border-radius:999px;
      border:1px solid transparent;
      background:#202022;
      color:var(--es-muted);
      font-size:.9rem;
      font-weight:600;
      cursor:pointer;
      user-select:none;
      transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .12s ease,
        box-shadow .18s ease;
    }
    .faq-tab i{
      font-size:1rem;
    }
    .faq-tab.is-active{
      background:#2a2a33;
      border-color:var(--es-accent);
      color:#fff;
      box-shadow:0 0 0 1px rgba(0,0,0,.6);
    }
    .faq-tab:not(.is-active):hover{
      background:#24242b;
      transform:translateY(-1px);
    }

    .faq-body{
      padding:10px 22px 22px;
    }

    .faq-panel{
      display:none;
      animation:faqFadeInUp .25s cubic-bezier(.22,1,.36,1);
    }
    .faq-panel.is-active{
      display:block;
    }

    .faq-section-title{
      font-size:1.02rem;
      font-weight:600;
      margin:4px 0 10px;
    }

    details.faq-qa{
      background:#202022;
      border-radius:12px;
      border:1px solid #2b2c35;
      margin-bottom:8px;
      overflow:hidden;
      transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .16s ease,
        background-color .18s ease;
    }
    details.faq-qa[open]{
      border-color:#3a3b48;
      background:#23232b;
      box-shadow:0 10px 26px rgba(0,0,0,.55);
      transform:translateY(-1px);
    }

    summary.faq-q{
      list-style:none;
      cursor:pointer;
      padding:10px 14px;
      font-size:.95rem;
      font-weight:600;
      position:relative;
      color:#f5f7ff;
    }
    summary.faq-q::-webkit-details-marker{display:none;}

    summary.faq-q::after{
      content:"\f107";
      font-family:"Font Awesome 5 Free";
      font-weight:900;
      position:absolute;
      right:12px;
      top:50%;
      transform:translateY(-50%);
      font-size:.85rem;
      opacity:.8;
      transition:transform .18s ease;
    }
    details[open] > summary.faq-q::after{
      transform:translateY(-50%) rotate(180deg);
    }

    .faq-a{
      padding:10px 14px 12px;
      border-top:1px solid #2b2c35;
      font-size:.9rem;
      color:#e5e7f5;
      line-height:1.6;
    }
    .faq-a ul{
      padding-left:18px;
      margin:6px 0 0;
    }
    .faq-a li{
      margin-bottom:3px;
    }

    /* RIGHT: SUPPORT CARD */
    .faq-support{
      padding:22px 22px 20px;
      display:flex;
      flex-direction:column;
      gap:12px;
      background:#202022; /* ei gradienttia */
    }
    .faq-support-title{
      font-size:1.1rem;
      font-weight:700;
      margin:0;
    }
    .faq-support-sub{
      margin:0;
      font-size:.92rem;
      color:var(--es-muted);
    }
    .faq-support-list{
      margin:12px 0 0;
      padding:0;
      list-style:none;
      font-size:.9rem;
      color:#e5e7ff;
    }
    .faq-support-list li{
      display:flex;
      align-items:center;
      gap:8px;
      margin-bottom:6px;
    }
    .faq-support-list i{
      color:var(--es-accent);
      font-size:.95rem;
    }

    .faq-support-actions{
      margin-top:14px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .faq-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      padding:8px 16px;
      border-radius:999px;
      border:1px solid transparent;
      font-size:.9rem;
      font-weight:600;
      text-decoration:none;
      cursor:pointer;
      transition:filter .15s ease, transform .12s ease, box-shadow .15s ease, border-color .15s ease;
      white-space:nowrap;
    }
    .faq-btn--primary{
      background:var(--es-accent);
      color:#fff;
      box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.65);
    }
    .faq-btn--ghost{
      background:transparent;
      color:var(--es-muted);
      border-color:#2e2f3a;
    }
    .faq-btn:hover{
      filter:brightness(1.05);
      transform:translateY(-1px);
    }

    @media (max-width: 576px){
      .faq-main-header,
      .faq-tabs,
      .faq-body,
      .faq-support{
        padding-left:16px;
        padding-right:16px;
      }
    }