/* =========================================================
   OLLYCH.BY — modern editorial redesign
   Palette: warm cream, deep moss, terracotta, sage
   Type:    Source Serif 4 (display) + DM Sans (UI)
   ========================================================= */

:root{
  /* mint/turquoise + green palette */
  --cream:        #EAF3EC;
  --cream-2:      #DBE8DD;
  --paper:        #F4F9F4;
  --white:        #FFFFFF;
  --ink:          #142019;
  --ink-soft:     #2A3A30;
  --muted:        #6B7B72;
  --line:         #BDD3C2;
  --line-soft:    #D5E5D9;

  --moss:         #2D5446;
  --moss-deep:    #1F3D33;
  --green-deep:   #2D5446;  /* legacy alias used in inline color refs */
  --sage:         #9CBDA8;
  --sage-soft:    #C7DCCF;

  /* accent stays under the --terracotta name for compatibility — value is soft turquoise now */
  --terracotta:   #4FAEA4;
  --terracotta-d: #38938A;
  --turquoise:    #4FAEA4;
  --turquoise-soft: #BDE0DC;
  --honey:        #D4C58C;

  --shadow-sm: 0 1px 2px rgba(27,26,22,.06);
  --shadow-md: 0 8px 24px -12px rgba(27,26,22,.18);
  --shadow-lg: 0 24px 48px -24px rgba(27,26,22,.22);

  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 22px;

  --container: 1240px;

  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-ui:      "DM Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family: var(--font-ui);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection{ background: var(--moss); color: var(--cream); }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* tiny utility */
.eyebrow{
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.header-left{ display:flex; align-items:center; gap:14px; }
.header-right{ display:flex; justify-content:flex-end; align-items:center; gap:18px; }

.logo{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  line-height: 1;
}
.logo-img{
  height: 69px;
  width: auto;
  display: block;
}
.logo-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.logo-text .wordmark{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.logo-tagline{
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px){
  .logo-text{ display: none; }
  .logo-img{ height: 54px; }
}

.nav{
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav a{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.nav a:hover{ background: var(--cream-2); color: var(--ink); }
.nav a.active{
  background: var(--moss);
  color: var(--cream);
}

.header-cta{
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  display: inline-flex; align-items:center; gap:8px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
@media (max-width: 1024px){
  .header-cta{ display: none; }
}
.header-cta:hover{ background: var(--ink); color: var(--cream); }

.nav-toggle{
  display: none;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  align-items: center; justify-content: center;
  font-size: 18px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  padding: 88px 0 96px;
  overflow: hidden;
}
.hero-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}
.hero-tag{
  display: inline-flex;
  align-items: center; gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 28px;
}
.hero-tag .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--terracotta);
  display:inline-block;
}

.hero h1{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 6.2vw, 84px);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 26px;
}
.hero h1 .accent{
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}
.hero h1 .underline{
  background-image: linear-gradient(transparent 78%, color-mix(in srgb, var(--sage) 80%, white) 78%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 .08em;
}
.hero p.lead{
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 0 36px;
}

.hero-ctas{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 999px;
  transition: transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--moss);
  color: var(--cream);
}
.btn-primary:hover{ background: var(--moss-deep); }
.btn-ghost{
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover{ border-color: var(--ink); }
.btn .arrow{ transition: transform .2s ease; }
.btn:hover .arrow{ transform: translateX(3px); }

/* hero visual: single composition — soft turquoise card with brand illustration, floating stat + rotating seal */
.hero-visual{
  position: relative;
  aspect-ratio: 5/6;
  width: 100%;
}
.hero-card{
  position: absolute;
  top: 0; left: 6%;
  width: 84%;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 110%, color-mix(in srgb, var(--moss) 70%, var(--turquoise)) 0%, transparent 70%),
    linear-gradient(160deg, var(--turquoise-soft) 0%, var(--sage-soft) 60%, color-mix(in srgb, var(--turquoise) 35%, var(--paper)) 100%);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hero-float 8s ease-in-out infinite;
  will-change: transform;
}
.hero-card::before{
  /* subtle dotted texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--moss) 14%, transparent) 1px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: .45;
  mask-image: radial-gradient(80% 80% at 50% 60%, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 60%, black 40%, transparent 75%);
  pointer-events: none;
}
.hero-illu{
  position: relative;
  width: 78%;
  height: auto;
  color: var(--moss);
  z-index: 1;
}
.hero-illu .leaves{
  transform-origin: 160px 220px;
  animation: hero-sway 6s ease-in-out infinite;
  will-change: transform;
}
.hero-illu .bag{
  fill: color-mix(in srgb, var(--white) 80%, var(--turquoise) 5%);
}

/* small stat card, top-right */
.hero-badge{
  position: absolute;
  top: 6%;
  right: -2%;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-md);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: hero-float 9s ease-in-out -2s infinite;
  will-change: transform;
}
.hero-badge .stars{
  color: var(--turquoise);
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 1;
  margin-bottom: 4px;
}
.hero-badge .num{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.01em;
}
.hero-badge .lab{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* rotating seal, bottom-left */
.hero-seal{
  position: absolute;
  bottom: -2%;
  left: -2%;
  width: 28%;
  max-width: 150px;
  aspect-ratio: 1/1;
  z-index: 2;
  filter: drop-shadow(0 12px 24px rgba(20,32,25,.18));
}
.hero-seal .seal-svg{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: var(--moss);
  animation: hero-spin 28s linear infinite;
  will-change: transform;
}
.hero-seal .seal-svg text{
  font-family: var(--font-ui);
  font-weight: 600;
  fill: currentColor;
}
.hero-seal .seal-core{
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--turquoise);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.hero-seal .seal-core svg{
  width: 60%;
  height: 60%;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes hero-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.8deg); }
}
@keyframes hero-spin {
  to { transform: rotate(360deg); }
}

/* dacha-specific accents */
.hero-illu--dacha .smoke{
  animation: hero-smoke 5s ease-in-out infinite;
  transform-origin: 215px 90px;
  will-change: transform, opacity;
}
.hero-illu--dacha .sun-group{
  animation: hero-sun 6s ease-in-out infinite;
  transform-origin: 260px 68px;
  transform-box: fill-box;
  will-change: transform;
}
@keyframes hero-smoke {
  0%, 100% { opacity: .6; transform: translateY(2px); }
  50%      { opacity: 1;  transform: translateY(-6px); }
}

/* gardener: gentle bob + hearts */
.hero-illu--dacha .gardener{
  animation: gardener-bob 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 176px 420px;
  will-change: transform;
}
@keyframes gardener-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.hero-illu--dacha .gardener-heart{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
  animation: gardener-heart 2.8s ease-in-out infinite;
}
.hero-illu--dacha .gardener-heart.heart-b{ animation-delay: -1.4s; }
@keyframes gardener-heart {
  0%   { transform: translateY(10px) scale(.5); opacity: 0; }
  25%  { opacity: 1;  transform: translateY(0)    scale(1); }
  80%  { opacity: .85; }
  100% { transform: translateY(-22px) scale(.7); opacity: 0; }
}
@keyframes hero-sun {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ---- About hero: working OLLYCH shop with workers & happy customers ---- */
.hero-illu--shop{
  overflow: visible;
  /* override the generic .hero-illu width:78% — the shop scene
     has lots of detail and benefits from filling the card */
  width: 100% !important;
  max-width: 100% !important;
}

/* All shop transforms reference the SVG viewBox, not each group's bbox.
   This keeps rotation pivots predictable when groups have stroke/text
   that would otherwise shift the bbox origin. */
.hero-illu--shop .sun,
.hero-illu--shop .banner,
.hero-illu--shop .cashier-worker,
.hero-illu--shop .wave-arm,
.hero-illu--shop .window-plant,
.hero-illu--shop .window-tag,
.hero-illu--shop .street-planter,
.hero-illu--shop .door{
  transform-box: view-box;
}

/* sun gently pulses */
.hero-illu--shop .sun{
  transform-origin: 40px 56px;
  animation: shop-sun 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes shop-sun {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.06); }
}

/* cloud drifts slowly across */
.hero-illu--shop .cloud{
  animation: shop-cloud 16s linear infinite;
  will-change: transform;
}
@keyframes shop-cloud {
  0%   { transform: translateX(-30px); }
  100% { transform: translateX(30px);  }
}

/* chimney smoke puffs */
.hero-illu--shop .puff{
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
}
.hero-illu--shop .puff-1{ animation: shop-puff 3.6s ease-out infinite 0s;   }
.hero-illu--shop .puff-2{ animation: shop-puff 3.6s ease-out infinite 1.2s; }
.hero-illu--shop .puff-3{ animation: shop-puff 3.6s ease-out infinite 2.4s; }
@keyframes shop-puff {
  0%   { transform: translate(0, 0)       scale(.4); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translate(-12px, -36px) scale(1.1); opacity: 0; }
}

/* banner: subtle flag-like sway */
.hero-illu--shop .banner{
  transform-origin: 160px 146px;
  animation: shop-banner 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes shop-banner {
  0%, 100% { transform: rotate(-.6deg); }
  50%      { transform: rotate(.6deg);  }
}

/* shop door: opens and closes as customers leave */
.hero-illu--shop .door{
  transform-origin: 140px 268px; /* hinge on the left edge of the door */
  animation: shop-door 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes shop-door {
  0%, 8%   { transform: scaleX(1);   }
  18%, 32% { transform: scaleX(.25); }  /* customer 1 leaves: door swings open */
  42%, 58% { transform: scaleX(1);   }
  68%, 82% { transform: scaleX(.25); }  /* customer 2 leaves */
  92%,100% { transform: scaleX(1);   }
}

/* ---- Cashier worker ---- */
.hero-illu--shop .cashier-worker{
  animation: shop-cashier-bob 2.8s ease-in-out infinite;
  transform-origin: 228px 230px;
  will-change: transform;
}
@keyframes shop-cashier-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.hero-illu--shop .wave-arm{
  animation: shop-wave 1.8s ease-in-out infinite;
  transform-origin: 242px 226px; /* shoulder pivot */
  will-change: transform;
}
@keyframes shop-wave {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(14deg); }
}

/* hearts above cashier */
.hero-illu--shop .heart{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
  animation: shop-heart 2.6s ease-in-out infinite;
}
.hero-illu--shop .heart-b{ animation-delay: -1.3s; }
@keyframes shop-heart {
  0%   { transform: translateY(8px)  scale(.5); opacity: 0; }
  25%  { transform: translateY(0)    scale(1);  opacity: 1; }
  80%  { opacity: .85; }
  100% { transform: translateY(-22px) scale(.7); opacity: 0; }
}

/* window plant & price tag sway/wiggle */
.hero-illu--shop .window-plant{
  animation: shop-windowplant 5.5s ease-in-out infinite;
  transform-origin: 71px 254px; /* base of the pot */
  will-change: transform;
}
@keyframes shop-windowplant {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg);  }
}
.hero-illu--shop .window-tag{
  animation: shop-windowtag 3.8s ease-in-out infinite;
  transform-origin: 110px 232px; /* top of the price tag */
  will-change: transform;
}
@keyframes shop-windowtag {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(6deg);  }
}

/* ---- Customer 1 (leaves to the LEFT) ---- */
.hero-illu--shop .customer-1{
  animation: shop-walk-1 6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes shop-walk-1 {
  /* enters from door, exits left, then resets out of sight */
  0%   { transform: translate(160px, 328px) scale(.6); opacity: 0; }
  10%  { transform: translate(160px, 328px) scale(.85); opacity: 1; }
  20%  { transform: translate(150px, 332px) scale(.95); opacity: 1; }
  45%  { transform: translate( 60px, 332px) scale(1);   opacity: 1; }
  55%  { transform: translate( 10px, 332px) scale(1);   opacity: 1; }
  60%  { transform: translate(-20px, 332px) scale(1);   opacity: 0; }
  100% { transform: translate(-20px, 332px) scale(1);   opacity: 0; }
}

/* ---- Customer 2 (leaves to the RIGHT, offset in time) ---- */
.hero-illu--shop .customer-2{
  animation: shop-walk-2 6s ease-in-out infinite;
  animation-delay: -3s;
  will-change: transform, opacity;
}
@keyframes shop-walk-2 {
  0%   { transform: translate(160px, 328px) scale(.6); opacity: 0; }
  10%  { transform: translate(160px, 328px) scale(.85); opacity: 1; }
  20%  { transform: translate(170px, 332px) scale(.95); opacity: 1; }
  45%  { transform: translate(260px, 332px) scale(1);   opacity: 1; }
  55%  { transform: translate(310px, 332px) scale(1);   opacity: 1; }
  60%  { transform: translate(340px, 332px) scale(1);   opacity: 0; }
  100% { transform: translate(340px, 332px) scale(1);   opacity: 0; }
}

/* Walking legs alternate */
.hero-illu--shop .leg{ transform-box: fill-box; }
.hero-illu--shop .legs .leg-a{
  transform-origin: -4px -10px;
  animation: shop-leg-a .5s ease-in-out infinite;
}
.hero-illu--shop .legs .leg-b{
  transform-origin: 4px -10px;
  animation: shop-leg-b .5s ease-in-out infinite;
}
@keyframes shop-leg-a {
  0%, 100% { transform: rotate(-22deg); }
  50%      { transform: rotate(22deg);  }
}
@keyframes shop-leg-b {
  0%, 100% { transform: rotate(22deg);  }
  50%      { transform: rotate(-22deg); }
}

/* Bags swing gently — pivot at the top center of each bag (where the handle is) */
.hero-illu--shop .bag{
  transform-box: fill-box;
  transform-origin: center top;
  animation: shop-bag .9s ease-in-out infinite;
  will-change: transform;
}
@keyframes shop-bag {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg);  }
}

