@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v23-latin-300.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v23-latin-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v23-latin-500.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v23-latin-700.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/poppins-v23-latin-900.woff2') format('woff2');
  font-display: swap;
}

/* Force Poppins as the primary font */
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

:root {
  --color-dark: #2C0043;
  --color-light: #FFFFFF;
  --color-light-shade: #F6F5F4;
  --color-mid: #B7B7B7;
  --color-mid-glare: #D4D4D4;
  --color-mid-shade: #444444;
  --color-charcoal: #222;
  --color-primary: #420065;
  --color-primary-glare: #B6A7BD;
  --color-primary-bright: #F6F3F8;
  --color-inclusive: #A900C0;
  --color-inclusive-shade: #7F238B;
  --color-sustainable: #FF1958;
  --color-ethical: #E100A0;
  --color-ethical-glare: #f857ca;
  --color-original: #F56F00;
  --color-bright: #FFC000;
  --color-bright-glare: #FFC822;
  --space-2xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.3125rem);
  --space-xs: clamp(0.5625rem, 0.54rem + 0.09vw, 0.625rem);
  --space-s: clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem);
  --space-m: clamp(1.6875rem, 1.63rem + 0.28vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.18rem + 0.37vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.26rem + 0.56vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.35rem + 0.74vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.53rem + 1.11vw, 7.5rem);
  --size-step-xs: clamp(0.8rem, 0.96rem + 0.19vw, 0.9rem);
  --size-step-0: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --size-step-1: clamp(1.1875rem, 1.11rem + 0.37vw, 1.4375rem);
  --size-step-2: clamp(1.4375rem, 1.34rem + 0.46vw, 1.75rem);
  --size-step-3: clamp(1.75rem, 1.62rem + 0.65vw, 2.1875rem);
  --size-step-4: clamp(2.0625rem, 1.86rem + 1.02vw, 2.75rem);
  --size-step-5: clamp(2.5rem, 2.22rem + 1.39vw, 3.4375rem);
  --size-step-6: clamp(2.5rem, 1.96rem + 2.69vw, 4.3125rem);
  --size-step-7: clamp(3.5625rem, 3.03rem + 2.69vw, 5.375rem);
  --size-step-8: clamp(4.3125rem, 3.61rem + 3.52vw, 6.6875rem);
  --size-step-9: clamp(5.1875rem, 4.24rem + 4.72vw, 8.375rem);
  --font-base: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --radius: 0.6rem;
  --radius-s: 0.4rem;
  --radius-xs: 0.2rem;
  --radius-l: clamp(0.75rem, 4vw, 1.2rem);
  --radius-xl: clamp(1.5rem, 6vw, 2.5rem);
  --gradient-standard: radial-gradient(circle at 50% 50%, rgba(169, 0, 192, 0.12) 0%, transparent 80%);
  --gradient-subtle: linear-gradient(135deg, rgba(223, 200, 232, 0.446) 0%, rgba(244, 215, 240, 0.04) 27.08%, rgba(0, 0, 0, 0.04) 99.98%), linear-gradient(280deg, rgba(201, 169, 218, 0.5) 0.01%, rgba(228, 187, 233, 0.3) 100%);
  --gradient-stronger: linear-gradient(104deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(104deg, var(--color-primary) 0%, var(--color-inclusive) 99.04%);
  --gradient-strong: linear-gradient(102deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 27.08%, rgba(0, 0, 0, 0.04) 99.98%), linear-gradient(280deg, rgba(66, 0, 101, 0.5) 0.01%, rgba(169, 0, 192, 0.3) 100%);
}

/* Critical CSS first */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{
  color: var(--color-inclusive);
  text-decoration: none;

}
a:hover{
  color: var(--color-inclusive-shade);
  text-underline-offset: 2px;
}
  
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}


html:focus-within {
    scroll-behavior: smooth
}


svg {
  width: 1em;
  height: 1em
}

img[src*=".svg"] {
max-width: 100%;
display: block        }

img, picture {
  display: inline-block;
  position: relative;
  max-width: 100%;
border-width: 4px;
border-color: var(--color-charcoal);
}

img,
video {
  border-radius: .5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, .08);
  display: inline-block;
  position: relative;
  max-width: 100%;
border-width: 4px;
border-color: #ff914d;
}

form {
  --flow-space: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem)
}

form label {
  text-transform: uppercase;
  padding: 0 0 .5rem clamp(.88rem, .83rem + .24vw, 1rem);
  font-weight: 700;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

form label:after {
  content: "\a";
  white-space: pre
}

form input,
form p[id],
form textarea {
  width: 100%;
  max-width: 30rem
}

form p[id] {
  font-size: clamp(.88rem, .83rem + .24vw, 1rem);
  padding: .5rem 0 0 1rem;

}

input,
textarea {
  border: 2px solid var(--color-inclusive-shade);
  border-radius: 1rem;
  padding: .85rem 1rem;
  font-size: clamp(.88rem, .83rem + .24vw, 1rem);
  line-height: 1;

}

ad-loader {
  display: block
}

:focus {
  outline: var(--color-inclusive-shade) solid 1px;
  outline-offset: .25rem
}

main:focus {
  outline: 0
}

::selection {
  background: var(--color-mid-glare);
  color: var(--color-inclusive-shade);
}

::-webkit-scrollbar {
  height: .7rem
}

::-webkit-scrollbar-track {
  background-color: #efefef
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-inclusive-shade)
}

* {
  scrollbar-color: var(--color-inclusive-shade) var(--color-mid-glare)
}
   

hr{
  border: 0.01rem solid var(--color-mid-glare);
  margin: var(--space-xs) 0;
  width: 100%;
} 

body {
  font-family: var(--font-base);
  background: var(--color-light);
  color: var(--color-charcoal);
  overflow-x: hidden;
  line-height: 1.6;
}


/* Padding All */
.p-2xs { padding: var(--space-2xs); }
.p-xs { padding: var(--space-xs); }
.p-s { padding: var(--space-s); }
.p-m { padding: var(--space-m); }
.p-l { padding: var(--space-l); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }

/* Padding Top */
.pt-2xs { padding-top: var(--space-2xs); }
.pt-xs { padding-top: var(--space-xs); }
.pt-s { padding-top: var(--space-s); }
.pt-m { padding-top: var(--space-m); }
.pt-l { padding-top: var(--space-l); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }

/* Padding Bottom */
.pb-2xs { padding-bottom: var(--space-2xs); }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-s { padding-bottom: var(--space-s); }
.pb-m { padding-bottom: var(--space-m); }
.pb-l { padding-bottom: var(--space-l); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }

/* Padding Left */
.pl-2xs { padding-left: var(--space-2xs); }
.pl-xs { padding-left: var(--space-xs); }
.pl-s { padding-left: var(--space-s); }
.pl-m { padding-left: var(--space-m); }
.pl-l { padding-left: var(--space-l); }
.pl-xl { padding-left: var(--space-xl); }
.pl-2xl { padding-left: var(--space-2xl); }
.pl-3xl { padding-left: var(--space-3xl); }

/* Padding Right */
.pr-2xs { padding-right: var(--space-2xs); }
.pr-xs { padding-right: var(--space-xs); }
.pr-s { padding-right: var(--space-s); }
.pr-m { padding-right: var(--space-m); }
.pr-l { padding-right: var(--space-l); }
.pr-xl { padding-right: var(--space-xl); }
.pr-2xl { padding-right: var(--space-2xl); }
.pr-3xl { padding-right: var(--space-3xl); }

/* Padding X (left + right) */
.px-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
.px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
.px-l { padding-left: var(--space-l); padding-right: var(--space-l); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }

/* Padding Y (top + bottom) */
.py-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
/* Margin All */
.m-2xs { margin: var(--space-2xs); }
.m-xs { margin: var(--space-xs); }
.m-s { margin: var(--space-s); }
.m-m { margin: var(--space-m); }
.m-l { margin: var(--space-l); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }

/* Margin Top */
.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

/* Margin Bottom */
.mb-2xs { margin-bottom: var(--space-2xs); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* Margin Left */
.ml-2xs { margin-left: var(--space-2xs); }
.ml-xs { margin-left: var(--space-xs); }
.ml-s { margin-left: var(--space-s); }
.ml-m { margin-left: var(--space-m); }
.ml-l { margin-left: var(--space-l); }
.ml-xl { margin-left: var(--space-xl); }
.ml-2xl { margin-left: var(--space-2xl); }
.ml-3xl { margin-left: var(--space-3xl); }

/* Margin Right */
.mr-2xs { margin-right: var(--space-2xs); }
.mr-xs { margin-right: var(--space-xs); }
.mr-s { margin-right: var(--space-s); }
.mr-m { margin-right: var(--space-m); }
.mr-l { margin-right: var(--space-l); }
.mr-xl { margin-right: var(--space-xl); }
.mr-2xl { margin-right: var(--space-2xl); }
.mr-3xl { margin-right: var(--space-3xl); }

/* Margin X (left + right) */
.mx-2xs { margin-left: var(--space-2xs); margin-right: var(--space-2xs); }
.mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-s { margin-left: var(--space-s); margin-right: var(--space-s); }
.mx-m { margin-left: var(--space-m); margin-right: var(--space-m); }
.mx-l { margin-left: var(--space-l); margin-right: var(--space-l); }
.mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
.mx-3xl { margin-left: var(--space-3xl); margin-right: var(--space-3xl); }

/* Margin Y (top + bottom) */
.my-2xs { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); }
.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-s { margin-top: var(--space-s); margin-bottom: var(--space-s); }
.my-m { margin-top: var(--space-m); margin-bottom: var(--space-m); }
.my-l { margin-top: var(--space-l); margin-bottom: var(--space-l); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }
.my-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); }

        /* Navigation - Enhanced with logo */
        .navbar {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          padding: 1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      /* Logo Styles */
      .logo {
          position: fixed;
          top: 1rem;
          left: 1rem;
          z-index: 1002;
          transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
          transform: translateY(0);
      }
       /* Footer Logo Styles */
       .footer-logo {
       
        z-index: 1002;
        transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
        transform: translateY(0);
    }

      .logo.scroll-up {
          transform: translateY(-120%);
      }

      .logo-link {
          display: flex;
          align-items: center;
          text-decoration: none;
          color: var(--color-primary);
          font-weight: var(--font-bold);
          font-size: var(--size-step-2);
          padding: var(--space-s);
      
          transition: all var(--transition-base);
      }
      .footer-logo-link {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: var(--color-primary);
        font-weight: var(--font-bold);
        font-size: var(--size-step-1);
        padding: var(--space-xs);
        border-radius: var(--radius-xs);
        transition: all var(--transition-base);
    }

      .logo-link:hover {
          background: var(--color-primary-bright);
          transform: scale(1.05);
          box-shadow: 0 6px 25px rgba(66, 0, 101, 0.15);
      }
     
      .logo-icon {
          width: 40px;
          height: 40px;
          margin-right: var(--space-xs);
          background: var(--gradient-stronger);
          border-radius: var(--radius-xs);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: var(--font-bold);
          font-size: 18px;
      }

      .logo-text {
          white-space: nowrap;
      }
      .logo {
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 1002;
        transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
        transform: translateY(0);
    }

    .logo.scroll-up {
        transform: translateY(-120%);
    }

    .logo-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--color-inclusive-shade);
        font-weight: var(--font-bold);
        font-size: var(--size-step-2);
        padding: var(--space-xs);
    
        transition: all var(--transition-base);
    }
    .logo-link:hover {
      background: var(--color-primary-bright);
      transform: scale(1.05);
      box-shadow: 0 6px 25px rgba(66, 0, 101, 0.15);
  }

    .footer-logo-link {
        background: var(--color-primary-bright);
        transform: scale(1.05);
        box-shadow: 0 6px 25px rgba(66, 0, 101, 0.15);
    }

    .logo-icon {
        width: 40px;
        height: 40px;
        margin-right: var(--space-xs);
        background: var(--gradient-stronger);
        border-radius: var(--radius-xs);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: var(--font-bold);
        font-size: 18px;
    }
    .footer-logo-icon {
      width: 32px;
      height: 32px;
      margin-right: var(--space-xs);
      background: var(--gradient-stronger);
      border-radius: var(--radius-xs);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: var(--font-bold);
      font-size: 18px;
  }
    .logo-text {
        white-space: nowrap;
    }

      .nav-menu {
          position: fixed;
          top: 0;
          right: -300px;
          width: 300px;
          height: 100vh;
          background: var(--color-light);
          box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
          padding: var(--space-xl) var(--space-l);
          transition: right var(--transition-base);
          z-index: 999;
      }

      .nav-menu.active {
          right: 0;
      }

      .nav-menu nav ul {
          list-style: none;
          margin-top: var(--space-xl);
      }

      .nav-menu nav ul li {
          margin-bottom: var(--space-m);
      }

      .nav-menu nav ul li a {
          color: var(--color-primary);
          text-decoration: none;
          font-weight: var(--font-medium);
          font-size: var(--size-step-1);
          transition: all var(--transition-base);
          display: block;
          padding: var(--space-s);
          border-radius: var(--radius);
      }

      .nav-menu nav ul li a:hover {
          background: var(--color-primary-bright);
          color: var(--color-inclusive);
          transform: translateX(10px);
      }

      .hamburger {
          display: flex;
          flex-direction: column;
          gap: 8px;
          background: none;
          border: none;
          cursor: pointer;
          padding: 8px;
          border-radius: var(--radius-xs);
          transition: all var(--transition-base);
          position: relative;
          z-index: 1001;
          margin-left: auto;
      }

      .hamburger:hover {
          background: rgba(66, 0, 101, 0.1);
      }

      .hamburger span {
          width: 40px;
          height: 4px;
          background: var(--color-primary);
          transition: all var(--transition-base);
          border-radius: 4px;
      }

      .hamburger.active span:nth-child(1) {
          transform: rotate(45deg) translate(5px, 5px);
      }

      .hamburger.active span:nth-child(2) {
          opacity: 0;
      }

      .hamburger.active span:nth-child(3) {
          transform: rotate(-45deg) translate(11px, -11px);
      }

        /* Mobile optimizations */
        @media (max-width: 768px) {
          .logo-text {
              display: none;
          }
          
          .logo-icon {
              margin-right: 0;
          }

      }

