/* A quiet stage for the work. Entrance and scroll transforms use separate layers. */
.hero-showcase {
  --hero-surface: #f9f8fc;
  --hero-text: #222026;
  --hero-secondary: #706a78;
  --hero-action: #6845ad;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: 44px;
  background: var(--hero-surface);
  color: var(--hero-text);
}

.hero-intro { position: relative; z-index: 2; text-align: center; }
.hero-showcase h1 {
  font-size: clamp(39px, 5vw, 68px);
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -.064em;
}
.hero-showcase h1 > span { display: block; animation: hero-copy-in 1.1s var(--ease) both; }
.hero-showcase h1 > .hero-title-accent {
  padding-bottom: .09em;
  color: var(--hero-action);
  background: linear-gradient(110deg, #9361c8 18%, #6845ad 49%, #47367d 83%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-delay: .12s;
}
.hero-intro > p {
  margin-top: 16px;
  color: var(--hero-secondary);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -.025em;
  animation: hero-copy-in 1.1s .22s var(--ease) both;
}
.hero-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 22px;
  animation: hero-copy-in 1.1s .3s var(--ease) both;
}
.hero-cta, .hero-project-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.hero-cta {
  padding: 12px 25px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  background: var(--hero-action);
  transition: background .2s, box-shadow .2s;
}
.hero-cta:hover { background: #55348f; box-shadow: 0 5px 22px #6845ad20; }
.hero-project-link { gap: 4px; color: var(--hero-action); }
.hero-project-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s; }
.hero-project-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-project-link:hover svg { transform: translateX(3px); }

