.dl-cta { width: 100%; }
.engine-status { font-size: 11.5px; color: var(--text-3); padding: 4px 10px; border-radius: 8px; background: var(--bg-sunken); border: 1px solid var(--border); line-height: 1.35; }
.engine-status[data-phase="ready"] { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.engine-status[data-phase="error"] { color: var(--err); }
.site-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 14px; gap: 10px; align-items: center;
  background: var(--card); border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.site-bar .engine-status { flex: 1; }
.site-bar .btn { margin-left: auto; }
@media (max-width: 760px) { .site-bar { display: flex; } .main { padding-bottom: 72px; } }
.dl-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(10,16,28,.62); padding: 20px; }
.dl-card { background: var(--card); color: var(--text); border: 1px solid var(--border-strong); border-radius: 16px; max-width: 560px; width: 100%; padding: 26px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.dl-card h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; }
.dl-card p { margin: 0 0 12px; color: var(--text-2); line-height: 1.55; }
.dl-card pre { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; overflow: auto; margin: 0 0 14px; color: var(--text); }
.dl-card .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dl-soon { display: inline-block; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 6px; margin-bottom: 10px; }

/* ---------- opening animation ----------
   Scoped entirely to html.intro / html.reveal, which only the gate script in the shell's <head> sets
   (every load; ?intro=0 disarms; never under automation, never with reduced motion). Without that class this
   block is inert and the page renders exactly as before. Same choreography as /join/: the A is drawn,
   fills, "One4All · by ASolution" assembles beside it, the lockup flies into the sidebar brand while
   the dark ground dissolves into the (identical) hero gradient, then the page rises into place. */
html.intro { --ease-out: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.65,0,.35,1); }
#intro { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
#intro .bg { position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 75% -10%, rgba(13,165,124,.18), transparent 60%),
              linear-gradient(175deg, #101a2c 0%, #0e1626 55%, #10231f 100%); }
#intro .aurora { position: absolute; inset: -20%; opacity: 0; transform: scale(.85); filter: blur(30px);
  background: radial-gradient(520px 520px at 60% 44%, rgba(13,165,124,.30), transparent 62%),
              radial-gradient(760px 540px at 28% 72%, rgba(47,196,150,.10), transparent 60%); }
#intro .stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* the lockup is a clone of the real brand, so it inherits .brand/.brand-mark/.brand-name/.brand-by from the
   design stylesheet and lands pixel-for-pixel; only colour and the drawing are overridden here */
#intro .lock { position: relative; color: #fff; will-change: transform; padding: 4px 8px; }
#intro .lock .brand-by { color: #9fb0c8; }
#intro .lock .brand-name, #intro .lock .brand-by { transition: color 520ms ease; }
#intro.land .lock { color: var(--text); }
#intro.land .lock .brand-by { color: var(--sub, var(--text-3)); }
#intro .lock svg.brand-mark { overflow: visible; }
#intro .lock .fill { clip-path: inset(100% 0 0 0); }
#intro .lock .line { stroke-dasharray: 172; stroke-dashoffset: 172; }
#intro .lock .inner { stroke-dasharray: 90; stroke-dashoffset: 90; }
#intro .lock .brand-name { clip-path: inset(0 100% 0 0); transform: translateX(-.25em); opacity: 0; }
#intro .lock .brand-by { opacity: 0; transform: translateY(.35em); }
#intro .lock .glow { position: absolute; left: -8px; top: -6px; width: 42px; height: 42px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(47,196,150,.6), rgba(13,165,124,0) 70%); filter: blur(7px); }
#intro.go .aurora { animation: introAurora 1400ms var(--ease-out) forwards; }
#intro.go .line   { animation: introDraw 720ms var(--ease-io) 140ms forwards, introOut 320ms linear 1060ms forwards; }
#intro.go .inner  { animation: introDraw 620ms var(--ease-io) 380ms forwards, introOut 320ms linear 1060ms forwards; }
#intro.go .fill   { animation: introFill 560ms var(--ease-io) 640ms forwards; }
#intro.go .glow   { animation: introGlow 950ms ease-out 880ms forwards; }
#intro.go .brand-name { animation: introName 560ms var(--ease-out) 1150ms forwards; }
#intro.go .brand-by   { animation: introBy 520ms var(--ease-out) 1380ms forwards; }
#intro.landed .lock { opacity: 0; }
@keyframes introAurora { to { opacity: 1; transform: scale(1); } }
@keyframes introDraw   { to { stroke-dashoffset: 0; } }
@keyframes introOut    { to { opacity: 0; } }
@keyframes introFill   { to { clip-path: inset(0 0 0 0); } }
@keyframes introGlow   { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes introName   { to { clip-path: inset(0 -0.1em 0 0); transform: none; opacity: 1; } }
@keyframes introBy     { to { opacity: 1; transform: none; } }

/* the page underneath: parked until the lockup lands, then revealed in order */
html.intro .sidebar > *, html.intro .mobile-bar > *, html.intro .home-hero > *,
html.intro .home-tips .tip-card, html.intro .main .section { opacity: 0; }
html.intro.landed .sidebar .brand, html.intro.landed .mobile-bar .brand { opacity: 1; }
html.intro .home-hero h1 .w { display: inline-block; clip-path: inset(0 0 -.3em 0); }
html.intro .home-hero h1 .w > span { display: inline-block; transform: translateY(135%); }
html.intro .sweep { position: absolute; inset: 0; pointer-events: none; transform: translateX(-80%);
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.05) 50%, transparent 58%); }

html.reveal .sidebar > *:not(.brand), html.reveal .mobile-bar > *:not(.brand) { animation: introSide 620ms var(--ease-out) forwards; }
html.reveal .sidebar > :nth-child(2) { animation-delay: 180ms; }
html.reveal .sidebar > :nth-child(3) { animation-delay: 260ms; }
html.reveal .sidebar > :nth-child(4) { animation-delay: 420ms; }
html.reveal .mobile-bar > * { animation-delay: 200ms; }
html.reveal .home-hero .hero-mark { animation: introMark 1700ms var(--ease-out) forwards; }
html.reveal .home-hero .eyebrow  { animation: introUp 620ms var(--ease-out) 80ms forwards; }
html.reveal .home-hero h1        { opacity: 1; }
html.reveal .home-hero h1 .w > span { animation: introRise 820ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 40ms + 60ms); }
html.reveal .home-hero .sub      { animation: introUp 720ms var(--ease-out) 440ms forwards; }
html.reveal .home-hero .dropzone { animation: introCard 900ms var(--ease-out) 540ms forwards; }
html.reveal .home-hero .trust    { animation: introUp 720ms var(--ease-out) 720ms forwards; }
html.reveal .home-tips .tip-card { animation: introCard 900ms var(--ease-out) 760ms forwards; }
html.reveal .home-tips .tip-card:nth-child(2) { animation-delay: 840ms; }
html.reveal .main .section       { animation: introUp 800ms var(--ease-out) 920ms forwards; }
html.reveal .sweep               { animation: introSweep 1300ms cubic-bezier(.4,0,.2,1) 540ms forwards; }
@keyframes introSide  { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes introRise  { to { transform: none; } }
@keyframes introUp    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes introCard  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes introMark  { from { opacity: 0; transform: scale(1.14) rotate(-4deg); } to { opacity: .06; transform: none; } }
@keyframes introSweep { to { transform: translateX(80%); } }