/* =========================================================
   VIRAROSI — PUBLIC SITE COMPONENTS (shared across pages)
   "BRAVO Clear Exchange" — light premium fintech.
   ========================================================= */

.s-section { padding: var(--s-space-9) 0; }
.s-section--muted {
	background: var(--s-bg-muted);
	position: relative;
	overflow: hidden;
}
/* Faint mesh-dot texture on muted bands — same restrained density as the
   body backdrop, so alternating sections feel like one considered system
   rather than a flat colour swap. */
.s-section--muted::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(11, 20, 38, .08) 1.3px, transparent 1.7px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.85) 18%, rgba(0,0,0,.85) 82%, transparent);
	mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.85) 18%, rgba(0,0,0,.85) 82%, transparent);
	pointer-events: none;
}
.s-section--muted > * { position: relative; z-index: 1; }
.s-section--intro { padding-top: var(--s-space-8); padding-bottom: var(--s-space-6); }
/* Accent section — replaces the old permanent "dark island".
   Light, warm surface with a single gold rule for emphasis, not a theme change. */
.s-section--accent {
	background: var(--s-surface-warm);
	border-top: 1px solid var(--s-border);
	border-bottom: 1px solid var(--s-border);
	position: relative;
	overflow: hidden;
}
.s-section--accent::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/images/site/bg-topo.svg') no-repeat center bottom / cover;
	opacity: .7;
	pointer-events: none;
	z-index: 0;
}
.s-section--accent > * { position: relative; z-index: 1; }

/* Page-intro header band — same quiet topo backdrop, sits behind the
   page title on About/Security/Fees/etc. */
.s-section--intro {
	position: relative;
	overflow: hidden;
}
.s-section--intro::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/images/site/bg-topo.svg') no-repeat center top / cover;
	opacity: .5;
	pointer-events: none;
	z-index: 0;
}
.s-section--intro > * { position: relative; z-index: 1; }

/* ── Per-page-family intro backdrops — each group of pages gets its own
   quiet, on-brand illustration instead of every inner page reusing the
   exact same topo backdrop. Same restrained line-art language (thin
   strokes, low opacity, brand navy/gold/blue) so nothing feels off-theme,
   but the site stops looking like one template repeated 12 times. */
.s-section--intro-security::before { background-image: url('/images/site/bg-shield.svg'); opacity: .9; }
.s-section--intro-fees::before      { background-image: url('/images/site/bg-coins.svg'); opacity: .9; }
.s-section--intro-about::before     { background-image: url('/images/site/bg-globe.svg'); opacity: .9; }
.s-section--intro-legal::before     { background-image: url('/images/site/bg-doc.svg'); opacity: .9; }
.s-section--intro-help::before      { background-image: url('/images/site/bg-chat.svg'); opacity: .9; }
.s-section--intro-flow::before      { background-image: url('/images/site/bg-flow.svg'); opacity: .9; }
.s-section--intro-status::before    { background-image: url('/images/site/bg-pulse.svg'); opacity: .9; }

.s-section__inner { max-width: var(--s-container); margin: 0 auto; padding: 0 32px; }
.s-section__title {
	font-family: var(--s-font-display);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--s-text);
	margin: 0 0 var(--s-space-5);
}
.s-section__lead { font-size: 18px; color: var(--s-text-muted); max-width: 620px; margin: 0 0 var(--s-space-4); }
.s-section__cta { margin-top: var(--s-space-5); }
.s-page-title {
	font-family: var(--s-font-display);
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--s-text);
	margin: 0 0 var(--s-space-4);
}

/* Gradient-accent word inside headings — crypto-exchange signature touch */
.s-gradient-text {
	background: linear-gradient(120deg, var(--s-accent-hover) 0%, var(--s-accent-1) 45%, var(--s-accent-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.s-badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px; border-radius: var(--s-radius-pill);
	background: var(--s-accent-soft); border: 1px solid transparent;
	font-size: 13px; font-weight: 700; color: var(--s-accent-hover);
	margin-bottom: var(--s-space-4);
}
.s-badge::before {
	content: '';
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--s-accent-1);
	box-shadow: 0 0 0 0 rgba(234, 167, 25, .5);
	animation: s-pulse 2.2s infinite;
}
@keyframes s-pulse {
	0% { box-shadow: 0 0 0 0 rgba(234, 167, 25, .45); }
	70% { box-shadow: 0 0 0 6px rgba(234, 167, 25, 0); }
	100% { box-shadow: 0 0 0 0 rgba(234, 167, 25, 0); }
}

.s-note { font-size: 14px; color: var(--s-text-faint); }

/* ── Scroll-reveal (applied via JS to sections/cards) ─────────────
   Base = quiet fade-rise. Specific selectors below override with
   more distinctive motion (clip-path wipes, scale, alternating
   slide-in) so scrolling through the site feels considered rather
   than "everything just fades up the same way".
   NOTE: .s-reveal only ever *hides* content — see the JS safety-net
   (forces .is-visible after a short timeout / on load) so text can
   never get permanently stuck invisible if IntersectionObserver
   doesn't fire for some reason. */
.s-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .5s var(--s-easing), transform .5s var(--s-easing), clip-path .55s cubic-bezier(.16,1,.3,1);
	will-change: opacity, transform;
}
.s-reveal.is-visible { opacity: 1; transform: none; }

/* Headings — cinematic left-to-right wipe combined with a small rise,
   so it reads clearly as "revealed" rather than a plain fade.
   (.s-hero__title is NOT part of this JS/observer-driven group — it's
   above the fold and gets its own immediate CSS animation below, so
   there's zero wait on IntersectionObserver for the very first thing
   a visitor reads.) */
.s-section__title.s-reveal,
.s-page-title.s-reveal,
.s-final-cta__title.s-reveal {
	opacity: 1;
	transform: translateY(10px);
	clip-path: inset(0 100% 0 0);
}
.s-section__title.s-reveal.is-visible,
.s-page-title.s-reveal.is-visible,
.s-final-cta__title.s-reveal.is-visible {
	clip-path: inset(0 0 0 0);
	transform: none;
}

/* Cards in a grid — scale + rise, with a per-index stagger and an
   alternating left/right drift in two-column grids. */
.s-card.s-reveal,
.s-contact-item.s-reveal,
.s-security-teaser.s-reveal {
	transform: translateY(36px) scale(.94);
}
.s-card.s-reveal.is-visible,
.s-contact-item.s-reveal.is-visible,
.s-security-teaser.s-reveal.is-visible {
	transform: none;
}
.s-cards--2 > .s-card.s-reveal:nth-child(1),
.s-cards--3 > .s-card.s-reveal:nth-child(1),
.s-cards--4 > .s-card.s-reveal:nth-child(1) { transition-delay: 0ms; }
.s-cards--2 > .s-card.s-reveal:nth-child(2),
.s-cards--3 > .s-card.s-reveal:nth-child(2),
.s-cards--4 > .s-card.s-reveal:nth-child(2) { transition-delay: 120ms; }
.s-cards--3 > .s-card.s-reveal:nth-child(3),
.s-cards--4 > .s-card.s-reveal:nth-child(3) { transition-delay: 240ms; }
.s-cards--4 > .s-card.s-reveal:nth-child(4) { transition-delay: 360ms; }

.s-cards--2 > .s-card.s-reveal:nth-child(odd)  { transform: translate(-46px, 20px) scale(.95); }
.s-cards--2 > .s-card.s-reveal:nth-child(even) { transform: translate(46px, 20px) scale(.95); }
.s-cards--2 > .s-card.s-reveal.is-visible { transform: none; }

/* Steps / timeline — quick slide-in from the left, staggered */
.s-steps__item.s-reveal { transform: translateX(-28px); }
.s-steps__item.s-reveal.is-visible { transform: none; }
.s-steps__item.s-reveal:nth-child(1) { transition-delay: 0ms; }
.s-steps__item.s-reveal:nth-child(2) { transition-delay: 110ms; }
.s-steps__item.s-reveal:nth-child(3) { transition-delay: 220ms; }
.s-steps__item.s-reveal:nth-child(4) { transition-delay: 330ms; }

.s-timeline__item.s-reveal { transform: translateX(-22px); }
.s-timeline__item.s-reveal.is-visible { transform: none; }

/* Accordion — subtle rise + stagger so FAQ items cascade in */
.s-accordion__item.s-reveal:nth-child(1) { transition-delay: 0ms; }
.s-accordion__item.s-reveal:nth-child(2) { transition-delay: 80ms; }
.s-accordion__item.s-reveal:nth-child(3) { transition-delay: 160ms; }
.s-accordion__item.s-reveal:nth-child(4) { transition-delay: 240ms; }
.s-accordion__item.s-reveal:nth-child(5) { transition-delay: 320ms; }
.s-accordion__item.s-reveal:nth-child(6) { transition-delay: 400ms; }

.s-quote__card.s-reveal { transform: translateY(30px) scale(.96); }
.s-quote__card.s-reveal.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.s-reveal, .s-reveal.is-visible {
		opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
	}
}

/* ── Cursor-follow spotlight — hero only, desktop pointer devices ──
   A small, heavily-blurred glow that trails the cursor with a soft
   lag (not 1:1), implemented as a real circle (not a full-width
   gradient layer) so it can *never* show a hard rectangular edge —
   it fades to fully transparent well inside its own box on every side.
   (.s-hero / .s-hero__inner positioning is declared once, further down.) */
.s-hero__inner::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 460px;
	height: 460px;
	margin: -230px 0 0 -230px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(234, 167, 25, .13) 0%, rgba(234, 167, 25, 0) 65%);
	filter: blur(46px);
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transform: translate(var(--spot-x, 50%), var(--spot-y, 30%));
	transition: opacity .6s ease, transform .4s cubic-bezier(.2,.7,.3,1);
	will-change: transform, opacity;
}
.s-hero.is-spotlighting .s-hero__inner::after { opacity: .6; }
@media (hover: none), (prefers-reduced-motion: reduce) {
	.s-hero__inner::after { display: none; }
}

/* ── 3D tilt-on-hover — flow card + asset/feature cards ── */
.s-cards, .s-hero__visual { perspective: 1200px; }
.s-tilt {
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .12s ease-out;
}
/* Higher specificity so the snappy tilt transition wins over the
   slower base hover transition already defined on .s-card/.s-flow-card. */
.s-card.s-tilt, .s-flow-card.s-tilt {
	transition: transform .12s ease-out, box-shadow var(--s-duration-base), border-color var(--s-duration-base);
}

