/* ─────────────────────────────────────────────────
       BASE
    ───────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: 'Inter', sans-serif;
      color: #101828;
      background: #fff;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    /* ─────────────────────────────────────────────────
       TOP UTILITY BAR  (44px, brand-50 bg)
    ───────────────────────────────────────────────── */
    .top-bar {
      background: #EBEEFD;
      border-bottom: 1px solid #EAECF0;
      height: 44px;
      padding: 0 40px;
    }
    .top-bar-link {
      font-size: 14px;
      font-weight: 500;
      color: #475467;
      text-decoration: none;
      padding: 0 12px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      transition: color .15s;
    }
    .top-bar-link:hover { color: #2a3343; }
    .top-bar-link.active { background: #fff; color: #2a3343; }

    /* ─────────────────────────────────────────────────
       MAIN HEADER  (88px, white, sticky)
    ───────────────────────────────────────────────── */
    .main-header {
      background: #fff;
      border-bottom: 1px solid #EAECF0;
      height: 88px;
      padding: 0 40px;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .logo-wrap {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
    }
    .logo-wrap svg {
      height: 31px;
      width: auto;
      display: block;
    }
    .nav-link-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      font-weight: 500;
      color: #2a3343;
      text-decoration: none;
      padding: 8px 12px;
      border-radius: 4px;
      white-space: nowrap;
      transition: background .15s;
    }
    .nav-link-item:hover { background: #f5f6ff; color: #3A58EF; }
    .nav-link-item svg { opacity: .7; flex-shrink: 0; }

    /* Schedule a Call button */
    .btn-schedule {
      background: #3A58EF;
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      border: none;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      white-space: nowrap;
      transition: background .15s;
      cursor: pointer;
      flex-shrink: 0;
    }
    .btn-schedule:hover { background: #314BD0; color: #fff; }
    .btn-schedule-sm { font-size: 14px; padding: 8px 14px; }
    .btn-schedule-lg { 
      padding: 12px 20px;
      border-radius: 4px;
      background: var(--Theme-Blue-500, #3A58EF);
      box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
      color: var(--White, #FFF);
      font-family: Inter;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px;
    }

    /* Hamburger */
    .mobile-menu-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      border-radius: 4px;
      line-height: 0;
    }
    .mobile-menu-btn:hover { background: #f5f6ff; }

    /* Mobile drawer */
    .mobile-nav-drawer {
      display: none;
      flex-direction: column;
      background: #fff;
      border-bottom: 1px solid #EAECF0;
      padding: 8px 20px 16px;
    }
    .mobile-nav-drawer.open { display: flex; }
    .mobile-nav-item {
      font-size: 14px;
      font-weight: 500;
      color: #2a3343;
      text-decoration: none;
      padding: 10px 0;
      border-bottom: 1px solid #f2f4f7;
    }
    .mobile-nav-item:last-child { border-bottom: none; }
    .mobile-nav-item:hover { color: #3A58EF; }

    /* ─────────────────────────────────────────────────
       HERO BANNER
    ───────────────────────────────────────────────── */
    .hero-section {
      /* background: #12327B; */
      background: url('../images/what-sets-page/what_sets_us_a_part_Page_Banner_Bg.png');
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      overflow: hidden;
      /* min-height: 510px; */
    }
    .hero-blob-l {
      position: absolute;
      left: -60px; bottom: -80px;
      width: 360px; height: 360px;
      background: radial-gradient(circle, rgba(58,88,239,.45) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .hero-blob-r {
      position: absolute;
      right: -30px; top: -60px;
      width: 420px; height: 420px;
      background: radial-gradient(circle, rgba(58,88,239,.20) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .hero-pattern {
      position: absolute; inset: 0;
      background-image:
        radial-gradient(ellipse at 70% 50%, rgba(58,88,239,.12) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      padding: 72px 140px;
    }
    .hero-heading {
      font-size: 40px;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -.8px;
      margin: 0 0 24px;
    }
    .hero-subheading {
      font-size: 24px;
      font-weight: 700;
      color: #fff;
      line-height: 1.33;
      margin: 0 0 24px;
    }
    .hero-video-wrap {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 24px 48px rgba(0,0,0,.35);
    }
    .hero-video-wrap img {
      width: 100%;
      height: 365px;
      object-fit: cover;
      display: block;
      border-radius: 24px;
    }
    .play-btn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      width: 80px; height: 80px;
      background: #3A58EF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(58,88,239,.5);
      transition: background .15s, transform .15s;
    }
    .play-btn:hover { background: #314BD0; transform: translate(-50%,-50%) scale(1.05); }
    .play-btn svg { margin-left: 4px; }

    /* ─────────────────────────────────────────────────
       ACCORDION SECTION
    ───────────────────────────────────────────────── */
    .accordion-section { padding: 72px 140px; background: #fff; }
    .section-heading {
      font-size: 36px;
      font-weight: 700;
      color: #101828;
      text-align: center;
      line-height: 1.2;
      letter-spacing: -.02em;
      margin: 0 0 12px;
    }
    .section-subtitle {
      font-size: 16px;
      font-weight: 400;
      color: #475467;
      text-align: center;
      line-height: 1.5;
      margin: 0 0 40px;
    }

    /* acc-table wrapper */
    .acc-table { 
      width: 100%;
      border-radius: 16px;
      border: 1px solid var(--Text-Grey-200, #EAECF0);
      background: var(--White, #FFF);
      padding: 24px;
    }
    .acc-colgroup { display: flex; flex-direction: column; width: 100%; }

    /* Category header row */
    .acc-cat-row {
      display: flex;
      align-items: center;
      /* background: #1e3a6e; */
      padding: 16px 24px;
      width: 100%;
      margin-top: 16px;
      border-radius: 8px;
      background: var(--Theme-Blue-800, #182878);
    }
    .acc-cat-row:first-child { 
      margin-top: 0; 
      border-radius: 8px;
      background: var(--Theme-Blue-800, #182878);
    }
    .acc-cat-label {
      flex: 1 0 0;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      color: #fff;
    }
    .acc-col-header {
      flex: 0 0 170px;
      width: 170px;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      color: #fff;
      white-space: nowrap;
    }

    /* Item row */
    .acc-item-row {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    /* Trigger button */
    .acc-item-trigger {
      display: flex;
      align-items: center;
      gap: 0;
      cursor: pointer;
      user-select: none;
      padding: 16px 24px;
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      transition: background .15s;
    }
    .acc-item-trigger:hover { background: #fafafa; }

    /* Left content column */
    .acc-trigger-content {
      flex: 1 0 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Title row */
    .acc-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 28px;
    }

    /* +/- icons */
    .acc-icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .acc-icon-minus { display: none; }
    .acc-item-row.open .acc-icon-plus  { display: none; }
    .acc-item-row.open .acc-icon-minus { display: flex; }

    /* Item label */
    .acc-item-label {
      font-size: 18px;
      font-weight: 600;
      line-height: 28px;
      color: #2a3343;
      flex: 1 0 0;
      min-width: 0;
    }

    /* Expanded body */
    .acc-body-text {
      display: none;
      padding-left: 32px;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color: #2a3343;
      text-align: justify;
    }
    .acc-body-text p { margin: 0; }
    .acc-body-text p + p { margin-top: 16px; }
    .acc-item-row.open .acc-body-text { display: block; }

    /* When open: anchor to top */
    .acc-item-row.open .acc-item-trigger { align-items: flex-start; }
    .acc-item-row.open .acc-check-col { padding-top: 14px; }

    /* Check / cross columns */
    .acc-check-col {
      flex: 0 0 170px;
      width: 170px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .acc-check-yes,
    .acc-check-no {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      flex-shrink: 0;
    }

    /* Divider */
    .acc-divider { height: 1px; background: #EAECF0; width: 100%; }

    /* Legend */
    .legend-row {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-top: 24px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #344054;
    }

    /* ─────────────────────────────────────────────────
       RESPONSIVE BREAKPOINTS
    ───────────────────────────────────────────────── */
    @media (max-width: 1200px) {
      .hero-inner       { padding: 60px 80px; }
      .accordion-section { padding: 60px 80px; }
    }
    @media (max-width: 992px) {
      .hero-inner        { padding: 48px 40px; }
      .hero-heading      { font-size: 32px; }
      .hero-subheading   { font-size: 20px; }
      .hero-video-wrap img { height: 260px; }
      .accordion-section { padding: 48px 24px; }
      .section-heading   { font-size: 28px; }
      .acc-col-header    { flex: 0 0 100px; width: 100px; font-size: 13px; }
      .acc-check-col     { flex: 0 0 100px; width: 100px; }
      .acc-item-label    { font-size: 16px; line-height: 24px; }
    }
    @media (max-width: 768px) {
      .main-header       { padding: 0 20px; height: 68px; }
      .hero-inner        { padding: 40px 24px; }
      .hero-heading      { font-size: 28px; }
      .hero-subheading   { font-size: 18px; }
      .hero-video-wrap img { height: 220px; }
      .accordion-section { padding: 40px 16px; }
      .section-heading   { font-size: 24px; }
      .section-subtitle  { font-size: 14px; }
      .acc-cat-row       { padding: 14px 16px; }
      .acc-col-header    { flex: 0 0 80px; width: 80px; font-size: 12px; }
      .acc-check-col     { flex: 0 0 80px; width: 80px; }
      .acc-item-trigger  { padding: 14px 16px; gap: 12px; }
      .acc-item-label    { font-size: 15px; line-height: 22px; }
      .acc-body-text     { font-size: 14px; padding-left: 28px; }
    }
    @media (max-width: 576px) {
      .logo-wrap svg     { height: 24px; }
      .acc-col-header    { flex: 0 0 64px; width: 64px; font-size: 11px; }
      .acc-check-col     { flex: 0 0 64px; width: 64px; }
      .acc-item-trigger  { padding: 12px 12px; gap: 8px; }
      .acc-item-label    { font-size: 14px; line-height: 22px; }
      .acc-body-text     { font-size: 13px; padding-left: 24px; }
    }