/* ============================================================
   AIMedX Center Scoped Stylesheet & Theme Tokens (Clean Executive Style)
   PUI Kecerdasan Artifisial Kedokteran dan Simulasi Klinis UM
   ============================================================ */

#aimedx-root {
  /* Brand Color Tokens */
  --aimedx-navy: #0B2A5B;
  --aimedx-navy-dark: #040814;
  --aimedx-teal: #0E8F8F;
  --aimedx-teal-light: #2DD4BF;
  --aimedx-gold: #FFC000;
  --aimedx-gold-light: #FFD54F;
  --aimedx-green: #3A5A27;

  /* Theme: Dark Mode (Default) */
  --aimedx-bg: #050811;
  --aimedx-bg-alt: #090E1D;
  --aimedx-surface: rgba(13, 21, 38, 0.75);
  --aimedx-card-bg: rgba(13, 22, 42, 0.7);
  --aimedx-card-border: rgba(255, 255, 255, 0.08);
  --aimedx-card-hover: rgba(20, 34, 64, 0.9);
  --aimedx-text-main: #F8FAFC;
  --aimedx-text-secondary: #94A3B8;
  --aimedx-text-heading: #FFFFFF;
  --aimedx-nav-bg: rgba(5, 8, 17, 0.9);
  --aimedx-line: rgba(255, 255, 255, 0.08);

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--aimedx-text-secondary);
  background-color: var(--aimedx-bg);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

#aimedx-root h1, 
#aimedx-root h2, 
#aimedx-root h3, 
#aimedx-root h4 {
  font-family: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--aimedx-text-heading);
}

/* ================= CLEAN EXECUTIVE HERO ================= */
.aimedx-hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 10rem 0 5.5rem;
  text-align: center;
  background: var(--aimedx-bg);
}

.aimedx-hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  position: relative;
  z-index: 2;
}

/* Smooth Aurora Glow like DRI */
.aimedx-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.aimedx-aurora::before,
.aimedx-aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: aimedxDrift 24s ease-in-out infinite alternate;
}

.aimedx-aurora::before {
  width: 55vw;
  height: 55vw;
  left: -10vw;
  top: -15vw;
  background: radial-gradient(circle, rgba(14, 143, 143, 0.38) 0%, transparent 65%);
}

.aimedx-aurora::after {
  width: 48vw;
  height: 48vw;
  right: -10vw;
  top: 5vw;
  background: radial-gradient(circle, rgba(11, 42, 91, 0.65) 0%, transparent 65%);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}

.aimedx-aurora-b3 {
  position: absolute;
  width: 38vw;
  height: 38vw;
  left: 32vw;
  top: 15vw;
  border-radius: 50%;
  filter: blur(110px);
  background: radial-gradient(circle, rgba(255, 192, 0, 0.12) 0%, transparent 65%);
}

@keyframes aimedxDrift {
  to { transform: translate(4vw, 3vw) scale(1.06); }
}

/* Perspective Grid Background */
.aimedx-gridbg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 15%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}

/* Hero Pill Badge */
.aimedx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--aimedx-text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.aimedx-chip i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--aimedx-teal-light);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.2);
}

/* Hero H1 Typography */
.aimedx-h1 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 6.5vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  max-width: 22ch;
  margin: 0;
}

.aimedx-grad {
  background: linear-gradient(115deg, #FFFFFF 30%, #2DD4BF 70%, #FFC000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero Lead Text */
.aimedx-lead {
  color: var(--aimedx-text-secondary);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.7;
  max-width: 44rem;
  margin: 0;
}

/* CTA Buttons */
.aimedx-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.aimedx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.aimedx-btn.pri {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #0E8F8F 0%, #0B2A5B 100%);
  border: 1px solid rgba(45, 212, 191, 0.45);
  box-shadow: 0 12px 30px -8px rgba(14, 143, 143, 0.55);
}

.aimedx-btn.pri:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -6px rgba(45, 212, 191, 0.7);
  background: linear-gradient(135deg, #14B8A6 0%, #0E8F8F 100%);
}

.aimedx-btn.ghost {
  color: #F8FAFC !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
}

.aimedx-btn.ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(45, 212, 191, 0.5);
  color: #2DD4BF !important;
}

/* Feature KPI Chips (Identical layout quality to DRI fchips) */
.aimedx-fchips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 3.5rem;
  max-width: 60rem;
  width: 100%;
}

.aimedx-fchip {
  flex: 1 1 12rem;
  min-width: 12rem;
  max-width: 16rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  background: rgba(13, 22, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  text-align: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
}

.aimedx-fchip:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 212, 191, 0.35);
  box-shadow: 0 16px 36px -10px rgba(14, 143, 143, 0.3);
}

.aimedx-fchip b {
  display: block;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.aimedx-fchip .label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.88rem;
  color: #FFFFFF;
  font-weight: 600;
}

.aimedx-fchip .sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--aimedx-text-secondary);
  font-weight: 400;
}

/* General Cards & Sections */
.aimedx-card {
  background: var(--aimedx-card-bg);
  border-radius: 24px;
  border: 1px solid var(--aimedx-card-border);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.aimedx-card:hover {
  transform: translateY(-5px);
  background: var(--aimedx-card-hover);
  border-color: rgba(45, 212, 191, 0.4);
  box-shadow: 0 20px 45px -10px rgba(14, 143, 143, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.aimedx-section-alt {
  background-color: var(--aimedx-bg-alt);
  position: relative;
}

.aimedx-section-normal {
  background-color: var(--aimedx-bg);
  position: relative;
}

/* Glass Navbar */
.aimedx-glass-nav {
  background: var(--aimedx-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--aimedx-line);
}

.aimedx-glass-nav.scrolled {
  background: rgba(5, 8, 17, 0.95);
  box-shadow: 0 12px 35px -10px rgba(0, 0, 0, 0.8);
  border-bottom-color: rgba(45, 212, 191, 0.25);
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #aimedx-root * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}