:root { --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif; }

.archive {
  --u: min(calc(98vw / 1536), 1px);
  --ar-ink: #e3ecff;
  --ar-soft: #8fa9e0;
  --ar-dim: #6b7fb3;
  --ar-line: rgba(130, 170, 255, 0.34);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vw, 5.5rem);
  background:
    radial-gradient(80% 55% at 14% 0%, rgba(38, 76, 168, 0.3), transparent 62%),
    radial-gradient(60% 50% at 100% 38%, rgba(30, 62, 150, 0.32), transparent 64%),
    linear-gradient(180deg, #070b18 0%, #060914 62%, #050812 100%);
}

/* ---------- Backdrop: mist, flowers, petals ---------- */
.arc-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.arc-mist {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background:
    radial-gradient(38% 80% at 6% 105%, rgba(52, 96, 205, 0.4), transparent 70%),
    radial-gradient(46% 70% at 94% 105%, rgba(62, 104, 215, 0.42), transparent 70%),
    radial-gradient(62% 45% at 52% 118%, rgba(34, 68, 160, 0.34), transparent 72%);
  filter: blur(12px);
}
.arc-flower {
  position: absolute; mix-blend-mode: screen; user-select: none;
  filter: drop-shadow(0 0 28px rgba(79, 140, 255, 0.3));
}
.arc-flower--r  { right: -9.5vw; top: 19%; width: 21vw; transform: rotate(14deg); opacity: 0.85; }
.arc-flower--tr { right: -4vw; top: 1%; width: 9vw; transform: rotate(-8deg); opacity: 0.75; }
.arc-flower--bl { left: -5.5vw; bottom: 9%; width: 13vw; transform: rotate(-18deg); opacity: 0.8; }

.petal {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(20px * var(--s)); height: calc(28px * var(--s));
  border-radius: 100% 0 100% 0;
  background: linear-gradient(145deg, rgba(150, 190, 255, 0.85), rgba(60, 105, 215, 0.55));
  box-shadow: 0 0 12px rgba(79, 140, 255, 0.35);
  opacity: 0.8;
  transform: rotate(var(--r));
  animation: petalDrift 11s ease-in-out var(--d) infinite alternate;
}
@keyframes petalDrift {
  from { transform: translate(0, 0) rotate(var(--r)); }
  to   { transform: translate(18px, 26px) rotate(calc(var(--r) + 34deg)); }
}

/* ---------- Composition (mobile / tablet flow first) ---------- */
.arc {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 2.2rem;
  width: min(100%, 680px);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.spark { width: 18px; height: 18px; fill: #cfe0ff; filter: drop-shadow(0 0 7px rgba(130, 175, 255, 0.9)); animation: sparkle 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes sparkle { 0%, 100% { opacity: 0.55; transform: scale(0.85) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(10deg); } }
.spark--title, .spark--mock1, .spark--mock2, .spark--a, .spark--b, .spark--end { display: none; }

.arc__eyebrow { display: flex; align-items: center; gap: 0.7rem; font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-accent-bright); }
.arc__eyebrow i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--ar-line), transparent); }
.arc__eyebrow .spark { width: 16px; height: 16px; fill: var(--color-accent-bright); }

