/* ============================================================
   PROJECT BAE — Design System v2
   Single source of truth. Zero external dependencies.
   Icons are an inline SVG sprite defined at the top of <body>.
   ============================================================ */

:root{
  --bg:#07060F; --bg-deep:#050410; --bg-lift:#0C0A1A;

  --glass:rgba(139,124,246,.055);
  --glass-2:rgba(139,124,246,.10);
  --glass-3:rgba(139,124,246,.15);
  --stroke:rgba(163,148,255,.12);
  --stroke-2:rgba(163,148,255,.22);
  --stroke-3:rgba(163,148,255,.34);

  --txt:#FFFFFF; --txt-2:#B8B2D4; --txt-3:#867FAC; --txt-4:#7B74A6; --txt-5:#3E3A5C;

  --iris:#6C5CE7; --iris-l:#A394FF; --iris-xl:#D6CEFF; --iris-d:#3D2FA8;
  --rose:#E0568C; --rose-l:#FF9CC4;
  --mint:#2BC48A; --mint-l:#6EE7B7;
  --gold:#F5A623; --gold-l:#FFD089;
  --ember:#FF5A5F; --ember-l:#FF9296;

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  --font:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
  --mono:'SF Mono',ui-monospace,'JetBrains Mono',Menlo,monospace;

  --sh-sm:0 2px 8px rgba(0,0,0,.3);
  --sh-md:0 8px 28px rgba(0,0,0,.36);
  --sh-lg:0 24px 64px rgba(0,0,0,.44);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg-deep); color:var(--txt);
  font-family:var(--font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.02em;
}

/* ---------- Ambient light. One source, from above. ---------- */
.glow-top{position:relative; overflow-x:hidden}
.glow-top::before{
  content:''; position:fixed; top:-340px; left:50%; transform:translateX(-50%);
  width:1200px; height:700px; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(108,92,231,.2), transparent 70%),
    radial-gradient(ellipse 30% 40% at 30% 40%, rgba(224,86,140,.10), transparent 70%);
}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px; position:relative; z-index:1}
.wrap-sm{max-width:860px}

/* ---------- Icons ---------- */
.ic{width:1em; height:1em; stroke:currentColor; fill:none;
    stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
    flex-shrink:0; vertical-align:-.125em}
.ic-lg{width:1.35em; height:1.35em}
.ic-xl{width:22px; height:22px}
svg.sprite{position:absolute; width:0; height:0; overflow:hidden}

