/* Oncera Plus — shared design tokens + components (redesign pass) */

:root{
  --ink:#111114; --body:#6A6F7A; --faint:#9AA0AB;
  --page:#F4F5F7; --card:#FFFFFF; --line:#E7E9EE;
  --indigo:#5B5FD6; --indigo-700:#4044B8; --indigo-300:#A7AAEE; --peri:#8E92E8; --tint:#EEF1FE;
  --teal:#3E9E9B; --sky:#4E86D8;
  --sh-sm:0 1px 2px rgba(17,17,20,.05);
  --sh-md:0 8px 24px rgba(17,17,20,.07);
  --sh-lg:0 22px 60px rgba(17,17,20,.11);
  --radius-card:22px;
  --radius-pill:999px;
}

body{
  background:var(--page);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  font-weight:600;
  letter-spacing:-.02em;
}

em, .accent{
  font-family:"Instrument Serif",Georgia,serif;
  font-style:italic;
  font-weight:400;
}

a{ transition:color .2s ease; }

/* Buttons */
.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 26px;
  border-radius:var(--radius-pill);
  font-size:14.5px;
  font-weight:500;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
  white-space:nowrap;
}
.btn-pill-dark{ background:var(--ink); color:#fff; }
.btn-pill-dark:hover{ background:var(--indigo); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(91,95,214,.32); }
.btn-pill-light{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-pill-light:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-pill-indigo{ background:var(--indigo); color:#fff; }
.btn-pill-indigo:hover{ background:var(--indigo-700); transform:translateY(-2px); box-shadow:0 12px 28px rgba(91,95,214,.32); }
.btn-pill-ghost{ padding:10px 18px; color:var(--body); }
.btn-pill-ghost:hover{ background:var(--tint); color:var(--indigo-700); }
.btn-pill-ghost.active{ background:var(--tint); color:var(--indigo-700); }

/* Cards */
.card{
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1);
}
.card-hover:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.card-hover img{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.card-hover:hover img{ transform:scale(1.06); }
.card-tint{ background:var(--tint); }

/* Light sheen that sweeps across a card on hover */
.card-hover{ position:relative; overflow:hidden; }
.card-hover::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(91,95,214,.10) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s ease;
  pointer-events:none;
}
.card-hover:hover::before{ transform:translateX(120%); }

/* Icon badges: pop in once their card reveals, then react on hover */
.icon-badge{ transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; }
[data-reveal] .icon-badge{ opacity:0; transform:scale(.4) rotate(-12deg); }
[data-reveal].is-visible .icon-badge{
  animation:onc-icon-pop .55s cubic-bezier(.34,1.56,.64,1) forwards,
            onc-icon-breathe 4s ease-in-out infinite;
  animation-delay:calc(var(--reveal-delay,0ms) + 220ms), calc(var(--reveal-delay,0ms) + 900ms);
}
.card-hover:hover .icon-badge{ transform:scale(1.14) rotate(-8deg); box-shadow:0 12px 24px rgba(17,17,20,.22); }
@keyframes onc-icon-pop{
  0%{ opacity:0; transform:scale(.4) rotate(-12deg); }
  70%{ opacity:1; transform:scale(1.14) rotate(5deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes onc-icon-breathe{
  0%,100%{ box-shadow:0 4px 10px rgba(17,17,20,.08); }
  50%{ box-shadow:0 9px 20px rgba(17,17,20,.18); }
}
@media (prefers-reduced-motion: reduce){
  .card-hover::before{ display:none; }
  [data-reveal] .icon-badge, [data-reveal].is-visible .icon-badge{ opacity:1; transform:none; animation:none; }
}

/* Scroll-reveal: fade + rise as elements enter the viewport */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* Directional reveal variants: cards converge in from either side */
[data-reveal-left]{ opacity:0; transform:translateX(-40px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay,0ms); }
[data-reveal-left].is-visible{ opacity:1; transform:translateX(0); }
[data-reveal-right]{ opacity:0; transform:translateX(40px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay,0ms); }
[data-reveal-right].is-visible{ opacity:1; transform:translateX(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal-left], [data-reveal-right]{ opacity:1; transform:none; transition:none; }
}
/* Auto-stagger reveal children of any grid, so a bare data-reveal attribute
   cascades nicely without hand-setting a delay on every card. */
.grid > [data-reveal]:nth-child(1){ --reveal-delay:0ms; }
.grid > [data-reveal]:nth-child(2){ --reveal-delay:80ms; }
.grid > [data-reveal]:nth-child(3){ --reveal-delay:160ms; }
.grid > [data-reveal]:nth-child(4){ --reveal-delay:240ms; }
.grid > [data-reveal]:nth-child(5){ --reveal-delay:320ms; }
.grid > [data-reveal]:nth-child(6){ --reveal-delay:400ms; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* Gentle floating drift, used on decorative hero graphics */
@keyframes onc-float{
  0%,100%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-14px) translateX(6px); }
}
@keyframes onc-float-slow{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(10px); }
}
.onc-floating{ animation:onc-float 7s ease-in-out infinite; }
.onc-floating-slow{ animation:onc-float-slow 9s ease-in-out infinite; }
.onc-floating-delay{ animation-delay:1.4s; }
@media (prefers-reduced-motion: reduce){
  .onc-floating, .onc-floating-slow{ animation:none; }
}

/* Mock gauge arc + growing bars, used on the illustrative "report" card */
[data-gauge]{ stroke-dasharray:0 258; transition:stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1); }
[data-gauge].is-visible{ stroke-dasharray:var(--gauge-target,168 258); }
[data-grow]{ transform:scaleX(.04); transform-origin:left; transition:transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--grow-delay,0ms); display:block; }
[data-grow].is-visible{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  [data-gauge]{ transition:none; stroke-dasharray:var(--gauge-target,168 258); }
  [data-grow]{ transition:none; transform:scaleX(1); }
}

/* Gradient CTA blocks */
.grad-card{ border-radius:var(--radius-card); padding:clamp(28px,3.4vw,42px); color:#fff; box-shadow:var(--sh-md); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1); }
.grad-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.grad-card-indigo{ background:linear-gradient(150deg,var(--peri),var(--indigo)); }

/* Slow-drifting glow blob, used inside otherwise-plain tint cards */
@keyframes onc-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(18px,-14px) scale(1.12); }
}
.onc-glow{
  position:absolute; border-radius:999px; pointer-events:none;
  background:radial-gradient(circle, rgba(91,95,214,.28), transparent 70%);
  filter:blur(6px);
  animation:onc-drift 10s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .onc-glow{ animation:none; } }

