:root{
  --bg:#0b0b0f;
  --gold:#d4af37;
  --gold-soft:#deb84a;
  --emerald:#00d08a;
  --text:#e9ecf1;
  --muted:#9aa3ad;
  --card:#101217;
  --border: rgba(255,255,255,0.08);
  --glow: 0 0 24px rgba(212,175,55,0.25), 0 0 64px rgba(0,208,138,0.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text); background:var(--bg); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
#matrix-bg{
  position:fixed; inset:0; z-index:0;
  background: radial-gradient(1200px 800px at 50% 20%, rgba(0,208,138,0.08), transparent 60%),
              radial-gradient(800px 600px at 80% 80%, rgba(212,175,55,0.08), transparent 60%);
}

/* Intro */
.intro{
  position:fixed; inset:0; display:grid; place-items:center; z-index:10;
  background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.85));
  opacity:0; pointer-events:none; transition:opacity .6s ease;
  padding: clamp(12px, 4vw, 24px);
}
.intro.active{opacity:1; pointer-events:auto}
.intro-inner{ text-align:center; width:min(92vw, 680px)}
.crest-intro{ width:min(28vw, 140px); height:auto; filter: drop-shadow(0 8px 32px rgba(212,175,55,.35)); animation:pulse 3s ease-in-out infinite}
@keyframes pulse{
  0%,100%{ transform:scale(1); filter: drop-shadow(0 6px 24px rgba(212,175,55,.25))}
  50%{ transform:scale(1.04); filter: drop-shadow(0 12px 48px rgba(0,208,138,.25))}
}
.intro-copy h1{ margin:16px 0 6px; font-weight:800; letter-spacing:.3px; font-size:clamp(20px, 4.6vw, 32px)}
.intro-copy h2{ margin:0 0 20px; font-weight:500; color:var(--muted); font-size:clamp(14px, 3.4vw, 20px)}
.btn-primary{
  background:linear-gradient(135deg, var(--gold), var(--gold-soft));
  color:#141414; border:none; padding:12px 18px; border-radius:999px; cursor:pointer;
  font-weight:800; box-shadow: var(--glow); transform:translateZ(0);
  font-size:clamp(14px, 3.6vw, 16px);
}
.btn-primary:hover{ filter:brightness(1.05)}
.btn-secondary{
  background: rgba(0,208,138,.12); color: var(--text); border:1px solid var(--emerald);
  padding:10px 16px; border-radius:12px; cursor:pointer; backdrop-filter: blur(6px);
}
.btn-outline{
  border:1px solid var(--border); color:var(--text); padding:10px 16px; border-radius:12px; text-decoration:none;
}
.intro-sub{ color:var(--muted); margin-top:10px; font-size:clamp(12px, 3.2vw, 15px)}

