/* =========================================================
   Neeraan · Stage v3 · one stylesheet.
   White, black, two greys, hairlines, one flat accent. No gradients.
   Radius 6px everywhere, no pills. Onest for text, JetBrains Mono for
   numbers and captions. Motion: hover, press and the panel crossfade only.
   ========================================================= */
:root {
  --bg: #FFFFFF; --panel: #F4F4F4; --panel-2: #E6E6E6; --ink: #0A0A0A; --ink-2: #5A5A5A; --mute: #8A8A8A;
  --line: rgba(10, 10, 10, 0.12); --line-2: rgba(10, 10, 10, 0.06);
  --accent: #1B3FE4;
  --sans: 'Onest', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: clamp(16px, 4vw, 48px); --max: 1200px; --sec: clamp(64px, 9vw, 120px);
  --r: 6px; --r-lg: 12px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } legend { padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ink); color: var(--bg); }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 1000; } .skip:focus { left: 8px; }
h1 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; max-width: 24ch; text-wrap: balance; }
.h2 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.025em; font-weight: 600; line-height: 1.1; }
.sub { color: var(--ink-2); font-size: 17px; max-width: 56ch; }
.note { font-size: 14px; color: var(--mute); }
.note a { border-bottom: 1px solid var(--line); }

/* buttons: filled and outlined, same height, 6px radius */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 20px; border-radius: var(--r); font-weight: 500; font-size: 15px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); white-space: nowrap; transition: transform 160ms var(--ease-out), background 200ms ease, border-color 200ms ease, color 200ms ease; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } .btn:active { transform: scale(0.97); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--panel); border-color: var(--ink); color: var(--ink); }
.btn-invert { background: var(--bg); color: var(--ink); border-color: var(--bg); } .btn-invert:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* header */
.hdr { position: sticky; top: 0; z-index: 200; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.hdr.is-stuck { border-bottom-color: var(--line); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; font-size: 18px; }
.hdr-nav { display: flex; gap: clamp(20px, 3vw, 36px); font-size: 15px; color: var(--ink-2); }
.hdr-nav a { position: relative; padding: 6px 0; } .hdr-nav a:hover, .hdr-nav a[aria-current] { color: var(--ink); }
.hdr-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--ink); transition: right 250ms var(--ease-out); }
.hdr-nav a:hover::after, .hdr-nav a[aria-current]::after { right: 0; }
.hdr-right { display: flex; align-items: center; gap: 14px; }
.lang { font-family: var(--mono); font-size: 13px; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid transparent; }
.lang:hover { color: var(--ink); border-bottom-color: var(--ink); }
[dir="rtl"] .lang { font-family: var(--sans); }
.menu nav a.lang { font-family: var(--mono); font-size: 15px; padding: 18px 0; color: var(--ink-2); }
.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: transform 250ms var(--ease-out), top 250ms var(--ease-out); }
.burger span:first-child { top: 18px; } .burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); } .burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 64px 0 0; z-index: 190; background: var(--bg); overflow: auto; }
.menu nav { display: flex; flex-direction: column; padding-block: 24px; }
.menu nav a { font-size: clamp(28px, 8vw, 40px); font-weight: 600; letter-spacing: -0.03em; padding: 14px 0; border-bottom: 1px solid var(--line); }
body.menu-open { overflow: hidden; }
@media (max-width: 860px) { .hdr-nav { display: none; } .burger { display: block; } .hdr-right .btn, .hdr-right .lang { display: none; } }

/* hero */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 4vw, 56px); }
.hero-s { padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.hero .sub { margin-top: 16px; } .hero .mono { margin-top: 16px; }

/* hero: the statement is the big type, anchored to the bottom of the fold on wide screens only (basement pattern) */
.hero-big { display: grid; grid-template-rows: 1fr auto; }
@media (min-width: 900px) and (min-height: 640px) { .hero-big { min-height: min(calc(100svh - 64px), 820px); } }
.hero-top { padding: clamp(48px, 8vw, 120px) 0 32px; align-self: end; }
.hero-top h1 { font-size: clamp(40px, 7.2vw, 104px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 600; max-width: 14ch; text-wrap: balance; }
[dir="rtl"] .hero-top h1 { line-height: 1.2; }
.words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.words .w > span { display: inline-block; }
.hero-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--ink); padding: 12px 0 20px; color: var(--ink-2); }
.hero-meta a { border-bottom: 1px solid var(--line); } .hero-meta a:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 700px) { .hero-meta span:nth-child(2) { display: none; } }

