/* RESPONSIVE FIX: overflow-x:hidden was only set on body, not html.
   On mobile browsers the actual scrollable area is html's scrollWidth,
   so horizontal overflow from any element could still create stray
   blank space / rubber-band scroll beyond the page content. */
@import url('../shared/design-system.css');

html{overflow-x:hidden;}

/* ==========================
   SUPPORT PAGE
   Layers on top of ../home/style.css — reuses .primary-btn, .secondary-btn,
   .form-group, .faq-*, .cards/.card, .smart-matching, .buddy-* wholesale.
   Everything below is namespaced with "ct-" so it can never clash with
   home/style.css or navbar.css/footer.css selectors.
========================== */

html, body { width:100%; max-width:100%; min-height: 100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
img, video, svg, canvas { max-width:100%; }
img { height:auto; }

.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- HERO ---------- */
.ct-hero{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding: clamp(3rem, 10vh, 5rem) var(--container-px) 2rem;
    background: transparent;
}

.ct-hero-blob{ position:absolute; border-radius: var(--radius-pill); pointer-events:none; }
.ct-hero-blob-a{ width:300px; height:300px; top:-150px; left:-80px; background:rgba(13,110,253,.08); }
.ct-hero-blob-b{ width:240px; height:240px; bottom:-130px; right:-70px; background:rgba(114,145,210,.1); }

.ct-hero-inner{ position:relative; z-index:1; width:min(700px, 100%); margin:0 auto; }

.ct-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size: var(--text-xs); font-weight:700; letter-spacing:.04em;
    color: var(--tb-primary); background: var(--tb-primary-light); border:1px solid var(--border-color);
    padding:8px 16px; border-radius: var(--radius-pill); margin-bottom:22px;
}
.ct-eyebrow i{ font-size:7px; color: var(--tb-success); animation:ct-blink 2s ease-in-out infinite; }
@keyframes ct-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.ct-hero h1{
    font-size:clamp(30px, 5vw, 46px);
    line-height:1.18; color: var(--text-primary); font-weight:700; margin-bottom:16px;
}
.ct-hero h1 .text-blue{ color: var(--tb-primary); }
.ct-hero-inner > p{
    color: var(--text-secondary); font-size: var(--text-md); line-height:1.75;
    max-width:560px; margin:0 auto;
}

/* ---------- QUICK CARDS ---------- */
.ct-cards-wrap{ padding:0 var(--container-px); margin-top: 50px; position:relative; z-index:2; }