/* ---------- Nav ---------- */
.nav{
  display:flex; align-items:center; gap:4px; padding:16px 0;
  position:sticky; top:0; z-index:40;
  background:rgba(5,4,16,.74); backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--stroke);
}
.brand{display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
  color:#fff; text-decoration:none; letter-spacing:-.02em; margin-right:26px}
.brand .mark{
  width:28px; height:28px; border-radius:10px; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 26%,#D6CEFF,#6C5CE7 52%,#2A1D7A);
  box-shadow:0 0 18px rgba(108,92,231,.3), inset 0 1px 1px rgba(255,255,255,.3);
  font-size:11px; color:#fff;
}
.nav a:not(.brand){
  color:var(--txt-3); text-decoration:none; font-size:13px; font-weight:500;
  padding:8px 12px; border-radius:var(--r-sm); transition:.16s;
}
.nav a:not(.brand):hover{color:var(--txt-2); background:var(--glass)}
.nav a.on{color:#fff; background:var(--glass-2)}
.nav .sp{flex:1}

/* ---------- Type ---------- */
h1{font-size:40px; font-weight:700; letter-spacing:-.035em; line-height:1.08; margin:0 0 8px}
h2{font-size:24px; font-weight:600; letter-spacing:-.02em; margin:0 0 4px}
h3{font-size:15px; font-weight:600; letter-spacing:-.02em; margin:0}
.lede{color:var(--txt-2); font-size:15px; line-height:1.62; margin:0}
.label{
  color:var(--txt-4); font-size:10px; letter-spacing:.16em; font-weight:700;
  text-transform:uppercase; margin:40px 0 12px; display:flex; align-items:center; gap:8px;
}
.label::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--stroke),transparent)}
.muted{color:var(--txt-3); font-size:13px}
.dim{color:var(--txt-4); font-size:11.5px}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* ---------- Surfaces ---------- */
.card{
  background:var(--glass); backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--stroke); border-radius:var(--r-lg); padding:20px;
  position:relative;
}
.card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
  pointer-events:none;
}
.card-tint-mint {background:linear-gradient(158deg,rgba(43,196,138,.13),rgba(43,196,138,.02)); border-color:rgba(110,231,183,.24)}
.card-tint-gold {background:linear-gradient(158deg,rgba(245,166,35,.12),rgba(245,166,35,.015)); border-color:rgba(255,208,137,.22)}
.card-tint-iris {background:linear-gradient(158deg,rgba(108,92,231,.12),rgba(108,92,231,.06)); border-color:var(--stroke-2)}
.card-tint-rose {background:linear-gradient(158deg,rgba(224,86,140,.13),rgba(224,86,140,.02)); border-color:rgba(255,156,196,.22)}
.card-tint-ember{background:linear-gradient(158deg,rgba(255,90,95,.10),rgba(255,90,95,.015)); border-color:rgba(255,90,95,.20)}
.card-hover{transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s; cursor:pointer; text-decoration:none; color:inherit; display:block}
.card-hover:hover{transform:translateY(-3px); border-color:var(--stroke-3); box-shadow:var(--sh-md)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; padding:12px 20px; border-radius:var(--r-sm);
  font-family:inherit; font-size:13.5px; font-weight:600; letter-spacing:-.02em;
  cursor:pointer; text-decoration:none; transition:.16s; white-space:nowrap;
}
.btn-white{background:#fff; color:#0D0B18; box-shadow:0 4px 18px rgba(255,255,255,.10)}
.btn-white:hover{background:#EFECFF; transform:translateY(-1px)}
.btn-ghost{background:var(--glass-2); color:#fff; border:1px solid var(--stroke-2); backdrop-filter:blur(14px)}
.btn-ghost:hover{background:var(--glass-3); border-color:var(--stroke-3)}
.btn-gold{background:linear-gradient(135deg,#FFC15E,#E89312); color:#241902; box-shadow:0 4px 18px rgba(245,166,35,.26)}
.btn-gold:hover{transform:translateY(-1px)}
.btn-sm{padding:8px 16px; font-size:12.5px}

/* ---------- Pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:4px; padding:4px 12px;
  border-radius:var(--r-pill); font-size:10px; font-weight:700; letter-spacing:.05em;
  white-space:nowrap; line-height:1;
}
.pill-mint {background:rgba(43,196,138,.16);  color:var(--mint-l);  box-shadow:inset 0 0 0 1px rgba(110,231,183,.2)}
.pill-gold {background:rgba(245,166,35,.16);  color:var(--gold-l);  box-shadow:inset 0 0 0 1px rgba(255,208,137,.2)}
.pill-iris {background:rgba(108,92,231,.2);  color:var(--iris-l);  box-shadow:inset 0 0 0 1px rgba(163,148,255,.22)}
.pill-rose {background:rgba(224,86,140,.16);  color:var(--rose-l);  box-shadow:inset 0 0 0 1px rgba(255,156,196,.2)}
.pill-ember{background:rgba(255,90,95,.14);   color:var(--ember-l); box-shadow:inset 0 0 0 1px rgba(255,90,95,.2)}
.pill-dim  {background:rgba(255,255,255,.05); color:var(--txt-4);   box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

.dot{width:6px; height:6px; border-radius:50%; display:inline-block; flex-shrink:0}
.dot-live{background:var(--mint); animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(43,196,138,.20)}50%{box-shadow:0 0 0 7px rgba(43,196,138,.04)}}

/* ---------- Verdict chips ---------- */
.vd{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700;
    padding:4px 12px; border-radius:var(--r-xs); letter-spacing:.04em; white-space:nowrap}
.vd-correct{background:rgba(43,196,138,.14); color:var(--mint-l); box-shadow:inset 0 0 0 1px rgba(110,231,183,.22)}
.vd-miss   {background:rgba(255,90,95,.12);  color:var(--ember-l);box-shadow:inset 0 0 0 1px rgba(255,90,95,.22)}
.vd-void   {background:rgba(255,255,255,.04);color:var(--txt-4);  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.vd-open   {background:rgba(245,166,35,.13); color:var(--gold-l); box-shadow:inset 0 0 0 1px rgba(255,208,137,.22)}

/* ---------- Avatar ---------- */
.av{border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700;
    flex-shrink:0; box-shadow:inset 0 1px 1px rgba(255,255,255,.22), 0 2px 8px rgba(0,0,0,.3)}
.av-sq{border-radius:var(--r-sm)}

/* ---------- Bars ---------- */
.bar{height:6px; background:rgba(0,0,0,.42); border-radius:var(--r-pill); overflow:hidden;
     box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.bar>i{display:block; height:100%; border-radius:var(--r-pill)}
.bar-seg{display:flex; height:9px; border-radius:var(--r-pill); overflow:hidden; gap:0px}
.bar-seg>i{display:block; height:100%}

/* ---------- Stat tile ---------- */
.tile{background:var(--glass); border:1px solid var(--stroke); border-radius:var(--r-md);
  padding:16px 12px; text-align:center; backdrop-filter:blur(16px)}
.tile .v{font-size:24px; font-weight:700; letter-spacing:-.05em; line-height:1}
.tile .l{color:var(--txt-4); font-size:9.5px; letter-spacing:.15em; font-weight:700; margin-top:8px}

/* ---------- Layout ---------- */
.row{display:flex; align-items:center; gap:12px}
.col{display:flex; flex-direction:column}
.sp{flex:1}
.g2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.g4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Lists ---------- */
.list{background:var(--glass); border:1px solid var(--stroke); border-radius:var(--r-lg);
      overflow:hidden; backdrop-filter:blur(20px)}
.list-hd{display:flex; gap:12px; padding:12px 20px; border-bottom:1px solid var(--stroke);
  color:var(--txt-4); font-size:9.5px; letter-spacing:.15em; font-weight:700; text-transform:uppercase}
.lrow{display:flex; align-items:center; gap:12px; padding:16px 20px;
      border-bottom:1px solid rgba(163,148,255,.07); transition:background .15s}
.lrow:last-child{border-bottom:none}
.lrow:hover{background:rgba(139,124,246,.035)}

/* ---------- Filter chips ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:var(--glass); border:1px solid var(--stroke); color:var(--txt-3);
  padding:8px 16px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:.15s; display:inline-flex; align-items:center; gap:8px}
.chip:hover{border-color:var(--stroke-2); color:var(--txt-2)}
.chip.on{background:#fff; color:#0D0B18; border-color:transparent; font-weight:600}

/* ---------- Paywall ---------- */
.blurred{filter:blur(7px); user-select:none; pointer-events:none; opacity:.72}
.paywall{position:relative; overflow:hidden}
.paywall-ov{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px;
  background:radial-gradient(circle at 50% 50%, rgba(7,6,15,.60), rgba(7,6,15,.88))}

/* ---------- Price ladder ---------- */
.ladder{position:relative; height:40px; margin:16px 0 4px}
.ladder-track{position:absolute; top:20px; left:0; right:0; height:4px; border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(255,90,95,.35),rgba(255,255,255,.09) 45%,rgba(43,196,138,.35))}
.ladder-pt{position:absolute; top:13px; width:18px; height:18px; border-radius:50%;
  border:3px solid var(--bg); transform:translateX(-50%)}
.ladder-lb{position:absolute; top:-2px; transform:translateX(-50%); font-size:9px;
  letter-spacing:.1em; font-weight:700; color:var(--txt-4); white-space:nowrap}

.spark{width:100%; height:46px; display:block}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--stroke); margin-top:64px; padding:32px 0 64px;
  color:var(--txt-4); font-size:11.5px; line-height:1.8}

/* ---------- Demo banner ---------- */
.demo-banner{
  background:linear-gradient(90deg,rgba(245,166,35,.06),rgba(245,166,35,.13),rgba(245,166,35,.06));
  border-bottom:1px solid rgba(255,208,137,.18);
  color:var(--gold-l); font-size:11.5px; text-align:center; padding:8px 16px;
  font-weight:600; position:relative; z-index:41;
  display:flex; align-items:center; justify-content:center; gap:8px;
}

/* ---------- Device frame ---------- */
.device{width:394px; margin:0 auto; background:var(--bg); border-radius:28px;
  border:1px solid var(--stroke-2); box-shadow:var(--sh-lg), 0 0 80px rgba(108,92,231,.12);
  overflow:hidden; position:relative}
.device-glow{position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:480px; height:420px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center,rgba(108,92,231,.3),transparent 68%)}

/* ---------- Brand imagery (use sparingly) ---------- */
.brandmark{height:26px; width:auto; display:block}
.mascot{display:block; max-width:100%; height:auto}
.mascot-sm{width:104px}
.mascot-md{width:150px}
/* mascots ship on a flat purple plate; blend it into the canvas */
.mascot-blend{mix-blend-mode:screen; filter:brightness(1.06) contrast(1.04)}
.av-img{object-fit:cover; border-radius:50%}

/* ============================================================
   FIGMA PARITY — corrections from BAE Agents App (Prod)
   The signature is a BOTTOM-LIT vertical gradient, not a top glow.
   ============================================================ */
:root{
  --blue:#1B5CF0;      /* the bottom of the brand gradient */
  --blue-l:#4B86FF;
  --violet:#3B2F9E;    /* mid stop */
}

/* Canvas gradient: near-black at top, violet mid, bright blue at the base */
.fig-grad{
  background:
    linear-gradient(180deg,
      #0A0912 0%,
      #14102A 26%,
      #2A1F5E 52%,
      #3B2F9E 74%,
      #2749D6 90%,
      #1B5CF0 100%);
}
/* Softer variant for long scrolling screens */
.fig-grad-soft{
  background:
    linear-gradient(180deg,
      #0A0912 0%,
      #14102A 34%,
      #221A4A 62%,
      #2E257A 84%,
      #2C46B4 100%);
}

/* Figma input: frosted lavender, no border, brightens down the page */
.fld{
  width:100%; border:none; border-radius:14px;
  padding:16px 16px; font-family:inherit; font-size:14.5px; color:#fff;
  background:rgba(214,206,255,.16); backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10);
}
.fld::placeholder{color:rgba(255,255,255,.62)}
.fld:focus{outline:none; background:rgba(214,206,255,.24)}
.fld-wrap{position:relative; margin-bottom:12px}
.fld-eye{position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.6); cursor:pointer}

/* Figma buttons */
.btn-fig{width:100%; padding:16px; border-radius:14px; font-size:15px; font-weight:700;
  border:none; cursor:pointer; font-family:inherit; letter-spacing:-.02em}
.btn-fig-white{background:#fff; color:#14121F}
.btn-fig-goog{background:rgba(58,72,190,.55); color:#fff; backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center; gap:12px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12)}

/* Circular back button */
.circ-btn{width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.5); background:transparent; color:#fff; cursor:pointer}

/* Figma headings — large, regular weight, not bold */
.fig-h{font-size:34px; font-weight:500; letter-spacing:-.02em; margin:0 0 8px; color:#fff}
.fig-sub{color:rgba(255,255,255,.56); font-size:14px; line-height:1.5; margin:0 0 32px}
.fig-foot{text-align:center; font-size:13.5px; color:rgba(255,255,255,.62); margin-top:20px}
.fig-foot b{color:#fff; font-weight:700}

/* Glass panel that reads correctly over the bright base of the gradient */
.gpanel{background:rgba(255,255,255,.07); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:16px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.09)}

/* Rarity ramps for Summon */
.rar-ssr{background:linear-gradient(135deg,#FFD089,#F5A623,#E0568C)}
.rar-sr {background:linear-gradient(135deg,#A394FF,#6C5CE7)}
.rar-r  {background:linear-gradient(135deg,#6EE7B7,#2BC48A)}

/* Spin wheel */
.wheel{width:246px; height:246px; border-radius:50%; margin:0 auto; position:relative;
  box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 14px 44px rgba(0,0,0,.5)}
.wheel-pin{position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent;
  border-top:20px solid #fff; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); z-index:3}
.wheel-hub{position:absolute; inset:38%; border-radius:50%; background:#0A0912;
  display:grid; place-items:center; box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}

/* Incoming call */
.call-btn{width:66px; height:66px; border-radius:50%; display:grid; place-items:center; border:none; cursor:pointer}
.call-accept{background:#2BC48A; box-shadow:0 8px 28px rgba(43,196,138,.45)}
.call-decline{background:#FF5A5F; box-shadow:0 8px 28px rgba(255,90,95,.4)}