/* ── Hero — a single, slow, low-opacity glow. Depth, not decoration. ── */
.s-hero {
	position: relative; padding: var(--s-space-8) 0 var(--s-space-7); overflow: hidden;
	/* Visible dot-mesh + soft node illustration directly in the hero canvas —
	   the very first thing a visitor sees now clearly carries imagery/texture,
	   not just a flat gradient. Denser/higher-contrast than the page-wide
	   body dot-grid so it actually reads at a glance. */
	background-image:
		radial-gradient(rgba(11, 20, 38, .09) 1.2px, transparent 1.6px),
		url('/images/site/bg-hero-mesh.svg');
	background-size: 26px 26px, cover;
	background-position: 0 0, center top;
	background-repeat: repeat, no-repeat;
}
.s-hero::before {
	content: '';
	position: absolute;
	width: 640px; height: 640px;
	top: -260px; right: -140px;
	border-radius: 50%;
	background: var(--s-accent-glow);
	filter: blur(70px);
	pointer-events: none;
	z-index: 0;
	animation: s-float 18s ease-in-out infinite;
}

/* ── Hero canvas — a lightweight "living network" animation standing in
   for a hero video: soft nodes drifting and connecting with thin lines,
   in brand navy/gold. Sits behind the content and glows, above the
   dot-mesh background. Disabled/frozen on reduced-motion. ── */
.s-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: .8;
}
/* Second, cooler-toned glow on the opposite corner — gives the hero a
   subtle two-tone depth instead of a single centred spotlight. */