/* ---------- PROCESS ---------- */
.ct-process {
    padding: clamp(3rem, 8vh, 5rem) 0;
    background: var(--tb-bg-alt, #f8f9fb);
    text-align: center;
}
.ct-process .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 0;
}
.ct-process h2 {
    font-size: clamp(26px, 4.5vw, 34px);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.ct-cards{
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}

@media(min-width: 901px) {
    .ct-card:nth-child(3) {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .ct-card:nth-child(3) .ct-card-cta { margin-left: 0; }
}

@media(max-width:900px){
    .ct-cards{ grid-template-columns:1fr; }
    .ct-card:nth-child(3) { grid-column: auto; }
}

.ct-card{
    display:flex; flex-direction:column; align-items:flex-start;
    background:#fff; border:1px solid var(--border-color); border-radius: var(--radius-lg);
    padding:32px 28px; text-decoration:none;
    box-shadow: var(--tb-shadow-l1);
    transition: all 0.3s var(--tb-transition);
    height: 100%;
}
.ct-card:hover{ transform:translateY(-6px); box-shadow: var(--tb-shadow-l2); border-color: var(--tb-primary); }

.ct-card-icon{
    width:52px; height:52px; border-radius: var(--radius-md); margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    background: var(--tb-primary-light); color: var(--tb-primary); font-size:20px;
}
.ct-card h2{ font-size: var(--text-md); color: var(--text-primary); margin-bottom:6px; font-weight: 700; }
.ct-card p{ color: var(--text-secondary); font-size: var(--text-sm); margin-bottom:16px; flex: 1; }
.ct-card-cta{
    display:inline-flex; align-items:center; gap:7px;
    color: var(--tb-primary); font-weight:700; font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ct-card-cta i{ transition:transform .25s ease; }
.ct-card:hover .ct-card-cta i{ transform:translateX(4px); }

/* ---------- MAIN: FORM + SIDE ---------- */
.ct-main{ padding: clamp(2.5rem, 6vh, 4.5rem) var(--container-px); background: transparent; }
.ct-main-inner{
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:1.6fr 1fr; gap: clamp(32px, 5vw, 64px); align-items:start;
}
@media(max-width:900px){ .ct-main-inner{ grid-template-columns:1fr; } }

.ct-form-card{
    background:#fff; border:1px solid var(--border-color); border-radius: var(--radius-xl);
    padding:clamp(28px, 4vw, 42px);
    box-shadow: var(--tb-shadow-l1);
}
.ct-form-card h2{ font-size: var(--text-xl); color: var(--text-primary); margin-bottom:8px; font-weight: 700; }
.ct-form-sub{ color: var(--text-secondary); font-size: var(--text-sm); margin-bottom:28px; }

.ct-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:560px){ .ct-field-row{ grid-template-columns:1fr; } }

.ct-field label {
    font-size: var(--text-xs); font-weight: 700; color: var(--text-primary);
    margin-bottom: 8px; display: block;
}
.ct-field input, .ct-field select {
    width: 100%; height: 46px; padding: 0 16px;
    border-radius: var(--radius-md); border: 1.5px solid var(--border-color);
    font-family: inherit; font-size: var(--text-sm); outline: none;
    transition: all 0.2s ease;
}
.ct-field input:focus, .ct-field select:focus {
    border-color: var(--tb-primary);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

.ct-optional{ font-weight:400; color: var(--text-muted); text-transform:none; font-size: 0.9em; margin-left: 4px; }

.ct-field textarea{
    width:100%; min-height:130px; resize:vertical;
    padding:13px 16px; border:1.5px solid var(--border-color); border-radius: var(--radius-md);
    font:400 var(--text-sm) 'Poppins',sans-serif; color: var(--text-primary); outline:none;
    transition:border-color .25s ease;
}
.ct-field textarea::placeholder{ color: var(--text-muted); }
.ct-field textarea:focus{ border-color: var(--tb-primary); }

.ct-field.ct-error input,
.ct-field.ct-error select,
.ct-field.ct-error textarea{ border-color: var(--text-danger); background:#fff6f6; }
.ct-field-msg{ display:block; min-height:16px; margin-top:6px; font-size: var(--text-xs); color: var(--text-danger); }

.ct-submit-btn{ position:relative; margin-top:6px; }
.ct-spinner{
    display:none; width:15px; height:15px; border-radius:50%;
    border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
    animation:ct-spin .7s linear infinite;
}
.ct-submit-btn.ct-loading{ opacity:.85; cursor:progress; }
.ct-submit-btn.ct-loading .ct-btn-text{ display:none; }
.ct-submit-btn.ct-loading .ct-spinner{ display:inline-block; }
@keyframes ct-spin{ to{ transform:rotate(360deg); } }

.ct-success{
    display:none; align-items:flex-start; gap:10px; margin-top:18px;
    padding:14px 16px; border-radius: var(--radius-md); background:#eafaf1; border:1px solid #bdeecd;
    color: var(--text-success); font-size: var(--text-sm); line-height:1.6;
}
.ct-success.ct-show{ display:flex; animation:ct-rise .35s ease; }
.ct-success i{ font-size:17px; margin-top:1px; }
@keyframes ct-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- SIDE ---------- */
.ct-side{ display:flex; flex-direction:column; gap:20px; }
.ct-side-card{
    background: var(--text-primary); border-radius: var(--radius-xl); padding:32px 24px; color: var(--text-inverse);
}
.ct-side-title{
    display:block; font-size: var(--text-sm); text-transform:uppercase; letter-spacing:.08em;
    color: rgba(255,255,255,0.5); font-weight:800; margin-bottom:16px;
}
.ct-side-row{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.ct-side-row:last-child{ margin-bottom:0; }
.ct-side-row i{ width:20px; text-align:center; color: var(--tb-accent); font-size:14px; margin-top:3px; flex:0 0 20px; }
.ct-side-row p{ margin:0; font-size: var(--text-sm); line-height:1.7; color: rgba(255,255,255,0.8); }

.ct-social-card{ padding:26px 24px; }
.ct-socials{ display:flex; gap:12px; justify-content: flex-start; }
.ct-socials a{
    width:42px; height:42px; border-radius: var(--radius-pill); background:rgba(255,255,255,.08);
    color: var(--text-inverse); display:flex; align-items:center; justify-content:center;
    text-decoration:none; transition: all 0.25s var(--tb-transition);
    border: 1px solid rgba(255,255,255,0.1);
}
.ct-socials a:hover{ background: var(--tb-primary); transform:translateY(-3px); border-color: transparent; }

/* ---------- TOAST ---------- */
.ct-toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(16px);
    background: var(--text-primary); color: var(--text-inverse); padding:12px 24px; border-radius: var(--radius-pill);
    font:600 var(--text-sm) 'Poppins',sans-serif; display:flex; align-items:center; gap:9px;
    opacity:0; pointer-events:none; z-index:3000;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    transition: all 0.25s ease;
}
.ct-toast.ct-show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- SCROLL REVEAL ---------- */
.ct-reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.ct-reveal.ct-in-view{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
    .ct-reveal{ opacity:1; transform:none; transition:none; }
    .ct-eyebrow i{ animation:none; }
}

@media(max-width:560px){
    .ct-hero, .ct-main { padding-inline:16px; }
    .ct-cards-wrap { padding-inline:16px; }
    .ct-form-card, .ct-side-card { padding-inline:18px; }
    .ct-submit-btn, .ct-socials { width:100%; }
    .ct-socials { justify-content:flex-start; }
    .ct-toast { left:12px; right:12px; width:auto; transform:translateY(16px); border-radius: var(--radius-md); }
    .ct-toast.ct-show { transform:translateY(0); }
}