/* ========================================
   ELMA EDILIZIA — Design System
   ======================================== */

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

/* --- CSS Reset --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:10px;scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;font-size:1.6rem;line-height:1.6;color:var(--white);background:var(--black);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:color .3s}
img,video{max-width:100%;display:block}
ul,ol{list-style:none}
button,input,textarea{font-family:inherit;font-size:inherit;border:none;outline:none;background:none}

/* --- Design Tokens --- */
:root{
  --black:#0A0A0A;
  --black-pure:#000000;
  --dark:#111111;
  --dark-grey:#1A1A1A;
  --mid-grey:#2A2A2A;
  --grey:#888888;
  --light-grey:#F5F5F5;
  --white:#FFFFFF;
  --yellow:#DFFF32;
  --yellow-dark:#C8E620;
  --yellow-glow:rgba(223,255,50,0.15);
  --yellow-glow-strong:rgba(223,255,50,0.3);
  --radius-sm:0.8rem;
  --radius-md:1.6rem;
  --radius-lg:2.4rem;
  --radius-xl:3.2rem;
  --radius-full:9999px;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.5);
  --shadow-yellow:0 0 30px rgba(223,255,50,0.2);
  --transition-fast:0.2s ease;
  --transition-base:0.3s ease;
  --transition-slow:0.5s ease;
  --transition-slower:0.8s cubic-bezier(0.16,1,0.3,1);
  --container-max:140rem;
  --container-narrow:100rem;
  --gutter:6rem;
  --gutter-mobile:2rem;
}

/* --- Typography --- */
.font-display{font-family:'Inter',sans-serif;font-weight:900;letter-spacing:-0.03em}
.font-heading{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-0.02em}
.font-body{font-family:'Inter',sans-serif;font-weight:400}

/* --- Layout --- */
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.container-narrow{width:100%;max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}
@media(max-width:768px){
  .container,.container-narrow{padding:0 var(--gutter-mobile)}
}

/* --- Section Spacing --- */
.section{padding:12rem 0}
.section-sm{padding:8rem 0}
.section-lg{padding:16rem 0}
@media(max-width:768px){
  .section{padding:6rem 0}
  .section-sm{padding:4rem 0}
  .section-lg{padding:8rem 0}
}

/* --- Header / Navigation --- */
#header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  padding:2rem 0;
  transition:all var(--transition-slow);
  background:transparent;
}
#header.scrolled{
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:1.2rem 0;
  border-bottom:1px solid rgba(223,255,50,0.1);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:4rem;
}
.logo{display:flex;align-items:center;gap:1rem;white-space:nowrap;flex-shrink:0}
.logo svg{height:4.5rem;width:auto;color:var(--yellow);transition:transform var(--transition-base)}
.logo:hover svg{transform:scale(1.05)}