/* Hero Section */
.hero {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  background: var(--gradient-standard)
}

.hero-content {
  text-align: center;
  max-width: 1200px;
  width: 100%;
}

.hero-title {
  font-size: var(--size-step-8);
  font-weight: var(--font-black);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-m);
}
.hero-subtitle {
  font-size: var(--size-step-2);
  color: var(--color-mid-shade);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-xl);
  opacity: 1;
}

.hero-ctas {
  display: flex;
  gap: var(--space-m);
  justify-content: center;
  flex-wrap: wrap;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius-l);
  font-weight: var(--font-medium);
  transition: all var(--transition-base);
  opacity: 1;
  text-decoration: none;
  font-size: var(--size-step-0);
}

.hero-cta.primary {
  background: var(--gradient-stronger);
  color: white;
}

.hero-cta.secondary {
  background: white;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.hero-cta.tertiary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid rgba(66, 0, 101, 0.3);
}

.hero-cta:hover {
  transform: translateY(-2px);
}

.hero-cta.primary:hover {
  box-shadow: 0 10px 30px rgba(66, 0, 101, 0.3);
}

.hero-cta.secondary:hover {
  background: var(--color-primary);
  color: white;
}

.hero-cta.tertiary:hover {
  background: var(--color-primary-bright);
  border-color: var(--color-primary);
}


@media (max-width: 768px) {
  .hero {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
    background: var(--gradient-standard)
  }
  .hero-title {
    font-size: var(--size-step-5);
    margin-top: var(--space-m);  
  }
  .hero-subtitle {
    font-size: var(--size-step-0);
    margin-bottom: var(--space-m);
  }
  .hero-ctas {
    flex-direction: column;
    gap: var(--space-s);
    text-align: center;
  }


}

/* Optional: improve multi-line balance on modern browsers */
@supports (text-wrap: balance) {
  .hero-title { text-wrap: balance; }
}

/* Trust Indicators Section */
.trust-section {
  background: linear-gradient(135deg, var(--color-charcoal) 0%, #1a1a1a 100%);
  padding: var(--space-m) 0;
  border-bottom: 1px solid rgba(66, 0, 101, 0.1);
  overflow: hidden;
  position: relative;
}

.trust-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="trustgrid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23trustgrid)"/></svg>');
  pointer-events: none;
}

.trust-marquee {
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.trust-track {
  display: inline-flex;
  gap: var(--space-xl);
  animation: trustScroll 45s linear infinite;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-light);
  font-weight: var(--font-medium);
  font-size: var(--size-step-0);
  white-space: nowrap;
  padding: var(--space-s) var(--space-m);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.trust-quote {
  display: inline-flex;
  align-items: center;
  color: var(--color-inclusive-shade);
  font-weight: var(--font-bold);
  font-style: italic;
  font-size: var(--size-step-0);
  white-space: nowrap;
  padding: var(--space-s) var(--space-l);
  background: rgba(169, 0, 192, 0.1);
  border-radius: var(--radius);
  border: 1px solid rgba(169, 0, 192, 0.2);
  backdrop-filter: blur(10px);
}

@keyframes trustScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause animation on hover for better UX */
.trust-marquee:hover .trust-track {
  animation-play-state: paused;
}

/* Our Mission Section */
.vision-section {
  padding: var(--space-2xl) 1rem;
  background: linear-gradient(135deg, 
      rgba(255, 255, 255, 1) 0%, 
      rgba(246, 243, 248, 0.8) 50%, 
      rgba(255, 255, 255, 1) 100%);
}

.vision-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.vision-left h2 {
  font-size: var(--size-step-8);
  font-weight: var(--font-black);
  color: var(--color-primary);
  line-height: 0.9;
  margin-bottom: var(--space-l);
}

.vision-tagline {
  font-size: var(--size-step-4);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2xl);
  line-height: 1.2;
}

.vision-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
}

.vision-timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: 40px;
  width: 3px;
  background: linear-gradient(to bottom, var(--color-inclusive), var(--color-original), var(--color-sustainable));
  border-radius: 2px;
}

.vision-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-l);
  position: relative;
}

.vision-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-bold);
  flex-shrink: 0;
  border: 4px solid white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.vision-dot.primary { background: var(--color-inclusive); }
.vision-dot.secondary { background: var(--color-original); }
.vision-dot.tertiary { background: var(--color-sustainable); }

.vision-text h3 {
  font-size: var(--size-step-3);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-s);
  line-height: 1.3;
}

.vision-text h3 .highlight {
  color: var(--color-inclusive);
}

.vision-right {
  padding-left: var(--space-l);
}

.vision-description {
  font-size: var(--size-step-2);
  color: var(--color-mid-shade);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

.vision-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-bold);
  font-size: var(--size-step-1);
  border-bottom: 2px solid var(--color-inclusive);
  padding-bottom: var(--space-xs);
  transition: all var(--transition-base);
}

.vision-cta:hover {
  color: var(--color-inclusive);
  transform: translateX(8px);
}

.vision-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-l);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(66, 0, 101, 0.1);
}

.vision-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-m);
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(66, 0, 101, 0.1);
  transition: all var(--transition-base);
  color: var(--color-mid-shade);
  font-weight: var(--font-bold);
  font-size: 0.9em;
}

.vision-logo:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(66, 0, 101, 0.1);
  color: var(--color-primary);
}

/* Section Connector */
.section-connector {
  padding: var(--space-l) 1rem;
  background: rgba(246, 243, 248, 0.3);
  border-top: 1px solid rgba(66, 0, 101, 0.1);
  border-bottom: 1px solid rgba(66, 0, 101, 0.1);
}

.connector-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.connector-text {
  font-size: var(--size-step-1);
  color: var(--color-mid-shade);
  font-weight: var(--font-medium);
  line-height: 1.6;
}

.connector-highlight {
  color: var(--color-inclusive);
  font-weight: var(--font-bold);
}

/* Stats Section */
.stats-section {
  background: var(--gradient-subtle);
  padding: var(--space-2xl) 1rem;
  min-height: auto;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
  max-width: 1000px;
  margin: 0 auto;
}

.stat-item {
  text-align: center;
  padding: var(--space-l);
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(66, 0, 101, 0.1);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.stat-item:hover::before {
  transform: scaleX(1);
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(66, 0, 101, 0.15);
}

.stat-number {
  display: block;
  font-size: var(--size-step-4);
  font-weight: var(--font-black);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-s);
  font-family: var(--font-mono);
  text-align: center;
}

.stat-label {
  display: block;
  font-size: var(--size-step-0);
  color: var(--color-mid-shade);
  font-weight: var(--font-medium);
  line-height: 1.3;
}

/* Content Sections */
.content-section {
  padding: var(--space-2xl) 1rem;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-section.hero-bg {
  background: var(--gradient-subtle);
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* Section Headers */
.section-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.section-title {
  font-size: var(--size-step-6);
  font-weight: var(--font-black);
  color: var(--color-primary);
  margin-bottom: var(--space-m);

}

.section-subtitle {
  font-size: var(--size-step-1);
  color: var(--color-mid-shade);
  max-width: 600px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
}

/* AI Tool Finder Section */
.ai-finder-section {
  padding: var(--space-2xl) 1rem;
  background: var(--gradient-subtle);

}

.ai-finder-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.ai-finder-left h2 {
  font-size: var(--size-step-6);
  font-weight: var(--font-black);
  color: var(--color-primary);
  margin-bottom: var(--space-l);
  line-height: 1.1;
}

.ai-finder-description {
  font-size: var(--size-step-1);
  color: var(--color-mid-shade);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.ai-features {
  margin-bottom: var(--space-xl);
}

.ai-feature {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  padding: var(--space-s);
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ai-icon {
  font-size: 1.2em;
  flex-shrink: 0;
}

.ai-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-xl);
  background: var(--gradient-stronger);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-l);
  font-weight: var(--font-bold);
  font-size: var(--size-step-1);
  transition: all var(--transition-base);
}

.ai-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(66, 0, 101, 0.3);
}

.ai-demo {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--color-inclusive);
}

.ai-question {
  margin-bottom: var(--space-l);
}

.ai-question p {
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-s);
}

.ai-options {
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.ai-option {
  padding: var(--space-xs) var(--space-s);
  background: var(--color-light-shade);
  border: 2px solid rgba(66, 0, 101, 0.1);
  border-radius: var(--radius);
  font-size: 0.9em;
  cursor: pointer;
  transition: all var(--transition-base);
}

.ai-option.active {
  background: var(--color-inclusive);
  color: white;
  border-color: var(--color-inclusive);
}

.ai-result {
  background: var(--color-primary-bright);
  padding: var(--space-m);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-inclusive);
}

.ai-result p {
  margin-bottom: var(--space-xs);
}


/* Deal Finder Tool Styles */
.deal-finder-tool {
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--color-inclusive-shade);
  margin-top: var(--space-l);

}

.tool-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-m) var(--space-l);
  background: var(--color-primary-bright);
  border-radius: var(--radius);
  margin-bottom: var(--space-m);
}

.filter-info {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}

.selected-count {
  font-weight: var(--font-bold);
  color: var(--color-primary);
  padding: var(--space-2xs) var(--space-s);
  background: white;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(66, 0, 101, 0.2);
  font-size: 0.9em;
}

.match-mode {
  display: flex;
  gap: var(--space-s);
}

.match-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: var(--font-medium);
  color: var(--color-mid-shade);
}

.match-toggle input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-inclusive);
}

.match-toggle:has(input:checked) {
  color: var(--color-primary);
}

.tool-actions {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.clear-filters, .clear-filters-alt {
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-mid-shade);
  color: white;
  border: none;
  border-radius: var(--radius-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: 0.85em;
}

.clear-filters:hover, .clear-filters-alt:hover {
  background: var(--color-sustainable);
  transform: translateY(-1px);
}

.results-preview {
  font-weight: var(--font-bold);
  color: var(--color-primary);
  padding: var(--space-2xs) var(--space-s);
  background: white;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(66, 0, 101, 0.2);
  font-size: 0.85em;
}

.selected-tags-row {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-l);
  background: var(--gradient-stronger);
  border-radius: var(--radius);
  margin-bottom: var(--space-m);
  border: 1px solid rgba(66, 0, 101, 0.1);
}

.selected-tags-label {
  font-weight: var(--font-bold);
  color: var(--color-primary);
  font-size: 0.9em;
  white-space: nowrap;
}

.selected-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.selected-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-inclusive);
  color: white;
  border-radius: var(--radius-xs);
  font-size: 0.8em;
  font-weight: var(--font-bold);
}

.selected-tag .remove-tag {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
}

.selected-tag .remove-tag:hover {
  background: rgba(255, 255, 255, 0.3);
}

.compact-tags-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.tag-category {
  background: var(--color-light-shade);
  border-radius: var(--radius);
  padding: var(--space-m);
  border: 1px solid rgba(66, 0, 101, 0.1);
}

.tag-category-title {
  font-size: 0.95em;
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin: 0 0 var(--space-s) 0;
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--color-inclusive);
}

.compact-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.compact-tag {
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-xs);
  font-size: 0.8em;
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-base);
  border: 1px solid transparent;
  white-space: nowrap;
}

.compact-tag.selectable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.compact-tag.selectable.active {
  background: var(--color-inclusive) !important;
  color: white !important;
  border-color: var(--color-inclusive-shade) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(169, 0, 192, 0.3);
}

