/* ======================================================
   CONTACT PAGE
====================================================== */

:root {
  --ct-surface: rgba(255, 255, 255, .07);
  --ct-surface-strong: rgba(255, 255, 255, .11);
  --ct-line: rgba(255, 255, 255, .2);
  --ct-radius: 24px;
}

#ct-hero {
  min-height: 72vh;
  position: relative;
  display: flex;
  align-items: center;
}

.ct-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(165deg, rgba(6, 18, 56, .58), rgba(6, 18, 56, .82)),
    radial-gradient(circle at 18% 24%, rgba(255, 224, 64, .18), transparent 52%),
    radial-gradient(circle at 80% 74%, rgba(74, 223, 255, .14), transparent 56%),
    url("images/Background.webp") center top / cover no-repeat;
}

#ct-hero #clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ct-hero-inner {
  position: relative;
  z-index: 4;
  min-height: 72vh;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 86px 20px 64px;
}

.ct-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: min(100%, 560px);
  background: rgba(255, 224, 64, .16);
  border: 1px solid rgba(255, 224, 64, .34);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffe040;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  backdrop-filter: blur(4px);
  margin-bottom: 18px;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ct-title {
  font-family: var(--font-title);
  font-size: clamp(34px, 6.4vw, 64px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  margin-bottom: 14px;
}

.ct-sub {
  max-width: 700px;
  font-family: var(--font-body);
  font-size: clamp(15px, 2.1vw, 20px);
  color: rgba(255, 255, 255, .84);
  margin: 0 0 28px;
}

#ct-actions,
#ct-faq,
#ct-social {
  position: relative;
  overflow: hidden;
  background: #0f1b39;
}

#ct-faq {
  background: #122247;
}

#ct-actions::before,
#ct-faq::before,
#ct-social::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#ct-actions::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 224, 64, .12), transparent 50%),
    radial-gradient(circle at 76% 74%, rgba(74, 223, 255, .10), transparent 52%);
}

#ct-faq::before {
  background:
    radial-gradient(circle at 15% 32%, rgba(213, 128, 255, .12), transparent 54%),
    radial-gradient(circle at 82% 60%, rgba(255, 224, 64, .08), transparent 58%);
}

#ct-social::before {
  background:
    radial-gradient(circle at 78% 26%, rgba(125, 218, 62, .11), transparent 52%),
    radial-gradient(circle at 22% 72%, rgba(255, 75, 168, .10), transparent 54%);
}

.ct-grid,
.ct-faq-wrap,
.ct-social-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 66px 20px;
}

.ct-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ct-card {
  background: linear-gradient(165deg, var(--ct-surface-strong), var(--ct-surface));
  border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius);
  padding: 26px 22px;
  box-shadow: 0 12px 28px rgba(3, 8, 26, .32);
  transition: transform var(--dur-mid) var(--ease-bounce), border-color var(--dur-mid) ease, box-shadow var(--dur-mid) ease;
}

.ct-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 224, 64, .42);
  box-shadow: 0 18px 36px rgba(3, 8, 26, .45);
}

.ct-card h2 {
  font-family: var(--font-title);
  font-size: clamp(20px, 3.1vw, 28px);
  color: #ffe040;
  margin-bottom: 10px;
}

.ct-card p {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, .82);
  line-height: 1.6;
  margin-bottom: 18px;
}

.ct-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .7px;
  color: #081a37;
  background: linear-gradient(135deg, #4adfff, #9ff0ff);
  box-shadow: 0 4px 0 #197d95, 0 10px 22px rgba(74, 223, 255, .24);
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) ease, filter var(--dur-fast) ease;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ct-card a:hover {
  transform: translateY(-3px);
  filter: brightness(1.07);
  box-shadow: 0 6px 0 #197d95, 0 14px 28px rgba(74, 223, 255, .34);
}

.ct-section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  color: #fff;
  line-height: 1.03;
  letter-spacing: 2px;
  -webkit-text-stroke: 2.5px rgba(0, 0, 0, .45);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .38);
  text-align: center;
  margin-bottom: 26px;
}

.ct-faq-item {
  background: linear-gradient(165deg, var(--ct-surface-strong), var(--ct-surface));
  border: 1px solid var(--ct-line);
  border-radius: 16px;
  padding: 0 16px;
  margin-bottom: 12px;
}

.ct-faq-item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800;
  color: #ffe040;
  padding: 16px 32px 16px 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ct-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 224, 64, .18);
  color: #ffe040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease;
}

.ct-faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background: rgba(255, 224, 64, .28);
}

.ct-faq-item summary::-webkit-details-marker {
  display: none;
}

.ct-faq-item p {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, .84);
  line-height: 1.6;
  padding: 0 0 16px;
}

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

.ct-social-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  transition: transform var(--dur-fast) var(--ease-bounce), border-color var(--dur-fast) ease, background var(--dur-fast) ease;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ct-social-link:hover {
  transform: translateY(-3px);
}

.ct-social-link:nth-child(1):hover {
  background: rgba(255, 0, 0, .2);
  border-color: rgba(255, 0, 0, .45);
}

.ct-social-link:nth-child(2):hover {
  background: rgba(29, 185, 84, .2);
  border-color: rgba(29, 185, 84, .45);
}

.ct-social-link:nth-child(3):hover {
  background: rgba(220, 39, 67, .2);
  border-color: rgba(220, 39, 67, .45);
}

.ct-social-link:nth-child(4):hover {
  background: rgba(105, 201, 208, .2);
  border-color: rgba(105, 201, 208, .45);
}

@media (max-width: 992px) {
  .ct-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .ct-hero-inner {
    min-height: 66vh;
    padding-top: 76px;
  }

  .ct-grid {
    grid-template-columns: 1fr;
  }

  .ct-social-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ── content-visibility: skip rendering off-screen contact sections ── */
#ct-actions,
#ct-faq,
#ct-social {
  content-visibility: auto;
  contain-intrinsic-size: 0 60vh;
}