/* Aram concept site — base styles */

:root {
  --bg: #FAFAF7;
  --bg-warm: #F4F1EA;
  --ink: #1A1A1A;
  --ink-soft: #2B2B2B;
  --muted: #6B6B66;
  --line: #E6E2DA;

  /* Solution gradient stops */
  --rest-1: #9FB7C9;
  --rest-2: #C7CCC9;
  --rest-3: #DDD9CE;

  --calm-1: #C9B8D6;
  --calm-2: #DCD0E2;
  --calm-3: #EFE6F0;

  --awaken-1: #1F4D3A;
  --awaken-2: #5BA15B;
  --awaken-3: #D9E37A;

  --recover-1: #7A2A1F;
  --recover-2: #D6603D;
  --recover-3: #E8B58A;

  --energy-1: #E8C56C;
  --energy-2: #F0D58E;
  --energy-3: #F5E2A8;

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

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.6;
}

.font-display {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 50, 'WONK' 0;
  letter-spacing: -0.025em;
  line-height: 1;
}

.font-display-italic {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}

/* Display-size optical adjustments */
.display-xl { font-size: clamp(3.25rem, 9vw, 7.5rem); font-weight: 300; }
.display-lg { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 300; }
.display-md { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 400; }
.display-sm { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 400; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
}

/* Solution gradient backgrounds (full intensity) */
.grad-rest    { background: linear-gradient(180deg, var(--rest-1) 0%, var(--rest-2) 55%, var(--rest-3) 100%); }
.grad-calm    { background: linear-gradient(180deg, var(--calm-1) 0%, var(--calm-2) 50%, var(--calm-3) 100%); }
.grad-awaken  { background: linear-gradient(180deg, var(--awaken-1) 0%, var(--awaken-2) 55%, var(--awaken-3) 100%); }
.grad-recover { background: linear-gradient(180deg, var(--recover-1) 0%, var(--recover-2) 55%, var(--recover-3) 100%); }
.grad-energy  { background: linear-gradient(180deg, var(--energy-1) 0%, var(--energy-2) 50%, var(--energy-3) 100%); }

/* Soft tint variants for sections */
.tint-rest    { background: linear-gradient(180deg, rgba(159,183,201,0.18) 0%, rgba(221,217,206,0.10) 100%); }
.tint-calm    { background: linear-gradient(180deg, rgba(201,184,214,0.20) 0%, rgba(239,230,240,0.10) 100%); }
.tint-awaken  { background: linear-gradient(180deg, rgba(91,161,91,0.14) 0%, rgba(217,227,122,0.08) 100%); }
.tint-recover { background: linear-gradient(180deg, rgba(214,96,61,0.14) 0%, rgba(232,181,138,0.08) 100%); }
.tint-energy  { background: linear-gradient(180deg, rgba(232,197,108,0.18) 0%, rgba(245,226,168,0.10) 100%); }
.tint-warm    { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.6rem; border-radius: 9999px;
  font-weight: 400; font-size: 0.95rem; letter-spacing: 0.01em;
  transition: transform 0.4s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-light { background: rgba(255,255,255,0.9); color: var(--ink); backdrop-filter: blur(4px); }
.btn-light:hover { background: #fff; }
.btn-on-dark { background: rgba(255,255,255,0.95); color: var(--ink); }
.btn-on-dark:hover { background: #fff; }

/* Section paddings */
.section { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.section-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Container */
.container-aram { max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .container-aram { padding-inline: 2rem; } }
@media (min-width: 1024px) { .container-aram { padding-inline: 3rem; } }

/* Soft card */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 1.25rem;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: 0 30px 60px -25px rgba(20,20,20,0.18); }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* Hero packaging float */
@keyframes drift-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes drift-y-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
.drift { animation: drift-y 7s ease-in-out infinite; }
.drift-slow { animation: drift-y-slow 11s ease-in-out infinite; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.site-header.is-stuck {
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}

/* Cart drawer / nav drawer */
.drawer {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
}
.drawer .backdrop {
  position: absolute; inset: 0; background: rgba(20,20,20,0.4); opacity: 0;
  transition: opacity 0.4s var(--ease); backdrop-filter: blur(4px);
}
.drawer .panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 100%);
  background: var(--bg); transform: translateX(100%);
  transition: transform 0.5s var(--ease); display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -20px rgba(20,20,20,0.25);
}
.drawer.left .panel { right: auto; left: 0; transform: translateX(-100%); width: min(380px, 100%); }
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .backdrop { opacity: 1; }
.drawer.is-open .panel { transform: translateX(0); }

/* Accordion */
.accordion-item { border-top: 1px solid var(--line); }
.accordion-item:last-child { border-bottom: 1px solid var(--line); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 0; text-align: left; font-size: 1.05rem; color: var(--ink); cursor: pointer;
  background: transparent; border: 0;
}
.accordion-trigger .icon { transition: transform 0.4s var(--ease); }
.accordion-trigger[aria-expanded="true"] .icon { transform: rotate(45deg); }
.accordion-panel {
  max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease);
  color: var(--muted); font-size: 0.95rem;
}
.accordion-panel-inner { padding: 0 0 1.5rem; max-width: 56ch; }

/* Tube SVG sizing */
.tube { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(20,20,20,0.18)); }

