/* =====================================================
   How It Works — v1.3.0
   Exact match to Figma design.

   LAYOUT LOGIC (matching Figma exactly):
   ┌─────────────────────────────────────┐
   │  [①] [Introduction badge + text  ] │  ← step 1: circle LEFT, content right of it (left half)
   │                                     │
   │  [Setup badge + text]         [②]  │  ← step 2: content LEFT half, circle RIGHT edge
   │                                     │
   │  [③] [Launch Day badge + text ]    │  ← step 3: circle LEFT, content right of it
   │                                     │
   │  [Ongoing badge + text]       [④]  │  ← step 4: content LEFT half, circle RIGHT edge
   │                                     │
   │           [⑤]                      │  ← step 5: circle CENTER, content centered below
   │   [End-to-End Management]           │
   └─────────────────────────────────────┘
   ===================================================== */

/* ---- Variables ---- */
.hiw-section {
    --bg:     #000000;
    --card:   #242428;
    --dark:   #1a1a1e;
    --white:  #f0ede6;
    --muted:  #9e9e9e;
    --border: #383838;
    --pop:    'Poppins', sans-serif;
    --serif:  'Playfair Display', serif;
    --cw:     1100px;   /* content max-width */
    --pad:    60px;     /* left/right padding */
    --cd:     55px;     /* circle diameter */
    --cgap:   26px;     /* circle-to-content gap */
    --sh:     340px;    /* step min-height */
}

/* ---- Section ---- */
.hiw-section {
    background: var(--bg);
    position: relative;   /* SVG anchors here */
    overflow: hidden;
    padding: 80px 0 110px;
    box-sizing: border-box;
}

/* ---- Content wrapper ---- */
.hiw-wrap {
    max-width: var(--cw);
    margin: 0 auto;
    padding: 0 var(--pad);
    position: relative;
    z-index: 1;         /* above SVG line */
    box-sizing: border-box;
}

/* ---- Heading ---- */
.hiw-title {
    font-family: var(--pop);
    font-weight: 500;
    font-size: clamp(28px, 3.8vw, 46px);
    color: var(--white);
    text-align: center;
    margin: 0 0 60px;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-style: normal;
}
.hiw-title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
}

/* ================================================================
   SVG LINE — full-section absolute overlay
   JS sets width/height/viewBox and writes path data.
   ================================================================ */
#hiw-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

/* Dim background track */
#hiw-track {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Animated white line */
#hiw-line {
    fill: none;
    stroke: #f0ede6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 99999;
    stroke-dashoffset: 99999;
    /* JS animates this on every scroll frame — no CSS transition */
}

/* Traveling dot — rides the front tip of the drawn line */
#hiw-dot {
    fill: #f0ede6;
    filter: drop-shadow(0 0 4px rgba(240,237,230,0.7));
    /* JS updates cx/cy on each frame */
}

/* ================================================================
   STEPS — each step is FULL WIDTH, circle positioned absolutely
   ================================================================ */
.hiw-steps {
    display: flex;
    flex-direction: column;
}

/* ---- Base step — full-width row ---- */
.hiw-step {
    position: relative;   /* circle is absolute inside */
    width: 100%;
    min-height: var(--sh);
    display: flex;
    align-items: center;

    /* scroll reveal */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}
.hiw-step.hiw-in {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================================
   STEP — LEFT  (steps 1, 3)
   Circle at far left edge. Content to its right, left half only.
   ================================================================ */
.hiw-step--left .hiw-num {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.hiw-step--left .hiw-content {
    margin-left: calc(var(--cd) + var(--cgap));  /* right of circle */
    max-width: 480px;
}

/* ================================================================
   STEP — RIGHT  (steps 2, 4)
   Circle at far right edge. Content stays in left ~55%.
   ================================================================ */
.hiw-step--right .hiw-num {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.hiw-step--right .hiw-content {
    margin-left: 0;
    max-width: 480px;
}

/* ================================================================
   STEP — CENTER  (step 5)
   Circle centered. Content centered below.
   ================================================================ */
.hiw-step--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 0 20px;
    min-height: auto;
    gap: 22px;
}
.hiw-step--center .hiw-num {
    position: relative;
    left: auto; right: auto; top: auto;
    transform: none;
    flex-shrink: 0;
}
.hiw-step--center .hiw-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 520px;
}
.hiw-step--center .hiw-desc {
    text-align: center;
}

/* ---- Number circle ---- */
.hiw-num {
    width: var(--cd);
    height: var(--cd);
    border-radius: 50%;
    background: rgba(255,255,255,.03);
    border: 1.5px solid rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
/* Dark inner fill */
.hiw-num::before {
    content: '';
    position: absolute;
    inset: 2.75px;
    border-radius: 50%;
    background: var(--card);
}
/* Bottom glow */
.hiw-num::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 68%; height: 44%;
    background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.2) 0%, transparent 75%);
    border-radius: 50%;
}
.hiw-num span {
    font-family: var(--pop);
    font-weight: 600;
    font-size: 22px;
    color: var(--white);
    line-height: 1;
    position: relative;
    z-index: 2;
    letter-spacing: -0.02em;
}

