/* APPS 365 AI - "warm pop" palette layer (Peter, 10 Oct 2026: "add some of that orange colour in the main site,
   update the colour palette to incorporate some of that theme - make it pop"). The orange is Kai's Warm Sunrise
   (#FF5A2C) used on apps365.ai/guides and the videos. Loaded LAST on the main-site pages, so removing the one
   <link> line puts the old palette back. Only colours change here: no layout, sizes or copy. */
:root {
  --orange: #FF5A2C;
  --orange-2: #FF7A45;
  --orange-dark: #E9441A;
  --orange-wash: #FFEDE4;
  --cream: #FFF6EA;
  /* the existing gradient becomes a violet -> orange sunset (headline highlight words, stats, icons, accents) */
  --grad: linear-gradient(120deg, #4554EA 0%, #7A4DEF 36%, #FF5A2C 76%, #FF8A4C 100%);
  --grad-cta: linear-gradient(120deg, #FF5A2C 0%, #FF7A45 100%);
  --mist: #FFF8F1;
  --line: #F1E4DA;
}
::selection { background: #FFD3BD; color: #1B1240; }

/* primary buttons: orange, with a warm glow */
.btn-primary { background: var(--grad-cta); box-shadow: 0 12px 26px -10px rgba(255, 90, 44, .65); }
.btn-primary:hover { box-shadow: 0 18px 34px -10px rgba(255, 90, 44, .75); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange-dark); }

/* warm glow behind the hero and page heroes */
.hero, .page-hero {
  background:
    radial-gradient(900px 520px at -6% -12%, rgba(255, 122, 69, .20), transparent 62%),
    radial-gradient(760px 520px at 108% 0%, rgba(91, 77, 255, .12), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--cream) 100%);
}

/* dark call-to-action band: an orange glow rising from the bottom */
.cta { background: radial-gradient(700px 360px at 50% 120%, rgba(255, 90, 44, .42), transparent 70%), linear-gradient(150deg, #1b1f45, #0b0e1f); }

/* small accents */
.eyebrow::before { background: var(--grad-cta); }
.ticks li .ck { background: var(--orange-wash); color: var(--orange-dark); }
.card:hover .badge, .drop-grid a:hover .di { background: var(--orange-wash); color: var(--orange-dark); }
.orbit-card:hover { border-color: var(--orange); box-shadow: 0 18px 40px -12px rgba(255, 90, 44, .5); }
.foot-social a:hover { background: var(--orange); border-color: var(--orange); }
.faq summary .pm { color: var(--orange); }
.stats-band { background: linear-gradient(#fff, var(--cream)); }
.hero-guides { color: var(--orange-dark) !important; }
.hero-guides:hover { color: var(--orange) !important; }