/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --cosmic-teal: #1A5C5A;
    --atomic-orange: #E87830;
    --nebula-violet: #6B3A8A;
    --signal-pink: #E84878;
    --star-cream: #FAF5E8;
    --deep-space: #0D1A2E;
    --honeycomb-gold: #D4B050;

    --font-display: 'Poiret One', cursive;
    --font-body: 'Nunito Sans', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--deep-space);
    color: var(--star-cream);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.75;
    overflow-x: hidden;
}

/* ===== HERO SECTION ===== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--deep-space);
    overflow: hidden;
}

.hero-honeycomb {
    position: relative;
    width: 700px;
    height: 700px;
    transform: rotate(0deg);
    transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== HEXAGON CELLS ===== */
.hex-cell {
    position: absolute;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hex-cell.visible {
    opacity: 1;
    transform: scale(1);
}

.hex-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Center hexagon */
.hex-center {
    width: 200px;
    height: 220px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    background-color: var(--deep-space);
    border: none;
    z-index: 10;
}

.hex-center.visible {
    transform: translate(-50%, -50%) scale(1);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--star-cream);
    text-align: center;
    line-height: 1.2;
}

.hero-subtitle {
    font-family: var(--font-display);
    font-size: clamp(16px, 2vw, 24px);
    color: var(--honeycomb-gold);
    margin-top: 8px;
    letter-spacing: 0.08em;
}

/* Ring 1 hexagons - 6 cells around center */
.hex-r1 {
    width: 140px;
    height: 154px;
}

.hex-r1-0 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0px, -170px) scale(0.3); }
.hex-r1-1 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(147px, -85px) scale(0.3); }
.hex-r1-2 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(147px, 85px) scale(0.3); }
.hex-r1-3 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0px, 170px) scale(0.3); }
.hex-r1-4 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-147px, 85px) scale(0.3); }
.hex-r1-5 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-147px, -85px) scale(0.3); }

.hex-r1-0.visible { transform: translate(-50%, -50%) translate(0px, -170px) scale(1); }
.hex-r1-1.visible { transform: translate(-50%, -50%) translate(147px, -85px) scale(1); }
.hex-r1-2.visible { transform: translate(-50%, -50%) translate(147px, 85px) scale(1); }
.hex-r1-3.visible { transform: translate(-50%, -50%) translate(0px, 170px) scale(1); }
.hex-r1-4.visible { transform: translate(-50%, -50%) translate(-147px, 85px) scale(1); }
.hex-r1-5.visible { transform: translate(-50%, -50%) translate(-147px, -85px) scale(1); }

/* Ring 2 hexagons - 12 cells around ring 1 */
.hex-r2 {
    width: 110px;
    height: 121px;
}

.hex-r2-0  { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0px, -310px) scale(0.3); }
.hex-r2-1  { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(135px, -250px) scale(0.3); }
.hex-r2-2  { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(260px, -155px) scale(0.3); }
.hex-r2-3  { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(280px, 0px) scale(0.3); }
.hex-r2-4  { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(260px, 155px) scale(0.3); }
.hex-r2-5  { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(135px, 250px) scale(0.3); }
.hex-r2-6  { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0px, 310px) scale(0.3); }
.hex-r2-7  { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-135px, 250px) scale(0.3); }
.hex-r2-8  { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-260px, 155px) scale(0.3); }
.hex-r2-9  { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-280px, 0px) scale(0.3); }
.hex-r2-10 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-260px, -155px) scale(0.3); }
.hex-r2-11 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-135px, -250px) scale(0.3); }

