/* ─── Base & Utilities ─── */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { overflow-x: hidden; }

  /* ─── Custom Properties ─── */
  :root {
    --plum-50: #faf0f5;
    --plum-100: #f5e0ef;
    --plum-200: #ebbfd9;
    --plum-400: #c4659f;
    --plum-500: #a84480;
    --plum-600: #8a3167;
    --plum-700: #6e2652;
    --plum-800: #5a2345;
    --plum-900: #4c213a;
    --amber-400: #ffbc3d;
    --amber-500: #f5a623;
    --amber-600: #e08a0e;
    --cream-50: #fffef9;
  }

  /* ─── Buttons ─── */
  .btn-primary {
    background: linear-gradient(135deg, var(--plum-500) 0%, var(--plum-600) 100%);
    box-shadow: 0 4px 15px rgba(168, 68, 128, 0.3);
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, var(--plum-400) 0%, var(--plum-500) 100%);
    box-shadow: 0 8px 25px rgba(168, 68, 128, 0.4);
  }
  .btn-secondary {
    background: white;
  }
  .btn-secondary:hover {
    background: var(--plum-50);
  }

  /* ─── Input Fields ─── */
  .input-field {
    transition: all 0.2s ease;
  }
  .input-field:focus {
    box-shadow: 0 0 0 3px rgba(168, 68, 128, 0.1);
  }

  /* ─── Navigation ─── */
  .nav-scrolled {
    background: rgba(255, 254, 249, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(92, 35, 69, 0.08);
  }
  .nav-link {
    position: relative;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--plum-400);
    border-radius: 1px;
    transition: width 0.3s ease;
  }
  .nav-link:hover::after {
    width: 100%;
  }

  /* ─── Hero Section ─── */
  .hero-section {
    background: linear-gradient(160deg, var(--cream-50) 0%, var(--plum-50) 50%, #fef9f0 100%);
  }
  .hero-text {
    animation: fadeSlideUp 0.8s ease forwards;
  }
  .hero-card-main {
    animation: floatCard 6s ease-in-out infinite;
  }
  .hero-float-card {
    animation: floatCard 5s ease-in-out infinite;
  }
  .card-float-1 { animation-delay: 0s; }
  .card-float-2 { animation-delay: -1.5s; }
  .card-float-3 { animation-delay: -3s; }

  @keyframes floatCard {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
  }
  @keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ─── Hero Blobs ─── */
  .hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: blobFloat 12s ease-in-out infinite;
  }
  .blob-1 {
    width: 500px;
    height: 500px;
    background: var(--plum-200);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
  }
  .blob-2 {
    width: 400px;
    height: 400px;
    background: var(--amber-200);
    bottom: -50px;
    left: -50px;
    animation-delay: -4s;
  }
  .blob-3 {
    width: 300px;
    height: 300px;
    background: var(--plum-100);
    top: 50%;
    left: 50%;
    animation-delay: -8s;
  }
  @keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
  }

  /* ─── Product Cards ─── */
  .product-card {
    transform: translateY(0);
    will-change: transform, box-shadow;
  }

  /* ─── Why Cards ─── */
  .why-card {
    transition: transform 0.3s ease;
  }
  .why-card:hover {
    transform: translateY(-4px);
  }

  /* ─── About Images ─── */
  .about-img-1 {
    animation: floatCard 7s ease-in-out infinite;
  }
  .about-img-2 {
    animation: floatCard 6s ease-in-out infinite;
    animation-delay: -2s;
  }

  /* ─── Scroll Animations ─── */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ─── Mobile Menu ─── */
  .mobile-menu {
    animation: slideDown 0.3s ease;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ─── Responsive ─── */
  @media (max-width: 768px) {
    .hero-section {
      padding-top: 100px;
    }
    .hero-float-card {
      display: none;
    }
    .hero-card-main {
      max-width: 100%;
    }
  }