@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Black+Ops+One&display=swap');

:root {
  --bg: #0d0619;
  --muted: #6a6890;
  --brand: #1a0a5e;
  --accent1: #7c3aed;
  --accent2: #e8407a;
  --brand-2: #3a1d8a;
  --soft: #f4efff;
  --line: #ecebfa;
  --white: #ffffff;
  --heading-font: 'Black Ops One', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Roboto', -apple-system, 'Segoe UI', sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 700px 500px at 12% 15%, rgba(124,58,237,0.20), transparent 60%),
    radial-gradient(ellipse 600px 480px at 88% 10%, rgba(232,64,122,0.12), transparent 60%),
    radial-gradient(ellipse 750px 550px at 80% 90%, rgba(124,58,237,0.16), transparent 60%),
    radial-gradient(ellipse 650px 500px at 12% 92%, rgba(58,29,138,0.22), transparent 60%),
    radial-gradient(ellipse 100% 90% at 50% 50%, transparent 35%, rgba(0,0,0,0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.75  0 0 0 0 0.65  0 0 0 0 0.95  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  color: #ece5fa;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand, .hero h1, .track-hero h1, .card h3 {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--brand);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  line-height: 1.3;
}
h1 { font-size: 2.1em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }

a { color: inherit; }
img { max-width: 100%; display: block; }

.topnav {
  max-width: 1180px;
  margin: 0 auto 26px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.brand {
  font-size: 26px;
  letter-spacing: 0.3px;
  color: #ece5fa;
}

.nav-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-link {
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #cdbdf0;
  font-weight: 700;
  background: transparent;
  border: 2px solid transparent;
}

.nav-link:hover {
  background: var(--soft);
  border-color: var(--line);
  color: var(--brand-2);
}

.hero {
  max-width: 1180px;
  margin: 20px auto 26px;
  padding: 38px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 48px rgba(30, 20, 80, 0.12);
}

.hero h1 {
  font-size: 46px;
  margin: 0 0 10px;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.hero .sub {
  font-size: 15px;
  color: rgba(255,255,255,0.92);
  max-width: 860px;
}

.container {
  max-width: 980px;
  margin: 28px auto;
  padding: 0 20px;
}

.section {
  background: #fff;
  color: #2a2a44;
  border-radius: 14px;
  padding: 22px;
  border: 1px solid #ecebfa;
  box-shadow: 0 8px 28px rgba(30,20,80,0.04);
  margin-bottom: 18px;
}

.back {
  display: inline-block;
  margin-bottom: 12px;
  color: #cdbdf0;
  font-weight: 700;
  text-decoration: none;
}

.muted { color: var(--muted); }

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}

.card {
  background: linear-gradient(180deg, #fff, #fbfbff);
  color: #2a2a44;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #ecebfa;
}

.card h3 { margin: 0 0 8px; font-size: 22px; }

.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--accent1), #f97316);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn.secondary {
  background: var(--soft);
  color: var(--brand-2);
  border: 2px solid var(--accent1);
  box-shadow: none;
}

footer {
  max-width: 1180px;
  margin: 40px auto 0;
  text-align: center;
  color: rgba(236,229,250,0.75);
}

.track-hero {
  padding: 28px;
  border-radius: 12px;
  color: #fff;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.track-hero .emoji {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  background: rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(20,10,80,0.12);
  flex-shrink: 0;
}

.track-hero .text { display: flex; flex-direction: column; }
.track-hero h1 { margin: 0; font-size: 32px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.track-hero .sub { opacity: 0.95; font-size: 14px; margin-top: 6px; }

.form-section { max-width: 720px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
input[type="text"],input[type="email"],select,textarea {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #ecebf8; background: #fff; box-shadow: inset 0 1px 0 rgba(16,12,40,0.02); transition: box-shadow .15s, border-color .15s; font-size: 15px;
}
input:focus,textarea:focus,select:focus { outline: none; border-color: var(--accent1); box-shadow: 0 10px 30px rgba(124,58,237,0.08); }
.form-note { font-size: 13px; color: var(--muted); margin-top: 8px; }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

.signup-form { max-width: 720px; margin: 0 auto; }
.signup-form fieldset { border: none; background: #fff; border-radius:12px; padding:18px; box-shadow:0 8px 24px rgba(16,12,40,0.04); margin-bottom: 16px; }
.signup-form legend { font-weight: 800; font-size: 15px; color: var(--brand); margin-bottom: 8px; }
.form-row { display: block; margin-bottom: 12px; }
.form-row label { display: block; font-weight: 700; color: #5a3d8a; margin-bottom: 6px; }
.form-row .hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
textarea { min-height: 120px; }

@media (max-width:720px){
  .hero h1 { font-size: 26px; }
  .container { padding: 0 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .topnav { padding: 10px; }
  .track-hero { flex-direction: column; align-items: flex-start; }
  .signup-form { padding: 0 12px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
}