/* ===========================================================
   Built With Purpose
=========================================================== */

.craft{

    position:relative;

    z-index:1;

    padding:140px 32px;

}

.craft-container{

    width:min(1180px,100%);

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.craft-label{

    font-size:15px;

    letter-spacing:7px;

    opacity:.65;

}

.craft-title{

    margin-top:30px;

    max-width:1000px;

    font-size:clamp(46px,6vw,72px);

    line-height:1.12;

}

@media (min-width:769px){

    .craft-title{

        display:block;

        max-width:1150px;

        font-size:clamp(44px,5.5vw,66px);

        text-wrap:balance;

    }

    .craft-title > span{

        display:inline;

    }

}


.craft-index{

    font-size:11px;

    line-height:1;

    letter-spacing:3px;

    opacity:.65;

}

.craft-point h4{

    font-size:15px;

    letter-spacing:4px;

    text-transform:uppercase;

    line-height:1.3;

}

.craft-point p{

    max-width:230px;

    font-size:16px;

    line-height:1.7;

    color:rgba(255,255,255,.66);

}

/* ===========================================================
   Constellation
=========================================================== */

.craft-map{

    width:100%;

    margin-top:110px;

}

.craft-stage{

    position:relative;

    width:100%;

    min-height:540px;

    isolation:isolate;

}

.craft-stage-title{

    position:absolute;

    left:50%;

    top:0;

    z-index:4;

    transform:translateX(-50%);

    font-size:18px;

    font-weight:600;

    letter-spacing:7px;

}

/* ===========================================================
   SVG Connections
=========================================================== */

.craft-connections{

    position:absolute;

    inset:0;

    z-index:1;

    width:100%;

    height:100%;

    overflow:visible;

    pointer-events:none;

}

.craft-connections line{

    stroke-width:1;

    vector-effect:non-scaling-stroke;

    stroke-linecap:round;

}

.craft-connections circle{

    vector-effect:non-scaling-stroke;

}



.craft-connections-design circle{

    fill:#07090d;

    stroke:rgba(226,196,137,.72);

    stroke-width:1;

    filter:drop-shadow(0 0 7px rgba(226,196,137,.85));

}



.craft-connections-development circle{

    fill:#07090d;

    stroke:rgba(168,198,255,.72);

    stroke-width:1;

    filter:drop-shadow(0 0 7px rgba(168,198,255,.85));

}

/* ===========================================================
   Central Core
=========================================================== */

.craft-core{

    position:absolute;

    left:50%;

    top:50%;

    z-index:3;

    width:118px;

    height:118px;

    transform:translate(-50%,-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

}



.craft-core::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:300px;
    height:230px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    opacity:.68;

    filter:blur(27px);

    pointer-events:none;

    z-index:-1;

}

.craft-core-design::before{

    filter:blur(25px);

    background:radial-gradient(

        ellipse at center,

        rgba(226,196,137,.23) 0%,

        rgba(226,196,137,.11) 34%,

        rgba(226,196,137,.045) 58%,

        transparent 78%


    );

}


.craft-core-development::before{

    background:radial-gradient(

        ellipse at center,

        rgba(168,198,255,.20) 0%,

        rgba(168,198,255,.09) 34%,

        rgba(168,198,255,.035) 58%,

        transparent 78%

    );

}


.craft-core-star{

    position:relative;

    z-index:1;

    width:54px;
    height:54px;

    display:block;

}


.craft-core-design{

    color:rgba(224,191,128,.9);

}

.craft-core-development{

    color:rgba(155,190,255,.9);

}


.craft-star-flare{

    position:absolute;

    left:50%;
    top:50%;

    width:150px;
    height:3px;

    transform:translate(-50%,-50%);

    background:linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,.05),
        rgba(255,255,255,.42),
        rgba(255,255,255,.05),
        transparent
    );

    filter:blur(2px);

    opacity:.65;

    pointer-events:none;

    z-index:0;

}

.craft-star-flare::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:3px;
    height:54px;

    transform:translate(-50%,-50%);

    background:linear-gradient(
        to bottom,
        transparent,
        rgba(255,255,255,.22),
        transparent
    );

    filter:blur(2px);

}

/* ===========================================================
   Information Points
=========================================================== */

.craft-point{

    position:absolute;

    z-index:3;

    width:230px;

    display:flex;

    flex-direction:column;

    gap:9px;

    text-align:left;

}

.craft-point-design{

    color:rgba(226,196,137,.95);

}

.craft-point-development{

    color:rgba(168,198,255,.95);

}

/* Exact positions aligned with SVG endpoints */

.craft-point-top-left{

    left:1%;

    top:21%;

}

.craft-point-top-right{

    right:1%;

    top:21%;

}

.craft-point-bottom-left{

    left:1%;

    bottom:13%;

}

.craft-point-bottom-right{

    right:1%;

    bottom:13%;

}


/* ===========================================================
   Transition
=========================================================== */

.craft-transition{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    margin:-15px 0 30px;

}

.craft-transition span{

    font-size:12px;

    letter-spacing:5px;

    text-transform:uppercase;

    opacity:.48;

}

.craft-transition-line{

    width:1px;

    height:85px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.22),
        transparent
    );

}

.craft-closing{

    margin-top:30px;

    font-size:clamp(34px,4vw,54px);

    line-height:1.2;

}

/* ===========================================================
   Mobile
=========================================================== */

@media (max-width:768px){

    .craft{

        padding:90px 22px;

    }

    .craft-title{

        display:block;

        font-size:clamp(34px,8.5vw,40px);

        line-height:1.12;

        text-wrap:wrap;

    }

    .craft-title > span{

        display:inline;

    }

    .craft-map{

        margin-top:70px;

    }

    .craft-stage{

        min-height:0;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:28px;

        padding:70px 0 20px;

    }

    .craft-stage-title{

        top:0;

    }

    .craft-core{

        position:relative;

        left:auto;

        top:auto;

        transform:none;

        width:92px;

        height:92px;

        order:0;

    }

    .craft-point{

        position:relative;

        left:auto;

        right:auto;

        top:auto;

        bottom:auto;

        width:100%;

        max-width:320px;

        text-align:center;

        align-items:center;

    }

    .craft-connections{

        display:none;

    }

    .craft-transition{

        margin:35px 0;

    }

    .craft-transition-line{

        height:60px;

    }

}