/* ------------------------------------------------------
   FONT FACE – LEMON MILK
------------------------------------------------------ */
@font-face {
  font-family: 'Lemon Milk';
  src: url('fonts/LEMONMILK-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('fonts/LEMONMILK-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('fonts/LEMONMILK-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: #111111;
  color: #E0E0E0;
  line-height: 1.6;
  text-align: center;
}

/* ------------------------------------------------------
   TYPOGRAPHY
------------------------------------------------------ */
h1, h2, h3 {
  font-family: 'Lemon Milk', sans-serif;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

h1 { font-size: 1.9rem; font-weight: 500; }
h2 { font-size: 1.5rem; font-weight: 400; margin-bottom: 1rem; }
h3 { font-size: 1.2rem; font-weight: 300; margin-bottom: 0.5rem; }
h1::selection {
  background: #FFCE00;
  color: #000;
}
p, li {
  font-size: 1rem;
  margin-bottom: 1rem;
}

a {
  color: #FFCE00;
}

.intro {
  font-size: 1.1rem;
  font-weight: 500;
  color: #CCCCCC;
  margin-bottom: 1.5rem;
}

/* ------------------------------------------------------
   LAYOUT
------------------------------------------------------ */
.section {
  padding: 40px 20px;
}

.section:nth-of-type(even) {
  background: #1A1A1A;
}

.section-content,
.hero,
.header-main,
.footer {
  max-width: 900px;
  margin: 0 auto;
}

/* ------------------------------------------------------
   HEADER
------------------------------------------------------ */
.header {
  background: #111111;
  border-bottom: 1px solid #222;
}

.topbar {
  background: #1A1A1A;
  padding: 8px 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 0.9rem;
  color: #CCCCCC;
}

.header-main {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 70px;
}

@media (min-width: 768px) {
  .logo img {
    height: 90px;
  }
}

@media (min-width: 1200px) {
  .logo img {
    height: 150px;
  }
}


/* ------------------------------------------------------
   BUTTONS
------------------------------------------------------ */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
  margin-top: 10px;
}

.btn-primary {
  background: #FFCE00;
  color: #111111;
}

.btn-primary:hover {
  background: #e0b700;
}

.btn-secondary {
  background: #333333;
  color: #FFCE00;
}

.btn-secondary:hover {
  background: #444444;
}

/* ------------------------------------------------------
   HERO
------------------------------------------------------ */
.hero {
  padding-top: 80px;
  padding-bottom: 80px;
}

.hero .usp-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  font-weight: 600;
}

.hero-stats {
  margin: 20px 0;
  color: #CCCCCC;
}

/* ------------------------------------------------------
   CARDS
------------------------------------------------------ */
.feature-cards,
.price-cards,
.process-steps {
  display: grid;
  gap: 20px;
  justify-items: center;
}

.card,
.price-card,
.process-steps li,
.faq-item {
  /*background: #606060;*/
  background: linear-gradient(
  to bottom,
  #111111,
  #111111,
  #2c2c2c
  );
  color: #E0E0E0;
  padding: 20px;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 0 7px rgba(255,206,0,0.4);
  border: 2px solid #2c2c2c;
  
}

/* ------------------------------------------------------
   LISTS
------------------------------------------------------ */
.section ul,
.section ol {
  max-width: 600px;
  margin: 0 auto 1rem auto;
  text-align: left;
}

/* ------------------------------------------------------
   ABOUT
------------------------------------------------------ */
.about-wrapper {
  display: grid;
  gap: 20px;
  justify-items: center;
}

.about-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
}

/* ------------------------------------------------------
   FAQ
------------------------------------------------------ */
.faq-item {
  /*background: #606060;
  color: #E0E0E0;
  padding: 20px;
  border-radius: 12px;
  
  max-width: 500px;
  width: 100%;
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
  border: 1px solid #FFCE00;
  margin: 20px*/
  margin: 20px;
  background: linear-gradient(
  to bottom,
  #111111,
  #111111,
  #2c2c2c
  );
  color: #E0E0E0;
  padding: 20px;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 0 7px rgba(255,206,0,0.4);
  border: 2px solid #222;

}

/* ------------------------------------------------------
   BOOKING
------------------------------------------------------ */
.booking .calendly-inline-widget {
  margin-top: 20px;
}

/* ------------------------------------------------------
   FOOTER
------------------------------------------------------ */
.footer {
  background: #000000;
  color: #FFCE00;
  text-align: center;
  padding: 30px 20px;
}

.topbar a {
  color: #E0E0E0;
  text-decoration: none;
  font-weight: 500;
  transition: 0.2s ease;
}

.topbar a:hover {
  color: #FFCE00;
}


.footer .topbar a:hover {
  color: #FFCE00;
}

.legal-links a {
    color: #FFCE00;
}


/* ------------------------------------------------------
   RESPONSIVE BREAKPOINTS
------------------------------------------------------ */
@media (min-width: 768px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }

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

  .about-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.2rem; }

  .section {
    padding: 70px 20px;
  }

  .feature-cards,
  .price-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}