.s-hero::after {
	content: '';
	position: absolute;
	width: 480px; height: 480px;
	bottom: -220px; left: -160px;
	border-radius: 50%;
	background: radial-gradient(60% 60% at 50% 50%, rgba(49, 105, 198, .14) 0%, rgba(49, 105, 198, 0) 70%);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
	animation: s-float 22s ease-in-out infinite reverse;
}
@keyframes s-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-24px, 26px) scale(1.08); }
}
.s-hero__inner {
	position: relative; z-index: 1;
	max-width: var(--s-container); margin: 0 auto; padding: 0 32px;
	display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-space-8); align-items: center;
}
.s-hero__title {
	font-family: var(--s-font-display);
	font-size: clamp(40px, 5.2vw, 62px); line-height: 1.05; font-weight: 800;
	letter-spacing: -.02em; color: var(--s-text); margin: 0 0 var(--s-space-4);
	position: relative;
	/* Immediate CSS-only reveal — no JS/IntersectionObserver dependency,
	   so the very first line a visitor reads never waits on anything. */
	animation: s-hero-title-in .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes s-hero-title-in {
	from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(10px); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
.s-hero__desc {
	font-size: 19px; color: var(--s-text-muted); max-width: 520px; margin: 0 0 var(--s-space-5);
	animation: s-fade-up .7s var(--s-easing) .08s both;
}
.s-hero__actions {
	display: flex; gap: var(--s-space-3); flex-wrap: wrap; margin-bottom: var(--s-space-5);
	animation: s-fade-up .7s var(--s-easing) .16s both;
}
.s-hero__trust {
	font-size: 13.5px; color: var(--s-text-faint); max-width: 460px;
	animation: s-fade-up .7s var(--s-easing) .24s both;
}
.s-badge { animation: s-fade-up .6s var(--s-easing) both; }

@keyframes s-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.s-hero::before, .s-hero::after,
	.s-hero__title, .s-hero__desc, .s-hero__actions, .s-hero__trust, .s-badge {
		animation: none; opacity: 1; transform: none;
	}
}


.s-hero__visual { display: flex; justify-content: center; position: relative; }
.s-hero__visual::before {
	content: '';
	position: absolute;
	inset: -70px -60px -30px -60px;
	background: url('/images/site/bg-orbit.svg') no-repeat center / contain;
	opacity: .8;
	z-index: 0;
	pointer-events: none;
	animation: s-float 20s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .s-hero__visual::before { animation: none; } }

/* Flow card — EUR → quote → BTC/ETH, redesigned as a proper product visual */
.s-flow-card {
	position: relative; z-index: 1; width: 100%;
	background: var(--s-glass-bg-strong); border: 1px solid var(--s-glass-border);
	border-radius: var(--s-radius-xl);
	backdrop-filter: blur(var(--s-glass-blur)); -webkit-backdrop-filter: blur(var(--s-glass-blur));
	padding: var(--s-space-6) var(--s-space-6) var(--s-space-5);
	box-shadow: var(--s-shadow-md);
	animation: s-rise .7s var(--s-easing) both;
	transition: transform var(--s-duration-slow) var(--s-easing), box-shadow var(--s-duration-slow);
}
.s-flow-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 48px rgba(11, 20, 38, .10), var(--s-shadow-md);
}
.s-flow-card__tag {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 12.5px; font-weight: 700; color: var(--s-text-faint);
	letter-spacing: .02em;
}
.s-flow-card__head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: var(--s-space-3);
}
.s-flow-card__rate {
	font-size: 12.5px; font-weight: 700; color: var(--s-text-muted);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.s-flow-card__spark {
	display: block; width: 100%; height: 34px; margin-bottom: var(--s-space-4);
	opacity: .55;
}
.s-flow-card__dot {
	width: 7px; height: 7px; border-radius: 50%; background: var(--s-success);
	box-shadow: 0 0 0 0 rgba(22, 138, 80, .5);
	animation: s-pulse-green 2.4s ease-out 3;
}
@keyframes s-pulse-green {
	0% { box-shadow: 0 0 0 0 rgba(22, 138, 80, .45); }
	70% { box-shadow: 0 0 0 6px rgba(22, 138, 80, 0); }
	100% { box-shadow: 0 0 0 0 rgba(22, 138, 80, 0); }
}
@keyframes s-rise {
	from { opacity: 0; transform: translateY(18px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.s-flow-card__note {
	margin: var(--s-space-5) 0 0; font-size: 13px; color: var(--s-text-faint); text-align: center;
	padding-top: var(--s-space-4); border-top: 1px solid var(--s-border);
}

.s-flow {
	display: flex; align-items: center; justify-content: center; gap: var(--s-space-3);
	width: 100%; min-height: 150px;
}
.s-flow__node {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	background: var(--s-surface); border: 1px solid var(--s-border);
	border-radius: var(--s-radius-lg); padding: var(--s-space-5) var(--s-space-4);
	color: var(--s-text); font-weight: 700; text-align: center; min-width: 108px;
	transition: transform var(--s-duration-base) var(--s-easing), box-shadow var(--s-duration-base);
}
.s-flow__node:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-sm); }
.s-flow__label { font-size: 13px; letter-spacing: .01em; }
.s-flow__amount {
	font-size: 11.5px; font-weight: 600; color: var(--s-text-faint);
	letter-spacing: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.s-flow__icon {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%; font-size: 14px; font-weight: 700;
	color: var(--s-text); background: var(--s-surface); border: 1.5px solid var(--s-border-strong);
	transition: transform var(--s-duration-base) var(--s-easing);
}
.s-flow__node--crypto:hover .s-flow__icon { transform: translateY(-2px); }
.s-flow__icon svg { display: block; }
.s-flow__icon::after {
	content: ''; position: absolute; right: -1px; bottom: -1px;
	width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--s-surface);
}
.s-flow__icon--eur::after { background: var(--s-info); }
.s-flow__icon--btc { color: #E8992E; }
.s-flow__icon--btc::after { background: #E8992E; }
.s-flow__icon--eth { color: #6D83D6; margin-left: -14px; box-shadow: 0 0 0 2px var(--s-surface); }
.s-flow__icon--eth::after { background: #6D83D6; }
.s-flow__glyph { color: var(--s-accent-contrast); }

.s-flow__node--quote {
	background: var(--s-accent-gradient); border-color: transparent; color: var(--s-accent-contrast);
	box-shadow: var(--s-shadow-glow);
}

.s-flow__track { position: relative; width: 44px; height: 2px; background: var(--s-border); border-radius: 2px; flex-shrink: 0; overflow: hidden; }
.s-flow__dot-run {
	position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%;
	background: var(--s-accent-1); box-shadow: 0 0 6px rgba(234,167,25,.6);
	animation: s-track-run 1.8s ease-in-out infinite;
}
.s-flow__track:last-of-type .s-flow__dot-run { animation-delay: .5s; }
@keyframes s-track-run {
	0% { left: 0; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { left: calc(100% - 8px); opacity: 0; }
}

@media (max-width: 960px) {
	.s-hero__inner { grid-template-columns: 1fr; }
	.s-flow { flex-wrap: wrap; }
	.s-flow__track { width: 2px; height: 28px; }
	.s-flow__dot-run { animation-name: s-track-run-v; left: -3px; top: 0; }
	@keyframes s-track-run-v {
		0% { top: 0; opacity: 0; }
		15% { opacity: 1; }
		85% { opacity: 1; }
		100% { top: calc(100% - 8px); opacity: 0; }
	}
}

/* ── Quote preview widget ── */
.s-quote { padding: var(--s-space-7) 0; }
.s-quote__inner { display: flex; justify-content: center; }
.s-quote__card {
	width: 100%; max-width: 460px; background: var(--s-surface);
	border: 1px solid var(--s-border); border-radius: var(--s-radius-xl);
	padding: var(--s-space-6); box-shadow: var(--s-shadow-sm);
	transition: box-shadow var(--s-duration-base), transform var(--s-duration-base);
}
.s-quote__card:hover { box-shadow: var(--s-shadow-md); transform: translateY(-2px); }
.s-quote__toggle { display: flex; gap: 6px; background: var(--s-bg-muted); border-radius: var(--s-radius-pill); padding: 4px; margin-bottom: var(--s-space-5); }
.s-quote__toggleBtn {
	flex: 1; padding: 9px; border: none; background: transparent; border-radius: var(--s-radius-pill);
	font-weight: 600; font-size: 14px; color: var(--s-text-muted); cursor: pointer;
	transition: background var(--s-duration-fast), color var(--s-duration-fast), box-shadow var(--s-duration-fast);
}
.s-quote__toggleBtn.is-active { background: var(--s-surface); color: var(--s-text); box-shadow: var(--s-shadow-sm); }
.s-quote__row { display: grid; gap: var(--s-space-3); margin-bottom: var(--s-space-4); }
.s-quote__field { display: block; font-size: 13px; color: var(--s-text-muted); font-weight: 600; }
.s-quote__inputGroup {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: 6px; border: 1px solid var(--s-border); border-radius: var(--s-radius-md);
	padding: 10px 14px; background: var(--s-bg-muted);
	transition: border-color var(--s-duration-fast), box-shadow var(--s-duration-fast);
}
.s-quote__inputGroup:has(input:focus) { border-color: var(--s-accent-1); box-shadow: 0 0 0 3px var(--s-accent-soft); }
.s-quote__inputGroup input { border: none; background: none; font-size: 18px; font-weight: 700; width: 100%; color: var(--s-text); }
.s-quote__inputGroup input:focus { outline: none; }
.s-quote__unit { font-size: 13px; font-weight: 700; color: var(--s-text-faint); }
.s-quote__assets { display: flex; gap: 8px; margin-bottom: var(--s-space-5); }
.s-quote__asset {
	flex: 1; padding: 9px; border-radius: var(--s-radius-md); border: 1px solid var(--s-border);
	background: transparent; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--s-text-muted);
	transition: border-color var(--s-duration-fast), color var(--s-duration-fast), background var(--s-duration-fast), transform var(--s-duration-fast);
}
.s-quote__asset:hover { transform: translateY(-1px); }
.s-quote__asset.is-active { border-color: var(--s-accent-1); color: var(--s-accent-hover); background: var(--s-accent-soft); }
.s-quote__cta { width: 100%; margin-bottom: var(--s-space-3); }
.s-quote__note { font-size: 12.5px; color: var(--s-text-faint); text-align: center; margin: 0; }

/* ── Trust strip — evenly distributed, subtle brand dot markers ── */
.s-trust { padding: var(--s-space-6) 0; border-top: 1px solid var(--s-border); border-bottom: 1px solid var(--s-border); }
.s-trust__grid { display: flex; justify-content: space-between; gap: var(--s-space-4); flex-wrap: wrap; }
.s-trust__item {
	font-size: 14px; font-weight: 600; color: var(--s-text-muted);
	white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
.s-trust__item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--s-accent-1); flex-shrink: 0; }
@media (max-width: 800px) {
	.s-trust__grid { justify-content: flex-start; }
	.s-trust__item { white-space: normal; }
}

/* ── Steps / timeline — rows with dividers instead of heavy boxes ── */
.s-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-space-5); }
.s-steps__item {
	padding: 0 0 0 var(--s-space-4); border-left: 2px solid var(--s-border);
	transition: border-color var(--s-duration-base);
}
.s-steps__item:hover { border-left-color: var(--s-accent-1); }
.s-steps__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; background: var(--s-accent-soft);
	color: var(--s-accent-hover); font-weight: 700; font-size: 13px; margin-bottom: var(--s-space-3);
	transition: transform var(--s-duration-base) var(--s-easing), background var(--s-duration-base), color var(--s-duration-base);
}
.s-steps__item:hover .s-steps__num { transform: scale(1.12); background: var(--s-accent-1); color: var(--s-accent-contrast); }
.s-steps__item h3 { margin: 0 0 6px; font-size: 17px; color: var(--s-text); }
.s-steps__item p { margin: 0; color: var(--s-text-muted); font-size: 14.5px; }
@media (max-width: 900px) { .s-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .s-steps { grid-template-columns: 1fr; } }

.s-timeline { display: flex; flex-direction: column; margin-bottom: var(--s-space-5); }
.s-timeline__item {
	display: flex; gap: var(--s-space-4); align-items: flex-start; padding: var(--s-space-4) 0;
	border-bottom: 1px solid var(--s-border); transition: padding-left var(--s-duration-base) var(--s-easing);
}
.s-timeline__item:hover { padding-left: 6px; }
.s-timeline__item:last-child { border-bottom: none; }
.s-timeline__num {
	flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--s-accent-soft);
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--s-accent-hover);
	transition: background var(--s-duration-base), color var(--s-duration-base);
}
.s-timeline__item:hover .s-timeline__num { background: var(--s-accent-1); color: var(--s-accent-contrast); }
.s-timeline__item p { margin: 0; padding-top: 3px; color: var(--s-text); }

