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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); }
body { min-width: 320px; margin: 0; overflow-x: clip; background-color: var(--color-canvas); color: var(--color-text); font: var(--p-weight-regular) var(--type-body)/var(--leading-body) var(--font-body); -webkit-font-smoothing: antialiased; transition: background-color 360ms var(--motion-easing), color 360ms var(--motion-easing); }
img, svg { display: block; max-width: 100%; }
button, a { font: inherit; touch-action: manipulation; }
a { color: inherit; text-underline-offset: 0.24em; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
::selection { background: var(--p-gray-300); color: var(--p-black); }
[hidden] { display: none !important; }

.skip-link { position: fixed; z-index: 100; inset: var(--space-2) auto auto var(--space-2); padding: var(--space-3) var(--space-4); transform: translateY(-160%); background: var(--color-text); color: var(--color-canvas); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - var(--layout-gutter) * 2), var(--layout-width)); margin-inline: auto; }
.section { position: relative; width: 100%; margin: 0; padding-block: clamp(var(--space-16), 10.5vw, var(--space-32)); }
.section-heading { display: grid; justify-items: start; gap: var(--space-4); max-width: 54rem; }
.section-heading h2 { max-width: 13ch; margin: 0; font: var(--p-weight-bold) var(--type-heading)/var(--leading-heading) var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.section-heading > p:last-child { max-width: 54ch; margin: 0; color: var(--color-text-secondary); }
.eyebrow { margin: 0; color: var(--color-text-muted); font-size: var(--type-caption); letter-spacing: 0.035em; }
.eyebrow::before { display: inline-block; width: 1.1rem; height: 1px; margin-inline-end: var(--space-3); vertical-align: middle; background: var(--color-accent); content: ""; }
.container-wide { width: min(calc(100% - var(--layout-gutter) * 2), var(--layout-width)); margin-inline: auto; }

.button { display: inline-flex; min-height: var(--button-height); align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-3) var(--button-padding); border: var(--p-line) solid transparent; border-radius: var(--button-radius); color: var(--color-text); font-size: var(--type-small); font-weight: var(--p-weight-medium); line-height: 1.2; text-align: center; text-decoration: none; transition: background-color var(--motion-fast) var(--motion-easing), color var(--motion-fast) var(--motion-easing), border-color var(--motion-fast) var(--motion-easing), transform var(--motion-fast) var(--motion-easing); }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.button--primary:hover { background: var(--p-gray-300); }
.button--motion { min-height: 3.5rem; padding-inline: clamp(1.4rem, 2.2vw, 2rem); border-radius: 999px; background: var(--button-motion-bg); color: var(--button-motion-fg); transition: background-color 240ms var(--motion-easing), border-color 240ms var(--motion-easing), color 240ms var(--motion-easing), transform 300ms var(--motion-easing), box-shadow 300ms var(--motion-easing); }
.button--motion:hover, .button--motion:focus-visible { transform: scale(1.035); border-color: var(--button-motion-hover-bg); background: var(--button-motion-hover-bg); color: var(--button-motion-hover-fg); box-shadow: 0 0.45rem 1.2rem rgb(0 0 0 / 14%); }
.button--motion:active { transform: scale(0.985); }
.button--motion .button-icon { transition: transform 300ms var(--motion-easing); }
.button--motion:hover .button-icon, .button--motion:focus-visible .button-icon { transform: translateX(4px); }
.button--outline { border-color: var(--button-outline-border); background: transparent; }
.button--outline:hover { border-color: var(--color-text-secondary); background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.button-icon { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-fast) var(--motion-easing); }
a.button:hover .button-icon { transform: translate(2px, -2px); }
.button[data-copy-message]:hover .button-icon { transform: scale(1.08); }
.button__spark { width: 0.48rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); }

