/* ==========================================================
   ABOUT AIO STORY — ELEGANT PROFESSIONAL SECTION
   Uses core.css variables
   ========================================================== */

   .about-aio-story {
    position: relative;
    padding: clamp(4rem, 6vw, 7rem) 0;
    background: linear-gradient(
      180deg,
      rgba(37, 99, 235, 0.03) 0%,
      transparent 60%
    );
    overflow: hidden;
  }
  
  /* subtle accent glow */
  .about-aio-story::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(
      circle,
      rgba(37, 99, 235, 0.10),
      transparent 70%
    );
    top: -250px;
    right: -220px;
    pointer-events: none;
    z-index: 0;
  }
  
  .about-aio-story__inner {
    position: relative;
    z-index: 2;
    max-width: 920px;
  }
  
  /* ==========================================================
     HEADER
     ========================================================== */
  
  .about-aio-story__header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }
  
  .about-aio-story__title {
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--clr-text);
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
  }
  
  .about-aio-story__title::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 0.75rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(
      90deg,
      var(--clr-primary),
      var(--clr-secondary)
    );
  }
  
  /* ==========================================================
     CONTENT
     ========================================================== */
  
  .about-aio-story__content {
    display: grid;
    gap: clamp(1.2rem, 1.8vw, 1.8rem);
  }
  
  .about-aio-story__content p {
    font-size: clamp(1.05rem, 1.1vw, 1.18rem);
    line-height: 1.8;
    color: var(--clr-text);
    max-width: 75ch;
    opacity: 0.95;
    transform: translateY(18px);
    opacity: 0;
    transition:
      opacity 0.8s ease,
      transform 0.8s ease;
  }
  
  /* animated reveal */
  .about-aio-story.is-visible .about-aio-story__content p {
    opacity: 1;
    transform: translateY(0);
  }
  
  .about-aio-story__content p:nth-child(1) {
    transition-delay: 0.08s;
  }
  .about-aio-story__content p:nth-child(2) {
    transition-delay: 0.20s;
  }
  .about-aio-story__content p:nth-child(3) {
    transition-delay: 0.32s;
  }
  
  /* soft emphasis styling */
  .about-aio-story strong {
    color: var(--clr-primary);
    font-weight: 600;
  }
  
  /* ==========================================================
     LEFT ACCENT LINE (DESKTOP ONLY)
     ========================================================== */
  
  @media (min-width: 880px) {
    .about-aio-story__content {
      padding-left: 1.4rem;
      border-left: 2px solid rgba(37, 99, 235, 0.15);
    }
  }
  
  /* ==========================================================
     DARK MODE
     ========================================================== */
  
  :root[data-theme="dark"] .about-aio-story {
    background: linear-gradient(
      180deg,
      rgba(37, 99, 235, 0.14) 0%,
      transparent 65%
    );
  }
  
  :root[data-theme="dark"] .about-aio-story::before {
    background: radial-gradient(
      circle,
      rgba(37, 99, 235, 0.22),
      transparent 70%
    );
  }
  
  :root[data-theme="dark"] .about-aio-story__content p {
    opacity: 0.95;
  }
  
  :root[data-theme="dark"] .about-aio-story__content {
    border-left-color: rgba(148, 163, 184, 0.25);
  }
  
  /* ==========================================================
     RESPONSIVE REFINEMENTS
     ========================================================== */
  
  @media (max-width: 768px) {
    .about-aio-story {
      padding: 3.5rem 0;
    }
  
    .about-aio-story__content {
      gap: 1.1rem;
    }
  
    .about-aio-story__content p {
      line-height: 1.75;
    }
  }
  
  @media (max-width: 500px) {
    .about-aio-story__title::after {
      width: 56px;
    }
  }
  
  /* ==========================================================
     REDUCED MOTION (ACCESSIBILITY)
     ========================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    .about-aio-story__content p {
      transform: none !important;
      opacity: 1 !important;
      transition: none !important;
    }
  }