:root {
    /* Colors (Dark Mode Palette) */
    --color-base-dark: #1F1F1F;      /* Very Dark Grey/Off-Black */
    --color-base-light: #F7F7F7;     /* Off White Premium */
    --color-text-on-dark: #EFEFEF;   /* Off White Text */
    --color-text-on-light: #2F2F2F;  /* Very Dark Grey Text */
    --color-accent: #A07D5A;         /* Soft Bronze */
    --color-accent-hover: #b89570;   /* Lighter Bronze for hover */
    --color-neutral-grey: #5A5A5A;   /* Medium Warm Grey */
    --color-border-subtle: rgba(239, 239, 239, 0.1); /* Subtle border on dark */

    /* Typography */
    --font-primary: 'Cairo', sans-serif;
    --font-secondary: 'Cairo', serif; /* For major headings */
    --font-size-base: 16px; /* Adjust as needed */
    --font-size-large: 1.125rem; /* ~18px */
    --font-size-xl: 1.25rem;  /* ~20px */
    --font-size-h1: 3.5rem;   /* ~56px */
    --font-size-h2: 2.5rem;   /* ~40px */
    --font-size-h3: 1.5rem;   /* ~24px */

    /* Spacing */
    --spacing-unit: 1rem; /* Base spacing unit ~16px */
    --section-padding-y: calc(var(--spacing-unit) * 6); /* Vertical padding for sections */
    --container-max-width: 1200px;
    --container-narrow-max-width: 800px;
  }

  /* Basic Reset & Defaults */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth; /* Optional smooth scrolling */
  }

  body {
    font-family: var(--font-primary);
    background-color: var(--color-base-dark);
    color: var(--color-text-on-dark);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
  }

  /* Links */
  a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease;
  }

  a:hover,
  a:focus {
    color: var(--color-accent-hover);
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary); /* Using serif for headings */
    font-weight: 700; /* Bold for Playfair Display */
    line-height: 1.2;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
  }

  h1 { font-size: var(--font-size-h1); }
  h2 { font-size: var(--font-size-h2); }
  h3 { font-size: var(--font-size-h3); }

  p {
    margin-bottom: var(--spacing-unit);
	
  }

  .text--large {
    font-size: var(--font-size-large);
    line-height: 1.8;
  }

  .text--center {
    text-align: center;
  }

  /* Brand Name Emphasis */
  .brand-name {
    font-weight: 700; /* Or slightly different style */
    color: var(--color-accent);
  }

  /* ----------------------------------------- */
  /* --- Layout & Containers --- */
  /* ----------------------------------------- */
  .container {
    width: 90%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
  }

  .container--narrow {
    max-width: var(--container-narrow-max-width);
  }

  .main-content {
    /* Allows footer to stick bottom if needed */
  }

  /* Section Base Styles */
  .section--padded {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
  }

  .section__title {
    margin-bottom: calc(var(--spacing-unit) * 3);
  }

  .section__title--subtle {
    font-family: var(--font-primary); /* Using primary font for some titles */
    font-weight: 600;
    font-size: var(--font-size-xl);
    color: var(--color-neutral-grey); /* More subtle color */
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .section__title--inspirational {
      font-size: var(--font-size-h2); /* Adjust as needed */
      font-style: italic; /* Example stylistic choice */
  }

  /* Background Variations */
  .bg--light-neutral {
    background-color: var(--color-base-light);
    color: var(--color-text-on-light); /* Adjust text color for light bg */
  }

  .bg--light-neutral h2,
  .bg--light-neutral h3,
  .bg--light-neutral .brand-name {
      color: var(--color-text-on-light); /* Ensure heading colors contrast */
  }
  .bg--light-neutral .section__title--subtle {
      color: var(--color-neutral-grey); /* Keep subtle color */
  }
  .bg--light-neutral .advantage-card__icon svg,
  .bg--light-neutral .step__icon svg {
      stroke: var(--color-text-on-light); /* Adjust icon stroke */
  }


  .bg--dark { /* Example for final CTA */
      background-color: var(--color-base-dark); /* Or a slightly different dark shade */
      color: var(--color-text-on-dark);
  }
  .bg--dark h2, .bg--dark h3 {
      color: var(--color-text-on-dark);
  }


  /* ----------------------------------------- */
  /* --- Buttons (Kept for other uses) --- */
  /* ----------------------------------------- */
  .btn {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: calc(var(--spacing-unit) * 0.9) calc(var(--spacing-unit) * 2.5);
    border: 2px solid transparent;
    border-radius: 50px; /* Pill shape */
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.4; /* Ensure text vertical alignment */
  }

  .btn--primary {
    background-color: var(--color-accent);
    color: var(--color-base-dark); /* Dark text on accent button */
    border-color: var(--color-accent);
  }

  .btn--primary:hover,
  .btn--primary:focus {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-base-dark);
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .btn--secondary {
    background-color: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  .btn--secondary:hover,
  .btn--secondary:focus {
    background-color: var(--color-accent);
    color: var(--color-base-dark);
  }

  .btn--large {
    padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 3.5);
    font-size: 1rem;
  }

  /* .btn--hero {
     margin-top: calc(var(--spacing-unit) * 2); /* This style is no longer needed for the scroll icon */
  /* } */

  /* ----------------------------------------- */
  /* --- Section: Hero --- */
  /* ----------------------------------------- */
  .hero {
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    position: relative;
    overflow: hidden;
    background-color: var(--color-base-dark); /* Fallback color */
    background-image: url('/images/cfc.jpg'); /* !! REPLACE with actual image !! */
    background-size: cover;
    background-position: center center;
    text-align: center;
    color: var(--color-text-on-dark); /* Ensure text is visible */
  }

  .hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)); /* Dark overlay */
    z-index: 1;
  }

  .hero__content {
    position: relative; /* Crucial for absolute positioning of the scroll icon */
    z-index: 2;
    max-width: 800px; /* Limit content width */
    /* Add padding at the bottom to make space for the absolutely positioned scroll icon */
    padding-bottom: calc(var(--spacing-unit) * 5 + 40px); /* e.g., 80px total, (icon height + desired space) */
  }

  .hero__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem); /* Responsive font size */
    margin-bottom: var(--spacing-unit);
    line-height: 1.1;
  }

  .hero__subtitle {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-family: var(--font-primary);
    font-weight: 400;
    opacity: 0.9;
    margin-bottom: calc(var(--spacing-unit) * 3); /* Space between subtitle and where scroll icon will appear */
  }

  /* Scroll Down Icon Styles */
  .scroll-down-indicator {
    display: inline-block;
    position: absolute;
    bottom: var(--spacing-unit) * 1.5; /* Adjust distance from bottom of hero__content (e.g., 24px) */
    left: 50%;
    /* transform: translateX(-50%); Centering and Y-translation handled by animation too */
    width: 50px;   /* Icon size */
    height: 50px;  /* Icon size */
    color: var(--color-text-on-dark); /* Icon color, blends with hero text */
    cursor: pointer;
    transition: color 0.3s ease; /* Smooth color change on hover */
    transform: translateX(-50%); /* Initial centering */
  }

  .scroll-down-indicator svg {
    width: 100%;
    height: 100%;
    stroke: currentColor; /* SVG lines take the parent's color */
    fill: none;           /* No fill for a chevron/arrow */
    stroke-width: 2.5;    /* Line thickness of the icon */
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .scroll-down-indicator:hover {
    color: var(--color-accent); /* Change to accent color on hover for feedback */
    /* Optional: Slightly alter animation or add a subtle transform effect on hover if desired,
       but ensure it doesn't clash with the main animation.
       Example: transform: translateX(-50%) scale(1.1);
    */
  }

  /* Animation for the scroll indicator */
  @keyframes bounce-scroll-indicator {
    0%, 20%, 50%, 80%, 100% {
      transform: translateX(-50%) translateY(0);
    }
    40% {
      transform: translateX(-50%) translateY(8px); /* How far it bounces down */
    }
    60% {
      transform: translateX(-50%) translateY(4px);
    }
  }

  .scroll-down-indicator {
    animation: bounce-scroll-indicator 2s infinite;
  }


  /* ----------------------------------------- */
  /* --- Section: Advantages --- */
  /* ----------------------------------------- */
  .advantages__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: calc(var(--spacing-unit) * 3);
  }

  .advantage-card {
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .advantage-card__icon {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    display: inline-block; 
  }

  .advantage-card__icon svg {
    width: 48px; 
    height: 48px;
    stroke: var(--color-accent); 
    stroke-width: 1.5; 
  }

  .advantage-card__title {
    font-size: var(--font-size-xl);
    font-family: var(--font-primary); 
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
  }

  /* ----------------------------------------- */
  /* --- Section: How it Works --- */
  /* ----------------------------------------- */
  .how-it-works__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    position: relative;
  }

  .step {
    text-align: center;
    position: relative; 
  }

  .step__number {
    position: absolute;
    top: -15px; 
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-neutral-grey);
    background-color: var(--color-base-light); 
    padding: 2px 8px;
    border-radius: 50px;
    z-index: 1; 
    .bg--dark & { 
        background-color: var(--color-base-dark);
        color: var(--color-neutral-grey);
      }
    .bg--light-neutral & { 
        background-color: var(--color-base-light);
        color: var(--color-neutral-grey);
      }
  }


  .step__icon {
    margin-bottom: calc(var(--spacing-unit) * 1);
    display: inline-block;
  }

  .step__icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--color-text-on-light); 
    stroke-width: 1.5;
    .bg--dark & { 
        stroke: var(--color-text-on-dark);
    }
  }

  .step__title {
    font-size: 1.1rem;
    font-family: var(--font-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
  }

  /* ----------------------------------------- */
  /* --- Section: Vision --- */
  /* ----------------------------------------- */
  .vision__quote {
    font-family: var(--font-secondary); 
    font-size: var(--font-size-xl);
    font-style: italic;
    line-height: 1.6;
    max-width: 700px; 
    margin: 0 auto calc(var(--spacing-unit) * 2) auto; 
    padding-left: var(--spacing-unit); 
    position: relative;
  }

  .vision__quote::before {
    content: '“';
    position: absolute;
    left: -10px;
    top: -10px;
    font-size: 4rem;
    color: var(--color-accent);
    opacity: 0.3;
    font-family: var(--font-secondary);
  }

  .vision__signature {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-grey);
  }

  /* ----------------------------------------- */
  /* --- Section: Final CTA --- */
  /* ----------------------------------------- */
  .cta--final {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
  }

  .cta__title {
    font-size: var(--font-size-h2);
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-on-dark); 
  }

  .cta__text {
    font-size: var(--font-size-large);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    opacity: 0.9;
    color: var(--color-text-on-dark); 
  }

  /* ----------------------------------------- */
  /* --- Footer --- */
  /* ----------------------------------------- */
  .footer--minimal {
    padding: calc(var(--spacing-unit) * 2) 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-neutral-grey);
    border-top: 1px solid var(--color-border-subtle); 
  }

  /* ----------------------------------------- */
  /* --- Responsiveness (Basic Examples) --- */
  /* ----------------------------------------- */
  @media (max-width: 992px) {
    :root {
        --font-size-h1: 2.8rem;
        --font-size-h2: 2rem;
        --section-padding-y: calc(var(--spacing-unit) * 4);
    }
    .advantages__grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: calc(var(--spacing-unit) * 2);
    }
    .how-it-works__steps {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: calc(var(--spacing-unit) * 2.5);
    }
  }

  @media (max-width: 768px) {
    :root {
        --font-size-h1: 2.2rem;
        --font-size-h2: 1.8rem;
    }
    .advantages__grid {
        grid-template-columns: 1fr 1fr; /* 2 columns */
    }
    .how-it-works__steps {
        grid-template-columns: 1fr 1fr; /* 2 columns */
    }
    .hero__content {
        padding-left: var(--spacing-unit);
        padding-right: var(--spacing-unit);
        /* Adjust padding-bottom for scroll icon on smaller screens if needed */
        padding-bottom: calc(var(--spacing-unit) * 4 + 35px); /* Slightly smaller padding for smaller icon */
    }
    .scroll-down-indicator {
        width: 35px;
        height: 35px;
        bottom: var(--spacing-unit); /* Adjust position if necessary */
    }
    .hero__subtitle {
        margin-bottom: calc(var(--spacing-unit) * 2.5);
    }
  }

  @media (max-width: 576px) {
    body {
        line-height: 1.6; 
    }
    .advantages__grid {
        grid-template-columns: 1fr; /* 1 column */
    }
    .how-it-works__steps {
        grid-template-columns: 1fr; /* 1 column */
        gap: calc(var(--spacing-unit) * 3); 
    }
    .step__number {
        top: 5px; 
        left: 15px;
        transform: none;
    }
    .step {
        text-align: left; 
        padding-left: 40px; 
    }
      .step__icon {
        position: absolute;
        left: 0;
        top: 35px; 
    }

    .btn {
        padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.8);
        font-size: 0.85rem;
    }
    .btn--large {
        padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2.5);
        font-size: 0.9rem;
    }
  }