/* Tag colors */
.compact-tag.lifetime { background: #FFE5E1; color: #FF1958; border-color: #FFB3A6; }
.compact-tag.trial { background: #E5F7F0; color: #00C864; border-color: #B3E5D1; }
.compact-tag.student { background: #E5F0FF; color: #6496FF; border-color: #B3D1FF; }
.compact-tag.startup { background: #FFF4E5; color: #F56F00; border-color: #FFD6B3; }
.compact-tag.appsumo { background: #F5E5FF; color: #A900C0; border-color: #E0B3FF; }
.compact-tag.producthunt { background: #FFF9E5; color: #FFC000; border-color: #FFE8B3; }
.compact-tag.coupon { background: #E5F7F0; color: #00C864; border-color: #B3E5D1; }
.compact-tag.freemium { background: #E5F0FF; color: #6496FF; border-color: #B3D1FF; }
.compact-tag.opensource { background: #E8F5E8; color: #32C896; border-color: #B8E6B8; }
.compact-tag.selfhosted { background: #F0E5FF; color: #420065; border-color: #D1B3FF; }
.compact-tag.saas { background: #E5F0FF; color: #6496FF; border-color: #B3D1FF; }
.compact-tag.privacy { background: #F5E5FF; color: #A900C0; border-color: #E0B3FF; }
.compact-tag.zeroknowledge { background: #FFE5E1; color: #FF1958; border-color: #FFB3A6; }
.compact-tag.wordpress { background: #F5F0FF; color: #9664FF; border-color: #D9B3FF; }
.compact-tag.vpnverified { background: #F5E5FF; color: #A900C0; border-color: #E0B3FF; }
.compact-tag.developer { background: #F0E5FF; color: #420065; border-color: #D1B3FF; }
.compact-tag.compliance { background: #FFF4E5; color: #F56F00; border-color: #FFD6B3; }
.compact-tag.b2c { background: #E5F0FF; color: #6496FF; border-color: #B3D1FF; }
.compact-tag.b2b { background: #F4E8E2; color: #C86432; border-color: #E8C4B3; }
.compact-tag.aws { background: #FFF4E5; color: #F56F00; border-color: #FFD6B3; }
.compact-tag.stack { background: #F5E5FF; color: #A900C0; border-color: #E0B3FF; }

.compact-results {
  border-top: 2px solid rgba(66, 0, 101, 0.1);
  padding-top: var(--space-m);
}

.compact-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-s);
  opacity: 1;
  transition: opacity var(--transition-base);
}

.compact-results-grid.loading {
  opacity: 0.5;
}

.compact-deal-card {
  background: white;
  border-radius: var(--radius);
  padding: var(--space-s);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(66, 0, 101, 0.1);
  transition: all var(--transition-base);
  cursor: pointer;
  position: relative;
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

.compact-deal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(66, 0, 101, 0.2);
  border-color: var(--color-inclusive);
}

.compact-deal-badge {
  position: absolute;
  top: -4px;
  right: 4px;
  background: var(--color-sustainable);
  color: white;
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  font-size: 0.65em;
  font-weight: var(--font-bold);
}

.compact-deal-title {
  font-size: 0.85em;
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2xs);
  line-height: 1.2;
}

.compact-deal-description {
  color: var(--color-mid-shade);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
  font-size: 0.75em;
  flex: 1;
}

.compact-deal-pricing {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}

.compact-original-price {
  text-decoration: line-through;
  color: var(--color-mid);
  font-size: 0.7em;
}

.compact-deal-price {
  font-size: 0.8em;
  font-weight: var(--font-bold);
  color: var(--color-inclusive);
}

.compact-savings {
  background: var(--color-bright);
  color: var(--color-charcoal);
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  font-size: 0.65em;
  font-weight: var(--font-bold);
}

.no-results-compact {
  text-align: center;
  padding: var(--space-m);
  background: var(--color-light-shade);
  border-radius: var(--radius);
  border: 1px dashed rgba(66, 0, 101, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  font-size: 0.9em;
  color: var(--color-mid-shade);
}

/* Security Categories Section */
.featured-brands {
  padding: var(--space-2xl) 1rem;
  background: var(--gradient-strong);
  border-top: 1px solid rgba(66, 0, 101, 0.1);
  border-bottom: 1px solid rgba(66, 0, 101, 0.1);
}

.brands-marquee {
  overflow: hidden;
  white-space: nowrap;
  margin-top: var(--space-xl  );
}

.brands-track {
  display: inline-flex;
  gap: var(--space-xl);
  animation: scroll 30s linear infinite;
}

.brand-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-l);
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(66, 0, 101, 0.1);
  white-space: nowrap;
  min-width: 200px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  background: var(--gradient-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Featured Deals Carousel */
.featured-deals-section {
  padding: var(--space-2xl) 1rem;
  background: var(--gradient-standard);
}

.deals-carousel {
  position: relative;
  margin-top: var(--space-2xl);
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: var(--space-l);
}

.featured-deal-card {
  min-width: 350px;
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--color-inclusive);
  position: relative;
}

.deal-timer {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  background: var(--color-sustainable);
  color: white;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  font-size: 0.8em;
  font-weight: var(--font-bold);
  font-family: var(--font-mono);
}

.deal-badge {
  position: absolute;
  top: -8px;
  right: var(--space-m);
  background: var(--color-sustainable);
  color: white;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius);
  font-size: 0.8em;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.deal-title {
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-s);
}

.deal-description {
  color: var(--color-mid-shade);
  margin-bottom: var(--space-m);
  line-height: 1.5;
}

.deal-pricing {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.original-price {
  text-decoration: line-through;
  color: var(--color-mid);
  font-size: 0.9em;
}

.deal-price {
  font-size: var(--size-step-1);
  font-weight: var(--font-bold);
  color: var(--color-inclusive);
}

.savings {
  background: var(--color-bright);
  color: var(--color-charcoal);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-xs);
  font-size: 0.8em;
  font-weight: var(--font-bold);
}

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.carousel-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gradient-stronger);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.carousel-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(66, 0, 101, 0.3);
}

/* Security Deals Section */
.deals-section {
border-top: 1px solid rgba(66, 0, 101, 0.1);
border-bottom: 1px solid rgba(66, 0, 101, 0.1);
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
  margin-bottom: var(--space-2xl);
}

.category-tag {
  padding: var(--space-s) var(--space-m);
  background: white;
  border: 2px solid rgba(66, 0, 101, 0.1);
  border-radius: var(--radius-l);
  font-weight: var(--font-medium);
  color: var(--color-mid-shade);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.category-tag:hover {
  border-color: var(--color-inclusive);
  color: var(--color-inclusive);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(169, 0, 192, 0.15);
}

.category-tag.active {
  background: var(--gradient-stronger);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(66, 0, 101, 0.3);
}

.deals-container {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 70% 30%;
  gap: var(--space-xl);
  align-items: start;
}

.main-deals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m);
}

.deal-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-l);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-inclusive-shade);
  position: relative;
  transition: all var(--transition-base);
  cursor: pointer;
  min-height: 180px;
}

.deal-card:hover {
  transform: translateY(-4px) rotate(1deg);
  box-shadow: 0 15px 35px rgba(66, 0, 101, 0.15);
}

.deal-card.featured {
  background: var(--gradient-subtle);
  border: 2px solid var(--color-inclusive);
}

.stacked-deals {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-l);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(66, 0, 101, 0.1);
  position: sticky;
  top: var(--space-l);
}

.stack-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid rgba(66, 0, 101, 0.1);
}

.stack-header h4 {
  font-size: var(--size-step-1);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin: 0;
}

.deal-count {
  font-size: 0.9em;
  color: var(--color-mid-shade);
  background: var(--color-primary-bright);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-xs);
}

.deal-stack {
  position: relative;
  height: 300px;
  margin-bottom: var(--space-m);
}



.more-indicator .stack-preview {
  color: var(--color-inclusive);
  font-weight: var(--font-bold);
}

.view-all-btn {
  width: 100%;
  padding: var(--space-s) var(--space-m);
  background: var(--gradient-stronger);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-base);
}

.view-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(66, 0, 101, 0.3);
}

/* Curated Picks Section */
.picks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.pick-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(66, 0, 101, 0.1);
  transition: all var(--transition-base);
}

.pick-card.featured {
  border-color: var(--color-inclusive);
  background: var(--gradient-subtle);
}

.pick-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(66, 0, 101, 0.15);
}

.pick-header h3 {
  font-size: var(--size-step-3);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-s);
  line-height: 1.2;
}

.pick-header p {
  color: var(--color-mid-shade);
  margin-bottom: var(--space-l);
  line-height: 1.6;
}

.pick-features {
  margin-bottom: var(--space-xl);
}

.pick-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  padding: var(--space-s);
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-inclusive);
}

.feature-icon {
  font-size: 1.2em;
  flex-shrink: 0;
}

.pick-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
  background: var(--gradient-standard);
  color: white;
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: var(--font-bold);
  transition: all var(--transition-base);
}

.pick-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(66, 0, 101, 0.3);
}

/* Categories Grid */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-l);
  margin-top: var(--space-2xl);
}

.category-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-l);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
  border: 2px solid rgba(66, 0, 101, 0.1);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-standard);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.category-card:hover::before {
  transform: scaleX(1);
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(66, 0, 101, 0.15);
  border-color: var(--color-inclusive);
}

.category-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-m);
  display: block;
}

.category-title {
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: var(--color-charcoal);
  margin-bottom: var(--space-s);
  line-height: 1.2;
}

.category-description {
  color: var(--color-mid-shade);
  line-height: 1.6;
  margin-bottom: var(--space-m);
  font-size: var(--size-step-0);
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-m);
}

.mini-tag {
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-primary-bright);
  color: var(--color-primary);
  border-radius: var(--radius-xs);
  font-size: 0.75em;
  font-weight: var(--font-bold);
  border: 1px solid rgba(66, 0, 101, 0.2);
}

.category-cta {
  color: var(--color-inclusive);
  text-decoration: none;
  font-weight: var(--font-bold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: all var(--transition-base);
  font-size: var(--size-step-0);
}

/* Security Tool Reviews Section */
.reviews-section {
  padding: var(--space-3xl) 1rem;
  min-height: 100vh;
  border-top: 1px solid rgba(66, 0, 101, 0.1);
  border-bottom: 1px solid rgba(66, 0, 101, 0.1);
  
}

.review-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
  margin-bottom: var(--space-2xl);
  opacity: 1;
  transform: translateY(0);
}

.review-category-tag {
  padding: var(--space-s) var(--space-m);
  background: white;
  border: 2px solid rgba(66, 0, 101, 0.1);
  border-radius: var(--radius-l);
  font-weight: var(--font-medium);
  color: var(--color-mid-shade);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  font-size: var(--size-step-0);
}

.review-category-tag:hover {
  border-color: var(--color-inclusive);
  color: var(--color-inclusive);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(169, 0, 192, 0.2);
}

.review-category-tag.active {
  background: var(--gradient-stronger);
  color: white;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(66, 0, 101, 0.4);
}

.reviews-container {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: var(--space-xl);
  align-items: start;
  opacity: 1;
  transform: translateY(0);
}

.featured-review-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border: 3px solid var(--color-inclusive);
  position: relative;
  min-height: 600px;
  overflow: hidden;
}

.featured-review-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--gradient-standard);
}

.review-badge {
  position: absolute;
  top: -10px;
  right: var(--space-m);
  background: var(--color-sustainable);
  color: white;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  font-size: 0.8em;
  font-weight: var(--font-black);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(255, 25, 88, 0.3);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-l);
  padding-top: var(--space-s);
}

.review-title {
  font-size: var(--size-step-4);
  font-weight: var(--font-black);
  color: var(--color-primary);
  margin: 0;
  line-height: 1.1;
}

.review-rating {
  text-align: right;
  min-width: 120px;
}

.stars {
  color: var(--color-bright);
  font-size: var(--size-step-2);
  margin-bottom: var(--space-xs);
  display: block;
  text-shadow: 0 2px 4px rgba(255, 192, 0, 0.3);
}

.rating-score {
  display: block;
  font-weight: var(--font-black);
  color: var(--color-inclusive);
  font-family: var(--font-mono);
  font-size: var(--size-step-1);
  background: var(--color-primary-bright);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-xs);
}

.review-summary {
  color: var(--color-mid-shade);
  line-height: 1.7;
  margin-bottom: var(--space-l);
  font-size: var(--size-step-1);
  font-weight: var(--font-medium);
}

.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.tag {
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  font-size: 0.85em;
  font-weight: var(--font-bold);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-base);
}

.tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Tag colors */
.tag.security { 
  background: linear-gradient(135deg, rgba(255, 25, 88, 0.15), rgba(255, 25, 88, 0.05)); 
  color: var(--color-sustainable); 
  border: 1px solid rgba(255, 25, 88, 0.2);
}
.tag.performance { 
  background: linear-gradient(135deg, rgba(255, 192, 0, 0.15), rgba(255, 192, 0, 0.05)); 
  color: var(--color-bright); 
  border: 1px solid rgba(255, 192, 0, 0.2);
}
.tag.privacy { 
  background: linear-gradient(135deg, rgba(169, 0, 192, 0.15), rgba(169, 0, 192, 0.05)); 
  color: var(--color-inclusive); 
  border: 1px solid rgba(169, 0, 192, 0.2);
}
.tag.features { 
  background: linear-gradient(135deg, rgba(66, 0, 101, 0.15), rgba(66, 0, 101, 0.05)); 
  color: var(--color-primary); 
  border: 1px solid rgba(66, 0, 101, 0.2);
}
.tag.support { 
  background: linear-gradient(135deg, rgba(245, 111, 0, 0.15), rgba(245, 111, 0, 0.05)); 
  color: var(--color-original); 
  border: 1px solid rgba(245, 111, 0, 0.2);
}
.tag.value { 
  background: linear-gradient(135deg, rgba(0, 200, 100, 0.15), rgba(0, 200, 100, 0.05)); 
  color: #00C864; 
  border: 1px solid rgba(0, 200, 100, 0.2);
}

.review-metrics {
  margin-bottom: var(--space-xl);
  padding: var(--space-l);
  background: var(--color-primary-bright);
  border-radius: var(--radius-l);
  border: 1px solid rgba(66, 0, 101, 0.1);
}

.metric {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-bottom: var(--space-m);
}

.metric:last-child {
  margin-bottom: 0;
}

.metric-label {
  font-size: var(--size-step-0);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  min-width: 100px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-bar {
  flex: 1;
  height: 12px;
  background: rgba(66, 0, 101, 0.1);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.metric-fill {
  height: 100%;
  background: var(--gradient-standard);
  border-radius: 6px;
  transition: width 1s ease-out;
  position: relative;
  overflow: hidden;
}

.metric-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.review-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-xl);
  background: var(--gradient-stronger);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-l);
  font-weight: var(--font-bold);
  font-size: var(--size-step-1);
  transition: all var(--transition-base);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.review-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(66, 0, 101, 0.4);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m);
}

.review-card {
  background: white;
  border-radius: var(--radius-l);
  padding: var(--space-l);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-inclusive-shade);
  transition: all var(--transition-base);
  position: relative;
  min-height: 200px;
}

.review-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-standard);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.review-card:hover::before {
  transform: scaleX(1);
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(66, 0, 101, 0.2);
  border-color: var(--color-inclusive);
}

.review-card .review-title {
  font-size: var(--size-step-1);
  margin-bottom: var(--space-s);
  font-weight: var(--font-bold);
}

.review-card .review-rating {
  margin-bottom: var(--space-m);
}

.review-card .stars {
  font-size: var(--size-step-0);
  margin-bottom: var(--space-2xs);
}

.review-card .rating-score {
  font-size: 0.9em;
  padding: var(--space-2xs) var(--space-xs);
}

.review-card .review-tags {
  margin-bottom: var(--space-m);
}

.review-card .tag {
  font-size: 0.75em;
  padding: var(--space-2xs) var(--space-xs);
}

