/* ----------
  CRYO-SHATTER | Sol Cycle
  Style (dark / calm Mars theme)
   Palette:
   --orange: #ea5c34
   --peach:  #e88d74
   --beige:  #ecc29c
   --brown:  #756454
   --dark:   #423833
---------- */

:root{
  --orange: #ea5c34;
  --peach: #e88d74;
  --beige: #ecc29c;
  --brown: #756454;
  --dark: #423833;
  --muted: #b9a895;
  --bg: #0b0a0b; /* very dark base */
  --card: rgba(10,10,12,0.6);
  --glass: rgba(255,255,255,0.03);
  --accent-contrast: rgba(234,92,52,0.95);
  --max-width: 1100px;
  --radius: 14px;
  --transition: 280ms cubic-bezier(.2,.9,.25,1);
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color: #efece7;
  background: linear-gradient(180deg,var(--bg), #0f0e10 60%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* NAV */
.navbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.8rem 1.25rem;
  background: linear-gradient(90deg, rgba(6,6,6,0.65), rgba(20,16,14,0.35));
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.brand{display:flex;flex-direction:column}
.logo{font-weight:700;color:var(--beige);font-size:1.05rem}
.subtitle{font-size:0.75rem;color:var(--muted);margin-top:2px}
.nav-links{display:flex;gap:0.9rem;list-style:none;margin:0;padding:0}
.nav-links a{color:#dfd8d2;text-decoration:none;padding:0.35rem 0.5rem;border-radius:6px;transition:var(--transition)}
.nav-links a:hover{color:var(--orange);transform:translateY(-2px)}

/* HERO */
.hero{
  min-height:72vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background-image: url('https://science.nasa.gov/wp-content/uploads/2023/04/272_MarsInSight_poster-jpg.webp');
  background-size:cover;
  background-position:center;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(66,56,51,0.6), rgba(4,4,5,0.9));
  mix-blend-mode:multiply;
}
.hero-inner{
  position:relative; z-index:2; text-align:center; max-width:var(--max-width);
  padding:4rem 1.25rem;
}
.hero-title{font-size:3.2rem;margin:0 0 0.6rem;color:var(--beige);letter-spacing:0.6px}
.hero-sub{color:var(--muted);font-size:1.05rem;margin-bottom:1.25rem}
.hero-cta{display:flex;gap:0.75rem;justify-content:center}
.btn{
  background:var(--orange);
  border:none;color:white;padding:0.65rem 1.05rem;border-radius:10px;font-weight:600;cursor:pointer;box-shadow:0 8px 20px rgba(234,92,52,0.12);
  transition:var(--transition)
}
.btn:hover{transform:translateY(-4px);box-shadow:0 14px 26px rgba(234,92,52,0.16)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--beige)}

/* CONTAINERS & SECTIONS */
.container{max-width:var(--max-width);margin:0 auto;padding:3rem 1.25rem}
.section{padding-top:1.5rem;padding-bottom:1.5rem}
.section-title{color:var(--peach);font-size:1.6rem;margin-bottom:0.8rem}

/* TWO COL */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.box{background:var(--card);padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.full-card{margin-top:1rem;padding:1rem;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px}
.summary-grid{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;margin-top:12px}
.stat{background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(255,255,255,0.02));padding:10px;border-radius:10px;flex:1;text-align:center}
.stat .num{font-weight:700;color:var(--beige);font-size:1.05rem}
.stat .label{color:var(--muted);font-size:0.9rem}

/* GRID 3 & 4 */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);transition:var(--transition)}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,0.45);border-color:rgba(234,92,52,0.14)}
.card h3, .card h4{color:var(--beige);margin:0 0 0.5rem}
.card p{color:var(--muted);margin:0}

/* feature */
.feature{min-height:120px}

/* ICON */
.card-icon{font-size:28px;margin-bottom:8px}

