/* ============================================================
   SELF-HOSTED FONTS  (variable fonts)
============================================================ */
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/Sora-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   CSS CUSTOM PROPERTIES
============================================================ */
:root {
  color-scheme: light;

  --clr-primary:       #16a57c;
  --clr-primary-dark:  #0d7a5c;
  --clr-primary-deep:  #083d2e;
  --clr-primary-light: #d1f5ea;
  --clr-primary-tint:  #edfaf5;
  --clr-accent:        #ff6b35;
  --clr-accent-light:  #fff0eb;

  --clr-bg:     #f2f0eb;
  --clr-card:   #ffffff;
  --clr-text:   #1c1c2e;
  --clr-muted:  #6b7280;
  --clr-border: #e5e0d8;
  --clr-row-alt:#f8faf9;

  /* themeable surfaces / text that flip in dark mode (see DARK MODE below) */
  --clr-navbar: rgba(255,255,255,.95);
  --clr-fade:   rgba(255,255,255,.85);
  --clr-disclaimer-text: #7a3520;

  --row-height:    58px;
  --header-height: 150px;
  --criteria-width: 215px;

  --radius:    16px;
  --radius-sm:  8px;
  --radius-xs:  5px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(22,165,124,.13);
}

/* ============================================================
   RESET & BASE
============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:"Nunito Sans",sans-serif;
  background:var(--clr-bg);
  color:var(--clr-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }

/* ============================================================
   NAVBAR
============================================================ */
.navbar {
  position:sticky; top:0; z-index:200;
  background:var(--clr-navbar);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--clr-border);
}
.navbar__inner {
  max-width:1440px; margin:0 auto; padding:0 2rem;
  height:62px; display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
}
.logo {
  display:flex; align-items:center; gap:.6rem;
  font-family:"Sora",sans-serif; font-weight:800; font-size:1.1rem;
  color:var(--clr-primary-dark);
}
.logo__img {
  height:34px; width:auto; flex-shrink:0;
}
.logo--header-img, .logo--footer-img {
  display:inline-flex; align-items:center;
}
.logo__img--footer {
  height:38px; width:auto; flex-shrink:0;
}
.logo__img--header {
  height:34px; width:auto; flex-shrink:0;
}
/* header wordmark: the default has black text, so swap to the light
   wordmark in dark mode (footer already uses the light one) */
.logo__img--dark { display:none; }
:root[data-theme="dark"] .logo__img--light { display:none; }
:root[data-theme="dark"] .logo__img--dark  { display:inline-block; }
.nav__links { display:flex; gap:2rem; list-style:none; align-items:center; }
.nav__item { position:relative; }
.nav__link {
  display:inline-flex; align-items:center; gap:.32rem;
  font-family:inherit; font-size:.875rem; font-weight:600; color:var(--clr-muted);
  background:none; border:none; padding:0; cursor:pointer;
  transition:color .2s;
}
.nav__link:hover,.nav__link.active { color:var(--clr-primary); }
.nav__caret {
  width:6px; height:6px; flex-shrink:0;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .2s;
}
.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu:focus-within .nav__caret,
.nav__item--has-menu.is-open .nav__caret { transform:translateY(0) rotate(225deg); }