/* ── Cards ── */
.s-cards { display: grid; gap: var(--s-space-5); }
.s-cards--2 { grid-template-columns: repeat(2, 1fr); }
.s-cards--3 { grid-template-columns: repeat(3, 1fr); }
.s-cards--4 { grid-template-columns: repeat(4, 1fr); }
.s-card {
	background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); padding: var(--s-space-6);
	transition: transform var(--s-duration-base) var(--s-easing), box-shadow var(--s-duration-base), border-color var(--s-duration-base);
}
.s-card:hover { transform: translateY(-4px); box-shadow: var(--s-shadow-md); border-color: var(--s-border-strong); }
.s-card--compact { padding: var(--s-space-5); }
.s-card h3 { margin: 0 0 var(--s-space-2); font-size: 18px; color: var(--s-text); }
.s-card p { margin: 0; color: var(--s-text-muted); }
.s-card--asset { text-align: left; }
.s-asset-icon {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%; font-size: 19px; font-weight: 700;
	margin-bottom: var(--s-space-3); color: var(--s-text);
	background: var(--s-bg-muted); border: 1.5px solid var(--s-border-strong);
	transition: transform var(--s-duration-base) var(--s-easing), border-color var(--s-duration-base);
}
.s-asset-icon svg { display: block; }
.s-asset-icon::after {
	content: ''; position: absolute; right: -1px; bottom: -1px;
	width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--s-surface);
}
.s-card:hover .s-asset-icon { transform: scale(1.06) rotate(-4deg); border-color: var(--s-accent-1); }
.s-asset-icon--btc { color: #E8992E; }
.s-asset-icon--btc::after { background: #E8992E; }
.s-asset-icon--eth { color: #6D83D6; }
.s-asset-icon--eth::after { background: #6D83D6; }

@media (max-width: 960px) { .s-cards--3, .s-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .s-cards--2, .s-cards--3, .s-cards--4 { grid-template-columns: 1fr; } }

/* ── Direction chips — EUR → Quote → BTC flow, used instead of a plain arrow icon ── */
.s-direction-card__flow {
	display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-space-4); flex-wrap: wrap;
}
.s-direction-chip {
	display: inline-flex; align-items: center;
	padding: 6px 12px; border-radius: var(--s-radius-pill);
	font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
	color: var(--s-text); background: var(--s-bg-muted); border: 1px solid var(--s-border);
}
.s-direction-chip--quote { color: var(--s-accent-hover); background: var(--s-accent-soft); border-color: transparent; }
.s-direction-card__arrow { color: var(--s-text-faint); font-size: 13px; }

/* ── Security teaser — light, single gold rule for emphasis ── */
.s-security-teaser {
	max-width: 720px; padding-left: var(--s-space-5);
	border-left: 3px solid var(--s-accent-1);
}

/* ── Accordion (FAQ) ── */
.s-accordion { display: flex; flex-direction: column; max-width: 780px; }
.s-accordion__item { border-bottom: 1px solid var(--s-border); padding: var(--s-space-4) 0; background: transparent; transition: padding-left var(--s-duration-base); }
.s-accordion__item summary { cursor: pointer; font-weight: 600; color: var(--s-text); list-style: none; }
.s-accordion__item summary::-webkit-details-marker { display: none; }
.s-accordion__item summary::after { content: '+'; float: right; color: var(--s-text-faint); transition: transform var(--s-duration-base), color var(--s-duration-base); }
.s-accordion__item[open] summary::after { content: '+'; transform: rotate(45deg); color: var(--s-accent-hover); }
.s-accordion__item:hover summary { color: var(--s-accent-hover); }
.s-accordion__item p { margin: var(--s-space-3) 0 0; color: var(--s-text-muted); }

/* ── Final CTA — the one deliberately "expensive" warm gradient block on the site ── */
.s-final-cta {
	text-align: center;
	position: relative;
	background:
		radial-gradient(640px 320px at 50% 0%, rgba(234, 167, 25, .16), transparent 65%),
		url('/images/site/bg-topo.svg'),
		var(--s-bg-muted);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center, center, center;
	background-size: auto, cover, auto;
	overflow: hidden;
}
.s-final-cta::before {
	content: '';
	position: absolute;
	inset: -40% -10%;
	background: radial-gradient(50% 50% at 30% 40%, rgba(234, 167, 25, .16), transparent 70%),
	            radial-gradient(50% 50% at 75% 60%, rgba(49, 105, 198, .12), transparent 70%);
	animation: s-drift 16s ease-in-out infinite;
	pointer-events: none;
}
.s-final-cta__title {
	font-family: var(--s-font-display);
	font-size: clamp(32px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.01em; color: var(--s-text); margin: 0 0 var(--s-space-5);
	position: relative; z-index: 1;
}
.s-final-cta__actions { display: flex; justify-content: center; gap: var(--s-space-3); flex-wrap: wrap; position: relative; z-index: 1; }

@keyframes s-drift {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50%      { transform: translate(3%, -3%) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
	.s-final-cta::before { animation: none; }
}

/* ── Tabs (How it works) ── */
.s-tabs__nav { display: flex; gap: 8px; margin-bottom: var(--s-space-5); border-bottom: 1px solid var(--s-border); }
.s-tabs__btn { padding: 12px 4px; margin-right: var(--s-space-5); background: none; border: none; border-bottom: 2px solid transparent; font-weight: 600; color: var(--s-text-muted); cursor: pointer; }
.s-tabs__btn.is-active { color: var(--s-accent-hover); border-bottom-color: var(--s-accent-1); }
.s-tabs__panel { display: none; }
.s-tabs__panel.is-active { display: block; }
.s-ordered-list { padding-left: 22px; display: flex; flex-direction: column; gap: var(--s-space-3); color: var(--s-text); }

/* ── Generic prose / lists ── */
.s-prose { max-width: 760px; }
.s-prose h3 { margin-top: var(--s-space-6); color: var(--s-text); }
.s-list { padding-left: 20px; display: flex; flex-direction: column; gap: var(--s-space-2); color: var(--s-text); }

/* ── Alerts ── */
.s-alert { border-radius: var(--s-radius-md); padding: var(--s-space-4) var(--s-space-5); margin: var(--s-space-4) 0; }
.s-alert--warning { background: var(--s-warning-soft); border: 1px solid transparent; color: var(--s-warning); }
.s-alert--warning strong { color: var(--s-text); }

/* ── Contact grid ── */
.s-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-space-5); }
.s-contact-item {
	border: 1px solid var(--s-border); border-radius: var(--s-radius-md); padding: var(--s-space-5);
	transition: transform var(--s-duration-base) var(--s-easing), box-shadow var(--s-duration-base), border-color var(--s-duration-base);
}
.s-contact-item:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-sm); border-color: var(--s-accent-1); }
.s-contact-item h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--s-text-faint); }
.s-contact-item a, .s-contact-item p { font-size: 17px; font-weight: 600; margin: 0; color: var(--s-text); }
@media (max-width: 640px) { .s-contact-grid { grid-template-columns: 1fr; } }

