:root{
      --bgA:#EEF2FF;         /* indigo-50 */
      --bgB:#F8FAFF;         /* near-white */
      --bgC:#E0F2FE;         /* sky-100 */
      --text:#0F172A;        /* slate-900 */
      --muted:rgba(15,23,42,.70);

      --card: rgba(255,255,255,.82);
      --card2: rgba(255,255,255,.92);
      --stroke: rgba(2,6,23,.10);
      --stroke2: rgba(2,6,23,.18);

      --radius: 22px;

      --glowA: rgba(124,58,237,.22); /* violet */
      --glowB: rgba(59,130,246,.18); /* blue */
      --glowC: rgba(34,197,94,.12);  /* green */
    }

    html,body{height:100%;}
    body{
      font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(900px 520px at 12% -10%, var(--glowA), transparent 60%),
        radial-gradient(900px 520px at 92% 10%, var(--glowB), transparent 58%),
        radial-gradient(900px 520px at 50% 110%, var(--glowC), transparent 58%),
        linear-gradient(180deg, var(--bgA), var(--bgB));
      overflow-x:hidden;
    }

    /* animated soft grid */
    .grid-bg{
      position: fixed; inset:0;
      background-image:
        linear-gradient(to right, rgba(2,6,23,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(2,6,23,.06) 1px, transparent 1px);
      background-size: 58px 58px;
      mask-image: radial-gradient(55% 55% at 50% 20%, #000 45%, transparent 75%);
      opacity:.22;
      pointer-events:none;
      animation: gridFloat 10s ease-in-out infinite;
    }
    @keyframes gridFloat{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(14px); }
    }

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

    .glass{
      background: var(--card);
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: 0 14px 40px rgba(15,23,42,.12);
      backdrop-filter: blur(10px);
    }

    .brand-pill{
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.45rem .75rem;
      border-radius: 999px;
      background: rgba(255,255,255,.75);
      border: 1px solid var(--stroke);
      box-shadow: 0 10px 22px rgba(15,23,42,.08);
    }

    .hero-title{
      letter-spacing: -0.02em;
      line-height: 1.05;
    }

    .hero-chip{
      display:inline-flex; align-items:center; gap:.45rem;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.75);
      padding: .35rem .65rem;
      font-size:.92rem;
    }

    .btn-neon{
      background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(59,130,246,.95));
      border: 0;
      color: #fff;
      box-shadow: 0 18px 46px rgba(59,130,246,.22);
    }
    .btn-neon:hover{ filter: brightness(1.06); color:#fff; }

    .btn-ghost{
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.78);
      color: var(--text);
    }
    .btn-ghost:hover{
      background: #fff;
      border-color: var(--stroke2);
      color: var(--text);
    }

    /* category cards */
    .area-card{
      position: relative;
      overflow: hidden;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
      min-height: 176px;
    }
    .area-card:hover{
      transform: translateY(-4px);
      background: var(--card2);
      border-color: var(--stroke2);
      box-shadow: 0 18px 54px rgba(15,23,42,.16);
    }

    .area-icon{
      width: 54px; height: 54px;
      border-radius: 18px;
      display:grid; place-items:center;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.82);
      box-shadow: 0 12px 26px rgba(15,23,42,.10);
    }
    .area-icon i{ font-size: 1.5rem; }

    .area-arrow{
      opacity:.75;
      transition: transform .18s ease, opacity .18s ease;
    }
    .area-card:hover .area-arrow{
      transform: translateX(3px);
      opacity: 1;
    }

    .badge-soft{
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.72);
      color: var(--text);
      font-weight: 600;
    }

    /* themed glow accents per card */
    .area-card::before{
      content:"";
      position:absolute; inset:-2px;
      opacity:.30;
      pointer-events:none;
      transition: opacity .18s ease;
      background: radial-gradient(520px 240px at 12% 18%, rgba(124,58,237,.28), transparent 58%),
                  radial-gradient(520px 240px at 92% 28%, rgba(59,130,246,.22), transparent 58%),
                  radial-gradient(520px 240px at 50% 120%, rgba(34,197,94,.16), transparent 58%);
    }
    .area-card:hover::before{ opacity:.45; }

    /* slightly different accent per category */
    .t-gk::before{
      background: radial-gradient(520px 240px at 12% 18%, rgba(16,185,129,.22), transparent 60%),
                  radial-gradient(520px 240px at 92% 28%, rgba(59,130,246,.18), transparent 60%);
    }
    .t-math::before{
      background: radial-gradient(520px 240px at 12% 18%, rgba(59,130,246,.22), transparent 60%),
                  radial-gradient(520px 240px at 92% 28%, rgba(124,58,237,.18), transparent 60%);
    }
    .t-reason::before{
      background: radial-gradient(520px 240px at 12% 18%, rgba(245,158,11,.22), transparent 60%),
                  radial-gradient(520px 240px at 92% 28%, rgba(59,130,246,.16), transparent 60%);
    }
    .t-eng::before{
      background: radial-gradient(520px 240px at 12% 18%, rgba(124,58,237,.22), transparent 60%),
                  radial-gradient(520px 240px at 92% 28%, rgba(236,72,153,.14), transparent 60%);
    }
    .t-rnd::before{
      background: radial-gradient(520px 240px at 12% 18%, rgba(99,102,241,.22), transparent 60%),
                  radial-gradient(520px 240px at 92% 28%, rgba(34,197,94,.14), transparent 60%);
    }

    /* Ad slots */
    .ad-slot{
      border-radius: 18px;
      border: 1px dashed rgba(2,6,23,.22);
      background: rgba(255,255,255,.70);
      min-height: 110px;
      display:flex; align-items:center; justify-content:center;
      color: rgba(15,23,42,.60);
      font-size: .92rem;
    }

    /* tiny “sparkles” */
    .spark{
      position:absolute; inset:0; pointer-events:none; opacity:.6;
      background-image:
        radial-gradient(circle at 18% 34%, rgba(124,58,237,.18), transparent 3px),
        radial-gradient(circle at 62% 22%, rgba(59,130,246,.14), transparent 3px),
        radial-gradient(circle at 84% 56%, rgba(34,197,94,.12), transparent 3px),
        radial-gradient(circle at 30% 78%, rgba(245,158,11,.12), transparent 3px);
      filter: blur(.1px);
    }

    a{ text-decoration:none; }

    /* ================================
   NORMALIZE DB-CONTENT HTML
   ================================ */

.db-content {
  line-height: 1.65;
  color: #0F172A;
  font-size: 1rem;
}

/* Paragraphs */
.db-content p {
  margin: 0 0 0.75rem 0;
}

/* Remove spacing if empty <p> */
.db-content p:empty {
  display: none;
}

/* Prevent nested <p> weird spacing */
.db-content p p {
  margin: 0;
}

/* Links inside questions/solutions */
.db-content a {
  color: #4f46e5;
  text-decoration: underline;
  font-weight: 500;
}

.db-content a:hover {
  text-decoration: none;
}

/* Lists if present */
.db-content ul,
.db-content ol {
  padding-left: 1.25rem;
  margin: 0.5rem 0 0.75rem;
}

/* Prevent broken inline styles from DB */
.db-content * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Optional: math / emphasis */
.db-content strong {
  font-weight: 600;
}

.db-content em {
  font-style: italic;
}
/* DB HTML (images + line breaks inside content) */
.db-content img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  margin: .5rem 0;
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
}
.db-content br{ line-height: 1.2; }
.breadcrumb a { color: rgba(15,23,42,.85); font-weight: 600; }
.breadcrumb a:hover { color: rgba(124,58,237,.95); }
.breadcrumb .active { color: rgba(15,23,42,.65); }