.review-link {
  color: var(--color-inclusive);
  text-decoration: none;
  font-weight: var(--font-bold);
  font-size: 0.9em;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.review-link:hover {
  color: var(--color-inclusive-shade);
  transform: translateX(4px);
}

/* Testimonials Section */
.testimonials-section {
  padding: var(--space-3xl) 1rem;
  background: var(--gradient-subtle);
  border-top: 1px solid rgba(66, 0, 101, 0.1);
  border-bottom: 1px solid rgba(66, 0, 101, 0.1);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.testimonial-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(66, 0, 101, 0.1);
  position: relative;
  transition: all var(--transition-base);
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: var(--space-l);
  font-size: 4rem;
  color: var(--color-inclusive);
  font-weight: var(--font-black);
  line-height: 1;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(66, 0, 101, 0.15);
}

.testimonial-text {
  font-style: italic;
  color: var(--color-mid-shade);
  line-height: 1.7;
  margin-bottom: var(--space-l);
  font-size: var(--size-step-1);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gradient-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-bold);
  font-size: var(--size-step-1);
}

.author-info {
  flex: 1;
}

.author-name {
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2xs);
}

.author-title {
  color: var(--color-mid);
  font-size: 0.9em;
}


/* Newsletter Section */
.newsletter-section {
  background: var(--gradient-strong);
  padding: var(--space-3xl) 1rem;
  border-top: 2px solid rgba(66, 0, 101, 0.1);
  position: relative;
  overflow: hidden;
}

.newsletter-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
      rgba(66, 0, 101, 0.02) 0%, 
      rgba(169, 0, 192, 0.02) 50%, 
      rgba(66, 0, 101, 0.02) 100%);
  pointer-events: none;
}

.newsletter-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
}

.newsletter-title {
  font-size: var(--size-step-6);
  font-weight: var(--font-black);
  color: var(--color-primary);
  margin-bottom: var(--space-s);
  line-height: 1.1;
}

.newsletter-subtitle {
  color: var(--color-mid-shade);
  line-height: 1.7;
  font-size: var(--size-step-1);
  font-weight: var(--font-medium);
}

.newsletter-signup {
  display: flex;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: white;
  padding: var(--space-xs);
}

.newsletter-input {
  flex: 1;
  padding: var(--space-m) var(--space-l);
  border: none;
  font-size: var(--size-step-0);
  background: transparent;
  color: var(--color-charcoal);
  outline: none;
}

.newsletter-input::placeholder {
  color: var(--color-mid);
}

.newsletter-btn {
  padding: var(--space-m) var(--space-xl);
  background: var(--gradient-stronger);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  font-size: var(--size-step-0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.newsletter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(66, 0, 101, 0.3);
}

.newsletter-privacy {
  font-size: 0.85em;
  color: var(--color-inclusive-shade);
  font-style: italic;
}

/* Footer */
.footer {
  background: linear-gradient(135deg, var(--color-charcoal) 0%, #1a1a1a 100%);
  color: var(--color-light);
  padding: var(--space-3xl) 1rem var(--space-xl) 1rem;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  pointer-events: none;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
}

.footer-section {
  opacity: 1;
  transform: translateY(0);
}

.footer-title {
  font-size: var(--size-step-4);
  font-weight: var(--font-black);
  color: var(--color-light);
  margin-bottom: var(--space-s);
  background: var(--gradient-standard);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-description {
  color: var(--color-mid-glare);
  line-height: 1.7;
  margin-bottom: var(--space-l);
  margin-top: var(--space-l);
  font-size: var(--size-step-0);
}

.footer-social {
  display: flex;
  gap: var(--space-m);
  justify-content: center;
}

.social-link {
  color: var(--color-mid-glare);
  text-decoration: none;
  transition: all var(--transition-base);
  padding: var(--space-s);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: var(--font-medium);
}

.social-link:hover {
  color: var(--color-inclusive-shade);
  background: rgba(169, 0, 192, 0.1);
  border-color: var(--color-inclusive-shade);
  transform: translateY(-2px);
}

.footer-heading {
  font-size: var(--size-step-1);
  font-weight: var(--font-bold);
  color: var(--color-light);
  margin-bottom: var(--space-m);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--space-s);
}

.footer-links a {
  color: var(--color-mid-glare);
  text-decoration: none;
  transition: all var(--transition-base);
  font-weight: var(--font-medium);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--color-inclusive-shade);
  transform: translateX(4px);
}

.footer-bottom {
  border-top: 2px solid var(--color-mid-shade);
  padding-top: var(--space-l);
  text-align: center;
  color: var(--color-mid);
  position: relative;
  z-index: 1;
}

.footer-bottom p {
  margin-bottom: var(--space-xs);
  font-weight: var(--font-medium);
}

.footer-bottom p:last-child {
  font-style: italic;
  opacity: 0.8;
}

/* Floating Elements */
.floating-element {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--gradient-subtle);
  opacity: 0.3;
  filter: blur(60px);
}

.floating-1 {
  top: 20%;
  left: 10%;
  animation: float 6s ease-in-out infinite;
}

.floating-2 {
  bottom: 30%;
  right: 15%;
  animation: float 8s ease-in-out infinite reverse;
}

.floating-3 {
  top: 10%;
  right: 20%;
  animation: float 7s ease-in-out infinite;
  width: 150px;
  height: 150px;
}

.floating-4 {
  bottom: 20%;
  left: 25%;
  animation: float 9s ease-in-out infinite reverse;
  width: 180px;
  height: 180px;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-mid-shade);
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  
  .vision-content {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
  }
  
  .vision-left h2 {
      font-size: var(--size-step-6);
  }
  
  .vision-tagline {
      font-size: var(--size-step-2);
  }
  
  .vision-timeline::before {
      left: 15px;
  }
  
  .vision-dot {
      width: 30px;
      height: 30px;
      font-size: 0.8em;
  }
  
  .vision-text h3 {
      font-size: var(--size-step-1);
  }
  
  .vision-description {
      font-size: var(--size-step-0);
  }
  
  .vision-logos {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-s);
  }
  
  .vision-logo {
      font-size: 0.8em;
      padding: var(--space-s);
  }
  
  .categories-grid {
      grid-template-columns: 1fr;
      gap: var(--space-l);
  }


  .main-deals {
      grid-template-columns: 1fr;
  }

  .category-tabs {
      gap: var(--space-xs);
  }

  .category-tag {
      font-size: 0.9em;
      padding: var(--space-xs) var(--space-s);
  }

  .stacked-deals {
      position: static;
  }

  .stats {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-m);
  }

  .stat-item {
      padding: var(--space-m);
  }

  .stat-number {
      font-size: var(--size-step-4);
  }

  .reviews-container {
      grid-template-columns: 1fr;
      gap: var(--space-l);
  }

  .review-grid {
      grid-template-columns: 1fr;
  }

  .newsletter-content {
      grid-template-columns: 1fr;
      text-align: center;
  }

  .newsletter-signup {
      flex-direction: column;
  }

  .footer-content {
      grid-template-columns: 1fr;
      text-align: center;
  }

  .brands-marquee {
      mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
  }

  .testimonials-grid {
      grid-template-columns: 1fr;
  }

  .trust-marquee {
      mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
      -webkit-mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
  }

  .compact-tags-grid {
      grid-template-columns: 1fr;
  }

  .compact-results-grid {
      grid-template-columns: repeat(2, 1fr);
  }

  .tool-controls {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-s);
  }
  .carousel-track {
   padding:1rem;
  }
  .carousel-track-item {
    padding: var(--space-s);
  }
  .carousel-track-item-title {
    font-size: var(--size-step-0);
  }
  .match-mode {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-s);
  }

  .filter-info {
      justify-content: space-between;
      width: 100%;
  }

  .selected-tags-row {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-xs);
  }

  .ai-finder-content {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
  }

  .picks-grid {
      grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .compact-results-grid {
      grid-template-columns: 1fr;
  }
}

/* Performance optimizations */
.card, .deal-card, .stat-item, .category-tag, 
.review-card, .testimonial-card, .stacked-card {
  will-change: transform;
}
stacked-card {
  border: 1px solid var(--color-inclusive-shade);
  padding: var(--space-s);
}
/* Reduce animations on low-powered devices */
@media (prefers-reduced-motion: reduce) {
  * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
  }
  
  .floating-element {
      animation: none;
  }
  
  .trust-track {
      animation: none;
  }
}/* Mission & Process Combined Section */
/* Background Pattern */
.about-section-mission-process-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
      radial-gradient(circle at 25% 25%, rgba(170, 0, 192, 0.052) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(66, 0, 101, 0.04) 0%, transparent 50%),
      linear-gradient(135deg, transparent 25%, rgba(170, 0, 192, 0.066) 25%, rgba(169, 0, 192, 0.02) 50%, transparent 50%);
  pointer-events: none;
}

/* Mission & Process Combined Section */
.about-section-mission-process-section {
  padding: var(--space-3xl) 1rem;
  background: var(--gradient-hero);
  min-height: 100vh;
  position: relative;
}

.about-section-mission-process-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Left side content that scrolls */
.about-section-mission-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.about-section-content-section {
  margin-bottom: var(--space-3xl);
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease-out forwards;
}

.about-section-content-section h2 {
  font-size: var(--size-step-7);
  font-weight: var(--font-black);
  color: var(--color-primary);
  line-height: 0.9;
  margin-bottom: var(--space-l);
}
.about-section-content-section h1 {
  font-size: var(--size-step-5);
  font-weight: var(--font-black);
  color: var(--color-primary);
  line-height: 0.9;
  margin-bottom: var(--space-l);
}

.about-section-content-section:nth-child(2) { animation-delay: 0.2s; }
.about-section-content-section:nth-child(3) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  to {
      opacity: 1;
      transform: translateY(0);
  }
}


.about-section-content-section h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

.about-section-section-tagline {
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: var(--color-mid-shade);
  margin-bottom: var(--space-2xl);
  line-height: 1.3;
  opacity: 0.9;
}

.about-section-vision-subtitle {
  font-size: var(--size-step-4);
  font-weight: var(--font-bold);
  color: var(--color-mid-shade);
  margin-bottom: var(--space-2xl);
  line-height: 1.2;
}

.about-section-process-tagline {
  font-family: var(--font-mono);
  font-size: var(--size-step-2);
  font-weight: var(--font-semibold);
  color: var(--color-inclusive);
  margin-bottom: var(--space-2xl);
  letter-spacing: 0.5px;
  padding: var(--space-s) var(--space-m);
  background: rgba(169, 0, 192, 0.1);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-inclusive);
  display: inline-block;
}

.about-section-content-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
  margin-bottom: var(--space-xl);
}

.about-section-content-timeline::before {
  content: '';
  position: absolute;
  left: 35px;
  top: 60px;
  bottom: 60px;
  width: 3px;
  background: linear-gradient(
      to bottom, 
      var(--color-inclusive) 0%,
      var(--color-original) 33%,
      var(--color-sustainable) 66%,
      var(--color-ethical) 100%
  );
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(169, 0, 192, 0.3);
}

.about-section-timeline-item {
  display: flex;

  gap: var(--space-s);
  
  position: relative;
  opacity: 0;
  transform: translateX(-30px);
  animation: slideInLeft 0.6s ease-out forwards;
}

.about-section-timeline-item:nth-child(2) { animation-delay: 0.1s; }
.about-section-timeline-item:nth-child(3) { animation-delay: 0.2s; }
.about-section-timeline-item:nth-child(4) { animation-delay: 0.3s; }
.about-section-timeline-item:nth-child(5) { animation-delay: 0.4s; }

@keyframes slideInLeft {
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.about-section-timeline-dot {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-bold);
  font-size: var(--size-step-2);
  flex-shrink: 0;
  border: 4px solid white;
  box-shadow: var(--shadow-xl);
  z-index: 2;
  position: relative;
  transition: all var(--transition-smooth);
}

.about-section-timeline-dot::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.about-section-timeline-item:hover .about-section-timeline-dot::before {
  opacity: 1;
}

.about-section-timeline-item:hover .about-section-timeline-dot {
  transform: scale(1.1);
  box-shadow: var(--shadow-2xl);
}

.about-section-timeline-dot.primary { 
  background: linear-gradient(135deg, var(--color-inclusive), var(--color-inclusive-shade));
}
.about-section-timeline-dot.secondary { 
  background: linear-gradient(135deg, var(--color-original), #e65100);
}
.about-section-timeline-dot.tertiary { 
  background: linear-gradient(135deg, var(--color-sustainable), #d50000);
}
.about-section-timeline-dot.number { 
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
  font-family: var(--font-mono);
  font-size: var(--size-step-1);
  font-weight: var(--font-bold);
}

.about-section-timeline-text {
  flex: 1;
  padding-top: var(--space-s);
}

.about-section-timeline-text p {
  font-family: var(--font-display);
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1.2;
  transition: color var(--transition-base);
}



.about-section-section-description {
  font-size: var(--size-step-1);
  color: var(--color-mid-shade);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
  max-width: 600px;
}

.about-section-process-description {
  font-size: var(--size-step-1);
  color: var(--color-mid-shade);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
  max-width: 600px;
}

.about-section-process-description strong {
  color: var(--color-primary);
  font-weight: var(--font-bold);
}

.about-section-section-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-semibold);
  font-size: var(--size-step-1);
  transition: all var(--transition-smooth);
  border-bottom: 3px solid var(--color-inclusive);
  padding-bottom: var(--space-xs);
}

.about-section-section-cta:hover {
  color: var(--color-inclusive);
  transform: translateX(8px);
}

/* Right side sticky content */
.about-section-deals-sidebar {
  position: sticky;
  top: var(--space-s);
  height: fit-content;
}

.about-section-deals-header {
  margin-bottom: var(--space-l);
  text-align: left;
}

.about-section-deals-header h3 {
  font-family: var(--font-display);
  font-size: var(--size-step-3);
  font-weight: var(--font-black);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.2;
}

.about-section-deals-header p {
  color: var(--color-mid-shade);
  font-size: var(--size-step-0);
  font-weight: var(--font-medium);
}

.about-section-compact-results {
  margin-bottom: var(--space-l);
}

.about-section-compact-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

