/* ============================================================
   SECTION 5 — contact.css
   Premium full-section enquiry form
   Split layout: tagline left | glass form card right
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════════════════════════ */
.contact-section {
  position  : relative;
  background: #05050e;
  padding   : 110px 0 130px;
  overflow  : hidden;
}

/* Ambient purple — top-right glow */
.contact-section::before {
  content      : '';
  position     : absolute;
  top          : -10%;
  right        : -8%;
  width        : 600px;
  height       : 550px;
  background   : radial-gradient(
    ellipse at center,
    rgba(90, 28, 210, 0.28) 0%,
    rgba(55, 14, 140, 0.12) 48%,
    transparent 75%
  );
  border-radius: 50%;
  filter       : blur(80px);
  pointer-events: none;
}

/* Secondary glow — bottom left */
.contact-section::after {
  content      : '';
  position     : absolute;
  bottom       : -8%;
  left         : -5%;
  width        : 400px;
  height       : 380px;
  background   : radial-gradient(
    ellipse at center,
    rgba(60, 15, 160, 0.20) 0%,
    transparent 70%
  );
  border-radius: 50%;
  filter       : blur(60px);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   SECTION CTA HEADER — centered above the form
══════════════════════════════════════════════════════════ */
.contact-section-header {
  position     : relative;
  z-index      : 1;
  text-align   : center;
  max-width    : 680px;
  margin       : 0 auto 64px;
  padding      : 0 40px;

  opacity  : 0;
  transform: translateY(18px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.contact-section-header.visible { opacity: 1; transform: translateY(0); }

.contact-section-eyebrow {
  display       : inline-block;
  font-family   : 'Inter', sans-serif;
  font-size     : 0.70rem;
  font-weight   : 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color         : rgba(167,139,250,0.80);
  background    : rgba(124,58,237,0.10);
  border        : 1px solid rgba(124,58,237,0.22);
  border-radius : 999px;
  padding       : 5px 16px;
  margin-bottom : 20px;
}

.contact-section-title {
  font-family   : 'Inter', sans-serif;
  font-size     : clamp(2rem, 5vw, 3.6rem);
  font-weight   : 800;
  letter-spacing: -0.03em;
  line-height   : 1.10;
  color         : #ffffff;
  margin        : 0 0 18px;
}

.contact-section-desc {
  font-family  : 'Inter', sans-serif;
  font-size    : 0.95rem;
  font-weight  : 400;
  color        : rgba(255,255,255,0.40);
  line-height  : 1.65;
  max-width    : 520px;
  margin       : 0 auto;
}

/* ══════════════════════════════════════════════════════════
   INNER CONTAINER
══════════════════════════════════════════════════════════ */
.contact-container {
  position     : relative;
  z-index      : 1;
  max-width    : 1100px;
  margin       : 0 auto;
  padding      : 0 40px;
  display      : grid;
  grid-template-columns: 1fr 1fr;
  gap          : 72px;
  align-items  : center;
}

/* ══════════════════════════════════════════════════════════
   LEFT — tagline + trust points
══════════════════════════════════════════════════════════ */
.contact-left {
  opacity  : 0;
  transform: translateX(-20px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.contact-left.visible { opacity: 1; transform: translateX(0); }

.contact-eyebrow {
  font-family   : 'Inter', sans-serif;
  font-size     : 0.72rem;
  font-weight   : 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color         : rgba(160,120,255,0.85);
  margin-bottom : 16px;
}

.contact-heading {
  font-family   : 'Inter', sans-serif;
  font-size     : clamp(2.2rem, 4vw, 3.4rem);
  font-weight   : 800;
  letter-spacing: -0.03em;
  line-height   : 1.10;
  color         : #ffffff;
  margin        : 0 0 20px;
}

/* Gradient accent on last word */
.contact-heading .accent {
  background         : linear-gradient(135deg, #a78bfa 0%, #7c3aed 60%);
  -webkit-background-clip: text;
  background-clip    : text;
  -webkit-text-fill-color: transparent;
}

.contact-subtext {
  font-family  : 'Inter', sans-serif;
  font-size    : 0.95rem;
  font-weight  : 400;
  color        : rgba(255,255,255,0.40);
  line-height  : 1.65;
  margin-bottom: 44px;
  max-width    : 380px;
}

/* Trust list */
.contact-trust-list {
  list-style: none;
  margin    : 0;
  padding   : 0;
  display   : flex;
  flex-direction: column;
  gap       : 18px;
}

.contact-trust-item {
  display    : flex;
  align-items: center;
  gap        : 14px;
  font-family: 'Inter', sans-serif;
  font-size  : 0.875rem;
  font-weight: 400;
  color      : rgba(255,255,255,0.60);
  line-height: 1.4;
}

.contact-trust-icon {
  width          : 30px;
  height         : 30px;
  border-radius  : 8px;
  background     : rgba(124,58,237,0.14);
  border         : 1px solid rgba(124,58,237,0.28);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 0.8rem;
  color          : rgba(167,139,250,0.90);
  flex-shrink    : 0;
}

/* ══════════════════════════════════════════════════════════
   RIGHT — glass form card
══════════════════════════════════════════════════════════ */
.contact-right {
  opacity  : 0;
  transform: translateX(20px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.12s,
              transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.12s;
}
.contact-right.visible { opacity: 1; transform: translateX(0); }

.contact-card {
  background      : rgba(12, 10, 28, 0.80);
  border          : 1px solid rgba(255,255,255,0.08);
  border-radius   : 20px;
  padding         : 40px 36px 38px;
  box-shadow      : 0 0 0 1px rgba(130,80,255,0.06),
                    0 24px 64px rgba(0,0,0,0.50),
                    0 0 60px rgba(90,30,200,0.06);
  position        : relative;
  overflow        : hidden;
}

/* Inner top glow */
.contact-card::before {
  content       : '';
  position      : absolute;
  top           : 0; left: 0; right: 0;
  height        : 140px;
  background    : radial-gradient(ellipse at 50% -10%, rgba(120,60,255,0.10) 0%, transparent 70%);
  border-radius : 20px 20px 0 0;
  pointer-events: none;
}

/* Card header */
.contact-card-header {
  margin-bottom: 28px;
}
.contact-card-title {
  font-family   : 'Inter', sans-serif;
  font-size     : 1.25rem;
  font-weight   : 700;
  letter-spacing: -0.02em;
  color         : #ffffff;
  margin        : 0 0 6px;
}
.contact-card-sub {
  font-family: 'Inter', sans-serif;
  font-size  : 0.82rem;
  color      : rgba(255,255,255,0.35);
  line-height: 1.5;
}

/* Divider */
.contact-card-divider {
  height    : 1px;
  background: rgba(255,255,255,0.07);
  margin    : 0 0 26px;
}

/* ── Form grid — same as modal ── */
.contact-form-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 14px;
  margin-bottom        : 14px;
}
.contact-field-full { grid-column: 1 / -1; }

.contact-field {
  display       : flex;
  flex-direction: column;
  gap           : 7px;
}

.contact-label {
  font-family   : 'Inter', sans-serif;
  font-size     : 0.73rem;
  font-weight   : 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.36);
}

/* Inputs & selects — same glass style as modal */
.contact-input,
.contact-select {
  font-family  : 'Inter', sans-serif;
  font-size    : 0.90rem;
  color        : #ffffff;
  background   : rgba(255,255,255,0.04);
  border       : 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding      : 11px 14px;
  width        : 100%;
  outline      : none;
  -webkit-appearance: none;
  appearance   : none;
  transition   : border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.contact-input::placeholder { color: rgba(255,255,255,0.20); }
.contact-input:focus,
.contact-select:focus {
  border-color: rgba(130,80,255,0.55);
  background  : rgba(130,80,255,0.05);
  box-shadow  : 0 0 0 3px rgba(130,80,255,0.12);
}

/* Custom select arrow */
.contact-select-wrap { position: relative; }
.contact-select-wrap::after {
  content       : '';
  position      : absolute;
  right         : 13px;
  top           : 50%;
  transform     : translateY(-50%);
  width         : 0; height: 0;
  border-left   : 4px solid transparent;
  border-right  : 4px solid transparent;
  border-top    : 5px solid rgba(255,255,255,0.32);
  pointer-events: none;
  transition    : border-color 0.2s ease;
}
.contact-select-wrap:focus-within::after {
  border-top-color: rgba(130,80,255,0.80);
}
.contact-select { cursor: pointer; padding-right: 36px; }
.contact-select option { background: #0e0c22; color: #fff; }

/* Submit button */
.contact-submit-wrap { margin-top: 22px; }
.contact-submit {
  width          : 100%;
  padding        : 13px 24px;
  background     : linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  border         : none;
  border-radius  : 12px;
  color          : #ffffff;
  font-family    : 'Inter', sans-serif;
  font-size      : 0.94rem;
  font-weight    : 700;
  letter-spacing : -0.01em;
  cursor         : pointer;
  position       : relative;
  overflow       : hidden;
  transition     : transform 0.28s cubic-bezier(0.16,1,0.3,1),
                   box-shadow 0.28s ease, filter 0.28s ease;
  box-shadow     : 0 4px 24px rgba(124,58,237,0.35),
                   0 1px 0 rgba(255,255,255,0.12) inset;
}
.contact-submit::before {
  content      : '';
  position     : absolute;
  inset        : 0;
  background   : linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  border-radius: 12px;
  pointer-events: none;
}
.contact-submit:hover {
  transform : translateY(-2px);
  box-shadow: 0 8px 36px rgba(124,58,237,0.48), 0 1px 0 rgba(255,255,255,0.12) inset;
  filter    : brightness(1.08);
}
.contact-submit:active { transform: translateY(0); }

.contact-privacy {
  font-family: 'Inter', sans-serif;
  font-size  : 0.72rem;
  color      : rgba(255,255,255,0.20);
  text-align : center;
  margin-top : 12px;
  line-height: 1.5;
}

/* Success state */
.contact-success {
  display       : none;
  flex-direction: column;
  align-items   : center;
  text-align    : center;
  padding       : 32px 0 16px;
  gap           : 10px;
}
.contact-success.show { display: flex; }
.contact-success-icon {
  width          : 56px;
  height         : 56px;
  border-radius  : 50%;
  background     : linear-gradient(135deg,rgba(124,58,237,0.22),rgba(91,33,182,0.12));
  border         : 1px solid rgba(124,58,237,0.30);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 1.5rem;
  margin-bottom  : 4px;
}
.contact-success-title {
  font-family   : 'Inter', sans-serif;
  font-size     : 1.2rem;
  font-weight   : 800;
  color         : #ffffff;
  letter-spacing: -0.02em;
}
.contact-success-msg {
  font-family: 'Inter', sans-serif;
  font-size  : 0.85rem;
  color      : rgba(255,255,255,0.38);
  line-height: 1.6;
  max-width  : 280px;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .contact-section-header  { margin-bottom: 44px; padding: 0 20px; }
  .contact-section-title   { font-size: clamp(1.75rem, 7vw, 2.8rem); }
}
@media (max-width: 480px) {
  .contact-section-header  { margin-bottom: 32px; padding: 0 16px; }
  .contact-section-title   { font-size: clamp(1.5rem, 8vw, 2.2rem); }
  .contact-section-desc    { font-size: 0.875rem; }
}

@media (max-width: 900px) {
  .contact-container        { gap: 52px; padding: 0 28px; }
  .contact-card             { padding: 32px 28px 30px; }
  .contact-heading          { font-size: clamp(1.9rem, 5vw, 2.8rem); }
}

/* Stack on tablet */
@media (max-width: 760px) {
  .contact-section          { padding: 80px 0 100px; }
  .contact-container        { grid-template-columns: 1fr; gap: 40px; }
  .contact-left             { text-align: center; }
  .contact-subtext          { max-width: 100%; margin-left: auto; margin-right: auto; }
  .contact-trust-list       { align-items: flex-start; max-width: 340px; margin: 0 auto; }
  .contact-form-grid        { grid-template-columns: 1fr; }
  .contact-field-full       { grid-column: 1; }
  .contact-left             { transform: translateY(-16px) !important; }
}

/* Mobile */
@media (max-width: 480px) {
  .contact-section          { padding: 64px 0 80px; }
  .contact-container        { padding: 0 16px; gap: 32px; }
  .contact-card             { padding: 26px 18px 26px; border-radius: 16px; }
  .contact-heading          { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .contact-subtext          { font-size: 0.88rem; margin-bottom: 28px; }
  .contact-trust-item       { font-size: 0.82rem; }
  .contact-submit           { padding: 12px 20px; font-size: 0.88rem; }
}

@media (max-width: 360px) {
  .contact-card             { padding: 22px 14px 22px; }
  .contact-heading          { font-size: 1.6rem; }
}