/* ── Status banner / chips — sentence case, soft backgrounds ── */
.s-status-banner { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--s-radius-pill); font-weight: 600; font-size: 14.5px; margin: var(--s-space-4) 0; }
.s-status-banner--ok { background: var(--s-success-soft); color: var(--s-success); }
.s-status-banner--degraded { background: var(--s-warning-soft); color: var(--s-warning); }
.s-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ── Product preview — real client-area screenshots in a browser-chrome
   mockup, with a tab switcher. This is the section that shows visitors
   what the actual account looks like, instead of describing it in prose. */
.s-preview__widget {
	margin: var(--s-space-6) auto 0;
	max-width: 960px;
}
.s-preview__tabs {
	display: inline-flex; gap: 4px;
	background: var(--s-bg-muted); border-radius: var(--s-radius-pill);
	padding: 4px; margin-bottom: var(--s-space-5);
}
.s-preview__tab {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 16px; border: none; background: transparent; border-radius: var(--s-radius-pill);
	font-size: 13.5px; font-weight: 600; color: var(--s-text-muted); cursor: pointer;
	transition: background var(--s-duration-fast), color var(--s-duration-fast), box-shadow var(--s-duration-fast);
}
.s-preview__tab svg { flex-shrink: 0; opacity: .7; }
.s-preview__tab.is-active { background: var(--s-surface); color: var(--s-text); box-shadow: var(--s-shadow-sm); }
.s-preview__tab.is-active svg { opacity: 1; color: var(--s-accent-hover); }

