/* EW Fintech — homepage · "Sky Corridor" (final)
   Source of truth: ewfintech/design/sky/sky-prototype.html (approved). Fixed atmospheric backdrop (canvas) under a centred gallery layout.
   Retained production extras: hero legibility veil, staggered entrance, html.js-gated reveal, per-screen snap, ≤768 degrade. */

/* ---------- tokens (prototype) ---------- */
:root {
  --obsidian: #0f1011; --abyss: #090a0b; --graphite: #2e2e2e; --steel: #3f4041;
  --silver: #cacaca; --fog: #6a6b6b; --ash: #9f9fa0; --cloud: #f5f5f7; --pure: #ffffff;
  --cyan: #00b3dd; --iris: #847dff; --deepiris: #4b49aa; --peri: #90b8f0;
  --sky: #131d27;
  --bodyfont: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --glass: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.035));
  --glass-blur: blur(18px) saturate(1.4);
  --glass-border: rgba(255,255,255,0.14); --glass-edge: rgba(255,255,255,0.26); --glass-shadow: 0 16px 48px rgba(5,10,20,0.28);
  --ease: cubic-bezier(0.455, 0.03, 0.515, 0.955); --fade: 2.5s;
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--sky); color: var(--cloud); font-family: var(--bodyfont); font-size: 16px; line-height: 1.5; font-weight: 300; -webkit-font-smoothing: antialiased; }
a { color: var(--pure); text-decoration: none; touch-action: manipulation; transition: background-color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
a:focus-visible { outline: 1px solid var(--pure); outline-offset: 3px; border-radius: 2px; }
img { display: block; }
h1, h2, p { margin: 0; }
.ser { font-family: 'DM Serif Display', 'Lyon Display', Georgia, serif; font-weight: 400; }
.mono { font-family: 'Roboto Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.18em; }

/* ---------- fixed sky layer ---------- */
.bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; background: var(--sky) url('/assets/sky.jpg?v=sky3') center / cover no-repeat; }
.veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9,13,20,0.08) 0%, rgba(9,13,20,0.30) 55%, rgba(9,13,20,0.58) 100%); }
.page { position: relative; z-index: 1; padding: 0 16px; overflow-x: clip; }
.wrap { max-width: 1200px; margin: 0 auto; box-sizing: border-box; }

/* ---------- reveal (gated on html.js; IO adds .in) ---------- */
.rv { opacity: 1; }
.js .rv { opacity: 0; transition: opacity var(--fade) var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transition: none; } }

/* ---------- nav · sky-blended glass ---------- */
.nav { position: sticky; top: 12px; z-index: 5; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,0.055); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 10px 18px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 14px; height: 21px; object-fit: contain; }
.brand span { font-size: 11px; color: var(--pure); }
.ticker { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.tk { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.02em; color: var(--ash); font-variant-numeric: tabular-nums; }
.tk .chg:empty { display: none; }
.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 8px; font-size: 15px; font-weight: 400; padding: 10px 18px; line-height: 1.3; }
.btn.white { background: var(--pure); color: var(--obsidian); }
.btn.white:hover { background: var(--cloud); }
.btn.ghost { border: 1px solid rgba(255,255,255,0.4); color: var(--pure); background: transparent; }
.btn.ghost:hover { border-color: var(--pure); background: rgba(255,255,255,0.06); }
.btn.sm { font-size: 13px; padding: 7px 14px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 60px; }
.hero-veil { position: absolute; left: 50%; top: 50%; width: min(1100px, 100%); height: min(640px, 80vh); transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(9,13,20,0.42) 0%, rgba(9,13,20,0.22) 45%, rgba(9,13,20,0) 72%); pointer-events: none; z-index: 0; }
.hero > *:not(.hero-veil) { position: relative; z-index: 1; }
h1 { margin: 0 0 26px 0; font-size: clamp(58px, 9vw, 96px); line-height: 0.9; font-weight: 400; color: var(--pure); letter-spacing: -0.015em; text-wrap: balance; }
h1 em { font-style: italic; }
.lede { margin: 0 auto 40px auto; max-width: 560px; font-size: 18px; line-height: 1.5; font-weight: 300; color: var(--ash); text-wrap: pretty; }
.cta-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ---------- sections · centred gallery ---------- */
.sec { padding-block: 72px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; align-self: center; gap: 10px; font-size: 11px; color: rgba(255,255,255,0.82); margin-bottom: 22px; text-shadow: 0 1px 8px rgba(9,13,20,0.5); }
.eyebrow::before, .eyebrow::after { content: ''; display: block; width: 28px; height: 1px; background: rgba(255,255,255,0.35); flex-shrink: 0; }
h2 { margin: 0 auto 18px auto; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.0; font-weight: 400; color: var(--cloud); max-width: 860px; letter-spacing: -0.01em; text-wrap: balance; }
h2 em { font-style: italic; }
.sub { margin: 0 auto; max-width: 640px; font-size: 16px; line-height: 1.6; font-weight: 300; color: var(--ash); text-wrap: pretty; }

