/* ============================================================
   CTA banner · Contact section
============================================================ */

/* ============================================================
   CTA
============================================================ */
    #cta-banner {
      background: linear-gradient(100deg, var(--blue) 0%, var(--cyan) 100%);
      position: relative;
      overflow: hidden;
    }

#cta-banner::after {
      content: '';
      position: absolute;
      right: -100px;
      top: 50%;
      transform: translateY(-50%);
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
    }

.cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px
    }

.cta-inner h2 {
      color: #fff;
      font-size: clamp(24px, 3vw, 38px)
    }

.cta-inner p {
      color: rgba(255, 255, 255, 0.75);
      font-size: 15px;
      margin-top: 8px
    }

.cta-btns {
      display: flex;
      gap: 12px;
      flex-shrink: 0
    }

/* ============================================================
       CONTACT — Premium dark hero with glass form
    ============================================================ */
    #contact {
      background: var(--grad-hero);
      position: relative;
      overflow: hidden;
    }

/* Atmospheric orbs (decorative) */
    #contact::before,
    #contact::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
    }

#contact::before {
      width: 500px; height: 500px;
      background: rgba(37, 99, 235, 0.18);
      top: -150px; right: -100px;
    }

#contact::after {
      width: 350px; height: 350px;
      background: rgba(8, 145, 178, 0.14);
      bottom: -80px; left: -80px;
    }

#contact .container {
      position: relative;
      z-index: 1;
    }

.cont-layout {
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: 56px;
      align-items: start;
    }

.cont-left h2 {
      color: #fff;
      margin: 16px 0;
    }

.cont-left p {
      color: rgba(255, 255, 255, 0.70);
      font-size: 16px;
      line-height: 1.75;
      margin-bottom: 32px;
    }

.cont-infos {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

/* Contact card — glass with proper alignment */
    .cinfo {
      display: flex;
      align-items: center;
      gap: 16px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      padding: 18px 20px;
      transition: background var(--t), border-color var(--t), transform var(--t);
      text-decoration: none;
    }

.cinfo:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.22);
      transform: translateX(4px);
    }

.cinfo-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: rgba(245, 158, 11, 0.20);
      border: 1px solid rgba(245, 158, 11, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--amber);
      font-size: 17px;
      flex-shrink: 0;
    }

.cinfo-text {
      flex: 1;
      min-width: 0;
    }

.cinfo h4 {
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 3px;
      font-family: 'Sora', sans-serif;
      letter-spacing: -0.01em;
    }

.cinfo p {
      color: rgba(255, 255, 255, 0.65);
      font-size: 13px;
      margin: 0;
      line-height: 1.5;
    }

.cinfo-arrow {
      color: rgba(255, 255, 255, 0.35);
      font-size: 13px;
      flex-shrink: 0;
      transition: transform var(--t), color var(--t);
    }

.cinfo:hover .cinfo-arrow {
      transform: translateX(4px);
      color: var(--amber);
    }

/* Inline socials row */
    .cont-socials {
      display: flex;
      gap: 10px;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.10);
    }

.cont-soc {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      transition: var(--t);
      text-decoration: none;
      font-size: 14px;
    }

.cont-soc:hover {
      background: var(--amber);
      border-color: var(--amber);
      transform: translateY(-3px);
    }

/* === Form card (white, premium) === */
    .cont-form {
      background: #fff;
      border-radius: 24px;
      padding: 36px;
      box-shadow: 0 20px 60px rgba(4, 13, 31, 0.40);
      position: relative;
    }

.cont-form-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 8px;
    }

.cont-form-head-icon {
      width: 44px; height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px;
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.30);
      flex-shrink: 0;
    }

.cont-form h3 {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.02em;
      font-family: 'Sora', sans-serif;
      color: var(--gray-900);
      margin: 0;
    }

.cont-form>p {
      font-size: 14px;
      color: var(--gray-500);
      margin-top: 4px;
      margin-bottom: 26px;
      line-height: 1.6;
    }

.cont-form .fg { margin-bottom: 14px; }

.cont-form .fl {
      font-size: 11px;
      font-weight: 800;
      color: var(--blue);
      letter-spacing: 0.07em;
      text-transform: uppercase;
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      gap: 7px;
      font-family: 'Sora', sans-serif;
    }

.cont-form .fl i {
      width: 18px; height: 18px;
      display: inline-flex;
      align-items: center; justify-content: center;
      background: var(--blue-pale);
      border-radius: 5px;
      font-size: 9px;
    }

.cont-form .fi {
      width: 100%;
      background: var(--gray-50);
      border: 1.5px solid var(--gray-200);
      border-radius: 12px;
      padding: 13px 15px;
      font-family: 'Instrument Sans', sans-serif;
      font-size: 14.5px;
      color: var(--gray-900);
      outline: none;
      transition: border-color var(--t), background var(--t), box-shadow var(--t);
    }

.cont-form .fi:focus {
      border-color: var(--blue);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
    }

.cont-form textarea.fi {
      resize: vertical;
      min-height: 120px;
    }

/* Privacy note below submit */
    .cont-form-note {
      text-align: center;
      font-size: 11.5px;
      color: var(--gray-400);
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

.cont-form-note i { color: var(--emerald); }