* { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

:root {
  --primary-light-3: #ff9345;
  --primary-hover: #e65300;
  --primary-trans-20:   oklch(0.700 0.202 44 / 0.2);
  --light: #F9FAFB;
  --light-trans-20: oklch(0.982 0.002 248 / 0.2);
  --light-trans-30: oklch(0.982 0.002 248 / 0.3);
  --dark: #111827;
  --border: #dee2e6;
  --base: #1F2937;
  --space-xs: 7.11px;
  --space-s: 10.67px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 36px;
  --space-2xl: 54px;
  --font-heading: inherit;
  --base-font-size: 16px;
  --text-xs: 10.24px;
  --text-s: 12.8px;
  --text-m: 16px;
  --text-l: 20px;
  --text-xl: 25px;
  --radius-m: clamp(4.800000000000001px, 0.285rem + 0.075vw, 6px);
  --radius-full: 9999px;
  --transition-base: 250ms;
  --z-fixed: 1030;
  --z-overlay: 1040;
  --container-padding: clamp(10.67px, 0.6002rem + 0.3331vw, 16px);
  --gap: clamp(10.67px, 0.6002rem + 0.3331vw, 16px);
  --color-scheme: light;
  --text-body: var(--base);
  --primary: oklch(0.702 0.2 45);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

button, input, optgroup, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

button, select { cursor: pointer; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* Fundamentals config will inject properties here */
}

h1, h2, h3, h4, h5, h6 {
  /* Fundamentals config will inject properties here */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header, .footer {
  width: 100%;
}

.container {
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--gutter-width));
}

.container-wide   { max-width: calc(var(--container-max-width) * 1.25); }

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-m);
  font-weight: 600;
  color: inherit;
}

p, .p {
  font-family: var(--font-base);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--text-body);
}

body {
  font-family: var(--font-base);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--dark);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

button, input, optgroup, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

button, select { cursor: pointer; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: var(--color-scheme, light);
}

body {
  font-family: var(--font-base);
  color: var(--text-body, var(--base));
  background-color: var(--bg-body, var(--light));
  line-height: var(--base-line-height);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header, .footer {
  width: 100%;
}

.container {
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--gutter-width));
}

.container-wide   { max-width: calc(var(--container-max-width) * 1.25); }

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-scheme: dark;
    
    --bg-body: var(--dark);
    --text-body: var(--light);
    --bg-surface: var(--base-90);
    --bg-surface-raised: var(--base-80);
    --border-default: var(--light-trans-20);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .dark\:bg-dark { background-color: var(--dark); }
  :root:not(.light) .dark\:bg-base { background-color: var(--base); }
  :root:not(.light) .dark\:text-light { color: var(--light); }
  :root:not(.light) .dark\:text-white { color: white; }
  :root:not(.light) .dark\:border-light { border-color: var(--light-trans-30); }
}

.bg-body { background-color: var(--bg-body); }

.text-body { color: var(--text-body); }

body {
  font-family: var(--font-base);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--dark);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-scheme:    dark;
    --bg-body:         var(--dark);
    --text-body:       var(--light);
    --bg-surface:      var(--base-90);
    --bg-surface-raised: var(--base-80);
    --border-default:  var(--light-trans-20);
  }

  :root:not(.light) .dark\:bg-dark   { background-color: var(--dark); }
  :root:not(.light) .dark\:bg-base   { background-color: var(--base); }
  :root:not(.light) .dark\:text-light { color: var(--light); }
  :root:not(.light) .dark\:text-white { color: white; }
  :root:not(.light) .dark\:border-light { border-color: var(--light-trans-30); }

  :root:not(.light) .dark-invert {
    filter: invert(1) hue-rotate(180deg);
  }
}