/* stage: rail + one panel */
.stage-s { padding: 8px 0 var(--sec); }
.is-detail.stage-s { padding-top: clamp(32px, 4vw, 48px); }
.stage-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.rail { position: sticky; top: 84px; border-top: 1px solid var(--ink); }
.rail button { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 6px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; color: var(--ink-2); transition: color 150ms ease, background 150ms ease; }
.rail button .mono { width: 22px; color: var(--mute); }
.rail button:hover { color: var(--ink); background: var(--panel); }
.rail button[aria-selected="true"] { color: var(--ink); } .rail button[aria-selected="true"] .mono { color: var(--accent); }
.rail button:focus-visible { outline-offset: -2px; border-radius: 4px; }
.stage { background: var(--panel); border-radius: var(--r-lg); overflow: hidden; }
.panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: clamp(20px, 3vw, 36px); transition: filter 200ms ease, opacity 200ms ease; }
.panel.swap { filter: blur(4px); opacity: 0.5; transition: none; }
.panel-vis { background: var(--bg); border-radius: var(--r); border: 1px solid var(--line-2); padding: 12px; display: grid; place-items: center; min-height: 260px; }
.panel-vis svg { width: 100%; height: auto; }
.panel-txt { display: grid; gap: 12px; align-content: center; }
.panel-txt h3 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; line-height: 1.05; font-weight: 600; }
.panel-txt .line { font-size: 18px; color: var(--ink-2); max-width: 36ch; }
.panel-txt .more { font-weight: 500; justify-self: start; border-bottom: 1px solid var(--ink); }
.panel-txt .btn { justify-self: start; margin-top: 6px; }
.panel-detail { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; }
.stage-cap { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); }
.sub-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; }
.sub-tabs button { padding: 8px 12px; border-radius: var(--r); font-size: 14px; font-weight: 500; color: var(--ink-2); border: 1px solid transparent; }
.sub-tabs button:hover { border-color: var(--line); color: var(--ink); }
.sub-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.practice .sub { font-size: 15px; }
.track-wrap { margin-top: 20px; }
.track-wrap > .mono { margin-bottom: 10px; }
.track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.track button { display: grid; gap: 8px; justify-items: start; padding: 12px; min-width: 0; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line-2); color: var(--ink-2); text-align: left; transition: border-color 150ms ease, color 150ms ease; }
.track button:hover { border-color: var(--ink); color: var(--ink); }
.track button[aria-selected="true"] { border-color: var(--ink); color: var(--ink); background: var(--ink); color: var(--bg); }
.track button .t { font-size: 13px; font-weight: 500; line-height: 1.25; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.track button .t b { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--mute); }
.track button[aria-selected="true"] .t b { color: var(--accent); }
.steps { margin-top: 10px; background: var(--bg); border-radius: var(--r); padding: 20px; border: 1px solid var(--line-2); }
.step h5 { font-size: 19px; letter-spacing: -0.02em; font-weight: 600; margin: 8px 0 6px; }
.step p { color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.practice-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; }
.practice-foot .mono { margin-bottom: 10px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; font-weight: 500; font-size: 15px; }
.faq summary::-webkit-details-marker { display: none; }
.faq-i { position: relative; width: 12px; height: 12px; flex: none; }
.faq-i::before, .faq-i::after { content: ''; position: absolute; background: var(--ink); left: 0; top: 5.5px; width: 12px; height: 1.5px; transition: transform 200ms var(--ease-out); }
.faq-i::after { transform: rotate(90deg); } details[open] .faq-i::after { transform: rotate(0); }
.faq > p { padding: 0 0 14px; color: var(--ink-2); font-size: 15px; max-width: 60ch; }
html:not(.js) .panel[hidden], html:not(.js) .practice[hidden], html:not(.js) .step[hidden] { display: block !important; }
html:not(.js) .panel + .panel { border-top: 1px solid var(--line); }
html:not(.js) .track, html:not(.js) .sub-tabs { display: none; }
@media (max-width: 960px) { .panel { grid-template-columns: 1fr; } .panel-vis { min-height: 0; } .track { grid-template-columns: repeat(3, 1fr); } .practice-foot { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .stage-grid { grid-template-columns: 1fr; gap: 14px; }
  .rail { position: static; display: flex; gap: 4px; overflow-x: auto; border-top: 0; padding-bottom: 4px; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail button { width: auto; white-space: nowrap; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; font-size: 14px; }
  .rail button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .rail button .mono { display: none; }
}
@media (max-width: 520px) { .track { grid-template-columns: repeat(2, 1fr); } }

/* home index: six rows, one line each, into the stage on Services */
.index-s { padding: 8px 0 var(--sec); }
.index { border-top: 1px solid var(--ink); }
.index a { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.4fr) 28px; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line); transition: background 150ms ease; }
.index a:hover { background: var(--panel); }
.index a .mono { color: var(--mute); }
.index a:hover .mono { color: var(--accent); }
.index-name { font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -0.02em; }
.index-line { color: var(--ink-2); font-size: 16px; }
.index-arrow { text-align: right; color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity 150ms ease, transform 200ms var(--ease-out); }
.index a:hover .index-arrow { opacity: 1; transform: none; }
.index-cap { margin-top: 14px; }
@media (max-width: 700px) { .index a { grid-template-columns: 32px 1fr 24px; grid-template-areas: 'n name a' 'n line a'; row-gap: 4px; } .index a .mono { grid-area: n; } .index-name { grid-area: name; } .index-line { grid-area: line; font-size: 14px; } .index-arrow { grid-area: a; opacity: 1; transform: none; } }