.nav-links{display:flex;align-items:center;gap:4rem}
.nav-links a{
  font-size:1.4rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--white);position:relative;padding:0.5rem 0;white-space:nowrap;
  transition:color var(--transition-base);
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:2px;
  background:var(--yellow);transition:width var(--transition-base);
}
.nav-links a:hover,.nav-links a.active{color:var(--yellow)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

.nav-social{display:flex;align-items:center;gap:1.5rem;margin-left:3rem;padding-left:3rem;border-left:1px solid rgba(255,255,255,0.15)}
.nav-social a{
  display:flex;align-items:center;justify-content:center;
  width:3.6rem;height:3.6rem;border-radius:50%;
  background:rgba(255,255,255,0.08);
  transition:all var(--transition-base);
}
.nav-social a:hover{background:var(--yellow);color:var(--black)}
.nav-social a svg{width:1.6rem;height:1.6rem;fill:currentColor}

/* Mobile Menu */
.menu-toggle{display:none;flex-direction:column;gap:0.5rem;cursor:pointer;z-index:1001;padding:0.5rem}
.menu-toggle span{width:2.4rem;height:2px;background:var(--yellow);transition:all var(--transition-base);border-radius:2px}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.nav-mobile{
  display:none;position:fixed;top:0;left:0;width:100%;height:100vh;
  background:var(--black);z-index:999;
  flex-direction:column;align-items:center;justify-content:center;gap:3rem;
  opacity:0;pointer-events:none;transition:opacity var(--transition-slow);
}
.nav-mobile.open{opacity:1;pointer-events:all;display:flex}
.nav-mobile a{
  font-size:3.2rem;font-weight:800;text-transform:uppercase;
  color:var(--white);transition:color var(--transition-base);
}
.nav-mobile a:hover{color:var(--yellow)}
.nav-mobile .mobile-social{display:flex;gap:2rem;margin-top:3rem}
.nav-mobile .mobile-social a{font-size:1.6rem;width:5rem;height:5rem;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center}
.nav-mobile .mobile-social a:hover{background:var(--yellow);color:var(--black)}
.nav-mobile .mobile-social a svg{width:2.2rem;height:2.2rem;fill:currentColor}

@media(max-width:900px){
  .nav-links,.nav-social{display:none}
  .menu-toggle{display:flex}
}

/* --- Hero Section --- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;padding-top:10rem;
}
.hero-video-bg{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  z-index:0;filter:brightness(0.4);
}
.hero-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,0.3) 0%,rgba(10,10,10,0.7) 60%,var(--black) 100%);
}
.hero-content{position:relative;z-index:2;width:100%}
.hero-title{
  font-size:clamp(3.6rem,7vw,9rem);font-weight:900;line-height:1.05;
  letter-spacing:-0.04em;color:var(--white);
  max-width:90rem;
}
.hero-title span{color:var(--yellow);display:inline}
.hero-subtitle{
  font-size:clamp(1.6rem,2vw,2.2rem);font-weight:400;line-height:1.6;
  color:rgba(255,255,255,0.7);max-width:60rem;margin-top:2.5rem;
}
.hero-actions{display:flex;gap:2rem;margin-top:4rem;flex-wrap:wrap}
.hero-scroll-indicator{
  position:absolute;bottom:4rem;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  animation:float 2s ease-in-out infinite;
}
.hero-scroll-indicator span{font-size:1.2rem;text-transform:uppercase;letter-spacing:0.2em;color:rgba(255,255,255,0.4)}
.hero-scroll-indicator .arrow{width:2rem;height:2rem;border-right:2px solid var(--yellow);border-bottom:2px solid var(--yellow);transform:rotate(45deg)}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:1rem;
  padding:1.6rem 3.6rem;font-size:1.4rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;
  border-radius:var(--radius-full);cursor:pointer;
  transition:all var(--transition-base);position:relative;overflow:hidden;
}
.btn-primary{
  background:var(--yellow);color:var(--black);
  box-shadow:0 0 0 0 rgba(223,255,50,0);
}
.btn-primary:hover{
  background:var(--yellow-dark);
  box-shadow:var(--shadow-yellow);transform:translateY(-2px);
}
.btn-outline{
  background:transparent;color:var(--white);
  border:2px solid rgba(255,255,255,0.3);
}
.btn-outline:hover{border-color:var(--yellow);color:var(--yellow)}
.btn svg{width:1.6rem;height:1.6rem;transition:transform var(--transition-base)}
.btn:hover svg{transform:translateX(4px)}

/* --- Marquee --- */
.marquee-section{overflow:hidden;padding:4rem 0;border-top:1px solid rgba(223,255,50,0.1);border-bottom:1px solid rgba(223,255,50,0.1)}
.marquee-track{
  display:flex;gap:4rem;animation:marquee 20s linear infinite;width:max-content;
}
.marquee-track span{
  font-family:'Inter',sans-serif;
  font-size:clamp(4rem,8vw,8rem);font-weight:800;text-transform:uppercase;
  color:var(--black); /* Colore uguale allo sfondo */
  text-shadow: -1px -1px 0 var(--yellow), 1px -1px 0 var(--yellow), -1px 1px 0 var(--yellow), 1px 1px 0 var(--yellow);
  -webkit-text-stroke:0;
  letter-spacing:0.02em;
  white-space:nowrap;
}
.marquee-track span.filled{color:var(--yellow);text-shadow:none;}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* --- Stats Section --- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem}
.stat-card{
  text-align:center;padding:4rem 2rem;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-lg);transition:all var(--transition-base);
}
.stat-card:hover{background:var(--yellow-glow);border-color:rgba(223,255,50,0.2)}
.stat-value{
  font-size:clamp(4rem,5vw,6.4rem);font-weight:900;color:var(--yellow);
  line-height:1;letter-spacing:-0.03em;
}
.stat-label{font-size:1.4rem;color:var(--grey);margin-top:1rem;text-transform:uppercase;letter-spacing:0.1em}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}

