/* ==============================
       VARIABLES
    ============================== */

    :root {
      --navy: #0A0A0A;
      --purple: #0A0A0A;   /* INS rebrand: label text is black on white */
      --pink: #C8F933;
      --soft-white: #F8F8FC;
      --white: #FFFFFF;
      --green: #22C55E;
      --border: #E8E8F2;
    }


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

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

    body {
      font-family: "Inter", sans-serif;
      background: var(--soft-white);
      color: var(--navy);
    }


    /* ==============================
       SECTION
    ============================== */

    .features-section {
      position: relative;
      padding: 110px 6%;
      overflow: hidden;
      background: var(--soft-white);
    }


    /* Decorative background glow */

    .features-section::before {
      content: "";
      position: absolute;
      width: 450px;
      height: 450px;
      top: -250px;
      left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(
        circle,
        rgba(200, 249, 51, 0.10),
        transparent 70%
      );
      pointer-events: none;
    }


    /* ==============================
       CONTAINER
    ============================== */

    .features-container {
      max-width: 1200px;
      margin: auto;
      position: relative;
      z-index: 2;
    }


    /* ==============================
       SECTION HEADER
    ============================== */

    .features-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 65px;
    }

    .eyebrow {
      display: inline-block;
      font-family: "Inter", sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      color: var(--purple);
      margin-bottom: 18px;
    }

    .features-header h2 {
      font-family: "Sora", sans-serif;
      font-size: clamp(38px, 5vw, 64px);
      line-height: 1.08;
      font-weight: 800;
      letter-spacing: -2px;
      color: var(--navy);
    }

    .gradient-text {
      background: linear-gradient(
        90deg,
        var(--pink),
        var(--pink)
      );

      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .features-header p {
      margin-top: 22px;
      font-size: 17px;
      line-height: 1.7;
      color: #717171;
    }


    /* ==============================
       CARDS GRID
    ============================== */

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


    /* ==============================
       CARD
    ============================== */

    .feature-card {
      position: relative;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 38px 34px 36px;
      min-height: 330px;

      overflow: hidden;

      transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
    }

    .feature-card:hover {
      transform: translateY(-8px);

      border-color: rgba(200, 249, 51, 0.25);

      box-shadow:
        0 25px 60px rgba(10, 10, 10, 0.10),
        0 0 40px rgba(200, 249, 51, 0.08);
    }


    /* ==============================
       CARD GRADIENT ACCENT
    ============================== */

    .feature-card::before {
      content: "";
      position: absolute;

      top: 0;
      left: 0;

      width: 100%;
      height: 4px;

      background: linear-gradient(
        90deg,
        var(--pink),
        var(--pink)
      );

      opacity: 0;

      transition: opacity 0.3s ease;
    }

    .feature-card:hover::before {
      opacity: 1;
    }


    /* ==============================
       ICON
    ============================== */

    .icon-box {
      width: 62px;
      height: 62px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 18px;

      background:
        linear-gradient(
          135deg,
          rgba(200, 249, 51, 0.12),
          rgba(200, 249, 51, 0.12)
        );

      margin-bottom: 32px;

      position: relative;
    }

    .icon-box::after {
      content: "";

      position: absolute;
      inset: 0;

      border-radius: inherit;

      border: 1px solid rgba(200, 249, 51, 0.10);
    }

    .icon {
      font-size: 27px;
    }


    /* ==============================
       CARD LABEL
    ============================== */

    .feature-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.8px;

      color: var(--purple);

      margin-bottom: 10px;
    }


    /* ==============================
       CARD HEADING
    ============================== */

    .feature-card h3 {
      font-family: "Sora", sans-serif;

      font-size: 23px;
      line-height: 1.25;

      font-weight: 700;

      color: var(--navy);

      margin-bottom: 15px;

      letter-spacing: -0.5px;
    }


    /* ==============================
       CARD DESCRIPTION
    ============================== */

    .feature-card p {
      color: #717171;

      font-size: 15px;

      line-height: 1.7;

      max-width: 300px;
    }


    /* ==============================
       SMALL DECORATIVE CIRCLE
    ============================== */

    .card-decoration {
      position: absolute;

      width: 130px;
      height: 130px;

      right: -60px;
      bottom: -60px;

      border-radius: 50%;

      border: 1px solid rgba(200, 249, 51, 0.08);

      transition:
        transform 0.5s ease,
        border-color 0.5s ease;
    }

    .feature-card:hover .card-decoration {
      transform: scale(1.4);

      border-color: rgba(200, 249, 51, 0.15);
    }


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

    @media (max-width: 900px) {

      .features-section {
        padding: 80px 5%;
      }

      .features-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: auto;
      }

      .feature-card {
        min-height: auto;
      }

    }


    @media (max-width: 500px) {

      .features-section {
        padding: 70px 20px;
      }

      .features-header {
        margin-bottom: 45px;
      }

      .features-header h2 {
        font-size: 36px;
        letter-spacing: -1.5px;
      }

      .features-header p {
        font-size: 15px;
      }

      .feature-card {
        padding: 30px 26px;
        border-radius: 20px;
      }

    }