/* =========================================================================
   Rooya Mist — Liquid Glass Design System
   Apple-inspired glassmorphism with soft pastels
   ========================================================================= */

:root {
  /* Base */
  --bg: #f7f6fb;
  --bg-alt: #ffffff;
  --ink: #1b1b2a;
  --ink-soft: #5a5a72;
  --ink-mute: #8e8ea3;
  --line: rgba(27, 27, 42, 0.08);

  /* Pastels */
  --lavender: #c9b8ee;
  --lavender-soft: #ece4fb;
  --aqua: #a9dbe6;
  --aqua-soft: #dff2f6;
  --blush: #f6c9d2;
  --blush-soft: #fce5ea;
  --mint: #b7e4c7;
  --mint-soft: #e2f5ea;
  --cream: #fff3e3;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 10px 40px rgba(27, 27, 42, 0.08);
  --glass-shadow-lg: 0 20px 60px rgba(27, 27, 42, 0.12);

  /* Radius */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset -------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient gradient orbs (give the whole page a dreamy pastel glow) */
body::before,
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
}
body::before {
  width: 520px; height: 520px;
  top: -180px; left: -180px;
  background: radial-gradient(circle, var(--lavender) 0%, transparent 70%);
}
body::after {
  width: 620px; height: 620px;
  bottom: -220px; right: -220px;
  background: radial-gradient(circle, var(--aqua) 0%, transparent 70%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4 { font-family: inherit; letter-spacing: -0.02em; margin: 0 0 0.4em; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; }
h3 { font-size: 1.3rem; }
p  { color: var(--ink-soft); margin: 0 0 1em; }

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

/* =========================================================================
   Glass Navbar
   ========================================================================= */
/* Blurred backdrop strip that softens the small area of page visible above the
   navbar pill. Sits behind the nav (lower z-index) and fades to transparent at
   the bottom so there's no hard edge against the content below. */
.navbar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 50; /* below navbar (100), above page content */
  pointer-events: none;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  background: linear-gradient(
    to bottom,
    rgba(247, 246, 251, 0.75) 0%,
    rgba(247, 246, 251, 0.55) 55%,
    rgba(247, 246, 251, 0) 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  transition: height 0.4s var(--ease);
}
.navbar-backdrop.scrolled { height: 110px; }

.navbar {
  position: fixed;
  /* Pushed down enough that the oversized brand tile (which overflows ~36px
     above the pill) still fits fully inside the viewport at page load. */
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1180px;
  z-index: 100;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-pill);
  padding: 0.55rem 1.4rem 0.55rem 0.55rem; /* slim pill; the oversized tile does the visual lifting */
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s var(--ease);
  overflow: visible; /* allow .brand-tile to poke above / below */
}

.navbar.scrolled { box-shadow: var(--glass-shadow-lg); top: 28px; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* Reserve enough width in the flex row for the oversized tile */
  padding-left: 0;
}

/* Full brand logo (butterfly + Rooya wordmark) — used on footers, splash areas */
.brand-mark {
  height: 36px;
  width: auto;
  display: block;
}

/* Circular brand tile in the navbar.
   The tile is deliberately much larger than the navbar pill itself — it
   overflows above and below via negative margins. This keeps the navbar
   height unchanged while giving the brand real presence. */
.brand-tile {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 14px 34px rgba(124, 107, 217, 0.32),
    0 4px 10px rgba(27, 27, 42, 0.08);
  /* Navbar pill is ~56px tall. Tile is 128px, so -36px margins let it
     poke ~36px above and below the pill symmetrically, without clipping. */
  margin: -36px 0;
  border: 4px solid #fff;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.brand:hover .brand-tile {
  transform: scale(1.05) rotate(-3deg);
  box-shadow:
    0 12px 26px rgba(124, 107, 217, 0.35),
    0 2px 6px rgba(27, 27, 42, 0.1);
}

/* Compact circular icon (used for favicon-style accents) */
.brand-logo {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff url('/images/rooya-logo.png') center/70% no-repeat;
  box-shadow: 0 4px 10px rgba(27, 27, 42, 0.1);
  border: 1px solid var(--glass-border);
  position: relative;
}

.nav-links {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 0; padding: 0;
  align-items: center;
}
.nav-links a {
  padding: 0.65rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: 1.05rem;
  color: var(--ink-soft);
  font-weight: 500;
  transition: all 0.3s var(--ease);
  letter-spacing: -0.005em;
}
.nav-links a:hover,
.nav-links a.active {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}
.nav-links a.active { font-weight: 600; }

.nav-cta {
  background: var(--ink);
  color: #fff !important;
  padding: 0.75rem 1.35rem !important;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(27, 27, 42, 0.2); background: var(--ink) !important; color: #fff !important; }

.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); align-items: center; justify-content: center; }
.nav-toggle span { width: 18px; height: 2px; background: var(--ink); display: block; position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; width: 18px; height: 2px; background: var(--ink); left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 0.96rem;
  transition: all 0.35s var(--ease);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(27, 27, 42, 0.22); }