/* Sticky pill nav */
.pill-nav-wrap{
  position:sticky; top:0; z-index:60;
  padding:14px 20px 0;
  background:linear-gradient(var(--page) 62%, rgba(244,245,247,0));
}
.pill-nav{
  max-width:1200px; margin:0 auto;
  background:var(--card);
  border-radius:var(--radius-pill);
  box-shadow:var(--sh-md);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:11px 12px 11px 26px;
  flex-wrap:wrap;
}
.pill-nav a.brand{ font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.pill-nav nav a{ padding:9px 14px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--body); transition:background .2s ease, color .2s ease; }
.pill-nav nav a:hover{ background:var(--tint); color:var(--indigo-700); }
.pill-nav nav a.active{ background:var(--tint); color:var(--indigo-700); }

/* Chips / tiles */
.chip{ background:#F7F8FB; border-radius:14px; padding:14px 16px; transition:background .22s ease; }
.chip:hover{ background:var(--tint); }
.kpi{ background:var(--card); border-radius:18px; padding:22px; box-shadow:var(--sh-sm); transition:transform .3s ease, box-shadow .3s ease, background .3s ease; }
.kpi:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); background:var(--tint); }
.kpi-label{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 9px; }
.kpi-value{ font-size:28px; font-weight:600; letter-spacing:-.02em; margin:0; }

