*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:   #0F0E2E;
      --blue:   #7C3AED;
      --blue-l: #8B5CF6;
      --yellow: #C4B5FD;
      --bg:     #F5F3FF;
      --text:   #18191F;
      --muted:  #525B6E;
      --white:  #FFFFFF;
    }

    body {
      font-family: 'Segoe UI', Inter, sans-serif;
      color: var(--text);
      line-height: 1.6;
      background: var(--bg);
    }

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

    /* ── NAVBAR ── */
    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--white);
      box-shadow: 0 1px 8px rgba(0,0,0,.08);
      padding: 0 80px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 22px;
      font-weight: 700;
      color: var(--navy);
      white-space: nowrap;
    }

    .logo-icon { width: 36px; height: 36px; }

    .nav-back {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 14px; font-weight: 600;
      color: var(--muted);
      transition: color .2s;
    }
    .nav-back:hover { color: var(--navy); }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 22px;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: opacity .2s;
    }
    .btn:hover { opacity: .85; }
    .btn-blue { background: var(--blue); color: var(--white); }

    /* ── HERO BANNER ── */
    .page-header {
      background: var(--navy);
      padding: 60px 80px;
      position: relative;
      overflow: hidden;
    }
    .page-header::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(124,58,237,.2) 0%, transparent 60%);
      pointer-events: none;
    }
    .page-header h1 {
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 700;
      color: var(--white);
      position: relative;
      z-index: 1;
    }
    .page-header p {
      color: rgba(255,255,255,.6);
      margin-top: 8px;
      font-size: 15px;
      position: relative;
      z-index: 1;
    }

    /* ── CONTENT ── */
    .content {
      max-width: 760px;
      margin: 60px auto;
      padding: 0 24px 80px;
    }

    .card {
      background: var(--white);
      border-radius: 12px;
      padding: 48px 52px;
      box-shadow: 0 2px 16px rgba(0,0,0,.06);
    }

    .card h2 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--bg);
    }

    .card h3 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--navy);
      margin: 28px 0 8px;
    }

    .card p {
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 12px;
    }

    .card a {
      color: var(--blue);
      font-weight: 500;
    }
    .card a:hover { text-decoration: underline; }

    .placeholder {
      background: #FEF9C3;
      border: 1.5px dashed #F59E0B;
      border-radius: 6px;
      padding: 10px 14px;
      font-size: 13px;
      color: #92400E;
      margin: 8px 0 16px;
    }

    .divider {
      border: none;
      border-top: 1px solid #E9D5FF;
      margin: 32px 0;
    }

    /* ── FOOTER ── */
    footer {
      background: var(--navy);
      color: rgba(255,255,255,.7);
      text-align: center;
      padding: 32px 24px;
      font-size: 13px;
    }
    footer a { color: var(--yellow); }
    footer a:hover { text-decoration: underline; }

    @media (max-width: 600px) {
      nav { padding: 0 20px; }
      .page-header { padding: 40px 20px; }
      .card { padding: 28px 24px; }
    }