/* Tailwind CSS CDN */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

:root{
  --bg0:#070A12;
  --bg1:#0B1220;
  --bg2:#0F172A;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --stroke: rgba(148,163,184,.22);
  --text:#E5E7EB;
  --muted:#94A3B8;
  --primary:#6D28D9;
  --primary2:#2563EB;
  --accent:#22C55E;
  --warn:#F59E0B;
  --danger:#EF4444;
  --info:#38BDF8;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --shadow2: 0 12px 30px rgba(0,0,0,.35);
  --radius: 18px;
}

html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(1100px 600px at 15% 0%, rgba(109,40,217,.35), transparent 60%),
    radial-gradient(900px 520px at 80% 10%, rgba(37,99,235,.32), transparent 60%),
    radial-gradient(900px 520px at 55% 85%, rgba(34,197,94,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg2));
  color: var(--text);
}

::selection{background: rgba(56,189,248,.35);}

.container-max{max-width: 1120px;}

.glass{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.gradient-text{
  background: linear-gradient(90deg, #A78BFA 0%, #60A5FA 40%, #34D399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-primary{
  position: relative;
  background: linear-gradient(90deg, rgba(109,40,217,1), rgba(37,99,235,1));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(37,99,235,.25);
}
.btn-primary::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(167,139,250,.7), rgba(96,165,250,.7), rgba(52,211,153,.55));
  filter: blur(10px);
  opacity: .0;
  transition: opacity .22s ease;
  z-index: -1;
}
.btn-primary:hover::before{opacity:.9;}

.btn-secondary{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.26);
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045));
  border: 1px solid rgba(148,163,184,.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  transform: translateY(0);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(56,189,248,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
}

.kbd-focus:focus-visible{
  outline: 3px solid rgba(56,189,248,.65);
  outline-offset: 3px;
}

.nav-link[data-active="true"]{
  color: #fff;
}
.nav-link[data-active="true"] .nav-underline{
  opacity: 1;
  transform: scaleX(1);
}

.nav-underline{
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(167,139,250,.85), rgba(96,165,250,.85), rgba(52,211,153,.75));
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: left;
  transition: opacity .2s ease, transform .2s ease;
}

.blob{
  filter: blur(40px);
  opacity: .55;
}

.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.22), transparent);
}

.accordion-panel{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .25s ease, opacity .25s ease;
}
.accordion-item[data-open="true"] .accordion-panel{
  opacity: 1;
}
.accordion-item[data-open="true"] .chev{
  transform: rotate(180deg);
}
.chev{transition: transform .2s ease;}

#backToTop{
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
#backToTop[data-show="true"]{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

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