@font-face {
  font-family: "Open Runde";
  src: url("fonts/OpenRunde-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url("fonts/OpenRunde-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --background: #fff;
  --heading: #112b23;
  --text: #4c625a;
  --hero-text: #244f40;
  --surface: #f7f9f8;
  --border: #e8edea;
  --glass: rgb(255 255 255 / 0.72);
  --glass-border: rgb(255 255 255 / 0.65);
  --accent: #16794d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Open Runde", system-ui, sans-serif;
  background: var(--background);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.masthead {
  position: absolute;
  z-index: 1;
  top: 24px;
  left: 6%;
  width: 88%;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 8px 28px rgb(16 66 45 / 0.06);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--heading); font-weight: 700; font-size: 1.15rem; }
.brand img, .product-heading img { filter: brightness(0); }
.masthead-note { color: var(--hero-text); font-size: 0.85rem; }
.hero {
  padding: 175px 6% 85px;
  text-align: center;
  border-radius: 0 0 48px 48px;
  background: radial-gradient(ellipse at 90% 15%, rgb(56 246 240 / 0.45), transparent 75%),
    radial-gradient(ellipse at 10% 70%, rgb(0 196 255 / 0.25), transparent 70%),
    linear-gradient(155deg, #a1f494, #c4eed3 55%, #ebf8ed);
}
h1, h2 { color: var(--heading); }
.hero h1 { margin: 0; font-size: clamp(2.7rem, 6.5vw, 5.8rem); line-height: 1.04; letter-spacing: -0.055em; }
.hero p { max-width: 640px; margin: 28px auto 0; color: var(--hero-text); font-size: 1.08rem; line-height: 1.8; }
.product, .footer { width: min(1100px, 88%); margin-inline: auto; }
.product { margin-block: 56px; padding: 32px 36px; border: 1px solid var(--border); border-radius: 26px; background: var(--surface); }
.product-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.product h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.7rem; letter-spacing: -0.04em; }
.status { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--accent); font-size: 0.75rem; }
.product p { max-width: 760px; margin: 20px 0 0; font-size: 0.98rem; line-height: 1.8; }
.product .product-note { margin-top: 12px; font-size: 0.85rem; }
.footer { padding-block: 0 28px; }
.contact-details { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px 48px; border-top: 1px solid var(--border); padding-top: 28px; }
.footer h2 { font-size: 0.88rem; margin: 0 0 9px; letter-spacing: -0.02em; }
.footer p, .footer address { margin: 0; font-size: 0.85rem; line-height: 1.8; font-style: normal; overflow-wrap: anywhere; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 32px; font-size: 0.75rem; }

@media (prefers-color-scheme: dark) {
  :root {
    --background: #080c09;
    --heading: #f1fff7;
    --text: #bdcec4;
    --hero-text: #e0f3e8;
    --surface: #142219;
    --border: #2d4435;
    --glass: rgb(18 38 26 / 0.86);
    --glass-border: #344c3a;
    --accent: #98eeb5;
  }
  .hero {
    background: radial-gradient(ellipse at 90% 15%, rgb(37 184 174 / 0.3), transparent 75%),
      radial-gradient(ellipse at 10% 70%, rgb(46 161 181 / 0.2), transparent 70%),
      linear-gradient(155deg, #326b36, #204b3c 55%, #173e32);
  }
  .brand img, .product-heading img { filter: brightness(0) invert(1); }
}
@media (max-width: 600px) {
  .masthead { top: 18px; padding: 14px 20px; }
  .masthead-note { display: none; }
  .hero { padding-top: 145px; padding-bottom: 64px; border-radius: 0 0 28px 28px; }
  .hero p { font-size: 0.98rem; }
  .product { margin-block: 36px; padding: 26px 22px; }
  .product h2 { font-size: 1.5rem; }
  .contact-details { flex-direction: column; }
}