* {
  box-sizing: border-box;
}

:root {
  --cyan: #67e8f9;
  --blue: #60a5fa;
  --gold: #fde68a;
  --rose: #fb7185;
  --green: #34d399;
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.72);
  --panel: rgba(8, 18, 35, 0.66);
  --line: rgba(255, 255, 255, 0.14);
  --font-body: "IBM Plex Sans Arabic", "Tajawal", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-heading: "Alexandria", "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: #020617;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-shell {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 9%, rgba(34, 211, 238, 0.24), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(244, 63, 94, 0.18), transparent 28%),
    radial-gradient(circle at 50% 94%, rgba(16, 185, 129, 0.12), transparent 28%),
    linear-gradient(135deg, #020617, #07111f 46%, #020617);
}

.cyber-grid {
  position: fixed;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(103, 232, 249, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 232, 249, 0.2) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
  animation: grid-drift 18s linear infinite;
}

.scan-line {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background: linear-gradient(180deg, transparent 0%, rgba(103, 232, 249, 0.16) 48%, transparent 58%);
  height: 46%;
  animation: scan 8s ease-in-out infinite;
}

.ambient {
  position: fixed;
  inset: auto;
  border-radius: 999px;
  filter: blur(62px);
  opacity: 0.55;
  pointer-events: none;
  animation: float-light 8s ease-in-out infinite;
}

.ambient-one {
  width: 340px;
  height: 340px;
  background: #22d3ee;
  right: -80px;
  top: 80px;
}

.ambient-two {
  width: 300px;
  height: 300px;
  background: #f43f5e;
  left: -90px;
  bottom: 120px;
  animation-delay: -2s;
}

.ambient-three {
  width: 260px;
  height: 260px;
  background: #22c55e;
  right: 24%;
  bottom: -110px;
  opacity: 0.34;
  animation-delay: -4s;
}

.hero {
  min-height: 100vh;
  padding: 36px 20px 64px;
  position: relative;
  z-index: 1;
}

.hero-inner {
  width: min(1120px, 100%);
  margin: auto;
  text-align: center;
}

.brand-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.egypt-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 55px rgba(0, 0, 0, 0.26), 0 0 28px rgba(239, 68, 68, 0.12);
  backdrop-filter: blur(18px);
}

.flag-mark {
  width: 74px;
  height: 50px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.14), 0 0 28px rgba(239, 68, 68, 0.16);
}

.flag-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.logo-copy {
  display: grid;
  gap: 1px;
  text-align: right;
}

.logo-copy strong {
  font-family: var(--font-heading);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 1000;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.38), 0 0 28px rgba(239, 68, 68, 0.35), 0 0 36px rgba(34, 211, 238, 0.25);
}

.logo-copy small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 800;
}

.trust-badge {
  font-family: var(--font-heading);
  display: inline-flex;
  padding: 12px 22px;
  border: 1px solid rgba(125, 211, 252, 0.38);
  border-radius: 999px;
  background: rgba(8, 47, 73, 0.48);
  box-shadow: 0 0 35px rgba(34, 211, 238, 0.22);
  font-weight: 900;
  color: #e0f2fe;
}

.glowing-name {
  margin: 24px 0 10px;
  font-family: var(--font-heading);
  font-size: clamp(44px, 9vw, 104px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 0;
  background: linear-gradient(90deg, #ffffff, #67e8f9, #fde68a, #fb7185, #ffffff);
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 4s linear infinite;
  text-shadow: 0 0 32px rgba(103, 232, 249, 0.28);
}

.rotating-message {
  font-family: var(--font-heading);
  min-height: 46px;
  margin: 0 auto 22px;
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 1000;
  color: var(--cyan);
  transition: opacity 180ms ease, transform 180ms ease;
  text-shadow: 0 0 22px rgba(103, 232, 249, 0.22);
}

.statement-box,
.quote-box,
.profile-card,
.tips-grid div,
.contact-panel,
.top-links a {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
}

.statement-box {
  max-width: 980px;
  margin: 0 auto 24px;
  padding: 24px;
  border-radius: 24px;
  display: grid;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.statement-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), transparent, rgba(251, 113, 133, 0.14));
  opacity: 0.7;
}

.statement-box > * {
  position: relative;
}

.statement-box span {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 1000;
  color: #bae6fd;
}

.statement-box strong {
  font-family: var(--font-heading);
  font-size: clamp(23px, 4vw, 39px);
  line-height: 1.75;
  color: #fff;
  font-weight: 1000;
}

.statement-box small {
  max-width: 820px;
  margin: auto;
  font-size: 18px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}


