/* =========================================================
   HOME PAGE REDESIGN CSS
   ---------------------------------------------------------
   This file styles ONLY the homepage.
   It is intentionally separate from style.css so the
   redesign stays organized and easier to maintain.
   ALL CSS HERE SHOULD HAVE A PREFIX OF "home-" and then the section number it is and then the css name
   ========================================================= */

/* =========================================================
   SECTION 1 - LANDING/HERO BACKGROUND
   ---------------------------------------------------------
   This section controls:
   1. Hero layout
   2. Left-aligned typewriter text
   3. Right-side animated blue ribbon / oval wave background

   IMPORTANT:
   All blue shades for this hero are defined below as variables
   inside .home-1, so if you want to change the ribbon colors,
   this is the exact place to do it.
   ========================================================= */

.home-1 {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 78px);
    display: flex;
    align-items: center;
    padding: 24px 0 34px;
    isolation: isolate;

    /* Base hero background */
    background:
        linear-gradient(90deg,
            var(--home-1-background-base-dark) 0%,
            #030814 34%,
            var(--home-1-background-base-navy) 72%,
            var(--home-1-background-base-blue) 100%);
}

/* =========================================================
   HERO BACKGROUND LAYER 1
   Soft blue field on the right side only
   ========================================================= */
.home-1::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 84% 50%, var(--home-1-background-glow-strong) 0%, transparent 18%),
        radial-gradient(circle at 78% 52%, var(--home-1-background-glow-soft) 0%, transparent 30%),
        linear-gradient(90deg, transparent 0%, transparent 50%, rgba(8, 30, 78, 0.38) 100%);
}

/* =========================================================
   HERO INNER WRAPPER
   Keeps text left and gives a positioning reference for the
   animated ribbon on the right
   ========================================================= */
.home-1 .container {
    position: relative;
    display: flex;
    align-items: center;
    min-height: inherit;
    z-index: 1;
}

/* =========================================================
   HERO BACKGROUND LAYER 2
   MAIN BLUE RIBBON
   ---------------------------------------------------------
   WHAT THIS DOES:
   - Draws the main visible ribbon on the right side
   - Uses an SVG path as a thin glowing stroke
   - Path enters from upper-right / top-middle
   - Makes 2 loops
   - Final tail now exits toward the RIGHT side of the screen

   HOW TO EDIT LATER:
   - top: moves the whole ribbon up/down
   - right: moves the whole ribbon left/right
   - width: controls ribbon drawing area width
   - height: controls ribbon drawing area height
   - stroke-width inside the SVG path controls ribbon thickness
   ========================================================= */
.home-1 .container::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;

    /* Overall ribbon placement */
    top: -13%;
    right: -20%;

    /* Overall ribbon size box */
    width: min(58vw, 980px);
    height: min(102vh, 900px);

    /* SVG PATH SHAPE
       This path creates:
       1. top entry
       2. first loop
       3. second opposite loop
       4. exit toward the right side
       
       If you want to reshape the ribbon later, edit only the
       d='...' path values below.*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 920' fill='none'%3E%3Cpath d='M300 -60 C292 40 255 118 278 196 C306 292 390 295 386 222 C382 152 305 154 262 230 C214 314 256 404 336 478 C393 530 404 600 363 650 C321 700 249 693 233 628 C217 563 277 526 326 565 C382 610 458 676 560 738 C720 820 1000 724 1320 612' stroke='white' stroke-width='26' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    /* MASK
       The same SVG path is used as a mask so the gradient
       shows only inside the ribbon stroke.*/
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 920' fill='none'%3E%3Cpath d='M300 -60 C292 40 255 118 278 196 C306 292 390 295 386 222 C382 152 305 154 262 230 C214 314 256 404 336 478 C393 530 404 600 363 650 C321 700 249 693 233 628 C217 563 277 526 326 565 C382 610 458 676 560 738 C720 820 1000 724 1320 612' stroke='white' stroke-width='26' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 920' fill='none'%3E%3Cpath d='M300 -60 C292 40 255 118 278 196 C306 292 390 295 386 222 C382 152 305 154 262 230 C214 314 256 404 336 478 C393 530 404 600 363 650 C321 700 249 693 233 628 C217 563 277 526 326 565 C382 610 458 676 560 738 C720 820 1000 724 1320 612' stroke='white' stroke-width='26' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    /* RIBBON COLOR
       Uses your existing blue ribbon variables.
       Change these stops if you want lighter/darker contrast. */
    background:
        linear-gradient(180deg,
            var(--home-1-background-ribbon-light) 0%,
            var(--home-1-background-ribbon-mid) 30%,
            var(--home-1-background-ribbon-core) 50%,
            var(--home-1-background-ribbon-mid) 72%,
            var(--home-1-background-ribbon-light) 100%);

    /* Glow around the main ribbon */
    filter:
        drop-shadow(0 0 10px var(--home-1-background-ribbon-soft)) drop-shadow(0 0 24px var(--home-1-background-ribbon-mid));

    opacity: 0.78;
    transform-origin: center;
    transform: translateY(-8px) scale(0.94);

    /* Breathing animation */
    animation: home-1-background-ribbon-main 4.6s ease-in-out infinite;
}

