/* styles.css */
:root{
  --bg0:#05060a; --bg1:#0a0e18; --ink:#e8eef8; --muted:rgba(232,238,248,.72);
  --accentA:#1fd3bf; --accentB:#7ea2ff; --accentC:#4c58c4;  --accentD:#2166e6;
  --pad:6%; --mega:clamp(2.6rem,8vw,7.2rem); --xl:clamp(1.05rem,2.2vw,1.28rem);
  --card-bg:rgba(14,20,28,.40);
  --card-stroke:rgba(255,255,255,.10);
  --card-stroke-hi:rgba(255,255,255,.20);
  --card-shadow:0 8px 24px rgba(0,0,0,.35);
  --card-radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body,h1,h2,h3,h4,h5,h6,p,ul{margin:0}

body{
  background:
    radial-gradient(1400px 900px at 50% 44%, #0b1020 0%, #070b15 40%, var(--bg0) 72%),
    radial-gradient(1100px 700px at 70% 78%, rgba(26,40,70,.22) 0%, rgba(3,4,10,0) 56%),
    radial-gradient(900px 600px at 18% 22%, rgba(18,56,56,.16) 0%, rgba(3,4,10,0) 46%),
    #03040a;
  color:var(--ink);
  font:400 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden
}

#gl,#field,#grid,.vignette,#clouds{position:fixed;inset:0;pointer-events:none}
#gl,#field,#grid,#clouds{display:block;width:100vw;height:100vh}
#gl{z-index:0} #field{z-index:1} #grid{z-index:1}
.vignette{z-index:2;background:
  radial-gradient(ellipse at 50% 50%,rgba(31,211,191,.04),transparent 42%),
  radial-gradient(ellipse at 50% 40%,transparent 0 58%,rgba(0,0,0,.96) 100%)}
#clouds{z-index:2;opacity:.38;mix-blend-mode:screen;transition:opacity .25s ease}
#clouds::before,#clouds::after{
  content:"";position:absolute;inset:-12%;
  background:
    radial-gradient(1000px 700px at 22% 30%,rgba(122,164,255,.06),rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 78% 62%,rgba(200,140,255,.05),rgba(0,0,0,0) 65%),
    radial-gradient(800px 500px at 38% 82%,rgba(140,255,214,.05),rgba(0,0,0,0) 60%);
  filter: blur(18px);
  animation: drift 48s linear infinite;
}
#clouds::after{animation-duration:62s;opacity:.8;transform:scale(1.12)}
@keyframes drift{to{transform:translate3d(2.5%,3%,0) rotate(.001turn)}}
.clouds-off #clouds{opacity:0}

.content{position:relative;z-index:3}
section.section{min-height:100vh;display:flex;align-items:center;position:relative;z-index:3}
.inner{width:100%;max-width:1600px;margin:0 auto;padding:10vh var(--pad)}
h1.title{font-family:"EB Garamond",serif;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;font-size:var(--mega)}
.lead{font-size:var(--xl);max-width:860px;color:var(--muted)}

.cards{
  margin:4vh auto 2vh;max-width:1600px;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px
}

.card{
  position:relative;background:var(--card-bg);
  border:1px solid var(--card-stroke); border-radius:var(--card-radius);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow:var(--card-shadow);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card:focus-visible{outline:2px solid color-mix(in oklab, var(--tint) 60%, #fff 0%)}
.card:hover{transform:translateY(-3px);border-color:var(--card-stroke-hi)}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,
    color-mix(in oklab,var(--tint) 30%,transparent) 0%,
    transparent 40% 60%,
    color-mix(in oklab,var(--tint) 22%,transparent) 100%);
  opacity:0;transition:opacity .18s ease;mask:linear-gradient(#000,#000) padding-box,linear-gradient(#000,#000) border-box;border:1px solid transparent;
}
.card:hover::after{opacity:.6}

.card h3{margin:16px 16px 6px;font-size:18px;font-weight:700}
.card p{margin:0 16px 16px;font-size:14px;color:rgba(232,238,248,.78)}

.card[data-expand]{cursor:pointer;}
.card[data-expand] .card-body{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.card[data-expand].open .card-body{max-height:520px;}

#s-intro .card{ --tint: var(--accentA) }
#s-oss   .card{ --tint: var(--accentB) }
#s-certs .card{ --tint: var(--accentC) }
#s-about .card{ --tint: var(--accentD) }

.card.cert-group{cursor:default}

.cert-head{display:flex;align-items:center;gap:12px;margin:0 0 10px 0}
.cert-head .lead-sm{margin:0;color:var(--muted);font-size:12px;opacity:.85}
.cert-toggle{
  all:unset; padding:10px 12px; border-radius:12px; cursor:pointer;
  background:rgba(12,16,24,.55); border:1px solid var(--card-stroke);
  color:#eaf2ff; font-weight:700;
}
.cert-toggle:focus-visible{outline:2px solid color-mix(in oklab, var(--accentC) 60%, #fff 0%)}

/* Corrected mapping: true = collapsed (hidden), false = expanded (visible) */
.cert-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;
  transition:max-height .30s ease, opacity .20s ease; overflow:hidden;
}
.cert-group[data-collapsed="true"] .cert-grid{max-height:0; opacity:0; pointer-events:none}
.cert-group[data-collapsed="false"] .cert-grid{max-height:1200px; opacity:1}
/* Fallback if attribute missing */
.cert-group:not([data-collapsed]) .cert-grid{max-height:1200px; opacity:1}

.panel{position:fixed;right:12px;top:58px;z-index:5;width:300px;background:rgba(10,14,20,.6);
  border:1px solid rgba(255,255,255,.06);border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:10px 12px;color:#dbe6ff;font-size:12px; display:none;
}
.panel.open{display:block}
.panel h4{margin:0 0 6px 0;font-size:12px;font-weight:700;letter-spacing:.02em;opacity:.85}
.row{display:grid;grid-template-columns:1fr 88px;gap:8px;align-items:center;margin:6px 0}
.row input[type=range]{width:100%}
.row input[type=checkbox]{justify-self:end;transform:scale(1.1)}
.panel-toggle{
  position:fixed; right:12px; top:12px; z-index:6;
  width:40px;height:40px;border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(18,24,34,.8), rgba(12,16,22,.6));
  color:#dbe6ff; display:grid; place-items:center; cursor:pointer;
  backdrop-filter: blur(8px);
}
.panel-toggle svg{width:20px;height:20px;opacity:.9}

@media (max-width:768px){
  h1.title{font-size:clamp(2.2rem,10vw,4.6rem)}
  .panel{width:auto;left:12px;right:12px}
}