/* --- Services Grid --- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.service-card{
  display:block;
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  aspect-ratio:3/4;cursor:pointer;
  background:var(--dark-grey);
}
.service-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--transition-slower);
}
.service-card:hover img{transform:scale(1.08)}
.service-card-overlay{
  position:absolute;bottom:0;left:0;width:100%;
  padding:3rem;
  background:linear-gradient(0deg,rgba(0,0,0,0.9) 0%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;
  transition:all var(--transition-slow);
}
.service-card-title{font-size:2.2rem;font-weight:800;text-transform:uppercase;line-height:1.15}
.service-card-desc{
  font-size:1.4rem;color:rgba(255,255,255,0.7);margin-top:1rem;
  max-height:0;overflow:hidden;transition:max-height var(--transition-slow);
}
.service-card:hover .service-card-desc{max-height:10rem}
.service-card-arrow{
  display:flex;align-items:center;gap:0.8rem;margin-top:1.5rem;
  font-size:1.3rem;font-weight:600;color:var(--yellow);text-transform:uppercase;letter-spacing:0.08em;
  opacity:0;transform:translateY(10px);transition:all var(--transition-base);
}
.service-card:hover .service-card-arrow{opacity:1;transform:translateY(0)}
@media(max-width:900px){.services-grid{grid-template-columns:1fr;gap:1.5rem}.service-card{aspect-ratio:4/3}}

/* --- Section Headers --- */
.section-header{margin-bottom:6rem}
.section-label{
  display:inline-flex;align-items:center;gap:1rem;
  font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:0.2em;
  color:var(--yellow);margin-bottom:2rem;
}
.section-label::before{content:'';width:3rem;height:2px;background:var(--yellow)}
.section-title{
  font-size:clamp(3rem,5vw,5.6rem);font-weight:900;line-height:1.1;
  letter-spacing:-0.03em;color:var(--white);max-width:70rem;
}
.section-title span{color:var(--yellow)}
.section-desc{font-size:1.8rem;color:var(--grey);margin-top:2rem;max-width:55rem;line-height:1.7}

/* --- Process / How We Work --- */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:step}
.process-step{
  padding:4rem 3rem;border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
  transition:all var(--transition-base);position:relative;counter-increment:step;
}
.process-step:hover{border-color:rgba(223,255,50,0.3);background:var(--yellow-glow)}
.process-step::before{
  content:counter(step,decimal-leading-zero);
  font-size:6rem;font-weight:900;color:rgba(223,255,50,0.1);line-height:1;
  position:absolute;top:2rem;right:2rem;
  transition:color var(--transition-base);
}
.process-step:hover::before{color:rgba(223,255,50,0.25)}
.process-step-title{font-size:2rem;font-weight:700;margin-bottom:1.5rem;position:relative;z-index:1}
.process-step-desc{font-size:1.4rem;color:var(--grey);line-height:1.7;position:relative;z-index:1}
@media(max-width:900px){.process-grid{grid-template-columns:1fr}}