/* =========================================================
   HERO BACKGROUND LAYER 3
   SOFT GLOW COPY
   ---------------------------------------------------------
   WHAT THIS DOES:
   - Creates a blurred copy behind the main ribbon
   - Makes the ribbon feel softer, richer, and more premium

   HOW TO EDIT LATER:
   - width / height: glow area size
   - top / right: glow placement
   - stroke-width inside SVG: glow thickness
   - opacity: how visible the glow is
   - blur(): softness of glow
   ========================================================= */
.home-1 .container::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;

    /* Glow placement */
    top: -15%;
    right: -25%;

    /* Glow size box */
    width: min(60vw, 1040px);
    height: min(108vh, 960px);

    /* Same ribbon path, but thicker for glow */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 920' fill='none'%3E%3Cpath d='M300 -60 C292 40 255 118 278 196 C306 292 390 295 386 222 C382 152 305 154 262 230 C214 314 256 404 336 478 C393 530 404 600 363 650 C321 700 249 693 233 628 C217 563 277 526 326 565 C382 610 458 676 560 738 C720 820 1000 724 1320 612' stroke='white' stroke-width='46' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 920' fill='none'%3E%3Cpath d='M300 -60 C292 40 255 118 278 196 C306 292 390 295 386 222 C382 152 305 154 262 230 C214 314 256 404 336 478 C393 530 404 600 363 650 C321 700 249 693 233 628 C217 563 277 526 326 565 C382 610 458 676 560 738 C720 820 1000 724 1320 612' stroke='white' stroke-width='46' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    /* Soft blue glow fill */
    background:
        linear-gradient(180deg,
            transparent 0%,
            var(--home-1-background-ribbon-light) 18%,
            var(--home-1-background-ribbon-soft) 48%,
            var(--home-1-background-ribbon-light) 78%,
            transparent 100%);

    filter: blur(16px);
    opacity: 0.32;
    transform-origin: center;
    transform: translateY(-2px) scale(0.98);

    /* Matching breathing animation */
    animation: home-1-background-ribbon-glow 4.6s ease-in-out infinite;
}

/* =========================================================
   MAIN RIBBON ANIMATION
   ---------------------------------------------------------
   Slight breathing effect:
   - gets slightly bigger/thicker/brighter
   - then returns to a smaller/lighter state
   ========================================================= */
@keyframes home-1-background-ribbon-main {
    0% {
        transform: translateY(-10px) scale(0.92);
        opacity: 0.58;
        filter:
            drop-shadow(0 0 8px var(--home-1-background-ribbon-soft)) drop-shadow(0 0 18px var(--home-1-background-ribbon-mid));
    }

    50% {
        transform: translateY(12px) scale(1.02);
        opacity: 0.96;
        filter:
            drop-shadow(0 0 14px var(--home-1-background-ribbon-soft)) drop-shadow(0 0 30px var(--home-1-background-ribbon-mid));
    }

    100% {
        transform: translateY(-10px) scale(0.92);
        opacity: 0.58;
        filter:
            drop-shadow(0 0 8px var(--home-1-background-ribbon-soft)) drop-shadow(0 0 18px var(--home-1-background-ribbon-mid));
    }
}

/* =========================================================
   GLOW RIBBON ANIMATION
   ---------------------------------------------------------
   Slightly offset glow breathing behind the ribbon
   ========================================================= */
@keyframes home-1-background-ribbon-glow {
    0% {
        transform: translateY(-4px) scale(0.96);
        opacity: 0.18;
    }

    50% {
        transform: translateY(16px) scale(1.05);
        opacity: 0.48;
    }

    100% {
        transform: translateY(-4px) scale(0.96);
        opacity: 0.18;
    }
}

