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

body{

background:#ffffff;

color:#ece5e5;

font-family:'Poppins',sans-serif;

}

.background-animation{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

overflow:hidden;

z-index:-5;

background:

radial-gradient(circle at top,#173b73,#08111f 70%);

}

.glow{

position:absolute;

border-radius:50%;

filter:blur(120px);

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

}

.glow1{

width:500px;
height:500px;

background:#00ffd5;

top:-150px;

left:-100px;

}

.glow2{

width:400px;
height:400px;

background:#00aaff;

right:-100px;

top:250px;

animation-delay:3s;

}

.glow3{

width:350px;
height:350px;

background:#5b6cff;

bottom:-100px;

left:40%;

animation-delay:6s;

}

@keyframes floatGlow{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-60px);

}

100%{

transform:translateY(0px);

}

}

.grid-overlay{

position:absolute;

width:100%;

height:100%;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

background-size:60px 60px;

opacity:.35;

}

html{
  scroll-behavior:smooth;
}

section{
  padding:100px 8%;
}

.parallax-wrapper {
  position: relative;
  overflow-x: hidden;
  background: #050b14;
}

/* Base layers */
.bg-layer {
  position: absolute;
  width: 100%;
  height: 200%;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Futuristic glowing blobs */
.layer1 {
  background: radial-gradient(circle at 20% 20%, rgba(0,255,200,0.15), transparent 40%),
              radial-gradient(circle at 80% 30%, rgba(0,150,255,0.12), transparent 50%);
  animation: move1 20s infinite linear;
}

.layer2 {
  background: radial-gradient(circle at 30% 70%, rgba(0,255,255,0.08), transparent 50%);
  animation: move2 30s infinite linear;
}

.layer3 {
  background: radial-gradient(circle at 70% 80%, rgba(0,255,120,0.06), transparent 60%);
  animation: move3 40s infinite linear;
}

/* Movement */
@keyframes move1 {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0px); }
}

@keyframes move2 {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-80px); }
  100% { transform: translateY(0px); }
}

@keyframes move3 {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-120px); }
  100% { transform: translateY(0px); }
}

.logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #0fb9b1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 80px 10%;
  gap: 60px;
}

.hero-left {
  flex: 1;
}

.tag {
  background: rgba(0,255,200,0.1);
  color: #0fb9b1;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.hero h1 {
  font-size: 48px;
  margin: 20px 0;
  color: #fff;
}

.hero h1 span {
  color: #0fb9b1;
}

.hero p {
  color: #cfd8dc;
  max-width: 500px;
}

.hero-buttons{
display:flex;
gap:18px;
align-items:center;
flex-wrap:nowrap;
}

@media(max-width:768px){

.hero-buttons{

flex-direction:column;

width:100%;

}

.hero-buttons a{

width:100%;

text-align:center;

}

}

.hero-badge{

white-space:nowrap;

display:inline-flex;

align-items:center;

}

.hero{

padding:120px 0;

}

.hero-content{

gap:70px;

}

.hero-title{
    max-width:620px;
    line-height:1.1;
}

.hero-btn{

transition:.35s ease;

}

.hero-btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 40px rgba(0,255,170,.25);

}

.btn-primary {
  background: #0fb9b1;
  color: #000;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
}

.btn-secondary {
  border: 1px solid #0fb9b1;
  color: #0fb9b1;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
}

.trust-row {
  margin-top: 25px;
  display: flex;
  gap: 20px;
  color: #aaa;
  font-size: 14px;
}

.hero-right{
  display:flex;
  flex-direction:column;
  gap:25px;
}

.em-dashboard{

padding:100px 8%;

}

.dashboard-header{

text-align:center;

max-width:800px;

margin:auto;

margin-bottom:70px;

}

.dashboard-tag{

display:inline-block;

padding:10px 25px;

border-radius:50px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

}

.dashboard-header h2{

font-size:3rem;

margin:20px 0;

}

.dashboard-header p{

opacity:.8;

font-size:18px;

}

.dashboard-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:35px;

}

.dashboard-card{

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border-radius:30px;

padding:40px;

cursor:pointer;

transition:.35s;

border:1px solid rgba(255,255,255,.1);

position:relative;

overflow:hidden;

}

.dashboard-card:hover{

transform:

translateY(-12px)

scale(1.03);

box-shadow:

0 25px 60px

rgba(0,255,213,.25);

}

.dashboard-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.15),

transparent

);

transition:.8s;

}

.dashboard-card:hover::before{

left:100%;

}

.dashboard-icon{

font-size:60px;

margin-bottom:25px;

}

.dashboard-card h3{

margin-bottom:15px;

font-size:1.6rem;

}

.dashboard-card p{

opacity:.8;

line-height:1.7;

margin-bottom:25px;

}

.dashboard-card button{

padding:14px 28px;

border:none;

border-radius:40px;

background:

linear-gradient(

135deg,

#00ffd5,

#00aaff

);

color:black;

font-weight:bold;

cursor:pointer;

}

.glass-card{
  position:relative;

  padding:25px;

  border-radius:20px;

  background:rgba(255,255,255,0.05);

  backdrop-filter:blur(15px);

  border:1px solid rgba(255,255,255,0.1);

  box-shadow:
  0 0 20px rgba(0,255,255,0.08);

  transition:.4s ease;

animation:cardFloat 6s ease-in-out infinite;

}

.glass-card:nth-child(2){

animation-delay:2s;

}

.glass-card:nth-child(3){

animation-delay:4s;

}

@keyframes cardFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

.glass-card:hover{

  transform:translateY(-8px);

  box-shadow:
  0 0 35px rgba(0,255,255,.35);

}

.glass-card h3{

  color:#5df3ff;

  margin-bottom:10px;

  font-size:22px;

}

.glass-card p{

  color:#dbeeff;

  line-height:1.6;

}

@media (max-width: 768px) {

  .hero {
    flex-direction: column;
    padding: 50px 20px;
    text-align: center;
  }

  .hero h1 {
    font-size: 32px;
  }

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

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-right {
    width: 100%;
  }

  .glass-card {
    width: 100%;
  }

  .mission-section{
    grid-template-columns:1fr;
  }

  .mission-content h2{
    font-size:30px;
  }

}


.glass-card {
  background: rgba(255,255,255,0.06);
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  color: white;
  animation: float 6s ease-in-out infinite;

animation:cardFloat 6s ease-in-out infinite;

}

.glass-card:nth-child(2){

animation-delay:2s;

}

.glass-card:nth-child(3){

animation-delay:4s;

}

@keyframes cardFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.hero-right .glass-card:nth-child(1) {
  animation-delay: 0s;
}

.hero-right .glass-card:nth-child(2) {
  animation-delay: 1s;
}

.hero-right .glass-card:nth-child(3) {
  animation-delay: 2s;
}

.hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.show {
  opacity: 1;
  transform: translateY(0);
}

.trust-bar{
  width:100%;
  overflow:hidden;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.trust-track{
  display:flex;
  width:max-content;
  gap:60px;
  animation: marquee 30s linear infinite;
}

.trust-track span{
  color:#d8e3e7;
  font-size:15px;
  white-space:nowrap;
  font-weight:500;
}

@keyframes marquee{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

.academy-section{

padding:100px 8%;
color:white;

}

.academy-header{

text-align:center;
max-width:800px;
margin:auto;

}

.academy-badge{

background:rgba(255,255,255,.1);
padding:10px 20px;
border-radius:50px;
backdrop-filter:blur(15px);

}

.academy-header h2{

font-size:3rem;
margin-top:20px;
color:#3fffd8;

}

.academy-header p{

opacity:.8;
margin-top:15px;

}

.academy-container{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:60px;

}

.academy-device,
.offer-card{

background:rgba(255,255,255,.08);
backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.1);

padding:40px;
border-radius:30px;

}

.academy-device{

min-height:450px;

}

.academy-device h3{

color:#3fffd8;
margin-bottom:20px;

}

.academy-device ul{

margin-top:20px;

}

.academy-device li{

margin-bottom:15px;

}

.popular-tag{

background:#00ff99;

color:black;

padding:8px 15px;

border-radius:50px;

font-weight:bold;

}

.offer-card h1{

font-size:4rem;

margin:20px 0;

color:#3fffd8;

}

.old-price{

text-decoration:line-through;
opacity:.5;

}

.offer-card ul{

margin:25px 0;

}

.offer-card li{

margin-bottom:15px;

}

.academy-btn{

display:inline-block;

padding:18px 35px;

background:linear-gradient(
135deg,
#00ffd5,
#00aaff
);

color:black;

font-weight:bold;

border-radius:50px;

text-decoration:none;

transition:.3s;

}

.academy-btn:hover{

transform:translateY(-5px);

box-shadow:0 0 30px #00ffd5;

}

.academy-steps{

display:grid;

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

gap:20px;

margin-top:60px;

}

.step{

background:rgba(255,255,255,.06);

padding:25px;

border-radius:20px;

text-align:center;

}

.step span{

display:block;

font-size:2rem;

color:#00ffd5;

margin-bottom:10px;

}

.academy-dashboard{

background:rgba(255,255,255,.08);

backdrop-filter:blur(30px);

border-radius:30px;

padding:30px;

border:1px solid rgba(255,255,255,.1);

}

.dashboard-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.student-avatar{

width:60px;

height:60px;

border-radius:50%;

background:linear-gradient(135deg,#00ffd5,#00aaff);

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

}

.progress-box{

margin:25px 0;

}

.progress-bar{

height:12px;

background:rgba(255,255,255,.1);

border-radius:30px;

overflow:hidden;

margin:10px 0;

}

.progress-fill{

width:24%;

height:100%;

background:linear-gradient(90deg,#00ffd5,#00aaff);

border-radius:30px;

animation:progressMove 2s ease;

}

@keyframes progressMove{

from{

width:0;

}

}

.lesson-grid{

display:grid;

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

gap:15px;

margin-top:30px;

}

.lesson-card{

background:rgba(255,255,255,.05);

padding:18px;

border-radius:18px;

transition:.3s;

cursor:pointer;

}

.lesson-card:hover{

transform:translateY(-8px);

box-shadow:0 0 25px rgba(0,255,213,.35);

}

.dashboard-bottom{

display:flex;

justify-content:space-between;

margin-top:35px;

text-align:center;

}

.dashboard-bottom h2{

color:#00ffd5;

font-size:2rem;

}

.academy-features{

padding:90px 8%;

}

.academy-features h2{

text-align:center;

font-size:2.6rem;

margin-bottom:60px;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.feature-card{

background:rgba(255,255,255,.07);

backdrop-filter:blur(18px);

padding:35px;

border-radius:25px;

transition:.35s;

border:1px solid rgba(255,255,255,.08);

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,255,213,.18);

}

.feature-icon{

font-size:2.5rem;

margin-bottom:20px;

}

.stats-section{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:25px;
  padding:60px 20px;
}

.stat-card{
  min-width:180px;
  padding:25px;
  text-align:center;
  border-radius:18px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.08);
  transition:.3s;
}

.stat-card:hover{
  transform:translateY(-6px);
}

.stat-card h2{
  font-size:42px;
  color:#0fb9b1;
  margin-bottom:10px;
}

.stat-card p{
  color:#d8e3e7;
  font-size:15px;
}

.youtube-showcase{

padding:80px 10%;

text-align:center;

}

.youtube-showcase h2{

font-size:2.2rem;

margin-bottom:15px;

}

.youtube-showcase p{

opacity:.9;

margin-bottom:40px;

}

.video-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.video-card{

background:rgba(255,255,255,.08);

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.15);

border-radius:20px;

padding:25px;

transition:.3s;

}

.video-card:hover{

transform:translateY(-8px);

box-shadow:0 0 25px rgba(0,255,255,.3);

}

.video-card h3{

margin-bottom:10px;

}

.video-card a{

display:inline-block;

margin-top:15px;

text-decoration:none;

font-weight:bold;

color:#53f6ff;

}

.why-emerriment{

padding:100px 8%;

text-align:center;

}

.why-emerriment h2{

font-size:48px;

margin-bottom:15px;

}

.why-subtitle{

font-size:20px;

opacity:.8;

margin-bottom:60px;

}

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

gap:35px;

}

.why-card{

background:rgba(255,255,255,.06);

backdrop-filter:blur(18px);

border-radius:28px;

overflow:hidden;

transition:.4s;

cursor:pointer;

border:1px solid rgba(255,255,255,.1);

}

.why-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 60px rgba(0,255,200,.3);

}

.why-card img{

width:100%;

height:250px;

object-fit:cover;

}

.why-content{

padding:28px;

text-align:left;

}

.why-content h3{

margin-bottom:15px;

font-size:24px;

}

.why-content ul{

margin-top:20px;

line-height:2;

list-style:none;

padding:0;

}

.why-avatar{
    width:110px;
    height:110px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    margin:30px auto 25px;

    border:4px solid rgba(255,255,255,.15);

    box-shadow:
        0 0 25px rgba(0,255,200,.35),
        0 0 60px rgba(0,255,200,.15);

    transition:all .45s ease;
}

.why-card:hover .why-avatar{

    transform:scale(1.08) rotate(3deg);

    box-shadow:
        0 0 40px rgba(0,255,200,.7),
        0 0 80px rgba(0,255,255,.3);

}

.feature-badge{

display:inline-block;

padding:8px 18px;

margin-bottom:18px;

border-radius:30px;

background:rgba(0,255,180,.15);

color:#6fffe9;

font-size:12px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

}

.why-card{

animation:floatCard 6s ease-in-out infinite;

}

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

section-tag{
  display:inline-block;
  padding:8px 16px;
  border-radius:50px;
  background:rgba(15,185,177,.12);
  color:#0fb9b1;
  font-size:12px;
  letter-spacing:1px;
  margin-bottom:20px;
}

.section-heading h2{
  font-size:42px;
  max-width:800px;
  margin:auto;
  margin-bottom:20px;
}

.section-heading p{
  max-width:700px;
  margin:auto;
  color:#cfd8dc;
}

.trust-grid{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}

.trust-card{
  padding:35px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  transition:.4s;
}

.trust-card:hover{
  transform:translateY(-10px);
}

.trust-icon{
  font-size:50px;
  margin-bottom:20px;
}

.trust-card h3{
  margin-bottom:15px;
  color:#0fb9b1;
}

.trust-card p{
  color:#d8e3e7;
  line-height:1.7;
}

.mission-section{
  padding:100px 20px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:center;
}

.mission-content h2{
  font-size:42px;
  margin:20px 0;
}

.mission-content p{
  color:#d8e3e7;
  line-height:1.8;
  margin-bottom:20px;
}

.vision-card{
  padding:35px;
  border-radius:24px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}

.vision-card h3{
  color:#0fb9b1;
  margin-bottom:20px;
}

.vision-card p{
  color:#d8e3e7;
  line-height:1.7;
}

.vision-points{
  margin-top:25px;
  display:flex;
  flex-direction:column;
  gap:15px;
}

.vision-points div{
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
}

/* BENEFITS */

.benefits{
  background:linear-gradient(
    to bottom,
    #111,
    #1a1024
  );
  text-align:center;
}

.benefits h2{
  font-size:3rem;
  margin-bottom:60px;
}

.benefit-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

.card{

background:#fff;

border:1px solid #ececec;

border-radius:20px;

box-shadow:0 12px 30px rgba(0,0,0,.06);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.12);

}

/* BEFORE AFTER */

.before-after{
  text-align:center;
  background:#140d1f;
}

.before-after h2{
  font-size:3rem;
  margin-bottom:50px;
}

.before-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.before-box img{
  width:100%;
  border-radius:25px;
  margin-bottom:20px;
}

.transformation-grid{
    display:flex;
    gap:30px;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
}

.journey-card{
    width:450px;
}

.journey-img{
    width:100%;
    height:580px;       /* Same height for every image */
    object-fit:cover;   /* Crops instead of stretching */
    border-radius:20px;
    display:block;
}

.testimonial-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.testimonial-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
padding:25px;
border-radius:20px;
text-align:center;
}


.testimonial-avatars{
    display:flex;
    align-items:center;
}

.testimonial-avatars img{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #111827;
    margin-left:-12px;
}

.testimonial-card h4{
margin-top:15px;
color:#00e5ff;
}

.testimonial-avatars img:first-child{
    margin-left:0;
}

.social-proof{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:25px;
}

.testimonial-avatars{
    display:flex;
}

.testimonial-avatars img{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
    margin-left:-12px;
    border:3px solid #0f172a;
}

.testimonial-avatars img:first-child{
    margin-left:0;
}

.rating{
    display:flex;
    flex-direction:column;
    color:#fff;
}

.stars{
    font-size:15px;
    margin-bottom:4px;
}

.rating p{
    font-size:14px;
    color:#cbd5e1;
}


/* EMAIL */

.email-section{
  text-align:center;
  background:#12091c;
}

.email-box{
  background:#181818;
  padding:60px;
  border-radius:30px;
}

.email-box form{
  margin-top:30px;
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}

.email-box input{
  padding:15px;
  width:300px;
  border:none;
  border-radius:50px;
}

.email-box button{
  padding:15px 30px;
  border:none;
  border-radius:50px;
  background:#c084fc;
  color:white;
  cursor:pointer;
}

/* CTA */

.final-cta{
  text-align:center;
  background:linear-gradient(
    to bottom,
    #1a1024,
    #0d0d0d
  );
}

.final-cta h2{
  font-size:3rem;
  margin-bottom:30px;
}

.final-cta a{
  display:inline-block;
  background:#c084fc;
  padding:18px 40px;
  border-radius:50px;
  color:white;
  text-decoration:none;
}

* FOOTER */

footer{
  background:black;
  padding:50px 8%;
  text-align:center;
}

.premium-footer{

padding:80px 8% 40px;

background:#08111f;

border-top:1px solid rgba(255,255,255,.08);

}

.footer-grid{

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:50px;

}

.footer-column h3{

margin-bottom:20px;

color:#00ffd5;

}

.footer-column p{

opacity:.8;

line-height:1.7;

}

.footer-column a{

display:block;

margin-bottom:14px;

color:white;

opacity:.8;

text-decoration:none;

transition:.3s;

}

.footer-column a:hover{

color:#00ffd5;

padding-left:8px;

}

.footer-logo{

font-size:2rem;

margin-bottom:20px;

color:#00ffd5;

}

.footer-bottom{

display:flex;

justify-content:space-between;

margin-top:40px;

opacity:.7;

flex-wrap:wrap;

}


.footer-contact{

padding:70px 20px 50px;

text-align:center;

}

.footer-contact h2{

font-size:42px;

margin-bottom:15px;

}

.footer-text{

max-width:650px;

margin:auto;

opacity:.8;

margin-bottom:45px;

font-size:18px;

line-height:1.7;

}

.contact-grid{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}

.contact-card{

width:320px;

padding:35px;

border-radius:25px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.1);

text-decoration:none;

color:white;

transition:.4s;

box-shadow:0 15px 40px rgba(0,0,0,.2);

}

.contact-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 60px rgba(0,255,200,.35);

}

.contact-icon{

font-size:55px;

margin-bottom:20px;

}

.contact-card h3{

margin-bottom:12px;

}

.footer-bottom{

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.12);

text-align:center;

line-height:2;

}

/* ANIMATION */

