/* ============================================================================
   COMPONENTS — glass cards, gold button, plaque, counters, carousel, props
   ============================================================================ */

/* ---- Glass card ---------------------------------------------------------- */
.glass{
  background:var(--glass-bg);
  border:var(--hairline) solid var(--glass-brd-2);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.1);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.1);
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
}
.glass::before{   /* top gold hairline highlight */
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-glow), transparent);
}
.glass--gold{ border-color:var(--glass-brd); }

/* ---- Logos / brand lockup ------------------------------------------------ */
.logo-row{ display:flex; align-items:center; justify-content:center; gap:64px; }
.logo{
  display:grid; place-items:center;
  width:160px; height:160px; border-radius:20px;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:var(--hairline) solid var(--glass-brd);
  box-shadow:var(--glow-gold);
}
.logo img{ width:74%; height:74%; object-fit:contain; }
.logo--sm{ width:96px; height:96px; }

/* ---- Headings ------------------------------------------------------------ */
.display-xl{ font-family:var(--font-display); font-weight:600; font-size:118px; line-height:1.02; letter-spacing:.01em; }
.display-lg{ font-family:var(--font-display); font-weight:600; font-size:84px;  line-height:1.05; }
.display-md{ font-family:var(--font-display); font-weight:600; font-size:60px;  line-height:1.1; }
.title-ui{   font-family:var(--font-ui); font-weight:300; font-size:30px; letter-spacing:.18em; text-transform:uppercase; color:var(--white-2); }
.subtitle{   font-size:26px; letter-spacing:.06em; color:var(--muted); font-weight:300; }

