/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   HOME PAGE

   Reference Direction:
   Editorial / ALVA-inspired / Light Mode / Tech-forward
   ========================================================= */


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

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



.home-hero {
  position: relative;

  width: 100%;

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

  min-height:
    680px;

  padding:
    0;

  overflow:
    hidden;
}

.home-hero__frame {
  position: relative;

  width:
    100%;

  height:
    100%;

  min-height:
    100%;

  background:
    var(--bg-muted);

  overflow:
    hidden;
}

.home-hero__media {
  position:
    absolute;

  inset:
    0;

  overflow:
    hidden;
}

.home-hero__media::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(180deg,
      rgba(6, 23, 47, 0.03) 0%,
      rgba(6, 23, 47, 0.02) 38%,
      rgba(6, 23, 47, 0.52) 100%);

  pointer-events:
    none;
}

.home-hero__media img {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translate3d(0, -5%, 0) scale(1.015);

  will-change:
    transform;
}

.home-hero__content {
  position:
    absolute;

  z-index:
    3;

  left:
    clamp(24px, 4vw, 68px);

  right:
    clamp(24px, 4vw, 68px);

  bottom:
    clamp(28px, 5vw, 72px);

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.7fr) minmax(260px, 0.55fr);

  align-items:
    end;

  gap:
    clamp(40px, 7vw, 120px);
}

.home-hero__eyebrow {
  margin-bottom:
    22px;

  color:
    rgba(255, 255, 255, 0.72);
}

.home-hero__title {
  max-width:
    1120px;

  color:
    #ffffff;

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

  font-weight:
    400;

  line-height:
    0.83;

  letter-spacing:
    -0.07em;
}

.home-hero__title span {
  display:
    block;
}

.home-hero__side {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    28px;

  padding-bottom:
    6px;
}

.home-hero__description {
  max-width:
    390px;

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

  font-size:
    clamp(0.9rem, 1.1vw, 1.05rem);

  line-height:
    1.6;
}

.home-hero__link {
  color:
    #ffffff;
}

.home-hero__link.text-link:hover {
  color:
    var(--abpe-cyan);
}


/* =========================================================
   03. HERO SCROLL INDICATOR
   ========================================================= */

.hero-scroll {
  position:
    absolute;

  z-index:
    4;

  left:
    50%;

  bottom:
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    54px;

  height:
    54px;

  color:
    #ffffff;

  border:
    1px solid rgba(255, 255, 255, 0.35);

  border-radius:
    50%;

  backdrop-filter:
    blur(10px);

  transform:
    translateX(-50%);

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

.hero-scroll:hover {
  color:
    var(--text-heading);

  background:
    #ffffff;

  border-color:
    #ffffff;
}

.hero-scroll svg {
  width:
    18px;

  height:
    18px;
}


/* =========================================================
   04. BRAND STATEMENT
   ========================================================= */

.home-statement {
  position:
    relative;

  min-height:
    110vh;

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

  background:
    var(--bg-white);

  overflow:
    hidden;
}

.home-statement__header {
  position:
    relative;

  z-index:
    4;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;
}

.home-statement__label {
  color:
    var(--text-muted);
}

.home-statement__corner {
  width:
    18px;

  height:
    18px;

  border-top:
    2px solid var(--text-heading);

  border-right:
    2px solid var(--text-heading);
}

.home-statement__visual {
  position:
    absolute;

  z-index:
    1;

  top:
    50%;

  left:
    50%;

  width:
    min(38vw, 620px);

  aspect-ratio:
    0.76;

  transform:
    translate(-50%, -47%);

  pointer-events:
    none;
}

.home-statement__visual img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  filter:
    drop-shadow(0 35px 65px rgba(7, 92, 255, 0.16));

  will-change:
    transform;
}

.home-statement__title {
  position:
    relative;

  z-index:
    3;

  width:
    min(100%, 1380px);

  margin:
    clamp(110px, 13vw, 220px) auto 0;

  color:
    var(--text-heading);

  font-size:
    clamp(4rem, 8.2vw, 9.4rem);

  font-weight:
    400;

  line-height:
    0.85;

  letter-spacing:
    -0.07em;

  text-align:
    center;

  text-transform:
    uppercase;
}

