/* ─────────────────────────────────────────────────────────────
   THE RISE GLOBAL · stage preview
   Designed at a fixed 1920×1080 canvas, then scaled to the wall.
   ───────────────────────────────────────────────────────────── */

:root{
  --ink:#050a12;
  --ink-2:#0a1524;
  --brand:#4092cc;
  --brand-2:#96c6e6;
  --ivory:#eaf2f9;
  --muted:#93a6bb;
  --line:rgba(64,146,204,.24);
  --line-soft:rgba(255,255,255,.08);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#000;overflow:hidden}
body{font-family:var(--sans);color:var(--ivory);-webkit-font-smoothing:antialiased}

/* ── canvas ─────────────────────────────────────────────── */
.stage{
  position:absolute;left:50%;top:50%;
  width:1920px;height:1080px;
  transform-origin:center center;
  background:
    radial-gradient(120% 85% at 50% -10%, #17324c 0%, #0b1a2b 42%, #060c15 78%, #04070d 100%);
  overflow:hidden;
}
.stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(64,146,204,.05), transparent 30%);
}
.stage::after{ /* fine gold hairline grid, very faint */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:
    linear-gradient(rgba(64,146,204,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64,146,204,.10) 1px, transparent 1px);
  background-size:120px 120px;
  mask-image:radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 78%);
}

/* ── scenes ─────────────────────────────────────────────── */
.scene{
  position:absolute;inset:0;
  padding:96px 110px 120px;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .55s ease;
}
.scene.active{opacity:1;pointer-events:auto}

.eyebrow{
  font-size:19px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brand);margin-bottom:26px;font-weight:500;
}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:82px;line-height:1.1;letter-spacing:-.012em;
  color:var(--ivory);
}
.sub{
  font-size:29px;line-height:1.55;color:var(--muted);
  margin-top:28px;max-width:1080px;
}
.head-wide h1{max-width:1500px}
.head-tight h1{max-width:1200px}

.footline{
  margin-top:44px;font-size:24px;color:#b7c0cf;letter-spacing:.01em;
}
.footline::before{
  content:"";display:inline-block;width:46px;height:1px;background:var(--brand);
  vertical-align:middle;margin-right:20px;opacity:.8;
}
.demo-tag{
  position:absolute;right:110px;bottom:74px;
  font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:rgba(153,162,178,.5);
}