.about-section-compact-deal-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius);
  padding: var(--space-s);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-inclusive-shade);
  transition: all var(--transition-smooth);
  cursor: pointer;
  position: relative;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.about-section-compact-deal-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);

}

.about-section-compact-deal-badge {
  position: absolute;
  top: -2px;
  right: 6px;
  color: white;
  padding: 3px 8px;
  border-radius: var(--radius-s);
  font-size: 0.7em;
  font-weight: var(--font-semibold);
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

.about-section-compact-deal-badge.lifetime { background: linear-gradient(135deg, var(--color-sustainable), #d50000); }
.about-section-compact-deal-badge.student { background: linear-gradient(135deg, var(--color-inclusive), var(--color-inclusive-shade)); }
.about-section-compact-deal-badge.aws { background: linear-gradient(135deg, var(--color-original), #e65100); }
.about-section-compact-deal-badge.launch { background: linear-gradient(135deg, var(--color-ethical), #ad0e99); }
.about-section-compact-deal-badge.wordpress { background: linear-gradient(135deg, var(--color-sustainable), #d50000); }
.about-section-compact-deal-badge.opensource { background: linear-gradient(135deg, var(--color-bright), #ffa000); color: var(--color-charcoal); }

.about-section-compact-deal-title {
  font-size: var(--size-step-0);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2xs);
  line-height: 1.3;
  margin-top: var(--space-xs);
}

.about-section-compact-deal-description {
  color: var(--color-mid-shade);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
  font-size: 0.8em;
  flex: 1;
  opacity: 0.9;
}

.about-section-compact-deal-pricing {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}

.about-section-compact-original-price {
  text-decoration: line-through;
  color: var(--color-mid);
  font-size: 0.75em;
  opacity: 0.7;
}

.about-section-compact-deal-price {
  font-size: 0.85em;
  font-weight: var(--font-bold);
  color: var(--color-inclusive);
}

.about-section-compact-savings {
  background: linear-gradient(135deg, var(--color-bright), var(--color-bright-glare));
  color: var(--color-charcoal);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: 0.7em;
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-sm);
}

.about-section-deals-footer {
  margin-top: var(--space-l);
  text-align: left;
}

.about-section-deals-footer p {
  font-size: var(--size-step-0);
  color: var(--color-mid-shade);
  line-height: 1.7;
  margin-bottom: var(--space-m);
  max-width: 350px;
}

.about-section-deals-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-semibold);
  font-size: var(--size-step-0);
  transition: all var(--transition-smooth);
  border-bottom: 2px solid var(--color-inclusive);
  padding-bottom: 2px;
}

.about-section-deals-cta:hover {
  color: var(--color-inclusive);
  transform: translateX(6px);
}

/* Responsive design */
@media (max-width: 768px) {
  .about-section-mission-process-content {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
  }

  .about-section-deals-sidebar {
      position: static;
      margin-top: var(--space-xl);
  }

  .about-section-compact-results-grid {
      grid-template-columns: 1fr;
  }

  .about-section-content-timeline::before {
      left: 30px;
  }

  .about-section-timeline-dot {
      width: 60px;
      height: 60px;
      font-size: var(--size-step-1);
  }

  .about-section-content-section h2 {
      font-size: clamp(3rem, 10vw, 5rem);
  }
}

/* Coupon Section Styles */
.coupon-section {
  padding: var(--space-2xl) 0;
  background: var(--color-light);
}

.coupon-layout {
  display: grid;
  grid-template-columns: 20% 80%;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

/* Sidebar Styles */
.coupon-sidebar {
  position: sticky;
  top: var(--space-xl);
  height: fit-content;
}

.sidebar-section {
  background: white;
  border-radius: var(--radius-l);
  padding: var(--space-l);
  margin-bottom: var(--space-l);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(66, 0, 101, 0.1);
}

.sidebar-title {
  font-size: var(--size-step-1);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-m);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  border-bottom: 1px solid rgba(66, 0, 101, 0.1);
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-icon {
  font-size: 1.2em;
}

.feature-text {
  font-size: var(--size-step-0);
  color: var(--color-charcoal);
}

/* Coupons Grid Styles */
.coupons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-l);
}

.coupon-card {
  background: white;
  border-radius: var(--radius-l);
  padding: var(--space-l);
  position: relative;
  border: 1px solid rgba(66, 0, 101, 0.1);
  transition: all var(--transition-base);
}

.coupon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(66, 0, 101, 0.1);
  border-color: var(--color-primary);
}

.coupon-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-s);
}

.badge {
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge.discount {
  background: var(--color-inclusive);
  color: white;
}

.badge.type {
  background: var(--color-primary-bright);
  color: var(--color-primary);
}

.badge.rating {
  background: var(--color-charcoal);
  color: white;
}

.badge.verified {
  background: var(--color-success);
  color: white;
}

.coupon-timer {
  position: absolute;
  top: var(--space-l);
  right: var(--space-l);
  background: rgba(255, 0, 0, 0.1);
  color: #ff0000;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: var(--font-bold);
}

.coupon-title {
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: var(--color-charcoal);
  margin-bottom: var(--space-s);
}

.coupon-description {
  color: var(--color-mid);
  margin-bottom: var(--space-m);
  font-size: var(--size-step-0);
}

.coupon-pricing {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

.original-price {
  color: var(--color-mid);
  text-decoration: line-through;
  font-size: var(--size-step-0);
}

.deal-price {
  color: var(--color-inclusive);
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
}

.savings {
  background: var(--color-inclusive-bright);
  color: var(--color-inclusive);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: var(--font-bold);
}

.coupon-stats {
  display: flex;
  gap: var(--space-m);
  margin-bottom: var(--space-m);
}

.stat {
  color: var(--color-mid);
  font-size: 0.875rem;
}

.coupon-button {
  width: 100%;
  background: var(--gradient-stronger);
  color: white;
  border: none;
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all var(--transition-base);
}

.coupon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(66, 0, 101, 0.2);
}

/* Store Description */
.store-description {
  background: white;
  border-radius: var(--radius-l);
  padding: var(--space-xl);
  margin-bottom: var(--space-2xl);
  border: 1px solid rgba(66, 0, 101, 0.1);
}

.store-description h2 {
  font-size: var(--size-step-3);
  color: var(--color-primary);
  margin-bottom: var(--space-m);
}

.store-description p {
  color: var(--color-charcoal);
  line-height: 1.6;
}

/* Customer Reviews */
.customer-reviews {
  margin-bottom: var(--space-2xl);
}

.rating-factors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
  margin-top: var(--space-l);
}

.factor {
  background: white;
  border-radius: var(--radius-l);
  padding: var(--space-l);
  text-align: center;
  border: 1px solid rgba(66, 0, 101, 0.1);
}

.factor-icon {
  font-size: 2em;
  margin-bottom: var(--space-s);
  display: block;
}

.factor-name {
  color: var(--color-mid);
  font-size: var(--size-step-0);
  display: block;
  margin-bottom: var(--space-xs);
}

.factor-value {
  color: var(--color-primary);
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
}


/* Responsive Styles */
@media (max-width: 1024px) {
  .coupon-layout {
      grid-template-columns: 1fr;
  }

  .coupon-sidebar {
      position: static;
      order: -1;
  }

  .rating-factors {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .coupons-grid {
      grid-template-columns: 1fr;
  }


  .rating-factors {
      grid-template-columns: 1fr;
  }
}

/* WordPress Admin Bar Compatibility */
.single-store body {
  margin-top: 0;
}

.single-store .navbar {
  top: 0;
}

/* Admin bar present - adjust fixed navigation */
.admin-bar .single-store .navbar {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .single-store .navbar {
      top: 46px;
  }
}
/* coupon modal styles */
.coupon-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.coupon-modal {
  background: white;
  border-radius: var(--radius-xl);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  animation: modalSlideIn 0.3s ease forwards;
  position: relative;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes modalSlideIn {
  to { 
      transform: scale(1);
  }
}

.coupon-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-l);
  border-bottom: 1px solid var(--color-mid-glare);
  background: var(--gradient-subtle);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.coupon-modal-header h3 {
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-mid);
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: 50%;
  transition: all var(--transition-base);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--color-sustainable);
  color: white;
  transform: rotate(90deg);
}

.coupon-modal-body {
  padding: var(--space-xl);
}

.modal-step {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-base);
}

.modal-step.active {
  opacity: 1;
  transform: translateY(0);
}

.step-icon {
  font-size: 3rem;
  margin-bottom: var(--space-m);
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.modal-step h4 {
  font-size: var(--size-step-3);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-s);
}

.modal-step p {
  color: var(--color-mid-shade);
  margin-bottom: var(--space-l);
  line-height: 1.6;
}

.coupon-code-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  background: var(--color-light-shade);
  border: 3px dashed var(--color-inclusive);
  border-radius: var(--radius);
  padding: var(--space-l);
  margin: var(--space-l) 0;
  animation: highlight 0.5s ease;
}

@keyframes highlight {
  0% { background: var(--color-light-shade); }
  50% { background: rgba(169, 0, 192, 0.1); }
  100% { background: var(--color-light-shade); }
}

.coupon-code-display .code-label {
  font-weight: var(--font-bold);
  color: var(--color-mid-shade);
}

.coupon-code-display .code-value {
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  font-size: var(--size-step-2);
  color: var(--color-inclusive);
  background: white;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  border: 2px solid var(--color-inclusive);
  letter-spacing: 2px;
}

.copy-code-btn {
  background: var(--color-inclusive);
  color: white;
  border: none;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: 0.9em;
}

.copy-code-btn:hover {
  background: var(--color-inclusive-shade);
  transform: translateY(-2px);
}

.reveal-modal-btn {
  background: var(--gradient-stronger);
  color: white;
  border: none;
  padding: var(--space-m) var(--space-xl);
  border-radius: var(--radius-l);
  font-weight: var(--font-bold);
  font-size: var(--size-step-1);
  cursor: pointer;
  transition: all var(--transition-base);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(66, 0, 101, 0.3);
}

.reveal-modal-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(66, 0, 101, 0.4);
}

.modal-actions {
  display: flex;
  gap: var(--space-m);
  justify-content: center;
  flex-wrap: wrap;
}

.visit-store-btn {
  background: var(--gradient-stronger);
  color: white;
  border: none;
  padding: var(--space-m) var(--space-xl);
  border-radius: var(--radius-l);
  font-weight: var(--font-bold);
  font-size: var(--size-step-1);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.visit-store-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(66, 0, 101, 0.3);
}

.modal-secondary-btn {
  background: transparent;
  color: var(--color-mid-shade);
  border: 2px solid var(--color-mid-glare);
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-l);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-base);
}

.modal-secondary-btn:hover {
  border-color: var(--color-inclusive);
  color: var(--color-inclusive);
}