.glow-warning {
  display: inline-block;
  padding: 13px 18px;
  border-radius: 18px;
  border: 1px solid rgba(253, 230, 138, 0.28);
  background: linear-gradient(90deg, rgba(251, 113, 133, 0.18), rgba(34, 211, 238, 0.16), rgba(253, 230, 138, 0.16));
  color: #fff7ed !important;
  box-shadow: 0 0 26px rgba(251, 113, 133, 0.18), inset 0 0 20px rgba(255, 255, 255, 0.06);
  text-shadow: 0 0 18px rgba(253, 230, 138, 0.22), 0 0 24px rgba(103, 232, 249, 0.18);
}
.top-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 34px;
}

.top-links a {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 900;
  transition: 180ms ease;
}

.top-links a:hover,
.profile-link:hover,
.contact-mail:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 232, 249, 0.65);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.22);
}

.top-links b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1877f2;
  font-family: Arial, sans-serif;
}

.profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  text-align: right;
}

.profile-card {
  overflow: hidden;
  border-radius: 28px;
}

.photo-frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(103, 232, 249, 0.12), rgba(2, 6, 23, 0.95));
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#legal-support .photo-frame {
  aspect-ratio: 4 / 5;
  padding: 10px;
  background:
    radial-gradient(circle at center, rgba(253, 230, 138, 0.16), transparent 48%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 47, 73, 0.78));
}

#legal-support .photo-frame img {
  object-fit: contain;
  border-radius: 20px;
}

.profile-content {
  padding: 24px;
}

.role {
  margin: 0 0 8px;
  color: var(--cyan);
  font-weight: 1000;
}

.profile-content h2 {
  font-family: var(--font-heading);
  margin: 0 0 12px;
  font-size: 29px;
  font-weight: 1000;
}

.profile-content p {
  line-height: 2.05;
  color: var(--muted);
  font-size: 16px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.chips span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(103, 232, 249, 0.12);
  border: 1px solid rgba(103, 232, 249, 0.22);
  font-size: 13px;
  font-weight: 900;
}

.profile-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 1000;
  transition: 180ms ease;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0;
}

.tips-grid div {
  border-radius: 20px;
  padding: 20px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.84);
  text-align: right;
}

.tips-grid strong {
  font-family: var(--font-heading);
  display: block;
  color: #fff;
  font-size: 17px;
  font-weight: 1000;
  margin-bottom: 7px;
}

.tips-grid span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.quote-box {
  margin: 0 auto 22px;
  max-width: 980px;
  border-radius: 24px;
  padding: 24px 28px;
  line-height: 2.1;
  font-size: 22px;
  font-weight: 1000;
  color: rgba(255, 255, 255, 0.9);
}

.contact-panel {
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: right;
  max-width: 980px;
  margin: auto;
  border-radius: 26px;
  padding: 22px;
}

.contact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, #22d3ee, #2563eb);
  box-shadow: 0 0 34px rgba(34, 211, 238, 0.3);
  font-size: 28px;
}

.contact-copy {
  flex: 1;
}

.contact-copy p {
  margin: 0;
  color: #93c5fd;
  font-weight: 1000;
}

.contact-copy h2 {
  font-family: var(--font-heading);
  margin: 4px 0 8px;
  font-size: 26px;
  font-weight: 1000;
}

.contact-copy span {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.9;
}

.contact-mail {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.34);
  background: rgba(8, 47, 73, 0.45);
  font-weight: 1000;
  direction: ltr;
  transition: 180ms ease;
}

@keyframes shine {
  to { background-position: 260% center; }
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 52px 52px, 52px 52px; }
}

@keyframes scan {
  0%, 100% { transform: translateY(-55%); opacity: 0; }
  45%, 60% { opacity: 0.18; }
  50% { transform: translateY(145%); }
}

@keyframes float-light {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -20px, 0) scale(1.05); }
}

@media (max-width: 860px) {
  .profiles,
  .tips-grid {
    grid-template-columns: 1fr;
  }

  .contact-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-mail {
    justify-content: center;
    width: 100%;
    font-size: 14px;
  }

  .hero {
    padding: 28px 14px 46px;
  }

  .top-links a {
    width: 100%;
    justify-content: center;
  }

  .photo-frame {
    aspect-ratio: 4 / 3;
  }

  #legal-support .photo-frame {
    aspect-ratio: 3 / 4;
  }

  .egypt-logo {
    width: 100%;
    justify-content: center;
    border-radius: 22px;
  }

  .statement-box strong {
  font-family: var(--font-heading);
    font-size: 24px;
  }
}
/* Comfort and motion polish */
.page-shell::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  opacity: 0.48;
  background:
    conic-gradient(from 120deg at 30% 35%, transparent 0deg, rgba(34, 211, 238, 0.16) 62deg, transparent 120deg, rgba(253, 230, 138, 0.12) 178deg, transparent 245deg, rgba(244, 63, 94, 0.12) 300deg, transparent 360deg);
  filter: blur(38px);
  animation: aurora-sweep 18s ease-in-out infinite alternate;
}