/* ── animation primitives ───────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slidein{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes scalein{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes drawline{from{stroke-dashoffset:700}to{stroke-dashoffset:0}}
@keyframes growline{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes pop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes ringPulse{0%{opacity:.5;transform:scale(.9)}100%{opacity:0;transform:scale(2.6)}}
@keyframes sheen{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.anim{opacity:0}
.run .anim{animation:rise .9s cubic-bezier(.22,.72,.2,1) both;animation-delay:calc(var(--i,0)*0ms)}
.run .anim:nth-of-type(1){animation-delay:.05s}
.run .anim:nth-of-type(2){animation-delay:.22s}
.run .anim:nth-of-type(3){animation-delay:.39s}
.run .anim:nth-of-type(4){animation-delay:.56s}
.run .anim:nth-of-type(5){animation-delay:.73s}
.run .anim:nth-of-type(6){animation-delay:.9s}

.stagger>*{opacity:0}
.run .stagger>*{animation:rise .75s cubic-bezier(.22,.72,.2,1) both;animation-delay:calc(.35s + var(--i,0)*.11s)}

/* ── chips / badges ─────────────────────────────────────── */
.chips{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.chip{
  font-size:18px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 24px;border:1px solid var(--line);border-radius:999px;
  color:#c8cfdb;background:rgba(255,255,255,.02);
}
.chip.on{border-color:rgba(64,146,204,.85);color:var(--brand-2);background:rgba(64,146,204,.09)}

/* ═══════════ 01 · OPEN ═══════════ */
.scene-open{align-items:center;justify-content:center;text-align:center}
.open-wrap{display:flex;flex-direction:column;align-items:center}
.open-line{
  font-family:var(--serif);font-size:64px;line-height:1.24;color:var(--ivory);
  letter-spacing:-.01em;
}
.open-line:first-of-type{margin-top:0}
.open-line+.open-line{color:var(--brand-2)}
.open-rule{
  width:180px;height:1px;margin:38px 0;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
}
.run .open-rule{transform-origin:center;animation:growline 1.1s ease both}
.open-mark{display:flex;flex-direction:column;align-items:center;margin-top:64px}
.brand-lockup{
  display:block;height:168px;width:auto;
  filter:drop-shadow(0 0 46px rgba(64,146,204,.3));
}
.scene-close .brand-lockup{height:196px}
.brand-global{
  font-size:19px;letter-spacing:.6em;color:var(--brand-2);
  margin-top:24px;padding-left:.6em;
}
.open-tag{margin-top:46px;font-size:26px;color:var(--muted);letter-spacing:.02em}
.open-launch{
  margin-top:18px;font-size:17px;letter-spacing:.3em;text-transform:uppercase;color:var(--brand);
}

/* ═══════════ 02 · GLOBE ═══════════ */
.scene-split{display:grid;grid-template-columns:820px 1fr;align-items:center;gap:40px}
.scene-split .head{grid-column:1;grid-row:1;align-self:center}
.fineprint{margin-top:22px;font-size:18px; letter-spacing:.13em;text-transform:uppercase;color:rgba(153,162,178,.65)}

.globe-wrap{
  grid-column:2;grid-row:1;position:relative;
  width:880px;height:660px;justify-self:center;
  display:flex;align-items:center;justify-content:center;
}
.ring-glow{
  position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle, rgba(64,146,204,.16) 0%, rgba(64,146,204,.05) 42%, transparent 68%);
}
.ring{position:absolute;inset:0}
.ring-inner{
  position:absolute;width:300px;height:300px;border-radius:50%;
  border:1px solid rgba(64,146,204,.22);
}
.ring-inner::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(64,146,204,.5);
  animation:ringPulse 4.5s ease-out infinite;
}
.ring-item{
  position:absolute;left:50%;top:50%;
  font-size:16px;letter-spacing:.15em;text-transform:uppercase;
  color:#aeb7c6;white-space:nowrap;
  transform-origin:0 0;
}
.ring-item span{
  position:absolute;transform:translate(-50%,-50%);
  padding:6px 12px;border-radius:999px;background:rgba(6,9,16,.72);
  border:1px solid rgba(255,255,255,.055);
}
.ring-item.accent{color:var(--brand-2)}
.ring-center{position:relative;text-align:center}
.big-num{
  font-family:var(--serif);font-size:170px;line-height:.9;color:var(--ivory);
  display:flex;align-items:flex-start;justify-content:center;
}
.big-num .plus{font-size:90px;color:var(--brand);margin-top:8px}
.big-label{
  font-size:18px;letter-spacing:.4em;text-transform:uppercase;color:var(--brand);
  margin-top:18px;padding-left:.4em;
}
.stats{
  grid-column:1 / -1;grid-row:2;display:flex;gap:96px;margin-top:34px;margin-left:0;
  border-top:1px solid var(--line-soft);padding-top:30px;
}
.stat b{
  display:block;font-family:var(--serif);font-size:52px;font-weight:400;color:var(--ivory);
}
.stat span{
  display:block;margin-top:8px;font-size:16px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(153,162,178,.8);
}

