/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   WEB APP / ERP SERVICE

   Story Direction:
   Business
   Process
   Data
   Workflow
   System

   Visual Direction:
   Technical Grid
   Operational Interface
   Cyan / Electric Blue
   Structured Motion
   ========================================================= */


/* =========================================================
   01. PAGE
   ========================================================= */

.page-webapp-erp {
  background:
    var(--bg-main);
}


/* =========================================================
   02. HERO
   ========================================================= */

.erp-hero {
  position:
    relative;

  min-height:
    calc(100svh - var(--navbar-height));

  padding:
    clamp(90px, 8vw, 140px)
    var(--page-inline)
    clamp(80px, 9vw, 140px);

  overflow:
    hidden;

  background:
    var(--abpe-navy);
}


/* =========================================================
   03. HERO TECHNICAL GRID
   ========================================================= */

.erp-hero::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  pointer-events:
    none;
}

.erp-hero::after {
  content:
    "";

  position:
    absolute;

  width:
    70vw;

  height:
    70vw;

  right:
    -28%;

  top:
    -38%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.18),
      rgba(7, 92, 255, 0.09) 38%,
      transparent 70%
    );

  pointer-events:
    none;
}


/* =========================================================
   04. HERO TOP
   ========================================================= */

.erp-hero__top {
  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;
}

.erp-hero__index {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}

.erp-hero__index strong {
  color:
    var(--abpe-cyan);

  font-size:
    0.72rem;

  font-weight:
    600;
}

.erp-hero__index span {
  color:
    rgba(255, 255, 255, 0.5);

  font-size:
    0.7rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.erp-hero__meta {
  max-width:
    450px;

  color:
    rgba(255, 255, 255, 0.58);

  font-size:
    0.82rem;

  line-height:
    1.7;
}


/* =========================================================
   05. HERO MAIN
   ========================================================= */

.erp-hero__main {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 0.36fr);

  gap:
    clamp(60px, 9vw, 150px);

  align-items:
    end;

  margin-top:
    clamp(100px, 11vw, 180px);
}


/* =========================================================
   06. HERO TITLE
   ========================================================= */

.erp-hero__title {
  max-width:
    1320px;

  color:
    #ffffff;

  font-size:
    clamp(4.1rem, 8.7vw, 10rem);

  font-weight:
    400;

  line-height:
    0.82;

  letter-spacing:
    -0.075em;

  text-transform:
    uppercase;
}

.erp-hero__title span {
  display:
    block;
}

.erp-hero__title .indent {
  padding-left:
    clamp(80px, 14vw, 250px);
}

.erp-hero__title .accent {
  color:
    var(--abpe-cyan);
}


/* =========================================================
   07. HERO SYSTEM STATUS
   ========================================================= */

.erp-hero__status {
  border-top:
    1px solid rgba(255, 255, 255, 0.18);
}

.erp-hero__status-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  min-height:
    54px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.18);
}

.erp-hero__status-label {
  color:
    rgba(255, 255, 255, 0.45);

  font-size:
    0.62rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.erp-hero__status-value {
  color:
    #ffffff;

  font-size:
    0.72rem;

  text-align:
    right;
}

.erp-hero__status-value--online {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--abpe-cyan);
}

.erp-hero__status-value--online::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    currentColor;

  box-shadow:
    0 0 14px currentColor;
}


/* =========================================================
   08. HERO BOTTOM
   ========================================================= */

.erp-hero__bottom {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.36fr);

  gap:
    clamp(60px, 9vw, 150px);

  align-items:
    end;

  margin-top:
    clamp(100px, 11vw, 170px);

  padding-top:
    24px;

  border-top:
    1px solid rgba(255, 255, 255, 0.18);
}

.erp-hero__statement {
  max-width:
    900px;

  color:
    #ffffff;

  font-size:
    clamp(1.8rem, 3vw, 3.7rem);

  font-weight:
    400;

  line-height:
    1.02;

  letter-spacing:
    -0.045em;
}

