/* ==================================================

   LUMEN ✦ SANUS
   Jungova psihologija • Mapa unutrašnje psihe

================================================== */


/* ================= FONTS ================= */


@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');





/* ================= VARIABLES ================= */


:root{


--paper:#f8f2e7;

--paper-dark:#eee0c7;

--ink:#2b2118;

--brown:#66503b;

--gold:#b08a52;

--gold-light:#dfc18a;

--green:#354437;


--shadow:

0 30px 80px rgba(60,40,20,.20);


}



main{
    margin-top:110px;
}



/* ================= RESET ================= */


*{

margin:0;

padding:0;

box-sizing:border-box;

}





html{

scroll-behavior:smooth;

}





body{


background:


linear-gradient(

180deg,

#fffaf2,

#eee2cf

);


color:var(--ink);


font-family:"Inter",sans-serif;


overflow-x:hidden;


}





h1,
h2,
h3,
h4{


font-family:

"Cormorant Garamond",
serif;


}





a{


text-decoration:none;


color:inherit;


}









/* ================= HEADER ================= */


header{


height:110px;


position:fixed;


top:0;


left:0;


width:100%;


padding:0 7%;



display:flex;


justify-content:space-between;


align-items:center;



background:


rgba(248,242,231,.92);




backdrop-filter:blur(15px);




border-bottom:


1px solid rgba(176,138,82,.25);




z-index:100;



}








/* ================= LOGO ================= */


.logo{


font-family:

"Cormorant Garamond",
serif;



font-size:42px;



letter-spacing:8px;



color:var(--gold);



}





.logo span{


font-size:42px;



margin:0 12px;



text-shadow:


0 0 15px rgba(176,138,82,.5);



}







.logo small{


display:block;



font-family:"Inter",sans-serif;



font-size:11px;



letter-spacing:3px;



margin-top:10px;



color:var(--gold);



text-transform:uppercase;



}









/* ================= NAVIGACIJA ================= */


.lumen-nav{


display:flex;


gap:28px;


align-items:center;


}







nav a{


font-size:14px;


letter-spacing:1px;



transition:.3s;


}





nav a:hover{


color:var(--gold);


}









/* ================= DROPDOWN ================= */


.nav-drop{


position:relative;


}





.nav-drop > a{


font-size:14px;


letter-spacing:1px;


transition:.3s;


}





.nav-drop > a:hover{


color:var(--gold);


}







.dropdown-menu{


position:absolute;


top:35px;


left:-25px;



width:270px;



padding:20px;





background:


rgba(248,242,231,.97);





border:


1px solid rgba(176,138,82,.35);





box-shadow:


0 30px 80px rgba(60,40,20,.25);





opacity:0;


visibility:hidden;



transform:


translateY(15px);




transition:.4s;



z-index:300;



}







.nav-drop:hover .dropdown-menu{


opacity:1;


visibility:visible;



transform:


translateY(0);



}







.dropdown-menu a{


display:block;



font-family:

"Cormorant Garamond",
serif;




font-size:18px;




padding:10px 5px;




border-bottom:


1px solid rgba(176,138,82,.15);




color:var(--ink);



}





.dropdown-menu a:last-child{


border-bottom:none;


}





.dropdown-menu a:hover{


color:var(--gold);


padding-left:12px;


transition:.3s;


}
/* ================= HERO ================= */


.hero{


min-height:100vh;


padding:


160px 7% 100px;



display:grid;



grid-template-columns:


1fr 1fr;



gap:80px;



align-items:center;



}







.small-title{


font-size:13px;



letter-spacing:5px;



color:var(--gold);



text-transform:uppercase;



margin-bottom:30px;



}








.hero h1{


font-size:65px;



line-height:1.15;



font-weight:600;



color:#35291d;



margin-bottom:40px;



}








/* ================= HERO KARTA ================= */


.hero-card{


background:


radial-gradient(

circle at 30% 20%,

#ffffff,

#fff8e8 45%,

#f2dca8 100%

);





padding:45px;





border:


1px solid rgba(176,138,82,.35);






box-shadow:


0 30px 80px rgba(90,60,20,.15),


inset 0 0 60px rgba(255,255,255,.9);






position:relative;



overflow:hidden;



border-radius:8px;



}







.hero-card::before{


content:"✦";



position:absolute;



top:18px;



right:30px;



font-size:42px;



color:


rgba(176,138,82,.25);





animation:


cardGlow 5s infinite;



}