/* ═══════════ 03 · DELEGATE ═══════════ */
.journey{display:flex;gap:90px;align-items:center;margin-top:56px}
.device{
  width:430px;flex:0 0 430px;border-radius:34px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,#101728,#080c16);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 8px rgba(255,255,255,.02);
}
.dev-top{
  display:flex;align-items:center;gap:10px;
  padding:20px 26px;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:rgba(153,162,178,.85);
}
.dev-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 12px var(--brand)}
.dev-body{padding:30px 30px 0}
.dev-hi{font-family:var(--serif);font-size:34px;color:var(--ivory)}
.dev-p{font-size:17px;line-height:1.55;color:var(--muted);margin-top:12px}
.dev-p b{color:#dfe5ef;font-weight:500}
.steps{margin-top:30px;display:flex;flex-direction:column;gap:0}
.step{
  display:flex;align-items:center;gap:16px;
  font-size:17px;color:#9aa4b4;padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.step i{
  width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:inline-block;position:relative;flex:0 0 18px;
}
.step.done i{border-color:rgba(64,146,204,.7);background:rgba(64,146,204,.22)}
.step.done i::after{
  content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;
  border-right:1.5px solid var(--brand-2);border-bottom:1.5px solid var(--brand-2);
  transform:rotate(40deg);
}
.step.live{color:var(--brand-2)}
.step.live i{border-color:var(--brand);box-shadow:0 0 0 4px rgba(64,146,204,.12)}
.dev-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;padding:26px 0 30px;font-size:17px;color:var(--brand-2);
  letter-spacing:.04em;
}
.dev-foot .arrow{font-size:22px}

.met{flex:1}
.met-label{
  font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--brand);
  margin-bottom:22px;
}
.people{display:flex;flex-direction:column;gap:14px}
.run .people>.pcard{animation:slidein .75s cubic-bezier(.22,.72,.2,1) both;animation-delay:calc(.45s + var(--i,0)*.16s)}
.pcard{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:22px;
  padding:20px 26px;border:1px solid rgba(255,255,255,.08);border-radius:16px;
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  opacity:0;
}
.avatar{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;letter-spacing:.06em;color:var(--brand-2);
  border:1px solid rgba(64,146,204,.35);background:rgba(64,146,204,.08);
}
.pname{font-size:25px;color:var(--ivory)}
.prole{font-size:17px;color:var(--muted);margin-top:5px}
.ptag{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-2);border:1px solid var(--line);border-radius:999px;padding:8px 15px;
}
.met-note{margin-top:26px;font-size:19px;line-height:1.55;color:rgba(153,162,178,.85);max-width:760px}