.page-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 0%, transparent 48%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.05), rgba(2, 6, 23, 0.24));
}

.cyber-grid {
  opacity: 0.12;
  background-size: 64px 64px;
  animation-duration: 26s;
}

.scan-line {
  opacity: 0.12;
  animation-duration: 12s;
}

.ambient {
  opacity: 0.42;
  filter: blur(76px);
  animation-duration: 11s;
}

.statement-box,
.quote-box,
.profile-card,
.tips-grid div,
.contact-panel,
.top-links a {
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.78), rgba(8, 16, 31, 0.58));
  border-color: rgba(180, 220, 255, 0.16);
}

.statement-box small,
.profile-content p,
.tips-grid span,
.contact-copy span {
  color: rgba(234, 242, 255, 0.78);
  font-weight: 600;
}

.profile-content p,
.contact-copy span {
  line-height: 2.08;
}

.quote-box {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(18px, 2.4vw, 22px);
  text-wrap: balance;
}

.glow-warning {
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.14), rgba(34, 211, 238, 0.13), rgba(253, 230, 138, 0.13));
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.12), inset 0 0 22px rgba(255, 255, 255, 0.05);
}

.flag-mark {
  background: rgba(255, 255, 255, 0.06);
}

.flag-mark img {
  object-fit: contain;
  background: rgba(255, 255, 255, 0.08);
}

@keyframes aurora-sweep {
  0% {
    transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1);
  }
  100% {
    transform: translate3d(2%, 1%, 0) rotate(10deg) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cyber-grid,
  .scan-line,
  .ambient,
  .glowing-name,
  .page-shell::before {
    animation: none !important;
  }
}
/* Active-theory-inspired immersive layer */
#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.82;
  mix-blend-mode: screen;
}

.hero-inner > * {
  animation: reveal-up 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-inner > *:nth-child(2) { animation-delay: 90ms; }
.hero-inner > *:nth-child(3) { animation-delay: 160ms; }
.hero-inner > *:nth-child(4) { animation-delay: 230ms; }
.hero-inner > *:nth-child(5) { animation-delay: 300ms; }
.hero-inner > *:nth-child(6) { animation-delay: 370ms; }
.hero-inner > *:nth-child(7) { animation-delay: 440ms; }

.glitch-title {
  position: relative;
  filter: drop-shadow(0 0 26px rgba(103, 232, 249, 0.2));
}

.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.48;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glitch-title::before {
  transform: translate(2px, -1px);
  background-image: linear-gradient(90deg, #38bdf8, transparent 55%);
  animation: glitch-shift 3.4s steps(2, end) infinite;
}

.glitch-title::after {
  transform: translate(-2px, 1px);
  background-image: linear-gradient(90deg, transparent 35%, #fb7185);
  animation: glitch-shift 4.1s steps(2, end) infinite reverse;
}

.hologram-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(320px, 1.65fr);
  gap: 22px;
  align-items: center;
  min-height: 360px;
  margin: 30px auto 34px;
  perspective: 1200px;
}

.category-rail {
  display: grid;
  gap: 14px;
  text-align: right;
  justify-self: stretch;
  color: rgba(212, 227, 255, 0.88);
  font-family: var(--font-heading);
}

.category-rail span {
  color: #ffffff;
  font-weight: 900;
  font-size: 15px;
  text-shadow: 0 0 18px rgba(103, 232, 249, 0.28);
}

.category-rail a {
  color: #a78bfa;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  transition: 180ms ease;
  text-shadow: 0 0 16px rgba(167, 139, 250, 0.22);
}

.category-rail a:hover {
  color: #67e8f9;
  transform: translateX(-4px);
}

.holo-stack {
  position: relative;
  min-height: 350px;
  transform-style: preserve-3d;
}

.holo-stack::before {
  content: "";
  position: absolute;
  inset: 22% 2% 10% 0;
  background:
    radial-gradient(circle, rgba(167, 139, 250, 0.34) 1px, transparent 2px),
    radial-gradient(circle, rgba(103, 232, 249, 0.26) 1px, transparent 2px),
    linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.15), transparent);
  background-size: 18px 18px, 29px 29px, 100% 100%;
  filter: blur(0.2px);
  opacity: 0.55;
  transform: rotate(-7deg) skewX(-10deg);
  animation: particle-ribbon 8s ease-in-out infinite alternate;
}

