/* Local preview design pass. This file is intentionally separate so it can be removed easily. */
:root {
  --preview-ink: #07152f;
  --preview-muted: #52617d;
  --preview-soft: #eef5ff;
  --preview-accent: #1fc7ad;
  --preview-accent-dark: #0d8f7f;
}

body {
  background: #f7fbff;
}

html,
body,
#root {
  max-width: 100%;
  overflow-x: hidden;
}

#home {
  position: relative;
  min-height: auto;
  overflow: hidden;
  padding-top: 5.75rem;
  padding-bottom: 4.5rem;
  background:
    radial-gradient(circle at 86% 14%, rgba(31, 199, 173, 0.16), transparent 30rem),
    radial-gradient(circle at 12% 84%, rgba(72, 120, 255, 0.10), transparent 24rem),
    linear-gradient(135deg, #f8fcff 0%, #eef5ff 62%, #e7f7f5 100%);
}

#home::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(7, 21, 47, 0.18), transparent);
}

#home > .container {
  max-width: 1180px;
}

#home > .container > div {
  gap: 2.75rem;
}

#home .animated-section {
  animation: none;
  opacity: 1;
  transform: none;
}

#home h2 {
  margin-bottom: 0.85rem;
  color: var(--preview-accent-dark);
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: 0;
}

#home h1 {
  margin-bottom: 0.85rem;
  color: var(--preview-ink);
  font-size: clamp(2.55rem, 7vw, 4.8rem);
  line-height: 0.98;
}

#home h3 {
  max-width: 760px;
  margin-bottom: 1.2rem;
  color: #415070;
  font-size: clamp(1.45rem, 4vw, 2.55rem);
  line-height: 1.12;
}

#home p:not(.hero-specialty) {
  max-width: 690px;
  margin-bottom: 2rem;
  color: var(--preview-muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.72;
}

#home .hero-specialty {
  max-width: 660px;
  margin-bottom: 1.25rem;
  color: var(--preview-accent-dark);
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  font-weight: 750;
  line-height: 1.45;
}

#home button {
  min-height: 3.25rem;
  border-radius: 0.65rem;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(7, 21, 47, 0.10);
}

#home button:first-child {
  background: #23e0bd;
  color: #061429;
}

#home button:first-child:hover {
  background: #1fc7ad;
}

#home button:nth-child(2) {
  border-color: rgba(13, 143, 127, 0.58);
  background: rgba(255, 255, 255, 0.78);
  color: var(--preview-ink);
}

#home img {
  object-position: center 28%;
}

#home img[alt="Simoun Asmar - Data Analyst"] {
  transform: scale(1.04);
}

#home img[alt="Simoun Asmar - Data Analyst"] {
  filter: saturate(1.04) contrast(1.03);
}

#home img[alt="Simoun Asmar - Data Analyst"]::after {
  display: none;
}

#home .rounded-full {
  border-color: #23e0bd;
  box-shadow:
    0 28px 60px rgba(7, 21, 47, 0.22),
    0 0 0 12px rgba(255, 255, 255, 0.62);
}

header,
.fixed.top-0 {
  background: rgba(248, 252, 255, 0.86);
  border-bottom: 1px solid rgba(7, 21, 47, 0.08);
  backdrop-filter: blur(16px);
}

header a,
.fixed.top-0 a {
  color: var(--preview-ink);
}

.text-slate {
  color: #52617d;
}

.text-navy {
  color: var(--preview-ink);
}

.text-teal {
  color: var(--preview-accent-dark);
}

.bg-teal {
  background-color: #23e0bd;
}

.border-teal {
  border-color: #23e0bd;
}

#portfolio .h-48 {
  background: #f4f8fb;
}

#portfolio .h-48 img {
  object-fit: contain;
  padding: 0.75rem;
}

#contact form {
  display: none;
}

#contact .grid {
  display: block;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

#contact .grid > div:first-child {
  display: none;
}

#contact .grid > div:last-child > div {
  min-height: auto;
}

#contact a[href^="tel:"],
#contact .flex.items-start:has(a[href^="tel:"]) {
  display: none;
}

#certifications a[href="/Simoun_Asmar_EN.pdf"],
#certifications .mt-12:has(a[href="/Simoun_Asmar_EN.pdf"]) {
  display: none;
}

@media (min-width: 680px) {
  #home > .container > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  }

  #home .order-first {
    order: 9999;
    margin-top: 0;
  }
}

@media (max-width: 679px) {
  #home {
    padding-top: 4.65rem;
    padding-bottom: 3rem;
  }

  #home .order-first {
    margin-top: 0;
  }

  #home .rounded-full {
    width: min(58vw, 14.5rem);
    height: min(58vw, 14.5rem);
    box-shadow:
      0 20px 44px rgba(7, 21, 47, 0.20),
      0 0 0 8px rgba(255, 255, 255, 0.64);
  }

  #home > .container > div {
    gap: 2rem;
  }

  #home h1 {
    font-size: clamp(2rem, 13vw, 2.45rem);
    line-height: 1.02;
  }

  #home h3 {
    font-size: clamp(1.3rem, 8vw, 1.75rem);
    line-height: 1.16;
  }

  #home p:not(.hero-specialty) {
    display: -webkit-box;
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  #home .hero-specialty {
    max-width: 20rem;
    margin-bottom: 1.15rem;
    font-size: 1.02rem;
    line-height: 1.42;
  }

  #home button {
    width: 100%;
    min-height: 3rem;
  }
}