.coupon-modal-footer {
  padding: var(--space-l);
  border-top: 1px solid var(--color-mid-glare);
  background: var(--color-light-shade);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.modal-trust-indicators {
  display: flex;
  justify-content: center;
  gap: var(--space-l);
  flex-wrap: wrap;
}

.modal-trust-indicators .trust-item {
  font-size: 0.8em;
  color: var(--color-mid-shade);
  font-weight: var(--font-medium);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* Enhanced Category Tabs */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
  margin-bottom: var(--space-2xl);
  padding: var(--space-m);
  background: var(--color-light-shade);
  border-radius: var(--radius-l);
}

.category-tag {
  padding: var(--space-s) var(--space-m);
  background: white;
  border: 2px solid rgba(66, 0, 101, 0.1);
  border-radius: var(--radius-l);
  font-weight: var(--font-medium);
  color: var(--color-mid-shade);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  font-size: var(--size-step-0);
  position: relative;
  overflow: hidden;
}

.category-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.category-tag:hover::before {
  left: 100%;
}

.category-tag:hover {
  border-color: var(--color-inclusive);
  color: var(--color-inclusive);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(169, 0, 192, 0.15);
}

.category-tag.active {
  background: var(--gradient-stronger);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(66, 0, 101, 0.3);
}

/* Store Description Read More Functionality */
.about-section-section-description {
  position: relative;
}

.store-description-short {
  line-height: 1.7;
}

.read-more-dots {
  color: var(--color-mid);
}

.read-more-btn {
  background: none;
  border: none;
  color: var(--color-inclusive);
  font-weight: var(--font-bold);
  cursor: pointer;
  text-decoration: underline;
  padding: var(--space-xs) 0;
  margin-top: var(--space-xs);
  transition: color var(--transition-base);
}

.read-more-btn:hover {
  color: var(--color-inclusive-shade);
}

/* Coupon Reveal Button */
.coupon-reveal-btn,
.deal-btn {
  width: 100%;
  padding: var(--space-xs) var(--space-s);
  margin-top: var(--space-xs);
  border: 2px solid var(--color-inclusive);
  background: white;
  color: var(--color-inclusive);
  font-weight: var(--font-bold);
  font-size: 0.8em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.coupon-reveal-btn:hover,
.deal-btn:hover {
  background: var(--color-inclusive);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(169, 0, 192, 0.3);
}

.coupon-reveal-btn.revealed {
  background: var(--color-sustainable);
  border-color: var(--color-sustainable);
  color: white;
}

.coupon-reveal-btn.revealed:hover {
  background: #d50000;
  border-color: #d50000;
}

.code-text {
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  letter-spacing: 1px;
}

/* Enhanced Badge Styles */
.about-section-compact-deal-badge.code {
  background: linear-gradient(135deg, var(--color-sustainable), #d50000);
}

.about-section-compact-deal-badge.deal {
  background: linear-gradient(135deg, var(--color-inclusive), var(--color-inclusive-shade));
}

.about-section-compact-deal-badge.hot {
  background: linear-gradient(135deg, var(--color-original), #e65100);
  animation: pulse 2s infinite;
}

.about-section-compact-deal-badge.student {
  background: linear-gradient(135deg, var(--color-bright), var(--color-bright-glare));
  color: var(--color-charcoal);
}

.about-section-compact-deal-badge.lifetime {
  background: linear-gradient(135deg, var(--color-ethical), #ad0e99);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Store Logo Styling */
.store-logo {
  text-align: center;
  margin-bottom: var(--space-l);
}

.store-logo img {
  max-width: 200px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Store Categories */
.store-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-s);
}

.store-categories .category-tag {
  background: var(--color-primary-bright);
  color: var(--color-primary);
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius);
  font-size: 0.8em;
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: all var(--transition-base);
  border: 1px solid rgba(66, 0, 101, 0.2);
}

.store-categories .category-tag:hover {
  background: var(--color-primary);
  color: white;
  transform: translateY(-1px);
}

/* Coupon Code Styling */
.coupon-code {
  background: var(--color-light-shade);
  border: 2px dashed var(--color-mid-glare);
  border-radius: var(--radius);
  padding: var(--space-s);
  margin: var(--space-s) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition-base);
}

.coupon-code:hover {
  border-color: var(--color-inclusive);
  background: rgba(169, 0, 192, 0.05);
}

.code-label {
  font-weight: var(--font-bold);
  color: var(--color-mid-shade);
  font-size: 0.9em;
}

.code-value {
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  font-size: 1.1em;
  color: var(--color-inclusive);
  cursor: pointer;
  padding: var(--space-xs) var(--space-s);
  background: white;
  border-radius: var(--radius-xs);
  border: 2px solid var(--color-inclusive);
  transition: all var(--transition-base);
  user-select: all;
}

.code-value:hover {
  background: var(--color-inclusive);
  color: white;
  transform: scale(1.05);
}

.code-value:active {
  transform: scale(0.95);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .coupon-modal {
      width: 95%;
      margin: var(--space-s);
  }
  
  .coupon-modal-body {
      padding: var(--space-l);
  }
  
  .modal-actions {
      flex-direction: column;
  }
  
  .category-tabs {
      padding: var(--space-s);
  }
  
  .category-tag {
      font-size: 0.9em;
      padding: var(--space-xs) var(--space-s);
  }
}


/* Accessibility and reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    .floating-element {
        animation: none !important;
    }
    
    .trust-track {
        animation: none !important;
    }
    
    .scroll-indicator {
        animation: none !important;
    }
}

/* Breadcrumbs */
.blog-breadcrumbs {
  background: var(--color-light-shade);
  padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--color-mid-glare);
  font-size: var(--size-step-0);
}

.blog-breadcrumbs-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.blog-breadcrumb-link {
  color: var(--color-mid-shade);
  text-decoration: none;
  transition: color var(--transition-base);
}

.blog-breadcrumb-link:hover {
  color: var(--color-inclusive);
}

.blog-breadcrumb-separator {
  color: var(--color-mid);
  font-weight: var(--font-medium);
}

.blog-breadcrumb-current {
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

/* Main Blog Layout */
.blog-post-section {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  padding: var(--space-3xl) var(--space-3xl);
  grid-template-columns: 1fr 300px;
  gap: var(--space-l);
  align-items: start;
}

.blog-main-content {
  padding: 0 var(--space-xl);
        }

/* Blog Header */
.blog-post-header {
  margin-bottom: var(--space-l);
  text-align: left;
}

.blog-post-category {
  display: inline-block;
  background: var(--gradient-stronger);
  color: white;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-l);
  font-size: var(--size-step-0);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-l);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-post-title {
  font-size: var(--size-step-6);
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-l);
}


.blog-post-subtitle {
  font-size: var(--size-step-2);
  color: var(--color-mid-shade);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.blog-post-meta {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: var(--space-l);
  font-size: var(--size-step-0);
  color: var(--color-mid-shade);
  margin-bottom: var(--space-xl);
}

.blog-post-author {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.blog-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-inclusive);
}

.blog-post-date, .blog-read-time {
  font-weight: var(--font-medium);
}

/* Featured Image */
.blog-featured-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius-l);
  margin-bottom: var(--space-l);
  box-shadow: var(--shadow-s);
}

/* Typography Styles */
.blog-content h1 {
  font-size: var(--size-step-5);
  font-weight: var(--font-black);
  color: var(--color-primary);
  line-height: 0.9;
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-l);
  position: relative;
  padding-bottom: var(--space-s);
}


.blog-content h2 {
  font-size: var(--size-step-4);
  font-weight: var(--font-black);
  color: var(--color-primary);
  line-height: 1.2;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-l);
  position: relative;
  padding-bottom: var(--space-xs);
  max-width: 52ch; /* 20% less than 65ch */
}

.blog-content h3 {
  font-size: var(--size-step-3);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1.3;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-m);
  position: relative;
  padding-bottom: var(--space-2xs);
  max-width: 52ch; /* 20% less than 65ch */
}

.blog-content h4 {
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: var(--color-mid-shade);
  line-height: 1.4;
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
  border-left: 4px solid var(--color-inclusive);
  padding-left: var(--space-s);
  max-width: 52ch; /* 20% less than 65ch */
}

.blog-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, var(--color-inclusive), var(--color-sustainable));
  border-radius: 2px;
}

.blog-content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--color-original);
  border-radius: 1px;
}
.blog-content h4::after{
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: var(--color-mid-shade);
  line-height: 1.4;
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-mid-glare);
  padding-bottom: var(--space-2xs);
}

.blog-content h6 {
  font-size: var(--size-step-1);
  font-weight: var(--font-bold);
  color: var(--color-mid-shade);
  line-height: 1.4;
  margin-top: var(--space-m);
  margin-bottom: var(--space-s);
  font-family: var(--font-mono);
  background: var(--color-light-shade);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-s);
}

.blog-content p {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  word-spacing: 0.5px;
  color: var(--color-charcoal);
  line-height: 1.5;
  margin-bottom: var(--space-m);
  max-width: 65ch;
}

.blog-content p + h1,
.blog-content p + h2,
.blog-content p + h3 {
  margin-top: var(--space-2xl);
}

.blog-content strong,
.blog-content b {
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

/* Lists */
.blog-content ul,
.blog-content ol {
  margin: var(--space-xs) 0;
}

.blog-content ul {
  list-style: none;
}

.blog-content ul li {
  position: relative;
  padding-left: var(--space-l); /* Add padding for the arrow */
  padding-right: var(--space-xs);
  list-style-position: inside;
  gap: var(--space-xs);
  margin-bottom: var(--space-s);
  font-size: var(--size-step-0);
  line-height: 1.7;
  color: var(--color-charcoal);
}

.blog-content ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0.7em;
  transform: translateY(-50%);
  color: var(--color-inclusive); /* Use the same color as ordered list markers */
  font-weight: var(--font-bold);
}

.blog-content ol li {
  margin-bottom: var(--space-s);
  padding-left: var(--space-l); /* Add padding for the numbers */
  font-size: var(--size-step-1);
  line-height: 1.7;
  color: var(--color-charcoal);
  counter-increment: list-counter;
}

.blog-content ol {
  counter-reset: list-counter;
}

.blog-content ol li::marker {
  color: var(--color-inclusive);
  font-weight: var(--font-bold);
}

/* Nested lists */
.blog-content ul ul,
.blog-content ol ol,
.blog-content ul ol,
.blog-content ol ul {
  margin: var(--space-s) 0;
  padding-left: var(--space-l);
}

.blog-content ul ul li::before {
  background: var(--color-original);
  width: 6px;
  height: 6px;
}

/* Blockquotes */
.blog-content blockquote {
  margin: var(--space-2xl) 0;
  padding: var(--space-l) var(--space-l);
  background: var(--gradient-subtle);
  border-left: 6px solid var(--color-inclusive);
  border-radius: var(--radius);
  position: relative;
  font-style: italic;
}

.blog-content blockquote::before {
  content: '"';
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  font-size: var(--size-step-6);
  color: var(--color-inclusive);
  opacity: 0.3;
  font-family: serif;
}

.blog-content blockquote p {
  font-size: var(--size-step-2);
  color: var(--color-primary);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-s);
}

.blog-content blockquote cite {
  display: block;
  text-align: right;
  font-size: var(--size-step-0);
  color: var(--color-mid-shade);
  font-style: normal;
  font-weight: var(--font-bold);
}

.blog-content blockquote cite::before {
  content: '— ';
}

/* Images */
.blog-content img,
.blog-content picture {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: var(--space-m) 0;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base);
}

.blog-content img:hover {
  transform: scale(1.02);
}

.blog-content figure {
  margin: var(--space-m) 0;
  text-align: center;
}

.blog-content figcaption {
  margin-top: var(--space-s);
  font-size: var(--size-step-0);
  color: var(--color-mid-shade);
  font-style: italic;
}

/* Video and iframes */
.blog-content iframe,
.blog-content video {
  width: 100%;
  height: 400px;
  border-radius: var(--radius);
  margin: var(--space-m) 0;
  border: none;
  box-shadow: var(--shadow-m);
}

.blog-content video {
  height: auto;
}

/* Code blocks */
.blog-content pre {
  background: var(--color-charcoal);
  color: var(--color-light);
  padding: var(--space-l);
  border-radius: var(--radius);
  margin: var(--space-xl) 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--size-step-0);
}

.blog-content code {
  background: var(--color-light-shade);
  color: var(--color-primary);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.blog-content pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* Tables */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-m) 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.blog-content th,
.blog-content td {
  padding: var(--space-s) var(--space-m);
  text-align: left;
  border-bottom: 1px solid var(--color-mid-glare);
}

.blog-content th {
  background: var(--gradient-stronger);
  color: white;
  font-weight: var(--font-bold);
  font-size: var(--size-step-0);
}

.blog-content td {
  font-size: var(--size-step-0);
}

.blog-content tr:hover {
  background: var(--color-light-shade);
}

/* Sidebar */
.blog-sidebar {
  position: sticky;
  top: var(--space-l);
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* Table of Contents */
.blog-toc {
  background: var(--gradient-subtle);
  padding: var(--space-s);
  border-radius: var(--radius-m);
  border: 1px solid var(--color-mid-glare);
}

.blog-toc h3 {
  font-size: var(--size-step-1);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-w);
  text-align: left;
}
.blog-toc ul {
  list-style: none; /* Remove default disc */
  padding: var(--space-2xs) 0;
  margin: 0;
}

.blog-toc ul li {
  position: relative;
  padding-left: 1.2em; /* Make space for the arrow */
}

.blog-toc ul li::before {
  content: "→"; /* Unicode arrow */
  position: absolute;
  left: 0;
  color: var(--color-inclusive-shade);
  font-size: 1em;
}

.blog-toc ul li {
  margin-bottom: var(--space-2xs);
}

.blog-toc ul li a {
  color: var(--color-mid-shade);
  text-decoration: none;
  font-size: var(--size-step-xs);
  transition: all var(--transition-base);
  display: block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-s);
}

.blog-toc ul li a:hover {
  color: var(--color-inclusive);
  background: white;
  transform: translateX(4px);
}

.blog-toc ul ul {
  margin-top: var(--space-xs);
  margin-left: var(--space-m);
}

.blog-toc ul ul li a {
  font-size: calc(var(--size-step-xs) * 0.9);
  opacity: 0.8;
}

/* Author Section */
.blog-author-section {
  background: white;
  padding: var(--space-l);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.blog-author-section .blog-author-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-m);
  border: 3px solid var(--color-inclusive);
}

.blog-author-section h4 {
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-s);
}

.blog-author-section p {
  font-size: var(--size-step-0);
  color: var(--color-mid-shade);
  line-height: 1.6;
  margin-bottom: var(--space-m);
}

.blog-author-social {
  display: flex;
  justify-content: center;
  gap: var(--space-s);
}

.blog-author-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--gradient-stronger);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  transition: transform var(--transition-base);
}

.blog-author-social a:hover {
  transform: scale(1.1);
}

/* Newsletter */
.blog-newsletter {
  background: var(--gradient-strong);
  padding: var(--space-l);
  border-radius: var(--radius-l);
  text-align: center;
}

.blog-newsletter h3 {
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: white;
  margin-bottom: var(--space-s);
}

.blog-newsletter p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--size-step-0);
  margin-bottom: var(--space-m);
}

.blog-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.blog-newsletter-form input {
  padding: var(--space-s);
  border: none;
  border-radius: var(--radius);
  font-size: var(--size-step-0);
  font-family: var(--font-base);
}

.blog-newsletter-form button {
  padding: var(--space-s);
  background: var(--color-bright);
  color: var(--color-charcoal);
  border: none;
  border-radius: var(--radius);
  font-size: var(--size-step-0);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all var(--transition-base);
}

.blog-newsletter-form button:hover {
  background: var(--color-bright-glare);
  transform: translateY(-2px);
}

/* Footer */
.blog-footer {
  background: var(--color-charcoal);
  color: var(--color-light);
  padding: var(--space-3xl) var(--space-m) var(--space-xl);
  margin-top: var(--space-3xl);
}

.blog-footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
}

.blog-footer-section h4 {
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  color: white;
  margin-bottom: var(--space-m);
}

.blog-footer-section ul {
  list-style: none;
  padding: 0;
}

.blog-footer-section ul li {
  margin-bottom: var(--space-s);
}

.blog-footer-section ul li a {
  color: var(--color-mid-glare);
  text-decoration: none;
  transition: color var(--transition-base);
}

.blog-footer-section ul li a:hover {
  color: var(--color-inclusive);
}

.blog-footer-bottom {
  text-align: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-mid-shade);
  color: var(--color-mid);
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-post-section {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-l) var(--space-l);
  }
  .blog-main-content {
    padding: 0 }

  .blog-sidebar {
    position: static;
    order: -1;
  }

  .blog-post-title {
    font-size: var(--size-step-5);
  }

  .blog-content h1 {
    font-size: var(--size-step-4);
  }

  .blog-content h2 {
    font-size: var(--size-step-3);
  }

  .blog-post-meta {
    flex-wrap: wrap;
  }

  .blog-breadcrumbs-container {
    flex-wrap: wrap;
  }

  .blog-footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Archive Page Styles */