.reveal{
  opacity:0;
  transform:translateY(100px);
  transition:all 1s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* MOBILE */

@media(max-width:900px){

  .hero-content{
    flex-direction:column;
    text-align:center;
    padding-top:50px;
  }

  .hero-text h1{
    font-size:3rem;
  }

  .before-grid{
    grid-template-columns:1fr;
  }

  nav{
    flex-direction:column;
    gap:20px;
  }

  .mission-section{
    grid-template-columns:1fr;
  }

  .mission-content h2{
    font-size:30px;
  }

}

/* PREMIUM GLOW EFFECT */

section{
  position:relative;
}

section::before{
  content:'';
  position:absolute;
  width:300px;
  height:300px;
  background:rgba(192,132,252,0.08);
  filter:blur(120px);
  border-radius:50%;
  top:0;
  left:0;
  z-index:0;
}

section *{
  position:relative;
  z-index:2;
}

/* QUIZ SECTION */

.quiz-section{
   padding:100px 10%;
   text-align:center;
   background:linear-gradient(
      to bottom,
      #0d0d0d,
      #1a1024
   );
}

.quiz-section h2{
   font-size:3rem;
   margin-bottom:40px;
}

.quiz-box{
   max-width:600px;
   margin:auto;
   background:rgba(255,255,255,0.05);
   backdrop-filter:blur(20px);
   padding:40px;
   border-radius:30px;
   border:1px solid rgba(255,255,255,0.1);
}

.quiz-box input,
.quiz-box select{
   width:100%;
   padding:15px;
   margin:15px 0;
   border:none;
   border-radius:15px;
   background:#151515;
   color:white;
}

.quiz-box button{
   width:100%;
   padding:18px;
   border:none;
   border-radius:20px;
   background:#a855f7;
   color:white;
   font-size:1rem;
   cursor:pointer;
   transition:.3s;
}

.quiz-box button:hover{
   transform:translateY(-3px);
}

#result{
   margin-top:20px;
   color:#d8a7ff;
   font-weight:bold;
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10,10,20,0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
  font-size: 20px;
}

.loader {
  width: 70px;
  height: 70px;
  border: 6px solid #444;
  border-top: 6px solid #a855f7;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.results-dashboard {
  margin-top: 30px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(15px);
  color: white;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.dashboard-card {
  background: rgba(255,255,255,0.08);
  padding: 15px;
  border-radius: 15px;
  text-align: center;
  transition: 0.3s;
}

.dashboard-card:hover {
  transform: translateY(-5px);
}

.score-number {
  font-size: 28px;
  font-weight: bold;
  margin-top: 10px;
}

.recommendation-box {
  margin-top: 20px;
  padding: 15px;
  border-radius: 15px;
  background: rgba(255,255,255,0.08);
}

.product-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  color: white;
  background: linear-gradient(45deg,#7c3aed,#ec4899);
}

.loading-screen{
 position:fixed;
 inset:0;
 background:#0b1020;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 z-index:9999;
 color:white;
}

.loader{
 width:80px;
 height:80px;
 border:6px solid rgba(255,255,255,.2);
 border-top:6px solid #7c3aed;
 border-radius:50%;
 animation:spin 1s linear infinite;
}

@keyframes spin{
 to{
   transform:rotate(360deg);
 }
}

.product-card{
 background:rgba(255,255,255,.08);
 padding:20px;
 border-radius:20px;
 margin-top:15px;
 transition:.3s;
}

.product-card:hover{
 transform:translateY(-5px);
}

body{
 background:
 radial-gradient(circle at top left,#7c3aed,#0b1020);
}

.glass{
 background:rgba(255,255,255,.08);
 backdrop-filter:blur(20px);
 border:1px solid rgba(255,255,255,.1);
 border-radius:24px;

animation:cardFloat 6s ease-in-out infinite;

}

.glass-card:nth-child(2){

animation-delay:2s;

}

.glass-card:nth-child(3){

animation-delay:4s;

}

@keyframes cardFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

#loading {
  transition: opacity 0.5s ease;
}

.dashboard-result{
margin-top:40px;
padding:30px;
border-radius:25px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(20px);
text-align:center;
}

.score-circle{
width:120px;
height:120px;
margin:auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:36px;
font-weight:bold;
background:linear-gradient(
135deg,
#8a5cff,
#c59cff
);
}

.result-grid{
display:grid;
grid-template-columns:repeat(
auto-fit,
minmax(180px,1fr)
);
gap:15px;
margin-top:25px;
}

.result-card{
padding:15px;
border-radius:20px;
background:rgba(255,255,255,0.05);
}

.recommendation-box{
margin-top:25px;
padding:20px;
border-radius:20px;
background:rgba(138,92,255,.15);
}

.loading-screen{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#09090f;
z-index:9999;

justify-content:center;
align-items:center;
flex-direction:column;
}

.quiz-form{
display:flex;
flex-direction:column;
gap:15px;
max-width:400px;
margin:auto;
}

.quiz-form input,
.quiz-form select{
width:100%;
padding:15px;
border-radius:12px;
border:none;
}

.dashboard{
  margin-top:40px;
  background:#0f172a;
  padding:25px;
  border-radius:20px;
  color:white;
}

.score-card{
  text-align:center;
  margin-bottom:25px;
}

.score-card span{
  font-size:60px;
  font-weight:bold;
  color:#22c55e;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
}

.dashboard-box{
  background:#1e293b;
  padding:15px;
  border-radius:15px;
}

.analysis-card,
.routine-card{
  background:#1e293b;
  margin-top:20px;
  padding:20px;
  border-radius:15px;
}

.hidden{
  display:none;
}

.hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: all .8s ease;
}

.show {
  opacity: 1;
  transform: translateY(0);
}

@media(max-width:768px){

.quiz-form{
  width:95%;
}

.dashboard{
  width:95%;
}

.dashboard-grid{
  grid-template-columns:1fr;
}

h1,h2{
  font-size:2rem;
}

  .mission-section{
    grid-template-columns:1fr;
  }

  .mission-content h2{
    font-size:30px;
  }

}

#productRecommendations{
  margin-top:30px;
  text-align:center;
}

.product-card{
  background:white;
  border-radius:15px;
  padding:20px;
  margin:15px 0;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.product-card h3{
  margin-bottom:10px;
}

.product-btn{
  display:inline-block;
  padding:10px 20px;
  background:#22c55e;
  color:white;
  text-decoration:none;
  border-radius:10px;
}

.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:all .8s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:768px){

.hero h1{
  font-size:2rem;
}

.hero p{
  font-size:1rem;
}

.quiz-form{
  width:95%;
}

input,
select,
button{
  width:100%;
}

.before-after{
  flex-direction:column;
}

  .mission-section{
    grid-template-columns:1fr;
  }

  .mission-content h2{
    font-size:30px;
  }

}

.recommended-products{
  max-width:900px;
  margin:auto;
  padding:50px 20px;
}

.product-card{
  background:white;
  padding:25px;
  border-radius:15px;
  margin-bottom:20px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.product-card h3{
  color:#222;
  margin-bottom:10px;
}

.product-card p{
  color:#555;
  line-height:1.6;
  margin-bottom:20px;
}

.product-card a{
  display:inline-block;
  padding:12px 24px;
  background:#6c63ff;
  color:white;
  text-decoration:none;
  border-radius:10px;
}

.whatsapp-btn{
display:inline-block;
padding:15px 35px;
background:#25D366;
color:white;
font-weight:bold;
text-decoration:none;
border-radius:50px;
transition:.3s;
}

.whatsapp-btn:hover{
transform:translateY(-3px);
}

@media (max-width: 768px) {

  h1{
    font-size:2rem;
  }

  h2{
    font-size:1.6rem;
  }

  .hero-content{
    padding:20px;
  }

  .quiz-form{
    width:100%;
    padding:20px;
  }

  .quiz-form input,
  .quiz-form select,
  .quiz-form button{
    margin-bottom:15px;
    padding:15px;
    font-size:1rem;
    font-weight:600;
    border-radius:12px;
    width:100%;
  }

  .dashboard-grid{
    grid-template-columns:1fr;
  }

  .recommended-products{
    padding:20px;
  }

  .product-card{
    margin-bottom:20px;
  }

  .newsletter-form{
    flex-direction:column;
    gap:15px;
  }

  .newsletter-form input{
    width:100%;
  }

  .newsletter-form button{
    width:100%;
  }

  .mission-section{
    grid-template-columns:1fr;
  }

  .mission-content h2{
    font-size:30px;
  }

}

.product-card{
  padding:25px;
}

.product-card h3{
  font-size:1.3rem;
}

.product-card p{
  font-size:0.95rem;
  line-height:1.7;
}

a,
button{
  min-height:50px;
}

@media (max-width:768px){

  .hero h1{
    font-size:2.2rem;
    line-height:1.2;
  }

  .hero p{
    font-size:1rem;
  }

  .mission-section{
    grid-template-columns:1fr;
  }

  .mission-content h2{
    font-size:30px;
  }

}

.ai-section{

padding:80px 20px;

background:#ffffff;

}

.ai-section h2{

text-align:center;

font-size:42px;

margin-bottom:10px;

}

.ai-subtitle{

text-align:center;

color:#666;

margin-bottom:40px;

}

.chat-container{

max-width:900px;

margin:auto;

border:1px solid #ddd;

border-radius:20px;

overflow:hidden;

box-shadow:0 10px 40px rgba(0,0,0,.08);

}

.chat-messages{

height:500px;

overflow-y:auto;

padding:25px;

background:#fafafa;

}

.bot-message{

background:#111;

color:#fff;

padding:15px 20px;

border-radius:18px;

margin-bottom:20px;

max-width:75%;

}

.user-message{

background:#e9e9e9;

padding:15px 20px;

border-radius:18px;

margin-left:auto;

margin-bottom:20px;

max-width:75%;

}

.chat-input-area{

display:flex;

border-top:1px solid #ddd;

}

.chat-input-area input{

flex:1;

padding:18px;

border:none;

font-size:16px;

outline:none;

}

.chat-input-area button{

width:80px;

border:none;

background:#000;

color:#fff;

font-size:22px;

cursor:pointer;

}

.resource-center{

padding:80px 20px;
text-align:center;

}

.resource-intro{

max-width:700px;
margin:20px auto 40px;
line-height:1.8;

}

.resource-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:40px;

}

.resource-card{

padding:25px;

border-radius:20px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(10px);

transition:0.3s;

}

.resource-card:hover{

transform:translateY(-8px);

}

.resource-card h3{

margin-bottom:15px;

}

.knowledge-title{
text-align:center;
font-size:2rem;
margin-bottom:10px;
color:white;
}

.knowledge-subtitle{
text-align:center;
color:#d7d7d7;
margin-bottom:25px;
}

.knowledge-section{
    text-align:center;
    padding:80px 20px;
}

.search-box{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin:30px auto;
    flex-wrap:wrap;
}

#knowledgeSearch{
    width:600px;
    max-width:90%;
    padding:18px 24px;
    border:none;
    border-radius:40px;
    font-size:16px;
}

#resultsContainer{
    margin-top:40px;
}

.voice-btn{

width:55px;

height:55px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,#00d4ff,#00ff99);

color:white;

font-size:24px;

cursor:pointer;

transition:.3s;

margin-left:10px;

box-shadow:0 10px 25px rgba(0,212,255,.35);

}

.voice-btn:hover{

transform:scale(1.1);

}

.voice-btn.listening{

animation:pulse 1s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}

.result-card {
  margin-top: 20px;
  padding: 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  color: #fff;
  text-align: left;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.suggestions{

width:100%;

background:#111827;

border-radius:18px;

margin-top:8px;

overflow:hidden;

box-shadow:0 20px 50px rgba(0,0,0,.35);

display:none;

z-index:999;

}

.suggestion-item{

padding:16px 20px;

cursor:pointer;

transition:.25s;

border-bottom:1px solid rgba(255,255,255,.08);

}

.suggestion-item:hover{

background:#1f2937;

padding-left:28px;

color:#00ffd5;

}

.related-topics{
margin-top:30px;
padding:20px;
background:#f8faf8;
border-radius:16px;
}

.related-topics h3{
margin-bottom:15px;
color:#2d6a4f;
}

.related-item{
display:inline-block;
margin:5px;
padding:10px 15px;
background:white;
border-radius:50px;
cursor:pointer;
box-shadow:0 2px 10px rgba(0,0,0,.08);
transition:.3s;
}

.related-item:hover{
transform:translateY(-2px);
}

.hero-btn-secondary{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.hero-btn,
.hero-btn-secondary{
  transition:0.3s;
}

.hero-btn:hover,
.hero-btn-secondary:hover{
  transform:translateY(-3px);
  box-shadow:0 0 20px rgba(0,255,255,.4);
}

.glass-card::before{

  content:"";

  position:absolute;

  inset:-2px;

  border-radius:20px;

  background:linear-gradient(
  45deg,
  #00fff7,
  transparent,
  #00fff7
  );

  opacity:.2;

  z-index:-1;

  animation:glowMove 6s linear infinite;

}

@keyframes glowMove{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}

.hero-orb{

  position:absolute;

  right:15%;

  top:25%;

  width:250px;

  height:250px;

  border-radius:50%;

  background:radial-gradient(
  circle,
  rgba(0,255,255,.7),
  transparent
  );

  filter:blur(50px);

  animation:floatOrb 6s ease-in-out infinite;

}

@keyframes floatOrb{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-30px);
  }

}

.category-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:45px;

}

.category-card{

background:rgba(255,255,255,.08);

backdrop-filter:blur(15px);

border-radius:20px;

padding:30px;

text-align:center;

cursor:pointer;

transition:.4s;

box-shadow:0 8px 30px rgba(0,0,0,.2);

}

.category-card:hover{

transform:translateY(-8px);

background:#0f766e;

}

.category-card h3{

margin-top:15px;

color:white;

}

.category-card p{

color:#ddd;

font-size:15px;

}

.trending-box{

margin-top:50px;

text-align:center;

}

.trend-tags{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:15px;

margin-top:20px;

}

.trend-tags span{

background:#0f766e;

padding:12px 22px;

border-radius:30px;

cursor:pointer;

color:white;

transition:.3s;

}

.trend-tags span:hover{

background:#14b8a6;

transform:scale(1.05);

}

.topic-card{

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.12);

border-radius:22px;

padding:25px;

transition:.35s;

cursor:pointer;

display:flex;

flex-direction:column;

justify-content:space-between;

min-height:240px;

}

.topic-card:hover{

transform:translateY(-8px);

border-color:#14b8a6;

box-shadow:0 15px 45px rgba(20,184,166,.3);

}

.topic-icon{

font-size:42px;

margin-bottom:15px;

}

.topic-card h3{

color:white;

margin-bottom:12px;

}

.topic-card p{

color:#d1d5db;

line-height:1.7;

font-size:15px;

flex:1;

}

.ai-toggle{

position:fixed;

bottom:25px;

right:25px;

width:70px;

height:70px;

border-radius:50%;

background:#000;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

cursor:pointer;

z-index:9999;

box-shadow:0 15px 40px rgba(0,0,0,.3);

}

.ai-window{

position:fixed;

bottom:110px;

right:25px;

width:380px;

height:550px;

background:#fff;

border-radius:20px;

display:none;

flex-direction:column;

overflow:hidden;

box-shadow:0 20px 60px rgba(0,0,0,.25);

z-index:9999;

}

.ai-header{

background:#111;

color:#fff;

padding:18px;

display:flex;

justify-content:space-between;

font-weight:bold;

}

.chat-body{

flex:1;

padding:20px;

overflow-y:auto;

background:#fafafa;

}

.chat-footer{

display:flex;

border-top:1px solid #ddd;

}

.chat-footer input{

flex:1;

padding:16px;

border:none;

outline:none;

}

.chat-footer button{

width:70px;

border:none;

background:#000;

color:white;

cursor:pointer;

}

.topic-footer{

display:flex;

justify-content:space-between;

margin-top:20px;

color:#14b8a6;

font-weight:bold;

}

.topic-footer a{
	display:inline-flex;
	padding:8px 18px;
	border-radius:999px;
	background:rgba(255,255,255,.08);
	backdrop-filter:blur(15px);
	border:1px solid rgba(255,255,255,.15);
	font-size:.9rem;
	font-weight:600;
	color:#7CFFB2;
}

/* =========================================================
   EMERRIMENT — PHASE 1
   GLOBAL VISUAL SYSTEM
   WHITE + BLACK FOUNDATION
========================================================= */


/* =========================================================
   1. DESIGN TOKENS
========================================================= */

:root {

    /* -------------------------
       CORE COLORS
    ------------------------- */

    --black: #111111;
    --white: #ffffff;

    --gray-900: #1a1a1a;
    --gray-800: #252525;
    --gray-700: #3f3f3f;
    --gray-600: #555555;
    --gray-500: #777777;
    --gray-400: #999999;
    --gray-300: #cccccc;
    --gray-200: #e5e5e5;
    --gray-100: #f3f3f3;
    --gray-50: #fafafa;


    /* -------------------------
       BACKGROUNDS
    ------------------------- */

    --bg: #ffffff;
    --bg-soft: #f7f7f7;
    --bg-muted: #f2f2f2;


    /* -------------------------
       TEXT
    ------------------------- */

    --text: #111111;
    --text-secondary: #555555;
    --text-muted: #777777;
    --text-light: #999999;
    --text-inverse: #ffffff;


    /* -------------------------
       BORDERS
    ------------------------- */

    --border: #e5e5e5;
    --border-light: #eeeeee;
    --border-dark: #cccccc;


    /* -------------------------
       BUTTONS
    ------------------------- */

    --button-bg: #111111;
    --button-text: #ffffff;
    --button-hover: #333333;


    /* -------------------------
       SHADOWS
    ------------------------- */

    --shadow-sm:
        0 2px 8px rgba(0, 0, 0, 0.05);

    --shadow-md:
        0 8px 25px rgba(0, 0, 0, 0.08);

    --shadow-lg:
        0 15px 40px rgba(0, 0, 0, 0.10);


    /* -------------------------
       RADIUS
    ------------------------- */

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;


    /* -------------------------
       TRANSITIONS
    ------------------------- */

    --transition-fast: 0.2s ease;
    --transition: 0.25s ease;
    --transition-slow: 0.35s ease;

}


/* =========================================================
   2. GLOBAL RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;
    padding: 0;

    background: var(--bg);
    color: var(--text);

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

}


/* =========================================================
   3. REMOVE OLD COLORFUL BACKGROUND SYSTEM
========================================================= */

.background-animation,
.glow,
.glow1,
.glow2,
.glow3,
.grid-overlay {

    display: none !important;

}


.parallax-wrapper {

    background: var(--white) !important;

}


/* =========================================================
   4. GLOBAL SECTIONS
========================================================= */

section {

    width: 100%;

    padding: 80px 6%;

    background: var(--white);

    color: var(--text);

}


.section-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}


/* =========================================================
   5. GLOBAL TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    color: var(--text);

    line-height: 1.2;

    font-weight: 700;

}


h1 {

    font-size:
        clamp(2.4rem, 5vw, 4.5rem);

}


h2 {

    font-size:
        clamp(2rem, 4vw, 3rem);

}


h3 {

    font-size: 1.4rem;

}


h4 {

    font-size: 1.15rem;

}


p {

    color: var(--text-secondary);

}


strong {

    color: var(--text);

}


small {

    color: var(--text-muted);

}


/* =========================================================
   6. LINKS
========================================================= */

a {

    color: var(--black);

    text-decoration: none;

    transition:
        color var(--transition),
        opacity var(--transition);

}


a:hover {

    color: var(--gray-600);

}


/* =========================================================
   7. GLOBAL BUTTON SYSTEM
========================================================= */

button,
.btn,
.primary-btn,
.academy-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 14px 24px;

    background:
        var(--button-bg);

    color:
        var(--button-text);

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

    border-radius:
        var(--radius-sm);

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);

}


button:hover,
.btn:hover,
.primary-btn:hover,
.academy-btn:hover {

    background:
        var(--button-hover);

    color:
        var(--white);

    border-color:
        var(--button-hover);

    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-sm);

}


/* =========================================================
   8. SECONDARY BUTTON
========================================================= */

.secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 14px 24px;

    background:
        var(--white);

    color:
        var(--black);

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

    border-radius:
        var(--radius-sm);

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);

}


.secondary-btn:hover {

    background:
        var(--black);

    color:
        var(--white);

    transform:
        translateY(-2px);

}


/* =========================================================
   9. GLOBAL CARDS
========================================================= */

.card,
.feature-card,
.stat-card,
.video-card,
.why-card,
.testimonial-card,
.offer-card,
.academy-device,
.academy-dashboard {

    background:
        var(--white);

    color:
        var(--text);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

}


/* =========================================================
   10. CARD HOVER
========================================================= */

.card:hover,
.feature-card:hover,
.stat-card:hover,
.video-card:hover,
.why-card:hover,
.testimonial-card:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--border-dark);

    box-shadow:
        var(--shadow-md);

}


/* =========================================================
   11. GLOBAL FORM ELEMENTS
========================================================= */

input,
textarea,
select {

    width: 100%;

    padding: 13px 15px;

    background:
        var(--white);

    color:
        var(--text);

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

    border-radius:
        var(--radius-sm);

    outline: none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}


input:focus,
textarea:focus,
select:focus {

    border-color:
        var(--black);

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.06);

}


input::placeholder,
textarea::placeholder {

    color:
        var(--gray-500);

}


/* =========================================================
   12. CHECKBOXES & RADIO BUTTONS
========================================================= */

input[type="checkbox"],
input[type="radio"] {

    width: auto;

    accent-color:
        var(--black);

}


/* =========================================================
   13. TABLES
========================================================= */

table {

    width: 100%;

    border-collapse:
        collapse;

    background:
        var(--white);

    color:
        var(--text);

}


th {

    background:
        var(--gray-100);

    color:
        var(--black);

    font-weight:
        600;

}


th,
td {

    padding:
        14px;

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

    text-align:
        left;

}


tr:hover {

    background:
        var(--gray-50);

}


/* =========================================================
   14. DIVIDERS
========================================================= */

hr {

    border:
        none;

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

    margin:
        30px 0;

}


/* =========================================================
   15. IMAGES
========================================================= */

img {

    max-width:
        100%;

    height:
        auto;

}


img:not([src]) {

    visibility:
        hidden;

}


/* =========================================================
   16. GLOBAL IMAGE CONTAINERS
========================================================= */

.image-card,
.image-container {

    background:
        var(--gray-100);

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

    border-radius:
        var(--radius-lg);

    overflow:
        hidden;

}


/* =========================================================
   17. BADGES
========================================================= */

.badge,
.tag,
.category-badge {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        6px 12px;

    background:
        var(--gray-100);

    color:
        var(--black);

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

    border-radius:
        999px;

    font-size:
        0.8rem;

    font-weight:
        600;

}


/* =========================================================
   18. LOADING STATE
========================================================= */

.loader {

    width:
        38px;

    height:
        38px;

    border:
        3px solid var(--border);

    border-top-color:
        var(--black);

    border-radius:
        50%;

    animation:
        emerrimentSpin 0.8s linear infinite;

}


@keyframes emerrimentSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   19. HIDDEN UTILITY
========================================================= */

.hidden {

    display:
        none !important;

}


/* =========================================================
   20. TEXT UTILITIES
========================================================= */

.text-center {

    text-align:
        center;

}


.text-left {

    text-align:
        left;

}


.text-black {

    color:
        var(--black) !important;

}


.text-muted {

    color:
        var(--text-muted) !important;

}


.text-secondary {

    color:
        var(--text-secondary) !important;

}


/* =========================================================
   21. BACKGROUND UTILITIES
========================================================= */

.bg-white {

    background:
        var(--white) !important;

}


.bg-soft {

    background:
        var(--bg-soft) !important;

}


.bg-muted {

    background:
        var(--bg-muted) !important;

}


/* =========================================================
   22. BORDER UTILITIES
========================================================= */

.border {

    border:
        1px solid var(--border) !important;

}


.border-dark {

    border:
        1px solid var(--border-dark) !important;

}


/* =========================================================
   23. SHADOW UTILITIES
========================================================= */

.shadow-sm {

    box-shadow:
        var(--shadow-sm) !important;

}


.shadow-md {

    box-shadow:
        var(--shadow-md) !important;

}


.shadow-lg {

    box-shadow:
        var(--shadow-lg) !important;

}


/* =========================================================
   24. REMOVE GLASSMORPHISM
========================================================= */

.glass,
.glass-card,
.glass-panel {

    background:
        var(--white) !important;

    border:
        1px solid var(--border) !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    box-shadow:
        var(--shadow-sm) !important;

}


/* =========================================================
   25. REMOVE COMMON GRADIENT BACKGROUNDS
========================================================= */

.gradient-bg,
.gradient-background,
.neon-bg,
.futuristic-bg {

    background:
        var(--white) !important;

}


/* =========================================================
   26. GLOBAL DARK SECTION
   Use only when a section intentionally needs contrast.
========================================================= */

.dark-section {

    background:
        var(--black) !important;

    color:
        var(--white) !important;

}


.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {

    color:
        var(--white) !important;

}


.dark-section p {

    color:
        var(--gray-300) !important;

}


.dark-section a {

    color:
        var(--white);

}


/* =========================================================
   27. GLOBAL LIGHT SECTION
========================================================= */

.light-section {

    background:
        var(--gray-50) !important;

    color:
        var(--black) !important;

}


/* =========================================================
   28. RESPONSIVE FOUNDATION
========================================================= */

@media (max-width: 1024px) {

    section {

        padding:
            70px 5%;

    }

}


@media (max-width: 768px) {

    section {

        padding:
            60px 20px;

    }

    h1 {

        font-size:
            clamp(2rem, 9vw, 3rem);

    }

    h2 {

        font-size:
            clamp(1.8rem, 8vw, 2.4rem);

    }

    h3 {

        font-size:
            1.25rem;

    }

    button,
    .btn,
    .primary-btn,
    .secondary-btn,
    .academy-btn {

        width:
            auto;

        min-height:
            46px;

    }

}


@media (max-width: 480px) {

    section {

        padding:
            50px 16px;

    }

    button,
    .btn,
    .primary-btn,
    .secondary-btn,
    .academy-btn {

        padding:
            12px 18px;

    }

}


/* =========================================================
   29. ACCESSIBILITY
========================================================= */

:focus-visible {

    outline:
        2px solid var(--black);

    outline-offset:
        3px;

}

/* =========================================================
   EMERRIMENT — PHASE 2 MASTER WEBSITE CSS
   Homepage • Hero • Sections • Cards • Products
   Testimonials • CTA • Newsletter • Footer
   Responsive • Mobile First
   ========================================================= */


/* =========================================================
   1. GLOBAL RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background: #faf8f3;
    color: #292929;

    line-height: 1.6;

    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

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

ul,
ol {
    list-style: none;
}


/* =========================================================
   2. EMERRIMENT DESIGN SYSTEM
   ========================================================= */

:root {

    /* Brand */

    --gold: #d4af37;
    --gold-dark: #b8941f;
    --gold-light: #ead9a0;

    --beige: #faf8f3;
    --cream: #f5efe3;
    --cream-dark: #ebe1cf;

    --white: #ffffff;

    --dark: #222222;
    --dark-soft: #363636;

    --text: #333333;
    --muted: #777777;

    --green: #66856b;
    --green-light: #edf4ed;

    --red: #c95c5c;
    --red-light: #faeaea;

    --border: #e7dfd0;

    /* Shadows */

    --shadow-sm:
        0 4px 15px rgba(0, 0, 0, .05);

    --shadow:
        0 8px 30px rgba(0, 0, 0, .07);

    --shadow-lg:
        0 18px 45px rgba(0, 0, 0, .11);

    /* Radius */

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* Container */

    --container:
        1200px;

    /* Transition */

    --transition:
        .25s ease;
}


/* =========================================================
   3. CONTAINER
   ========================================================= */

.container {
    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin-inline: auto;
}

section {
    position: relative;
}


/* =========================================================
   4. ANNOUNCEMENT BAR
   ========================================================= */

.announcement-bar {
    width: 100%;

    background: var(--dark);

    color: white;

    text-align: center;

    padding: 9px 15px;

    font-size: 13px;

    font-weight: 600;
}

.announcement-bar a {
    color: var(--gold-light);

    text-decoration: underline;
}


/* =========================================================
   5. MAIN NAVIGATION
   ========================================================= */

.navbar {
    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    background:
        rgba(255, 255, 255, .95);

    backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid var(--border);
}

.nav-container {
    min-height: 74px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


/* =========================================================
   6. LOGO
   ========================================================= */

.logo {
    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 23px;

    font-weight: 800;

    color: var(--dark);

    white-space: nowrap;
}

.logo span {
    color: var(--gold);
}

.logo-mark {
    font-size: 25px;
}


/* =========================================================
   7. NAV LINKS
   ========================================================= */

.nav-links {
    display: flex;

    align-items: center;

    gap: 28px;
}

.nav-links a {
    position: relative;

    font-size: 14px;

    font-weight: 600;

    color: var(--text);

    transition:
        color var(--transition);
}

.nav-links a::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: -7px;

    width: 0;

    height: 2px;

    background: var(--gold);

    transition:
        width var(--transition);
}

.nav-links a:hover {
    color: var(--gold-dark);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}


/* =========================================================
   8. NAV ACTIONS
   ========================================================= */

.nav-actions {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* =========================================================
   9. MOBILE MENU
   ========================================================= */

.menu-toggle {
    display: none;

    border: none;

    background: transparent;

    font-size: 25px;

    color: var(--dark);
}

.mobile-menu {
    display: none;
}


/* =========================================================
   10. BUTTON SYSTEM
   ========================================================= */

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: none;

    border-radius: var(--radius-sm);

    padding: 13px 22px;

    font-weight: 700;

    font-size: 14px;

    transition:
        transform var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--gold);

    color: white;

    box-shadow:
        0 6px 18px
        rgba(212, 175, 55, .25);
}

.btn-primary:hover {
    background: var(--gold-dark);
}

.btn-dark {
    background: var(--dark);

    color: white;
}

.btn-light {
    background: white;

    color: var(--dark);

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

.btn-outline {
    background: transparent;

    color: var(--dark);

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

.btn-outline:hover {
    border-color: var(--gold);

    color: var(--gold-dark);
}

.btn-large {
    padding:
        15px 28px;

    font-size: 15px;
}

.btn-pill {
    border-radius: var(--radius-pill);
}


/* =========================================================
   11. HERO SECTION
   ========================================================= */

.hero {
    min-height:
        calc(100vh - 74px);

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #faf8f3 0%,
            #f7f0e3 55%,
            #efe2c8 100%
        );

    overflow: hidden;
}

.hero-container {
    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items: center;

    gap: 60px;

    padding:
        80px 0;
}


/* =========================================================
   12. HERO CONTENT
   ========================================================= */

.hero-content {
    max-width: 650px;
}

.hero-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        7px 13px;

    border-radius:
        var(--radius-pill);

    background:
        rgba(212, 175, 55, .12);

    color:
        var(--gold-dark);

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 20px;
}

.hero h1 {
    font-size:
        clamp(40px, 6vw, 70px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    color:
        var(--dark);

    margin-bottom:
        22px;
}

.hero h1 span {
    color:
        var(--gold-dark);
}

.hero-description {
    max-width:
        570px;

    color:
        var(--muted);

    font-size:
        17px;

    margin-bottom:
        30px;
}

.hero-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}


/* =========================================================
   13. HERO IMAGE
   ========================================================= */

.hero-visual {
    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.hero-image {
    width: 100%;

    max-width: 520px;

    height: 520px;

    object-fit: cover;

    border-radius:
        50% 50% 45% 45%;

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, .12);
}


/* =========================================================
   14. HERO FLOATING CARD
   ========================================================= */

.hero-floating-card {
    position: absolute;

    bottom: 30px;

    left: 10px;

    background: white;

    padding: 16px 18px;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow-lg);

    display: flex;

    align-items: center;

    gap: 12px;

    max-width: 230px;
}

.hero-floating-icon {
    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--green-light);

    font-size: 20px;
}

.hero-floating-card strong {
    display: block;

    font-size: 13px;
}

.hero-floating-card small {
    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   15. TRUST STRIP
   ========================================================= */

.trust-strip {
    background: white;

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

    border-top:
        1px solid var(--border);
}

.trust-container {
    display: grid;

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

    padding:
        25px 0;

    gap: 20px;
}

.trust-item {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: var(--dark-soft);

    font-size: 13px;

    font-weight: 700;

    text-align: center;
}

.trust-icon {
    font-size: 22px;
}


/* =========================================================
   16. SECTION HEADER
   ========================================================= */

.section-header {
    max-width:
        720px;

    margin:
        0 auto 45px;

    text-align:
        center;
}

.section-eyebrow {
    color:
        var(--gold-dark);

    text-transform:
        uppercase;

    letter-spacing:
        2px;

    font-size:
        11px;

    font-weight:
        800;

    margin-bottom:
        10px;
}

.section-header h2 {
    font-size:
        clamp(30px, 4vw, 44px);

    line-height:
        1.15;

    margin-bottom:
        13px;
}

.section-header p {
    color:
        var(--muted);

    font-size:
        15px;
}


/* =========================================================
   17. GENERIC SECTION
   ========================================================= */

.section {
    padding:
        90px 0;
}

.section-beige {
    background:
        var(--cream);
}

.section-white {
    background:
        white;
}

.section-dark {
    background:
        var(--dark);

    color:
        white;
}


/* =========================================================
   18. FEATURE GRID
   ========================================================= */

.feature-grid {
    display: grid;

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

    gap: 25px;
}

.feature-card {
    background: white;

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

    border-radius:
        var(--radius);

    padding:
        30px;

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.feature-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow-lg);
}

.feature-icon {
    width: 55px;

    height: 55px;

    border-radius:
        15px;

    background:
        var(--cream);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size:
        25px;

    margin-bottom:
        20px;
}

.feature-card h3 {
    font-size:
        20px;

    margin-bottom:
        10px;
}

.feature-card p {
    color:
        var(--muted);

    font-size:
        14px;
}


/* =========================================================
   19. SKIN QUIZ PROMOTION
   ========================================================= */

.quiz-section {
    background:
        linear-gradient(
            135deg,
            #f5efe3,
            #faf8f3
        );
}

.quiz-container {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        60px;
}

.quiz-content h2 {
    font-size:
        clamp(30px, 4vw, 45px);

    line-height:
        1.15;

    margin-bottom:
        18px;
}

.quiz-content p {
    color:
        var(--muted);

    margin-bottom:
        25px;
}

.quiz-list {
    display: grid;

    gap:
        12px;

    margin-bottom:
        25px;
}

.quiz-list li {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-size:
        14px;
}

.quiz-list li::before {
    content:
        "✓";

    width:
        24px;

    height:
        24px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--green-light);

    color:
        var(--green);

    font-weight:
        800;
}

.quiz-visual {
    display:
        flex;

    justify-content:
        center;
}

.quiz-card {
    width:
        min(100%, 430px);

    background:
        white;

    padding:
        35px;

    border-radius:
        25px;

    box-shadow:
        var(--shadow-lg);

    text-align:
        center;
}

.quiz-card-icon {
    font-size:
        60px;

    margin-bottom:
        15px;
}


/* =========================================================
   20. PRODUCT SECTION
   ========================================================= */

.products-section {
    background:
        white;
}

.product-grid {
    display: grid;

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

    gap:
        22px;
}


/* =========================================================
   21. PRODUCT CARD
   ========================================================= */

.product-card {
    background:
        white;

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

    border-radius:
        var(--radius);

    overflow:
        hidden;

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.product-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow-lg);
}

.product-image-wrapper {
    position:
        relative;

    background:
        var(--cream);

    overflow:
        hidden;
}

.product-image {
    width:
        100%;

    height:
        260px;

    object-fit:
        cover;

    transition:
        transform .4s ease;
}

.product-card:hover
.product-image {
    transform:
        scale(1.04);
}

.product-badge {
    position:
        absolute;

    top:
        12px;

    left:
        12px;

    background:
        var(--gold);

    color:
        white;

    padding:
        6px 10px;

    border-radius:
        var(--radius-pill);

    font-size:
        10px;

    font-weight:
        800;
}

.product-info {
    padding:
        20px;
}

.product-category {
    color:
        var(--gold-dark);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    font-weight:
        800;
}

.product-info h3 {
    font-size:
        18px;

    margin:
        7px 0;
}

.product-info p {
    color:
        var(--muted);

    font-size:
        13px;

    margin-bottom:
        14px;
}

.product-bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}

.product-price {
    font-size:
        18px;

    font-weight:
        800;

    color:
        var(--dark);
}

.product-price span {
    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        400;
}


/* =========================================================
   22. CATEGORY CARDS
   ========================================================= */

.category-grid {
    display:
        grid;

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

    gap:
        20px;
}

.category-card {
    min-height:
        220px;

    border-radius:
        var(--radius);

    overflow:
        hidden;

    position:
        relative;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        25px;

    color:
        white;

    background:
        var(--dark);
}

.category-card img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    opacity:
        .75;

    transition:
        transform .4s ease;
}

.category-card:hover img {
    transform:
        scale(1.06);
}

.category-card::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            transparent 30%,
            rgba(0,0,0,.75)
        );
}

.category-content {
    position:
        relative;

    z-index:
        2;
}

.category-content h3 {
    font-size:
        20px;

    margin-bottom:
        5px;
}

.category-content p {
    font-size:
        12px;

    opacity:
        .9;
}


/* =========================================================
   23. EDUCATIONAL CARDS
   ========================================================= */

.education-grid {
    display:
        grid;

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

    gap:
        25px;
}

.education-card {
    background:
        white;

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

    border-radius:
        var(--radius);

    overflow:
        hidden;

    box-shadow:
        var(--shadow-sm);
}

.education-image {
    width:
        100%;

    height:
        200px;

    object-fit:
        cover;
}

.education-content {
    padding:
        22px;
}

.education-content span {
    color:
        var(--gold-dark);

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;
}

.education-content h3 {
    margin:
        8px 0;

    font-size:
        20px;
}

.education-content p {
    color:
        var(--muted);

    font-size:
        14px;
}


/* =========================================================
   24. TESTIMONIALS
   ========================================================= */

.testimonial-grid {
    display:
        grid;

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

    gap:
        25px;
}

.testimonial-card {
    background:
        white;

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

    border-radius:
        var(--radius);

    padding:
        28px;

    box-shadow:
        var(--shadow-sm);
}

.stars {
    color:
        var(--gold);

    letter-spacing:
        3px;

    margin-bottom:
        15px;
}

.testimonial-card p {
    color:
        var(--text);

    font-size:
        14px;

    font-style:
        italic;

    margin-bottom:
        20px;
}

.testimonial-author {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}