.hero-card::after{


content:"";



position:absolute;



inset:-50%;



background:


linear-gradient(

120deg,

transparent,

rgba(255,255,255,.5),

transparent

);



transform:rotate(25deg);



animation:


cardLight 8s infinite;



}








@keyframes cardGlow{


50%{


opacity:1;


transform:scale(1.15);


}


}








@keyframes cardLight{


0%{


left:-100%;


}



50%,100%{


left:100%;


}


}








.hero-card p{


font-family:


"Cormorant Garamond",
serif;



font-size:28px;



line-height:1.7;



color:#3b2c1c;



}








.hero-final{


color:var(--green);



font-style:italic;



border-top:


1px solid rgba(176,138,82,.25);



padding-top:25px;



margin-top:25px;



}









/* ================= DUGME ================= */


.hero-buttons{


margin-top:45px;


}







.button-primary{


display:inline-flex;



align-items:center;



justify-content:center;





min-width:360px;





padding:


22px 55px;






background:


linear-gradient(

135deg,

rgba(255,253,247,.95),

rgba(245,220,170,.8)

);






border:


1px solid rgba(176,138,82,.45);







border-radius:3px;







color:#66503b;






font-family:


"Cormorant Garamond",
serif;






font-size:22px;






letter-spacing:2px;







box-shadow:


0 15px 40px rgba(176,138,82,.18),


inset 0 0 25px rgba(255,255,255,.8);







transition:.5s;






position:relative;



overflow:hidden;



}








.button-primary::before{


content:"✦";



margin-right:15px;



font-size:22px;



color:var(--gold);



}








.button-primary:hover{


transform:


translateY(-5px);






background:


linear-gradient(

135deg,

#ffffff,

#f0d79e

);







box-shadow:


0 25px 60px rgba(176,138,82,.35);



}







.button-primary::after{


content:"";



position:absolute;



top:0;



left:-120%;



width:80%;



height:100%;







background:


linear-gradient(

120deg,

transparent,

rgba(255,255,255,.7),

transparent

);







transition:.8s;



}







.button-primary:hover::after{


left:130%;



}








/* ================= SLIKA ================= */


.hero-image{


position:relative;


}








.hero-image img{


width:100%;



border-radius:5px;



box-shadow:


0 40px 100px rgba(40,25,10,.35);






filter:sepia(.15);



}








.image-frame{


position:absolute;



inset:-25px;





border:


1px solid rgba(176,138,82,.45);






z-index:-1;



}

/* ================= ORNAMENT ================= */


.ornament{


width:100%;



display:flex;



align-items:center;



justify-content:center;



gap:25px;



padding:60px 7%;



}







.ornament-line{


height:2px;



flex:1;





background:


linear-gradient(

90deg,

transparent,

#b08a52,

#dfc18a,

#b08a52,

transparent

);






box-shadow:


0 0 12px rgba(176,138,82,.5);



}







.ornament span{


font-size:35px;



color:var(--gold);





text-shadow:


0 0 20px rgba(176,138,82,.8);





animation:


mysticStar 4s infinite;



}








@keyframes mysticStar{


0%,100%{


opacity:.6;


transform:rotate(0deg) scale(1);



}



50%{


opacity:1;


transform:rotate(180deg) scale(1.25);



}


}









/* ================= MAPA PSIHE ================= */


.archetype-section{


padding:


100px 7%;



text-align:center;



}








.section-title{


font-size:14px;



letter-spacing:5px;



color:var(--gold);



text-transform:uppercase;



margin-bottom:20px;



}







.section-title::before,

.section-title::after{


content:"✦";



color:var(--gold);



margin:0 20px;



}








.archetype-section h2{


font-size:52px;



margin-bottom:30px;



}







.section-description{


max-width:800px;



margin:auto;



font-family:


"Cormorant Garamond",
serif;



font-size:24px;



line-height:1.7;



}








/* ================= ARHETIP GRID ================= */


.archetype-grid{


margin:90px auto;



max-width:900px;



display:flex;



flex-wrap:wrap;



justify-content:center;



gap:40px;



}








.archetype{


width:210px;



height:210px;



flex:0 0 210px;



margin:auto;





aspect-ratio:1 / 1;



border-radius:50%;



display:flex;



justify-content:center;



align-items:center;



flex-direction:column;





cursor:pointer;





border:1px solid var(--gold);






box-shadow:


0 20px 50px rgba(70,40,20,.22),


inset 0 0 30px rgba(255,255,255,.7);







font-family:


"Cormorant Garamond",
serif;






font-size:23px;







transition:.45s;






animation:


fadeUp .8s forwards;





opacity:0;



}







.archetype:nth-child(1){


animation-delay:.1s;


}



.archetype:nth-child(2){


animation-delay:.2s;


}



.archetype:nth-child(3){


animation-delay:.3s;


}



.archetype:nth-child(4){


animation-delay:.4s;


}



.archetype:nth-child(5){


animation-delay:.5s;


}



.archetype:nth-child(6){


animation-delay:.6s;


}



.archetype:nth-child(7){


animation-delay:.7s;


}








@keyframes fadeUp{


from{


opacity:0;



transform:translateY(40px);



}



to{


opacity:1;



transform:translateY(0);



}


}









.archetype span{


font-size:55px;



color:var(--gold);



margin-bottom:8px;



}







.archetype small{


font-family:"Inter",sans-serif;



font-size:11px;



letter-spacing:2px;



margin-top:10px;



color:var(--brown);



}








/* ================= HOVER EFEKAT KRUGA ================= */


.archetype:hover{


transform:


translateY(-15px)

scale(1.08);






background:


radial-gradient(

circle at 30% 20%,

#ffffff,

#f3dca8 45%,

#d1a45d 100%

);







box-shadow:


0 35px 80px rgba(176,138,82,.65);



}








.archetype:hover span{


color:var(--gold);



text-shadow:


0 0 18px rgba(176,138,82,.8);



}
/* ================= MODAL ================= */


.archetype-modal{


position:fixed;



inset:0;



display:flex;



justify-content:center;



align-items:center;





background:


rgba(20,15,8,.78);





opacity:0;



pointer-events:none;



transition:.5s;



z-index:500;



backdrop-filter:blur(8px);



}







.archetype-modal.active{


opacity:1;



pointer-events:auto;



}








.modal-box{


position:relative;



width:min(650px,90%);





background:


linear-gradient(

135deg,

#fffaf0,

#ead7af

);






border:


1px solid var(--gold);






padding:50px;






box-shadow:


0 50px 120px rgba(0,0,0,.45);






animation:


modalShow .5s ease;



}








@keyframes modalShow{


from{


transform:scale(.85);



opacity:0;



}



to{


transform:scale(1);



opacity:1;



}



}








.modal-close{


position:absolute;



right:25px;



top:15px;





border:none;



background:none;



font-size:35px;



color:var(--gold);



cursor:pointer;



}







.modal-symbol{


text-align:center;



font-size:70px;



color:var(--gold);



}







.modal-box h2{


text-align:center;



font-size:50px;



}








.modal-box h3{


text-align:center;



letter-spacing:3px;



color:var(--brown);



}








.modal-box h4{


font-size:25px;



color:var(--gold);



margin-top:30px;



}








.modal-box p{


font-family:


"Cormorant Garamond",
serif;



font-size:22px;



line-height:1.6;



}









/* ================= PUT INDIVIDUACIJE ================= */


.individuation-section{


padding:


100px 7%;



text-align:center;



}








.individuation-grid{


max-width:1100px;



margin:80px auto;



display:grid;



grid-template-columns:


repeat(3,1fr);



gap:35px;



}








.individuation-card{


background:


linear-gradient(

135deg,

rgba(255,255,255,.85),

rgba(245,220,170,.65)

);






border:


1px solid rgba(176,138,82,.45);






padding:35px;






min-height:230px;






box-shadow:


0 20px 50px rgba(70,40,20,.18),


inset 0 0 25px rgba(255,255,255,.7);






transition:.4s;



}








.individuation-card:hover{


transform:


translateY(-10px);






box-shadow:


0 35px 70px rgba(176,138,82,.35);



}








.individuation-card h3{


font-size:32px;



color:var(--gold);



margin-bottom:20px;



}








.individuation-card p{


font-family:


"Cormorant Garamond",
serif;



font-size:22px;



line-height:1.6;



}









/* ================= FLIP KARTICE ================= */


.individuation-card{


perspective:1000px;



height:370px;



cursor:pointer;



}







.card-inner{


position:relative;



width:100%;



height:100%;



transition:


transform .7s ease;



transform-style:preserve-3d;



}







.individuation-card:hover .card-inner{


transform:


rotateY(180deg);



}