/* sections */
.sec { padding-block: var(--sec); border-top: 1px solid var(--line); }
.sec .h2 { margin-bottom: 28px; }
.sec .sub { margin-bottom: 24px; }
.sec .note { margin-top: 14px; }
.ledger { border-top: 1px solid var(--ink); }
.ledger > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ledger dt { font-weight: 500; }
.ledger dd { margin: 0; color: var(--ink-2); display: grid; gap: 6px; max-width: 60ch; }
.ledger dd a { color: var(--ink); border-bottom: 1px solid var(--ink); justify-self: start; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.two .mono { margin-bottom: 12px; }
@media (max-width: 700px) { .ledger > div { grid-template-columns: 1fr; gap: 6px; } .two { grid-template-columns: 1fr; } }

/* ways in */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ways li { background: var(--panel); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 10px; align-content: start; }
.way-ico { width: 44px; height: 44px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--accent); margin-bottom: 8px; }
.ways h3 { font-size: 20px; letter-spacing: -0.02em; font-weight: 600; }
.ways p { color: var(--ink-2); font-size: 15px; }
.way-links { display: grid; gap: 4px; margin-top: 8px; }
.way-links a { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 500; padding: 8px 10px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line-2); }
.way-links a:hover { border-color: var(--ink); }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; } }

/* timeline */
.timeline-wrap { overflow-x: auto; }
.timeline { width: 100%; min-width: 640px; height: auto; }
.tl-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.tl-legend li { display: grid; grid-template-columns: 12px 1fr; gap: 4px 10px; font-size: 14px; color: var(--ink-2); align-items: center; }
.tl-legend b { font-weight: 500; color: var(--ink); }
.tl-legend li > span:last-child { grid-column: 2; }
.tl-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--panel-2); }
.tl-dot[data-i="1"] { background: var(--accent); } .tl-dot[data-i="3"] { background: var(--ink); }
@media (max-width: 700px) { .tl-legend { grid-template-columns: 1fr 1fr; } }

/* closing: the one black section */
.closing { background: var(--ink); color: var(--bg); padding-block: var(--sec); }
.closing .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.closing h2 { font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.03em; line-height: 1.05; font-weight: 600; max-width: 18ch; text-wrap: balance; }

/* footer */
.ft { border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 80px); }
.ft-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; padding-bottom: 48px; }
.ft-tag { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; max-width: 18ch; }
.ft-mail { display: inline-block; margin: 16px 0 12px; border-bottom: 1px solid var(--ink); }
.ft-col .mono { margin-bottom: 12px; }
.ft-col li { padding: 3px 0; font-size: 15px; color: var(--ink-2); } .ft-col a:hover { color: var(--ink); }
.ft-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 0 28px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .ft-top { grid-template-columns: 1fr 1fr; } .ft-lead { grid-column: 1 / -1; } }