/* =========================================================
   HERO CONTENT
   Left-aligned instead of center-aligned
   ========================================================= */
.home-1-content {
    position: relative;
    z-index: 2;
    width: min(54%, 700px);
    margin: 0;
    text-align: left;
    padding: 0px 0 24px 0;
}

/* =========================================================
   MAIN TYPEWRITER HEADING
   ========================================================= */
.home-1-typewriter-heading {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2.2rem, 4.7vw, 4.9rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    margin: 0 0 10px;
    min-height: 1.2em;
    max-width: 100%;
    display: block;
    text-align: left;
}

/* =========================================================
   SUB TYPEWRITER HEADING
   ========================================================= */
.home-1-typewriter-subheading {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.12rem, 2vw, 1.8rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    min-height: 1.3em;
    max-width: 100%;
    text-align: left;
    color: var(--text-secondary);
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0;
}

/* Prevents the split pieces from introducing weird spacing/indentation */
.home-1-typewriter-subtext,
.home-1-google-word {
    display: inline;
    margin: 0;
    padding: 0;
}

.home-1-typewriter-text {
    display: inline-block;
}

.home-1-typewriter-subtext {
    display: inline;
    /* margin-right: 6px; */
}

/* Main line cursor */
.home-1-typewriter-text::after {
    content: "|";
    display: inline-block;
    margin-left: 6px;
    color: var(--text-primary);
    animation: blinkCaret 0.9s step-end infinite;
}

/* Sub line cursor */
.home-1-google-word::after {
    content: "|";
    display: inline-block;
    margin-left: 6px;
    color: var(--text-primary);
    animation: blinkCaret 0.9s step-end infinite;
}

/* =========================================================
   GOOGLE WORD FONT
   Uses the official Google Sans font only for the word Google
   ========================================================= */
.home-1-google-word {
    font-family: "Google Sans", "Inter", sans-serif;
    font-weight: 500;
    color: var(--text-primary);
    display: inline;
    margin: 0;
    padding: 0;
}

/* =========================================================
   CURSOR BLINK
   ========================================================= */
@keyframes blinkCaret {

    0%,
    50% {
        opacity: 1;
    }

    50.01%,
    100% {
        opacity: 0;
    }
}

/* =========================================================
   SECTION 2 - MOVING SIGNAL STRIP
   ========================================================= */