/* ---- Content block ---- */
.hiw-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---- Badge ---- */
/*
 * BADGE — exactly as Figma:
 * overflow:hidden clips the glows so only their edges show inside.
 * The glows are large radial gradients anchored to the left/right walls.
 * This creates the subtle inner-edge light effect from the design.
 */
.hiw-badge {
    display: inline-flex;
    align-items: center;
    background: var(--dark);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 5px 18px;
    position: relative;
    overflow: hidden;          /* clips the inner glows */
}

/* Left & right white border bars (2px each) */
.hiw-badge::before,
.hiw-badge::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--white);
    z-index: 2;
}
.hiw-badge::before { left: 0; }
.hiw-badge::after  { right: 0; }

/*
 * Left inner glow — large radial centered on the LEFT wall.
 * overflow:hidden on the parent clips it so only a soft halo
 * near the left white bar is visible inside the badge.
 */
.hiw-glow-l {
    position: absolute;
    left: -80px;           /* center of gradient anchored to left edge */
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.06) 40%,
        transparent 70%);
    mix-blend-mode: lighten;
    pointer-events: none;
    z-index: 1;
}

/*
 * Right inner glow — mirrored on the RIGHT wall.
 */
.hiw-glow-r {
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.06) 40%,
        transparent 70%);
    mix-blend-mode: lighten;
    pointer-events: none;
    z-index: 1;
}

/* Badge text — above the glows */
.hiw-badge__text {
    font-family: var(--pop);
    font-weight: 500;
    font-size: 22px;
    color: var(--white);
    line-height: 34px;
    white-space: nowrap;
    position: relative;
    z-index: 3;
}

/* ---- Text ---- */
.hiw-sub {
    font-family: var(--pop);
    font-size: 16px;
    font-weight: 400;
    color: var(--white);
    margin: 0;
    line-height: 22px;
}
.hiw-desc {
    font-family: var(--pop);
    font-size: 15px;
    color: var(--muted);
    margin: 0;
    line-height: 22px;
    max-width: 440px;
}

/* ================================================================
   CTA BUTTON
   ================================================================ */
.hiw-cta {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.hiw-btn {
    display: inline-flex;
    padding: 3px;
    border-radius: 50px;
    border: 1px solid var(--border);
    text-decoration: none;
    background: radial-gradient(ellipse 80% 55% at 50% 100%, rgba(255,255,255,.15) 0%, transparent 68%);
    transition: opacity .2s;
}
.hiw-btn:hover { opacity: .76; }
.hiw-btn span {
    display: block;
    background: var(--card);
    border-radius: 50px;
    padding: 13px 32px;
    font-family: var(--pop);
    font-weight: 600;
    font-size: 16px;
    color: var(--white);
    white-space: nowrap;
    line-height: 1.1;
}

/* ================================================================
   MOBILE
   ================================================================ */
@media (max-width: 767px) {
    .hiw-section { padding: 55px 0 75px; }
    .hiw-wrap    { padding: 0 20px; }
    .hiw-title   { font-size: 26px; margin-bottom: 40px; }

    /* All steps stack circle + content vertically */
    .hiw-step {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        padding: 36px 0;
        gap: 18px;
    }
    .hiw-step--left .hiw-num,
    .hiw-step--right .hiw-num {
        position: relative;
        left: auto; right: auto; top: auto;
        transform: none;
    }
    .hiw-step--left .hiw-content,
    .hiw-step--right .hiw-content {
        margin-left: 0;
        max-width: 100%;
    }

    /* ---- Step 5 (center) — left-aligned on mobile like all others ---- */
    .hiw-step--center {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 36px 0;
        min-height: auto;
        gap: 18px;
    }
    .hiw-step--center .hiw-num {
        position: relative;
        left: auto; right: auto; top: auto;
        transform: none;
        flex-shrink: 0;
    }
    .hiw-step--center .hiw-content {
        align-items: flex-start;
        max-width: 100%;
    }
    .hiw-step--center .hiw-desc {
        text-align: left;
    }

    /* Hide SVG on mobile */
    #hiw-svg { display: none; }

    .hiw-badge span { font-size: 17px; }
}