/* -------------------------------------------------
  GLOBAL THEME VARIABLES
------------------------------------------------- */
:root{
  /* Bright Retro Palette */
  --primary:#FF3B3F;
  --primary-dark:#C72F33;
  --secondary:#34D1BF;
  --secondary-dark:#279B8F;
  --accent:#FFC857;
  --accent-dark:#D6A343;
  --bg:#F9F9F9;
  --bg-dark:#1F1F1F;
  --text:#222222;
  --text-light:#EEEEEE;

  /* Gradients */
  --gradient-retro:linear-gradient(135deg,#FF3B3F 0%,#FFC857 100%);
  --gradient-light:linear-gradient(135deg,#34D1BF 0%,#A0FFE6 100%);
  --gradient-dark:linear-gradient(135deg,#1F1F1F 0%,#434343 100%);

  /* Typography */
  --font-head:'Space Grotesk',sans-serif;
  --font-body:'DM Sans',sans-serif;

  /* Radius / Shadows */
  --radius:12px;
  --shadow:0 8px 20px rgba(0,0,0,0.08);
  --shadow-hover:0 12px 26px rgba(0,0,0,0.15);

  /* Transition / Animation */
  --transition:all 0.35s cubic-bezier(.34,1.56,.64,1); /* spring(ish) */
}

/* -------------------------------------------------
  BASE ELEMENTS
------------------------------------------------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--text);
  line-height:1.2;
  margin-bottom:0.6em;
  text-align:center;
  text-shadow:1px 1px 3px rgba(0,0,0,0.15);
}

p,ul,ol{margin-bottom:1.2em;}

/* Links */
a{
  color:var(--primary);
  text-decoration:none;
  transition:var(--transition);
}
a:hover,
a:focus{color:var(--primary-dark);text-decoration:underline;}

/* Read More */
.read-more{
  font-weight:700;
  display:inline-block;
  position:relative;
}
.read-more::after{
  content:'→';
  margin-left:6px;
  transition:var(--transition);
}
.read-more:hover::after{transform:translateX(4px);}

/* -------------------------------------------------
  LAYOUT HELPERS
------------------------------------------------- */
.container{
  width:90%;
  max-width:1400px;
  margin:0 auto;
}
.is-two-thirds{width:66%;}

.section{
  padding:80px 0;
}
.retro-gradient{background:var(--gradient-retro);}
.retro-gradient-light{background:var(--gradient-light);}
.retro-gradient-dark{background:var(--gradient-dark);}
.light-text{color:var(--text-light);}
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

/* -------------------------------------------------
  HEADER & NAVIGATION
------------------------------------------------- */
.site-header{
  position:fixed;
  top:0;left:0;width:100%;
  background:#FFFFFF;
  box-shadow:var(--shadow);
  z-index:1000;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}
.logo{
  font-family:var(--font-head);
  font-size:1.8rem;
  font-weight:700;
  background:var(--gradient-retro);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.main-nav ul{
  display:flex;
  gap:24px;
  list-style:none;
}
.main-nav a{
  font-weight:500;
  color:var(--text);
}
.main-nav a:hover{color:var(--primary);}

/* Burger Menu */
.burger{
  display:none;
  flex-direction:column;
  gap:4px;
  background:transparent;
  border:0;
  cursor:pointer;
}
.burger span{
  width:24px;height:3px;
  background:var(--text);
  transition:var(--transition);
}

/* -------------------------------------------------
  HERO
------------------------------------------------- */
.hero-section{
  position:relative;
  text-align:center;
  color:#FFFFFF;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  padding:140px 0 120px;
}
.hero-title{font-size:clamp(2rem,6vw,4rem);color:#FFFFFF;}
.hero-subtitle{font-size:1.2rem;color:#FFFFFF;margin-bottom:2rem;}
.stats-widget{
  display:flex;
  justify-content:center;
  gap:40px;
  margin-top:40px;
}
.stat{display:flex;flex-direction:column;align-items:center;}
.stat .number{font-size:2rem;font-weight:700;color:#FFFFFF;}
.stat .label{color:#FFFFFF;opacity:0.85;}

/* -------------------------------------------------
  BUTTONS & FORM CONTROLS
------------------------------------------------- */
.btn,
button,
input[type="submit"]{
  --btn-bg:var(--primary);
  --btn-text:#FFFFFF;
  appearance:none;
  border:none;
  padding:0.75rem 1.6rem;
  border-radius:var(--radius);
  font-family:var(--font-head);
  font-weight:600;
  font-size:1rem;
  color:var(--btn-text);
  background:var(--btn-bg);
  cursor:pointer;
  transition:var(--transition);
  box-shadow:var(--shadow);
}
.btn-secondary{--btn-bg:var(--secondary);}
.btn:hover{transform:scale(1.06);box-shadow:var(--shadow-hover);}
button:focus,
input:focus,
textarea:focus{outline:2px solid var(--secondary);}

/* Inputs */
input[type="text"],
input[type="email"],
textarea{
  width:100%;
  padding:0.75rem 1rem;
  border:2px solid #DDD;
  border-radius:var(--radius);
  font-family:var(--font-body);
  transition:var(--transition);
}
input:focus,
textarea:focus{border-color:var(--secondary);box-shadow:var(--shadow);}

/* Form Layout */
.contact-form .form-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.contact-form textarea{resize:vertical;}

/* -------------------------------------------------
  CARDS GLOBAL
------------------------------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px;
  margin-top:40px;
}
.card,
.item,
.testimonial,
.product-card,
.team-member{
  background:#FFFFFF;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.5rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:var(--transition);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}
.card-image,
.image-container{
  width:100%;
  height:260px;
  overflow:hidden;
  border-radius:var(--radius);
  margin-bottom:1rem;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  margin:0 auto;
}

/* -------------------------------------------------
  TESTIMONIALS
------------------------------------------------- */
.testimonial{padding:2rem 1.5rem;}
.testimonial img{border-radius:50%;width:120px;height:120px;margin-bottom:1rem;}

/* -------------------------------------------------
  FOOTER
------------------------------------------------- */
.site-footer{
  padding:60px 0 40px;
  text-align:center;
}
.site-footer a{color:var(--secondary);margin:0 4px;}
.site-footer a:hover{text-decoration:underline;color:var(--secondary-dark);}
.footer-nav{margin-bottom:1rem;}
/* Social links styling */
.site-footer .social-link{
  font-weight:600;
  color:var(--accent);
}
.site-footer .social-link:hover{color:var(--accent-dark);}

/* -------------------------------------------------
  UTILITIES
------------------------------------------------- */
.light-overlay{
  background:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55));
}
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}

/* -------------------------------------------------
  SPECIAL PAGES
------------------------------------------------- */
.success-page,
.privacy-page,
.terms-page{
  padding:120px 20px;
}
.success-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.privacy-page,
.terms-page{padding-top:100px;}

/* -------------------------------------------------
  RESPONSIVE
------------------------------------------------- */
@media(max-width:992px){
  .main-nav{display:none;flex-direction:column;background:#FFFFFF;position:fixed;top:64px;right:0;padding:20px;box-shadow:var(--shadow);width:220px;z-index:999;}
  .main-nav.open{display:flex;}
  .burger{display:flex;}
}
@media(max-width:576px){
  .hero-title{font-size:2rem;}
  .hero-subtitle{font-size:1rem;}
  .stats-widget{flex-direction:column;gap:20px;}
  .contact-form .form-row{flex-direction:column;}
}

/* -------------------------------------------------
  ANIMATIONS (Keyframes)
------------------------------------------------- */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
[data-aos]{opacity:0;transition:opacity 0.6s ease,transform 0.6s ease;}
[data-aos].aos-animate{opacity:1;animation:fadeInUp 0.6s both;}

/* -------------------------------------------------
  PARALLAX / SCROLL
------------------------------------------------- */
.parallax::before{
  content:'';
  position:absolute;
  inset:0;
  /*background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));*/
  z-index:0;
}
.parallax>*{position:relative;z-index:1;}