.testimonial-avatar {
    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

    background:
        var(--cream);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.testimonial-author strong {
    display:
        block;

    font-size:
        13px;
}

.testimonial-author small {
    color:
        var(--muted);

    font-size:
        11px;
}


/* =========================================================
   25. STATS
   ========================================================= */

.stats-grid {
    display:
        grid;

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

    gap:
        20px;

    text-align:
        center;
}

.stat-item {
    padding:
        20px;
}

.stat-number {
    font-size:
        38px;

    font-weight:
        800;

    color:
        var(--gold-dark);
}

.stat-label {
    color:
        var(--muted);

    font-size:
        13px;
}


/* =========================================================
   26. CTA
   ========================================================= */

.cta-section {
    padding:
        90px 0;
}

.cta-box {
    background:
        linear-gradient(
            135deg,
            var(--dark),
            #3a3324
        );

    color:
        white;

    border-radius:
        28px;

    padding:
        70px 40px;

    text-align:
        center;

    overflow:
        hidden;

    position:
        relative;
}

.cta-box::before {
    content:
        "✦";

    position:
        absolute;

    top:
        20px;

    right:
        30px;

    font-size:
        80px;

    color:
        rgba(212,175,55,.12);
}

.cta-box h2 {
    font-size:
        clamp(30px, 5vw, 48px);

    line-height:
        1.1;

    margin-bottom:
        15px;
}

.cta-box p {
    max-width:
        650px;

    margin:
        0 auto 25px;

    color:
        rgba(255,255,255,.72);
}


/* =========================================================
   27. NEWSLETTER
   ========================================================= */

.newsletter {
    background:
        var(--cream);

    padding:
        70px 0;
}

.newsletter-container {
    max-width:
        720px;

    margin:
        auto;

    text-align:
        center;
}

.newsletter h2 {
    font-size:
        32px;

    margin-bottom:
        10px;
}

.newsletter p {
    color:
        var(--muted);

    margin-bottom:
        25px;
}

.newsletter-form {
    display:
        flex;

    gap:
        10px;

    max-width:
        600px;

    margin:
        auto;
}

.newsletter-form input {
    flex:
        1;

    min-width:
        0;

    padding:
        14px 18px;

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

    border-radius:
        var(--radius-sm);

    outline:
        none;

    background:
        white;
}

.newsletter-form input:focus {
    border-color:
        var(--gold);
}


/* =========================================================
   28. FOOTER
   ========================================================= */

.footer {
    background:
        var(--dark);

    color:
        white;

    padding:
        65px 0 25px;
}

.footer-grid {
    display:
        grid;

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

    gap:
        45px;

    margin-bottom:
        45px;
}

.footer-brand p {
    color:
        rgba(255,255,255,.65);

    max-width:
        350px;

    font-size:
        14px;

    margin-top:
        15px;
}

.footer h3 {
    font-size:
        15px;

    margin-bottom:
        17px;
}

.footer-links {
    display:
        grid;

    gap:
        10px;
}

.footer-links a {
    color:
        rgba(255,255,255,.65);

    font-size:
        13px;

    transition:
        color var(--transition);
}

.footer-links a:hover {
    color:
        var(--gold-light);
}

.social-links {
    display:
        flex;

    gap:
        10px;

    margin-top:
        18px;
}

.social-links a {
    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,255,255,.18);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transition:
        background var(--transition),
        border-color var(--transition);
}

.social-links a:hover {
    background:
        var(--gold);

    border-color:
        var(--gold);
}

.footer-bottom {
    padding-top:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,.1);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

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

    font-size:
        12px;
}


/* =========================================================
   29. COOKIE / PRIVACY NOTICE
   ========================================================= */

.cookie-notice {
    position:
        fixed;

    bottom:
        20px;

    left:
        20px;

    right:
        20px;

    max-width:
        700px;

    margin:
        auto;

    background:
        white;

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

    border-radius:
        var(--radius);

    padding:
        18px 20px;

    box-shadow:
        var(--shadow-lg);

    z-index:
        3000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}

.cookie-notice p {
    font-size:
        12px;

    color:
        var(--muted);
}


/* =========================================================
   30. BACK TO TOP
   ========================================================= */

.back-to-top {
    position:
        fixed;

    right:
        20px;

    bottom:
        20px;

    width:
        45px;

    height:
        45px;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--gold);

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        var(--shadow);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .25s ease;

    z-index:
        900;
}

.back-to-top.visible {
    opacity:
        1;

    visibility:
        visible;
}


/* =========================================================
   31. LOADING
   ========================================================= */

.loading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px;
}

.spinner {
    width:
        38px;

    height:
        38px;

    border:
        4px solid #eee;

    border-top-color:
        var(--gold);

    border-radius:
        50%;

    animation:
        spin .8s linear infinite;
}

@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   32. ALERTS
   ========================================================= */

.alert {
    padding:
        14px 18px;

    border-radius:
        var(--radius-sm);

    margin:
        15px 0;

    font-size:
        14px;
}

.alert-success {
    background:
        var(--green-light);

    color:
        var(--green);
}

.alert-error {
    background:
        var(--red-light);

    color:
        var(--red);
}


/* =========================================================
   33. MODAL
   ========================================================= */

.modal {
    position:
        fixed;

    inset:
        0;

    background:
        rgba(0,0,0,.55);

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    z-index:
        2000;
}

.modal.active {
    display:
        flex;
}

.modal-content {
    width:
        min(600px, 100%);

    max-height:
        90vh;

    overflow-y:
        auto;

    background:
        white;

    border-radius:
        20px;

    padding:
        30px;

    position:
        relative;
}

.modal-close {
    position:
        absolute;

    top:
        15px;

    right:
        18px;

    border:
        none;

    background:
        transparent;

    font-size:
        26px;
}


/* =========================================================
   34. FORM ELEMENTS
   ========================================================= */

.form-group {
    margin-bottom:
        18px;
}

.form-group label {
    display:
        block;

    font-size:
        13px;

    font-weight:
        700;

    margin-bottom:
        7px;
}

.form-control {
    width:
        100%;

    padding:
        13px 15px;

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

    border-radius:
        var(--radius-sm);

    background:
        white;

    outline:
        none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.form-control:focus {
    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(212,175,55,.12);
}

textarea.form-control {
    min-height:
        130px;

    resize:
        vertical;
}


/* =========================================================
   35. SEARCH
   ========================================================= */

.search-box {
    width:
        100%;

    max-width:
        600px;

    padding:
        14px 20px;

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

    border-radius:
        var(--radius-pill);

    background:
        white;

    outline:
        none;

    box-shadow:
        var(--shadow-sm);
}

.search-box:focus {
    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(212,175,55,.12);
}


/* =========================================================
   36. PAGINATION
   ========================================================= */

.pagination {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        40px;
}

.pagination button {
    width:
        38px;

    height:
        38px;

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

    background:
        white;

    border-radius:
        8px;
}

.pagination button.active,
.pagination button:hover {
    background:
        var(--gold);

    color:
        white;

    border-color:
        var(--gold);
}


/* =========================================================
   37. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .nav-links {
        gap:
            15px;
    }

    .hero-container {
        gap:
            35px;
    }

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

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

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

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

}


/* =========================================================
   38. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .container {
        width:
            min(
                calc(100% - 30px),
                var(--container)
            );
    }

    .section {
        padding:
            65px 0;
    }

    /* Navigation */

    .nav-links,
    .nav-actions {
        display:
            none;
    }

    .menu-toggle {
        display:
            block;
    }

    /* Hero */

    .hero {
        min-height:
            auto;
    }

    .hero-container {
        grid-template-columns:
            1fr;

        text-align:
            center;

        padding:
            65px 0;
    }

    .hero-content {
        margin:
            auto;
    }

    .hero-description {
        margin-inline:
            auto;
    }

    .hero-actions {
        justify-content:
            center;
    }

    .hero-visual {
        min-height:
            360px;
    }

    .hero-image {
        width:
            min(100%, 390px);

        height:
            390px;
    }

    .hero-floating-card {
        left:
            5%;

        bottom:
            10px;
    }

    /* Trust */

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

    /* Quiz */

    .quiz-container {
        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    /* Grids */

    .feature-grid,
    .education-grid,
    .testimonial-grid {
        grid-template-columns:
            1fr;
    }

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

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

    /* Newsletter */

    .newsletter-form {
        flex-direction:
            column;
    }

    /* Footer */

    .footer-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .footer-bottom {
        flex-direction:
            column;

        text-align:
            center;
    }

}


/* =========================================================
   39. RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .announcement-bar {
        font-size:
            11px;
    }

    .logo {
        font-size:
            20px;
    }

    .hero h1 {
        font-size:
            40px;

        letter-spacing:
            -1px;
    }

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

    .hero-image {
        height:
            320px;
    }

    .hero-floating-card {
        max-width:
            190px;

        padding:
            12px;
    }

    .trust-container {
        grid-template-columns:
            1fr;
    }

    .category-grid {
        grid-template-columns:
            1fr;
    }

    .product-grid {
        grid-template-columns:
            1fr;
    }

    .product-image {
        height:
            280px;
    }

    .footer-grid {
        grid-template-columns:
            1fr;
    }

    .cta-box {
        padding:
            50px 20px;
    }

    .cookie-notice {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


/* =========================================================
   40. ACCESSIBILITY
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        3px solid
        rgba(212,175,55,.4);

    outline-offset:
        3px;
}


/* =========================================================
   41. REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

/* =========================================================
   EMERRIMENT — PHASE 3 USER EXPERIENCE
   Dashboard • Skin Journey • Encyclopedia • Articles
   Collections • AI Assistant
   ========================================================= */


/* =========================================================
   1. GLOBAL RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background: #faf8f3;
    color: #2f2f2f;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

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

ul,
ol {
    list-style: none;
}


/* =========================================================
   2. BRAND VARIABLES
   ========================================================= */

:root {

    --em-gold: #d4af37;
    --em-gold-dark: #b8941f;
    --em-gold-light: #ead9a0;

    --em-beige: #faf8f3;
    --em-cream: #f5efe3;
    --em-white: #ffffff;

    --em-dark: #242424;
    --em-dark-soft: #3a3a3a;

    --em-text: #333333;
    --em-muted: #777777;

    --em-border: #e7e0d2;

    --em-green: #66856b;
    --em-green-light: #eaf2eb;

    --em-red: #c65b5b;
    --em-red-light: #faeaea;

    --em-blue: #5579a5;
    --em-blue-light: #eaf0f8;

    --em-shadow:
        0 8px 30px rgba(0, 0, 0, 0.06);

    --em-shadow-hover:
        0 15px 35px rgba(0, 0, 0, 0.10);

    --em-radius: 16px;
    --em-radius-small: 10px;

    --em-transition: 0.25s ease;
}


/* =========================================================
   3. PAGE CONTAINER
   ========================================================= */

.container {
    width: min(1200px, 92%);
    margin: 0 auto;
}

.page-container {
    width: min(1400px, 94%);
    margin: 0 auto;
}

.section {
    padding: 60px 0;
}


/* =========================================================
   4. USER NAVIGATION
   ========================================================= */

.user-navbar {
    height: 72px;

    background:
        rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(12px);

    border-bottom:
        1px solid var(--em-border);

    display: flex;
    align-items: center;

    padding: 0 5%;

    position: sticky;
    top: 0;

    z-index: 1000;
}

.user-navbar-inner {
    width: 100%;
    max-width: 1400px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;
}

.brand {
    font-size: 23px;
    font-weight: 800;
    color: var(--em-dark);
}

.brand span {
    color: var(--em-gold);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-links a {
    font-size: 14px;
    font-weight: 600;
    color: var(--em-text);

    transition:
        color var(--em-transition);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--em-gold-dark);
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--em-gold),
            var(--em-gold-light)
        );

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    color: white;
}


/* =========================================================
   5. MOBILE NAVIGATION
   ========================================================= */

.mobile-menu-btn {
    display: none;

    border: none;
    background: transparent;

    font-size: 24px;
}

@media (max-width: 800px) {

    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }
}


/* =========================================================
   6. PAGE HEADER
   ========================================================= */

.page-header {
    padding: 50px 0 30px;
}

.page-header h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    margin-bottom: 10px;
}

.page-header p {
    color: var(--em-muted);
    max-width: 700px;
}


/* =========================================================
   7. BUTTON SYSTEM
   ========================================================= */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 12px 20px;

    border-radius: var(--em-radius-small);

    border: none;

    font-weight: 700;

    transition:
        transform var(--em-transition),
        box-shadow var(--em-transition),
        background var(--em-transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--em-gold);
    color: white;

    box-shadow:
        0 5px 15px rgba(212, 175, 55, 0.25);
}

.btn-primary:hover {
    background: var(--em-gold-dark);
}

.btn-secondary {
    background: var(--em-dark);
    color: white;
}

.btn-outline {
    background: transparent;
    color: var(--em-dark);

    border:
        1px solid var(--em-border);
}

.btn-danger {
    background: var(--em-red);
    color: white;
}


/* =========================================================
   8. DASHBOARD
   ========================================================= */

.dashboard {
    padding: 40px 0;
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 35px;
}

.dashboard-header h1 {
    font-size: clamp(28px, 4vw, 40px);
}

.dashboard-header p {
    color: var(--em-muted);
}


/* =========================================================
   9. DASHBOARD GRID
   ========================================================= */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;
}


/* =========================================================
   10. DASHBOARD CARDS
   ========================================================= */

.dashboard-card {
    background: white;

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

    border-radius: var(--em-radius);

    padding: 25px;

    box-shadow: var(--em-shadow);

    transition:
        transform var(--em-transition),
        box-shadow var(--em-transition);
}

.dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--em-shadow-hover);
}

.dashboard-card h3 {
    font-size: 15px;
    color: var(--em-muted);
    margin-bottom: 10px;
}

.dashboard-card .value {
    font-size: 34px;
    font-weight: 800;
    color: var(--em-dark);
}

.dashboard-card .description {
    font-size: 13px;
    color: var(--em-muted);
}


/* =========================================================
   11. SKIN SCORE
   ========================================================= */

.skin-score-card {
    background:
        linear-gradient(
            135deg,
            #fffdf7,
            #f7efdc
        );

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

    border-radius: 20px;

    padding: 30px;

    display: flex;
    align-items: center;

    gap: 30px;
}

.skin-score {
    width: 130px;
    height: 130px;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--em-gold) 0deg,
            var(--em-gold) 280deg,
            #eee 280deg,
            #eee 360deg
        );

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}

.skin-score::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background: white;
}

.skin-score span {
    position: relative;
    z-index: 2;

    font-size: 30px;
    font-weight: 800;
}


/* =========================================================
   12. SKIN JOURNEY
   ========================================================= */

.journey-container {
    margin-top: 30px;
}

.journey-card {
    background: white;

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

    border-radius: var(--em-radius);

    padding: 30px;

    box-shadow: var(--em-shadow);
}

.journey-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.journey-progress {
    width: 100%;
    height: 12px;

    background: #eee;

    border-radius: 50px;

    overflow: hidden;
}

.journey-progress-bar {
    height: 100%;

    width: 0%;

    background:
        linear-gradient(
            90deg,
            var(--em-gold),
            var(--em-gold-dark)
        );

    border-radius: inherit;

    transition:
        width 0.7s ease;
}

.journey-percent {
    margin-top: 10px;

    font-size: 14px;
    font-weight: 700;

    color: var(--em-gold-dark);
}


/* =========================================================
   13. JOURNEY TIMELINE
   ========================================================= */

.journey-timeline {
    position: relative;

    margin-top: 40px;

    padding-left: 30px;
}

.journey-timeline::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 0;
    bottom: 0;

    width: 2px;

    background: var(--em-border);
}

.journey-step {
    position: relative;

    margin-bottom: 30px;
}

.journey-step::before {
    content: "";

    position: absolute;

    left: -29px;
    top: 5px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: white;

    border:
        3px solid var(--em-border);
}

.journey-step.completed::before {
    background: var(--em-gold);
    border-color: var(--em-gold);
}

.journey-step h3 {
    margin-bottom: 5px;
}

.journey-step p {
    color: var(--em-muted);
    font-size: 14px;
}


/* =========================================================
   14. CONTENT GRID
========================================================= */

.content-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 25px;
}


/* =========================================================
   15. ARTICLE CARDS
========================================================= */

.article-card {
    background: white;

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

    border-radius: var(--em-radius);

    overflow: hidden;

    box-shadow: var(--em-shadow);

    transition:
        transform var(--em-transition),
        box-shadow var(--em-transition);
}

.article-card:hover {
    transform: translateY(-5px);

    box-shadow:
        var(--em-shadow-hover);
}

.article-image {
    width: 100%;
    height: 210px;

    object-fit: cover;
}

.article-content {
    padding: 22px;
}

.article-category {
    display: inline-block;

    color: var(--em-gold-dark);

    background: #faf4df;

    padding: 5px 10px;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 12px;
}

.article-content h2 {
    font-size: 20px;

    line-height: 1.3;

    margin-bottom: 10px;
}

.article-content p {
    color: var(--em-muted);

    font-size: 14px;

    margin-bottom: 15px;
}

.article-meta {
    display: flex;

    justify-content: space-between;

    color: #999;

    font-size: 12px;
}


/* =========================================================
   16. ENCYCLOPEDIA
   ========================================================= */

.encyclopedia-header {
    text-align: center;

    padding: 60px 20px 30px;
}

.encyclopedia-header h1 {
    font-size: clamp(30px, 5vw, 48px);

    margin-bottom: 12px;
}

.encyclopedia-header p {
    color: var(--em-muted);

    max-width: 700px;

    margin: auto;
}


/* =========================================================
   17. SEARCH
   ========================================================= */

.search-container {
    max-width: 700px;

    margin: 30px auto;
}

.search-box {
    width: 100%;

    padding: 16px 20px;

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

    border-radius: 50px;

    background: white;

    outline: none;

    font-size: 15px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .05);
}

.search-box:focus {
    border-color: var(--em-gold);

    box-shadow:
        0 0 0 4px
        rgba(212, 175, 55, .12);
}


/* =========================================================
   18. TOPIC CATEGORIES
   ========================================================= */

.topic-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 15px;

    margin: 30px 0;
}

.topic-card {
    background: white;

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

    border-radius: var(--em-radius);

    padding: 20px;

    text-align: center;

    transition: .25s ease;
}

.topic-card:hover {
    border-color: var(--em-gold);

    transform: translateY(-3px);
}

.topic-card .icon {
    font-size: 28px;

    margin-bottom: 8px;
}


/* =========================================================
   19. ARTICLE PAGE
   ========================================================= */

.article-page {
    max-width: 850px;

    margin: auto;

    padding: 50px 20px;
}

.article-page-header {
    margin-bottom: 30px;
}

.article-page-header h1 {
    font-size: clamp(32px, 5vw, 52px);

    line-height: 1.15;

    margin-bottom: 15px;
}

.article-page-meta {
    color: var(--em-muted);

    font-size: 14px;
}

.article-hero {
    width: 100%;

    max-height: 500px;

    object-fit: cover;

    border-radius: 20px;

    margin-bottom: 35px;
}

.article-body {
    font-size: 17px;

    line-height: 1.9;
}

.article-body h2 {
    margin:
        35px 0 15px;

    font-size: 28px;
}

.article-body h3 {
    margin:
        25px 0 12px;

    font-size: 22px;
}

.article-body p {
    margin-bottom: 20px;
}

.article-body ul,
.article-body ol {
    margin:
        15px 0 25px 25px;

    list-style: disc;
}

.article-body li {
    margin-bottom: 8px;
}


/* =========================================================
   20. ARTICLE ACTIONS
   ========================================================= */

.article-actions {
    display: flex;

    gap: 12px;

    margin:
        25px 0 35px;

    flex-wrap: wrap;
}

.save-article-btn {
    border:
        1px solid var(--em-border);

    background: white;

    padding: 10px 18px;

    border-radius: 50px;

    font-weight: 600;

    transition: .25s ease;
}

