/* Three typefaces, three roles (SIL OFL, self-hosted in /fonts):
   Newsreader 300 = serif for headlines, large intro paragraphs and big statements,
   Inter Tight = sans for body text, forms and the "Lvl Up" wordmark,
   DM Mono = monospace for nav links, buttons, small uppercase labels, badges, code and numbers.
   The three "Fallback" faces are local() system fonts resized to the same metrics, so swapping causes no layout shift. */
@font-face { font-family: "Newsreader"; src: url("/fonts/Newsreader-300-latin.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/fonts/InterTight-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/fonts/DMMono-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/fonts/DMMono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* Arrows and the check mark are not in the latin subsets of these families, so each family also carries them (drawn from Inter Tight, one 1 KB file). */
@font-face { font-family: "Newsreader"; src: url("/fonts/InterTight-arrows.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+2190-2193,U+2197,U+2713; }
@font-face { font-family: "Inter Tight"; src: url("/fonts/InterTight-arrows.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+2190-2193,U+2197,U+2713; }
@font-face { font-family: "DM Mono"; src: url("/fonts/InterTight-arrows.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+2190-2193,U+2197,U+2713; }
@font-face { font-family: "DM Mono"; src: url("/fonts/InterTight-arrows.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+2190-2193,U+2197,U+2713; }
@font-face { font-family: "Newsreader Fallback"; src: local("Times New Roman"), local("Liberation Serif"), local("Times"); size-adjust: 102.2%; ascent-override: 71.9%; descent-override: 25.9%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 96.2%; ascent-override: 100.7%; descent-override: 25.1%; line-gap-override: 0%; }
@font-face { font-family: "DM Mono Fallback"; src: local("Courier New"), local("Liberation Mono"), local("Courier"); size-adjust: 100%; ascent-override: 99.2%; descent-override: 31%; line-gap-override: 0%; }

:root {
  --ink: #191919;
  --muted: #64615d;
  --canvas: #fcfaf8;
  --sand: #f3f0eb;
  --line: rgba(25, 25, 25, 0.16);
  --blue: #9ec7e0;
  --peach: #f4b574;
  --blush: #e9c9b9;
  --charcoal: #393734;
  --ember: #ff7a3d;
  --teal: #2fc9c5;
  --radius: 28px;
  --wrap: 1240px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --serif: "Newsreader", "Newsreader Fallback", "Times New Roman", Georgia, serif;
  --sans: "Inter Tight", "Inter Tight Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "DM Mono", "DM Mono Fallback", ui-monospace, "Courier New", monospace;
}
/* Arabic: the three Latin faces have no Arabic glyphs, so Arabic text falls back to a system Arabic font
   (Latin runs such as "Lvl Up" keep the three faces). */
:root:lang(ar), [dir="rtl"] {
  --serif: "Newsreader", "Newsreader Fallback", "Geeza Pro", "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Arabic", "Times New Roman", serif;
  --sans: "Inter Tight", "Inter Tight Fallback", "Geeza Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;
  --mono: "DM Mono", "DM Mono Fallback", "Geeza Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", ui-monospace, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 12px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }


/* NAV */
.nav { position: fixed; inset: 38px 0 auto 0; z-index: 50; height: 76px; transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s; }
.nav.scrolled { top: 0; background: rgba(252, 250, 248, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.links { display: flex; gap: 34px; }
.links a { font-size: 17px; color: var(--ink); opacity: 0.78; transition: opacity 0.2s; position: relative; }
.links a:hover, .links a.active { opacity: 1; }
.links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--ember)); }

/* PILLS */
.pill { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 8px 0 28px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 600; font-size: 18px; background: transparent; transition: background 0.25s, color 0.25s, transform 0.25s var(--ease); }
.pill .arrow { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font-size: 18px; transition: transform 0.3s var(--ease), background 0.25s; }
.pill:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.pill:hover .arrow { transform: translateX(3px); }
.pill-sm { min-height: 46px; padding: 0 6px 0 22px; font-size: 16px; }
.pill-sm .arrow { width: 34px; height: 34px; font-size: 15px; }
.pill-ghost { padding: 0 30px; }
.pill-light { border-color: #fff; color: #fff; }
.pill-light:hover { background: #fff; color: var(--ink); }

/* HERO */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 150px 0 80px; min-height: 100vh; position: relative; }
.badge { display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; background: rgba(255, 255, 255, 0.5); transition: transform 0.25s var(--ease); }
.badge:hover { transform: translateY(-2px); }
.badge b { background: var(--charcoal); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 12px; letter-spacing: 0.1em; }
h1 { font-size: clamp(46px, 6.2vw, 92px); line-height: 1.02; font-weight: 500; letter-spacing: -0.035em; margin: 26px 0 24px; color: #3a3733; }
.grad { background: linear-gradient(100deg, #6e9fc2 0%, #b98a66 55%, var(--ember) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(18px, 1.6vw, 22px); color: var(--muted); max-width: 640px; }
.lead.light { color: rgba(255, 255, 255, 0.82); }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 34px 0 30px; }

/* PHONES */
/* iPhone 15 Pro style device. .phone sizes the device and is a size container; .ph-body draws it in container units,
   where 1cqw is 1% of the device width: titanium rim, black bezel, rounded screen, Dynamic Island, glass, side buttons. */
.phone { position: relative; aspect-ratio: 100 / 208.8; container-type: inline-size; }
.ph-body { position: absolute; inset: 0; border-radius: 16.4cqw; background: linear-gradient(145deg, #7b7b80 0%, #3a3a3e 12%, #1c1c1f 38%, #1a1a1c 62%, #3b3b3f 88%, #77777c 100%); box-shadow: 0 40px 80px -30px rgba(25, 25, 25, 0.5), 0 0 0 0.3cqw rgba(0, 0, 0, 0.45), inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.28), inset 0 0 1.4cqw rgba(255, 255, 255, 0.1); }
.ph-body::before { content: ""; position: absolute; inset: 1.25cqw; border-radius: 15.2cqw; background: #050506; box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.07); }
.ph-screen { position: absolute; inset: 3.4cqw; overflow: hidden; border-radius: 13cqw; background: #fcfaf8; }
.ph-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-island { position: absolute; z-index: 3; top: 6cqw; left: 50%; width: 29.6cqw; height: 8.8cqw; translate: -50% 0; border-radius: 99cqw; background: #000; }
.ph-island::before { content: ""; position: absolute; right: 4.6cqw; top: 50%; width: 3.4cqw; height: 3.4cqw; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle at 34% 32%, #3b4a74 0, #111a33 38%, #02040a 72%); box-shadow: 0 0 0 0.35cqw #07080c; }
.ph-glass { position: absolute; z-index: 4; inset: 3.4cqw; border-radius: 13cqw; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 24%), linear-gradient(300deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 20%); box-shadow: inset 0 0 0 0.2cqw rgba(0, 0, 0, 0.4); }
.ph-btn { position: absolute; width: 0.95cqw; border-radius: 0.5cqw; background: linear-gradient(90deg, #2a2a2d, #58585d 55%, #242427); }
.ph-action { left: -0.65cqw; top: 30cqw; height: 7.5cqw; }
.ph-volup { left: -0.65cqw; top: 45cqw; height: 13.5cqw; }
.ph-voldn { left: -0.65cqw; top: 62.5cqw; height: 13.5cqw; }
.ph-power { right: -0.65cqw; top: 52cqw; height: 21cqw; }
.hero-stage { position: relative; height: min(760px, 80vh); min-height: 560px; }
.hero-stage .phone { position: absolute; width: 36%; transition: transform 0.25s ease-out; will-change: transform; }
.p-front { left: 32%; top: 5%; width: 38% !important; z-index: 3; }
.p-back-l { left: 0; top: 16%; transform: rotate(-6deg); z-index: 1; opacity: 0.96; }
.p-back-r { right: 0; top: 14%; transform: rotate(6deg); z-index: 2; opacity: 0.96; }


/* SECTIONS */
.sec { padding: 130px 0; position: relative; }
.kicker { font-size: 13px; letter-spacing: 0.16em; font-weight: 600; color: var(--muted); }
.kicker.light { color: rgba(255, 255, 255, 0.6); }
h2 { font-size: clamp(36px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 500; margin: 14px 0 18px; max-width: 18ch; color: #3a3733; }
.sub { font-size: 20px; color: var(--muted); max-width: 52ch; }
.center { text-align: center; }
.center h2, .center .sub { margin-inline: auto; }
.sand { background: var(--sand); }

/* HOW IT WORKS */
.how .wrap:first-child { margin-bottom: 40px; }
.how-grid { display: grid; grid-template-columns: minmax(0, 420px) 190px minmax(0, 1fr); gap: 40px; align-items: start; }
.how-phone { position: sticky; top: 104px; height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; }
.phone-lg { height: min(100%, 760px); width: auto; max-width: 100%; }
.phone-lg .shot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.03); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); }
.phone-lg .shot.on { opacity: 1; transform: none; }
.rail { position: sticky; top: calc(50vh - 150px); display: flex; flex-direction: column; gap: 14px; align-self: start; margin-top: 18vh; }
.rail li { display: flex; align-items: center; gap: 14px; cursor: pointer; opacity: 0.55; transition: opacity 0.3s; }
.rail li b { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 600; transition: all 0.3s var(--ease); background: #fff; }
.rail li span { font-size: 17px; }
.rail li.on { opacity: 1; }
.rail li.on b { background: var(--ink); color: #fff; border-color: var(--ink); transform: scale(1.12); }
.steps { display: flex; flex-direction: column; }
.step { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; max-width: 520px; opacity: 0.35; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.step.on { opacity: 1; transform: none; }
.step .num { font-size: clamp(64px, 8vw, 110px); line-height: 1; font-weight: 300; color: #a3b8c8; letter-spacing: -0.04em; }
.step .tag { font-size: 13px; letter-spacing: 0.16em; font-weight: 600; color: var(--muted); margin: 14px 0 10px; }
.step h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; color: #3a3733; margin-bottom: 14px; }
.step > p:not(.num):not(.tag) { color: var(--muted); font-size: 19px; }
.step-phone { display: none; }
.checks { margin-top: 24px; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 32px; color: var(--muted); font-size: 17px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #b8b4ae; }
.checks li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 5px; height: 9px; border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.checks.light li { color: rgba(255, 255, 255, 0.78); }
.checks.light li::before { border-color: rgba(255, 255, 255, 0.4); }

/* BENTO */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 50px; }
.card { border-radius: var(--radius); padding: 40px; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 560px; }
.card .tag { font-size: 13px; letter-spacing: 0.14em; font-weight: 600; opacity: 0.7; margin-bottom: 14px; }
.card h3 { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; margin-bottom: 14px; }
.card p { font-size: 18px; max-width: 46ch; }
.card.dark { grid-column: span 4; background: var(--charcoal); color: #fff; flex-direction: row; gap: 30px; }
.card.dark .card-copy { flex: 1.2; }
.card.dark p { color: rgba(255, 255, 255, 0.8); }
.card.peach { grid-column: span 2; }
.card.peach p { color: var(--mesh-text); }
.card.plain { grid-column: span 3; background: #fff; border: 1px solid var(--line); }
.card.plain p { color: var(--muted); }
.card.sun { grid-column: span 3; }
.card.sun p { color: var(--mesh-text); }
.card-phone { display: flex; justify-content: center; align-items: flex-end; }
.card.dark .card-phone { flex: 1; align-items: flex-end; margin-bottom: -40px; }
.card-phone.low { margin-bottom: -130px; margin-top: 24px; }
.phone-card { width: min(260px, 100%); }
.mini { margin-top: 26px; display: grid; gap: 12px; }
.mini li { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; padding: 14px 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; }
.mini b { font-size: 16px; }
.mini span { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.mini i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(47, 201, 197, 0.25); color: var(--teal); font-weight: 700; }

/* NUMBERS */
.nums { padding: 60px 0 110px; }
.nums-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.num-card b { display: block; font-size: clamp(72px, 9vw, 140px); line-height: 0.95; font-weight: 300; letter-spacing: -0.05em; color: #3a3733; font-variant-numeric: tabular-nums; }
.num-card span { display: block; margin-top: 14px; color: var(--muted); font-size: 17px; max-width: 24ch; }

/* CAMERA */
.dark-sec { background: #1c1b1a; color: #fff; overflow: hidden; }
.dark-sec h2 { color: #fff; }
.cam { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; }
.fine { margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, 0.5); }
.cam-art { display: grid; place-items: center; }
.skeleton { position: relative; width: min(340px, 80%); aspect-ratio: 3 / 4; border-radius: 32px; background: radial-gradient(120% 90% at 50% 0%, #2b2a29, #141312); border: 1px solid rgba(255, 255, 255, 0.1); display: grid; place-items: center; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0, rgba(255, 122, 61, 0.18) 50%, transparent 100%); height: 30%; animation: scan 4s linear infinite; }
@keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }
.skeleton svg { width: 62%; overflow: visible; }
.bones line { stroke: var(--peach); stroke-width: 5; stroke-linecap: round; }
.joints circle { fill: #fff; }
.skeleton .joints, .skeleton .bones { animation: squat 3.2s ease-in-out infinite; transform-origin: 110px 160px; }
@keyframes squat { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(26px) scaleY(0.92); } }
.rep { position: absolute; right: 18px; bottom: 16px; text-align: right; }
.rep span { display: block; font-size: 64px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.rep small { color: rgba(255, 255, 255, 0.6); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }

/* TRIO */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; text-align: left; }
.mini-card { background: #fff; border-radius: 24px; padding: 34px; border: 1px solid var(--line); }
.mini-card h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.mini-card p { color: var(--muted); font-size: 17px; }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-size: 21px; font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-size: 28px; font-weight: 300; transition: rotate 0.3s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 40px 24px 0; color: var(--muted); font-size: 18px; }

/* FINAL + FOOTER */
.final { color: var(--mesh-text); padding: 120px 0; text-align: center; }
.final h2 { color: #fff; margin-inline: auto; max-width: 16ch; }
.final p { font-size: 20px; opacity: 0.9; margin-bottom: 34px; }

/* REVEAL */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; } .d3 { transition-delay: 0.24s; } .d4 { transition-delay: 0.32s; }

/* RESPONSIVE */
@media (max-width: 1080px) {
  .links { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 120px; min-height: 0; }
  .hero-stage { height: 640px; margin-top: 10px; }
  .how-grid { grid-template-columns: 1fr; }
  .how-phone, .rail { display: none; }
  .step { min-height: 0; opacity: 1; transform: none; margin-bottom: 70px; max-width: none; }
  .step-phone { display: block; width: min(300px, 70vw); margin: 0 0 26px; }
  .bento { grid-template-columns: 1fr; }
  .card, .card.dark, .card.peach, .card.plain, .card.sun { grid-column: auto; min-height: 0; }
  .card.dark { flex-direction: column; }
  .card.dark .card-phone, .card-phone.low { margin-bottom: -60px; }
  .nums-in { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .cam, .faq-wrap { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { width: min(var(--wrap), 100% - 36px); }
  .sec { padding: 84px 0; }
  .hero-stage { height: 520px; }
  .hero-stage .phone { width: 46%; }
  .p-front { width: 50% !important; left: 25%; }
        .nav { height: 66px; }
  .pill { min-height: 52px; font-size: 17px; }
  .card { padding: 28px; }
  .mini li { grid-template-columns: 70px 1fr auto; }
  .faq summary { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .step { opacity: 1; transform: none; }
  .phone-lg .shot { transition: none; }
}

/* Announcement banner */

/* Store badges */
.stores { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.store { display: inline-grid; gap: 0; padding: 9px 20px 10px; border-radius: 14px; background: var(--ink); color: #fff; line-height: 1.1; position: relative; }
.store small { font-size: 11px; opacity: 0.8; letter-spacing: 0.04em; }
.store b { font-size: 19px; font-weight: 600; }
.store i { position: absolute; top: -9px; right: -8px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ember); color: #fff; padding: 3px 8px; border-radius: 99px; }
a.store:hover { transform: translateY(-2px); }
.store-soon { opacity: 0.85; cursor: default; }
.stores-light { justify-content: center; margin-top: 30px; }
.stores-light .store { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(6px); }

/* Footer wordmark with depth */

/* Pastel spot illustrations */
.ill-sec { background: #f4f1e6; }
.ill-grid { list-style: none; margin: 54px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 24px; }
.ill { display: grid; justify-items: center; text-align: center; gap: 6px; }
.ill img { width: 160px; height: 160px; transition: transform 0.35s var(--ease); }
.ill:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.ill b { font-size: 18px; margin-top: 6px; }
.ill span { color: var(--muted); font-size: 15px; max-width: 24ch; }
@media (max-width: 900px) { .ill-grid { grid-template-columns: repeat(2, 1fr); } .ill img { width: 128px; height: 128px; } }
@media (prefers-reduced-motion: reduce) { .ill img { transition: none; } }