.btn-glass {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  box-shadow: var(--glass-shadow);
}
.btn-glass:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-lg); }

.btn-amazon {
  background: linear-gradient(135deg, #ff9900, #ffb347);
  color: #1b1b2a;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(255, 153, 0, 0.35);
}
.btn-amazon:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 153, 0, 0.5); }

.btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #1ebe57);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
}
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37, 211, 102, 0.5); }

.btn-ghost { color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: #fff; }

.btn-sm { padding: 0.55rem 1rem; font-size: 0.86rem; }

/* =========================================================================
   Hero Section
   ========================================================================= */
.hero {
  padding: 200px 0 90px; /* bumped to clear the pushed-down navbar + oversized brand tile */
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(183, 228, 199, 0.35); }
.hero h1 { margin-bottom: 1rem; }
.hero h1 .gradient {
  background: linear-gradient(120deg, #7c6bd9, #55b0c4 60%, #e07a9a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p.lead { font-size: 1.1rem; max-width: 520px; margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.hero-visual {
  position: relative;
  min-height: 460px;
}
.hero-card {
  position: absolute;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  border-radius: var(--r-lg);
  padding: 1.2rem;
  transition: transform 0.8s var(--ease);
}
.hero-card.main {
  width: 78%; height: 400px;
  top: 20px; right: 0;
  background: linear-gradient(160deg, var(--lavender-soft), var(--blush-soft));
  display: flex; align-items: center; justify-content: center;
}
.hero-card.main::before {
  content: '';
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, rgba(255,255,255,0.4) 40%, transparent 70%);
  filter: blur(4px);
}

/* Photo variant — used when we drop a real product photo into the main hero
   card. Uses `object-fit: contain` so the entire photo always fits inside
   the card frame with no jars getting cropped at any screen size. The card's
   warm cream background blends with the photo's marble backdrop so the small
   amount of empty space on the sides reads as part of the composition. */
.hero-card.main.hero-card--photo {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #f7f2e9, #fbeae3);
}
.hero-card.main.hero-card--photo::before { display: none; }
.hero-card.main.hero-card--photo img {
  width: 100%;
  height: 100%;
  /* `contain` keeps the entire photo visible at every screen size — no
     jar ever gets cropped. `100% center` right-anchors it so the rose
     jar sits as close to the card's right edge as possible; any small
     slack appears on the left, where the cream gradient blends with the
     photo's marble backdrop. */
  object-fit: contain;
  object-position: 100% center;
  display: block;
}
.hero-card.small-1 {
  width: 170px; height: 170px;
  top: 0; left: 0;
  background: linear-gradient(160deg, var(--aqua-soft), #fff);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 1rem;
}
.hero-card.small-2 {
  width: 210px; height: 120px;
  bottom: 20px; left: 20px;
  background: var(--glass-bg-strong);
  padding: 1rem 1.2rem;
}
.hero-card h4 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.hero-card .meta { font-size: 0.82rem; color: var(--ink-mute); margin: 0; }
.hero-card .big-num {
  font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em;
  background: linear-gradient(135deg, #7c6bd9, #55b0c4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* =========================================================================
   Sections
   ========================================================================= */
section { padding: 80px 0; position: relative; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.section-head .eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
  display: inline-block; margin-bottom: 0.8rem;
}
.section-head p { font-size: 1.05rem; }

/* =========================================================================
   Product Grid
   ========================================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all 0.5s var(--ease);
  position: relative;
  box-shadow: var(--glass-shadow);
  display: flex; flex-direction: column;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--glass-shadow-lg);
  border-color: rgba(255, 255, 255, 0.7);
}
.product-card .thumb {
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--lavender-soft), var(--aqua-soft));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.product-card .thumb img { width: 75%; height: 75%; object-fit: contain; transition: transform 0.6s var(--ease); }
.product-card:hover .thumb img { transform: scale(1.08) rotate(-2deg); }
.product-card[data-tone="rose"] .thumb { background: linear-gradient(160deg, var(--blush-soft), #fff); }
.product-card[data-tone="lavender"] .thumb { background: linear-gradient(160deg, var(--lavender-soft), #fff); }
.product-card[data-tone="sandalwood"] .thumb { background: linear-gradient(160deg, var(--cream), var(--blush-soft)); }
.product-card[data-tone="lemongrass"] .thumb { background: linear-gradient(160deg, var(--mint-soft), var(--cream)); }
.product-card[data-tone="peppermint"] .thumb { background: linear-gradient(160deg, var(--mint-soft), var(--aqua-soft)); }

.product-card .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { font-size: 1.12rem; margin-bottom: 0.3rem; }
.product-card .price { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 0.3rem 0 0.7rem; }
.product-card .desc { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 1rem; flex: 1; }
.product-card .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.product-card .actions .btn { flex: 1; justify-content: center; padding: 0.7rem 0.9rem; font-size: 0.88rem; }

/* =========================================================================
   Why Rooya Mist
   ========================================================================= */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.3rem;
}
.why-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 1.8rem 1.6rem;
  transition: transform 0.4s var(--ease);
}
.why-card:hover { transform: translateY(-4px); }
.why-card .ico {
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--lavender-soft), var(--aqua-soft));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.why-card h3 { margin-bottom: 0.4rem; font-size: 1.08rem; }
.why-card p { margin: 0; font-size: 0.93rem; }

/* =========================================================================
   Testimonials
   ========================================================================= */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.3rem;
}
.testimonial {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  box-shadow: var(--glass-shadow);
}
.testimonial .stars { color: #f5b931; margin-bottom: 0.6rem; letter-spacing: 2px; }
.testimonial p { font-style: italic; color: var(--ink); margin-bottom: 1.2rem; }
.testimonial .who { display: flex; align-items: center; gap: 0.7rem; }
.testimonial .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blush), var(--lavender));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 0.95rem;
}
.testimonial .who span { font-size: 0.88rem; color: var(--ink-mute); }
.testimonial .who strong { display: block; color: var(--ink); font-size: 0.95rem; }