.save-article-btn:hover,
.save-article-btn.saved {
    background: var(--em-gold);

    color: white;

    border-color: var(--em-gold);
}


/* =========================================================
   21. COLLECTIONS
   ========================================================= */

.collections-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;
}

.collections-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;
}

.collection-card {
    background: white;

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

    border-radius: var(--em-radius);

    padding: 25px;

    box-shadow: var(--em-shadow);

    transition: .25s ease;
}

.collection-card:hover {
    transform: translateY(-4px);

    box-shadow:
        var(--em-shadow-hover);
}

.collection-icon {
    font-size: 32px;

    margin-bottom: 15px;
}

.collection-card h3 {
    margin-bottom: 7px;
}

.collection-card p {
    color: var(--em-muted);

    font-size: 14px;
}


/* =========================================================
   22. SAVED ARTICLES
   ========================================================= */

.saved-list {
    display: grid;

    gap: 15px;
}

.saved-item {
    background: white;

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

    border-radius: 12px;

    padding: 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;
}

.saved-item h3 {
    font-size: 16px;
}

.saved-item p {
    color: var(--em-muted);

    font-size: 13px;
}


/* =========================================================
   23. AI ASSISTANT
   ========================================================= */

.ai-page {
    min-height:
        calc(100vh - 72px);

    display: flex;

    flex-direction: column;
}

.ai-header {
    padding: 30px;

    background: white;

    border-bottom:
        1px solid var(--em-border);
}

.ai-header h1 {
    font-size: 28px;
}

.ai-header p {
    color: var(--em-muted);
}


/* =========================================================
   24. AI CHAT
   ========================================================= */

.ai-chat {
    flex: 1;

    max-width: 900px;

    width: 94%;

    margin: auto;

    padding: 30px 0;
}

.chat-messages {
    display: flex;

    flex-direction: column;

    gap: 18px;

    padding-bottom: 120px;
}

.chat-message {
    max-width: 78%;

    padding: 15px 18px;

    border-radius: 18px;

    font-size: 14px;
}

.chat-message.user {
    align-self: flex-end;

    background: var(--em-gold);

    color: white;

    border-bottom-right-radius: 5px;
}

.chat-message.ai {
    align-self: flex-start;

    background: white;

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

    border-bottom-left-radius: 5px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.04);
}


/* =========================================================
   25. AI INPUT
   ========================================================= */

.ai-input-area {
    position: fixed;

    bottom: 0;

    left: 0;
    right: 0;

    background:
        rgba(250, 248, 243, .95);

    backdrop-filter: blur(12px);

    border-top:
        1px solid var(--em-border);

    padding: 15px;

    z-index: 100;
}

.ai-input-wrapper {
    max-width: 900px;

    margin: auto;

    display: flex;

    gap: 10px;
}

.ai-input {
    flex: 1;

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

    border-radius: 50px;

    background: white;

    padding: 14px 20px;

    outline: none;
}

.ai-input:focus {
    border-color: var(--em-gold);
}

.ai-send {
    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    background: var(--em-gold);

    color: white;

    font-size: 18px;
}


/* =========================================================
   26. AI SUGGESTIONS
   ========================================================= */

.ai-suggestions {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 15px;
}

.ai-suggestion {
    background: white;

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

    border-radius: 50px;

    padding: 9px 15px;

    font-size: 13px;

    cursor: pointer;

    transition: .25s ease;
}

.ai-suggestion:hover {
    border-color: var(--em-gold);

    color: var(--em-gold-dark);
}


/* =========================================================
   27. RECOMMENDATIONS
   ========================================================= */

.recommendations {
    margin-top: 40px;
}

.recommendation-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;

    margin-top: 20px;
}

.recommendation-card {
    background: white;

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

    border-radius: var(--em-radius);

    padding: 22px;

    box-shadow: var(--em-shadow);
}

.recommendation-card h3 {
    margin-bottom: 8px;
}

.recommendation-card p {
    color: var(--em-muted);

    font-size: 14px;
}


/* =========================================================
   28. PRODUCT RECOMMENDATIONS
   ========================================================= */

.product-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;
}

.product-card {
    background: white;

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

    border-radius: var(--em-radius);

    overflow: hidden;

    box-shadow: var(--em-shadow);

    transition: .25s ease;
}

.product-card:hover {
    transform: translateY(-4px);

    box-shadow:
        var(--em-shadow-hover);
}

.product-image {
    width: 100%;
    height: 220px;

    object-fit: cover;
}

.product-info {
    padding: 20px;
}

.product-info h3 {
    margin-bottom: 7px;
}

.product-info p {
    color: var(--em-muted);

    font-size: 14px;

    margin-bottom: 15px;
}

.product-price {
    color: var(--em-gold-dark);

    font-size: 18px;

    font-weight: 800;
}


/* =========================================================
   29. STATUS / BADGES
   ========================================================= */

.badge {
    display: inline-block;

    padding: 5px 10px;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 700;
}

.badge-success {
    background: var(--em-green-light);
    color: var(--em-green);
}

.badge-warning {
    background: #fff5d9;
    color: #997515;
}

.badge-danger {
    background: var(--em-red-light);
    color: var(--em-red);
}

.badge-info {
    background: var(--em-blue-light);
    color: var(--em-blue);
}


/* =========================================================
   30. ALERTS
   ========================================================= */

.alert {
    padding: 15px 18px;

    border-radius: 10px;

    margin: 15px 0;
}

.alert-success {
    background: var(--em-green-light);
    color: var(--em-green);
}

.alert-error {
    background: var(--em-red-light);
    color: var(--em-red);
}

.alert-info {
    background: var(--em-blue-light);
    color: var(--em-blue);
}


/* =========================================================
   31. EMPTY STATES
   ========================================================= */

.empty-state {
    text-align: center;

    padding: 60px 20px;

    color: var(--em-muted);
}

.empty-state .icon {
    font-size: 50px;

    margin-bottom: 15px;
}

.empty-state h2 {
    color: var(--em-dark);

    margin-bottom: 8px;
}


/* =========================================================
   32. LOADING
   ========================================================= */

.loading {
    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px;
}

.spinner {
    width: 38px;
    height: 38px;

    border:
        4px solid #eee;

    border-top-color:
        var(--em-gold);

    border-radius: 50%;

    animation:
        emSpin .8s linear infinite;
}

@keyframes emSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   33. MODALS
   ========================================================= */

.modal {
    display: none;

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, .55);

    align-items: center;

    justify-content: center;

    padding: 20px;

    z-index: 2000;
}

.modal.active {
    display: flex;
}

.modal-content {
    width: min(600px, 100%);

    max-height: 90vh;

    overflow-y: auto;

    background: white;

    border-radius: 18px;

    padding: 30px;

    position: relative;
}

.modal-close {
    position: absolute;

    top: 15px;
    right: 18px;

    border: none;

    background: transparent;

    font-size: 25px;

    cursor: pointer;
}


/* =========================================================
   34. FORMS
   ========================================================= */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    font-weight: 600;

    font-size: 14px;
}

.form-control {
    width: 100%;

    padding: 13px 14px;

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

    border-radius: 10px;

    outline: none;

    background: white;

    color: var(--em-text);

    transition: .25s ease;
}

.form-control:focus {
    border-color: var(--em-gold);

    box-shadow:
        0 0 0 3px
        rgba(212, 175, 55, .12);
}

textarea.form-control {
    resize: vertical;

    min-height: 120px;
}


/* =========================================================
   35. PROFILE
   ========================================================= */

.profile-card {
    background: white;

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

    border-radius: var(--em-radius);

    padding: 30px;

    display: flex;

    align-items: center;

    gap: 20px;

    box-shadow: var(--em-shadow);
}

.profile-avatar {
    width: 80px;
    height: 80px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--em-gold),
            var(--em-gold-light)
        );

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    font-weight: 800;
}


/* =========================================================
   36. RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .section {
        padding: 40px 0;
    }

    .dashboard {
        padding: 25px 0;
    }

    .dashboard-header {
        flex-direction: column;

        align-items: flex-start;
    }

    .skin-score-card {
        flex-direction: column;

        text-align: center;
    }

    .journey-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }

    .article-page {
        padding:
            35px 15px;
    }

    .article-body {
        font-size: 16px;
    }

    .article-body h2 {
        font-size: 24px;
    }

    .collections-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }

    .chat-message {
        max-width: 90%;
    }

    .ai-input-wrapper {
        gap: 7px;
    }

}


/* =========================================================
   37. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .container {
        width: 92%;
    }

    .page-container {
        width: 92%;
    }

    .dashboard-card {
        padding: 20px;
    }

    .dashboard-card .value {
        font-size: 28px;
    }

    .skin-score {
        width: 110px;
        height: 110px;
    }

    .skin-score::after {
        width: 84px;
        height: 84px;
    }

    .skin-score span {
        font-size: 25px;
    }

    .article-image {
        height: 180px;
    }

    .article-content {
        padding: 18px;
    }

    .article-page-header h1 {
        font-size: 30px;
    }

    .profile-card {
        flex-direction: column;

        text-align: center;
    }

    .ai-header {
        padding: 20px;
    }

}


/* =========================================================
   38. ACCESSIBILITY
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        3px solid
        rgba(212, 175, 55, .4);

    outline-offset: 2px;
}


/* =========================================================
   39. REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}

/* =========================================================
   EMERRIMENT CMS — PHASE 4 MASTER CSS
   Admin Dashboard • Users • Products • Articles
   Analytics • Settings • Forms • Tables • Responsive
   ========================================================= */


/* =========================================================
   1. GLOBAL RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background: #f7f7f7;

    color: #333;

    line-height: 1.6;

    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    text-decoration: none;
}


/* =========================================================
   2. EMERRIMENT CMS VARIABLES
   ========================================================= */

:root {

    --gold: #d4af37;
    --gold-dark: #b8941f;
    --gold-light: #ead9a0;

    --beige: #faf8f3;
    --cream: #f5efe3;

    --white: #ffffff;

    --dark: #222222;
    --dark-soft: #333333;

    --text: #333333;
    --muted: #777777;

    --green: #5f8b68;
    --green-light: #eaf4ec;

    --red: #c95454;
    --red-light: #faeaea;

    --orange: #d9822b;
    --orange-light: #fff1df;

    --blue: #4779b8;
    --blue-light: #eaf2fb;

    --border: #e5e5e5;

    --sidebar-width: 250px;

    --topbar-height: 70px;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;

    --shadow-sm:
        0 3px 12px rgba(0, 0, 0, .05);

    --shadow:
        0 6px 20px rgba(0, 0, 0, .07);

    --shadow-lg:
        0 15px 40px rgba(0, 0, 0, .12);

    --transition: .25s ease;
}


/* =========================================================
   3. TOPBAR
   ========================================================= */

.topbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: var(--topbar-height);

    background: var(--white);

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 25px;

    z-index: 1000;
}


/* =========================================================
   4. LOGO
   ========================================================= */

.logo {
    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 22px;

    font-weight: 800;

    color: var(--dark);
}

.logo span {
    color: var(--gold);
}


/* =========================================================
   5. TOPBAR ACTIONS
   ========================================================= */

.topbar-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}

.topbar-icon {
    width: 40px;

    height: 40px;

    border-radius: 50%;

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

    background: white;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;
}

.topbar-icon:hover {
    background: var(--cream);

    border-color: var(--gold);
}


/* =========================================================
   6. LOGOUT BUTTON
   ========================================================= */

.logout-btn {
    background: var(--gold);

    color: white;

    border: none;

    padding:
        11px 18px;

    border-radius:
        var(--radius-sm);

    font-weight:
        700;

    transition:
        var(--transition);
}

.logout-btn:hover {
    background:
        var(--gold-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   7. MAIN LAYOUT
   ========================================================= */

.layout {
    display: flex;

    min-height: 100vh;

    padding-top:
        var(--topbar-height);
}


/* =========================================================
   8. SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;

    top:
        var(--topbar-height);

    left: 0;

    bottom: 0;

    width:
        var(--sidebar-width);

    background:
        var(--dark);

    padding:
        25px 0;

    overflow-y:
        auto;

    z-index:
        900;
}

.sidebar-title {
    color:
        rgba(255,255,255,.5);

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

    font-size:
        10px;

    font-weight:
        800;

    padding:
        10px 25px;
}

.sidebar a {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

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

    padding:
        14px 25px;

    font-size:
        14px;

    font-weight:
        600;

    border-left:
        3px solid transparent;

    transition:
        var(--transition);
}

.sidebar a:hover {
    background:
        rgba(212,175,55,.12);

    color:
        white;
}

.sidebar a.active {
    background:
        var(--gold);

    color:
        white;

    border-left-color:
        white;
}


/* =========================================================
   9. CONTENT AREA
   ========================================================= */

.content {
    margin-left:
        var(--sidebar-width);

    width:
        calc(100% - var(--sidebar-width));

    padding:
        35px;
}


/* =========================================================
   10. PAGE HEADER
   ========================================================= */

.page-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        30px;
}

.page-header h1 {
    font-size:
        30px;

    color:
        var(--dark);

    line-height:
        1.2;
}

.page-header p {
    color:
        var(--muted);

    font-size:
        14px;

    margin-top:
        5px;
}


/* =========================================================
   11. DASHBOARD STAT GRID
   ========================================================= */

.stats-grid {
    display:
        grid;

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

    gap:
        20px;

    margin-bottom:
        30px;
}


/* =========================================================
   12. STAT CARD
   ========================================================= */

.stat-card {
    background:
        white;

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

    border-radius:
        var(--radius);

    padding:
        25px;

    box-shadow:
        var(--shadow-sm);

    position:
        relative;

    overflow:
        hidden;
}

.stat-card::after {
    content:
        "";

    position:
        absolute;

    right:
        -30px;

    bottom:
        -30px;

    width:
        100px;

    height:
        100px;

    border-radius:
        50%;

    background:
        rgba(212,175,55,.07);
}

.stat-card h3 {
    color:
        var(--muted);

    font-size:
        13px;

    font-weight:
        600;
}

.stat-card h2 {
    font-size:
        34px;

    color:
        var(--gold-dark);

    margin-top:
        10px;
}

.stat-card p {
    font-size:
        32px;

    font-weight:
        800;

    color:
        var(--dark);

    margin-top:
        8px;
}

.stat-card-icon {
    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        var(--cream);

    font-size:
        21px;

    margin-bottom:
        15px;
}


/* =========================================================
   13. DASHBOARD GRID
   ========================================================= */

.dashboard-grid {
    display:
        grid;

    grid-template-columns:
        2fr 1fr;

    gap:
        25px;

    margin-bottom:
        25px;
}


/* =========================================================
   14. CMS CARD
   ========================================================= */

.cms-card {
    background:
        white;

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

    border-radius:
        var(--radius);

    padding:
        25px;

    box-shadow:
        var(--shadow-sm);

    margin-bottom:
        25px;
}

.cms-card-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        20px;
}

.cms-card-header h2,
.cms-card-header h3 {
    font-size:
        18px;

    color:
        var(--dark);
}

.cms-card-header p {
    color:
        var(--muted);

    font-size:
        12px;
}


/* =========================================================
   15. CHART CONTAINER
   ========================================================= */

.chart-container {
    position:
        relative;

    width:
        100%;

    min-height:
        320px;
}

.chart-container canvas {
    width:
        100% !important;

    max-height:
        350px;
}


/* =========================================================
   16. CHART GRID
   ========================================================= */

.chart-grid {
    display:
        grid;

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

    gap:
        25px;

    margin-bottom:
        25px;
}


/* =========================================================
   17. QUICK ACTIONS
   ========================================================= */

.quick-actions {
    display:
        grid;

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

    gap:
        18px;

    margin-bottom:
        30px;
}

.action-card {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    background:
        white;

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

    border-radius:
        var(--radius);

    padding:
        20px;

    color:
        var(--dark);

    font-weight:
        700;

    box-shadow:
        var(--shadow-sm);

    transition:
        var(--transition);
}

.action-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--gold);

    box-shadow:
        var(--shadow);
}

.action-icon {
    width:
        45px;

    height:
        45px;

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--cream);

    font-size:
        20px;
}


/* =========================================================
   18. TOOLBAR
   ========================================================= */

.toolbar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    flex-wrap:
        wrap;

    margin-bottom:
        20px;
}

.toolbar-left,
.toolbar-right {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;
}


/* =========================================================
   19. SEARCH
   ========================================================= */

.search-box {
    width:
        300px;

    max-width:
        100%;

    padding:
        12px 15px;

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

    border-radius:
        var(--radius-sm);

    background:
        white;

    outline:
        none;
}

.search-box:focus {
    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(212,175,55,.12);
}


/* =========================================================
   20. SELECT / FILTER
   ========================================================= */

.filter-select {
    padding:
        12px 15px;

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

    border-radius:
        var(--radius-sm);

    background:
        white;

    outline:
        none;

    min-width:
        150px;
}

.filter-select:focus {
    border-color:
        var(--gold);
}


/* =========================================================
   21. BUTTON SYSTEM
   ========================================================= */

.btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        none;

    border-radius:
        var(--radius-sm);

    padding:
        11px 18px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        var(--transition);
}

.btn:hover {
    transform:
        translateY(-1px);
}

.btn-primary {
    background:
        var(--gold);

    color:
        white;
}

.btn-primary:hover {
    background:
        var(--gold-dark);
}

.btn-dark {
    background:
        var(--dark);

    color:
        white;
}

.btn-success {
    background:
        var(--green);

    color:
        white;
}

.btn-danger {
    background:
        var(--red);

    color:
        white;
}

.btn-warning {
    background:
        var(--orange);

    color:
        white;
}

.btn-outline {
    background:
        white;

    color:
        var(--dark);

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

.btn-outline:hover {
    border-color:
        var(--gold);

    color:
        var(--gold-dark);
}

.btn-small {
    padding:
        7px 11px;

    font-size:
        11px;
}


/* =========================================================
   22. TABLE
   ========================================================= */

.table-wrapper {
    width:
        100%;

    overflow-x:
        auto;

    background:
        white;

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow-sm);
}

table {
    width:
        100%;

    border-collapse:
        collapse;

    min-width:
        750px;
}

thead {
    background:
        #fafafa;
}

th {
    text-align:
        left;

    padding:
        15px;

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        .5px;

    color:
        var(--muted);

    border-bottom:
        1px solid var(--border);
}

td {
    padding:
        15px;

    font-size:
        13px;

    color:
        var(--text);

    border-bottom:
        1px solid #f0f0f0;
}

tbody tr {
    transition:
        background var(--transition);
}

tbody tr:hover {
    background:
        #fffdf8;
}

tbody tr:last-child td {
    border-bottom:
        none;
}


/* =========================================================
   23. TABLE USER
   ========================================================= */

.user-cell {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.avatar {
    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    background:
        var(--cream);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        800;

    color:
        var(--gold-dark);

    flex-shrink:
        0;
}

.user-info strong {
    display:
        block;

    font-size:
        13px;
}

.user-info small {
    display:
        block;

    color:
        var(--muted);

    font-size:
        11px;
}


/* =========================================================
   24. STATUS BADGES
   ========================================================= */

.status {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px 10px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;
}

.status-active {
    background:
        var(--green-light);

    color:
        var(--green);
}

.status-pending {
    background:
        var(--orange-light);

    color:
        var(--orange);
}

.status-inactive {
    background:
        #eeeeee;

    color:
        #777;
}

.status-danger {
    background:
        var(--red-light);

    color:
        var(--red);
}

.status-info {
    background:
        var(--blue-light);

    color:
        var(--blue);
}


/* =========================================================
   25. ARTICLE CARDS
   ========================================================= */

.article-grid {
    display:
        grid;

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

    gap:
        20px;
}

.article-card {
    background:
        white;

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

    border-radius:
        var(--radius);

    overflow:
        hidden;

    box-shadow:
        var(--shadow-sm);

    transition:
        var(--transition);
}

.article-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow);
}