/* Happy spark above each customer's head */
.hero-illu--shop .happy{
  transform-box: fill-box;
  transform-origin: center;
  animation: shop-happy 1.6s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero-illu--shop .happy-2{ animation-delay: -.8s; }
@keyframes shop-happy {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: 1; transform: scale(1.1); }
}

/* street planters sway softly */
.hero-illu--shop .street-planter{
  animation: shop-planter 5s ease-in-out infinite;
  transform-origin: 307px 334px; /* base of the right planter */
  will-change: transform;
}
.hero-illu--shop .street-planter--left{
  animation: shop-planter-l 5s ease-in-out infinite;
  transform-origin: 14px 334px;
}
@keyframes shop-planter {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2.5deg); }
}
@keyframes shop-planter-l {
  0%, 100% { transform: rotate(2deg);  }
  50%      { transform: rotate(-2.5deg); }
}

/* sparkles twinkle */
.hero-illu--shop .spark{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.hero-illu--shop .spark-1{ animation: shop-spark 3s ease-in-out infinite 0s;    }
.hero-illu--shop .spark-2{ animation: shop-spark 3s ease-in-out infinite -1s;   }
.hero-illu--shop .spark-3{ animation: shop-spark 3s ease-in-out infinite -2s;   }
@keyframes shop-spark {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: 1; transform: scale(1.15); }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-illu--shop *,
  .hero-illu--shop *::before,
  .hero-illu--shop *::after{
    animation: none !important;
  }
  /* place customers at rest positions next to the door */
  .hero-illu--shop .customer-1{ transform: translate(110px, 332px); opacity: 1; }
  .hero-illu--shop .customer-2{ transform: translate(210px, 332px); opacity: 1; }
  .hero-illu--shop .happy{ opacity: 0; }
}

/* ---- About hero: store + cashier (legacy, still here for reduced-motion fallback) ---- */
.hero-illu--store{ overflow: visible; }

/* Customer 1 walks left→right toward door, then loops */
.hero-illu--store .customer-1{
  animation: store-walk-1 7s linear infinite;
  will-change: transform;
}
@keyframes store-walk-1 {
  0%   { transform: translate(20px, 280px); }
  100% { transform: translate(140px, 280px); }
}
/* Customer 2 walks right→left, exiting */
.hero-illu--store .customer-2{
  animation: store-walk-2 7s linear -3.5s infinite;
  will-change: transform;
}
@keyframes store-walk-2 {
  0%   { transform: translate(290px, 280px); }
  100% { transform: translate(170px, 280px); }
}

