/* =========================
   Jugcoin Homepage Styles
   Exchange-grade / Utility-first
   ========================= */

/* ---------- Root Variables ---------- */
:root{
  --blue-primary:#0E2748;
  --blue-deeper:#0B1F38;
  --gold-accent:#D4A253;
  --gold-hover:#C79245;

  --white:#FFFFFF;
  --light-gray:#F5F7FA;
  --border:#E5E7EB;

  --text-main:#111827;
  --text-muted:#6B7280;
  --muted-on-dark:#D1D5DB;

  --shadow:0 10px 30px rgba(0,0,0,.18);

  --radius:18px;
  --radius-sm:12px;

  --container:1120px;
  --header-height:126px;
  --logo-size:108px;
  --logo-radius:18px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text-main);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

 .muted{color:var(--text-muted)}

/* ---------- Header ---------- */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,30,58,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  height:var(--header-height) !important;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight:700;
}
.brand-mark{
  width:var(--logo-size) !important;
  height:var(--logo-size) !important;
  border-radius:var(--logo-radius) !important;
  background:transparent;
  color:var(--blue-primary);
  display:grid;
  place-items:center;
  font-weight:900;
  overflow:hidden;
}

.brand-mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:inherit;
  image-rendering:auto;
  -ms-interpolation-mode:bicubic;
  backface-visibility:hidden;
  -webkit-font-smoothing: antialiased;
}

.brand-wrap{
  position:relative;
  width:calc(var(--logo-size) + 16px);
}

.brand-menu{
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  width:max-content;
  min-width: 220px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(11,30,58,.94);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0;
  visibility:hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index: 80;
}

.brand-wrap:hover .brand-menu,
.brand-wrap:focus-within .brand-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

.brand-menu a{
  color:rgba(255,255,255,.90);
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.brand-menu a:hover{
  color: var(--gold-accent);
  border-color: rgba(212,162,83,.55);
  background: rgba(212,162,83,.10);
}

/* ---------- Navigation ---------- */
.nav{
  display:flex;
  gap:22px;
  font-size:14px;
  color:rgba(255,255,255,.88);
  flex:1;
  min-width: 0;
  justify-content:center;
}
.nav a{
  padding:10px 6px;
  border-radius:10px;
  transition:.2s;
}
.nav a:hover{color:var(--gold-accent)}

 .header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
 }

 .jug-auth-root{
  position: relative;
  display: inline-flex;
  align-items: center;
 }

 .jug-auth-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
 }

 .jug-auth-btn:hover{
  border-color: rgba(212,162,83,.55);
  color: var(--gold-accent);
 }

 .jug-auth-btn.is-authed{
  background: rgba(255,255,255,.04);
 }

 .jug-auth-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,30,58,.94);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 0s linear 140ms;
  z-index: 10010;
 }

 .jug-auth-menu.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 140ms ease;
 }

 .jug-auth-item{
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .01em;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
 }

 .jug-auth-item + .jug-auth-item{
  margin-top: 8px;
 }

 .jug-auth-item:hover{
  color: var(--gold-accent);
  background: rgba(212,162,83,.10);
  border-color: rgba(212,162,83,.55);
 }

 .jug-auth-item--btn{
  appearance: none;
  cursor: pointer;
 }

 .jug-auth-floating{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20000;
 }

 .wallet-menu { position: relative; display: inline-flex; align-items: center; }

 .wallet-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff; cursor: pointer;
  white-space: nowrap;
 }

 .wallet-btn-text{ white-space: nowrap; }

 .wallet-btn:hover { background: rgba(255,255,255,.10); }

 .wallet-btn-caret { opacity: .85; font-size: 12px; }

 .wallet-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 260px; padding: 12px;
  border-radius: 14px;
  background: rgba(20,30,45,.98);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  display: none;
  z-index: 9999;
 }

 .wallet-dropdown.open { display: block; }

 .wallet-status { padding: 8px 8px 10px; border-bottom: 1px solid rgba(255,255,255,.10); margin-bottom: 10px; }
 .wallet-status-label { font-size: 12px; opacity: .7; margin-bottom: 6px; }
 .wallet-status-value { font-size: 13px; opacity: .95; word-break: break-all; }

 .wallet-actions { display: grid; gap: 8px; padding-top: 6px; }

 .wallet-action-note{
  font-size: 12px;
  opacity: .75;
  padding: 4px 6px;
 }

 .wallet-action-btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  text-align: left;
 }

 .wallet-action-btn:hover { background: rgba(255,255,255,.10); }

 .wallet-action-btn.primary {
  border-color: rgba(212,162,83,.45);
  background: rgba(212,162,83,.18);
 }

 .wallet-action-btn.danger {
  border-color: rgba(255,90,90,.35);
  background: rgba(255,90,90,.12);
 }

.menu-btn{
  width:180px;
  display:flex;
  justify-content:flex-end;
}

/* ---------- Buttons ---------- */
.btn{
  padding:12px 16px;
  border-radius:14px;
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  transition:.2s;
}
.btn-primary{
  background:var(--gold-accent);
  color:var(--blue-primary);
}
.btn-primary:hover{
  background:var(--gold-hover);
  transform:translateY(-1px);
}

.btn-allocate{
  border:3px solid rgba(212,162,83,.95);
  padding:14px 26px;
  border-radius:18px;
  position:relative;
  white-space:normal;
  max-width: min(560px, 100%);
  text-align:center;
}

.btn-allocate:hover{
  border-color: rgba(212,162,83,1);
}

.btn-allocate[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  width: min(520px, 88vw);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.72);
  color: rgba(255,255,255,.92);
  font-size:12px;
  line-height:1.4;
  letter-spacing:.01em;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index: 30;
}

.btn-allocate[data-tooltip]:hover::after{
  opacity:1;
  visibility:visible;
}
.btn-secondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.6);
}
.btn-secondary:hover{
  color:var(--gold-accent);
  border-color:var(--gold-accent);
}

 .btn.secondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.6);
 }

 .btn.secondary:hover{
  color:var(--gold-accent);
  border-color:var(--gold-accent);
 }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(
    180deg,
    var(--blue-primary) 0%,
    var(--blue-deeper) 70%,
    var(--blue-deeper) 100%
  );
  color:#fff;
  padding:64px 0 48px;
  position:relative;
  overflow:hidden;
}

 .hero-float-actions{
   position: absolute;
   right: 32px;
   bottom: 28px;
   display: flex;
   gap: 10px;
   z-index: 5;
 }

 .hero-float-actions .small{
   font-size: 12px;
   padding: 6px 12px;
   border-radius: 999px;
 }
.hero::before{
  content:"";
  position:absolute;
  inset:-120px -160px auto auto;
  width:520px;
  height:520px;
  border-radius:999px;
  background:radial-gradient(
    circle at 30% 30%,
    rgba(212,162,83,0.18),
    rgba(212,162,83,0) 60%
  );
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
}
.badge{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--gold-accent);
  color:var(--gold-accent);
  font-size:12px;
  letter-spacing:.12em;
  font-weight:700;
}
.hero h1{
  margin:12px 0 0;
  font-size:56px;
  line-height:1.05;
}
.hero h1 .hero-subtitle{
  display:block;
  font-size:38px;
  margin-top:10px;
}
.hero-tagline{
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
  letter-spacing: .01em;
}
.hero p{
  margin-top:14px;
  max-width:720px;
  font-size:20px;
  line-height:1.6;
  color:var(--muted-on-dark);
}
.hero-actions{
  margin-top:16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.hero-small{
  margin-top:16px;
  font-size:12px;
  color:rgba(255,255,255,.62);
}

/* ---------- Sections ---------- */
.section{padding:72px 0}
.section.alt{background:var(--light-gray)}
.section h2{
  font-size:30px;
  margin:0;
}
.lead{
  margin-top:6px;
  color:var(--text-muted);
  max-width:720px;
}

/* ---------- Cards ---------- */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:24px;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  transition:.2s;
}
.card:hover{
  border-color:rgba(212,162,83,.4);
  transform:translateY(-2px);
}
.card h3{margin-top:0}

/* ---------- Two Columns ---------- */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:24px;
}
.panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
}
.bullets{
  padding-left:18px;
  color:var(--text-muted);
  line-height:1.9;
}

