/**
 * /assets/css/pages/roadmap.css
 *
 * Roadmap-specific status, phase, card, timeline, principle and CTA styles.
 * Shared hero, buttons, typography, sections and global tokens live in the
 * site-wide core/components stylesheets.
 */

.page-roadmap {
  --hero-min-height: 80vh;
  --hero-accent-x: 75%;
  --hero-accent-y: 34%;
  --hero-accent-alpha: .17;
  --hero-mark-bottom: 3vh;
  --hero-mark-size: clamp(13rem, 26vw, 29rem);
  --hero-mark-opacity: .038;
  --hero-lines-opacity: .24;
}

.roadmap-hero-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 78%, rgba(189,0,0,.07), transparent 29%),
    linear-gradient(to bottom, #080808, #070707);
}

/* Explanatory roadmap context belongs below the standardized hero. */
.roadmap-overview-section {
  padding: 72px 0;
  border-bottom: 1px solid var(--border-soft);
}

.roadmap-overview {
  position: relative;
  max-width: 1050px;
  padding: 7px 0 7px 31px;
  border-left: 1px solid rgba(189,0,0,.58);
}

.roadmap-overview::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 72px;
  background: var(--red-bright);
  box-shadow: 0 0 22px rgba(224,0,0,.30);
}

.roadmap-overview-label {
  color: var(--red-bright);
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.roadmap-overview-title {
  max-width: 680px;
  margin-top: 17px;
  color: #fff;
  font-size: clamp(1.55rem, 2.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.roadmap-overview-copy {
  max-width: 760px;
  margin-top: 16px;
  color: rgba(255,255,255,.42);
  font-size: .80rem;
  line-height: 1.72;
}

.roadmap-overview-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin-top: 30px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.roadmap-overview-item {
  display: grid;
  grid-template-columns: 25px minmax(0,1fr);
  gap: 8px 10px;
  align-content: center;
  min-height: 92px;
  padding: 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.roadmap-overview-item i {
  grid-row: 1 / span 2;
  color: var(--red-bright);
  font-size: .76rem;
}

.roadmap-overview-item strong {
  color: #fff;
  font-size: .64rem;
}

.roadmap-overview-item span {
  color: rgba(255,255,255,.27);
  font-size: .59rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .roadmap-overview-list {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 520px) {
  .roadmap-overview-section {
    padding: 58px 0;
  }

  .roadmap-overview {
    padding-left: 22px;
  }

  .roadmap-overview-list {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   STATUS KEY
===================================================== */

.status-key {

    display: grid;

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

    gap: 1px;

    margin-top: 48px;

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

    background:
        var(--border-soft);

}


.status-key-item {

    min-height: 155px;

    padding: 25px;

    background:
        #0d0d0d;

}


.status-key-top {

    display: flex;

    align-items: center;

    gap: 9px;

}


.status-dot {

    width: 7px;
    height: 7px;

    flex:
        0
        0
        7px;

    border-radius: 50%;

}


.status-dot.active {

    background:
        var(--green);

    box-shadow:
        0 0 9px
        rgba(57,207,108,.35);

}


.status-dot.next {

    background:
        var(--red-bright);

    box-shadow:
        0 0 9px
        rgba(224,0,0,.38);

}


.status-dot.planned {

    background:
        var(--yellow);

}


.status-dot.ongoing {

    background:
        var(--blue);

}


.status-key-title {

    color: #fff;

    font-size: .72rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;

}


.status-key-copy {

    margin-top: 20px;

    color:
        rgba(255,255,255,.31);

    font-size: .70rem;

    line-height: 1.65;

}


/* =====================================================
   ROADMAP PHASE
===================================================== */

.roadmap-phase {

    position: relative;

}


.phase-header {

    display: grid;

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

    gap: 60px;

    align-items: end;

    margin-bottom: 54px;

}


.phase-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color:
        var(--red-bright);

    font-size: .57rem;

    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;

}


.phase-title {

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            2.7rem,
            5vw,
            4.8rem
        );

    font-weight: 900;

    line-height: .93;

    letter-spacing: -.05em;

    text-transform: uppercase;

}


.phase-copy {

    margin: 0;

    color:
        rgba(255,255,255,.39);

    font-size: .79rem;

    line-height: 1.72;

}


/* =====================================================
   ROADMAP GRID
===================================================== */

.roadmap-grid-items {

    display: grid;

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

    gap: 18px;

}


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

.roadmap-card {

    position: relative;

    min-height: 300px;

    display: flex;

    flex-direction: column;

    padding: 28px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.013),
            rgba(255,255,255,.002)
        );

    overflow: hidden;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;

}


.roadmap-card:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--red-border);

    background:
        linear-gradient(
            145deg,
            rgba(189,0,0,.045),
            rgba(255,255,255,.003)
        );

}


.roadmap-card::after {

    content: "";

    position: absolute;

    right: -55px;
    bottom: -75px;

    width: 180px;
    height: 180px;

    border:
        1px solid
        rgba(255,255,255,.022);

    border-radius: 50%;

    pointer-events: none;

}


.roadmap-card-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

}


