/* Auto-generated from the original inline <style> blocks. Editable hero image via --ch-hero-bg. */

/* About Us hero background (full image + no black bars) */
      .hero__bg {
        background: none !important;
        filter: none;
        transform: none;
      }

      .hero__bg::before,
      .hero__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: var(--ch-hero-bg);
        background-repeat: no-repeat;
        background-position: center;
      }

      .hero__bg::before {
        background-size: cover;
        filter: blur(18px) brightness(0.95) saturate(1.05);
        transform: scale(1.12);
      }

      .hero__bg::after {
        background-size: contain;
      }
    

    .aboutHeroBadge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .02em;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .aboutHeroBadge::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #7dd3fc;
      box-shadow: 0 0 0 6px rgba(125, 211, 252, .12);
    }

    .aboutSection {
      position: relative;
      padding: 88px 0 96px;
      background:
        radial-gradient(circle at top left, rgba(11, 63, 191, .05), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
      overflow: hidden;
    }

    .aboutWrap {
      display: grid;
      gap: 34px;
    }

    .aboutIntro {
      max-width: 860px;
      margin: 0 auto;
      text-align: center;
    }

    .aboutIntro__title {
      margin: 0 0 14px;
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.08;
      letter-spacing: -.03em;
      color: #0f172a;
    }

    .aboutIntro__text {
      margin: 0 auto;
      max-width: 760px;
      font-size: 17px;
      line-height: 1.9;
      color: #475569;
    }

    .aboutGrid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      align-items: stretch;
    }

    .aboutCard {
      position: relative;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 24px;
      padding: 28px 24px;
      box-shadow: 0 10px 35px rgba(15, 23, 42, .06);
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
      min-height: 100%;
    }

    .aboutCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 24px;
      width: 64px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, #0b5cff, #60a5fa);
      transform: scaleX(.7);
      transform-origin: left center;
      transition: transform .28s ease;
    }

    .aboutCard:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
      border-color: rgba(11, 92, 255, .18);
    }

    .aboutCard:hover::before {
      transform: scaleX(1);
    }

    .aboutCard__title {
      margin: 8px 0 12px;
      font-size: 20px;
      line-height: 1.25;
      color: #0f172a;
    }

    .aboutCard__text {
      margin: 0;
      font-size: 15px;
      line-height: 1.85;
      color: #475569;
    }

    .aboutValues {
      background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,250,252,.95) 100%);
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 24px;
      padding: 28px 28px 26px;
      box-shadow: 0 10px 35px rgba(15, 23, 42, .05);
    }

    .aboutValues__title {
      margin: 0 0 18px;
      font-size: 24px;
      line-height: 1.2;
      color: #0f172a;
    }

    .aboutValues__list {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 18px;
      margin: 0;
      padding: 0;
    }

    .aboutValues__list li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 18px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid rgba(15, 23, 42, .06);
      color: #334155;
      font-weight: 600;
      box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    }

    .aboutValues__list li::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(180deg, #0b5cff 0%, #3b82f6 100%);
      flex: 0 0 auto;
    }

    .aboutCTA {
      margin-top: 4px;
    }

    .aboutCTA__box {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      padding: 34px 32px;
      background:
        radial-gradient(circle at right top, rgba(96, 165, 250, .20), transparent 26%),
        linear-gradient(135deg, #0b1220 0%, #10203b 100%);
      color: #fff;
      box-shadow: 0 18px 48px rgba(2, 18, 43, .22);
    }

    .aboutCTA__box::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,0));
      pointer-events: none;
    }

    .aboutCTA__title {
      margin: 0 0 10px;
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.1;
      letter-spacing: -.02em;
      color: #fff;
    }

    .aboutCTA__text {
      margin: 0 0 22px;
      max-width: 760px;
      font-size: 16px;
      line-height: 1.85;
      color: rgba(255,255,255,.84);
    }

    .aboutCTA__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      background: #fff;
      color: #0b1220;
      text-decoration: none;
      font-weight: 700;
      transition: transform .25s ease, box-shadow .25s ease;
      box-shadow: 0 10px 24px rgba(255,255,255,.16);
    }

    .aboutCTA__btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(255,255,255,.22);
    }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .75s ease, transform .75s ease;
      will-change: opacity, transform;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 980px) {
      .aboutGrid {
        grid-template-columns: 1fr;
      }

      .aboutValues__list {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .aboutSection {
        padding: 72px 0 78px;
      }

      .aboutCard,
      .aboutValues,
      .aboutCTA__box {
        border-radius: 20px;
      }

      .aboutCTA__box {
        padding: 28px 22px;
      }
    }