.holo-panel {
  position: absolute;
  display: grid;
  align-content: center;
  text-align: right;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(196, 231, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(209, 244, 255, 0.2), rgba(97, 121, 151, 0.07)),
    radial-gradient(circle at 22% 18%, rgba(251, 113, 133, 0.22), transparent 34%),
    radial-gradient(circle at 78% 72%, rgba(103, 232, 249, 0.22), transparent 36%);
  box-shadow:
    inset 0 0 50px rgba(255, 255, 255, 0.05),
    0 28px 95px rgba(0, 0, 0, 0.45),
    0 0 34px rgba(103, 232, 249, 0.14);
  backdrop-filter: blur(18px) saturate(130%);
  transform-style: preserve-3d;
  animation: holo-float 7s ease-in-out infinite;
}

.holo-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 6px);
  transform: translateX(-120%);
  animation: holo-scan 4.8s ease-in-out infinite;
}

.holo-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.18), transparent 26%);
  opacity: 0.7;
}

.holo-panel > * {
  position: relative;
  z-index: 1;
}

.holo-panel small {
  color: rgba(255, 255, 255, 0.82);
  font-family: "IBM Plex Sans Arabic", monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  direction: ltr;
}

.holo-panel strong {
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.8vw, 62px);
  font-weight: 900;
  line-height: 1.2;
  background: linear-gradient(90deg, #fff, #67e8f9, #c4b5fd, #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(103, 232, 249, 0.22);
}

.holo-panel span {
  margin-top: 10px;
  color: rgba(235, 247, 255, 0.82);
  font-size: 17px;
  font-weight: 700;
}

.holo-panel-main {
  width: min(560px, 80%);
  min-height: 220px;
  right: 6%;
  top: 8%;
  padding: 34px 42px;
  transform: rotateY(-13deg) rotateX(4deg) rotateZ(-2deg);
}

.holo-panel-side {
  width: min(440px, 62%);
  min-height: 210px;
  left: 3%;
  top: 34%;
  padding: 30px 34px;
  transform: rotateY(15deg) rotateX(-2deg) rotateZ(3deg) translateZ(-40px);
  animation-delay: -2.2s;
}

.holo-panel-mini {
  width: 210px;
  min-height: 110px;
  right: 28%;
  bottom: 2%;
  padding: 22px;
  transform: rotateY(-8deg) rotateZ(7deg) translateZ(-70px);
  animation-delay: -4s;
}

.holo-panel-mini strong {
  font-size: 24px;
}

.statement-box span,
.statement-box strong,
.role,
.profile-content h2,
.tips-grid strong,
.contact-copy h2 {
  background: linear-gradient(90deg, #ffffff, #67e8f9, #c4b5fd, #fde68a);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 24px rgba(103, 232, 249, 0.16);
  animation: text-energy 6s ease-in-out infinite alternate;
}

.statement-box,
.profile-card,
.tips-grid div,
.quote-box,
.contact-panel {
  transform-style: preserve-3d;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.profile-card:hover,
.tips-grid div:hover,
.contact-panel:hover,
.statement-box:hover {
  transform: translateY(-5px) rotateX(1.5deg);
  border-color: rgba(103, 232, 249, 0.34);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.36), 0 0 36px rgba(103, 232, 249, 0.16);
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes glitch-shift {
  0%, 90%, 100% { clip-path: inset(0 0 0 0); opacity: 0.16; }
  92% { clip-path: inset(12% 0 68% 0); opacity: 0.72; }
  94% { clip-path: inset(66% 0 10% 0); opacity: 0.42; }
  96% { clip-path: inset(34% 0 44% 0); opacity: 0.65; }
}

@keyframes holo-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -18px; }
}

@keyframes holo-scan {
  0%, 42% { transform: translateX(-130%); }
  70%, 100% { transform: translateX(130%); }
}

@keyframes particle-ribbon {
  from { transform: rotate(-7deg) skewX(-10deg) translateX(-18px); opacity: 0.35; }
  to { transform: rotate(-4deg) skewX(-8deg) translateX(24px); opacity: 0.75; }
}

@keyframes text-energy {
  from { background-position: 0% center; }
  to { background-position: 100% center; }
}

@media (max-width: 860px) {
  .hologram-stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .category-rail {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
  }

  .category-rail span {
    grid-column: 1 / -1;
  }

  .holo-stack {
    min-height: 420px;
  }

  .holo-panel-main {
    right: 0;
    width: 92%;
    min-height: 200px;
  }

  .holo-panel-side {
    left: 0;
    width: 82%;
    top: 46%;
  }

  .holo-panel-mini {
    right: 8%;
    bottom: 0;
  }
}
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(10px);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity 850ms ease, transform 850ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 850ms ease;
}
/* Premium awareness statement and interactive topic cards */
:root {
  --font-special: "Noto Kufi Arabic", "Alexandria", "IBM Plex Sans Arabic", sans-serif;
}