.sheen-title{
  background:linear-gradient(100deg,var(--gold-2) 20%,#fff 38%,var(--gold-hi) 50%,var(--gold-2) 64%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 6s ease-in-out infinite;
}

/* ---- THE GOLD SEAL BUTTON (Screen 3) ------------------------------------- */
.inaugurate-wrap{ display:grid; place-items:center; gap:54px; }
.seal-btn{
  position:relative; width:340px; height:340px; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:
    radial-gradient(circle at 50% 32%, #FFF6DC 0%, var(--gold-hi) 14%, var(--gold-3) 34%, var(--gold-2) 58%, var(--gold-1) 82%, #8a6608 100%);
  box-shadow:
    0 0 0 2px rgba(255,233,168,.5),
    0 0 0 14px rgba(228,197,107,.10),
    0 26px 60px rgba(0,0,0,.55),
    inset 0 4px 12px rgba(255,255,255,.55),
    inset 0 -16px 34px rgba(120,80,0,.45);
  color:#3a2a05;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  animation:goldBreath 3.6s ease-in-out infinite;
  isolation:isolate;
}
.seal-btn::before{ /* engraved inner ring */
  content:""; position:absolute; inset:24px; border-radius:50%;
  border:2px dashed rgba(90,64,8,.45);
}
.seal-btn::after{ /* moving glass highlight */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(120deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  background-size:260% 100%; animation:sheen 5s ease-in-out infinite; mix-blend-mode:screen;
}
.seal-btn:hover{ transform:translateY(-4px) scale(1.03); }
.seal-btn:active{ transform:translateY(0) scale(.97); }
.seal-btn .seal-inner{ position:relative; z-index:2; padding:0 40px; }
.seal-btn .seal-emblem{ font-size:54px; margin-bottom:10px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.seal-btn .seal-label{
  font-family:var(--font-ui); font-weight:700; font-size:19px; line-height:1.25;
  letter-spacing:.10em; text-transform:uppercase;
}
.seal-ring{
  position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(228,197,107,.5); pointer-events:none;
  animation:ringPulse 2.8s ease-out infinite;
}
.seal-ring.r2{ animation-delay:1.4s; }
.seal-hint{ font-size:16px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }

.press-ripple{
  position:absolute; left:50%; top:50%; width:340px; height:340px;
  margin:-170px 0 0 -170px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,233,168,.6), transparent 60%);
  animation:ripple .9s ease-out forwards; pointer-events:none; z-index:3;
}

/* ---- Generic content cards (overview, roadmap) --------------------------- */
.card-grid{ display:grid; gap:34px; width:100%; max-width:1500px; }
.card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.card-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.info-card{ padding:42px 44px; text-align:left; }
.info-card .ic-key{
  font-family:var(--font-ui); font-size:16px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-3); margin-bottom:16px; display:flex; align-items:center; gap:14px;
}
.info-card .ic-key::before{ content:""; width:34px; height:2px; background:var(--grad-gold); box-shadow:0 0 12px var(--gold-glow); }
.info-card .ic-text{ font-size:25px; line-height:1.5; color:var(--white-2); font-weight:300; }
.info-card .ic-num{ font-family:var(--font-display); font-size:40px; color:rgba(228,197,107,.35); position:absolute; right:30px; top:18px; }

/* ---- PLAQUE (Screen 6) --------------------------------------------------- */
.plaque-spot{
  position:absolute; left:50%; top:-6%; width:1200px; height:1200px; transform:translateX(-50%);
  background:radial-gradient(circle at 50% 40%, rgba(255,240,200,.18), rgba(255,240,200,0) 60%);
  z-index:-1; pointer-events:none;
}
.plaque{
  position:relative; width:1180px; max-width:90%; padding:14px;
  border-radius:18px;
  background:
    linear-gradient(135deg,#caa94e,#8a6a1f 25%,#e9d692 50%,#8a6a1f 75%,#caa94e);
  box-shadow:0 40px 110px rgba(0,0,0,.6), 0 0 60px rgba(228,197,107,.25);
}
.plaque-inner{
  position:relative; border-radius:12px; padding:64px 84px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 30% 0%, #20304f 0%, #16223c 45%, #0f1830 100%);
  border:2px solid rgba(228,197,107,.55);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06), inset 0 0 60px rgba(0,0,0,.45);
}
.plaque-inner::after{ /* marble veining hint */
  content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background:
    radial-gradient(60% 30% at 20% 12%, #fff, transparent 60%),
    radial-gradient(50% 24% at 80% 88%, #cfe0ff, transparent 60%);
}
.plaque-sweep{
  content:""; position:absolute; top:0; bottom:0; left:0; width:42%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events:none; z-index:4;
}
.plaque-authority{
  display:flex; align-items:flex-end; justify-content:center; gap:54px;
  margin-bottom:22px; padding-bottom:22px;
  border-bottom:1px solid rgba(228,197,107,.28);
}
.pa-logo{ display:flex; flex-direction:column; align-items:center; gap:11px; width:170px; }
.pa-logo img{
  height:96px; width:auto; object-fit:contain;
  background:#fbfaf5; border-radius:14px; padding:9px;
  box-shadow:0 4px 14px rgba(0,0,0,.4), inset 0 0 0 1px rgba(228,197,107,.35);
}
.pa-logo span{ font-size:12.5px; letter-spacing:.03em; color:var(--muted); text-align:center; line-height:1.25; }
.pa-emblem img{ height:112px; }
.plaque-emblem{ font-size:40px; margin-bottom:8px; opacity:.9; }
.plaque-title{
  font-family:var(--font-display); font-weight:600; font-size:54px; line-height:1.12;
  letter-spacing:.02em; margin-bottom:8px;
}
.plaque .engrave{
  background:linear-gradient(180deg,#fff4d2,#d9b85b 55%,#a07f2e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.plaque-divider{ width:160px; height:2px; margin:22px auto; background:var(--grad-gold); box-shadow:0 0 14px var(--gold-glow); }
.plaque-body{ font-size:25px; line-height:1.6; color:var(--white-2); font-weight:300; }
.plaque-body p{ margin:6px 0; }
.plaque-meta{ margin-top:30px; display:grid; gap:6px; }
.plaque-meta .pm-label{ font-size:15px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-3); }
.plaque-meta .pm-name{ font-family:var(--font-display); font-size:30px; color:var(--white); }
.plaque-meta .pm-sub{ font-size:18px; color:var(--muted); }
.plaque-foot{ margin-top:30px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.plaque-foot .pf-date{ font-size:20px; color:var(--gold-hi); letter-spacing:.06em; }
.plaque-logos{ display:flex; gap:20px; align-items:center; }
.plaque-logos .pf-logo{ display:inline-flex; }
.plaque-logos .pf-logo img{ height:62px; width:auto; }
.plaque-logos .pf-logo:not(.pf-dark) img{
  background:#fbfaf5; border-radius:11px; padding:7px;
  box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 0 0 1px rgba(228,197,107,.3);
}
.plaque-logos .pf-logo.pf-dark img{ height:70px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* ---- Lab showcase card (Screen 8) ---------------------------------------- */
.lab-stage{ width:100%; max-width:1560px; display:grid; place-items:center; }
.lab-card{
  width:100%; display:grid; grid-template-columns:1.05fr 1fr; gap:0; overflow:hidden;
  border-radius:var(--radius);
}
.lab-media{ position:relative; min-height:560px; background:#0b1630; }
.lab-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; }
.lab-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 40%, rgba(8,17,36,.85)); }
.lab-media .lab-index{
  position:absolute; left:34px; top:30px; z-index:2;
  font-family:var(--font-display); font-size:30px; color:var(--gold-hi);
  border:1px solid var(--glass-brd); border-radius:999px; padding:6px 20px; backdrop-filter:blur(6px);
}
.lab-body{ padding:50px 56px; text-align:left; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.lab-body .lab-name{ font-family:var(--font-display); font-size:48px; line-height:1.06; }
.lab-blurb{ font-size:17px; line-height:1.5; color:var(--muted); font-weight:300; max-width:680px; }
.lab-cost{
  position:absolute; right:30px; top:28px; z-index:2; text-align:right;
  font-family:var(--font-display); font-size:30px; color:var(--gold-hi);
  background:rgba(8,17,36,.55); border:1px solid var(--glass-brd); border-radius:12px;
  padding:10px 18px; backdrop-filter:blur(8px);
}
.lab-cost .lc-k{ display:block; font-family:var(--font-ui); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.lab-cols{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:6px; }
.lab-h{ font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-3); margin-bottom:12px; }
.chip-list{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-size:17px; padding:8px 16px; border-radius:999px;
  background:rgba(43,92,230,.14); border:1px solid var(--glass-brd-2); color:var(--white-2);
}
.tick-list{ list-style:none; display:grid; gap:12px; }
.tick-list li{ font-size:19px; color:var(--white-2); padding-left:30px; position:relative; line-height:1.4; }
.tick-list li::before{ content:"◆"; position:absolute; left:0; top:1px; color:var(--gold-3); font-size:14px; }

/* ---- Equipment carousel (Screen 9) --------------------------------------- */
.carousel{ position:relative; width:100%; max-width:1500px; height:660px; perspective:1600px; }
.carousel-track{ position:absolute; inset:0; transform-style:preserve-3d; }
.eq-card{
  position:absolute; left:50%; top:50%; width:520px; height:560px; margin:-280px 0 0 -260px;
  border-radius:var(--radius); overflow:hidden; text-align:left;
  transition:transform .9s cubic-bezier(.16,.84,.34,1), opacity .9s ease, filter .9s ease;
  will-change:transform,opacity;
}
.eq-card .eq-media{ height:320px; background:#0b1630; position:relative; }
.eq-card .eq-media img{ width:100%; height:100%; object-fit:cover; }
.eq-card .eq-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, rgba(8,17,36,.9)); }
.eq-body{ padding:26px 30px; display:grid; gap:12px; }
.eq-name{ font-family:var(--font-display); font-size:34px; }
.eq-line{ font-size:18px; color:var(--white-2); line-height:1.45; }
.eq-line .eq-k{ color:var(--gold-3); letter-spacing:.14em; text-transform:uppercase; font-size:13px; display:block; margin-bottom:2px; }
.carousel-dots{ position:absolute; bottom:-46px; left:50%; transform:translateX(-50%); display:flex; gap:12px; }
.carousel-dots .dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.2); transition:all .3s; }
.carousel-dots .dot.on{ background:var(--grad-gold); box-shadow:0 0 12px var(--gold-glow); width:30px; border-radius:6px; }

/* ---- Counters (Screen 10) ------------------------------------------------ */
.invest-total{ display:grid; place-items:center; gap:8px; margin-bottom:46px; }
.invest-total .it-num{ font-family:var(--font-display); font-weight:600; font-size:120px; line-height:1; }
.invest-total .it-cur{ font-size:64px; vertical-align:.18em; margin-right:8px; }
.invest-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; width:100%; max-width:1480px; }
.invest-cell{ padding:34px 32px; text-align:left; }
.invest-cell .iv-label{ font-size:16px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.invest-cell .iv-num{ font-family:var(--font-display); font-size:54px; color:var(--gold-hi); }
.invest-cell .iv-bar{ height:6px; margin-top:18px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.invest-cell .iv-bar > span{ display:block; height:100%; width:0; background:var(--grad-gold); box-shadow:0 0 12px var(--gold-glow); }

/* ---- Impact dashboard (Screen 11) ---------------------------------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; width:100%; max-width:1560px; }
.stat-grid.stat-grid--3{ grid-template-columns:repeat(3,1fr); max-width:1280px; gap:32px; }
.stat-grid.stat-grid--3 .stat-card{ padding:44px 30px; }
.stat-grid.stat-grid--3 .st-num{ font-size:70px; }
.stat-card{ padding:34px 28px; text-align:center; }
.stat-card .st-icon{ font-size:34px; margin-bottom:8px; opacity:.9; }
.stat-card .st-num{ font-family:var(--font-display); font-weight:600; font-size:62px; line-height:1; color:var(--gold-hi); }
.stat-card .st-label{ font-size:17px; color:var(--muted); margin-top:10px; letter-spacing:.04em; }
.stat-card:nth-child(5),.stat-card:nth-child(6),.stat-card:nth-child(7){ }

/* ---- Roadmap (Screen 12) ------------------------------------------------- */
.roadmap{ position:relative; width:100%; max-width:1560px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px 40px; }
.roadmap::before{ content:""; position:absolute; left:6%; right:6%; top:90px; height:2px; background:linear-gradient(90deg,transparent,var(--gold-glow),transparent); }
.rm-node{ padding:34px 32px; text-align:left; position:relative; }
.rm-node .rm-dot{ position:absolute; top:-9px; left:42px; width:16px; height:16px; border-radius:50%; background:var(--grad-gold); box-shadow:0 0 16px var(--gold-glow); }
.rm-node .rm-phase{ font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-3); }
.rm-node .rm-title{ font-family:var(--font-display); font-size:34px; margin:6px 0 12px; }
.rm-node .rm-text{ font-size:19px; color:var(--white-2); line-height:1.5; font-weight:300; }

/* ---- Finale (Screen 13) -------------------------------------------------- */
.rays{
  position:absolute; left:50%; top:42%; width:1700px; height:1700px; margin:-850px 0 0 -850px;
  background:repeating-conic-gradient(from 0deg, rgba(255,233,168,.12) 0deg 3deg, transparent 3deg 9deg);
  border-radius:50%; z-index:-1;
  -webkit-mask-image:radial-gradient(circle, #000 12%, transparent 62%);
  mask-image:radial-gradient(circle, #000 12%, transparent 62%);
  animation:raysSpin 60s linear infinite, raysFade 2.4s ease both;
}
.finale-seal{
  width:150px; height:150px; border-radius:50%; display:grid; place-items:center; font-size:64px;
  background:radial-gradient(circle at 50% 35%, var(--gold-hi), var(--gold-2) 60%, var(--gold-1));
  box-shadow:var(--glow-gold), inset 0 -10px 22px rgba(120,80,0,.4);
  animation:sealStamp 1.1s cubic-bezier(.2,.9,.2,1) both;
}
.finale-foot{ display:flex; align-items:center; gap:40px; justify-content:center; margin-top:18px; }

/* ---- Velvet curtain (Screen 5) ------------------------------------------- */
.curtain-pair{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.curtain-panel{
  position:absolute; top:0; bottom:0; width:52%;
  background:
    repeating-linear-gradient(90deg, #5e0c18 0 26px, #7c0f1f 26px 52px, #4a0912 52px 78px);
  box-shadow:inset -40px 0 80px rgba(0,0,0,.6);
}
.curtain-panel.l{ left:0; transform-origin:left; }
.curtain-panel.r{ right:0; transform-origin:right; background:
    repeating-linear-gradient(90deg, #4a0912 0 26px, #7c0f1f 26px 52px, #5e0c18 52px 78px);
  box-shadow:inset 40px 0 80px rgba(0,0,0,.6); }
.curtain-panel::after{ content:""; position:absolute; top:0; bottom:0; width:14px; background:var(--grad-gold); box-shadow:0 0 24px var(--gold-glow); }
.curtain-panel.l::after{ right:0; }
.curtain-panel.r::after{ left:0; }
.curtain-open .curtain-panel.l{ animation:curtainL 2.6s cubic-bezier(.7,0,.3,1) forwards; }
.curtain-open .curtain-panel.r{ animation:curtainR 2.6s cubic-bezier(.7,0,.3,1) forwards; }

/* ---- Ribbon + scissors (Screen 4) ---------------------------------------- */
.ribbon-stage{ position:relative; width:100%; height:340px; display:grid; place-items:center; }
.ribbon-band{ position:absolute; left:0; right:0; top:50%; height:74px; transform:translateY(-50%); display:flex; }
.ribbon-half{
  width:50%; height:100%;
  background:linear-gradient(180deg,#e23048,var(--ribbon-red) 45%,var(--ribbon-red2));
  box-shadow:inset 0 0 28px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.4);
  position:relative;
}
.ribbon-half::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 3px, transparent 3px 22px); }
.ribbon-half.l{ transform-origin:left center; }
.ribbon-half.r{ transform-origin:right center; }
.ribbon-knot{ position:absolute; left:50%; top:50%; width:46px; height:84px; transform:translate(-50%,-50%); background:linear-gradient(180deg,#e23048,var(--ribbon-red2)); border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.5); z-index:2; }
.ribbon-cut .ribbon-half.l{ animation:ribbonFallL 2.4s ease-in forwards .2s; }
.ribbon-cut .ribbon-half.r{ animation:ribbonFallR 2.4s ease-in forwards .2s; }
.ribbon-cut .ribbon-knot{ animation:ribbonFallR 2.2s ease-in forwards .25s; }

.scissors{ position:absolute; left:50%; top:50%; z-index:3; font-size:74px; transform:translate(-50%,-50%); animation:scissorGlide 2.2s cubic-bezier(.5,0,.4,1) forwards; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }

/* ---- Ambient floating note ----------------------------------------------- */
.float-note{ font-size:20px; color:var(--muted); letter-spacing:.04em; font-weight:300; }
.center-stack{ display:grid; place-items:center; gap:26px; max-width:1500px; }
.screen-title{ font-family:var(--font-display); font-size:62px; margin-bottom:8px; }
.section-head{ display:grid; place-items:center; gap:10px; margin-bottom:44px; }