/* Walking legs alternate */
.hero-illu--store .leg{
  transform-box: fill-box;
}
.hero-illu--store .legs-1 .leg-a,
.hero-illu--store .legs-2 .leg-a{
  transform-origin: -5px 50px;
  animation: store-leg-a .55s ease-in-out infinite;
}
.hero-illu--store .legs-1 .leg-b,
.hero-illu--store .legs-2 .leg-b{
  transform-origin: 5px 50px;
  animation: store-leg-b .55s ease-in-out infinite;
}
@keyframes store-leg-a {
  0%, 100% { transform: rotate(-20deg); }
  50%      { transform: rotate(20deg);  }
}
@keyframes store-leg-b {
  0%, 100% { transform: rotate(20deg);  }
  50%      { transform: rotate(-20deg); }
}
.hero-illu--store .walker-bag-1,
.hero-illu--store .walker-bag-2{
  animation: store-bag-swing 1.2s ease-in-out infinite;
  transform-box: fill-box;
  will-change: transform;
}
.hero-illu--store .walker-bag-1{ transform-origin: 11px 30px; }
.hero-illu--store .walker-bag-2{ transform-origin: -11px 30px; }
@keyframes store-bag-swing {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg);  }
}

/* Cashier: small bob */
.hero-illu--store .cashier{
  animation: store-cashier-bob 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 124px 256px;
  will-change: transform;
}
@keyframes store-cashier-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Cashier's waving arm */
.hero-illu--store .cashier-arm{
  animation: store-wave 1.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 144px 246px;
  will-change: transform;
}
@keyframes store-wave {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(14deg);  }
}

/* Hearts above cashier */
.hero-illu--store .heart{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
  animation: store-heart 2.6s ease-in-out infinite;
}
.hero-illu--store .heart-b{ animation-delay: -1.3s; opacity: .7; }
@keyframes store-heart {
  0%   { transform: translateY(8px)  scale(.5); opacity: 0; }
  25%  { transform: translateY(0)    scale(1);  opacity: 1; }
  80%  { opacity: .85; }
  100% { transform: translateY(-22px) scale(.7); opacity: 0; }
}

/* ---- Contacts hero: phone call (detailed) ---- */
.hero-illu--phone{
  overflow: visible;
  /* fill the card on contacts too — the scene reads better at full width */
  width: 100% !important;
  max-width: 100% !important;
}

/* Use viewBox coordinates as the reference for any transform-origin
   that names a point in the SVG (avoids the fill-box bug where the
   origin gets re-interpreted relative to each group's own bbox). */
.hero-illu--phone .manager,
.hero-illu--phone .customer,
.hero-illu--phone .mouth-c,
.hero-illu--phone .bubble,
.hero-illu--phone .wave,
.hero-illu--phone .phone-screen,
.hero-illu--phone .ring,
.hero-illu--phone .cust-bag,
.hero-illu--phone .tulip-c{
  transform-box: view-box;
}