/* Marquee for trust strip */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; gap: 3rem; animation: marquee 40s linear infinite; width: max-content; }

/* Misc utilities */
.divider { height: 1px; background: var(--line); }
.preview-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 9999px;
  padding: 0.25rem 0.6rem;
}

/* Star rating */
.stars { color: #C58B2A; letter-spacing: 0.05em; }

/* Form inputs */
.input {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 0.85rem 0; font-family: inherit; font-size: 1rem; color: var(--ink);
  width: 100%; outline: none;
}
.input::placeholder { color: var(--muted); }
.input:focus { border-color: var(--ink); }

/* Sticky note for "concept" */
.concept-stamp {
  position: fixed; bottom: 1rem; left: 1rem; z-index: 40;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); background: rgba(255,255,255,0.85); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 9999px; padding: 0.4rem 0.8rem;
}

/* Subscribe pill (BuyBox) */
.subscribe-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem;
  background: var(--bg-warm); padding: 0.35rem; border-radius: 9999px;
  border: 1px solid var(--line);
}
.subscribe-toggle button {
  padding: 0.7rem 1rem; border-radius: 9999px; background: transparent; border: 0;
  font-size: 0.92rem; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.subscribe-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* Quantity stepper */
.qty {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 1px solid var(--line); border-radius: 9999px; padding: 0.25rem;
}
.qty button { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: transparent; border: 0; cursor: pointer; }
.qty button:hover { background: var(--bg-warm); }
.qty input {
  width: 2.25rem; text-align: center; background: transparent; border: 0; font-family: inherit; font-size: 1rem;
  -moz-appearance: textfield; outline: none;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Solution card */
.solution-card {
  position: relative; overflow: hidden; border-radius: 1.5rem;
  aspect-ratio: 4 / 5; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; transition: transform 0.6s var(--ease);
}
.solution-card:hover { transform: translateY(-4px); }
.solution-card .label { color: rgba(255,255,255,0.85); }
.solution-card.dark-text { color: var(--ink); }
.solution-card.dark-text .label { color: var(--muted); }

/* Mobile-first nav drawer item */
.nav-link-large {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 2rem; letter-spacing: -0.02em;
  display: block; padding: 0.4rem 0; color: var(--ink);
}

/* ----- Real Aram wordmark ----- */
/* The source PNG is 429×329 with the wordmark in the top ~50%.
   We crop to that region by sizing the wrapper and setting the image to
   100% width / auto height so only the top portion shows. */
.logo-mark {
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 0;
  vertical-align: middle;
}
.logo-mark > img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}
/* Header / on-light-bg variant — black wordmark, white disappears via multiply */
.logo-mark--ink > img { mix-blend-mode: multiply; }
/* On-dark-bg variant — invert to white, black bg disappears via screen */
.logo-mark--light > img { filter: invert(1); mix-blend-mode: screen; }

/* Header sizes */
.logo-header { width: 96px; height: 36px; }
@media (min-width: 768px) { .logo-header { width: 110px; height: 42px; } }
.logo-footer { width: 140px; height: 54px; }
.logo-mobile-drawer { width: 92px; height: 36px; }
.logo-cart-drawer { width: 78px; height: 30px; }
.logo-mark-tag {
  display: block; margin-top: 2px;
  font-family: 'Inter', sans-serif; font-weight: 400;
  letter-spacing: 0.32em; font-size: 0.62rem; color: var(--muted);
  text-transform: uppercase;
}
.logo-mark-tag.on-dark { color: rgba(255,255,255,0.78); }