.card-front,
.card-back{


position:absolute;



inset:0;



backface-visibility:hidden;






background:


linear-gradient(

135deg,

#fffaf0,

#ead7af

);






border:


1px solid var(--gold);






border-radius:6px;






padding:30px;






box-shadow:


0 20px 50px rgba(70,40,20,.22),


inset 0 0 30px rgba(255,255,255,.6);






display:flex;



flex-direction:column;



justify-content:center;



align-items:center;






text-align:center;



}







.card-front h3,
.card-back h3{


font-family:


"Cormorant Garamond",
serif;



font-size:34px;



font-weight:600;



color:var(--gold);



margin-bottom:15px;



}







.card-front p,
.card-back p{


font-family:


"Cormorant Garamond",
serif;



font-size:20px;



line-height:1.45;



color:var(--ink);



}







.card-back{


transform:


rotateY(180deg);



background:


linear-gradient(

135deg,

#f8f2e7,

#e8d2a2

);



}







.card-back h3{


font-size:28px;



}







.quote-original{


font-family:


"Cormorant Garamond",
serif;



font-size:19px !important;



font-style:italic;



line-height:1.4;



color:var(--brown);



margin-bottom:15px;



}







.quote-translation{


font-family:


"Cormorant Garamond",
serif;



font-size:18px !important;



line-height:1.4;



color:var(--green);



border-top:


1px solid rgba(176,138,82,.35);



padding-top:12px;



}







.individuation-card:hover{


box-shadow:


0 35px 80px rgba(176,138,82,.35);



}
/* ================= LUMEN SEKCIJA ================= */


.lumen-section{


padding:


100px 7%;



text-align:center;



}








.lumen-grid{


max-width:1100px;



margin:80px auto;



display:grid;



grid-template-columns:


repeat(3,1fr);



gap:40px;



}








.lumen-card{


background:


radial-gradient(

circle at top,

#ffffff,

#f4dfad

);






border:


1px solid var(--gold);






padding:40px;






box-shadow:


0 25px 60px rgba(70,40,20,.2);



transition:.4s;



}








.lumen-card:hover{


transform:


translateY(-12px);






box-shadow:


0 40px 80px rgba(176,138,82,.4);



}








.lumen-card span{


font-size:55px;



color:var(--gold);



}








.lumen-card h3{


font-size:35px;



margin:20px 0;



}








.lumen-card p{


font-family:


"Cormorant Garamond",
serif;



font-size:22px;



line-height:1.6;



margin-bottom:25px;



}








.lumen-card a{


color:var(--gold);



font-family:


"Cormorant Garamond",
serif;



font-size:22px;



letter-spacing:1px;



}









/* ================= AI LUMEN ================= */


.ai-section{


padding:


100px 7%;



text-align:center;



}








.ai-card{


max-width:650px;



margin:60px auto 0;





background:


linear-gradient(

135deg,

#fffaf0,

#ead7af

);






border:


1px solid var(--gold);






padding:50px;






box-shadow:


0 30px 80px rgba(70,40,20,.25);



}








.ai-card h3{


font-family:


"Cormorant Garamond",
serif;



font-size:38px;



color:var(--gold);



margin-bottom:25px;



}








.ai-card p{


font-family:


"Cormorant Garamond",
serif;



font-size:24px;



line-height:1.6;



margin-bottom:30px;



}








.ai-card a{


display:inline-block;



padding:


18px 45px;






border:


1px solid var(--gold);






font-family:


"Cormorant Garamond",
serif;



font-size:22px;



color:var(--brown);



transition:.4s;



}








.ai-card a:hover{


background:var(--gold);



color:white;



}









/* ================= FOOTER ================= */


footer{


padding:60px;



text-align:center;



border-top:


1px solid rgba(176,138,82,.25);






font-family:


"Cormorant Garamond",
serif;



}








.footer-logo{


font-size:42px;



letter-spacing:8px;



color:var(--gold);



margin-bottom:20px;



}








footer p{


font-size:22px;



color:var(--brown);



}








.footer-line{


width:60%;



height:1px;



margin:30px auto;



background:


linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);



}








.copyright{


font-size:18px !important;



letter-spacing:2px;



}
/* ================= LANGUAGE SWITCHER ================= */


.language-switcher{


display:flex;


align-items:center;


gap:12px;


font-family:"Inter",sans-serif;


font-size:13px;


letter-spacing:1px;



}



.language-switcher a{


color:var(--brown);


transition:.3s;


}



.language-switcher a:hover{


color:var(--gold);


}







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