.home-2 {
    position: relative;
    overflow: hidden;
    padding: 12px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.home-2-track {
    display: flex;
    align-items: center;
    gap: 34px;
    width: max-content;
    animation: signalTickerMove 22s linear infinite;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

@keyframes signalTickerMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.home-2-track span {
    position: relative;
    padding-right: 40px;
}

.home-2-track span::after {
    content: "•";
    position: absolute;
    right: 0px;
    color: var(--accent-tertiary);
}

/* =========================================================
   SECTION 3 - ABOUT THE EVENT
   ---------------------------------------------------------
   Design direction:
   - Centered section intro
   - Short paragraph
   - Single-row 4-card glass grid
   - Clean, modern, and highly scannable
   ========================================================= */

.home-3 {
    padding-top: 78px;
}

/* ---------------------------------------------------------
   SECTION 3 INTRO
   Centers the heading copy and keeps the paragraph readable.
   --------------------------------------------------------- */
.home-3-intro {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.home-3-intro-text {
    max-width: 760px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   SECTION 3 CARD GRID
   4 cards in one row on desktop.
   Each card should feel balanced and not overly tall.
   --------------------------------------------------------- */
.home-3-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 42px;
}

/* ---------------------------------------------------------
   INDIVIDUAL CARD
   Uses shared .glass-backdrop from style.css.
   Adds subtle tint and hover interaction.
   --------------------------------------------------------- */
.home-3-card {
    position: relative;
    padding: 24px 22px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    overflow: hidden;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

/* Soft colored glow at the bottom of each card */
.home-3-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    pointer-events: none;
    background:
        linear-gradient(to top,
            rgba(91, 140, 255, 0.10) 0%,
            rgba(139, 92, 246, 0.08) 38%,
            rgba(139, 92, 246, 0.00) 100%);
    z-index: 0;
}

.home-3-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Keep real content above decorative glow */
.home-3-card>* {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------
   CARD ICON
   Small circular icon badge at the top.
   --------------------------------------------------------- */
.home-3-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-primary);
    background:
        linear-gradient(135deg,
            rgba(91, 140, 255, 0.20),
            rgba(139, 92, 246, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ---------------------------------------------------------
   CARD TITLE
   --------------------------------------------------------- */
.home-3-card-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* ---------------------------------------------------------
   CARD BODY TEXT
   --------------------------------------------------------- */
.home-3-card-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* =========================================================
   SECTION 4 - TIMELINE & STATS
   ---------------------------------------------------------
   Sub-sections:
     4a) .home-4-timeline-*  - event milestone timeline
     4b) .home-4-stats / .home-4-stat-*  - counting stats
         .home-4-stat-live   - highlighted live reg count
         .home-4-stat-grid   - 2×2 supporting stats grid
   ========================================================= */

/* ---------------------------------------------------------
   4a TIMELINE - outer wrapper
   Provides horizontal scroll on small screens so the
   timeline never collapses into a cramped mess.
   --------------------------------------------------------- */
.home-4-timeline-wrapper {
    margin: 52px 0 64px;
    /* On mobile the track needs to scroll horizontally */
    overflow-x: auto;
    overflow-y: visible;
    /* Hide scrollbar visually but keep it functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Extra bottom padding so the node body text isn't clipped */
    padding-bottom: 8px;
}

.home-4-timeline-wrapper::-webkit-scrollbar {
    display: none;
}

/* ---------------------------------------------------------
   4a TIMELINE - inner scroll container
   Sets a minimum width so nodes never squish together.
   --------------------------------------------------------- */
.home-4-timeline-scroll {
    min-width: 680px;
    /* Prevents collapse on very narrow screens */
}

/* ---------------------------------------------------------
   4a TIMELINE - the track itself
   Positions the connecting line and all nodes on one row.
   --------------------------------------------------------- */
.home-4-timeline-track {
    position: relative;
    display: flex;
    align-items: flex-start;
    /* Nodes align at the top (date label area) */
    justify-content: space-between;
    padding-top: 48px;
    /* Space above for the date labels */
    padding-bottom: 0;
}

/* ---------------------------------------------------------
   4a TIMELINE - the grey connecting line
   Sits exactly at the vertical centre of the dot row.
   The line is drawn relative to the track, positioned
   so its vertical midpoint aligns with the dots.
   --------------------------------------------------------- */
.home-4-timeline-line {
    position: absolute;
    /* 48px padding-top + half a dot height (10px) = 58px from track top */
    top: calc(48px + 18px);
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.10);
    z-index: 0;
    border-radius: 2px;
}

/* ---------------------------------------------------------
   4a TIMELINE - the coloured fill layer
   Width is set dynamically by JS based on active node.
   --------------------------------------------------------- */
.home-4-timeline-line-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    /* JS sets this */
    background: linear-gradient(to right,
            var(--accent-secondary),
            var(--accent-primary));
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------
   4a TIMELINE - individual node wrapper
   Each node holds: date label (above), dot (on line), body (below).
   --------------------------------------------------------- */
.home-4-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    /* Nodes share equal space across the track */
    z-index: 1;
    transition: opacity var(--transition-medium);
}

/* ---------------------------------------------------------
   4a TIMELINE - date label (sits above the dot)
   --------------------------------------------------------- */
.home-4-node-date {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

/* ---------------------------------------------------------
   4a TIMELINE - the dot / circle on the line
   --------------------------------------------------------- */
.home-4-node-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.18);
    position: relative;
    z-index: 2;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    flex-shrink: 0;
}

/* ---------------------------------------------------------
   4a TIMELINE - node body (title + description)
   Sits below the dot.
   --------------------------------------------------------- */
.home-4-node-body {
    margin-top: 16px;
    text-align: center;
    padding: 0 6px;
    max-width: 140px;
}

.home-4-node-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.home-4-node-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    transition: color var(--transition-fast);
}

/* ---------------------------------------------------------
   4a TIMELINE - PAST node state
   Completed milestones: dimmed but still readable
   --------------------------------------------------------- */
.home-4-node-past .home-4-node-date {
    color: var(--text-muted);
    opacity: 0.6;
}

.home-4-node-past .home-4-node-dot {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    opacity: 0.55;
}

.home-4-node-past .home-4-node-title {
    color: var(--text-muted);
}

.home-4-node-past .home-4-node-desc {
    opacity: 0.5;
}