.premium-statement {
  padding: 28px;
  gap: 16px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(9, 24, 45, 0.88), rgba(4, 11, 26, 0.72)),
    radial-gradient(circle at 20% 20%, rgba(103, 232, 249, 0.2), transparent 34%),
    radial-gradient(circle at 85% 70%, rgba(251, 113, 133, 0.18), transparent 30%);
  border-color: rgba(148, 225, 255, 0.22);
}

.premium-statement::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.2), transparent),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 7px);
  opacity: 0.48;
  animation: statement-scan 5.4s ease-in-out infinite;
}

.statement-kicker {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.26);
  background: rgba(8, 47, 73, 0.46);
  font-family: var(--font-special);
  font-size: 17px;
  font-weight: 800;
  color: #bff4ff;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.12);
}

.premium-statement h2 {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--font-special);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.75;
  text-wrap: balance;
  background: linear-gradient(90deg, #ffffff, #67e8f9, #c4b5fd, #fde68a, #ffffff);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(103, 232, 249, 0.16);
  animation: text-energy 5.2s ease-in-out infinite alternate;
}

.statement-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.statement-actions span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(253, 230, 138, 0.26);
  background: rgba(253, 230, 138, 0.08);
  color: #fff7c2 !important;
  font-family: var(--font-special);
  font-size: 14px;
  font-weight: 700;
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.04), 0 0 18px rgba(253, 230, 138, 0.08);
}

.premium-statement .glow-warning {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 700;
  line-height: 2.15;
  border-color: rgba(103, 232, 249, 0.25);
}

.category-rail button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: right;
  color: #a78bfa;
  font: inherit;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0;
  transition: transform 180ms ease, color 180ms ease, text-shadow 180ms ease;
  text-shadow: 0 0 16px rgba(167, 139, 250, 0.22);
}

.category-rail button:hover,
.category-rail button.is-active {
  color: #67e8f9;
  transform: translateX(-4px);
  text-shadow: 0 0 22px rgba(103, 232, 249, 0.38);
}

.category-rail button.is-active::before {
  content: "● ";
  color: #fde68a;
  text-shadow: 0 0 14px rgba(253, 230, 138, 0.5);
}

.holo-panel p {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  max-width: 92%;
  color: rgba(236, 249, 255, 0.82);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  line-height: 2;
}

.holo-panel.is-switching {
  animation: holo-pop 620ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.profile-name {
  display: inline-block;
  background: linear-gradient(90deg, #fff, #67e8f9, #fde68a, #fb7185, #fff);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(103, 232, 249, 0.22);
  animation: text-energy 5s ease-in-out infinite alternate;
}

.profile-name:hover {
  filter: drop-shadow(0 0 18px rgba(103, 232, 249, 0.42));
}

@keyframes statement-scan {
  0%, 100% { opacity: 0.28; transform: translateX(-18%); }
  50% { opacity: 0.58; transform: translateX(18%); }
}

@keyframes holo-pop {
  0% { opacity: 0.35; transform: rotateY(42deg) rotateX(8deg) scale(0.88); filter: blur(10px); }
  62% { opacity: 1; transform: rotateY(-8deg) rotateX(0deg) scale(1.035); filter: blur(0); }
  100% { opacity: 1; filter: blur(0); }
}

@media (max-width: 860px) {
  .statement-actions span {
    flex: 1 1 42%;
    justify-content: center;
  }

  .category-rail button {
    text-align: center;
  }
}
/* Hologram readability upgrade */
.hologram-stage {
  grid-template-columns: minmax(190px, 0.62fr) minmax(520px, 1.9fr);
  min-height: 500px;
  gap: 34px;
  align-items: center;
}

.holo-stack {
  min-height: 500px;
}

.holo-stack::before {
  opacity: 0.35;
}

.holo-panel {
  background:
    linear-gradient(135deg, rgba(8, 18, 38, 0.88), rgba(12, 30, 52, 0.76)),
    radial-gradient(circle at 18% 18%, rgba(103, 232, 249, 0.20), transparent 36%),
    radial-gradient(circle at 86% 70%, rgba(253, 230, 138, 0.16), transparent 34%);
  border-color: rgba(188, 235, 255, 0.42);
  box-shadow:
    inset 0 0 36px rgba(255, 255, 255, 0.07),
    0 28px 90px rgba(0, 0, 0, 0.46),
    0 0 48px rgba(103, 232, 249, 0.18);
}

.holo-panel::after {
  opacity: 0.28;
}

.holo-panel small {
  color: #dff8ff;
  font-size: 13px;
  text-shadow: 0 0 16px rgba(103, 232, 249, 0.42);
}

.holo-panel strong {
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.22;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(103, 232, 249, 0.28));
}

.holo-panel span,
.holo-panel p {
  color: #f2fbff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.holo-panel span {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 800;
  color: #c9f7ff;
}

.holo-panel p {
  max-width: 100%;
  font-size: clamp(15px, 1.65vw, 18px);
  font-weight: 700;
  line-height: 2.05;
  background: rgba(2, 6, 23, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 12px 14px;
}

.holo-panel-main {
  width: min(620px, 86%);
  min-height: 330px;
  right: 3%;
  top: 2%;
  padding: 34px 38px;
  z-index: 3;
}

.holo-panel-side {
  width: min(430px, 62%);
  min-height: 210px;
  left: 0;
  top: 55%;
  padding: 26px 30px;
  z-index: 2;
}

.holo-panel-mini {
  width: 220px;
  min-height: 112px;
  right: 12%;
  bottom: 0;
  z-index: 1;
}

.awareness-holo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 6px auto 32px;
  perspective: 1200px;
}

.flip-holo-card {
  min-height: 230px;
  border: 0;
  background: transparent;
  perspective: 1100px;
  cursor: pointer;
  outline: none;
}

.flip-inner {
  position: relative;
  width: 100%;
  min-height: 230px;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.flip-holo-card:hover .flip-inner,
.flip-holo-card:focus-visible .flip-inner,
.flip-holo-card.is-flipped .flip-inner {
  transform: rotateY(180deg) translateY(-6px);
}

.flip-face {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
  border-radius: 26px;
  border: 1px solid rgba(188, 235, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(7, 20, 39, 0.88), rgba(13, 34, 56, 0.70)),
    radial-gradient(circle at 18% 12%, rgba(103, 232, 249, 0.18), transparent 32%),
    radial-gradient(circle at 86% 80%, rgba(251, 113, 133, 0.14), transparent 34%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 0 30px rgba(255, 255, 255, 0.05);
  backface-visibility: hidden;
  overflow: hidden;
  text-align: right;
}

.flip-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 7px);
  opacity: 0.45;
  pointer-events: none;
}

.flip-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(135deg, rgba(18, 11, 38, 0.88), rgba(6, 37, 50, 0.72)),
    radial-gradient(circle at 20% 20%, rgba(253, 230, 138, 0.15), transparent 34%),
    radial-gradient(circle at 78% 74%, rgba(103, 232, 249, 0.18), transparent 34%);
}

