/* =========================================================================
   XONWARE — ILLUSTRATIONS (drop-in)
   ----------------------------------------------------------------------
   Adds a single dedicated illustration band on inner pages.
   Clutter-free: one illustration per page, lots of whitespace, light theme.
   Load AFTER existing CSS.
   ========================================================================= */

.xa-illust-band{
  position:relative;
  padding:clamp(48px,5vw,84px) 0;
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFAF8 100%);
  overflow:hidden;
}
.xa-illust-band--alt{
  background:linear-gradient(180deg,#FAFAF8 0%,#F4F4F0 100%);
}
.xa-illust-band__inner{
  max-width:1480px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,56px);
  position:relative;
  z-index:1;
}
.xa-illust-band__head{
  text-align:center;
  max-width:720px;
  margin:0 auto clamp(28px,3vw,48px);
}
.xa-illust-band__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#1A237E;
  margin-bottom:14px;
}
.xa-illust-band__eyebrow::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8BC53F;
  box-shadow:0 0 8px #8BC53F;
}
.xa-illust-band__title{
  font-family:'Geist','Inter',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(1.5rem,1.1rem+1.4vw,2.2rem);
  letter-spacing:-.02em;
  line-height:1.15;
  color:#0A1224;
  margin:0;
}
.xa-illust-band__title em{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-weight:400;
  color:#1A237E;
}
.xa-illust-band__sub{
  margin:14px auto 0;
  max-width:60ch;
  font-size:clamp(.95rem,.9rem+.25vw,1.1rem);
  line-height:1.6;
  color:#6B7280;
}

/* Illustration wrapper — clean frame around SVG with subtle premium feel */
.xa-illust-frame{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  border-radius:24px;
  overflow:hidden;
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  box-shadow:0 30px 80px -32px rgba(10,20,40,.16);
}
.xa-illust-frame img,
.xa-illust-frame svg,
.xa-illust-frame object{
  width:100%;
  height:auto;
  display:block;
}
.xa-illust-frame--bare{
  background:transparent;
  border:0;
  box-shadow:none;
}

/* Soft halo behind illustration to add depth without clutter */
.xa-illust-band::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(26,35,126,.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(139,197,63,.06), transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* Corner accent (very subtle — one per band) */
.xa-illust-band::after{
  content:'';
  position:absolute;
  top:24px;
  right:24px;
  width:80px;
  height:80px;
  background-image:
    radial-gradient(circle at 20% 20%, #22D3EE 0, #22D3EE 2px, transparent 2px),
    radial-gradient(circle at 80% 60%, #8BC53F 0, #8BC53F 2px, transparent 2px),
    radial-gradient(circle at 50% 100%, #1A237E 0, #1A237E 2px, transparent 2px);
  opacity:.4;
  pointer-events:none;
  z-index:0;
}

/* Make sure SVG animation hosts aren't blocked by the band's ::before */
.xa-illust-band svg{position:relative;z-index:1}

@media (max-width: 720px){
  .xa-illust-band{padding:48px 0}
  .xa-illust-frame{border-radius:18px}
  .xa-illust-band::after{display:none}
}
@media (prefers-reduced-motion: reduce){
  .xa-illust-frame svg *{animation:none !important}
}