/* deployed across · platform logos + chains */
.depnames { display: flex; align-items: center; justify-content: center; gap: 20px 52px; flex-wrap: wrap; margin-top: 38px; }
.depnames .plat { display: flex; align-items: center; gap: 14px; }
.lgo { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.lgo img { width: 100%; height: 100%; object-fit: contain; }
.lgo.pad img { width: 80%; height: 80%; } /* square marks (Base) stay square inside the round slot */
.depnames .plat span { font-size: 30px; font-weight: 400; color: var(--cloud); letter-spacing: 0.01em; }
.chains { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; }
.chains .rule { width: 64px; height: 1px; background: rgba(255,255,255,0.22); flex-shrink: 0; }
.chains .ch { display: flex; align-items: center; gap: 10px; }
.chains .lgo { width: 22px; height: 22px; }
.chains .ch span { font-size: 16px; font-weight: 300; color: var(--ash); }

/* frosted glass cards */
.card { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-top-color: var(--glass-edge); border-radius: 20px; padding: 32px; box-sizing: border-box; text-align: left; box-shadow: var(--glass-shadow); }
.card.bright { background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.06)); }
.mt { margin-top: 44px; }

.flowline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 0; }
.flowline + .flowline { border-top: 1px solid rgba(255,255,255,0.08); }
.flowline .tag { width: 130px; font-size: 10px; color: var(--fog); flex-shrink: 0; }
.flowline .n { font-size: 16px; font-weight: 300; color: var(--ash); }
.flowline.on .n { color: var(--pure); }
.flowline .ar { color: var(--steel); }
.flowline.on .ar { color: var(--cyan); }
.flowline .tag.on { color: var(--cyan); }

.range { position: relative; height: 62px; margin: 6px 0 24px 0; }
.range .track { position: absolute; left: 0; right: 0; top: 29px; height: 2px; background: rgba(255,255,255,0.18); border-radius: 1px; }
.range .grow { position: absolute; left: 30%; width: 40%; top: 28px; height: 4px; background: rgba(255,255,255,0.92); border-radius: 2px; }
.range .tick { position: absolute; top: 20px; width: 1px; height: 20px; background: rgba(255,255,255,0.9); }
.range .dot { position: absolute; left: 52%; top: 23px; width: 13px; height: 13px; margin-left: -7px; background: var(--sky); border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; }
.range .lab { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: var(--ash); white-space: nowrap; }
.range .lab.now { color: #fff; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; }
.steps .n { display: block; font-size: 22px; margin-bottom: 6px; color: #fff; }
.steps .b { font-size: 14px; line-height: 1.55; color: var(--ash); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.tile { border-radius: 20px; padding: 32px; text-align: left; color: var(--pure); min-height: 240px; display: flex; flex-direction: column; box-sizing: border-box; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-top-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.tile.main { background: linear-gradient(165deg, rgba(64,120,200,0.34), rgba(26,60,120,0.16)); }
.tile.soft { background: linear-gradient(165deg, rgba(144,184,240,0.22), rgba(144,184,240,0.06)); }
.tile .k { font-size: 10px; color: rgba(255,255,255,0.78); margin-bottom: auto; }
.tile .t { font-size: 32px; line-height: 1.05; margin: 26px 0 12px 0; color: #fff; letter-spacing: -0.01em; }
.tile .b { font-size: 15px; line-height: 1.5; font-weight: 300; color: var(--ash); }

/* ---------- close ---------- */
.close { padding-block: 100px 48px; text-align: center; }
.close .wm { display: flex; align-items: baseline; justify-content: center; gap: 14px; font-style: italic; font-size: clamp(44px, 6vw, 72px); line-height: 1; color: var(--pure); }
.close .wm img { width: 20px; height: 31px; object-fit: contain; align-self: center; }
.close .meta { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 44px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 26px; }
.close .meta span, .close .meta a { font-size: 10px; color: var(--ash); }
.close .meta a { color: var(--pure); }
.close .meta a:hover { color: var(--cloud); opacity: 0.8; }

/* ---------- per-screen scroll snap (prototype) ---------- */
@media (min-height: 480px) {
  html, body { scroll-snap-type: y mandatory; }
  .hero, .sec, .close { scroll-snap-align: start; scroll-snap-stop: always; }
  .hero { height: 100svh; min-height: 0; box-sizing: border-box; }
  .sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  .close { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; }
}

/* ---------- ≤860 (prototype breakpoint) ---------- */
@media (max-width: 860px) {
  .ticker { display: none; }
  .steps, .tiles { display: flex; flex-direction: column; }
  .tile { min-height: 0; }
  .tile .t { margin-top: 18px; }
}

/* ---------- ≤768 · non-breaking degrade ---------- */
@media (max-width: 768px) {
  .page { padding: 0 12px; }
  .nav { top: 8px; }
  .nav-inner { padding: 8px 12px; }
  .hero { min-height: 88svh; padding-block: 48px; }
  .lede { font-size: 16px; margin-bottom: 32px; }
  .sec { padding-block: 56px; }
  .depnames { gap: 16px 28px; }
  .depnames .plat span { font-size: 24px; }
  .chains .rule { width: 32px; }
  .card { padding: 22px; }
  .flowline .tag { width: 100%; }
  .range .lab { font-size: 9px; letter-spacing: 0.08em; }
  .tile { padding: 24px; }
  .tile .t { font-size: 28px; }
  .close { padding-block: 72px 36px; }
  .close .meta { gap: 14px 22px; }
}