/* monopole.center -- Memphis hexagonal playground */
/* Palette: #FF6B8A (Hot Coral), #00D4FF (Electric Cyan), #FFE548 (Lemon Pop), #9B5DE5 (Grape), #00F5A0 (Mint), #FFF8F0 (Cream Base), #1A0A2E (Dark Plum), #FFB088 (Peach) */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --coral:#FF6B8A;
    --cyan:#00D4FF;
    --yellow:#FFE548;
    --grape:#9B5DE5;
    --mint:#00F5A0;
    --cream:#FFF8F0;
    --plum:#1A0A2E;
    --peach:#FFB088;
}

html{font-size:16px;scroll-behavior:smooth}

body{
    background:var(--cream);
    color:var(--plum);
    font-family:'Poppins',sans-serif;
    font-weight:400;
    font-size:0.9375rem;
    line-height:1.7;
    overflow-x:hidden;
}

/* Cluster sections */
.cluster{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
    position:relative;
}

/* Hex Grid */
.hex-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:1rem;
    max-width:900px;
    width:100%;
}

/* Hexagonal shape */
.hex{
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    aspect-ratio:1/1.15;
    display:flex;
    align-items:center;
    justify-content:center;
    border:3px solid var(--plum);
    position:relative;
    overflow:hidden;
}

.hex-inner{
    padding:1.5rem;
    text-align:center;
    width:100%;
}

/* Pattern hexes */
.hex-dots{
    background:
        radial-gradient(circle,var(--plum) 3px,transparent 3px);
    background-size:16px 16px;
    background-color:var(--coral);
}

.hex-dots-alt{
    background:
        radial-gradient(circle,var(--plum) 3px,transparent 3px);
    background-size:16px 16px;
    background-color:var(--yellow);
}

.hex-stripes{
    background:
        repeating-linear-gradient(45deg,transparent,transparent 6px,var(--plum) 6px,var(--plum) 8px);
    background-color:var(--cyan);
}

.hex-stripes-alt{
    background:
        repeating-linear-gradient(45deg,transparent,transparent 6px,var(--plum) 6px,var(--plum) 8px);
    background-color:var(--mint);
}

.hex-gradient{
    background:conic-gradient(from 45deg,var(--coral),var(--yellow),var(--cyan),var(--grape),var(--coral));
}

.hex-gradient-alt{
    background:conic-gradient(from 120deg,var(--mint),var(--peach),var(--coral),var(--yellow),var(--mint));
}

/* Main hero hex */
.hex-main{
    background:var(--cream);
    grid-column:span 2;
    grid-row:span 2;
}

.hex-content{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.domain-text{
    font-family:'Poppins',sans-serif;
    font-weight:800;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:-0.01em;
    text-transform:uppercase;
    color:var(--plum);
    line-height:1;
}

.domain-dot{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,2.5vw,2rem);
    color:var(--coral);
    text-transform:uppercase;
}

/* Content hexes */
.hex-content-cell{
    background:var(--cream);
}

.hex-text-cell{
    grid-column:span 2;
}

.hex-heading{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:clamp(1.25rem,2.5vw,2rem);
    color:var(--plum);
    margin-bottom:0.5rem;
}

.hex-body{
    font-family:'Poppins',sans-serif;
    font-weight:400;
    font-size:0.875rem;
    line-height:1.65;
    color:var(--plum);
}

/* Callout hexes */
.hex-callout{
    background:var(--grape);
}

.callout-text{
    font-family:'Fredoka',sans-serif;
    font-weight:600;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--cream);
    text-transform:uppercase;
    letter-spacing:0.02em;
}

/* Finale */
.cluster-center{flex-direction:column}

.center-hex-wrap{
    width:clamp(280px,60vmin,500px);
    z-index:2;
}

.hex-finale{
    background:conic-gradient(from 0deg,var(--coral),var(--yellow),var(--cyan),var(--grape),var(--mint),var(--coral));
}

.finale-text{
    font-family:'Poppins',sans-serif;
    font-weight:400;
    font-size:clamp(0.8rem,1.4vw,1rem);
    color:var(--plum);
    line-height:1.6;
    margin-bottom:1rem;
}

.finale-domain{
    font-family:'Poppins',sans-serif;
    font-weight:800;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--plum);
    display:block;
    text-transform:uppercase;
}

/* Mini scatter hexes */
.scatter-hexes{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}

.mini-hex{
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:50px;
    height:58px;
    background:var(--c);
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    opacity:0.4;
}

/* Bounce-enter animation */
[data-reveal]{
    opacity:0;
    transform:scale(0);
    transition:opacity 400ms ease,transform 400ms cubic-bezier(0.34,1.56,0.64,1);
}

[data-reveal].revealed{
    opacity:1;
    transform:scale(1);
}

/* Hover effect */
.hex:hover{
    transform:scale(1.05);
    box-shadow:0 8px 24px rgba(26,10,46,0.15);
    transition:transform 200ms ease,box-shadow 200ms ease;
}

/* Responsive */
@media(max-width:768px){
    .hex-grid{
        grid-template-columns:repeat(2,1fr);
        gap:0.75rem;
    }

    .hex-main,
    .hex-text-cell{
        grid-column:1/-1;
    }

    .mini-hex{display:none}
}

@media(prefers-reduced-motion:reduce){
    [data-reveal]{
        opacity:1;
        transform:none;
        transition:none;
    }
}