/* =========================================================
   SevaCoin — main stylesheet
   ========================================================= */

:root {
  /* SEVA brand palette (from the SEVA Coin logo: navy letters, blue and aqua "E" bars) */
  --seva-navy: #304e73;
  --seva-blue: #6197c9;
  --seva-aqua: #9ad2e2;
  --seva-deep: #062842;
  --seva-accent: #3a74a8;   /* SEVA blue, deepened for text on light surfaces */

  /* Accent aliases used across the sheet */
  --teal: var(--seva-aqua);
  --teal-strong: var(--seva-blue);
  --teal-deep: var(--seva-navy);
  --ink: #07111f;           /* deep navy */
  --ink-2: #0d1b2e;
  --ink-3: #14263d;
  --line-dark: rgba(154, 210, 226, 0.14);

  /* Light surfaces */
  --paper: #f7fafb;
  --paper-2: #eaf4f6;
  --text: #0f1c2b;
  --text-muted: #51606f;
  --line: #dbe5ea;

  --on-dark: #e8f1f4;
  --on-dark-muted: #9fb2c0;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 50px -20px rgba(7, 17, 31, 0.25);

  /* SEVA Coin's typeface: one clean geometric sans for headings and text */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-h: 96px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 0; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 { margin: 0; line-height: 1.15; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--teal); color: var(--ink); padding: 10px 16px; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--teal-strong); outline-offset: 3px; border-radius: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  font: 700 0.95rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--teal); color: var(--ink); box-shadow: 0 8px 24px -10px rgba(154, 210, 226, .8); }
.btn-primary:hover { background: #bfe6ef; }
.btn-ghost { border-color: rgba(232, 241, 244, .25); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-sm { padding: 10px 18px; font-size: .875rem; }
.btn-block { width: 100%; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 18px;
}
.eyebrow-dark { color: var(--teal-deep); }
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 4px rgba(154, 210, 226, .2);
}

/* ---------- Header (floating glass pill) ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50; padding-top: 14px;
}
.nav {
  position: relative; width: min(1160px, 100% - 32px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 0 14px; border-bottom: 1px solid rgba(160, 210, 255, .14);
}

.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--on-dark); font-weight: 600; letter-spacing: .12em; font-size: 1.05rem;
}
.brand b { color: var(--teal); font-weight: 800; }

.nav-links { display: flex; gap: 24px; white-space: nowrap; }
.nav-links a {
  color: #c9d8ea; text-decoration: none; font-size: .92rem; font-weight: 600;
  transition: color .2s ease;
}
.nav-links a:hover { color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.gtranslate_wrapper { font-size: .85rem; }
.gtranslate_wrapper, .gtranslate_wrapper a { color: var(--on-dark-muted) !important; }

.menu-toggle {
  display: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(160, 210, 255, .2); background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.menu-toggle span { width: 18px; height: 2px; background: var(--on-dark); border-radius: 2px; transition: .25s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Glowing gradient pill button */
.btn-glow {
  color: #04121f;
  background: linear-gradient(100deg, #bfe6ef 0%, #6197c9 45%, #6197c9 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 10px 30px -6px rgba(97, 151, 201, .6), 0 0 40px -8px rgba(154, 210, 226, .8);
}
.btn-glow:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 14px 40px -6px rgba(97, 151, 201, .8), 0 0 60px -6px rgba(154, 210, 226, .9); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--on-dark); isolation: isolate;
  background: #050b1f;
  min-height: max(640px, min(100vh, 900px));
  display: flex;
}
.hero-shade {
  position: absolute; top: 0; bottom: 0; left: 0; width: 47%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 11, 31, .92) 0%, rgba(5, 11, 31, .88) 62%, transparent 100%);
}