.app.hidden{ display:none}
.app{ position:relative; z-index:1; padding-bottom:72px}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px clamp(12px, 4vw, 20px); border-bottom:1px solid var(--border); background:rgba(8,10,14,0.65);
  position:sticky; top:0; backdrop-filter: blur(8px); z-index:5;
}
.brand{ display:flex; gap:10px; align-items:center; min-width:0}
.crest{ width:36px; height:36px; object-fit:contain; filter: drop-shadow(0 4px 18px rgba(212,175,55,.3))}
.brand-title{ font-weight:800; letter-spacing:.4px; font-size:clamp(14px, 4vw, 18px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-sub{ font-size:clamp(11px, 3vw, 14px); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58vw}
.icon-btn{ background:transparent; border:1px solid var(--border); border-radius:12px; padding:10px; color:var(--text); cursor:pointer}
.icon-btn .icon-speaker{ width:18px; height:18px; display:inline-block; background:
  radial-gradient(circle at 30% 30%, var(--gold) 0 30%, transparent 31%),
  linear-gradient(90deg, transparent 0 35%, var(--gold) 35% 40%, transparent 40% 100%);
  mask: conic-gradient(from 0deg, transparent 0 30deg, #000 30deg 330deg, transparent 330deg 360deg);
  -webkit-mask: conic-gradient(from 0deg, transparent 0 30deg, #000 30deg 330deg, transparent 330deg 360deg);
}

/* RGB Name Pulse (continuous) */
.rgb-pulse{
  animation: rgbGlow 7s linear infinite;
  text-shadow:
    0 0 12px rgba(212,175,55,.35),
    0 0 20px rgba(0,208,138,.25);
}
@keyframes rgbGlow{
  0%{ color:#e9ecf1; text-shadow:0 0 10px rgba(0,208,138,.30), 0 0 20px rgba(212,175,55,.20)}
  25%{ color:#b7ffe3; text-shadow:0 0 12px rgba(0,208,138,.45), 0 0 24px rgba(255,255,255,.10)}
  50%{ color:#fff4c2; text-shadow:0 0 14px rgba(212,175,55,.50), 0 0 28px rgba(0,208,138,.15)}
  75%{ color:#bde3ff; text-shadow:0 0 12px rgba(0,153,255,.35), 0 0 24px rgba(212,175,55,.18)}
  100%{ color:#e9ecf1; text-shadow:0 0 10px rgba(0,208,138,.30), 0 0 20px rgba(212,175,55,.20)}
}

/* Title gradient animation */
.title-animate{
  background: linear-gradient(90deg, var(--gold), var(--emerald), var(--gold));
  -webkit-background-clip: text; background-clip:text;
  color: transparent;
  animation: titleFlow 8s linear infinite;
  background-size: 200% 100%;
}
.glow-soft{ color:#f2f6ff; text-shadow:0 0 10px rgba(255,255,255,.18) }
.italic-fade{ font-style:italic; opacity:.92 }

@keyframes titleFlow{
  0%{ background-position: 0% 50% }
  100%{ background-position: 200% 50% }
}

/* Tabs (mobile scrollable) */
.tabs{
  display:flex; gap:10px; padding:10px clamp(12px, 4vw, 20px); border-bottom:1px solid var(--border);
  background:rgba(8,10,14,0.5); position:sticky; top:58px; backdrop-filter: blur(8px); z-index:4;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tab{ background:transparent; border:1px solid var(--border); color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer; flex:0 0 auto}
.tab.active, .tab:hover{ border-color: var(--emerald); box-shadow: 0 0 0 1px rgba(0,208,138,.15) inset}

.panels{ padding:16px clamp(12px, 4vw, 20px); max-width:1100px; margin:0 auto}
.panel{ display:none; animation: fade .45s ease both}
.panel.active{ display:block}
@keyframes fade{ from{ opacity:.4; transform:translateY(6px)} to{opacity:1; transform:none}}

/* Identity layout */
.identity-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(14px, 4vw, 24px)}
@media (max-width:900px){ .identity-grid{ grid-template-columns:1fr }}

.portrait-wrap{ display:flex; align-items:center; justify-content:center}
.portrait-frame{
  position:relative; border:1px solid var(--border); border-radius:18px; padding:10px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: var(--glow); width:100%; max-width:520px;
}
.portrait{ width:100%; border-radius:14px; display:block; height:auto }
.portrait-badge{
  position:absolute; left:12px; bottom:12px; font-size:clamp(.7rem, 2.8vw, .85rem); color:var(--text); background:rgba(0,0,0,.45); padding:6px 10px; border:1px solid var(--border); border-radius:10px;
}
.pulse-verify{
  animation: verifyPulse 6s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(212,175,55,.25), 0 0 20px rgba(0,208,138,.12);
}
@keyframes verifyPulse{
  0%,100%{ text-shadow: 0 0 8px rgba(212,175,55,.45) }
  50%{ text-shadow: 0 0 10px rgba(0,208,138,.55) }
}

.identity-meta .name{ margin:0 0 8px; font-family: 'Cinzel', ui-serif, Georgia, 'Times New Roman', serif; letter-spacing:1px; font-size:clamp(20px, 6vw, 34px)}
.identity-meta .title{ margin:8px 0 10px; font-size:clamp(12px, 3.4vw, 16px)}
.id-row{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px}
.chip{ border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:clamp(.8rem, 3vw, .95rem)}
.motto{ color:var(--gold-soft); font-style:italic; margin: 8px 0 16px; font-size:clamp(.9rem, 3.4vw, 1rem)}

.socials{ display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 16px}
.social-btn{ text-decoration:none; border:1px solid var(--border); padding:10px 12px; border-radius:12px; color:var(--text); font-size:clamp(.9rem, 3.4vw, 1rem)}
.social-btn:hover{ border-color:var(--emerald)}

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

/* Markets */
.widget-wrap{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow: var(--glow)}
.widget-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.status-dot{ font-size:.9rem; color:var(--muted)}
.status-dot.online::before{ content:''; display:inline-block; width:8px; height:8px; background:var(--emerald); border-radius:50%; margin-right:8px; box-shadow:0 0 12px rgba(0,208,138,.6)}
.tv-holder{ width:100%; min-height:420px }
@media (max-width:480px){ .tv-holder{ min-height:360px }}

/* Ecosystem */
.divider{
  text-align:center; margin:18px 0; color:var(--muted); letter-spacing:2px; font-size:.85rem;
  position:relative;
}
.divider::before, .divider::after{
  content:''; position:absolute; top:50%; width:36%; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18));
}
.divider::before{ left:0 }
.divider::after{ right:0; transform:scaleX(-1)}

.cards{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px}
@media (max-width:700px){ .cards{ grid-template-columns:1fr} }
.card{ position:relative; border:1px solid var(--border); padding:16px; border-radius:14px; background: rgba(16,18,23,.6); text-decoration:none; color:var(--text); transition: transform .2s ease, border-color .2s ease}
.card:hover{ transform: translateY(-2px); border-color: var(--emerald)}
.card.locked::after{
  content:"Access restricted to verified members of the Luminary Syndicate — please log in via your CCU Exchange credentials.";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:16px; background:rgba(0,0,0,.55); border-radius:14px; border:1px dashed rgba(255,255,255,.18);
  color:#f5f8ff; opacity:0; transition:opacity .25s ease; font-size:.95rem;
}
.card.locked:hover::after{ opacity:1 }
.card.locked{ overflow:hidden }
.card.locked::before{
  content:"🔒"; position:absolute; top:10px; right:12px; opacity:.9
}

/* Contact */
.contact-card{ max-width:640px; margin:0 auto; border:1px solid var(--border); border-radius:16px; padding:16px; background: rgba(16,18,23,.6); box-shadow: var(--glow)}
.form-row{ display:flex; flex-direction:column; gap:6px; margin:10px 0}
input, textarea{ background:#0E1116; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:12px; font-size:16px}
input:focus, textarea:focus{ outline:none; border-color: var(--emerald); box-shadow: 0 0 0 2px rgba(0,208,138,.12)}

.contact-result{ color:var(--emerald); min-height:1.2em; margin-top:8px}
.privacy-note{ color:var(--muted); font-size:.9rem; margin-top:6px}

/* Announcements */
.announce-wrap{ max-width:900px; margin:0 auto; border:1px solid var(--border); border-radius:16px; padding:18px; background: rgba(16,18,23,.6); box-shadow: var(--glow); position:relative; overflow:hidden}
.announce-wrap::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 380px at 12% 0%, rgba(212,175,55,.06), transparent 60%),
              radial-gradient(600px 380px at 88% 100%, rgba(0,208,138,.06), transparent 60%);
  pointer-events:none;
}
.announce-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap }
.announce-body{ white-space:pre-wrap; line-height:1.55; color:#f3f5f8; font-size:clamp(14px, 3.4vw, 16px)}
.announce-meta{ color:var(--muted); margin-top:14px; font-size:.95rem }

/* Chat */
.chat-bubble{
  position:fixed; right:16px; bottom:18px; z-index:6;
  border:1px solid var(--border); background:linear-gradient(180deg, #12151b, #0d1016); color:var(--text);
  padding:12px 14px; border-radius:999px; box-shadow: var(--glow); cursor:pointer;
  font-size:clamp(12px, 3.2vw, 14px)
}
.chat-window{
  position:fixed; right:12px; bottom:66px; z-index:6; width:min(92vw, 340px);
  border:1px solid var(--border); background:#0e1116; border-radius:16px; box-shadow: var(--glow);
}
.chat-window.hidden{ display:none}
.chat-header{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border)}
.chat-log{ max-height:52vh; overflow:auto; padding:12px}
.chat-log .bot, .chat-log .user{ padding:10px 12px; border:1px solid var(--border); border-radius:12px; margin:6px 0; font-size:clamp(13px,3.4vw,14px)}
.chat-log .bot{ background:rgba(0,208,138,.06)}
.chat-log .user{ background:rgba(255,255,255,.04)}
.chat-form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--border)}
.chat-form input{ flex:1 }

/* Footer */
.footer{ text-align:center; color:var(--muted); padding:24px 12px; font-size:clamp(12px, 3vw, 14px)}

@media (min-width:1100px){
  .panels{ padding:24px 20px }
}