/* Certification Page — Nightfall+Aurora FX */
:root{
  --bg:#0b1220; --bg-2:#0f172a; --card:#0d1628; --ink:#eaf1ff; --muted:#a6b6d7; --line:rgba(255,255,255,.08);
  --brand:#6ee7ff; --mint:#34d399; --gold:#fbbf24; --rose:#fb7185; --vio:#a78bfa;
  --glow:rgba(80,200,255,.45); --shadow:0 18px 40px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body.cert-body{
  margin:0; background:
    radial-gradient(1200px 500px at 15% -10%, rgba(59,130,246,.15), transparent),
    radial-gradient(900px 600px at 110% 10%, rgba(16,185,129,.12), transparent),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color:var(--ink); font:16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---------- Hero ---------- */
.cert-hero{position:relative; overflow:hidden; padding:64px 20px 36px; border-bottom:1px solid var(--line)}
/* Back to Home (top-right) */
.back-link.top-right{
  position:absolute; top:18px; right:20px;
  color:#a7f3d0; text-decoration:none; font-weight:700; border-bottom:1px dashed #a7f3d0;
}
.back-link.top-right:hover{opacity:.85}

.cert-hero .hero-glow{
  position:absolute; inset:-20%; background:
    radial-gradient(600px 400px at 20% 10%, var(--glow), transparent 60%),
    radial-gradient(800px 600px at 90% -10%, rgba(251,191,36,.25), transparent 55%);
  filter:blur(40px); opacity:.65; pointer-events:none; animation:glide 10s ease-in-out infinite alternate;
}
@keyframes glide{from{transform:translateY(-10px)}to{transform:translateY(10px)}}

.cert-hero .hero-inner{max-width:1080px; margin:0 auto; position:relative}
.cert-hero .center-text{text-align:center}
.cert-hero h1{margin:0 0 6px; font-weight:800; letter-spacing:.3px; font-size: clamp(28px, 4.5vw, 44px)}
.cert-hero p{margin:4px 0 16px; color:var(--muted)}

.hero-kpis{display:flex; gap:16px; flex-wrap:wrap}
.center-kpis{justify-content:center}
.kpi{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  padding:10px 14px; border-radius:14px; box-shadow:var(--shadow);
  display:flex; align-items:baseline; gap:10px
}
.kpi span{font-size:22px; font-weight:800}
.kpi small{color:var(--muted)}

/* ---------- Grid ---------- */
.cert-main{max-width:1100px; margin:26px auto; padding:0 20px}
.grid-wrap{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);   /* desktop: 3×3 = 9 cards */
}
@media (max-width:980px){ .grid-wrap{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:620px){ .grid-wrap{ grid-template-columns: 1fr; } }

.cert-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--line); box-shadow:var(--shadow);
  transform-style:preserve-3d; perspective:900px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  isolation:isolate; cursor:pointer;
}
.cert-card::after{ /* subtle border glow */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(110,231,183,.4), rgba(99,102,241,.3), rgba(59,130,246,.35), rgba(110,231,183,.4));
  mix-blend-mode:overlay; opacity:.0; transition:opacity .25s ease;
}
.cert-card:hover{ box-shadow:0 30px 70px rgba(0,0,0,.45); border-color:rgba(255,255,255,.18) }
.cert-card:hover::after{ opacity:.35 }

/* Shine sweep */
.shine{position:absolute; inset:-40% -60%; background:linear-gradient(75deg, transparent 45%, rgba(255,255,255,.18) 50%, transparent 55%);
  transform:translateX(-60%) rotate(8deg); filter:blur(1px); opacity:.0; pointer-events:none}
.cert-card:hover .shine{animation:shine 1.1s ease forwards}
@keyframes shine{to{opacity:.9; transform:translateX(70%) rotate(8deg)}}

/* Logo area */
.logo-box{display:grid; place-items:center; padding:28px 18px 12px}
.logo-box img{
  width:min(220px, 70%); height:auto;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.35));
  transform:translateZ(45px)
}
.card-meta{padding:0 18px 18px; transform:translateZ(30px)}
.card-meta h3{margin:0; font-size:20px; font-weight:800}
.card-meta .tag{margin:6px 0 8px; color:var(--muted); font-size:14px}
.card-meta .desc{margin:0 0 12px; color:#cfe1ff; font-size:14px}
.pill{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.04)
}

/* Entry animation */
.cert-card{opacity:0; transform:translateY(16px) scale(.98)}
.cert-card.is-in{
  opacity:1; transform:translateY(0) scale(1);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease
}

/* Canvas (sparks) sits behind content */
.spark-canvas{
  position:absolute; inset:auto 0 0 0; height:160px; width:100%;
  opacity:.0; transition:opacity .25s ease; pointer-events:none; transform:translateZ(0);
}
.cert-card:hover .spark-canvas{opacity:.5}

/* Footer / note */
.note{margin:26px 0 8px; color:var(--muted); font-size:14px}

/* Remove old footer back-link styles — moved to header */
.cert-footer{display:none}

/* ========================= */
/* Back Button (vinodjangid07) */
/* ========================= */
.button {
  width: 110px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  cursor: pointer;
  border: 2px solid rgb(255, 239, 94);
  background-color: rgb(255, 239, 94);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.button .text {
  width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(27, 27, 27);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px 0 0 4px;
}

.button .arrow path {
  fill: rgb(19, 19, 19);
}

.button:hover .arrow {
  animation: slide-in-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-8px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.button:active {
  transform: scale(0.96);
}