/* ---------------------------------------------------------
   4a TIMELINE - ACTIVE node state
   "You are here" - bright, prominent, with pulsing ring
   --------------------------------------------------------- */
.home-4-node-active .home-4-node-date {
    color: var(--accent-tertiary);
    opacity: 1;
}

.home-4-node-active .home-4-node-dot {
    /* Bright solid fill */
    background: var(--accent-tertiary);
    border-color: var(--accent-tertiary);
    /* Outer glow */
    box-shadow:
        0 0 0 5px rgba(34, 211, 238, 0.18),
        0 0 14px rgba(34, 211, 238, 0.40);
    /* Pulsing ring uses ::before pseudo-element */
    overflow: visible;
}

/* The pulsing ring - expands outward and fades */
.home-4-node-active .home-4-node-dot::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--accent-tertiary);
    opacity: 0;
    animation: home-4-pulse 2s ease-out infinite;
}

/* Second ring slightly delayed for layered pulse effect */
.home-4-node-active .home-4-node-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--accent-tertiary);
    opacity: 0;
    animation: home-4-pulse 2s ease-out 0.7s infinite;
}

@keyframes home-4-pulse {
    0% {
        inset: -4px;
        opacity: 0.8;
    }

    100% {
        inset: -18px;
        opacity: 0;
    }
}

.home-4-node-active .home-4-node-title {
    color: var(--text-primary);
    font-weight: 800;
}

.home-4-node-active .home-4-node-desc {
    color: var(--text-secondary);
}

/* ---------------------------------------------------------
   4a TIMELINE - FUTURE node state
   Upcoming milestones: visually subdued/dimmed
   --------------------------------------------------------- */
.home-4-node-future {
    opacity: 0.45;
}

.home-4-node-future .home-4-node-dot {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}


/* ---------------------------------------------------------
   4b STATS - outer wrapper
   Stacks the live count card on top and the 2×2 grid below.
   --------------------------------------------------------- */
.home-4-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------------------------------------------------------
   4b STATS - live registration count card
   This is the hero/highlighted stat. Uses the shared
   .glass-backdrop from style.css for the glass effect.
   --------------------------------------------------------- */
.home-4-stat-live {
    /* Override the default glass radius slightly for a wider card */
    border-radius: var(--radius-xl);
    padding: 32px 36px;
    /* Extra blue tint to make it feel more "live" */
    background:
        radial-gradient(circle at top left, rgba(91, 140, 255, 0.12), transparent 50%),
        rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(91, 140, 255, 0.28);
    position: relative;
    overflow: hidden;
}

/* Subtle top accent line */
.home-4-stat-live::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right,
            transparent 0%,
            var(--accent-primary) 30%,
            var(--accent-secondary) 70%,
            transparent 100%);
}

.home-4-stat-live-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* "Live Registration Count" label row */
.home-4-stat-live-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 10px;
}

/* The animated green dot indicating "live" */
.home-4-stat-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: home-4-live-blink 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes home-4-live-blink {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 8px var(--success);
    }

    50% {
        opacity: 0.4;
        box-shadow: 0 0 2px var(--success);
    }
}

/* The big number */
.home-4-stat-live-num {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    /* Subtle gradient on the text for extra premium feel */
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-tertiary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.home-4-stat-live-sub {
    margin-top: 8px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.home-4-stat-live-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------------------------------------------------------
   4b STATS - the 2×2 supporting stat grid
   --------------------------------------------------------- */
.home-4-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Individual stat card - uses .glass-backdrop from style.css */
.home-4-stat-card {
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Slight hover lift */
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-4-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
}

/* The big animated number */
.home-4-stat-number {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--accent-primary);
    line-height: 1;
}

/* Stat label */
.home-4-stat-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 4px;
}

/* Subtext below the label */
.home-4-stat-detail {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* =========================================================
   SECTION 5 - FLAGSHIP EVENT SERIES
   Full-bleed marquee with side fade overlays
   ========================================================= */

.home-5-section {
    padding-left: 0;
    padding-right: 0;
}

.home-5-marquee {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 10px 0;
}

/* Blue-black side fades */
.home-5-marquee::before,
.home-5-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(70px, 10vw, 180px);
    pointer-events: none;
    z-index: 3;
}

