/* Helmont brand layer on top of Bootstrap 5.3
   Tokens follow the Helmont Brand Identity guide. */
:root {
  --h-deep: #073A1C;
  --h-forest: #0B5229;
  --h-leaf: #5BA22E;
  --h-leaf-dark: #4C8A25;
  --h-leaf-pale: #DCEBD0;
  --h-mint: #F2F7F1;
  --h-teal: #1E6B66;
  --h-lime: #9ED163;
  --h-ink: #142019;
  --h-ink-2: #4E5E55;
  --h-line: #D5E2D6;

  --f-wordmark: 'Montserrat', 'Arial Black', sans-serif;
  --f-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --f-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --bs-body-font-family: var(--f-body);
  --bs-body-color: var(--h-ink);
  --bs-body-bg: #fff;
  --bs-link-color: var(--h-teal);
  --bs-link-color-rgb: 30, 107, 102;
  --bs-link-hover-color: var(--h-forest);
  --bs-link-hover-color-rgb: 11, 82, 41;
  --bs-border-color: var(--h-line);
}

body { font-size: 1.0625rem; line-height: 1.65; }
h1, h2, h3, .section-title { font-family: var(--f-display); text-wrap: balance; }

.skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }

/* Buttons */
.btn-leaf {
  --bs-btn-color: #fff; --bs-btn-bg: var(--h-leaf); --bs-btn-border-color: var(--h-leaf);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--h-leaf-dark); --bs-btn-hover-border-color: var(--h-leaf-dark);
  --bs-btn-active-bg: var(--h-forest); --bs-btn-active-border-color: var(--h-forest);
  --bs-btn-focus-shadow-rgb: 91, 162, 46;
  font-weight: 600;
}
.btn-outline-light { font-weight: 600; }

/* Brand lockup */
.brand-lockup { display: inline-flex; align-items: center; gap: .75rem; color: var(--h-forest); }
.wordmark { display: grid; line-height: 1; }
.wordmark-name { font-family: var(--f-wordmark); font-weight: 900; font-size: 1.6rem; letter-spacing: .02em; color: var(--h-forest); }
.wordmark-tag { font-weight: 600; font-size: .68rem; color: #1E7A35; margin-top: .3rem; }
.brand-lockup--reverse .wordmark-name { color: #fff; }
.brand-lockup--reverse .wordmark-tag { color: var(--h-lime); }
@media (max-width: 420px) {
  .wordmark-name { font-size: 1.3rem; }
  .wordmark-tag { font-size: .56rem; }
  .site-header .btn { padding-inline: 1rem !important; font-size: .9rem; }
}

/* Header */
.site-header { background: #fff; border-bottom: 1px solid var(--h-line); position: sticky; top: 0; z-index: 50; }
.site-header .navbar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }

/* Hero */
.hero { background: radial-gradient(120% 140% at 100% 100%, rgba(91,162,46,.35) 0%, rgba(91,162,46,0) 55%), var(--h-deep); color: #fff; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.badge-reg { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--h-lime); border: 1px solid rgba(158,209,99,.45); border-radius: 999px; padding: .4rem .9rem; }
.hero-title { font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 4.2rem); line-height: 1.05; letter-spacing: -.01em; }
.text-lime { color: var(--h-lime); }
.hero-lead { color: #D3E4D8; max-width: 62ch; font-size: 1.1rem; }
.hero-mark { opacity: .95; max-width: 100%; height: auto; }

.notice { background: var(--h-leaf-pale); color: var(--h-deep); font-weight: 500; }

/* Sections */
.section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.section--mint { background: var(--h-mint); }
.eyebrow { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--h-leaf); margin-bottom: .5rem; }
.eyebrow--light { color: var(--h-lime); }
.section-title { font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--h-deep); }
.section-lead { color: var(--h-ink-2); max-width: 60ch; margin-top: .75rem; }
.sub-title { font-size: 1.25rem; font-weight: 700; color: var(--h-forest); }

/* Focus areas */
.fa-card { background: #fff; border: 1px solid var(--h-line); border-radius: 1rem; padding: 1.5rem; color: var(--h-ink-2); transition: border-color .2s, transform .2s; }
.fa-card:hover { border-color: var(--h-leaf); transform: translateY(-2px); }
.fa-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .75rem; background: var(--h-leaf-pale); color: var(--h-forest); font-size: 1.35rem; }
.fa-num { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--h-teal); margin: 1rem 0 .25rem; }
.fa-title { font-size: 1.25rem; font-weight: 700; color: var(--h-deep); margin-bottom: .5rem; }

/* Products */
.product-card { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--h-line); border-radius: .9rem; padding: 1.1rem 1.2rem; height: 100%; color: var(--h-ink-2); font-size: .97rem; }
.product-name { font-size: 1.1rem; font-weight: 700; color: var(--h-deep); margin-bottom: .25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tag-soon { font-family: var(--f-mono); font-size: .65rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; background: #E7F4D8; color: #33561A; border-radius: 999px; padding: .2rem .55rem; }
.product-url { font-family: var(--f-mono); font-size: .75rem; color: var(--h-teal); }

/* Registration */
.reg-list { display: grid; gap: 0; margin: 0; }
.reg-list > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; padding-block: .85rem; border-top: 1px solid var(--h-line); }
.reg-list > div:last-child { border-bottom: 1px solid var(--h-line); }
.reg-list dt { font-weight: 600; color: var(--h-ink-2); font-size: .95rem; }
.reg-list dd { margin: 0; color: var(--h-deep); font-weight: 500; }
@media (max-width: 575px) { .reg-list > div { grid-template-columns: 1fr; gap: .15rem; } }
.trustee-list li { display: grid; padding-block: .5rem; }
.trustee-list span { color: var(--h-ink-2); font-size: .95rem; }

.contact-card { background: var(--h-forest); color: #D3E4D8; border-radius: 1.25rem; padding: clamp(1.75rem, 4vw, 2.75rem); }
.contact-lead { margin: .75rem 0 1.75rem; }
.contact-row { display: flex; gap: 1rem; padding-block: 1rem; border-top: 1px solid rgba(255,255,255,.15); }
.contact-row > i { font-size: 1.3rem; color: var(--h-lime); }
.contact-label { display: block; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--h-lime); margin-bottom: .2rem; }
.contact-row a { color: #fff; font-weight: 600; word-break: break-word; }

/* Footer */
.site-footer { background: var(--h-deep); color: #B9CFC0; }
.site-footer .container-xxl, .hero .container-xxl, .section .container-xxl, .notice .container-xxl {
  padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right));
}
.footer-note { max-width: 40ch; }
.footer-label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--h-lime); margin-bottom: .5rem; }
.site-footer address { font-style: normal; }
.footer-link { color: #fff; }
.footer-rule { border-color: rgba(255,255,255,.15); opacity: 1; margin-block: 2rem 1.25rem; }
.footer-small { font-size: .85rem; }

:focus-visible { outline: 3px solid var(--h-lime); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fa-card { transition: none; } .fa-card:hover { transform: none; } }
