/* =========================
       RESET
    ========================= */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", sans-serif;
      background: #fff;
      color: #101010;
      line-height: 1.5;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      display: block;
      max-width: 100%;
    }

    button {
      font-family: inherit;
      cursor: pointer;
    }

    .container {
      width: min(1180px, calc(100% - 40px));
      margin-inline: auto;
    }

    .eyebrow {
      display: block;
      color: #7c3aed;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.6px;
      margin-bottom: 10px;
    }

    /* =========================
       NAVBAR
    ========================= */

    .header {
      height: 82px;
      background: rgba(255, 255, 255, 0.95);
      border-bottom: 1px solid #ececec;
      display: flex;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(14px);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      font-size: 23px;
      font-weight: 800;
      letter-spacing: -1px;
    }

    .logo span {
      color: #7c3aed;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 34px;
    }

    .nav-links a {
      font-size: 14px;
      font-weight: 500;
      color: #555;
      transition: 0.2s ease;
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: #111;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .icon-btn {
      width: 42px;
      height: 42px;
      border: 1px solid #e8e8e8;
      border-radius: 10px;
      background: #fff;
      display: grid;
      place-items: center;
    }

    .icon-btn svg {
      width: 18px;
      fill: none;
      stroke: #111;
      stroke-width: 1.8;
    }

    .nav-btn {
      background: #111;
      color: #fff;
      padding: 12px 19px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
    }

    /* =========================
       HERO
    ========================= */

    .about-hero {
      padding: 110px 0 80px;
      background:
        radial-gradient(circle at 78% 35%, #eee7ff 0%, transparent 30%),
        #fff;
      overflow: hidden;
    }

    .about-hero-grid {
      display: grid;
      grid-template-columns: 1fr 0.85fr;
      align-items: end;
      gap: 70px;
    }

    .about-hero h1 {
      font-size: clamp(58px, 7vw, 92px);
      line-height: 0.94;
      letter-spacing: -5px;
      max-width: 760px;
    }

    .about-hero h1 span {
      color: #7c3aed;
    }

    .about-hero-copy {
      padding-bottom: 5px;
    }

    .about-hero-copy p {
      color: #727272;
      font-size: 15px;
      line-height: 1.8;
      max-width: 500px;
    }

    .hero-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-top: 25px;
      font-size: 12px;
      font-weight: 700;
    }

    /* =========================
       HERO IMAGE
    ========================= */

    .about-image-section {
      padding-bottom: 100px;
    }

    .about-main-image {
      position: relative;
      height: 650px;
      overflow: hidden;
      border-radius: 27px;
      background: #f5f5f5;
    }

    .about-main-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-stat {
      position: absolute;
      bottom: 25px;
      left: 25px;
      width: 250px;
      padding: 22px;
      border-radius: 15px;
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(12px);
      box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    }

    .image-stat strong {
      display: block;
      font-size: 30px;
      letter-spacing: -1.5px;
    }

    .image-stat span {
      display: block;
      color: #777;
      font-size: 10px;
      margin-top: 5px;
    }

    /* =========================
       STORY
    ========================= */

    .story-section {
      padding: 110px 0;
      background: #fafafa;
    }

    .story-grid {
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 110px;
      align-items: start;
    }

    .story-title {
      position: sticky;
      top: 125px;
    }

    .story-title h2 {
      font-size: clamp(40px, 5vw, 58px);
      line-height: 1.03;
      letter-spacing: -3px;
    }

    .story-copy p {
      color: #555;
      font-size: 15px;
      line-height: 1.9;
      margin-bottom: 24px;
    }

    .story-copy p:first-child {
      font-size: 21px;
      line-height: 1.65;
      color: #181818;
      letter-spacing: -0.4px;
    }

    /* =========================
       STATS
    ========================= */

    .stats-section {
      padding: 0 0 110px;
      background: #fafafa;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid #e6e6e6;
      border-radius: 18px;
      overflow: hidden;
      background: #fff;
    }

    .stat-card {
      min-height: 180px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      border-right: 1px solid #e8e8e8;
    }

    .stat-card:last-child {
      border-right: 0;
    }

    .stat-card strong {
      font-size: 38px;
      line-height: 1;
      letter-spacing: -2px;
    }

    .stat-card span {
      color: #888;
      font-size: 10px;
      margin-top: 10px;
    }

    /* =========================
       VALUES
    ========================= */

    .values-section {
      padding: 110px 0;
    }

    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 50px;
      margin-bottom: 50px;
    }

    .section-heading h2 {
      font-size: clamp(38px, 5vw, 54px);
      line-height: 1.05;
      letter-spacing: -2.7px;
    }

    .section-heading p {
      max-width: 440px;
      color: #7a7a7a;
      font-size: 12px;
      line-height: 1.75;
    }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 17px;
    }

    .value-card {
      min-height: 310px;
      border: 1px solid #e8e8e8;
      border-radius: 18px;
      padding: 30px;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: 0.25s ease;
    }

    .value-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 45px rgba(0,0,0,0.06);
    }

    .value-number {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: #f1ebff;
      color: #7c3aed;
      font-size: 11px;
      font-weight: 700;
    }

    .value-card h3 {
      font-size: 21px;
      letter-spacing: -0.7px;
      margin-bottom: 9px;
    }

    .value-card p {
      color: #777;
      font-size: 12px;
      line-height: 1.75;
    }

    /* =========================
       WHY US
    ========================= */

    .why-section {
      padding: 110px 0;
      background: #101010;
      color: #fff;
    }

    .why-grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 80px;
      align-items: center;
    }

    .why-image {
      height: 610px;
      border-radius: 22px;
      overflow: hidden;
    }

    .why-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .why-content .eyebrow {
      color: #c3a5ff;
    }

    .why-content h2 {
      font-size: clamp(40px, 5vw, 58px);
      line-height: 1.04;
      letter-spacing: -3px;
    }

    .why-intro {
      color: #999;
      font-size: 13px;
      line-height: 1.8;
      margin-top: 20px;
      max-width: 520px;
    }

    .why-list {
      margin-top: 40px;
    }

    .why-item {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 16px;
      padding: 23px 0;
      border-top: 1px solid #292929;
    }

    .why-item:last-child {
      border-bottom: 1px solid #292929;
    }

    .why-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: #1a1a1a;
      border: 1px solid #303030;
      display: grid;
      place-items: center;
      color: #b695ff;
      font-size: 13px;
    }

    .why-item h3 {
      font-size: 14px;
      margin-bottom: 5px;
    }

    .why-item p {
      color: #8d8d8d;
      font-size: 10px;
      line-height: 1.7;
    }

    /* =========================
       PROCESS
    ========================= */

    .process-section {
      padding: 110px 0;
      background: #fff;
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .process-card {
      position: relative;
      min-height: 270px;
      padding: 27px;
      border-radius: 17px;
      background: #fafafa;
      border: 1px solid #e8e8e8;
    }

    .process-step {
      font-size: 10px;
      color: #7c3aed;
      font-weight: 700;
      letter-spacing: 1px;
    }

    .process-card h3 {
      margin-top: 90px;
      font-size: 19px;
      letter-spacing: -0.6px;
    }

    .process-card p {
      color: #777;
      margin-top: 9px;
      font-size: 11px;
      line-height: 1.7;
    }

    .process-arrow {
      position: absolute;
      right: 22px;
      top: 22px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #ddd;
      display: grid;
      place-items: center;
      color: #777;
    }

    /* =========================
       TEAM
    ========================= */

    .team-section {
      padding: 110px 0;
      background: #fafafa;
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .team-card {
      border-radius: 18px;
      overflow: hidden;
    }

    .team-image {
      height: 410px;
      overflow: hidden;
      border-radius: 18px;
      background: #eee;
    }

    .team-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    .team-card:hover img {
      transform: scale(1.04);
    }

    .team-info {
      padding: 18px 2px 0;
    }

    .team-info h3 {
      font-size: 17px;
    }

    .team-info span {
      display: block;
      margin-top: 4px;
      color: #8c8c8c;
      font-size: 10px;
    }

    /* =========================
       TESTIMONIAL
    ========================= */

    .testimonial-section {
      padding: 110px 0;
    }

    .testimonial-box {
      border-radius: 25px;
      padding: 75px;
      background:
        radial-gradient(circle at 85% 20%, #efe7ff, transparent 25%),
        #fafafa;
      border: 1px solid #ececec;
      text-align: center;
    }

    .testimonial-stars {
      color: #7c3aed;
      letter-spacing: 4px;
      font-size: 13px;
    }

    .testimonial-box blockquote {
      max-width: 820px;
      margin: 25px auto 0;
      font-size: clamp(27px, 4vw, 42px);
      line-height: 1.25;
      letter-spacing: -1.8px;
      font-weight: 600;
    }

    .testimonial-person {
      margin-top: 28px;
    }

    .testimonial-person strong {
      display: block;
      font-size: 11px;
    }

    .testimonial-person span {
      display: block;
      color: #888;
      font-size: 9px;
      margin-top: 3px;
    }

    /* =========================
       CTA
    ========================= */

    .cta-section {
      padding: 20px 0 110px;
    }

    .cta-box {
      padding: 70px;
      border-radius: 25px;
      background:
        radial-gradient(circle at 80% 40%, #3c1e66, transparent 30%),
        #101010;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
    }

    .cta-box .eyebrow {
      color: #c8aaff;
    }

    .cta-box h2 {
      font-size: clamp(36px, 4.5vw, 52px);
      line-height: 1.04;
      letter-spacing: -2.5px;
    }

    .cta-box p {
      color: #aaa;
      max-width: 540px;
      margin-top: 16px;
      font-size: 12px;
      line-height: 1.7;
    }

    .cta-btn {
      flex-shrink: 0;
      padding: 16px 22px;
      background: #fff;
      color: #111;
      border-radius: 11px;
      font-size: 11px;
      font-weight: 700;
    }

    /* =========================
       FOOTER
    ========================= */

    footer {
      background: #fafafa;
      border-top: 1px solid #e7e7e7;
      padding: 70px 0 25px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 55px;
    }

    .footer-description {
      color: #888;
      max-width: 330px;
      margin-top: 16px;
      font-size: 12px;
      line-height: 1.7;
    }

    footer h4 {
      font-size: 12px;
      margin-bottom: 17px;
    }

    .footer-grid > div:not(:first-child) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .footer-grid > div:not(:first-child) a {
      color: #777;
      font-size: 11px;
      margin-bottom: 11px;
    }

    .footer-grid > div:not(:first-child) a:hover {
      color: #111;
    }

    .footer-bottom {
      margin-top: 60px;
      padding-top: 22px;
      border-top: 1px solid #e4e4e4;
      display: flex;
      justify-content: space-between;
      color: #999;
      font-size: 9px;
    }

    /* =========================
       RESPONSIVE
    ========================= */

    @media (max-width: 1000px) {
      .nav-links {
        display: none;
      }

      .about-hero-grid,
      .story-grid,
      .why-grid {
        grid-template-columns: 1fr;
      }

      .about-hero-grid {
        gap: 35px;
      }

      .story-grid {
        gap: 45px;
      }

      .story-title {
        position: static;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .stat-card:nth-child(2) {
        border-right: 0;
      }

      .stat-card:nth-child(-n + 2) {
        border-bottom: 1px solid #e8e8e8;
      }

      .values-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .process-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .why-image {
        height: 500px;
      }

      .team-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
      }
    }

    @media (max-width: 700px) {
      .container {
        width: min(100% - 26px, 1180px);
      }

      .header {
        height: 70px;
      }

      .icon-btn {
        display: none;
      }

      .about-hero {
        padding: 70px 0 50px;
      }

      .about-hero h1 {
        font-size: 52px;
        letter-spacing: -3px;
      }

      .about-main-image {
        height: 410px;
        border-radius: 18px;
      }

      .image-stat {
        width: auto;
        right: 18px;
        bottom: 18px;
        left: 18px;
      }

      .story-section,
      .values-section,
      .why-section,
      .process-section,
      .team-section,
      .testimonial-section {
        padding: 75px 0;
      }

      .stats-section {
        padding-bottom: 75px;
      }

      .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .values-grid,
      .process-grid,
      .team-grid {
        grid-template-columns: 1fr;
      }

      .why-image {
        height: 390px;
      }

      .team-image {
        height: 390px;
      }

      .testimonial-box {
        padding: 45px 25px;
      }

      .cta-box {
        padding: 45px 27px;
        flex-direction: column;
        align-items: flex-start;
      }

      .cta-btn {
        width: 100%;
        text-align: center;
      }

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

      .footer-grid > div:first-child {
        grid-column: span 2;
      }

      .footer-bottom {
        flex-direction: column;
        gap: 8px;
      }
    }

    @media (max-width: 430px) {
      .nav-btn {
        padding: 10px 13px;
      }

      .about-hero h1 {
        font-size: 45px;
      }

      .about-main-image {
        height: 340px;
      }

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

      .stat-card {
        border-right: 0;
        border-bottom: 1px solid #e8e8e8;
      }

      .stat-card:last-child {
        border-bottom: 0;
      }
    }