/* ═══════════ 04 · DIRECTORY ═══════════ */
.searchwrap{margin-top:46px}
.searchbar{
  display:flex;align-items:center;gap:22px;width:1180px;max-width:100%;
  padding:26px 34px;border:1px solid rgba(64,146,204,.32);border-radius:16px;
  background:rgba(255,255,255,.035);position:relative;overflow:hidden;
}
.searchbar::after{
  content:"";position:absolute;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(64,146,204,.14),transparent);
  animation:sheen 3.4s ease-in-out 1.2s infinite;
}
.sicon{font-size:34px;color:var(--brand);line-height:1}
.splace{font-size:26px;color:#8e97a7;letter-spacing:.01em}
.filters{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.card{
  padding:30px 28px 26px;border:1px solid rgba(255,255,255,.09);border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  min-height:270px;position:relative;
}
.cav{
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(64,146,204,.4);color:var(--brand-2);font-size:18px;letter-spacing:.08em;
  margin-bottom:22px;background:rgba(64,146,204,.08);
}
.cname{font-size:25px;color:var(--ivory)}
.crole{font-size:18px;color:#b3bccb;margin-top:8px}
.cloc{font-size:16px;color:rgba(153,162,178,.8);margin-top:6px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.badges span{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-2);
  border:1px solid rgba(64,146,204,.28);border-radius:999px;padding:6px 12px;
}
.card-private{
  border-style:dashed;border-color:rgba(64,146,204,.4);
  background:linear-gradient(180deg, rgba(64,146,204,.06), rgba(255,255,255,.008));
}
.card-private .lock{
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--brand);border:1px solid rgba(64,146,204,.35);margin-bottom:22px;
}
.card-private .cname{color:var(--brand-2);font-family:var(--serif);font-size:27px}
.card-private .cloc{color:var(--brand-2);opacity:.9;margin-top:14px}

/* ═══════════ 05 · EXCHANGE ═══════════ */
.exchange{display:flex;align-items:center;gap:34px;margin-top:54px}
.panel{
  flex:1;padding:44px 42px;border-radius:20px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  min-height:280px;
}
.panel.need{border-left:2px solid rgba(64,146,204,.75)}
.panel.give{border-right:2px solid rgba(64,146,204,.75)}
.panel-label{
  font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--brand);margin-bottom:20px;
}
.panel-title{font-family:var(--serif);font-size:38px;line-height:1.25;color:var(--ivory);max-width:600px}
.panel-list{margin-top:26px;list-style:none;display:flex;flex-direction:column;gap:12px}
.panel-list li{
  font-size:19px;color:#a9b2c1;padding-left:26px;position:relative;
}
.panel-list li::before{
  content:"";position:absolute;left:0;top:11px;width:12px;height:1px;background:var(--brand);opacity:.8;
}
.bridge{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 240px}
.bline{stroke:rgba(64,146,204,.7);stroke-width:1.5;stroke-dasharray:5 7}
.barrow{stroke:var(--brand);stroke-width:1.5;fill:none}
.run .bridge .bline{stroke-dasharray:5 7;animation:fade 1s ease .5s both}
.run .bridge .barrow{animation:fade .8s ease 1s both}
.bridge-tag{
  font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--brand);
}
.flow{display:flex;gap:0;margin-top:46px;border-top:1px solid var(--line-soft);padding-top:34px}
.fstep{flex:1;display:flex;gap:18px;align-items:baseline;padding-right:30px}
.fstep b{font-family:var(--serif);font-size:26px;color:var(--brand);font-weight:400}
.fstep span{font-size:19px;line-height:1.45;color:#aab3c2;max-width:340px}

/* ═══════════ 06 · GRAPH ═══════════ */
.graphwrap{margin-top:-10px;height:600px}
#graph{width:100%;height:100%;overflow:visible}
#graph .n{opacity:0}
#graph .lbl{opacity:0}
#graph .tag{opacity:0}
.run #graph .n{animation:scalein .6s ease both;animation-delay:calc(.15s + var(--i,0)*.045s)}
.run #graph .e{stroke-dasharray:700;stroke-dashoffset:700;animation:drawline 1.1s ease forwards;animation-delay:calc(.35s + var(--ei,0)*.05s)}
.run #graph .lbl{animation:fade .7s ease both;animation-delay:1.5s}
.run #graph .tag{animation:fade .9s ease both;animation-delay:1.1s}
.pathline{
  display:flex;align-items:center;gap:18px;margin-top:12px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);padding-top:30px;
}
.pnode{
  font-size:19px;letter-spacing:.16em;text-transform:uppercase;color:#c4ccd9;
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:10px 20px;
}
.pnode.hi{border-color:rgba(64,146,204,.65);color:var(--brand-2);background:rgba(64,146,204,.1)}
.parrow{color:var(--brand);font-size:20px}
.pnote{margin-left:auto;font-size:18px;color:rgba(153,162,178,.85);letter-spacing:.01em}

