/* =========================================================
   WE MANAGE — 3D ecosystem globe (shared: homepage + systems)
   Markup: .wm-eco > .wm-eco-head + #ecoStage; driven by
   assets/js/systems-globe.js (requires assets/js/three.min.js).
   ========================================================= */
  .wm-eco-head h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(33px, 3.6vw, 52px);
    line-height: 1.02; letter-spacing: -.8px;
    margin: 10px 0 0; font-weight: 600; color: #fff;
  }
  .wm-eco-head h2 span { color: var(--gold2, #f2c86b); }

  /* No background of its own — the page shows through.
     ------------------------------------------------------------------
     This section used to paint itself #050608 -> #04070c -> #050505 under a
     blue radial wash, while the page around it is a neutral #030303. Both
     lighter AND cooler than its surroundings, which is why the globe sat in
     a visible rectangle: the seam was a colour difference, not an edge.

     Left transparent rather than set to #030303 so it simply inherits the
     page. If the site's background is ever retuned, this follows it instead
     of drifting out of match again. The depth that the old gradient was
     providing comes from the globe itself, which is lit and blooms against
     a flat ground perfectly well. */
  .wm-eco {
    position: relative;
    padding: clamp(60px, 8vh, 100px) 0 0;
    padding: clamp(60px, 8svh, 100px) 0 0;
    background: none;
    overflow: hidden;
  }
  /* hero variant: the globe opens the page and owns the first viewport */
  .wm-eco--hero { padding-top: clamp(130px, 18vh, 190px); }
  .wm-eco--hero { padding-top: clamp(130px, 18svh, 190px); }
  .wm-eco--hero .wm-eco-stage { height: clamp(500px, calc(100vh - 330px), 820px); }
  .wm-eco--hero .wm-eco-stage { height: clamp(500px, calc(100svh - 330px), 820px); }
  .wm-eco--hero .wm-eco-stage { height: clamp(500px, calc(100svh - 330px), 820px); }
  @media (max-width: 720px) {
    .wm-eco--hero { padding-top: 110px; }
    .wm-eco--hero .wm-eco-stage { height: min(72vh, 540px); }
    .wm-eco--hero .wm-eco-stage { height: min(72svh, 540px); }
  }

  .wm-eco-head { text-align: center; }
  .wm-eco-head .wm-kicker { justify-content: center; }
  .wm-eco-head .wm-lead { margin: 16px auto 0; max-width: 640px; }
  .wm-eco-stage {
    position: relative;
    height: clamp(480px, 82vh, 780px);
    height: clamp(480px, 82svh, 780px);
    margin-top: 10px;
  }
  #ecoCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .wm-eco-hint {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    color: rgba(255,255,255,.38); font-size: 12px; letter-spacing: .6px;
    pointer-events: none; white-space: nowrap;
  }
  .wm-eco-tip {
    position: absolute; z-index: 5; transform: translate(-50%, -100%);
    pointer-events: none; text-align: left;
    min-width: 210px; max-width: 280px;
    padding: 12px 15px; border-radius: 13px;
    background: rgba(7,13,20,.88);
    border: 1px solid rgba(105,196,255,.4);
    box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 30px rgba(84,198,255,.10);
    backdrop-filter: blur(6px);
  }
  .wm-eco-tip b { display: flex; align-items: center; gap: 6px; color: #eaf6ff; font-size: 14px; }
  .wm-eco-tip b svg { width: 15px; height: 15px; color: #f2c86b; flex: 0 0 auto; }
  .wm-eco-tip span { display: block; color: rgba(200,228,248,.75); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
  .wm-eco-tip em {
    display: inline-flex; align-items: center; gap: 6px;
    font-style: normal; margin-top: 8px; color: #43e08a; font-size: 10.5px;
    font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  }
  .wm-eco-tip em::before { content: none; }
  .wm-eco-panel {
    position: absolute; z-index: 6; top: 50%; right: clamp(14px, 5vw, 72px);
    transform: translateY(-50%);
    width: min(400px, calc(100% - 28px));
    max-height: min(560px, 92%);
    overflow: auto;
    padding: 26px 26px 24px; border-radius: 20px;
    background: rgba(8,14,22,.90);
    border: 1px solid rgba(105,196,255,.35);
    box-shadow: 0 40px 110px rgba(0,0,0,.6), 0 0 60px rgba(84,198,255,.08);
    backdrop-filter: blur(10px);
    animation: wmEcoPanelIn .45s cubic-bezier(.16,1,.3,1);
  }
  @keyframes wmEcoPanelIn { from { opacity: 0; transform: translateY(calc(-50% + 16px)); } to { opacity: 1; transform: translateY(-50%); } }
  .wm-eco-x {
    position: absolute; top: 12px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 20px; line-height: 1; color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    cursor: pointer; transition: .2s ease;
  }
  .wm-eco-x:hover { color: #fff; border-color: rgba(105,196,255,.5); }
  .wm-eco-cat { color: #6fd6ff; font-size: 10px; font-weight: 800; letter-spacing: 2.2px; }
  .wm-eco-panel h3 {
    font-family: "Playfair Display", serif;
    font-size: 30px; margin: 8px 0 10px; color: #fff; line-height: 1.05;
  }
  .wm-eco-panel h3 { display: flex; align-items: center; }
  .wm-eco-emoji {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 44px; height: 44px; margin-right: 13px;
    border-radius: 12px; color: #f4d488;
    background: radial-gradient(120% 120% at 30% 20%, rgba(242,200,107,.16), rgba(242,200,107,.05));
    box-shadow: inset 0 0 0 1px rgba(242,200,107,.42), 0 4px 14px rgba(0,0,0,.35);
  }
  .wm-eco-emoji svg { width: 25px; height: 25px; }
  .wm-eco-panel p { color: rgba(214,232,246,.72); font-size: 13.5px; line-height: 1.65; margin: 0 0 16px; }
  .wm-eco-feats { display: grid; gap: 7px; margin-bottom: 18px; }
  .wm-eco-feats span {
    position: relative; padding-left: 20px;
    color: rgba(230,242,252,.85); font-size: 13px; line-height: 1.5;
  }
  .wm-eco-feats span::before { content: "\2713"; position: absolute; left: 0; color: #6fd6ff; font-weight: 900; font-size: 12px; }
  .wm-eco-int-label { color: rgba(255,255,255,.42); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; margin-bottom: 9px; }
  .wm-eco-ints { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
  .wm-eco-ints span {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px 6px 8px; border-radius: 999px; font-size: 11.5px;
    color: rgba(200,228,248,.85);
    background: rgba(105,196,255,.08); border: 1px solid rgba(105,196,255,.28);
  }
  .wm-eco-ints span svg { width: 14px; height: 14px; color: #f2c86b; flex: 0 0 auto; }
  /* ---- per-system mini UI mockups inside the panel ---- */
  .wm-eco-ui-label {
    color: rgba(255,255,255,.42); font-size: 10px; font-weight: 800;
    letter-spacing: 1.8px; margin: 2px 0 8px;
  }
  .eui {
    --ea: #69d2ff;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
    background: linear-gradient(180deg, #0d131c, #090e15);
    box-shadow: 0 16px 44px rgba(0,0,0,.45), 0 0 26px color-mix(in srgb, var(--ea) 8%, transparent);
    overflow: hidden;
    margin-bottom: 18px;
  }
  .eui-top {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.028);
  }
  .eui-dots { display: flex; gap: 4px; }
  .eui-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); }
  .eui-top b { color: rgba(255,255,255,.82); font-size: 11px; font-weight: 650; letter-spacing: .3px; }
  .eui-top em {
    margin-left: auto; font-style: normal; font-size: 9px; font-weight: 800;
    letter-spacing: 1px; color: #43e08a; text-transform: uppercase;
  }
  .eui-body { padding: 12px; }

  .eui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
  .eui-kpis.small { grid-template-columns: repeat(2, 1fr); }
  .eui-kpi {
    padding: 9px 10px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  }
  .eui-kpi b {
    display: block; font-size: 15px; font-weight: 800; line-height: 1;
    color: var(--ea); font-variant-numeric: lining-nums tabular-nums;
  }
  .eui-kpi span { display: block; margin-top: 4px; color: rgba(255,255,255,.44); font-size: 8.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }

  .eui-bars {
    display: flex; align-items: flex-end; gap: 5px;
    height: 58px; padding: 8px 8px 6px; margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,.06); border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ea) 5%, transparent), transparent);
  }
  .eui-bars i {
    flex: 1; border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, var(--ea), color-mix(in srgb, var(--ea) 25%, transparent));
  }

  .eui-rows { display: grid; }
  .eui-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,.055);
  }
  .eui-row:last-child { border-bottom: 0; }
  .eui-row b { color: rgba(240,246,252,.85); font-size: 11px; font-weight: 550; }
  .eui-row em {
    flex: 0 0 auto; font-style: normal; font-size: 9px; font-weight: 800;
    letter-spacing: .6px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px;
  }
  .eui-row em.ok   { color: #43e08a; background: rgba(67,224,138,.10); border: 1px solid rgba(67,224,138,.3); }
  .eui-row em.warn { color: #fbbf24; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.3); }
  .eui-row em.bad  { color: #ff8585; background: rgba(255,133,133,.10); border: 1px solid rgba(255,133,133,.3); }

  .eui-kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .eui-kcol {
    padding: 7px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.25);
  }
  .eui-kcol > b {
    display: block; margin-bottom: 6px;
    color: rgba(255,255,255,.42); font-size: 8px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
  }
  .eui-kcard {
    margin-bottom: 5px; padding: 7px 8px; border-radius: 7px;
    border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.04);
    color: rgba(240,246,252,.8); font-size: 9.5px; line-height: 1.35;
  }
  .eui-kcard i { display: block; width: 18px; height: 2.5px; margin-bottom: 5px; border-radius: 3px; background: var(--ea); }
  .eui-kcard:last-child { margin-bottom: 0; }

  .eui-cal { display: grid; }
  .eui-slot {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 2px; border-bottom: 1px solid rgba(255,255,255,.055);
  }
  .eui-slot:last-child { border-bottom: 0; }
  .eui-slot time {
    flex: 0 0 44px; color: var(--ea); font-size: 10.5px; font-weight: 800;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .eui-slot b { color: rgba(240,246,252,.85); font-size: 11px; font-weight: 550; }
  .eui-slot i { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; }
  .eui-slot i.ok   { background: #43e08a; box-shadow: 0 0 8px rgba(67,224,138,.6); }
  .eui-slot i.warn { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.6); }

  .eui-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .eui-dish {
    padding: 8px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03);
  }
  .eui-thumb { display: block; height: 44px; border-radius: 7px; margin-bottom: 7px; }
  .eui-thumb.t0 { background: linear-gradient(135deg, #7c4a1e, #b4762f, #3c2410); }
  .eui-thumb.t1 { background: linear-gradient(135deg, #24455c, #3f7ea6, #122430); }
  .eui-thumb.t2 { background: linear-gradient(135deg, #4a2440, #8a4a72, #241020); }
  .eui-thumb.t3 { background: linear-gradient(135deg, #23503c, #479270, #10281e); }
  .eui-dish b { display: block; color: rgba(240,246,252,.88); font-size: 10.5px; font-weight: 600; }
  .eui-dish em { display: block; margin-top: 3px; font-style: normal; color: var(--ea); font-size: 10px; font-weight: 800; }

  .eui-cart .eui-line {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,.055);
  }
  .eui-cart .eui-line b { color: rgba(240,246,252,.85); font-size: 11px; font-weight: 550; }
  .eui-cart .eui-line em { font-style: normal; color: rgba(255,255,255,.6); font-size: 10.5px; font-variant-numeric: lining-nums tabular-nums; }
  .eui-totalrow {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 2px 10px;
  }
  .eui-totalrow span { color: rgba(255,255,255,.45); font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
  .eui-totalrow strong { color: #fff; font-size: 13.5px; font-variant-numeric: lining-nums; }
  .eui-pay {
    text-align: center; padding: 9px; border-radius: 9px;
    color: #0a1208; font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
    background: linear-gradient(180deg, var(--ea), color-mix(in srgb, var(--ea) 70%, #000));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ea) 30%, transparent);
  }

  .eui-phonewrap { display: grid; place-items: center; padding: 4px 0 6px; }
  .eui-phone {
    position: relative; width: 168px;
    padding: 22px 12px 12px; border-radius: 22px;
    border: 1.5px solid rgba(255,255,255,.16);
    background: linear-gradient(180deg, #0c121b, #080d14);
    box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb, var(--ea) 10%, transparent);
  }
  .eui-notch {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 52px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.12);
  }
  .eui-appbar {
    display: flex; align-items: center; gap: 7px;
    color: #fff; font-size: 11px; font-weight: 700; margin-bottom: 9px;
  }
  .eui-appbar i { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(145deg, var(--ea), color-mix(in srgb, var(--ea) 45%, #000)); }
  .eui-nav { display: flex; justify-content: space-around; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); }
  .eui-nav i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
  .eui-nav i.on { background: var(--ea); box-shadow: 0 0 8px var(--ea); }

  .wm-eco-cta { display: flex; flex-wrap: wrap; gap: 10px; }
  .wm-eco-cta .cta { margin-top: 0; min-width: 0; min-height: 50px; font-size: 12px; padding: 0 22px; }
  .wm-eco-cta .btn { min-height: 50px; }
  @media (max-width: 720px) {
    .wm-eco-stage { height: min(78vh, 560px); }
    .wm-eco-stage { height: min(78svh, 560px); }
    .wm-eco-panel { top: auto; bottom: 10px; transform: none; right: 14px; left: 14px; width: auto; max-height: 78%; }
    @keyframes wmEcoPanelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
    .wm-eco-hint { display: none; }
  }


/* The hint brightens for a moment the first time someone wheels over the
   globe without the modifier — the globe deliberately does not zoom on a bare
   wheel (that used to trap the page scroll), so it needs to say why nothing
   happened rather than appear broken. */
.wm-eco-hint {
  transition: color .35s ease, text-shadow .35s ease;
}
.wm-eco-hint.is-flash {
  color: rgba(242, 200, 107, .95);
  text-shadow: 0 0 16px rgba(242, 200, 107, .35);
}
@media (prefers-reduced-motion: reduce) {
  .wm-eco-hint { transition: none; }
}