.hero-stage {
  position: relative;
  width: min(100% - 64px, 820px);
  margin: 34px auto 0;
  padding-bottom: 44px;
  perspective: 1600px;
}
.hero-aura {
  position: absolute;
  z-index: -1;
  inset: -23% -22% -3%;
  pointer-events: none;
  background: radial-gradient(ellipse at 37% 51%, #ccb1ef62, transparent 53%), radial-gradient(ellipse at 68% 50%, #aac1ef48, transparent 55%);
  filter: blur(24px);
  animation: hero-aura-in 2.2s .15s ease-out both;
}
.hero-product {
  transform: translateY(var(--hero-lift, 0px)) rotateX(var(--hero-tilt, 9deg)) scale(var(--hero-scale, 1));
  transform-origin: 50% 80%;
}
.hero-product-enter { animation: hero-device-in 1.7s .18s var(--ease) both; }
.hero-device {
  position: relative;
  overflow: hidden;
  padding: 7px 7px 0;
  border: 1px solid #c5c2cc;
  border-bottom: 0;
  border-radius: 18px 18px 5px 5px;
  background: linear-gradient(135deg, #f7f6fa, #cbc9d3);
  box-shadow: 0 24px 70px -30px #30204055, 0 0 0 1px #fff8 inset;
}
.hero-device-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 32px;
  padding-inline: 14px;
  border: 1px solid #dedce3;
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
  background: #f5f4f7;
  color: #7b7584;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .01em;
}
.hero-device-dots { display: flex; gap: 5px; }
.hero-device-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d0ccd6; }
.hero-device-address { display: flex; align-items: center; gap: 5px; }
.hero-device-address svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.hero-device-menu { display: grid; justify-self: end; gap: 3px; }
.hero-device-menu i { width: 10px; height: 1px; background: #bcb7c4; }
.hero-device > img { width: 100%; height: auto; aspect-ratio: 1906 / 918; object-fit: cover; background: #ebe8e0; }
.hero-device-base {
  position: relative;
  height: 14px;
  margin-inline: -3%;
  border: 1px solid #bcb8c5;
  border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
  background: linear-gradient(#eeedf2 0%, #d5d2dc 50%, #b7b3bf 100%);
  box-shadow: 0 22px 24px -12px #30204035;
}
.hero-device-base::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 43%;
  width: 14%;
  height: 5px;
  border-radius: 0 0 8px 8px;
  background: #aaa6b366;
  box-shadow: 0 1px 1px #fff9;
}

[data-theme="dark"] .hero-showcase {
  --hero-surface: #151515;
  --hero-text: #f5f3f8;
  --hero-secondary: #b4afbe;
  --hero-action: #bca0e7;
}
[data-theme="dark"] .hero-showcase h1 > .hero-title-accent { background-image: linear-gradient(110deg, #e0c9fc 18%, #b398e5 49%, #8f9aed 83%); }
[data-theme="dark"] .hero-cta { background: #7952b6; color: #fff; }
[data-theme="dark"] .hero-cta:hover { background: #8a60c8; }
[data-theme="dark"] .hero-aura { opacity: .8; background: radial-gradient(ellipse at 37% 51%, #7952b655, transparent 53%), radial-gradient(ellipse at 68% 50%, #5364bd3d, transparent 55%); }
[data-theme="dark"] .hero-device { background: linear-gradient(135deg, #68636f, #302c38); border-color: #77717f; box-shadow: 0 24px 70px -20px #0008, 0 0 0 1px #ffffff18 inset; }
[data-theme="dark"] .hero-device-toolbar { background: #28252e; color: #b9b1c7; border-color: #37313f; }
[data-theme="dark"] .hero-device-dots i { background: #5d5668; }
[data-theme="dark"] .hero-device-base { border-color: #696171; background: linear-gradient(#756e7e, #433d4b 55%, #2b2633); box-shadow: 0 22px 24px -12px #0008; }
[data-theme="dark"] .hero-device-base::before { background: #201a3090; box-shadow: 0 1px 1px #ffffff20; }

@keyframes hero-copy-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-device-in {
  from { opacity: 0; transform: translateY(72px) rotateX(15deg) scale(.9); }
  to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
@keyframes hero-aura-in {
  from { transform: scale(.8); opacity: 0; }
  to { transform: scale(1); }
}

@media (min-width: 1600px) {
  .hero-showcase { padding-top: 60px; }
  .hero-showcase h1 { font-size: 80px; }
  .hero-stage { width: min(60%, 1040px); margin-top: 48px; padding-bottom: 64px; }
}
@media (min-width: 901px) and (max-height: 850px) {
  .hero-showcase { padding-top: 28px; }
  .hero-showcase h1 { font-size: 56px; }
  .hero-intro > p { margin-top: 12px; font-size: 17px; }
  .hero-links { margin-top: 18px; }
  .hero-stage { width: min(100% - 64px, 680px); margin-top: 26px; padding-bottom: 28px; }
}
@media (max-width: 600px) {
  .hero-showcase { padding-top: 48px; }
  .hero-showcase h1 { font-size: clamp(36px, 7.8vw, 47px); letter-spacing: -.06em; line-height: 1.14; }
  .hero-intro { width: calc(100% - 28px); }
  .hero-intro > p { max-width: 290px; margin: 18px auto 0; font-size: 15px; }
  .hero-links { margin-top: 23px; gap: 9px 22px; }
  .hero-cta, .hero-project-link { font-size: 12px; }
  .hero-cta { padding-inline: 21px; }
  .hero-stage { width: calc(100% - 42px); margin-top: 48px; padding-bottom: 60px; perspective: 800px; }
  .hero-device { border-radius: 11px 11px 3px 3px; padding: 4px 4px 0; }
  .hero-device-toolbar { height: 23px; padding-inline: 8px; font-size: 7px; border-radius: 7px 7px 0 0; }
  .hero-device-dots { gap: 3px; }
  .hero-device-dots i { width: 4px; height: 4px; }
  .hero-device-base { height: 9px; }
  .hero-device-base::before { height: 3px; }
  .hero-aura { inset: -35% -20% -8%; filter: blur(16px); }
}
@media (max-width: 359px) {
  .hero-showcase h1 { font-size: 32px; }
  .hero-intro > p { font-size: 14px; max-width: 260px; }
  .hero-links { gap: 8px 16px; }
  .hero-cta { padding-inline: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-showcase *, .hero-showcase *::before, .hero-showcase *::after { animation: none !important; transition: none !important; }
  .hero-product { transform: none; }
}
@media (forced-colors: active) {
  .hero-showcase h1 > .hero-title-accent { background: none; -webkit-text-fill-color: currentColor; }
  .hero-cta { border-color: ButtonText; }
}
@media print {
  .hero-showcase { padding-block: 30px; background: white; color: black; }
  .hero-showcase h1 > .hero-title-accent { background: none; -webkit-text-fill-color: currentColor; }
  .hero-stage { display: none; }
}