/* manager: gentle bob + talking mouth */
.hero-illu--phone .manager{
  animation: phone-bob 2.6s ease-in-out infinite;
  transform-origin: 80px 296px;
  will-change: transform;
}
.hero-illu--phone .customer{
  animation: phone-bob 2.6s ease-in-out -1.3s infinite;
  transform-origin: 240px 296px;
  will-change: transform;
}
@keyframes phone-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* manager's mouth (talking) — vertical open/close around the mouth point */
.hero-illu--phone .mouth-m{
  transform-box: fill-box;
  transform-origin: center;
  animation: phone-mouth 1.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes phone-mouth {
  0%, 100% { transform: scaleY(1);   }
  50%      { transform: scaleY(.35); }
}

/* customer's mouth (slight smile change) — pivot at the mouth center in viewBox coords */
.hero-illu--phone .mouth-c{
  transform-origin: 240px 212px;
  animation: phone-smile 2.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes phone-smile {
  0%, 100% { transform: scaleY(1);    }
  50%      { transform: scaleY(1.25); }
}

/* typing bubble: bobs above the heads */
.hero-illu--phone .bubble{
  animation: phone-bubble 2.4s ease-in-out infinite;
  transform-origin: 160px 110px;
  will-change: transform;
}
@keyframes phone-bubble {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.hero-illu--phone .typing .dot{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.hero-illu--phone .typing .dot-1{ animation: phone-dot 1.2s ease-in-out infinite 0s;   }
.hero-illu--phone .typing .dot-2{ animation: phone-dot 1.2s ease-in-out infinite .2s;  }
.hero-illu--phone .typing .dot-3{ animation: phone-dot 1.2s ease-in-out infinite .4s;  }
@keyframes phone-dot {
  0%, 60%, 100% { transform: translateY(0)    scale(1);   opacity: .55; }
  30%           { transform: translateY(-4px) scale(1.15); opacity: 1;   }
}

/* signal waves between phones: pulse out from the midpoint */
.hero-illu--phone .wave{
  opacity: 0;
  animation: phone-wave 1.8s ease-out infinite;
  transform-origin: 160px 200px;
  will-change: transform, opacity;
}
.hero-illu--phone .wave-1{ animation-delay: 0s;    }
.hero-illu--phone .wave-2{ animation-delay: .25s;  }
.hero-illu--phone .wave-3{ animation-delay: .5s;   }
.hero-illu--phone .wave-4{ animation-delay: .75s;  }
@keyframes phone-wave {
  0%   { opacity: 0;   transform: scale(.5); }
  20%  { opacity: .9;  }
  100% { opacity: 0;   transform: scale(1.1); }
}

/* phone screen: subtle ring shake */
.hero-illu--phone .phone-screen{
  animation: phone-ring 1.4s ease-in-out infinite;
  transform-origin: 276px 216px;
  will-change: transform;
}
@keyframes phone-ring {
  0%, 90%, 100% { transform: rotate(0); }
  10%           { transform: rotate(-6deg); }
  20%           { transform: rotate(5deg); }
  30%           { transform: rotate(-4deg); }
  40%           { transform: rotate(3deg); }
  50%           { transform: rotate(0); }
}

/* ring waves expand outward from the phone speaker */
.hero-illu--phone .ring{
  transform-origin: 286px 216px;
  opacity: 0;
  will-change: transform, opacity;
}
.hero-illu--phone .ring-1{ animation: phone-ringwave 1.4s ease-out infinite 0s;   }
.hero-illu--phone .ring-2{ animation: phone-ringwave 1.4s ease-out infinite .35s; }
@keyframes phone-ringwave {
  0%   { opacity: 0;  transform: scale(.6); }
  20%  { opacity: 1;  }
  100% { opacity: 0;  transform: scale(1.2); }
}

/* coffee steam — fill-box + center is correct here since each <path>
   wisp animates around its own center */
.hero-illu--phone .steam path{
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
}
.hero-illu--phone .steam-1{ animation: phone-steam 2.4s ease-out infinite 0s;   }
.hero-illu--phone .steam-2{ animation: phone-steam 2.4s ease-out infinite 1.2s; }
@keyframes phone-steam {
  0%   { opacity: 0;   transform: translateY(8px)  scale(.7); }
  25%  { opacity: .9;  }
  100% { opacity: 0;   transform: translateY(-18px) scale(1.05); }
}

/* laptop screen text rows: typing illusion via stroke-dashoffset */
.hero-illu--phone .laptop-key path{
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: phone-typing 3.4s steps(20, end) infinite;
}
.hero-illu--phone .laptop-key path:nth-child(2){ animation-delay: 1.2s; }
.hero-illu--phone .laptop-key path:nth-child(3){ animation-delay: 2.2s; }
@keyframes phone-typing {
  0%, 5%   { stroke-dashoffset: 40; }
  60%      { stroke-dashoffset: 0;  }
  90%      { stroke-dashoffset: 0;  }
  100%     { stroke-dashoffset: 40; }
}

/* hearts rising — fill-box + center is right (each heart scales around its own middle) */
.hero-illu--phone .heart-call{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
  animation: phone-heart 2.6s ease-in-out infinite;
}
.hero-illu--phone .heart-2{ animation-delay: -1.3s; opacity: .7; }
@keyframes phone-heart {
  0%   { transform: translateY(0)    scale(1);   opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(-22px) scale(.85); opacity: 0; }
}

/* shopping bag at customer feet — gentle bob */
.hero-illu--phone .cust-bag{
  animation: phone-bag 3.4s ease-in-out infinite;
  transform-origin: 287px 326px;
  will-change: transform;
}
@keyframes phone-bag {
  0%, 100% { transform: translateY(0)   rotate(-1.5deg); }
  50%      { transform: translateY(-2px) rotate(1.5deg); }
}

/* tulips in ground sway — pivot at their base (bottom of the stem) */
.hero-illu--phone .tulip-c-1{ transform-origin: 196px 382px; animation: phone-tulip 3.2s ease-in-out infinite;       }
.hero-illu--phone .tulip-c-2{ transform-origin: 224px 382px; animation: phone-tulip 3.6s ease-in-out -1.5s infinite; }
.hero-illu--phone .tulip-c-3{ transform-origin: 28px 382px;  animation: phone-tulip 3.4s ease-in-out -.7s infinite;  }
.hero-illu--phone .tulip-c-4{ transform-origin: 58px 382px;  animation: phone-tulip 3.8s ease-in-out -2.1s infinite; }
@keyframes phone-tulip {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg);  }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-illu--phone *,
  .hero-illu--phone *::before,
  .hero-illu--phone *::after{
    animation: none !important;
  }
}

/* =========================================================
   FEATURES STRIP
   ========================================================= */
.features-strip{
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}
.features-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.feature{
  padding: 36px 28px 36px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.feature + .feature{
  padding-left: 28px;
  border-left: 1px solid var(--line-soft);
}
.feature-num{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--terracotta);
}
.feature h4{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.01em;
  margin: 4px 0 4px;
  color: var(--ink);
}
.feature p{
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section{
  padding: 96px 0;
}
.section-header{
  max-width: var(--container);
  margin: 0 auto 48px;
  padding: 0 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.section-header .title-wrap{
  max-width: 700px;
}
.section-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -.02em;
  line-height: 1.02;
  color: var(--ink);
  margin: 12px 0 0;
}
.section-title em{
  font-style: italic;
  color: var(--terracotta);
  font-weight: 500;
}
.section-subtitle{
  font-size: 16px;
  color: var(--muted);
  max-width: 380px;
  text-align: right;
}

/* =========================================================
   CATEGORIES (pill row)
   ========================================================= */
.categories{
  max-width: var(--container);
  margin: 0 auto 36px;
  padding: 0 28px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.category-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.category-btn:hover{
  border-color: var(--ink);
}
.category-btn .ic{
  font-size: 15px;
  line-height: 1;
}
.category-btn .count{
  font-size: 12px;
  color: var(--muted);
  background: var(--cream);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 600;
  letter-spacing: .02em;
}
.category-btn.active{
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.category-btn.active .count{
  background: rgba(255,255,255,.14);
  color: var(--cream);
}

/* =========================================================
   PRODUCT GRID
   ========================================================= */
.product-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 22px;
}
.product-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(8px);
  animation: card-in .55s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes card-in{
  to { opacity: 1; transform: translateY(0); }
}

.product-img-wrap{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  transition: transform .35s ease, box-shadow .35s ease;
}
.product-card:hover .product-img-wrap{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.product-img-wrap img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .product-img-wrap img{ transform: scale(1.04); }

.product-img-placeholder{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 88px;
  background:
    radial-gradient(80% 60% at 50% 35%, color-mix(in srgb, var(--sage-soft) 80%, white) 0%, transparent 70%),
    var(--paper);
  filter: saturate(.92);
}

.product-badge{
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
}
.product-badge.hit{ background: var(--terracotta); }
.product-badge.new{ background: var(--moss); }
.product-badge.sale{ background: var(--honey); color: var(--ink); }

.product-quick{
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  display: flex; align-items:center; justify-content:center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.product-card:hover .product-quick{ opacity: 1; transform: translateY(0); }
.product-quick:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
.product-quick svg{ width:16px; height:16px; }

.product-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-category{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.product-name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -.005em;
  line-height: 1.25;
  color: var(--ink);
}
.product-desc{
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 2px 0 6px;
}
.product-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.product-price{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.product-price span{
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 2px;
}
.btn-buy{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-buy:hover{
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.empty-state{
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px;
  color: var(--muted);
  font-size: 16px;
}
.empty-state .icon{ font-size: 44px; margin-bottom: 10px; }

/* =========================================================
   PAGE CONTENT (about / contacts)
   ========================================================= */
.page-content{
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 28px 96px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.page-content h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 48px 0 18px;
  line-height: 1.15;
}
.page-content h2:first-of-type{ margin-top: 16px; }
.page-content p{ margin: 0 0 16px; }
.page-content ul{
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-content ul li{
  position: relative;
  padding-left: 28px;
}
.page-content ul li::before{
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 14px; height: 1px;
  background: var(--terracotta);
}
.page-content strong{ color: var(--ink); font-weight: 600; }
.page-content a{ color: var(--terracotta); border-bottom: 1px solid color-mix(in srgb, var(--terracotta) 40%, transparent); }
.page-content a:hover{ border-bottom-color: var(--terracotta); }

.callout{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin: 24px 0 32px;
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* =========================================================
   CONTACT CARDS
   ========================================================= */
.contact-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 12px 0 32px;
}
@media (max-width: 1024px){
  .contact-grid{ grid-template-columns: repeat(2, 1fr); }
}
.contact-card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}
.contact-card .ic{
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 18px;
}
.contact-card h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.contact-card a{
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  border-bottom: 0;
  margin-bottom: 4px;
}
.contact-card a:hover{ color: var(--terracotta); }
.contact-card p{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background: var(--moss);
  color: color-mix(in srgb, var(--cream) 88%, transparent);
  padding: 72px 0 28px;
  margin-top: 32px;
}
.footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr;
  gap: 48px;
}
.footer-col h5{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--cream);
  margin: 0 0 18px;
}
.footer-brand{
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.footer-brand img{
  height: 84px;
  width: auto;
  display: block;
}
.footer-col p{
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--cream) 80%, transparent);
  max-width: 320px;
}
.footer-col a{
  display: block;
  padding: 5px 0;
  font-size: 14.5px;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  transition: color .2s ease;
}
.footer-col a:hover{ color: var(--cream); }
.footer-col a strong{ font-weight: 500; color: var(--cream); }

.footer-bottom{
  max-width: var(--container);
  margin: 56px auto 0;
  padding: 28px 28px 0;
  border-top: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}
.footer-bottom .socials{
  display: inline-flex;
  gap: 8px;
}
.footer-bottom .socials a{
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cream) 20%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--cream) 75%, transparent);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-bottom .socials a:hover{
  background: var(--cream);
  color: var(--moss);
  border-color: var(--cream);
}

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 96px 0;
}
.reviews .section-header{
  margin-bottom: 48px;
}
.reviews-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review-card{
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.review-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}
.review-stars{
  color: var(--terracotta);
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1;
}
.review-quote{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -.005em;
  margin: 0;
  flex: 1;
  text-wrap: pretty;
}
.review-author{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.review-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream-2);
  flex-shrink: 0;
}
.review-name{
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 2px;
}
.review-loc{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}

@media (max-width: 1024px){
  .reviews-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .reviews{ padding: 64px 0; }
  .reviews-grid{ grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
}

/* footer tagline */
.footer-tagline{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--cream);
  margin: 0 0 12px;
  letter-spacing: -.005em;
}

/* =========================================================
   REVIEW FORM
   ========================================================= */
.reviews-actions{
  max-width: var(--container);
  margin: 40px auto 0;
  padding: 0 28px;
  display: flex;
  justify-content: center;
}
.review-form-wrap{
  max-width: 720px;
  margin: 32px auto 0;
  padding: 0 28px;
}
.review-form-wrap[hidden]{ display: none; }
.review-form{
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 36px 36px 32px;
  box-shadow: var(--shadow-md);
  position: relative;
  animation: form-in .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes form-in{
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.review-form h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.review-form .form-intro{
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 22px;
}
.review-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.review-form label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.review-form input,
.review-form textarea{
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: 0;
  transition: border-color .2s ease, background .2s ease;
  resize: vertical;
  font-family: inherit;
}
.review-form input:focus,
.review-form textarea:focus{
  border-color: var(--turquoise);
  background: var(--white);
}
.review-form textarea{
  min-height: 110px;
  line-height: 1.5;
}
.rating-input{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.stars-pick{
  display: inline-flex;
  gap: 2px;
}
.stars-pick button{
  font-size: 26px;
  line-height: 1;
  color: var(--line);
  padding: 4px;
  transition: color .15s ease, transform .15s ease;
}
.stars-pick button:hover{ transform: scale(1.08); }
.stars-pick button.on{ color: var(--turquoise); }
.form-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.form-note{
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0 0;
  text-align: center;
}

/* toast for submit success */
.review-toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--cream);
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 500;
  z-index: 100;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.review-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* user-submitted avatar (initials in colored circle) */
.review-avatar-init{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--turquoise);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  flex-shrink: 0;
}

@media (max-width: 720px){
  .review-form{ padding: 24px 22px; }
  .review-form-row{ grid-template-columns: 1fr; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .features-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(3){ border-left: 0; padding-left: 0; }
  .feature:nth-child(3),.feature:nth-child(4){ border-top: 1px solid var(--line-soft); padding-top: 28px; margin-top: 4px; }
  .footer-inner{ grid-template-columns: 1fr 1fr; gap: 36px; }
  .hero-inner{ grid-template-columns: 1fr; gap: 40px; }
  .hero-visual{ max-width: 520px; }
}
@media (max-width: 720px){
  .container, .header-inner, .hero-inner, .features-grid, .product-grid, .categories, .section-header, .footer-inner, .footer-bottom{ padding-left: 20px; padding-right: 20px; }
  .header-inner{ grid-template-columns: auto 1fr auto; }
  .header-right .nav{
    position: fixed;
    top: 64px; right: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    padding: 10px;
    min-width: 200px;
    display: none;
  }
  .header-right .nav.open{ display: flex; }
  .header-cta{ display: none; }
  .nav-toggle{ display: inline-flex; }

  .hero{ padding: 56px 0 64px; }
  .features-grid{ grid-template-columns: 1fr; }
  .feature + .feature{ border-left: 0; border-top: 1px solid var(--line-soft); padding: 24px 0; }
  .feature{ padding: 24px 0; }

  .section{ padding: 64px 0; }
  .section-header{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-subtitle{ text-align: left; }
  .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .product-name{ font-size: 16px; }
  .product-price{ font-size: 18px; }

  .contact-grid{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }

  .hero-card{ width: 90%; left: 5%; }
  .hero-badge{ right: -2%; padding: 12px 14px; }
  .hero-badge .num{ font-size: 18px; }
  .hero-seal{ width: 32%; max-width: 130px; bottom: -4%; left: -2%; }
}

/* =========================================================
   SCROLL REVEAL & MOTION
   ========================================================= */
[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].in-view{
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-reveal-delay="1"]{ transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"]{ transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"]{ transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"]{ transition-delay: .32s; }
[data-reveal][data-reveal-delay="5"]{ transition-delay: .40s; }

/* respect users who prefer less motion — also a nice perf hint for low-power devices */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity: 1; transform: none; }
  .hero-card, .hero-badge, .hero-seal .seal-svg, .hero-illu .leaves,
  .hero-illu--store .customer-1, .hero-illu--store .customer-2,
  .hero-illu--store .cashier, .hero-illu--store .heart,
  .hero-illu--store .customer-1, .hero-illu--store .customer-2,
  .hero-illu--store .leg, .hero-illu--store .walker-bag-1, .hero-illu--store .walker-bag-2,
  .hero-illu--store .cashier, .hero-illu--store .cashier-arm, .hero-illu--store .heart,
  .hero-illu--crate .crate-group, .hero-illu--crate .leaves, .hero-illu--crate .sprout-leaf,
  .hero-illu--crate .sprig, .hero-illu--crate .tag, .hero-illu--crate .hang-leaf,
  .hero-illu--crate .drop, .hero-illu--crate .spark,
  .hero-illu--shop .sun, .hero-illu--shop .cloud, .hero-illu--shop .puff,
  .hero-illu--shop .banner, .hero-illu--shop .door,
  .hero-illu--shop .cashier-worker, .hero-illu--shop .wave-arm, .hero-illu--shop .heart,
  .hero-illu--shop .window-plant, .hero-illu--shop .window-tag,
  .hero-illu--shop .customer-1, .hero-illu--shop .customer-2,
  .hero-illu--shop .leg, .hero-illu--shop .bag, .hero-illu--shop .happy,
  .hero-illu--shop .street-planter, .hero-illu--shop .spark,
  .hero-illu--phone .wave, .hero-illu--phone .heart-call,
  .hero-illu--phone .manager, .hero-illu--phone .customer,
  .hero-illu--phone .mouth-m, .hero-illu--phone .mouth-c,
  .hero-illu--phone .bubble, .hero-illu--phone .typing .dot, .hero-illu--phone .phone-screen,
  .hero-illu--phone .ring, .hero-illu--phone .steam path,
  .hero-illu--phone .laptop-key path, .hero-illu--phone .cust-bag, .hero-illu--phone .tulip-c,
  .hero-illu--dacha .smoke, .hero-illu--dacha .sun-group,
  .hero-illu--dacha .gardener, .hero-illu--dacha .gardener-heart { animation: none !important; }
}

/* =========================================================
   INTRO SPLASH — lightweight first-visit greeting
   Pure CSS animations (transform + opacity only).
   GPU-friendly, no JS loops, no canvas.
   Shown once per session via sessionStorage gate.
   ========================================================= */
.intro{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cream) 0%, var(--sage-soft) 100%);
  cursor: pointer;
  /* fade-out controlled by .is-leaving class */
  opacity: 1;
  transition: opacity .6s ease;
  will-change: opacity;
}
.intro.is-leaving{
  opacity: 0;
  pointer-events: none;
}
.intro-inner{
  text-align: center;
  padding: 24px;
  max-width: 560px;
  /* gentle entry of the whole block */
  animation: introBlockIn .9s cubic-bezier(.2,.7,.2,1) both;
}
.intro-logo{
  width: clamp(140px, 36vw, 220px);
  height: auto;
  margin: 0 auto 28px;
  display: block;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  animation: introLogoIn .8s cubic-bezier(.2,.7,.2,1) .15s forwards;
  will-change: transform, opacity;
}
.intro-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 5.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--moss-deep);
  margin: 0 0 12px;
  opacity: 0;
  transform: translateY(10px);
  animation: introTextIn .7s cubic-bezier(.2,.7,.2,1) .55s forwards;
  will-change: transform, opacity;
}
.intro-title .accent{
  font-style: italic;
  color: var(--turquoise);
}
.intro-tagline{
  font-family: var(--font-ui);
  font-size: clamp(13px, 2.4vw, 15px);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  animation: introTextIn .7s cubic-bezier(.2,.7,.2,1) .85s forwards;
  will-change: transform, opacity;
}
.intro-dots{
  display: inline-flex;
  gap: 6px;
  margin-top: 24px;
  opacity: 0;
  animation: introTextIn .5s ease 1.15s forwards;
}
.intro-dots span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--turquoise);
  animation: introDot 1.1s ease-in-out infinite;
}
.intro-dots span:nth-child(2){ animation-delay: .18s; }
.intro-dots span:nth-child(3){ animation-delay: .36s; }

