/* Shared styles for every page. Tailwind handles the rest. */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #FAFBFD;
  color: #0F1B3D;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.display { font-family: 'Sora', Inter, system-ui, sans-serif; letter-spacing: -0.025em; }

/* Circuit-board background pattern, matching brand assets */
.circuit {
  background-image:
    linear-gradient(transparent 0, transparent 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none'><g stroke='%232D6EFF' stroke-width='1' opacity='0.18'><path d='M10 30 L60 30 L60 60 L120 60'/><circle cx='10' cy='30' r='2.5' fill='%232D6EFF' stroke='none'/><circle cx='120' cy='60' r='2.5' fill='%232D6EFF' stroke='none'/><path d='M30 100 L30 150 L80 150'/><circle cx='30' cy='100' r='2.5' fill='%232D6EFF' stroke='none'/><path d='M170 20 L170 70 L210 70 L210 110'/><circle cx='170' cy='20' r='2.5' fill='%232D6EFF' stroke='none'/><circle cx='210' cy='110' r='2.5' fill='%232D6EFF' stroke='none'/><path d='M90 180 L150 180 L150 210'/><circle cx='150' cy='210' r='2.5' fill='%232D6EFF' stroke='none'/><path d='M180 140 L220 140'/></g></svg>");
  background-repeat: repeat;
}

/* Big watermark "A" matching the icon, used as a hero backdrop */
.a-watermark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%230F1B3D'/><stop offset='100%25' stop-color='%232D6EFF'/></linearGradient></defs><path d='M100 25 L165 175 L130 175 L100 100 L70 175 L35 175 Z M85 130 L115 130 L100 95 Z' fill='url(%23g)'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.btn-primary {
  background: #2D6EFF;
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 12px 30px -10px rgba(45,110,255,0.55);
  transition: background .15s ease, transform .15s ease;
}
.btn-primary:hover { background: #1D58E6; }
.btn-secondary {
  background: white;
  color: #0F1B3D;
  border: 1px solid #D7E0F2;
  transition: border-color .15s ease, background .15s ease;
}
.btn-secondary:hover { border-color: #2D6EFF; background: #F3F6FC; }
.ring-brand:focus-visible {
  outline: 2px solid #2D6EFF;
  outline-offset: 3px;
  border-radius: 10px;
}

.underline-accent {
  background-image: linear-gradient(180deg, transparent 62%, rgba(45,110,255,0.18) 62%);
}

/* Expandable sections (FAQs, lesson lists) */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .toggle-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.visible { opacity: 1; transform: none; }
}