.erp-hero__copy {
  max-width:
    430px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   09. SYSTEM PATH
   ========================================================= */

.erp-path {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}

.erp-path__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(270px, 0.38fr);

  gap:
    clamp(60px, 10vw, 160px);

  align-items:
    end;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.erp-path__title {
  max-width:
    980px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.erp-path__copy {
  max-width:
    410px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   10. SYSTEM PATH TRACK
   ========================================================= */

.erp-path__track {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}

.erp-path-node {
  position:
    relative;

  min-height:
    310px;

  padding:
    28px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  overflow:
    hidden;

  transition:
    opacity var(--transition),
    background var(--transition);
}

.erp-path-node::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  width:
    0;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      var(--abpe-blue),
      var(--abpe-cyan)
    );

  transition:
    width 450ms var(--ease-out);
}

.erp-path-node__number {
  color:
    var(--text-soft);

  font-size:
    0.62rem;

  transition:
    color var(--transition);
}

.erp-path-node__body {
  position:
    absolute;

  left:
    28px;

  right:
    28px;

  bottom:
    28px;
}

.erp-path-node__title {
  color:
    var(--text-heading);

  font-size:
    clamp(1.7rem, 2.7vw, 3.2rem);

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.05em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.erp-path-node__description {
  margin-top:
    18px;

  color:
    var(--text-muted);

  font-size:
    0.78rem;

  line-height:
    1.65;
}

.erp-path-node.is-completed {
  background:
    rgba(7, 92, 255, 0.025);
}

.erp-path-node.is-completed::before,
.erp-path-node.is-active::before {
  width:
    100%;
}

.erp-path-node.is-completed
.erp-path-node__number {
  color:
    var(--abpe-cyan);
}

.erp-path-node.is-active {
  background:
    var(--bg-main);
}

.erp-path-node.is-active
.erp-path-node__number,
.erp-path-node.is-active
.erp-path-node__title {
  color:
    var(--abpe-blue);
}

.erp-path-node.is-active
.erp-path-node__title {
  transform:
    translateX(7px);
}

.erp-path-node.is-muted {
  opacity:
    0.3;
}


/* =========================================================
   11. PROJECT REVEAL
   ========================================================= */

.erp-project {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-main);
}

.erp-project__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.38fr);

  gap:
    clamp(60px, 10vw, 160px);

  align-items:
    end;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.erp-project__title {
  max-width:
    980px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.erp-project__meta {
  max-width:
    390px;

  padding-top:
    22px;

  border-top:
    1px solid var(--line);

  color:
    var(--text-muted);

  font-size:
    0.78rem;

  line-height:
    1.7;
}


/* =========================================================
   12. PROJECT VISUAL
   ========================================================= */

.erp-project__media {
  position:
    relative;

  width:
    100%;

  min-height:
    680px;

  height:
    min(84vh, 980px);

  overflow:
    hidden;

  background:
    #091c36;

  border:
    1px solid rgba(7, 92, 255, 0.16);
}

.erp-project__media::before {
  content:
    "";

  position:
    absolute;

  z-index:
    2;

  inset:
    0;

  background:
    linear-gradient(
      to bottom,
      transparent 65%,
      rgba(6, 23, 47, 0.1)
    );

  pointer-events:
    none;
}

.erp-project__media img {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translateY(-6%);

  will-change:
    transform;
}

.erp-project__caption {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding-top:
    16px;

  color:
    var(--text-muted);

  font-size:
    0.68rem;
}

.erp-project__caption strong {
  color:
    var(--text-heading);

  font-weight:
    500;
}


/* =========================================================
   13. OPERATIONS MAP
   ========================================================= */

.erp-operations {
  position:
    relative;

  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.erp-operations::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );

  background-size:
    64px 64px;

  pointer-events:
    none;
}