/* =========================================================================
   Newsletter / CTA banner
   ========================================================================= */
.cta-banner {
  background: linear-gradient(135deg, var(--lavender-soft), var(--aqua-soft));
  border-radius: var(--r-xl);
  padding: 3.5rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: -40% 40% -40% 40%;
  background: radial-gradient(circle, rgba(255,255,255,0.6), transparent 60%);
  filter: blur(40px);
}
.cta-banner h2 { position: relative; }
.cta-banner p { position: relative; max-width: 500px; margin: 0 auto 1.5rem; }

/* =========================================================================
   Footer
   ========================================================================= */
footer {
  padding: 60px 0 30px;
  margin-top: 60px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.footer-grid.no-follow { grid-template-columns: 1.6fr 1fr 1fr; }
.footer-grid h4 { font-size: 0.95rem; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-grid a { color: var(--ink-soft); font-size: 0.9rem; transition: color 0.25s; }
.footer-grid a:hover { color: var(--ink); }
.footer-grid p { font-size: 0.9rem; }
.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.85rem; color: var(--ink-mute);
}

/* =========================================================================
   Product Detail Page
   ========================================================================= */
.product-detail {
  padding-top: 180px; /* clear the pushed-down navbar + oversized brand tile */
}
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.detail-media {
  background: linear-gradient(160deg, var(--lavender-soft), var(--aqua-soft));
  border-radius: var(--r-xl);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 3rem;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  position: relative;
  overflow: hidden;
}
.detail-media img { width: 80%; filter: drop-shadow(0 20px 40px rgba(27,27,42,0.12)); }
.detail-media[data-tone="rose"] { background: linear-gradient(160deg, var(--blush-soft), #fff); }
.detail-media[data-tone="lavender"] { background: linear-gradient(160deg, var(--lavender-soft), #fff); }
.detail-media[data-tone="sandalwood"] { background: linear-gradient(160deg, var(--cream), var(--blush-soft)); }
.detail-media[data-tone="lemongrass"] { background: linear-gradient(160deg, var(--mint-soft), var(--cream)); }
.detail-media[data-tone="peppermint"] { background: linear-gradient(160deg, var(--mint-soft), var(--aqua-soft)); }

.detail-info .category {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.detail-info h1 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: 0.5rem; }
.detail-info .price-tag {
  font-size: 1.8rem; font-weight: 600; margin: 0.8rem 0 1.5rem;
  background: linear-gradient(135deg, #7c6bd9, #55b0c4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.benefits-list {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 1rem 0 2rem; padding: 0; list-style: none;
}
.benefits-list li {
  padding: 0.45rem 0.95rem;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
}
.detail-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.detail-actions .btn { padding: 1rem 1.8rem; font-size: 1rem; }

.meta-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.meta-chip {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  color: var(--ink-soft);
  backdrop-filter: blur(10px);
}
.mrp-note {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-mute);
  -webkit-text-fill-color: var(--ink-mute);
  margin-left: 0.4rem;
  letter-spacing: 0;
}
.detail-head {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.info-block {
  margin-top: 1.3rem;
  padding: 1.2rem 1.4rem;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
}
.info-block h4 { margin-bottom: 0.7rem; font-size: 1rem; }
.info-block .use-row { margin-bottom: 0.7rem; font-size: 0.94rem; line-height: 1.55; color: var(--ink-soft); }
.info-block .use-row:last-child { margin-bottom: 0; }
.info-block .use-row strong { color: var(--ink); font-weight: 600; }
.info-block--muted { background: rgba(255, 255, 255, 0.4); }

/* =========================================================================
   Page Headers (for listing/about/contact)
   ========================================================================= */
.page-head {
  padding: 190px 0 40px; /* clear the pushed-down navbar + oversized brand tile */
  text-align: center;
}
.page-head h1 { margin-bottom: 0.6rem; }
.page-head p { font-size: 1.05rem; max-width: 600px; margin: 0 auto; }

/* =========================================================================
   Form / Contact
   ========================================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem;
  align-items: start;
}
.contact-info {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: var(--glass-shadow);
}
.contact-info .info-item { display: flex; gap: 0.8rem; margin-bottom: 1.3rem; }
.contact-info .ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lavender-soft), var(--aqua-soft));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.contact-info span { font-size: 0.9rem; color: var(--ink-soft); }

.form {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: var(--glass-shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block; font-size: 0.84rem;
  margin-bottom: 0.4rem; color: var(--ink-soft); font-weight: 500;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  transition: all 0.3s var(--ease);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: 0;
  background: #fff;
  border-color: var(--lavender);
  box-shadow: 0 0 0 4px rgba(201, 184, 238, 0.25);
}
.form-textarea { resize: vertical; min-height: 120px; }

/* =========================================================================
   About Page
   ========================================================================= */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding-top: 180px; /* clear the pushed-down navbar + oversized brand tile */
}
.about-hero .img-card {
  aspect-ratio: 4/5;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--blush-soft), var(--lavender-soft));
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow-lg);
}
.about-hero .img-card::after {
  content: '';
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0.2) 40%, transparent 70%);
  filter: blur(6px);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.3rem;
  margin-top: 2rem;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
  .brand-tile { width: 88px; height: 88px; margin: -22px 0; border-width: 3px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    padding: 1rem;
    box-shadow: var(--glass-shadow-lg);
  }
  .hero-inner,
  .product-detail-grid,
  .about-hero,
  .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 360px; }
  .hero { padding-top: 130px; padding-bottom: 50px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .form-row { grid-template-columns: 1fr; }
  section { padding: 60px 0; }
}
@media (max-width: 520px) {
  .brand-tile { width: 68px; height: 68px; margin: -12px 0; border-width: 2px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-card.small-1 { width: 130px; height: 130px; }
  .hero-card.small-2 { width: 170px; height: 100px; }
  .hero-card.main { width: 88%; height: 320px; }
}

/* =========================================================================
   Scroll-triggered animations
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.9), rgba(255,255,255,0.5));
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-md);
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float { animation: float 4s ease-in-out infinite; }

/* =========================================================================
   Floating WhatsApp button
   ========================================================================= */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 14px 18px 14px 14px;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45), 0 4px 10px rgba(0,0,0,0.08);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  animation: waPulse 2.5s ease-in-out infinite;
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 40px rgba(37, 211, 102, 0.6), 0 4px 10px rgba(0,0,0,0.1);
}
.wa-float svg { flex-shrink: 0; }
.wa-float .wa-tip { white-space: nowrap; }

@keyframes waPulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45), 0 4px 10px rgba(0,0,0,0.08); }
  50% { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.65), 0 0 0 10px rgba(37, 211, 102, 0.1); }
}

@media (max-width: 600px) {
  .wa-float { right: 16px; bottom: 16px; padding: 12px; }
  .wa-float .wa-tip { display: none; }
}