.hex-r2-0.visible  { transform: translate(-50%, -50%) translate(0px, -310px) scale(1); }
.hex-r2-1.visible  { transform: translate(-50%, -50%) translate(135px, -250px) scale(1); }
.hex-r2-2.visible  { transform: translate(-50%, -50%) translate(260px, -155px) scale(1); }
.hex-r2-3.visible  { transform: translate(-50%, -50%) translate(280px, 0px) scale(1); }
.hex-r2-4.visible  { transform: translate(-50%, -50%) translate(260px, 155px) scale(1); }
.hex-r2-5.visible  { transform: translate(-50%, -50%) translate(135px, 250px) scale(1); }
.hex-r2-6.visible  { transform: translate(-50%, -50%) translate(0px, 310px) scale(1); }
.hex-r2-7.visible  { transform: translate(-50%, -50%) translate(-135px, 250px) scale(1); }
.hex-r2-8.visible  { transform: translate(-50%, -50%) translate(-260px, 155px) scale(1); }
.hex-r2-9.visible  { transform: translate(-50%, -50%) translate(-280px, 0px) scale(1); }
.hex-r2-10.visible { transform: translate(-50%, -50%) translate(-260px, -155px) scale(1); }
.hex-r2-11.visible { transform: translate(-50%, -50%) translate(-135px, -250px) scale(1); }

/* Color fills for ring hexagons */
[data-color="teal"] .hex-inner { background-color: var(--cosmic-teal); }
[data-color="orange"] .hex-inner { background-color: var(--atomic-orange); }
[data-color="violet"] .hex-inner { background-color: var(--nebula-violet); }
[data-color="pink"] .hex-inner { background-color: var(--signal-pink); }
[data-color="gold"] .hex-inner { background-color: var(--honeycomb-gold); }

/* Hero network SVG */
.hero-network {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 700px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
}

.network-lines line {
    stroke: var(--honeycomb-gold);
    stroke-width: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.network-lines line.drawn {
    opacity: 0.3;
}

/* ===== ART-DECO DIVIDERS ===== */
.deco-divider {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.deco-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}

.deco-divider--hero {
    position: absolute;
    bottom: 0;
    left: 0;
}

.deco-divider--mid {
    background-color: var(--deep-space);
}

.deco-divider--mid svg {
    height: 80px;
}

.deco-divider--pre-footer {
    background-color: var(--deep-space);
}

.deco-divider--pre-footer svg {
    height: 80px;
}

/* ===== CONTENT SECTION (Honeycomb Grid) ===== */
.content-section {
    padding: 100px 40px;
    background-color: var(--cosmic-teal);
    position: relative;
}

.content-section--dark {
    background-color: var(--deep-space);
}

.honeycomb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* Offset every other item for honeycomb effect */
.honeycomb-grid .content-hex:nth-child(even) {
    transform: translateY(60px);
}

/* Content hexagon cards */
.content-hex {
    position: relative;
    opacity: 0;
    filter: blur(4px);
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

.content-hex.in-view {
    opacity: 1;
    filter: blur(0);
}

.content-hex-clip {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background-color: var(--deep-space);
    padding: 0;
    aspect-ratio: 1 / 1.1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}

.content-hex:hover .content-hex-clip {
    transform: scale(1.05);
}

/* Accent color glow on hover */
[data-accent="orange"]:hover .content-hex-clip {
    filter: drop-shadow(0 0 20px rgba(232, 120, 48, 0.4));
}
[data-accent="violet"]:hover .content-hex-clip {
    filter: drop-shadow(0 0 20px rgba(107, 58, 138, 0.4));
}
[data-accent="pink"]:hover .content-hex-clip {
    filter: drop-shadow(0 0 20px rgba(232, 72, 120, 0.4));
}
[data-accent="teal"]:hover .content-hex-clip {
    filter: drop-shadow(0 0 20px rgba(26, 92, 90, 0.4));
}
[data-accent="gold"]:hover .content-hex-clip {
    filter: drop-shadow(0 0 20px rgba(212, 176, 80, 0.4));
}

.hex-illustration {
    width: 60%;
    margin-top: 15%;
}

.illustration-svg {
    width: 100%;
    height: auto;
}

.hex-content {
    padding: 8% 14%;
    text-align: center;
}

.hex-title {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.8vw, 22px);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--star-cream);
    margin-bottom: 6px;
}

.hex-text {
    font-family: var(--font-body);
    font-size: clamp(11px, 0.85vw, 14px);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--star-cream);
    opacity: 0.85;
    line-height: 1.6;
}

/* ===== FEATURE SPREADS ===== */
.feature-spread {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--deep-space);
}

.feature-spread--alt {
    background-color: #0F1E34;
}