html:has(#darkmode-toggle:not(:checked)) {
  color-scheme: var(--vh-el-prop-colorscheme);

  /* VHBuilder semantic tokens */
  --vh-bg-base:                var(--vh-el-prop-vhbgbase);
  --vh-bg-surface:             var(--vh-el-prop-vhbgsurface);
  --vh-bg-elevated:            var(--vh-el-prop-vhbgelevated);
  --vh-bg-input:               var(--vh-el-prop-vhbginput);
  --vh-bg-hover:               var(--vh-el-prop-vhbghover);
  --vh-bg-raised:              var(--vh-el-prop-vhbgraised);
  --vh-border:                 var(--vh-el-prop-vhborder);
  --vh-border-subtle:          var(--vh-el-prop-vhbordersubtle);
  --vh-border-input:           var(--vh-el-prop-vhborderinput);
  --vh-border-strong:          var(--vh-el-prop-vhborderstrong);
  --vh-text:                   var(--vh-el-prop-vhtext);
  --vh-text-bright:            var(--vh-el-prop-vhtextbright);
  --vh-text-white:             var(--vh-el-prop-vhtextwhite);
  --vh-text-muted:             var(--vh-el-prop-vhtextmuted);
  --vh-text-faint:             var(--vh-el-prop-vhtextfaint);
  --vh-text-dim:               var(--vh-el-prop-vhtextdim);
  --vh-scrollbar-track:        var(--vh-el-prop-vhscrollbartrack);
  --vh-scrollbar-thumb:        var(--vh-el-prop-vhscrollbarthumb);
  --vh-scrollbar-thumb-hover:  var(--vh-el-prop-vhscrollbarthumbhover);
  --vh-shadow-popup:           var(--vh-el-prop-vhshadowpopup);
  --vh-shadow-frame:           var(--vh-el-prop-vhshadowframe);

  --bg-level-1:   #ffffff;
  --bg-level-2:   #f2f3f5;
  --border-color: var(--vh-el-prop-bordercolor);

  /* Legacy theme tokens */
  --light:      var(--vh-el-prop-light_2);
  --base:       var(--vh-el-prop-base_2);
  --bg:         var(--vh-el-prop-bg);
  --bg-card:    var(--vh-el-prop-bgcard);
  --text:       var(--vh-el-prop-text);
  --text-muted: var(--vh-el-prop-textmuted);
  --text-dim:   var(--vh-el-prop-textdim);
  --border:     var(--vh-el-prop-border_7);
  --border-lit: var(--vh-el-prop-borderlit);
}

html:has(#darkmode-toggle:not(:checked)) .status-bar {
  background:   var(--vh-el-prop-background_11);
  border-color: var(--vh-el-prop-bordercolor_2);
}

html:has(#darkmode-toggle:not(:checked)) .feature-card {
  background: var(--vh-el-prop-background_12);
  box-shadow: var(--vh-el-prop-boxshadow_4);
}

html:has(#darkmode-toggle:not(:checked)) .hero-stats {
  border-top-color: var(--vh-el-prop-bordertopcolor);
}

html:has(#darkmode-toggle:not(:checked)) .vh-footer {
  background: var(--vh-el-prop-background_13);
  color:      var(--vh-el-prop-text_color_11);
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar {
  background:        var(--vh-el-prop-background_14);
  border-right-color: var(--vh-el-prop-borderrightcolor);
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-profile {
  border-bottom-color: var(--vh-el-prop-borderbottomcolor);
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-profile:hover {
  background: var(--vh-el-prop-background_15);
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-profile-avatar {
  background: var(--vh-el-prop-background_16);
  color:      var(--vh-el-prop-text_color_12, var(--vh-text-faint));
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-profile-name {
  color: var(--vh-el-prop-text_color_13, var(--vh-text-white));
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-profile-status {
  color: var(--vh-el-prop-text_color_14, var(--vh-text-faint));
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-section-header {
  border-bottom-color: var(--vh-el-prop-borderbottomcolor_2);
  color:               var(--vh-el-prop-text_color_15, var(--vh-text));
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-section-header:hover {
  background: var(--vh-el-prop-background_17);
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-item {
  color: var(--vh-el-prop-text_color_16, var(--vh-text));
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-item:hover {
  background: var(--vh-el-prop-background_18);
  color:      var(--vh-el-prop-text_color_17, var(--vh-text-white));
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-item.active {
  background: var(--vh-el-prop-background_19);
  color:      var(--vh-el-prop-text_color_18, var(--vh-brand-600));
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-item svg {
  color: var(--vh-el-prop-text_color_19, var(--vh-text-faint));
}

html:has(#darkmode-toggle:not(:checked)) .vh-sidebar-item.active svg {
  color: var(--vh-el-prop-text_color_20, var(--vh-brand-500));
}

html:has(#darkmode-toggle:not(:checked)) .header {
  background:   var(--vh-el-prop-background_10);
  border-bottom: var(--vh-el-prop-borderbottom);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto !important;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol, menu {
  list-style: none;
  margin:     0;
  padding:    0;
}

button, input, optgroup, select, textarea {
  font:       inherit;
  color:      inherit;
  background: transparent;
  border:     none;
  padding:    0;
  margin:     0;
}

button, select { cursor: pointer; }

img, picture, video, canvas, svg {
  display:   block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color:           inherit;
  cursor:          pointer;
}

html {
  font-size:               var(--base-font-size);
  line-height:             var(--base-line-height);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme:            var(--color-scheme, light);
}

body {
  min-height:    100vh;
  display:       flex;
  flex-direction: column;
  font-family:   var(--font-base);
  font-size:     var(--text-m);
  font-weight:   400;
  color:         var(--text-body, var(--base));
  background-color: var(--bg-body, var(--light));
  line-height:   var(--base-line-height);
}

.header,
.footer {
  width: 100%;
}

.container {
  max-width:     var(--container-max-width);
  width:         100%;
  margin:        0 auto;
  padding-left:  var(--container-padding);
  padding-right: var(--container-padding);
  display:       flex;
  flex-direction: column;
  gap:           var(--gap, var(--gutter-width));
}

.container-wide {
  max-width: calc(var(--container-max-width) * 1.25);
}

.header .container {
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-l);
}

.bg-body   { background-color: var(--bg-body); }

.text-body { color: var(--text-body); }

.header {
  position:         sticky;
  top:              0;
  z-index:          var(--z-fixed);
  height:           64px;
  display:          flex;
  align-items:      center;
  background:       var(--header-bg, rgba(13,13,13,0.90));
  border-bottom:    1px solid var(--border);
  backdrop-filter:  blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header__logo {
  display:      flex;
  align-items:  center;
  gap:          var(--space-s);
  font-weight:  700;
  font-size:    var(--text-l);
  letter-spacing: -0.02em;
  color:        var(--text);
  flex-shrink:  0;
}

.header__logo-icon {
  width:       34px;
  height:      34px;
  display:     grid;
  place-items: center;
  flex-shrink: 0;
}

.header__logo-icon img {
  width:       28px;
  height:      28px;
  object-fit:  contain;
}

.header__logo span { color: var(--primary); }

.header__nav-list {
  display:     flex;
  align-items: center;
  gap:         var(--space-xl);
}

.header__nav-list a {
  font-size:   var(--text-s);
  font-weight: 500;
  color:       var(--text-dim);
  transition:  color var(--transition-fast);
}

.header__nav-list a:hover,
.header__nav-list a.active { color: var(--primary); }

.header__controls {
  display:     flex;
  align-items: center;
  gap:         var(--space-m);
}

.header__theme-toggle:hover,
.header__theme-toggle:focus-visible {
  color:       var(--primary);
  border-color: var(--border-lit);
  box-shadow:  0 0 0 2px var(--primary-trans-20);
}

html:not([data-theme='light']) .header__theme-icon--moon { display: block; }

html[data-theme='light']       .header__theme-icon--sun  { display: block; }

.header__cta {
  padding:      var(--space-xs) var(--space-l);
  background:   var(--primary);
  color:        var(--dark);
  border-radius: var(--radius-m);
  font-size:    var(--text-s);
  font-weight:  700;
  transition:   background var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink:  0;
}

.header__cta:hover {
  background: var(--primary-hover);
  box-shadow: var(--glow);
}

.header__toggle {
  display:        none;
  flex-direction: column;
  gap:            5px;
  padding:        var(--space-xs);
  cursor:         pointer;
}

.header__toggle span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--text);
  border-radius: var(--radius-full);
  transition:    all var(--transition-fast);
}

input:checked + label + .background {
  background: var(--vh-el-prop-background_5);
}

input:checked + label {
  background: var(--vh-el-prop-background_8);
  box-shadow: var(--vh-el-prop-boxshadow_3);
}

input:checked + label:after {
  transform:  var(--vh-el-prop-transform);
  background: var(--vh-el-prop-background_9);
}

label:active:after {
  width: var(--vh-el-prop-width_5);
}

label svg {
  position:       var(--vh-el-prop-position_4);
  width:          var(--vh-el-prop-width_6);
  height:         var(--vh-el-prop-height_5);
  top:            var(--vh-el-prop-top_2);
  z-index:        var(--vh-el-prop-zindex_2);
  pointer-events: var(--vh-el-prop-pointerevents);
  transition:     var(--vh-el-prop-transition_4);
}

label svg.sun {
  left:    var(--vh-el-prop-left_2);
  fill:    var(--vh-el-prop-fill);
  opacity: var(--vh-el-prop-opacity);
}

label svg.moon {
  left:    var(--vh-el-prop-left_3);
  fill:    var(--vh-el-prop-fill_2);
  opacity: var(--vh-el-prop-opacity_2);
}

input:checked + label svg.sun {
  fill:    var(--vh-el-prop-fill_3);
  opacity: var(--vh-el-prop-opacity_3);
}

input:checked + label svg.moon {
  fill:    var(--vh-el-prop-fill_4);
  opacity: var(--vh-el-prop-opacity_4);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

button, input, optgroup, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

button, select { cursor: pointer; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* Fundamentals config will inject properties here */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--gutter-width));
}

.container-wide   { max-width: calc(var(--container-max-width) * 1.25); }

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-scheme: dark;
    
    --bg-body: var(--dark);
    --text-body: var(--light);
    --bg-surface: var(--base-90);
    --bg-surface-raised: var(--base-80);
    --border-default: var(--light-trans-20);
    --site-bg: var(--primary-light-3);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .dark\:bg-dark { background-color: var(--dark); }
  :root:not(.light) .dark\:bg-base { background-color: var(--base); }
  :root:not(.light) .dark\:text-light { color: var(--light); }
  :root:not(.light) .dark\:text-white { color: white; }
  :root:not(.light) .dark\:border-light { border-color: var(--light-trans-30); }
}

.bg-body { background-color: var(--bg-body); }

.text-body { color: var(--text-body); }

body {
  font-family: var(--font-base);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--dark);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-fixed);
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(13,13,13,0.90);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header .container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-weight: 700;
  font-size: var(--text-l);
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
}

.logo-icon {
  width: 34px;
  height: 34px;
  background: var(--primary);
  border-radius: var(--radius-m);
  display: grid;
  place-items: center;
}

.logo-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--dark);
}

.nav-logo span { color: var(--primary); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-links a {
  font-size: var(--text-s);
  font-weight: 500;
  color: var(--text-dim);
  transition: color var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active { color: var(--primary); }

.nav-cta {
  padding: var(--space-xs) var(--space-l);
  background: var(--primary);
  color: var(--dark);
  border-radius: var(--radius-m);
  font-size: var(--text-s);
  font-weight: 700;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}

.nav-cta:hover {
  background: var(--primary-hover);
  box-shadow: var(--glow);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-xs);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-l);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: var(--z-overlay);
  }

  .nav-links.open { transform: translateX(0); }

  .nav-links a {
    width: 100%;
    padding: var(--space-m) 0;
    font-size: var(--text-m);
    border-bottom: 1px solid var(--border);
  }

  .nav-toggle { display: flex; }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-base);
  color: var(--base);
  background-color: var(--light);
  line-height: var(--base-line-height);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header, .footer {
  width: 100%;
}

.container {
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--gutter-width));
}

.container-wide   { max-width: calc(var(--container-max-width) * 1.25); }

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-m);
  font-weight: 600;
  color: inherit;
}

p, .p {
  font-family: var(--font-base);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--text-body);
}

body {
  font-family: var(--font-base);
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--dark);
}

.footer__brand .footer__logo {
  font-size: var(--text-xl);
  margin-bottom: var(--space-m);
}

.footer__brand p {
  font-size: var(--text-s);
  color: var(--text-dim);
  max-width: 260px;
  line-height: 1.7;
}

.footer__col h4 {
  font-size: var(--text-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--space-m);
}

.footer__col a {
  display: block;
  font-size: var(--text-s);
  color: var(--text-dim);
  padding: 4px 0;
  transition: color var(--transition-fast);
}

.footer__col a:hover { color: var(--primary); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: var(--space-m);
}

.footer__bottom a { color: var(--text-muted); }

.footer__bottom a:hover { color: var(--primary); }

.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-2xl) 0;
  color: var(--text-light);
  background-color: var(--dark);
}

.footer .container {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2xl);
}

@media (max-width: 768px) {

  .footer .container {
    flex-direction: column;
    gap: var(--space-xl);
  }
}

/* @vh-darkmode-block:start */
/* ===================================
   Dark Mode Support
   ================================ */

/* Dark mode color scheme variables */
:root {
  --color-scheme: light;
  
  /* Light mode defaults (already defined in colors) */
  --bg-body: var(--light);
  --text-body: var(--base);
  --bg-surface: white;
  --bg-surface-raised: var(--light);
  --border-default: var(--base-trans-20);
}

