:root {
  --birmol: #4f2776;
  --birmol-deep: #3d1a60;
  --birmol-soft: #efebfb;
  --agro-bg: #f4f1e8;
  --agro-text: #2f4a32;
  --agro-green: #649b23;
  --agro-lime: #b4d016;
  --ink: #241834;
  --muted: #6b6676;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root { --agro-bg: #182018; --agro-text: #e6e3d6; --agro-green: #7fb23b; --ink: #e8e3f1; --muted: #a39cae; }
  body { background: #15111c; }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100dvh;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; color: var(--ink); background: #fbfaff;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--agro-lime); outline-offset: -6px; }

.top, .foot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem clamp(1.25rem, 4vw, 3rem); font-size: .875rem; color: var(--muted);
}
.top__name { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.5rem; color: var(--ink); }
.foot { font-size: .8125rem; flex-wrap: wrap; }

.split {
  flex: 1; display: flex; gap: clamp(.75rem, 1.5vw, 1.25rem);
  padding: 0 clamp(.75rem, 2vw, 1.5rem);
  min-height: 0;
}
.panel {
  flex: 1 1 0; position: relative; display: flex; align-items: flex-end;
  min-height: 520px; border-radius: 1.25rem; overflow: hidden; text-decoration: none;
  transition: flex-grow .6s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.panel__inner { position: relative; width: 100%; padding: clamp(1.75rem, 4vw, 3.5rem); }

/* Birmol */
.panel--birmol { background: var(--birmol); color: #fff; }
.panel--birmol .panel__mark {
  position: absolute; right: clamp(1.5rem, 5vw, 4rem); top: clamp(1.5rem, 5vw, 4rem);
  width: clamp(120px, 18vw, 220px); height: auto; color: #c2aef0; opacity: .9;
  transition: transform .6s var(--ease);
}
.panel--birmol .panel__brand, .panel--birmol .panel__title { font-family: 'Instrument Serif', Georgia, serif; }
.panel--birmol .panel__title em { color: #d9cff0; }
.panel--birmol .panel__keys { color: #d9cff0; }
.panel--birmol .panel__cta { background: #fff; color: var(--birmol); }

/* Agro */
.panel--agro { background: var(--agro-bg); color: var(--agro-text); border: 1px solid color-mix(in srgb, var(--agro-green) 25%, transparent); }
.panel--agro .panel__logo {
  position: absolute; right: clamp(1.5rem, 5vw, 4rem); top: clamp(1.5rem, 5vw, 4rem);
  width: clamp(130px, 18vw, 230px); height: auto;
  transition: transform .6s var(--ease);
}
.panel--agro .panel__brand, .panel--agro .panel__title { font-family: 'Zodiak', Georgia, serif; font-weight: 500; }
.panel--agro .panel__title em { color: var(--agro-green); }
.panel--agro .panel__keys { color: color-mix(in srgb, var(--agro-text) 75%, transparent); }
.panel--agro .panel__cta { background: var(--agro-green); color: #fff; }

/* Shared text */
.panel__brand { font-size: 1.25rem; opacity: .85; margin-bottom: .75rem; }
.panel__brand span { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .75rem; letter-spacing: .06em; }
.panel--agro .panel__brand span { font-family: 'Satoshi', sans-serif; }
.panel__title { font-size: clamp(2.25rem, 1rem + 3.4vw, 4.25rem); line-height: 1.02; letter-spacing: -.01em; max-width: 12ch; text-wrap: balance; }
.panel__keys {
  margin-top: 1.25rem; font-size: .9375rem; max-width: 38ch;
  opacity: .85; transform: translateY(0); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.panel__cta {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.75rem;
  min-height: 48px; padding: 0 1.5rem; border-radius: 999px; font-size: .9375rem; font-weight: 600;
  transition: gap .3s var(--ease);
}

@media (hover: hover) and (min-width: 861px) {
  .split:hover .panel { flex-grow: .85; }
  .split .panel:hover, .split .panel:focus-visible { flex-grow: 1.25; box-shadow: 0 18px 50px rgba(36, 24, 52, .18); }
  .panel:hover .panel__mark, .panel:hover .panel__logo { transform: scale(1.06) rotate(-2deg); }
  .panel:hover .panel__cta { gap: .9rem; }
}

@media (max-width: 860px) {
  .split { flex-direction: column; }
  .panel { min-height: 360px; }
  .panel__title { max-width: 14ch; }
  .top__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Layout: emblem on top, text at bottom */
.panel { align-items: stretch; }
.panel__inner { display: flex; flex-direction: column; align-items: flex-start; }
.panel--birmol .panel__mark, .panel--agro .panel__logo { position: static; margin-bottom: auto; padding-bottom: 2rem; }
.panel--birmol .panel__mark { width: clamp(90px, 10vw, 140px); }
.panel--agro .panel__logo { width: clamp(110px, 12vw, 170px); }
@media (max-width: 860px) {
  .panel--birmol .panel__mark { width: 80px; padding-bottom: 1.5rem; }
  .panel--agro .panel__logo { width: 96px; padding-bottom: 1.5rem; }
  .foot { flex-direction: column; align-items: flex-start; gap: .25rem; }
}
.panel--birmol .panel__mark { aspect-ratio: 48 / 40; height: auto; flex-shrink: 0; }
.panel--agro .panel__logo { flex-shrink: 0; }
@media (max-width: 860px) {
  .split { flex: none; }
  .panel { flex: none; min-height: 0; }
  .panel--birmol .panel__mark { width: 80px; height: 67px; }
  .foot { padding-top: 1.25rem; }
}