/* contact */
.order-form { max-width: 800px; }
.progress { position: relative; height: 24px; margin-bottom: 40px; display: flex; align-items: center; }
.progress::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--line); }
.progress-bar { position: absolute; left: 0; top: 10px; height: 3px; width: 25%; background: var(--accent); transition: width 400ms var(--ease-out); }
.progress-t { position: absolute; right: 0; top: 0; background: var(--bg); padding-left: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.step-panel legend { font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.03em; font-weight: 600; margin-bottom: 24px; }
html:not(.js) .step-panel + .step-panel { margin-top: 40px; }
.chips-in { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-opt span { display: inline-block; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); font-size: 15px; font-weight: 500; transition: background 150ms, color 150ms, border-color 150ms; }
.chip-opt:hover span { border-color: var(--ink); }
.chip-opt input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.step-panel .note { margin-top: 16px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; } .field-wide { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field textarea { font: inherit; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0; }
.field input:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--accent); }
.field textarea { resize: vertical; min-height: 96px; }
.field.is-bad input, .field.is-bad textarea { border-bottom: 2px solid var(--accent); }
.order-nav { display: flex; gap: 10px; margin-top: 32px; }
.form-status { margin-top: 16px; min-height: 1.6em; font-size: 15px; font-weight: 500; }
.order-form .note { margin-top: 32px; }
.order-done h2 { font-size: clamp(32px, 5vw, 64px); letter-spacing: -0.035em; font-weight: 600; margin: 12px 0 16px; }
@media (max-width: 640px) { .fields { grid-template-columns: 1fr; } }

/* prose */
.prose { max-width: 66ch; } .prose h2 { font-size: 20px; letter-spacing: -0.02em; font-weight: 600; margin: 32px 0 8px; } .prose h2:first-child { margin-top: 0; } .prose p { color: var(--ink-2); } .prose a { border-bottom: 1px solid var(--ink); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .panel, .progress-bar, .btn, .hdr-nav a::after { transition: none; } }

/* ---------- Arabic ---------- */
[dir="rtl"] { --sans: 'IBM Plex Sans Arabic', 'Onest', system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] .h2, [dir="rtl"] .panel-txt h3, [dir="rtl"] .closing h2, [dir="rtl"] .index-name, [dir="rtl"] .step-panel legend, [dir="rtl"] .order-done h2, [dir="rtl"] .grp-head h2, [dir="rtl"] .ways h3, [dir="rtl"] .step h5, [dir="rtl"] .brand, [dir="rtl"] .ft-tag { letter-spacing: 0; }
[dir="rtl"] h1 { line-height: 1.25; }
[dir="rtl"] .mono { letter-spacing: 0; }
[dir="rtl"] .skip { left: auto; right: -999px; } [dir="rtl"] .skip:focus { right: 8px; }
[dir="rtl"] .hdr-nav a::after { left: 100%; right: 0; transition: left 250ms var(--ease-out); }
[dir="rtl"] .hdr-nav a:hover::after, [dir="rtl"] .hdr-nav a[aria-current]::after { left: 0; }
[dir="rtl"] .index-arrow { text-align: left; transform: translateX(6px); }
[dir="rtl"] .index a:hover .index-arrow { transform: none; }
[dir="rtl"] .progress-bar { left: auto; right: 0; }
[dir="rtl"] .progress-t { right: auto; left: 0; padding-left: 0; padding-right: 12px; }
[dir="rtl"] .burger span { left: 12px; right: 12px; }

/* ---------- entrance: plays on load, time based, never hides content from a late reader ---------- */
.enter .words .w > span { transform: translateY(110%); animation: lift 640ms var(--ease-out) forwards; animation-delay: calc(60ms + var(--i, 0) * 38ms); }
.enter .hero-top .actions, .enter .hero-meta, .enter .index li { animation: rise 520ms var(--ease-out) both; }
.enter .hero-top .actions { animation-delay: 560ms; }
.enter .hero-meta { animation-delay: 680ms; }
.enter .index li:nth-child(1) { animation-delay: 760ms; } .enter .index li:nth-child(2) { animation-delay: 800ms; } .enter .index li:nth-child(3) { animation-delay: 840ms; }
.enter .index li:nth-child(4) { animation-delay: 880ms; } .enter .index li:nth-child(5) { animation-delay: 920ms; } .enter .index li:nth-child(6) { animation-delay: 960ms; }
@keyframes lift { to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .enter .words .w > span, .enter .hero-top .actions, .enter .hero-meta, .enter .index li { animation: none; transform: none; opacity: 1; } }