/* dropdown menu */
.nav__menu {
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(4px);
  min-width:210px; list-style:none; margin:0; padding:.4rem;
  background:var(--clr-card); border:1px solid var(--clr-border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
/* invisible hover bridge so the gap doesn't drop the menu */
.nav__item--has-menu::after {
  content:""; position:absolute; left:0; right:0; top:100%; height:12px;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu,
.nav__item--has-menu.is-open .nav__menu {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(8px);
}
.nav__menu li { list-style:none; }
.nav__menu a {
  display:block; padding:.5rem .7rem; border-radius:var(--radius-xs);
  font-size:.85rem; font-weight:600; color:var(--clr-text); white-space:nowrap;
  transition:background .15s, color .15s;
}
.nav__menu a:hover,.nav__menu a.active { background:var(--clr-primary-tint); color:var(--clr-primary-dark); }
.nav__cta {
  background:var(--clr-primary); color:white;
  font-size:.8rem; font-weight:700; padding:.5rem 1.1rem;
  border-radius:100px; transition:background .2s,transform .15s;
}
.nav__cta:hover { background:var(--clr-primary-dark); transform:translateY(-1px); }

/* mobile hamburger — sits to the right of the theme switch in .nav__actions */
.nav__burger {
  display:none;                       /* shown only on mobile (see media query) */
  align-items:center; justify-content:center;
  width:38px; height:38px; padding:0;
  border:none; background:none; cursor:pointer;
  border-radius:8px; color:var(--clr-text);
  transition:background .2s;
}
.nav__burger:hover { background:var(--clr-row-alt); }
.nav__burger-box { position:relative; display:block; width:20px; height:14px; }
.nav__burger-inner,
.nav__burger-inner::before,
.nav__burger-inner::after {
  position:absolute; left:0; width:20px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav__burger-inner { top:6px; }                       /* middle bar (box is 14px tall) */
.nav__burger-inner::before { content:""; top:-6px; }  /* top bar */
.nav__burger-inner::after  { content:""; top:6px; }   /* bottom bar */
.navbar.is-menu-open .nav__burger-inner { background:transparent; }
.navbar.is-menu-open .nav__burger-inner::before { top:0; transform:rotate(45deg); }
.navbar.is-menu-open .nav__burger-inner::after  { top:0; transform:rotate(-45deg); }

@media(max-width:768px){
  .nav__cta { display:none; }
  .nav__burger { display:inline-flex; }

  /* nav links collapse into a full-width dropdown panel below the bar */
  .nav__links {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem .75rem .75rem;
    background:var(--clr-card);
    border-bottom:1px solid var(--clr-border);
    box-shadow:var(--shadow-md);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .navbar.is-menu-open .nav__links {
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .nav__item { width:100%; }
  .nav__link {
    width:100%; justify-content:space-between;
    padding:.85rem .6rem; font-size:1rem; border-radius:var(--radius-xs);
  }
  .nav__link:hover, .nav__link.active { background:var(--clr-primary-tint); }

  /* dropdowns become inline accordions (tap the toggle to expand) */
  .nav__item--has-menu::after { content:none; }     /* drop the hover bridge */
  .nav__menu {
    position:static; transform:none; min-width:0;
    margin:0 0 .35rem; padding:.1rem 0 .1rem .85rem;
    background:none; border:none; box-shadow:none;
    display:none; opacity:1; visibility:visible; pointer-events:auto;
  }
  .nav__item--has-menu.is-open .nav__menu { display:block; transform:none; }
  .nav__menu a { padding:.6rem .6rem; font-size:.95rem; }

  /* only an open accordion rotates its caret (no hover/focus open on touch) */
  .nav__item--has-menu:hover .nav__caret,
  .nav__item--has-menu:focus-within .nav__caret { transform:translateY(-2px) rotate(45deg); }
  .nav__item--has-menu.is-open .nav__caret { transform:translateY(0) rotate(225deg); }
}

/* ============================================================
   HERO
============================================================ */
.hero {
  background:linear-gradient(140deg,var(--clr-primary-deep) 0%,#115c44 55%,#1c7a5a 100%);
  padding:5rem 2rem 4rem; position:relative; overflow:hidden;
}
.hero__glow { position:absolute; inset:0; pointer-events:none; }
.hero__glow::before {
  content:""; position:absolute; top:-120px; right:-100px;
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(255,107,53,.18) 0%,transparent 65%);
}
.hero__glow::after {
  content:""; position:absolute; bottom:-200px; left:-80px;
  width:500px; height:500px;
  background:radial-gradient(circle,rgba(22,165,124,.25) 0%,transparent 65%);
}
.hero__inner { max-width:1440px; margin:0 auto; position:relative; z-index:1; }
.hero__badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,107,53,.15); border:1px solid rgba(255,107,53,.35);
  color:#ffac88; font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.3rem .9rem; border-radius:100px; margin-bottom:1.5rem;
}
.hero h1 {
  font-family:"Sora",sans-serif;
  font-size:clamp(2rem,4.5vw,3.4rem); font-weight:800;
  line-height:1.15; color:white; max-width:680px; margin-bottom:1rem;
}
.hero h1 em { font-style:normal; color:#5ee4b4; }
.hero__sub {
  color:rgba(255,255,255,.65); font-size:1.05rem;
  max-width:520px; margin-bottom:2.5rem;
}
.hero__stats { display:flex; flex-wrap:wrap; gap:2.5rem; }
.hero__stat strong {
  display:block; font-family:"Sora",sans-serif; font-size:2rem;
  font-weight:700; color:#5ee4b4; line-height:1; margin-bottom:.25rem;
}
.hero__stat span {
  font-size:.8rem; color:rgba(255,255,255,.55); font-weight:500;
  text-transform:uppercase; letter-spacing:.05em;
}
@media(max-width:480px){
  .hero{ padding:3rem 1.25rem 2.5rem; }
  .hero__stats{ gap:1.5rem; }
}

/* ============================================================
   DISCLAIMER
============================================================ */
.disclaimer {
  background:var(--clr-accent-light);
  border-left:4px solid var(--clr-accent);
  padding:.8rem 2rem; font-size:.82rem; color:var(--clr-disclaimer-text); line-height:1.5;
}
.disclaimer__inner { max-width:1440px; margin:0 auto; }

/* ============================================================
   PAGE SECTIONS
============================================================ */
.section { padding:4rem 2rem; }
.section--tight { padding:2rem 2rem 4rem; }
.section--white {
  background:var(--clr-card);
  border-top:1px solid var(--clr-border);
  border-bottom:1px solid var(--clr-border);
}
.section--dark { background:var(--clr-primary-deep); color:rgba(255,255,255,.75); }
.section__inner { max-width:1440px; margin:0 auto; }
.section__label {
  font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--clr-primary); margin-bottom:.4rem;
}
.section--dark .section__label { color:#5ee4b4; }
.section__title {
  font-family:"Sora",sans-serif;
  font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700;
  color:var(--clr-text); margin-bottom:.5rem;
}
.section--dark .section__title { color:white; }
.section__desc { font-size:.95rem; color:var(--clr-muted); max-width:560px; }
.section--dark .section__desc { color:rgba(255,255,255,.55); }
.section__head { margin-bottom:2rem; }

/* ============================================================
   CTA BANNER  (used on home + about)
============================================================ */
.cta-banner {
  background:linear-gradient(140deg,var(--clr-primary-deep),#115c44);
  border-radius:var(--radius); padding:3rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:2rem; position:relative; overflow:hidden;
}
.cta-banner::before {
  content:""; position:absolute; top:-80px; right:-60px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,53,.18) 0%,transparent 70%);
}
.cta-banner__text { position:relative; z-index:1; }
.cta-banner__text h2 {
  font-family:"Sora",sans-serif;
  font-size:clamp(1.4rem,3vw,1.9rem); font-weight:800; color:white; margin-bottom:.5rem;
}
.cta-banner__text h2 em { font-style:normal; color:#5ee4b4; }
.cta-banner__text p { color:rgba(255,255,255,.6); font-size:.95rem; }
.cta-banner__btn {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--clr-accent); color:white;
  font-family:"Sora",sans-serif; font-size:.9rem; font-weight:700;
  padding:.85rem 1.75rem; border-radius:100px; transition:all .2s;
  position:relative; z-index:1; white-space:nowrap;
}
.cta-banner__btn:hover {
  background:#e5571f; transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,107,53,.4);
}

/* ============================================================
   FOOTER
============================================================ */
footer {
  background:var(--clr-primary-deep); color:rgba(255,255,255,.55);
  padding:3.5rem 2rem 2rem; font-size:.85rem;
}
.footer__inner { max-width:1440px; margin:0 auto; }
.footer__top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
  padding-bottom:2.5rem; margin-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer__brand .logo { color:#5ee4b4; margin-bottom:.85rem; display:inline-flex; }
.footer__brand p { line-height:1.7; max-width:340px; font-size:.82rem; }
.footer__col h4 { font-weight:700; color:white; font-size:.88rem; margin-bottom:.85rem; }
.footer__col ul { list-style:none; }
.footer__col ul li { margin-bottom:.45rem; }
.footer__col ul a { color:rgba(255,255,255,.45); transition:color .2s; font-size:.82rem; }
.footer__col ul a:hover { color:#5ee4b4; }
.footer__bottom {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.75rem; font-size:.78rem;
}
@media(max-width:1100px){ .footer__top{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }
@media(max-width:640px){
  .footer__top{ grid-template-columns:1fr 1fr; gap:1.5rem; }
  .footer__brand{ grid-column:1/-1; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .section{ padding:2.5rem 1.25rem; }
  .disclaimer{ padding:.8rem 1.25rem; }
}

/* ============================================================
   SCROLL-TRIGGERED FADE-IN
============================================================ */
.js-fade {
  opacity:0; transform:translateY(20px);
  transition:opacity .5s ease, transform .5s ease;
}
.js-fade.is-visible { opacity:1; transform:translateY(0); }

/* ============================================================
   HERO ENTRANCE ANIMATIONS
============================================================ */
@keyframes fadeUp {
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:translateY(0); }
}
.anim   { animation:fadeUp .6s ease both; }
.anim-1 { animation-delay:.05s; }
.anim-2 { animation-delay:.15s; }
.anim-3 { animation-delay:.25s; }
.anim-4 { animation-delay:.35s; }

/* ============================================================
   THEME TOGGLE  (System / Hell / Dunkel)
   ------------------------------------------------------------
   Lives in the navbar right group (.nav__actions) so it stays
   visible on mobile, where .nav__links / .nav__cta are hidden.
============================================================ */
.nav__actions { display:flex; align-items:center; gap:.65rem; }

.theme-toggle { position:relative; }
.theme-toggle__btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.45rem; border-radius:8px; line-height:1;
  border:none; background:none; color:var(--clr-muted);
  cursor:pointer; transition:background .2s, color .2s;
}
.theme-toggle__btn:hover { background:var(--clr-row-alt); color:var(--clr-text); }
/* Header button shows only the icon matching the active choice */
.theme-toggle__icon { width:18px; height:18px; display:none; }
.theme-toggle[data-choice="light"]  .theme-toggle__icon--light,
.theme-toggle[data-choice="dark"]   .theme-toggle__icon--dark,
.theme-toggle[data-choice="system"] .theme-toggle__icon--system { display:block; }

.theme-menu {
  position:absolute; top:100%; right:0; transform:translateY(4px);
  min-width:172px; list-style:none; margin:0; padding:.4rem;
  background:var(--clr-card); border:1px solid var(--clr-border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:300;
}
.theme-toggle.is-open .theme-menu {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(8px);
}
.theme-menu li { list-style:none; }
.theme-menu__item {
  display:flex; align-items:center; gap:.55rem; width:100%;
  padding:.5rem .6rem; border-radius:var(--radius-xs);
  font-family:inherit; font-size:.85rem; font-weight:600; color:var(--clr-text);
  background:none; border:none; text-align:left; cursor:pointer;
  transition:background .15s, color .15s;
}
.theme-menu__item:hover { background:var(--clr-primary-tint); color:var(--clr-primary-dark); }
.theme-menu__ico { width:16px; height:16px; flex-shrink:0; }
.theme-menu__item[aria-checked="true"] { color:var(--clr-primary-dark); }
.theme-menu__item[aria-checked="true"]::after {
  content:"\2713"; margin-left:auto; font-weight:800; color:var(--clr-primary);
}

/* ============================================================
   DARK MODE
   ------------------------------------------------------------
   The inline boot script in each page's <head> resolves the
   stored choice (system | light | dark) to an effective value
   and sets data-theme="light"|"dark" BEFORE first paint, so
   there is no flash. "system" follows the OS via that script
   plus a matchMedia listener in site.js — that is why a single
   [data-theme="dark"] block is enough here.
   Brand greens / accent orange stay; only neutrals + tints flip.
============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* brightened so green text/icons keep contrast on dark surfaces */
  --clr-primary-dark:  #3dd4a6;

  --clr-primary-light: rgba(22,165,124,.32);
  --clr-primary-tint:  rgba(22,165,124,.13);
  --clr-accent-light:  rgba(255,107,53,.13);

  --clr-bg:     #13161b;
  --clr-card:   #1b1f26;
  --clr-text:   #e7e9ee;
  --clr-muted:  #9aa1ad;
  --clr-border: #2c3139;
  --clr-row-alt:#222831;

  --clr-navbar: rgba(19,22,27,.92);
  --clr-fade:   rgba(27,31,38,.92);
  --clr-disclaimer-text: #f0b89c;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.45);
  --shadow-md: 0 4px 16px rgba(0,0,0,.55);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
}
/* keep the CTA's hover darker (not brighter) so white text stays legible */
:root[data-theme="dark"] .nav__cta:hover { background:#0d7a5c; }