.s-preview__frame {
	border-radius: var(--s-radius-xl);
	background: var(--s-surface);
	border: 1px solid var(--s-border);
	box-shadow: var(--s-shadow-md);
	overflow: hidden;
	transition: transform var(--s-duration-slow) var(--s-easing), box-shadow var(--s-duration-slow);
}
.s-preview__widget:hover .s-preview__frame {
	transform: translateY(-3px);
	box-shadow: 0 24px 56px rgba(11, 20, 38, .12), var(--s-shadow-md);
}
.s-preview__chrome {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 14px;
	background: var(--s-bg-muted);
	border-bottom: 1px solid var(--s-border);
}
.s-preview__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.s-preview__dot--r { background: #f26060; }
.s-preview__dot--y { background: #f2b93d; }
.s-preview__dot--g { background: #2fb872; }
.s-preview__url {
	margin: 0 auto; padding: 3px 14px; border-radius: var(--s-radius-pill);
	background: var(--s-surface); border: 1px solid var(--s-border);
	font-size: 11.5px; color: var(--s-text-faint); font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.s-preview__shots {
	position: relative;
	width: 100%;
	min-height: 380px;
	background: var(--s-bg-muted);
}
.s-preview__shot {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	overflow: auto;
	opacity: 0;
	transform: scale(1.01);
	transition: opacity .45s ease, transform .45s ease;
	pointer-events: none;
}
.s-preview__shot.is-active {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}
.s-preview__caption {
	margin: var(--s-space-4) 0 0;
	font-size: 14px; color: var(--s-text-muted);
	min-height: 1.6em;
}

/* ── Client-area recreations (not screenshots) — these mirror the real
   buy form / dashboard / order-tracking screens with placeholder data, so
   the marketing site never has to ship blurry PNGs of the actual product.
   Virarosi is non-custodial, so no wallet/balance UI is ever recreated here. */
.s-mock {
	padding: var(--s-space-5);
	font-size: 13.5px;
	color: var(--s-text);
}
.s-mock-chip {
	display: inline-flex; align-items: center; padding: 4px 11px;
	border-radius: var(--s-radius-pill); background: var(--s-bg-muted);
	font-size: 12.5px; font-weight: 700; color: var(--s-text-muted);
}
.s-mock-chip--accent { background: var(--s-accent-soft); color: var(--s-accent-hover); }
.s-mock-badge {
	display: inline-flex; align-items: center; padding: 3px 10px;
	border-radius: var(--s-radius-pill); font-size: 11.5px; font-weight: 700;
}
.s-mock-badge--ok { background: var(--s-success-soft); color: var(--s-success); }
.s-mock-badge--pending { background: var(--s-warning-soft); color: var(--s-warning); }

/* Buy-form mock */
.s-mock-buy { max-width: 420px; margin: 0 auto; }
.s-mock-field { margin-bottom: var(--s-space-4); }
.s-mock-field__label { font-size: 12.5px; font-weight: 600; color: var(--s-text-muted); margin-bottom: 6px; }
.s-mock-input {
	display: flex; align-items: center; justify-content: space-between;
	padding: 11px 14px; border-radius: var(--s-radius-md);
	background: var(--s-surface); border: 1px solid var(--s-border);
	font-weight: 600; font-size: 14px;
}
.s-mock-input--select { color: var(--s-text); cursor: default; }
.s-mock-input__chevron { color: var(--s-text-faint); flex-shrink: 0; }
.s-mock-input--mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; letter-spacing: .01em; }
.s-mock-buy__swap {
	display: flex; justify-content: center; margin: -6px 0 var(--s-space-2);
}
.s-mock-buy__swap span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--s-bg-muted); border: 1px solid var(--s-border);
	font-size: 14px; color: var(--s-text-faint);
}
.s-mock-walletType { display: flex; gap: 8px; }
.s-mock-walletType__opt {
	flex: 1; text-align: center; padding: 9px 10px; border-radius: var(--s-radius-md);
	border: 1px solid var(--s-border); font-size: 12.5px; font-weight: 600; color: var(--s-text-muted);
}
.s-mock-walletType__opt.is-active { border-color: var(--s-accent-1); background: var(--s-accent-soft); color: var(--s-accent-hover); }
.s-mock-btn {
	margin-top: var(--s-space-2); padding: 12px; text-align: center;
	border-radius: var(--s-radius-pill); background: var(--s-accent-gradient);
	color: var(--s-accent-contrast); font-weight: 700; font-size: 14px;
}
.s-mock-recap { margin-top: var(--s-space-4); padding: var(--s-space-4); border-radius: var(--s-radius-lg); background: var(--s-bg-muted); }
.s-mock-recap__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-space-2); }
.s-mock-recap__label { font-size: 12.5px; color: var(--s-text-muted); font-weight: 600; }
.s-mock-recap__value { font-weight: 700; font-size: 15px; }
.s-mock-recap__row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--s-text-faint); padding: 3px 0; }

