/* ==========================================================================
   GLOBAL LEGACY NETWORK — Shared Stylesheet
   Brand: Deep Navy #0D1B3D · Royal Blue #1E3A8A · Gold #C9A227
   Type: Montserrat (display) / Open Sans (body)
   ========================================================================== */

:root{
  --navy: #0D1B3D;
  --navy-soft: #142650;
  --royal: #1E3A8A;
  --gold: #C9A227;
  --gold-light: #E4C568;
  --white: #FFFFFF;
  --fog: #F2F4F7;
  --ink: #10152A;
  --muted: #5B6478;
  --line: #E3E7EE;
  --radius: 10px;
  --max: 1180px;
  --shadow: 0 20px 50px -25px rgba(13,27,61,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Open Sans', -apple-system, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Montserrat', sans-serif;
  font-weight:800;
  color:var(--navy);
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{margin:0 0 1em; color:var(--muted)}
a{color:inherit; text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}
.eyebrow{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.gold-rule{
  width:52px;height:3px;background:var(--gold);
  border:0; margin:14px 0 20px;
}
section{padding:88px 0}
.section-alt{background:var(--fog)}
.section-navy{background:var(--navy); color:var(--white)}
.section-navy h2,.section-navy h3,.section-navy .eyebrow-title{color:var(--white)}
.section-navy p{color:#C7CEE0}

/* ---- Header / Nav ---- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(13,27,61,.97);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  max-width:var(--max); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--white); font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.05rem}
.brand img{height:34px; width:auto}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{
  color:#D7DDEC; font-size:.88rem; font-weight:600;
  font-family:'Montserrat',sans-serif; letter-spacing:.02em;
  transition:color .15s;
}
.nav-links a:hover{color:var(--gold)}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:.85rem;
  padding:12px 24px; border-radius:6px; cursor:pointer; border:2px solid transparent;
  transition:transform .15s, box-shadow .15s, background .15s, color .15s;
}
.btn-gold{background:var(--gold); color:var(--navy)}
.btn-gold:hover{background:var(--gold-light); transform:translateY(-1px)}
.btn-outline{border-color:rgba(255,255,255,.5); color:var(--white)}
.btn-outline:hover{border-color:var(--gold); color:var(--gold)}
.btn-navy{background:var(--navy); color:var(--white)}
.btn-navy:hover{background:var(--navy-soft)}
.nav-cta{display:flex; gap:12px; align-items:center}
.nav-toggle{display:none}

/* ---- Hero ---- */
.hero{
  background:
    radial-gradient(circle at 82% 10%, rgba(201,162,39,.22), transparent 45%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
  color:var(--white);
  padding:120px 0 90px;
  position:relative; overflow:hidden;
}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; position:relative; z-index:2}
.hero h1{color:var(--white); font-size:clamp(2.3rem,4.4vw,3.6rem)}
.hero .tagline{color:var(--gold); font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:18px}
.hero p.lead{color:#C7CEE0; font-size:1.12rem; max-width:52ch}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}
.hero-art{position:relative}
.ascend{width:100%; height:auto}
.hero-stats{display:flex; gap:34px; margin-top:46px; flex-wrap:wrap}
.hero-stats div{border-left:2px solid var(--gold); padding-left:14px}
.hero-stats b{display:block; font-family:'Montserrat',sans-serif; font-size:1.5rem; color:var(--white)}
.hero-stats span{font-size:.8rem; color:#9FAAC7}

/* ---- Cards / Grids ---- */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition:box-shadow .2s, transform .2s;
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.card .num{
  font-family:'Montserrat',sans-serif; font-weight:800; color:var(--gold); font-size:.78rem;
  letter-spacing:.1em; margin-bottom:10px; display:block;
}
.card h4{margin-bottom:8px; font-size:1.05rem}
.card p{margin-bottom:0; font-size:.94rem}

/* problem/solution rows */
.ps-row{
  display:grid; grid-template-columns: 210px 1fr; gap:26px;
  padding:22px 0; border-bottom:1px solid var(--line); align-items:start;
}
.ps-row:last-child{border-bottom:0}
.ps-row .problem{font-family:'Montserrat',sans-serif; font-weight:800; color:var(--navy); font-size:1.02rem}
.ps-row .problem span{display:block; color:var(--gold); font-size:.72rem; letter-spacing:.12em; margin-bottom:6px}
.ps-row .solution{margin:0; color:var(--muted)}

/* pathway / staircase */
.pathway{position:relative; padding-top:20px}
.pathway-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.level-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; position:relative; display:flex; flex-direction:column; height:100%;
  border-top:4px solid var(--gold);
}
.level-card:nth-child(1){transform:translateY(48px)}
.level-card:nth-child(2){transform:translateY(24px)}
.level-card:nth-child(3){transform:translateY(0)}
.level-card:nth-child(4){transform:translateY(-24px); border-top-color:var(--navy); background:var(--navy); color:var(--white)}
.level-card:nth-child(4) h4, .level-card:nth-child(4) .lvl-tag{color:var(--white)}
.level-card:nth-child(4) p{color:#C7CEE0}
.lvl-tag{font-family:'Montserrat',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.12em; color:var(--gold); margin-bottom:8px}
.level-card h4{font-size:1.12rem; margin-bottom:10px}
.level-card p{font-size:.9rem; margin-bottom:10px}
.level-card ul{margin:0; padding-left:18px; font-size:.86rem; color:var(--muted)}
.level-card:nth-child(4) ul{color:#C7CEE0}
.level-card li{margin-bottom:5px}

/* cycle */
.cycle{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:40px}
.cycle-step{flex:1; min-width:150px; text-align:center; position:relative}
.cycle-num{
  width:54px;height:54px;border-radius:50%;
  background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.1rem; margin:0 auto 12px;
}
.cycle-step h4{font-size:.95rem; margin-bottom:6px}
.cycle-step p{font-size:.82rem}
.cycle-arrow{color:var(--gold); font-size:1.4rem; align-self:flex-start; margin-top:14px}

/* weekly rhythm */
.rhythm-table{width:100%; border-collapse:collapse; margin-top:10px}
.rhythm-table th{
  text-align:left; font-family:'Montserrat',sans-serif; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); padding:12px 16px; background:var(--navy);
}
.rhythm-table th:first-child{border-radius:8px 0 0 0}
.rhythm-table th:last-child{border-radius:0 8px 0 0}
.rhythm-table td{padding:16px; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:top}
.rhythm-table tr:nth-child(even) td{background:var(--fog)}
.rhythm-table td.day{font-family:'Montserrat',sans-serif; font-weight:700; color:var(--navy); white-space:nowrap}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg, var(--royal), var(--navy));
  color:var(--white); border-radius:16px; padding:56px; text-align:center;
  margin-top:20px;
}
.cta-band h2{color:var(--white)}
.cta-band p{color:#C7CEE0; max-width:56ch; margin-left:auto; margin-right:auto}
.cta-actions{display:flex; gap:14px; justify-content:center; margin-top:22px; flex-wrap:wrap}

/* footer */
footer{background:var(--navy); color:#9FAAC7; padding:56px 0 26px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px}
.footer-grid h5{color:var(--white); font-family:'Montserrat',sans-serif; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px}
.footer-grid a{display:block; color:#9FAAC7; font-size:.9rem; margin-bottom:10px; transition:color .15s}
.footer-grid a:hover{color:var(--gold)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:.82rem;
}
.powered{color:#C9A227; font-weight:700; font-family:'Montserrat',sans-serif; font-size:.8rem}

/* misc */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.badge{
  display:inline-block; background:rgba(201,162,39,.12); color:var(--gold);
  border:1px solid rgba(201,162,39,.4); padding:5px 14px; border-radius:20px;
  font-family:'Montserrat',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em; margin-bottom:16px;
}
blockquote{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.3rem; color:var(--navy);
  border-left:3px solid var(--gold); padding-left:22px; margin:0; line-height:1.5;
}
.section-navy blockquote{ color:var(--white); }

@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .pathway-grid{grid-template-columns:1fr}
  .level-card{transform:none !important}
  .two-col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .ps-row{grid-template-columns:1fr}
}

/* Utility for prototype/demo notice banners used on portal pages */
.proto-banner{
  background:#FFF6E0; border:1px solid #EBD48F; color:#7A5B00;
  font-size:.85rem; padding:12px 18px; border-radius:8px; margin-bottom:0;
}

/* ---- Ticker / marquee ---- */
.ticker{
  background:var(--navy); color:var(--gold-light); overflow:hidden; white-space:nowrap;
  border-radius:8px; padding:10px 0; position:relative;
}
.ticker-track{
  display:inline-block; padding-left:100%;
  animation:ticker-scroll 32s linear infinite;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:.85rem;
}
.ticker-track span{margin-right:46px}
@keyframes ticker-scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none} }

/* ---- Coming soon badge ---- */
.coming-soon{
  display:inline-block; background:#EFEAFB; color:#6B46C1; font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px; margin-left:10px; vertical-align:middle;
}
.dev-panel{
  border:1.5px dashed #C9CFDC; background:#FAFBFD; border-radius:12px; padding:26px; text-align:center;
}
.dev-panel h4{margin-bottom:6px}
.dev-panel p{max-width:46ch; margin-left:auto; margin-right:auto}

/* ---- Notification bell ---- */
.bell-wrap{position:relative}
.bell-btn{
  width:38px; height:38px; border-radius:50%; background:var(--fog); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.05rem; position:relative;
}
.bell-dot{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:#E0483B; border:2px solid #fff;
}
.bell-panel{
  position:absolute; right:0; top:48px; width:320px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:10px; display:none; z-index:40;
}
.bell-panel.open{display:block}
.alert-item{padding:12px 12px; border-radius:8px; margin-bottom:4px; font-size:.86rem}
.alert-item:hover{background:var(--fog)}
.alert-item b{display:block; font-family:'Montserrat',sans-serif; font-size:.82rem; color:var(--navy); margin-bottom:2px}
.alert-item.warn{background:#FFF6E0}
.alert-item.info{background:#EAF1FF}

/* ---- Community / social feed ---- */
.leader-row{display:flex; gap:16px; margin-bottom:16px}
.top-card{flex:1; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:18px; text-align:center; position:relative}
.top-card .rank{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--navy); width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:800; font-size:.8rem;
}
.top-card .av{
  width:56px; height:56px; border-radius:50%; background:var(--navy); color:var(--gold); margin:10px auto 10px;
  display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:800;
}
.post-card{border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:14px}
.post-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.post-head .av{width:38px; height:38px; border-radius:50%; background:var(--royal); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.85rem}
.post-head .meta{font-size:.78rem; color:var(--muted)}

/* ---- Journey gallery ---- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gallery .shot{
  aspect-ratio:1; border-radius:10px; background:linear-gradient(135deg, var(--royal), var(--navy));
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:.75rem; text-align:center; padding:8px;
}
.timeline{border-left:2px solid var(--line); padding-left:22px; margin-left:6px}
.tl-item{position:relative; padding-bottom:26px}
.tl-item::before{content:''; position:absolute; left:-28px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid #fff; box-shadow:0 0 0 2px var(--gold)}
.tl-item b{display:block; font-family:'Montserrat',sans-serif; color:var(--navy); font-size:.92rem}
.tl-item span{font-size:.78rem; color:var(--muted)}

@media(max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .leader-row{flex-direction:column}
}

/* ---- Chat / Community ---- */
.chat-shell{display:grid; grid-template-columns:170px 1fr; border:1px solid var(--line); border-radius:12px; overflow:hidden; height:480px}
.chat-channels{background:var(--fog); border-right:1px solid var(--line); padding:14px 10px}
.chat-channels .ch-label{font-family:'Montserrat',sans-serif; font-size:.68rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; padding:6px 10px}
.chat-channel{
  padding:9px 12px; border-radius:7px; font-size:.86rem; font-family:'Montserrat',sans-serif; font-weight:600;
  color:var(--muted); cursor:pointer; margin-bottom:2px;
}
.chat-channel:hover{background:#E9ECF3}
.chat-channel.active{background:var(--navy); color:#fff}
.chat-main{display:flex; flex-direction:column; height:100%}
.chat-messages{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px}
.msg{display:flex; gap:10px; max-width:80%}
.msg .av{width:32px; height:32px; border-radius:50%; background:var(--royal); color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.75rem}
.msg .bubble{background:var(--fog); border-radius:12px; padding:9px 13px; font-size:.88rem}
.msg .bubble b{display:block; font-family:'Montserrat',sans-serif; font-size:.76rem; color:var(--navy); margin-bottom:2px}
.msg.me{margin-left:auto; flex-direction:row-reverse}
.msg.me .bubble{background:var(--navy); color:#fff}
.msg.me .bubble b{color:var(--gold)}
.chat-input-row{display:flex; gap:10px; padding:12px; border-top:1px solid var(--line)}
.chat-input-row input{flex:1; border:1px solid var(--line); border-radius:20px; padding:10px 16px; font-family:'Open Sans',sans-serif; font-size:.88rem}
.chat-input-row button{
  background:var(--gold); color:var(--navy); border:0; border-radius:20px; padding:10px 20px; font-weight:700;
  font-family:'Montserrat',sans-serif; font-size:.82rem; cursor:pointer;
}

/* ---- Unplaced sign-ups ---- */
.unplaced-item{
  display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 16px;
  border:1px solid var(--line); border-radius:10px; margin-bottom:10px; flex-wrap:wrap;
}
.unplaced-item .src{font-size:.78rem; color:var(--muted)}
.place-actions{display:flex; gap:8px}
.place-actions button{
  border:1px solid var(--navy); background:#fff; color:var(--navy); padding:8px 14px; border-radius:6px;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:.78rem; cursor:pointer;
}
.place-actions button:hover{background:var(--navy); color:#fff}

/* ---- Enrollment form ---- */
.enroll-form{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.enroll-form .full{grid-column:1 / -1}
.enroll-form label{display:block; font-family:'Montserrat',sans-serif; font-size:.76rem; font-weight:700; margin-bottom:6px; color:var(--navy)}
.enroll-form input{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font-family:'Open Sans',sans-serif; font-size:.92rem}
.enroll-note{font-size:.78rem; color:var(--muted); margin-top:4px}
@media(max-width:640px){ .enroll-form{grid-template-columns:1fr} .chat-shell{grid-template-columns:1fr; height:auto} .chat-channels{display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line)} }