/* ═══════════════════════════════════════════════════════════════
   Delung Capital — Visual layer (icons, hero art, home map)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Card icons (injected by visuals.js from data-icon) ─────── */
.ic {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 1.25rem;
  color: var(--gold); background: rgba(201,168,76,0.10);
  border: 1px solid rgba(201,168,76,0.35); border-radius: 50%;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.ic svg { width: 22px; height: 22px; }
[data-icon]:hover > .ic { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.pillar-card > .ic { width: 56px; height: 56px; margin-bottom: 1.5rem; }
.pillar-card > .ic svg { width: 26px; height: 26px; }
.value-card > .ic { margin-bottom: 1rem; }

/* ─── Inner-page hero: text left, artwork right ──────────────── */
.page-hero > .container {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3rem; align-items: center;
}
.page-hero-art { position: relative; z-index: 2; }
.page-art { width: 100%; height: auto; display: block; overflow: visible; }
.page-art .dim { stroke: rgba(255,255,255,0.14); stroke-width: 1; fill: none; }
.page-art .dim-g line { stroke: rgba(255,255,255,0.08); }
.page-art .sk { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.28); stroke-width: 1; }
.page-art .win { fill: rgba(201,168,76,0.55); }
.page-art .gold-line-art { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.page-art .ring { fill: none; stroke: rgba(201,168,76,0.5); stroke-width: 1; }
.page-art .cap { font: 600 10.5px var(--font-sans); letter-spacing: 0.08em; fill: rgba(255,255,255,0.55); }
.page-art .cap.gold { fill: var(--gold); }
.page-art .cap.dimtxt { fill: rgba(255,255,255,0.35); font-weight: 500; letter-spacing: 0.04em; }
.page-art .wick { stroke-width: 1.2; }
.page-art .wick.up, .page-art .body.up { stroke: var(--gold); }
.page-art .body.up { fill: var(--gold); }
.page-art .wick.dn { stroke: rgba(255,255,255,0.5); }
.page-art .body.dn { fill: #0a1628; stroke: rgba(255,255,255,0.55); stroke-width: 1.2; }
.page-art .ma-slow { fill: none; stroke: rgba(255,255,255,0.4); stroke-width: 1.4; stroke-dasharray: 3 3; }
.page-art .hwm { fill: none; stroke: var(--gold); stroke-width: 1.6; }
.page-art .floor { fill: none; stroke: rgba(255,255,255,0.45); stroke-width: 1.4; stroke-dasharray: 5 4; }

.page-art .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: art-draw 2.2s 0.3s ease-out forwards; }
.page-art .draw.d2 { animation-delay: 0.8s; }
@keyframes art-draw { to { stroke-dashoffset: 0; } }
.page-art .wave { animation: art-wave 6s linear infinite; }
@keyframes art-wave { from { transform: translateX(0); } to { transform: translateX(-60px); } }

/* ─── Home hero: copy left, office map right ─────────────────── */
#hero > .container {
  width: 100%; display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem; align-items: center;
}
#hero .hero-content { max-width: 600px; padding-top: 6rem; }
#hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.3rem); }
#hero .hero-stats { margin-top: 3rem; padding-top: 2rem; gap: 2.25rem; flex-wrap: nowrap; }
#hero .hero-stat-label { white-space: nowrap; }
.hero-art { position: relative; z-index: 2; padding-top: 3rem; margin-left: 1.5rem; margin-right: -2rem; }
.hero-map { width: 100%; height: auto; display: block; overflow: visible; }
.hero-map .map-label { font: 600 12px var(--font-sans); letter-spacing: 0.06em; fill: rgba(255,255,255,0.85); }
.hero-map .map-arc { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: art-draw 2.4s ease-out forwards; }
.hero-map .map-arc.a1 { animation-delay: 0.6s; }
.hero-map .map-arc.a2 { animation-delay: 1.2s; }
.hero-map .pulse { fill: none; stroke: var(--gold); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.8s ease-out infinite; }
.hero-map .p2 .pulse { animation-delay: 0.9s; }
.hero-map .p3 .pulse { animation-delay: 1.8s; }
@keyframes map-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(4.2); opacity: 0; } }

@media (max-width: 1024px) {
  #hero > .container { grid-template-columns: 1fr; }
  .hero-art { padding-top: 0; max-width: 640px; margin-right: 0; }
  #hero .hero-stats { flex-wrap: wrap; }
  #hero { padding: 6rem 0 4rem; }
}
@media (max-width: 900px) {
  .page-hero > .container { grid-template-columns: 1fr; gap: 2rem; }
  .page-hero-art { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-art .draw, .hero-map .map-arc { animation: none; stroke-dashoffset: 0; }
  .page-art .wave, .hero-map .pulse { animation: none; }
}

/* ─── Nav: keep links on one line (the quant page has an extra CTA and wrapped) ─── */
.nav-links a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1280px) {
  .nav-links { gap: 1.4rem; }
  .nav-links a { letter-spacing: 0.08em; font-size: 0.72rem; }
}

/* Parallel items (asset classes) don't need sequence numbers once they have icons */
.step-card[data-icon] .step-num { display: none; }

/* ─── Video click-to-play facade ─────────────────────────────── */
.video-facade {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer;
  background-color: var(--navy-2); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.video-facade::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,22,40,0.55), rgba(10,22,40,0.1)); transition: background var(--transition); }
.video-facade:hover::before { background: linear-gradient(to top, rgba(10,22,40,0.35), rgba(10,22,40,0)); }
.video-play {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition);
}
.video-play svg { width: 28px; height: 28px; margin-left: 3px; }
.video-facade:hover .video-play { transform: scale(1.08); }
.video-facade:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }