/* ============================================================
   Theralieve.com redesign — shared system
   Deep navy hero, near-black product pages, aqua accent
   Geist (display) · Inter (body) · JetBrains Mono (technical)
============================================================ */

:root {
  /* Brand */
  --navy:        #0A1530;
  --navy-2:      #0E1B3D;
  --navy-3:      #16244B;
  --black:       #07080B;
  --black-2:     #0E1014;
  --ink:         #0B0E14;
  --ink-2:       #1F2330;
  --paper:       #FAFAF7;
  --paper-2:     #F2F1EC;
  --line:        #E4E5E0;
  --line-2:      #ECEDE8;
  --line-dark:   rgba(255,255,255,0.10);
  --line-dark-2: rgba(255,255,255,0.06);
  --muted:       #6A6E78;
  --muted-2:     #98A0AD;
  --muted-dark:  rgba(255,255,255,0.55);
  --muted-dark-2:rgba(255,255,255,0.40);

  --aqua:        #4FD1D8;          /* primary accent */
  --aqua-2:      #6FE3E9;
  --aqua-deep:   #1A858B;
  --aqua-wash:   #E6FAFB;
  --aqua-on-dark:#7BE8EE;

  --warn:        #C5841C;
  --good:        #4F9F7A;

  --shadow-1:    0 1px 2px rgba(7,8,11,0.04), 0 1px 3px rgba(7,8,11,0.05);
  --shadow-2:    0 1px 3px rgba(7,8,11,0.06), 0 12px 32px rgba(7,8,11,0.08);
  --shadow-dark: 0 1px 0 rgba(255,255,255,0.04), 0 24px 60px rgba(0,0,0,0.55);

  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 28px;

  --container: 1280px;
  --gutter: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* legacy IE/Edge */
}
html::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome / Safari / new Edge */
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  font-feature-settings: "ss01","cv11","tnum";
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 720px) { :root { --gutter: 20px; } }

/* ============ TYPOGRAPHY ============ */

.font-display {
  font-family: 'Geist', 'Inter', system-ui, sans-serif;
  font-feature-settings: "ss03","cv11";
}
.mono {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-feature-settings: "tnum";
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px; background: currentColor;
  display: inline-block;
}
.eyebrow.on-dark { color: var(--aqua-on-dark); }

h1, h2, h3, h4 { font-family: 'Geist','Inter', sans-serif; margin: 0; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
h1.display { font-size: clamp(34px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; }
h2.title   { font-size: clamp(26px, 4.2vw, 64px); line-height: 1.05; letter-spacing: -0.024em; font-weight: 600; }
h3.section { font-size: clamp(20px, 2.4vw, 36px); line-height: 1.1;  letter-spacing: -0.022em; font-weight: 600; }
.kicker    { font-size: clamp(15px, 1.6vw, 22px); line-height: 1.45; color: var(--muted); max-width: 680px; text-wrap: pretty; }

p { line-height: 1.55; }

/* ============ BUTTONS ============ */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.btn--primary { background: var(--aqua); color: var(--navy); }
.btn--primary:hover { background: var(--aqua-2); }
.btn--ghost-dark {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
}
.btn--ghost-dark:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.36); }
.btn--ghost-light {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn--ghost-light:hover { background: #fff; border-color: var(--ink); }
.btn--text { padding: 8px 0; gap: 6px; color: var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; }
.btn--text-dark { color: var(--aqua-on-dark); border-bottom-color: var(--aqua-on-dark); padding: 8px 0; gap: 6px; border-radius: 0; }
.btn .arrow { width: 16px; height: 16px; transition: transform 120ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ============ HEADER NAV ============ */

.nav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  height: 104px;
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}
.nav--dark { color: #fff; }
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.nav__mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--aqua);
  display: grid; place-items: center;
  color: var(--navy);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
}
.nav__mark--dark { background: var(--aqua); color: var(--navy); }
.nav__logo { height: 72px; width: auto; display: block; filter: brightness(0) invert(1); }
.nav__logo--lg { height: 96px; }
.nav--light .nav__logo { filter: none; }
.nav__links { display: flex; gap: 4px; }
.nav__link {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
}
.nav--light .nav__link { color: var(--ink-2); }
.nav__link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav--light .nav__link:hover { color: var(--ink); background: var(--paper-2); }
.nav__cta { padding: 10px 18px; font-size: 14px; }
@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav { height: 80px; gap: 12px; }
  .nav__logo { height: 56px; }
  .nav__logo--lg { height: 72px; }
  .nav__cta { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 560px) {
  .nav { height: 72px; }
  .nav__logo { height: 44px; }
  .nav__cta { padding: 8px 12px; font-size: 12px; gap: 6px; }
  .nav__cta .arrow-svg { display: none; }
}
@media (max-width: 400px) {
  .nav__logo { height: 36px; }
  .nav__cta { padding: 7px 10px; font-size: 11px; }
}

/* ============ FOOTER ============ */

.footer {
  background: var(--black);
  color: #fff;
  padding: 80px 0 40px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-dark);
}
.footer__brand { max-width: 360px; }
.footer__mission {
  margin-top: 18px;
  color: var(--muted-dark);
  font-size: 14px;
  line-height: 1.6;
}
.footer__col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark-2);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer__list { display: flex; flex-direction: column; gap: 10px; }
.footer__list a { color: rgba(255,255,255,0.85); font-size: 14px; }
.footer__list a:hover { color: var(--aqua); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  font-size: 12px;
  color: var(--muted-dark-2);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
@media (max-width: 880px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* ============ COMMON CHROME ============ */

.section { padding: 120px 0; }
.section--tight { padding: 80px 0; }
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .section--tight { padding: 48px 0; }
}
.section--dark { background: var(--navy); color: #fff; }
.section--paper { background: var(--paper-2); }

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
}
.section-head__text { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; align-items: start; gap: 16px; margin-bottom: 32px; }
}

/* tag chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.chip--accent { background: var(--aqua-wash); border-color: rgba(79,209,216,0.3); color: var(--aqua-deep); }
.chip--dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
.chip--accent-dark { background: rgba(79,209,216,0.12); border-color: rgba(79,209,216,0.3); color: var(--aqua-on-dark); }

/* spec strips */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec-strip__cell {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
}
.spec-strip__cell:last-child { border-right: none; }
.spec-strip__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.spec-strip__value {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.spec-strip__value .unit { color: var(--muted); font-weight: 400; font-size: 14px; margin-left: 4px; font-family: 'Inter', sans-serif; }

.spec-strip--dark { border-color: var(--line-dark); }
.spec-strip--dark .spec-strip__cell { border-color: var(--line-dark); }
.spec-strip--dark .spec-strip__label { color: var(--muted-dark-2); }
.spec-strip--dark .spec-strip__value { color: #fff; }
.spec-strip--dark .spec-strip__value .unit { color: var(--muted-dark); }

/* arrow icon helper */
.arrow-svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* utility */
.kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
}
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: 4px; }