/* Dashboard mock — one-to-one recreation of the real quick-actions split
   card + recent-activity feed (same copy, same layout, same colours). */
.s-mock-quickTitle {
	font-size: 12px; font-weight: 600; color: var(--s-text-faint);
	text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
}
.s-mock-quickCard {
	background: var(--s-surface); border: 1px solid var(--s-border);
	border-radius: 22px; box-shadow: var(--s-shadow-sm); overflow: hidden;
	margin-bottom: var(--s-space-5);
}
.s-mock-quickSplit { display: flex; align-items: stretch; }
.s-mock-quickHalf { flex: 1; display: flex; align-items: center; gap: 16px; padding: 22px 24px; }
.s-mock-quickHalf__icon {
	width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.s-mock-quickHalf__icon svg { width: 20px; height: 20px; }
.s-mock-quickHalf__icon--buy { background: var(--s-success-soft); color: var(--s-success); }
.s-mock-quickHalf__icon--sell { background: rgba(139,92,246,.1); color: #7c3aed; }
.s-mock-quickHalf__body { display: flex; flex-direction: column; }
.s-mock-quickHalf__name { font-size: 16px; font-weight: 700; color: var(--s-text); margin-bottom: 3px; }
.s-mock-quickHalf__desc { font-size: 12.5px; color: var(--s-text-muted); line-height: 1.5; }
.s-mock-quickHalf__badge {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
	padding: 4px 10px; border-radius: var(--s-radius-pill);
	font-size: 11.5px; font-weight: 500; color: var(--s-text-muted);
	background: var(--s-bg-muted); border: 1px solid var(--s-border); width: fit-content;
}
.s-mock-quickHalf__badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.s-mock-quickDivider { width: 1px; background: var(--s-border); margin: 20px 0; flex-shrink: 0; }

.s-mock-card { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); padding: var(--s-space-4); }
.s-mock-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-space-3); }
.s-mock-card__title { font-size: 14.5px; font-weight: 650; color: var(--s-text); }
.s-mock-card__more { font-size: 12px; color: var(--s-accent-hover); font-weight: 600; }
.s-mock-activity__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--s-border); }
.s-mock-activity__row:first-child { border-top: none; }
.s-mock-activity__icon {
	display: flex; width: 32px; height: 32px; align-items: center; justify-content: center;
	border-radius: 10px; flex-shrink: 0; background: var(--s-bg-muted);
}
.s-mock-activity__icon svg { width: 14px; height: 14px; }
.s-mock-activity__icon--buy { background: var(--s-success-soft); color: var(--s-success); }
.s-mock-activity__icon--sell { background: var(--s-danger-soft); color: var(--s-danger); }
.s-mock-activity__body { flex: 1; min-width: 0; }
.s-mock-activity__type { font-size: 13px; font-weight: 600; color: var(--s-text); }
.s-mock-activity__date { font-size: 11.5px; color: var(--s-text-faint); margin-top: 2px; }
.s-mock-activity__right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.s-mock-activity__amount { font-size: 12.5px; font-weight: 600; color: var(--s-text); font-family: ui-monospace, 'SF Mono', Menlo, monospace; white-space: nowrap; }
.s-mock-activity__status {
	font-size: 10.5px; font-weight: 600; margin-top: 3px;
	text-transform: uppercase; letter-spacing: .04em; color: var(--s-text-faint);
}
.s-mock-activity__status--ok { color: var(--s-success); }
.s-mock-activity__status--pending { color: var(--s-warning); }

/* Order-tracking mock */
.s-mock-order__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-space-5); }
.s-mock-order__pair { display: flex; align-items: center; gap: 8px; }
.s-mock-order__arrow { color: var(--s-text-faint); }
.s-mock-timeline { display: flex; flex-direction: column; padding-left: 4px; }
.s-mock-timeline__item { display: flex; align-items: flex-start; gap: 14px; position: relative; padding-bottom: 22px; }
.s-mock-timeline__item:last-child { padding-bottom: 0; }
.s-mock-timeline__item:not(:last-child)::after {
	content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: var(--s-border);
}
.s-mock-timeline__dot {
	width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--s-bg-muted); border: 2px solid var(--s-border-strong);
	font-size: 11px; color: var(--s-surface);
}
.s-mock-timeline__item.is-done .s-mock-timeline__dot { background: var(--s-success); border-color: var(--s-success); }
.s-mock-timeline__item.is-active .s-mock-timeline__dot { background: var(--s-accent-1); border-color: var(--s-accent-hover); }
.s-mock-timeline__label { font-weight: 700; font-size: 13.5px; }
.s-mock-timeline__time { font-size: 12px; color: var(--s-text-faint); margin-top: 1px; }


/* Entrance — the widget rises and settles into place, distinct from the
   plain card reveal used elsewhere. */
.s-preview__widget.s-reveal { transform: translateY(40px) scale(.97); }
.s-preview__widget.s-reveal.is-visible { transform: none; }

@media (max-width: 720px) {
	.s-preview__tabs { flex-wrap: wrap; }
	.s-preview__tab span { display: none; }
	.s-mock-quickSplit { flex-direction: column; }
	.s-mock-quickDivider { width: auto; height: 1px; margin: 0 24px; }
}


/* Page shells */
.site-page--simple .s-section:first-child,
.site-page--legal .s-section:first-child { padding-top: var(--s-space-7); }