/* ═══════════ HAPTY ═══════════
   1rem = 10px on a 1440px-wide screen; everything scales with the viewport. */
@font-face { font-family: Sora; src: url(/assets/fonts/Sora-Variable.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: Michroma; src: url(/assets/fonts/Michroma-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Azeret Mono"; src: url(/assets/fonts/AzeretMono-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --brand: #100d0b; --blue: #c9a876; --light-blue: #f3ede4; --accent: #e3b878; --cyan: #ff8f73; --panel: #2a231d;
  --text: #f7f2ea; --margin: 10rem; --ease: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --mono: "Azeret Mono", ui-monospace, monospace; --display: Michroma, Sora, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(100vw / 1440 * 10); background: var(--brand); -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; min-height: 100%; background: var(--brand); color: var(--text);
  font-family: Sora, Arial, sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 1.25;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; }
svg { display: block; }
.mono { font-family: var(--mono); font-size: .8rem; font-weight: 300; text-transform: uppercase; letter-spacing: .02em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: .4rem; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html.is-loading { cursor: wait; }

/* ── loader · sound comes in from both sides, settles into the mark, and the mark pulses like a touch ── */
.loader-w { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; pointer-events: none; background: var(--brand); transition: background-color 1.4s var(--ease) .25s, visibility 0s 2.2s; }
html.is-ready .loader-w { background-color: rgba(16, 13, 11, 0); visibility: hidden; }
.loader__wave { position: absolute; left: 0; top: 50%; width: 100%; height: 44vh; transform: translateY(-50%); transition: opacity 1s var(--ease); }
html.is-ready .loader__wave { opacity: 0; }
.loader__core { position: relative; width: 12rem; height: 12rem; display: grid; place-items: center; transition: opacity 1.1s var(--ease) .15s, scale 1.6s var(--ease); }
html.is-ready .loader__core { opacity: 0; scale: 1.35; }
.loader__core::before { content: ""; position: absolute; inset: -2rem; border-radius: 50%; background: radial-gradient(circle, rgba(16, 13, 11, .95) 35%, rgba(16, 13, 11, 0) 70%); }
.loader__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(227, 184, 120, .55); opacity: 0; animation: tap 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.loader__ring:nth-child(2) { animation-delay: .22s; }
.loader__ring:nth-child(3) { animation-delay: 1.2s; border-color: rgba(255, 143, 115, .45); }
.loader__ring:nth-child(4) { animation-delay: 1.42s; border-color: rgba(255, 143, 115, .45); }
@keyframes tap { 0% { transform: scale(.55); opacity: 0; } 6% { opacity: 1; } 70% { opacity: 0; } 100% { transform: scale(3.1); opacity: 0; } }
.loader__mark { position: relative; width: 7rem; height: 7rem; overflow: visible; animation: buzz 2.4s linear infinite; }
.loader__mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.loader__ghost { stroke: rgba(201, 168, 118, .16); stroke-width: 1.1; }
.loader__draw { stroke: var(--blue); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); filter: drop-shadow(0 0 .6rem rgba(227, 184, 120, .55)); }
@keyframes buzz { 0%, 12%, 20%, 50%, 62%, 70%, 100% { transform: translate(0, 0); } 2%, 52% { transform: translate(-.08rem, .04rem); } 4%, 54% { transform: translate(.08rem, -.04rem); } 6%, 56% { transform: translate(-.06rem, 0); } 8%, 58% { transform: translate(.06rem, .03rem); } 10%, 60% { transform: translate(-.03rem, 0); } }
.loader__stage { position: absolute; left: 50%; bottom: 11rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; transition: opacity .8s var(--ease); }
html.is-ready .loader__stage { opacity: 0; }
.loader__steps { display: flex; gap: 2.4rem; white-space: nowrap; }
.loader__steps span { opacity: .25; transition: opacity .6s var(--ease), color .6s var(--ease); }
.loader__steps span.is-on { opacity: 1; color: var(--accent); }
.loader__steps span.is-done { opacity: .6; }
.loader__note { font-size: 1.3rem; font-weight: 400; color: rgba(247, 242, 234, .8); min-height: 1.6rem; }
.loader__count { position: fixed; right: 2rem; bottom: 4rem; font-family: var(--mono); font-size: .8rem; font-weight: 300; transition: opacity .6s; }
html.is-ready .loader__count { opacity: 0; }

/* ── cursor label ── */
.cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; }
.cursor__label { position: absolute; left: 1.8rem; top: 0; transform: translateY(-50%); font-family: var(--mono); font-size: .6rem; font-weight: 300; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .4s; }
html.wants-sound .cursor.is-on .cursor__label { opacity: .85; }

/* ── canvas ── */
.canvas-w { position: fixed; inset: 0; z-index: 0; }
.gl { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease) .3s; }
html.is-ready .gl { opacity: 1; }
html.no-gl .canvas-w { background: radial-gradient(60% 60% at 50% 50%, #3a2c20 0%, var(--brand) 70%); }
.callouts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pp { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .6s var(--ease); }
.pp.is-on { opacity: 1; }
.pp__dot { position: absolute; width: 1rem; height: 1rem; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; transform: translate(-50%, -50%); }
.pp__dot::after { content: ""; position: absolute; inset: .3rem; border-radius: 50%; background: #fff; }
.pp { --lw: 6.4rem; --lh: 4rem; }
.pp--t { --lw: 9rem; --lh: 8rem; }
.pp__line { position: absolute; left: .3rem; bottom: .3rem; width: var(--lw); height: var(--lh); overflow: visible; }
.pp__line path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pp__label { position: absolute; left: calc(var(--lw) + 1rem); bottom: calc(var(--lh) * .7 + .3rem); font-family: var(--mono); font-size: .8rem; font-weight: 300; text-transform: uppercase; white-space: nowrap; transform: translateY(50%); transition: color .3s; }
.pp--l .pp__line { left: auto; right: .3rem; transform: scaleX(-1); }
.pp--l .pp__label { left: auto; right: calc(var(--lw) + 1rem); }
.pp--d .pp__line { bottom: auto; top: .3rem; transform: scaleY(-1); }
.pp--d.pp--l .pp__line { transform: scale(-1, -1); }
.pp--d .pp__label { bottom: auto; top: calc(var(--lh) * .7 + .3rem); transform: translateY(-50%); }
.pp.is-hot .pp__dot { border-color: var(--cyan); box-shadow: 0 0 1.2rem rgba(255, 143, 115, .7); }
.pp.is-hot .pp__label { color: var(--cyan); }

/* ── header ── */
.navigation-w { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto auto; align-items: start; gap: 1.6rem; padding: 1.6rem 2rem 0; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease) .6s; }
html.is-ready .navigation-w { opacity: 1; }
.navigation-w > * { pointer-events: auto; }
.nav__logo-w { justify-self: start; display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .22em; }
.nav__logo { width: 1.8rem; height: 1.8rem; color: var(--blue); }
.nav__header .nav__logo-w { display: none; margin: 0; }
.sound-w { display: flex; align-items: center; gap: 1rem; height: 3.6rem; margin-top: .8rem; font-size: 1rem; font-weight: 400; opacity: .5; transition: opacity .35s; }
.sound-w:hover, .sound-w.is-active { opacity: 1; }
.sound__svg { width: 2.5rem; height: 2.5rem; overflow: visible; }
.sound__svg path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }
.sound-w.is-active .sound__svg path { animation: wave 1.2s ease-in-out infinite alternate; transform-origin: center; }
@keyframes wave { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
.navigation { width: 38.6rem; border-radius: 1.5rem; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(5rem); backdrop-filter: blur(5rem); padding: 0 1.6rem; overflow: hidden; }
.nav__header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.6rem 0; font-size: 1.2rem; font-weight: 500; text-transform: uppercase; position: relative; }
.nav__burger { width: 2.3rem; height: 1.6rem; transition: transform .6s var(--ease); }
.navigation.is-open .nav__burger { transform: rotate(45deg); }
.nav__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #fff; opacity: 0; transition: opacity .5s; }
.navigation.is-open .nav__line { opacity: .1; }
.nav__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease); }
.navigation.is-open .nav__body { grid-template-rows: 1fr; }
.nav__inner { min-height: 0; overflow: hidden; }
.nav__list { list-style: none; padding: 4rem 0 5rem .8rem; display: flex; flex-direction: column; font-size: 3.9rem; font-weight: 300; letter-spacing: -.01em; }
.nav__item { position: relative; padding-left: 2.4rem; opacity: .1; transition: opacity .55s var(--ease); }
.nav__item:hover { opacity: .8; }
.nav__item.is-active, .nav__item.is-current { opacity: 1; }
.nav__link { display: block; position: relative; line-height: 1.3; }
.nav__link::before { content: ""; position: absolute; top: 50%; left: -2.4rem; width: .4rem; height: .4rem; border-radius: 50%; background: #fff; transform: translateY(calc(-50% + .5rem)); }
.nav__item.is-active .nav__link, .nav__item.is-current .nav__link {
  color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 300% 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .6) 25%, #fff 50%, rgba(255, 255, 255, .6) 75%, rgba(255, 255, 255, .25) 100%);
  animation: shimmer 3s linear infinite alternate-reverse;
}
@keyframes shimmer { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.nav__cta { display: flex; align-items: center; justify-content: center; height: 4.2rem; margin-bottom: 2rem; border-radius: 6rem; background: rgba(255, 255, 255, .3); color: var(--brand); font-size: 1.4rem; font-weight: 400; transition: background-color .35s; }
.nav__cta:hover, .nav__cta.is-current { background: #fff; }

/* ── home scenes ── */
.track { height: 1100vh; }
.s { position: fixed; inset: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; visibility: hidden; }
.s.is-vis { visibility: visible; }
.c { width: 100%; padding: 0 var(--margin); }
.section-w { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; height: 34rem; }
.section-w.reverse { flex-direction: column; justify-content: flex-start; gap: 5rem; height: auto; }
.section__title { font-family: var(--display); font-size: 4.2rem; font-weight: 400; line-height: 1.28; letter-spacing: -.01em; user-select: none; }
.section__desc { align-self: flex-end; display: flex; flex-direction: column; gap: 3rem; font-size: 1.4rem; line-height: 1.35; }
.section__desc.reverse { align-self: flex-start; }
.desc__decor { width: 1.8rem; height: 6.4rem; overflow: visible; }
.desc__decor path, .desc__decor circle { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hint { transition: opacity .8s var(--ease); }
html:not(.is-ready) .hint, html.is-scrolled .hint { opacity: 0 !important; }
.hint { margin-top: 2.4rem; display: flex; align-items: center; gap: 1rem; opacity: .7; }
.hint i { width: 3.2rem; height: 1px; background: currentColor; transform-origin: left; animation: hint 2.4s var(--ease-io) infinite; }
@keyframes hint { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.reveal, .section__title, .section__desc {
  --r: 0; --h: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--h) * 130% - 30%), #000 calc(var(--h) * 130%), #000 calc(var(--r) * 130% - 30%), transparent calc(var(--r) * 130%));
  mask-image: linear-gradient(90deg, transparent calc(var(--h) * 130% - 30%), #000 calc(var(--h) * 130%), #000 calc(var(--r) * 130% - 30%), transparent calc(var(--r) * 130%));
}
.patterns { display: flex; flex-direction: column; gap: 1.4rem; margin-top: -1rem; opacity: 0; transform: translateY(1rem); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.s.is-on .patterns { opacity: 1; transform: none; }
.s.is-on .patterns { pointer-events: auto; }
.patterns__list { display: flex; flex-wrap: wrap; gap: .8rem; max-width: 40rem; }
.chip { display: inline-flex; align-items: center; gap: 1rem; height: 3.6rem; padding: 0 1.6rem 0 1.2rem; border-radius: 6rem; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); font-size: 1.1rem; font-weight: 500; transition: background-color .35s, color .35s, border-color .35s; }
.chip:hover { border-color: rgba(255, 255, 255, .5); }
.chip i { display: flex; gap: .3rem; }
.chip i b { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .35; transition: opacity .2s; }
.chip.is-on { background: #fff; color: var(--brand); border-color: #fff; }
.chip.is-on i b { opacity: 1; }

/* ── a vibration you can see: edge glow on each motor's side, words shiver ── */
.touch-fx { position: fixed; inset: 0; z-index: 14; pointer-events: none; }
.touch-fx::before, .touch-fx::after { content: ""; position: absolute; inset: 0; }
.touch-fx::before { background: radial-gradient(48% 90% at 0% 50%, rgba(227, 184, 120, .5), rgba(227, 184, 120, 0) 72%); box-shadow: inset 3px 0 0 rgba(227, 184, 120, .9); opacity: var(--ta, 0); }
.touch-fx::after { background: radial-gradient(48% 90% at 100% 50%, rgba(255, 143, 115, .42), rgba(255, 143, 115, 0) 72%); box-shadow: inset -3px 0 0 rgba(255, 143, 115, .9); opacity: var(--tb, 0); }
.s .c { transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0); }

/* ── the last stretch: scroll on and the hero comes back ── */
.loop-zone { position: relative; z-index: 3; height: 170vh; }
.loop-hint { display: flex; justify-content: center; align-items: center; gap: 1rem; padding-top: 2rem; opacity: .7; }
.loop-hint i { width: 3.2rem; height: 1px; background: currentColor; transform-origin: left; animation: hint 2.4s var(--ease-io) infinite; }

/* ── indicator · bottom right ── */
.indicator-w { position: fixed; right: 2rem; bottom: 4rem; z-index: 15; display: flex; align-items: center; gap: 1rem; font-family: var(--mono); font-size: .8rem; font-weight: 300; text-transform: uppercase; opacity: 0; transition: opacity 1s var(--ease) .8s; }
html.is-ready .indicator-w { opacity: 1; }
.indicator__icon { width: 2.3rem; height: 2.2rem; color: var(--blue); overflow: visible; }
.indicator__icon circle { fill: none; stroke: currentColor; transform-origin: center; transform-box: fill-box; }
.indicator__icon circle:not(:last-child) { animation: pulse 2.5s ease infinite both; }
.indicator__icon circle:nth-child(1) { animation-delay: -.9s; }
.indicator__icon circle:nth-child(2) { animation-delay: -.7s; }
.indicator__icon circle:last-child { fill: currentColor; stroke: none; }
@keyframes pulse { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* ── Ask Hapty ── */
.ai { position: fixed; left: 50%; bottom: 4rem; z-index: 15; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 1s var(--ease) 1s; }
html.is-ready .ai { opacity: 1; }
.ai > * { pointer-events: auto; }
.ae__btn-w { position: relative; padding: 1px; border-radius: 6rem; background: linear-gradient(45.77deg, rgba(255, 241, 224, .45) 11.5%, rgba(227, 184, 120, .45) 55%, rgba(140, 96, 52, .45) 96%); }
.ae__btn { position: relative; width: 16rem; height: 4.2rem; border-radius: 6rem; background: #1c1713; }
.ae__inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; font-size: 1rem; font-weight: 500; }
.ae__icon { position: absolute; left: 2.4rem; top: 50%; width: 1.4rem; height: 1.2rem; transform: translateY(-50%); color: #fff; transition: color .8s cubic-bezier(.24, .34, 0, 1); overflow: visible; }
.ae__btn-w:hover .ae__icon, .ai.is-asking .ae__icon { color: var(--cyan); }
.ai.is-thinking .ae__icon { animation: think .8s ease-in-out infinite alternate; color: var(--cyan); }
@keyframes think { to { opacity: .3; } }
.ae__area { position: absolute; left: 50%; bottom: 5.6rem; width: 27.5rem; margin: 0; border-radius: 1.6rem; background: var(--panel); opacity: 0; visibility: hidden; transform: translate(-50%, 1rem); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.ai.is-asking .ae__area { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.ae__textarea { display: block; width: 100%; height: 6.8rem; padding: 2rem; border: 0; outline: 0; resize: none; background: transparent; color: #fff; font-size: 1rem; line-height: 1.45; }
.ae__textarea::placeholder { color: rgba(255, 255, 255, .5); }
.ae__hint { position: absolute; right: 2rem; bottom: -1.6rem; font-size: .8rem; color: rgba(255, 255, 255, .8); }
.ai__response { width: 40rem; margin-bottom: 1.6rem; padding: 1.4rem 1.6rem 2rem 2rem; border: 1px solid rgba(255, 255, 255, .9); border-radius: 2.2rem; background: var(--panel); display: flex; flex-direction: column; gap: 1.4rem; opacity: 0; visibility: hidden; transform: translateY(1.2rem); transition: opacity .45s var(--ease), transform .7s var(--ease), visibility 0s .7s; }
.ai__response.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ai.is-asking .ai__response { display: none; }
.ai__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; color: #e8c9a0; }
.ai__head svg { width: 1.4rem; height: 1.2rem; color: var(--cyan); }
.ai__close { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.ai__close svg { width: 1rem; height: 1rem; }
.ai__text { font-size: 1.3rem; font-weight: 400; line-height: 1.5; min-height: 5.8rem; }
.ai__ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.ai__cta { display: inline-flex; align-items: center; gap: .8rem; height: 3.2rem; padding: 0 1.6rem; border-radius: 6rem; border: 1px solid rgba(255, 255, 255, .3); font-size: 1rem; font-weight: 500; transition: background-color .3s, color .3s, border-color .3s; }
.ai__cta svg { width: .8rem; height: .8rem; }
.ai__cta:hover { background: rgba(255, 255, 255, .85); color: var(--brand); border-color: transparent; }

/* ── specs, on the home page after the scroll story ── */
.specs-block { position: relative; z-index: 3; padding-bottom: 6rem; }
.specs-intro { width: 93rem; min-height: 100svh; margin: 0 2rem 0 auto; padding: 30vh 3.2rem 12vh 8rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; }
.specs-intro .section__desc { align-self: flex-end; }

/* ── subpages ── */
.page { position: relative; z-index: 2; }
.sp-hero { min-height: 100svh; display: flex; align-items: center; }
.sp-hero .section-w { height: 40rem; }
.sp-hero .section__desc p + p { margin-top: 0; }
.price { font-family: var(--display); font-size: 3.4rem; font-weight: 400; letter-spacing: .02em; }
.specs { display: flex; flex-direction: column; align-items: flex-end; gap: 0; padding: 0 2rem; }
.specs-w { width: 93rem; display: grid; grid-template-columns: 1fr 1fr; background: rgba(255, 255, 255, .02); -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem); --fill: 0; }
.specs-w + .specs-w { border-top: 1px solid rgba(255, 255, 255, .08); }
.specs__title-w { grid-column: 1 / -1; position: relative; display: flex; justify-content: center; padding: 6.5rem 8rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.specs__title { font-family: var(--display); font-size: 11rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(201, 168, 118, .9); }
.specs__title-mask { position: absolute; inset: 0; display: flex; justify-content: center; padding: 6.5rem 8rem; clip-path: inset(0 calc(100% - var(--fill) * 100%) 0 0); }
.specs__title-mask .specs__title { color: var(--blue); -webkit-text-stroke: 0; }
.specs__data-w { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 25rem; padding: 3.2rem; text-align: center; }
.specs__data-w:nth-child(2n+1) { border-left: 1px solid rgba(255, 255, 255, .08); }
.specs__data-w:nth-child(n+4) { border-top: 1px solid rgba(255, 255, 255, .08); }
.specs__header { position: absolute; top: 3.2rem; left: 3.2rem; opacity: .4; }
.specs__data { font-size: 5rem; font-weight: 200; letter-spacing: -.02em; }
.specs__footer { position: absolute; bottom: 3.2rem; left: 3.2rem; right: 3.2rem; opacity: .4; font-family: var(--mono); font-size: 1rem; font-weight: 300; text-transform: uppercase; }
.features-w { list-style: none; width: 93rem; padding: 0 3.2rem 0 10rem; margin: 20rem 2rem 24rem auto; display: flex; flex-direction: column; gap: 14rem; }
.features { display: flex; justify-content: space-between; align-items: baseline; gap: 4rem; font-size: 1.3rem; font-weight: 400; opacity: 0; transform: translateY(2rem); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.features.is-in { opacity: 1; transform: none; }
.feature__desc { max-width: 36ch; text-align: right; font-family: var(--mono); font-size: .9rem; font-weight: 400; text-transform: uppercase; line-height: 1.5; }
.specs__cta, .preorder__cta { display: inline-flex; align-items: center; justify-content: center; height: 4.2rem; padding: 0 4rem; border-radius: 6rem; font-size: 1rem; font-weight: 500; transition: color .2s, border-color .2s, background-color .35s; }
.specs__cta { position: fixed; right: 2rem; bottom: 4rem; z-index: 15; border: 1px solid rgba(255, 255, 255, .3); background: var(--brand); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease), color .2s, border-color .2s, background-color .35s; }
html.is-ready.in-specs .specs__cta { opacity: 1; pointer-events: auto; }
html.in-specs .indicator-w { opacity: 0; pointer-events: none; transition-delay: 0s; }
.specs__cta:hover, .preorder__cta:hover { color: var(--brand); background: rgba(255, 255, 255, .85); border-color: transparent; }
.preorder__cta { border: 1px solid #fff; align-self: flex-start; }
.preorder__cta.is-soon { pointer-events: none; opacity: .6; }

.preorder { min-height: 100svh; display: flex; align-items: center; justify-content: flex-end; padding: 12rem 2rem 14rem; position: relative; }
.preorder-w { position: relative; width: 93rem; -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem); display: grid; grid-template-columns: 1.15fr 1.25fr .8fr; }
.preorder__circle { position: absolute; left: 50%; top: 50%; width: 48.6rem; height: 48.6rem; transform: translate(-50%, -50%); pointer-events: none; opacity: .5; }
.preorder__circle circle { fill: none; stroke: rgba(227, 184, 120, .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.preorder__inner { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4rem; padding: 6rem 2rem 6rem 8rem; background: rgba(255, 255, 255, .02); }
.preorder__icon { width: 4rem; height: 4rem; color: var(--blue); }
.preorder__title { font-family: var(--display); font-size: 4.6rem; font-weight: 400; line-height: 1.22; letter-spacing: -.01em; }
.preorder__desc { max-width: 42rem; font-size: 1.4rem; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.preorder__footer-w { display: flex; flex-direction: column; gap: 3.2rem; padding: 3.2rem 3.2rem 3.2rem 4rem; background: rgba(255, 255, 255, .02); border-top: 1px solid rgba(255, 255, 255, .06); }
.preorder__inner + .preorder__footer-w { padding-left: 8rem; }
.preorder__footer-w + .preorder__footer-w { border-left: 1px solid rgba(255, 255, 255, .06); }
.preorder__footer-title { opacity: .4; }
.preorder__footer-links { display: flex; flex-direction: column; gap: .5rem; font-size: 1.2rem; font-weight: 400; line-height: 1.4; }
.preorder__footer-links a { opacity: .85; transition: opacity .3s; }
.preorder__footer-links a:hover { opacity: 1; }
.preorder__footer-links span { opacity: .85; }
.preorder__footer-links .dim { opacity: .45; }

/* ── tablet ── */
@media (max-width: 991px) {
  html { font-size: calc(100vw / 990 * 10); }
  :root { --margin: 4rem; }
}
/* ── phone ── */
@media (max-width: 767px) {
  html { font-size: min(calc(100vw / 390 * 10), 13px); }
  :root { --margin: 2rem; }
  .navigation-w { grid-template-columns: 1fr; justify-items: center; padding-top: .6rem; }
  .navigation-w > .nav__logo-w { display: none; }
  .sound-w { position: fixed; left: 1.2rem; bottom: 2.4rem; height: 3.6rem; margin: 0; padding: 0 1.2rem; gap: .6rem; border-radius: 6rem; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(1.5rem); backdrop-filter: blur(1.5rem); font-size: 1rem; opacity: .8; }
  .sound-w .sound__svg { width: 2rem; height: 2rem; }
  .loader__steps { gap: 1.4rem; }
  html.in-specs .ai { opacity: 0; pointer-events: none; }
  html.in-specs .ai > * { pointer-events: none; }
  .navigation { width: calc(100vw - 1.2rem); max-width: 40rem; }
  .nav__header .nav__logo-w { display: flex; margin: 0; }
  .nav__header .menu__label { display: none; }
  .nav__list { font-size: 3.4rem; }
  .s .c { height: 100%; padding-top: 9rem; padding-bottom: 12rem; }
  .section-w, .section-w.reverse { height: 100%; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; gap: 1.6rem; }
  .s .section-w > :first-child { margin-bottom: auto; }
  .pp--src:not(.is-hot) .pp__label, .pp--src:not(.is-hot) .pp__line { opacity: 0; }
  .pp--minor { display: none; }
  .pp--src .pp__label, .pp--src .pp__line { transition: opacity .4s; }
  .section__title { font-size: 2.6rem; line-height: 1.3; }
  .section__desc, .section__desc.reverse { align-self: center; align-items: center; max-width: 30rem; font-size: 1.4rem; }
  .desc__decor, .hint { display: none; }
  .patterns { align-items: center; margin-top: 1.6rem; }
  .patterns__list { justify-content: center; max-width: 34rem; }
  .indicator-w { right: 1rem; bottom: 2.4rem; }
  .indicator__label { display: none; }
  .ai { bottom: 2rem; }
  .ai__response { width: calc(100vw - 2.4rem); }
  .ae__area { width: calc(100vw - 4rem); max-width: 34rem; }
  .ae__textarea { font-size: 1.4rem; }
  .pp__label { font-size: .7rem; }
  .pp, .pp--t { --lw: 3.2rem; --lh: 2.6rem; }
  .sp-hero .section-w { height: 100%; }
  .specs-block { background: linear-gradient(to bottom, rgba(16, 13, 11, 0), rgba(16, 13, 11, .86) 70vh); }
  .specs-intro { width: auto; margin: 0; padding: 40vh 2rem 8vh; flex-direction: column; align-items: center; text-align: center; }
  .specs-intro .section__desc { align-self: center; align-items: center; }
  .sp-hero { min-height: 100svh; padding: 9rem 0 10rem; align-items: stretch; }
  .specs { padding: 0 1rem; }
  .specs-w { width: 100%; }
  .specs__title-w, .specs__title-mask { padding: 4rem; }
  .specs__title { font-size: 4.6rem; }
  .specs__data-w { min-height: 16rem; padding: 4.8rem 1.6rem; }
  .specs__header { top: 1.6rem; left: 1.6rem; }
  .specs__footer { bottom: 1.6rem; left: 1rem; right: 1rem; font-size: .8rem; }
  .specs__data { font-size: 2.6rem; }
  .features-w { width: auto; padding: 0 var(--margin); margin: 12rem 0 16rem; gap: 6rem; }
  .features { flex-direction: column; gap: 1.2rem; }
  .feature__desc { text-align: left; }
  .specs__cta { right: 50%; transform: translateX(50%); bottom: 2rem; padding: 0 2.4rem; }
  .preorder { padding: 9rem 1rem 12rem; justify-content: center; }
  .preorder-w { width: 100%; grid-template-columns: 1fr; }
  .preorder__inner { padding: 5rem 2rem; align-items: center; text-align: center; }
  .preorder__title { font-size: 2.2rem; }
  .preorder__cta { align-self: center; }
  .preorder__footer-w, .preorder__inner + .preorder__footer-w { padding: 2.4rem 2rem; }
  .preorder__footer-w + .preorder__footer-w { border-left: 0; }
  .preorder__circle { width: 34rem; height: 34rem; }
}
@media (prefers-reduced-motion: reduce) {
  .loader__ring, .loader__mark, .hint i, .loop-hint i, .indicator__icon circle, .nav__link { animation: none !important; }
}

.feature__label { font-family: var(--display); letter-spacing: .02em; }