.flip-face span {
  position: relative;
  z-index: 1;
  font-size: 34px;
  filter: drop-shadow(0 0 14px rgba(103, 232, 249, 0.35));
}

.flip-face strong {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
  line-height: 1.35;
  background: linear-gradient(90deg, #fff, #67e8f9, #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.flip-face p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(238, 249, 255, 0.86);
  font-size: 15px;
  font-weight: 700;
  line-height: 2;
}

@media (max-width: 980px) {
  .hologram-stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .holo-stack {
    min-height: 560px;
  }

  .holo-panel-main {
    width: 96%;
    right: 0;
  }

  .holo-panel-side {
    width: 78%;
    top: 62%;
  }

  .awareness-holo-grid {
    grid-template-columns: 1fr;
  }
}
/* Hologram nameplate */
.holo-nameplate {
  position: relative;
  isolation: isolate;
  width: min(980px, 100%);
  margin: 24px auto 14px;
  padding: clamp(18px, 3vw, 30px) clamp(18px, 4vw, 46px);
  border-radius: 30px;
  border: 1px solid rgba(190, 242, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(10, 24, 46, 0.72), rgba(5, 12, 27, 0.56)),
    radial-gradient(circle at 18% 20%, rgba(103, 232, 249, 0.20), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(251, 113, 133, 0.16), transparent 34%);
  box-shadow:
    inset 0 0 42px rgba(255, 255, 255, 0.06),
    0 28px 90px rgba(0, 0, 0, 0.38),
    0 0 42px rgba(103, 232, 249, 0.18);
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(140%);
  transform-style: preserve-3d;
  animation: nameplate-float 7s ease-in-out infinite;
}

.holo-nameplate::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 0deg, rgba(103, 232, 249, 0.08), rgba(103, 232, 249, 0.9), rgba(253, 230, 138, 0.72), rgba(251, 113, 133, 0.74), rgba(167, 139, 250, 0.76), rgba(103, 232, 249, 0.08));
  animation: name-border-spin 5.5s linear infinite;
}

.holo-nameplate::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 28px;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, transparent 54%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 7px);
  transform: translateX(-110%);
  animation: nameplate-sweep 4.2s ease-in-out infinite;
  mix-blend-mode: screen;
}

.name-letters {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1px, 0.35vw, 7px);
  line-height: 1.04;
  perspective: 900px;
}

.name-char,
.name-space {
  display: inline-block;
}