.home-5-marquee::before {
    left: 0;
    background:
        linear-gradient(to right,
            rgba(3, 7, 18, 1) 0%,
            rgba(6, 17, 38, 0.96) 22%,
            rgba(10, 31, 76, 0.65) 55%,
            rgba(10, 31, 76, 0.00) 100%);
}

.home-5-marquee::after {
    right: 0;
    background:
        linear-gradient(to left,
            var(--home-1-background-base-blue) 0%,
            rgba(11, 34, 82, 0.88) 22%,
            rgba(9, 24, 56, 0.58) 55%,
            rgba(9, 24, 56, 0.00) 100%);
}

.home-5-track {
    display: flex;
    align-items: stretch;
    gap: 22px;
    width: max-content;
    padding: 0 22px;
    animation: home4MarqueeMove 32s linear infinite;
    will-change: transform;
}

/* Pause on hover so user can actually read */
.home-5-marquee:hover .home-5-track {
    animation-play-state: paused;
}

@keyframes home4MarqueeMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 11px));
    }
}

.home-5-card {
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    min-height: 300px;
    width: min(680px, 82vw);
    flex: 0 0 auto;
}

.home-5-card h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.home-5-card p {
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.home-5-card-media {
    min-height: 100%;
}

.home-5-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-5-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-5-series-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.home-5-series-badge,
.home-5-series-mini {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.home-5-series-badge {
    color: white;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

.home-5-series-mini {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.home-5-series-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.home-5-series-footer span {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.home-5-series-footer a {
    color: var(--text-primary);
    font-weight: 700;
}

/* =========================================================
   SECTION 6 - ORGANIZERS
   ---------------------------------------------------------
   Two-row full-bleed marquee.
   Row 1: scrolls left (normal).
   Row 2: scrolls right (reverse).
   Hovering either row pauses BOTH via the wrap-level class.
   Clicking a card opens the organizer's LinkedIn in a new tab.
   ========================================================= */

/* Section wrapper - removes horizontal padding so marquee
   bleeds edge to edge exactly like SECTION 5 */
.home-6-section {
    padding-left: 0;
    padding-right: 0;
}

/* =========================================================
   MARQUEE OUTER WRAPPER
   Clips the scrolling tracks and holds the fade overlays.
   position:relative is required for the fade pseudo-divs.
   ========================================================= */
.home-6-marquee-wrap {
    position: relative;
    overflow: hidden;
    /* Full viewport width, same trick as SECTION 5 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* vertical gap between the two rows */
    padding: 10px 0;
}

/* =========================================================
   SIDE FADE OVERLAYS
   Sit on top of both rows and fade them into the background
   at the left and right edges. z-index must be above tracks.
   ========================================================= */
.home-6-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(60px, 10vw, 160px);
    pointer-events: none;
    z-index: 3;
}

/* Left fade - dark-to-transparent going right */
.home-6-fade-left {
    left: 0;
    background: linear-gradient(to right,
            rgba(3, 7, 18, 1) 0%,
            rgba(6, 17, 38, 0.96) 22%,
            rgba(10, 31, 76, 0.55) 60%,
            rgba(10, 31, 76, 0.00) 100%);
}

/* Right fade - matches the blue end of the hero gradient */
.home-6-fade-right {
    right: 0;
    background: linear-gradient(to left,
            var(--home-1-background-base-blue) 0%,
            rgba(11, 34, 82, 0.88) 22%,
            rgba(9, 24, 56, 0.55) 60%,
            rgba(9, 24, 56, 0.00) 100%);
}

/* =========================================================
   ROW CONTAINERS
   Each row clips its own track. overflow:hidden here is a
   safety net; the wrap already clips, but this prevents any
   sub-pixel bleed on some browsers.
   ========================================================= */
.home-6-row {
    overflow: hidden;
}

/* =========================================================
   SCROLLING TRACKS
   width: max-content lets the track grow to fit all cards.
   Both tracks pause when .home-6-marquee-wrap is hovered
   (handled via the :hover rule below).
   ========================================================= */
.home-6-track {
    display: flex;
    align-items: stretch;
    gap: 14px;
    /* gap between cards */
    width: max-content;
    will-change: transform;
}

/* Row 1 - scrolls left (same direction as SECTION 5) */
.home-6-track-left {
    animation: home6MarqueeLeft 28s linear infinite;
}

/* Row 2 - scrolls right (reverse direction) */
.home-6-track-right {
    animation: home6MarqueeRight 28s linear infinite;
}

/* Pause BOTH tracks when the user hovers anywhere in the wrap */
.home-6-marquee-wrap:hover .home-6-track {
    animation-play-state: paused;
}

/* =========================================================
   KEYFRAMES
   Both animations move exactly -50% so the duplicate set
   snaps seamlessly back to the start (or end for reverse).
   ========================================================= */
@keyframes home6MarqueeLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 7px));
    }
}

@keyframes home6MarqueeRight {
    from {
        transform: translateX(calc(-50% - 7px));
    }

    to {
        transform: translateX(0);
    }
}

/* =========================================================
   INDIVIDUAL ORGANIZER CARD
   ---------------------------------------------------------
   Full-image card with a frosted gradient overlay at the
   bottom that reveals name, role, and acts as a LinkedIn link.
   position:relative + overflow:hidden clips the overlay.
   The <a> tag wraps the entire card so the whole thing is
   clickable - no extra JS needed.
   ========================================================= */
.home-6-card {
    position: relative;
    flex: 0 0 auto;
    width: 260px;
    /* card width - tweak freely */
    height: 200px;
    /* card height - tweak freely */
    border-radius: var(--radius-md);
    overflow: hidden;
    display: block;
    /* <a> needs block to size correctly */
    cursor: pointer;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.10);

    /* Subtle lift on hover - track pause handles the stop */
    transition: transform var(--transition-fast),
        border-color var(--transition-fast);
}

.home-6-card:hover {
    transform: scale(1.03);
    border-color: rgba(255, 255, 255, 0.26);
}

/* =========================================================
   CARD IMAGE
   Fills the card completely. object-fit:cover crops to fit.
   ========================================================= */
.home-6-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* keep faces visible */
    display: block;
    transition: transform var(--transition-medium);
}

/* Slight zoom on hover for depth */
.home-6-card:hover .home-6-card-img {
    transform: scale(1.06);
}

/* =========================================================
   PLACEHOLDER CARD IMAGE
   Used when a real photo isn't available yet.
   Styled to match the old dashed placeholder look.
   ========================================================= */
.home-6-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(135deg, rgba(91, 140, 255, 0.10), rgba(139, 92, 246, 0.07)),
        rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    box-sizing: border-box;
}

/* =========================================================
   CARD OVERLAY
   Sits over the bottom portion of the image.
   Translucent gradient so text stays readable on any photo.
   ========================================================= */
.home-6-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0px 16px 10px;
    /* tall top padding = tall gradient fade */
    /* Frosted dark gradient from transparent to near-opaque */
    background: linear-gradient(to bottom,
            rgba(3, 7, 18, 0.00) 0%,
            rgba(3, 7, 18, 0.55) 35%,
            rgba(3, 7, 18, 0.88) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Organizer name */
.home-6-card-name {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 3px;
    line-height: 1.2;
}

/* Role / title */
.home-6-card-role {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--accent-tertiary);
    /* cyan - matches eyebrow color */
    margin: 0;
    letter-spacing: 0.04em;
}

/* =========================================================
   SECTION 7 AND 8 - SPONSORS AND COLLABORATORS
   ========================================================= */

.home-78-marquee {
    overflow: hidden;
    padding: 18px 0;
}

.home-78-marquee-track {
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
    animation: marqueeMove 24s linear infinite;
}

@keyframes marqueeMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.home-78-marquee-track-reverse {
    animation-direction: reverse;
}

