/* SeaWeedHempCo — custom CSS only (Tailwind utilities via CDN in layout) */

:root {
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background-color: #fafaf9;
      color: #1c1917;
      overflow-x: clip;
    }

    /* NAV */
    #navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      transition: background 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
    }
    #navbar.scrolled {
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 24px rgba(0,0,0,0.08);
    }

    /* HERO */
    #hero {
      min-height: 100svh;
      background-image: url('https://build-freedom.ai/uploads/1789501387537-941508416.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    /* SCROLL INDICATOR */
    .scroll-indicator {
      animation: bounce 2s infinite var(--ease-bounce);
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(8px); }
    }

    /* MARQUEE */
    .marquee-track {
      display: flex;
      gap: 3rem;
      animation: marquee 22s linear infinite;
      width: max-content;
    }
    .marquee-track:hover { animation-play-state: paused; }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* FADE-IN ON SCROLL */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.55s var(--ease-snappy), transform 0.55s var(--ease-snappy);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* CARD HOVER */
    .shop-card {
      transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
    }
    .shop-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 48px rgba(0,0,0,0.12);
    }

    /* BUTTON FOCUS */
    button:focus-visible, a:focus-visible {
      outline: 2px solid #0e7490;
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* MOBILE MENU */
    #mobile-menu {
      display: none;
      position: fixed; inset: 0; z-index: 200;
      background: rgba(28,25,23,0.97);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2.5rem;
    }
    #mobile-menu.open { display: flex; }
    #mobile-menu a {
      color: #fafaf9;
      font-size: 1.75rem;
      font-weight: 500;
      letter-spacing: -0.02em;
      text-decoration: none;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.35s var(--ease-snappy), transform 0.35s var(--ease-snappy);
    }
    #mobile-menu.open a {
      opacity: 1;
      transform: translateY(0);
    }
    #mobile-menu.open a:nth-child(1) { transition-delay: 60ms; }
    #mobile-menu.open a:nth-child(2) { transition-delay: 120ms; }
    #mobile-menu.open a:nth-child(3) { transition-delay: 180ms; }
    #mobile-menu.open a:nth-child(4) { transition-delay: 240ms; }
    #mobile-menu.open a:nth-child(5) { transition-delay: 300ms; }
    #mobile-menu a:hover { color: #06b6d4; }

    /* STAT COUNTER */
    .stat-num { font-family: 'Playfair Display', serif; }

    /* TESTIMONIAL CARD */
    .testi-card {
      background: #fff;
      border: 1px solid #e7e5e4;
      border-radius: 20px;
      padding: 2rem;
    }

    /* FORM INPUT */
    .form-input {
      width: 100%;
      height: 48px;
      padding: 0 1rem;
      border: 1.5px solid #d6d3d1;
      border-radius: 10px;
      font-family: 'Inter', sans-serif;
      font-size: 0.9375rem;
      color: #1c1917;
      background: #fff;
      transition: border-color 0.2s;
      outline: none;
    }
    .form-input:focus {
      border-color: #0e7490;
      box-shadow: 0 0 0 3px rgba(14,116,144,0.12);
    }
    textarea.form-input {
      height: auto;
      padding: 0.875rem 1rem;
      resize: vertical;
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
      .reveal { opacity: 1 !important; transform: none !important; }
    }

    /* Fail-safe: if JS is slow/blocked, don't leave content invisible forever */
    @media (scripting: none) {
      .reveal { opacity: 1; transform: none; }
    }


/* Inner pages solid navbar */
body.page-inner #navbar {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 24px rgba(0,0,0,0.08);
}

/* About */
.value-card { transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth); }

.value-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,0.10); }

/* Contact */
.form-input.error{border-color:#ef4444;}

.faq-item{border-bottom:1px solid #e7e5e4;}

.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s var(--ease-smooth),padding .3s;}

.faq-answer{max-height:200px;padding-bottom:1rem;}

.faq-item.open .faq-answer{max-height:200px;padding-bottom:1rem;}

.faq-item.open .faq-icon{transform:rotate(45deg);}

.faq-icon{transform:rotate(45deg);}

.faq-icon{transition:transform .25s var(--ease-smooth);}

/* Product detail */
.size-btn {
      transition: background .2s, color .2s, border-color .2s;
    }

.size-btn.selected {
      background: #0e7490;
      color: #fff;
      border-color: #0e7490;
    }

.color-btn {
      transition: box-shadow .2s;
    }

.color-btn.selected {
      box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0e7490;
    }

.thumbnail-btn {
      transition: border-color .2s;
    }

.thumbnail-btn.active {
      border-color: #0e7490;
    }

.add-to-cart-btn {
      transition: background .2s, transform .15s var(--ease-bounce);
    }

.add-to-cart-btn:hover {
      background: #06b6d4;
      transform: scale(1.02);
    }

.add-to-cart-btn:active {
      transform: scale(0.97);
    }

.product-card {
      transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
    }

.product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.10);
    }

/* Shop grids */
.product-card { transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth); }

.product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(0,0,0,0.12); }

.product-card:hover .card-btn { opacity: 1; transform: translateY(0); }

.card-btn { opacity: 1; transform: translateY(0); }

.card-btn { opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s var(--ease-bounce); }

.filter-btn { transition: background 0.2s, color 0.2s, border-color 0.2s; }

.filter-btn.active { background: #0e7490; color: #fff; border-color: #0e7490; }