.name-char {
  --delay: calc(var(--i, 0) * 70ms);
  font-family: var(--font-heading);
  font-size: clamp(42px, 8vw, 96px);
  font-weight: 900;
  background: linear-gradient(135deg, #ffffff 0%, #67e8f9 28%, #c4b5fd 52%, #fde68a 74%, #fb7185 100%);
  background-size: 260% 260%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(103, 232, 249, 0.24));
  animation: letter-prism 3.8s ease-in-out infinite alternate;
  animation-delay: var(--delay);
}

.name-char:nth-child(1) { --i: 1; }
.name-char:nth-child(2) { --i: 2; }
.name-char:nth-child(3) { --i: 3; }
.name-char:nth-child(4) { --i: 4; }
.name-char:nth-child(5) { --i: 5; }
.name-char:nth-child(7) { --i: 6; }
.name-char:nth-child(8) { --i: 7; }
.name-char:nth-child(10) { --i: 8; }
.name-char:nth-child(11) { --i: 9; }
.name-char:nth-child(12) { --i: 10; }
.name-char:nth-child(13) { --i: 11; }
.name-char:nth-child(14) { --i: 12; }
.name-char:nth-child(15) { --i: 13; }
.name-char:nth-child(16) { --i: 14; }

.name-space {
  width: clamp(10px, 2vw, 28px);
}

@keyframes name-border-spin {
  to { transform: rotate(360deg); }
}

@keyframes nameplate-sweep {
  0%, 42% { transform: translateX(-115%); opacity: 0.2; }
  58% { opacity: 0.72; }
  100% { transform: translateX(115%); opacity: 0.18; }
}

@keyframes nameplate-float {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(-6px) rotateX(1.2deg); }
}

@keyframes letter-prism {
  0% { background-position: 0% 50%; transform: translateY(0) rotateX(0deg); }
  100% { background-position: 100% 50%; transform: translateY(-3px) rotateX(7deg); }
}

@media (max-width: 680px) {
  .holo-nameplate {
    border-radius: 22px;
    padding: 18px 12px;
  }

  .holo-nameplate::after {
    border-radius: 20px;
  }

  .name-char {
    font-size: clamp(34px, 11vw, 58px);
  }
}
/* Nameplate single-line fix */
.holo-nameplate {
  width: min(1280px, 96vw);
  max-width: 1280px;
  padding: clamp(14px, 2vw, 24px) clamp(12px, 2.6vw, 34px);
  direction: ltr;
  unicode-bidi: isolate;
}

.holo-nameplate .name-letters {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  gap: clamp(0px, 0.1vw, 3px);
  line-height: 1;
}

.holo-nameplate .name-char,
.holo-nameplate .name-space {
  display: inline-block;
  flex: 0 0 auto;
  direction: ltr;
  unicode-bidi: isolate;
}

.holo-nameplate .name-char {
  font-size: clamp(24px, 4.6vw, 68px);
  line-height: 1;
  text-transform: none;
  animation-name: letter-prism, letter-glow-pulse;
  animation-duration: 3.8s, 2.2s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, alternate;
}

.holo-nameplate .name-space {
  width: clamp(6px, 0.9vw, 16px);
}

@keyframes letter-glow-pulse {
  0% {
    filter: drop-shadow(0 0 10px rgba(103, 232, 249, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 24px rgba(103, 232, 249, 0.52)) drop-shadow(0 0 18px rgba(253, 230, 138, 0.24));
  }
  100% {
    filter: drop-shadow(0 0 18px rgba(251, 113, 133, 0.28));
  }
}

@media (max-width: 680px) {
  .holo-nameplate {
    width: min(98vw, 620px);
    padding: 14px 8px;
  }

  .holo-nameplate .name-char {
    font-size: clamp(20px, 6.4vw, 34px);
  }

  .holo-nameplate .name-space {
    width: clamp(3px, 0.8vw, 7px);
  }
}
/* Final publishing polish */
.legal-disclaimer {
  position: relative;
  margin: 22px auto 0;
  padding: 18px 20px;
  border: 1px solid rgba(253, 230, 138, 0.32);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(253, 230, 138, 0.12), rgba(103, 232, 249, 0.08)),
    rgba(3, 7, 18, 0.58);
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.04), 0 16px 46px rgba(0, 0, 0, 0.24);
  color: rgba(248, 250, 252, 0.9);
  overflow: hidden;
}

.legal-disclaimer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(253, 230, 138, 0.16), transparent);
  transform: translateX(-110%);
  animation: legal-sweep 6s ease-in-out infinite;
  pointer-events: none;
}

.legal-disclaimer strong {
  display: block;
  margin-bottom: 8px;
  color: #fde68a;
  font-family: var(--font-heading);
  font-size: clamp(17px, 2vw, 22px);
  text-shadow: 0 0 18px rgba(253, 230, 138, 0.32);
}

