/* Organic theme for the landing page: the same sunlit, painted farm as the
   app — parchment with a paper grain, the meadow and its hives in the hero,
   rounded type and honey buttons. Loaded after home.css; content and
   structure stay as they are. */

:root {
  --g: #2b6b47;
  --gd: #1e5b3c;
  --gl: #5f9a45;
  --g0: #edf3e2;
  --g00: #f7f2e4;
  --ink: #23271c;
  --muted: #5b5442;
  --line: #e2d4b4;
  --white: #fffaf0;
  --bg: #fbf4e4;
  --honey: #f4a51c;
  --honey-ink: #3a2405;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.29 0 0 0 0 0.12 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --display: 'Fredoka', 'Noto Sans Armenian', system-ui, sans-serif;
  --text: 'Nunito Sans', 'Noto Sans Armenian', system-ui, sans-serif;
}

body {
  font-family: var(--text);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(255, 206, 110, 0.3), transparent 62%),
    var(--paper-grain),
    #f4ecda;
  background-attachment: fixed;
}

body::before {
  background: linear-gradient(90deg, #b07c48, #f4a51c 50%, #b07c48);
}

h1,
h2,
h3,
.hero h1,
.section h2,
.card-invest h3,
.wl-title,
.step h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0;
}

html[lang='hy'] .hero h1,
html[lang='hy'] .section h2 {
  font-family: 'Noto Sans Armenian', var(--display);
  font-weight: 700;
}

/* ── Nav: parchment under glass ─────────────────────────────────────── */
nav {
  background: rgba(251, 245, 232, 0.88);
  border-bottom-color: rgba(96, 64, 26, 0.12);
}

.nav-links a {
  font-weight: 700;
}

.nav-pill {
  background: linear-gradient(180deg, #ffd26a, #f4a51c) !important;
  color: var(--honey-ink) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 #b06f0c;
  font-family: var(--display);
}

.nav-pill:hover {
  background: linear-gradient(180deg, #ffd97e, #f6ae30) !important;
}

/* The quieter of the two: cream with a wooden edge. */
.nav-pill.nav-pill-outline {
  background: #fffaf0 !important;
  color: var(--gd) !important;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--line);
}

.nav-pill.nav-pill-outline:hover {
  background: #fff3d6 !important;
}

/* ── Hero: the real meadow at dawn ──────────────────────────────────── */
.hero {
  min-height: 94vh;
  padding: 72px 24px 210px;
  background:
    radial-gradient(46% 42% at 50% 44%, rgba(16, 30, 16, 0.5), transparent 75%),
    linear-gradient(180deg, rgba(20, 38, 22, 0.62) 0%, rgba(24, 44, 26, 0.38) 38%, rgba(30, 50, 28, 0.08) 70%, rgba(244, 236, 218, 0) 100%),
    url('/assets/scene/meadow-landscape@2x.webp') center 62% / cover no-repeat,
    #6f8f4f;
}

.hero::before,
.hero-bg-logo {
  display: none;
}

/* Fade the meadow into the paper below. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(244, 236, 218, 0), #f4ecda);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero h1 {
  color: #fffaf0;
  text-shadow: 0 2px 0 rgba(30, 20, 5, 0.25), 0 10px 30px rgba(10, 20, 8, 0.45);
}

.hero h1 span {
  background: linear-gradient(180deg, #ffe7a0 10%, #ffc23a 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 10px rgba(10, 20, 8, 0.45));
}

.hero-sub {
  color: rgba(255, 250, 240, 0.92);
  text-shadow: 0 1px 12px rgba(10, 20, 8, 0.55);
}

.hero-eyebrow {
  background: rgba(255, 250, 240, 0.16);
  border-color: rgba(255, 250, 240, 0.35);
  color: #fff3d0;
  text-transform: none;
  letter-spacing: 0;
  backdrop-filter: blur(8px);
}

.btn-primary {
  background: linear-gradient(180deg, #ffd26a 0%, #f4a51c 100%);
  color: var(--honey-ink);
  font-family: var(--display);
  font-weight: 600;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 4px 0 #b06f0c, 0 14px 24px -12px rgba(150, 90, 0, 0.7);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #ffd97e 0%, #f6ae30 100%);
  color: var(--honey-ink);
}

.btn-primary:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 1px 0 #b06f0c;
}

.btn-ghost {
  background: rgba(18, 34, 18, 0.42);
  border-color: rgba(255, 250, 240, 0.5);
  color: #fffaf0;
  font-family: var(--display);
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  background: rgba(18, 34, 18, 0.58);
  color: #fff;
}

.hero-account,
.hero-account a {
  color: #fffaf0;
  text-shadow: 0 1px 8px rgba(10, 20, 8, 0.6);
}

/* Stats on a strip of parchment. */
.hero-stats {
  background: var(--paper-grain), rgba(255, 250, 240, 0.92);
  border: 1px solid rgba(96, 64, 26, 0.12);
  box-shadow: 0 3px 0 rgba(96, 64, 26, 0.1), 0 20px 40px -18px rgba(30, 20, 5, 0.55);
  backdrop-filter: blur(6px);
}

.hstat {
  border-right-color: rgba(96, 64, 26, 0.12);
}

.hstat-n {
  font-family: var(--display);
  font-weight: 600;
  color: var(--gd);
}

.hstat-l {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.hero-hives {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 5vw, 70px);
  pointer-events: none;
}

.hero-hives img {
  display: block;
  width: clamp(70px, 8vw, 118px);
  height: auto;
  filter: drop-shadow(0 12px 10px rgba(30, 20, 5, 0.35));
}

.hero-hives .hh-2 img,
.hero-hives .hh-3 img {
  width: clamp(84px, 9.5vw, 138px);
}

/* ── Sections: stories on paper ─────────────────────────────────────── */
.section {
  background: transparent;
}

.eyebrow,
.eyebrow-green {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #9a5f00;
}

.eyebrow::before,
.eyebrow-green::before {
  background: var(--honey);
}

.section-sub {
  color: var(--muted);
}

.step,
.asset-card,
.faq-item,
.card:not(.card-invest) {
  background: var(--paper-grain), #fffaf0;
  border: 1px solid rgba(96, 64, 26, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 0 rgba(96, 64, 26, 0.06), 0 18px 32px -20px rgba(96, 64, 26, 0.4);
}

.step {
  border-top: 1px solid rgba(96, 64, 26, 0.12);
}

.step:hover,
.asset-card:hover {
  transform: translateY(-3px);
}

/* Step numbers sit in wax cells of the comb. */
.step-num {
  border-radius: 0;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
  background: linear-gradient(160deg, #ffd25e, #f2a01a);
  color: var(--honey-ink);
  font-family: var(--display);
  font-weight: 600;
}

.asset-icon {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 30%, #fff, #f3e6c6);
  border: 1px solid rgba(96, 64, 26, 0.1);
  font-size: 0;
}

.asset-icon-art {
  background: radial-gradient(circle at 50% 70%, #e9f0d6, #d4e3b4);
  overflow: hidden;
}

.asset-icon-art img {
  display: block;
  width: 86%;
  height: auto;
  margin-top: 10%;
}

/* The live asset: a sunlit forest card, honey call to action. */
.asset-card-live {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(244, 165, 28, 0.22), transparent 55%),
    var(--paper-grain),
    linear-gradient(165deg, #1f5e3d 0%, #0e3823 100%);
  border-color: transparent;
}

.asset-cta {
  background: linear-gradient(180deg, #ffd26a, #f4a51c) !important;
  color: var(--honey-ink) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 #b06f0c;
  font-family: var(--display);
}

.asset-badge {
  background: #f3e6c6;
  color: #6a3f00;
}

.asset-badge-live {
  background: rgba(255, 210, 106, 0.2);
  color: #ffe29a;
}

/* A window onto the farm between the stories. */
.farm-band {
  position: relative;
  max-width: 980px;
  height: 260px;
  margin: 24px auto;
  border-radius: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(18px, 6vw, 80px);
  padding-bottom: 26px;
  background: url('/assets/scene/meadow-landscape@2x.webp') center 70% / cover no-repeat;
  box-shadow: inset 0 0 0 4px rgba(255, 250, 240, 0.55), 0 24px 44px -24px rgba(60, 40, 10, 0.55);
  overflow: hidden;
}

.farm-band img {
  display: block;
  width: clamp(70px, 9vw, 112px);
  height: auto;
  filter: drop-shadow(0 10px 8px rgba(30, 20, 5, 0.35));
}

/* ── Investor and reserve cards ─────────────────────────────────────── */
.card-invest {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(244, 165, 28, 0.18), transparent 55%),
    var(--paper-grain),
    linear-gradient(165deg, #1f5e3d 0%, #0b301e 100%);
}

.card-invest .eyebrow {
  color: #ffd26a;
}

.card-invest .card-sub {
  color: rgba(255, 250, 240, 0.72);
}

.inv-submit,
.wl-submit,
.card-cta {
  background: linear-gradient(180deg, #ffd26a, #f4a51c) !important;
  color: var(--honey-ink) !important;
  font-family: var(--display);
  font-weight: 600;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 #b06f0c;
}

.wl-input,
.wl-select,
.wl-textarea {
  background: #fbf4e4;
  border-color: var(--line);
  box-shadow: inset 0 2px 3px rgba(96, 64, 26, 0.08);
}

/* ── FAQ and footer ─────────────────────────────────────────────────── */
.faq-item summary {
  font-family: var(--display);
  font-weight: 600;
}

footer {
  background:
    repeating-linear-gradient(94deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 26px),
    var(--paper-grain),
    linear-gradient(175deg, #1f4f33 0%, #0e2c1c 100%);
}

.f-tagline {
  color: #ffd26a;
  font-family: var(--display);
  font-style: normal;
}

.f-right p,
.f-right a {
  color: rgba(255, 250, 240, 0.7);
}

@media (max-width: 640px) {
  .hero {
    padding-bottom: 170px;
    background:
      linear-gradient(180deg, rgba(20, 38, 22, 0.66) 0%, rgba(24, 44, 26, 0.42) 45%, rgba(30, 50, 28, 0.1) 80%, rgba(244, 236, 218, 0) 100%),
      url('/assets/scene/meadow-portrait@2x.webp') center bottom / cover no-repeat,
      #6f8f4f;
  }

  .hero-hives {
    bottom: 30px;
  }

  .farm-band {
    height: 200px;
    margin-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .step:hover,
  .asset-card:hover {
    transform: none;
  }
}