.site-header { position: relative; z-index: 10; width: 100%; min-height: var(--header-height); border-block-end: var(--p-line) solid var(--color-line-quiet); background: var(--color-canvas); }
.site-header__inner { display: flex; min-height: var(--header-height); align-items: center; justify-content: space-between; gap: var(--space-6); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); font-size: 0.96rem; font-weight: var(--p-weight-bold); letter-spacing: 0.1em; text-decoration: none; }
.brand__mark { width: 2.5rem; height: 2.5rem; overflow: hidden; flex: none; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__mark { transition: transform 360ms var(--motion-easing); }
.brand:hover .brand__mark, .brand:focus-visible .brand__mark { transform: rotate(-7deg) scale(1.04); }
.nav { display: flex; align-items: center; gap: clamp(var(--space-4), 3.5vw, var(--space-8)); }
.nav a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--color-text-secondary); font-size: var(--type-small); text-decoration: none; transition: color var(--motion-fast) var(--motion-easing); }
.nav a:hover { color: var(--color-text); }
.header-action { min-height: 2.75rem; padding-inline: var(--space-4); font-size: var(--type-caption); transition: background-color var(--motion-fast) var(--motion-easing), border-color var(--motion-fast) var(--motion-easing), color var(--motion-fast) var(--motion-easing), transform var(--motion-fast) var(--motion-easing), box-shadow var(--motion-fast) var(--motion-easing); }
.header-action:hover, .header-action:focus-visible { transform: scale(1.035); border-color: var(--header-action-hover-bg); background: var(--header-action-hover-bg); color: var(--header-action-hover-fg); box-shadow: 0 0.55rem 1.5rem var(--header-action-hover-glow); }
.header-action__icon { width: 1.05rem; height: 1.05rem; transition: transform var(--motion-standard) var(--motion-easing); }
.header-action:hover .header-action__icon, .header-action:focus-visible .header-action__icon { transform: rotate(-7deg) scale(1.12); }
.theme-toggle { display: grid; width: 2.875rem; height: 2.875rem; flex: none; place-items: center; border: var(--p-line) solid var(--color-line); border-radius: var(--p-radius-small); background: transparent; color: var(--color-text); cursor: pointer; transition: background-color var(--motion-fast) var(--motion-easing), border-color var(--motion-fast) var(--motion-easing), transform var(--motion-fast) var(--motion-easing); }
.theme-toggle:hover { transform: translateY(-2px) rotate(-3deg); border-color: var(--color-text-secondary); background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--motion-easing); }
.theme-toggle:hover svg { transform: rotate(-18deg); }
.theme-icon--moon { display: none; }
html[data-theme="light"] .theme-icon--sun { display: none; }
html[data-theme="light"] .theme-icon--moon { display: block; }
.menu-toggle { display: none; width: 2.875rem; height: 2.875rem; place-items: center; border: var(--p-line) solid var(--color-line); border-radius: var(--p-radius-small); background: transparent; color: var(--color-text); }
.menu-toggle__icon, .menu-toggle__icon::before, .menu-toggle__icon::after { width: 1.15rem; height: 1px; background: currentColor; }
.menu-toggle__icon { position: relative; }
.menu-toggle__icon::before, .menu-toggle__icon::after { position: absolute; inset-inline-start: 0; content: ""; }
.menu-toggle__icon::before { inset-block-start: -0.36rem; }
.menu-toggle__icon::after { inset-block-start: 0.36rem; }
.menu-toggle__icon, .menu-toggle__icon::before, .menu-toggle__icon::after { transition: transform var(--motion-standard) var(--motion-easing), inset-block-start var(--motion-standard) var(--motion-easing), background-color var(--motion-fast) var(--motion-easing); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { inset-block-start: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { inset-block-start: 0; transform: rotate(-45deg); }
.mobile-menu { padding: var(--space-3) var(--layout-gutter) var(--space-6); border-block-start: var(--p-line) solid var(--color-line); background: var(--color-surface); }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.mobile-menu__close { display: grid; width: 2.875rem; height: 2.875rem; flex: none; place-items: center; border: var(--p-line) solid var(--color-line); border-radius: var(--p-radius-small); background: transparent; color: var(--color-text); cursor: pointer; }
.mobile-menu__close svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.mobile-menu .nav { display: grid; gap: var(--space-1); }
.mobile-menu .nav a { min-height: 3rem; }
body.menu-open { overflow: hidden; }

.site-footer { width: 100%; margin: 0; padding-block: var(--space-8); border-block-start: var(--p-line) solid var(--color-line-quiet); background: var(--footer-bg); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-footer__signature, .site-footer__meta { margin: 0; color: var(--color-text-muted); font-size: var(--type-caption); }
.site-footer__partner { margin: 0; color: var(--color-text-secondary); font-size: var(--type-caption); letter-spacing: 0.025em; }
.site-footer__top { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--type-small); text-decoration: none; }
.site-footer__top:hover { text-decoration: underline; }
.site-footer__top:hover .button-icon { transform: translateY(-2px); }

@media (max-width: 54rem) {
  :root { --header-height: 4.5rem; }
  .nav--desktop, .header-action { display: none; }
  .menu-toggle { display: grid; }
  .mobile-menu { max-height: calc(100svh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; }
  .site-footer__top { min-height: 2.75rem; }
}

@media (min-width: 54.001rem) { .mobile-menu { display: none !important; } }

@media (max-width: 22rem) {
  :root { --p-gutter: 1rem; }
  .site-header__inner { gap: var(--space-3); }
  .brand { gap: var(--space-2); font-size: 0.85rem; }
  .brand__mark { width: 2.25rem; height: 2.25rem; }
  .theme-toggle, .menu-toggle { width: 2.75rem; height: 2.75rem; }
  .mobile-menu__close { width: 2.75rem; height: 2.75rem; }
}

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