.article-image {
    width:
        100%;

    height:
        190px;

    object-fit:
        cover;

    background:
        var(--cream);
}

.article-content {
    padding:
        20px;
}

.article-category {
    color:
        var(--gold-dark);

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}

.article-content h3 {
    font-size:
        17px;

    margin:
        8px 0;
}

.article-content p {
    color:
        var(--muted);

    font-size:
        12px;

    display:
        -webkit-box;

    -webkit-line-clamp:
        3;

    line-clamp:
        3;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;
}

.article-meta {
    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-size:
        10px;

    margin-top:
        15px;
}


/* =========================================================
   26. PRODUCT ADMIN CARDS
   ========================================================= */

.product-admin-grid {
    display:
        grid;

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

    gap:
        20px;
}

.product-admin-card {
    background:
        white;

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

    border-radius:
        var(--radius);

    overflow:
        hidden;

    box-shadow:
        var(--shadow-sm);
}

.product-admin-image {
    width:
        100%;

    height:
        220px;

    object-fit:
        cover;

    background:
        var(--cream);
}

.product-admin-info {
    padding:
        20px;
}

.product-admin-info h3 {
    font-size:
        18px;

    margin-bottom:
        6px;
}

.product-admin-info p {
    color:
        var(--muted);

    font-size:
        12px;
}

.product-admin-bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        15px;
}

.product-price {
    font-size:
        18px;

    font-weight:
        800;

    color:
        var(--gold-dark);
}


/* =========================================================
   27. FORM CARD
   ========================================================= */

.form-card {
    background:
        white;

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

    border-radius:
        var(--radius);

    padding:
        30px;

    box-shadow:
        var(--shadow-sm);
}

.form-grid {
    display:
        grid;

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

    gap:
        20px;
}

.form-group {
    margin-bottom:
        18px;
}

.form-group.full {
    grid-column:
        1 / -1;
}

.form-group label {
    display:
        block;

    margin-bottom:
        7px;

    font-size:
        12px;

    font-weight:
        700;

    color:
        var(--dark);
}

.form-control {
    width:
        100%;

    padding:
        12px 14px;

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

    border-radius:
        var(--radius-sm);

    background:
        white;

    color:
        var(--text);

    outline:
        none;

    transition:
        var(--transition);
}

.form-control:focus {
    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(212,175,55,.12);
}

textarea.form-control {
    min-height:
        130px;

    resize:
        vertical;
}


/* =========================================================
   28. EDITOR
   ========================================================= */

.editor-wrapper {
    background:
        white;

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

    border-radius:
        var(--radius);

    overflow:
        hidden;
}

.editor-toolbar {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    flex-wrap:
        wrap;

    padding:
        10px;

    background:
        #fafafa;

    border-bottom:
        1px solid var(--border);
}

.editor-toolbar button {
    width:
        34px;

    height:
        34px;

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

    background:
        white;

    border-radius:
        6px;
}

.editor-toolbar button:hover {
    border-color:
        var(--gold);

    color:
        var(--gold-dark);
}

.editor-content {
    min-height:
        400px;

    padding:
        25px;

    outline:
        none;

    line-height:
        1.8;
}


/* =========================================================
   29. IMAGE UPLOAD
   ========================================================= */

.upload-box {
    border:
        2px dashed
        var(--border);

    border-radius:
        var(--radius);

    padding:
        35px;

    text-align:
        center;

    background:
        #fcfcfc;

    transition:
        var(--transition);
}

.upload-box:hover {
    border-color:
        var(--gold);

    background:
        #fffdf8;
}

.upload-icon {
    font-size:
        35px;

    margin-bottom:
        10px;
}

.upload-box p {
    color:
        var(--muted);

    font-size:
        13px;

    margin-bottom:
        15px;
}


/* =========================================================
   30. SETTINGS
   ========================================================= */

.settings-grid {
    display:
        grid;

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

    gap:
        25px;
}

.settings-section {
    background:
        white;

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

    border-radius:
        var(--radius);

    padding:
        25px;

    box-shadow:
        var(--shadow-sm);
}

.settings-section h2 {
    font-size:
        18px;

    margin-bottom:
        20px;

    color:
        var(--dark);
}

.settings-section.full {
    grid-column:
        1 / -1;
}


/* =========================================================
   31. COLOR PICKER
   ========================================================= */

.color-row {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;
}

.color-input {
    width:
        100%;

    height:
        45px;

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

    border-radius:
        var(--radius-sm);

    background:
        white;

    cursor:
        pointer;
}


/* =========================================================
   32. CHECKBOX / TOGGLE
   ========================================================= */

.checkbox-row {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        12px 0;

    font-size:
        13px;
}

.checkbox-row input {
    accent-color:
        var(--gold);
}


/* =========================================================
   33. ANALYTICS METRICS
   ========================================================= */

.analytics-grid {
    display:
        grid;

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

    gap:
        20px;

    margin-bottom:
        25px;
}

.analytics-card {
    background:
        white;

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

    border-radius:
        var(--radius);

    padding:
        22px;

    box-shadow:
        var(--shadow-sm);
}

.analytics-card small {
    color:
        var(--muted);

    font-size:
        11px;
}

.analytics-value {
    font-size:
        30px;

    font-weight:
        800;

    margin:
        7px 0;
}

.analytics-change {
    font-size:
        11px;

    font-weight:
        700;
}

.change-up {
    color:
        var(--green);
}

.change-down {
    color:
        var(--red);
}


/* =========================================================
   34. PROGRESS BAR
   ========================================================= */

.progress {
    width:
        100%;

    height:
        9px;

    background:
        #eeeeee;

    border-radius:
        999px;

    overflow:
        hidden;
}

.progress-fill {
    height:
        100%;

    width:
        0%;

    background:
        var(--gold);

    border-radius:
        inherit;

    transition:
        width .5s ease;
}

.progress-info {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        7px;

    font-size:
        12px;
}


/* =========================================================
   35. EMPTY STATE
   ========================================================= */

.empty-state {
    padding:
        60px 20px;

    text-align:
        center;

    color:
        var(--muted);
}

.empty-state-icon {
    font-size:
        45px;

    margin-bottom:
        12px;
}

.empty-state h3 {
    color:
        var(--dark);

    margin-bottom:
        5px;
}

.empty-state p {
    font-size:
        13px;
}


/* =========================================================
   36. ALERT / MESSAGE
   ========================================================= */

.message {
    padding:
        13px 16px;

    border-radius:
        var(--radius-sm);

    font-size:
        13px;

    margin:
        15px 0;
}

.message-success {
    background:
        var(--green-light);

    color:
        var(--green);
}

.message-error {
    background:
        var(--red-light);

    color:
        var(--red);
}

.message-warning {
    background:
        var(--orange-light);

    color:
        var(--orange);
}

.message-info {
    background:
        var(--blue-light);

    color:
        var(--blue);
}


/* =========================================================
   37. MODAL
   ========================================================= */

.modal {
    position:
        fixed;

    inset:
        0;

    background:
        rgba(0,0,0,.55);

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    z-index:
        3000;
}

.modal.active {
    display:
        flex;
}

.modal-content {
    position:
        relative;

    width:
        min(650px, 100%);

    max-height:
        90vh;

    overflow-y:
        auto;

    background:
        white;

    border-radius:
        var(--radius-lg);

    padding:
        30px;

    box-shadow:
        var(--shadow-lg);
}

.modal-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        20px;
}

.modal-header h2 {
    font-size:
        20px;
}

.close-modal {
    width:
        35px;

    height:
        35px;

    border:
        none;

    background:
        #f5f5f5;

    border-radius:
        50%;

    font-size:
        20px;
}


/* =========================================================
   38. PAGINATION
   ========================================================= */

.pagination {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        25px;
}

.pagination button {
    width:
        36px;

    height:
        36px;

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

    background:
        white;

    border-radius:
        7px;

    font-size:
        12px;
}

.pagination button:hover,
.pagination button.active {
    background:
        var(--gold);

    color:
        white;

    border-color:
        var(--gold);
}


/* =========================================================
   39. DROPDOWN
   ========================================================= */

.dropdown {
    position:
        relative;
}

.dropdown-menu {
    position:
        absolute;

    top:
        calc(100% + 8px);

    right:
        0;

    min-width:
        180px;

    background:
        white;

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

    border-radius:
        var(--radius-sm);

    box-shadow:
        var(--shadow-lg);

    padding:
        7px;

    display:
        none;

    z-index:
        1500;
}

.dropdown.open
.dropdown-menu {
    display:
        block;
}

.dropdown-menu a,
.dropdown-menu button {
    width:
        100%;

    display:
        block;

    text-align:
        left;

    padding:
        10px;

    border:
        none;

    background:
        transparent;

    color:
        var(--text);

    border-radius:
        6px;

    font-size:
        12px;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover {
    background:
        var(--cream);
}


/* =========================================================
   40. NOTIFICATION
   ========================================================= */

.notification {
    position:
        fixed;

    top:
        90px;

    right:
        25px;

    width:
        min(350px, calc(100% - 40px));

    background:
        white;

    border-left:
        4px solid var(--gold);

    border-radius:
        var(--radius-sm);

    padding:
        15px;

    box-shadow:
        var(--shadow-lg);

    z-index:
        4000;

    animation:
        slideIn .3s ease;
}

.notification.success {
    border-left-color:
        var(--green);
}

.notification.error {
    border-left-color:
        var(--red);
}

@keyframes slideIn {

    from {
        transform:
            translateX(30px);

        opacity:
            0;
    }

    to {
        transform:
            translateX(0);

        opacity:
            1;
    }

}


/* =========================================================
   41. LOADING
   ========================================================= */

.loading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        50px;
}

.spinner {
    width:
        38px;

    height:
        38px;

    border:
        4px solid #eee;

    border-top-color:
        var(--gold);

    border-radius:
        50%;

    animation:
        spin .8s linear infinite;
}

@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   42. IMAGE PREVIEW
   ========================================================= */

.image-preview {
    width:
        100%;

    max-width:
        300px;

    border-radius:
        var(--radius);

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

    margin-top:
        15px;

    overflow:
        hidden;
}

.image-preview img {
    width:
        100%;

    height:
        200px;

    object-fit:
        cover;
}


/* =========================================================
   43. DASHBOARD RECENT ACTIVITY
   ========================================================= */

.activity-list {
    display:
        grid;

    gap:
        5px;
}

.activity-item {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px 5px;

    border-bottom:
        1px solid #f0f0f0;
}

.activity-item:last-child {
    border-bottom:
        none;
}

.activity-icon {
    width:
        38px;

    height:
        38px;

    border-radius:
        10px;

    background:
        var(--cream);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.activity-info {
    flex:
        1;
}

.activity-info strong {
    display:
        block;

    font-size:
        12px;
}

.activity-info small {
    color:
        var(--muted);

    font-size:
        10px;
}


/* =========================================================
   44. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

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

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

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

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

    .dashboard-grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   45. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --sidebar-width:
            0px;
    }

    .topbar {
        padding:
            0 15px;
    }

    .logo {
        font-size:
            19px;
    }

    .logout-btn {
        padding:
            9px 13px;

        font-size:
            12px;
    }

    .layout {
        display:
            block;
    }

    /* Mobile sidebar */

    .sidebar {
        position:
            fixed;

        top:
            var(--topbar-height);

        left:
            0;

        right:
            0;

        bottom:
            auto;

        width:
            100%;

        height:
            auto;

        display:
            flex;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        padding:
            0;

        z-index:
            950;
    }

    .sidebar-title {
        display:
            none;
    }

    .sidebar a {
        flex:
            0 0 auto;

        padding:
            13px 16px;

        font-size:
            11px;

        border-left:
            none;

        border-bottom:
            3px solid transparent;
    }

    .sidebar a.active {
        border-left:
            none;

        border-bottom:
            3px solid white;
    }

    /* Content */

    .content {
        margin-left:
            0;

        width:
            100%;

        padding:
            105px 15px 30px;
    }

    .page-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .page-header h1 {
        font-size:
            25px;
    }

    .stats-grid,
    .analytics-grid {
        grid-template-columns:
            1fr 1fr;

        gap:
            12px;
    }

    .stat-card {
        padding:
            18px;
    }

    .stat-card p {
        font-size:
            25px;
    }

    .quick-actions {
        grid-template-columns:
            1fr 1fr;

        gap:
            12px;
    }

    .action-card {
        padding:
            15px;

        font-size:
            12px;
    }

    .chart-grid {
        grid-template-columns:
            1fr;
    }

    .article-grid,
    .product-admin-grid {
        grid-template-columns:
            1fr;
    }

    .settings-grid {
        grid-template-columns:
            1fr;
    }

    .settings-section.full {
        grid-column:
            auto;
    }

    .form-grid {
        grid-template-columns:
            1fr;
    }

    .form-group.full {
        grid-column:
            auto;
    }

    .toolbar {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .toolbar-left,
    .toolbar-right {
        width:
            100%;
    }

    .search-box {
        width:
            100%;
    }

}


/* =========================================================
   46. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .stats-grid,
    .analytics-grid,
    .quick-actions {
        grid-template-columns:
            1fr;
    }

    .topbar-actions {
        gap:
            5px;
    }

    .topbar-icon {
        display:
            none;
    }

    .cms-card,
    .form-card,
    .settings-section {
        padding:
            18px;
    }

    .page-header h1 {
        font-size:
            22px;
    }

    .btn {
        padding:
            10px 13px;

        font-size:
            11px;
    }

}


/* =========================================================
   47. ACCESSIBILITY
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        3px solid
        rgba(212,175,55,.35);

    outline-offset:
        2px;
}


/* =========================================================
   48. REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

}

/* =========================================================
   EMERRIMENT
   PHASE 5 — RESPONSIVE CLEANUP
   Mobile • Tablet • Laptop • Desktop • Large Screens

   IMPORTANT:
   Load this stylesheet AFTER your normal CSS files.
   ========================================================= */


/* =========================================================
   1. GLOBAL RESPONSIVE FOUNDATION
   ========================================================= */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    max-width: 100%;
}

img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
}


/* Prevent long text from breaking layouts */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
td,
th {
    overflow-wrap: break-word;
}


/* =========================================================
   2. RESPONSIVE CONTAINER
   ========================================================= */

.container {
    width: min(1200px, calc(100% - 40px));

    margin-left: auto;
    margin-right: auto;
}

