:root{
    /* colors sampled directly from the source design */
    --leaf:#92cd41;
    --leaf-deep:#6FA82E;
    --navy:#2e4555;
    --sage:#8AB653;
    --white:#FFFFFF;
    --gray:#7C8A9A;;
    --gray-light:#AEB8C2;
    --shadow-lg:0 30px 60px -18px rgba(30,46,57,0.35);
    --shadow-md:0 16px 34px -12px rgba(30,46,57,0.28);
    --ease:cubic-bezier(.22,1,.36,1);
    --hover-scale: 1;
    --hover-y: 0px;
    --hover-rotate: 0deg;
  }

  html{
    scroll-behavior:smooth;
  }

  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  
  body{
    font-family:'Montserrat',sans-serif;
    color:var(--navy);
    -webkit-font-smoothing:antialiased;
  }

  h1, h2, h3, h4 {
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:1.08;
    text-transform:uppercase;
  }

  a {
    text-decoration:none;
    color:inherit;
  }
  
  img,svg {
    display:block;
    max-width:100%;
  }

  @media (prefers-reduced-motion: reduce){
    *{
      animation-duration:.01ms !important; 
      animation-iteration-count:1 !important; 
      transition-duration:.01ms !important; 
      scroll-behavior:auto !important;
    }
  }

  /* ---------- shared layout ---------- */
  .section{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:center;
    padding: 2em;
    overflow:hidden;
  }

  .wrap{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:clamp(2rem,5vw,5rem);
    width:100%;
    max-width:1320px;
    margin:0 auto;
  }

  .brand{
    align-items:baseline;
    margin-bottom:clamp(2.2rem,6vw,4rem);
  }

  .brand-name{
    width: 40%;
  }

  .brand-leaf{width:20px;height:20px;flex-shrink:0;}

  .tagline{
    font-size:1.38rem;
    font-weight:500;
    letter-spacing:.01em;
  }

  .headline{
    font-size:clamp(2.1rem,4.3vw,2.7rem);
    margin-bottom:1.5rem;
  }

  .headline .accent{ color:var(--leaf); }
  .headline em{ font-style:italic; }

  .subcopy{
    font-family:'Montserrat',sans-serif;
    font-size:clamp(1rem,1.2vw,1.1rem);
    font-weight:500;
    margin-bottom:2.2rem;
    font-size: 20px;
  }

  .cta{
    display:inline-flex;
    align-items:center;
    gap:.65rem;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:1.2rem;
    letter-spacing:.03em;
    text-transform:uppercase;
    padding:1.05rem 2.3rem;
    border-radius:14px;
    border:none;
    cursor:pointer;
    background:linear-gradient(135deg,var(--leaf) 0%,var(--leaf-deep) 100%);
    color:#fff;
    box-shadow:0 14px 28px -10px rgba(111,168,46,0.55), 0 2px 4px rgba(0,0,0,0.08);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), filter .4s var(--ease);
    position:relative;
    overflow:hidden;
  }

  .cta::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.4) 45%,transparent 60%);
    transform:translateX(-120%);
    transition:transform .7s var(--ease);
  }

  .cta:hover{
    transform:translateY(-3px) scale(1.015);
    box-shadow:0 20px 38px -10px rgba(111,168,46,0.6), 0 4px 10px rgba(0,0,0,0.1);
    filter:brightness(1.03);
  }
  .cta:hover::after{transform:translateX(120%);}
  .cta:active{transform:translateY(-1px) scale(.99);}
  .cta svg{width:15px;height:15px;flex-shrink:0;}

  /* ---------- glass copy panel ---------- */
  .copy-panel{
    padding:clamp(.8rem,2vw,3rem);
    width: 800px;
    border-radius:28px;
  }

  /* ---------- HERO (photo bg, dark overlay) ---------- */
  .hero{
    background:
      linear-gradient(180deg, rgba(10,24,14,0.32) 0%, rgba(8,20,12,0.62) 100%),
      url('../assets/img/saladjar-bg.jpg') center/cover no-repeat;
  }

  .hero .copy-panel{
    background:rgba(10,26,15,0.28);
    border:1px solid rgba(255,255,255,0.16);
    backdrop-filter:blur(14px);
    box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.12);
  }

  .hero .brand-name{color:var(--white);}
  .hero .brand-leaf path{fill:var(--leaf);}
  .hero .tagline{color:var(--white);}
  .hero .headline{color:var(--white);}
  .hero .headline .accent{color:var(--leaf);}
  .hero .subcopy{color:rgba(255,255,255,0.92);}

  /* ---------- LIGHT SECTION (photo bg, frosted white overlay) ---------- */
  .light{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.95) 100%),
      url('../assets/img/saladjar-bg.jpg') center/cover no-repeat;
  }
  .light.light-bg{
    background:
      linear-gradient(180deg, rgba(10,24,14,0.32) 0%, rgba(8,20,12,0.62) 100%),
      url('../assets/img/saladjar-bg.jpg') center/cover no-repeat;
  }

  .light .copy-panel{
    background:rgba(255,255,255,0.55);
    border:1px solid rgba(47,68,83,0.08);
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.6);
  }

  .light.light-bg .copy-panel{
    background:rgba(255,255,255,0.9);
  }

  .light .brand-name{color:var(--navy);}
  .light .brand-leaf path{fill:var(--leaf);}
  .light .tagline{color:var(--navy);}
  .light .headline{color:var(--navy);}
  .light .subcopy{color:var(--sage);}

  /* ---------- jar photo card ---------- */
  .jar-stage{
    position:relative;
    padding:.7rem;
    border-radius:28px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.28);
    backdrop-filter:blur(16px);
    box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.25);
  }

  .light .jar-stage{
    background:var(--white);
    border:1px solid rgba(47,68,83,0.08);
    box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.7);
  }

  .light.light-bg .jar-stage{
    background:rgba(255,255,255,0.14);
  }

  .jar-stage .jar-wrapper{
    transition: transform 0.6s var(--ease);
    transform-origin: center bottom;
  }

  .jar-photo{
    width: 100%;
    display: block;
    border-radius: 20px;
    object-fit: cover;
    aspect-ratio: 2/3;
    animation: floaty 6.5s ease-in-out infinite;
  }

  @keyframes floaty{
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    50% {
      transform: translateY(-5px) rotate(0deg);
    }
  }

  .jar-stage:hover .jar-wrapper{
    /* Pausing or overriding the infinite animation cleanly */
    transform: translateY(-3px) rotate(0deg) scale(1.065);
  }

  @keyframes popFloat{
    0%{
      transform: translateY(0px) rotate(0deg) scale(1.035);
    }
    100%{
      transform: translateY(-3px) rotate(0.9deg) scale(1.065);
    }
  }

  /* soft glow halo behind the card */
  .glow-pulse{
    position:absolute;
    inset:-20px;
    border-radius:36px;
    background:radial-gradient(circle, rgba(140,198,63,0.55) 0%, rgba(140,198,63,0) 70%);
    opacity:0;
    pointer-events:none;
    transition:opacity .5s ease;
    z-index:0;
  }
  .jar-stage:hover .glow-pulse{
    opacity:1;
    animation:glowPulse 2.3s ease-in-out infinite;
  }

  @keyframes glowPulse{
    0%,100%{opacity:.5; transform:scale(.95);}
    50%{opacity:1; transform:scale(1.08);}
  }

  .badge{
    position:absolute;
    bottom:-14px;
    left:50%;
    transform:translateX(-50%);
    background:var(--leaf);
    color:#fff;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:.55rem 1.3rem;
    border-radius:100px;
    box-shadow:0 10px 22px -6px rgba(111,168,46,0.55);
    white-space:nowrap;
  }

  /* ---------- MENU ---------- */
  
  .section.menu{
    display: block;
    padding: 2rem 4vw;
  }

  .logo-menu{
    width: 30%;
  }

  /* ---------- Tabs ---------- */
  .tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px 23px;
    margin-bottom:34px;
  }

  .tab {
    appearance:none;
    border:none;
    background:transparent;
    font-family:'Montserrat', sans-serif;
    font-weight:700;
    font-size:clamp(15px,1.9vw,18px);
    color:var(--navy);
    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 15px;
    border-radius:999px;
    cursor:pointer;
    transition: background .25s var(--ease), color .25s var(--ease), transform 1s var(--ease);
    white-space:nowrap;
  }

  .tab:hover { 
    transform: translateY(-5px);
    border:1px solid var(--navy);
  }

  .tab.active {
    background: linear-gradient(135deg, var(--leaf), var(--leaf-deep));
    color:#fff;
    box-shadow: 0 8px 18px -6px rgba(111,168,39,0.55);
  }

  .tab.active .heart-icon::after, .tab.active .heart-icon::before { 
    background: var(--navy); 
    opacity:1; 
  }

  .heart-icon {
    position: relative;
    width: 40px;
    height: 36px;
    transform: rotate(45deg);
  }

  .heart-icon::before,
  .heart-icon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 20px;
    height: 34px;
    background: var(--leaf);
    border-radius: 50px 50px 10px 10px;
  }

  .heart-icon::before {
    left: 19px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }

  .heart-icon::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }

  .no-item-menu{
    text-align: center;
  }

  /* ---------- Slider ---------- */
  .slider-wrap{
    position:relative;
  }

  .slider-track{
    display:flex;
    gap:22px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 6px 6px 20px;
    -webkit-overflow-scrolling: touch;
    cursor:grab;
  }
  .slider-track.dragging{ cursor:grabbing; scroll-snap-type:none; }
  .slider-track::-webkit-scrollbar{ height:8px; }
  .slider-track::-webkit-scrollbar-track{ background:transparent; }
  .slider-track::-webkit-scrollbar-thumb{ background: #DCE6D5; border-radius:8px; }

  /* ------------ CARD ----------------- */
  .card{
    flex: 0 0 260px;
    scroll-snap-align:start;
    background: var(--white);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    padding: 18px 18px 16px;
    display:flex;
    flex-direction:column;
    user-select:none;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .card:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px -12px rgba(30,53,87,0.24); }

  .card-img{
    width:100%;
    height:150px;
    border-radius:16px;
    margin-bottom:14px;
    display:flex; align-items:center; justify-content:center;
    background: var(--img-bg, linear-gradient(160deg,#EAF6DC,#D8EFC4));
    overflow:hidden;
  }

  .card h3{
    font-family:'Montserrat', sans-serif;
    font-size:15px;
    font-weight:700;
    margin: 0 0 6px;
    color: var(--navy);
  }
  .card p.desc{
    margin:0 0 16px;
    font-size:13px;
    line-height:1.5;
    color: var(--gray);
    font-weight:600;
    min-height:100px;
  }

  .prices{
    display:flex;
    align-items:stretch;
    gap:14px;
    margin-bottom:14px;
  }
  .price-col{ flex:1; }
  .price-col .size{
    font-weight:600;
    font-size:14px;
    color:var(--navy);
    margin:0 0 2px;
  }
  .price-col .amount{
    font-weight:800;
    font-size:14px;
    color: var(--leaf);
    margin:0;
  }
  .divider-price{
    width:2px;
    border-radius:2px;
    background: var(--navy);
    align-self:stretch;
  }

  .nutrition{
    display:flex;
    justify-content:space-between;
    border-top:1px dashed #E3E8ED;
    padding-top:12px;
    gap:4px;
  }
  .nutri-item{
    text-align:center;
    line-height:1.2;
  }
  .nutri-item .val{
    display:block;
    font-weight:800;
    font-size:12px;
    color: var(--navy);
  }
  .nutri-item .lbl{
    display:block;
    font-size:9px;
    font-weight:700;
    letter-spacing:.02em;
    color: var(--gray-light);
    text-transform:uppercase;
  }

  /* ---------- Arrows ---------- */
  .arrow{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width:46px;
    height:46px;
    border-radius:50%;
    border:none;
    background: var(--leaf);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow: 0 8px 18px -6px rgba(111,168,39,0.6);
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
    z-index:5;
  }
  .arrow:hover{ background: var(--leaf-deep); transform: translateY(-50%) scale(1.06); }
  .arrow:disabled{ opacity:0; pointer-events:none; }
  .arrow.left{ left:-6px; }
  .arrow.right{ right:-6px; }
  .arrow svg{ width:20px; height:20px; }

  .center-arrow-row{
    display:flex;
    justify-content:center;
    margin-top:8px;
  }
  .center-arrow{
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background: var(--leaf);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow: 0 8px 18px -6px rgba(111,168,39,0.6);
    transition: background .2s ease, transform .2s ease;
  }
  .center-arrow:hover{ 
    background:var(--leaf-deep); 
    transform: scale(1.06); 
  }
  .center-arrow svg{ 
    width:18px;
    height:18px; 
  }

  .footer{
    padding: 20px 0;
    text-align: center;

  }

  /* divider */
  .divider{
    position:relative;
    height:1px;
    max-width:1320px;
    margin:0 auto;
    background:linear-gradient(90deg,transparent, rgba(47,68,83,0.15), transparent);
  }

  /* reveal on scroll */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
  }
  .reveal.in-view{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .wrap{grid-template-columns:1fr;}
    .section{padding:16vw 6vw 14vw;min-height:auto;}
    .jar-stage {
      order:1;
      margin-bottom:3rem;
      max-width:340px;
      margin: auto;
    }
    .copy-panel{padding:1.6rem; width:100%}
    .brand-name{width: 60%}
    .tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
      gap: 10px 5px;
      cursor:grab;
      scrollbar-width: none; /* Firefox */
    }
    .tab{
      flex: 0 0 auto;
      white-space: nowrap;
    }
  }

  @media (min-width: 910px) and (max-width: 1100px) {
      .copy-panel{
        width: 100%;
      } 
  }

  @media (min-width:1800px){
    .wrap{
      max-width:1560px;
    }
  }
   @media (max-width: 720px){
    .arrow{ display:none; }
    .card{ flex-basis: 72vw; }
  }

  @media (min-width: 721px){
    .center-arrow-row{ display:none; }
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--leaf-deep); 
    outline-offset:3px;
  }