/* ===== Base ===== */
:root{
  --text:#f5f7fa;
  --muted:#cbd5e1;
  --glass:rgba(0,0,0,.45);
  --stroke:rgba(255,255,255,.15);
  --bg-overlay:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6));
  --brand1:#f5f7fa;
  --brand2:#f5f7fa;
  --accent:#dc2626;
  --radius:20px;
  --shadow:0 25px 80px rgba(0,0,0,.4);
  --glow:0 0 30px rgba(245,247,250,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  font-weight:400;
  line-height:1.6;
}

/* Enhanced full-bleed knitted background */
body::before{
  content:"";
  position:fixed; 
  inset:0; 
  z-index:-1;
  background: url('assets/background.png') center / cover no-repeat fixed;
  filter:brightness(.85) contrast(1.1);
}

/* Additional overlay for better text readability */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: linear-gradient(135deg, 
    rgba(220,38,38,.15) 0%, 
    rgba(0,0,0,.3) 50%, 
    rgba(220,38,38,.1) 100%);
  pointer-events:none;
}

.container{max-width:1200px; margin:0 auto; padding:0 24px}

/* ===== Enhanced Header ===== */
.site-header{
  position:sticky; 
  top:0;
  z-index:100;
  backdrop-filter:saturate(150%) blur(20px);
  background:rgba(0,0,0,.5);
  border-bottom:1px solid var(--stroke);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.header-row{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  height:72px;
}
.brand{
  display:flex; 
  align-items:center; 
  gap:12px; 
  font-weight:800; 
  letter-spacing:.5px;
  font-size:20px;
  transition:transform .2s ease;
}
.brand:hover{transform:scale(1.02)}
.brand img{
  width:44px; 
  height:44px; 
  border-radius:50%; 
  object-fit:cover;
  border:2px solid var(--brand1);
  box-shadow:var(--glow);
}
.brand span{color:var(--text)}
.nav{display:flex; gap:20px}
.nav a{
  padding:10px 16px; 
  border-radius:14px; 
  color:var(--text); 
  text-decoration:none;
  font-weight:500;
  transition:all .2s ease;
  border:1px solid transparent;
}
.nav a:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--stroke);
  transform:translateY(-1px);
}

/* ===== Enhanced Hero ===== */
.section{padding:80px 0; position:relative}
.section.tight{padding:60px 0}
.section.compact{padding:50px 0}
.hero{padding-top:100px}
.hero-grid{
  display:grid; 
  grid-template-columns: 1.2fr .8fr; 
  gap:32px; 
  align-items:center;
}

.card{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background: var(--bg-overlay);
  box-shadow:var(--shadow);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow), var(--glow);
}

.glass{backdrop-filter: blur(12px) saturate(130%)}

.hero-left{
  padding:32px; 
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero-left::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:linear-gradient(135deg, 
    rgba(255,47,179,.1) 0%, 
    transparent 50%, 
    rgba(125,211,252,.1) 100%);
  pointer-events:none;
}

.avatar-wrap{
  display:flex; 
  justify-content:center;
  margin-bottom:16px;
}
.avatar{
  width:140px; 
  height:140px; 
  border-radius:50%; 
  object-fit:cover;
  border:3px solid var(--brand1);
  box-shadow:var(--glow), var(--shadow);
  transition:transform .3s ease;
}
.avatar:hover{transform:scale(1.05) rotate(5deg)}

.title{
  font-size:48px; 
  line-height:1.1; 
  margin:0 0 8px;
  font-weight:900;
  background:linear-gradient(135deg, var(--brand1), var(--brand2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.subtitle{
  color:var(--muted); 
  margin:0 0 24px;
  font-size:18px;
  font-weight:500;
}
.cta-row{
  display:flex; 
  gap:16px; 
  justify-content:center; 
  flex-wrap:wrap;
}

.hero-right{display:grid; gap:20px}
.stat{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding:20px 24px;
}
.stat-label{
  color:var(--muted); 
  font-size:14px;
  font-weight:500;
}
.stat-value{
  font-weight:800; 
  letter-spacing:.4px;
  font-size:18px;
}
.callout{
  padding:24px; 
  font-size:16px; 
  color:var(--muted);
  font-style:italic;
  position:relative;
}
.callout::before{
  content:'"';
  position:absolute;
  top:8px; left:8px;
  font-size:48px;
  color:var(--brand1);
  opacity:.3;
}

.gradient-edge{
  position:absolute; 
  left:0; right:0; bottom:-1px; 
  height:140px;
  background:linear-gradient(to bottom, 
    rgba(0,0,0,0) 0%, 
    rgba(0,0,0,.5) 100%);
  pointer-events:none;
}

/* ===== Enhanced Buttons ===== */
.btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:10px;
  padding:14px 24px; 
  border-radius:14px; 
  font-weight:700; 
  text-decoration:none; 
  transition:all .2s ease;
  border:1px solid var(--stroke);
  font-size:16px;
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.1), transparent);
  opacity:0;
  transition:opacity .2s ease;
}
.btn:hover::before{opacity:1}
.btn.primary{
  background:linear-gradient(135deg,var(--brand1),var(--brand2)); 
  color:#0b0b0c;
  border:none;
  box-shadow:var(--glow);
}
.btn.ghost{
  background:rgba(255,255,255,.08); 
  color:var(--text);
}
.btn.white{
  background:#fff; 
  color:#0b0b0c;
  border:none;
}
.btn.mini{padding:10px 16px; font-size:14px}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.btn.primary:hover{
  box-shadow:var(--glow), 0 10px 30px rgba(0,0,0,.3);
}