.archive-section {
    padding: var(--space-2xl) 0;
}

.archive-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.archive-title {
    font-size: var(--size-step-3);
    color: var(--color-primary);
    margin-bottom: var(--space-m);
}

.archive-description {
    color: var(--color-mid-shade);
    max-width: 800px;
    margin: 0 auto;
    font-size: var(--size-step-0);
}

/* Pagination Styles */
.pagination-container {
    margin-top: var(--space-2xl);
    text-align: center;
}

.pagination-container .page-numbers {
    display: inline-flex;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-container .page-numbers li {
    display: inline-block;
}

.pagination-container .page-numbers a,
.pagination-container .page-numbers span {
    display: inline-block;
    padding: var(--space-xs) var(--space-s);
    border: 2px solid var(--color-primary-bright);
    border-radius: var(--radius-s);
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-base);
}

.pagination-container .page-numbers a:hover {
    background: var(--color-primary-bright);
    color: var(--color-primary);
}

.pagination-container .page-numbers .current {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.pagination-container .page-numbers .prev,
.pagination-container .page-numbers .next {
    font-weight: var(--font-bold);
}

/* Post Thumbnail in Cards */
.post-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-m);
    margin-bottom: var(--space-m);
}

/* No Posts Message */
.no-posts {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--color-primary-bright);
    border-radius: var(--radius-xl);
    color: var(--color-primary);
}

.no-posts h2 {
    margin-bottom: var(--space-s);
}

/* Category Meta Styles */
.category-meta {
    display: flex;
    gap: var(--space-s);
    color: var(--color-mid-shade);
    font-size: var(--size-step--1);
    margin-bottom: var(--space-m);
}

.post-author,
.post-date {
    display: flex;
    align-items: center;
}

.post-author::before {
    content: '👤';
    margin-right: var(--space-2xs);
}

.post-date::before {
    content: '📅';
    margin-right: var(--space-2xs);
}

/* Update Category Card for simpler layout */
.category-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.category-title {
    margin-bottom: var(--space-s);
}

.category-tags {
    margin-top: auto;
    margin-bottom: var(--space-m);
}


        /* Archive Header */
        .blog-archive-header {
          margin-bottom: var(--space-3xl);
          text-align: center;
        }

        .blog-archive-category {
          display: inline-block;
          background: var(--gradient-stronger);
          color: white;
          padding: var(--space-xs) var(--space-m);
          border-radius: var(--radius-l);
          font-size: var(--size-step-0);
          font-weight: var(--font-bold);
          margin-bottom: var(--space-l);
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .blog-archive-title {
          font-size: var(--size-step-6);
          font-weight: var(--font-black);
          color: var(--color-primary);
          line-height: 1.1;
          margin-bottom: var(--space-l);
          position: relative;
        }

        .blog-archive-title::after {
          content: '';
          position: absolute;
          bottom: -15px;
          left: 50%;
          transform: translateX(-50%);
          width: 80px;
          height: 4px;
          background: var(--gradient-stronger);
          border-radius: 2px;
        }

        .blog-archive-description {
          font-size: var(--size-step-1);
          color: var(--color-mid-shade);
          font-weight: var(--font-medium);
          margin-bottom: var(--space-l);
          max-width: 600px;
          margin-left: auto;
          margin-right: auto;
        }

/* Error Pages */
.error-section {
    padding: 4rem 0;
    text-align: center;
}

.error-header {
    margin-bottom: 3rem;
}

.error-title {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.error-description {
    font-size: 1.2rem;
    color: var(--gray-700);
    max-width: 600px;
    margin: 0 auto;
}

.error-content {
    max-width: 800px;
    margin: 0 auto;
}

.error-suggestions {
    margin-bottom: 2rem;
}

.error-suggestions h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--gray-800);
}

.error-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-suggestions li {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

.error-suggestions a {
    color: var(--primary);
    text-decoration: none;
}

.error-suggestions a:hover {
    text-decoration: underline;
}

/* Search Form */
.search-form-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--gray-100);
    border-radius: 8px;
}

.search-form {
    display: flex;
    gap: 1rem;
}

.search-form label {
    flex: 1;
}

.search-form .search-field {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-inclusive-shade);
    border-radius: 4px;
    font-size: 1rem;
}

.search-form .search-submit {
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.search-form .search-submit:hover {
    background: var(--primary-dark);
}

/* No Posts Message */
.no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    background: var(--gray-100);
    border-radius: 8px;
}

.no-posts h2 {
    color: var(--gray-800);
    margin-bottom: 1rem;
}

.no-posts p {
    color: var(--gray-700);
}


        /* Team Section */
        .about-section-team-sidebar {
          position: sticky;
          top: var(--space-s);
          height: fit-content;
      }

      .about-section-team-header {
          margin-bottom: var(--space-l);
          text-align: left;
      }

      .about-section-team-header h3 {
          font-family: var(--font-display);
          font-size: var(--size-step-3);
          font-weight: var(--font-black);
          color: var(--color-primary);
          margin-bottom: var(--space-xs);
          line-height: 1.2;
      }

      .about-section-team-header p {
          color: var(--color-mid-shade);
          font-size: var(--size-step-0);
          font-weight: var(--font-medium);
      }

      .about-section-team-members {
          display: flex;
          flex-direction: column;
          gap: var(--space-l);
      }

      .about-section-team-member {
          background: rgba(255, 255, 255, 0.95);
          border-radius: var(--radius);
          padding: var(--space-l);
          box-shadow: var(--shadow-sm);
          border: 1px solid rgba(66, 0, 101, 0.08);
          transition: all var(--transition-smooth);
          position: relative;
          overflow: hidden;
      }

      .about-section-team-member:hover {
          transform: translateY(-2px);
          box-shadow: var(--shadow-lg);
          border-color: rgba(169, 0, 192, 0.15);
      }

      .about-section-team-member::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 4px;
          height: 100%;
          background: var(--gradient-primary);
          opacity: 0;
          transition: opacity var(--transition-smooth);
      }

      .about-section-team-member:hover::before {
          opacity: 1;
      }

      .about-section-member-name {
          font-size: var(--size-step-2);
          font-weight: var(--font-bold);
          color: var(--color-primary);
          margin-bottom: var(--space-xs);
          line-height: 1.3;
      }

      .about-section-member-role {
          font-size: var(--size-step-0);
          font-weight: var(--font-semibold);
          color: var(--color-inclusive);
          margin-bottom: var(--space-s);
          text-transform: uppercase;
          letter-spacing: 0.5px;
      }

      .about-section-member-description {
          color: var(--color-mid-shade);
          line-height: 1.6;
          font-size: var(--size-step-0);
      }

      .about-section-vision-section {
          margin-top: var(--space-2xl);
          padding-top: var(--space-2xl);
          border-top: 2px solid rgba(169, 0, 192, 0.1);
      }

      .about-section-vision-content {
          background: rgba(169, 0, 192, 0.05);
          border-radius: var(--radius);
          padding: var(--space-l);
          border-left: 4px solid var(--color-inclusive);
          margin-bottom: var(--space-l);
      }

      .about-section-vision-text {
          color: var(--color-mid-shade);
          font-size: var(--size-step-1);
          line-height: 1.7;
          font-weight: var(--font-medium);
          margin: 0;
      }

      /* What Drives Us - Full Section */
      .drives-section {
          padding: var(--space-3xl) 1rem;
          background: linear-gradient(135deg, 
              rgba(246, 243, 248, 0.8) 0%, 
              rgba(255, 255, 255, 1) 50%, 
              rgba(246, 243, 248, 0.6) 100%);
          position: relative;
      }

      .drives-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: 
              radial-gradient(circle at 10% 20%, rgba(169, 0, 192, 0.03) 0%, transparent 50%),
              radial-gradient(circle at 90% 80%, rgba(66, 0, 101, 0.03) 0%, transparent 50%);
          pointer-events: none;
      }

      .drives-content {
          max-width: 1200px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
      }

      .drives-header {
          text-align: center;
          margin-bottom: var(--space-3xl);
      }

      .drives-header h2 {
          font-size: var(--size-step-6);
          font-weight: var(--font-black);
          color: var(--color-primary);
          margin-bottom: var(--space-m);
          line-height: 0.9;
      }

      .drives-header p {
          font-size: var(--size-step-2);
          color: var(--color-mid-shade);
          font-weight: var(--font-medium);
          max-width: 600px;
          margin: 0 auto;
          line-height: 1.4;
      }

      .drives-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: var(--space-m);
          margin-bottom: var(--space-m);
      }

      .drives-item {
          background: rgba(255, 255, 255, 0.95);
          border-radius: var(--radius-l);
          padding: var(--space-xl);
          box-shadow: var(--shadow-sm);
          border: 1px solid rgba(66, 0, 101, 0.08);
          transition: all var(--transition-smooth);
          position: relative;
          overflow: hidden;
      }

      .drives-item::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: var(--gradient-primary);
          transform: scaleX(0);
          transform-origin: left;
          transition: transform var(--transition-smooth);
      }

      .drives-item:hover::before {
          transform: scaleX(1);
      }

      .drives-item:hover {
          transform: translateY(-4px);
          box-shadow: var(--shadow-xl);
          border-color: rgba(169, 0, 192, 0.15);
      }

      .drives-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: var(--size-step-3);
          margin-bottom: var(--space-m);
          background: var(--gradient-primary);
          color: white;
          box-shadow: var(--shadow-lg);
      }

      .drives-title {
          font-size: var(--size-step-2);
          font-weight: var(--font-black);
          color: var(--color-primary);
          margin-bottom: var(--space-s);
          line-height: 1.2;
      }

      .drives-description {
          color: var(--color-mid-shade);
          font-size: var(--size-step-0);
          line-height: 1.6;
      }


      /* Future Plans Section */
      .future-section {
          padding: var(--space-3xl) 1rem;
          background: var(--gradient-hero);
          position: relative;
      }

      .future-content {
          max-width: 900px;
          margin: 0 auto;
          text-align: center;
          position: relative;
          z-index: 1;
      }

      .future-header h2 {
          font-size: var(--size-step-6);
          font-weight: var(--font-black);
          color: var(--color-primary);
          margin-bottom: var(--space-m);
          line-height: 0.9;
      }

      .future-description {
          font-size: var(--size-step-2);
          color: var(--color-mid-shade);
          line-height: 1.6;
          margin-bottom: var(--space-2xl);
          font-weight: var(--font-medium);
      }

      .future-roadmap {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: var(--space-l);
          margin-bottom: var(--space-2xl);
      }

      .roadmap-item {
          background: rgba(255, 255, 255, 0.9);
          border-radius: var(--radius);
          padding: var(--space-l);
          text-align: left;
          border-left: 4px solid var(--color-inclusive);
          transition: all var(--transition-smooth);
      }

      .roadmap-item:hover {
          background: rgba(255, 255, 255, 1);
          transform: translateY(-2px);
          box-shadow: var(--shadow-lg);
      }

      .roadmap-title {
          font-size: var(--size-step-1);
          font-weight: var(--font-bold);
          color: var(--color-primary);
          margin-bottom: var(--space-xs);
      }

      .roadmap-description {
          color: var(--color-mid-shade);
          font-size: var(--size-step-0);
          line-height: 1.6;
      }

  

      /* Responsive design */
      @media (max-width: 768px) {
          .about-section-mission-process-content {
              grid-template-columns: 1fr;
              gap: var(--space-xl);
          }

          .about-section-team-sidebar {
              position: static;
              margin-top: var(--space-xl);
          }

          .about-section-content-timeline::before {
              left: 30px;
          }

          .about-section-timeline-dot {
              width: 60px;
              height: 60px;
              font-size: var(--size-step-1);
          }

          .about-section-content-section h2 {
              font-size: clamp(3rem, 10vw, 5rem);
          }

          .drives-grid {
              grid-template-columns: 1fr;
              gap: var(--space-l);
          }

          .drives-item {
              padding: var(--space-l);
          }

          .stats-grid {
              grid-template-columns: repeat(2, 1fr);
              gap: var(--space-l);
          }

          .future-roadmap {
              grid-template-columns: 1fr;
              gap: var(--space-m);
          }

      }

      @media (max-width: 480px) {
          .stats-grid {
              grid-template-columns: 1fr;
          }
      }
      /* Main Contact Section */
      .contact-main {
        padding: var(--space-3xl) 1rem;
        background: var(--color-light);
    }

    .contact-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3xl);
        align-items: start;
    }

    /* Left Column - Ways to Contact */
    .contact-ways {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .contact-way {
        background: rgba(255, 255, 255, 0.9);
        border-radius: var(--radius-l);
        padding: var(--space-xl);
        border-left: 4px solid var(--color-inclusive);
        box-shadow: var(--shadow-sm);
        border: 1px solid rgba(66, 0, 101, 0.08);
        transition: all var(--transition-smooth);
    }

    .contact-way:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(169, 0, 192, 0.15);
    }

    .contact-way-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var(--gradient-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: var(--size-step-2);
        margin-bottom: var(--space-m);
        box-shadow: var(--shadow-lg);
    }

    .contact-way-title {
        font-size: var(--size-step-2);
        font-weight: var(--font-bold);
        color: var(--color-primary);
        margin-bottom: var(--space-s);
    }

    .contact-way-description {
        color: var(--color-mid-shade);
        font-size: var(--size-step-0);
        line-height: 1.6;
        margin-bottom: var(--space-s);
    }

    .contact-way-details {
        color: var(--color-inclusive);
        font-weight: var(--font-semibold);
        font-size: var(--size-step-0);
    }

    /* Right Column - Email Actions */
    .email-actions-section {
        background: rgba(246, 243, 248, 0.5);
        border-radius: var(--radius-l);
        padding: var(--space-xl);
        position: sticky;
        top: var(--space-l);
        text-align: center;
    }

    .email-header {
        margin-bottom: var(--space-l);
    }

    .email-header h3 {
        font-size: var(--size-step-3);
        font-weight: var(--font-black);
        color: var(--color-primary);
        margin-bottom: var(--space-s);
    }

    .email-header p {
        color: var(--color-mid-shade);
        font-size: var(--size-step-0);
    }

    .email-display {
        background: rgba(255, 255, 255, 0.9);
        border-radius: var(--radius);
        padding: var(--space-l);
        margin-bottom: var(--space-l);
        border: 2px solid rgba(169, 0, 192, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-s);
        transition: all var(--transition-smooth);
    }

    .email-display:hover {
        border-color: var(--color-inclusive);
        background: rgba(255, 255, 255, 1);
    }

    .email-icon {
        font-size: var(--size-step-2);
    }

    .email-address {
        font-family: var(--font-mono);
        font-size: var(--size-step-1);
        font-weight: var(--font-bold);
        color: var(--color-primary);
        user-select: all;
    }

    .email-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-s);
        margin-bottom: var(--space-l);
    }

    .email-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-s);
        padding: var(--space-s) var(--space-l);
        border: none;
        border-radius: var(--radius);
        font-size: var(--size-step-0);
        font-weight: var(--font-semibold);
        cursor: pointer;
        transition: all var(--transition-smooth);
        font-family: var(--font-base);
    }

    .copy-btn {
        background: var(--gradient-primary);
        color: white;
    }

    .copy-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .copy-btn.copied {
        background: var(--color-sustainable);
    }

    .outlook-btn {
        background: rgba(0, 120, 215, 0.1);
        color: #0078d7;
        border: 2px solid rgba(0, 120, 215, 0.2);
    }

    .outlook-btn:hover {
        background: rgba(0, 120, 215, 0.2);
        transform: translateY(-1px);
    }

    .apple-btn {
        background: rgba(255, 149, 0, 0.1);
        color: #ff9500;
        border: 2px solid rgba(255, 149, 0, 0.2);
    }

    .apple-btn:hover {
        background: rgba(255, 149, 0, 0.2);
        transform: translateY(-1px);
    }

    .gmail-btn {
        background: rgba(234, 67, 53, 0.1);
        color: #ea4335;
        border: 2px solid rgba(234, 67, 53, 0.2);
    }

    .gmail-btn:hover {
        background: rgba(234, 67, 53, 0.2);
        transform: translateY(-1px);
    }

    .btn-icon {
        font-size: var(--size-step-1);
    }

    .response-promise {
        padding: var(--space-m);
        background: rgba(169, 0, 192, 0.05);
        border-radius: var(--radius);
        border-left: 4px solid var(--color-inclusive);
    }

    .response-promise p {
        color: var(--color-mid-shade);
        font-size: var(--size-step-0);
        line-height: 1.5;
        margin-bottom: var(--space-xs);
    }

    .response-promise p:last-child {
        margin-bottom: 0;
    }

    /* Feedback Categories Section */
    .feedback-categories {
        padding: var(--space-3xl) 1rem;
        background: linear-gradient(135deg, 
            rgba(246, 243, 248, 0.8) 0%, 
            rgba(255, 255, 255, 1) 50%, 
            rgba(246, 243, 248, 0.6) 100%);
    }
    .categories-container {
      max-width: 1200px;
      margin: 0 auto;
  }

  .categories-header {
      text-align: center;
      margin-bottom: var(--space-3xl);
  }

  .categories-header h2 {
      font-size: var(--size-step-6);
      font-weight: var(--font-black);
      color: var(--color-primary);
      margin-bottom: var(--space-m);
  }

  .categories-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--space-xl);
  }

  .category-item {
      background: rgba(255, 255, 255, 0.95);
      border-radius: var(--radius-l);
      padding: var(--space-l);
      box-shadow: var(--shadow-sm);
      border: 1px solid rgba(66, 0, 101, 0.08);
      transition: all var(--transition-smooth);
  }

  .category-item:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-xl);
      border-color: rgba(169, 0, 192, 0.15);
  }

  .category-bullet {
      color: var(--color-inclusive);
      font-weight: var(--font-black);
      font-size: var(--size-step-1);
      margin-right: var(--space-xs);
  }

  .category-title {
      font-size: var(--size-step-1);
      font-weight: var(--font-bold);
      color: var(--color-primary);
      margin-bottom: var(--space-s);
  }

  .category-description {
      color: var(--color-mid-shade);
      font-size: var(--size-step-0);
      line-height: 1.6;
  }

  /* Why Feedback Matters Section */
  .why-feedback {
      padding: var(--space-3xl) 1rem;
      background: var(--color-charcoal);
      color: var(--color-light);
  }

  .why-feedback-container {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
  }

  .why-feedback h2 {
      font-size: var(--size-step-6);
      font-weight: var(--font-black);
      margin-bottom: var(--space-l);
  }

  .why-feedback-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--space-l);
      margin-top: var(--space-2xl);
  }

  .why-feedback-item {
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--radius);
      padding: var(--space-l);
      border: 1px solid rgba(169, 0, 192, 0.2);
      transition: all var(--transition-smooth);
  }

  .why-feedback-item:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-2px);
  }

  .why-feedback-item p {
      font-size: var(--size-step-0);
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.9);
  }
 /* Footer CTA */
 .contact-us-bottom-cta {
  padding: var(--space-2xl) 1rem;
  background: var(--gradient-hero);
  text-align: center;
}

