/* EasyPoliza landing. Plain CSS, no build step: Cloudflare Pages serves this folder as is.
   Palette: marine (#1D3557, the tenant primary) as the base, the logo blue as the brand, and orange as the contrast
   colour reserved for the action. Theme: `color-scheme` + `light-dark()`; `data-theme` on <html> (set by theme.js)
   forces one side, and without it the page follows the system. */

:root {
  color-scheme: light dark;

  /* Fixed palette */
  --night: #0a1628;
  --night-2: #10233f;
  --marine: #1d3557;
  --brand: #0878f9;
  --brand-deep: #0b57c9;
  --sky: #4da3ff;
  --accent: #ff9900;
  --accent-hover: #ffad33;
  --on-night: #ffffff;
  --on-night-muted: #a9b9d3;

  /* Themed tokens */
  --bg: light-dark(#ffffff, #0a1628);
  --surface: light-dark(#f1f4f9, #11213a);
  --field: light-dark(#e4eaf3, #1b3050);
  --border: light-dark(#d3dbe8, #27406a);
  --heading: light-dark(#0a1628, #ffffff);
  --body: light-dark(#26344a, #cdd8ea);
  --muted: light-dark(#52627a, #9fb0c9);
  --ink: light-dark(#0b57c9, #4da3ff);
  --accent-ink: light-dark(#a85a00, #ffb23f);
  --shadow: light-dark(0 10px 30px -12px rgb(10 22 40 / 0.18), 0 10px 30px -12px rgb(0 0 0 / 0.6));

  --radius: 0.875rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }

/* The native bar is hidden only on a page that has the floating one (the landing). A page without it — the 404 —
   keeps the native scrollbar. */
html:has([data-scrollbar]) { scrollbar-width: none; -ms-overflow-style: none; }
html:has([data-scrollbar])::-webkit-scrollbar { width: 0; height: 0; }

/* The page scrolls with a floating pill instead of a native bar: no track, no arrows, and it lives in the content
   area — it starts under the header and stops at the footer — so it never paints over them. It only shows while the
   page is moving. */
.scrollbar {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0; transition: opacity 0.25s ease-out;
}
.scrollbar.is-visible { opacity: 1; }
.scrollbar__thumb {
  position: absolute; right: 3px; width: 6px; min-height: 2.5rem;
  border-radius: 999px; background: rgb(148 168 198 / 0.65);
  pointer-events: auto; cursor: grab; touch-action: none;
}
.scrollbar__thumb:hover, .scrollbar.is-dragging .scrollbar__thumb { background: rgb(148 168 198 / 0.95); cursor: grabbing; }
@media (pointer: coarse) { .scrollbar { display: none; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 0.25rem; }

svg[aria-hidden="true"] { flex: none; }

.container { width: min(100%, 72rem); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 40rem) { .container { padding-inline: 1.5rem; } }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: var(--radius);
  background: var(--accent); color: var(--night); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.25rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn svg { width: 1.25rem; height: 1.25rem; }
.btn:active { transform: translateY(1px); }
.btn--compact { min-height: 2.5rem; padding: 0 0.85rem; }
.btn--block { width: 100%; }

.btn--accent { background: var(--accent); color: var(--night); }
.btn--accent:hover { background: var(--accent-hover); }

.btn--ghost { border-color: rgb(255 255 255 / 0.28); color: var(--on-night); background: transparent; }
.btn--ghost:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.5); }

.btn--secondary { background: var(--field); color: var(--heading); }
.btn--secondary:hover { border-color: var(--border); }

/* The label of a button is dropped on a narrow screen and the icon stays. */
.sr-only-narrow {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 40rem) {
  .sr-only-narrow { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Header (always marine) ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(10 22 40 / 0.96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  color: var(--on-night);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.site-header__controls { display: flex; align-items: center; gap: 0.5rem; }

.brand { display: inline-flex; }
.brand img { height: 1.5rem; width: auto; }
@media (min-width: 40rem) { .brand img { height: 1.75rem; } }

/* The bar shows the sections in reading order and drops the last ones when there is no room: three at the smallest
   width where the nav appears, then one more per step, so it never wraps or collides with the brand or the controls. */
.site-nav { display: none; gap: 1.75rem; }
.site-nav a { display: none; color: var(--on-night-muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.site-nav a:nth-child(-n + 3) { display: inline; }
.site-nav a:hover { color: var(--on-night); }
@media (min-width: 56rem) { .site-nav { display: flex; margin-inline: auto; } }
@media (min-width: 60rem) { .site-nav a:nth-child(4) { display: inline; } }
@media (min-width: 72rem) { .site-nav a:nth-child(5) { display: inline; } }

/* The toggle shows where it takes you: the sun while the page is dark, the moon while it is light. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border: 1px solid rgb(255 255 255 / 0.28); border-radius: 50%;
  background: transparent; color: var(--on-night); cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.5); }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle__sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

/* ---------- Hero (always marine) ---------- */

.hero {
  position: relative; z-index: 1; overflow: hidden; color: var(--on-night);
  padding-block: 3rem 4.5rem;
  background:
    radial-gradient(56rem 28rem at 88% -8%, rgb(8 120 249 / 0.38), transparent 62%),
    radial-gradient(34rem 20rem at -6% 56%, rgb(255 153 0 / 0.16), transparent 62%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
}
/* In the light theme the hero is navy over white, and a soft shadow — a blurred edge has a tail instead of a stop —
   is what closes it. In the dark one the first section is already the same navy, so a shadow would draw the very edge
   it is meant to hide. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero { box-shadow: 0 24px 54px -34px rgb(6 15 28 / 0.6); }
}
:root[data-theme="light"] .hero { box-shadow: 0 24px 54px -34px rgb(6 15 28 / 0.6); }

.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);
}
@media (min-width: 64rem) { .hero { padding-block: 5.5rem 7rem; } }

.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (min-width: 64rem) { .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; } }

.pill {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.06);
  font-size: 0.85rem; font-weight: 600; color: var(--on-night);
}
.pill__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-out infinite; }

.hero h1 {
  font-size: clamp(2.25rem, 6.2vw, 4rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 800;
  color: var(--on-night); text-wrap: balance;
}
.hl {
  background: linear-gradient(90deg, var(--sky), #ffb84d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { max-width: 38rem; margin-top: 1.25rem; font-size: 1.125rem; color: var(--on-night-muted); text-wrap: pretty; }
.hero .actions { margin-top: 2rem; }

/* ---------- Illustrative mock ---------- */

.mock { display: grid; gap: 0.75rem; justify-items: center; }
/* Everything inside the card is a solid fill, with no 1px lines: a hairline that moves by a fraction of a pixel
   pulses (one crisp line, then two half-intensity ones) and reads as flicker, while the edge of a fill only
   shifts smoothly. The card is also opaque and promoted to its own layer. */
.mock__card {
  width: min(100%, 26rem); padding: 1.25rem; border-radius: 1.25rem;
  background: #16305a;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
  will-change: transform; backface-visibility: hidden;
  animation: float 7s ease-in-out infinite;
}
.mock__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.mock__title { font-weight: 700; color: var(--on-night); }
.mock__chip { padding: 0.15rem 0.65rem; border-radius: 999px; background: #1d4f8f; color: #cfe4ff; font-size: 0.78rem; font-weight: 600; }
.mock__list { display: grid; gap: 0.6rem; }
.mock__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem;
  padding: 0.75rem; border-radius: 0.75rem; background: #1d3a69;
}
.mock__row--best { background: #3a4660; }
.mock__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: var(--marine);
  font-weight: 700; color: var(--on-night);
}
.mock__lines { display: grid; gap: 0.4rem; }
.mock__price { display: grid; justify-items: end; gap: 0.35rem; }
.mock__tag { padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--accent); color: var(--night); font-size: 0.7rem; font-weight: 700; white-space: nowrap; }

.bar { display: block; height: 0.5rem; border-radius: 999px; background: #4a6490; }
.bar--lg { width: 7.5rem; }
.bar--md { width: 6rem; }
.bar--sm { width: 4.5rem; height: 0.4rem; background: #35527f; }
.bar--xs { width: 3.5rem; height: 0.4rem; background: #35527f; }
.bar--price { width: 3.5rem; height: 0.7rem; background: #7d93b8; }

/* The actions of the illustration stay subordinate to the prices: they are a hint of what the card does, not the
   result it shows. */
.mock__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.mock__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem; border-radius: 0.6rem;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 0.8rem;
}
.mock__btn--primary { padding-inline: 1.15rem; }
.mock__btn--ghost { background: transparent; color: #cfe0f5; box-shadow: inset 0 0 0 1px #2f4d78; }
.mock__btn svg { width: 0.95rem; height: 0.95rem; }
.mock__caption { font-size: 0.8rem; color: var(--on-night-muted); }

/* ---------- Sections ---------- */

/* Two bands alternate, the lighter one first in both themes: it is the page canvas in the light theme and the raised
   tone in the dark one. So the page opens and closes on the lighter band, and the dark footer never merges with the
   last section. Inside a band the boxes are one step up, which is what ``--surface`` means here. */
.section {
  padding-block: 4rem;
  --band: light-dark(#ffffff, #11213a);
  background: var(--band);
  --surface: light-dark(#f1f4f9, #1b3050);
}
@media (min-width: 64rem) { .section { padding-block: 6rem; } }
.section--tinted {
  --band: light-dark(#f1f4f9, #0a1628);
  --surface: light-dark(#ffffff, #11213a);
}

/* The first section takes the exact tone the hero ends on, so in the dark theme the two are one surface and no edge
   can appear at any zoom; in the light one it is the page white, closed by the hero's shadow. */
.section--intro {
  --band: light-dark(#ffffff, #10233f);
}


.section__head { max-width: 42rem; margin-bottom: 2.5rem; }
.section__head p:last-child { margin-top: 1rem; font-size: 1.05rem; color: var(--muted); }

.eyebrow { margin-bottom: 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }

h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: var(--heading); text-wrap: balance; }
h3 { font-size: 1.15rem; line-height: 1.3; font-weight: 700; color: var(--heading); }

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  padding: 1.5rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: var(--shadow); }
.card > h3 { margin-bottom: 0.5rem; }
.card p { color: var(--muted); }

/* The icon sits beside the title, and the tag wraps to a second line when it does not fit (always, on a phone). */
.card__head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.85rem; }
.card__heading { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; min-width: 0; }
.card__heading h3 { margin: 0; }
.card__icon {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 0.75rem;
  background: light-dark(rgb(8 120 249 / 0.12), rgb(77 163 255 / 0.16)); color: var(--ink);
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }

.tag {
  display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; vertical-align: middle;
  background: light-dark(rgb(255 153 0 / 0.16), rgb(255 153 0 / 0.18)); color: var(--accent-ink);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}

/* Featured tool: the copy on one side and what it does on the other. */
.feature {
  display: grid; gap: 2rem; padding: 1.5rem; border-radius: 1.25rem;
  border: 1px solid var(--border); background: var(--surface);
}
@media (min-width: 56rem) { .feature { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; padding: 2.5rem; } }
.feature__copy h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.feature__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.feature__head .card__icon { margin-bottom: 0; }
.feature__head h3 { margin-bottom: 0; }
.feature__copy > p { color: var(--muted); }

.devices {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: 1.25rem; padding: 1.25rem 1.5rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
}
.devices p { color: var(--muted); }
.devices strong { color: var(--heading); }
.devices ul { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.devices li { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--heading); }
.devices svg { width: 2rem; height: 2rem; color: var(--ink); }

.feature__list { display: grid; gap: 1.25rem; align-content: center; }
.feature__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.feature__list svg { width: 1.6rem; height: 1.6rem; margin-top: 0.15rem; color: var(--ink); }
.feature__list h4 { margin: 0 0 0.2rem; font-size: 1.05rem; font-weight: 700; color: var(--heading); }
.feature__list p { color: var(--muted); }

.steps { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative; padding: 1.5rem 1.5rem 1.5rem 4.25rem; border-radius: var(--radius);
  border: 1px solid var(--border); counter-increment: step;
}
.step::before {
  content: counter(step); position: absolute; left: 1.25rem; top: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--accent); color: var(--night); font-weight: 800;
}
.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--muted); }

/* ---------- Call to action ---------- */

/* The closing block is the last band of the alternation: a fill of its own, so the page never runs into the dark
   footer (they would merge in the dark theme). */
.cta { text-align: center; }
.cta p { max-width: 36rem; margin: 1rem auto 0; color: var(--muted); }
.cta .actions { justify-content: center; margin-top: 1.75rem; }

/* ---------- Footer (always marine) ---------- */

.site-footer { background: var(--night); color: var(--on-night-muted); border-top: 1px solid rgb(255 255 255 / 0.08); }
.site-footer__top { display: grid; gap: 2.5rem; padding-block: 3.5rem 2.5rem; }
@media (min-width: 40rem) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .site-footer__top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 3rem; } }

.site-footer__brand { display: grid; gap: 1rem; align-content: start; }
.site-footer__brand .brand img { height: 1.75rem; }
.site-footer__brand p { max-width: 18rem; }

/* Overrides the global h2 size: it is the title of a column, not of a section. */
.site-footer__title {
  margin-bottom: 1rem; font-size: 0.8rem; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--on-night);
}
.site-footer__col ul { display: grid; gap: 0.6rem; }
.site-footer a { text-decoration: none; }
.site-footer__col a:hover { color: var(--on-night); text-decoration: underline; }
.site-footer .tag { margin-left: 0.25rem; color: #ffb23f; background: rgb(255 153 0 / 0.18); }

.site-footer__legal {
  padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.08); font-size: 0.875rem; text-align: center;
}

/* ---------- Panels (sign-in "coming soon" and contact) ---------- */

.panel {
  width: min(calc(100% - 2rem), 28rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 0;
  border: 1px solid var(--border); border-radius: 1.25rem;
  background: var(--bg); color: var(--body); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6);
}
.panel::backdrop { background: rgb(5 12 24 / 0.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.panel[open] { opacity: 1; transform: none; transition: opacity 0.25s ease-out, transform 0.25s ease-out; }
@starting-style { .panel[open] { opacity: 0; transform: translateY(1rem) scale(0.98); } }
html:has(.panel[open]) { overflow: hidden; }

.panel__body { padding: 2rem 1.5rem; }
@media (min-width: 40rem) { .panel__body { padding: 2.5rem; } }
.panel__head { display: flex; align-items: center; gap: 1rem; }
.panel__badge {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--accent); color: var(--night);
  animation: wiggle 3.5s ease-in-out infinite;
}
.panel__badge svg { width: 1.6rem; height: 1.6rem; }
.panel h2 { font-size: 1.75rem; }
.panel__text { margin-top: 1.5rem; line-height: 1.7; color: var(--muted); }
.panel__text strong { color: var(--heading); }
.panel__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; margin-top: 2.25rem; }

.contact-options { display: grid; gap: 0.75rem; margin-top: 2rem; }
.contact-options .btn { min-height: 3rem; }

/* ---------- 404 ---------- */

.lost { display: grid; min-height: 100dvh; place-items: center; padding-block: 3rem; background: var(--night); color: var(--on-night); }
.lost__box { display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.lost__box .brand img { height: 2rem; }
.lost__code { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.lost__box h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; font-weight: 800; color: var(--on-night); text-wrap: balance; }
.lost__box > p { max-width: 32rem; color: var(--on-night-muted); }
.lost__box .actions { justify-content: center; margin-top: 0.5rem; }

/* ---------- Motion ---------- */

.has-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.has-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
.has-reveal .card[data-reveal].is-visible { transition: opacity 0.6s ease-out, transform 0.2s, border-color 0.2s, box-shadow 0.2s; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgb(255 153 0 / 0.6); }
  70%, 100% { box-shadow: 0 0 0 0.6rem rgb(255 153 0 / 0); }
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6rem); } }
@keyframes wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-8deg); } 94% { transform: rotate(8deg); } 97% { transform: rotate(-4deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}