.feature-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(3px);
    z-index: 1;
}

.feature-illustration {
    width: 100%;
    height: 100%;
}

.feature-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 60px 40px;
    text-align: center;
}

.feature-label {
    font-family: var(--font-display);
    font-size: clamp(12px, 1vw, 16px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--honeycomb-gold);
    display: block;
    margin-bottom: 24px;
}

.feature-headline {
    font-family: var(--font-display);
    font-size: clamp(32px, 4.5vw, 80px);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--star-cream);
    margin-bottom: 32px;
    line-height: 1.1;
    transition: -webkit-text-stroke 0.3s ease, color 0.3s ease;
}

.feature-headline:hover {
    -webkit-text-stroke: 2px var(--star-cream);
    color: transparent;
}

.feature-body {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.1vw, 18px);
    font-weight: 400;
    color: var(--star-cream);
    line-height: 1.85;
    opacity: 0.9;
}

/* ===== CONNECTION FOOTER ===== */
.connection-footer {
    background-color: var(--deep-space);
    padding: 80px 40px 60px;
    text-align: center;
    position: relative;
}

.footer-headline {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 56px);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--star-cream);
    margin-bottom: 40px;
}

.connection-graph {
    max-width: 1000px;
    margin: 0 auto 60px;
    position: relative;
}

.connection-svg {
    width: 100%;
    height: auto;
}

.connection-edges line {
    stroke: var(--honeycomb-gold);
    stroke-width: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.connection-edges line.edge-visible {
    opacity: 0.3;
}

.connection-edges line.edge-highlight {
    opacity: 1;
    stroke-width: 2;
}

.node-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.03em;
}

.conn-node {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.conn-node:hover polygon {
    filter: drop-shadow(0 0 8px rgba(212, 176, 80, 0.5));
}

.footer-tagline {
    font-family: var(--font-display);
    font-size: clamp(18px, 2vw, 28px);
    color: var(--honeycomb-gold);
    letter-spacing: 0.08em;
    opacity: 0.7;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .hero-honeycomb {
        width: 500px;
        height: 500px;
    }

    .hero-network {
        width: 500px;
        height: 500px;
    }

    .hex-center {
        width: 150px;
        height: 165px;
    }

    .hex-r1 {
        width: 100px;
        height: 110px;
    }

    .hex-r1-0, .hex-r1-0.visible { --offset-y: -120px; }
    .hex-r1-1, .hex-r1-1.visible { --offset-x: 104px; --offset-y: -60px; }
    .hex-r1-2, .hex-r1-2.visible { --offset-x: 104px; --offset-y: 60px; }
    .hex-r1-3, .hex-r1-3.visible { --offset-y: 120px; }
    .hex-r1-4, .hex-r1-4.visible { --offset-x: -104px; --offset-y: 60px; }
    .hex-r1-5, .hex-r1-5.visible { --offset-x: -104px; --offset-y: -60px; }

    .hex-r2 {
        width: 80px;
        height: 88px;
    }

    .honeycomb-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0 20px;
    }

    .content-section {
        padding: 60px 20px;
    }

    .feature-content {
        padding: 40px 24px;
    }
}

@media (max-width: 600px) {
    .hero-honeycomb {
        width: 340px;
        height: 340px;
    }

    .hero-network {
        width: 340px;
        height: 340px;
    }

    .hex-center {
        width: 110px;
        height: 121px;
    }

    .hex-r1 {
        width: 72px;
        height: 79px;
    }

    .hex-r2 {
        display: none;
    }

    .honeycomb-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
    }

    .honeycomb-grid .content-hex:nth-child(even) {
        transform: translateY(0);
    }

    .honeycomb-grid .content-hex.in-view:nth-child(even) {
        transform: translateY(0);
    }

    .connection-footer {
        padding: 60px 20px 40px;
    }
}

/* ===== HERO ROTATION SETTLE ===== */
.hero-honeycomb.settled {
    transform: rotate(0deg);
}

.hero-honeycomb.rotating {
    transform: rotate(0.5deg);
}

/* ===== SCROLL PARALLAX on feature spreads ===== */
.feature-bg.parallax {
    will-change: transform;
}