/* Dark mode using class toggle */
.dark {
  --color-scheme: dark;
  
  --bg-body: var(--dark);
  --text-body: var(--light);
  --bg-surface: var(--base-90);
  --bg-surface-raised: var(--base-80);
  --border-default: var(--light-trans-20);
  --site-bg: var(--primary-light-3);
}

/* Dark mode using system preference */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-scheme: dark;
    
    --bg-body: var(--dark);
    --text-body: var(--light);
    --bg-surface: var(--base-90);
    --bg-surface-raised: var(--base-80);
    --border-default: var(--light-trans-20);
    --site-bg: var(--primary-light-3);
  }
}

/* Dark mode utility classes */
.dark\:bg-dark { }
.dark\:text-light { }

.dark .dark\:bg-dark { background-color: var(--dark); }
.dark .dark\:bg-base { background-color: var(--base); }
.dark .dark\:text-light { color: var(--light); }
.dark .dark\:text-white { color: white; }
.dark .dark\:border-light { border-color: var(--light-trans-30); }

@media (prefers-color-scheme: dark) {
  :root:not(.light) .dark\:bg-dark { background-color: var(--dark); }
  :root:not(.light) .dark\:bg-base { background-color: var(--base); }
  :root:not(.light) .dark\:text-light { color: var(--light); }
  :root:not(.light) .dark\:text-white { color: white; }
  :root:not(.light) .dark\:border-light { border-color: var(--light-trans-30); }
}

/* Semantic dark mode classes */
.bg-body { background-color: var(--bg-body); }
.text-body { color: var(--text-body); }
.bg-surface { background-color: var(--bg-surface); }
.bg-surface-raised { background-color: var(--bg-surface-raised); }
.border-default { border-color: var(--border-default); }

/* Invert for dark mode */
.dark-invert {
  filter: invert(0);
}

.dark .dark-invert,
@media (prefers-color-scheme: dark) {
  :root:not(.light) .dark-invert {
    filter: invert(1) hue-rotate(180deg);
  }
}
/* @vh-darkmode-block:end */