/* DASHBOARD */
.dashboard{display:grid;grid-template-columns:1fr;gap:1rem}
.resource-panel, .finance-panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.panel-row{display:flex;gap:0.75rem;margin-bottom:1rem;flex-wrap:wrap}
.metric{flex:1;padding:0.65rem;border-radius:10px;background:rgba(255,255,255,0.02);text-align:left}
.metric-label{color:var(--muted);font-size:0.85rem}
.metric-value{font-weight:700;color:var(--beige);font-size:1.05rem}
.chart-wrap{margin-top:0.9rem;background:var(--glass);padding:0.6rem;border-radius:8px}
.chart-wrap.small{padding:0.4rem}

/* Finance cards */
.finance-cards{display:flex;gap:0.6rem;flex-wrap:wrap;margin:0.8rem 0}
.finance-card{flex:1; padding:0.7rem;border-radius:8px;background:rgba(255,255,255,0.02); text-align:left}
.finance-card .label{font-size:0.85rem;color:var(--muted)}
.finance-card .value{font-weight:700;color:var(--beige)}

/* finance summary */
.finance-summary{margin-top:0.8rem;color:var(--muted);font-size:0.95rem}
.finance-summary div{margin:0.18rem 0}

/* TIMELINE */
.timeline{display:flex;gap:1rem;flex-direction:column}
.timeline-step{display:flex;align-items:flex-start;gap:1rem;padding:0.8rem 0}
.step-marker{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,var(--orange),var(--peach));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0}
.step-content h4{margin:0;color:var(--beige)}

/* TEAM */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.team-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:1.1rem;border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,0.03);transition:var(--transition)}
.team-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,0.5);border-color:rgba(234,92,52,0.12)}
.team-card .avatar{width:72px;height:72px;margin:0 auto;border-radius:50%;background:linear-gradient(180deg,var(--peach),var(--orange));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;margin-bottom:0.6rem}
.team-card h3{margin:0;color:var(--beige)}
.team-card p{margin:0;color:var(--muted)}

/* VISION QUOTE */
.vision-quote{position:relative;background-image: url('https://science.nasa.gov/wp-content/uploads/2023/04/272_MarsInSight_poster-jpg.webp');background-size:cover;background-position:center;padding:3.5rem 1rem;border-radius:8px;margin-top:2rem}
.vision-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(66,56,51,0.75), rgba(4,4,5,0.9));border-radius:8px}
.vision-inner{position:relative;z-index:2;text-align:center;color:var(--beige)}
.vision-inner h2{font-size:1.6rem;margin-bottom:0.5rem}

/* FOOTER */
.footer{background:linear-gradient(180deg,#1b1614,#100b0b);padding:1.1rem 0;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:var(--max-width);margin:0 auto;padding:0 1.25rem}
.email{color:var(--beige);font-weight:600;text-decoration:none}

/* RESPONSIVE */
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .navbar .nav-links{display:none}
  .hero-title{font-size:2.4rem}
}
@media (max-width:560px){
  .team-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}



/* TEAM SECTION */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  justify-items: center;
  margin-top: 1.5rem;
}

.team-card {
  background-color: rgba(10, 11, 18, 0.8);
  border: 1px solid rgba(234, 92, 52, 0.25);
  padding: 2rem 1.2rem;
  border-radius: 20px;
  text-align: center;
  width: 100%;
  max-width: 310px;
  transition: transform 0.3s, box-shadow 0.3s;
  backdrop-filter: blur(4px);
}

.team-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 0 25px rgba(234, 92, 52, 0.4);
}

.avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1rem;
  background: linear-gradient(180deg, var(--peach), var(--orange));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(234, 92, 52, 0.25);
  transition: 0.3s ease;
}

.avatar:hover {
  box-shadow: 0 0 20px rgba(234, 92, 52, 0.45);
  transform: scale(1.03);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.team-card h3 {
  margin-top: 0.5rem;
  font-size: 1.3rem;
  color: #ecc29c;
}

.team-card .role {
  color: #e88d74;
  font-size: 0.95rem;
  margin-top: 0.4rem;
}

.team-card .tagline {
  color: #ecc29c;
  font-size: 0.9rem;
  margin-top: 0.3rem;
  font-style: italic;
}

@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}