* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.ambient {

  position: fixed;

  border-radius: 50%;

  filter: blur(120px);

  opacity: 0.18;

  pointer-events: none;

  z-index: -1;

  animation:
    floatGlow 18s ease-in-out infinite;
}

.ambient-1 {

  width: 500px;
  height: 500px;

  background: #3d78aa;

  top: -120px;
  left: -120px;
}

.ambient-2 {

  width: 420px;
  height: 420px;

  background: #274766;

  bottom: -120px;
  right: -100px;

  animation-delay: 6s;
}

@keyframes floatGlow {

  0% {
    transform:
      translateY(0px)
      translateX(0px);
  }

  50% {
    transform:
      translateY(-30px)
      translateX(20px);
  }

  100% {
    transform:
      translateY(0px)
      translateX(0px);
  }
}

body {

  min-height: 100vh;

 background:
  radial-gradient(
    circle at top,
    #234a70 0%,
    #102235 45%,
    #050b12 100%
  );

  color: white;
  scroll-behavior: smooth;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}
.topbar {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 22px 50px;

  z-index: 1000;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.28),
      transparent
    );
}

.logo img {

  height: 112px;

  width: auto;

  object-fit: contain;
}

nav {

  display: flex;

  gap: 28px;
}

nav a {

  color: rgba(255,255,255,0.82);

  text-decoration: none;

  font-size: 0.95rem;

  letter-spacing: 0.5px;

  transition:
    color 180ms ease,
    opacity 180ms ease;
}

nav a:hover {

  color: white;

  opacity: 1;
}
.hero {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 40px;
}

.hero-content {
  max-width: 900px;
}

h1 {

  font-family: 'Cormorant Garamond', serif;

  font-size: 6rem;

  margin-bottom: 20px;
  text-shadow:
  0 0 18px rgba(255,255,255,0.08);
}

.tagline {

  font-size: 1.5rem;

  opacity: 0.85;

  margin-bottom: 40px;
}

.hero-subtext {

  max-width: 760px;

  margin:
    0 auto 50px;

  font-size: 1.08rem;

  line-height: 2;

  opacity: 0.76;
}

.hero-buttons {

  display: flex;

  gap: 20px;

  justify-content: center;
}

button {

  padding: 14px 30px;

  border: none;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #356b99,
      #234a70
    );

  color: white;

  cursor: pointer;

  font-size: 1rem;

  font-weight: 500;

  letter-spacing: 0.4px;

  transition:
    transform 180ms ease,
    background 220ms ease,
    box-shadow 220ms ease;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.28);
}

button.secondary {

  background: transparent;

  border: 1px solid rgba(255,255,255,0.3);
}

button:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 18px 34px rgba(0,0,0,0.34);
}
.framework-section {

  padding:
    120px 40px;
}

.framework-section h2 {

  text-align: center;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 3.5rem;

  margin-bottom: 70px;
}

.framework {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(240px, 1fr));

  gap: 30px;

  max-width: 1400px;

  margin: auto;
}

.card {

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.12);

  border-radius: 28px;

  padding: 50px 35px;

  backdrop-filter:
    blur(14px);

  transition:
    transform 220ms ease,
    background 220ms ease,
    border 220ms ease;

  box-shadow:
    0 20px 40px rgba(0,0,0,0.22);
}

.card:hover {

  transform:
    translateY(-8px);

  background:
    rgba(255,255,255,0.09);

  border:
    1px solid rgba(255,255,255,0.2);
}

.card h3 {

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 2rem;

  margin-bottom: 18px;
}

.card p {

  line-height: 1.8;

  opacity: 0.82;
}
.about-section {

  padding:
    140px 40px;
}

.about-container {

  max-width: 1100px;

  margin: auto;
}

.about-text {

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.10);

  border-radius: 34px;

  padding:
    70px;

  backdrop-filter:
    blur(16px);

  box-shadow:
    0 24px 50px rgba(0,0,0,0.25);
}

.about-text h2 {

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 4rem;

  margin-bottom: 35px;
}

.about-text p {

  font-size: 1.15rem;

  line-height: 2;

  opacity: 0.88;

  margin-bottom: 28px;

  max-width: 850px;
}
.fade-up {

  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity 700ms ease,
    transform 700ms ease;
}

.fade-up.visible {

  opacity: 1;

  transform:
    translateY(0);
}

.contact-section {

  padding:
    120px 40px 180px;
}

.contact-card {

  max-width: 900px;

  margin: auto;

  text-align: center;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.12);

  border-radius: 36px;

  padding:
    80px 50px;

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 25px 50px rgba(0,0,0,0.28);
}

.contact-card h2 {

  font-family:
    'Cormorant Garamond',
    serif;

  font-size: 4rem;

  margin-bottom: 24px;
}

.contact-card p {

  font-size: 1.2rem;

  opacity: 0.84;

  margin-bottom: 40px;
}

footer {

  text-align: center;

  padding:
    40px;

  opacity: 0.45;

  font-size: 0.9rem;

  letter-spacing: 1px;
}

@media (max-width: 768px) {

  h1 {
    font-size: 4rem;
  }

  .framework-section h2,
  .about-text h2,
  .contact-card h2 {

    font-size: 2.7rem;
  }

  .hero-buttons {

    flex-direction: column;
  }

  .topbar {

    padding: 20px;
  }

  nav {

    gap: 18px;
  }

  .about-text,
  .contact-card {

    padding: 45px 30px;
  }
}
.cta-button {

  display: inline-block;

  padding:
    16px 34px;

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      #356b99,
      #234a70
    );

  color: white;

  text-decoration: none;

  font-weight: 500;

  letter-spacing: 0.4px;

  transition:
    transform 180ms ease,
    box-shadow 220ms ease;

  box-shadow:
    0 12px 26px rgba(0,0,0,0.28);
}

.cta-button:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 18px 34px rgba(0,0,0,0.34);
}