/* ----------------- HERO ----------------- */

.hero {

  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  padding-top: 10rem;

  padding-bottom: 5rem;

  overflow: hidden;

}

/* ----------------- HERO CONTENT ----------------- */

.hero__content {

  position: relative;

  max-width: 1100px;

  z-index: 2;

}

/* ----------------- SECTION TAG ----------------- */

.section-tag {

  display: inline-block;

  margin-bottom: 2rem;

  color: var(--color-gold);

  font-size: 0.72rem;

  letter-spacing: 0.3em;

  text-transform: uppercase;

}

/* ----------------- HERO TITLE ----------------- */

.hero__title {

  font-size:
    clamp(3.8rem, 7vw, 6.5rem);

  line-height: 0.98;

  letter-spacing: -0.03em;

  margin-bottom: 2rem;

  text-wrap: balance;
  
}

.hero__title em {

  font-style: italic;

  color: var(--color-gold-light);

  font-weight: 500;

}

/* ----------------- GOLD LINE ----------------- */

.gold-line {

  width: 120px;

  height: 1px;

  margin-bottom: 2rem;

  background:
    linear-gradient(
      90deg,
      var(--color-gold),
      transparent
    );

}

/* ----------------- HERO DESCRIPTION ----------------- */

.hero__description {

  max-width: 980px;

  font-size: 1.02rem;

  line-height: 2.1;

  color: var(--color-gray-light);

}

/* ----------------- AMBIENT LIGHT ----------------- */

.hero::before {

  content: '';

  position: absolute;

  top: -18%;

  left: -12%;

  width: 820px;

  height: 820px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(201,168,76,0.055) 0%,
      rgba(201,168,76,0.02) 35%,
      transparent 72%
    );

  filter: blur(90px);

  pointer-events: none;

}

.hero::after {

  content: '';

  position: absolute;

  bottom: -25%;

  right: -12%;

  width: 720px;

  height: 720px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(30,51,80,0.30) 0%,
      transparent 72%
    );

  filter: blur(100px);

  pointer-events: none;

}

/* ----------------- SECTION TITLES ----------------- */

.section-title {

  font-size:
    clamp(2.6rem, 5vw, 4.5rem);

  line-height: 1.02;

  letter-spacing: -0.025em;

  margin-bottom: 1.8rem;

}

.section-title em {

  font-style: italic;

  color: var(--color-gold-light);

}

/* ----------------- LEAD ----------------- */

.lead {

  max-width: 62ch;

  line-height: 1.9;

}



/* ----------------- ABOUT ----------------- */

.about-grid {

  display: grid;

  grid-template-columns: 1.35fr 0.65fr;

  gap: 5rem;

  align-items: start;

  margin-top: 5rem;

}

.about-content {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}

.about-card h3 {

  margin-bottom: 1rem;

  font-size: 1.8rem;

}

/* ----------------- SOLUTIONS ----------------- */

.solutions-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2.5rem;

  margin-top: 5rem;

}

.solution-card {

  min-height: 420px;

  display: flex;

  flex-direction: column;

}

.solution-number {

  display: inline-block;

  margin-bottom: 2rem;

  color: var(--color-gold);

  font-size: 0.8rem;

  letter-spacing: 0.22em;

}

.solution-card h3 {

  margin-bottom: 1.5rem;

  font-size: 2rem;

}

.solution-card p {

  margin-bottom: auto;

  line-height: 1.9;

}


.solution-link {

  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 0.8rem;

  margin-top: 3rem;

  color: var(--color-gold-light);

  font-size: 0.72rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  transition: var(--transition-default);

}

.solution-link::after {

  content: '→';

  transition: transform 300ms ease;

}

.solution-link:hover::after {

  transform: translateX(4px);

}


/* ----------------- DIFFERENTIALS ----------------- */

.differentials-grid {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 6rem;

  align-items: start;

}

.differentials-list {

  display: flex;

  flex-direction: column;

  gap: 3rem;

  margin-top: 4rem;

}

.differential-item {

  display: flex;

  gap: 2rem;

}

.differential-item span {

  color: var(--color-gold);

  font-size: 0.8rem;

  letter-spacing: 0.2em;

}

.differential-item h3 {

  margin-bottom: 1rem;

  font-size: 1.5rem;

}

.differentials-quote {

  padding: 4rem;

  border:
    var(--border-gold-soft);

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

}

.differentials-quote blockquote {

  font-family: var(--font-heading);

  font-size:
    clamp(2rem, 4vw, 3rem);

  line-height: 1.2;

  margin-bottom: 2rem;

}

.differentials-quote cite {

  color: var(--color-gold);

  font-style: normal;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  font-size: 0.72rem;

}

/* ----------------- CONTACT ----------------- */

.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: start;

}

.contact-form {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}

.contact-form input,
.contact-form textarea {

  width: 100%;

  padding: 1rem 1.2rem;

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

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

  color: var(--color-white);

  font-family: inherit;

  font-size: 0.95rem;

}

.contact-form textarea {

  min-height: 220px;

  resize: vertical;

}

.contact-form input:focus,
.contact-form textarea:focus {

  outline: none;

  border-color:
    rgba(201,168,76,0.35);

}

/* ----------------- HERO ACTIONS ----------------- */

.hero__actions {

  display: flex;

  flex-wrap: wrap;

  gap: 1.2rem;

  margin-top: 3.5rem;

}


/* ----------------- VISION ACTIONS ----------------- */

.vision__actions {

  display: flex;

  flex-wrap: wrap;

  gap: 1.2rem;

  margin-top: 3.5rem;

}