/* ═══════════════════════════════════════════════════════════════════
   GoroSolution — contact.css  ·  Contact Page
   One rule per line · Requires navbar-footer.css loaded first
═══════════════════════════════════════════════════════════════════ */

/* ── Container ── */
.ct-container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.ct-hero { padding: 88px 0 72px; position: relative; overflow: hidden; text-align: center; }
.ct-hero::before { content: ''; position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 720px; height: 720px; background: radial-gradient(circle, rgba(26,79,255,.06) 0%, transparent 65%); pointer-events: none; }
.ct-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-border), transparent); }
.ct-hero-inner { max-width: 680px; margin: 0 auto; padding: 0 28px; position: relative; }
.ct-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; background: linear-gradient(135deg, rgba(26,79,255,.09) 0%, rgba(224,16,10,.05) 100%); border: 1px solid rgba(26,79,255,.16); border-radius: 100px; font-size: .73rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--c-acc-b); margin-bottom: 26px; transition: color .35s, background .35s; }
[data-theme="dark"] .ct-hero-badge { background: rgba(77,127,255,.1); border-color: rgba(77,127,255,.22); color: #7FA8FF; }
.ct-hero-badge i { font-size: .75rem; }
.ct-hero-title { font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 900; color: var(--c-text); letter-spacing: -.048em; line-height: 1.04; margin-bottom: 22px; transition: color .35s; }
.ct-hero-accent { background: linear-gradient(135deg, #1A4FFF 0%, #E01010 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ct-hero-sub { font-size: clamp(.9rem, 1.5vw, 1.02rem); color: var(--c-text2); line-height: 1.76; transition: color .35s; }

/* ══════════════════════════════
   MAIN LAYOUT
══════════════════════════════ */
.ct-main { padding: 64px 0 110px; }
.ct-layout { display: grid; grid-template-columns: 1fr 400px; gap: 52px; align-items: start; }

/* ══════════════════════════════
   FORM COLUMN
══════════════════════════════ */
.ct-form-col { min-width: 0; }
.ct-form-header { margin-bottom: 32px; }
.ct-form-title { font-size: 1.45rem; font-weight: 900; color: var(--c-text); letter-spacing: -.03em; margin-bottom: 8px; transition: color .35s; }
.ct-form-sub { font-size: .875rem; color: var(--c-text2); line-height: 1.68; transition: color .35s; }

/* Form wrapper */
.ct-form { display: flex; flex-direction: column; gap: 20px; }

/* Success / Error messages */
.ct-success-msg { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.22); border-left: 3px solid #10B981; border-radius: var(--rad); }
.ct-success-msg i { color: #10B981; font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.ct-error-msg { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; background: rgba(224,16,10,.07); border: 1px solid rgba(224,16,10,.2); border-left: 3px solid #E01010; border-radius: var(--rad); }
.ct-error-msg i { color: #E01010; font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.ct-success-msg div, .ct-error-msg div { display: flex; flex-direction: column; gap: 3px; }
.ct-success-msg strong, .ct-error-msg strong { font-size: .88rem; font-weight: 700; color: var(--c-text); }
.ct-success-msg span, .ct-error-msg span { font-size: .82rem; color: var(--c-text2); line-height: 1.55; }

/* Two-col row */
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Field wrapper */
.ct-field { display: flex; flex-direction: column; gap: 7px; }

/* Label */
.ct-label { font-size: .8rem; font-weight: 700; color: var(--c-text); letter-spacing: .01em; transition: color .35s; }
.ct-required { color: #E01010; margin-left: 2px; }
.ct-optional { font-weight: 400; color: var(--c-text3); font-size: .75rem; }

/* Input wrap */
.ct-input-wrap { position: relative; display: flex; align-items: center; }
.ct-input-icon { position: absolute; left: 14px; font-size: .78rem; color: var(--c-text3); pointer-events: none; transition: color .2s; z-index: 1; }
.ct-input { width: 100%; padding: 11px 14px 11px 38px; background: var(--c-surf); border: 1.5px solid var(--c-border); border-radius: var(--rad); font-family: inherit; font-size: .875rem; color: var(--c-text); outline: none; transition: border-color .18s, box-shadow .18s, background .35s, color .35s; -webkit-appearance: none; }
.ct-input::placeholder { color: var(--c-text3); }
.ct-input:hover { border-color: rgba(26,79,255,.25); }
.ct-input:focus { border-color: var(--c-acc-b); box-shadow: 0 0 0 3.5px rgba(26,79,255,.1); }
.ct-input:focus + .ct-input-icon, .ct-input-wrap:focus-within .ct-input-icon { color: var(--c-acc-b); }
[data-theme="dark"] .ct-input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: var(--c-text); }
[data-theme="dark"] .ct-input:hover { border-color: rgba(77,127,255,.3); }
[data-theme="dark"] .ct-input:focus { border-color: #7FA8FF; box-shadow: 0 0 0 3.5px rgba(77,127,255,.12); }

/* Select wrap */
.ct-select-wrap { position: relative; display: flex; align-items: center; }
.ct-select-caret { position: absolute; right: 14px; font-size: .6rem; color: var(--c-text3); pointer-events: none; transition: transform .2s var(--ease), color .18s; }
.ct-select-wrap:focus-within .ct-select-caret { transform: rotate(180deg); color: var(--c-acc-b); }
.ct-select { width: 100%; padding: 11px 38px 11px 38px; background: var(--c-surf); border: 1.5px solid var(--c-border); border-radius: var(--rad); font-family: inherit; font-size: .875rem; color: var(--c-text); outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .18s, box-shadow .18s, background .35s, color .35s; }
.ct-select:hover { border-color: rgba(26,79,255,.25); }
.ct-select:focus { border-color: var(--c-acc-b); box-shadow: 0 0 0 3.5px rgba(26,79,255,.1); }
[data-theme="dark"] .ct-select { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: var(--c-text); }
[data-theme="dark"] .ct-select option { background: var(--c-surf); color: var(--c-text); }
[data-theme="dark"] .ct-select:hover { border-color: rgba(77,127,255,.3); }
[data-theme="dark"] .ct-select:focus { border-color: #7FA8FF; box-shadow: 0 0 0 3.5px rgba(77,127,255,.12); }

/* Radio group */
.ct-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-radio { display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--c-surf); border: 1.5px solid var(--c-border); border-radius: var(--rad); font-size: .84rem; font-weight: 500; color: var(--c-text2); cursor: pointer; transition: all .18s; user-select: none; }
.ct-radio input[type="radio"] { width: 15px; height: 15px; accent-color: var(--c-acc-b); cursor: pointer; flex-shrink: 0; }
.ct-radio:hover { border-color: rgba(26,79,255,.28); color: var(--c-text); background: rgba(26,79,255,.04); }
.ct-radio:has(input:checked) { border-color: var(--c-acc-b); background: rgba(26,79,255,.07); color: var(--c-acc-b); font-weight: 700; }
[data-theme="dark"] .ct-radio { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ct-radio:hover { border-color: rgba(77,127,255,.3); background: rgba(77,127,255,.06); }
[data-theme="dark"] .ct-radio:has(input:checked) { border-color: #7FA8FF; background: rgba(77,127,255,.1); color: #7FA8FF; }

/* Textarea */
.ct-textarea { width: 100%; padding: 12px 16px; background: var(--c-surf); border: 1.5px solid var(--c-border); border-radius: var(--rad); font-family: inherit; font-size: .875rem; color: var(--c-text); line-height: 1.7; outline: none; resize: vertical; min-height: 140px; transition: border-color .18s, box-shadow .18s, background .35s, color .35s; -webkit-appearance: none; }
.ct-textarea::placeholder { color: var(--c-text3); }
.ct-textarea:hover { border-color: rgba(26,79,255,.25); }
.ct-textarea:focus { border-color: var(--c-acc-b); box-shadow: 0 0 0 3.5px rgba(26,79,255,.1); }
[data-theme="dark"] .ct-textarea { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ct-textarea:hover { border-color: rgba(77,127,255,.3); }
[data-theme="dark"] .ct-textarea:focus { border-color: #7FA8FF; box-shadow: 0 0 0 3.5px rgba(77,127,255,.12); }
.ct-char-count { font-size: .74rem; color: var(--c-text3); text-align: right; margin-top: 5px; transition: color .18s; }

/* Attachment note */
.ct-attach-note { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; background: rgba(26,79,255,.04); border: 1px solid rgba(26,79,255,.1); border-radius: var(--rad); font-size: .82rem; color: var(--c-text2); line-height: 1.6; transition: background .35s, color .35s; }
.ct-attach-note i { color: var(--c-acc-b); flex-shrink: 0; margin-top: 1px; font-size: .8rem; }
[data-theme="dark"] .ct-attach-note { background: rgba(77,127,255,.06); border-color: rgba(77,127,255,.14); }
.ct-attach-note strong { color: var(--c-text); font-weight: 700; }

/* Submit button — same shimmer pattern */
.ct-submit-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 28px; background: linear-gradient(to right,#0A2299,#4D7FFF,#0A2299,#0A2299,#4D7FFF,#0A2299); background-size: 250%; background-position: left; color: #fff; border-radius: 100px; font-family: inherit; font-size: .94rem; font-weight: 700; letter-spacing: .02em; border: none; cursor: pointer; overflow: hidden; transition-duration: 1s; box-shadow: 0 5px 24px rgba(26,79,255,.42); margin-top: 4px; }
.ct-submit-btn::before { content: ''; position: absolute; width: 97%; height: 88%; border-radius: 100px; background-color: rgba(0,0,0,.82); transition-duration: 1s; z-index: 0; }
.ct-submit-btn .ct-btn-label, .ct-submit-btn .ct-btn-loading { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: #fff; }
.ct-submit-btn:hover { background-position: right; box-shadow: 0 8px 36px rgba(26,79,255,.6); }
.ct-submit-btn:hover::before { background-color: rgba(0,0,0,.74); }
.ct-submit-btn:active { transform: scale(.97); }
.ct-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ══════════════════════════════
   INFO COLUMN
══════════════════════════════ */
.ct-info-col { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--nav-h) + 24px); }

/* Highlight card */
.ct-info-card { background: var(--c-surf); border: 1px solid var(--c-border); border-radius: var(--rad-lg); padding: 22px 20px; display: flex; align-items: flex-start; gap: 16px; transition: background .35s, border-color .35s; }
[data-theme="dark"] .ct-info-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
.ct-info-highlight { background: linear-gradient(135deg, rgba(26,79,255,.07) 0%, rgba(224,16,10,.03) 100%); border-color: rgba(26,79,255,.14); border-left: 3px solid var(--c-acc-b); }
[data-theme="dark"] .ct-info-highlight { background: rgba(77,127,255,.08); border-color: rgba(77,127,255,.18); border-left-color: #7FA8FF; }
.ct-info-icon { width: 40px; height: 40px; border-radius: var(--rad-sm); background: linear-gradient(135deg, rgba(26,79,255,.12) 0%, rgba(224,16,10,.07) 100%); border: 1px solid rgba(26,79,255,.14); display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--c-acc-b); flex-shrink: 0; transition: color .35s, background .35s; }
[data-theme="dark"] .ct-info-icon { color: #7FA8FF; background: rgba(77,127,255,.12); border-color: rgba(77,127,255,.2); }
.ct-info-text h3 { font-size: .88rem; font-weight: 800; color: var(--c-text); margin-bottom: 6px; letter-spacing: -.01em; transition: color .35s; }
.ct-info-text p { font-size: .82rem; color: var(--c-text2); line-height: 1.68; margin: 0; transition: color .35s; }
.ct-info-text strong { color: var(--c-text); font-weight: 700; }

/* Channel cards group */
.ct-channels { background: var(--c-surf); border: 1px solid var(--c-border); border-radius: var(--rad-lg); overflow: hidden; transition: background .35s, border-color .35s; }
[data-theme="dark"] .ct-channels { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
.ct-channel-title { font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--c-text3); padding: 14px 18px 10px; border-bottom: 1px solid var(--c-border); transition: color .35s, border-color .35s; }
.ct-channel-item { display: flex; align-items: center; gap: 13px; padding: 13px 18px; text-decoration: none; border-bottom: 1px solid var(--c-border); transition: background .16s; }
.ct-channel-item:last-child { border-bottom: none; }
.ct-channel-item:hover { background: rgba(26,79,255,.04); }
[data-theme="dark"] .ct-channel-item:hover { background: rgba(77,127,255,.06); }
.ct-channel-icon { width: 36px; height: 36px; border-radius: var(--rad-sm); display: flex; align-items: center; justify-content: center; font-size: .82rem; flex-shrink: 0; transition: transform .2s var(--ease-back); }
.ct-channel-item:hover .ct-channel-icon { transform: scale(1.08); }
.ct-ch-support { background: rgba(26,79,255,.1); color: var(--c-acc-b); border: 1px solid rgba(26,79,255,.15); }
.ct-ch-billing { background: rgba(16,185,129,.1); color: #10B981; border: 1px solid rgba(16,185,129,.18); }
.ct-ch-legal { background: rgba(139,92,246,.1); color: #8B5CF6; border: 1px solid rgba(139,92,246,.18); }
.ct-ch-partner { background: rgba(245,158,11,.1); color: #F59E0B; border: 1px solid rgba(245,158,11,.18); }
[data-theme="dark"] .ct-ch-support { background: rgba(77,127,255,.12); color: #7FA8FF; border-color: rgba(77,127,255,.2); }
.ct-channel-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ct-channel-name { font-size: .82rem; font-weight: 700; color: var(--c-text); white-space: nowrap; transition: color .35s; }
.ct-channel-val { font-size: .74rem; color: var(--c-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .35s; }
.ct-channel-arrow { font-size: .65rem; color: var(--c-text3); flex-shrink: 0; transition: color .16s, transform .18s var(--ease); }
.ct-channel-item:hover .ct-channel-arrow { color: var(--c-acc-b); transform: translate(2px, -2px); }
[data-theme="dark"] .ct-channel-item:hover .ct-channel-arrow { color: #7FA8FF; }

/* Socials card */
.ct-socials-card { background: var(--c-surf); border: 1px solid var(--c-border); border-radius: var(--rad-lg); overflow: hidden; transition: background .35s, border-color .35s; }
[data-theme="dark"] .ct-socials-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
.ct-social-links { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 18px; }
.ct-social-item { width: 38px; height: 38px; border-radius: var(--rad-sm); background: rgba(7,16,30,.05); border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; color: var(--c-text2); font-size: .82rem; text-decoration: none; transition: all .2s var(--ease); }
.ct-social-item:hover { background: rgba(26,79,255,.1); border-color: rgba(26,79,255,.25); color: var(--c-acc-b); transform: translateY(-3px) scale(1.06); box-shadow: 0 5px 16px rgba(26,79,255,.2); }
[data-theme="dark"] .ct-social-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: var(--c-text2); }
[data-theme="dark"] .ct-social-item:hover { background: rgba(77,127,255,.12); border-color: rgba(77,127,255,.28); color: #7FA8FF; }

/* FAQ card */
.ct-faq-card { background: var(--c-surf); border: 1px solid var(--c-border); border-radius: var(--rad-lg); overflow: hidden; transition: background .35s, border-color .35s; }
[data-theme="dark"] .ct-faq-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
.ct-faq-links { display: flex; flex-direction: column; }
.ct-faq-item { display: flex; align-items: center; gap: 11px; padding: 11px 18px; text-decoration: none; border-bottom: 1px solid var(--c-border); transition: background .15s; cursor: pointer; }
.ct-faq-item:last-child { border-bottom: none; }
.ct-faq-item.ct-faq-open { background: rgba(26,79,255,.05); border-bottom: none; }
.ct-faq-item:hover { background: rgba(26,79,255,.04); }
[data-theme="dark"] .ct-faq-item:hover { background: rgba(77,127,255,.06); }
[data-theme="dark"] .ct-faq-item.ct-faq-open { background: rgba(77,127,255,.08); }
.ct-faq-item > i:first-child { font-size: .75rem; color: var(--c-acc-b); flex-shrink: 0; transition: color .35s; }
[data-theme="dark"] .ct-faq-item > i:first-child { color: #7FA8FF; }
.ct-faq-item span { font-size: .82rem; font-weight: 500; color: var(--c-text2); flex: 1; line-height: 1.4; transition: color .16s; }
.ct-faq-item:hover span { color: var(--c-text); }
.ct-faq-item.ct-faq-open span { color: var(--c-text); font-weight: 700; }
.ct-faq-arrow { font-size: .6rem; color: var(--c-text3); flex-shrink: 0; transition: transform .28s var(--ease), color .16s; }
.ct-faq-item:hover .ct-faq-arrow { color: var(--c-acc-b); }
.ct-faq-item.ct-faq-open .ct-faq-arrow { transform: rotate(90deg); color: var(--c-acc-b); }
[data-theme="dark"] .ct-faq-item.ct-faq-open .ct-faq-arrow { color: #7FA8FF; }
[data-theme="dark"] .ct-faq-item:hover .ct-faq-arrow { color: #7FA8FF; }

/* FAQ answer panel */
.ct-faq-answer { max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(.16,1,.3,1), opacity .3s; opacity: 0; border-bottom: 1px solid var(--c-border); }
.ct-faq-answer.ct-faq-answer-open { max-height: 200px; opacity: 1; }
.ct-faq-answer-inner { padding: 12px 18px 16px 40px; font-size: .82rem; color: var(--c-text2); line-height: 1.72; transition: color .35s; }
.ct-faq-answer-inner a { color: var(--c-acc-b); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(26,79,255,.25); transition: color .15s; }
.ct-faq-answer-inner a:hover { color: #0030CC; }
[data-theme="dark"] .ct-faq-answer-inner a { color: #7FA8FF; border-bottom-color: rgba(127,168,255,.3); }
[data-theme="dark"] .ct-faq-answer.ct-faq-answer-open { border-bottom-color: rgba(255,255,255,.06); }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1040px) { .ct-layout { grid-template-columns: 1fr 360px; gap: 40px; } }
@media (max-width: 860px) { .ct-layout { grid-template-columns: 1fr; } .ct-info-col { position: static; } .ct-main { padding: 48px 0 80px; } }
@media (max-width: 640px) { .ct-form-row { grid-template-columns: 1fr; } .ct-hero { padding: 64px 0 52px; } .ct-container { padding: 0 16px; } .ct-hero-inner { padding: 0 16px; } }
@media (max-width: 420px) { .ct-radio-group { gap: 8px; } .ct-radio { padding: 8px 12px; font-size: .8rem; } }