:root{
  --bg:#0b0e10;
  --bg-soft:#12161a;
  --card:#1a2127;
  --card-2:#1e2730;
  --text:#e8f1ee;
  --muted:#a5b2ad;
  --accent:#3ae374; /* InsightSoft green */
  --accent-2:#6ab9ff;
  --ring: rgba(58,227,116,.4);
  --radius:18px;
  --shadow:0 10px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.55 ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 1200px at 20% 0%, #0f1418 0%, var(--bg) 60%) fixed;
}

/* Header */
.site{
  display:flex; min-height:100%; flex-direction:column;
  background-image: url('/images/code-wallpaper-4.png');
  background-size:cover; background-attachment:fixed; background-position:center;
  isolation:isolate;
}
.overlay{position:fixed; inset:0; background:#0008; z-index:-1;}

header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(8px);
  background:linear-gradient( to bottom, #0b0e10e6, #0b0e1000 );
  border-bottom:1px solid #1d252b;
}
.header-inner{
  max-width:1200px; margin:auto; padding:16px 20px; display:flex; align-items:center; gap:16px;
}
.brand{
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight:800; letter-spacing:.3px;
  color:var(--accent);
  text-shadow: 0 2px 0 #14361f, 0 6px 24px rgba(58,227,116,.35);
}
nav a{
  color:var(--muted); text-decoration:none; margin-right:16px; font-weight:600;
}
nav a:hover, nav a:focus{color:var(--text)}
.spacer{flex:1}

/* Hero */
.hero{
  max-width:1200px; margin:32px auto 8px; padding:0 20px 8px;
}
.hero h1{ margin:0 0 8px; font-size: clamp(24px,3.2vw,38px); text-shadow:0 2px 10px rgba(0,0,0,.65); }
.hero .hero-panel{
  margin-top: 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(11,14,16,.78);      /* dark glass behind subtext */
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.06);
}
.hero p{ margin:0; color:#cfe3dc; text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* Grid */
.sections{ max-width:1200px; margin:12px auto 48px; padding:0 20px; display:grid; gap:20px; }
.section{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid #24303a;
  overflow:hidden;
}
.section h2{
  margin:0; padding:18px 20px; border-bottom:1px solid #23313a;
  font-size: clamp(18px,2.2vw,22px);
  display:flex; align-items:center; gap:10px;
}
.grid{
  display:grid; gap:16px; padding:16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Card */
.card{
  background:#0f1419;
  border:1px solid #283641;
  border-radius:16px;
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card:hover, .card:focus-within{
  transform: translateY(-2px);
  border-color:#365363;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 4px var(--ring);
}
.thumbs{
  display:flex; gap:8px; flex-wrap:wrap;
}
.thumbs img{
  width:96px; height:64px; object-fit:cover; border-radius:10px; border:1px solid #2a3844;
  cursor:zoom-in; background:#000;
}
.card a.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:12px; background:var(--accent); color:#07240f; font-weight:800;
  text-decoration:none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
}
.meta{ color:var(--muted); font-size:13px }

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.badge {
  background: #22313b;
  color: #cfe3dc;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #2f3d46;
}

/* Modal */
dialog#lightbox{
  border:none; padding:0; border-radius:14px; background:#000;
  width:min(96vw, 1200px);
}
dialog::backdrop{ background:rgba(0,0,0,.85); }
.lb-img{ display:block; width:100%; height:auto; }
.lb-cap{ padding:8px 12px; color:#cbd5cf; font-size:14px; background:#0b0e10; }

/* Footer */
footer{ color:#9aa6a0; border-top:1px solid #1f2830; }
.foot-inner{ max-width:1200px; margin:auto; padding:24px 20px; font-size:14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.foot-inner a{ color:var(--accent-2); text-decoration:none }
.foot-inner a:hover{ text-decoration:underline }

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}