.intro-skip{
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  animation: introTextIn .5s ease 1.3s forwards;
  pointer-events: none;
}

/* Lock body scroll while intro is on screen */
body.intro-active{ overflow: hidden; }

@keyframes introBlockIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}
@keyframes introLogoIn{
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes introTextIn{
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes introDot{
  0%, 100%{ transform: translateY(0); opacity: .4; }
  50%     { transform: translateY(-4px); opacity: 1; }
}

/* Respect reduced-motion: instant show, no animations */
@media (prefers-reduced-motion: reduce){
  .intro-inner,
  .intro-logo,
  .intro-title,
  .intro-tagline,
  .intro-dots,
  .intro-dots span,
  .intro-skip{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .intro{ transition: opacity .3s linear; }
}

/* =====================================================
   COOKIE CONSENT BANNER — крупная полоса снизу
   ===================================================== */
.cookie-banner{
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 48px -16px rgba(20, 32, 25, .25),
    0 8px 16px -8px rgba(20, 32, 25, .12);
  padding: 22px 28px;
  font-family: var(--font-ui);
  color: var(--ink);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1);
  max-width: 1100px;
  margin: 0 auto;
}
.cookie-banner.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.cookie-banner-inner{
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.cookie-banner-icon{
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px var(--sage-soft);
  /* мягкое покачивание иконки при появлении */
  animation: cookie-bob 2.4s ease-in-out 0.4s 2;
}
@keyframes cookie-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-3px) rotate(-6deg); }
  75%      { transform: translateY(-3px) rotate(6deg); }
}
.cookie-banner-text{
  flex: 1 1 360px;
  min-width: 0;
}
.cookie-banner-text strong{
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  margin-bottom: 5px;
  color: var(--moss-deep);
  letter-spacing: -0.01em;
}
.cookie-banner-text p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cookie-banner-text a{
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.cookie-banner-text a:hover{
  color: var(--moss-deep);
}
.cookie-banner-actions{
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-btn{
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease;
  white-space: nowrap;
  letter-spacing: .01em;
}
.cookie-btn:active{
  transform: scale(.97);
}
.cookie-btn-decline{
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}
.cookie-btn-decline:hover{
  background: var(--cream);
  border-color: var(--sage);
  color: var(--ink);
}
.cookie-btn-accept{
  background: var(--moss);
  color: var(--white);
  border-color: var(--moss);
  box-shadow: 0 4px 12px -4px rgba(45, 84, 70, .4);
}
.cookie-btn-accept:hover{
  background: var(--moss-deep);
  border-color: var(--moss-deep);
  box-shadow: 0 6px 16px -4px rgba(45, 84, 70, .5);
  transform: translateY(-1px);
}
.cookie-btn-accept:active{
  transform: translateY(0) scale(.97);
}

/* Планшеты — текст компактнее, иконка чуть меньше */
@media (max-width: 900px){
  .cookie-banner{
    padding: 20px 22px;
  }
  .cookie-banner-inner{
    gap: 18px;
  }
  .cookie-banner-icon{
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .cookie-banner-text strong{
    font-size: 17px;
  }
}

/* Мобильные — вертикальная компоновка, кнопки в две колонки */
@media (max-width: 600px){
  .cookie-banner{
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 18px 18px 16px;
    border-radius: var(--radius);
  }
  .cookie-banner-inner{
    gap: 14px;
  }
  .cookie-banner-icon{
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
  .cookie-banner-text{
    flex: 1 1 100%;
  }
  .cookie-banner-text strong{
    font-size: 16px;
  }
  .cookie-banner-text p{
    font-size: 13.5px;
  }
  .cookie-banner-actions{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .cookie-btn{
    padding: 12px 14px;
    font-size: 14px;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition: opacity .2s linear; transform: none; }
  .cookie-banner-icon{ animation: none; }
}