@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap');

html {
      font-size: 62.5%; /* 1rem = 10px */
      scroll-behavior: smooth;
    }

:root {
    /* NAVBAR */
    --nav-height: 7rem; /* ~70px (better than vh for mobile) */
    /* SPACING SCALE */
    --space-xs: 0.8rem;
    --space-sm: 1.2rem;
    --space-md: 2rem;
    --space-lg: 3.2rem;
     /* BORDER RADIUS */
    --radius-sm: 1rem;
    --radius-md: 2rem;
    /* HORIZONTAL GLIDER */
    --glider-gap: 2rem;
    /* TYPOGRAPHY */
    
    /* .alegreya-title {
        font-family: "Alegreya", serif;
        font-optical-sizing: auto;
        font-weight: 900;
        font-style: normal;
      } */
    

      /* .alegreya-sans-medium {
        font-family: "Alegreya Sans", sans-serif;
        font-weight: 500;
        font-style: normal;
      } */

      /* .alegreya-sans-medium-italic {
        font-family: "Alegreya Sans", sans-serif;
        font-weight: 500;
        font-style: italic;
      } */

     

    /* COLORS */
    --color-primary: #8fe1b0;
    --color-background-100: #c9d1e6;
    --color-background-200: #9aa8cc;
    --color-background-300: #6e82b3;
    --color-background-400: #465c8c;
    --color-background-500: #1e263d; /* base */
    --color-background-600: #181f33;
    --color-background-700: #121828;
    --color-background-800: #0c101c;
    --color-background-900: #070913;
    /* Neutrals */
    --color-contrast-white: #ffffff;
    --color-contrast-offwhite: #f1f5f9;
    --color-contrast-grey-100: #e5e7eb;
    --color-contrast-grey-300: #9ca3af;
    --color-contrast-grey-500: #6b7280;
    --color-contrast-grey-700: #374151;
    --color-contrast-grey-900: #111827; 
    
    /* surface cards, panels, sections*/
    --color-surface-blue: #232c47;
    --color-surface-blue-soft: #2a3555;
    --color-surface-cyan: #1f3a44;
    --color-surface-cyan-soft: #244a54;
    --color-surface-purple: #2c2548;
    --color-surface-purple-soft: #3a2f5f;
    --color-surface-green: #1f3d33;
    --color-surface-green-soft: #254f42;
    /* rich surface -  hero/profile - Works well with white text*/
    --color-surface-accent-cyan: #164e63;
    --color-surface-accent-purple: #4c1d95;
    --color-surface-accent-magenta: #9d174d;
    --color-surface-accent-blue: #1e40af;
    --color-surface-accent-green: #166534;  
    /* gradient profile cards/banners */
    --gradient-blue-cyan: linear-gradient(135deg, #1e263d, #22d3ee);
    --gradient-blue-purple: linear-gradient(135deg, #1e263d, #8b5cf6);
    --gradient-blue-green: linear-gradient(135deg, #1e263d, #8fe1b0);
    --gradient-purple-pink: linear-gradient(135deg, #4c1d95, #ff6f91);
    --gradient-cyan-green: linear-gradient(135deg, #164e63, #8fe1b0);
    --gradient-dark-elegant: linear-gradient(135deg, #1e263d, #2c2548, #1f3d33);
    /* ===== Core Extensions ===== */
    --gradient-blue-magenta: linear-gradient(135deg, #1e263d, #d65cff);
    --gradient-blue-gold: linear-gradient(135deg, #1e263d, #f59e0b);
    --gradient-blue-yellow: linear-gradient(135deg, #1e263d, #fde047);
    --gradient-blue-soft-cyan: linear-gradient(135deg, #1e263d, #67e8f9);
    --gradient-blue-soft-purple: linear-gradient(135deg, #1e263d, #a78bfa);
    --gradient-blue-soft-pink: linear-gradient(135deg, #1e263d, #ffb3c7);
    /* ===== Dual Accent (richer blends) ===== */
    --gradient-cyan-purple: linear-gradient(135deg, #22d3ee, #8b5cf6);
    --gradient-cyan-pink: linear-gradient(135deg, #22d3ee, #ff6f91);
    --gradient-purple-green: linear-gradient(135deg, #8b5cf6, #8fe1b0);
    --gradient-magenta-purple: linear-gradient(135deg, #d65cff, #8b5cf6);
    --gradient-pink-gold: linear-gradient(135deg, #ff6f91, #f59e0b);
    --gradient-cyan-green-soft: linear-gradient(135deg, #67e8f9, #8fe1b0);
    /* ===== Deep / Premium (darker, richer) ===== */
    --gradient-deep-purple: linear-gradient(135deg, #1e263d, #4c1d95);
    --gradient-deep-cyan: linear-gradient(135deg, #1e263d, #164e63);
    --gradient-deep-magenta: linear-gradient(135deg,  #9d174d, #1e263d);
    --gradient-deep-green: linear-gradient(135deg, #1e263d, #166534);
    --gradient-night-luxury: linear-gradient(135deg, #1e263d, #2c2548, #4c1d95);
    /* ===== Multi-stop (modern SaaS look) ===== */
    --gradient-aurora: linear-gradient(135deg, #1e263d, #22d3ee, #8fe1b0);
    --gradient-neon: linear-gradient(135deg, #1e263d, #d65cff, #22d3ee);
    --gradient-sunset-soft: linear-gradient(135deg, #1e263d, #ff6f91, #fde047);
    --gradient-ocean-depth: linear-gradient(135deg, #0c101c, #1e263d, #22d3ee);
    --gradient-forest-tech: linear-gradient(135deg, #0c101c, #1f3d33, #8fe1b0);
    /* ===== Subtle UI Gradients (very important) ===== */
    --gradient-surface-subtle: linear-gradient(135deg, #1e263d, #232c47);
    --gradient-surface-elevated: linear-gradient(135deg, #232c47, #2a3555);
    --gradient-surface-cool: linear-gradient(135deg, #1e263d, #1f3a44);
    --gradient-surface-warm: linear-gradient(135deg, #1e263d, #2c2548);
    
    /* orange */
    --color-contrast-orange-light: #fdba74;
    --color-contrast-orange: #fb923c;
    --color-contrast-orange-deep: #ea580c;

    /* Red */
    --color-contrast-red-light: #fca5a5;
    --color-contrast-red: #ef4444;
    --color-contrast-red-deep: #b91c1c;

    /* Cyan → modern / tech */
    --color-accent-cyan: #22d3ee;
    --color-accent-cyan-soft: #67e8f9;

    /* Purple → depth / elegance */
    --color-accent-purple: #8b5cf6;
    --color-accent-purple-soft: #a78bfa;

    /* Pink / Magenta → CTA / highlights */
    --color-accent-pink: #ff6f91;
    --color-accent-magenta: #d65cff;

    /* Gold / Honey → premium feel */
    --color-accent-gold: #f59e0b;
    --color-accent-honey: #ffb703;

    /* Yellow → attention / warning */
    --color-accent-yellow: #fde047;
    --color-accent-yellow-soft: #fef08a;
  
    /* CYAN */

.image-card-surface-cyan {
  background-color: var(--color-surface-cyan);
}
.image-card-surface-cyan-soft {
  background-color: var(--color-surface-cyan-soft);
}
.image-card-surface-accent-cyan {
  background-color: var(--color-surface-accent-cyan);
}
.image-card-accent-cyan {
  background-color: var(--color-accent-cyan);
}
.image-card-accent-cyan-soft {
  background-color: var(--color-accent-cyan-soft);
}

/* PURPLE */
.image-card-surface-purple {
  background-color: var(--color-surface-purple);
}
.image-card-surface-purple-soft {
  background-color: var(--color-surface-purple-soft);
}
.image-card-surface-accent-purple {
  background-color: var(--color-surface-accent-purple);
}
.image-card-accent-purple {
  background-color: var(--color-accent-purple);
}
.image-card-accent-purple-soft {
  background-color: var(--color-accent-purple-soft);
}

/* MAGENTA */
.image-card-surface-accent-magenta {
  background-color: var(--color-surface-accent-magenta);
}
.image-card-accent-pink {
  background-color: var(--color-accent-pink);
}
.image-card-accent-magenta {
  background-color: var(--color-accent-magenta);
}

/* GREEN */
.image-card-surface-green {
  background-color: var(--color-surface-green);
}
.image-card-surface-green-soft{
  background-color: var(--color-surface-green-soft);
}
.image-card-surface-accent-green{
  background-color: var(--color-surface-accent-green);
}
 /* orange */
.image-card-contrast-orange-light {
  background-color: var(--color-contrast-orange-light);
}
.image-card-contrast-orange {
  background-color: var(--color-contrast-orange);
}
.image-card-contrast-orange-deep {
  background-color: var(--color-contrast-orange-deep);
}
  /* Red */
.image-card-contrast-red-light {
  background-color: var(--color-contrast-red-light);
}
.image-card-contrast-red {
  background-color: var(--color-contrast-red);
}
.image-card-contrast-red-deep {
  background-color: var(--color-contrast-red-deep);
}
/* GOLD-YELLOW */
.image-card-accent-gold {
  background-color: var(--color-accent-gold);
}
.image-card-accent-honey {
  background-color: var(--color-accent-honey);
}
.image-card-accent-yellow {
  background-color: var(--color-accent-yellow);
}
.image-card-accent-yellow-soft {
  background-color: var(--color-accent-yellow-soft);
}

/* GRADIENTS */
/*USED*/
.image-card-gradient-blue-cyan {
  background: var(--gradient-blue-cyan);
}
/* USED */
.image-card-gradient-blue-purple {
  background: var(--gradient-blue-purple);
}
.image-card-gradient-blue-green {
  background: var(--gradient-blue-green);
}
.image-card-gradient-blue-magenta {
  /*USED*/
  background: var(--gradient-blue-magenta);
}
.image-card-gradient-blue-gold {
  background: var(--gradient-blue-gold);
}
.image-card-gradient-blue-yellow {
  background: var(--gradient-blue-yellow);
}
.image-card-gradient-blue-soft-cyan {
  background: var(--gradient-blue-soft-cyan);
}
.image-card-gradient-blue-soft-purple {
  background: var(--gradient-blue-soft-purple);
}
.image-card-gradient-blue-soft-pink {
  background: var(--gradient-blue-soft-pink);
}

/* BLUE DARKER */
.image-card-gradient-deep-purple {
  background: var(--gradient-deep-purple);
}
.image-card-gradient-deep-cyan {
  /* USED */
  background: var(--gradient-deep-cyan);
}
.image-card-gradient-deep-magenta {
  /* USED */
  background: var(--gradient-deep-magenta);
}
.image-card-gradient-deep-green {
  background: var(--gradient-deep-green);
}
.image-card-gradient-night-luxury {
  /* USED */
  background: var(--gradient-night-luxury);
}
/* Multi-stop gradients */
.image-card-gradient-aurora {
  background: var(--gradient-aurora);
}

.image-card-gradient-gradient-sunset-soft {
  background: var(--gradient-sunset-soft);
}
/*  Subtle UI Gradients */
.image-card-gradient-surface-subtle {
  background: var(--gradient-surface-subtle);
}
.image-card-gradient-surface-elevated {
  background: var(--gradient-surface-elevated);
}
.image-card-gradient-surface-cool {
  /* USED */
  background: var(--gradient-surface-cool);
}
.image-card--gradient-surface-warm {
  /* USED */
  background: var(--gradient-surface-warm);
}
 
    
/* OTHER GRADIENTS */    
/*USED*/
.image-card-gradient-purple-pink {
  background: var(--gradient-purple-pink);
}
.image-card-gradient-purple-green {
  background: var(--gradient-purple-green);
}
.image-card-gradient-magenta-purple {
  background: var(--gradient-magenta-purple);
}
.image-card-gradient-pink-gold {
  background: var(--gradient-pink-gold);
}


.image-card-gradient-cyan-green {
  /* USED */
  background: var(--gradient-cyan-green);
}
.image-card-gradient-cyan-green-soft {
  /* USED */
  background: var(--gradient-cyan-green-soft);
}
.image-card-gradient-cyan-purple {
  background: var(--gradient-cyan-purple);
}
.image-card-gradient-cyan-pink {
  background: var(--gradient-cyan-pink);
}
.image-card-gradient-dark-elegant {
  /* USED */
  background: var(--gradient-dark-elegant);
}

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

    body {
      font-family: "Alegreya Sans", sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 1.6rem;
      line-height: 1.5;
      background-color: var(--color-background-500);;
      color: var(--color-text);
      
    }
    /* DISCLOSURE POPUP */
.affdisc-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 99999;
    width: 720px;        /* Editable */
    max-width: 95%;
    min-height: 120px;   /* Editable */
    padding: var(--space-md);
    box-sizing: border-box;
    background: var(--color-background-600);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;
}

.affdisc-popup.affdisc-show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.affdisc-popup.affdisc-hide {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-20px);
}

.affdisc-close-icon {
    position: absolute;
    top: 10px;
    right: 12px;

    border: 0;
    background: transparent;

    font-size: 28px;
    line-height: 1;
    color: var(--color-primary);
    cursor: pointer;
}

.affdisc-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.affdisc-title {
    margin: 0;
    font-size: 2rem;
    color: var(--color-primary);
    font-family: "Alegreya", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-size: 2rem;
}

.affdisc-text {
    margin: 0;
    line-height: 1.4;
    font-size: 1.8rem;
    color: var(--color-background-300);
}

.affdisc-link {
    text-decoration: underline;
    color: var(--color-background-100);
}

.affdisc-button {
    align-self: flex-end;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;   
    transition: all 0.2s ease;
    font-family: "Alegreya", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-size: 2rem;
    background-color: var(--color-primary);
    color: var(--color-background-700);
}




    /* PAGE WRAPPER */
    .page {
         min-height: 100vh;
            }

    /* CENTERING SYSTEM */
    .container {
        width: 100%;
        max-width: 1100px;
        margin-inline: auto;
        padding-inline: 1.6rem;
        }

            /* SECTIONS */
            .section {
            width: 100%;
            padding: 6rem 0;
            }


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

    img {
      display: block;
      max-width: 100%;
    }
      /* NAVBAR */

    .navbar {
      height: var(--nav-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--space-lg);
      background-color: var(--color-background-500);
    }

    .nav-left,
    .nav-right {
      display: flex;
      align-items: center;
    }

    .logo {
      font-size: 1.8rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .logo-img {
      display: block;
      height: 40px;
      width: auto;
      object-fit: contain;
    }

   
     .lang-dropdown {
        position: relative;
        }

    /* BUTTON */
    .lang-btn {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        background: var(--color-primary);
        border: 0.1rem solid var(--color-primary);
        color: var(--color-background-500);
        border-radius: 0.6rem;
        padding: 0.6rem 1rem;
        cursor: pointer;
        font-size: 1.6rem;
        font-weight: bold;
        transition: all 0.2s ease;
        }

       

        /* FLAG */
        .flag {
        width: 2.4rem;
        height: 2rem;
        object-fit: cover;
        border-radius: 0.2rem;
        }

        /* MENU */
        .lang-menu {
        position: absolute;
        top: calc(100%);
        right: 0;
        list-style: none;
        background: var(--color-background-600);
        border: 0.1rem solid var(--color-primary);
        border-radius: 0.8rem;
        box-shadow: 0 1rem 2rem rgba(0,0,0,0.08);
        min-width: 18rem;
        overflow: hidden;

        opacity: 0;
        transform: translateY(-0.5rem);
        pointer-events: none;

        transition: all 0.2s ease;
        z-index: 100;
        }

        /* SHOW MENU (hover desktop) */
        .lang-dropdown:hover .lang-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        }

        /* ITEMS */
        .lang-menu li a {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.2rem;
        font-size: 1.6rem;
        font-weight: bold;
        color: var(--color-primary);
        transition: background 0.2s ease;
        }

        /* HOVER EFFECT */
        .lang-menu li a:hover {
        background: var(--color-primary);
        color: var(--color-background-500);
        }

        /* ACTIVE (optional highlight current lang) */
        .lang-menu li a.active {
        background: rgba(79, 70, 229, 0.12);
        font-weight: 500;
        }
        /* MOBILE CLICK SUPPORT */
        .lang-dropdown.open .lang-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        }

        /* SIDENOTE */
.sidenote {
  max-width: 600px;
  width: 100%;
  margin: 1.5rem auto;
  padding-left: 1rem;
  opacity: 0.85;
  box-sizing: border-box;  
}

.sidenote p {
  margin: 0;
  font-style: italic;
  line-height: 1.6;
  font-size: 1.8rem;
  text-align: left;
  color: inherit;
  color: var(--color-background-100);
}
.disclosure {
  color: var(--color-background-300)
}



/* LIFESTYLE / FUN FACTS */

.lifestyle {
  padding: var(--space-lg) var(--space-md);
}

.lifestyle__wrapper {
  max-width: 60rem;
  margin: 0 auto;
}

.lifestyle__title {
  text-align: center;
  margin-bottom: var(--space-lg);
  color: var(--color-background-100);
  font-family: "Alegreya", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: 4rem;
  line-height: 1.1;
}

/* ITEM */
.lifestyle__item {
  border-radius: var(--radius-md);
  background: var(--color-background-600);
  margin-bottom: var(--space-md);
  overflow: hidden;
  box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.08);
}

/* HEADER */
.lifestyle__header {
  width: 100%;
  padding: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 2rem;
  background-color: var(--color-background-600);
  /* font-family: "Alegreya", serif;
  font-optical-sizing: auto; */
  font-weight: 900;
  font-style: normal;
  color: var(--color-background-100);
  line-height: 1.5;
}


/* ICON ANIMATION */
.lifestyle__icon i {
  transition: transform 0.3s ease;
  
}

.lifestyle__item.active .lifestyle__icon i {
  transform: rotate(180deg);
}

/* CONTENT (smooth height trick) */
.lifestyle__content {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

/* inner wrapper needed for height calculation */
.lifestyle__inner {
  padding: 0 var(--space-md) var(--space-md);
}

/* TEXT */
.lifestyle__text {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
  font-weight: 700;
  color: var(--color-background-100);
  font-size: 2rem;
}

/* LIST */
.lifestyle__list {
  list-style: none;
}

.lifestyle__list li {
  margin-bottom: var(--space-xs);
  color: var(--color-background-200);
  font-size: 1.8rem;
}

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

.lifestyle__list a:hover {
  text-decoration: underline;
}

        /* HORIZONTQL GLIDER */
        .glider-section--desktop {
          width: 100%;
          position: relative;
          
          
        }
        .glider-section--mobile {
          display: none;
        }

        .glider-container {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: var(--color-background-500);
        }
        .glider-track {
            display: flex;
            gap: var(--glider-gap, 2rem);
        }
        .glider-item {
           flex: 0 0 auto;
            width: 22rem;
            height: 28rem;
            
        }
        .glider-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
   
    /* FLEXBOX GALLERY  */
      .gallery-section {
      max-width: 1800px;
      margin: 10rem auto;
      padding: var(--space-lg) var(--space-md);
    }
    .gallery-title {
      text-align: center;
      margin-bottom: var(--space-lg);
      color: var(--color-background-100);
      font-family: "Alegreya", serif;
      font-optical-sizing: auto;
      font-weight: 900;
      font-size: 4rem;
    }
      /* FLEX CONTAINER */
      .gallery {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-md);
        align-items: flex-start;
        
      }
      .gallery-card {
      width: 36rem; 
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--color-background-600);
      display: flex;
      flex-direction: column;
      box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.06);
      text-decoration: none;
      color: inherit;
      transition: transform 0.2s ease;
      position: relative; 
    }
     /* DARK OVERLAY */
      .gallery-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.25);
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none; 
        z-index: 1;
      }

      /* SHOW OVERLAY ON HOVER */
      .gallery-card:hover::after {
        opacity: 1;
      }
      .gallery-card-img {
        aspect-ratio: 4 / 3;
        height: auto;
        width: 100%;
        background: var(--color-surface-accent-magenta);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: #666;
      }
      .gallery-card-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      .gallery-card h3 {
          padding: var(--space-sm);
          font-size: 2rem;
          text-align: center;
          color: var(--color-background-100);
         }

    /* FOOTER */
    .site-footer {
      background-color: var(--color-background-600);
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 3rem 1.5rem 1.5rem;
    }

    .footer-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 2rem;
    }
    .footer-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .footer-col h4 {
      margin: 0 0 1rem;
      padding: 0;
      line-height: 1.2;
      font-size: 2.2rem;
      color: var(--color-primary);
      font-weight: 900;
    }

    .footer-col a {
      display: block;
      color: var(--color-background-200);
      text-decoration: none;
      font-size: 1.8rem;
      padding: 0.35rem 0;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .footer-col a:hover {
      color: var(--color-background-300);
      transform: translateY(1px);
    }

    .footer-bottom {
      border-top: 1px solid var(--color-background-400);
      margin-top: 3rem;
      padding-top: 1.25rem;
      text-align: center;
      font-size: 1.6rem;
      color: var(--color-background-400);
    }
    .footer-bottom .brand {
      color: var(--color-primary);
      font-size: 1.8rem;
    }

    .footer-bottom a {
      color: var(--color-background-200);
      text-decoration: none;
      font-size: 1.4rem;
    }

    .footer-bottom a:hover {
      color: var(--color-background-300);
    }

    .footer-heart {
      margin: 0 0.25rem;
      color: var(--color-primary);
      transition: color 0.2s ease;
    }   

    /* COOKIE */
    .cookie-banner {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 720px;
        max-width: 90vw;
        background: var(--color-background-600);
        padding: 16px 20px;
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        z-index: 9999;
        animation: fadeInUp 0.4s ease;
      }

      .cookie-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        
      }
      .cookie-content h3 {
        color: var(--color-primary);
        font-family: "Alegreya", serif;
        font-optical-sizing: auto;
        font-weight: 900;
        font-style: normal;
        font-size: 2rem;
      }

      .cookie-content p {
        margin: 0;
        font-size: 1.8rem;
        line-height: 1.4;
        color: var(--color-background-300);
        
      }
      .cookie-content a {
        color: var(--color-background-100);
        text-decoration: underline;
        
        
      }
      .cookie-content span {
        color: var(--color-background-200);
      }

      .cookie-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
      }

      .cookie-btn {
        border: none;
        padding: 8px 14px;
        border-radius: 8px;
        cursor: pointer;
       
        transition: all 0.2s ease;
        font-family: "Alegreya", serif;
        font-optical-sizing: auto;
        font-weight: 900;
        font-style: normal;
        font-size: 2rem;
      }

      /* Equal visual weight (important for GDPR) */
      .accept {
        background: var(--color-primary);
        color: var(--color-background-500);
      }

      .reject {
        background: var(--color-background-500);
        color: var(--color-primary);
      }

      
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translate(-50%, 20px);
        }
        to {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }    

       
    /* RESPONSIVE — TABLET */

    @media (max-width: 1024px) {
     
      html {
        font-size: 60%; /* slightly smaller scaling */
      }
      .navbar {
         padding: 0 var(--space-md);
      }

      .lifestyle__title {
        text-align: left;
        padding: var(--space-lg) var(--space-md);
        font-size: 3.2rem;
      }

      .glider-section--desktop {
          display: none;
        }
        .glider-section--mobile {
         display: block;
         margin: var(--space-lg) 0;
      }
       .mobile-glider {
            overflow-x: auto;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            background-color: var(--color-background-500);
          }
          .mobile-track {
            display: flex;
            width: max-content;
            gap: 0;
            padding: 2rem;
          }
       .mobile-item {
          flex: 0 0 auto;
          width: 60vw;
          height: 25rem;
          scroll-snap-align: center;
          border-radius: 1rem;
          overflow: hidden;
          
        }
      .mobile-nav {
          display: flex;
          justify-content: space-between;
          margin-top: 1rem;
          padding: 0 1rem;
        }

        .glider-btn {
          background: var(--color-primary);
          color: var(--color-background-900);
          border: none;
          border-radius: 999px;
          width: 3rem;
          height: 3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: 0.2s ease;
        }
        .glider-btn:disabled {
            cursor: not-allowed;
            transform: scale(0.95);
          }

        .glider-btn:hover {
          transform: scale(1.1);
        }

        .glider-btn i {
          font-size: 1.2rem;
        }
            
    
    }
     /* RESPONSIVE — MOBILE */

    @media (max-width: 768px) {

      html {
        font-size: 58%; /* better readability on small screens */
      }
    .affdisc-popup {
        width: 95%;
        top: 10px;
        padding: 18px;
    }

    

    .affdisc-button {
        width: 100%;
    }

      .section-block {
          padding: var(--space-md) var(--space-sm);
        }
        #personalities-growth h2,
        #personalities-social h2,
        #personalities-behavior h2,
        #personalities-care h2 {
            text-align: left;
        }
        
        .footer-columns {
          row-gap: 2.5rem;
        }

        .footer-col h4 {
          margin-bottom: 0.75rem;
        }
    }
  @media (max-width: 600px) { 
     .lifestyle__header {
        font-size: 1.6rem;
      }
       .gallery {
        justify-content: center;
      }
     
      .gallery-title {
      text-align: left;
      }
       .gallery-card {
        flex: 0 0 100%;  
        max-width: 38rem; 
      }
       .cookie-banner {
          width: 90vw;
          bottom: 10px;
          padding: 14px;
        }

        .cookie-actions {
          justify-content: space-between;
        }

        .cookie-btn {
          flex: 1;
        }
  }