.erp-operations__header {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    50px;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.erp-operations__title {
  max-width:
    950px;

  margin-top:
    28px;

  color:
    #ffffff;

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.erp-operations__copy {
  max-width:
    400px;

  color:
    rgba(255, 255, 255, 0.56);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   14. OPERATIONS MODULE GRID
   ========================================================= */

.erp-module-grid {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  border-top:
    1px solid rgba(255, 255, 255, 0.16);

  border-left:
    1px solid rgba(255, 255, 255, 0.16);
}

.erp-module {
  position:
    relative;

  min-height:
    290px;

  padding:
    28px;

  border-right:
    1px solid rgba(255, 255, 255, 0.16);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.16);

  overflow:
    hidden;

  transition:
    background var(--transition),
    opacity var(--transition);
}

.erp-module::after {
  content:
    "";

  position:
    absolute;

  width:
    170px;

  height:
    170px;

  right:
    -80px;

  top:
    -80px;

  border:
    1px solid rgba(0, 200, 255, 0.12);

  border-radius:
    50%;

  transition:
    width var(--transition),
    height var(--transition),
    border-color var(--transition);
}

.erp-module__number {
  color:
    rgba(255, 255, 255, 0.35);

  font-size:
    0.6rem;
}

.erp-module__status {
  position:
    absolute;

  top:
    28px;

  right:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--abpe-cyan);

  font-size:
    0.56rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.erp-module__status::before {
  content:
    "";

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    currentColor;
}

.erp-module__body {
  position:
    absolute;

  left:
    28px;

  right:
    28px;

  bottom:
    28px;
}

.erp-module__title {
  color:
    #ffffff;

  font-size:
    clamp(1.8rem, 3vw, 3.6rem);

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.05em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.erp-module__description {
  max-width:
    420px;

  margin-top:
    18px;

  color:
    rgba(255, 255, 255, 0.52);

  font-size:
    0.78rem;

  line-height:
    1.65;
}

.erp-module:hover {
  background:
    rgba(7, 92, 255, 0.12);
}

.erp-module:hover::after {
  width:
    230px;

  height:
    230px;

  border-color:
    rgba(0, 200, 255, 0.3);
}

.erp-module:hover
.erp-module__title {
  color:
    var(--abpe-cyan);

  transform:
    translateX(7px);
}


/* =========================================================
   15. OPERATIONAL ARCHITECTURE
   ========================================================= */

.erp-architecture {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}

.erp-architecture__grid {
  display:
    grid;

  grid-template-columns:
    minmax(280px, 0.38fr)
    minmax(0, 1fr);

  gap:
    clamp(70px, 11vw, 180px);

  align-items:
    start;
}

.erp-architecture__side {
  position:
    sticky;

  top:
    calc(var(--navbar-height) + 40px);
}

.erp-architecture__title {
  max-width:
    450px;

  margin-top:
    30px;

  color:
    var(--text-heading);

  font-size:
    clamp(2.8rem, 4.8vw, 5.6rem);

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.055em;
}

.erp-architecture__copy {
  max-width:
    370px;

  margin-top:
    35px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   16. ARCHITECTURE CHAPTER
   ========================================================= */

.erp-architecture__content {
  border-top:
    1px solid var(--line);
}

.erp-architecture__chapter {
  position:
    relative;

  min-height:
    54vh;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    clamp(70px, 8vw, 120px)
    0;

  border-bottom:
    1px solid var(--line);

  opacity:
    0.3;

  transition:
    opacity 600ms var(--ease-out);
}

.erp-architecture__chapter.is-active {
  opacity:
    1;
}

.erp-architecture__number {
  margin-bottom:
    clamp(38px, 5vw, 70px);

  color:
    var(--text-soft);

  font-size:
    0.64rem;

  transition:
    color 600ms var(--ease-out);
}

.erp-architecture__chapter.is-active
.erp-architecture__number {
  color:
    var(--abpe-blue);
}

.erp-architecture__chapter-title {
  max-width:
    880px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.6vw, 6.4rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;

  transition:
    transform 600ms var(--ease-out);
}

.erp-architecture__chapter.is-active
.erp-architecture__chapter-title {
  transform:
    translateX(10px);
}

.erp-architecture__description {
  max-width:
    620px;

  margin-top:
    34px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.75;
}


/* =========================================================
   17. PROJECT INTERFACE SPREAD
   ========================================================= */

.erp-interface {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-soft);
}

.erp-interface__header {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    50px;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.erp-interface__title {
  max-width:
    940px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.7vw, 6.7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.erp-interface__copy {
  max-width:
    400px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   18. INTERFACE GRID
   ========================================================= */

.erp-interface__grid {
  display:
    grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  gap:
    clamp(20px, 3vw, 48px);

  row-gap:
    clamp(100px, 12vw, 190px);
}

.erp-interface__item {
  position:
    relative;
}

.erp-interface__item--one {
  grid-column:
    1 / 9;
}

.erp-interface__item--two {
  grid-column:
    9 / 13;

  margin-top:
    clamp(100px, 12vw, 180px);
}

.erp-interface__item--three {
  grid-column:
    2 / 7;
}

.erp-interface__item--four {
  grid-column:
    7 / 13;

  margin-top:
    clamp(90px, 11vw, 170px);
}

.erp-interface__media {
  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

  background:
    #091c36;

  border:
    1px solid rgba(7, 92, 255, 0.12);
}

.erp-interface__item--one
.erp-interface__media {
  aspect-ratio:
    16 / 10;
}

.erp-interface__item--two
.erp-interface__media {
  aspect-ratio:
    4 / 5;
}

.erp-interface__item--three
.erp-interface__media {
  aspect-ratio:
    4 / 5;
}

.erp-interface__item--four
.erp-interface__media {
  aspect-ratio:
    16 / 10;
}

.erp-interface__media img {
  width:
    100%;

  height:
    110%;

  object-fit:
    cover;

  transform:
    translateY(-5%);

  will-change:
    transform;
}

.erp-interface__caption {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    14px;

  color:
    var(--text-muted);

  font-size:
    0.66rem;
}

.erp-interface__caption strong {
  color:
    var(--text-heading);

  font-weight:
    500;
}


/* =========================================================
   19. SYSTEM STATEMENT
   ========================================================= */

.erp-statement {
  position:
    relative;

  min-height:
    92vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.erp-statement::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}

.erp-statement__ring {
  position:
    absolute;

  width:
    min(62vw, 900px);

  aspect-ratio:
    1;

  border:
    1px solid rgba(0, 200, 255, 0.12);

  border-radius:
    50%;

  pointer-events:
    none;
}

.erp-statement__ring::before,
.erp-statement__ring::after {
  content:
    "";

  position:
    absolute;

  border:
    1px solid rgba(0, 200, 255, 0.08);

  border-radius:
    50%;
}

.erp-statement__ring::before {
  inset:
    12%;
}

.erp-statement__ring::after {
  inset:
    27%;
}

.erp-statement__content {
  position:
    relative;

  z-index:
    2;

  width:
    min(100%, 1350px);

  text-align:
    center;
}

.erp-statement__title {
  margin-top:
    clamp(45px, 6vw, 80px);

  color:
    #ffffff;

  font-size:
    clamp(3.5rem, 7.5vw, 8.7rem);

  font-weight:
    400;

  line-height:
    0.86;

  letter-spacing:
    -0.07em;
}

.erp-statement__copy {
  max-width:
    620px;

  margin:
    clamp(45px, 6vw, 75px)
    auto
    0;

  color:
    rgba(255, 255, 255, 0.58);

  font-size:
    0.9rem;

  line-height:
    1.75;
}


/* =========================================================
   20. SCOPE
   ========================================================= */

.erp-scope {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-main);
}

.erp-scope__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 0.4fr);

  align-items:
    end;

  gap:
    clamp(60px, 10vw, 160px);

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.erp-scope__title {
  max-width:
    960px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.7vw, 6.7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.erp-scope__copy {
  max-width:
    410px;

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.7;
}


/* =========================================================
   21. SCOPE LIST
   ========================================================= */

.erp-scope-list {
  border-top:
    1px solid var(--line);
}

.erp-scope-item {
  display:
    grid;

  grid-template-columns:
    70px
    minmax(0, 1fr)
    minmax(180px, auto);

  align-items:
    center;

  gap:
    30px;

  min-height:
    120px;

  border-bottom:
    1px solid var(--line);

  transition:
    background var(--transition);
}

.erp-scope-item:hover {
  background:
    var(--bg-white);
}

.erp-scope-item__number {
  color:
    var(--text-soft);

  font-size:
    0.62rem;
}

.erp-scope-item__title {
  color:
    var(--text-heading);

  font-size:
    clamp(1.8rem, 3.1vw, 3.6rem);

  font-weight:
    400;

  line-height:
    0.95;

  letter-spacing:
    -0.05em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.erp-scope-item:hover
.erp-scope-item__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(8px);
}

.erp-scope-item__type {
  color:
    var(--text-muted);

  font-size:
    0.66rem;

  letter-spacing:
    0.06em;

  text-align:
    right;

  text-transform:
    uppercase;
}


/* =========================================================
   22. TIMELINE
   ========================================================= */

.erp-timeline {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}

.erp-timeline__header {
  margin-bottom:
    clamp(70px, 9vw, 130px);
}

.erp-timeline__title {
  max-width:
    980px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.7vw, 6.6rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}


/* =========================================================
   23. TIMELINE OPTIONS
   ========================================================= */

.erp-timeline__options {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}

.erp-timeline-card {
  min-height:
    360px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    clamp(28px, 4vw, 50px);

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.erp-timeline-card__label {
  color:
    var(--text-muted);

  font-size:
    0.68rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.erp-timeline-card__duration {
  display:
    block;

  color:
    var(--abpe-blue);

  font-size:
    clamp(4rem, 7vw, 8rem);

  font-weight:
    400;

  line-height:
    0.82;

  letter-spacing:
    -0.075em;
}

.erp-timeline-card__unit {
  display:
    block;

  margin-top:
    18px;

  color:
    var(--text-heading);

  font-size:
    0.7rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.erp-timeline-card__copy {
  max-width:
    440px;

  margin-top:
    28px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  line-height:
    1.7;
}


/* =========================================================
   24. RELATED
   ========================================================= */

.erp-related {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-soft);
}

.erp-related__header {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding-bottom:
    24px;

  border-bottom:
    1px solid var(--line);
}

.erp-related__link {
  display:
    grid;

  grid-template-columns:
    80px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    30px;

  min-height:
    clamp(180px, 16vw, 260px);

  border-bottom:
    1px solid var(--line);
}

.erp-related__index {
  color:
    var(--text-soft);

  font-size:
    0.66rem;
}

.erp-related__title {
  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 6vw, 7rem);

  font-weight:
    400;

  line-height:
    0.88;

  letter-spacing:
    -0.06em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.erp-related__arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    72px;

  height:
    72px;

  border:
    1px solid var(--line);

  border-radius:
    50%;

  color:
    var(--text-heading);

  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.erp-related__link:hover
.erp-related__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(14px);
}

.erp-related__link:hover
.erp-related__arrow {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

  border-color:
    var(--abpe-blue);

  transform:
    rotate(45deg);
}


/* =========================================================
   25. CTA
   ========================================================= */

.erp-cta {
  position:
    relative;

  padding:
    clamp(110px, 13vw, 210px)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.erp-cta::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  pointer-events:
    none;
}

.erp-cta::after {
  content:
    "";

  position:
    absolute;

  width:
    75vw;

  height:
    75vw;

  right:
    -25%;

  top:
    -45%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.19),
      rgba(7, 92, 255, 0.08) 40%,
      transparent 70%
    );

  pointer-events:
    none;
}

.erp-cta__top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    clamp(90px, 11vw, 170px);
}

.erp-cta__copy {
  max-width:
    410px;

  color:
    rgba(255, 255, 255, 0.6);

  font-size:
    0.82rem;

  line-height:
    1.7;
}

.erp-cta__main {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    60px;
}

.erp-cta__title {
  max-width:
    1400px;

  color:
    #ffffff;

  font-size:
    clamp(4rem, 9vw, 10.2rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}

.erp-cta__action {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    clamp(95px, 10vw, 155px);

  height:
    clamp(95px, 10vw, 155px);

  flex:
    0 0 auto;

  border-radius:
    50%;

  color:
    var(--abpe-navy);

  background:
    var(--abpe-cyan);

  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.erp-cta__action:hover {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

  transform:
    rotate(45deg)
    scale(1.04);
}

.erp-cta__action svg {
  width:
    34%;

  height:
    34%;
}