@media(max-width:1200px){



header{


padding:0 4%;


}



.lumen-nav{


gap:18px;


}




.hero{


gap:50px;


}




.hero h1{


font-size:55px;


}




.archetype-grid{


grid-template-columns:


repeat(3,1fr);


}




}









@media(max-width:1000px){



header{


height:auto;


flex-direction:column;



padding:25px;



gap:25px;



}





.logo{


text-align:center;


}





.lumen-nav{


flex-wrap:wrap;



justify-content:center;



}





.hero{


grid-template-columns:1fr;



text-align:center;



padding-top:220px;



}





.hero-image{


margin-top:40px;


}





.hero h1{


font-size:45px;


}





.archetype-grid{


grid-template-columns:


repeat(2,1fr);


}





.individuation-grid{


grid-template-columns:


repeat(2,1fr);


}





.lumen-grid{


grid-template-columns:


repeat(2,1fr);


}





}









@media(max-width:600px){



.logo{


font-size:30px;



letter-spacing:5px;


}





.logo span{


font-size:30px;


}





.hero{


padding:


220px 5% 80px;


}





.hero h1{


font-size:38px;


}






.hero-card{


padding:25px;


}





.hero-card p{


font-size:22px;



}





.button-primary{


min-width:auto;



width:100%;



padding:


18px 25px;



font-size:20px;



}





.archetype-grid{


grid-template-columns:


1fr;



margin-top:50px;



}





.archetype{


width:150px;



height:150px;



}





.archetype span{


font-size:40px;


}





.section-description{


font-size:21px;



}





.individuation-grid{


grid-template-columns:


1fr;



}





.individuation-card{


padding:30px;


}





.lumen-grid{


grid-template-columns:


1fr;



}





.lumen-card{


padding:30px;


}





.ai-card{


padding:30px;


}





.ai-card h3{


font-size:32px;


}





.language-switcher{


margin-top:15px;


justify-content:center;


}




footer{


padding:40px 20px;



}





.footer-logo{


font-size:30px;



letter-spacing:5px;



}



}

/* ==================================================
   MISTIČNE ZVEZDICE POZADINE
================================================== */



.stars-bg{
position:fixed;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:0;
}

.stars-bg span{

position:absolute;

color:rgba(176,138,82,.28);

text-shadow:
0 0 15px rgba(176,138,82,.5),
0 0 30px rgba(176,138,82,.35);

animation:starFloat 12s ease-in-out infinite;

}

.stars-bg span:nth-child(1){top:3%;left:5%;font-size:65px;}
.stars-bg span:nth-child(2){top:8%;left:25%;font-size:45px;}
.stars-bg span:nth-child(3){top:12%;right:12%;font-size:80px;}
.stars-bg span:nth-child(4){top:20%;left:55%;font-size:55px;}
.stars-bg span:nth-child(5){top:28%;right:35%;font-size:70px;}
.stars-bg span:nth-child(6){top:38%;left:10%;font-size:48px;}
.stars-bg span:nth-child(7){top:45%;left:40%;font-size:85px;}
.stars-bg span:nth-child(8){top:52%;right:15%;font-size:60px;}
.stars-bg span:nth-child(9){top:60%;left:65%;font-size:75px;}
.stars-bg span:nth-child(10){top:68%;left:20%;font-size:50px;}
.stars-bg span:nth-child(11){top:75%;right:40%;font-size:65px;}
.stars-bg span:nth-child(12){bottom:5%;left:8%;font-size:90px;}
.stars-bg span:nth-child(13){bottom:10%;left:35%;font-size:55px;}
.stars-bg span:nth-child(14){bottom:15%;right:8%;font-size:80px;}
.stars-bg span:nth-child(15){bottom:25%;left:60%;font-size:60px;}
.stars-bg span:nth-child(16){bottom:35%;right:28%;font-size:70px;}
.stars-bg span:nth-child(17){top:15%;left:75%;font-size:50px;}
.stars-bg span:nth-child(18){top:82%;left:82%;font-size:65px;}
.stars-bg span:nth-child(19){top:48%;left:82%;font-size:75px;}
.stars-bg span:nth-child(20){bottom:45%;left:3%;font-size:60px;}

@keyframes starFloat{

0%,100%{
transform:translateY(0) rotate(0deg);
opacity:.25;
}

50%{
transform:translateY(-35px) rotate(180deg) scale(1.2);
opacity:.9;
}

}