/* --- Social Section --- */
.social-section{background:var(--dark);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)}
.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;max-width:80rem;margin:0 auto}
.social-card{
  display:flex;align-items:center;gap:2.5rem;
  padding:3rem 4rem;border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
  transition:all var(--transition-base);cursor:pointer;
  text-decoration:none;
}
.social-card:hover{transform:translateY(-4px);border-color:rgba(223,255,50,0.3);box-shadow:var(--shadow-yellow)}
.social-card-icon{
  width:6rem;height:6rem;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all var(--transition-base);
}
.social-card-icon.facebook{background:linear-gradient(135deg,#1877F2,#0D5BC4)}
.social-card-icon.tiktok{background:linear-gradient(135deg,#111,#333)}
.social-card-icon svg{width:2.8rem;height:2.8rem;fill:var(--white)}
.social-card-info{display:flex;flex-direction:column;gap:0.4rem}
.social-card-platform{font-size:1.2rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--grey)}
.social-card-name{font-size:1.8rem;font-weight:700;color:var(--white)}
.social-card-action{font-size:1.3rem;color:var(--yellow);font-weight:600;display:flex;align-items:center;gap:0.5rem;margin-top:0.3rem}
.social-card-action svg{width:1.2rem;height:1.2rem;fill:var(--yellow);transition:transform var(--transition-base)}
.social-card:hover .social-card-action svg{transform:translateX(4px)}
@media(max-width:768px){.social-grid{grid-template-columns:1fr}.social-card{padding:2.5rem}}

/* --- Contact / CTA --- */
.cta-section{position:relative;overflow:hidden}
.cta-bg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(135deg,var(--black) 0%,var(--dark-grey) 50%,var(--black) 100%);
}
.cta-glow{
  position:absolute;top:-20%;right:-10%;width:60rem;height:60rem;
  background:radial-gradient(circle,rgba(223,255,50,0.08) 0%,transparent 70%);
  border-radius:50%;
}
.cta-content{position:relative;z-index:1;text-align:center;max-width:70rem;margin:0 auto}
.contact-form{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;
  margin-top:4rem;max-width:60rem;margin-left:auto;margin-right:auto;
}
.contact-form .full-width{grid-column:span 2}
.form-input{
  width:100%;padding:1.6rem 2rem;font-size:1.5rem;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-md);color:var(--white);
  transition:all var(--transition-base);
}
.form-input::placeholder{color:var(--grey)}
.form-input:focus{border-color:var(--yellow);background:rgba(223,255,50,0.03);box-shadow:0 0 0 3px rgba(223,255,50,0.1)}
select.form-input{cursor:pointer}
select.form-input option{background:var(--dark);color:var(--white);padding:1rem}
textarea.form-input{resize:vertical;min-height:12rem}
@media(max-width:768px){.contact-form{grid-template-columns:1fr}.contact-form .full-width{grid-column:span 1}}

/* --- Footer --- */
.footer{background:var(--dark);border-top:1px solid rgba(255,255,255,0.06);padding:8rem 0 3rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:4rem}
.footer-brand{max-width:30rem}
.footer-brand .logo{margin-bottom:2rem}
.footer-brand p{font-size:1.4rem;color:var(--grey);line-height:1.7}
.footer-heading{font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:var(--yellow);margin-bottom:2rem}
.footer-links a{display:block;font-size:1.4rem;color:var(--grey);padding:0.5rem 0;transition:color var(--transition-base)}
.footer-links a:hover{color:var(--yellow)}
.footer-contact-item{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.5rem}
.footer-contact-item svg{width:1.8rem;height:1.8rem;fill:var(--yellow);flex-shrink:0}
.footer-contact-item span{font-size:1.4rem;color:var(--grey)}
.footer-contact-item a{font-size:1.4rem;color:var(--grey);transition:color var(--transition-base)}
.footer-contact-item a:hover{color:var(--yellow)}
.footer-social{display:flex;gap:1rem;margin-top:2rem}
.footer-social a{
  width:4rem;height:4rem;border-radius:50%;
  background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-base);
}
.footer-social a:hover{background:var(--yellow);color:var(--black)}
.footer-social a svg{width:1.8rem;height:1.8rem;fill:currentColor}
.footer-bottom{
  margin-top:6rem;padding-top:3rem;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;justify-content:space-between;align-items:center;
  font-size:1.3rem;color:rgba(255,255,255,0.3);
}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:3rem}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}
}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}

/* --- Animations --- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(0.9);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.stagger-1{transition-delay:0.1s}.stagger-2{transition-delay:0.2s}.stagger-3{transition-delay:0.3s}
.stagger-4{transition-delay:0.4s}.stagger-5{transition-delay:0.5s}.stagger-6{transition-delay:0.6s}

/* --- Glass Cards --- */
.glass{
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-lg);
}

