:root{
    --bg-dark:#000000;
    --bg-deep:#050505;
    --bg-card:#0b0b0b;
    --bg-card-light:#151515;

    --gray-blue:#69818D;
    --gray-light:#AFB3B7;
    --gray:#5A636A;

    --text:#E8ECEE;
    --text-soft:#AEB9BD;

    --border:rgba(175,179,183,.16);
    --border-hover:rgba(175,179,183,.35);

    --neon-1:#ff4d6d;
    --neon-2:#ff8c42;
    --neon-3:#ffd93d;
    --neon-4:#c6f135;
    --neon-5:#45d9e8;
    --neon-6:#3b82f6;
    --neon-7:#a855f7;
    --neon-8:#d946ef;
    --neon-9:#f472b6;

    --menu-space:110px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    background:#000000;
    color:var(--text);
    font-family:"Roboto",sans-serif;
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

.eneagrama-page{
    width:100%;
    min-height:100vh;
    padding-top:var(--menu-space);
}
.hero-eneagrama{
    width:min(1280px,92%);
    min-height:calc(100vh - var(--menu-space));
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:40px;
    padding:70px 0 100px;
}

.hero-symbol{
    position:relative;
    width:min(580px,100%);
    aspect-ratio:1 / 1;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    isolation:isolate;
}

.symbol-glow{
    position:absolute;
    width:70%;
    height:70%;
    border-radius:50%;
    background: radial-gradient( circle, rgba(105,129,141,.08), transparent 68%);

    filter:blur(25px);
    z-index:-1;
}

.enneagram-svg{
    width:100%;
    height:100%;
    overflow:visible;
}

.enneagram-rotating{
    transform-origin:300px 300px;
    animation: enneagramSpin 42s linear infinite;
}



.enneagram-circle{
    fill:none;
    stroke:#69818D;
    stroke-width:3;
    opacity:.9;
}
.enneagram-line{
    fill:none;
    stroke:#AFB3B7;
    stroke-width:3.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.8;
}

.enneagram-numbers text{
    font-family:"Roboto",sans-serif;
    font-size:42px;
    font-weight:800;
    fill:#ffffff;
    text-anchor:middle;
    dominant-baseline:middle;
    paint-order:stroke;
    stroke:#000;
    stroke-width:5px;
    opacity:.96;
    filter: drop-shadow(0 0 3px rgba(255,255,255,.4));
}

.enneagram-numbers text{
    position:relative;
}

/* AURA DOS NUMEROS*/
.enneagram-numbers text:nth-child(1){
    filter:
        drop-shadow(0 0 5px var(--neon-9))
        drop-shadow(0 0 14px var(--neon-9));
}

.enneagram-numbers text:nth-child(2){
    filter:
        drop-shadow(0 0 5px var(--neon-1))
        drop-shadow(0 0 14px var(--neon-1));
}

.enneagram-numbers text:nth-child(3){
    filter:
        drop-shadow(0 0 5px var(--neon-2))
        drop-shadow(0 0 14px var(--neon-2));
}

.enneagram-numbers text:nth-child(4){
    filter:
        drop-shadow(0 0 5px var(--neon-3))
        drop-shadow(0 0 14px var(--neon-3));
}

.enneagram-numbers text:nth-child(5){
    filter:
        drop-shadow(0 0 5px var(--neon-4))
        drop-shadow(0 0 14px var(--neon-4));
}

.enneagram-numbers text:nth-child(6){
    filter:
        drop-shadow(0 0 5px var(--neon-5))
        drop-shadow(0 0 14px var(--neon-5));
}

.enneagram-numbers text:nth-child(7){
    filter:
        drop-shadow(0 0 5px var(--neon-6))
        drop-shadow(0 0 14px var(--neon-6));
}

.enneagram-numbers text:nth-child(8){
    filter:
        drop-shadow(0 0 5px var(--neon-7))
        drop-shadow(0 0 14px var(--neon-7));
}

.enneagram-numbers text:nth-child(9){
    filter:
        drop-shadow(0 0 5px var(--neon-8))
        drop-shadow(0 0 14px var(--neon-8));
}

@keyframes enneagramSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.hero-text{
    max-width:560px;
}

.section-tag{
    display:inline-block;
    margin-bottom:18px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.25em;
    color:#69818D;
}

.hero-text h1{
    font-family:"Lora",serif;
    font-size:clamp(46px,6vw,78px);
    line-height:1.03;
    font-weight:500;
    letter-spacing:-.04em;
    margin-bottom:32px;
}

.hero-text h1 span{
    display:block;
    color:#AFB3B7;
    font-style:italic;
    font-weight:400;
}

.hero-description{
    max-width:520px;
    color:#AEB9BD;
    font-size:17px;
    line-height:1.85;
    margin-bottom:18px;
}

.hero-description strong{
    color:#E8ECEE;
    font-weight:500;
}

.hero-line{
    width:80px;
    height:1px;
    background:#69818D;
    margin:38px 0 18px;
}

.hero-small{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:#5A636A;
}


.intro-section{
    width:min(1280px,92%);
    margin:0 auto;
    padding:40px 0 130px;
}

.intro-heading{
    max-width:700px;
    margin-bottom:55px;
}

.intro-heading h2{
    font-family:"Lora",serif;
    font-size:clamp(34px,4vw,55px);
    line-height:1.12;
    font-weight:500;
    letter-spacing:-.03em;
    margin-bottom:20px;
}

.intro-heading h2 em{
    color:#69818D;
    font-style:italic;
}

.intro-heading p{
    color:#AEB9BD;
    font-size:16px;
    line-height:1.8;
}

.types-grid{
    display:grid;

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

    gap:16px;
}
.type-card{
    position:relative;
    min-height:390px;
    padding:25px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    background: linear-gradient( 145deg, rgba(20,20,20,.95), rgba(7,7,7,.98));
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    transition: transform .45s ease, border-color .45s ease, background .45s ease, box-shadow .45s ease;
}

.type-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient( circle at 50% 35%, rgba(255,255,255,.045), transparent 55%);
    opacity:0;
    transition:opacity .45s ease;
    pointer-events:none;
}