/* ═══════════ 07 · ECOSYSTEMS ═══════════ */
.ecos{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px;
}
.etile{
  padding:22px 22px;border:1px solid rgba(255,255,255,.08);border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
  min-height:120px;
}
.eabbr{font-family:var(--serif);font-size:29px;color:var(--brand-2);letter-spacing:.02em}
.ename{font-size:15px;line-height:1.4;color:#a3adbd;margin-top:10px}
.etile.cta{
  grid-column:span 2;display:flex;flex-direction:column;justify-content:center;
  border-color:rgba(64,146,204,.5);background:linear-gradient(120deg, rgba(64,146,204,.12), rgba(64,146,204,.02));
}
.etile.cta .eabbr{font-size:26px}
.etile.cta .ename{color:var(--brand-2);opacity:.9}

/* ═══════════ 08 · CONSOLE ═══════════ */
.console{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.con-left,.con-right{
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:32px 34px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.con-title{
  font-size:22px;color:var(--ivory);display:flex;align-items:center;gap:14px;
  letter-spacing:.02em;margin-bottom:24px;
}
.pill{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 12px;color:#b6bfcd;
}
.pill.live{border-color:rgba(64,146,204,.6);color:var(--brand-2);background:rgba(64,146,204,.1)}
.roster{display:flex;flex-direction:column}
.rrow{
  display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:16px;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:18px;
}
.rav{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--brand-2);border:1px solid rgba(64,146,204,.3);background:rgba(64,146,204,.07);
}
.rname{color:#dfe4ec}
.rrole{font-size:15px;color:rgba(153,162,178,.85);letter-spacing:.06em}
.rdue{font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:6px}
.rdue.ok{color:#9fc4a8;background:rgba(120,180,140,.1)}
.rdue.warn{color:#e0c07f;background:rgba(224,192,127,.1)}
.con-meta{margin-top:22px;font-size:16px;color:rgba(153,162,178,.85)}
.agenda{display:flex;flex-direction:column;gap:0}
.arow{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:17px;color:#8f99a9;
}
.arow b{font-family:var(--serif);font-weight:400;color:rgba(64,146,204,.75);font-size:16px}
.arow .am{font-size:14px;letter-spacing:.1em;color:rgba(153,162,178,.6)}
.arow.done{color:#c2c9d4}
.arow.now{color:var(--brand-2)}
.arow.now b{color:var(--brand)}
.arow.now::after{
  content:"in progress";grid-column:3;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);
}
.arow.now .am{display:none}
.con-foot{
  display:flex;align-items:center;justify-content:space-between;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.07);
}
.clock{font-family:var(--serif);font-size:30px;color:var(--ivory);letter-spacing:.04em}
.filed{font-size:15px;color:#9fc4a8;letter-spacing:.04em}

/* ═══════════ 09 · CULTURE ═══════════ */
.culture{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.ccard{
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:38px 34px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  min-height:330px;display:flex;flex-direction:column;
}
.ccard b{font-family:var(--serif);font-size:30px;color:rgba(64,146,204,.8);font-weight:400}
.ctitle{font-family:var(--serif);font-size:31px;line-height:1.25;color:var(--ivory);margin-top:24px}
.cbody{font-size:19px;line-height:1.6;color:#a9b2c1;margin-top:18px}
.cmini{
  margin-top:auto;padding-top:24px;font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(64,146,204,.75);
}
.creed{
  margin-top:52px;text-align:center;font-family:var(--serif);font-size:40px;
  letter-spacing:.06em;color:var(--brand-2);
}
.creed::before,.creed::after{
  content:"";display:inline-block;width:80px;height:1px;background:var(--line);
  vertical-align:middle;margin:0 34px;
}

/* ═══════════ 10 · CLOSE ═══════════ */
.scene-close{align-items:center;justify-content:center;text-align:center}
.close-wrap{display:flex;flex-direction:column;align-items:center}
.close-verbs{
  font-family:var(--serif);font-size:52px;letter-spacing:.08em;color:var(--ivory);
  margin-bottom:44px;
}
.close-tamil{
  margin-top:52px;font-size:40px;color:var(--brand-2);line-height:1.5;
}
.close-url{
  margin-top:16px;font-size:25px;letter-spacing:.1em;color:var(--brand-2);
  text-transform:none;font-family:var(--sans);
}

/* ── chrome ─────────────────────────────────────────────── */
.chrome{
  position:absolute;left:110px;right:110px;bottom:56px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:rgba(153,162,178,.5);
  pointer-events:none;
}
.chrome .sep{opacity:.5;margin:0 6px}
.chrome-left{display:flex;align-items:center;gap:16px}
.chrome-mark{height:22px;width:auto;opacity:.85}
.chrome .of{opacity:.5}
.progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06);
}
#bar{
  height:100%;width:10%;background:linear-gradient(90deg,#2b6f9e,var(--brand-2));
  transition:width .6s cubic-bezier(.22,.72,.2,1);
}
.hint{
  position:absolute;left:50%;bottom:92px;transform:translateX(-50%);
  font-size:14px;letter-spacing:.14em;color:rgba(153,162,178,.45);
  transition:opacity .8s ease;pointer-events:none;
}
.hint.hide{opacity:0}
.notes{
  display:none;position:absolute;left:110px;bottom:104px;max-width:760px;
  padding:18px 22px;border-left:2px solid var(--brand);
  background:rgba(8,11,18,.82);font-size:17px;line-height:1.5;color:#cfd6e0;
}
.notes.on{display:block}