.roadmap-card-icon {

    width: 44px;
    height: 44px;

    display: flex;

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

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

    color:
        var(--red-bright);

    background:
        var(--red-soft);

}


.roadmap-status {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 27px;

    padding:
        0
        9px;

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

    color:
        rgba(255,255,255,.42);

    background:
        rgba(255,255,255,.02);

    font-size: .48rem;

    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;

}


.roadmap-card-title {

    position: relative;

    z-index: 1;

    margin-top: 27px;

    color: #fff;

    font-size: 1.02rem;

    font-weight: 800;

    letter-spacing: -.015em;

}


.roadmap-card-copy {

    position: relative;

    z-index: 1;

    margin-top: 10px;

    color:
        rgba(255,255,255,.35);

    font-size: .74rem;

    line-height: 1.68;

}


.roadmap-card-meta {

    position: relative;

    z-index: 1;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 22px;

}


.roadmap-tag {

    display: inline-flex;

    align-items: center;

    min-height: 27px;

    padding:
        0
        8px;

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

    color:
        rgba(255,255,255,.31);

    background:
        rgba(255,255,255,.012);

    font-size: .52rem;

    font-weight: 700;

}


/* =====================================================
   PROGRESS
===================================================== */

.roadmap-progress {

    position: relative;

    z-index: 1;

    margin-top: auto;

    padding-top: 25px;

}


.roadmap-progress-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 9px;

}


.roadmap-progress-label {

    color:
        rgba(255,255,255,.24);

    font-size: .50rem;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;

}


.roadmap-progress-value {

    color:
        rgba(255,255,255,.48);

    font-size: .53rem;

    font-weight: 800;

}


.roadmap-progress-track {

    height: 3px;

    background:
        rgba(255,255,255,.07);

    overflow: hidden;

}


.roadmap-progress-fill {

    height: 100%;

    background:
        linear-gradient(
            to right,
            var(--red-dark, #780000),
            var(--red-bright)
        );

}


/* =====================================================
   BIG TIMELINE
===================================================== */

.timeline {

    position: relative;

    margin-top: 55px;

}


.timeline::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 23px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            var(--red-bright),
            rgba(189,0,0,.18),
            rgba(255,255,255,.05)
        );

}


.timeline-item {

    position: relative;

    display: grid;

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

    gap: 25px;

    padding-bottom: 42px;

}


.timeline-item:last-child {

    padding-bottom: 0;

}


.timeline-marker {

    position: relative;

    z-index: 2;

    width: 47px;
    height: 47px;

    display: flex;

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

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

    color:
        var(--red-bright);

    background:
        var(--bg-dark);

    font-size: .72rem;

    font-weight: 900;

}


.timeline-content {

    padding:
        4px
        0
        0;

}


.timeline-label {

    color:
        var(--red-bright);

    font-size: .52rem;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;

}


.timeline-title {

    margin-top: 7px;

    color: #fff;

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.8rem
        );

    font-weight: 800;

    letter-spacing: -.025em;

}


.timeline-copy {

    max-width: 900px;

    margin-top: 10px;

    color:
        rgba(255,255,255,.36);

    font-size: .74rem;

    line-height: 1.7;

}


/* =====================================================
   PRINCIPLES
===================================================== */

.principles-grid {

    display: grid;

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

    gap: 1px;

    margin-top: 48px;

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

    background:
        var(--border-soft);

}


.principle {

    min-height: 225px;

    padding: 28px;

    background:
        #0d0d0d;

}


.principle-number {

    color:
        var(--red-bright);

    font-size: .52rem;

    font-weight: 800;

    letter-spacing: .15em;

}


.principle-title {

    margin-top: 40px;

    color: #fff;

    font-size: .90rem;

    font-weight: 800;

}


.principle-copy {

    margin-top: 9px;

    color:
        rgba(255,255,255,.33);

    font-size: .71rem;

    line-height: 1.67;

}


/* =====================================================
   DISCLAIMER
===================================================== */

.roadmap-notice {

    display: grid;

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

    gap: 18px;

    margin-top: 48px;

    padding:
        24px;

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

    border-left:
        2px solid
        var(--red);

    background:
        linear-gradient(
            to right,
            rgba(189,0,0,.05),
            #0d0d0d 55%
        );

}


.roadmap-notice-icon {

    width: 40px;
    height: 40px;

    display: flex;

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

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

    color:
        var(--red-bright);

}


.roadmap-notice-title {

    color: #fff;

    font-size: .76rem;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

}


.roadmap-notice-copy {

    margin-top: 6px;

    color:
        rgba(255,255,255,.34);

    font-size: .70rem;

    line-height: 1.65;

}


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

.roadmap-cta {

    position: relative;

    overflow: hidden;

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

    background:
        #070707;

}


.roadmap-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 18% 50%,
            rgba(189,0,0,.16),
            transparent 38%
        ),

        radial-gradient(
            circle at 84% 35%,
            rgba(255,255,255,.025),
            transparent 28%
        );

}


.roadmap-cta-inner {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 50px;

    padding:
        90px
        0;

}


.roadmap-cta-title {

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            2.5rem,
            5.5vw,
            5.1rem
        );

    font-weight: 900;

    line-height: .92;

    letter-spacing: -.055em;

    text-transform: uppercase;

}


.roadmap-cta-copy {

    max-width: 700px;

    margin-top: 17px;

    color:
        rgba(255,255,255,.40);

    font-size: .79rem;

    line-height: 1.72;

}


.roadmap-cta-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    flex:
        0
        0
        auto;

}


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

@media (max-width: 1199.98px) {

    .status-key {

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

    }

}


@media (max-width: 991.98px) {
.phase-header {

        grid-template-columns:
            1fr;

        gap: 22px;

    }


    .roadmap-grid-items {

        grid-template-columns:
            1fr;

    }


    .principles-grid {

        grid-template-columns:
            1fr;

    }


    .roadmap-cta-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


@media (max-width: 767.98px) {

    .section {

        padding:
            80px
            0;

    }
.status-key {

        grid-template-columns:
            1fr;

    }


    .roadmap-card {

        min-height:
            0;

    }


    .roadmap-overview-item {

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

        padding:
            8px
            0;

    }


    .roadmap-overview-item span {

        grid-column:
            2;

    }


    .roadmap-cta-inner {

        padding:
            72px
            0;

    }


    .roadmap-cta-actions {

        width: 100%;

        flex-direction:
            column;

    }


    .roadmap-cta-actions
    .site-btn {

        width: 100%;

    }

}


@media (max-width: 520px) {
.roadmap-card-top {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .timeline-item {

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

        gap: 18px;

    }


    .timeline::before {

        left: 19px;

    }


    .timeline-marker {

        width: 39px;
        height: 39px;

    }


    .roadmap-notice {

        grid-template-columns:
            1fr;

    }

}