/* Bars */
.bar-track{ position:relative; height:9px; border-radius:99px; background:#F1F3F8; display:block; }
.bar-fill{ height:100%; border-radius:99px; background:var(--indigo); display:block; transition:width .45s cubic-bezier(.2,.7,.2,1); }

/* Inputs */
.field-label{ font-size:12.5px; font-weight:500; color:var(--body); }
.field-input{
  background:#F7F8FB; border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; font-size:14.5px; color:var(--ink); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
  width:100%;
}
.field-input:focus{ border-color:var(--indigo); box-shadow:0 0 0 3px rgba(91,95,214,.15); }

/* Section rhythm */
.section{ padding:clamp(56px,7vw,100px) 20px 0; }
.section-inner{ max-width:1200px; margin:0 auto; }

/* Footer */
.site-footer{ padding:clamp(56px,7vw,100px) 20px 24px; }
.site-footer .footer-card{ max-width:1200px; margin:0 auto; background:var(--card); border-radius:26px; padding:clamp(28px,4vw,44px); box-shadow:var(--sh-sm); }
.site-footer a{ color:var(--body); }
.site-footer a:hover{ color:var(--indigo-700); }

/* ------------------------------------------------------------------ */
/* Global retarget layer                                              */
/* The rest of the site (home, predict, results, pricing, account,    */
/* contact, auth) is built with Tailwind's default blue/slate palette */
/* and small radii. Rather than rewrite every class attribute, remap  */
/* the utility classes actually in use to the new tokens so every     */
/* page picks up the redesign automatically. Template logic, form     */
/* fields and {% url %} bindings are untouched — only paint changes.  */
/* ------------------------------------------------------------------ */

/* Accent color: blue-* -> indigo */
.bg-blue-600, .bg-blue-700{ background-color:var(--indigo) !important; }
.hover\:bg-blue-700:hover, .hover\:bg-blue-600:hover{ background-color:var(--indigo-700) !important; }
.text-blue-600, .text-blue-700{ color:var(--indigo-700) !important; }
.hover\:text-blue-600:hover, .hover\:text-white:hover{ color:var(--indigo-700) !important; }
.border-blue-600, .border-blue-500{ border-color:var(--indigo) !important; }
.bg-blue-50, .bg-blue-100{ background-color:var(--tint) !important; }
.text-blue-100{ color:var(--tint) !important; }
.ring-blue-500, .focus\:ring-blue-500:focus{ --tw-ring-color:var(--indigo) !important; }
.from-blue-600, .from-blue-700, .from-blue-900{ --tw-gradient-from:var(--indigo) !important; }
.to-blue-600, .to-blue-700, .via-blue-800{ --tw-gradient-to:var(--peri) !important; }
.from-purple-900, .to-purple-900{ --tw-gradient-to:var(--peri) !important; }

/* Soft tinted hero/card gradients: blue-50/indigo-50/purple-50 -> the new tint */
.from-blue-50, .from-indigo-50{ --tw-gradient-from:var(--tint) !important; }
.to-blue-50, .to-purple-50, .to-indigo-50{ --tw-gradient-to:var(--tint) !important; }
.via-white{ --tw-gradient-to:#fff !important; }
.bg-indigo-100{ background-color:var(--tint) !important; }
.text-indigo-600, .text-indigo-700{ color:var(--indigo-700) !important; }
.border-indigo-500, .border-indigo-600{ border-color:var(--indigo) !important; }
.focus\:ring-indigo-500:focus{ --tw-ring-color:var(--indigo) !important; }

/* Neutrals: slate-* -> ink/body/faint/line/page */
.text-slate-900{ color:var(--ink) !important; }
.text-slate-700, .text-slate-600{ color:var(--body) !important; }
.text-slate-500, .text-slate-400, .text-slate-300{ color:var(--faint) !important; }
.bg-slate-50, .bg-slate-100{ background-color:var(--page) !important; }
.border-slate-200, .border-slate-100{ border-color:var(--line) !important; }

/* Radii: nudge toward the larger, softer shapes used in the redesign */
.rounded-md, .rounded-lg{ border-radius:14px !important; }
.rounded-xl{ border-radius:18px !important; }
.rounded-2xl, .rounded-3xl{ border-radius:var(--radius-card) !important; }

/* Shadows: replace flat Tailwind shadows with the layered card shadows */
.shadow, .shadow-sm{ box-shadow:var(--sh-sm) !important; }
.shadow-md{ box-shadow:var(--sh-md) !important; }
.shadow-lg, .shadow-xl, .shadow-2xl{ box-shadow:var(--sh-lg) !important; }

/* Buttons built from raw utility classes: give them the pill treatment
   and a lift-on-hover so they match .btn-pill without needing a class swap. */
a.bg-blue-600, a.bg-blue-700, button.bg-blue-600, button.bg-blue-700{
  border-radius:var(--radius-pill) !important;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease !important;
}
a.bg-blue-600:hover, a.bg-blue-700:hover, button.bg-blue-600:hover, button.bg-blue-700:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(91,95,214,.32);
}

/* Cards: any white surface with a shadow gets the hover lift used throughout the reference */
.bg-white.shadow, .bg-white.shadow-sm, .bg-white.shadow-md, .bg-white.shadow-lg, .bg-white.shadow-xl{
  transition:transform .3s ease, box-shadow .3s ease !important;
}
.bg-white.shadow:hover, .bg-white.shadow-sm:hover, .bg-white.shadow-md:hover, .bg-white.shadow-lg:hover, .bg-white.shadow-xl:hover{
  transform:translateY(-4px);
}