/* --- CTA Banner inline --- */
.cta-banner{
  display:flex;align-items:center;justify-content:space-between;
  padding:5rem 6rem;border-radius:var(--radius-xl);
  background:var(--yellow);color:var(--black);
  position:relative;overflow:hidden;
}
.cta-banner-text{max-width:50rem}
.cta-banner-title{font-size:3.2rem;font-weight:900;line-height:1.15}
.cta-banner-desc{font-size:1.6rem;margin-top:1rem;opacity:0.7}
.btn-dark{
  background:var(--black);color:var(--yellow);
  padding:1.6rem 3.6rem;font-size:1.4rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;
  border-radius:var(--radius-full);
  transition:all var(--transition-base);
}
.btn-dark:hover{background:var(--dark-grey);transform:translateY(-2px);box-shadow:var(--shadow-md)}
@media(max-width:768px){
  .cta-banner{flex-direction:column;text-align:center;padding:4rem 3rem;gap:3rem}
}

/* --- Utility --- */
.text-yellow{color:var(--yellow)}
.text-grey{color:var(--grey)}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto;}
.mb-60{margin-bottom:6rem;}
.bg-dark{background:var(--dark)}
.bg-black{background:var(--black)}
.bg-yellow{background:var(--yellow);color:var(--black)}
.flex-center{display:flex;align-items:center;justify-content:center}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem}
@media(max-width:768px){.grid-2{grid-template-columns:1fr}}

/* --- Recensioni Page & Components --- */
.full-width { grid-column: span 3; }
@media (max-width: 900px) { .full-width { grid-column: span 1; } }