.legal-disclaimer p {
  margin: 0;
  color: rgba(226, 244, 255, 0.86);
  line-height: 2;
  font-size: 15px;
  font-weight: 700;
}

.contact-mail,
.top-links a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  font-weight: 900;
  letter-spacing: 0;
  color: #dffbff;
  border-color: rgba(103, 232, 249, 0.36);
  box-shadow: 0 0 24px rgba(103, 232, 249, 0.16);
}

@keyframes legal-sweep {
  0%, 46% { transform: translateX(-110%); opacity: 0.22; }
  58% { opacity: 0.75; }
  100% { transform: translateX(110%); opacity: 0.18; }
}
/* Hologram rotating awareness quotes */
.rotating-message.holo-quote-card {
  position: relative;
  isolation: isolate;
  width: min(840px, 96vw);
  min-height: 96px;
  margin: 10px auto 26px;
  padding: 16px clamp(18px, 4vw, 34px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "eyebrow eyebrow"
    "icon text";
  align-items: center;
  gap: 8px 14px;
  direction: rtl;
  font-family: var(--font-heading);
  color: #eaffff;
  border: 1px solid rgba(103, 232, 249, 0.42);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(10, 24, 46, 0.78), rgba(3, 7, 18, 0.58)),
    radial-gradient(circle at 18% 20%, rgba(103, 232, 249, 0.22), transparent 36%),
    radial-gradient(circle at 82% 80%, rgba(253, 230, 138, 0.16), transparent 34%);
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.045),
    0 18px 58px rgba(0, 0, 0, 0.32),
    0 0 34px rgba(103, 232, 249, 0.20);
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(145%);
  transform-style: preserve-3d;
}

.rotating-message.holo-quote-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 90deg, rgba(103, 232, 249, 0.08), rgba(103, 232, 249, 0.78), rgba(253, 230, 138, 0.66), rgba(167, 139, 250, 0.58), rgba(103, 232, 249, 0.08));
  animation: quote-border-spin 7s linear infinite;
}

.rotating-message.holo-quote-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 20px;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.18) 40%, transparent 54%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 8px);
  mix-blend-mode: screen;
  animation: quote-light-sweep 4.8s ease-in-out infinite;
}

.quote-eyebrow {
  grid-area: eyebrow;
  position: relative;
  z-index: 1;
  justify-self: center;
  padding: 4px 12px;
  border: 1px solid rgba(253, 230, 138, 0.26);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(253, 230, 138, 0.08);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
  text-shadow: 0 0 14px rgba(253, 230, 138, 0.24);
}

.quote-icon {
  grid-area: icon;
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(103, 232, 249, 0.10);
  border: 1px solid rgba(103, 232, 249, 0.28);
  box-shadow: 0 0 22px rgba(103, 232, 249, 0.18);
  font-size: 24px;
}

.quote-text {
  grid-area: text;
  position: relative;
  z-index: 1;
  display: block;
  text-align: right;
  font-family: "Alexandria", "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(18px, 2.75vw, 31px);
  font-weight: 900;
  line-height: 1.65;
  letter-spacing: 0;
  color: #f8feff;
  text-shadow: 0 0 18px rgba(103, 232, 249, 0.26), 0 0 28px rgba(253, 230, 138, 0.14);
}

.rotating-message.is-changing .quote-icon,
.rotating-message.is-changing .quote-text,
.rotating-message.is-changing .quote-eyebrow {
  animation: quote-exit 260ms ease forwards;
}

.rotating-message.is-entering .quote-icon,
.rotating-message.is-entering .quote-text,
.rotating-message.is-entering .quote-eyebrow {
  animation: quote-enter 620ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.rotating-message.is-entering .quote-text {
  animation-delay: 70ms;
}

@keyframes quote-border-spin {
  to { transform: rotate(360deg); }
}

@keyframes quote-light-sweep {
  0%, 44% { transform: translateX(-112%); opacity: 0.18; }
  58% { opacity: 0.72; }
  100% { transform: translateX(112%); opacity: 0.16; }
}

@keyframes quote-enter {
  0% { opacity: 0; transform: translateY(16px) rotateX(-12deg) scale(0.98); filter: blur(7px); }
  62% { opacity: 1; transform: translateY(-2px) rotateX(3deg) scale(1.01); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); }
}

@keyframes quote-exit {
  to { opacity: 0; transform: translateY(-12px) rotateX(10deg) scale(0.98); filter: blur(6px); }
}

@media (max-width: 620px) {
  .rotating-message.holo-quote-card {
    min-height: 108px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "icon"
      "text";
    justify-items: center;
    padding: 16px 14px;
  }

  .quote-text {
    text-align: center;
    font-size: clamp(17px, 5.2vw, 24px);
    line-height: 1.75;
  }
}