.home-78-marquee-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 58px;
    padding: 0 18px;
    border-radius: 999px;
    color: var(--text-primary);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.home-78-marquee-card-soft {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.home-78-logo-card {
    flex: 0 0 auto;
    width: 220px;
    height: 110px;
    padding: 16px 20px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.home-78-logo-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* =========================================================
   SECTION 9 - FAQ + CONTACT
   ========================================================= */

.home-9-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 34px;
    align-items: start;
}

.home-9-faq-list {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.home-9-faq-item {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-9-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 0;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.home-9-faq-item summary::-webkit-details-marker {
    display: none;
}

.home-9-faq-item summary::after {
    content: "+";
    font-size: 1.2rem;
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
}

.home-9-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.home-9-faq-item p {
    color: var(--text-secondary);
    padding: 0 0 18px;
    max-width: 90%;
}

.home-9-contact {
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(91, 140, 255, 0.10), transparent 25%),
        rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-soft);
}

.home-9-contact-form {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.home-9-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.home-9-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 6px;
}

/* =========================================================
   SECTION 10 - FINAL CALL TO ACTION
   ---------------------------------------------------------
   Final conversion section before footer.
   Centered premium glass panel with soft internal glows.
   ========================================================= */

.home-10 {
    padding-top: 72px;
    padding-bottom: 40px;
}

.home-10-panel {
    position: relative;
    overflow: hidden;
    padding: 56px 32px;
    border-radius: 34px;
    text-align: center;
    background:
        radial-gradient(circle at top center, rgba(91, 140, 255, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--shadow-strong);
}

/* ---------------------------------------------------------
   Decorative ambient glow shapes
   --------------------------------------------------------- */
.home-10-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    opacity: 0.38;
    z-index: 0;
}

.home-10-orb-left {
    width: 220px;
    height: 220px;
    left: -40px;
    top: 18%;
    background: rgba(91, 140, 255, 0.22);
}

.home-10-orb-right {
    width: 260px;
    height: 260px;
    right: -70px;
    bottom: -20px;
    background: rgba(139, 92, 246, 0.20);
}

/* ---------------------------------------------------------
   Actual CTA content
   --------------------------------------------------------- */
.home-10-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   CTA buttons
   --------------------------------------------------------- */
.home-10-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

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

@media (max-width: 1200px) {
    .home-1-content {
        width: min(58%, 660px);
    }

    .home-3-layout,
    .home-4-grid,
    .home-9-layout {
        grid-template-columns: 1fr;
    }

    .home-4-image-large {
        grid-row: auto;
        min-height: 420px;
    }
}

@media (max-width: 1100px) {
    .home-3-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-5-grid,
    .home-5-card {
        grid-template-columns: 1fr;
    }

    .home-5-card-media {
        min-height: 260px;
    }

    .home-6-grid-leads .home-6-card,
    .home-6-card {
        flex: 0 0 calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
    }

    .home-4-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .home-9-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .home-1 {
        min-height: 76vh;
        padding: 24px 0 8px;
    }

    .home-1 .container::before {
        top: -2%;
        right: -18%;
        width: min(46vw, 320px);
        height: min(82vh, 620px);
    }

    .home-1 .container::after {
        top: -3%;
        right: -22%;
        width: min(50vw, 360px);
        height: min(86vh, 680px);
    }

    .home-1-content {
        width: min(100%, 560px);
        text-align: left;
        padding-top: 20px;
    }

    .home-1-typewriter-heading {
        font-size: clamp(2.1rem, 9vw, 3.8rem);
        text-align: left;
    }

    .home-1-typewriter-subheading {
        font-size: clamp(1rem, 4.4vw, 1.45rem);
        text-align: left;
    }

    .home-4-timeline-wrapper {
        margin: 38px 0 48px;
    }

    .home-4-stat-live {
        padding: 24px 20px;
    }

    .home-4-stat-live-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .home-4-stat-live-btn {
        width: 100%;
        justify-content: center;
    }

    .home-4-stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .home-4-stat-card {
        padding: 20px 16px;
    }

    .home-6-grid-leads .home-6-card,
    .home-6-card {
        flex: 0 0 280px;
        width: 280px;
        max-width: 280px;
        height: 340px;
    }

    /* Keep the moving rows visually centered a bit better on mobile */
    .home-6-track {
        gap: 12px;
        padding: 0 12px;
    }

    /* Show more of the face / upper body */
    .home-6-card-img {
        object-position: center 18%;
    }

    .home-9-contact {
        padding: 22px;
    }

    .home-9-faq-item p {
        max-width: 100%;
    }

    .home-10-panel {
        padding: 42px 20px;
        border-radius: 26px;
    }

    .home-10-title {
        font-size: clamp(1.7rem, 7vw, 2.35rem);
    }

    .home-10-text {
        font-size: 0.95rem;
    }

    .home-10-actions {
        margin-top: 24px;
    }
}

@media (max-width: 640px) {
    .home-3-card-grid {
        grid-template-columns: 1fr;
    }

    .home-3-card {
        min-height: auto;
    }

    .home-3-intro-text {
        font-size: 0.95rem;
    }
}

/* On very small screens: single column */
@media (max-width: 480px) {
    .home-4-stat-grid {
        grid-template-columns: 1fr;
    }

    .home-6-card {
        flex: 0 0 250px;
        width: 250px;
        max-width: 250px;
        height: 200px;
    }

    .home-6-card-img {
        object-position: center 16%;
    }
}