.arc__titlewrap { position: relative; }
.arc__title {
  font-family: var(--font-serif); font-style: italic; font-weight: 500; text-transform: uppercase;
  font-size: clamp(4rem, 21vw, 7rem); line-height: 0.82; letter-spacing: 0;
  background: linear-gradient(180deg, #eef4ff 0%, #b4ccff 52%, #7ea5f4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 22px rgba(79, 140, 255, 0.35));
}
.arc__ring { display: none; }
.arc__vrule { display: none; }
.arc ol, .arc ul { padding: 0; margin: 0; }

.arc__tag { font-family: var(--font-serif); font-style: italic; font-size: 1.9rem; line-height: 1.12; color: var(--ar-ink); }
.arc__sub { font-family: var(--font-serif); font-style: italic; font-size: 1.12rem; line-height: 1.3; color: var(--ar-soft); margin-top: 0.9rem; }

.arc__meta { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.arc__pill { position: relative; display: inline-block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ar-ink); border: 1px solid rgba(140, 178, 255, 0.55); border-radius: 999px; padding: 0.32rem 0.95rem; }
.arc__status { display: flex; align-items: center; gap: 0.6rem; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: #cfd9f3; }
.arc__status b { color: var(--color-success); font-weight: 600; }
.arc__status s { width: 1px; height: 0.95em; background: rgba(150, 180, 255, 0.4); text-decoration: none; }
.live-ico { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid var(--color-success); position: relative; box-shadow: 0 0 10px rgba(55, 211, 153, 0.35); }
.live-ico::after { content: ""; position: absolute; inset: 0.33rem; border-radius: 50%; background: var(--color-success); }

.arc__mock { position: relative; display: block; perspective: 1500px; }
.arc__float { display: block; animation: mockFloat 7s ease-in-out infinite; }
@keyframes mockFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.browser {
  --rx: 6deg; --ry: -7deg;
  position: relative; display: block; overflow: hidden;
  border-radius: 14px;
  background: #0d1424;
  box-shadow: inset 0 0 0 1px rgba(170, 200, 255, 0.4), 0 40px 80px -28px rgba(0, 0, 0, 0.85), 0 0 60px -16px rgba(79, 140, 255, 0.5);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(2deg);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
}
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 0.5rem 0.75rem; background: linear-gradient(180deg, rgba(190, 210, 255, 0.16), rgba(190, 210, 255, 0.07)); border-bottom: 1px solid rgba(160, 190, 255, 0.22); }
.browser__bar > i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.browser__bar > i:nth-child(1) { background: #ff5f57; }
.browser__bar > i:nth-child(2) { background: #febc2e; }
.browser__bar > i:nth-child(3) { background: #28c840; }
.browser__url { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; max-width: 60%; margin-inline: auto; font-size: 0.72rem; color: #aebde0; background: rgba(8, 12, 26, 0.55); border-radius: 999px; padding: 0.18rem 0.8rem; }
.browser__tools { display: inline-flex; gap: 10px; color: #aebde0; font-size: 0.85rem; line-height: 1; }
.browser__tools b { font-weight: 400; }
.browser img { display: block; width: 100%; height: auto; }

.arc__story h3 { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.5; color: #cfdbf7; font-family: var(--font-body); margin-bottom: 1rem; }
.arc__story p { font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.32; color: #d6e0f6; }
.br-d { display: none; }

.arc h4 { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #dfe8fb; margin-bottom: 1.1rem; }
.arc h4 i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--ar-line), transparent); }

.arc__focus ol { list-style: none; display: grid; gap: 0.95rem; }
.arc__focus li { display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #d4def5; }
.arc__focus li b { font-family: var(--font-serif); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(150, 185, 255, 0.55); color: #e6eeff; }

.arc__feel { border-top: 1px solid var(--ar-line); padding-top: 1.2rem; }
.arc__feel ul { list-style: none; display: grid; gap: 0.95rem; }
.arc__feel li { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #cdd9f3; }
.dots { display: inline-flex; gap: 10px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(140, 175, 255, 0.55); box-sizing: border-box; }
.dots i.on { background: radial-gradient(circle at 35% 30%, #cfe0ff, #5b92ff 70%); border-color: transparent; box-shadow: 0 0 9px rgba(79, 140, 255, 0.7); }

.arc__receipt { position: relative; display: grid; grid-template-columns: 46px 1fr; grid-template-areas: "bar list" "bar info"; border: 1px solid rgba(150, 180, 255, 0.28); border-radius: 6px; background: linear-gradient(180deg, rgba(40, 62, 120, 0.4), rgba(14, 24, 52, 0.55)); box-shadow: inset 0 1px 0 rgba(200, 220, 255, 0.1), 0 24px 50px -28px rgba(0, 0, 0, 0.8); }
.receipt__bar { grid-area: bar; display: grid; place-items: center; border-right: 1px solid rgba(150, 180, 255, 0.2); }
.receipt__bar i { display: block; width: 24px; height: 70%; background: repeating-linear-gradient(0deg, rgba(205, 220, 250, 0.9) 0 2px, transparent 2px 4px, rgba(205, 220, 250, 0.9) 4px 5px, transparent 5px 8px); }
.receipt__list { grid-area: list; padding: 1.2rem 1.2rem 0.4rem; }
.receipt__list h4 { margin-bottom: 0.9rem; }
.receipt__list ul { list-style: none; display: grid; gap: 0.5rem; }
.receipt__list li { display: grid; grid-template-columns: 1.3rem 1fr; font-size: 0.92rem; color: #d3ddf4; }
.receipt__list li::before { content: "\2713"; color: #bcd3ff; }
.receipt__info { grid-area: info; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.3rem 1rem; padding: 0.4rem 1.2rem 1.2rem; border-top: 1px dashed rgba(150, 180, 255, 0.3); margin-top: 0.6rem; padding-top: 0.9rem; }
.receipt__info .lbl { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8ea3d4; }
.receipt__info strong { font-weight: 400; font-size: 0.95rem; color: #e6eeff; }
.receipt__chip { display: inline-flex; align-items: center; gap: 6px; width: max-content; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #dfe9ff; border: 1px solid rgba(150, 185, 255, 0.6); border-radius: 999px; padding: 0.3rem 0.9rem; }

.arc__journey ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.arc__journey li { position: relative; text-align: center; }
.arc__journey li:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: calc(50% + 22px); width: calc(100% - 44px); height: 1px; background: linear-gradient(90deg, rgba(150, 185, 255, 0.45), rgba(150, 185, 255, 0.2)); }
.arc__journey .n { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 0.75rem; border-radius: 50%; border: 1px solid rgba(150, 185, 255, 0.6); box-shadow: inset 0 0 0 3px rgba(10, 18, 40, 0.9), inset 0 0 0 4px rgba(150, 185, 255, 0.25), 0 0 14px rgba(79, 140, 255, 0.25); font-family: var(--font-serif); font-size: 0.88rem; color: #e6eeff; }
.arc__journey em { display: block; font-style: normal; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: #aebde0; }

.arc__cta {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  height: 4.1rem; border-radius: 999px; font-size: 1.05rem; color: #eaf1ff;
  border: 1.3px solid rgba(140, 178, 255, 0.7);
  background: linear-gradient(180deg, rgba(70, 110, 220, 0.18), rgba(14, 24, 56, 0.35));
  box-shadow: 0 0 34px -8px rgba(79, 140, 255, 0.55), inset 0 0 22px rgba(79, 140, 255, 0.1);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.arc__cta:hover { border-color: #b4ceff; box-shadow: 0 0 50px -6px rgba(110, 163, 255, 0.85), inset 0 0 30px rgba(79, 140, 255, 0.2); transform: translateY(-2px); }
.arc__cta .spark { width: 20px; height: 20px; }
.arc__cta .arrow { transition: transform 0.35s var(--ease); }
.arc__cta:hover .arrow { transform: translateX(5px); }

.arc__closer { display: flex; flex-direction: column; gap: 0.9rem; }
.arc__big { font-family: var(--font-serif); font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 6.4vw, 2.5rem); letter-spacing: 0.02em; line-height: 1.1; color: #8aa6e6; display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.arc__big .now { color: #a9c3ff; }
.arc__cline { display: none; }
.arc__note { font-family: var(--font-serif); font-style: italic; font-size: 1rem; line-height: 1.3; color: #8294c2; }

/* ---------- Scroll reveal ---------- */
.js-reveal .rv { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease) calc(var(--i, 0) * 90ms), transform 0.9s var(--ease) calc(var(--i, 0) * 90ms); }
.js-reveal.is-in .rv { opacity: 1; transform: none; }
.js-reveal .arc__ring ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease) 0.4s; }
.js-reveal.is-in .arc__ring ellipse { stroke-dashoffset: 0; }

/* ---------- Desktop: 1:1 composition on a 1536-wide canvas ---------- */
@media (min-width: 1180px) {
  .archive { padding-block: 0 calc(10 * var(--u)); }
  .arc { display: block; width: calc(1536 * var(--u)); height: calc(960 * var(--u)); padding: 0; margin-inline: auto; }
  .arc > * { position: absolute; }
  .br-d { display: inline; }

  .arc__eyebrow { left: calc(160 * var(--u)); top: calc(15 * var(--u)); gap: calc(12 * var(--u)); font-size: max(10.5px, calc(14 * var(--u))); letter-spacing: 0.26em; }
  .arc__eyebrow .spark { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .arc__eyebrow i { flex: none; width: calc(299 * var(--u)); background: linear-gradient(90deg, var(--ar-line), rgba(130, 170, 255, 0.5)); }

  .arc__titlewrap { left: calc(155 * var(--u)); top: calc(58 * var(--u)); }
  .arc__title { font-size: calc(112 * var(--u)); line-height: calc(80 * var(--u)); white-space: nowrap; }
  .arc__ring--title { display: block; position: absolute; left: calc(-77 * var(--u)); top: calc(-24 * var(--u)); width: calc(562 * var(--u)); height: calc(190 * var(--u)); overflow: visible; pointer-events: none; z-index: -1; }
  .spark--title { display: block; position: absolute; left: calc(388 * var(--u)); top: calc(68 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); }

  .arc__vrule { display: block; left: calc(693 * var(--u)); top: calc(78 * var(--u)); width: 1px; height: calc(140 * var(--u)); background: linear-gradient(180deg, transparent, rgba(130, 170, 255, 0.5) 20%, rgba(130, 170, 255, 0.5) 80%, transparent); }

  .arc__intro { left: calc(729 * var(--u)); top: calc(74 * var(--u)); width: calc(340 * var(--u)); }
  .arc__tag { font-size: calc(30 * var(--u)); line-height: calc(32 * var(--u)); }
  .arc__sub { font-size: calc(17.5 * var(--u)); line-height: calc(21 * var(--u)); margin-top: calc(16 * var(--u)); }

  .arc__meta { left: calc(1193 * var(--u)); top: calc(89 * var(--u)); gap: calc(17 * var(--u)); }
  .arc__pill { font-size: max(10.5px, calc(14 * var(--u))); padding: calc(5 * var(--u)) calc(15 * var(--u)); }
  .arc__pill::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(135 * var(--u)); height: 1px; background: linear-gradient(90deg, rgba(140, 178, 255, 0.5), transparent); }
  .arc__status { gap: calc(11 * var(--u)); font-size: max(10.5px, calc(14 * var(--u))); }
  .live-ico { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  .live-ico::after { inset: calc(6 * var(--u)); }

  .arc__mock { left: calc(120 * var(--u)); top: calc(238 * var(--u)); width: calc(745 * var(--u)); }
  .arc__ring--mock { display: block; position: absolute; left: calc(-62 * var(--u)); top: calc(96 * var(--u)); width: calc(850 * var(--u)); height: calc(290 * var(--u)); overflow: visible; pointer-events: none; z-index: -1; }
  .browser { --rx: 9deg; --ry: -5deg; border-radius: calc(16 * var(--u)); }
  .browser__bar { padding: calc(8 * var(--u)) calc(14 * var(--u)); gap: calc(7 * var(--u)); }
  .browser__bar > i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
  .browser__url { max-width: none; flex: none; width: calc(330 * var(--u)); font-size: max(9px, calc(12 * var(--u))); margin-inline: auto; }
  .browser__tools { font-size: calc(14 * var(--u)); gap: calc(14 * var(--u)); }
  .spark--mock1 { display: block; position: absolute; left: calc(-56 * var(--u)); top: calc(262 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); animation-delay: -1.2s; }
  .spark--mock2 { display: block; position: absolute; left: calc(-6 * var(--u)); top: calc(70 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); animation-delay: -2.1s; }

  .arc__story { left: calc(943 * var(--u)); top: calc(295 * var(--u)); width: calc(560 * var(--u)); }
  .arc__story h3 { font-size: max(11px, calc(15.5 * var(--u))); line-height: calc(20 * var(--u)); margin-bottom: calc(33 * var(--u)); }
  .arc__story p { font-size: calc(19.5 * var(--u)); line-height: calc(23.5 * var(--u)); }

  .arc h4 { font-size: max(10.5px, calc(15 * var(--u))); margin-bottom: 0; gap: calc(14 * var(--u)); }
  .arc__focus { left: calc(943 * var(--u)); top: calc(485 * var(--u)); width: calc(292 * var(--u)); }
  .arc__focus ol { margin-top: calc(24 * var(--u)); gap: 0; }
  .arc__focus li { grid-template-columns: calc(41 * var(--u)) 1fr; padding-left: calc(7 * var(--u)); height: calc(30 * var(--u)); align-items: center; font-size: max(9.5px, calc(11.4 * var(--u))); letter-spacing: 0.07em; white-space: nowrap; }
  .arc__focus li b { font-size: calc(15 * var(--u)); }

  .arc__feel { left: calc(1260 * var(--u)); top: calc(483 * var(--u)); width: calc(250 * var(--u)); height: calc(156 * var(--u)); border-top: 0; border-left: 1px solid var(--ar-line); padding: calc(2 * var(--u)) 0 0 calc(19 * var(--u)); }
  .arc__feel ul { margin-top: calc(16.5 * var(--u)); gap: 0; width: calc(194 * var(--u)); }
  .arc__feel li { height: calc(31 * var(--u)); font-size: max(10px, calc(12.6 * var(--u))); }
  .dots { gap: calc(10 * var(--u)); }
  .dots i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

  .arc__receipt { left: calc(75 * var(--u)); top: calc(648 * var(--u)); width: calc(578 * var(--u)); height: calc(158 * var(--u)); grid-template-columns: calc(65 * var(--u)) calc(353 * var(--u)) 1fr; grid-template-areas: "bar list info"; transform: rotate(0.5deg); border-radius: calc(8 * var(--u)); }
  .arc__receipt::before, .arc__receipt::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(9 * var(--u)); pointer-events: none; }
  .arc__receipt::before { left: -1px; background: radial-gradient(circle at 0 50%, #070b18 0 calc(5.5 * var(--u)), transparent calc(6.2 * var(--u))) 0 0 / calc(9 * var(--u)) calc(21 * var(--u)) repeat-y; }
  .arc__receipt::after { right: -1px; background: radial-gradient(circle at 100% 50%, #070b18 0 calc(5.5 * var(--u)), transparent calc(6.2 * var(--u))) 0 0 / calc(9 * var(--u)) calc(21 * var(--u)) repeat-y; }
  .receipt__bar i { width: calc(26 * var(--u)); height: calc(113 * var(--u)); }
  .receipt__list { padding: calc(21 * var(--u)) 0 0 calc(24 * var(--u)); border-right: 1px dashed rgba(150, 180, 255, 0.28); }
  .receipt__list h4 { margin-bottom: calc(17 * var(--u)); font-size: max(10.5px, calc(14.5 * var(--u))); }
  .receipt__list ul { gap: 0; }
  .receipt__list li { grid-template-columns: calc(22 * var(--u)) 1fr; height: calc(22 * var(--u)); align-items: center; font-size: max(11px, calc(15.5 * var(--u))); }
  .receipt__info { margin: 0; border: 0; padding: calc(29 * var(--u)) 0 0 calc(19 * var(--u)); display: block; }
  .receipt__info .lbl { display: block; font-size: max(9.5px, calc(12 * var(--u))); height: calc(22 * var(--u)); }
  .receipt__info strong { display: block; height: calc(34 * var(--u)); font-size: max(11px, calc(16 * var(--u))); }
  .receipt__chip { margin-top: calc(6 * var(--u)); font-size: max(10px, calc(13 * var(--u))); padding: calc(5 * var(--u)) calc(16 * var(--u)); }

  .arc__journey { left: calc(729 * var(--u)); top: calc(688 * var(--u)); width: calc(401 * var(--u)); }
  .arc__journey h4 { margin-bottom: calc(21 * var(--u)); }
  .arc__journey ol { width: calc(444 * var(--u)); margin-left: calc(-22.5 * var(--u)); }
  .arc__journey .n { width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-bottom: calc(12 * var(--u)); font-size: calc(14 * var(--u)); }
  .arc__journey li:not(:last-child)::after { top: calc(16 * var(--u)); left: calc(50% + 21 * var(--u)); width: calc(100% - 42 * var(--u)); }
  .arc__journey em { font-size: max(9px, calc(11.5 * var(--u))); }

  .arc__cta { left: calc(1214 * var(--u)); top: calc(711 * var(--u)); width: calc(275 * var(--u)); height: calc(70 * var(--u)); gap: calc(16 * var(--u)); font-size: max(13px, calc(19 * var(--u))); }
  .arc__cta .spark { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

  .arc__closer { left: calc(46 * var(--u)); top: calc(868 * var(--u)); width: calc(1415 * var(--u)); flex-direction: row; align-items: center; gap: 0; }
  .arc__big { flex: none; font-size: calc(39 * var(--u)); gap: 0 calc(34 * var(--u)); flex-wrap: nowrap; white-space: nowrap; }
  .arc__cline { display: block; flex: 1; height: 1px; margin: 0 calc(42 * var(--u)) 0 calc(34 * var(--u)); background: linear-gradient(90deg, rgba(140, 178, 255, 0.45), rgba(140, 178, 255, 0.5) 85%, transparent); }
  .arc__note { flex: none; width: calc(224 * var(--u)); text-align: right; font-size: max(10.5px, calc(13.5 * var(--u))); line-height: calc(17 * var(--u)); }

  .spark--end { display: block; left: calc(1472 * var(--u)); top: calc(885 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  .spark--a { display: block; left: calc(106 * var(--u)); top: calc(307 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); animation-delay: -0.8s; }
  .spark--b { display: block; left: calc(1146 * var(--u)); top: calc(155 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); animation-delay: -1.9s; }
}

@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  .arc__mock:hover .arc__float { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .spark, .petal, .arc__float { animation: none; }
  .js-reveal .rv, .js-reveal .arc__ring ellipse { transition: none; }
  .browser { transition: none; }
}