.container-wide {
    width: min(1400px, calc(100% - 40px));

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   3. FLUID TYPOGRAPHY
   ========================================================= */

h1 {
    font-size: clamp(2rem, 4vw, 4rem);
}

h2 {
    font-size: clamp(1.6rem, 3vw, 3rem);
}

h3 {
    font-size: clamp(1.2rem, 2vw, 2rem);
}

p {
    font-size: clamp(.9rem, 1.2vw, 1rem);
}


/* =========================================================
   4. RESPONSIVE GRIDS
   ========================================================= */

.grid {
    display: grid;
}

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

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================================================
   5. FLEXIBLE SECTIONS
   ========================================================= */

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-small {
    gap: 10px;
}

.gap-medium {
    gap: 20px;
}

.gap-large {
    gap: 30px;
}


/* =========================================================
   6. RESPONSIVE IMAGES
   ========================================================= */

img {
    height: auto;
}

.image-responsive {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* =========================================================
   7. RESPONSIVE BUTTONS
   ========================================================= */

button,
.btn,
a.button,
.cta-button {
    min-height: 44px;
}

button,
.btn {
    max-width: 100%;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* =========================================================
   8. DESKTOP
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    .container {
        width: min(1200px, calc(100% - 60px));
    }

    .container-wide {
        width: min(1400px, calc(100% - 60px));
    }

}


/* =========================================================
   9. LARGE TABLETS / SMALL LAPTOPS
   992px — 1199px
   ========================================================= */

@media (max-width: 1199px) {

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

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

    .container,
    .container-wide {
        width:
            calc(100% - 40px);
    }


    /* Hero */

    .hero {
        min-height:
            650px;
    }

    .hero-content {
        max-width:
            650px;
    }


    /* Navigation */

    .nav-links {
        gap:
            18px;
    }


    /* Product grids */

    .products-grid,
    .product-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    /* Article grids */

    .articles-grid,
    .article-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   10. TABLET
   768px — 991px
   ========================================================= */

@media (max-width: 991px) {

    .container,
    .container-wide {
        width:
            calc(100% - 32px);
    }


    /* ==============================
       NAVIGATION
       ============================== */

    .nav-links {
        gap:
            14px;
    }

    .nav-links a {
        font-size:
            13px;
    }


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

    .hero {
        min-height:
            600px;

        padding:
            90px 0;
    }

    .hero-content {
        max-width:
            600px;
    }


    /* ==============================
       TWO COLUMN SECTIONS
       ============================== */

    .two-column,
    .split-section,
    .about-grid,
    .feature-grid {
        grid-template-columns:
            1fr 1fr;
    }


    /* ==============================
       PRODUCTS
       ============================== */

    .products-grid,
    .product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* ==============================
       ARTICLES
       ============================== */

    .articles-grid,
    .article-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* ==============================
       CARDS
       ============================== */

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


    /* ==============================
       DASHBOARD
       ============================== */

    .dashboard-grid {
        grid-template-columns:
            1fr;
    }

    .stats-grid,
    .analytics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* ==============================
       CMS
       ============================== */

    .quick-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .chart-grid {
        grid-template-columns:
            1fr;
    }


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

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

}


/* =========================================================
   11. MOBILE
   767px AND BELOW
   ========================================================= */

@media (max-width: 767px) {

    /* ==============================
       GLOBAL
       ============================== */

    body {
        font-size:
            15px;
    }

    .container,
    .container-wide {
        width:
            calc(100% - 30px);
    }


    /* ==============================
       TYPOGRAPHY
       ============================== */

    h1 {
        font-size:
            clamp(2rem, 10vw, 3rem);

        line-height:
            1.1;
    }

    h2 {
        font-size:
            clamp(1.6rem, 8vw, 2.3rem);

        line-height:
            1.15;
    }

    h3 {
        font-size:
            1.25rem;
    }

    p {
        line-height:
            1.7;
    }


    /* ==============================
       NAVIGATION
       ============================== */

    .navbar,
    .nav,
    header {
        width:
            100%;
    }

    .nav-container {
        padding:
            12px 15px;
    }

    .nav-links {
        display:
            none;
    }

    .mobile-menu-btn {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;
    }

    .mobile-menu {
        width:
            100%;

        position:
            absolute;

        top:
            100%;

        left:
            0;

        background:
            white;

        padding:
            20px;
    }

    .mobile-menu a {
        display:
            block;

        padding:
            12px 0;
    }


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

    .hero {
        min-height:
            auto;

        padding:
            80px 0 60px;

        text-align:
            center;
    }

    .hero-content {
        width:
            100%;

        max-width:
            100%;
    }

    .hero-buttons {
        flex-direction:
            column;

        align-items:
            stretch;

        width:
            100%;
    }

    .hero-buttons a,
    .hero-buttons button {
        width:
            100%;
    }

    .hero-image {
        margin-top:
            40px;

        max-height:
            400px;

        object-fit:
            cover;
    }


    /* ==============================
       GENERAL SECTIONS
       ============================== */

    section {
        padding-top:
            60px;

        padding-bottom:
            60px;
    }

    .section-header {
        text-align:
            center;

        margin-bottom:
            30px;
    }


    /* ==============================
       GRIDS → ONE COLUMN
       ============================== */

    .grid-2,
    .grid-3,
    .grid-4,

    .two-column,
    .split-section,
    .about-grid,
    .feature-grid,

    .products-grid,
    .product-grid,

    .articles-grid,
    .article-grid,

    .cards,

    .footer-grid {
        grid-template-columns:
            1fr !important;
    }


    /* ==============================
       FLEX → STACK
       ============================== */

    .stack-mobile {
        flex-direction:
            column;
    }

    .flex-mobile-column {
        flex-direction:
            column;
    }


    /* ==============================
       PRODUCT CARDS
       ============================== */

    .product-card {
        width:
            100%;
    }

    .product-card img {
        max-height:
            350px;

        object-fit:
            cover;
    }


    /* ==============================
       ARTICLE
       ============================== */

    .article-content {
        padding:
            20px 0;
    }

    .article-image {
        width:
            100%;

        max-height:
            350px;

        object-fit:
            cover;
    }


    /* ==============================
       FORMS
       ============================== */

    form {
        width:
            100%;
    }

    input,
    textarea,
    select {
        width:
            100%;

        max-width:
            100%;
    }

    .form-row {
        flex-direction:
            column;

        gap:
            15px;
    }

    .form-grid {
        grid-template-columns:
            1fr !important;
    }


    /* ==============================
       BUTTONS
       ============================== */

    .button-group {
        flex-direction:
            column;

        width:
            100%;
    }

    .button-group button,
    .button-group .btn,
    .button-group a {
        width:
            100%;
    }


    /* ==============================
       TABLES
       ============================== */

    .table-wrapper,
    .table-responsive {
        width:
            100%;

        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }

    table {
        min-width:
            650px;
    }


    /* ==============================
       MODALS
       ============================== */

    .modal {
        padding:
            15px;
    }

    .modal-content {
        width:
            100%;

        max-height:
            90vh;

        padding:
            20px;
    }


    /* ==============================
       DASHBOARD
       ============================== */

    .stats-grid,
    .analytics-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .dashboard-grid {
        grid-template-columns:
            1fr;
    }

    .chart-grid {
        grid-template-columns:
            1fr;
    }


    /* ==============================
       CMS SIDEBAR
       ============================== */

    .sidebar {
        width:
            100%;

        overflow-x:
            auto;

        white-space:
            nowrap;
    }

    .sidebar a {
        flex:
            0 0 auto;
    }

    .content {
        width:
            100%;

        margin-left:
            0;
    }


    /* ==============================
       CMS CARDS
       ============================== */

    .article-grid,
    .product-admin-grid {
        grid-template-columns:
            1fr;
    }

    .settings-grid {
        grid-template-columns:
            1fr;
    }

    .quick-actions {
        grid-template-columns:
            1fr 1fr;
    }


    /* ==============================
       SEARCH TOOLBAR
       ============================== */

    .toolbar {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .toolbar-left,
    .toolbar-right {
        width:
            100%;
    }

    .search-box {
        width:
            100%;

        max-width:
            none;
    }


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

    footer {
        text-align:
            center;
    }

    .footer-links {
        justify-content:
            center;
    }

}


/* =========================================================
   12. SMALL PHONES
   480px AND BELOW
   ========================================================= */

@media (max-width: 480px) {

    .container,
    .container-wide {
        width:
            calc(100% - 24px);
    }


    /* ==============================
       TYPOGRAPHY
       ============================== */

    h1 {
        font-size:
            2rem;
    }

    h2 {
        font-size:
            1.65rem;
    }


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

    .hero {
        padding:
            65px 0 50px;
    }


    /* ==============================
       STATS
       ============================== */

    .stats-grid,
    .analytics-grid {
        grid-template-columns:
            1fr;
    }


    /* ==============================
       CMS QUICK ACTIONS
       ============================== */

    .quick-actions {
        grid-template-columns:
            1fr;
    }


    /* ==============================
       CARDS
       ============================== */

    .card,
    .cms-card,
    .stat-card,
    .form-card,
    .settings-section {
        border-radius:
            12px;

        padding:
            17px;
    }


    /* ==============================
       TOPBAR
       ============================== */

    .topbar {
        padding:
            0 12px;
    }

    .logo {
        font-size:
            18px;
    }

    .logout-btn {
        padding:
            8px 11px;

        font-size:
            11px;
    }


    /* ==============================
       NAVIGATION
       ============================== */

    .nav-container {
        padding:
            10px 12px;
    }


    /* ==============================
       IMAGES
       ============================== */

    .hero-image,
    .article-image,
    .product-image {
        max-height:
            300px;
    }


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

    .modal-content {
        padding:
            17px;

        border-radius:
            14px;
    }

}


/* =========================================================
   13. EXTRA SMALL DEVICES
   360px AND BELOW
   ========================================================= */

@media (max-width: 360px) {

    .container,
    .container-wide {
        width:
            calc(100% - 20px);
    }

    h1 {
        font-size:
            1.8rem;
    }

    h2 {
        font-size:
            1.5rem;
    }

    .btn,
    button {
        font-size:
            12px;
    }

    .topbar {
        height:
            60px;
    }

}


/* =========================================================
   14. LANDSCAPE MOBILE
   ========================================================= */

@media (max-width: 767px) and (orientation: landscape) {

    .hero {
        min-height:
            auto;

        padding:
            50px 0;
    }

    .modal-content {
        max-height:
            85vh;
    }

}


/* =========================================================
   15. TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    button,
    a,
    input,
    select,
    textarea {
        min-height:
            44px;
    }

    .action-card:hover,
    .article-card:hover,
    .product-card:hover {
        transform:
            none;
    }

}


/* =========================================================
   16. SAFE AREA — MODERN PHONES
   ========================================================= */

@supports (padding: env(safe-area-inset-bottom)) {

    body {
        padding-bottom:
            env(safe-area-inset-bottom);
    }

}


/* =========================================================
   17. PREVENT HORIZONTAL OVERFLOW
   ========================================================= */

section,
header,
footer,
main,
nav,
article,
aside {
    max-width:
        100%;
}

.row,
.flex-row {
    max-width:
        100%;
}


/* =========================================================
   18. RESPONSIVE VISIBILITY HELPERS
   ========================================================= */

.desktop-only {
    display:
        block;
}

.mobile-only {
    display:
        none;
}

@media (max-width: 767px) {

    .desktop-only {
        display:
            none !important;
    }

    .mobile-only {
        display:
            block !important;
    }

}


/* =========================================================
   19. ACCESSIBILITY
   ========================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

}


/* =========================================================
   20. PRINT
   ========================================================= */

@media print {

    .sidebar,
    .topbar,
    .logout-btn,
    .mobile-menu-btn,
    .button-group {
        display:
            none !important;
    }

    .content {
        margin:
            0 !important;

        width:
            100% !important;

        padding:
            0 !important;
    }

    body {
        background:
            white;
    }

}

/* =========================================================
   EMERRIMENT
   PHASE 6 — REMOVE OBSOLETE VISUAL CODE

   Purpose:
   - Remove excessive glow effects
   - Remove obsolete neon styling
   - Remove unnecessary animations
   - Remove old floating effects
   - Reduce visual noise
   - Keep the website clean and premium
   - Preserve EMerriment's natural skincare identity

   IMPORTANT:
   Load AFTER responsive.css
   ========================================================= */


/* =========================================================
   1. GLOBAL VISUAL RESET
   ========================================================= */

*,
*::before,
*::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}


/* Remove unnecessary smooth scrolling */

html {
    scroll-behavior: auto;
}


/* =========================================================
   2. REMOVE OLD GLOW EFFECTS
   ========================================================= */

/* Text glow */

.glow,
.text-glow,
.neon-text,
.glowing-text,
.gold-glow {
    text-shadow: none !important;
}


/* Box glow */

.glow-card,
.glowing-card,
.neon-card,
.gold-glow-card {
    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.08) !important;
}


/* Button glow */

.glow-button,
.glowing-button,
.neon-button {
    box-shadow:
        none !important;

    text-shadow:
        none !important;
}


/* Image glow */

.glow-image,
.glowing-image {
    filter:
        none !important;

    box-shadow:
        none !important;
}


/* =========================================================
   3. REMOVE NEON EFFECTS
   ========================================================= */

.neon,
.neon-effect,
.cyber-glow,
.futuristic-glow,
.tech-glow {
    text-shadow:
        none !important;

    box-shadow:
        none !important;

    filter:
        none !important;
}


/* =========================================================
   4. REMOVE PULSING EFFECTS
   ========================================================= */

.pulse,
.pulsing,
.pulse-effect,
.glow-pulse,
.gold-pulse {
    animation:
        none !important;
}


/* =========================================================
   5. REMOVE FLOATING EFFECTS
   ========================================================= */

.float,
.floating,
.float-animation,
.floating-card,
.floating-image {
    animation:
        none !important;

    transform:
        none !important;
}


/* =========================================================
   6. REMOVE ROTATION ANIMATIONS
   ========================================================= */

.rotate,
.rotate-animation,
.spin,
.spinning {
    animation:
        none !important;

    transform:
        none !important;
}


/* =========================================================
   7. REMOVE SHIMMER EFFECTS
   ========================================================= */

.shimmer,
.shimmer-effect,
.loading-shimmer {
    animation:
        none !important;

    background-image:
        none !important;
}


/* =========================================================
   8. REMOVE GRADIENT ANIMATION
   ========================================================= */

.gradient-animation,
.animated-gradient,
.gradient-glow {
    animation:
        none !important;
}


/* =========================================================
   9. REMOVE PARTICLE / BACKGROUND ANIMATIONS
   ========================================================= */

.particles,
.particle-background,
.animated-background,
.background-animation,
.floating-particles {
    animation:
        none !important;

    transform:
        none !important;
}


/* =========================================================
   10. REMOVE OLD HOVER GLOW
   ========================================================= */

.glow-hover:hover,
.neon-hover:hover,
.gold-glow:hover,
.glowing:hover {
    box-shadow:
        none !important;

    text-shadow:
        none !important;

    filter:
        none !important;
}


/* =========================================================
   11. CLEAN CARD DESIGN
   ========================================================= */

.card,
.product-card,
.article-card,
.feature-card,
.info-card,
.stat-card,
.action-card,
.cms-card {

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.07);

    text-shadow:
        none;

    filter:
        none;
}


/* Keep card hover subtle */

.card:hover,
.product-card:hover,
.article-card:hover,
.feature-card:hover,
.info-card:hover,
.stat-card:hover,
.action-card:hover,
.cms-card:hover {

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.10);

    transform:
        translateY(-2px);
}


/* =========================================================
   12. CLEAN BUTTONS
   ========================================================= */

button,
.btn,
.cta-button,
.button {

    text-shadow:
        none !important;

    filter:
        none !important;

    box-shadow:
        none;
}


/* Subtle hover instead of glowing */

button:hover,
.btn:hover,
.cta-button:hover,
.button:hover {

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   13. REMOVE EXCESSIVE IMAGE FILTERS
   ========================================================= */

img {
    filter:
        none;
}


/* Explicitly remove old visual filters */

.image-glow,
.image-effect,
.image-filter,
.bright-image {
    filter:
        none !important;
}


/* =========================================================
   14. REMOVE TEXT ANIMATIONS
   ========================================================= */

.text-animation,
.text-glow-animation,
.typing-effect,
.typewriter,
.fade-text,
.text-pulse {

    animation:
        none !important;
}


/* =========================================================
   15. REMOVE OLD HERO EFFECTS
   ========================================================= */

.hero-glow,
.hero-neon,
.hero-light,
.hero-particles,
.hero-animation {

    animation:
        none !important;

    box-shadow:
        none !important;

    filter:
        none !important;
}


/* Keep hero visually clean */

.hero {
    text-shadow:
        none;
}


/* =========================================================
   16. REMOVE DECORATIVE GLOW ELEMENTS
   ========================================================= */

.glow-circle,
.glow-orb,
.neon-circle,
.light-orb,
.floating-orb {

    display:
        none !important;
}


/* =========================================================
   17. REMOVE OLD BACKGROUND EFFECTS
   ========================================================= */

.animated-bg,
.glowing-bg,
.neon-bg,
.particle-bg,
.gradient-bg-animation {

    background-image:
        none !important;

    animation:
        none !important;
}


/* =========================================================
   18. CLEAN SECTION BACKGROUNDS
   ========================================================= */

section {

    background-image:
        none;
}


/* =========================================================
   19. CLEAN MODALS
   ========================================================= */

.modal,
.modal-content {

    text-shadow:
        none;

    filter:
        none;
}


/* =========================================================
   20. CLEAN DASHBOARD
   ========================================================= */

.dashboard-card,
.dashboard-widget,
.analytics-card,
.stats-card {

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.07);

    text-shadow:
        none;

    filter:
        none;
}


/* =========================================================
   21. CLEAN CMS
   ========================================================= */

.topbar,
.sidebar,
.content,
.stat-card,
.action-card {

    text-shadow:
        none;

    filter:
        none;
}


/* =========================================================
   22. CLEAN CHART CONTAINERS
   ========================================================= */

.chart-card,
.chart-container {

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.07);

    filter:
        none;
}


/* =========================================================
   23. REMOVE EXCESSIVE BORDER GLOW
   ========================================================= */

.glow-border,
.neon-border,
.gold-border-glow {

    border:
        1px solid rgba(212, 175, 55, 0.25) !important;

    box-shadow:
        none !important;
}


/* =========================================================
   24. CLEAN INPUTS
   ========================================================= */

input,
textarea,
select {

    text-shadow:
        none;

    filter:
        none;
}


/* Remove old glowing focus */

input:focus,
textarea:focus,
select:focus {

    box-shadow:
        0 0 0 2px rgba(212, 175, 55, 0.20) !important;
}


/* =========================================================
   25. REMOVE OLD LINK GLOW
   ========================================================= */

a {

    text-shadow:
        none;
}

a:hover {

    text-shadow:
        none;
}


/* =========================================================
   26. REMOVE OLD LOGO GLOW
   ========================================================= */

.logo,
.logo span,
.brand-logo {

    text-shadow:
        none !important;

    filter:
        none !important;
}


/* =========================================================
   27. REMOVE OLD ICON GLOW
   ========================================================= */

.icon-glow,
.glowing-icon,
.neon-icon {

    filter:
        none !important;

    text-shadow:
        none !important;

    box-shadow:
        none !important;
}


/* =========================================================
   28. REMOVE OLD LOADING ANIMATIONS
   ========================================================= */

.loading,
.loader,
.loading-animation,
.spinner-animation {

    animation:
        none !important;
}


/* Keep loaders functional if needed */

.spinner {

    animation:
        spin 1s linear infinite !important;
}


/* =========================================================
   29. REMOVE OLD TRANSFORM EFFECTS
   ========================================================= */

.old-hover,
.legacy-hover,
.float-hover {

    transform:
        none !important;
}


/* =========================================================
   30. CLEAN HOVER EFFECTS
   ========================================================= */

.card,
.product-card,
.article-card,
.action-card,
button,
.btn,
a {

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}


/* =========================================================
   31. MOBILE — REMOVE ALL HEAVY VISUAL EFFECTS
   ========================================================= */

@media (max-width: 767px) {

    .card,
    .product-card,
    .article-card,
    .feature-card,
    .action-card {

        box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.06);
    }


    .card:hover,
    .product-card:hover,
    .article-card:hover,
    .feature-card:hover,
    .action-card:hover {

        transform:
            none;

        box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.06);
    }


    button:hover,
    .btn:hover,
    .cta-button:hover {

        box-shadow:
            none;
    }

}


/* =========================================================
   32. PERFORMANCE CLEANUP
   ========================================================= */

.blur-effect,
.background-blur,
.glass-glow {

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    filter:
        none !important;
}


/* =========================================================
   33. REMOVE OBSOLETE PSEUDO-ELEMENT EFFECTS
   ========================================================= */

.glow::before,
.glow::after,
.neon::before,
.neon::after,
.particle-background::before,
.particle-background::after {

    display:
        none !important;

    content:
        none !important;
}


/* =========================================================
   34. REDUCE GPU-HEAVY PROPERTIES
   ========================================================= */

body,
section,
.card,
.product-card,
.article-card,
.hero,
.modal {

    will-change:
        auto;
}


/* =========================================================
   35. ACCESSIBILITY
   ========================================================= */

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

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;
    }

}


/* =========================================================
   36. FINAL EMERRIMENT VISUAL RULE
   ========================================================= */

/*
   EMerriment should feel:

   Natural
   Elegant
   Clean
   Premium
   Trustworthy
   Educational
   Modern

   NOT:

   Neon
   Over-glowing
   Over-animated
   Cyberpunk
   Visually noisy
*/


.glow,
.neon,
.pulse,
.float,
.shimmer,
.cyber-glow,
.tech-glow {

    animation:
        none !important;

    text-shadow:
        none !important;

    filter:
        none !important;
}

/* =========================================================
   EMERRIMENT — GLOBAL READABILITY & WHITE/BLACK OVERRIDE
   Temporary cleanup layer
========================================================= */

:root {
    --black: #000000;
    --white: #ffffff;
    --text: #111111;
    --muted: #555555;
    --border: #e5e5e5;
    --soft: #f7f7f7;
}

/* ---------------------------------------------------------
   BASE
--------------------------------------------------------- */

html,
body {
    background: #ffffff !important;
    color: #111111 !important;
}

body {
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   TEXT
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000000 !important;
    opacity: 1 !important;
}

p,
span,
li,
label,
small,
strong,
em {
    color: #111111 !important;
    opacity: 1 !important;
}

a {
    color: #000000 !important;
}

a:hover {
    color: #333333 !important;
}

/* ---------------------------------------------------------
   REMOVE OLD TEXT EFFECTS
--------------------------------------------------------- */

.gradient-text,
.gradient-text *,
.gradient-heading,
.gradient-heading *,
.text-gradient,
.text-gradient * {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #000000 !important;
    color: #000000 !important;
}

/* ---------------------------------------------------------
   SECTIONS
--------------------------------------------------------- */

section,
main,
article {
    color: #111111 !important;
}

section:not(.dark-section),
main:not(.dark-section) {
    background-color: #ffffff;
}

/* ---------------------------------------------------------
   CARDS
--------------------------------------------------------- */

.card,
.feature-card,
.product-card,
.article-card,
.collection-card,
.info-card,
.learning-card,
.dashboard-card,
.stat-card,
.ai-card {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
}

.card *,
.feature-card *,
.product-card *,
.article-card *,
.collection-card *,
.info-card *,
.learning-card *,
.dashboard-card *,
.stat-card *,
.ai-card * {
    color: #111111 !important;
}

/* ---------------------------------------------------------
   OLD GRADIENT BACKGROUNDS
--------------------------------------------------------- */

.hero,
.hero-section,
.features,
.features-section,
.academy,
.academy-section,
.products,
.products-section,
.articles,
.articles-section,
.cta,
.cta-section {
    background-image: none !important;
}

/* ---------------------------------------------------------
   DARK SECTIONS
--------------------------------------------------------- */