/* Star ratings */
.star-rating-interactive span {
  display: inline-block;
  cursor: pointer;
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.star-rating-interactive span:hover {
  transform: scale(1.2);
}

/* User Profile box in review form */
.user-avatar-container {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--yellow);
  background: var(--mid-grey);
}
.user-avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Admin Dashboard custom styling */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}
.admin-stat-card {
  padding: 3rem;
  border-radius: var(--radius-md);
  text-align: center;
}
.admin-stat-number {
  font-size: 3.6rem;
  font-weight: 800;
  color: var(--yellow);
}
.admin-stat-label {
  font-size: 1.3rem;
  color: var(--grey);
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* Tabs layout */
.tabs-header {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 1.2rem 2.4rem;
  font-size: 1.3rem;
}
.tab-btn.active {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}

/* Tables styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  font-size: 1.4rem;
}
th, td {
  padding: 1.6rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
th {
  background: rgba(255,255,255,0.02);
  color: var(--yellow);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}
tr:hover {
  background: rgba(255,255,255,0.01);
}

/* --- Blog Grid & Cards --- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.blog-card{
  display:flex;flex-direction:column;border-radius:var(--radius-lg);
  overflow:hidden;transition:all var(--transition-base);cursor:pointer;
  text-decoration:none;color:var(--white);
}
.blog-card:hover{transform:translateY(-6px);border-color:rgba(223,255,50,0.3);box-shadow:var(--shadow-yellow)}
.blog-card-image{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform var(--transition-slower);
}
.blog-card:hover .blog-card-image{transform:scale(1.05)}
.blog-card-image-wrapper{overflow:hidden;flex-shrink:0}
.blog-card-body{padding:2.5rem;display:flex;flex-direction:column;flex-grow:1}
.blog-card-date{
  font-size:1.2rem;color:var(--yellow);text-transform:uppercase;letter-spacing:0.1em;
  font-weight:600;margin-bottom:1rem;
}
.blog-card-title{
  font-size:2rem;font-weight:800;line-height:1.2;margin-bottom:1.2rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-excerpt{
  font-size:1.4rem;color:var(--grey);line-height:1.6;flex-grow:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:2rem;
}
.blog-card-link{
  font-size:1.3rem;font-weight:700;color:var(--yellow);text-transform:uppercase;
  letter-spacing:0.08em;display:inline-flex;align-items:center;gap:0.8rem;
  transition:gap var(--transition-base);
}
.blog-card:hover .blog-card-link{gap:1.2rem}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr;gap:2rem}}
@media(max-width:600px){.blog-card-title{font-size:1.8rem}}

/* --- Single Article Page --- */
.article-cover{
  width:100%;max-height:50vh;object-fit:cover;display:block;
}
.article-cover-wrapper{
  position:relative;overflow:hidden;
  background:var(--dark-grey);
}
.article-cover-overlay{
  position:absolute;bottom:0;left:0;width:100%;height:40%;
  background:linear-gradient(0deg,var(--black) 0%,transparent 100%);
}
.article-container{max-width:80rem;margin:0 auto;padding:4rem var(--gutter)}
.article-meta{
  display:flex;align-items:center;gap:2rem;margin-bottom:3rem;
  font-size:1.3rem;color:var(--grey);text-transform:uppercase;letter-spacing:0.1em;
}
.article-meta .tag{
  background:var(--yellow-glow);color:var(--yellow);padding:0.4rem 1.2rem;
  border-radius:var(--radius-full);font-weight:700;font-size:1.2rem;
}
.article-title{
  font-size:clamp(3rem,5vw,4.8rem);font-weight:900;line-height:1.15;
  letter-spacing:-0.03em;margin-bottom:3rem;
}
.article-content{
  font-size:1.8rem;line-height:1.8;color:rgba(255,255,255,0.85);
}
.article-content h2{font-size:2.8rem;font-weight:800;margin:4rem 0 2rem;color:var(--white)}
.article-content h3{font-size:2.2rem;font-weight:700;margin:3rem 0 1.5rem;color:var(--white)}
.article-content p{margin-bottom:2rem}
.article-content img{
  max-width:100%;height:auto;border-radius:var(--radius-md);margin:3rem 0;
}
.article-content blockquote{
  border-left:4px solid var(--yellow);padding:2rem 3rem;margin:3rem 0;
  background:rgba(223,255,50,0.03);border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-style:italic;color:rgba(255,255,255,0.7);
}
.article-content ul,.article-content ol{padding-left:3rem;margin-bottom:2rem}
.article-content li{margin-bottom:0.8rem}
.article-content a{color:var(--yellow);text-decoration:underline}
.article-content iframe{
  width:100%;aspect-ratio:16/9;border:none;border-radius:var(--radius-md);margin:3rem 0;
}
.article-back{
  display:inline-flex;align-items:center;gap:1rem;margin-top:5rem;
  font-size:1.4rem;font-weight:700;color:var(--yellow);text-transform:uppercase;letter-spacing:0.08em;
  transition:gap var(--transition-base);
}
.article-back:hover{gap:1.5rem}
@media(max-width:768px){
  .article-container{padding:3rem var(--gutter-mobile)}
  .article-content{font-size:1.6rem}
}

/* --- Blog Admin Editor --- */
.blog-editor-form{display:flex;flex-direction:column;gap:2rem}
.blog-editor-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:768px){.blog-editor-form .form-row{grid-template-columns:1fr}}
.blog-cover-preview{
  max-width:100%;max-height:20rem;object-fit:cover;border-radius:var(--radius-md);
  margin-top:1rem;border:1px solid rgba(255,255,255,0.1);
}
.blog-status-badge{
  display:inline-flex;align-items:center;gap:0.5rem;padding:0.3rem 1rem;
  border-radius:var(--radius-full);font-size:1.1rem;font-weight:700;text-transform:uppercase;
}
.blog-status-badge.published{background:rgba(74,222,128,0.15);color:#4ade80}
.blog-status-badge.draft{background:rgba(255,255,255,0.08);color:var(--grey)}
.toggle-switch{
  position:relative;width:5rem;height:2.6rem;cursor:pointer;
}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(255,255,255,0.1);border-radius:var(--radius-full);
  transition:all var(--transition-base);
}
.toggle-slider::before{
  content:'';position:absolute;height:2rem;width:2rem;left:0.3rem;bottom:0.3rem;
  background:var(--white);border-radius:50%;transition:all var(--transition-base);
}
.toggle-switch input:checked + .toggle-slider{background:var(--yellow)}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(2.4rem);background:var(--black)}