/* AmazingWeb - site styles
 * Light pastel world (mist/paper) + one dark band (references, footer).
 * Every effect is progressive: without support it drops out and the content stays readable.
 * Motion lives inside (prefers-reduced-motion: no-preference) and pauses under html.is-calm.
 */

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --mist: #F1EEFA;
  --paper: #FBFAFF;
  --night: #0F1222;
  --night-2: #181C33;
  --ink: #171A2B;
  --ink-2: #4A4F6A;
  --ink-3: #5D627E;
  --lav: #A897FF;
  --lav-deep: #6C5CE7;
  --lav-ink: #5A49D6;          /* lav-deep, one step deeper: small accent text on mist/paper (5.4:1+) */
  --coral: #FF6F4F;
  --peach: #FF9F7A;
  --mint: #6ED3B5;
  --butter: #FFD66B;
  --sky: #8EC5FF;
  --line: rgba(23, 26, 43, .09);
  --hdr: 64px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-lg: 28px;
  --r-md: 20px;
  --shadow-1: 0 1px 2px rgba(23, 26, 43, .05), 0 10px 28px -12px rgba(76, 62, 170, .22);
  --shadow-2: 0 2px 4px rgba(23, 26, 43, .04), 0 30px 60px -24px rgba(76, 62, 170, .34);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  interpolate-size: allow-keywords;
}
@media (max-width: 767px) { :root { --hdr: 56px; } }
@media (min-width: 1600px) { :root { --wrap: 1320px; } html { font-size: 106.25%; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr) + 16px);
  background: var(--paper);
}
/* phones: keep focused controls clear of the fixed bottom bar */
@media (max-width: 767px) { html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }
/* classic scrollbars: keep the gutter when the popup locks scrolling, so the page does not jump sideways */
@media (hover: hover) and (pointer: fine) { html { scrollbar-gutter: stable; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
img, svg, canvas, picture { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(168, 151, 255, .38); }
:focus-visible { outline: 3px solid var(--lav-deep); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic--fill, .ic .fill { fill: currentColor; stroke: none; }
/* sentence / meaning units: lines prefer to break between them; a unit wider than the line still wraps inside */
.sn, .u { display: inline-block; }

/* ---------- buttons ---------- */
.btn {
  --bh: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--bh); padding: 6px 26px;
  border: 0; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1.3; letter-spacing: -.01em; text-align: center;
  text-decoration: none; cursor: pointer;
  position: relative; isolation: isolate;
  transition: transform .35s var(--spring), box-shadow .3s ease, background-color .2s ease, translate .5s var(--ease-out);
}
.btn .ic { width: 18px; height: 18px; }
.btn .arr { transition: transform .35s var(--spring); }
.btn:hover .arr { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn--coral {
  background: var(--coral); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(150, 40, 10, .18), 0 12px 26px -12px rgba(255, 111, 79, .8);
}
.btn--coral:hover { background: #FF8063; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(150, 40, 10, .18), 0 16px 32px -12px rgba(255, 111, 79, .9); }
.btn--ghost { background: rgba(255, 255, 255, .78); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(23, 26, 43, .16); }
.btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(108, 92, 231, .55); }
.btn--sm { --bh: 40px; padding: 4px 18px; font-size: .9375rem; }
.btn--lg { --bh: 56px; padding: 6px 30px; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.magnet { translate: var(--mgx, 0px) var(--mgy, 0px); }

.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: 0; color: var(--ink-2); background: var(--mist);
}
.tag--req { color: #8F2410; background: #FFE6DF; }

/* ---------- skip link, progress ---------- */
.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s ease;
}
.skip:focus { transform: none; }
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none; }
.progress span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, var(--lav), var(--peach), var(--butter));
}
@supports (animation-timeline: scroll()) {
  .progress span { animation: grow-x linear both; animation-timeline: scroll(root block); }
}
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 70; height: var(--hdr);
  background: rgba(241, 238, 250, .74);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hdr.is-scrolled { background: rgba(251, 250, 255, .8); border-bottom-color: rgba(23, 26, 43, .07); box-shadow: 0 10px 30px -22px rgba(40, 30, 110, .45); }
html.hdr-on-dark .hdr { background: rgba(15, 18, 34, .78); border-bottom-color: rgba(255, 255, 255, .06); box-shadow: none; }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 20px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.1875rem; letter-spacing: -.02em;
}
.logo__mark { width: 34px; height: 34px; transition: transform .5s var(--spring); }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }
.logo__word span, .footer__brand-logo-text span { color: var(--lav-ink); }
.logo, .logo__word span, .nav a { transition: color .3s ease, background-color .2s ease; }
html.hdr-on-dark .logo { color: #fff; }
html.hdr-on-dark .logo__word span { color: var(--lav); }
html.hdr-on-dark .nav a { color: rgba(255, 255, 255, .78); }
html.hdr-on-dark .nav a:hover, html.hdr-on-dark .nav a.is-current { color: #fff; background: rgba(255, 255, 255, .08); }
.nav { margin-left: auto; }
.nav ul, .subnav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; position: relative; padding: 8px 14px; border-radius: 999px;
  color: var(--ink-2); font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.nav a:hover { color: var(--ink); background: rgba(108, 92, 231, .09); }
.nav a.is-current { color: var(--ink); }
.nav a.is-current::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--coral);
}
.hdr__cta { flex: none; }
.subnav { display: none; }
@media (max-width: 767px) {
  .nav { display: none; }
  .hdr__cta { margin-left: auto; }
  .logo { font-size: 1.0625rem; }
  .logo__mark { width: 30px; height: 30px; }
  .subnav { display: block; background: var(--mist); position: relative; z-index: 3; }
  .subnav ul { gap: 6px; padding: 4px var(--gutter) 10px; overflow-x: auto; scrollbar-width: none; }
  .subnav ul::-webkit-scrollbar { display: none; }
  .subnav ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .subnav li:last-child { padding-right: 20px; }
  .subnav a {
    display: block; white-space: nowrap; padding: 6px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(23, 26, 43, .1);
    font-size: .875rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
  }
}