.dark-section,
.dark-section *,
footer.dark,
footer.dark * {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.dark-section a,
footer.dark a {
    color: #ffffff !important;
}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

footer {
    background: #000000 !important;
    color: #ffffff !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p,
footer span,
footer li,
footer a {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

button,
.btn,
.button,
.cta-button,
.primary-btn {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
}

button:hover,
.btn:hover,
.button:hover,
.cta-button:hover,
.primary-btn:hover {
    background: #333333 !important;
    color: #ffffff !important;
}

/* Secondary buttons */

.secondary-btn,
.btn-secondary {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}

/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */

input,
textarea,
select {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #cccccc !important;
}

input::placeholder,
textarea::placeholder {
    color: #777777 !important;
}

/* ---------------------------------------------------------
   ICONS
--------------------------------------------------------- */

.icon,
.feature-icon,
.card-icon {
    color: #000000 !important;
}

/* ---------------------------------------------------------
   REMOVE OLD GLOW EFFECTS
--------------------------------------------------------- */

.glow,
.neon,
.neon-text,
.glow-text {
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* ---------------------------------------------------------
   REMOVE UNREADABLE OPACITY
--------------------------------------------------------- */

.hero *,
section *,
.card *,
.feature-card *,
.product-card *,
.article-card * {
    opacity: 1;
}

/* ---------------------------------------------------------
   IMAGES
--------------------------------------------------------- */

img {
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   HR
--------------------------------------------------------- */

hr {
    border: 0;
    border-top: 1px solid #e5e5e5;
}

/* ---------------------------------------------------------
   SELECTION
--------------------------------------------------------- */

::selection {
    background: #000000;
    color: #ffffff;
}

/* =========================================================
   EMERRIMENT — CLICKABLE ELEMENTS VISIBILITY
   Final UI interaction layer
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL LINKS
   --------------------------------------------------------- */

a {
    color: #111;
    text-decoration: none;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

a:hover {
    color: #555;
}

a:focus-visible {
    outline: 3px solid #111;
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   TEXT LINKS
   --------------------------------------------------------- */

main a:not(.btn):not(.button):not([class*="card"]):not(
    [class*="action"]
) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

main a:not(.btn):not(.button):hover {
    color: #000;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

button,
.btn,
.button,
input[type="submit"],
input[type="button"] {
    cursor: pointer;

    border: 1px solid #111;

    background: #111;
    color: #fff;

    padding: 12px 20px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;

    line-height: 1.2;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: #fff;
    color: #111;
    border-color: #111;

    transform: translateY(-1px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

button:active,
.btn:active,
.button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(0);
    box-shadow: none;
}

button:focus-visible,
.btn:focus-visible,
.button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
    outline: 3px solid #111;
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   SECONDARY BUTTONS
   --------------------------------------------------------- */

.btn-secondary,
.button-secondary,
.secondary-btn {
    background: #fff;
    color: #111;
    border: 1px solid #111;
}

.btn-secondary:hover,
.button-secondary:hover,
.secondary-btn:hover {
    background: #111;
    color: #fff;
}


/* ---------------------------------------------------------
   OUTLINE / GHOST BUTTONS
   --------------------------------------------------------- */

.btn-outline,
.button-outline,
.outline-btn,
.ghost-btn {
    background: transparent;
    color: #111;
    border: 1px solid #111;
}

.btn-outline:hover,
.button-outline:hover,
.outline-btn:hover,
.ghost-btn:hover {
    background: #111;
    color: #fff;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

nav a,
.nav-link,
.sidebar a,
.menu-link {
    position: relative;

    color: #222;

    font-weight: 500;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

nav a:hover,
.nav-link:hover,
.sidebar a:hover,
.menu-link:hover {
    color: #000;
}


/* Navigation underline */

nav a::after,
.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 100%;
    height: 1px;

    background: #111;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.2s ease;
}

nav a:hover::after,
.nav-link:hover::after,
nav a.active::after,
.nav-link.active::after {
    transform: scaleX(1);
}


/* ---------------------------------------------------------
   ACTIVE NAVIGATION
   --------------------------------------------------------- */

nav a.active,
.nav-link.active,
.sidebar a.active,
.menu-link.active {
    color: #000;
    font-weight: 700;
}


/* ---------------------------------------------------------
   CARDS THAT ARE CLICKABLE
   --------------------------------------------------------- */

.clickable,
.clickable-card,
.card-link,
.article-card,
.product-card,
.collection-card,
.action-card {
    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.clickable:hover,
.clickable-card:hover,
.card-link:hover,
.article-card:hover,
.product-card:hover,
.collection-card:hover,
.action-card:hover {
    transform: translateY(-3px);

    border-color: #111;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.10);
}


/* ---------------------------------------------------------
   CLICKABLE CARD LINKS
   --------------------------------------------------------- */

.card-link {
    display: block;

    color: inherit;
    text-decoration: none;
}

.card-link:hover {
    color: inherit;
}


/* ---------------------------------------------------------
   CTA LINKS
   --------------------------------------------------------- */

.cta,
.cta-button,
.hero-cta,
.primary-cta {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    background: #111;
    color: #fff;

    border: 1px solid #111;

    padding: 13px 22px;

    border-radius: 8px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.cta:hover,
.cta-button:hover,
.hero-cta:hover,
.primary-cta:hover {
    background: #fff;
    color: #111;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);
}


/* ---------------------------------------------------------
   ICON BUTTONS
   --------------------------------------------------------- */

.icon-btn,
.icon-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid #111;

    background: #fff;
    color: #111;

    border-radius: 50%;

    cursor: pointer;
}

.icon-btn:hover,
.icon-button:hover {
    background: #111;
    color: #fff;
}


/* ---------------------------------------------------------
   ARTICLE / ENCYCLOPEDIA LINKS
   --------------------------------------------------------- */

.article-card a,
.article-link,
.read-more,
.read-link {
    color: #111;
    font-weight: 600;
}

.article-card a:hover,
.article-link:hover,
.read-more:hover,
.read-link:hover {
    color: #555;
}


/* ---------------------------------------------------------
   PRODUCT ACTIONS
   --------------------------------------------------------- */

.product-card a,
.product-card button {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   DASHBOARD ACTIONS
   --------------------------------------------------------- */

.dashboard-card,
.dashboard-action {
    cursor: pointer;
}

.dashboard-card:hover,
.dashboard-action:hover {
    border-color: #111;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);
}


/* ---------------------------------------------------------
   COLLECTION ACTIONS
   --------------------------------------------------------- */

.collection-card button {
    margin-top: 10px;
}


/* ---------------------------------------------------------
   DELETE / DANGER ACTIONS
   --------------------------------------------------------- */

.delete-btn,
.danger-btn,
button[data-action="delete"] {
    background: #fff;
    color: #111;

    border: 1px solid #111;
}

.delete-btn:hover,
.danger-btn:hover,
button[data-action="delete"]:hover {
    background: #111;
    color: #fff;
}


/* ---------------------------------------------------------
   DISABLED ELEMENTS
   --------------------------------------------------------- */

button:disabled,
.btn:disabled,
.button:disabled,
input:disabled {
    cursor: not-allowed;

    opacity: 0.45;

    transform: none;

    box-shadow: none;
}


/* ---------------------------------------------------------
   FORM LINKS
   --------------------------------------------------------- */

form a {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
}

form a:hover {
    color: #555;
}


/* ---------------------------------------------------------
   FOOTER LINKS
   --------------------------------------------------------- */

footer a {
    color: #222;
}

footer a:hover {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ---------------------------------------------------------
   MOBILE — MAKE BUTTONS EASY TO TAP
   --------------------------------------------------------- */

@media (max-width: 768px) {

    button,
    .btn,
    .button,
    .cta,
    .cta-button,
    .hero-cta,
    .primary-cta {
        min-height: 44px;
    }

    nav a,
    .nav-link,
    .sidebar a,
    .menu-link {
        padding: 10px 4px;
    }

}


/* ---------------------------------------------------------
   REDUCE MOTION FOR ACCESSIBILITY
   --------------------------------------------------------- */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* =========================================================
   EMERRIMENT — PHASE 5
   RESPONSIVE CLEANUP
   MOBILE • TABLET • DESKTOP
   ========================================================= */


/* =========================================================
   1. GLOBAL RESPONSIVE FOUNDATION
   ========================================================= */

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

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

img {
    display: block;
}

button,
input,
textarea,
select {
    max-width: 100%;
    font: inherit;
}

a {
    max-width: 100%;
}


/* =========================================================
   2. RESPONSIVE CONTAINER
   ========================================================= */

.container,
.page-container,
.content-container,
.section-container {
    width: min(100% - 40px, 1200px);
    margin-inline: auto;
}


/* =========================================================
   3. HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.08;
}

h2 {
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    line-height: 1.15;
}

h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    line-height: 1.25;
}

p {
    max-width: 75ch;
    overflow-wrap: break-word;
}


/* =========================================================
   4. HERO RESPONSIVENESS
   ========================================================= */

.hero,
.hero-section {
    width: 100%;
    min-height: auto;
}

.hero-content {
    width: min(100%, 850px);
}

.hero h1 {
    max-width: 950px;
}

.hero p {
    max-width: 720px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}


/* =========================================================
   5. GENERAL FLEX RESPONSIVENESS
   ========================================================= */

.flex,
.row,
.section-row {
    max-width: 100%;
}

.flex-wrap,
.row-wrap {
    flex-wrap: wrap;
}


/* =========================================================
   6. GRID RESPONSIVENESS
   ========================================================= */

.grid,
.cards-grid,
.card-grid,
.products-grid,
.articles-grid,
.features-grid {
    width: 100%;
    min-width: 0;
}


/* Prevent grid children from overflowing */

.grid > *,
.cards-grid > *,
.card-grid > *,
.products-grid > *,
.articles-grid > *,
.features-grid > * {
    min-width: 0;
}


/* =========================================================
   7. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .container,
    .page-container,
    .content-container,
    .section-container {
        width: min(100% - 64px, 1280px);
    }

    .hero {
        padding-inline: 40px;
    }

}


/* =========================================================
   8. TABLET
   768px — 1023px
   ========================================================= */

@media (max-width: 1023px) {

    .container,
    .page-container,
    .content-container,
    .section-container {
        width: min(100% - 32px, 900px);
    }


    /* Navigation */

    nav {
        width: 100%;
    }


    /* Hero */

    .hero {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .hero-content {
        max-width: 750px;
    }


    /* Sections */

    section {
        padding-top: 70px;
        padding-bottom: 70px;
    }


    /* Common grids */

    .features-grid,
    .cards-grid,
    .articles-grid,
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* Two-column layouts */

    .two-column,
    .two-col,
    .split-layout,
    .content-layout {
        grid-template-columns: 1fr;
    }


    /* Sidebar layouts */

    .layout,
    .dashboard-layout,
    .admin-layout {
        grid-template-columns: 1fr;
    }


    /* Tables */

    table {
        min-width: 650px;
    }

    .table-wrapper,
    .table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

}


/* =========================================================
   9. MOBILE
   767px AND BELOW
   ========================================================= */

@media (max-width: 767px) {


    /* -----------------------------------------------------
       PAGE FOUNDATION
       ----------------------------------------------------- */

    body {
        font-size: 15px;
    }

    .container,
    .page-container,
    .content-container,
    .section-container {
        width: calc(100% - 28px);
        margin-inline: auto;
    }


    /* -----------------------------------------------------
       HEADINGS
       ----------------------------------------------------- */

    h1 {
        font-size: clamp(1.9rem, 9vw, 3rem);
        line-height: 1.08;
    }

    h2 {
        font-size: clamp(1.5rem, 7vw, 2.2rem);
    }

    h3 {
        font-size: 1.25rem;
    }


    /* -----------------------------------------------------
       SECTIONS
       ----------------------------------------------------- */

    section {
        padding-top: 50px;
        padding-bottom: 50px;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero {
        padding: 55px 0;
        min-height: auto;
    }

    .hero-content {
        width: 100%;
        text-align: center;
    }

    .hero h1 {
        margin-inline: auto;
    }

    .hero p {
        margin-inline: auto;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions a,
    .hero-actions button {
        width: 100%;
    }


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    button,
    .btn,
    .button,
    .cta,
    .cta-button,
    .primary-cta {
        min-height: 44px;
    }


    /* -----------------------------------------------------
       GRIDS → ONE COLUMN
       ----------------------------------------------------- */

    .features-grid,
    .cards-grid,
    .card-grid,
    .articles-grid,
    .products-grid,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       TWO COLUMN SECTIONS
       ----------------------------------------------------- */

    .two-column,
    .two-col,
    .split-layout,
    .content-layout,
    .hero-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       FLEX ROWS
       ----------------------------------------------------- */

    .row,
    .section-row,
    .flex-row {
        flex-direction: column;
        align-items: stretch;
    }


    /* -----------------------------------------------------
       CARD SIZING
       ----------------------------------------------------- */

    .card,
    .article-card,
    .product-card,
    .collection-card,
    .dashboard-card {
        width: 100%;
        min-width: 0;
    }


    /* -----------------------------------------------------
       CARD CONTENT
       ----------------------------------------------------- */

    .card-body,
    .article-card-body,
    .product-card-body {
        padding: 20px;
    }


    /* -----------------------------------------------------
       IMAGES
       ----------------------------------------------------- */

    .hero img,
    .hero-image,
    .section-image {
        width: 100%;
        max-width: 100%;
        height: auto;
    }


    /* -----------------------------------------------------
       NAVIGATION
       ----------------------------------------------------- */

    nav {
        width: 100%;
    }

    nav ul,
    .nav-links,
    .navigation-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    nav a,
    .nav-link {
        display: block;
        width: 100%;
        padding: 11px 4px;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    header {
        width: 100%;
    }

    .header-inner,
    .navbar,
    .nav-container {
        width: calc(100% - 28px);
        margin-inline: auto;
    }


    /* -----------------------------------------------------
       FORMS
       ----------------------------------------------------- */

    form {
        width: 100%;
    }

    input,
    textarea,
    select {
        width: 100%;
        min-width: 0;
    }

    textarea {
        min-height: 120px;
        resize: vertical;
    }

    form button,
    form .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       DASHBOARD
       ----------------------------------------------------- */

    .dashboard,
    .dashboard-container,
    .dashboard-content {
        width: 100%;
        min-width: 0;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }


    /* -----------------------------------------------------
       SIDEBAR
       ----------------------------------------------------- */

    .sidebar {
        width: 100%;
        position: static;
    }

    .sidebar a {
        display: block;
        width: 100%;
    }


    /* -----------------------------------------------------
       COLLECTIONS
       ----------------------------------------------------- */

    .collections-page {
        width: 100%;
    }

    .collection-card {
        width: 100%;
    }

    #collectionsContainer,
    #collectionArticles {
        width: 100%;
    }


    /* -----------------------------------------------------
       ENCYCLOPEDIA
       ----------------------------------------------------- */

    .encyclopedia-grid,
    .article-grid {
        grid-template-columns: 1fr;
    }

    .article-content {
        width: 100%;
        min-width: 0;
    }

    .article-content img {
        width: 100%;
        height: auto;
    }


    /* -----------------------------------------------------
       SEARCH
       ----------------------------------------------------- */

    .search-container,
    .search-box {
        width: 100%;
    }

    .search-container input,
    .search-box input {
        width: 100%;
    }


    /* -----------------------------------------------------
       TABLES
       ----------------------------------------------------- */

    .table-wrapper,
    .table-container,
    .responsive-table {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 650px;
    }


    /* -----------------------------------------------------
       CMS
       ----------------------------------------------------- */

    .admin-layout,
    .cms-layout,
    .layout {
        display: block;
        width: 100%;
    }

    .admin-sidebar,
    .cms-sidebar {
        width: 100%;
        position: static;
    }

    .admin-content,
    .cms-content,
    .content {
        width: 100%;
        min-width: 0;
    }


    /* -----------------------------------------------------
       CMS ACTION BARS
       ----------------------------------------------------- */

    .action-bar,
    .toolbar,
    .page-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .action-bar button,
    .action-bar a,
    .toolbar button,
    .toolbar a,
    .page-actions button,
    .page-actions a {
        width: 100%;
    }


    /* -----------------------------------------------------
       AI CHAT
       ----------------------------------------------------- */

    .chat-container,
    .ai-chat,
    .chat-window {
        width: 100%;
        max-width: 100%;
    }

    .chat-messages {
        width: 100%;
        max-width: 100%;
    }

    .chat-input,
    .chat-form {
        width: 100%;
    }

    .chat-form input {
        min-width: 0;
        width: 100%;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    footer {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-column {
        width: 100%;
    }


    /* -----------------------------------------------------
       MODALS
       ----------------------------------------------------- */

    .modal,
    .modal-content,
    .dialog {
        width: calc(100% - 28px);
        max-width: none;
        margin-inline: auto;
    }


    /* -----------------------------------------------------
       PREVENT LONG TEXT FROM BREAKING LAYOUT
       ----------------------------------------------------- */

    pre,
    code {
        max-width: 100%;
        overflow-x: auto;
    }

    p,
    li,
    td,
    th {
        overflow-wrap: anywhere;
    }

}


/* =========================================================
   10. VERY SMALL PHONES
   480px AND BELOW
   ========================================================= */

@media (max-width: 480px) {

    .container,
    .page-container,
    .content-container,
    .section-container {
        width: calc(100% - 22px);
    }


    section {
        padding-top: 40px;
        padding-bottom: 40px;
    }


    .hero {
        padding-top: 40px;
        padding-bottom: 40px;
    }


    h1 {
        font-size: clamp(1.8rem, 10vw, 2.5rem);
    }


    h2 {
        font-size: clamp(1.4rem, 8vw, 2rem);
    }


    .card-body,
    .article-card-body,
    .product-card-body {
        padding: 16px;
    }


    button,
    .btn,
    .button,
    .cta,
    .cta-button,
    .primary-cta {
        width: 100%;
    }


    .icon-btn,
    .icon-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

}


/* =========================================================
   11. LANDSCAPE MOBILE
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

    .hero {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    section {
        padding-top: 45px;
        padding-bottom: 45px;
    }

}


/* =========================================================
   12. TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    button,
    .btn,
    .button,
    a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
    }

    .clickable:hover,
    .clickable-card:hover,
    .article-card:hover,
    .product-card:hover,
    .collection-card:hover {
        transform: none;
    }

}


/* =========================================================
   13. ACCESSIBILITY
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}


/* =========================================================
   14. DESKTOP — KEEP CONTENT FROM BECOMING TOO WIDE
   ========================================================= */

@media (min-width: 1024px) {

    .content,
    .main-content,
    .page-content {
        min-width: 0;
    }

    .article-content,
    .reading-content {
        max-width: 850px;
    }

}


/* =========================================================
   15. RESPONSIVE VISIBILITY HELPERS
   ========================================================= */

.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 767px) {

    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }

}


/* =========================================================
   16. RESPONSIVE TEXT ALIGNMENT
   ========================================================= */

@media (max-width: 767px) {

    .text-center-mobile {
        text-align: center;
    }

    .text-left-mobile {
        text-align: left;
    }

}


/* =========================================================
   17. RESPONSIVE SPACING HELPERS
   ========================================================= */

@media (max-width: 767px) {

    .desktop-spacing {
        margin-top: 0;
        margin-bottom: 0;
    }

    .mobile-gap {
        gap: 15px;
    }

}


/* =========================================================
   PHASE 5 COMPLETE
   ========================================================= */
/* =========================================
   EMERRIMENT DASHBOARD NAV BUTTON FIX
========================================= */

#navDashboardBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    color: #ffffff !important;
    background: #111111 !important;

    padding: 10px 18px;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    border: 1px solid #111111;

    min-width: 100px;
    min-height: 38px;

    position: relative;
    z-index: 9999;
}

#navDashboardBtn:hover {
    color: #ffffff !important;
    background: #222222 !important;
}