/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE — New Design matching reference
   ═══════════════════════════════════════════════════════════════ */

/* ══ HERO ═══════════════════════════════════════════════════════ */
.ct-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h,70px) + 40px) 0 56px;
  position: relative;
  overflow: hidden;
}

/* Background */
.ct-hero-bg { position:absolute;inset:0;pointer-events:none;z-index:0; }
.ct-hero-grid {
  display: none;
}
.ct-glow-1 {
  position:absolute;width:800px;height:600px;top:-150px;right:0;
  background:radial-gradient(ellipse,rgba(245,158,11,0.16) 0%,transparent 65%);
  filter:blur(80px);animation:ctPulse 7s ease-in-out infinite;
}
.ct-glow-2 {
  position:absolute;width:500px;height:400px;bottom:-80px;left:5%;
  background:radial-gradient(ellipse,rgba(245,158,11,0.08) 0%,transparent 70%);
  filter:blur(100px);animation:ctPulse 10s ease-in-out infinite 3s;
}
@keyframes ctPulse { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

/* Layout */
.ct-hero-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  position:relative;z-index:2;
}

/* ── Content ── */
.ct-hero-content { display:flex;flex-direction:column; }

.ct-eyebrow {
  display:inline-flex;align-items:center;gap:10px;
  font-size:.82rem;font-weight:800;color:var(--or);
  letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:20px;animation:fadeInUp .5s ease both;
}
.ct-eyebrow-line {
  width:28px;height:2.5px;background:var(--or);border-radius:2px;flex-shrink:0;
}

