/* ReadyCheck sleek + funky theme additions
   Non-destructive: layered on top of Tailwind build (css/styles.css)
*/

:root {
  --rc-bg: radial-gradient(1200px 600px at 10% -10%, #e9d5ff 0%, transparent 40%),
            radial-gradient(900px 500px at 110% 10%, #bae6fd 0%, transparent 35%),
            radial-gradient(800px 400px at 50% 120%, #fef9c3 0%, transparent 40%);
  --rc-surface: rgba(255,255,255,0.75);
  --rc-glass: rgba(255,255,255,0.65);
  --rc-ring: rgba(17,24,39,0.08);
  --rc-text: #0b1220;
  --rc-muted: #5b6577;
  --rc-accent-1: #7c3aed; /* purple */
  --rc-accent-2: #06b6d4; /* cyan */
  --rc-accent-3: #22c55e; /* green */
  --rc-gradient: linear-gradient(135deg, var(--rc-accent-1), var(--rc-accent-2) 55%, var(--rc-accent-3));
}

/* Global canvas */
body {
  color: var(--rc-text);
  background:
    var(--rc-bg),
    linear-gradient(#fff, #fff);
  background-attachment: fixed;
}

/* Glassy sticky header */
.site-header {
  background: var(--rc-glass);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(17,24,39,0.06);
  box-shadow: 0 8px 24px -12px rgba(17,24,39,0.15);
}

.brand span {
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--rc-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Navigation */
.site-nav { gap: 0.25rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  color: #0f172a;
  position: relative;
  transition: color .2s ease, transform .2s ease;
}
.site-nav a:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(6,182,212,0.18));
  opacity: 0;
  transition: opacity .2s ease;
}
.site-nav a:hover { transform: translateY(-1px); }
.site-nav a:hover:after { opacity: 1; }
.site-nav a.active {
  color: #0b1220;
  background: rgba(15,23,42,0.06);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08);
}

/* Nav CTA button */
.site-nav a.nav-cta {
  background: var(--rc-gradient);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(124,58,237,.45);
}
.site-nav a.nav-cta:hover:after { opacity: 0; }

/* Mobile nav opening */
/* Collapse nav only on small screens */
/* Normalize nav across breakpoints and override legacy absolute rules */
@media (max-width: 639px) {
  #site-nav { position: static !important; transition: max-height .25s ease, opacity .2s ease; }
  #site-nav:not(.open) { max-height: 0; overflow: hidden; opacity: .0; }
  #site-nav.open { max-height: 22rem; opacity: 1; }
}
@media (min-width: 640px) {
  .nav-toggle { display: none !important; }
  #site-nav { position: static !important; display: flex !important; max-height: none !important; opacity: 1 !important; }
}
@media (max-width: 820px) {
  /* Kill older absolute menu so it doesn't misalign content */
  .site-nav { position: static !important; }
}

/* Buttons */
.btn {
  border-radius: 999px;
  padding: .65rem 1rem;
  border: 1px solid rgba(15,23,42,0.12);
  background: linear-gradient(#fff, #fff);
  color: #0b1220;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(2,6,23,.25); }
.btn.primary {
  border: 0;
  color: white;
  background: var(--rc-gradient);
  box-shadow: 0 12px 30px -12px rgba(124,58,237,.45), 0 8px 26px -16px rgba(6,182,212,.35);
}
.btn.primary:hover { transform: translateY(-1.5px) scale(1.01); }

/* Cards with fancy border */
.card {
  position: relative;
  border-radius: 18px;
  background: var(--rc-surface);
  box-shadow: 0 12px 30px -20px rgba(2,6,23,.3);
  overflow: hidden;
}
.card:before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  padding: 1px; border-radius: inherit;
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.35));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card > * { position: relative; z-index: 1; }
.card:hover { transform: translateY(-2px); transition: transform .2s ease; }

/* Make whole card clickable when a child link has this class */
.stretched-link { position: relative; z-index: 3; }
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* Hero section w/ glow */
.hero {
  position: relative;
}
.hero:before {
  content: "";
  position: absolute; inset: -2rem -1rem auto -1rem; height: 16rem;
  background: radial-gradient(600px 200px at 20% 40%, rgba(124,58,237,.35), transparent 55%),
              radial-gradient(400px 180px at 80% 30%, rgba(6,182,212,.35), transparent 55%);
  filter: blur(18px);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(2rem, 2.6rem + 1vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lead { color: var(--rc-muted); font-size: 1.05rem; max-width: 65ch; }

/* Typography polish */
.prose h1, .prose h2, .prose h3, h1, h2, h3 {
  font-weight: 800; letter-spacing: -0.02em;
}
.prose h1, h1 { color: #0b1220; }
.prose a, a.link { color: #0b1220; text-underline-offset: 4px; }
.prose a:hover, a.link:hover { text-decoration: underline; background-image: linear-gradient(transparent,transparent), var(--rc-gradient); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; }

/* Team avatars */
.team-grid .person .avatar {
  width: 72px; height: 72px; border-radius: 999px; margin-bottom: .75rem;
  background: conic-gradient(from 180deg, var(--rc-accent-1), var(--rc-accent-2), var(--rc-accent-3), var(--rc-accent-1));
  position: relative;
  box-shadow: inset 0 0 0 3px #fff, 0 10px 24px -16px rgba(2,6,23,.45);
  animation: spin-slow 10s linear infinite;
}
.team-grid .person h3 { font-weight: 700; }
.team-grid .person .muted { color: var(--rc-muted); }

@keyframes spin-slow { to { transform: rotate(1turn); } }

/* Accent art blocks */
.highlight .art {
  min-height: 220px;
  border-radius: 20px;
  background:
    radial-gradient(120px 60px at 30% 30%, rgba(124,58,237,.45), transparent 60%),
    radial-gradient(140px 80px at 70% 40%, rgba(6,182,212,.45), transparent 60%),
    radial-gradient(120px 60px at 60% 75%, rgba(34,197,94,.35), transparent 60%);
  filter: saturate(120%);
}

/* Footer glass */
.site-footer {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Utilities */
.row { display: flex; }
.wrap { flex-wrap: wrap; }
.gap { gap: 1rem; }
.col { flex: 1 1 320px; }

/* === Funkier layer additions === */
/* Gradient text utility */
.gradient-text { background: var(--rc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Eyebrow/badge */
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0b1220; padding: .35rem .6rem; border-radius: 999px; position: relative; }
.eyebrow:before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--rc-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; }
.eyebrow .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--rc-accent-2); box-shadow: 0 0 0 3px rgba(6,182,212,.2); }

/* Mesh container + soft orbs */
.mesh { position: relative; isolation: isolate; border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.66); box-shadow: 0 24px 60px -32px rgba(2,6,23,.35), inset 0 1px rgba(255,255,255,.6); }
.mesh:before, .mesh:after { content: ""; position: absolute; inset: -20%; filter: blur(40px); z-index: -1; opacity: .75; }
.mesh:before { background: radial-gradient(400px 220px at 15% 20%, rgba(124,58,237,.45), transparent 60%), radial-gradient(420px 240px at 85% 25%, rgba(6,182,212,.45), transparent 60%), radial-gradient(360px 200px at 55% 80%, rgba(34,197,94,.35), transparent 60%); animation: mesh-drift 22s ease-in-out infinite alternate; }
.mesh:after { background: radial-gradient(1000px 400px at 50% 110%, rgba(255,255,255,.7), transparent 60%); animation: mesh-drift-2 26s ease-in-out infinite alternate; }
.orb { position: absolute; width: 140px; height: 140px; border-radius: 50%; filter: blur(10px); opacity: .55; mix-blend-mode: multiply; }
.orb.purple { background: #c4b5fd; }
.orb.cyan { background: #a5f3fc; }
.orb.green { background: #bbf7d0; }
.orb.one { top: -30px; left: -30px; animation: float 14s ease-in-out infinite; }
.orb.two { bottom: -30px; right: -10px; animation: float 18s ease-in-out infinite reverse; }
.orb.three { top: 30%; right: 20%; animation: float 20s ease-in-out infinite; }
@keyframes mesh-drift { from { transform: translate3d(-2%, -1%, 0) rotate(0deg);} to { transform: translate3d(2%, 1%, 0) rotate(3deg);} }
@keyframes mesh-drift-2 { from { transform: translate3d(1%, -2%, 0) rotate(-2deg);} to { transform: translate3d(-1%, 2%, 0) rotate(2deg);} }
@keyframes float { 0%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } 100%{ transform: translateY(0)} }

/* Tilt hover */
.tilt { transform-style: preserve-3d; transition: transform .25s ease; }
.tilt:hover { transform: perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-2px); }

/* Marquee */
.marquee { position: relative; overflow: hidden; border-radius: 16px; padding: .6rem 0; background: rgba(15,23,42,.06); box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.marquee .track { display: inline-flex; gap: 2rem; white-space: nowrap; will-change: transform; animation: scroll 28s linear infinite; }
.marquee .item { color: #0b1220; opacity: .8; font-weight: 700; letter-spacing: .04em; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* Metrics */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.metric { text-align: center; padding: 1.25rem; border-radius: 18px; background: var(--rc-surface); box-shadow: 0 10px 30px -18px rgba(2,6,23,.35); }
.metric .num { font-size: clamp(2rem, 1.6rem + 2.5vw, 3rem); font-weight: 900; line-height: 1; }
.metric .label { color: var(--rc-muted); }
@media (max-width: 640px) { .metrics { grid-template-columns: 1fr; } }

/* CTA banner */
.cta-banner { position: relative; padding: 2rem; border-radius: 24px; overflow: hidden; color: #0b1220; background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.7)); }
.cta-banner:before { content: ""; position: absolute; inset: -10%; background: var(--rc-gradient); filter: blur(40px); opacity: .25; }
.cta-banner > * { position: relative; }

/* Home cards grid: resilient to missing Tailwind utilities */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

/* Section scaffolding */
.section { margin: 3rem 0; }
.section-header { margin-bottom: 1rem; }
.section-eyebrow { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rc-muted); font-size: .8rem; }
.section-title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); font-weight: 900; letter-spacing: -0.02em; }
.section-sub { color: var(--rc-muted); max-width: 72ch; }

/* Features grid */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.feature { background: var(--rc-surface); border-radius: 16px; padding: 1rem; box-shadow: 0 12px 30px -20px rgba(2,6,23,.25); position: relative; }
.feature .icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(15,23,42,.06); box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); margin-bottom: .5rem; font-size: 18px; }
.feature h3 { margin: .2rem 0 .25rem; font-weight: 800; }
.feature p { color: var(--rc-muted); }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; counter-reset: step; }
.step { background: var(--rc-surface); border-radius: 16px; padding: 1rem 1.2rem; box-shadow: 0 12px 30px -20px rgba(2,6,23,.25); position: relative; }
.step:before { counter-increment: step; content: counter(step); position: absolute; top: -14px; left: -14px; width: 36px; height: 36px; border-radius: 999px; background: var(--rc-gradient); color: #fff; display: grid; place-items: center; font-weight: 800; box-shadow: 0 10px 24px -12px rgba(124,58,237,.45); }

/* Case studies */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.case { position: relative; border-radius: 18px; background: var(--rc-surface); padding: 1rem; overflow: hidden; box-shadow: 0 12px 30px -20px rgba(2,6,23,.25); }
.case .badge { display: inline-block; font-size: .75rem; padding: .25rem .5rem; border-radius: 999px; background: rgba(15,23,42,.06); }
.case h3 { margin: .5rem 0; }
.case .meta { color: var(--rc-muted); font-size: .9rem; }
.case a.stretched-link { display: inline-block; margin-top: .4rem; }

/* Testimonials */
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.quote { background: var(--rc-surface); border-radius: 16px; padding: 1rem; box-shadow: 0 12px 30px -20px rgba(2,6,23,.25); }
.quote blockquote { margin: 0; font-size: 1rem; }
.quote footer { margin-top: .6rem; color: var(--rc-muted); }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.faq details { background: var(--rc-surface); border-radius: 12px; padding: .8rem 1rem; box-shadow: 0 12px 30px -20px rgba(2,6,23,.25); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { color: var(--rc-muted); margin-top: .5rem; }

/* On-scroll reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }