/* =====================================================================
   Biomexa IVF Care — IVF centre (doctor) landing, shown on ivf-doctor.html
   before login. Builds on css/home-future.css + css/ivf-landing.css
   (the .ivl light 3D system) and adds:
   - a floating, pointer-tilted dashboard preview in the hero
   - flip cards: the doctor's problem on the front, Biomexa's fix behind
   - a tilted login card that settles flat when you start typing
   ===================================================================== */

.ivd-hero { padding-top: 3.5rem; }
.ivd-hero .fx-title { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.ivd-hero .fx-title em { font-style: normal; background: linear-gradient(120deg, #b83a6e, #7c5cf0 55%, #0aa6c9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ivd-hero .fx-btn-rose { color: #fff !important; background: linear-gradient(135deg, #16336b, #b83a6e); box-shadow: 0 12px 30px rgba(184, 58, 110, .3); }
.ivd-hero .fx-btn-rose:hover { box-shadow: 0 16px 36px rgba(184, 58, 110, .42); }

/* ---------- Hero: 3D dashboard preview ---------- */
.ivd-stage { position: relative; perspective: 1400px; padding: 2.5rem 1rem 3rem; }
.ivd-dash {
  position: relative; max-width: 470px; margin: 0 auto; border-radius: 22px; padding: 1.1rem;
  background: rgba(255, 255, 255, .92); border: 1px solid #d6e0f3;
  box-shadow: 0 2px 0 #fff inset, 0 40px 80px rgba(19, 33, 61, .18), 0 0 0 10px rgba(255, 255, 255, .35);
  transform: rotateY(-16deg) rotateX(8deg); transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  animation: ivdFloat 7s ease-in-out infinite;
}
.ivd-dash.tilting { animation: none; transition: transform .12s linear; }
@keyframes ivdFloat { 50% { transform: rotateY(-12deg) rotateX(6deg) translateY(-10px); } }
.ivd-dash-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.ivd-dash-top b { font-family: 'Sora', sans-serif; font-size: .98rem; color: #13213d; }
.ivd-dash-top small { font-size: .7rem; font-weight: 700; color: #8a97ad; background: #f1f4fa; padding: .2rem .55rem; border-radius: 999px; }
.ivd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .75rem; }
.ivd-kpis div { padding: .55rem .6rem; border-radius: 12px; background: #f5f7fc; border: 1px solid #e3e9f5; }
.ivd-kpis b { display: block; font-size: 1.25rem; line-height: 1.1; color: #13213d; }
.ivd-kpis span { font-size: .7rem; color: #55658a; }
.ivd-kpis .alert b { color: #b91c1c; }
.ivd-rows { display: grid; gap: .4rem; }
.ivd-row { display: grid; grid-template-columns: 32px 1fr auto; gap: .6rem; align-items: center; padding: .5rem .55rem; border-radius: 12px; border: 1px solid #edf0f6; background: #fff; font-size: .8rem; }
.ivd-row i { font-style: normal; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: .75rem; color: #fff; background: linear-gradient(135deg, #16336b, #b83a6e); }
.ivd-row b { display: block; color: #13213d; font-size: .82rem; }
.ivd-row span { color: #55658a; font-size: .74rem; }
.ivd-pill { font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; white-space: nowrap; }
.ivd-pill.crit { color: #b91c1c; background: #fdecec; }
.ivd-pill.watch { color: #a36a00; background: #fff6e0; }
.ivd-pill.ok { color: #11663a; background: #e9f7ef; }
.ivd-row.flagged { border-color: #f5c6c6; box-shadow: 0 0 0 3px rgba(185, 28, 28, .06); animation: ivdPulse 2.4s ease-in-out infinite; }
@keyframes ivdPulse { 50% { box-shadow: 0 0 0 6px rgba(185, 28, 28, .1); } }

/* chips floating in front of the dashboard */
.ivd-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: 14px; font-size: .78rem; font-weight: 600; color: #13213d;
  background: rgba(255, 255, 255, .95); border: 1px solid #d6e0f3; box-shadow: 0 18px 36px rgba(19, 33, 61, .16); animation: ivdBob 5s ease-in-out infinite; }
.ivd-chip i { font-style: normal; font-size: 1.05rem; }
.ivd-chip small { display: block; font-weight: 500; color: #55658a; font-size: .7rem; }
.ivd-chip-a { top: .4rem; right: 0; }
.ivd-chip-b { bottom: .8rem; left: 0; animation-delay: -1.7s; }
.ivd-chip-c { top: 46%; right: -1rem; animation-delay: -3.2s; }
@keyframes ivdBob { 50% { transform: translateY(-8px); } }
.ivd-note { text-align: center; font-size: .72rem; color: #8a97ad; margin-top: .4rem; }

/* ---------- Problems → fixes: flip cards ---------- */
.ivd-flips { max-width: 1120px; margin: 2.25rem auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; padding: 0; }
.ivd-flip { perspective: 1200px; min-height: 250px; cursor: pointer; outline: none; }
.ivd-flip-in { position: relative; height: 100%; min-height: 250px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.ivd-flip:hover .ivd-flip-in, .ivd-flip:focus-visible .ivd-flip-in, .ivd-flip.on .ivd-flip-in { transform: rotateY(180deg); }
.ivd-flip:focus-visible .ivd-face { box-shadow: 0 0 0 3px #0aa6c9, 0 18px 38px rgba(19, 33, 61, .1); }
.ivd-face { position: absolute; inset: 0; padding: 1.4rem; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; gap: .5rem; border: 1px solid #d6e0f3; box-shadow: 0 18px 38px rgba(19, 33, 61, .1); }
.ivd-front { background: #fff; }
.ivd-back { transform: rotateY(180deg); background: linear-gradient(160deg, #16336b 0%, #3b2d7a 55%, #b83a6e 130%); border-color: transparent; color: #fff; }
.ivd-face .ivd-tag { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; }
.ivd-front .ivd-tag { color: #b91c1c; background: #fdecec; }
.ivd-back .ivd-tag { color: #0b3b26; background: #7fe3b4; }
.ivd-face .ivd-ico { font-size: 1.9rem; line-height: 1; }
.ivd-face h3 { font-family: 'Sora', sans-serif; font-size: 1.08rem; line-height: 1.3; }
.ivd-front h3 { color: #13213d; }
.ivd-face p { font-size: .9rem; line-height: 1.5; }
.ivd-front p { color: #55658a; }
.ivd-back p { color: rgba(255, 255, 255, .88); }
.ivd-back ul { margin: 0; padding-left: 1.05rem; font-size: .86rem; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.ivd-hint { margin-top: auto; font-size: .76rem; font-weight: 600; color: #0b7d96; }
.ivd-hint::after { content: ' ↻'; }
.ivd-flip-legend { text-align: center; font-size: .82rem; color: #55658a; margin-top: 1.25rem; }

/* ---------- Follow-up prism (5 faces) ---------- */
.ivl.ivd-flow .cf-you b { color: #b83a6e; }
.ivl.ivd-flow .cf-doc b { color: #0b7d96; }
.ivl.ivd-flow .prism-scene { height: 500px; }

/* ---------- Outcomes strip ---------- */
.ivd-wins { max-width: 1080px; margin: 2rem auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; perspective: 1000px; }
.ivd-wins li { padding: 1.2rem; border-radius: 18px; background: #fff; border: 1px solid #d6e0f3; box-shadow: 0 14px 30px rgba(19, 33, 61, .07);
  transform: rotateX(10deg); transform-origin: bottom center; transition: transform .4s, box-shadow .4s; }
.ivd-wins li:hover { transform: rotateX(0) translateY(-5px); box-shadow: 0 22px 40px rgba(19, 33, 61, .12); }
.ivd-wins b { display: block; font-family: 'Sora', sans-serif; font-size: 1rem; color: #13213d; margin: .45rem 0 .25rem; }
.ivd-wins span { font-size: .86rem; color: #55658a; line-height: 1.5; }
.ivd-wins i { font-style: normal; font-size: 1.5rem; }

/* ---------- Login + onboarding ---------- */
.ivd-join { max-width: 1080px; margin: 2rem auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 2.5rem; align-items: center; }
.ivd-onboard { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.ivd-onboard li { display: grid; grid-template-columns: 40px 1fr; gap: .85rem; align-items: start; }
.ivd-onboard em { font-style: normal; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #16336b, #b83a6e); box-shadow: 0 8px 18px rgba(184, 58, 110, .25); }
.ivd-onboard b { display: block; color: #13213d; font-size: 1rem; }
.ivd-onboard span { color: #55658a; font-size: .9rem; line-height: 1.5; }
.ivd-login-wrap { perspective: 1400px; }
.ivd-login { margin: 0 !important; padding: 1.6rem !important; border-radius: 22px !important; border: 1px solid #d6e0f3 !important;
  box-shadow: 0 30px 60px rgba(19, 33, 61, .16), 0 0 0 8px rgba(255, 255, 255, .6) !important;
  transform: rotateY(-10deg) rotateX(4deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ivd-login:hover, .ivd-login:focus-within { transform: none; }
.ivd-login h2 { font-family: 'Sora', sans-serif; font-size: 1.3rem !important; }
.ivd-login .btn { width: 100%; justify-content: center; padding: 12px; }
.ivd-login-foot { margin-top: .9rem; font-size: .85rem; color: #55658a; text-align: center; }

/* nav button while logged out */
.ivf-nav .btn-rose { background: #b83a6e; color: #fff !important; padding: 7px 14px; border-radius: 10px; font-weight: 600; }
.ivf-nav .btn-rose:hover { background: #962a57; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .ivd-flips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivd-wins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivd-join { grid-template-columns: 1fr; max-width: 520px; }
  .ivd-login { transform: none; }
  .ivd-hero .fx-copy { text-align: center; }
  .ivd-hero .fx-actions { justify-content: center; }
}
@media (max-width: 600px) {
  .ivd-flips, .ivd-wins { grid-template-columns: 1fr; }
  .ivd-flip, .ivd-flip-in { min-height: 230px; }
  .ivd-wins li { transform: none; }
  .ivd-stage { padding: 2.75rem 0 2.5rem; }
  .ivd-dash { transform: rotateY(-8deg) rotateX(6deg); padding: .9rem; }
  @keyframes ivdFloat { 50% { transform: rotateY(-6deg) rotateX(5deg) translateY(-8px); } }
  .ivd-chip { font-size: .72rem; padding: .45rem .65rem; }
  .ivd-chip-a { top: 0; right: .25rem; }
  .ivd-chip-b { bottom: .4rem; left: .25rem; }
  .ivd-chip-c { display: none; }
  .ivl.ivd-flow .prism-scene { height: 440px; }
  .ivf-nav .ivf-nav-links a.hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ivd-dash, .ivd-chip, .ivd-row.flagged { animation: none !important; }
  .ivd-flip-in, .ivd-login, .ivd-wins li { transition: none; }
}

/* fit-and-finish */
.ivd-chip-b { bottom: 2.6rem; }
@media (max-width: 760px) { .ivf-nav .ivf-nav-links a.btn-rose:not(.hidden) { display: inline-block; } }
@media (max-width: 600px) {
  .ivd-chip-b { bottom: 2.2rem; }
  .ivd-wins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .ivd-wins li { padding: .95rem; }
  .ivd-wins b { font-size: .92rem; }
  .ivd-wins span { font-size: .8rem; }
}