.ct-hero-h1 {
  font-size:clamp(3rem,6vw,5rem);
  font-weight:900;line-height:1.12;letter-spacing:-.04em;
  color:var(--tx);margin-bottom:20px;
  animation:fadeInUp .6s ease .08s both;
}
.ct-hero-h1-grad {
  display:block;margin-top:0.12em;padding-bottom:0.14em;
  background:linear-gradient(135deg,#FFD080 0%,#F59E0B 50%,#D97706 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.ct-hero-desc {
  font-size:1rem;color:var(--tx-2);line-height:1.85;
  max-width:440px;margin-bottom:32px;
  animation:fadeInUp .6s ease .16s both;
}

/* ── Contact Methods ── */
.ct-methods {
  display:flex;flex-direction:column;gap:10px;
  animation:fadeInUp .6s ease .22s both;
}
.ct-method {
  display:flex;align-items:center;gap:14px;
  background:var(--surface-1);
  border:1px solid var(--bdr);
  border-radius:14px;padding:14px 18px;
  text-decoration:none;color:inherit;
  transition:all .25s;
}
.ct-method:hover {
  border-color:rgba(245,158,11,.35);
  transform:translateX(-3px);
  box-shadow:0 8px 28px rgba(245,158,11,.08);
}
.ct-method-icon {
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ct-icon-wa    { background:rgba(37,211,102,.15);border:1px solid rgba(37,211,102,.3);color:#25D366; }
.ct-icon-phone { background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:var(--or); }
.ct-icon-email { background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);color:#818cf8; }
.ct-method-title { font-size:.76rem;color:var(--tx-3);margin-bottom:1px; }
.ct-method-val   { font-size:.92rem;font-weight:700;color:var(--tx);direction:ltr;text-align:right; }
.ct-method-note  { font-size:.7rem;color:var(--tx-4);margin-top:2px; }

/* ── Hero Visual ── */
.ct-hero-visual {
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:480px;animation:fadeIn .9s ease .15s both;
}
.ct-visual-wrap {
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.ct-visual-glow {
  position:absolute;width:400px;height:400px;
  background:radial-gradient(circle,rgba(245,158,11,.22) 0%,transparent 65%);
  border-radius:50%;filter:blur(60px);
  animation:ctPulse 4s ease-in-out infinite;pointer-events:none;
}
.ct-visual-rings {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.ct-ring { position:absolute;border-radius:50%;border:1px solid; }
.ct-ring-1 { width:300px;height:300px;border-color:rgba(245,158,11,.22);animation:ctRing 18s linear infinite; }
.ct-ring-2 { width:420px;height:420px;border-color:rgba(245,158,11,.1);animation:ctRing 28s linear infinite reverse; }
@keyframes ctRing { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.ct-ring::before {
  content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;
  background:var(--or);box-shadow:0 0 14px var(--or);
}

.ct-rocket {
  position:relative;z-index:3;
  filter:drop-shadow(0 0 40px rgba(245,158,11,.7)) drop-shadow(0 0 80px rgba(245,158,11,.3));
  animation:ctFloat 5s ease-in-out infinite;
}
@keyframes ctFloat { 0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translateY(-22px) rotate(-5deg)} }

.ct-envelope {
  position:absolute;bottom:18%;right:8%;z-index:4;
  animation:ctFloat 4s ease-in-out infinite 1.5s;
  filter:drop-shadow(0 8px 24px rgba(245,158,11,.3));
}

@keyframes fadeInUp  { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }


/* ══ MAIN SECTION ════════════════════════════════════════════════ */
.ct-main { padding:0 0 80px; }

.ct-main-layout {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:24px;
}

/* ── Form Card ── */
.ct-form-card {
  background:var(--surface-1);
  border:1px solid var(--bdr);
  border-radius:20px;
  padding:36px 32px;
}
.ct-form-title {
  font-size:1.25rem;font-weight:900;color:var(--tx);
  margin-bottom:24px;
}

.ct-form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }

.ct-field-group { display:flex;flex-direction:column; }

.ct-field {
  position:relative;display:flex;align-items:center;
}
.ct-field-icon {
  position:absolute;right:14px;color:var(--tx-4);
  display:flex;align-items:center;pointer-events:none;
  z-index:1;
}
.ct-field-icon.top { top:14px;align-items:flex-start; }

.ct-input {
  width:100%;padding:13px 42px 13px 16px;
  background:var(--surface-2);
  border:1px solid var(--bdr-2);
  border-radius:10px;
  color:var(--tx);font-family:inherit;font-size:.9rem;
  transition:border-color .2s,box-shadow .2s;
  outline:none;
}
.ct-input:focus {
  border-color:var(--or);
  box-shadow:0 0 0 3px rgba(245,158,11,.12);
  background:var(--surface-1);
}
.ct-input::placeholder { color:var(--tx-4); }

.ct-textarea { resize:vertical;min-height:130px;padding-top:13px; }

.ct-err {
  font-size:.76rem;color:#EF4444;margin-top:4px;display:none;
}
.ct-counter {
  font-size:.71rem;color:var(--tx-4);margin-top:4px;
  margin-right:auto;
}

.ct-submit-btn {
  width:100%;margin-top:20px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px;border-radius:12px;
  background:linear-gradient(135deg,#F59E0B,#E08A1A);
  border:none;color:#fff;
  font-size:1rem;font-weight:800;font-family:inherit;
  cursor:pointer;transition:all .25s;
  box-shadow:0 8px 28px rgba(245,158,11,.35);
}
.ct-submit-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(245,158,11,.5);
}
.ct-submit-btn:disabled { opacity:.6;cursor:not-allowed;transform:none; }

.ct-privacy {
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:.74rem;color:var(--tx-4);margin-top:10px;
}

/* ── Info Card ── */
.ct-info-card {
  background:var(--surface-1);
  border:1px solid var(--bdr);
  border-radius:20px;
  padding:32px 24px;
  height:fit-content;
}
.ct-info-title {
  font-size:1.1rem;font-weight:900;color:var(--tx);
  margin-bottom:24px;
}

.ct-info-row {
  display:flex;gap:14px;margin-bottom:22px;
  align-items:flex-start;
}
.ct-info-icon {
  width:44px;height:44px;border-radius:10px;
  background:var(--or-glow-2);border:1px solid var(--or-bdr);
  display:flex;align-items:center;justify-content:center;
  color:var(--or);flex-shrink:0;
}
.ct-info-lbl  { font-size:.85rem;font-weight:700;color:var(--tx);margin-bottom:4px; }
.ct-info-val  { font-size:.88rem;font-weight:700;color:var(--tx-2);margin-bottom:3px; }
.ct-info-sub  { font-size:.78rem;color:var(--tx-3);line-height:1.5; }

/* Follow buttons */
.ct-follow-btns {
  display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;
}
.ct-follow-btn {
  width:42px;height:42px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;
  color:var(--tx-3);text-decoration:none;
  transition:all .22s cubic-bezier(0.34,1.56,0.64,1);
}
.ct-follow-btn:hover { transform:translateY(-3px); }
.ct-follow-btn:nth-child(1):hover { background:#1877F2;border-color:#1877F2;color:#fff;box-shadow:0 6px 20px rgba(24,119,242,.4); }
.ct-follow-btn:nth-child(2):hover { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:#dc2743;color:#fff;box-shadow:0 6px 20px rgba(220,39,67,.4); }
.ct-follow-btn:nth-child(3):hover { background:#0A66C2;border-color:#0A66C2;color:#fff;box-shadow:0 6px 20px rgba(10,102,194,.4); }
.ct-follow-btn:nth-child(4):hover { background:#1769FF;border-color:#1769FF;color:#fff;box-shadow:0 6px 20px rgba(23,105,255,.4); }
.ct-follow-btn svg { width:17px;height:17px; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .ct-main-layout { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .ct-hero { padding:calc(var(--header-h,60px) + 20px) 0 48px;min-height:auto; }
  .ct-hero-layout { grid-template-columns:1fr;gap:0; }
  .ct-hero-visual { order:-1;min-height:280px;margin-bottom:20px; }
  .ct-ring-2 { display:none; }
  .ct-hero-h1 { font-size:clamp(2rem,8vw,2.8rem);text-align:center; }
  .ct-hero-desc { text-align:center;max-width:100%;margin-inline:auto; }
  .ct-eyebrow { margin-inline:auto; }
  .ct-form-row { grid-template-columns:1fr; }
  .ct-form-card { padding:24px 18px; }
  .ct-info-card { padding:24px 18px; }
}
@media(max-width:480px) {
  .ct-hero-h1 { font-size:clamp(1.9rem,8vw,2.4rem); }
}

/* ══ LIGHT MODE ══════════════════════════════════════════════════ */
body.light-mode .ct-method     { background:#fff;border-color:rgba(0,0,0,.08); }
body.light-mode .ct-method:hover { border-color:rgba(245,158,11,.3); }
body.light-mode .ct-form-card  { background:#fff;border-color:rgba(0,0,0,.08); }
body.light-mode .ct-info-card  { background:#fff;border-color:rgba(0,0,0,.08); }
body.light-mode .ct-input      { background:#FAFAFA;border-color:rgba(0,0,0,.14);color:#0A0F1E; }
body.light-mode .ct-input:focus { background:#FFFFFF;border-color:var(--or); }
body.light-mode .ct-follow-btn { background:#F9F9F9;border-color:rgba(0,0,0,.10);color:#71717A; }

@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }