@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-variable-v1.ttf") format("truetype");
}

@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial");
  size-adjust: 105%;
  ascent-override: 96%;
  descent-override: 26%;
}

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

:root {
  color-scheme: light dark;
  --page-gutter: clamp(1rem, 1.6vw, 3rem);
  --hero-radius: clamp(2.17rem, 2.4vw, 4.5rem);
  --hero-height: clamp(40rem, 86dvh, 100rem);
  --hero-block-padding: clamp(4rem, 5vw, 8rem);
  --hero-overlay-padding: clamp(1rem, 2vw, 2rem);
  --section-gap: clamp(1.25rem, 2vw, 2rem);
  --title-size: clamp(7rem, 10vw, 18rem);
  --control-size: clamp(4rem, 3vw, 5rem);
  --control-icon-size: clamp(2rem, 1.5vw, 2.5rem);
  --control-text-size: clamp(1.25rem, 1.1vw, 1.5rem);
  --control-inline-padding: clamp(1.125rem, 1.2vw, 1.5rem);
  --action-gap: clamp(1rem, 1vw, 1.5rem);
  --separator-height: clamp(1.5rem, 1.4vw, 2rem);
  --footer-type-size: clamp(0.9rem, 0.65vw, 1rem);
  --footer-stack-gap: clamp(1rem, 1.4vw, 1.5rem);
  --motion-fast: 160ms;
  --motion-base: 280ms;
  --theme-dissolve-duration: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --text-color: #000;
  --background-color: #fff;
  --header-overlay: rgba(0, 0, 0, 0);
  --glass-background: rgba(255, 255, 255, 0.25);
  --glass-text: #111114;
  --glass-border: rgba(24, 24, 26, 0.3);
  --footer-text: #18181a;
  --hero-background: #f6f5fb;
  --hero-shadow:
    0 0 0 1px rgba(24, 24, 26, 0.08),
    0 12px 28px -16px rgba(24, 24, 26, 0.26),
    0 0 24px -14px rgba(120, 105, 255, 0.18);
  --site-title-color: #101012;
  --site-title-shadow: 0 0 12px #22222244, 0 2px 6px #ffffff60;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #f5f5f5;
    --background-color: #1c1c1e;
    --header-overlay: rgba(0, 0, 0, 0.3);
    --glass-background: rgba(30, 30, 35, 0.6);
    --glass-text: #fff;
    --glass-border: rgba(255, 255, 255, 0.15);
    --footer-text: #fff;
    --hero-background: #1c1c1e;
    --hero-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.05),
      0 0 24px -12px rgba(120, 105, 255, 0.22);
    --site-title-color: #fafafa;
    --site-title-shadow:
      0 2px 12px rgba(0, 0, 0, 0.45),
      0 0 4px rgba(255, 255, 255, 0.18);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --text-color: #f5f5f5;
  --background-color: #1c1c1e;
  --header-overlay: rgba(0, 0, 0, 0.3);
  --glass-background: rgba(30, 30, 35, 0.6);
  --glass-text: #fff;
  --glass-border: rgba(255, 255, 255, 0.15);
  --footer-text: #fff;
  --hero-background: #1c1c1e;
  --hero-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 24px -12px rgba(120, 105, 255, 0.22);
  --site-title-color: #fafafa;
  --site-title-shadow:
    0 2px 12px rgba(0, 0, 0, 0.45),
    0 0 4px rgba(255, 255, 255, 0.18);
}

html[data-theme="light"] {
  color-scheme: light;
  --text-color: #000;
  --background-color: #fff;
  --header-overlay: rgba(0, 0, 0, 0);
  --glass-background: rgba(255, 255, 255, 0.25);
  --glass-text: #111114;
  --glass-border: rgba(24, 24, 26, 0.3);
  --footer-text: #18181a;
  --hero-background: #f6f5fb;
  --hero-shadow:
    0 0 0 1px rgba(24, 24, 26, 0.08),
    0 12px 28px -16px rgba(24, 24, 26, 0.26),
    0 0 24px -14px rgba(120, 105, 255, 0.18);
  --site-title-color: #101012;
  --site-title-shadow: 0 0 12px #22222244, 0 2px 6px #ffffff60;
}

