button, .panel, .tabs, .tab-btn, .gif-frame, .feature-item, .cta, .hint-box {
        border-radius: 0 !important;
      }

      main{
        display:grid;
        grid-template-columns: 1.05fr 1.2fr;
        gap: 36px;
        align-items: stretch;
      }

      /* LEFT COLUMN */
      .left{
        padding: 18px 6px 6px;
      }

      .hero-heading{
        font-size: clamp(26px, 2.4vw, 34px);
        font-weight:700;
        margin: 10px 0 22px;
      }

      .feature-list{
        display:flex;
        flex-direction:column;
        gap: 0px;
        margin: 0 0 20px;
        padding: 0;
        list-style:none;
      }

      .feature-item{
        display:flex;
        gap: 12px;
        border-left:1px solid var(--border);
        padding: 15px 14px;
      }

      .feature-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        border: none;
        background: transparent;
        margin-right: 8px;
        line-height: 0;
      }
      .feature-icon svg{
        width: 18px;
        height: 18px;
        display:block;
      }

      .feature-text{
        line-height:1.35;
        font-size: 15.5px;
        color: var(--text);
      }

      .feature-title{
        font-weight:700;
        display:flex;
        align-items:center;
        line-height: 1.2;
        margin: 0 0 2px;
      }

      .feature-desc{
        display:block;
      }

      .feature-title.green, .feature-icon.green { color: var(--green); }
      .feature-title.purple, .feature-icon.purple { color: var(--purple); }
      .feature-title.blue, .feature-icon.blue { color: var(--blue); }

      .hint{
        color: var(--muted);
        font-size: 12.5px;
        margin: 10px 0 40px;
      }

/* RIGHT COLUMN PANEL */
.right{
  padding: 18px 18px 22px;
  display:flex;
  flex-direction:column;
  min-height: 420px;
}

/* Tabs container now behaves like a full-width tab bar */
.tabs{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  margin-bottom: 0px;
}

/* Tab buttons styled as true tabs:
   - no border
   - no background
   - equal width
   - underline when active */
.tab-btn{
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  width: 100%;
  padding: 12px 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .4px;

  cursor: pointer;

  /* underline "track" */
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.tab-btn svg{
  width: 16px;
  height: 16px;
}

/* Active tab underline */
.tab-btn[aria-selected="true"]{
  color: var(--text);
  border-bottom-color: var(--text);
}

/* Optional subtle hover that still feels tab-like */
.tab-btn:hover{
  color: var(--text);
}

/* Mobile: allow wrapping without breaking layout */
@media (max-width: 520px){
  .tabs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

      .tab-panels{
        position:relative;
        flex:1;
        display:flex;
      }

      .tab-panel{
        display:none;
        width:100%;
      }
      .tab-panel.active{
        display:block;
      }

      .gif-frame{
        position:relative;
        width:100%;
        /* height defined by intrinsic video height */
        background: #0b0b0b;
        overflow:hidden;
      }

      .gif-frame video{
        position: static;
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
      }

      /* Animated placeholder that feels "gif-like" */
      .gif-placeholder{
        position:absolute;
        inset:0;
        background-size: 240% 240%;
      }

      .gif-grid{
        position:absolute;
        inset:0;
        background-image:
          linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
        background-size: 28px 28px;
        opacity: .35;
        pointer-events:none;
      }

      .gif-badge{
        position:absolute;
        top: 16px;
        left: 16px;
        border:1px solid var(--border);
        background: rgba(255,255,255,0.03);
        padding: 6px 8px;
        font-size: 10px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 1.2px;
        font-weight: 700;
      }

      .overlay-text{
        position: static;
        max-width: 100%;
        text-align: center;
        font-size: clamp(14px, 1.15vw, 16px);
        font-weight: 600;
        color: var(--text);
        padding: 10px 12px;
      }

      /* RESPONSIVE */
      @media (max-width: 980px){
        main{
          grid-template-columns: 1fr;
        }
        .right{
          min-height: 380px;
        }
      }

      @media (max-width: 520px){
        .tab-btn{
          font-size: 11.5px;
        }
        .feature-text{
          font-size: 14.5px;
        }
      }