@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-standard.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f8f5fa;
  --surface: #ffffff;
  --ink: #22122b;
  --muted: #5a4a64;
  --line: #e0d6e6;
  --accent: #b9360a;
  --on-accent: #ffffff;
  --pending-bg: #fff0c2;
  --pending-ink: #5c3b00;
  --c-conquora: #6d2be0;
  --c-chrono: #0a76ac;
  --c-lechatnoir: #bf2a65;
  --c-nocturnia: #99590f;
  --c-libervalor: #0f7f56;
  --c-reflexiora: #56741a;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --measure: 62ch;
  --wide: 76rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #170c1f;
    --surface: #231530;
    --ink: #f6eef9;
    --muted: #c3b4cd;
    --line: #3b2b48;
    --accent: #ff8a50;
    --on-accent: #230a00;
    --pending-bg: #4a3300;
    --pending-ink: #ffe29a;
    --c-conquora: #b58cff;
    --c-chrono: #4fcbff;
    --c-lechatnoir: #ff86ae;
    --c-nocturnia: #e6b26c;
    --c-libervalor: #57d49c;
    --c-reflexiora: #bfd97a;
  }
}

.night {
  color-scheme: dark;
  --bg: #170c1f;
  --surface: #231530;
  --ink: #f6eef9;
  --muted: #c3b4cd;
  --line: #3b2b48;
  --accent: #ff8a50;
  --on-accent: #230a00;
  --c-conquora: #b58cff;
  --c-chrono: #4fcbff;
  --c-lechatnoir: #ff86ae;
  --c-nocturnia: #e6b26c;
  --c-libervalor: #57d49c;
  --c-reflexiora: #bfd97a;
  background:
    radial-gradient(1000px 640px at 88% -6%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(800px 600px at -10% 28%, color-mix(in srgb, var(--c-conquora) 20%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
.skin-conquora { --bg: #070a18; --surface: #111a33; --accent: #4fdcff; --on-accent: #04101f; --line: #24304f; --muted: #b6c3de; --ink: #eef4ff; }
.skin-chrono { --bg: #0b0a1e; --surface: #17143a; --accent: #3be8ff; --on-accent: #06121a; --line: #332e66; --muted: #c1bddf; --ink: #f3f1ff; }
.skin-lechatnoir { --bg: #170c20; --surface: #2a1838; --accent: #ffb86b; --on-accent: #241304; --line: #4d3160; --muted: #d4c3de; --ink: #fff6ee; }
.skin-libervalor { --bg: #0c141e; --surface: #131d29; --accent: #e08a97; --on-accent: #1b0a0e; --line: #24303c; --muted: #a6b0b8; --ink: #e9ecea; }
.skin-reflexiora { --bg: #0d1f17; --surface: #16332a; --accent: #a5de7c; --on-accent: #0a1d0c; --line: #2f5546; --muted: #bcd3c4; --ink: #f2fbf3; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0; overflow-wrap: anywhere; hyphens: auto; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.8rem); font-weight: 750; font-stretch: 85%; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.hue-conquora { --c: var(--c-conquora); }
.hue-chrono { --c: var(--c-chrono); }
.hue-lechatnoir { --c: var(--c-lechatnoir); }
.hue-nocturnia { --c: var(--c-nocturnia); }
.hue-libervalor { --c: var(--c-libervalor); }
.hue-reflexiora { --c: var(--c-reflexiora); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 12px 16px; border-radius: 8px; z-index: 60; }
.skip:focus { left: 16px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.band { position: relative; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.inner { max-width: var(--wide); margin: 0 auto; }
.fx-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.8; }
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--c-lechatnoir), var(--c-conquora)); }
main, .foot { position: relative; z-index: 1; }

.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; }
.mark { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.mark svg { width: 28px; height: 28px; color: var(--accent); }
.top nav { display: flex; align-items: center; gap: 2px 14px; flex-wrap: wrap; }
.top nav > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; text-decoration: none; font-weight: 600; font-size: 0.97rem; }
.top nav > a:hover { color: var(--accent); }
.lang { position: relative; }
.lang summary { list-style: none; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 22px; cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: 0.86rem; }
.lang summary::-webkit-details-marker { display: none; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); z-index: 40; }
.lang-option { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; text-decoration: none; }
.lang-option:hover, .lang-option[aria-current] { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.eyebrow { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; color: var(--accent); }
.word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .word { animation: word-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
  [data-reveal] { transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
  [data-reveal].wait { opacity: 0; transform: translateY(26px); }
  [data-delay="2"] { transition-delay: 0.08s; }
  [data-delay="3"] { transition-delay: 0.16s; }
  .wheel { animation: wheel-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .pcard:hover .pcard__art img { transform: scale(1.06); }
  .strip__row { animation: strip 60s linear infinite; }
  .float--1 { animation: bob 6s ease-in-out infinite; }
  .float--2 { animation: bob 7s ease-in-out -2s infinite; }
  .float--3 { animation: bob 8s ease-in-out -4s infinite; }
}
@keyframes word-in { from { opacity: 0; transform: translateY(0.5em) rotate(2deg); } }
@keyframes wheel-in { from { opacity: 0; transform: rotate(-70deg) scale(0.85); } }
@keyframes bob { 50% { transform: translateY(-12px); } }
@keyframes strip { to { transform: translateX(-50%); } }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 26px; border: 1px solid var(--line); text-decoration: none; font-weight: 700; background: color-mix(in srgb, var(--surface) 72%, transparent); transition: transform 0.18s, box-shadow 0.18s, background 0.18s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 14px 36px -12px var(--accent); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fx-spark { position: fixed; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--accent); pointer-events: none; z-index: 70; animation: spark 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }

.hero { padding-top: clamp(36px, 8vw, 96px); padding-bottom: clamp(28px, 6vw, 72px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px 44px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 7.4vw, 5.2rem); font-weight: 760; font-stretch: 90%; letter-spacing: -0.005em; margin-top: 14px; background: linear-gradient(100deg, #fff 10%, #ffc7a3 55%, #d7b8ff); -webkit-background-clip: text; background-clip: text; }
.hero h1 .word { color: transparent; background: inherit; -webkit-background-clip: text; background-clip: text; }
.hero h1:not(:has(.word)) { color: var(--ink); background: none; }
.intro { margin-top: 18px; max-width: 54ch; font-size: clamp(1.06rem, 2.2vw, 1.3rem); color: var(--muted); }
.hero__wheel { position: relative; max-width: 460px; width: 100%; justify-self: center; filter: drop-shadow(0 26px 70px color-mix(in srgb, var(--accent) 40%, transparent)); }
.float { position: absolute; width: 27%; aspect-ratio: 5 / 7; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.float img { width: 100%; height: 100%; object-fit: cover; }
.float--1 { left: -4%; top: 6%; rotate: -10deg; }
.float--2 { right: -2%; top: 30%; rotate: 8deg; }
.float--3 { left: 14%; bottom: -3%; rotate: 6deg; }
.wheel { width: 100%; height: auto; display: block; }
.wheel g[data-spin] { transform-origin: 50% 50%; transform-box: fill-box; }
.wheel .rind { fill: var(--accent); }
.wheel .pulp { fill: #fff6e6; }
.wheel path { fill: var(--c); }
.wheel .w2 { opacity: 0.8; }
.wheel .w3 { opacity: 0.62; }
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.stats div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.stats dd { margin: 0; font-family: var(--display); font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; line-height: 1; color: var(--accent); }
.stats dt { color: var(--muted); font-size: 0.92rem; }

.strip { position: relative; z-index: 1; overflow: hidden; padding: 8px 0 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.strip__row { display: flex; gap: 14px; width: max-content; }
.strip__item { width: clamp(120px, 15vw, 190px); aspect-ratio: 5 / 7; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); flex: none; background: var(--surface); }
.strip__item img { width: 100%; height: 100%; object-fit: cover; }

.catalog { padding-top: clamp(40px, 7vw, 84px); padding-bottom: 20px; }
.catalog-head p { margin-top: 10px; color: var(--muted); max-width: 60ch; }
.family { margin-top: clamp(34px, 5vw, 56px); }
.family h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 700; color: var(--c); margin-bottom: 16px; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pcard { position: relative; display: flex; flex-direction: column; height: 100%; text-decoration: none; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: color-mix(in srgb, var(--surface) 86%, transparent); transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; }
.pcard:hover { border-color: var(--c); box-shadow: 0 24px 54px -22px var(--c); }
.pcard__art { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: #0b0713; }
.pcard__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.pcard__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; flex: 1; }
.pcard__head { display: flex; align-items: center; gap: 10px; }
.pcard__head b { font-family: var(--display); font-size: 1.16rem; line-height: 1.15; overflow-wrap: anywhere; }
.pcard__line { color: var(--muted); font-size: 0.96rem; }
.tile { flex: none; display: inline-flex; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.tile svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tile svg .solid { fill: currentColor; opacity: 0.2; stroke: none; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 13px; font-size: 0.82rem; font-weight: 700; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.pill.soon { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.pill.age { color: var(--ink); }

.promises, .studio { padding-top: clamp(40px, 7vw, 80px); }
.studio { padding-bottom: clamp(44px, 7vw, 84px); }
.promises ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.promises li { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface) 72%, transparent); }
.promises b { font-family: var(--display); font-size: 1.24rem; }
.promises span { color: var(--muted); }
.studio ul { margin-top: 18px; display: grid; gap: 10px; max-width: var(--measure); color: var(--muted); }
.studio li { padding-left: 18px; border-left: 3px solid var(--accent); }

.foot { border-top: 1px solid var(--line); padding-top: 22px; padding-bottom: 34px; color: var(--muted); font-size: 0.92rem; }
.foot .inner { display: grid; gap: 10px; }
.foot ul { display: flex; flex-wrap: wrap; gap: 0 16px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }

.show-hero { overflow: hidden; padding-top: clamp(26px, 5vw, 60px); padding-bottom: clamp(36px, 7vw, 90px); min-height: min(76vh, 640px); display: flex; align-items: flex-end; }
.show-hero .inner { position: relative; width: 100%; }
.show-hero__art { position: absolute; inset: 0; width: 100%; height: 118%; object-fit: cover; transform: translate3d(0, calc(var(--parallax, 0px) * -1), 0); }
.show-hero__veil { position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 4%, color-mix(in srgb, var(--bg) 76%, transparent) 58%, color-mix(in srgb, var(--bg) 58%, transparent)); }
.crumb { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.crumb::before { content: "←"; margin-right: 8px; }
.show-hero h1 { font-size: clamp(2.3rem, 7.4vw, 4.8rem); font-weight: 760; font-stretch: 90%; letter-spacing: -0.005em; margin: 8px 0 14px; color: var(--ink); }
.show-hero .pills { margin: 0 0 16px; }
.lead { font-size: clamp(1.08rem, 2.3vw, 1.34rem); max-width: 54ch; }
.muted { color: var(--muted); margin-top: 10px; max-width: 60ch; }
.steps, .points, .screens, .extras, .siblings { padding-top: clamp(30px, 5vw, 60px); }
.siblings { padding-bottom: clamp(40px, 6vw, 72px); }
.extras { padding-bottom: clamp(26px, 4vw, 40px); }
.steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.steps li { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.step__n { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; background: var(--accent); color: var(--on-accent); }
.steps b { font-family: var(--display); font-size: 1.2rem; }
.steps span:last-child { color: var(--muted); }
.points ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-top: 20px; }
.points li { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); font-weight: 600; transition: transform 0.25s; }
.notice { margin-top: 18px; padding: 14px 18px; border-left: 4px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); max-width: var(--measure); }
.phones { display: flex; gap: 16px; overflow-x: auto; padding: 18px 2px 12px; scroll-snap-type: x proximity; }
.phone { margin: 0; flex: none; width: clamp(170px, 26vw, 240px); border-radius: 28px; overflow: hidden; border: 3px solid var(--line); scroll-snap-align: start; background: #0b0713; }
.phone img { width: 100%; height: auto; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cardlet { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.cardlet h2 { font-size: 1.4rem; margin-bottom: 8px; }
.cardlet p { color: var(--muted); }
.stack { display: flex; flex-direction: column; align-items: flex-start; margin-top: 6px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }

.doc { padding-top: clamp(30px, 6vw, 64px); padding-bottom: clamp(44px, 7vw, 84px); }
.doc .inner { max-width: 44rem; }
.doc h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; font-stretch: 85%; margin-bottom: 18px; }
.doc h2 { font-size: 1.4rem; margin-top: 30px; margin-bottom: 8px; }
.doc p { margin: 10px 0; }
.doc ul { list-style: disc; padding-left: 1.3em; margin: 10px 0; }
.doc a { color: var(--accent); overflow-wrap: anywhere; }
.doc .mail a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.2rem; font-weight: 700; }
.facts { display: grid; gap: 6px; margin: 10px 0; }
.facts div { display: grid; grid-template-columns: minmax(90px, 8rem) 1fr; gap: 10px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.pending { padding: 1px 8px; border-radius: 6px; background: var(--pending-bg); color: var(--pending-ink); font-weight: 700; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__wheel { max-width: 300px; order: -1; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promises ul, .steps ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pgrid, .duo { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mark span { font-size: 1.15rem; }
}
.foot a { min-width: 44px; justify-content: center; }
.facts a, .doc p > a[href^="mailto"] { display: inline-flex; align-items: center; min-height: 44px; }
.show-hero__mark { display: block; width: 48px; height: 48px; margin-bottom: 12px; }