html {
  min-block-size: 100%;
  background: var(--background-color);
  color: var(--text-color);
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  min-block-size: 100%;
  margin: var(--page-gutter);
  background: var(--background-color);
  color: var(--text-color);
  font-family: "Outfit", "Outfit Fallback", Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color var(--motion-base) var(--ease-standard),
    color var(--motion-fast) var(--ease-out);
}

html.is-theme-swapping body,
html.is-theme-swapping .hero-frame::before,
html.is-theme-swapping .hero,
html.is-theme-swapping .hero-overlay,
html.is-theme-swapping .site-title,
html.is-theme-swapping .separator,
html.is-theme-swapping .circular-btn,
html.is-theme-swapping .circular-btn .text,
html.is-theme-swapping footer.container {
  transition: none !important;
}

::view-transition-group(root) {
  animation-duration: var(--theme-dissolve-duration);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--theme-dissolve-duration);
  animation-fill-mode: both;
  animation-timing-function: var(--ease-standard);
  mix-blend-mode: plus-lighter;
}

::view-transition-old(root) {
  animation-name: theme-dissolve-out;
}

::view-transition-new(root) {
  animation-name: theme-dissolve-in;
}

@keyframes theme-dissolve-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes theme-dissolve-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

button,
a {
  font: inherit;
}

.icon-sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.container {
  max-inline-size: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.hero-frame {
  position: relative;
  inline-size: 100%;
  margin-block-end: var(--section-gap);
  isolation: isolate;
  border-radius: var(--hero-radius);
}

.hero-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: var(--hero-background);
  box-shadow: var(--hero-shadow);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  transition:
    background-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  inline-size: 100%;
  min-block-size: var(--hero-height);
  padding-block: var(--hero-block-padding);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: var(--hero-radius);
  background: var(--hero-background);
  transition: background-color var(--motion-base) var(--ease-standard);
}

#hero-canvas,
.theme-canvas-freeze,
.hero-static-fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  background: var(--hero-background);
}

#hero-canvas {
  pointer-events: auto;
}

.theme-canvas-freeze {
  z-index: 1;
  pointer-events: none;
}

.hero-static-fallback {
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: flex;
  padding: var(--hero-overlay-padding);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--header-overlay);
  text-align: center;
  pointer-events: none;
}

.hero-overlay > * {
  pointer-events: auto;
}

.desktop-actions,
.footer-actions {
  align-items: center;
  justify-content: center;
  gap: var(--action-gap);
}

.desktop-actions {
  display: flex;
  margin-block-start: clamp(1.25rem, 2vh, 2rem);
}

.footer-actions {
  position: relative;
  z-index: 20;
  display: flex;
}

.separator {
  display: block;
  flex: 0 0 1px;
  inline-size: 1px;
  block-size: var(--separator-height);
  padding: 0;
  border-radius: 999px;
  background: var(--glass-border);
  color: transparent;
  font-size: 0;
  transition: background-color var(--motion-fast) var(--ease-out);
}

.circular-btn {
  position: relative;
  display: inline-flex;
  inline-size: var(--control-size);
  block-size: var(--control-size);
  min-inline-size: var(--control-size);
  overflow: visible;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-background);
  color: var(--glass-text);
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  box-shadow:
    0 8px 32px -4px rgba(0, 0, 0, 0.1),
    0 2px 8px -1px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  transition:
    inline-size var(--motion-base) var(--ease-standard),
    padding var(--motion-base) var(--ease-standard),
    border-radius var(--motion-base) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}

.site-title {
  position: relative;
  z-index: 3;
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 1.1em;
  margin-block-end: 0.2rem;
  color: var(--site-title-color);
  font-family: "Outfit", "Outfit Fallback", Helvetica, Arial, sans-serif;
  font-size: var(--title-size);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-align: center;
  text-shadow: var(--site-title-shadow);
  white-space: nowrap;
  transition:
    color var(--motion-fast) var(--ease-out),
    text-shadow var(--motion-base) var(--ease-standard);
}

.circular-btn .icon {
  flex: 0 0 auto;
  inline-size: var(--control-icon-size);
  block-size: var(--control-icon-size);
}

.circular-btn .text {
  display: inline-block;
  max-inline-size: 0;
  margin-inline-start: 0;
  overflow: hidden;
  opacity: 0;
  font-family: "Outfit", "Outfit Fallback", Helvetica, Arial, sans-serif;
  font-size: var(--control-text-size);
  white-space: nowrap;
  transition:
    max-inline-size var(--motion-base) var(--ease-standard),
    margin-inline-start var(--motion-base) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-out);
}

.circular-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px #111114,
    0 8px 32px -4px rgba(0, 0, 0, 0.1),
    0 2px 8px -1px rgba(0, 0, 0, 0.05);
}

.circular-btn.expanded,
.circular-btn.is-transition-locked,
.circular-btn:focus-visible {
  inline-size: auto;
  padding-inline: var(--control-inline-padding);
  border-radius: 999px;
}

.circular-btn.expanded .text,
.circular-btn.is-transition-locked .text,
.circular-btn:focus-visible .text {
  max-inline-size: 12.5rem;
  margin-inline-start: 0.5rem;
  opacity: 1;
}

@media (hover: hover) {
  .circular-btn:hover {
    inline-size: auto;
    padding-inline: var(--control-inline-padding);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .circular-btn:hover .text {
    max-inline-size: 12.5rem;
    margin-inline-start: 0.5rem;
    opacity: 1;
  }
}

footer.container {
  display: flex;
  min-block-size: 0;
  margin-block-start: 0;
  padding-block-start: 1rem;
  padding-block-end: 2rem;
  align-items: center;
  flex-direction: column;
  gap: var(--footer-stack-gap);
  color: var(--footer-text);
  font-size: var(--footer-type-size);
  text-align: center;
  transition: color var(--motion-fast) var(--ease-out);
}

@media (max-width: 48rem) {
  :root {
    --page-gutter: 1rem;
    --hero-radius: clamp(2rem, 9vw, 2.75rem);
    --hero-height: clamp(26rem, 72dvh, 48rem);
    --hero-block-padding: clamp(1.75rem, 6vw, 2.5rem);
    --hero-overlay-padding: clamp(0.75rem, 4vw, 1rem);
    --section-gap: clamp(1.75rem, 7vw, 2.25rem);
    --title-size: clamp(2.5rem, 14vw, 7.25rem);
    --control-size: clamp(3.5rem, 15vw, 4rem);
    --control-icon-size: clamp(1.875rem, 7vw, 2rem);
    --control-text-size: 1.125rem;
    --control-inline-padding: 1rem;
    --action-gap: clamp(1rem, 4vw, 1.25rem);
    --separator-height: clamp(1.5rem, 6vw, 1.75rem);
    --footer-stack-gap: 1rem;
  }

  .desktop-actions {
    display: none;
  }

  main {
    margin-block-end: 0;
  }

  footer.container {
    padding-block-start: 0;
    padding-block-end: max(
      2rem,
      calc(env(safe-area-inset-bottom) + 1.5rem)
    );
  }

  .circular-btn,
  .circular-btn:hover,
  .circular-btn.expanded,
  .circular-btn.is-transition-locked,
  .circular-btn:focus-visible {
    inline-size: var(--control-size);
    min-inline-size: var(--control-size);
    padding-inline: 0;
    border-radius: 50%;
  }

  .circular-btn .text,
  .circular-btn:hover .text,
  .circular-btn.expanded .text,
  .circular-btn.is-transition-locked .text,
  .circular-btn:focus-visible .text {
    max-inline-size: 0;
    margin-inline-start: 0;
    opacity: 0;
  }
}

@media (min-width: 48.0625rem) {
  .footer-actions {
    display: none;
  }
}

@media (forced-colors: active) {
  .hero-frame::before {
    background: Canvas;
    box-shadow: 0 0 0 2px CanvasText;
  }

  .hero,
  #hero-canvas,
  .hero-static-fallback {
    background: Canvas;
  }

  .site-title {
    color: CanvasText;
    text-shadow: none;
  }

  .circular-btn {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .separator {
    background: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}