/* full‐page purple gradient bg */
.opt-section {
    width: 100%;
    min-height: 100vh;
    padding: 60px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1E133C 0%, #201E2A 100%);
  }
  
  /* exact card w/o rotation, curve on right */
  .opt-card {
    width: 903px;
    height: 426px;
    opacity: 1;
    background: #002E2B;
  
    /* 6px border on top, bottom, left; none on right */
    border-style: solid;
    border-color: #D7DE27;
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 6px;
    border-right-width: 0;
  
    /* curve on the right */
    border-top-right-radius: 500px;
    border-bottom-right-radius: 500px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  /* thin cream lines at very top & bottom */
  .opt-card::before,
  .opt-card::after {
    content: '';
    position: absolute;
    left: 0;
    width: calc(100% - 500px); /* 903 − 500 = 403px */
    height: 2px;
    background: #F6F0D4;
  }
  .opt-card::before { top: 0; }
  .opt-card::after  { bottom: 0; }
  
  /* left content half */
  .opt-left {
    position: relative;
    width: 403px; /* matches the cut‑off before the curve */
    height: 100%;
    padding: 40px 30px;
    box-sizing: border-box;
    font-family: 'Space Grotesk', sans-serif;
    color: #FFFFFF;
  }
  
  /* arrow buttons */
  .opt-arrow {
    position: absolute;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
  }
  .opt-arrow:hover { background: rgba(255,255,255,0.2); }
  .opt-arrow.opt-up   { top: 12px;  left: 30px; }
  .opt-arrow.opt-down { bottom: 12px; left: 30px; }
  
  /* heading */
  .opt-title {
    margin: 60px 0 16px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #D7DE27;
  }
  
  /* paragraph */
  .opt-desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* right‐side years */
  .opt-right {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    font-family: 'Space Grotesk', sans-serif;
  }
  .opt-year { display: block; }
  .opt-year.active {
    font-size: 60px;
    font-weight: 500;
    color: #E2E7C0;
    margin-bottom: 20px;
  }
  .opt-year.inactive {
    font-size: 24px;
    font-weight: 400;
    color: #7A8A8A;
    opacity: 0.5;
    margin-top: 8px;
  }