/* === ROOT VARIABLES === */
:root{
  --ink:#0a0c12; --bg:#0b0e15; --card:#101321; --muted:#9aa3ba;
  --gh-red:#ce1126; --gh-gold:#fcd116; --gh-green:#006b3f;
  --neo1:#54febd; --neo2:#5de2ff; --neo3:#a68cff;
}

/* === FONT === */
/* === FONT === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body, h1, h2, h3, p, button, input {
  font-family: 'Montserrat', sans-serif;
}



*{box-sizing:border-box;scroll-behavior:smooth}
html,body{height:100%;margin:0}
body{
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:#e9ecf6;
  overflow-x:hidden;
}

/* === ANIMATIONS === */
@keyframes ghGradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes float {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes glowPulse {
  0%,100%{box-shadow:0 0 0 rgba(0,0,0,0)}
  50%{box-shadow:0 0 18px rgba(252,209,22,.35)}
}
@keyframes waveBG {
  0%{background-position:0 0}
  100%{background-position:400% 0}
}

/* === NAVBAR === */
.nav {
  position: fixed;       /* keep at the top even when scrolling */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: linear-gradient(90deg, var(--gh-red), var(--gh-gold), var(--gh-green), var(--gh-red));
  background-size: 300% 300%;
  animation: ghGradient 18s ease infinite;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;width:min(1180px,92vw);margin:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo-img {
  height: 64px;
  width: auto;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.brand-logo-img:hover {
  transform: scale(1.06);
  opacity: 0.95;
}

.brand-name{color:#fff;font-weight:800}
nav#primary-nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav a{color:#fff;opacity:.9;position:relative;font-weight:600}
.nav a:hover{opacity:1}
.cta{
  padding:10px 16px;border-radius:12px;
  background:linear-gradient(90deg,var(--gh-red),var(--gh-gold),var(--gh-green));
  color:#0b0e15;font-weight:800;box-shadow:0 0 14px rgba(252,209,22,.25);
  transition:transform .3s ease, box-shadow .3s ease;
}
.cta:hover{transform:scale(1.05);box-shadow:0 0 24px rgba(252,209,22,.45)}

/* === HERO === */
.gh-hero{
  position:relative;overflow:hidden;padding:120px 0 80px;
  background:linear-gradient(270deg,var(--gh-red),var(--gh-gold),var(--gh-green),#0b0e15);
  background-size:400% 400%;
  animation:waveBG 60s linear infinite;
}
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;width:min(1180px,92vw);margin:auto}
.intro{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.massive{margin:.1em 0 .3em;line-height:.9;font-weight: 900;font-family:'Montserrat',sans-serif}
.massive .line{display:block;font-size:clamp(48px,8vw,80px)}
.massive .accent{color:#fff;position:relative}
.massive .accent::after{
  content:'';position:absolute;left:-6px;right:-6px;bottom:8px;height:10px;
  background:linear-gradient(90deg,var(--gh-red),var(--gh-gold),var(--gh-green));
  opacity:.9;z-index:-1;border-radius:3px;filter:blur(1px);
}
.lede{color:#cfd6ea;font-size:clamp(16px,1.6vw,20px);max-width:58ch}
.actions{display:flex;gap:14px;margin-top:20px}
.btn{
  padding:12px 20px;border-radius:12px;border:none;cursor:pointer;font-weight:700;
  transition:all .3s ease;
}
.btn.primary{
  background:linear-gradient(90deg,var(--gh-red),var(--gh-gold),var(--gh-green));
  color:#0b0e15;box-shadow:0 0 12px rgba(252,209,22,.3);
}
.btn.primary:hover{transform:translateY(-3px) scale(1.05)}
.btn.ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25);
}
.btn.ghost:hover{border-color:var(--gh-gold);color:var(--gh-gold)}
.figure-frame{position:relative;animation:float 6s ease-in-out infinite}
.figure-frame img{width:100%;border-radius:24px;box-shadow:0 10px 40px rgba(0,0,0,.5)}

/* === SECTIONS === */
.section{padding:80px 0;width:min(1180px,92vw);margin:auto;text-align:center}
.section h2{font-family:'Getaway',sans-serif;font-size:clamp(28px,4vw,44px);margin-bottom:10px}
.section p{color:#cfd6ea}

/* === GRID HELPERS === */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;text-align:left}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:900px){.two-col,.grid-3,.grid-4{grid-template-columns:1fr}}

/* === CARD STYLES === */
.card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:22px;transition:all .35s ease;position:relative;overflow:hidden;
}
.card.outline{border:1px solid rgba(255,255,255,.2)}
.card:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:var(--gh-gold);
  box-shadow:0 0 20px rgba(252,209,22,.25);
  animation:glowPulse 2s ease infinite;
}
.card img{width:100%;border-radius:12px;margin-bottom:12px}

/* === TIMELINE === */
.timeline{display:flex;gap:16px;flex-wrap:wrap}
.timeline .card{flex:1 1 30%;text-align:center}

/* === STATS === */
.stats{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:24px}
.count{
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 22px;
  background:rgba(255,255,255,.03);width:160px;
  transition:all .3s ease;cursor:default;
}
.count:hover{transform:translateY(-5px);border-color:var(--gh-gold);box-shadow:0 0 18px rgba(252,209,22,.25)}
.num{font-size:clamp(30px,3.5vw,48px);font-weight:900;font-family:'Getaway',sans-serif}
.lab{color:var(--muted);font-size:14px}

/* === CAROUSEL === */
.carousel{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px}
.carousel img{
  width:120px;height:120px;border-radius:50%;object-fit:cover;scroll-snap-align:center;
  border:2px solid rgba(255,255,255,.1);transition:transform .3s ease, box-shadow .3s ease;
}
.carousel img:hover{transform:scale(1.15) rotate(4deg);box-shadow:0 0 18px rgba(252,209,22,.4)}

/* === CTA BAND === */
.cta-band{
  padding:60px 0;
  background:linear-gradient(90deg,var(--gh-red),var(--gh-gold),var(--gh-green),var(--gh-red));
  background-size:300% 300%;
  animation:ghGradient 30s ease infinite;
  text-align:center;color:#fff;box-shadow:0 0 40px rgba(0,0,0,.3);
}
.cta-band h2{font-family:'Getaway',sans-serif;font-size:clamp(28px,4vw,46px);margin-bottom:16px}

/* === FOOTER === */
.footer{padding:40px 0 60px;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:var(--muted)}
.footer .logos{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}
.footer img{opacity:.8;transition:opacity .3s ease}
.footer img:hover{opacity:1}

/* === MOBILE NAV === */
.hamburger{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.04);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.hamburger span{width:22px;height:2px;background:#fff}
@media(max-width:900px){
  .hamburger{display:flex}
  nav#primary-nav{position:fixed;top:64px;left:0;right:0;background:rgba(11,14,21,.95);transform:translateY(-10px);opacity:0;pointer-events:none;transition:all .3s ease}
  nav#primary-nav ul{flex-direction:column;text-align:center;padding:10px 0}
  .nav.open nav#primary-nav{transform:translateY(0);opacity:1;pointer-events:auto}
}

/* === REVEAL EFFECT === */
.reveal{opacity:0;transform:translateY(20px);transition:all .6s ease-out}
.reveal.show{opacity:1;transform:translateY(0)}

/* === REDUCE MOTION === */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* === CTA BUTTONS (Solid Style) === */
.btn.primary {
  background: var(--gh-gold);
  color: #0b0e15;
  border: 2px solid var(--gh-red);
  box-shadow: none;
  transition: all 0.3s ease;
}

.btn.primary:hover {
  background: #ffd944;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 10px rgba(252,209,22,0.3);
}

.cta {
  background: var(--gh-gold);
  border: 2px solid var(--gh-red);
  color: #0b0e15;
  box-shadow: none;
}

.cta:hover {
  background: #ffd944;
  box-shadow: 0 0 10px rgba(252,209,22,0.3);
}

/* === SOLID STYLE CTA & NAV BUTTONS === */
.btn.primary,
.cta {
  background: var(--gh-gold);
  color: #0b0e15;
  border: 2px solid var(--gh-red);
  border-radius: 12px;
  box-shadow: none;
  transition: all 0.3s ease;
}

.btn.primary:hover,
.cta:hover {
  background: #ffd944; /* brighter gold */
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 10px rgba(252,209,22,0.3);
}

/* Navbar Join/Login button */
nav .cta {
  background: var(--gh-gold);
  border: 2px solid var(--gh-red);
  color: #0b0e15;
  box-shadow: none;
}

nav .cta:hover {
  background: #ffd944;
  box-shadow: 0 0 10px rgba(252,209,22,0.3);
}
/* === Focus Areas (image cards like screenshot) === */
.focus-areas h2 { text-align:left; margin-bottom:22px; }

.focus-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}

.focus-card{ text-align:left; }
.focus-card .media{
  position:relative; border-radius:22px; overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.focus-card .media img{
  width:100%; height:320px; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .5s;
}
.focus-card:hover .media img{
  transform:scale(1.04);
  filter:saturate(1.05) contrast(1.05);
}

.focus-card h3{
  font-family:'Getaway',sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  margin:18px 0 10px;
  color:#fff;
}

.ticks{ list-style:none; margin:0 0 14px; padding:0; }
.ticks li{
  position:relative; padding-left:26px; margin:10px 0; color:#cfd6ea;
}
.ticks li::before{
  content:"✔"; position:absolute; left:0; top:0;
  color:var(--gh-gold); font-weight:900;
  transform:translateY(1px);
}

.link-more{
  display:inline-flex; align-items:center; gap:8px;
  color:#bcd7ff; font-weight:700;
  text-decoration:none; transition:color .25s ease, transform .25s ease;
}
.link-more:hover{ color:#fff; transform:translateX(4px); }

/* Responsive */
@media (max-width: 1100px){ .focus-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 700px){
  .focus-grid{ grid-template-columns:1fr; gap:20px; }
  .focus-card .media img{ height:220px; }
}

/* === Why It Matters — rich metrics === */
.why-matters h2 { text-align:left; margin-bottom:18px; }
.why-grid {
  display:grid; gap:22px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1100px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .why-grid{ grid-template-columns:1fr; } }

.stat-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:18px;
  text-align:left; position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s;
}
.stat-card:hover{
  transform:translateY(-6px);
  border-color:var(--gh-gold);
  box-shadow:0 0 18px rgba(252,209,22,.25);
}

/* Ring meters */
.stat-card.ring .meter{
  --p:0; /* animated percent 0–100 */
  width:108px; height:108px; border-radius:50%;
  background:
    conic-gradient(var(--gh-gold) calc(var(--p)*1%), rgba(255,255,255,.08) 0);
  display:grid; place-items:center; margin-bottom:10px;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.06);
}
.stat-card.ring .meter::after{
  content: attr(data-percent) '%';
  font-family:'Getaway',sans-serif;
  font-weight:900; font-size:20px; color:#fff;
}
/* Bars */
.stat-card.bar .bar-wrap{
  width:100%; height:12px; border-radius:999px;
  background:rgba(255,255,255,.08); overflow:hidden; margin:6px 0 10px;
}
.stat-card.bar .bar-fill{
  --val:0; /* animated value 0–100 */
  height:100%;
  width: calc(var(--val) * 1%);
  background: linear-gradient(90deg, var(--gh-red), var(--gh-gold), var(--gh-green));
  background-size: 200% 100%;
  transition: width .9s ease;
  border-radius:inherit;
}
.stat-card h3{
  margin:6px 0 4px; font-size:18px; font-weight:800;
}
.stat-card .sub{ color:#cfd6ea; margin:0 0 6px; }
.stat-card .num{ font-size:28px; font-weight:900; font-family:'Getaway',sans-serif; }

/* Footnote */
.why-matters .footnote{ margin-top:10px; opacity:.8; }

/* === Ring meter callout === */
.stat-card.ring { position: relative; }
.stat-card.ring .meter {
  --p: 0;                   /* filled percent (set by JS) */
  --size: 108px;
  --r: 54;                  /* radius */
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    conic-gradient(var(--gh-gold) calc(var(--p)*1%), rgba(255,255,255,.08) 0);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.06);
}

/* Callout bubble (outside the pie) */
/* === Ring meter callout (fixed to right side) === */
.meter .callout {
  position: absolute;
  left: calc(100% + 12px);   /* always right of circle */
  top: 50%;
  transform: translateY(-50%);
  background: #ffe36a;
  color: #0b0e15;
  font-weight: 900;
  border: 2px solid var(--gh-red);
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.meter .callout .val {
  font-family: 'Getaway', sans-serif;
  font-size: 16px;
}

/* Leader line that connects center → callout */
.meter .leader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(50% + 10px); /* half the circle + gap */
  height: 2px;
  background: #ffe36a;
  transform-origin: left center;
  transform: translateY(-50%);
  opacity: 0.9;
  box-shadow: 0 0 6px rgba(252, 209, 22, 0.6);
}


/* Nice “selected” glow when card hovered */
.stat-card.ring:hover { box-shadow:0 0 28px rgba(252,209,22,.28); }

/* Small screens: keep callout close so it doesn't overflow */
@media (max-width:700px){
  .meter .callout{ padding:5px 8px; font-size:14px; }
}