:root{
  --bg: #0f1220;           /* deep navy */
  --panel: #161A2C;        /* slightly lighter */
  --text: #EAEAF2;         /* near-white */
  --muted: #C8C9D4;        /* soft grey */
  --brand: #9b87f5;        /* lavender */
  --brand-2:#22c55e;       /* green accent */
  --focus: #FFD166;        /* warm focus */
  --border: #262A42;
}
html, body { height: 100%; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text); background: radial-gradient(80rem 80rem at 120% -10%, #1d2140 0%, #0f1220 55%), var(--bg);
  line-height:1.6;
}
/* Case Study Screens */
.screen-card {
  max-width: 380px;
  margin: 2.5rem auto;
  margin-top: 2rem;
  padding: 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 1rem;
  text-align: center;
}

.screen-card img.ui-screen {
  width: 100%;
  border-radius: .85rem;
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
}

.screen-card .meta {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}
hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 3rem 0;
}


/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--focus); color:#111; border-radius:.5rem; z-index:1000; }

header{ position:relative; z-index:5; }
.wrap{ max-width:1100px; margin-inline:auto; padding: 1.25rem 1rem; }

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:transparent;
}
.brand{ font-weight:800; letter-spacing:.3px; font-size: clamp(1.1rem, 2vw, 1.25rem); }
.tag{ color: var(--muted); font-weight:600; margin-left:.5rem; }
nav a{ color: var(--muted); text-decoration:none; padding:.5rem .75rem; border-radius:.5rem; }
nav a:focus-visible, button:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
nav a:hover{ color:var(--text); background:rgba(255,255,255,.05); }

/* Active section highlight */
.nav a.active, .nav a[aria-current="page"]{
  color: var(--text);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px var(--border) inset;
}

.hero{
  margin-top: .5rem;
  display:grid; gap:1rem; grid-template-columns: 1.1fr .9fr; align-items:center;
  background: linear-gradient(180deg, rgba(155,135,245,.08), rgba(34,197,94,.04));
  border:1px solid var(--border); border-radius:1rem; padding: clamp(1rem, 4vw, 2rem);
}
.hero h1{ font-size: clamp(1.6rem, 3.8vw, 2.6rem); line-height:1.15; margin:0 0 .5rem; }
.lead{ color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.125rem); }

.cta-row{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.btn{ border:1px solid var(--border); background:#1a1f35; color:var(--text); padding:.6rem .9rem; border-radius:.6rem; font-weight:600; text-decoration:none; }
.btn:hover{ background:#222848; }
.btn.secondary{ background:transparent; }

.controls{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.pause{ border:1px solid var(--border); background:var(--brand); color:#111; font-weight:800; padding:.55rem .85rem; border-radius:.6rem; cursor:pointer; }
.pause[aria-pressed="true"]{ background:#FFE08A; }

/* Download button */

.btn-download {
  display: inline-block;
  background-color: #facc15;  /* your yellow */
  color: #111;                /* readable contrast on yellow */
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.btn-download:hover,
.btn-download:focus {
  background-color: #fde047;  /* lighter yellow on hover */
  transform: translateY(-2px);
  outline: 2px solid #facc15;
  outline-offset: 3px;
}

.btn-download:active {
  transform: translateY(0);
  background-color: #fbbf24;
}
/* certifications area*/

.section-credentials {
  margin-block: 3rem;
}

.section-credentials h2 {
  margin-bottom: 1rem;
}

.cert-grid {
  display: grid;
  list-style:none;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.cert-card {
  display: grid;
  gap: .35rem;
  padding: 1rem;
  border-radius: .75rem;
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #1f2937;
}

.cert-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #cbd5e1;
}

.cert-badge {
  display: inline-grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: #facc15;
  color: #111;
  font-weight: 700;
}

.cert-title {
  font-weight: 700;
  line-height: 1.2;
}

.cert-meta {
  font-size: .9rem;
  color: #a1a1aa;
}

.is-done {
  background: linear-gradient(0deg, #0f172a, #111827);
}

.is-progress {
  background: linear-gradient(0deg, #1f2937, #111827);
  border-style: dashed;
}

.cred-actions {
  margin-top: 1rem;
}


/* Panels */
.section{ margin-top:2.2rem; }
.panel{ background: rgba(22,26,44,.75); border:1px solid var(--border); border-radius:1rem; padding:1.25rem; }
.section h2{ font-size: clamp(1.25rem, 2.5vw, 1.5rem); margin:.25rem 0 1rem; }

/* Simple card grid */
.grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card{ background:#121629; border:1px solid var(--border); border-radius:.9rem; padding:1rem; }
.card h3{ margin:.25rem 0 .25rem; font-size:1.05rem; }
.meta{ color:var(--muted); font-size:.9rem; margin-top:.25rem; }

footer{ margin:3rem 0 2rem; color:var(--muted); text-align:center; }

/* 🦋 Butterflies */
.butterfly{ position: absolute; z-index:0; width:36px; height:36px; opacity:.85; background: radial-gradient(ellipse at 40% 40%, #ffe6f7 0 35%, transparent 36%), radial-gradient(ellipse at 60% 60%, #d6b4ff 0 35%, transparent 36%); filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); border-radius:50%; pointer-events:none; animation: float var(--dur, 22s) ease-in-out infinite; }
.b1{ left:6%; top:20%; --dur: 24s; }
.b2{ left:82%; top:26%; --dur: 26s; }
.b3{ left:18%; top:70%; --dur: 28s; }
.b4{ left:60%; top:78%; --dur: 24s; }
.b5{ left:34%; top:40%; --dur: 26s; }
header,
.hero,
footer,
.prototype-cta {
  position: relative;
  overflow: hidden;   /* keeps butterflies from spilling out */
}
header * ,
footer * {
  position: relative;
  z-index: 1;
}


@keyframes float {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  25%  { transform: translate3d(30px,-40px,0) rotate(8deg)  scale(1.05); }
  50%  { transform: translate3d(-10px,-20px,0) rotate(-6deg) scale(1); }
  75%  { transform: translate3d(35px,10px,0) rotate(10deg) scale(1.06); }
  100% { transform: translate3d(0,0,0) rotate(0deg)  scale(1); }
}

/* Pause animations via a body class */
.paused .butterfly, .paused *{ animation-play-state: paused !important; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .butterfly { animation: none !important; }
}

/* Links */
a{ color: #c7b7ff; }
a:hover{ color:#efeaff; }

/* Small helpers */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.status{ font-size:.95rem; color: var(--muted); }
.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background: #0b0e1b; border:1px solid var(--border); padding:.1rem .35rem; border-radius:.3rem; }