.contact-us-bottom-cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.contact-us-bottom-cta h3 {
  font-size: var(--size-step-4);
  font-weight: var(--font-black);
  color: var(--color-primary);
  margin-bottom: var(--space-s);
}

.contact-us-bottom-cta p {
  color: var(--color-mid-shade);
  font-size: var(--size-step-1);
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-container {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
  }

  .contact-form-section {
      position: static;
  }

  .categories-grid {
      grid-template-columns: 1fr;
      gap: var(--space-l);
  }

  .why-feedback-grid {
      grid-template-columns: 1fr;
      gap: var(--space-m);
  }

  .contact-us-hero-title {
      font-size: clamp(2.5rem, 8vw, 4rem);
  }
}


        /* Hero Section */
        .contact-us-hero-section {
          padding: var(--space-3xl) 1rem var(--space-2xl);
          background: var(--gradient-hero);
          position: relative;
          text-align: center;
      }

      .contact-us-hero-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: 
              radial-gradient(circle at 20% 80%, rgba(169, 0, 192, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(66, 0, 101, 0.06) 0%, transparent 50%);
          pointer-events: none;
      }

      .contact-us-hero-content {
          max-width: 800px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
      }

      .contact-us-hero-title {
          font-size: var(--size-step-7);
          font-weight: var(--font-black);
          color: var(--color-primary);
          line-height: 0.9;
          margin-bottom: var(--space-m);
      }

      .contact-us-hero-subtitle {
          font-size: var(--size-step-3);
          font-weight: var(--font-black);
          color: var(--color-inclusive);
          margin-bottom: var(--space-l);
          line-height: 1.1;
      }

      .contact-us-hero-description {
          font-size: var(--size-step-1);
          color: var(--color-mid-shade);
          line-height: 1.7;
          max-width: 600px;
          margin: 0 auto;
      }


        /* Hero Section */
        .legal-info-hero {
          padding: var(--space-3xl) 1rem var(--space-l);
          background: var(--gradient-hero);
          text-align: center;
      }

      .legal-info-hero h1 {
          font-size: var(--size-step-6);
          font-weight: var(--font-black);
          color: var(--color-primary);
          margin-bottom: var(--space-m);
      }

      .legal-info-hero p {
          font-size: var(--size-step-1);
          color: var(--color-mid-shade);
          max-width: 600px;
          margin: 0 auto;
      }

      /* Navigation */
      .legal-info-nav {
          background: var(--color-primary-bright);
          padding: 0.5rem var(--space-3xl) ;
          position: sticky;
          top: 0;
          z-index: 100;
          border-bottom: 1px solid rgba(66, 0, 101, 0.1);
          display: flex;
      }

      .legal-info-nav-container {
          max-width: 1200px;
          margin: 0 auto;
          text-align: center;

      }

      .legal-info-nav-title {
          font-size: var(--size-step-2);
          font-weight: var(--font-bold);
          color: var(--color-primary);
          margin-bottom: var(--space-s);
      }

      .legal-info-nav-links {
          display: flex;
          flex-wrap: wrap;
          gap: var(--space-s);
      }

      .legal-info-nav-link {
          color: var(--color-mid-shade);
          text-decoration: none;
          padding: var(--space-xs) var(--space-s);
          border-radius: var(--radius-s);
          font-size: var(--size-step-0);
          font-weight: var(--font-medium);
          transition: all var(--transition-base);
      }

      .legal-info-nav-link:hover {
          background: var(--color-inclusive);
          color: white;
          transform: translateY(-1px);
      }

      /* Main Content */
      .legal-info-content {
          max-width: 900px;
          margin: 0 auto;
          padding: var(--space-2xl) 1rem;
      }

      .legal-info-section {
          margin-bottom: var(--space-3xl);
          scroll-margin-top: 100px;
      }

      .legal-info-section-title {
          font-size: var(--size-step-4);
          font-weight: var(--font-black);
          color: var(--color-primary);
          margin-bottom: var(--space-l);
          border-bottom: 3px solid var(--color-inclusive);
          padding-bottom: var(--space-s);
      }

      .legal-info-subsection {
          margin-bottom: var(--space-xl);
      }

      .legal-info-subsection-title {
          font-size: var(--size-step-2);
          font-weight: var(--font-bold);
          color: var(--color-primary);
          margin-bottom: var(--space-s);
      }

      .legal-info-text {
          font-size: var(--size-step-0);
          line-height: 1.7;
          margin-bottom: var(--space-m);
          color: var(--color-mid-shade);
      }

      .legal-info-text strong {
          color: var(--color-primary);
          font-weight: var(--font-bold);
      }

      .legal-info-list {
          margin: var(--space-m) 0;
          padding-left: var(--space-l);
      }

      .legal-info-list li {
          margin-bottom: var(--space-s);
          color: var(--color-mid-shade);
      }

      .legal-info-highlight-box {
          background: rgba(169, 0, 192, 0.05);
          border-left: 4px solid var(--color-inclusive);
          padding: var(--space-m);
          border-radius: var(--radius);
          margin: var(--space-m) 0;
      }

      .legal-info-highlight-box p {
          margin: 0;
          color: var(--color-primary);
          font-weight: var(--font-medium);
      }

      .legal-info-contact-cta {
          background: var(--color-primary-bright);
          border-radius: var(--radius-l);
          padding: var(--space-l);
          text-align: center;
          margin: var(--space-2xl) 0;
      }

      .legal-info-contact-cta h3 {
          color: var(--color-primary);
          margin-bottom: var(--space-s);
      }

      .legal-info-contact-cta p {
          color: var(--color-mid-shade);
          margin-bottom: var(--space-m);
      }

      .legal-info-contact-btn {
          display: inline-block;
          background: var(--gradient-primary);
          color: white;
          padding: var(--space-s) var(--space-l);
          border-radius: var(--radius);
          text-decoration: none;
          font-weight: var(--font-semibold);
          transition: all var(--transition-smooth);
      }

      .legal-info-contact-btn:hover {
          transform: translateY(-2px);
          box-shadow: var(--shadow-lg);
      }

      .legal-info-last-updated {
          text-align: center;
          color: var(--color-mid);
          font-style: italic;
          margin-top: var(--space-2xl);
          padding-top: var(--space-l);
          border-top: 1px solid rgba(66, 0, 101, 0.1);
      }

      /* Responsive */
      @media (max-width: 768px) {
          .legal-info-nav-links {
              flex-direction: column;
          }

          .legal-info-nav-link {
              text-align: center;
          }

          .legal-info-content {
              padding: var(--space-l) 1rem;
          }

          .legal-info-section-title {
              font-size: var(--size-step-3);
          }
      }


/* FAQ Styles */
.new-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-l);
  margin-top: var(--space-l);
}

.new-faq-item {
  background: white;
  border-radius: var(--radius-l);
  padding: var(--space-l);
  border: 1px solid rgba(66, 0, 101, 0.1);
  display: flex;
  flex-direction: column;
}

.new-faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--color-primary);
  font-size: var(--size-step-1);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
}

.new-faq-question:hover {
  color: var(--color-primary-dark);
}

.new-faq-icon {
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.new-faq-icon::before,
.new-faq-icon::after {
  content: '';
    position: absolute;
    background-color: currentColor;
    transition: transform 0.3s ease;
}

.new-faq-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.new-faq-icon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.new-faq-answer {
  max-height: 0;
  opacity: 0;
  padding: 0 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.new-faq-answer p {
  margin: 0;
  padding: 1rem 0;
}

/* When expanded */
.new-faq-question[aria-expanded="true"] + .new-faq-answer {
  max-height: 1000px;
  opacity: 1;
}

.new-faq-question[aria-expanded="true"] .new-faq-icon {
  transform: rotate(45deg);
}
@media (max-width: 767px) {

  /* grid → single column, tighter rhythm */
  .new-faq-grid, .deals-container, .categories-grid {
    grid-template-columns: 1fr;
    gap: var(--space-m);          /* a bit smaller than desktop */
    margin-top: var(--space-m);
  }

  /* card padding & radius */
  .new-faq-item {
    padding: var(--space-m);
    border-radius: var(--radius-m);   /* slightly softer corners */
  }

  /* question row: smaller type / icon / gap */
  .new-faq-question {
    font-size: var(--size-step-0); /* down one step */
    gap: var(--space-xs);
  }

  .new-faq-icon {
    width: 18px;
    height: 18px;
  }

  /* answer spacing: drop the side padding we added on desktop */
  .new-faq-answer {
    padding-inline: 0;
  }

  .new-faq-answer p {
    padding-block: var(--space-s);
    line-height: 1.45;
  }
  .new-faq-grid {
    grid-template-columns: 1fr;
    gap: var(--space-m);
    margin-top: var(--space-m);
  }
  .new-faq-item {
    padding: var(--space-m);
    border-radius: var(--radius-m);
  }
}