.home-statement__title span {
  display:
    block;
}

.home-statement__title .line-left {
  transform:
    translateX(-8%);
}

.home-statement__title .line-right {
  transform:
    translateX(8%);
}

.home-statement__footer {
  position:
    absolute;

  z-index:
    4;

  left:
    var(--page-inline);

  right:
    var(--page-inline);

  bottom:
    clamp(50px, 7vw, 100px);

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;
}

.home-statement__copy {
  max-width:
    390px;

  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.65;
}

.home-statement__meaning {
  display:
    grid;

  grid-template-columns:
    repeat(4, auto);

  gap:
    clamp(18px, 2.5vw, 44px);

  color:
    var(--text-heading);

  font-size:
    0.74rem;

  font-weight:
    500;

  text-transform:
    uppercase;
}

.home-statement__meaning span {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}

.home-statement__meaning span::before {
  content:
    "";

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

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


/* =========================================================
   05. SERVICES INTRO
   ========================================================= */

.home-services {
  padding:
    var(--section-space) var(--page-inline);

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

.home-services__heading {
  display:
    grid;

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

  align-items:
    end;

  gap:
    clamp(50px, 8vw, 130px);

  margin-bottom:
    clamp(70px, 8vw, 120px);
}

.home-services__title {
  max-width:
    980px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.06em;
}

.home-services__description {
  max-width:
    400px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.65;
}


/* =========================================================
   06. SERVICE LIST
   ========================================================= */

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

.service-row {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    80px minmax(0, 1fr) minmax(190px, 0.28fr) 50px;

  align-items:
    center;

  gap:
    24px;

  min-height:
    clamp(105px, 10vw, 155px);

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

  overflow:
    hidden;

  isolation:
    isolate;

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

.service-row::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  background:
    var(--bg-white);

  transform:
    scaleY(0);

  transform-origin:
    bottom;

  transition:
    transform var(--transition);
}

.service-row:hover::before {
  transform:
    scaleY(1);

  transform-origin:
    top;
}

.service-row__number {
  color:
    var(--text-soft);

  font-size:
    0.68rem;

  letter-spacing:
    0.08em;
}

.service-row__name {
  color:
    var(--text-heading);

  font-size:
    clamp(2.2rem, 4.2vw, 5.4rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.055em;

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

.service-row:hover .service-row__name {
  color:
    var(--abpe-blue);

  transform:
    translateX(18px);
}

.service-row__meta {
  color:
    var(--text-muted);

  font-size:
    0.78rem;

  line-height:
    1.5;
}

.service-row__arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    46px;

  height:
    46px;

  margin-left:
    auto;

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

  border-radius:
    50%;

  color:
    var(--text-heading);

  transform:
    rotate(-45deg);

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

.service-row:hover .service-row__arrow {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

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

  transform:
    rotate(0deg);
}

.service-row__soon {
  display:
    inline-flex;

  align-items:
    center;

  margin-left:
    12px;

  vertical-align:
    middle;

  padding:
    5px 8px;

  border-radius:
    var(--radius-pill);

  color:
    var(--abpe-blue);

  background:
    rgba(7, 92, 255, 0.08);

  font-size:
    0.56rem;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   07. SERVICE HOVER PREVIEW
   ========================================================= */

.service-preview {
  position:
    fixed;

  z-index:
    40;

  top:
    0;

  left:
    0;

  width:
    clamp(240px, 22vw, 390px);

  aspect-ratio:
    1.3;

  background:
    var(--bg-muted);

  box-shadow:
    0 30px 80px rgba(7, 20, 38, 0.13);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translate3d(-50%, -50%, 0) scale(0.92);

  transition:
    opacity 220ms ease,
    visibility 220ms ease,
    transform 350ms var(--ease-out);

  overflow:
    hidden;
}

.service-preview.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translate3d(-50%, -50%, 0) scale(1);
}

.service-preview img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


/* =========================================================
   08. PARTNERS
   ========================================================= */

.home-partners {
  padding:
    clamp(90px, 10vw, 150px) 0;

  background:
    var(--bg-white);

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

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

  overflow:
    hidden;
}

.home-partners__header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    40px;

  padding:
    0 var(--page-inline);

  margin-bottom:
    clamp(60px, 7vw, 95px);
}

.home-partners__title {
  max-width:
    760px;

  font-size:
    clamp(2.2rem, 4.2vw, 4.8rem);

  font-weight:
    400;

  line-height:
    0.96;

  letter-spacing:
    -0.05em;
}

.home-partners__copy {
  max-width:
    360px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  line-height:
    1.6;
}

.partner-marquees {
  display:
    flex;

  flex-direction:
    column;

  gap:
    clamp(18px, 2vw, 30px);
}


.partner-marquee {
  --partner-gap:
    clamp(18px, 1.8vw, 30px);

  position:
    relative;

  width:
    100%;

  overflow:
    hidden;
}


.partner-marquee__track {
  display:
    flex;

  align-items:
    center;

  width:
    max-content;

  will-change:
    transform;

  animation:
    partner-marquee-scroll 34s linear infinite;
}


.partner-marquee--right .partner-marquee__track {
  animation-direction:
    reverse;
}


.partner-marquee--left .partner-marquee__track {
  animation-duration:
    38s;
}


.partner-marquee__group {
  display:
    flex;

  align-items:
    center;

  gap:
    var(--partner-gap);

  padding-right:
    var(--partner-gap);

  flex:
    0 0 auto;
}


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

.partner-logo {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    clamp(220px, 17vw, 300px);

  height:
    clamp(120px, 9vw, 155px);

  flex:
    0 0 auto;

  padding:
    clamp(20px, 2vw, 30px);

  background:
    #ffffff;

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

  border-radius:
    2px;

  opacity:
    1;

  overflow:
    hidden;

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


.partner-logo:hover {
  border-color:
    rgba(7, 92, 255, 0.28);

  box-shadow:
    0 18px 50px rgba(7, 20, 38, 0.07);

  transform:
    translateY(-5px);
}


.partner-logo img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  max-width:
    100%;

  max-height:
    100%;

  object-fit:
    contain;

  filter:
    none;
}


/* =========================================================
   MARQUEE ANIMATION
   ========================================================= */

@keyframes partner-marquee-scroll {

  from {
    transform:
      translate3d(0, 0, 0);
  }

  to {
    transform:
      translate3d(-50%, 0, 0);
  }

}

.partner-logo:hover {
  opacity:
    1;

  filter:
    grayscale(0);

  transform:
    translateY(-4px);
}

.partner-logo img {
  width:
    100%;

  max-height:
    54px;

  object-fit:
    contain;
}


/* =========================================================
   09. FEATURED WORK
   ========================================================= */

.home-work {
  padding:
    var(--section-space) var(--page-inline);

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

.home-work__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.5fr) auto;

  align-items:
    end;

  gap:
    50px;

  margin-bottom:
    clamp(65px, 8vw, 120px);
}

.home-work__eyebrow {
  margin-bottom:
    20px;
}

.home-work__title {
  max-width:
    1130px;

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.home-work__all {
  align-self:
    end;

  margin-bottom:
    10px;
}


/* =========================================================
   10. PROJECT GRID
   ========================================================= */

.project-grid {
  display:
    grid;

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

  gap:
    clamp(14px, 1.7vw, 28px);
}

.project-card {
  position:
    relative;
}

.project-card--large {
  grid-column:
    span 6;
}

.project-card--medium {
  grid-column:
    span 3;
}

.project-card--wide {
  grid-column:
    span 8;
}

.project-card--small {
  grid-column:
    span 4;
}

.project-card__media {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    4 / 5;

  background:
    var(--bg-muted);

  overflow:
    hidden;
}

.project-card--large .project-card__media {
  aspect-ratio:
    1.1 / 1;
}

.project-card--wide .project-card__media {
  aspect-ratio:
    16 / 9;
}

.project-card__media img {
  width:
    100%;

  height:
    108%;

  object-fit:
    cover;

  transform:
    translate3d(0, -4%, 0) scale(1.01);

  transition:
    transform 1.1s var(--ease-out);

  will-change:
    transform;
}

.project-card:hover .project-card__media img {
  transform:
    translate3d(0, -4%, 0) scale(1.045);
}

.project-card__overlay {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  padding:
    20px;

  background:
    linear-gradient(180deg,
      transparent 60%,
      rgba(6, 23, 47, 0.16));

  opacity:
    0;

  transition:
    opacity var(--transition);
}

.project-card:hover .project-card__overlay {
  opacity:
    1;
}

.project-card__view {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    54px;

  height:
    54px;

  color:
    var(--text-heading);

  background:
    #ffffff;

  border-radius:
    50%;

  transform:
    translateY(12px);

  transition:
    transform var(--transition);
}

.project-card:hover .project-card__view {
  transform:
    translateY(0);
}

.project-card__info {
  display:
    grid;

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

  gap:
    20px;

  padding-top:
    16px;
}

.project-card__title {
  color:
    var(--text-heading);

  font-size:
    clamp(1rem, 1.5vw, 1.35rem);

  font-weight:
    500;

  line-height:
    1.2;

  letter-spacing:
    -0.025em;
}

.project-card__category,
.project-card__year {
  color:
    var(--text-muted);

  font-size:
    0.7rem;

  line-height:
    1.5;
}

.project-card__year {
  text-align:
    right;
}


/* =========================================================
   11. APPROACH
   ========================================================= */

.home-approach {
  padding:
    var(--section-space) var(--page-inline);

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

.home-approach__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.5fr) minmax(260px, 0.5fr);

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

  align-items:
    end;

  margin-bottom:
    clamp(90px, 10vw, 160px);
}

.home-approach__title {
  max-width:
    930px;

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.home-approach__copy {
  max-width:
    390px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.65;
}


/* =========================================================
   12. APPROACH LIST
   ========================================================= */

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

.approach-item {
  display:
    grid;

  grid-template-columns:
    90px minmax(0, 0.8fr) minmax(300px, 1fr);

  gap:
    clamp(28px, 5vw, 90px);

  align-items:
    start;

  padding:
    clamp(38px, 5vw, 72px) 0;

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

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

  font-size:
    0.72rem;

  letter-spacing:
    0.08em;
}

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

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

  font-weight:
    400;

  line-height:
    0.95;

  letter-spacing:
    -0.045em;
}

.approach-item__description {
  max-width:
    560px;

  color:
    var(--text-muted);

  font-size:
    clamp(0.9rem, 1.1vw, 1rem);

  line-height:
    1.7;
}


/* =========================================================
   13. ABOUT PREVIEW
   ========================================================= */

.home-about {
  padding:
    var(--section-space) var(--page-inline);

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

.home-about__grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr) minmax(360px, 0.68fr);

  gap:
    clamp(50px, 8vw, 140px);

  align-items:
    stretch;
}

.home-about__content {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  min-height:
    720px;

  padding-block:
    12px;
}

.home-about__title {
  max-width:
    920px;

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

  font-weight:
    400;

  line-height:
    0.85;

  letter-spacing:
    -0.07em;
}

.home-about__bottom {
  display:
    grid;

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

  align-items:
    end;

  gap:
    40px;
}

.home-about__copy {
  max-width:
    520px;

  color:
    var(--text-muted);

  font-size:
    0.92rem;

  line-height:
    1.7;
}

.home-about__media {
  position:
    relative;

  min-height:
    720px;

  overflow:
    hidden;
}

.home-about__media img {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translateY(-6%);

  will-change:
    transform;
}


/* =========================================================
   14. ABPE VALUES
   ========================================================= */

.abpe-values {
  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top:
    clamp(70px, 9vw, 140px);

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

.abpe-value {
  position:
    relative;

  min-height:
    250px;

  padding:
    30px 28px;

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

  transition:
    background var(--transition);
}

.abpe-value:first-child {
  border-left:
    1px solid var(--line);
}

.abpe-value:hover {
  background:
    var(--bg-white);
}

.abpe-value__number {
  display:
    block;

  margin-bottom:
    80px;

  color:
    var(--text-soft);

  font-size:
    0.68rem;
}

.abpe-value__title {
  color:
    var(--text-heading);

  font-size:
    clamp(1.6rem, 2.4vw, 3rem);

  font-weight:
    400;

  line-height:
    0.95;

  letter-spacing:
    -0.045em;
}


/* =========================================================
   15. CLOSING CTA
   ========================================================= */

.home-cta {
  position:
    relative;

  padding:
    clamp(90px, 10vw, 160px) var(--page-inline);

  background:
    var(--abpe-navy);

  color:
    #ffffff;

  overflow:
    hidden;
}

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

  position:
    absolute;

  top:
    -30%;

  right:
    -10%;

  width:
    50vw;

  height:
    50vw;

  border-radius:
    50%;

  background:
    radial-gradient(circle,
      rgba(0, 200, 255, 0.22) 0%,
      rgba(7, 92, 255, 0.10) 35%,
      transparent 68%);

  pointer-events:
    none;
}

.home-cta__topline,
.home-cta__bottomline {
  position:
    absolute;

  left:
    0;

  width:
    100%;

  height:
    3px;

  background:
    linear-gradient(90deg,
      var(--abpe-blue) 0%,
      var(--abpe-cyan) 50%,
      #ffffff 100%);
}

.home-cta__topline {
  top:
    0;
}

.home-cta__bottomline {
  bottom:
    0;
}

.home-cta__header {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    40px;

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

.home-cta__label {
  color:
    rgba(255, 255, 255, 0.48);
}

.home-cta__meta {
  max-width:
    360px;

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

  font-size:
    0.78rem;

  line-height:
    1.65;
}

.home-cta__main {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    clamp(30px, 5vw, 80px);
}

.home-cta__title {
  max-width:
    1280px;

  color:
    #ffffff;

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

  font-weight:
    400;

  line-height:
    0.82;

  letter-spacing:
    -0.075em;

  text-transform:
    uppercase;
}

.home-cta__action {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    clamp(90px, 10vw, 150px);

  height:
    clamp(90px, 10vw, 150px);

  flex:
    0 0 auto;

  border-radius:
    50%;

  color:
    var(--abpe-navy);

  background:
    #ffffff;

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

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

  background:
    var(--abpe-blue);

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

.home-cta__action svg {
  width:
    34%;

  height:
    34%;
}


/* =========================================================
   16. DECORATIVE GRID
   ========================================================= */

.decorative-grid {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.12;

  background-image:
    linear-gradient(rgba(7, 20, 38, 0.2) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(7, 20, 38, 0.2) 1px,
      transparent 1px);

  background-size:
    64px 64px;
}

.section-dark .decorative-grid,
.home-cta .decorative-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px);
}


/* =========================================================
   17. POINTER DECORATION
   ========================================================= */

.cursor-label {
  position:
    fixed;

  z-index:
    90;

  top:
    0;

  left:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    84px;

  height:
    38px;

  padding:
    0 14px;

  border-radius:
    var(--radius-pill);

  color:
    #ffffff;

  background:
    var(--abpe-blue);

  font-size:
    0.68rem;

  font-weight:
    600;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translate3d(-50%, -50%, 0);

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.cursor-label.is-visible {
  opacity:
    1;

  visibility:
    visible;
}


/* =========================================================
   18. UTILITY — SECTION INDEX
   ========================================================= */

.section-index {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  color:
    var(--text-muted);

  font-size:
    0.68rem;

  font-weight:
    500;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.section-index::before {
  content:
    "";

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

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