/* ---------- Ecosystem ---------- */
.app-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:24px;
}
.app-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:.2s;
}
.app-card:hover{
  border-color:rgba(212,162,83,.4);
  transform:translateY(-2px);
}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(11,30,58,.05);
  border:1px solid rgba(11,30,58,.15);
}
.btn-app{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(11,30,58,.2);
  background:rgba(11,30,58,.04);
}
.btn-app:hover{
  background:rgba(212,162,83,.12);
  border-color:var(--gold-accent);
}

/* ---------- Footer ---------- */
.footer{
  background:linear-gradient(180deg,var(--blue-primary),var(--blue-deeper));
  color:rgba(255,255,255,.9);
  padding:56px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:22px;
}
.footer h4{
  margin:0 0 12px;
  font-size:14px;
}
.footer a{
  display:block;
  padding:8px 0;
  color:rgba(255,255,255,.74);
}

.footer .socials{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: 14px;
}

.footer .socials .social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,.74);
  cursor: pointer;
  pointer-events: auto;
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
}

.footer .socials .social .social-icon{
  width: 18px;
  height: 18px;
  display:block;
  fill: currentColor;
  pointer-events: none;
}

.footer .socials .social .social-icon--x{
  width: 16px;
  height: 16px;
}

.footer .socials .social .social-icon--telegram{
  width: 19px;
  height: 19px;
}

.footer .socials .social .social-icon--discord{
  width: 21px;
  height: 21px;
}

.footer .socials .social:hover{
  color: var(--gold-accent);
  transform: translateY(-1px);
}
.footer-bottom{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:rgba(255,255,255,.62);
  font-size:12px;
}

.snapshot-portal {
  font-size: 0.92em;
  opacity: 0.9;
}
.snapshot-portal a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.snapshot-portal a:hover {
  border-bottom-color: rgba(255,255,255,0.6);
}
.snapshot-portal .sep {
  opacity: 0.6;
  margin: 0 8px;
}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3,.app-grid,.two-col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .nav{display:none}
  .brand{width:auto;}
  .menu-btn{width:auto;}
}
@media(max-width:520px){
  .hero h1{font-size:44px}
  .hero h1 .hero-subtitle{font-size:28px}
  .footer-grid{grid-template-columns:1fr}
}

/* -------- Official Snapshot (Simplified) -------- */

.hero-card{
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 14px 18px;
  max-width: 360px;
}

.hero-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.hero-card-header h3{
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  color: #fff;
}

/* Chain pill */
.pill-chain{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,162,83,0.6);
  color: #D4A253;
  background: rgba(212,162,83,0.08);
  letter-spacing: .04em;
  font-weight: 600;
}

/* Snapshot note */
.hero-card .note{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
}

/* HERO CTA enhancement */
.hero-actions{
  gap: 16px;
}

.hero-actions .btn{
  padding: 14px 20px;
  font-size: 15px;
  border-radius: 16px;
}

.hero-actions .btn-primary{
  box-shadow: 0 8px 24px rgba(212,162,83,.25);
}

/* =========================
   HERO FINAL — Option A (Single)
   ========================= */

/* Layout */
.hero--single{
  padding: 64px 0 48px;
  background: linear-gradient(
    180deg,
    var(--blue-primary) 0%,
    var(--blue-deeper) 78%,
    var(--blue-deeper) 100%
  );
  position: relative;
  overflow: hidden;
}

.hero--single::before{
  content:"";
  position:absolute;
  right:-140px; top:-160px;
  width:520px; height:520px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(212,162,83,0.14), rgba(212,162,83,0) 62%);
  pointer-events:none;
}