/* ---------- hero ---------- */
.hero { --hero-scroll: 300vh; position: relative; background: var(--mist); }
.hero__stage {
  position: relative; display: flex; align-items: center;
  min-height: max(640px, calc(100svh - var(--hdr)));
  overflow: hidden; background: var(--mist);
}
.hero__visual { position: absolute; inset: 0; z-index: 0; }
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 100% 50%; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.hero.is-drawn .hero__canvas { display: block; }
.hero.is-drawn .hero__poster { visibility: hidden; }
.hero__aura {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 8% 22%, rgba(168, 151, 255, .26), transparent 70%),
    radial-gradient(30% 40% at 30% 92%, rgba(255, 159, 122, .18), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(251, 250, 255, 0), var(--paper));
}
.hero__inner { position: relative; z-index: 2; }
.hero__copy { width: fit-content; max-width: min(680px, 100%); padding: clamp(28px, 6svh, 72px) 0; }
.hero__chip {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 7px 15px 7px 11px;
  border-radius: 999px; background: #fff; color: var(--ink); font-size: .875rem; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(108, 92, 231, .2), 0 8px 18px -10px rgba(108, 92, 231, .55);
}
.hero__ping { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.hero__title {
  margin: 0; font-weight: 800; letter-spacing: -.04em; line-height: 1.16;
  font-size: min(clamp(2rem, 1.1rem + 2.7vw, 4rem), 7.2svh);
}
.hero__sub {
  margin: 18px 0 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.35; color: var(--ink);
  font-size: min(clamp(1.25rem, .9rem + 1.1vw, 2rem), 4.4svh);
}
.hero__sub em {
  font-style: normal; color: var(--lav-ink); padding: 0 .06em;
  background: linear-gradient(transparent 64%, rgba(255, 214, 107, .75) 64%, rgba(255, 214, 107, .75) 92%, transparent 92%);
}
.hero__price { margin: 12px 0 0; font-size: .9375rem; font-weight: 500; color: var(--ink-2); }
.hero__price s { text-decoration-thickness: 1.5px; }
.hero__price strong { color: var(--ink); font-weight: 800; }
.hero__beatbox { display: grid; margin-top: 26px; }
.hero__hint, .hero__beats { grid-area: 1 / 1; }
.hero__hint { display: none; align-items: center; gap: 12px; }
.hero__hint .i3d { --size: 52px; }
.hero__hint-text { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--ink-2); }
.hero__beats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; counter-reset: beat;
}
.hero__beat { position: relative; padding-left: 34px; counter-increment: beat; }
.hero__beat::before {
  content: counter(beat, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-size: .75rem; font-weight: 800; color: var(--lav-ink); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.hero__beat-head { margin: 0 0 2px; font-size: .8125rem; font-weight: 800; color: var(--lav-ink); }
.hero__beat-text { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.hero__rail { display: none; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__skip { display: none; }

/* moving state (html.seq-anim): the stage is held while the section scrolls by */
.seq-anim .hero { height: calc(100vh - var(--hdr) + var(--hero-scroll)); height: calc(100svh - var(--hdr) + var(--hero-scroll)); }
.seq-anim .hero__stage {
  position: sticky; top: var(--hdr);
  height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); min-height: 0;
}
.seq-anim .hero__poster { display: none; }
.seq-anim .hero__canvas { display: block; opacity: 0; transition: opacity .5s ease; }
.seq-anim .hero.is-drawn .hero__canvas { opacity: 1; }
/* stand-in for the first frame until the canvas has one: a tiny blurred copy of it.
   Default box = the wide fit (full height, right edge at 93.75% of the frame); hero-seq.js sets the exact box. */
.seq-anim .hero__visual::before {
  content: ""; position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 16 / 9;
  transform: translateX(6.25%); pointer-events: none; filter: blur(6px);
  background: url("data:image/webp;base64,UklGRs4AAABXRUJQVlA4IMIAAADQBQCdASowABsAPoUyk0glIqGhOrzIAKAQiWMAVgHQDn/y7BF7phdcXXndpZBp4KcfWyZYWaYAAP76os+2TsT1aPb2Yj7A/5yrRymlT3ioQWQ0erZLRbI1Z0t7+sHod1Apr8JFgCR09Xg03EuQXlfLu2f4Kk1/EdjEUi3IqgPXNC5Xv34xje7hLQe+eNN0jKhxsvHw2KAogeIflVR1sTtwZ11F4KWgdHWqP0qbVVa+h6JnIf4yiTGahfsDSFoxkRAAAA==") 50% 50% / 100% 100% no-repeat;
  transition: opacity .5s ease;
}
.seq-anim .hero__visual.is-placed::before {
  top: var(--ph-y); right: auto; bottom: auto; left: var(--ph-x); width: var(--ph-w); height: var(--ph-h); aspect-ratio: auto; transform: none;
}
.seq-anim .hero.is-drawn .hero__visual::before { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
/* where the copy column narrows the frame the default box is off: wait for the exact one */
@media (min-width: 1024px) and (orientation: landscape) and (max-aspect-ratio: 3/2), (min-width: 1024px) and (max-width: 1179px) and (orientation: landscape) {
  .seq-anim .hero__visual:not(.is-placed)::before { visibility: hidden; }
}
.seq-anim .hero__hint { display: flex; }
.seq-anim .hero__beats { grid-template-columns: 1fr; gap: 0; }
.seq-anim .hero__beat { grid-area: 1 / 1; padding-left: 0; }
.seq-anim .hero__beat::before { content: none; }
.seq-anim .hero__beat-head {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 3px 11px;
  border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(108, 92, 231, .22);
}
.seq-anim .hero__beat-text { font-size: clamp(1.125rem, .85rem + .7vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.45; }
.seq-anim .hero__beat, .seq-anim .hero__hint {
  opacity: 0; transform: translateY(12px); filter: blur(5px); pointer-events: none;
  transition: opacity .45s ease, transform .55s var(--ease-out), filter .45s ease;
}
.seq-anim .hero__beat.is-on, .seq-anim .hero__hint.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.seq-anim .hero__rail { display: flex; gap: 6px; margin-top: 18px; }
.hero__seg { position: relative; width: 40px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero__seg::before, .hero__seg span {
  content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
}
.hero__seg::before { width: 100%; background: rgba(23, 26, 43, .5); }
.hero__seg span { width: calc(var(--p, 0) * 100%); background: var(--lav-deep); }
.hero__seg:hover::before { background: rgba(23, 26, 43, .66); }
/* the scene's heading as a tip (text set by hero-seq.js from the caption) */
.hero__seg::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 4px); z-index: 2;
  padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: .75rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity .2s ease, transform .25s var(--ease-out), visibility 0s linear .2s;
}
.hero__seg:first-child::after { left: 0; transform: translate(0, 4px); }
.hero__seg:not([data-tip])::after { content: none; }
.hero__seg:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.hero__seg:first-child:focus-visible::after { transform: none; }
@media (hover: hover) {
  .hero__seg:hover::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .hero__seg:first-child:hover::after { transform: none; }
}
.seq-anim .hero__skip {
  display: inline-flex; align-items: center; position: absolute; right: 24px; bottom: 18px; z-index: 5;
  min-height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(23, 26, 43, .28); background: rgba(255, 255, 255, .78); color: var(--ink);
  font-size: .8125rem; font-weight: 600;
  transition: background-color .2s ease, opacity .3s ease, visibility 0s;
}
.hero__skip::after { content: ""; position: absolute; inset: -5px -4px; }
.hero__skip:hover { background: #fff; }
.hero.is-done .hero__skip { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }

/* wide screens: the two title lines stay as written */
@media (min-width: 1024px) and (orientation: landscape) {
  .hero__title { white-space: nowrap; }
}
/* short wide windows: fold the chip so the copy never runs out of the held stage */
@media (min-width: 1024px) and (orientation: landscape) and (max-height: 720px) {
  .seq-anim .hero__chip { display: none; }
  .seq-anim .hero__copy { padding: 16px 0; }
  .seq-anim .hero__beatbox { margin-top: 18px; }
  .seq-anim .hero__cta { margin-top: 18px; }
}
/* short wide windows: the frame's base nears the bottom edge, so the skip button sits lower and smaller */
@media (min-width: 1024px) and (orientation: landscape) and (max-height: 800px) {
  .seq-anim .hero__skip { right: 14px; bottom: 6px; min-height: 30px; padding: 0 12px; font-size: .75rem; }
}

/* stacked: copy above, picture below - same query as hero-seq.js and <picture> */
@media (max-width: 1023px), (orientation: portrait) {
  .hero__stage { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__inner { order: 1; }
  .hero__visual { order: 2; position: relative; inset: auto; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 7 / 6; }
  .hero__poster { object-position: 50% 50%; }
  .hero__aura { background: radial-gradient(38% 46% at 8% 22%, rgba(168, 151, 255, .26), transparent 70%); }
  .hero__copy { width: auto; max-width: 640px; padding: 28px 0 8px; }
  .hero__title { font-size: clamp(1.75rem, 1rem + 4vw, 2.75rem); }
  .hero__sub { font-size: clamp(1.125rem, .9rem + 1.6vw, 1.5rem); margin-top: 12px; }
  .hero__beats { grid-template-columns: 1fr; }
  .hero::after { height: 48px; }

  .seq-anim .hero { --hero-scroll: 260vh; }
  .seq-anim .hero__stage { padding-bottom: 54px; }
  .seq-anim .hero__inner { position: static; }
  .seq-anim .hero__copy { padding: 16px 0 6px; }
  .seq-anim .hero__visual { flex: 1 1 0; min-height: 0; max-width: none; aspect-ratio: auto; }
  .seq-anim .hero__visual::before {
    inset: 0; width: auto; height: auto; aspect-ratio: auto; transform: none; background-size: contain;
    background-image: url("data:image/webp;base64,UklGRjgBAABXRUJQVlA4ICwBAAAwBwCdASoqACQAPp1In0wlpCKiI4oAsBOJQBfebmqYivA99VnazjY9jItNsDLFFxg3s7itjnqbU7nCG+aNr5CbCAAA/v33MP1Z5TqOLJkNiDKS++Kk6zOfnhNjXiutRDGVGW2TXXvGASQdgKlagxQlzmE65+SRj/IXQaFrGdTt3p/zA4VbFK5ot3c/gcgPa8GrMQc6/1fPq7ion6cmz/0vkXxDN7nixqmtfrSSI6kXqdql0B5stbCtQDOb3iF4+rqQ//cVtlY4Q1nWff2ytmzs/YIYSYiNyTwSeYymc+RnYKScrqJCUY3bZEJMwHQTkaqBaqgKrlmvowOe/dIFn9opfZZBm6DlyGU7yqIZobrtNl6XQDf/MpF7njT0C+duks694mkl/AeE3b7cAAA=");
  }
  .seq-anim .hero__rail { position: absolute; left: var(--gutter); bottom: 6px; z-index: 5; margin: 0; gap: 4px; }
  .seq-anim .hero__seg { width: 28px; height: 44px; }
  .seq-anim .hero__skip { right: var(--gutter); bottom: 10px; }
  .seq-anim .hero__beatbox { margin-top: 16px; }
  .seq-anim .hero__cta { margin-top: 16px; }
}
@media (max-width: 599px) {
  .hero__cta .btn { flex: 1 1 100%; }
  .seq-anim .hero__chip { display: none; }
  .seq-anim .hero__copy { padding-top: 12px; }
  .seq-anim .hero__title { font-size: clamp(1.5rem, 1rem + 3.4vw, 2rem); }
  .seq-anim .hero__sub { font-size: 1.0625rem; margin-top: 6px; }
  .seq-anim .hero__price { font-size: .8125rem; margin-top: 6px; }
  .seq-anim .hero__beatbox { margin-top: 12px; }
  .seq-anim .hero__beat-head { font-size: .75rem; margin-bottom: 4px; }
  .seq-anim .hero__beat-text { font-size: .9375rem; font-weight: 600; letter-spacing: 0; line-height: 1.5; }
  .seq-anim .hero__hint .i3d { --size: 52px; }
.hero__hint-text { font-size: .875rem; }
  .seq-anim .hero__cta { margin-top: 12px; }
  .seq-anim .hero__cta .btn--ghost { display: none; }
  .seq-anim .hero__cta .btn { --bh: 46px; }
}
@media (max-width: 599px) {
  .hero__price .sep, .contact__facts .sep { display: none; }
  .hero__price .sn--end, .contact__facts .sn--end { display: block; }
}
@media (max-width: 599px) and (max-height: 600px) {
  .seq-anim .hero__copy { padding-top: 6px; }
  .seq-anim .hero__sub { margin-top: 4px; }
  .seq-anim .hero__beatbox { margin-top: 8px; }
  .seq-anim .hero__cta { margin-top: 8px; }
  .seq-anim .hero__cta .btn { --bh: 44px; }
}
@media (max-width: 399px) {
  .seq-anim .hero__seg { width: 25px; }
}
@media (max-width: 359px) {
  .seq-anim .hero__seg { width: 22px; }
  .seq-anim .hero__skip { padding: 0 12px; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding-block: clamp(64px, min(10vw, 14vh), 140px); }
.sec__head { position: relative; max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-size: .875rem; font-weight: 800; letter-spacing: .01em; color: var(--lav-ink);
}
.eyebrow::before {
  content: ""; width: 28px; height: 8px; flex: none;
  background:
    radial-gradient(circle at 4px 4px, var(--coral) 3.2px, transparent 3.7px),
    radial-gradient(circle at 14px 4px, var(--butter) 3.2px, transparent 3.7px),
    radial-gradient(circle at 24px 4px, var(--mint) 3.2px, transparent 3.7px);
}
.h2 {
  margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1.24;
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.875rem);
}
.lead { margin: 20px 0 0; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); color: var(--ink-2); }
.lead--sm { font-size: 1rem; }

/* ---------- cards, spotlight, tilt ---------- */
.card {
  position: relative; display: flow-root; border-radius: var(--r-lg); background: #fff;
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
.card__title { margin: 0 0 10px; font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.35; }
.card__text { margin: 0; color: var(--ink-2); font-size: .96875rem; line-height: 1.7; }
.spot { --mx: 50%; --my: 50%; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(168, 151, 255, .18), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
.spot:hover::after { opacity: 1; }
.tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-out), box-shadow .35s ease, translate .45s var(--spring);
}
.tilt.is-tilting { transition: transform .1s linear, box-shadow .35s ease, translate .45s var(--spring); }
.tilt:hover { translate: 0 -4px; box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(108, 92, 231, .16); }

/* ---------- 3D emoticons ---------- */
.i3d {
  --size: 112px; --c1: #C9BEFF; --c2: #8E7BF2;
  position: relative; display: block; flex: none; width: var(--size); height: var(--size);
  transform: translateZ(var(--z, 0px)); scale: var(--pop, 1);
  transition: scale .5s var(--spring);
}
.i3d picture, .i3d img { width: 100%; height: 100%; }
.i3d img {
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(60, 40, 140, .2));
  transform: perspective(500px) rotateX(var(--ix, 0deg)) rotateY(var(--iy, 0deg));
  transition: transform .4s var(--ease-out);
}
.i3d::before {
  content: ""; position: absolute; inset: 16%; display: none;
  border-radius: 44% 56% 52% 48% / 50% 44% 56% 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 50% 62%, var(--c1), var(--c2));
  box-shadow: inset -8px -10px 18px rgba(30, 20, 80, .14), inset 6px 8px 14px rgba(255, 255, 255, .55), 0 16px 22px -12px rgba(60, 40, 140, .45);
}
.i3d.is-missing::before { display: block; }
[data-optional].is-missing { display: none; }
.i3d.is-missing picture { display: none; }
.i3d[data-key="crowd"], .i3d[data-key="globe"], .i3d[data-key="devices"] { --c1: #CFE6FF; --c2: #6FAEF5; }
.i3d[data-key="bugcode"], .i3d[data-key="rocket"], .i3d[data-key="worry"] { --c1: #FFD2C2; --c2: #FF8A66; }
.i3d[data-key="ghostphone"], .i3d[data-key="cube"], .i3d[data-key="scroll"] { --c1: #DCD4FF; --c2: #9C8AF7; }
.i3d[data-key="bolt"], .i3d[data-key="bulb"], .i3d[data-key="gift"], .i3d[data-key="pencil"] { --c1: #FFF0BF; --c2: #FFC93F; }
.i3d[data-key="mail"], .i3d[data-key="calendar"], .i3d[data-key="palette"] { --c1: #C9F2E4; --c2: #4FC39F; }
.i3d[data-key="heart"] { --c1: #FFD3DC; --c2: #FF7A93; }
.card:hover .i3d, .step:hover .i3d, .plan:hover .i3d--gift { --pop: 1.1; }

/* ---------- why ---------- */
.why { background: linear-gradient(var(--paper), var(--paper)); }
.why__head { max-width: 100%; }
.stats {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  border-radius: 20px; overflow: hidden; background: rgba(23, 26, 43, .09); box-shadow: var(--shadow-1);
  outline: 1px solid var(--line); outline-offset: -1px;
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats__item { padding: 22px 28px; background: #fff; }
.stats__v { margin: 0; font-size: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); }
.stats__u { margin-left: 2px; font-size: .6em; font-weight: 800; letter-spacing: -.01em; }
.stats__l { margin: 6px 0 0; font-size: .875rem; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
.stats__note { margin: 0 0 clamp(56px, 7vw, 88px); font-size: .8125rem; line-height: 1.6; color: var(--ink-3); text-align: center; }
@media (max-width: 359px) { .stats__item { padding: 18px 18px; } }
.i3d--deco { position: absolute; --size: 92px; pointer-events: none; }
.i3d--worry { right: 21%; top: -8px; rotate: -10deg; }
.i3d--bulb { right: 4%; top: 40px; --size: 104px; rotate: 8deg; }
@media (max-width: 899px) { .i3d--deco { display: none; } }
.why__grid {
  list-style: none; margin: 0; padding: 48px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.why__card { height: 100%; padding: 0 30px 34px; }
.why__card .i3d { --size: 124px; --z: 34px; margin: -60px 0 10px -12px; }
.worry {
  position: relative; display: inline-block; margin: 0 0 16px; padding: 7px 14px;
  border-radius: 14px 14px 14px 4px; background: var(--mist);
  color: var(--ink-2); font-size: .875rem; font-weight: 700;
}
.worry::before { content: "\201C"; margin-right: 2px; color: var(--lav-ink); font-weight: 800; }
.worry::after { content: "\201D"; margin-left: 2px; color: var(--lav-ink); font-weight: 800; }
@media (max-width: 899px) {
  .why__grid { grid-template-columns: 1fr; gap: 56px; max-width: 560px; }
}

/* ---------- industries band ---------- */
.band { position: relative; padding: 18px 0 30px; background: var(--paper); overflow: clip; }
.band__label { margin: 0 0 14px; text-align: center; font-size: .875rem; font-weight: 700; color: var(--ink-3); }
.band__viewport {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.band__track { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.band__track li {
  display: flex; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap;
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink);
  transition: color .25s ease;
}
.band__track li:nth-child(3n+2) { color: var(--lav-ink); }
.band__track li::after {
  content: ""; width: 20px; height: 20px; flex: none;
  background: conic-gradient(from 45deg, var(--coral), var(--butter), var(--mint), var(--sky), var(--lav), var(--coral));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.band__track li:hover { color: var(--coral); }

/* ---------- craft (bento) ---------- */
.craft { background: radial-gradient(60% 50% at 100% 0%, rgba(142, 197, 255, .14), transparent 70%), var(--paper); }
.bento {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px;
}
.bento__cell { container-type: inline-size; }
.b1 { grid-column: span 7; grid-row: span 2; }
.b2, .b3 { grid-column: span 5; }
.b4, .b5, .b6 { grid-column: span 4; }
.b7 { grid-column: span 12; }
.bento__card { display: flex; flex-direction: column; gap: 22px; height: 100%; padding: 24px 26px 28px; }
.bento__text { position: relative; z-index: 1; padding-right: 64px; }
.bento__text .i3d { position: absolute; right: -8px; top: -30px; --size: 78px; --z: 40px; }
.demo { position: relative; z-index: 1; }
@container (min-width: 760px) {
  .bento__card--wide { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .bento__card--wide .bento__text { max-width: 640px; padding-right: 0; padding-left: 100px; }
  .bento__card--wide .bento__text .i3d { left: -6px; right: auto; top: 50%; margin-top: -42px; --size: 84px; }
}
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b1 { grid-column: span 2; grid-row: auto; }
  .b2, .b3, .b4, .b5, .b6 { grid-column: span 1; }
  .b7 { grid-column: span 2; }
}
/* phones: one swipe strip, a card and a peek of the next, with position dots */
.bento__dots { display: none; }
@media (max-width: 639px) {
  .bento {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
    margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .bento::-webkit-scrollbar { display: none; }
  .b1, .b2, .b3, .b4, .b5, .b6, .b7 { grid-column: auto; grid-row: auto; }
  .bento__cell { scroll-snap-align: start; }
  .bento__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
  .bento__dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(23, 26, 43, .22); transition: width .3s var(--ease-out), background-color .3s ease; }
  .bento__dots i.is-on { width: 22px; background: var(--lav-deep); }
}

/* film: frames passing a playhead */
.demo--film {
  height: 210px; height: clamp(190px, 24cqi, 290px); flex: 1 1 auto; min-height: 190px;
  border-radius: 18px; background: #1A1D33; overflow: hidden; display: flex; align-items: center;
}
.demo--film::before, .demo--film::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px; z-index: 2;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 9px, transparent 9px 20px);
}
.demo--film::before { top: 9px; }
.demo--film::after { bottom: 9px; }
.film { display: flex; gap: 10px; height: calc(100% - 50px); padding: 0 14px; width: max-content; }
.film__f {
  position: relative; flex: none; height: 100%; aspect-ratio: 7 / 6; border-radius: 9px; overflow: hidden;
  background: linear-gradient(140deg, #2C3156, #46398A);
}
.film__f img { width: 100%; height: 100%; object-fit: cover; }
.film__f:nth-child(2n) { background: linear-gradient(140deg, #2F3A5E, #3A6B8C); }
.film__head {
  position: absolute; top: 18px; bottom: 18px; left: 50%; width: 3px; margin-left: -1.5px; z-index: 3; border-radius: 2px;
  background: var(--butter); box-shadow: 0 0 14px rgba(255, 214, 107, .9);
}
/* devices: the subject keeps its place on every screen */
.demo--devices { display: flex; align-items: flex-end; justify-content: center; gap: 10px; gap: min(16px, 3cqi); height: 132px; }
.dev { position: relative; display: block; border: 3px solid var(--ink); background: var(--mist); }
.dev img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: inherit; }
.dev--mon { width: min(122px, 26%); width: min(122px, 27cqi); aspect-ratio: 16 / 10; border-radius: 9px; margin-bottom: 18px; }
.dev--mon::after { content: ""; position: absolute; left: 50%; bottom: -21px; width: 34%; height: 14px; margin-left: -17%; border-radius: 0 0 6px 6px; background: var(--ink); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.dev--lap { width: min(98px, 21%); width: min(98px, 22cqi); aspect-ratio: 16 / 10; border-radius: 8px 8px 2px 2px; margin-bottom: 6px; }
.dev--lap::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -9px; height: 6px; border-radius: 0 0 6px 6px; background: var(--ink); }
.dev--tab { width: min(56px, 12%); width: min(56px, 13cqi); aspect-ratio: 3 / 4; border-radius: 10px; }
.dev--pho { width: min(32px, 7.5%); width: min(32px, 8cqi); aspect-ratio: 9 / 17; border-radius: 8px; }
/* preload window */
.demo--window { --n: 14; --gap: 6px; --ww: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) * 4 + 3 * var(--gap) + 8px); display: flex; gap: var(--gap); align-items: center; height: 120px; padding: 0 4px; }
.demo--window span { flex: 1; aspect-ratio: 3 / 4; border-radius: 6px; background: #E7E2F8; }
.demo--window span:nth-child(-n+5) { background: #CFC5F7; }
.demo--window .win {
  position: absolute; left: 0; top: 50%; height: calc(var(--cell, 30px) + 26px); width: var(--ww);
  transform: translateY(-50%); border-radius: 10px; border: 2px solid var(--lav-deep);
  background: rgba(168, 151, 255, .16); box-shadow: 0 0 0 6px rgba(168, 151, 255, .12);
}
/* line breaks: the same title, wrapped by the browser vs. as written */
.demo--wrap { display: grid; align-content: center; gap: 8px; min-height: 120px; }
.wrapcmp { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.wrapcmp__tag { padding: 1px 9px; border-radius: 999px; background: var(--mist); color: var(--ink-3); font-size: .6875rem; font-weight: 800; line-height: 1.6; white-space: nowrap; }
.wrapcmp__t { font-size: .8125rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.4; white-space: nowrap; color: var(--ink); }
.wrapcmp--auto .wrapcmp__t { color: var(--ink-3); opacity: .75; text-decoration: line-through; text-decoration-color: rgba(255, 111, 79, .85); text-decoration-thickness: 1.5px; }
.wrapcmp--ok { box-shadow: inset 0 0 0 1.5px rgba(108, 92, 231, .35); }
.wrapcmp--ok .wrapcmp__tag { background: #ECE8FF; color: var(--lav-ink); }
@container (min-width: 340px) {
  .wrapcmp { flex-direction: row; align-items: center; gap: 12px; }
  .wrapcmp__tag { flex: none; min-width: 84px; text-align: center; }
}
/* mail: the notice that arrives and the list it lands in */
.demo--mail { display: grid; align-content: center; gap: 8px; min-height: 120px; }
.note {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line), 0 10px 20px -14px rgba(23, 26, 43, .45);
}
.note__ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: #fff; }
.note__ic .ic { width: 16px; height: 16px; }
.note__t { min-width: 0; font-size: .75rem; font-weight: 800; line-height: 1.4; color: var(--ink); }
.note__dot { position: absolute; right: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px #fff; }
.adm { display: grid; gap: 1px; overflow: hidden; border-radius: 12px; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.adm__row { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #fff; font-size: .75rem; line-height: 1.4; color: var(--ink-2); white-space: nowrap; }
.adm__row b { color: var(--ink); font-weight: 800; }
.adm__sep { color: var(--ink-3); }
.adm__st { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: .6875rem; font-weight: 800; }
.adm__st--new { background: #FFE3DB; color: #8F2410; }
.adm__st--talk { background: #DDF6EE; color: #1B7A60; }
/* search result + link preview, with this page's own title, description and picture */
.demo--search { display: grid; gap: 8px; align-content: center; min-height: 120px; }
.serp, .og { display: flex; min-width: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line), 0 10px 22px -16px rgba(60, 40, 140, .5); }
.serp { flex-direction: column; gap: 2px; padding: 9px 12px; }
.serp__u { font-size: .625rem; font-weight: 600; line-height: 1.5; color: #1B7A60; }
.serp__t, .serp__d, .og__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.serp__t { font-size: .75rem; font-weight: 800; line-height: 1.4; color: #3F33B8; }
.serp__d { font-size: .6875rem; line-height: 1.45; color: var(--ink-2); }
.og { align-items: center; gap: 10px; overflow: hidden; padding-right: 10px; }
.og__img { flex: none; width: 96px; height: auto; aspect-ratio: 40 / 21; object-fit: cover; background: linear-gradient(135deg, var(--lav), var(--peach)); }
.og__t { font-size: .6875rem; font-weight: 800; line-height: 1.4; color: var(--ink); }
.og__u { display: block; margin-top: 1px; font-size: .625rem; color: var(--ink-3); }
.og__txt { min-width: 0; }
@container (min-width: 340px) {
  .demo--search { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
  .og { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 8px; }
  .og__img { width: 100%; }
  .og__t { margin: 6px 10px 0; }
  .og__u { margin: 2px 10px 0; }
}
/* motion switch */
.demo--switch { display: flex; align-items: center; justify-content: center; }
.switch { padding: 6px; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.switch__track { position: relative; display: block; width: 80px; height: 44px; border-radius: 999px; background: #8A83AA; transition: background-color .3s ease; }
.switch__knob { position: absolute; top: 5px; left: 5px; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(23, 26, 43, .35); transition: transform .45s var(--spring); }
.switch[aria-checked="true"] .switch__track { background: #23866B; }
.switch[aria-checked="true"] .switch__knob { transform: translateX(36px); }

/* ---------- work (references) ---------- */
.work { background: var(--night); color: #fff; overflow: clip; border-radius: clamp(28px, 4vw, 56px); margin-inline: clamp(0px, 1.5vw, 24px); }
.work__aura {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 40% at 0% 0%, rgba(168, 151, 255, .22), transparent 70%),
    radial-gradient(36% 42% at 100% 100%, rgba(255, 159, 122, .16), transparent 70%),
    radial-gradient(30% 30% at 70% 10%, rgba(142, 197, 255, .12), transparent 70%);
}
.work .wrap { position: relative; }
.work .eyebrow { color: var(--lav); }
.work .h2 { color: #fff; }
.work .lead { color: rgba(255, 255, 255, .76); }
.work :focus-visible { outline-color: var(--lav); }
.refs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 640px) {
  .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .refs__item--lead { grid-column: 1 / -1; }
}
/* 640-1023: two to a row under the lead; a card left alone at the end takes the whole row, picture beside the text */
@media (min-width: 640px) and (max-width: 1023px) {
  .refs__item--lead ~ .refs__item:last-child:nth-child(even) { grid-column: 1 / -1; }
  .refs__item--lead ~ .refs__item:last-child:nth-child(even) .ref { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  .refs__item--lead ~ .refs__item:last-child:nth-child(even) .ref__win { margin: 10px 0 10px 10px; }
  .refs__item--lead ~ .refs__item:last-child:nth-child(even) .ref__body { justify-content: center; }
  .refs__item--lead ~ .refs__item:last-child:nth-child(even) .ref__desc { flex: 0 1 auto; }
}
/* 1024+: the lead on its own row, three to a row under it (two share the row when there are only two) */
@media (min-width: 1024px) {
  .refs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .refs > .refs__item { grid-column: span 2; }
  .refs > .refs__item--lead { grid-column: 1 / -1; }
  .refs > .refs__item--lead:nth-last-child(3) ~ .refs__item { grid-column: span 3; }
}
.refs__item { container-type: inline-size; }
.ref {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border-radius: 22px; background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  transition: translate .45s var(--spring), box-shadow .35s ease;
}
.ref::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--ang), transparent 0 62%, var(--lav) 72%, var(--peach) 80%, var(--butter) 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease;
}
.ref::after { border-radius: 22px; }
.ref.tilt { transform-style: flat; transition: transform .6s var(--ease-out), translate .45s var(--spring), box-shadow .35s ease; }
.ref.tilt.is-tilting { transition: transform .1s linear, translate .45s var(--spring), box-shadow .35s ease; }
.ref:hover, .ref:focus-within { translate: 0 -6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.ref:hover::before, .ref:focus-within::before { opacity: 1; }
.ref__win { position: relative; margin: 10px 10px 0; border-radius: 14px; overflow: hidden; background: #22264A; }
.ref__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; background: #262B4F; }
.ref__bar i, .refpop__dots i { width: 9px; height: 9px; border-radius: 50%; background: #FF8A73; flex: none; }
.ref__bar i:nth-child(2), .refpop__dots i:nth-child(2) { background: #FFD66B; }
.ref__bar i:nth-child(3), .refpop__dots i:nth-child(3) { background: #6ED3B5; }
.ref__addr {
  flex: 1; min-width: 0; margin-left: 8px; height: 20px; padding: 0 10px; border-radius: 6px;
  display: flex; align-items: center; background: rgba(255, 255, 255, .07);
  font-size: .75rem; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ref__shot picture { position: absolute; inset: 0; z-index: 1; }
.ref__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 1.4s var(--ease-out); }
.ref:hover .ref__shot img { transform: scale(1.045) translateY(-1.5%); }
.ref__shot.is-missing picture { display: none; }
/* moving preview over the still: faded in once it can play, taken out again when the card is left */
.ref__shot .ref__loop { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .35s ease, transform 1.4s var(--ease-out); }
.ref__shot.is-loop .ref__loop { opacity: 1; }
html.is-calm .ref__loop { display: none; }
.ref__fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 18px 18px / 30% 7px no-repeat,
    linear-gradient(rgba(255, 255, 255, .24), rgba(255, 255, 255, .24)) 18px 34px / 54% 5px no-repeat,
    linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)) right 18px top 18px / 22% 44% no-repeat,
    radial-gradient(120% 80% at 80% 110%, rgba(255, 255, 255, .26), transparent 60%),
    var(--fb, linear-gradient(140deg, #2B2F63, #6C5CE7));
}
.ref__fallback b { font-size: 1.5rem; font-size: clamp(1.25rem, 7cqi, 1.75rem); font-weight: 800; letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
[data-ref="medibrix"] .ref__fallback { --fb: linear-gradient(140deg, #1E2C6B 0%, #4F5BD5 55%, #8EC5FF 120%); }
[data-ref="amazingstore"] .ref__fallback { --fb: linear-gradient(140deg, #0C1F3F 0%, #22407A 58%, #C8860A 130%); }
[data-ref="dongjeon"] .ref__fallback { --fb: linear-gradient(140deg, #3A1B12 0%, #A63A16 58%, #FFB36B 125%); }
[data-ref="mall"] .ref__fallback { --fb: linear-gradient(140deg, #0F3D3A 0%, #2E8C7A 60%, #6ED3B5 120%); }
.ref__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 24px; }
.ref__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .74); }
.ref__badge { padding: 2px 10px; border-radius: 999px; background: rgba(168, 151, 255, .18); color: #D9D1FF; font-weight: 700; }
.ref__name { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.ref__desc { flex: 1; margin: 0; font-size: .9375rem; line-height: 1.7; color: rgba(255, 255, 255, .76); }
.ref__open {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 16px;
  border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  color: #fff; font-weight: 700; font-size: .9375rem; text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.ref__open .ic { width: 18px; height: 18px; transition: transform .35s var(--spring); }
.ref__open::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 22px; }
.ref:hover .ref__open { background: var(--coral); color: var(--ink); box-shadow: none; }
.ref:hover .ref__open .ic { transform: translateX(4px); }
.ref__open:focus-visible { outline: none; }
.ref__open:focus-visible::after { outline: 3px solid var(--lav); outline-offset: 3px; }
@media (min-width: 1024px) {
  .refs__item--lead .ref { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
  .refs__item--lead .ref__win { margin: 10px 0 10px 10px; }
  .refs__item--lead .ref__body { justify-content: center; padding: 32px 36px; }
  .refs__item--lead .ref__desc { flex: 0 1 auto; }
  .refs__item--lead .ref__name { font-size: 1.75rem; }
}
/* the line and button under the cards */
.work__ask {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin-top: clamp(32px, 4vw, 48px); padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 36px);
  border-radius: 22px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.work__ask-text { margin: 0; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.45; color: #fff; }
.work__ask-btn { flex: none; }
@media (max-width: 599px) { .work__ask-btn { width: 100%; } }

/* ---------- price ---------- */
.price { background: linear-gradient(180deg, var(--paper), var(--mist)); }
.plan { position: relative; border-radius: 32px; background: #fff; box-shadow: var(--shadow-2); container-type: inline-size; }
.plan::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ang), rgba(108, 92, 231, .22), var(--lav) 10%, var(--peach) 17%, var(--butter) 23%, rgba(108, 92, 231, .22) 32%, rgba(108, 92, 231, .22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.i3d--gift { position: absolute; right: 3%; top: -64px; --size: 150px; z-index: 2; }
.plan__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.plan__main { padding: 28px; padding: clamp(28px, 5cqi, 52px); }
.plan__side { padding: 28px; padding: clamp(28px, 5cqi, 52px); border-top: 1.5px dashed rgba(23, 26, 43, .12); background: #FAF9FE; border-radius: 0 0 32px 32px; }
.plan__chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 5px 12px 5px 9px; border-radius: 999px;
  background: #FFF4D1; color: #6B4A00; font-size: .8125rem; font-weight: 800;
}
.plan__chip .ic { width: 16px; height: 16px; color: #E0A400; }
.plan__name { margin: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 800; letter-spacing: -.03em; }
.plan__was { margin: 18px 0 0; color: var(--ink-3); font-size: 1rem; font-weight: 600; }
.plan__was s { text-decoration-thickness: 2px; text-decoration-color: rgba(255, 111, 79, .85); }
.plan__now { display: flex; align-items: baseline; gap: 4px; margin: 2px 0 0; line-height: 1; }
.plan__num { font-size: clamp(3.25rem, 2.2rem + 4vw, 5.25rem); font-weight: 800; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.plan__won { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; }
.plan__vat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 26px; font-size: .9375rem; font-weight: 700; color: var(--ink-2); }
.plan__off { padding: 4px 11px; border-radius: 999px; background: #FFE3DB; color: #8F2410; font-size: .8125rem; font-weight: 800; }
.plan__fine { margin: 16px 0 0; font-size: .8125rem; line-height: 1.65; color: var(--ink-3); }
.plan__h { margin: 0 0 14px; font-size: 1rem; font-weight: 800; }
.plan__h--extra { margin-top: 28px; }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; line-height: 1.5; }
.plan__list .ic { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #DDF6EE; color: #1B7A60; stroke-width: 3; margin-top: 1px; }
.plan__extra { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plan__extra li { padding: 6px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.plan__note { margin: 12px 0 0; font-size: .875rem; color: var(--ink-2); }
@container (min-width: 761px) {
  .plan__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .plan__side { border-top: 0; border-left: 1.5px dashed rgba(23, 26, 43, .12); border-radius: 0 32px 32px 0; }
}
@media (max-width: 639px) { .i3d--gift { --size: 112px; top: -52px; right: 12px; } }
/* rolling digits */
.roll { display: inline-flex; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.roll__d { position: relative; display: inline-block; height: 1em; overflow: hidden; }
.roll__s { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1em)); }
.roll__s span, .roll__c { display: block; height: 1em; line-height: 1; }
.roll.is-rolling .roll__s { transition: transform 1.7s cubic-bezier(.16, .9, .12, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.roll__txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media print {
  .roll { display: none; }
  .roll__txt { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* ---------- process ---------- */
.process { background: var(--mist); }
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; view-timeline-name: --steps; }
.steps::before {
  content: ""; position: absolute; top: 52px; left: 10%; right: 10%; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(108, 92, 231, .55) 0 12px, transparent 12px 22px);
  transform-origin: 0 50%;
}
.step { position: relative; padding: 0 6px; }
.step .i3d { --size: 104px; margin-bottom: 14px; }
.step__no {
  display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(108, 92, 231, .25);
  font-size: .8125rem; font-weight: 800; color: var(--lav-ink); font-variant-numeric: tabular-nums;
}
.step__title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.step__text { margin: 0; color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 899px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steps::before { top: 40px; bottom: 40px; left: 41px; right: auto; width: 3px; height: auto; background: repeating-linear-gradient(180deg, rgba(108, 92, 231, .55) 0 12px, transparent 12px 22px); transform-origin: 50% 0; }
  .step { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 18px; padding: 0; }
  .step .i3d { --size: 84px; grid-row: span 3; margin: 0; }
  .step__no { justify-self: start; }
}

/* ---------- FAQ ---------- */
.faq { background: var(--paper); }
.faq__wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq .sec__head { position: sticky; top: calc(var(--hdr) + 32px); }
.faq__list { display: grid; gap: 12px; }
.qa { border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s ease; }
.qa[open] { box-shadow: inset 0 0 0 1.5px rgba(108, 92, 231, .4), var(--shadow-1); }
.qa summary {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 20px;
  list-style: none; cursor: pointer; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover .qa__icon { background: rgba(168, 151, 255, .35); }
.qa__icon { position: relative; flex: none; width: 30px; height: 30px; margin-left: auto; border-radius: 50%; background: var(--mist); transition: transform .45s var(--spring), background-color .2s ease; }
.qa__icon::before, .qa__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 2px; background: var(--ink); transition: transform .45s var(--spring);
}
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon { transform: rotate(180deg); background: var(--lav); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa__a { padding: 0 22px 22px; color: var(--ink-2); }
.qa__a p { margin: 0; }
.qa::details-content { block-size: 0; overflow-y: clip; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
.qa[open]::details-content { block-size: auto; }
@media (max-width: 899px) {
  .faq__wrap { grid-template-columns: minmax(0, 1fr); }
  .faq .sec__head { position: static; }
}

/* ---------- contact ---------- */
.contact {
  background:
    radial-gradient(50% 40% at 0% 10%, rgba(168, 151, 255, .2), transparent 70%),
    radial-gradient(40% 40% at 100% 90%, rgba(110, 211, 181, .14), transparent 70%),
    var(--mist);
}
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact__intro { position: relative; }
.contact__facts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; max-width: 460px; }
.contact__facts li {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600;
}
.contact__facts a { color: var(--lav-ink); font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--mist); color: var(--lav-ink); }
.contact__ic .ic { width: 18px; height: 18px; }
.i3d--contact { --size: 170px; margin: 28px 0 0 auto; }
@media (max-width: 959px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .contact__intro { display: contents; }
  .contact__intro > .eyebrow { order: 1; }
  .contact__intro > .h2 { order: 2; }
  .contact__intro > .lead { order: 3; }
  .inq-card { order: 4; margin-top: 28px; }
  .contact__facts { order: 5; margin-top: 24px; }
  .i3d--contact { display: none; }
}
.inq-card { position: relative; padding: clamp(22px, 4vw, 40px); border-radius: 28px; background: #fff; box-shadow: var(--shadow-2); }
.inq { display: block; }
.inq[hidden] { display: none; }
.f { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.f__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
@media (max-width: 560px) { .f__row { grid-template-columns: minmax(0, 1fr); } }
.f__label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; font-weight: 700; font-size: .9375rem; }
.f__input {
  display: block; width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 14px;
  border: 1.5px solid rgba(23, 26, 43, .18); background: #FCFBFF; color: var(--ink);
  font: inherit; font-size: 1rem; line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.f__input::placeholder { color: #6A6E8A; opacity: 1; }
.f__input:hover { border-color: rgba(108, 92, 231, .5); }
.f__input:focus { outline: none; border-color: var(--lav-deep); background: #fff; box-shadow: 0 0 0 4px rgba(108, 92, 231, .2); }
.f__area { min-height: 150px; resize: vertical; }
.f__err { margin: 8px 0 0; font-size: .875rem; font-weight: 600; color: #B42318; }
.f-more { margin: 0 0 20px; border-radius: 16px; background: #FAF9FE; box-shadow: inset 0 0 0 1.5px rgba(23, 26, 43, .12); transition: background-color .25s ease, box-shadow .25s ease; }
.f-more[open] { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(108, 92, 231, .32); }
.f-more__sum {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; border-radius: 16px;
  list-style: none; cursor: pointer; font-size: .9375rem; font-weight: 700; line-height: 1.4; color: var(--ink-2);
}
.f-more__sum::-webkit-details-marker { display: none; }
.f-more__sum::before {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: #ECE8FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A49D6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .35s var(--spring);
}
.f-more[open] .f-more__sum::before { transform: rotate(45deg); }
.f-more__sum:hover { color: var(--ink); }
.f-more__body { padding: 4px 16px 0; }
.f-more::details-content { block-size: 0; overflow-y: clip; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
.f-more[open]::details-content { block-size: auto; }
.f__err:empty { display: none; }
.f__input[aria-invalid="true"] { border-color: #C2410C; background: #FFF8F6; }
.f:has(.f__input:not(:placeholder-shown):not([aria-invalid="true"])) .f__label { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px;
  background: #F6F4FD; box-shadow: inset 0 0 0 1.5px rgba(23, 26, 43, .16);
  font-size: .9375rem; font-weight: 600; color: var(--ink-2); pointer-events: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.chip:hover span { box-shadow: inset 0 0 0 1.5px rgba(108, 92, 231, .6); color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.chip input:checked + span::before {
  content: ""; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD66B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chip input:focus-visible + span { outline: 3px solid var(--lav-deep); outline-offset: 2px; }
.field-aux { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.f--consent { margin-top: 6px; }
.consent { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--mist); transition: background-color .25s ease, box-shadow .25s ease; }
.consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--lav-deep); cursor: pointer; }
.consent label { font-weight: 700; cursor: pointer; }
.f--consent:has(input:checked) .consent { background: #E7F8F1; box-shadow: inset 0 0 0 1.5px rgba(35, 134, 107, .45); }
.f--consent:has([aria-invalid="true"]) .consent { box-shadow: inset 0 0 0 1.5px #C2410C; background: #FFF4F1; }
.consent__more { margin: 10px 2px 0; font-size: .875rem; color: var(--ink-2); }
.consent__more summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 700; color: var(--lav-ink); list-style: none; }
.consent__more summary::-webkit-details-marker { display: none; }
.consent__more summary::after { content: ""; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s ease; }
.consent__more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.consent__more p { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: #FAF9FE; box-shadow: inset 0 0 0 1px var(--line); line-height: 1.75; }
.consent__more::details-content { block-size: 0; overflow-y: clip; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
.consent__more[open]::details-content { block-size: auto; }
.inq__alert { margin: 0 0 14px; padding: 13px 16px; border-radius: 14px; background: #FFF0EC; color: #8F2410; font-weight: 600; font-size: .9375rem; }
.inq__alert:empty { display: none; }
.inq__submit { margin-top: 6px; }
.inq[aria-busy="true"] .inq__submit { cursor: progress; opacity: .85; }
.inq[aria-busy="true"] .inq__submit::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(23, 26, 43, .25); border-top-color: var(--ink);
}
.inq-done { display: grid; justify-items: center; gap: 10px; padding: 24px 8px; text-align: center; }
.inq-done[hidden] { display: none; }
.i3d--done { --size: 132px; }
.inq-done__title { margin: 4px 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.inq-done__title:focus { outline: none; }
.inq-done__text { margin: 0 0 12px; color: var(--ink-2); }
.inq-done__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.inq-done__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--lav-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.inq-done__more .ic { width: 16px; height: 16px; transition: transform .35s var(--spring); }
.inq-done__more:hover .ic { transform: translateX(3px); }
.inq-done__ref { display: inline-block; margin-left: 4px; padding: 2px 10px; border-radius: 8px; background: var(--mist); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- footer ---------- */
.footer { background: var(--night); color: rgba(255, 255, 255, .72); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
@media (max-width: 767px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 479px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand-logo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 1.125rem; font-weight: 800; color: #fff; text-decoration: none; }
.footer__brand-mark { width: 26px; height: 26px; }
.footer__brand-logo-text { color: #fff; }
.footer__brand-logo-text span { color: var(--lav); }
.footer__slogan { margin: 0 0 20px; font-size: .875rem; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.footer__col-title { margin: 0 0 16px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .92); }
.footer__link { display: block; width: fit-content; margin-bottom: 12px; font-size: .875rem; color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .15s ease; }
.footer__link:hover { color: #fff; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer__copy { margin: 0; font-size: .75rem; color: rgba(255, 255, 255, .62); }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.footer__legal a { font-size: .75rem; color: rgba(255, 255, 255, .62); text-decoration: none; transition: color .15s ease; }
.footer__legal a:hover { color: rgba(255, 255, 255, .9); }
.footer__legal .footer__admin-link { color: rgba(255, 255, 255, .52); }
.footer__biz-info { margin: 16px 0 0; font-size: .75rem; line-height: 1.8; color: rgba(255, 255, 255, .62); }
.footer :focus-visible { outline-color: var(--lav); }

/* ---------- floating: contact button, back to top, phone bar ---------- */
.fab, .totop {
  position: fixed; z-index: 60; visibility: hidden; opacity: 0; transform: translateY(18px) scale(.94);
  transition: opacity .3s ease, transform .45s var(--spring), visibility 0s linear .45s, translate .5s var(--ease-out),
              background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.fab {
  right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px;
  border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(23, 26, 43, .7);
}
.fab .ic { width: 18px; height: 18px; color: var(--butter); }
.fab:hover { background: #262A44; }
html.fab-on-dark .fab { background: var(--coral); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 16px 34px -14px rgba(255, 111, 79, .7); }
html.fab-on-dark .fab .ic { color: var(--ink); }
html.fab-on-dark .fab:hover { background: #FF8063; }
.totop {
  right: 30px; bottom: 90px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -12px rgba(40, 30, 110, .5);
}
.totop:hover { background: var(--mist); }
html.past-hero .fab, html.past-hero .totop { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
html.past-hero.at-contact .fab { visibility: hidden; opacity: 0; transform: translateY(18px) scale(.94); transition: opacity .3s ease, transform .45s var(--spring), visibility 0s linear .45s; }
html.past-hero.at-contact .totop { bottom: 24px; }
.mbar { display: none; }
@media (max-width: 767px) {
  .fab { display: none; }
  .totop { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  html.past-hero.at-contact .totop { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .mbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(251, 250, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 var(--line), 0 -12px 30px -18px rgba(40, 30, 110, .35);
    transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease-out), visibility 0s linear .35s;
  }
  .mbar .btn { --bh: 48px; }
  html.past-hero:not(.at-contact) .mbar { transform: none; visibility: visible; transition-delay: 0s; }
  html.past-hero:not(.at-contact) .totop {
    visibility: hidden; opacity: 0; transform: translateY(18px) scale(.94);
    transition: opacity .3s ease, transform .45s var(--spring), visibility 0s linear .45s;
  }
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- reference popup ---------- */
.refpop {
  width: min(1280px, 94vw); height: min(820px, 90vh); max-width: none; max-height: none;
  padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible;
}
.refpop::backdrop { background: rgba(10, 12, 26, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.refpop__win { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .7); }
.refpop__bar { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 10px 0 16px; background: #F3F1FB; border-bottom: 1px solid var(--line); flex: none; }
.refpop__dots { display: flex; gap: 7px; }
.refpop__dots i { width: 11px; height: 11px; }
.refpop__addr {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 36px; margin: 0; padding: 0 14px;
  border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: .875rem; font-weight: 600;
}
.refpop__addr .ic { width: 15px; height: 15px; color: #1B7A60; }
.refpop__addr span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.refpop__close {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 700; font-size: .875rem; cursor: pointer;
}
.refpop__close .ic { width: 16px; height: 16px; }
.refpop__close:hover { background: #2B2F4C; }
.refpop__note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #FCFBFF; flex: none; }
.refpop__note-text { margin: 0; font-size: .875rem; color: var(--ink-2); }
.refpop__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.refpop__go, .refpop__ask {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: .875rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.refpop__go { padding: 0 14px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23, 26, 43, .18); }
.refpop__go:hover { box-shadow: inset 0 0 0 1.5px rgba(108, 92, 231, .55); }
.refpop__go[hidden] { display: none; }
.refpop__go .ic { width: 15px; height: 15px; }
.refpop__ask { background: var(--coral); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(150, 40, 10, .18); }
.refpop__ask:hover { background: #FF8063; }
.refpop__ask .ic { width: 16px; height: 16px; transition: transform .35s var(--spring); }
.refpop__ask:hover .ic { transform: translateX(3px); }
.refpop__go--ic, .refpop__dock { display: none; }
.refpop__view { position: relative; flex: 1; min-height: 0; background: var(--mist); }
.refpop__frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.refpop__loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0;
  background: var(--mist); color: var(--ink-2); font-weight: 600; transition: opacity .3s ease, visibility 0s linear .3s;
}
.refpop.is-loaded .refpop__loading { opacity: 0; visibility: hidden; }
.refpop__spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(108, 92, 231, .25); border-top-color: var(--lav-deep); }
.refpop__hint {
  position: absolute; left: 50%; bottom: 22px; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 10px 18px; border-radius: 999px; transform: translateX(-50%);
  background: rgba(15, 18, 34, .84); color: #fff; font-size: .875rem; font-weight: 600; pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
}
.refpop.is-loaded:not(.is-scrolled) .refpop__hint { opacity: 1; }
.refpop.has-own-cue .refpop__hint { display: none; }
.refpop__close:focus-visible, .refpop__go:focus-visible, .refpop__ask:focus-visible { outline: 3px solid var(--lav-deep); outline-offset: 2px; }
html.pop-open, html:has(.refpop[open]) { overflow: hidden; }
@media (max-width: 767px) {
  .refpop { width: 100vw; height: 100vh; height: 100dvh; margin: 0; inset: 0; }
  .refpop__win { border-radius: 0; }
  .refpop__dots { display: none; }
  .refpop__bar { padding: 0 8px 0 10px; gap: 8px; }
  .refpop__addr { padding: 0 10px; }
  .refpop__acts { display: none; }
  .refpop__go--ic { display: inline-flex; flex: none; width: 40px; height: 40px; min-height: 40px; padding: 0; }
  .refpop__go--ic .ic { width: 17px; height: 17px; }
  .refpop__dock {
    display: block; flex: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(251, 250, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 var(--line), 0 -12px 30px -18px rgba(40, 30, 110, .35);
  }
  .refpop__dock .btn { --bh: 48px; }
}
::view-transition-group(refwin) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(refwin), ::view-transition-new(refwin) { height: 100%; object-fit: cover; }

/* ---------- custom cursor (fine pointers) ---------- */
.cursor { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 150; pointer-events: none; display: none; mix-blend-mode: difference; }
html.cursor-on .cursor { display: block; }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0); }
.cursor__ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(255, 255, 255, .85);
  transform: translate3d(var(--rx2, -100px), var(--ry2, -100px), 0);
  transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background-color .3s ease, border-color .3s ease, opacity .2s ease;
}
html.cursor-link .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255, 255, 255, .14); border-color: transparent; }
html.cursor-view .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: transparent; border-width: 2px; border-color: rgba(255, 255, 255, .95); }
html.cursor-text .cursor__dot, html.cursor-text .cursor__ring, html.cursor-out .cursor__dot, html.cursor-out .cursor__ring { opacity: 0; }
html.cursor-on, html.cursor-on a, html.cursor-on button, html.cursor-on label, html.cursor-on summary, html.cursor-on .chip input, html.cursor-on .consent input { cursor: none; }
html.cursor-on input:not([type="radio"]):not([type="checkbox"]), html.cursor-on textarea { cursor: text; }

/* ---------- grain ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 140; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- lower sections render lazily ---------- */
/* Only boxes whose size does not depend on their content (and the footer, below every anchor) skip
   rendering while off screen - in-page links above them keep landing exactly. */
.cv { content-visibility: auto; contain-intrinsic-size: auto 440px; }
.demo, .ref__shot { content-visibility: auto; contain-intrinsic-size: auto 120px; }
.demo--switch { height: 56px; }

/* ---------- motion (only when allowed, paused by html.is-calm) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--coral); animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
  .i3d { animation: bob 6.5s ease-in-out infinite; animation-delay: var(--bob, 0s); }
  li:nth-child(2) > * .i3d, .step:nth-child(2) .i3d { --bob: -1.6s; }
  li:nth-child(3) > * .i3d, .step:nth-child(3) .i3d { --bob: -3.1s; }
  .step:nth-child(4) .i3d { --bob: -4.4s; }
  .band__track { animation: marquee 46s linear infinite; }
  .band__viewport:hover .band__track, .band__viewport:focus-within .band__track { animation-play-state: paused; }
  .film { animation: film-pan 14s ease-in-out infinite alternate; }
  .demo--window .win { animation: win-slide 5.5s ease-in-out infinite alternate; }
  .note__dot { animation: notify 2.6s var(--spring) infinite; }
  .adm__row:first-child { animation: row-new 5.2s ease-out infinite; }
  .plan::before, .ref::before { animation: spin-ang 7s linear infinite; }
  .refpop__spin { animation: spin 0.9s linear infinite; }
  .inq[aria-busy="true"] .inq__submit::before { animation: spin .8s linear infinite; }
  .seq-anim .hero__hint .i3d img { animation: hint-nudge 1.8s ease-in-out infinite; }

  @supports (animation-timeline: view()) {
    .rv { animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    .rv-wipe { animation: rv-wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .film { animation: film-pan linear both; animation-timeline: view(); animation-range: cover 10% cover 90%; }
    .steps::before { animation: grow-x linear both; animation-timeline: --steps; animation-range: entry 30% cover 55%; }

  }
  html.no-sda .rv, html.no-sda .rv-wipe { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
  html.no-sda .rv.is-in, html.no-sda .rv-wipe.is-in { opacity: 1; transform: none; }

  html.is-calm *, html.is-calm *::before, html.is-calm *::after { animation-play-state: paused !important; }
  /* scroll-linked pieces show their end state instead of freezing half way; the progress bar keeps tracking */
  html.is-calm .rv, html.is-calm .rv-wipe, html.is-calm .film, html.is-calm .steps::before { animation: none !important; }
  html.is-calm .progress span { animation-play-state: running !important; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  @supports (animation-timeline: view()) {
    .steps::before { animation-name: grow-y; }
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 959px) {
  .inq-card.rv { animation: none; }
  html.no-sda .inq-card.rv { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  .bento .rv { animation: none; }
  html.no-sda .bento .rv { opacity: 1; transform: none; }
}
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -9px; rotate: -2deg; } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes film-pan { from { transform: translateX(0); } to { transform: translateX(-46%); } }
@keyframes win-slide { from { left: 4px; } to { left: calc(100% - var(--ww) - 4px); } }
@keyframes notify { 0%, 55%, 100% { transform: scale(1); } 65% { transform: scale(1.35); } 78% { transform: scale(.92); } }
@keyframes row-new { 0%, 8% { background-color: #FFF4D1; } 40%, 100% { background-color: #fff; } }
@keyframes spin-ang { to { --ang: 360deg; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hint-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes rv-in { from { opacity: 0; transform: translateY(40px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rv-wipe { from { clip-path: inset(-10% 100% -10% 0); transform: translateX(-12px); } to { clip-path: inset(-10% -2% -10% 0); transform: none; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .band__track[aria-hidden="true"] { display: none; }
  .band__viewport { -webkit-mask-image: none; mask-image: none; }
  .band__track { flex-wrap: wrap; justify-content: center; flex: 1; row-gap: 6px; padding: 0 var(--gutter); }
  .band__track li { font-size: 1.25rem; }
}

/* ---------- document pages (privacy) ---------- */
.doc { padding: clamp(48px, 8vw, 96px) 0 clamp(72px, 10vw, 120px); background: var(--paper); }
.doc__inner { max-width: 820px; }
.doc h1 { margin: 0 0 22px; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; }
.doc__intro { margin: 0 0 32px; color: var(--ink-2); font-size: 1.0625rem; }
.doc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: doc; }
.doc li { position: relative; padding: 18px 20px 18px 62px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); counter-increment: doc; color: var(--ink-2); }
.doc li::before {
  content: counter(doc); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center; background: var(--mist); color: var(--lav-ink); font-weight: 800; font-size: .875rem;
}
.doc li strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.0625rem; }
.doc a { color: var(--lav-ink); font-weight: 700; }