.type-card:hover{
    transform:translateY(-7px);
    border-color:rgba(255,255,255,.18);
    box-shadow: 0 20px 50px rgba(0,0,0,.7);
}

.type-card:hover::before{
    opacity:1;
}

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.type-number{
    font-size:12px;
    letter-spacing:.16em;
    color:#69818D;
}

.card-arrow{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    color:#AFB3B7;
    font-size:16px;
    transition: transform .4s ease, background .4s ease;
}

.type-card:hover .card-arrow{
    transform:translate(3px,-3px);
    background:rgba(255,255,255,.06);
}

.type-center{
    position:relative;
    z-index:2;
    margin-top:auto;
    margin-bottom:auto;
}

.type-symbol{
    display:block;
    margin-bottom:18px;
    font-family:"Lora",serif;
    font-size:80px;
    line-height:.8;
    font-weight:500;
    color:#AFB3B7;
    opacity:.9;
}

.type-card h3{
    font-family:"Lora",serif;
    font-size:28px;
    line-height:1.2;
    font-weight:500;
    margin-bottom:14px;
}

.type-card p{
    color:#AEB9BD;
    font-size:14px;
    line-height:1.7;
    max-width:330px;
}

.card-link{
    position:relative;
    z-index:2;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#5A636A;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.18em;
    transition:color .35s ease;
}

.type-card:hover .card-link{
    color:#AFB3B7;
}

.closing-section{
    width:min(800px,90%);
    margin:0 auto;
    padding:80px 0 150px;
    text-align:center;
}

.closing-symbol{
    width:90px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 32px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    color:#69818D;
    font-size:36px;
}

.closing-section h2{
    font-family:"Lora",serif;
    font-size:clamp(35px,5vw,56px);
    line-height:1.1;
    font-weight:500;
    margin-bottom:22px;
}

.closing-section h2 em{
    display:block;
    color:#69818D;
    font-style:italic;
}

.closing-section p{
    max-width:650px;
    margin:0 auto;
    color:#AEB9BD;
    font-size:15px;
    line-height:1.8;
}

@media(max-width:950px){

    :root{
        --menu-space:95px;
    }

    .hero-eneagrama{
        grid-template-columns:1fr;
        min-height:auto;
        padding-top:45px;
        text-align:center;
    }

    .hero-symbol{
        width:min(480px,85vw);
        order:1;
    }

    .hero-text{
        order:2;
        margin:0 auto;
    }

    .hero-line{
        margin-left:auto;
        margin-right:auto;
    }

    .intro-heading{
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }

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

    .type-card:last-child{
        grid-column:1 / -1;
        max-width:calc(50% - 8px);
        width:100%;
        margin:0 auto;
    }

}


@media(max-width:650px){

    :root{
        --menu-space:85px;
    }

    .eneagrama-page{
        padding-top:var(--menu-space);
    }

    .hero-eneagrama{
        width:90%;
        padding:30px 0 80px;
        gap:15px;
    }

    .hero-symbol{
        width:92vw;
        max-width:420px;
    }

    .hero-text h1{
        font-size:46px;
        margin-bottom:25px;
    }

    .hero-description{
        font-size:15px;
        line-height:1.75;
    }

    .intro-section{
        width:90%;
        padding-bottom:90px;
    }

    .intro-heading h2{
        font-size:36px;
    }

    .types-grid{
        grid-template-columns:1fr;

        gap:13px;
    }

    .type-card{
        min-height:340px;
    }

    .type-card:last-child{
        grid-column:auto;
        max-width:none;
    }

    .type-symbol{
        font-size:70px;
    }

    .type-card h3{
        font-size:26px;
    }

    .closing-section{
        padding-bottom:100px;
    }

}


@media(max-width:420px){

    .hero-text h1{
        font-size:40px;
    }

    .hero-description{
        font-size:14px;
    }

    .type-card{
        min-height:320px;
        padding:22px;
    }

}

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }
    .enneagram-rotating{
        animation:none;
    }
    .type-card,
    .card-arrow,
    .card-link{
        transition:none;
    }

}