:root{
  --accent:#dfa557; /* orange from the icon */
  --bg-gradient: linear-gradient(180deg, var(--accent) 0%, #ffffff 30%, #f2f4f6 66%, #d8f0ff 100%);
  --panel: rgba(0,0,0,0.04);
  --muted:#6b7280; /* darker muted for light background */
  --text:#0b1a1f; /* dark text for contrast on light bg */
  --max-width:980px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg-gradient);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max-width);margin:0 auto;padding:28px}
.site-header{border-bottom:1px solid rgba(11,26,31,0.06);background:transparent;box-shadow:0 6px 18px rgba(2,6,10,0.06);position:fixed;left:0;right:0;top:0;z-index:1100;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:20px 28px}
.brand{font-weight:700}
.top-nav a{color:#000;text-decoration:none;margin-left:18px;position:relative;padding:6px 4px}
.top-nav a:hover{color:#111;font-weight:600}
.top-nav a::after{content:'';position:absolute;left:8px;right:8px;bottom:6px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left center;border-radius:2px;transition:transform .18s ease,opacity .18s ease;opacity:0}
.top-nav a:hover::after{transform:scaleX(1);opacity:1}
.content{padding:48px 28px}
.hero{text-align:center;padding:44px 0}
.hero h1{font-size:2.4rem;margin:0 0 8px}
.lead{color:var(--muted);max-width:60ch;margin:0 auto 16px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;border:1px solid rgba(11,26,31,0.06);color:var(--text);background:transparent}
.btn.primary{background:linear-gradient(90deg,var(--accent),#c3893b);color:#042524;border:none}
.btn.ghost{background:rgba(11,26,31,0.06);border:1px solid rgba(11,26,31,0.12);color:var(--text)}
.btn.ghost:hover{background:rgba(11,26,31,0.10)}
.features{margin-top:28px}
.feature-list{list-style:disc;padding-left:18px;color:var(--muted)}
.build{background:rgba(11,26,31,0.04);padding:12px;border-radius:8px;color:var(--muted);overflow:auto}
.site-footer{padding:24px 0;border-top:1px solid rgba(11,26,31,0.06);text-align:center;color:var(--muted)}
/* extra layout helpers */
.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center}
.card img{max-width:100%;height:auto;border-radius:6px}
.features-grid{grid-template-columns:repeat(3,1fr)}

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

/* make screenshots feel clickable */
.card img{cursor:pointer;transition:transform .18s ease}
.card img:active{transform:scale(.995)}

/* Lightbox / modal for expanded screenshots */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(11,26,31,0.6);z-index:1200;padding:24px}
.lightbox.open{display:flex}
.lightbox__inner{max-width:1100px;max-height:90vh;width:100%;background:transparent;display:flex;align-items:center;justify-content:center;position:relative}
.lightbox__img{max-width:100%;max-height:90vh;border-radius:10px;box-shadow:0 18px 50px rgba(2,6,10,0.6);border:6px solid rgba(255,255,255,0.02);background:#fff}
.lightbox__close{position:absolute;right:-6px;top:-6px;background:linear-gradient(180deg,#eef0f2,#d9dce0);color:#000;border-radius:999px;border:1px solid rgba(0,0,0,0.08);width:44px;height:44px;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(2,6,10,0.12);cursor:pointer}
.lightbox__caption{position:absolute;left:16px;bottom:-36px;color:var(--muted);font-size:13px}

@media (max-width:600px){
  .lightbox{padding:12px}
  .lightbox__close{width:36px;height:36px;font-size:16px}
}

/* Hero icon */
.hero .hero-icon{display:block;margin:0 auto 16px;width:120px;height:120px;object-fit:cover;border-radius:18px;border:2px solid rgba(255,255,255,0.04);box-shadow:0 8px 24px rgba(2,6,10,0.6);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02))}
@media (max-width:420px){.hero .hero-icon{width:88px;height:88px}}
/* Section cards: give each top-level section a card background */
.content > section:not(.hero){
  background: rgba(255,255,255,0.92);
  padding:24px;
  border-radius:14px;
  margin-bottom:18px;
  /* slight drop shadow for section cards */
  box-shadow: 0 6px 18px rgba(2,6,10,0.06);
  border:1px solid rgba(11,26,31,0.03);
}
@media (max-width:700px){
  .content > section:not(.hero){padding:16px;margin-bottom:14px}
  .site-header .wrap{padding:14px 16px}
  /* ensure hero content clears the fixed header on small screens */
  .hero{padding-top:64px}
}

@media (max-width:420px){
  /* slightly smaller top gap on very small screens so spacing feels balanced */
  .hero{padding-top:64px}
}
/* Download section */
.download-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:start;gap:2px}
.download-item{padding:0}
.download-item a{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text)}
.download-item img{width:120px;height:120px;object-fit:contain;border-radius:12px}
.download-label{margin-top:10px;font-weight:600;color:var(--text)}
@media (max-width:700px){.wrap{padding:16px}.feed-grid{grid-template-columns:1fr}}