/* =============================================================
   EDWIS · homepage — hero + bento. Loads after edwis-base.css.
   ============================================================= */

/* =============================================================
   HERO
   ============================================================= */
.ew-hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 6vw, 88px); }

.ew-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ew-hero-bg::before, .ew-hero-bg::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .22;
}
.ew-hero-bg::before { width: 620px; height: 620px; right: -120px; top: -160px; background: radial-gradient(circle, #CFE1FF 0%, transparent 70%); }
.ew-hero-bg::after { width: 520px; height: 520px; right: 18%; bottom: -260px; background: radial-gradient(circle, #E3D9FF 0%, transparent 70%); }

.ew-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}

.ew-hero-copy { display: flex; flex-direction: column; gap: 28px; max-width: 540px; }
.ew-hero-copy .ew-eyebrow { margin-bottom: -8px; }

.ew-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* journey stepper — hover/focus lights the matching bento card */
.ew-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; list-style: none; margin-top: 4px; }
.ew-journey li { display: flex; align-items: center; gap: 2px; }
.ew-journey li + li::before {
  content: ""; width: 8px; height: 2px; border-radius: 2px; background: var(--ew-line-2);
}
.ew-journey-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 8px 0 6px;
  border-radius: 999px; border: 1.5px solid transparent; background: transparent;
  font-size: 14px; font-weight: 500; color: var(--ew-ink-2); cursor: pointer;
  transition: background var(--ew-fast) ease, border-color var(--ew-fast) ease, transform var(--ew-fast) var(--ew-ease);
}
.ew-journey-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .12); transition: transform var(--ew-dur) var(--ew-ease); }
.ew-journey-chip[data-stage="recruit"] .ew-journey-dot  { background: linear-gradient(145deg, #3E9BFF, #1461EA); }
.ew-journey-chip[data-stage="enroll"] .ew-journey-dot   { background: linear-gradient(145deg, #3FE0D0, #0AA89E); }
.ew-journey-chip[data-stage="operate"] .ew-journey-dot  { background: linear-gradient(145deg, #A585FF, #5B32E6); }
.ew-journey-chip[data-stage="graduate"] .ew-journey-dot { background: linear-gradient(145deg, #6FD0FF, #1E8EF5); }
.ew-journey-chip:hover, .ew-journey-chip.is-lit { background: var(--ew-surface); border-color: var(--ew-line); box-shadow: var(--ew-shadow-1); }
.ew-journey-chip:hover .ew-journey-dot, .ew-journey-chip.is-lit .ew-journey-dot { transform: scale(1.12); }

.ew-hero-foot {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: clamp(64px, 8vw, 112px);
  padding-top: 28px; border-top: 1px solid var(--ew-line);
}
.ew-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ew-ink-3); }

/* =============================================================
   BENTO — four stage cards around the brand mark
   ============================================================= */
.ew-bento {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%; max-width: 580px; justify-self: end;
}

.ew-card {
  --tone: var(--ew-recruit); --glow: var(--ew-recruit-glow);
  --mx: 50%; --my: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--glow) 75%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--tone) 0%, var(--tone) 48%, var(--glow) 140%);
  box-shadow: 0 18px 36px -30px color-mix(in srgb, var(--tone) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform 320ms var(--ew-ease), box-shadow 320ms var(--ew-ease), filter 320ms ease;
  animation: ew-rise 700ms var(--ew-ease) backwards;
}
.ew-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 255, 255, .22), transparent 60%);
  opacity: 0; transition: opacity 300ms ease;
}
.ew-card--recruit  { --tone: var(--ew-recruit);  --glow: var(--ew-recruit-glow);  animation-delay: 60ms; }
.ew-card--enroll   { --tone: var(--ew-enroll);   --glow: var(--ew-enroll-glow);   animation-delay: 140ms; }
.ew-card--operate  { --tone: var(--ew-operate);  --glow: var(--ew-operate-glow);  animation-delay: 220ms; }
.ew-card--graduate { --tone: var(--ew-graduate); --glow: var(--ew-graduate-glow); animation-delay: 300ms; }

/* the corner facing the medallion is tighter, echoing the petal shape of the mark */
.ew-card--recruit  { border-bottom-right-radius: 10px; }
.ew-card--enroll   { border-bottom-left-radius: 10px; }
.ew-card--operate  { border-top-right-radius: 10px; }
.ew-card--graduate { border-top-left-radius: 10px; }

.ew-card:hover, .ew-card.is-lit {
  transform: translateY(-3px);
  box-shadow: 0 26px 44px -28px color-mix(in srgb, var(--tone) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.ew-card:hover::before, .ew-card.is-lit::before { opacity: 1; }
.ew-bento.has-lit .ew-card:not(.is-lit) { filter: saturate(.72); transform: scale(.985); }

@keyframes ew-rise {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.ew-card-head { display: flex; align-items: center; gap: 12px; }
/* keep the Graduate icon clear of the centre medallion */
@media (min-width: 641px) {
  .ew-card--graduate .ew-card-head { padding-left: clamp(18px, 2vw, 28px); }
  .ew-card--recruit .ew-card-foot { margin-right: clamp(24px, 2.6vw, 38px); }
  .ew-card--enroll .ew-card-foot { margin-left: clamp(24px, 2.6vw, 38px); }
}
.ew-card-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.ew-card-ic svg { width: 19px; height: 19px; }
.ew-card-h { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.ew-card-sub { font-size: 13px; font-weight: 500; line-height: 1.4; color: #fff; }

.ew-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding: 2px 2px 0;
  font-size: 13px; font-weight: 600; color: #fff;
  border-radius: 12px;
}
.ew-card-go {
  display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: transform var(--ew-dur) var(--ew-ease), background var(--ew-dur) ease;
}
.ew-card-go svg { width: 15px; height: 15px; }
.ew-card-foot:hover .ew-card-go, .ew-card.is-lit .ew-card-go { transform: translateX(3px); background: rgba(255, 255, 255, .32); }
.ew-card .ew-card-foot:focus-visible { outline-color: #fff; }

/* the white "live" panel inside each card */
.ew-panel {
  background: var(--ew-surface); color: var(--ew-ink);
  border-radius: 14px;
  padding: 10px 12px 6px;
  box-shadow: 0 8px 18px -14px rgba(11, 21, 51, .4);
}
.ew-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ew-panel-title { font-size: 12.5px; font-weight: 700; }
.ew-panel-link { font-size: 12px; font-weight: 700; color: var(--ew-primary); }

.ew-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ew-pill--good { background: var(--ew-good-soft); color: var(--ew-good); }
.ew-pill--muted { background: var(--ew-tint); color: var(--ew-ink-2); }
.ew-pill--live { background: #FDECEC; color: var(--ew-bad); }
.ew-live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ew-pulse 1.6s ease-in-out infinite; }
@keyframes ew-pulse { 50% { opacity: .35; } }

/* rows (recruit + enroll) */
.ew-rows-clip { overflow: hidden; height: 120px; }
.ew-rows { list-style: none; }
.ew-rows.is-shifting { transition: transform 520ms var(--ew-ease); }
.ew-row {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 2px;
  border-top: 1px solid var(--ew-line);
}
.ew-row:first-child { border-top: 0; }
.ew-av {
  display: grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.ew-card--recruit .ew-av { background: var(--ew-recruit-soft); color: var(--ew-recruit-ink); }
.ew-card--enroll .ew-av  { background: var(--ew-enroll-soft); color: var(--ew-enroll-ink); }
.ew-row-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-row-chev { display: none; }
.ew-row.is-new { animation: ew-row-in 520ms var(--ew-ease) backwards; }
@keyframes ew-row-in { from { opacity: 0; } to { opacity: 1; } }

.ew-status {
  padding: 3px 9px; border-radius: 8px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  transition: background var(--ew-dur) ease, color var(--ew-dur) ease;
}
.ew-status--new       { background: var(--ew-recruit-soft); color: var(--ew-recruit-ink); }
.ew-status--contacted { background: var(--ew-warn-soft); color: var(--ew-warn); }
.ew-status--qualified { background: var(--ew-operate-soft); color: var(--ew-operate-ink); }

/* enroll: status text + 3-step meter */
.ew-step { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ew-step-label { font-size: 11.5px; font-weight: 600; color: var(--ew-ink-3); white-space: nowrap; transition: color var(--ew-dur) ease; }
.ew-step[data-step="2"] .ew-step-label { color: var(--ew-good); font-weight: 700; }
.ew-meter { display: flex; gap: 3px; }
.ew-meter i { display: block; width: 14px; height: 4px; border-radius: 4px; background: var(--ew-line); transition: background 400ms ease; }
.ew-step[data-step="0"] .ew-meter i:nth-child(-n+1),
.ew-step[data-step="1"] .ew-meter i:nth-child(-n+2) { background: var(--ew-enroll-glow); }
.ew-step[data-step="2"] .ew-meter i { background: var(--ew-good); }

/* operate: schedule */
.ew-sched { list-style: none; display: grid; gap: 4px; }
.ew-sched-item {
  display: grid; grid-template-columns: 36px 8px minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 3px 8px; border-radius: 10px;
  transition: background 400ms ease;
}
.ew-time { font-size: 12px; font-weight: 600; color: var(--ew-ink-3); font-variant-numeric: tabular-nums; }
.ew-sdot { width: 8px; height: 8px; border-radius: 50%; }
.ew-sdot--a { background: #12BFAF; }
.ew-sdot--b { background: #8B63FF; }
.ew-sdot--c { background: #3E9BFF; }
.ew-sched-what { min-width: 0; }
.ew-sched-what b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-sched-what small { display: block; font-size: 11px; line-height: 1.3; color: var(--ew-ink-3); }
.ew-sched-item.is-now { background: var(--ew-operate-soft); }

/* graduate: compliance donut */
.ew-comp { display: flex; align-items: center; gap: 14px; padding: 2px 0 4px; }
.ew-donut { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.ew-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ew-donut-track { stroke: var(--ew-line); }
.ew-donut-val { stroke: #14BFAF; stroke-linecap: round; transition: stroke-dasharray 1200ms var(--ew-ease); }
.ew-donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ew-donut-c b { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ew-donut-c small { font-size: 11px; color: var(--ew-ink-3); margin-top: 3px; }
.ew-legend { list-style: none; display: grid; gap: 6px; min-width: 0; }
.ew-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ew-ink-3); white-space: nowrap; }
.ew-legend i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ew-legend b { min-width: 20px; font-size: 13px; font-weight: 800; color: var(--ew-ink); font-variant-numeric: tabular-nums; }
.ew-lg-pend { background: #F2A516; }
.ew-lg-act { background: #E5484D; }
.ew-lg-done { background: #14BFAF; }
.ew-lg-dis { background: #A3ADC4; }
.ew-bump { animation: ew-bump 420ms var(--ew-ease); }
@keyframes ew-bump { 40% { transform: translateY(-3px); color: var(--ew-good); } }
.ew-legend b { display: inline-block; }

/* center medallion — its petals answer the card being lit */
.ew-medallion {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: clamp(76px, 6.4vw, 92px); aspect-ratio: 1;
  display: grid; place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 clamp(6px, .7vw, 9px) var(--ew-bg), 0 22px 40px -18px rgba(11, 21, 51, .45);
  pointer-events: none;
}
.ew-medallion svg { width: 58%; height: 58%; overflow: visible; }
.ew-petal { transform-box: fill-box; transform-origin: center; transition: transform 380ms var(--ew-ease), opacity 300ms ease; animation: ew-petal-in 800ms var(--ew-ease) backwards; }
.ew-petal[data-petal="recruit"]  { --px: -14px; --py: -14px; animation-delay: 380ms; }
.ew-petal[data-petal="enroll"]   { --px: 14px;  --py: -14px; animation-delay: 460ms; }
.ew-petal[data-petal="graduate"] { --px: 14px;  --py: 14px;  animation-delay: 540ms; }
.ew-petal[data-petal="operate"]  { --px: -14px; --py: 14px;  animation-delay: 620ms; }
@keyframes ew-petal-in { from { opacity: 0; transform: translate(var(--px), var(--py)) scale(.6); } }
.ew-bento[data-lit] .ew-petal { opacity: .35; }
.ew-bento[data-lit="recruit"]  .ew-petal[data-petal="recruit"],
.ew-bento[data-lit="enroll"]   .ew-petal[data-petal="enroll"],
.ew-bento[data-lit="operate"]  .ew-petal[data-petal="operate"],
.ew-bento[data-lit="graduate"] .ew-petal[data-petal="graduate"] { opacity: 1; transform: scale(1.14); }

/* ---------- hero responsive ---------- */
@media (max-width: 1099px) {
  .ew-hero-grid { grid-template-columns: 1fr; }
  .ew-hero-copy { max-width: 620px; }
  .ew-bento { justify-self: start; max-width: 640px; }
}
@media (max-width: 640px) {
  .ew-bento { grid-template-columns: 1fr; }
  .ew-medallion { display: none; }
  .ew-card--recruit, .ew-card--enroll, .ew-card--operate, .ew-card--graduate { border-radius: 26px; }
  .ew-journey { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .ew-journey li + li::before { display: none; }
  .ew-journey-chip { width: 100%; padding-right: 10px; font-size: 15px; background: var(--ew-surface); border-color: var(--ew-line); }
  .ew-cta-row .ew-btn { flex: 1 1 100%; }
  .ew-hero-foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ew-card:hover, .ew-card.is-lit { transform: none; }
}