.hero-grid--single{
  display:grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.hero-left{
  max-width: 760px;
}

/* Typography breathing */
.hero--single h1{
  margin: 12px 0 0;
}

.hero--single p{
  margin-top: 14px;
  line-height: 1.65;
}

.hero-tagline{
  margin: 14px 0 0;
  font-size: 16px;
  color: rgba(255,255,255,.76);
  letter-spacing: .01em;
}

/* CTA stronger + more spacing */
.hero-actions{
  margin-top: 18px;
  display:flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-actions .btn{
  padding: 14px 20px;
  font-size: 15px;
  border-radius: 16px;
}

.hero-actions .btn-primary{
  box-shadow: 0 8px 24px rgba(212,162,83,.25);
}

/* Small line */
.hero-small{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

 .flow-note{
   font-size: 12px;
   color: rgba(255, 255, 255, 0.55);
   letter-spacing: 0.02em;
   margin: 0 0 12px 4px;
 }

/* =========================
   HERO FINAL — Option B (Split)
   ========================= */

.hero--split{
  padding: 64px 0 48px;
  background: linear-gradient(
    180deg,
    var(--blue-primary) 0%,
    var(--blue-deeper) 78%,
    var(--blue-deeper) 100%
  );
  position: relative;
  overflow: hidden;
}

.hero--split::before{
  content:"";
  position:absolute;
  right:-180px; top:-170px;
  width:560px; height:560px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(212,162,83,0.14), rgba(212,162,83,0) 62%);
  pointer-events:none;
}

.hero-grid--split{
  display:grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 26px;
  align-items: center;
}

.hero-left{
  max-width: 760px;
}

.hero--split h1{ margin: 12px 0 0; }
.hero--split p{ margin-top: 14px; line-height: 1.65; }

.hero-tagline{
  margin: 14px 0 0;
  font-size: 16px;
  color: rgba(255,255,255,.76);
  letter-spacing: .01em;
}

/* CTA stronger */
.hero-actions{
  margin-top: 18px;
  display:flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-actions .btn{
  padding: 14px 20px;
  font-size: 15px;
  border-radius: 16px;
}
.hero-actions .btn-primary{
  box-shadow: 0 8px 24px rgba(212,162,83,.25);
}

.hero-small{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

/* Right authority block */
.hero-right{
  display:flex;
  justify-content: flex-end;
}

.snapshot{
  width: min(420px, 100%);
  border-radius: 18px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.snapshot-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.snapshot-title{
  font-size: 16px;
  font-weight: 650;
  color: rgba(255,255,255,.94);
}

.pill-chain{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,162,83,0.60);
  color: #D4A253;
  background: rgba(212,162,83,0.08);
  letter-spacing: .04em;
  font-weight: 600;
}

.snapshot-body{
  display:grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.snapshot-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 14px;
}

.snapshot-line .k{
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

.snapshot-line .v{
  font-size: 13px;
  font-weight: 650;
  color: rgba(255,255,255,.90);
}

.snapshot-note{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,.68);
}

 /* Responsive */
@media (max-width: 980px){
  .hero-grid--split{
    grid-template-columns: 1fr;
  }
  .hero-right{
    justify-content: flex-start;
  }
  .snapshot{
    width: 100%;
  }
}

/* =========================
   FINAL TUNING — Header + Hero + Snapshot
   ========================= */

/* --- Header: bigger nav & spacing --- */
.nav{
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .01em;
  gap: 34px;
}
.nav a{
  padding: 12px 10px;
  opacity: .92;
}
.nav a:hover{
  opacity: 1;
  color: var(--gold-accent);
}

/* --- Brand hover dropdown --- */
.brand-wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-menu{
  position: absolute;
  left: 0;
  top: 56px;
  min-width: 220px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,30,58,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  padding: 8px;
  display: none;
  z-index: 80;
}
.brand-menu a{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.86);
  font-size: 14px;
}
.brand-menu a:hover{
  background: rgba(212,162,83,.10);
  color: var(--gold-accent);
}
.brand-wrap:hover .brand-menu{
  display:block;
}

/* --- Hero: remove left clutter, make copy larger --- */
.hero-left p{
  font-size: 20px;
  line-height: 1.65;
  margin-top: 14px;
  color: rgba(255,255,255,.78);
}
.hero h1{
  font-size: 58px;
  line-height: 1.05;
}
.hero h1 span{
  font-size: 40px;
  line-height: 1.12;
}

/* CTA: single, stronger */
.hero-actions{
  margin-top: 18px;
}
.hero-actions .btn{
  padding: 15px 22px;
  font-size: 15px;
  border-radius: 16px;
}

/* --- Snapshot: heavier & more balanced --- */
.snapshot{
  width: min(460px, 100%);
}
.snapshot-body{
  gap: 12px;
}
.snapshot-line .k{
  width: 90px;
  flex: 0 0 90px;
}
.snapshot-def .v{
  font-weight: 650;
  color: rgba(255,255,255,.92);
}
.snapshot-def .k{
  color: rgba(212,162,83,.86);
}
.snapshot-note{
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

/* Responsive: dropdown on mobile off (safe) */
@media (max-width: 820px){
  .brand-menu{ display:none !important; }
  .nav{ font-size: 14px; gap: 18px; }
}

/* =========================
   FINAL TUNING v2 — Hero CTA + Centering
   ========================= */

/* Center the left hero block (split layout) */
.hero-grid--split{
  align-items: center;
}

.hero--split .hero-left{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

 .hero--split .hero-tagline{
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
 }

.hero--split .hero-left .badge{
  margin-left: auto;
  margin-right: auto;
}

 .hero--split .badge{
  padding-left: 22px;
  padding-right: 22px;
 }

.hero--split .hero-actions{
  justify-content: center;
}

/* Bigger first-screen spacing */
.hero--split .hero-left p{
  margin-top: 18px;
}

.hero--split .hero-actions{
  margin-top: 26px;
}

.hero--split .hero-small{
  margin-top: 22px;
}

/* CTA: bigger + more premium */
.hero--split .hero-actions .btn{
  padding: 18px 28px;
  font-size: 16px;
  border-radius: 18px;
}

/* Keep snapshot readable when left is centered */
@media (max-width: 980px){
  .hero--split .hero-left{
    text-align: left;
  }
  .hero--split .hero-tagline{
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .hero--split .hero-left .badge{
    margin-left: 0;
    margin-right: 0;
  }
  .hero--split .hero-actions{
    justify-content: flex-start;
  }
}

/* =========================
   FINAL TUNING v2 — Header Nav (Desktop)
   ========================= */

.nav{
  font-size: 18px;
  font-weight: 650;
  letter-spacing: .012em;
  gap: 46px;
}

.nav a{
  padding: 14px 14px;
  border-radius: 12px;
}

@media (max-width: 820px){
  .nav{ font-size: 14px; gap: 18px; }
}

/* =========================
   FINAL TUNING v3 — Top Nav + Snapshot Definition
   ========================= */

/* Top nav: weight + spacing + centered layout */
.nav{
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  gap: 42px;
}

.nav a{
  padding: 14px 14px;
  opacity: .94;
  transition: opacity .2s ease, color .2s ease, background .2s ease;
}

.nav a:hover{
  opacity: 1;
  color: var(--gold-accent);
  background: rgba(212,162,83,.10);
}

/* Snapshot: make Definition look like the headline inside the card */
.snapshot-def{
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.snapshot-def .v{
  font-size: 14px;
  line-height: 1.35;
}

/* Header Nav: stronger (final final) */
.nav{
  font-size: 18px;
  font-weight: 750;
  gap: 52px;
  letter-spacing: .015em;
}

.nav a{
  padding: 16px 14px;
  border-radius: 14px;
  color: rgba(255,255,255,.92);
  transition: .18s ease;
}

.nav a:hover{
  color: var(--gold-accent);
  background: rgba(212,162,83,.12);
  transform: translateY(-1px);
}

/* FORCE HEADER NAV (debug-safe) */
header nav a,
.header nav a,
header .nav a,
.header .nav a{
  font-size: 18px !important;
  font-weight: 750 !important;
  padding: 16px 16px !important;
  letter-spacing: .015em !important;
}

header nav,
.header nav,
header .nav,
.header .nav{
  gap: 52px !important;
}

/* FORCE HEADER NAV (tuned down) */
header nav a,
.header nav a,
header .nav a,
.header .nav a{
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 14px 14px !important;
  letter-spacing: .012em !important;
}

header nav,
.header nav,
header .nav,
.header .nav{
  gap: 44px !important;
}

header nav a:hover,
.header nav a:hover,
header .nav a:hover,
.header .nav a:hover{
  background: rgba(212,162,83,.10) !important;
  transform: translateY(0) !important;
}

/* FORCE HEADER NAV (tuned down v2) */
header nav a,
.header nav a,
header .nav a,
.header .nav a{
  font-size: 16px !important;
  font-weight: 650 !important;
  padding: 13px 12px !important;
  letter-spacing: .012em !important;
}

header nav,
.header nav,
header .nav,
.header .nav{
  gap: 40px !important;
}

header nav a:hover,
.header nav a:hover,
header .nav a:hover,
.header .nav a:hover{
  background: rgba(212,162,83,.08) !important;
}

/* Header Brand: make Jugcoin text larger than nav */
.header .brand{
  font-size: 20px !important;
  letter-spacing: .01em !important;
}

/* Keep the J mark unchanged */
.header .brand-mark{
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
  border-radius: var(--logo-radius) !important;
}

/* Snapshot chain pill: force gold */
.snapshot .pill-chain{
  color: var(--gold-accent) !important;
  border-color: rgba(212,162,83,.70) !important;
  background: rgba(212,162,83,.12) !important;
}

/* Header search icon */
.header-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.icon-btn{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  transition: .18s ease;
}

.icon-btn:hover{
  color: var(--gold-accent);
  border-color: rgba(212,162,83,.55);
  background: rgba(212,162,83,.10);
}

.menu-toggle{ display: none; }

@media (max-width: 820px){
  .search-btn{ display:none; }
  .header-right{ width: auto; }
  .menu-toggle{ display: inline-flex; }
  .header .nav{ display: none !important; }
}

/* Header: keep always visible above content */
.header{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* =========================
   Official Snapshot — Final (Facts + Mechanism)
   ========================= */

.hero-right{
  display: flex;
  justify-content: flex-end;
}

.snapshot{
  width: min(540px, 100%);
  border-radius: 20px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 48px rgba(0,0,0,.20);
}

/* Header */
.snapshot-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.snapshot-title{
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

/* Body layout */
.snapshot-body{
  display: grid;
  gap: 14px;
}

/* Blocks */
.snapshot-block{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.035);
}

/* Lines */
.snapshot-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.snapshot-line + .snapshot-line{
  margin-top: 10px;
}

.snapshot-line .k{
  flex: 0 0 110px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.snapshot-line .v{
  font-size: 13px;
  font-weight: 650;
  color: rgba(255,255,255,.92);
  text-align: right;
}

 .snapshot-entry{
  white-space: nowrap;
 }

 .snapshot-entry a{
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color .15s ease, color .15s ease;
 }

 .snapshot-entry a:hover{
  color: rgba(255,255,255,1);
  border-bottom-color: rgba(255,255,255,.92);
 }

 .snapshot-entry-sep{
  margin: 0 6px;
  opacity: .55;
 }

 /* Entry dropdown container */
 .entry-dropdown{ position: relative; display: inline-block; }

 /* Trigger looks like a label, not a CTA */
 .entry-trigger{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
  padding: 6px 10px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
 }

 .entry-trigger:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.28);
 }

 .entry-caret{ opacity: 0.8; font-size: 0.9em; }

 /* Menu */
 .entry-menu{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(20, 28, 44, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  display: none;
  transform: translateY(8px);
  z-index: 50;
 }

 .entry-dropdown.is-open .entry-menu{ display: block; }

 .entry-menu a{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  font-size: 0.98em;
 }

 .entry-menu a:hover{
  background: rgba(255,255,255,0.08);
 }

 /* Desktop hover open is JS-driven to allow delayed close */

/* Definition emphasis */
.snapshot-def{
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.snapshot-def .k{
  color: rgba(255,255,255,.60);
}

.snapshot-def .v{
  font-size: 15px;
  line-height: 1.35;
}

/* Mechanism highlight */
.snapshot-mech .k{
  color: rgba(212,162,83,.90);
}

.snapshot-note{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
}

/* Chain pill (force gold) */
.pill-chain{
  color: #D4A253 !important;
  border-color: rgba(212,162,83,.75) !important;
  background: rgba(212,162,83,.14) !important;
  box-shadow: 0 10px 26px rgba(212,162,83,.18);
}

/* Responsive */
@media (max-width: 980px){
  .hero-right{
    justify-content: flex-start;
  }
  .snapshot{
    width: 100%;
  }
}

 .container.page-shell{
  max-width: 900px;
  padding-top: 90px;
  padding-bottom: 60px;
 }

 .page-section{
  margin-top: 28px;
 }

 .page-steps{
  margin-top: 10px;
  padding-left: 20px;
 }

 .partner-tile{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: #fff;
 }

 .partner-tile-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
 }

 .partner-name{
  font-weight: 700;
 }

 .partner-tag{
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
 }

 .kv-card{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: #fff;
 }

 .kv-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
 }

 .kv-row + .kv-row{
  margin-top: 10px;
 }

 .kv-k{
  color: var(--text-muted);
 }

 .page-disclosure{
  margin-top: 44px;
  font-size: 12px;
  color: rgba(0,0,0,0.6);
 }

/* =========================
   Component: JSNAP (Official Snapshot)
   Namespaced + reusable
   ========================= */

.jsnap{
  display: flex;
  justify-content: flex-end;
}

.jsnap__card{
  width: min(540px, 100%);
  border-radius: 20px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 48px rgba(0,0,0,.20);
}

/* Header */
.jsnap__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.jsnap__title{
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

/* Pill */
.jsnap__pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
  font-weight: 650;

  color: #D4A253;
  border: 1px solid rgba(212,162,83,.75);
  background: rgba(212,162,83,.14);
  box-shadow: 0 10px 26px rgba(212,162,83,.18);
}

/* Body */
.jsnap__body{
  display: grid;
  gap: 14px;
}

/* Blocks */
.jsnap__block{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.035);
}

/* Rows */
.jsnap__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.jsnap__row + .jsnap__row{
  margin-top: 10px;
}

.jsnap__k{
  flex: 0 0 110px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.jsnap__v{
  font-size: 14px;
  font-weight: 650;
  color: rgba(255,255,255,.92);
  text-align: right;
}

/* Definition emphasis */
.jsnap__row--def{
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.jsnap__row--def .jsnap__k{
  color: rgba(212,162,83,.90);
}

.jsnap__row--def .jsnap__v{
  font-size: 15px;
  line-height: 1.35;
}

/* Mechanism */
.jsnap__k--gold{
  color: rgba(212,162,83,.90);
}

.jsnap__note{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
}

/* Responsive */
@media (max-width: 980px){
  .jsnap{
    justify-content: flex-start;
  }
  .jsnap__card{
    width: 100%;
  }
}

/* =========================
   Section: Discount Rights Pool
   ========================= */

.section--pool{
  background: var(--light-gray);
}

.pool-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: start;
}

.pool-left h2{
  font-size: 32px;
  margin: 0;
}

.pool-lead{
  margin-top: 10px;
  font-size: 18px;
  color: var(--text-muted);
  max-width: 620px;
}

.pool-steps{
  margin-top: 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.pool-steps li{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.step-index{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(212,162,83,.18);
  color: #9C6B2F;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.step-text{
  font-size: 16px;
  line-height: 1.55;
}

.pool-note{
  margin-top: 22px;
  font-size: 13px;
  color: #6B7280;
}

/* Right card */
.pool-card{
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 36px rgba(0,0,0,.08);
}

.pool-card-title{
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
}

.pool-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #E5E7EB;
}

.pool-row:last-child{
  border-bottom: none;
}

.pool-row .k{
  font-size: 13px;
  color: #6B7280;
}

.pool-row .v{
  font-size: 14px;
  font-weight: 650;
}

/* Responsive */
@media (max-width: 980px){
  .pool-grid{
    grid-template-columns: 1fr;
  }
}

/* Snapshot: reduce nested framing (avoid 3-layer look) */
.snapshot-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* =========================
   Pool CTA + Modal (front-end only)
   ========================= */

.pool-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.pool-cta{
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(212,162,83,.55);
  background: rgba(212,162,83,.10);
  color: #9C6B2F;
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
  transition: .18s ease;
}

.pool-cta svg{
  display:block;
}

.pool-cta:hover{
  transform: translateY(-1px);
  background: rgba(212,162,83,.14);
  border-color: rgba(212,162,83,.75);
}

/* Modal base */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 12000;
}

.modal.is-open{
  display: block;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.modal-card{
  position: relative;
  width: min(520px, calc(100% - 28px));
  margin: 8vh auto 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(11,31,56,.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 70px rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.modal-title{
  font-size: 16px;
  font-weight: 750;
}

.modal-close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  cursor:pointer;
  transition: .18s ease;
}
.modal-close:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.modal-body{
  padding: 16px 18px 18px;
}

.modal-badge{
  display:inline-block;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,162,83,.60);
  background: rgba(212,162,83,.10);
  color: #D4A253;
  font-weight: 650;
  letter-spacing: .03em;
}

.modal-lead{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}

.form-row{
  margin-top: 14px;
  display:grid;
  gap: 8px;
}

.form-row label{
  font-size: 12px;
  color: rgba(255,255,255,.68);
}

.form-row input,
.form-row select{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 0 14px;
  outline: none;
}

.form-row input::placeholder{
  color: rgba(255,255,255,.45);
}

.form-actions{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-footnote{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

/* Snapshot/JSNAP: sub note (restored denominations line) */
.snapshot-note--sub{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
}

/* JSNAP: secondary mechanism note */
.jsnap__note--sub{
  margin-top: 8px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

/* Snapshot: clickable mechanism entry */
.jsnap__row--action .jsnap__v--clickable{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: .18s ease;
}

.jsnap__dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 23px;
  line-height: 1;
  color: #D4A253;
  vertical-align: middle;
  transform: translateY(-3px);
}

.jsnap__row--action .jsnap__v--clickable:hover{
  color: #D4A253;
}

/* Snapshot: clickable mechanism entry (homepage .snapshot) */
.snapshot-line--action .v--clickable{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: .18s ease;
}

.snapshot-line--action .dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 23px;
  line-height: 1;
  color: #D4A253;
  vertical-align: middle;
  transform: translateY(-3px);
}

.snapshot-line--action .v--clickable:hover{
  color: #D4A253;
  transform: translateY(-1px);
}

/* =========================
    Utility Flow (Web3 / crypto-native)
    ========================= */

.uflow{
  padding: 34px 0 26px;
  background: transparent; /* keep your homepage background consistent */
}

.uflow__wrap{
  position: relative;
}

.uflow__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.uflow__title{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: rgba(255,255,255,.94);
  letter-spacing: .01em;
}

.uflow__sub{
  font-weight: 650;
  color: rgba(255,255,255,.62);
  font-size: 14px;
  margin-left: 8px;
}

.uflow__tag{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
  font-weight: 700;
  color: #D4A253;
  border: 1px solid rgba(212,162,83,.65);
  background: rgba(212,162,83,.10);
}

.uflow__rail{
  display:flex;
  align-items: stretch;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
}

.uflow__step{
  display:flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.uflow__node{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 850;
  font-size: 13px;
  color: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.uflow__card{
  min-width: 0;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,31,56,.55);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

.uflow__label{
  font-size: 13px;
  font-weight: 750;
  color: rgba(255,255,255,.92);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uflow__hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uflow__link{
  flex: 1 1 36px;
  height: 2px;
  align-self: center;
  border-radius: 999px;
  background: rgba(212,162,83,.45);
  opacity: .85;
  min-width: 22px;
}

/* Action step (jump to pool) */
.uflow__card--action{
  cursor: pointer;
  border-color: rgba(212,162,83,.55);
  background: rgba(212,162,83,.10);
  transition: .18s ease;
}

.uflow__card--action:hover{
  transform: translateY(-1px);
  border-color: rgba(212,162,83,.75);
  background: rgba(212,162,83,.14);
}

.uflow__dot{
  margin-left: 8px;
  color: #D4A253;
  font-weight: 900;
}

.uflow__footer{
  margin-top: 14px;
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.uflow__one{
  font-size: 14px;
  font-weight: 750;
  color: rgba(255,255,255,.84);
}

.uflow__one span{
  color: #D4A253;
}

.uflow__micro{
  font-size: 12px;
  color: rgba(255,255,255,.56);
}

/* Responsive: stack into vertical timeline */
@media (max-width: 980px){
  .uflow__head{
    align-items: flex-start;
    flex-direction: column;
  }
  .uflow__rail{
    flex-direction: column;
    gap: 12px;
  }
  .uflow__link{
    width: 2px;
    height: 18px;
    min-width: 0;
    margin-left: 16px;
  }
  .uflow__label, .uflow__hint{
    white-space: normal;
  }
}

/* =========================
   Utility Flow — FIX (compact + dark band + centered)
   Paste at END of style.css to override
   ========================= */

.uflow{
  padding: 28px 0 26px;
  /* make it a dark band so text is visible + consistent with hero */
  background: radial-gradient(1200px 420px at 50% -40px, rgba(212,162,83,.10), transparent 55%),
              linear-gradient(180deg, rgba(7,26,46,.94), rgba(7,26,46,.88));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.uflow__head{
  margin-bottom: 14px;
}

.uflow__tag{
  /* keep it near the title, not floating too far visually */
  white-space: nowrap;
}

/* Center + compact the rail */
.uflow__rail{
  max-width: 1120px;
  margin: 0 auto;
  justify-content: center;

  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  box-shadow: none; /* remove “muddy” feeling */
}

/* IMPORTANT: connectors must NOT stretch */
.uflow__link{
  flex: 0 0 46px;          /* fixed width */
  height: 2px;
  background: rgba(212,162,83,.38);
  opacity: .9;
  min-width: 46px;
}

/* Cards: less floaty, more “dashboard” */
.uflow__card{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
  min-width: 240px;        /* ensure consistent block size */
}

/* text should not ellipsis on desktop */
.uflow__label,
.uflow__hint{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.uflow__label{
  font-size: 14px;
}

.uflow__hint{
  font-size: 12px;
}

/* Make action step pop but not “washed out” */
.uflow__card--action{
  border-color: rgba(212,162,83,.55);
  background: rgba(212,162,83,.10);
}

/* Footer: keep readable on dark band */
.uflow__footer{
  max-width: 1120px;
  margin: 12px auto 0;
}

.uflow__one{
  color: rgba(255,255,255,.84);
}

/* Mobile: vertical timeline with fixed connector */
@media (max-width: 980px){
  .uflow__rail{
    max-width: 100%;
  }
  .uflow__link{
    flex: 0 0 auto;
    width: 2px;
    height: 16px;
    min-width: 0;
    margin-left: 16px;
  }
  .uflow__card{
    min-width: 0;
    width: 100%;
  }
}

/* =========================
   Utility Flow — FINAL FIX (no cut, 3 lines, left align, square nodes)
   Paste at END of style.css
   ========================= */

/* 1) Whole rail: align left (not centered) */
.uflow__rail{
  justify-content: flex-start !important;
  margin: 0 !important;          /* cancel auto-centering */
  max-width: 1180px;             /* keep reasonable width */
}

/* 2) Step cards: allow multi-line, avoid cut-off */
.uflow__card{
  min-width: 260px;              /* a bit wider to reduce awkward wraps */
  overflow: visible !important;  /* stop “cut corner” feeling */
}

/* 3) Title in card: allow up to 3 lines (instead of ellipsis) */
.uflow__label{
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  line-clamp: 3;
  -webkit-line-clamp: 3 !important;   /* <= 3 lines */
  line-height: 1.25;
  max-height: calc(1.25em * 3);
}

/* Hint line can wrap too (optional, looks cleaner) */
.uflow__hint{
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  line-clamp: 2;
  -webkit-line-clamp: 2 !important;
  line-height: 1.3;
  max-height: calc(1.3em * 2);
}

/* 4) Make the 1/2/3/4 number nodes perfect squares */
.uflow__node{
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 10px !important;   /* square-ish, not pill */
  line-height: 36px !important;
}

/* 5) Connector lines keep fixed width (avoid weird stretch) */
.uflow__link{
  flex: 0 0 44px !important;
  min-width: 44px !important;
}

/* =========================
   Utility Flow — subtle tooltip
   ========================= */

.uflow__card--tooltip{
  position: relative;
}

/* tiny info dot */
.uflow__info{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.35);
  cursor: default;
}

/* tooltip box */
.uflow__tooltip{
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 260px;
  padding: 10px 12px;
  border-radius: 10px;

  background: rgba(15,32,52,.96);
  color: rgba(255,255,255,.85);
  font-size: 12px;
  line-height: 1.35;

  border: 1px solid rgba(212,162,83,.45);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);

  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: .18s ease;
  z-index: 10;
}

/* show on hover (desktop only) */
.uflow__card--tooltip:hover .uflow__tooltip{
  opacity: 1;
  transform: translateY(0);
}

/* mobile: tooltip hidden (no hover confusion) */
@media (max-width: 980px){
  .uflow__tooltip{
    display: none;
  }
}

/* =========================
   Utility Flow — Timeline Style (no cards)
   ========================= */

.uflow2{
  --node: 32px;
  padding: 26px 0 22px;
  background: radial-gradient(1200px 420px at 50% -40px, rgba(212,162,83,.10), transparent 55%),
              linear-gradient(180deg, rgba(7,26,46,.94), rgba(7,26,46,.88));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.uflow2__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.uflow2__title{
  margin:0;
  font-size: 22px;
  font-weight: 850;
  color: rgba(255,255,255,.92);
}

.uflow2__title span{
  font-size: 14px;
  font-weight: 650;
  color: rgba(255,255,255,.62);
  margin-left: 8px;
}

.uflow2__tag{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
  font-weight: 800;
  color: #D4A253;
  border: 1px solid rgba(212,162,83,.65);
  background: rgba(212,162,83,.10);
  white-space: nowrap;
}

.uflow2__rail{
  display:flex;
  align-items: flex-end;     /* nodes sit on the same baseline */
  gap: 14px;
  padding: 16px 12px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
}

 .uf-step{
   opacity: 0.72;
   transition: opacity 180ms ease;
 }

 .uf-step.is-active{
   opacity: 1;
 }

 .uf-step .uflow2__label,
 .uf-step .uflow2__hint,
 .uf-step .flow-title,
 .uf-step .flow-pou{
   opacity: 0.85;
   transition: opacity 180ms ease;
 }

 .uf-step.is-active .uflow2__label,
 .uf-step.is-active .uflow2__hint,
 .uf-step.is-active .flow-title,
 .uf-step.is-active .flow-pou{
   opacity: 1;
 }

 .uf-step[data-step="2"]{
  opacity: 1;
 }

 .uf-step[data-step="4"]{
   opacity: 1;
 }

.uflow2__step{
  position: relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  width: 230px;              /* controls spacing + avoids “stacking” */
  min-width: 200px;
}

.uflow2__text{
  text-align: center;
  margin-bottom: 10px;
  min-height: 44px;          /* keeps line stable even if text wraps */
}

.uflow2__label{
  font-size: 14px;
  font-weight: 850;
  color: rgba(255,255,255,.92);
  line-height: 1.25;
}

.uflow2__hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  line-height: 1.25;
}

.uflow2__dot{
  margin-left: 6px;
  color: #D4A253;
  font-weight: 900;
}

.uflow2__node{
  width: var(--node);
  height: var(--node);
  border-radius: 999px; /* circle */
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  flex: 0 0 var(--node);
}

.uflow2__node--gold{
  border-color: rgba(212,162,83,.70);
  background: rgba(212,162,83,.14);
  color: #ffffff;
}

 .uflow2__node--success{
   border-color: rgba(76, 175, 80, 0.9);
   color: #ffffff;
   background: rgba(76, 175, 80, 0.85);
   box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.18);
 }

/* connecting line (between nodes) */
.uflow2__link{
  flex: 1 1 70px;
  height: 2px;
  margin-bottom: calc((var(--node) / 2) - 1px); /* align with node center */
  border-radius: 999px;
  background: rgba(212,162,83,.38);
}

/* footer */
.uflow2__foot{
  margin-top: 10px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.uflow2__one{
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.84);
}
.uflow2__one span{ color:#D4A253; }

.uflow2__micro{
  font-size: 12px;
  color: rgba(255,255,255,.56);
}

 .uflow2__micro-aux{
   display: block;
   margin-top: 4px;
   color: rgba(255,255,255,.48);
 }

/* tooltip (step 4) */
.uflow2__step--tooltip{ position: relative; }

.uflow2__info{
  display:inline-grid;
  place-items:center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  margin-left: 6px;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.30);
}

.uflow2__tooltip{
  position:absolute;
  bottom: calc(var(--node) + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 270px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15,32,52,.96);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-line;
  border: 1px solid rgba(212,162,83,.45);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events:none;
  transition: .18s ease;
  z-index: 20;
}

.uflow2__step--tooltip:hover .uflow2__tooltip{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* mobile */
@media (max-width: 980px){
  .uflow2__head{ flex-direction: column; align-items: flex-start; }
  .uflow2__rail{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .uflow2__step{
    width: 100%;
    align-items: flex-start;
  }
  .uflow2__text{ text-align: left; }
  .uflow2__link{
    width: 2px;
    height: 16px;
    margin: 0 0 0 calc(var(--node)/2 - 1px);
  }
  .uflow2__tooltip{ display:none; } /* no hover on mobile */
}

/* Collapsible Official Flow */
/* button style (match your gold tags) */
.flowToggle{
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  letter-spacing: .04em;
  font-weight: 800;
  color: #D4A253;
  border: 1px solid rgba(212,162,83,.65);
  background: rgba(212,162,83,.10);
  cursor: pointer;
}
.flowToggle:hover{
  background: rgba(212,162,83,.14);
  border-color: rgba(212,162,83,.80);
}

/* Pull Utility Flow upward a bit (no collapsing) */
#utility-flow{
  margin-top: 0;
  padding-top: 0;
}

/* ===== Remove the side frames/blocks you crossed out ===== */
/* 这类“左右端帽子/挡板”一般是 :before/:after 或额外 wrapper 画出来的 */
.uflow2__rail::before,
.uflow2__rail::after{
  display: none !important;
  content: none !important;
}

/* 如果你的左右框不是伪元素，而是实际元素（常见：.uflow2__cap / .uflow2__frame） */
.uflow2__cap,
.uflow2__frame,
.uflow2__side{
  display: none !important;
}

/* ===== Put Official Flow on the top-left blue bar ===== */
 

.uflow-desc-main{
  display: block;
  font-size: 13px;
  opacity: 0.75;
  line-height: 1.2;
}

.uflow-desc-sub{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #D4A253; /* 金黄，机制标签 */
  text-transform: uppercase;
}

.uflow-step-desc{
  display: flex;
  flex-direction: column;
  align-items: center;   /* 关键：整体居中 */
  gap: 4px;              /* 控制断行呼吸感 */
}

.uflow-desc-main{
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.2;
}

.uflow-desc-sub{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #D4A253;
  text-transform: uppercase;
}

.pou{
  display:inline-block;
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#D4A253;
}

.step-title{
  font-size:16px;
  font-weight:600;
  color:#EAEFF6;
  line-height:1.2;
  white-space:nowrap;
}

.badge-pou{
  margin-left:8px;
  padding:2px 6px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#D4A253;
  border:1px solid rgba(212,162,83,.5);
  border-radius:6px;
  vertical-align:middle;
}

/* === FORCE: remove the big outer frame around the flow === */
.flow-wrap,
.flow-shell,
.flow-panel,
.utility-flow,
.flow-section,
.flow-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* In this build, the “outer frame” is typically the rail container */
.uflow2__rail{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* PROOF-OF-USE: force break + center, don’t steal title width */
.flow-text{ display:flex; flex-direction:column; align-items:center; }

.flow-title{
  display:block;
  text-align:center;
}

.flow-pou{
  display:block;
  margin-top:6px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#D4A253;
  border:1px solid rgba(212,162,83,.5);
  padding:2px 8px;
  border-radius:999px;
}

/* === Normalize step title size across all steps === */
.flow-step .flow-title{
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}

/* safety: step-2 must not be larger than others */
.step-2 .flow-title{
  font-size:16px !important;
}

/* =========================
   FORCE FIX — Flow typography & colors
   Paste at END of style.css
   ========================= */

/* 1) All step titles: same size + WHITE */
.flow-step h4,
.flow-step .flow-title,
.flow-step .step-title,
.flow-step .title {
  color: rgba(255,255,255,.92) !important;
  font-size: 18px !important;   /* 如果你想更小：改成 17/16 */
  font-weight: 650 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

/* Step 2 must NOT be special (kill any step-2 overrides) */
.step-2 h4,
.step-2 .flow-title,
.step-2 .step-title,
.step-2 .title {
  color: rgba(255,255,255,.92) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 2) subtitles (the small line under title): same size + same color */
.flow-step .sub,
.flow-step .subtitle,
.flow-step .step-subtitle,
.flow-step small,
.flow-step p {
  color: rgba(255,255,255,.60) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin-top: 6px !important;
  text-align: center !important;
}

/* PROOF-OF-USE should behave like a subtitle (not a badge) */
.flow-pou,
.proof-of-use,
.pou {
  display: block !important;
  margin-top: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  /* match subtitle */
  color: rgba(255,255,255,.60) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
}

/* If step 2 has any weird dark overlay */
.step-2 *{
  color: inherit;
}

/* 3) Official Flow flashing: disable animation, keep subtle "clickable" cue */
.official-flow,
#officialFlow,
[data-flow-toggle="official"],
.flow-toggle {
  animation: none !important;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease !important;
  cursor: pointer !important;
  opacity: .92 !important;
}

/* subtle hover only (no flashing) */
.official-flow:hover,
#officialFlow:hover,
[data-flow-toggle="official"]:hover,
.flow-toggle:hover {
  opacity: 1 !important;
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
}

/* also kill any keyframe-based blink if exists */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

.utility-flow{
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 14px 0 26px;
  background: linear-gradient(180deg, rgba(7,22,44,0.88), rgba(7,22,44,0.78));
  border-top: 1px solid rgba(255,255,255,0.06);
}

.utility-flow .uf-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  min-height: 220px;
}

.uf-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.uf-title{
  display:flex;
  align-items:baseline;
  gap: 12px;
  color: rgba(255,255,255,0.92);
}

.uf-title-main{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.uf-title-sub{
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.62);
}

.uf-actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

.lang-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  font-weight: 700;
  cursor: pointer;
}

.lang-pill:hover{
  background: rgba(255,255,255,0.09);
}

.lang-icon{ opacity: 0.9; }
.lang-caret{ opacity: 0.7; }

.official-flow-btn{
  padding: 10px 16px;
  border-radius: 18px;
  border: 1px solid rgba(210,161,86,0.75);
  background: rgba(210,161,86,0.08);
  color: rgba(210,161,86,0.95);
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor:pointer;
}

.official-flow-btn:hover{
  background: rgba(210,161,86,0.14);
}

.flow-canvas{
  position: relative;
  padding: 10px 0 6px;
}

.utility-flow{
  display:block !important;
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  padding:26px 0 34px !important;
  background: linear-gradient(180deg, rgba(7,22,44,0.92), rgba(7,22,44,0.78)) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.utility-flow .uf-inner{
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 28px !important;
  min-height:240px !important;
}

.hero + .utility-flow{
  margin-top: 0 !important;
}

.utility-flow .uf-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin-bottom: 16px !important;
}

.utility-flow .uf-title{
  display:flex !important;
  align-items:baseline !important;
  gap:12px !important;
  color: rgba(255,255,255,0.92) !important;
}

.utility-flow .uf-title-main{
  font-size:34px !important;
  font-weight:800 !important;
}

.utility-flow .uf-title-sub{
  font-size:16px !important;
  font-weight:600 !important;
  color: rgba(255,255,255,0.62) !important;
}

.utility-flow .uf-actions{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.utility-flow .lang-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.86) !important;
  font-weight:700 !important;
  cursor:pointer !important;
}

.utility-flow .lang-pill:hover{ background: rgba(255,255,255,0.09) !important; }
.utility-flow .lang-caret{ opacity:0.7 !important; }

.utility-flow .official-flow-btn{
  padding:10px 16px !important;
  border-radius:18px !important;
  border:1px solid rgba(210,161,86,0.75) !important;
  background: rgba(210,161,86,0.08) !important;
  color: rgba(210,161,86,0.95) !important;
  font-weight:800 !important;
  letter-spacing:0.6px !important;
  cursor:pointer !important;
}

.utility-flow .official-flow-btn:hover{ background: rgba(210,161,86,0.14) !important; }

.utility-flow .flow-canvas{
  display:block !important;
  padding: 8px 0 4px !important;
}

 .uflow2__head{
   display: none !important;
 }

 /* === FIX: move EN + OFFICIAL FLOW into the header dark bar (blue boxed area) === */
 
 /* header容器做定位参考 */
 .uf-header{
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 /* 右侧按钮组：强制放到header右侧，并垂直居中在那条深蓝条内 */
 .uf-actions{
   position: absolute;
   right: 22px;
   top: 56%;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
   gap: 12px;
   z-index: 5;
 }
 
 /* 如果你希望再“更靠下”一点（更贴你蓝色框中部），把下面这行打开： */
 /* .uf-actions{ top: 58%; } */
 
 /* 按钮整体缩小一点（你之前也要求过） */
 .uf-actions .lang-pill,
 .uf-actions .official-flow-btn{
   font-size: 12px;
   padding: 6px 12px;
   border-radius: 999px;
 }

 /* Language dropdown (replace rotate/cycle behavior) */
 .lang-dropdown { position: relative; display: inline-block; }

 .lang-menu{
   position:absolute;
   right:0;
   top:calc(100% + 8px);
   min-width:110px;
   padding:6px;
   border-radius:12px;
   display:none;
   z-index:50;
   background: rgba(18, 28, 44, 0.92);
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: 0 16px 40px rgba(0,0,0,0.35);
   backdrop-filter: blur(10px);
 }

 .lang-dropdown.is-open .lang-menu { display:block; }

 .lang-item{
   width:100%;
   text-align:left;
   padding:10px 12px;
   border-radius:10px;
   border:none;
   background:transparent;
   color: rgba(255,255,255,0.92);
   cursor:pointer;
   font-weight:600;
   letter-spacing:0.02em;
 }

 .lang-item:hover{
   background: rgba(255,255,255,0.08);
 }

 .lang-item.is-active{
   background: rgba(210, 166, 86, 0.18);
   border: 1px solid rgba(210, 166, 86, 0.35);
 }

 body.compact-flow .section{
   padding: 28px 0;
 }

 body.compact-flow h1{
   margin: 0 0 10px;
 }

 body.compact-flow .lead{
   margin: 0 0 10px;
 }

 body.compact-flow h2,
 body.compact-flow h3{
   margin: 0 0 8px;
 }

 body.compact-flow p{
   margin: 0 0 6px;
   line-height: 1.45;
 }

 .flow-detail-link,
 .flow-detail-link:visited,
 .flow-detail-link:hover{
   color: rgba(255,255,255,0.92);
 }

 .snapshot-rule{
   margin: 8px 0 10px;
   font-size: 13px;
   line-height: 1.4;
   color: rgba(255, 255, 255, 0.85);
   font-weight: 500;
 }

 /* Snapshot - Mechanism (Rules / Execution / Engineering Notes) */
 .snapshot-mechanism .mech-blocks{
   margin-top: 10px;
   display: grid;
   gap: 10px;
 }
 
 .snapshot-mechanism .mech-block{
   padding: 10px 12px;
   border-radius: 12px;
   background: rgba(255,255,255,0.04);
   border: 1px solid rgba(255,255,255,0.06);
 }
 
 .snapshot-mechanism .mech-tag{
   display: inline-block;
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   padding: 4px 8px;
   border-radius: 999px;
   margin-bottom: 6px;
   color: rgba(230, 180, 90, 0.95);
   background: rgba(230, 180, 90, 0.10);
   border: 1px solid rgba(230, 180, 90, 0.25);
 }
 
 .snapshot-mechanism .mech-text{
   margin: 0;
   font-size: 13px;
   line-height: 1.45;
   color: rgba(255,255,255,0.86);
 }
 
 .snapshot-mechanism .mech-text strong{
   color: rgba(255,255,255,0.95);
   font-weight: 600;
 }

 /* Mechanism Snapshot */
 .mechanism-snapshot {
   margin-top: 14px;
   font-size: 13.5px;
 }
 
 /* RULE line */
 .mechanism-snapshot .mech-rule {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
   border-radius: 10px;
   background: rgba(255,255,255,0.04);
 }
 
 .mechanism-snapshot .mech-tag {
   font-size: 11px;
   letter-spacing: 0.08em;
   color: #d6b36a;
   border: 1px solid rgba(214,179,106,0.4);
   padding: 2px 6px;
   border-radius: 6px;
 }
 
 .mechanism-snapshot .mech-text {
   color: #e6e6e6;
 }
 
 /* Toggle button */
 .mechanism-snapshot .mech-toggle {
   margin-top: 6px;
   background: none;
   border: none;
   color: #bfa76a;
   font-size: 12.5px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 0;
 }
 
 .mechanism-snapshot .mech-toggle:hover {
   text-decoration: underline;
 }
 
 /* Details (collapsed by default) */
 .mechanism-snapshot .mech-details {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.35s ease, opacity 0.3s ease;
   opacity: 0;
 }
 
 /* Expanded */
 .mechanism-snapshot .mech-details.open {
   max-height: 1600px;
   opacity: 1;
   margin-top: 10px;
 }
 
 /* Blocks */
 .mechanism-snapshot .mech-block {
   margin-top: 10px;
   padding: 10px 12px;
   border-radius: 10px;
   background: rgba(255,255,255,0.035);
 }
 
 .mechanism-snapshot .mech-block-title {
   font-size: 11px;
   letter-spacing: 0.12em;
   color: #d6b36a;
   margin-bottom: 4px;
 }

 /* Header: Official dropdown */
 .header .nav-dropdown{
   position: relative;
   display: inline-flex;
   align-items: center;
 }

 .header .nav-dropdown-menu,
 .header .nav-submenu{
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 240px;
   padding: 8px;
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,.14);
   background: rgba(11,30,58,.94);
   box-shadow: 0 18px 45px rgba(0,0,0,.25);
   display: block;
   opacity: 0;
   visibility: hidden;
   transition: opacity 160ms ease 500ms, visibility 0s linear 660ms;
   z-index: 10000;
 }

 .header .nav-dropdown:hover .nav-dropdown-menu,
 .header .nav-dropdown:focus-within .nav-dropdown-menu{
   opacity: 1;
   visibility: visible;
   transition: opacity 160ms ease 0s, visibility 0s linear 0s;
 }

 .header .nav-dropdown-menu a,
 .header .nav-submenu a{
   display: block !important;
   padding: 12px 12px !important;
   border-radius: 12px !important;
   font-size: 14px !important;
   font-weight: 650 !important;
   letter-spacing: .01em !important;
   color: rgba(255,255,255,.90) !important;
   background: rgba(255,255,255,.04) !important;
   border: 1px solid rgba(255,255,255,.10) !important;
   transform: none !important;
 }

 .header .nav-dropdown-menu a:hover,
 .header .nav-submenu a:hover{
   color: var(--gold-accent) !important;
   background: rgba(212,162,83,.10) !important;
   border-color: rgba(212,162,83,.55) !important;
 }

 .header .nav-subdropdown{
   position: relative;
 }

 .header .nav-submenu{
   top: -8px;
   left: auto;
   right: 100%;
   z-index: 10001;
 }

 .header .nav-subdropdown:hover .nav-submenu,
 .header .nav-subdropdown:focus-within .nav-submenu{
   opacity: 1;
   visibility: visible;
   transition: opacity 160ms ease 0s, visibility 0s linear 0s;
 }

 /* Mobile drawer: expandable Official group */
 .drawer-details{
   display: block;
 }

 .drawer-details > summary{
   list-style: none;
   color: rgba(255,255,255,.92);
   padding: 12px 10px;
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,.10);
   background: rgba(255,255,255,.04);
   cursor: pointer;
 }

 .drawer-details > summary::-webkit-details-marker{ display:none; }

 .drawer-details[open] > summary{
   border-color: rgba(212,162,83,.55);
   color: var(--gold-accent);
 }

 .drawer-details--nested{ margin-left: 10px; }
 .drawer-details--nested > summary{ margin-top: 8px; }

 .lead-modal{
   position: fixed;
   inset: 0;
   z-index: 20000;
   display: block;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 160ms ease, visibility 0s linear 160ms;
 }

 .lead-modal.is-open{
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transition: opacity 160ms ease, visibility 0s linear 0s;
 }

 .lead-modal-backdrop{
   position: absolute;
   inset: 0;
   background: rgba(3, 10, 22, .68);
 }

 .lead-modal-panel{
   position: relative;
   width: min(520px, calc(100% - 32px));
   margin: 10vh auto;
   border-radius: 18px;
   padding: 18px;
   background: rgba(11,30,58,.96);
   border: 1px solid rgba(255,255,255,.14);
   box-shadow: 0 18px 55px rgba(0,0,0,.45);
   color: rgba(255,255,255,.92);
   transform: translateY(10px);
   transition: transform 160ms ease;
 }

 .lead-modal.is-open .lead-modal-panel{
   transform: translateY(0);
 }

 .lead-modal-close{
   position: absolute;
   top: 10px;
   right: 10px;
   width: 36px;
   height: 36px;
   border-radius: 12px;
   border: 1px solid rgba(255,255,255,.18);
   background: rgba(255,255,255,.06);
   color: rgba(255,255,255,.92);
   font-size: 20px;
   line-height: 1;
 }

 .lead-modal-close:hover{
   border-color: rgba(212,162,83,.55);
   color: var(--gold-accent);
 }

 .lead-modal-title{
   font-size: 18px;
   font-weight: 760;
   letter-spacing: .01em;
   padding-right: 40px;
 }

 .lead-modal-subtitle{
   margin-top: 6px;
   color: rgba(255,255,255,.70);
   font-size: 13px;
   line-height: 1.6;
 }

 .lead-form{
   margin-top: 14px;
   display: grid;
   gap: 12px;
 }

 .lead-modal.is-direct-download .lead-field{
   display: none;
 }

 .lead-field{ display: grid; gap: 6px; }

 .lead-label{
   font-size: 12px;
   color: rgba(255,255,255,.72);
 }

 .lead-input{
   height: 44px;
   padding: 10px 12px;
   border-radius: 14px;
   border: 1px solid rgba(255,255,255,.14);
   background: rgba(255,255,255,.04);
   color: rgba(255,255,255,.94);
   outline: none;
 }

 .lead-input:focus{
   border-color: rgba(212,162,83,.65);
   box-shadow: 0 0 0 4px rgba(212,162,83,.18);
 }

 .lead-submit{
   height: 46px;
 }

 .lead-submit[disabled]{
   opacity: .72;
   cursor: not-allowed;
 }

 .lead-status{
   min-height: 18px;
   font-size: 13px;
   line-height: 1.5;
 }

 .lead-status[data-variant="success"]{ color: rgba(141, 255, 189, .92); }
 .lead-status[data-variant="error"]{ color: rgba(255, 160, 160, .92); }
 .lead-status[data-variant="pending"]{ color: rgba(255, 236, 170, .92); }

 .portal-shell{
  min-height: 100vh;
  padding: 84px 0 60px;
  background: linear-gradient(180deg, var(--blue-primary) 0%, var(--blue-deeper) 78%, var(--blue-deeper) 100%);
  color: rgba(255,255,255,.94);
 }

 .portal-shell--tight{
  padding: 28px 0 48px;
 }

 .portal-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
 }

 .portal-disclaimer{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
 }

 .portal-disclaimer-line{
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
 }

 .portal-inline-toggle{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: 8px;
  color: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(255,255,255,.22);
  font-size: 12px;
  line-height: inherit;
  display: inline;
 }

 .portal-inline-toggle:hover{
  color: var(--gold-accent);
  border-bottom-color: rgba(212,162,83,.55);
 }

 .portal-inline-caret{
  margin-left: 4px;
  opacity: .9;
 }

 .portal-disclaimer-line--notice{
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
 }

 .portal-guide-link{
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(255,255,255,.22);
 }

 .portal-guide-link:hover{
  color: var(--gold-accent);
  border-bottom-color: rgba(212,162,83,.55);
 }

 .portal-topbar-left{
  display:flex;
  align-items:center;
  gap: 12px;
 }

 .portal-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.88);
  font-weight: 650;
  font-size: 13px;
 }

 .portal-back:hover{
  border-color: rgba(212,162,83,.55);
  color: var(--gold-accent);
 }

 .portal-title{
  font-weight: 760;
  letter-spacing: .01em;
 }

 .portal-subtitle{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
 }

 .portal-topbar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
 }

 .portal-conn-text{
  font-size: 12px;
  color: rgba(255,255,255,.74);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
 }

 .portal-card{
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
 }

 .portal-note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
 }

 .portal-note-line{
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
 }

 .asset-selector{
  margin-top: 10px;
 }

 .asset-tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
 }

 .asset-tab{
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-weight: 650;
  font-size: 13px;
 }

 .asset-tab.is-active{
  border-color: rgba(212,162,83,.55);
  color: var(--gold-accent);
  background: rgba(212,162,83,.10);
 }

 .asset-tab.is-disabled{
  opacity: .70;
 }

 .asset-soon{
  margin-left: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.62);
 }

 .asset-help{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,.70);
 }

 .asset-info{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 236, 170, .92);
 }

 .portal-steps{
  margin: 14px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.84);
  line-height: 1.85;
 }

 .portal-steps li{
  margin: 6px 0;
 }

 .portal-steps a{
  border-bottom: 1px solid rgba(255,255,255,.22);
 }

 .portal-steps a:hover{
  color: var(--gold-accent);
  border-bottom-color: rgba(212,162,83,.55);
 }

 .portal-guide-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
 }

 .portal-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
 }

 .portal-h1{
  margin: 0;
  font-size: 18px;
  font-weight: 760;
 }

 .portal-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,162,83,0.6);
  color: #D4A253;
  background: rgba(212,162,83,0.08);
  letter-spacing: .04em;
  font-weight: 650;
 }

 .portal-row{
  display:grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 14px;
  align-items:end;
 }

 .portal-arrow-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap: 6px;
 }

 .portal-field{ display:grid; gap: 8px; }

 .portal-label{
  font-size: 12px;
  color: rgba(255,255,255,.72);
 }

 .portal-input{
  height: 46px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.94);
  outline: none;
 }

 .portal-input:focus{
  border-color: rgba(212,162,83,.65);
  box-shadow: 0 0 0 4px rgba(212,162,83,.18);
 }

 .portal-input[readonly]{
  opacity: .92;
 }

 .portal-arrow{
  height: 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  color: rgba(255,255,255,.76);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
 }

 .portal-arrow-note{
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255,255,255,.62);
  text-align:center;
  letter-spacing: .01em;
 }

 .portal-actions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
 }

 .portal-main-btn{
  min-width: 220px;
  height: 46px;
 }

 .portal-main-btn[disabled]{
  opacity: .72;
  cursor: not-allowed;
 }

 .portal-inline{
  font-size: 13px;
  line-height: 1.5;
 }

 .portal-inline.pending{ color: rgba(255, 236, 170, .92); }

 .status-panel{
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
 }

 .status-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
 }

 .status-item{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
  padding: 10px 12px;
 }

 .status-k{
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
 }

 .status-v{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.90);
  word-break: break-word;
 }

 .status-v-sub{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,.68);
 }

 .status-messages{
  margin-top: 12px;
 }

 .status-msg{
  min-height: 18px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
 }

 .status-msg.success{ color: rgba(141, 255, 189, .92); }
 .status-msg.error{ color: rgba(255, 160, 160, .92); }

 .portal-footer-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
 }

 @media(max-width:980px){
  .portal-row{ grid-template-columns: 1fr; }
  .portal-arrow{ height: 40px; }
  .status-grid{ grid-template-columns: 1fr 1fr; }
 }

 @media(max-width:520px){
  .status-grid{ grid-template-columns: 1fr; }
  .portal-main-btn{ width: 100%; }
 }

 /* Preview Modal */
 .preview-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
 }

 .preview-modal.is-open {
  display: block;
 }

 .preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
 }

 .preview-panel {
  position: relative;
  width: min(920px, calc(100vw - 32px));
  margin: 8vh auto 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(20, 32, 52, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
 }

 .preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: #fff;
  cursor: pointer;
  z-index: 2;
 }

 .preview-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,0.20);
 }

 .preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
 }

 .preview-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: #0b1a2e;
  background: rgba(212, 162, 83, 0.92);
  border: 1px solid rgba(0,0,0,0.20);
 }

 .preview-body {
  padding: 18px 18px 20px;
 }

 .preview-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 20px;
 }

 .preview-desc {
  margin: 0 0 14px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
 }

 .preview-soon-note{
  margin: -6px 0 14px;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  letter-spacing: .01em;
  line-height: 1.45;
 }

 .preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
 }