:root{
  --brand-50:#f5f7ff;
  --brand-100:#e6ecff;
  --brand-200:#c7d4ff;
  --brand-300:#a7bbff;
  --brand-400:#7f99ff;
  --brand-500:#5a77ff;
  --brand-600:#3f57e6;
  --brand-700:#2f3fb4;
  --brand-800:#243075;
  --brand-900:#1b234b;
}
html{box-sizing:border-box;font-family:Inter,system-ui,sans-serif}
*,*::before,*::after{box-sizing:inherit}
body{font-size:16px;line-height:1.45;color:var(--brand-900);background-color:var(--brand-50);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block;object-fit:cover}
.container{max-width:1200px;margin-left:auto;margin-right:auto}
:focus{outline:none}
:focus-visible{outline:3px solid rgba(90,119,255,0.18);outline-offset:3px;border-radius:8px}
button:disabled{opacity:.6;cursor:not-allowed}
.no-scroll{height:100%;overflow:hidden}
#mobileMenu{transition:opacity .28s ease,transform .28s ease}
#mobileBackdrop{opacity:0;transition:opacity .28s ease}
#mobileMenu.show{display:block}
#mobileMenu.show #mobileBackdrop{opacity:1}
#mobileMenu .rounded-2xl{transform:translateY(0);opacity:1}
.iconify{vertical-align:middle;display:inline-block}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}
header[role="banner"]{background:linear-gradient(180deg,rgba(255,255,255,0.85),rgba(255,255,255,0.7))}
h1,h2,h3,h4,h5,h6{font-family:Merriweather,serif}
h1{font-size:1.375rem}
@media(min-width:1024px){h1{font-size:2rem}}
.hero-gradient{background:linear-gradient(120deg,rgba(90,119,255,0.12),rgba(63,87,230,0.06));backdrop-filter:saturate(120%)}
.card{border-radius:1rem;box-shadow:0 6px 18px rgba(16,24,40,0.06);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(16,24,40,0.12)}
.rounded-2xl{border-radius:1rem}
.rounded-xl{border-radius:.75rem}
.cookie-modal{border-radius:1rem;box-shadow:0 10px 30px rgba(16,24,40,0.12)}
@media(max-width:420px){#cookieModal{right:12px;left:12px;width:auto;padding:12px}}
footer a{transition:color .16s ease}
.footer-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .6rem;border-radius:.6rem;background:linear-gradient(90deg,var(--brand-100),#fff)}
.focus-ring{box-shadow:0 0 0 4px rgba(90,119,255,0.12);border-radius:8px}
.skip-link{position:absolute;left:0;top:0;transform:translateY(-120%);padding:.6rem 1rem;background:#fff;border-radius:8px;z-index:60}
.skip-link:focus{transform:translateY(0)}
kbd{background:#f3f4f6;padding:.15rem .4rem;border-radius:.35rem;border:1px solid rgba(15,23,42,0.06);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* Animations referenced by Tailwind config must also be usable in CSS if needed */
@keyframes beam{0%{transform:translateY(0);opacity:.6}50%{transform:translateY(-6px);opacity:1}100%{transform:translateY(0);opacity:.6}}
@keyframes slideUp{0%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:1}}
.animate-beam{animation:beam 4s ease-in-out infinite}
.animate-slide-up{animation:slideUp .6s cubic-bezier(.2,.9,.2,1) both}
/* small utility not covered by Tailwind classes for accessible icon focus */
.iconify[tabindex]{outline:none}
.iconify[tabindex]:focus{box-shadow:0 0 0 4px rgba(90,119,255,0.14);border-radius:6px}
/* ensure footer text contrast meets WCAG AA on intended background */
footer{color:#334155}
/* forms accessibility */
.input-error{border-color:#dc2626}
.input-success{border-color:#16a34a}
.form-feedback{font-size:.9375rem}
/* ensure modals trap focus visually */
.modal-open{overflow:hidden}