:root {
  --depth-shadow: 0 16px 38px rgba(54, 47, 29, .10);
  --depth-shadow-hover: 0 22px 42px rgba(54, 47, 29, .15);
  --tea-deep: #344b37;
  --tea-leaf: #738665;
}

body {
  background-image: radial-gradient(ellipse at 8% 12%, rgba(220, 213, 185, .20), transparent 32%),
                    radial-gradient(ellipse at 92% 48%, rgba(207, 218, 192, .18), transparent 30%);
}

.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 30px 0 20px;
  padding: 48px 28px 40px;
  border: 1px solid rgba(112, 105, 79, .16);
  border-bottom: 1px solid rgba(112, 105, 79, .16);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,252,.98), rgba(242,239,226,.96));
  box-shadow: var(--depth-shadow), inset 0 1px 0 rgba(255,255,255,.95);
}
.intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 380px;
  height: 220px;
  right: -70px;
  top: -105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 202, 139, .26), transparent 70%);
}

.hero {
  gap: 16px;
  margin-top: 24px;
}
.hero > article {
  min-width: 0;
  padding: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(112, 105, 79, .14) !important;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,252,.96), rgba(245,242,232,.96));
  box-shadow: 0 12px 28px rgba(54, 47, 29, .08), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero > article:hover {
  transform: translateY(-4px);
  box-shadow: var(--depth-shadow-hover);
}
.hero > .panel {
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(25, 28, 20, .19), inset 0 1px 0 rgba(255,255,255,.08);
}

.ph {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 8px 18px rgba(42, 43, 33, .10);
}
.ph.tall { border-radius: 18px; }

h2.sec {
  position: relative;
  padding: 18px 20px 14px;
  border: 1px solid rgba(112, 105, 79, .13);
  border-top: 4px solid var(--tea-deep);
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(255,255,251,.95), rgba(241,238,226,.92));
  box-shadow: 0 9px 22px rgba(54, 47, 29, .07), inset 0 1px 0 #fff;
}

.dark {
  position: relative;
  isolation: isolate;
  max-width: 1260px;
  margin: 58px auto;
  overflow: hidden;
  border-radius: 30px;
  background: radial-gradient(ellipse at 82% 12%, rgba(199, 174, 104, .18), transparent 28%),
              linear-gradient(145deg, #344536, #26352a 72%, #202d24);
  box-shadow: 0 22px 48px rgba(35, 47, 36, .19), inset 0 1px 0 rgba(255,255,255,.08);
}
.dark h2 {
  padding: 18px 18px 14px;
  border-top-color: #c9ae68;
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
}
.tl { gap: 14px; }
.tl > div {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 24px rgba(0,0,0,.10);
}

.steps { gap: 16px; }
.steps > div {
  padding: 14px;
  border: 1px solid rgba(112, 105, 79, .14) !important;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,252,.98), rgba(241,238,226,.94));
  box-shadow: 0 10px 24px rgba(54, 47, 29, .08), inset 0 1px 0 #fff;
  transition: transform .22s ease, box-shadow .22s ease;
}
.steps > div:hover { transform: translateY(-3px); box-shadow: var(--depth-shadow); }

.grid { gap: 18px; }
.grid > *, .grid > :nth-child(4n) {
  padding: 12px;
  border: 1px solid rgba(112, 105, 79, .13) !important;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(255,255,252,.98), rgba(243,240,230,.96));
  box-shadow: 0 9px 22px rgba(54, 47, 29, .07), inset 0 1px 0 #fff;
  transition: transform .22s ease, box-shadow .22s ease;
}
.grid > *:hover { transform: translateY(-4px); box-shadow: var(--depth-shadow-hover); }
.grid .ph { border-radius: 13px; }
.pi { transition: background .2s ease, transform .2s ease; }
.pi:hover { transform: translateX(3px); background: rgba(255,255,255,.055); }

.rv { gap: 14px; }
.rv > div {
  padding: 18px;
  border: 1px solid rgba(112, 105, 79, .13) !important;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,252,.98), rgba(242,239,228,.95));
  box-shadow: 0 10px 24px rgba(54, 47, 29, .07), inset 0 1px 0 #fff;
}

.cta2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 48px 24px;
  border: 1px solid rgba(112, 105, 79, .12);
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.95), rgba(238,234,216,.40) 70%, transparent 100%);
}
.cta2::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(860px, 91%);
  height: calc(100% - 20px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(153, 132, 75, .18);
  border-radius: 48px;
  background: linear-gradient(135deg, #f7edcf 0%, #e9dfbd 54%, #d9c99b 100%);
  box-shadow: 0 18px 36px rgba(79, 66, 34, .16), inset 0 1px 0 rgba(255,255,255,.92);
}
.cta2 h2, .cta2 a { position: relative; z-index: 1; }
.cta2 a {
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(25, 28, 20, .18), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta2 a:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(25,28,20,.22); }

.btn, .cta, .row button, .sub { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn:hover, .cta:hover, .row button:hover, .sub:hover { transform: translateY(-2px); filter: brightness(1.03); }

@media (max-width: 860px) {
  .dark { margin: 42px 14px; border-radius: 24px; }
  .tl, .steps { gap: 12px; }
  .grid { gap: 14px; }
}
@media (max-width: 600px) {
  .intro { padding: 30px 18px 26px; border-radius: 20px; }
  .hero { gap: 12px; }
  .hero > article { padding: 14px !important; border-radius: 18px; }
  h2.sec { padding: 14px 14px 12px; border-radius: 12px; }
  .dark { margin: 36px 8px; border-radius: 20px; }
  .tl { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid > * { padding: 8px; border-radius: 14px; }
  .rv { gap: 10px; }
  .rv > div { padding: 14px; }
  .cta2 { padding: 34px 14px; border-radius: 20px; }
  .cta2::before { width: 94%; height: calc(100% - 12px); border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}