/* ===== Enhanced Roadmap ===== */
.section-title{
  text-align:center; 
  margin:0 0 32px; 
  font-size:32px;
  font-weight:800;
  background:linear-gradient(135deg, var(--text), var(--muted));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.grid-3{
  display:grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap:24px;
}
.grid-3 .card{
  padding:28px; 
  text-align:left;
  position:relative;
}
.grid-3 .card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:4px;
  background:linear-gradient(90deg, var(--brand1), var(--brand2));
  border-radius:var(--radius) var(--radius) 0 0;
}
.grid-3 h3{
  margin:0 0 12px; 
  font-size:20px;
  font-weight:700;
}
.grid-3 p{
  margin:0; 
  color:var(--muted); 
  font-size:15px;
  line-height:1.6;
}

/* ===== Enhanced CTA Strip ===== */
.cta-strip{
  padding:40px 0; 
  background:transparent;
}
.cta-inner{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:20px; 
  border:1px solid var(--stroke); 
  border-radius:var(--radius); 
  padding:24px 32px; 
  background: var(--bg-overlay); 
  backdrop-filter: blur(12px); 
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.cta-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, 
    rgba(255,47,179,.05) 0%, 
    transparent 50%, 
    rgba(125,211,252,.05) 100%);
  pointer-events:none;
}
.cta-text{
  font-weight:700;
  font-size:18px;
}
.cta-buttons{
  display:flex; 
  gap:12px; 
  flex-wrap:wrap;
}

/* ===== Enhanced About ===== */
#about .card{
  padding:32px; 
  text-align:center;
}
#about p{
  margin:0; 
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}

/* ===== Enhanced Footer ===== */
.site-footer{
  padding:24px 0; 
  border-top:1px solid var(--stroke); 
  background:rgba(0,0,0,.6); 
  backdrop-filter: blur(12px);
}
.footer-row{
  display:flex; 
  align-items:center; 
  justify-content:space-between;
}
.footer-links{
  display:flex; 
  gap:20px;
}
.footer-links a{
  color:var(--muted);
  text-decoration:none;
  transition:color .2s ease;
}
.footer-links a:hover{
  color:var(--text);
}

/* ===== Enhanced Reveal Animations ===== */
.reveal{
  opacity:0; 
  transform:translateY(20px); 
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.visible{
  opacity:1; 
  transform:none;
}

/* ===== Enhanced Responsive ===== */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .hero-right{order:-1}
  .cta-inner{flex-direction:column; text-align:center}
}
@media (max-width: 640px){
  .grid-3{grid-template-columns: 1fr}
  .title{font-size:40px}
  .avatar{width:120px; height:120px}
  .container{padding:0 20px}
  .section{padding:60px 0}
  .hero{padding-top:80px}
  .nav{gap:12px}
  .nav a{padding:8px 12px; font-size:14px}
}

/* ===== Brand Link Styles ===== */
.brand, .brand span, .brand:link, .brand:visited { 
  color: var(--text); 
  text-decoration: none;
}
a.brand { 
  color: var(--text); 
  text-decoration: none; 
}



/* Extended soft glow hover for ALL white buttons */
.btn.white:hover{
  filter:brightness(1.18);
  box-shadow:0 0 35px rgba(245,247,250,.55);
}


/* Normalize any leftover primary/ghost to white for uniformity */
.btn.primary, .btn.ghost{
  background:#fff !important;
  color:#0b0b0c !important;
  border:none !important;
  box-shadow:none;
}
.btn.primary:hover, .btn.ghost:hover{
  filter:brightness(1.18);
  box-shadow:0 0 35px rgba(245,247,250,.55);
}

/* v21 mobile header spacing */

@media (max-width: 768px){
  .nav{ gap:10px; }
  .nav a{ padding:8px 12px; }
}



/* v22: tighter mobile header spacing with higher specificity */
@media (max-width: 768px){
  .site-header .header-row{ height:64px; }
  .site-header .nav{ gap:8px; }
  .site-header .nav a{ padding:6px 10px; font-size:14px; }
}