.hero-inner {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: 170px 0 56px;
}
.hero-copy { max-width: 720px; }
.hero-title {
  font-family: var(--font-body); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  font-size: clamp(2.8rem, 6.4vw, 5.4rem); margin: 0 0 26px; color: #fff;
}
.hero-title .line { display: block; }
.hero-title .word { display: inline-block; }
.hero-title .grad {
  background: linear-gradient(100deg, #6197c9 0%, #7cc8e0 50%, #bfe6ef 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-note { max-width: 520px; font-size: 1.15rem; line-height: 1.5; color: #c9d8ea; margin: 0 0 30px; }
.hero-stats {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.hero-stats li {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; min-width: 186px;
  padding: 16px 22px; border-radius: 14px;
  background: rgba(10, 30, 70, .4); border: 1px solid rgba(160, 210, 255, .28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s ease, transform .3s ease;
}
.hero-stats li:hover { transform: translateY(-2px); border-color: rgba(160, 210, 255, .32); }
.hero-stats strong { display: block; font-size: 1.65rem; font-weight: 800; color: #fff; line-height: 1.15; }
.hero-stats span { font-size: .9rem; color: #c9d8ea; }
.hero-stats svg { width: 28px; height: 28px; color: #5fa8ff; flex: none; }

.anim { opacity: 0; animation: fade-up 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


/* ---------- Sections ---------- */
.section { padding: 120px 0; }
.section-light { background: var(--paper); }
.section-tint { background: var(--paper-2); }
.section-dark { background: var(--ink); color: var(--on-dark); }
.section-dark p { color: var(--on-dark-muted); }

.section-head { max-width: 680px; margin-bottom: 64px; }
.section-head h2 { margin-bottom: 18px; }
.section-head p { color: var(--text-muted); font-size: 1.1rem; }
/* Pillars */
/* About ("What is SevaCoin?"): light scene, the coin on a glass podium with floating tiles, three glass cards */
.section-about {
  position: relative; overflow: hidden; isolation: isolate; color: var(--text);
  background:
    radial-gradient(60% 50% at 76% 36%, rgba(120, 190, 255, .45), transparent 70%),
    radial-gradient(28% 24% at 14% 30%, rgba(200, 230, 255, .9), transparent 70%),
    radial-gradient(30% 28% at 6% 78%, rgba(150, 210, 240, .5), transparent 70%),
    radial-gradient(22% 20% at 92% 82%, rgba(170, 215, 255, .6), transparent 70%),
    linear-gradient(180deg, #f1f7fd 0%, #f8fbff 38%, #dbedfb 100%);
}
.about-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* light rays falling through the room */
.about-light { position: absolute; top: -30%; bottom: -30%; width: 26%; opacity: .85; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8) 50%, transparent); rotate: 16deg; }
.about-light-1 { left: 2%; }
.about-light-2 { left: 40%; width: 16%; opacity: .55; }
/* a glossy floor with a bright edge */
.about-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .8) 40%, rgba(200, 226, 248, .95) 100%); }
.about-floor::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 30%, rgba(255, 255, 255, .95) 70%, transparent); }
.about-wrap { position: relative; }
.about-head { max-width: 720px; }
.about-eyebrow { color: #3a74a8; letter-spacing: .22em; margin-bottom: 22px; }
.about-head h2 { font-size: clamp(2.3rem, 4.3vw, 4rem); line-height: 1.06; margin: 0 0 24px; color: #0f1c2b; letter-spacing: -.02em; }
.about-head h2 em { font-style: normal; color: #3a74a8; }
.about-head p { color: #5b6b7c; font-size: 1.1rem; line-height: 1.55; max-width: 620px; }
/* the scene: globe behind, the coin and podium in front, glass tiles floating around */
.about-scene { position: relative; width: min(64%, 360px); aspect-ratio: 1.16; margin: 10px auto 0; }
/* phones: the coin-on-podium scene is desktop only */
@media (max-width: 920px) { .about-scene { display: none; } }
.about-globe {
  position: absolute; left: 46%; top: 0; width: 52%; opacity: .42; z-index: 0;
  mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 58%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 58%);
}
.about-stage { position: absolute; inset: 0; z-index: 1; }
.about-coin-fallback {
  position: absolute; left: 50%; top: 44%; width: 48%; translate: -50% -50%;
  mask-image: radial-gradient(ellipse 40.4% 42.1% at 51% 50.2%, #000 96.5%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 40.4% 42.1% at 51% 50.2%, #000 96.5%, transparent 100%);
}
.has-3d > .about-coin-fallback { display: none; }
/* glass cubes: a face, a thickness layer behind it, a strong blue icon */
.about-tile {
  position: absolute; z-index: 2; width: 16%; aspect-ratio: 1; border-radius: 22%; display: grid; place-items: center; color: #3a74a8;
  background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(212, 233, 255, .62));
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 20px 44px -14px rgba(40, 100, 180, .45), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -10px 20px rgba(120, 180, 240, .28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: tile-float 6s ease-in-out infinite;
}
.about-tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; translate: 7% 8%; z-index: -1;
  background: linear-gradient(145deg, rgba(130, 185, 245, .55), rgba(70, 130, 220, .4));
}
.about-tile svg { width: 50%; height: 50%; stroke-width: 2; filter: drop-shadow(0 5px 9px rgba(40, 120, 220, .35)); }
.about-tile-1 { left: 12%; top: 6%; }
.about-tile-2 { left: 0%; top: 42%; animation-delay: -1.5s; animation-duration: 7s; }
.about-tile-3 { right: 2%; top: 26%; animation-delay: -3s; }
.about-tile-4 { right: 10%; top: 60%; animation-delay: -4.5s; animation-duration: 6.5s; }
@keyframes tile-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* the cards */
.about-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.about-card {
  position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px; padding: 26px 24px 24px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(236, 245, 255, .72));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 24px 60px -26px rgba(30, 80, 150, .35), inset 0 0 0 1px rgba(150, 200, 255, .2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.about-card:hover { transform: translateY(-4px); box-shadow: 0 30px 70px -26px rgba(30, 80, 150, .45), inset 0 0 0 1px rgba(150, 200, 255, .3); }
.about-badges { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.about-num {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #a9c2db; color: #6b7f94; font: 600 .85rem var(--font-body);
}
.about-ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #3a74a8;
  background: #dff1ff; border: 1px solid rgba(120, 190, 255, .5);
}
.about-ico svg { width: 24px; height: 24px; }
.about-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 10px; color: #0f1c2b; }
.about-card p { color: #5b6b7c; font-size: .95rem; line-height: 1.5; margin: 0 0 22px; }
.about-go {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
  border: 1px solid #8fb8e0; color: #3a74a8; font-size: 1.2rem; background: rgba(255, 255, 255, .7); transition: .2s ease;
}
.about-go:hover { background: #3a74a8; color: #fff; border-color: #3a74a8; }
/* the picture panel of a card */
.about-art {
  position: relative; min-height: 190px; color: #7fc0f5; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, #e3f0ff 0%, #f6faff 55%, #d7e9fb 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 -24px 34px -24px rgba(80, 140, 220, .35);
}
.about-art::before {
  content: ""; position: absolute; left: 50%; top: 56%; width: 86%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 190, 255, .45), rgba(120, 190, 255, .12) 50%, transparent 70%);
}
.about-art .scene-3d { z-index: 1; }
/* the picture itself */
.about-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-3d > .about-art-fallback { display: none; }

/* Desktop: one screen, laid out like the reference picture (positions are % of a 1672 x 941 frame; --au is 1% of its width) */
@media (min-width: 921px) {
  .section-about { --au: min(1vw, 1.7768vh); --au: min(1vw, 1.7768svh); padding: 0; height: min(100vh, 56.28vw); height: min(100svh, 56.28vw); }
  .about-wrap { display: contents; }
  .about-head { position: absolute; left: 9.3%; top: 15.5%; width: 40%; max-width: none; z-index: 3; }
  .about-eyebrow { font-size: calc(.95 * var(--au)); margin-bottom: calc(1.6 * var(--au)); }
  .about-head h2 { font-size: calc(2.9 * var(--au)); line-height: 1.08; margin-bottom: calc(1.6 * var(--au)); }
  .about-head p { font-size: calc(1.12 * var(--au)); line-height: 1.5; max-width: calc(38 * var(--au)); }
  /* the whole scene (coin, podium, rings, tiles) stays in the upper right, above the cards */
  .about-scene { position: absolute; left: 60%; top: 12%; width: 26%; aspect-ratio: 1.16; margin: 0; }
  .about-cards { position: absolute; left: 7.5%; right: 7.5%; top: 64%; margin: 0; gap: 1.8%; z-index: 3; }
  .about-card { padding: calc(1.1 * var(--au)) calc(1.1 * var(--au)) calc(1.1 * var(--au)) calc(1.3 * var(--au)); border-radius: calc(1.4 * var(--au)); gap: calc(.7 * var(--au)); grid-template-columns: 1.08fr .92fr; }
  .about-badges { gap: calc(.6 * var(--au)); margin-bottom: calc(.8 * var(--au)); }
  .about-num { width: calc(2.3 * var(--au)); height: calc(2.3 * var(--au)); font-size: calc(.75 * var(--au)); }
  .about-ico { width: calc(2.9 * var(--au)); height: calc(2.9 * var(--au)); border-radius: calc(.8 * var(--au)); }
  .about-ico svg { width: calc(1.5 * var(--au)); height: calc(1.5 * var(--au)); }
  .about-card h3 { font-size: calc(1.45 * var(--au)); margin-bottom: calc(.4 * var(--au)); }
  .about-card p { font-size: calc(.86 * var(--au)); line-height: 1.4; margin-bottom: calc(.8 * var(--au)); }
  .about-go { width: calc(2.3 * var(--au)); height: calc(2.3 * var(--au)); font-size: calc(1.05 * var(--au)); }
  .about-art { min-height: 0; }
}
@media (max-width: 920px) {
  .about-cards { grid-template-columns: 1fr; }
  .about-tile { width: 15%; }
}


/* Why */
.features { display: grid; gap: 4px; }
.feature {
  display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line-dark);
}
.feature:last-child { border-bottom: 0; }
.feature h3 { color: #fff; margin-bottom: 6px; }
.feature-icon {
  flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(154, 210, 226, .1); border: 1px solid var(--line-dark); color: var(--teal);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-icon.sm { width: 44px; height: 44px; }

/* Emblem (decorative) */
/* Why SevaCoin: the design as the stage (1672 x 941), the 3D floor under the podium, the ring, and text over it */
@property --ring-shift { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.section.section-why { position: relative; overflow: hidden; isolation: isolate; color: var(--on-dark); padding: 0; background: #061336; }
.why-frame { position: relative; width: 100%; margin: 0 auto; --fu: 1vw; }
.why-tilt { position: relative; transform: perspective(1400px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .4s ease-out; }
.why-stage { position: relative; width: 100%; overflow: hidden; }
.why-scene, .why-floor, .why-screen, .why-side, .why-stage > .scene-3d { display: none; }
.why-center { display: block; width: 100%; height: auto; }
/* phones: the phone-and-coin artwork and the 3D stage are desktop only; the cards carry the section */
@media (max-width: 920px) { .why-stage { display: none; } }
/* the floor: a plane in perspective with a faint grid and glowing rings spreading out from under the podium */
.why-ground {
  position: absolute; left: -30%; right: -30%; top: 63%; height: 90%; pointer-events: none;
  transform-origin: 50% 0; transform: perspective(70vw) rotateX(72deg);
  /* lines only, no tint: a tint would show the mask edges around the phone, panels and cards */
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 70%, transparent);
}
.why-grid {
  position: absolute; inset: 0; opacity: .35;
  background:
    linear-gradient(90deg, rgba(120, 190, 255, .25) 1px, transparent 1px) 0 0 / 5% 100%,
    linear-gradient(0deg, rgba(120, 190, 255, .25) 1px, transparent 1px) 0 0 / 100% 8%;
}
.why-rings {
  position: absolute; inset: 0; --ring-shift: 0%;
  background: repeating-radial-gradient(ellipse 50% 50% at 50% 30%, transparent 0 calc(13% + var(--ring-shift)), rgba(120, 200, 255, .55) calc(13.3% + var(--ring-shift)), rgba(120, 200, 255, .55) calc(13.8% + var(--ring-shift)), transparent calc(14.2% + var(--ring-shift)) calc(24% + var(--ring-shift)));
  animation: why-ring-spread 6s linear infinite;
}
.why-rings-2 { opacity: .5; animation-delay: -3s; }
@keyframes why-ring-spread { from { --ring-shift: 0%; opacity: .9; } to { --ring-shift: 11%; opacity: .2; } }
/* the cards: on phones plain glass cards; on desktop the text sits on the panels in the picture */
.why-cards { display: grid; gap: 14px; padding: 20px 16px 56px; }
.why-card {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 20px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(16, 36, 76, .9), rgba(8, 20, 48, .94)); border: 1px solid rgba(120, 200, 255, .42);
}
.why-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #7fd8ff; border: 1px solid rgba(120, 200, 255, .6); }
.why-icon svg { width: 26px; height: 26px; }
.why-text h3 { font: 700 1.35rem/1.1 var(--font-body); color: #fff; margin: 0 0 .45em; letter-spacing: -.01em; }
.why-text h3::after { content: ""; display: block; width: 2.2em; height: 2px; margin-top: .45em; background: #5fe0ff; box-shadow: 0 0 8px rgba(95, 224, 255, .8); }
.why-text p { font-size: .95rem; line-height: 1.45; margin: 0; color: #d6e4f5; }

@media (min-width: 921px) {
  .section.section-why { display: grid; place-items: center; }
  .why-frame { width: min(100%, calc(100vh * 1.7768)); width: min(100%, calc(100svh * 1.7768)); --fu: min(1vw, 1.7768vh); --fu: min(1vw, 1.7768svh); aspect-ratio: 1672 / 941; }
  /* the sides: the same plain blue as the design edges (sampled top to bottom) */
  .why-side { display: block; position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(180deg, #010d25 0%, #000e25 20%, #010c22 40%, #000b1f 60%, #000a1c 80%, #01091e 100%); }
  .why-side-l { left: 0; } .why-side-r { right: 0; }
  /* the design has a black column at its very right edge: cover it with the same blue */
  .why-stage::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: .35%; background: linear-gradient(180deg, #010d25 0%, #000e25 20%, #010c22 40%, #000b1f 60%, #000a1c 80%, #01091e 100%); }
  .why-tilt, .why-stage { position: absolute; inset: 0; }
  .why-stage { overflow: visible; isolation: isolate; }
  /* layer order: design, edge cover, floor, rings, the cutout, the phone text */
  .why-scene { z-index: 0; } .why-stage::after { z-index: 1; } .why-floor { z-index: 2; } .why-stage > .scene-3d { z-index: 3; } .why-screen { z-index: 5; }
  .why-center { display: none; }
  .why-scene { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
  .why-floor, .why-screen, .why-stage > .scene-3d { display: block; }
  /* the rings and the floor are masked out wherever they pass behind the phone, coin, panels, podium and cards
     (vector masks drawn in the design's own coordinates, so they line up at any size) */
  .why-stage > .scene-3d { mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201672%20941%22%20preserveAspectRatio%3D%22none%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%221672%22%20height%3D%22941%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%2285%22%20y%3D%22195%22%20width%3D%22385%22%20height%3D%22223%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22475%22%20width%3D%22385%22%20height%3D%22225%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%221205%22%20y%3D%22195%22%20width%3D%22385%22%20height%3D%22223%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%221205%22%20y%3D%22475%22%20width%3D%22385%22%20height%3D%22225%22%20rx%3D%2226%22%2F%3E%3Cpolygon%20points%3D%22580%2C184%20766%2C198%20834%2C672%20646%2C690%22%20stroke%3D%22%23000%22%20stroke-width%3D%2288%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cellipse%20cx%3D%22972%22%20cy%3D%22451%22%20rx%3D%22184%22%20ry%3D%22194%22%2F%3E%3Crect%20x%3D%22874%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22775%22%2F%3E%3Crect%20x%3D%22984%22%20y%3D%2284%22%20width%3D%22120%22%20height%3D%22690%22%2F%3E%3Cellipse%20cx%3D%22838%22%20cy%3D%22770%22%20rx%3D%22426%22%20ry%3D%2250%22%2F%3E%3Crect%20x%3D%22412%22%20y%3D%22770%22%20width%3D%22852%22%20height%3D%2278%22%2F%3E%3Cellipse%20cx%3D%22838%22%20cy%3D%22848%22%20rx%3D%22426%22%20ry%3D%2252%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Crect%20width%3D%221672%22%20height%3D%22941%22%20fill%3D%22%23fff%22%20mask%3D%22url(%23m)%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201672%20941%22%20preserveAspectRatio%3D%22none%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%221672%22%20height%3D%22941%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%2285%22%20y%3D%22195%22%20width%3D%22385%22%20height%3D%22223%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22475%22%20width%3D%22385%22%20height%3D%22225%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%221205%22%20y%3D%22195%22%20width%3D%22385%22%20height%3D%22223%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%221205%22%20y%3D%22475%22%20width%3D%22385%22%20height%3D%22225%22%20rx%3D%2226%22%2F%3E%3Cpolygon%20points%3D%22580%2C184%20766%2C198%20834%2C672%20646%2C690%22%20stroke%3D%22%23000%22%20stroke-width%3D%2288%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cellipse%20cx%3D%22972%22%20cy%3D%22451%22%20rx%3D%22184%22%20ry%3D%22194%22%2F%3E%3Crect%20x%3D%22874%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22775%22%2F%3E%3Crect%20x%3D%22984%22%20y%3D%2284%22%20width%3D%22120%22%20height%3D%22690%22%2F%3E%3Cellipse%20cx%3D%22838%22%20cy%3D%22770%22%20rx%3D%22426%22%20ry%3D%2250%22%2F%3E%3Crect%20x%3D%22412%22%20y%3D%22770%22%20width%3D%22852%22%20height%3D%2278%22%2F%3E%3Cellipse%20cx%3D%22838%22%20cy%3D%22848%22%20rx%3D%22426%22%20ry%3D%2252%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Crect%20width%3D%221672%22%20height%3D%22941%22%20fill%3D%22%23fff%22%20mask%3D%22url(%23m)%22%2F%3E%3C%2Fsvg%3E"); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
  .why-floor { position: absolute; top: 0; bottom: 0; left: -130%; width: 360%; pointer-events: none; mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-2173.6%200%206019.2%20941%22%20preserveAspectRatio%3D%22none%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20x%3D%22-9999%22%20y%3D%22-9999%22%20width%3D%2299999%22%20height%3D%2299999%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%2285%22%20y%3D%22195%22%20width%3D%22385%22%20height%3D%22223%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22475%22%20width%3D%22385%22%20height%3D%22225%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%221205%22%20y%3D%22195%22%20width%3D%22385%22%20height%3D%22223%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%221205%22%20y%3D%22475%22%20width%3D%22385%22%20height%3D%22225%22%20rx%3D%2226%22%2F%3E%3Cpolygon%20points%3D%22580%2C184%20766%2C198%20834%2C672%20646%2C690%22%20stroke%3D%22%23000%22%20stroke-width%3D%2288%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cellipse%20cx%3D%22972%22%20cy%3D%22451%22%20rx%3D%22184%22%20ry%3D%22194%22%2F%3E%3Crect%20x%3D%22874%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22775%22%2F%3E%3Crect%20x%3D%22984%22%20y%3D%2284%22%20width%3D%22120%22%20height%3D%22690%22%2F%3E%3Cellipse%20cx%3D%22838%22%20cy%3D%22770%22%20rx%3D%22426%22%20ry%3D%2250%22%2F%3E%3Crect%20x%3D%22412%22%20y%3D%22770%22%20width%3D%22852%22%20height%3D%2278%22%2F%3E%3Cellipse%20cx%3D%22838%22%20cy%3D%22848%22%20rx%3D%22426%22%20ry%3D%2252%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Crect%20x%3D%22-9999%22%20y%3D%22-9999%22%20width%3D%2299999%22%20height%3D%2299999%22%20fill%3D%22%23fff%22%20mask%3D%22url(%23m)%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-2173.6%200%206019.2%20941%22%20preserveAspectRatio%3D%22none%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20x%3D%22-9999%22%20y%3D%22-9999%22%20width%3D%2299999%22%20height%3D%2299999%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%2285%22%20y%3D%22195%22%20width%3D%22385%22%20height%3D%22223%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22475%22%20width%3D%22385%22%20height%3D%22225%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%221205%22%20y%3D%22195%22%20width%3D%22385%22%20height%3D%22223%22%20rx%3D%2226%22%2F%3E%3Crect%20x%3D%221205%22%20y%3D%22475%22%20width%3D%22385%22%20height%3D%22225%22%20rx%3D%2226%22%2F%3E%3Cpolygon%20points%3D%22580%2C184%20766%2C198%20834%2C672%20646%2C690%22%20stroke%3D%22%23000%22%20stroke-width%3D%2288%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cellipse%20cx%3D%22972%22%20cy%3D%22451%22%20rx%3D%22184%22%20ry%3D%22194%22%2F%3E%3Crect%20x%3D%22874%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22775%22%2F%3E%3Crect%20x%3D%22984%22%20y%3D%2284%22%20width%3D%22120%22%20height%3D%22690%22%2F%3E%3Cellipse%20cx%3D%22838%22%20cy%3D%22770%22%20rx%3D%22426%22%20ry%3D%2250%22%2F%3E%3Crect%20x%3D%22412%22%20y%3D%22770%22%20width%3D%22852%22%20height%3D%2278%22%2F%3E%3Cellipse%20cx%3D%22838%22%20cy%3D%22848%22%20rx%3D%22426%22%20ry%3D%2252%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Crect%20x%3D%22-9999%22%20y%3D%22-9999%22%20width%3D%2299999%22%20height%3D%2299999%22%20fill%3D%22%23fff%22%20mask%3D%22url(%23m)%22%2F%3E%3C%2Fsvg%3E"); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
  .why-floor .why-ground { left: 13.9%; right: 13.9%; }
  .why-stage > .scene-3d { pointer-events: none; }
  .why-cards { display: contents; }
  .why-card { position: absolute; display: block; padding: 0; background: none; border: 0; border-radius: 0; }
  .why-icon { display: none; }
  .why-card-1 { left: 14.3%; top: 25.2%; width: 13.3%; }
  .why-card-2 { left: 14.3%; top: 55%; width: 13.3%; }
  .why-card-3 { left: 81%; top: 25.2%; width: 13.3%; }
  .why-card-4 { left: 81%; top: 55%; width: 13.3%; }
  .why-text h3 { font-size: calc(1.25 * var(--fu)); margin: 0 0 calc(2.6 * var(--fu)); white-space: nowrap; }
  .why-text h3::after { display: none; }   /* the picture already has the cyan dash under the title */
  .why-text p { font-size: calc(.88 * var(--fu)); line-height: 1.4; }
  /* the phone screen: a box over the screen in the picture, sheared to follow the phone lean; every line is placed
     at its own height (percent of the box height) so it lands on the artwork */
  .why-screen {
    position: absolute; left: 32.8%; top: 16%; width: 15%; height: 59.5%; color: #fff; font-family: var(--font-body);
    transform: matrix(1, 0.065, 0.12, 1, 0, 0); transform-origin: 0 0; font-size: calc(.78 * var(--fu)); line-height: 1.2;
  }
  .why-screen > * { position: absolute; left: 8%; right: 8%; }
  .ws-head { top: 8.5%; text-align: center; font-weight: 700; font-size: 1.25em; }
  .ws-balance { top: 16.5%; display: grid; gap: .25em; }
  .ws-balance small { color: #8fa6c8; font-size: .85em; }
  .ws-balance strong { font-size: 2.05em; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
  .ws-balance strong em { font-style: normal; font-size: .42em; font-weight: 600; }
  .ws-balance b { color: #36d399; font-weight: 600; font-size: .85em; }
  .ws-actions { top: 58.6%; left: 10%; right: 10%; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: .78em; color: #dbe7ff; }
  .ws-recent { display: none; }
  .ws-row { display: flex; justify-content: space-between; align-items: center; left: 29%; right: 13%; height: 7.4%; white-space: nowrap; }
  .ws-row:nth-of-type(5) { top: 61.9%; } .ws-row:nth-of-type(6) { top: 74%; } .ws-row:nth-of-type(7) { top: 85.7%; }
  .ws-row small { display: block; color: #8fa6c8; font-weight: 400; font-size: .78em; }
  .ws-name { font-weight: 600; font-size: .72em; }
  .ws-amt { font-weight: 700; font-size: .66em; text-align: right; }
  .ws-amt.up { color: #36d399; } .ws-amt.down { color: #ff5f7a; }
}
@media (prefers-reduced-motion: reduce) {
  .why-rings { animation: none; }
  .why-tilt { transform: none; }
}

/* Steps ("Getting started"): three glass cards over the globe. The globe is one background layer, so it can be
   swapped by changing the url below (and --globe-x/--globe-y to place the sphere). */
.section.section-steps { position: relative; overflow: hidden; isolation: isolate; color: var(--on-dark); padding: 88px 0 56px; background-color: #030918;
  background-image: linear-gradient(180deg, #030918 0%, rgba(3, 9, 24, .55) 34%, rgba(3, 9, 24, .2) 60%, rgba(3, 9, 24, .85) 100%), url("../img/globe.webp?v=20261021c");
  background-repeat: no-repeat; background-size: 100% 100%, 260vw auto; background-position: 0 0, -124vw 330px; }
.steps-frame { position: relative; width: min(1180px, 100% - 32px); margin: 0 auto; }
/* heading */
.steps-head { max-width: 760px; margin: 0 auto; padding: 0; text-align: center; }
.steps-eyebrow { display: flex; align-items: center; justify-content: center; gap: 16px; color: #8fe0f0; letter-spacing: .22em; margin-bottom: 18px; }
.steps-eyebrow i { width: 56px; height: 2px; background: linear-gradient(90deg, rgba(143, 230, 255, 0), #8fe6ff); box-shadow: 0 0 10px rgba(143, 230, 255, .6); }
.steps-eyebrow i:last-child { background: linear-gradient(90deg, #8fe6ff, rgba(143, 230, 255, 0)); }
.steps-head h2 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1.08; margin: 0 0 12px; color: #fff; }
.steps-head h2 em { font-style: normal; color: #9fe8ff; }
.steps-intro { color: #c3d3e6; font-size: 1.05rem; line-height: 1.5; margin: 0; }
/* cards: identical structure, so the titles, text and buttons line up across all three */
.steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 44px; }
.step { position: relative; padding: 44px 26px 26px; border-radius: 22px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(16, 40, 80, .62), rgba(6, 18, 44, .78)); border: 1px solid rgba(130, 205, 255, .5);
  box-shadow: 0 0 0 1px rgba(130, 205, 255, .08) inset, 0 0 34px -10px rgba(80, 180, 255, .55), 0 30px 60px -30px rgba(0, 0, 0, .7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.step-num { position: absolute; top: 0; left: 50%; translate: -50% -50%; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font: 700 1rem/1 var(--font-body); color: #fff;
  background: radial-gradient(circle at 50% 35%, #1b3a6a, #0b1b3a 70%); border: 2px solid rgba(143, 230, 255, .7); box-shadow: 0 0 18px rgba(80, 180, 255, .55); }
.step-art { position: relative; height: 150px; margin: 0 0 14px; }
.step-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: step-hover 6s ease-in-out infinite; }
.step-2 .step-art img { animation-delay: -2s; } .step-3 .step-art img { animation-delay: -4s; }
@keyframes step-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 8px; color: #fff; }
.step p { color: #c3d3e6; line-height: 1.5; margin: 0 0 18px; flex: 1; font-size: .98rem; }
.step-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(143, 230, 255, .7); color: #9fe8ff; font-weight: 600; text-decoration: none; transition: background .2s ease, box-shadow .2s ease; }
.step-link:hover, .step-link:focus-visible { background: rgba(95, 200, 255, .18); box-shadow: 0 0 20px rgba(80, 180, 255, .45); outline: none; }
.steps-cta { display: flex; justify-content: center; padding: 40px 0 0; }
.steps-cta .btn-glow { background: linear-gradient(100deg, #bfe6ef 0%, #6fc0dc 45%, #6197c9 100%); color: #06132a; box-shadow: 0 0 30px rgba(95, 200, 255, .45); }

/* Desktop: the three cards in a row, the sphere centred under them */
@media (min-width: 921px) {
  .section.section-steps { display: flex; align-items: center; min-height: 100vh; min-height: 100svh;
    padding: calc(var(--header-h) + 8px) 0 clamp(32px, 5vh, 56px); background-size: 100% 100%, cover; background-position: 0 0, 100% 100%; }
  .steps-head { max-width: 1000px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 32px); margin-top: clamp(36px, 6vh, 64px); }
  .step { padding: clamp(40px, 3.2vw, 48px) clamp(20px, 1.8vw, 28px) clamp(20px, 1.8vw, 28px); }
  .step-art { height: clamp(110px, 18vh, 160px); }
  .step h3 { font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
  .step p { font-size: clamp(.92rem, 1vw, 1rem); }
  .steps-cta { padding-top: clamp(24px, 4vh, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .step-art img { animation: none; }
}

.link-arrow {
  font-weight: 700; color: var(--teal-deep); text-decoration: none; display: inline-flex; gap: 6px;
}
.link-arrow span { transition: transform .2s ease; }
.link-arrow:hover span { transform: translateX(4px); }

/* Explore: the design as the stage; rows turn dark navy with gold accents on hover */
.section-explore { position: relative; overflow: hidden; isolation: isolate; color: #0f1c2b; background: #dfeefb; padding: 0; }
.explore-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: -1; }
.explore-grid { position: relative; display: grid; gap: 36px; padding: 72px 0 64px; }
.explore-eyebrow { display: flex; align-items: center; gap: 16px; color: #1f5f8f; letter-spacing: .22em; margin-bottom: 22px; }
.explore-eyebrow i { width: 80px; height: 2px; background: linear-gradient(90deg, #9ad2e2, rgba(154, 210, 226, 0)); }
.explore-intro h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.02; margin: 0 0 22px; letter-spacing: -.02em; color: #0f1c2b; }
.explore-intro h2 em { font-style: normal; color: #304e73; }
.explore-intro h2 b { color: #9ad2e2; font-weight: inherit; }
.explore-intro > p { color: #41536a; font-size: 1.12rem; line-height: 1.6; max-width: 480px; margin: 0 0 30px; }
.explore-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.explore-row {
  display: grid; grid-template-columns: 40px 88px 1fr 56px; align-items: center; gap: 22px; padding: 22px 30px 22px 30px; border-radius: 22px; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 18px 40px -24px rgba(20, 60, 120, .45);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.explore-row:focus-visible { outline: 2px solid #9ad2e2; outline-offset: 4px; }
.explore-num { display: grid; gap: 6px; font: 600 1.15rem/1 var(--font-body); color: #1f5f8f; }
.explore-num::after { content: ""; width: 26px; height: 2px; background: #9ad2e2; }
.explore-ico { width: 88px; height: 88px; border-radius: 20px; display: grid; place-items: center; color: #1f6f9f; background: #dcecf8; transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
.explore-ico svg { width: 40px; height: 40px; }
.explore-ico-bell { background: #e3f1f6; color: #304e73; }
.explore-title { display: grid; gap: 4px; min-width: 0; }
.explore-title strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; letter-spacing: -.015em; color: #0f1c2b; transition: color .35s ease; }
.explore-title small { font-size: 1.02rem; color: #41536a; transition: color .35s ease; }
.explore-tags { display: flex; flex-wrap: wrap; gap: 8px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .3s ease, margin .4s ease; }
.explore-tags i { font-style: normal; font-size: .82rem; font-weight: 600; color: #cfe6ff; border: 1px solid rgba(143, 200, 255, .5); border-radius: 999px; padding: 6px 12px; }
.explore-go { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #1f6f9f; border: 1px solid #b9d3ea; background: #fff; transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease; }
.explore-go svg { width: 22px; height: 22px; }
/* the active row: dark navy panel, gold accents (as the first row in the design) */
.explore-item.is-open .explore-row { background: linear-gradient(90deg, #07142c 0%, #0b2446 60%, #0d2a4f 100%); border-color: rgba(154, 210, 226, .55); box-shadow: 0 24px 60px -24px rgba(5, 20, 50, .9), 0 0 40px -10px rgba(154, 210, 226, .35), 0 0 0 1px rgba(143, 200, 255, .15) inset; transform: translateY(-2px); }
.explore-item.is-open .explore-num { color: #9ad2e2; }
.explore-item.is-open .explore-ico { background: rgba(20, 50, 95, .9); color: #9ad2e2; box-shadow: 0 0 0 1px rgba(143, 200, 255, .35), 0 0 24px rgba(80, 160, 255, .35); }
.explore-item.is-open .explore-title strong { color: #fff; }
.explore-item.is-open .explore-title small { color: #cfe0f2; }
.explore-item.is-open .explore-tags { max-height: 60px; opacity: 1; margin-top: 6px; }
.explore-item.is-open .explore-title small { display: none; }   /* the tags take the subtitle line, so the row keeps its height */
.explore-item.is-open .explore-go { background: transparent; border-color: #9ad2e2; color: #9ad2e2; transform: translateX(4px); }
@media (min-width: 921px) {
  .section-explore { display: grid; place-items: center; }
  .explore-grid { display: block; width: 100%; max-width: none; margin: 0; padding: 0; aspect-ratio: 1672 / 841; --xu: 1vw; }
  .explore-scene { object-fit: fill; }
  .explore-intro { position: absolute; left: 8.7%; top: 17%; width: 33%; }
  .explore-eyebrow { font-size: calc(.9 * var(--xu)); margin-bottom: calc(1.4 * var(--xu)); }
  .explore-eyebrow i { width: calc(5 * var(--xu)); }
  .explore-intro h2 { font-size: calc(4.4 * var(--xu)); margin-bottom: calc(1.4 * var(--xu)); }
  .explore-intro > p { font-size: calc(1.2 * var(--xu)); max-width: none; margin-bottom: calc(1.8 * var(--xu)); }
  .explore-list { display: contents; }
  .explore-item { position: absolute; left: 42.9%; width: 48.5%; height: 15.6%; }
  .explore-item:nth-child(1) { top: 17%; } .explore-item:nth-child(2) { top: 34.9%; } .explore-item:nth-child(3) { top: 52.7%; } .explore-item:nth-child(4) { top: 70.5%; }
  .explore-row { height: 100%; grid-template-columns: calc(2.6 * var(--xu)) calc(5.4 * var(--xu)) 1fr calc(3.5 * var(--xu)); gap: calc(1.4 * var(--xu)); padding: 0 calc(2.1 * var(--xu)) 0 calc(1.9 * var(--xu)); border-radius: calc(1.6 * var(--xu)); background: #fbfdff; }
  .explore-num { font-size: calc(1.15 * var(--xu)); gap: calc(.35 * var(--xu)); } .explore-num::after { width: calc(1.6 * var(--xu)); }
  .explore-ico { width: calc(5.4 * var(--xu)); height: calc(5.4 * var(--xu)); border-radius: calc(1.2 * var(--xu)); } .explore-ico svg { width: calc(2.5 * var(--xu)); height: calc(2.5 * var(--xu)); }
  .explore-title strong { font-size: calc(2 * var(--xu)); } .explore-title small { font-size: calc(1.02 * var(--xu)); }
  .explore-tags i { font-size: calc(.78 * var(--xu)); padding: calc(.3 * var(--xu)) calc(.75 * var(--xu)); }
  .explore-go { width: calc(3.5 * var(--xu)); height: calc(3.5 * var(--xu)); } .explore-go svg { width: calc(1.3 * var(--xu)); height: calc(1.3 * var(--xu)); }
}
@media (max-width: 920px) {
  .section-explore { background: #eaf3fb; }
  .explore-scene { height: 300px; object-fit: cover; object-position: 80% 0; mask-image: linear-gradient(180deg, #000 55%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); }
  .explore-grid { padding-top: 180px; }
  .explore-row { grid-template-columns: 34px 56px 1fr 44px; gap: 14px; padding: 18px; border-radius: 18px; }
  .explore-ico { width: 56px; height: 56px; border-radius: 14px; } .explore-ico svg { width: 28px; height: 28px; }
  .explore-go { width: 44px; height: 44px; }
  .explore-title strong { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .explore-row, .explore-ico, .explore-go, .explore-tags { transition: none; }
}


/* Footer */
.site-footer { background: #040b15; color: var(--on-dark-muted); padding: 80px 0 32px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
.footer-brand p { margin-top: 18px; max-width: 320px; }
.site-footer h4 { color: #fff; font-size: .95rem; margin: 0 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer ul a { display: inline-block; padding: 10px 0; text-decoration: none; transition: color .2s; }
.site-footer ul a:hover { color: var(--teal); }
.footer-bottom {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem;
}

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { gap: 20px; }
  .resources { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  .hero { flex-direction: column; }
  .hero-shade { width: 100%; background: linear-gradient(0deg, rgba(4, 10, 28, .7) 0%, transparent 30%); }
  .menu-toggle { display: flex; }
  .nav-actions .btn, .nav-actions .gtranslate_wrapper { display: none; }
  .nav { padding: 8px 0 10px; }
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px 20px 12px; border-radius: 22px;
    background: rgba(6, 16, 38, .96); border: 1px solid rgba(160, 210, 255, .14);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .25s ease;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-size: 1.05rem; }
  .nav-links > :last-child { border-bottom: 0; }

  .hero { min-height: max(760px, min(100svh, 900px)); }
  .hero-inner { padding: 128px 0 40px; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(3, 10, 30, .85) 0%, rgba(3, 10, 30, .4) 40%, transparent 58%),
      linear-gradient(0deg, rgba(3, 9, 24, .92) 0%, transparent 30%);
  }

  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  .section { padding: 88px 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero-title { margin-bottom: 28px; }
  .hero-note { font-size: 1rem; }
  .hero-stats { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero-stats li { padding: 10px 12px; min-width: 0; gap: 6px; }
  .hero-stats strong { font-size: 1.15rem; }
  .hero-stats span { font-size: .72rem; }
  .hero-stats svg { width: 18px; height: 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal, .anim { opacity: 1; transform: none; }
}

/* Translation widget: compact, dark */
.gtranslate_wrapper .gt_switcher { width: 130px !important; font-family: var(--font-body) !important; }
.gtranslate_wrapper .gt_selected { background: rgba(10, 30, 70, .5) !important; border-radius: 999px !important; overflow: hidden; }
.gtranslate_wrapper .gt_selected a {
  border: 1px solid rgba(160, 210, 255, .2) !important; border-radius: 999px !important;
  color: #c9d8ea !important; font: 600 .8rem var(--font-body) !important; width: auto !important; padding: 7px 12px !important;
}
.gtranslate_wrapper .gt_selected a:hover { background: rgba(160, 210, 255, .08) !important; }
.gtranslate_wrapper .gt_option {
  background: #0a1a3a !important; border: 1px solid rgba(160, 210, 255, .2) !important;
  border-radius: 14px !important; margin-top: 6px; position: absolute !important;
}
.gtranslate_wrapper .gt_option a { color: #c9d8ea !important; }
.gtranslate_wrapper .gt_option a:hover { background: rgba(154, 210, 226, .15) !important; }
.btn { white-space: nowrap; }
@media (max-width: 1180px) { .nav-actions .gtranslate_wrapper { display: none; } }

/* ---------- Hero: matched to the reference image (desktop) ---------- */
@media (min-width: 921px) {
  /* --hu is the hero's size unit: 1vw at the full 16:9 height, scaled down with the viewport height so the whole
     composition (globe, text, coins) always fits in one screen. 941/1672 = 0.5628, so 1vw = 1.7768svh at 16:9. */
  :root { --hu: min(1vw, 1.7768vh); --hu: min(1vw, 1.7768svh); }
  .hero {
    display: block; min-height: 0; height: min(100vh, 56.28vw); height: min(100svh, 56.28vw);
    background: #040b1f;
  }
  .hero-shade { display: none; }
  .hero-inner { position: absolute; left: 7.2%; top: 21.6%; width: 42%; padding: 0; display: block; }
  .eyebrow { font-size: clamp(11px, calc(.84 * var(--hu)), 16px); letter-spacing: .17em; margin-bottom: calc(1.7 * var(--hu)); color: #8fe0f0; }
  .eyebrow .dot { width: calc(.55 * var(--hu)); height: calc(.55 * var(--hu)); box-shadow: 0 0 0 calc(.25 * var(--hu)) rgba(154, 210, 226, .2); }
  .hero-title { font-size: calc(6 * var(--hu)); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 calc(1 * var(--hu)); }
  .hero-note { font-size: calc(1.38 * var(--hu)); line-height: 1.3; max-width: calc(33 * var(--hu)); margin: 0 0 calc(1.55 * var(--hu)); color: #d3dfec; }
  .hero-ctas { gap: calc(1.4 * var(--hu)); }
  .hero-ctas .btn { height: calc(3.85 * var(--hu)); padding: 0 calc(1.9 * var(--hu)); font-size: calc(1.3 * var(--hu)); justify-content: center; }
  .hero-ctas .btn-glow { width: calc(12.1 * var(--hu)); background: linear-gradient(100deg, #bfe6ef 0%, #6fc0dc 45%, #6197c9 100%); }
  .hero-ctas .btn-ghost { width: calc(13.8 * var(--hu)); border-color: rgba(170, 195, 235, .45); background: rgba(8, 18, 40, .35); }
  .hero-stats { margin-top: calc(2.3 * var(--hu)); gap: calc(1.4 * var(--hu)); flex-wrap: nowrap; }
  .hero-stats li {
    min-width: 0; width: calc(11.5 * var(--hu)); height: calc(6.3 * var(--hu)); padding: 0 calc(1.15 * var(--hu)); border-radius: calc(.9 * var(--hu)); gap: calc(.5 * var(--hu)); white-space: nowrap;
    border-color: rgba(120, 170, 240, .5); background: rgba(10, 25, 55, .55);
  }
  .hero-stats strong { font-size: calc(1.8 * var(--hu)); margin-bottom: calc(.2 * var(--hu)); }
  .hero-stats span { font-size: calc(.98 * var(--hu)); color: #c9d8ea; }
  .hero-stats svg { width: calc(1.9 * var(--hu)); height: calc(1.9 * var(--hu)); color: #5fa8ff; opacity: 1; }
  .site-header { padding-top: clamp(8px, .8vw, 14px); }
  .nav { width: min(1300px, 100% - 48px); height: clamp(56px, 4.4vw, 66px); padding: 0; }
  .brand { font-size: clamp(14px, 1.3vw, 17px); letter-spacing: .1em; }
  .brand img { width: clamp(26px, 2vw, 30px); height: auto; }
  .nav-links { gap: clamp(16px, 2vw, 28px); }
  .nav-links a { font-size: clamp(13px, 1.05vw, 15px); color: #e6eef8; }
  .nav-actions { gap: clamp(8px, .9vw, 12px); }
  .nav-actions .btn-sm { height: clamp(36px, 2.6vw, 42px); padding: 0 clamp(14px, 1.3vw, 20px); font-size: clamp(12px, 1vw, 14px); }
}

/* ---------- Hero: fixed globe, animated network and SevaCoins ---------- */
/* --ox/--oy: the globe's centre. The render is 16:9 and is fitted by width (cover), so the centre sits at 72.3% of the
   width and at 98.2% of the 16:9 height = 50% + 27.13vw of the box, whatever the box height. */
.globe-stage { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; --ox: 72.3%; --oy: calc(50% + 27.13vw); }
.hero-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1px 1px at 31% 64%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 14%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1px 1px at 58% 38%, rgba(255,255,255,.35), transparent 100%),
    radial-gradient(1.5px 1.5px at 86% 12%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1px 1px at 93% 46%, rgba(255,255,255,.35), transparent 100%),
    radial-gradient(1px 1px at 22% 86%, rgba(255,255,255,.3), transparent 100%),
    radial-gradient(55% 60% at 72% 85%, rgba(30, 90, 200, .26), transparent 70%),
    linear-gradient(160deg, #06132f 0%, #040b1f 55%, #03091a 100%);
}
/* Globe: static, ~12% smaller than the render. Pivoted on the right edge so the sphere always reaches the
   right side of the viewport (no empty strip on the right); the network and coins move with it. */
.globe-fixed {
  position: absolute; inset: 0; transform-origin: 100% var(--oy);
  /* --px/--py: pointer parallax set by scene.js; the slow drift below keeps the whole globe group (picture,
     strings, coins) gently moving all the time, like a slow camera move */
  transform: translate(var(--px, 0px), var(--py, 0px)) scale(.88);
  animation: globe-drift 30s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes globe-drift {
  0%, 100% { translate: 0 0; }
  25% { translate: .55vw -.3vw; }
  50% { translate: .15vw .45vw; }
  75% { translate: -.5vw .1vw; }
}
.globe {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 44.5vw, rgba(0, 0, 0, .5) 46.2vw, transparent 49.5vw);
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 44.5vw, rgba(0, 0, 0, .5) 46.2vw, transparent 49.5vw);
}
/* Network: strings draw out from the coin, one at a time; each node lights as its string arrives */
.network { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.network .link, .network .link-glow {
  fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: link-draw .7s cubic-bezier(.4, 0, .2, 1) var(--d) forwards;
}
.network .link { stroke: #7fd8ff; stroke-width: 2.4; opacity: .9; }
.network .link-glow {
  stroke: #4fb3ff; stroke-width: 9; opacity: .35; filter: url(#net-blur);
  /* once drawn, the glow breathes so the network never looks static */
  animation: link-draw .7s cubic-bezier(.4, 0, .2, 1) var(--d) forwards, link-breathe 4.5s ease-in-out calc(var(--d) + 1s) infinite;
}
@keyframes link-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .58; } }
.network .node {
  fill: #c9f0ff; opacity: 0; transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 6px #7fd4ff) drop-shadow(0 0 14px rgba(80, 170, 255, .7));
  animation: node-in .45s cubic-bezier(.2, .8, .2, 1) var(--d) forwards, node-pulse 3.2s ease-in-out calc(var(--d) + .7s) infinite;
}
@keyframes link-draw { to { stroke-dashoffset: 0; } }
@keyframes node-in { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes node-pulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.45); opacity: 1; } }
/* Coins (CSS fallback, used when the 3D scene is not running). Same story as the 3D version:
   the main SevaCoin lands (0.4s–1.4s), then one string at a time grows out of it and a coin lands on its node; all done by 7s.
   The small coins are generated by main.js from the network's nodes (position, size --w and timing --d). */
.coin { position: absolute; translate: -50% -50%; aspect-ratio: 1; opacity: 0; perspective: 60vw; }
.coin img {
  display: block; width: 100%; height: 100%;
  /* the render has a black background: keep only the coin disc */
  mask-image: radial-gradient(ellipse 40.4% 42.1% at 51% 50.2%, #000 96.5%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 40.4% 42.1% at 51% 50.2%, #000 96.5%, transparent 100%);
}
/* No glow or shadow around the coins */
.coin::after {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%) 0 0 / 260% 100%;
  animation: coin-sheen 9s linear infinite;
}
.coin-main { width: calc(12.5% * var(--k, 1)); animation: coin-main 1s cubic-bezier(.3, .7, .2, 1) .4s forwards; }
.coin-main img { animation: coin-float 7s ease-in-out 1.4s infinite; --ry: -8deg; --rz: 0deg; }
.coin-s { width: calc(var(--w, 4.5%) * var(--k, 1)); animation: coin-in .5s cubic-bezier(.3, .7, .2, 1) var(--d) forwards; }
.coin-s img { animation: coin-float var(--f, 6s) ease-in-out calc(var(--d) + .5s) infinite; transform: rotateY(var(--ry)) rotateZ(var(--rz)); }
@keyframes coin-main { 0% { opacity: 0; transform: scale(.06) translateY(2vw); } 30% { opacity: 1; } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes coin-in { 0% { opacity: 0; transform: scale(.15) rotateY(50deg); } 100% { opacity: 1; transform: scale(1) rotateY(0); } }
@keyframes coin-float {
  0%, 100% { transform: translateY(0) rotateY(var(--ry)) rotateZ(var(--rz)); }
  50% { transform: translateY(-.55vw) rotateY(calc(var(--ry) + 9deg)) rotateZ(calc(var(--rz) + 2deg)); }
}
@keyframes coin-sheen { 0% { background-position: 130% 0; } 40%, 100% { background-position: -130% 0; } }
/* 3D scenes (Three.js, assets/js/scene.js): the canvas covers its host; once WebGL is rendering,
   the host gets .has-3d and the CSS artwork underneath (coins / emblem) steps aside */
.scene-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; }
.has-3d > .scene-3d { opacity: 1; transition: opacity .6s ease; }
.has-3d .globe-fixed .coin { display: none; }
/* until main.js has put the fallback coins on their nodes they stay hidden (otherwise they flash at the top-left on load) */
.globe-fixed:not(.coins-placed) .coin { visibility: hidden; }
@media (max-width: 920px) {
  .globe-stage { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 16 / 9; margin-top: -8px; }
  .coin-main { width: calc(18% * var(--k, 1)); }
  .coin-s { width: calc(var(--w, 4.5%) * 1.45 * var(--k, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .network .link, .network .link-glow { animation: none; stroke-dashoffset: 0; }
  .network .node { animation: none; opacity: 1; }
  .coin, .coin-s, .coin-main { animation: none; opacity: 1; transform: none; }
  .globe-fixed { animation: none; }
  .network .link-glow { animation: none; stroke-dashoffset: 0; }
  .coin img, .coin::after { animation: none; }
}

/* Explore intro: white and bold over the backdrop, with a soft shadow for legibility */
.section-explore .explore-eyebrow { color: #ffffff; font-weight: 700; text-shadow: 0 1px 10px rgba(5, 20, 50, .55); }
.section-explore .explore-eyebrow i { background: linear-gradient(90deg, #bfe6ef, rgba(191, 230, 239, 0)); }
.section-explore .explore-intro h2 { color: #ffffff; font-weight: 800; text-shadow: 0 2px 18px rgba(5, 20, 50, .6); }
.section-explore .explore-intro h2 em { color: #ffffff; text-shadow: 0 2px 18px rgba(5, 20, 50, .6); }
.section-explore .explore-intro h2 b { color: #bfe6ef; }
.section-explore .explore-intro > p { color: #ffffff; font-weight: 700; text-shadow: 0 1px 12px rgba(5, 20, 50, .6); }

/* Explore intro: navy and blue on the light sky, as in the reference */
.section-explore .explore-eyebrow { color: #1d3556; font-weight: 700; text-shadow: none; }
.section-explore .explore-eyebrow i { background: linear-gradient(90deg, #9ad2e2, rgba(154, 210, 226, 0)); }
.section-explore .explore-intro h2 { color: #0a1a33; font-weight: 700; text-shadow: none; }
.section-explore .explore-intro h2 em { color: #4a86bd; background: linear-gradient(90deg, #3a74a8, #6fb6d6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
.section-explore .explore-intro h2 b { color: #9ad2e2; -webkit-text-fill-color: #9ad2e2; }
.section-explore .explore-intro > p { color: #1e3150; font-weight: 500; text-shadow: none; }

/* Explore: plain light background, navy and blue text, as in the reference */
.section-explore { background: linear-gradient(180deg, #f4f9fd 0%, #e6f1fa 100%); }
.section-explore .explore-eyebrow { color: #1d3556; font-weight: 700; text-shadow: none; }
.section-explore .explore-eyebrow i { background: linear-gradient(90deg, #9ad2e2, rgba(154, 210, 226, 0)); }
.section-explore .explore-intro h2 { color: #0a1a33; font-weight: 700; text-shadow: none; }
.section-explore .explore-intro h2 em { color: #4a86bd; background: linear-gradient(90deg, #3a74a8, #6fb6d6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
.section-explore .explore-intro h2 b { color: #9ad2e2; -webkit-text-fill-color: #9ad2e2; }
.section-explore .explore-intro > p { color: #1e3150; font-weight: 500; text-shadow: none; }

/* ---------- One section per screen (desktop): every section is exactly one viewport tall and scrolling snaps
   from section to section. Picture-based sections keep their full width and are centred, so wider-than-16:9
   screens trim an equal sliver top and bottom. Short or narrow windows keep normal scrolling. ---------- */
@media (min-width: 921px) and (min-height: 620px) {
  /* snap positions must be the exact section tops: no header offset here (the header floats over the section top) */
  .hero { height: 100vh; height: 100svh; min-height: 0; }
  .section.section-about { height: 100vh; height: 100svh; }
  .section.section-why, .section.section-explore { height: 100vh; height: 100svh; overflow: hidden; }
  .section-explore .explore-grid { aspect-ratio: auto; height: 100%; }
}

/* =========================================================
   Header refinements: brand with a tagline, glowing underline on the link of the section in view (main.js),
   and the SevaWear link with its t-shirt mark.
   ========================================================= */
.nav::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(155, 230, 240, .7), rgba(155, 230, 240, 0) 60%); }
.brand { gap: 12px; }
.brand-mark { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 40%, rgba(154, 210, 226, .22), rgba(154, 210, 226, .04) 70%); box-shadow: inset 0 0 0 1px rgba(154, 210, 226, .25), 0 0 18px -4px rgba(154, 210, 226, .55); }
.brand-mark img { width: 26px; height: 26px; }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name small { display: none; font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); margin-top: 3px; }

.nav-links a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #bfe6ef, #6197c9); box-shadow: 0 0 10px rgba(143, 230, 255, .6);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-links a:hover::after, .nav-links a.active::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-links a.active { color: #fff; }
.nav-ico { width: 17px; height: 17px; flex: 0 0 auto; color: #9fe8ff; filter: drop-shadow(0 0 6px rgba(143, 230, 255, .45)); }
.nav-actions > * { flex: 0 0 auto; }

@media (min-width: 921px) {
  .brand-mark { width: clamp(32px, 2.6vw, 40px); height: clamp(32px, 2.6vw, 40px); }
  .brand-mark img { width: clamp(20px, 1.7vw, 26px); height: auto; }
  .nav-ico { width: clamp(14px, 1.15vw, 17px); height: clamp(14px, 1.15vw, 17px); }
}
@media (min-width: 1280px) { .brand-name small { display: block; } }
@media (max-width: 920px) {
  .nav-links a::after { display: none; }
  .nav-links a { display: flex; gap: 10px; }
  .nav-links a.active { color: var(--teal); }
}

/* =========================================================
   Header while scrolling: once the hero's header has gone off the top, main.js adds .is-stuck and a compact
   version of the same bar slides in and stays fixed over every section (dark glass, hairline underneath).
   ========================================================= */
.site-header.is-stuck { position: fixed; top: 0; padding-top: 0; z-index: 60;
  background: rgba(5, 12, 28, .86); border-bottom: 1px solid rgba(160, 210, 255, .14);
  box-shadow: 0 12px 40px -18px rgba(0, 0, 0, .8), 0 0 40px -24px rgba(95, 200, 255, .5);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  animation: header-in .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes header-in { from { transform: translateY(-100%); opacity: .4; } to { transform: none; opacity: 1; } }
.site-header.is-stuck .nav { height: auto; padding: 6px 0; border-bottom: 0; }
.site-header.is-stuck .nav::before { display: none; }
.site-header.is-stuck .brand-name small { display: none; }
@media (min-width: 921px) {
  .site-header.is-stuck .nav { height: clamp(52px, 3.6vw, 58px); }
  .site-header.is-stuck .brand-mark { width: clamp(30px, 2.2vw, 34px); height: clamp(30px, 2.2vw, 34px); }
  .site-header.is-stuck .nav-actions .btn-sm { height: clamp(34px, 2.4vw, 38px); }
}
html { scroll-padding-top: 72px; }   /* anchor targets clear the compact bar */
@media (prefers-reduced-motion: reduce) { .site-header.is-stuck { animation: none; } }

/* =========================================================
   Explore reader: a light reading panel that slides in from the right when a "Find out more" row or its arrow is
   clicked. Same palette as the Explore section (navy text, blue and gold accents).
   ========================================================= */
.explore-go { cursor: pointer; }
.rd { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; display: none; overflow: hidden; }
.rd[open] { display: flex; justify-content: flex-end; }
.rd::backdrop { background: rgba(6, 16, 36, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body.rd-open { overflow: hidden; }
.rd-panel { width: min(680px, 100%); height: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, #f6fafe 0%, #eaf3fb 100%); color: #1e3150;
  box-shadow: -30px 0 80px -30px rgba(5, 20, 50, .6); animation: rd-in .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes rd-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.rd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; border-bottom: 1px solid #d6e5f2; background: rgba(255, 255, 255, .6); }
.rd-crumb { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6a7f99; }
.rd-crumb i { width: 26px; height: 1px; background: linear-gradient(90deg, #9ad2e2, rgba(154, 210, 226, 0)); }
.rd-crumb b { color: #0a1a33; }
.rd-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid #b9d3ea; background: #fff; color: #1f6f9f; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.rd-close:hover { background: #0b2446; color: #9ad2e2; border-color: #0b2446; }
.rd-close svg { width: 18px; height: 18px; }
.rd-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 28px 28px 36px; outline: none; }
.rd-article { animation: rd-fade .3s ease; }
.rd-article[hidden] { display: none; }
@keyframes rd-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.rd-hero { display: flex; gap: 20px; align-items: flex-start; padding: 26px; border-radius: 22px; color: #fff; margin-bottom: 26px;
  background: linear-gradient(120deg, #07142c 0%, #0b2446 60%, #0d2a4f 100%); box-shadow: 0 24px 50px -28px rgba(5, 20, 50, .9), 0 0 0 1px rgba(154, 210, 226, .35) inset; }
.rd-ico { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #9ad2e2; background: rgba(20, 50, 95, .9); box-shadow: 0 0 0 1px rgba(143, 200, 255, .35), 0 0 24px rgba(80, 160, 255, .35); }
.rd-hero-gold .rd-ico { color: #bfe6ef; }
.rd-ico svg { width: 32px; height: 32px; }
.rd-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9ad2e2; margin-bottom: 6px; }
.rd-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.1; color: #fff; margin: 0 0 8px; }
.rd-lead { color: #c3d3e6; font-size: 1rem; line-height: 1.5; }

.rd-prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: #0a1a33; margin: 26px 0 8px; }
.rd-prose h3:first-child { margin-top: 0; }
.rd-prose p { font-size: 1.02rem; line-height: 1.7; color: #33465f; margin: 0 0 10px; }
.rd-prose em { font-style: normal; color: #4a86bd; font-weight: 700; }
.rd-cards, .rd-topics { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.rd-cards li, .rd-topics li { position: relative; padding: 16px 18px 16px 20px; border-radius: 16px; background: #fff; border: 1px solid #dbe8f4; box-shadow: 0 10px 24px -20px rgba(10, 30, 70, .5); display: grid; gap: 4px; align-content: start; }
.rd-cards li::before, .rd-topics li::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #6fb6d6, #3a74a8); }
.rd-cards b, .rd-topics b { color: #0a1a33; font-size: 1.02rem; }
.rd-cards span, .rd-topics span { color: #51657e; font-size: .95rem; line-height: 1.55; }
@media (min-width: 560px) { .rd-topics { grid-template-columns: 1fr 1fr; } }
.rd-note, .rd-warn { margin: 18px 0 12px; padding: 16px 18px; border-radius: 16px; font-size: .97rem; line-height: 1.6; }
.rd-note { background: #dcecf8; color: #1d3556; border: 1px solid #b9d3ea; }
.rd-warn { background: #e3f1f6; color: #304e73; border: 1px solid #b9dbe6; }
.rd-note b, .rd-warn b { display: block; margin-bottom: 2px; color: inherit; }

.rd-faq { display: grid; gap: 10px; }
.rd-faq details { border-radius: 16px; background: #fff; border: 1px solid #dbe8f4; box-shadow: 0 10px 24px -20px rgba(10, 30, 70, .5); transition: border-color .2s ease, box-shadow .2s ease; }
.rd-faq details[open] { border-color: rgba(154, 210, 226, .7); box-shadow: 0 16px 34px -22px rgba(10, 30, 70, .6), 0 0 0 1px rgba(154, 210, 226, .25); }
.rd-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; font-weight: 700; font-size: 1.02rem; color: #0a1a33; }
.rd-faq summary::-webkit-details-marker { display: none; }
.rd-faq summary::after { content: ""; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #b9d3ea;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6f9f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s ease; }
.rd-faq details[open] summary::after { transform: rotate(45deg); border-color: #9ad2e2; }
.rd-faq summary:focus-visible { outline: 2px solid #4a86bd; outline-offset: -2px; border-radius: 16px; }
.rd-faq details p { padding: 0 18px 18px; margin: 0; color: #33465f; line-height: 1.65; }

.rd-foot { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; padding: 14px 28px; border-top: 1px solid #d6e5f2; background: rgba(255, 255, 255, .7); }
.rd-step { display: inline-flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; background: none; cursor: pointer; color: #1f6f9f; font: 600 .82rem var(--font-body); text-align: left; justify-self: start; border-radius: 10px; }
.rd-step-next { justify-self: end; text-align: right; }
.rd-step span { display: grid; color: #6a7f99; }
.rd-step b { color: #0a1a33; font-size: .98rem; }
.rd-step svg { width: 20px; height: 20px; transition: transform .2s ease; }
.rd-step:hover svg { transform: translateX(-3px); } .rd-step-next:hover svg { transform: translateX(3px); }
@media (max-width: 560px) {
  .rd-top, .rd-body, .rd-foot { padding-left: 18px; padding-right: 18px; }
  .rd-hero { flex-direction: column; gap: 14px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .rd-panel, .rd-article { animation: none; } }

/* =========================================================
   Mission: the SEVA photo letters and tagline, then the video card beside "Do Only Good Everyday." and the
   community links. Light, like the reference.
   ========================================================= */
.section.section-mission { position: relative; overflow: hidden; isolation: isolate; padding: 72px 0 80px;
  background: linear-gradient(180deg, #f7fbfe 0%, #f7fbfe 48%, #eaf3fb 100%); color: #0a1a33; }
.mission-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mission-cross { position: absolute; top: 12%; width: 150px; height: 150px; opacity: .5;
  background: linear-gradient(#e2eef9, #e2eef9) center / 34% 100% no-repeat, linear-gradient(#e2eef9, #e2eef9) center / 100% 34% no-repeat; filter: blur(2px); }
.mission-cross-l { left: -40px; } .mission-cross-r { right: -20px; top: 14%; }
.mission-wrap { display: grid; gap: 48px; }

.mission-word { margin: 0; text-align: center; }
.mission-word-art > img { width: 100%; height: auto;
  /* the picture's own light background fades into the section */
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mission-tagline { margin-top: 18px; font-size: clamp(.72rem, 1.2vw, 1rem); font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: #1e3150; }

.mission-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 921px) { .mission-grid { grid-template-columns: 1fr 1fr; gap: clamp(32px, 3.5vw, 56px); } .mission-copy h2 { white-space: nowrap; } }

.mission-video { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; border-radius: 20px; overflow: hidden; background: #071a3a;
  box-shadow: 0 30px 60px -30px rgba(5, 20, 50, .7), 0 0 0 1px rgba(95, 200, 255, .25); transition: transform .3s ease, box-shadow .3s ease; }
.mission-video img { width: 100%; height: auto; transition: transform .6s ease; }
.mission-video:hover { transform: translateY(-3px); box-shadow: 0 36px 70px -30px rgba(5, 20, 50, .8), 0 0 0 1px rgba(95, 200, 255, .5), 0 0 40px -10px rgba(95, 200, 255, .5); }
.mission-video:hover img { transform: scale(1.03); }
.mission-video:focus-visible { outline: 3px solid #4a86bd; outline-offset: 4px; }
/* pulsing rings around the painted play button (centre of the picture) */
.mission-play { position: absolute; left: 50.1%; top: 49.8%; width: 10%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.mission-play::before, .mission-play::after, .mission-play i { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 90, 90, .8); animation: ms-pulse 2.4s ease-out infinite; }
.mission-play::after { animation-delay: .8s; } .mission-play i { animation-delay: 1.6s; }
@keyframes ms-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }

.section-mission .eyebrow.mission-eyebrow { color: #4a86bd; font-size: .9rem; letter-spacing: .28em; margin-bottom: 14px; }
.mission-copy h2 { font-family: var(--font-body); font-weight: 800; font-size: clamp(2.1rem, 3.15vw, 3.2rem); letter-spacing: -.02em; line-height: 1.08; color: #0a1a33; margin: 0 0 18px; }
.mission-copy h2 em { font-style: normal; background: linear-gradient(90deg, #3a74a8, #6fb6d6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mission-copy > p { color: #4a5d75; font-size: 1.1rem; line-height: 1.65; max-width: 36em; }
.mission-social { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.ms-link { display: inline-flex; align-items: center; gap: 12px; min-width: 160px; height: 58px; padding: 0 22px; border-radius: 14px; text-decoration: none;
  font-weight: 600; font-size: 1.05rem; color: #1e3150; background: #fff; border: 1px solid #dbe8f4; box-shadow: 0 12px 26px -20px rgba(10, 30, 70, .6);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ms-link svg { width: 30px; height: 30px; flex: 0 0 auto; }
.ms-link:hover, .ms-link:focus-visible { transform: translateY(-2px); outline: none; }
.ms-twitter:hover, .ms-twitter:focus-visible { border-color: #1d9bf0; box-shadow: 0 16px 30px -18px rgba(29, 155, 240, .7); }
.ms-reddit:hover, .ms-reddit:focus-visible { border-color: #ff4500; box-shadow: 0 16px 30px -18px rgba(255, 69, 0, .6); }
.ms-discord:hover, .ms-discord:focus-visible { border-color: #5865f2; box-shadow: 0 16px 30px -18px rgba(88, 101, 242, .7); }
@media (max-width: 560px) {
  .section.section-mission { padding: 56px 0 64px; }
  .mission-tagline { letter-spacing: .22em; }
  .mission-social { gap: 8px; flex-wrap: nowrap; }
  .mission-social li { flex: 1 1 0; min-width: 0; }
  .ms-link { min-width: 0; width: 100%; justify-content: center; gap: 7px; height: 50px; padding: 0 8px; font-size: .92rem; }
  .ms-link svg { width: 22px; height: 22px; }
}

/* Video modal */
.vd { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; display: none; }
.vd[open] { display: grid; place-items: center; }
.vd::backdrop { background: rgba(3, 8, 20, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vd-panel { position: relative; width: min(1100px, 100% - 32px); animation: enq-in .3s ease; }
.vd-player { display: block; width: 100%; max-height: 80vh; border-radius: 18px; background: #000; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(95, 200, 255, .3); }
.vd-close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(160, 210, 255, .35); background: rgba(8, 22, 46, .7); color: #fff; }
.vd-close:hover { background: rgba(95, 200, 255, .25); }
.vd-close svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .mission-play::before, .mission-play::after, .mission-play i { animation: none; opacity: 0; } .vd-panel { animation: none; } }



/* =========================================================
   Mission v2: SEVA written in SevaCoin-symbol tiles (SVG), and the video card drawn in code.
   ========================================================= */
.mission-word .sv-word { display: block; width: min(100%, 1040px); height: auto; margin: 0 auto; overflow: hidden;
  filter: drop-shadow(0 22px 30px rgba(10, 40, 90, .18)); }
.sv-tile { animation: sv-in .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
@keyframes sv-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.sv-shine { animation: sv-sweep 6s ease-in-out 1.6s infinite; }
@keyframes sv-sweep { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(1800px); } }
.js .mission-word.reveal:not(.visible) .sv-tile { animation-play-state: paused; }

/* video card */
.mission-video { aspect-ratio: 16 / 7.4; isolation: isolate;
  background: radial-gradient(60% 90% at 78% 40%, rgba(60, 160, 255, .55), transparent 70%), radial-gradient(40% 50% at 10% 100%, rgba(95, 200, 255, .25), transparent 70%), linear-gradient(120deg, #041029 0%, #0a2556 55%, #0d3a80 100%); }
.mission-video::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; pointer-events: none;
  background-image: radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 42% 70%, #fff, transparent), radial-gradient(1.2px 1.2px at 62% 18%, #fff, transparent), radial-gradient(1px 1px at 88% 80%, #fff, transparent), radial-gradient(1.3px 1.3px at 8% 75%, #fff, transparent); }
.mv-text { position: absolute; left: 7%; top: 17%; display: grid; text-align: left; line-height: .95; text-transform: uppercase; z-index: 2; }
.mv-text b { font: 800 clamp(1.4rem, 2.9vw, 2.7rem)/1 var(--font-body); color: #fff; letter-spacing: -.01em; }
.mv-text strong { font: 800 clamp(1.6rem, 3.5vw, 3.3rem)/1 var(--font-body); letter-spacing: -.02em; margin-top: .08em;
  background: linear-gradient(90deg, #5fe0ff, #6fb6d6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mv-coin { position: absolute; right: 6%; top: 50%; width: 32%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  background: radial-gradient(circle at 50% 38%, #3aa6ff 0%, #1667d8 55%, #0b3f99 100%);
  box-shadow: 0 0 0 6px rgba(205, 225, 245, .9), 0 0 0 9px rgba(120, 170, 230, .5), 0 0 60px 10px rgba(80, 170, 255, .55), inset 0 -12px 30px rgba(5, 25, 80, .55), inset 0 10px 24px rgba(255, 255, 255, .25);
  animation: mv-float 6s ease-in-out infinite; }
.mv-coin img { width: 68%; height: auto; filter: brightness(1.9) saturate(.4) drop-shadow(0 4px 8px rgba(5, 25, 80, .5)); }
@keyframes mv-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4%) rotate(3deg); } }
.mv-orbit { position: absolute; right: 2%; top: 50%; width: 46%; aspect-ratio: 2.3; translate: 0 -50%; rotate: -16deg; pointer-events: none; }
.mv-orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(120, 200, 255, .55); box-shadow: 0 0 12px rgba(80, 180, 255, .4); }
.mv-orbit i { position: absolute; width: 3%; aspect-ratio: 1; border-radius: 50%; background: #eaf8ff; box-shadow: 0 0 8px 3px rgba(150, 220, 255, .9); offset-path: ellipse(50% 50% at 50% 50%); animation: mv-travel 9s linear infinite; }
@keyframes mv-travel { to { offset-distance: 100%; } }
.mv-orbit i:nth-child(2) { animation-delay: -4.5s; }
.mv-play { position: absolute; left: 7%; bottom: 15%; width: 13%; aspect-ratio: 1.4; border-radius: 22%; display: grid; place-items: center; z-index: 3; color: #fff;
  background: linear-gradient(180deg, #ff4b4b, #d91f1f); box-shadow: 0 10px 24px -8px rgba(200, 20, 20, .7), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .2s ease; }
.mv-play svg { width: 46%; height: auto; }
.mv-play::before, .mv-play::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid rgba(255, 90, 90, .8); animation: ms-pulse 2.4s ease-out infinite; }
.mv-play::after { animation-delay: 1.2s; }
.mission-video:hover .mv-play { transform: scale(1.08); transform-origin: left center; }
@media (max-width: 560px) { .mv-play { width: 16%; } }
@media (prefers-reduced-motion: reduce) { .sv-tile, .sv-shine, .mv-coin, .mv-orbit i, .mv-play::before, .mv-play::after { animation: none; } }

/* Reader: Getting started guides (numbered steps and checklists) */
@media (min-width: 560px) { .rd-topics.rd-topics-3 { grid-template-columns: 1fr; } }
.rd-steps, .rd-checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: rd; }
.rd-steps li { counter-increment: rd; position: relative; display: grid; gap: 3px; padding: 14px 18px 14px 64px; border-radius: 16px; background: #fff; border: 1px solid #dbe8f4; box-shadow: 0 10px 24px -20px rgba(10, 30, 70, .5); }
.rd-steps li::before { content: counter(rd); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 800 .95rem var(--font-body); color: #fff; background: linear-gradient(135deg, #0b2446, #1667c8); box-shadow: 0 0 0 3px #dcecf8; }
.rd-steps b { color: #0a1a33; font-size: 1.02rem; }
.rd-steps span { color: #51657e; font-size: .95rem; line-height: 1.55; }
.rd-checks li { position: relative; padding: 4px 0 4px 34px; color: #33465f; font-size: 1rem; line-height: 1.55; }
.rd-checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #dcecf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231667c8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.rd-checks-plain li::before { background-color: #e3f1f6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23304e73' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }
@media (max-width: 560px) { #rd-crumb-group, .rd-crumb i { display: none; } .rd-crumb b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* =========================================================
   Mobile pass (phones and small tablets)
   ========================================================= */
@media (max-width: 920px) {
  /* Header: always available. It sits clear over the hero at the very top and turns into the dark bar as soon
     as the page moves (main.js uses a small threshold on phones), so there is never a moment without a nav. */
  .site-header { position: fixed; top: 0; padding-top: 0; transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
  .site-header .nav { padding: 10px 0; border-bottom: 0; }
  .site-header .nav::before { display: none; }
  .site-header.is-stuck { animation: none; }
  .brand-mark { width: 38px; height: 38px; } .brand-mark img { width: 24px; height: 24px; }
  html { scroll-padding-top: 66px; }

  /* Hero: the globe is scaled up around its centre and moved to the middle, so a big horizon of the earth with
     its coins fills the bottom of the screen instead of a small cut-off corner */
  .hero-inner { padding: 104px 0 8px; }
  .globe-stage { margin-top: 24%; transform-origin: 72.3% 98%; transform: translateX(-10.3%) scale(1.55); }
  .hero { min-height: 0; }

  /* Find out more: the backdrop picture is gone, so the space reserved for it goes too */
  .explore-grid { padding-top: 64px; }
}

@media (max-width: 560px) {
  .section { padding: 64px 0; }

  /* What is SevaCoin cards: picture on top, full width, text underneath */
  .about-card { grid-template-columns: 1fr; padding: 14px 14px 20px; gap: 16px; border-radius: 22px; }
  .about-card .about-art { order: -1; min-height: 0; aspect-ratio: 16 / 9; border-radius: 16px; }
  .about-card .about-text { padding: 0 6px; }
  .about-badges { margin-bottom: 12px; }
  .about-card h3 { font-size: 1.4rem; }
  .about-card p { margin-bottom: 16px; }

  /* Find out more rows: icon, text, arrow; the number goes, the text is left-aligned and gets the room */
  .explore-row { grid-template-columns: 48px 1fr 40px; gap: 14px; padding: 16px; text-align: left; }
  .explore-num { display: none; }
  .explore-ico { width: 48px; height: 48px; border-radius: 12px; } .explore-ico svg { width: 24px; height: 24px; }
  .explore-title { justify-items: start; text-align: left; }
  .explore-title strong { font-size: 1.25rem; }
  .explore-title small { font-size: .92rem; line-height: 1.45; }
  .explore-go { width: 40px; height: 40px; }
  .explore-intro h2 { font-size: 2.2rem; }


  /* Footer: the two link lists side by side; brand full width */
  .site-footer { padding: 56px 0 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { margin-top: 40px; }
}
@media (max-width: 920px) {
  .nav-links { background: #061026; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); }
}

/* =========================================================
   SEVA brand pass: the SEVA wordmark (header, mission, footer), the coin's caduceus moved to the background,
   and the Verified Human, SEVA Avatar and Apparel sections.
   ========================================================= */

/* Wordmark: letters and top bar take --wm-ink; the lower bars keep the logo's blue and aqua */
.seva-wm { display: block; height: auto; flex: 0 0 auto; --wm-ink: #fff; --wm-b2: var(--seva-blue); --wm-b3: var(--seva-aqua); }
.brand { gap: 12px; letter-spacing: 0; }
.brand .seva-wm { width: clamp(84px, 7.4vw, 108px); }
.brand-name { position: relative; padding-left: 12px; font-size: .82rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--seva-aqua); }
.brand-name::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: rgba(154, 210, 226, .4); }
.brand-name small { letter-spacing: .04em; text-transform: none; font-size: .68rem; font-weight: 500; white-space: nowrap; color: var(--on-dark-muted); margin-top: 4px; }
.site-header.is-stuck .brand .seva-wm { width: clamp(76px, 6.4vw, 92px); }
@media (max-width: 920px) { .brand .seva-wm { width: 88px; } .brand-name { font-size: .74rem; } }

/* The apparel link: an icon-only t-shirt mark beside the language picker (the label lives in aria-label/title) */
.nav-wear { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: #c9d8ea; }
.nav-wear:hover, .nav-wear:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-wear:focus-visible { outline: 2px solid var(--seva-aqua); outline-offset: 2px; }
.nav-wear .nav-ico { width: 30px; height: 30px; }
.nav-wear .nav-ico-fill { fill: rgba(159, 232, 255, .16); transition: fill .2s ease; }
.nav-wear:hover .nav-ico { color: #fff; }
.nav-wear:hover .nav-ico-fill { fill: rgba(159, 232, 255, .32); }
@media (max-width: 920px) { .nav-wear { width: 46px; height: 46px; } .nav-wear .nav-ico { width: 32px; height: 32px; } }

/* Mission: the wordmark on light, and the video card's coin in brand steel blue with the SEVA "E" */
.mission-word .sv-word { --wm-ink: var(--seva-navy); --wm-b2: var(--seva-blue); --wm-b3: var(--seva-aqua); width: min(78%, 560px); overflow: visible;
  filter: drop-shadow(0 18px 28px rgba(6, 40, 66, .14)); }
.mission-tagline { color: var(--seva-navy); }
/* the video card shows the SEVA Coin itself (static front face) */
.mv-coin { background: none; box-shadow: 0 0 60px 6px rgba(154, 210, 226, .3); }
.mv-coin .seva-coin { --coin-size: 100%; width: 100%; }

/* Footer brand and the link back to the parent network */
.site-footer .brand .seva-wm { width: 104px; }
.footer-parent a, .footer-parent-links a { color: var(--seva-aqua); text-decoration: none; }
.footer-parent a:hover, .footer-parent-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-brand .footer-parent { margin-top: 14px; font-size: .88rem; }
.footer-parent-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 4px; font-size: .88rem; font-weight: 600; }
.footer-parent-links a { display: inline-block; padding: 10px 0; }

/* Shared: "coming soon" pill and the disabled placeholder buttons */
.soon-pill { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 999px; font-size: .66rem; letter-spacing: .12em;
  color: var(--seva-aqua); background: rgba(154, 210, 226, .12); border: 1px solid rgba(154, 210, 226, .35); }
.soon-pill-light { color: var(--seva-navy); background: rgba(48, 78, 115, .07); border-color: rgba(48, 78, 115, .2); }
.btn[disabled] { cursor: not-allowed; transform: none; }
.btn-navy { color: #fff; background: var(--seva-navy); box-shadow: 0 14px 30px -14px rgba(6, 40, 66, .7); }
.btn-navy:hover { background: var(--seva-deep); }
.btn-navy:focus-visible { outline-color: var(--seva-blue); }

/* ---------- Verified Human ---------- */
.section.section-verify { position: relative; overflow: hidden; isolation: isolate; color: var(--on-dark);
  background: radial-gradient(50% 60% at 82% 40%, rgba(97, 151, 201, .28), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(154, 210, 226, .12), transparent 70%), linear-gradient(160deg, #041a2e 0%, var(--seva-deep) 60%, #0b3556 100%); }
.verify-wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 921px) { .verify-wrap { grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 5vw, 80px); } }
.verify-copy h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; color: #fff; margin: 0 0 20px; }
.verify-copy h2 em, .avatar-copy h2 em { font-style: normal; background: linear-gradient(90deg, var(--seva-aqua), var(--seva-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.verify-lead { color: #b9cadb; font-size: 1.05rem; line-height: 1.65; max-width: 38em; margin-bottom: 12px; }
.verify-lead strong { color: #fff; }
.verify-points { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.verify-points li { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(154, 210, 226, .16); }
.vp-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--seva-aqua); background: rgba(97, 151, 201, .18); }
.vp-ico svg { width: 20px; height: 20px; }
.verify-points h3 { font-size: .95rem; color: #fff; margin: 0 0 4px; }
.verify-points p { font-size: .86rem; line-height: 1.45; color: #9fb2c0; }
.verify-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.btn-worldid { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); opacity: .62; }
.btn-worldid svg { width: 18px; height: 18px; }
.verify-note { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--seva-aqua); }

.verify-card { position: relative; width: min(100%, 380px); margin-inline: auto; padding: 26px 26px 22px; border-radius: 26px; text-align: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(154, 210, 226, .25);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.vc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.vc-top .seva-wm { width: 76px; }
.vc-chip { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9fb2c0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(154, 210, 226, .25); }
.vc-orb { position: relative; width: 132px; aspect-ratio: 1; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 40% 35%, #bfe6ef, var(--seva-blue) 50%, var(--seva-navy) 100%); box-shadow: 0 0 50px -6px rgba(97, 151, 201, .7); }
.vc-orb svg { width: 46px; height: 46px; opacity: .55; }
.vc-orb i { position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(154, 210, 226, .3); animation: vc-ring 3.6s ease-out infinite; }
.vc-orb i:nth-child(2) { animation-delay: 1.2s; } .vc-orb i:nth-child(3) { animation-delay: 2.4s; }
@keyframes vc-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.vc-title { font-size: 1.25rem; font-weight: 700; color: #fff; }
.vc-sub { font-size: .88rem; color: #9fb2c0; margin-top: 4px; }
.vc-rows { margin: 22px 0 0; display: grid; gap: 0; text-align: left; }
.vc-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(154, 210, 226, .14); font-size: .88rem; }
.vc-rows dt { color: #9fb2c0; } .vc-rows dd { margin: 0; color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.vc-dot { width: 8px; height: 8px; border-radius: 50%; background: #9fb2c0; }

/* ---------- Your SEVA Avatar ---------- */
.section.section-avatar { position: relative; overflow: hidden; color: var(--text);
  background: radial-gradient(40% 60% at 20% 50%, rgba(154, 210, 226, .35), transparent 70%), linear-gradient(180deg, #f2f8fb 0%, #e8f2f8 100%); }
.avatar-wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 921px) { .avatar-wrap { grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 5vw, 80px); } }
.avatar-copy h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; color: var(--seva-deep); margin: 0 0 20px; }
.avatar-copy h2 em { background: linear-gradient(90deg, var(--seva-accent), var(--seva-blue)); -webkit-background-clip: text; background-clip: text; }
.avatar-copy > p { color: #4a5d75; font-size: 1.05rem; line-height: 1.65; max-width: 38em; }
.section-avatar .eyebrow-dark, .apparel-head .eyebrow { color: var(--seva-accent); font-size: .78rem; letter-spacing: .14em; }
.section-avatar .eyebrow .dot { background: var(--seva-blue); box-shadow: 0 0 0 4px rgba(97, 151, 201, .18); }
.avatar-points { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 12px; }
.avatar-points li { display: grid; gap: 2px; padding-left: 26px; position: relative; }
.avatar-points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, var(--seva-aqua), var(--seva-blue)); }
.avatar-points b { color: var(--seva-deep); font-size: 1rem; }
.avatar-points span { color: #5b6b7c; font-size: .93rem; }
.btn-soon { color: var(--seva-navy); background: #fff; border-color: rgba(48, 78, 115, .25); opacity: .75; }

.avatar-card { position: relative; width: min(100%, 340px); margin-inline: auto; padding: 0 0 22px; border-radius: 26px; overflow: hidden; text-align: center; background: #fff;
  box-shadow: 0 40px 80px -40px rgba(6, 40, 66, .45), 0 0 0 1px rgba(48, 78, 115, .08); }
.ac-cover { height: 104px; display: grid; place-items: start end; padding: 16px 18px;
  background: radial-gradient(70% 120% at 20% 0%, rgba(154, 210, 226, .55), transparent 70%), linear-gradient(120deg, var(--seva-navy), var(--seva-deep)); }
.ac-cover .seva-wm { width: 64px; opacity: .9; }
.ac-face { position: relative; width: 112px; margin: -56px auto 12px; }
/* ">" keeps this off the SEVA Coin widget nested in .ac-coin (its inner svg would otherwise be stretched into a 112px pill) */
.ac-face > svg { width: 112px; height: 112px; border-radius: 50%; box-shadow: 0 0 0 5px #fff, 0 14px 30px -12px rgba(6, 40, 66, .5); }
.ac-coin { position: absolute; right: -2px; bottom: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgba(6, 40, 66, .5); }
.ac-coin .seva-coin { --coin-size: 32px; gap: 0; display: block; line-height: 0; }
.ac-coin .sc-stage { perspective: none; }
.ac-coin .sc-svg { width: 32px; height: 32px; }
.ac-name { font-size: 1.2rem; font-weight: 700; color: var(--seva-deep); }
.ac-handle { font-size: .88rem; color: #6b7f94; margin-top: 2px; }
.ac-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 18px 18px; }
.ac-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: .76rem; font-weight: 600; color: var(--seva-navy); background: #eef5f9; border: 1px solid #d6e6f0; }
.ac-badge svg { width: 14px; height: 14px; color: var(--seva-blue); }
.ac-wallet { margin: 0 18px; padding: 12px 14px; border-radius: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #f4f8fb; border: 1px dashed #c9dbe7; font-size: .82rem; color: #6b7f94; }
.ac-wallet code { font: 600 .8rem var(--font-body); color: var(--seva-navy); }

/* ---------- Apparel ---------- */
.section.section-apparel { position: relative; overflow: hidden; padding: 112px 0; color: var(--text);
  background: radial-gradient(50% 40% at 0% 30%, rgba(154, 210, 226, .2), transparent 70%), linear-gradient(180deg, #ffffff 0%, #f3f8fb 100%); }

.apparel-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.apparel-head .eyebrow { color: var(--seva-accent); font-size: .78rem; letter-spacing: .14em; margin-bottom: 14px; }
.apparel-head .eyebrow .dot { background: var(--seva-blue); box-shadow: 0 0 0 4px rgba(97, 151, 201, .18); }
.apparel-head h2 { color: var(--seva-deep); margin-bottom: 12px; }
.apparel-head p { color: #4a5d75; font-size: 1.12rem; line-height: 1.6; }

/* the collection */
.collection { margin-top: 96px; padding-top: 64px; border-top: 1px solid #e3edf4; }
.collection.collection-only { margin-top: 0; padding-top: 0; border-top: 0; }
.collection-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.collection-head h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.02em; color: var(--seva-deep); }
.collection-head p { color: #5b6b7c; }
.wear-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 640px) { .wear-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wear-card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-radius: 20px; overflow: hidden; background: #fff;
  border: 1px solid #e3edf4; box-shadow: 0 20px 44px -32px rgba(6, 40, 66, .45); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.wear-card a:hover, .wear-card a:focus-visible { transform: translateY(-4px); border-color: rgba(97, 151, 201, .5); box-shadow: 0 28px 54px -30px rgba(6, 40, 66, .5); }
.wear-art { display: block; aspect-ratio: 396 / 222; overflow: hidden; background: #eef4f8; }
.wear-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.wear-card a:hover .wear-art img { transform: scale(1.04); }
.wear-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.wear-body > span:first-child { display: grid; gap: 2px; }
.wear-body b { font-size: 1.05rem; color: var(--seva-deep); }
.wear-body small { font-size: .86rem; color: #6b7f94; }
.wear-chev { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; color: #fff; background: var(--seva-navy); transition: background .2s ease; }
.wear-card a:hover .wear-chev { background: var(--seva-deep); }
.apparel-cta { margin-top: 40px; text-align: center; }
.btn-shop { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; padding: 7px 7px 7px 28px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 1rem; color: #fff; background: var(--seva-navy); box-shadow: 0 16px 32px -16px rgba(6, 40, 66, .7); transition: transform .2s ease, background .2s ease; }
.btn-shop:hover { transform: translateY(-2px); background: var(--seva-deep); }
.btn-shop-arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem; line-height: 1; color: var(--seva-navy); background: #fff; }

@media (max-width: 639px) {
  .apparel-head { margin-bottom: 36px; }
  .collection { margin-top: 64px; padding-top: 48px; }
  .wear-grid { gap: 12px; }
  .wear-card a { flex-direction: row; align-items: center; }
  .wear-art { width: 112px; flex: 0 0 auto; aspect-ratio: 1; }
  .wear-body { flex: 1; padding: 0 16px; }
}

@media (max-width: 560px) {
  .section.section-verify, .section.section-avatar { padding: 72px 0; }
  .section.section-apparel { padding: 72px 0; }
  .verify-points li { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .vc-orb i { animation: none; opacity: 0; } }


/* =========================================================
   SEVA Coin (assets/coin): the hero coin on the hub of the network, the coin-supply placeholder, the footer coin
   ========================================================= */
.hero-coin { --hc: clamp(220px, 22vw, 320px); position: absolute; left: 66%; top: 45%; z-index: 2; translate: -50% calc(var(--hc) / -2); }
.hero-coin .seva-coin { --coin-size: var(--hc); }
.hero-coin:not(.is-placed) { visibility: hidden; }
.hero-coin .sc-stage { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5)) drop-shadow(0 0 46px rgba(154, 210, 226, .28)); animation: hero-coin-in 1s cubic-bezier(.3, .7, .2, 1) .4s both; }
@keyframes hero-coin-in { from { opacity: 0; transform: scale(.4) translateY(30px); } to { opacity: 1; transform: none; } }
.hero-coin .sc-btn { color: #dbeaf5; background: rgba(6, 22, 44, .78); border-color: rgba(154, 210, 226, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-coin .sc-btn:hover { color: #12304f; background: #9ad2e2; }
@media (max-width: 920px) { .hero-coin { --hc: 150px; } }
@media (max-width: 480px) { .hero-coin { --hc: 132px; } }
@media (prefers-reduced-motion: reduce) { .hero-coin .sc-stage { animation: none; } }

.section.section-supply { padding: 96px 0; background: linear-gradient(180deg, #f3f8fb 0%, #ffffff 100%); color: var(--text); }
.supply-wrap { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .supply-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 88px); } }
.supply-copy .eyebrow { color: var(--seva-accent); font-size: .78rem; letter-spacing: .14em; }
.supply-copy .eyebrow .dot { background: var(--seva-blue); box-shadow: 0 0 0 4px rgba(97, 151, 201, .18); }
.supply-copy h2 { color: var(--seva-deep); margin-bottom: 14px; }
.supply-copy p { color: #4a5d75; font-size: 1.06rem; line-height: 1.65; max-width: 34em; }
.supply-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.supply-grid div { padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid #e3edf4; border-top: 3px solid var(--seva-blue); box-shadow: 0 18px 40px -32px rgba(6, 40, 66, .45); }
.supply-grid dt { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b7f94; }
.supply-grid dd { margin: 6px 0 0; font-size: 1.15rem; font-weight: 700; color: var(--seva-deep); }
@media (max-width: 480px) { .supply-grid { grid-template-columns: 1fr; } }

/* Footer brand: the coin, a thin rule, then the white SEVA Coin logo straight on the dark ground (no white badge) */
.site-footer .brand { align-items: center; gap: 18px; }
.footer-coin { --coin-size: 56px; flex: 0 0 auto; filter: drop-shadow(0 10px 18px rgba(61, 155, 255, .32)); }
.site-footer .brand .seva-logo { padding-left: 18px; border-left: 1px solid rgba(154, 210, 226, .22); }


/* The SEVA Coin logo (assets/brand/seva-coin-logo-light.svg; seva-coin-logo-white.webp on dark backgrounds) */
.seva-logo { display: block; height: auto; flex: 0 0 auto; }
.brand .seva-logo { width: clamp(104px, 9vw, 132px); }
.site-header.is-stuck .brand .seva-logo { width: clamp(92px, 7.6vw, 112px); }
@media (max-width: 920px) { .brand .seva-logo { width: 108px; } }
.site-footer .brand .seva-logo { width: 148px; }
.vc-top .seva-logo { width: 128px; }
.ac-cover .seva-logo { width: 116px; opacity: .95; }
.mission-word .sv-word { width: min(70%, 440px); height: auto; margin: 0 auto; filter: none; }
/* Header wordmark: the stacked white SEVA Coin logo, COIN under SEVA (assets/brand/seva-coin-logo-white.webp) */
.brand .seva-logo-mark { width: clamp(100px, 8.4vw, 118px); }
.site-header.is-stuck .brand .seva-logo-mark { width: clamp(92px, 7.6vw, 108px); }
@media (max-width: 920px) { .brand .seva-logo-mark { width: 108px; } }

/* Hero coin presentation: a soft aura lifting it off the globe,  */
.hero-coin .seva-coin { position: relative; z-index: 2; }
.hc-aura { position: absolute; left: 50%; top: calc(var(--hc) / 2); width: calc(var(--hc) * 1.75); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(70, 150, 255, .34), rgba(40, 110, 230, .14) 55%, transparent 75%); animation: hc-pulse 6s ease-in-out infinite; }
@keyframes hc-pulse { 0%, 100% { opacity: .75; scale: .96; } 50% { opacity: 1; scale: 1.04; } }
@media (prefers-reduced-motion: reduce) { .hc-aura { animation: none; } }

/* The SEVA logo in its original colours; on dark backgrounds it sits on a small white badge so the navy reads */
.seva-logo.logo-badge { box-sizing: content-box; background: #fff; border-radius: 10px; padding: 6px 10px; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); }
.brand .seva-logo-mark.logo-badge { padding: 7px 12px; }
.site-header.is-stuck .brand .seva-logo-mark.logo-badge { padding: 5px 10px; }
.ac-cover .seva-logo.logo-badge { padding: 4px 8px; border-radius: 8px; }

/* Language dropdown (flag + code, dark list of flags). GTranslate's own widget is kept only as the engine. */
.gtranslate_wrapper { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer;
  font: 700 .82rem/1 var(--font-body); letter-spacing: .04em; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
.lang-btn:focus-visible { outline: 2px solid var(--seva-aqua); outline-offset: 2px; }
.lang-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.lang-caret { width: 9px; height: 6px; opacity: .85; transition: transform .2s ease; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 118px; margin: 0; padding: 6px; list-style: none; border-radius: 6px;
  background: #3a3a3c; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .65); }
.lang-list[hidden] { display: none; }
.lang-list li { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 4px; cursor: pointer; color: #fff; font: 700 .8rem/1 var(--font-body); letter-spacing: .04em; }
.lang-list li img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; }
.lang-list li:hover, .lang-list li:focus { background: rgba(255, 255, 255, .1); outline: none; }
.lang-list li[aria-selected="true"] { background: rgba(255, 255, 255, .14); }
@media (max-width: 920px) { .nav-actions .lang { display: block; } .lang-list { left: auto; right: 0; } }
/* Translated pages have longer menu labels: tighten the header so nothing runs off the edge */
html.translated-ltr .nav-links, html.translated-rtl .nav-links { gap: clamp(10px, 1.2vw, 18px); }
html.translated-ltr .nav-links a, html.translated-rtl .nav-links a { font-size: clamp(12px, .95vw, 14px); }
html.translated-ltr .nav-actions .btn-primary, html.translated-rtl .nav-actions .btn-primary { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }