/* assets/css/terms.css — Terms & Privacy pages */

/* ── Reading progress bar ─────────────── */
#tqReadBar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #4d61f4 0%, #cb89ff 55%, #d7fe7c 100%);
    z-index: 10000;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ── Hero ─────────────────────────────── */
.tq-legal-hero {
    padding: 148px 24px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tq-legal-glow-1 {
    position: absolute;
    top: -10%; right: -6%;
    width: clamp(280px, 38vw, 540px);
    height: clamp(280px, 38vw, 540px);
    background: radial-gradient(ellipse, rgba(77,97,244,0.1) 0%, transparent 68%);
    pointer-events: none;
}
.tq-legal-glow-2 {
    position: absolute;
    bottom: -5%; left: -4%;
    width: clamp(200px, 28vw, 400px);
    height: clamp(200px, 28vw, 400px);
    background: radial-gradient(ellipse, rgba(215,254,124,0.16) 0%, transparent 65%);
    pointer-events: none;
}
.tq-legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    background: #fff;
    border: 1px solid rgba(35,35,35,0.08);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #232323;
    margin-bottom: 22px;
    box-shadow: 0 1px 4px rgba(35,35,35,0.05);
}
.tq-legal-badge-dot {
    width: 7px; height: 7px;
    background: #4d61f4;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(77,97,244,0.18);
    animation: tqLegalPulse 2s ease-in-out infinite;
}
@keyframes tqLegalPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(77,97,244,0.18); }
    50%       { box-shadow: 0 0 0 6px rgba(77,97,244,0.06); }
}
.tq-legal-h1 {
    font-size: clamp(40px, 7.5vw, 76px);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #232323;
    line-height: 1;
    margin-bottom: 18px;
}
.tq-legal-sub {
    font-size: 16px;
    color: rgba(35,35,35,0.5);
    max-width: 480px;
    margin: 0 auto 28px;
    line-height: 1.65;
}
.tq-legal-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    font-size: 12px;
    color: rgba(35,35,35,0.38);
    font-weight: 600;
}
.tq-legal-meta span { display: flex; align-items: center; gap: 5px; }
.tq-legal-meta svg  { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Layout ───────────────────────────── */
.tq-legal-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px 100px;
}

/* ── TOC ──────────────────────────────── */
.tq-toc {
    background: #fff;
    border: 1px solid rgba(35,35,35,0.07);
    border-radius: 22px;
    padding: 28px;
    margin-bottom: 44px;
    box-shadow: 0 2px 8px rgba(35,35,35,0.04), 0 12px 32px rgba(35,35,35,0.06);
}
.tq-toc-title {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(35,35,35,0.28);
    margin-bottom: 16px;
}
.tq-toc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.tq-toc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 11px;
    border: 1px solid rgba(35,35,35,0.07);
    background: #f6f5f2;
    text-decoration: none;
    color: rgba(35,35,35,0.65);
    font-size: 13px;
    font-weight: 700;
    transition: all 0.18s;
}
.tq-toc-link:hover {
    background: rgba(77,97,244,0.06);
    border-color: rgba(77,97,244,0.22);
    color: #4d61f4;
    padding-left: 18px;
}
.tq-toc-num {
    min-width: 24px; height: 24px;
    background: rgba(35,35,35,0.08);
    border-radius: 7px;
    font-size: 10px;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s;
}
.tq-toc-link:hover .tq-toc-num { background: #4d61f4; color: #fff; }
@media (max-width: 540px) { .tq-toc-grid { grid-template-columns: 1fr; } }

/* ── Section cards ────────────────────── */
.tq-sec {
    background: #fff;
    border: 1px solid rgba(35,35,35,0.07);
    border-radius: 22px;
    padding: 36px 32px;
    margin-bottom: 20px;
    scroll-margin-top: 100px;
    box-shadow: 0 2px 4px rgba(35,35,35,0.03), 0 8px 24px rgba(35,35,35,0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}
.tq-sec::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4d61f4, #cb89ff);
    opacity: 0;
    transition: opacity 0.3s;
}
.tq-sec:hover {
    box-shadow: 0 4px 8px rgba(35,35,35,0.05), 0 20px 52px rgba(35,35,35,0.1);
    transform: translateY(-2px);
}
.tq-sec:hover::before { opacity: 1; }

/* Section ghost number watermark */
.tq-sec-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; position: relative; }
.tq-sec-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tq-sec-icon svg { width: 24px; height: 24px; }
.tq-sec-num {
    font-size: 10px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: rgba(35,35,35,0.28); margin-bottom: 5px;
}
.tq-sec-title {
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 900; color: #232323;
    letter-spacing: -0.035em; line-height: 1.05;
}

/* Large faded watermark number */
.tq-sec-watermark {
    position: absolute;
    top: 32px; right: 32px;
    font-size: 80px;
    font-weight: 900;
    color: rgba(35,35,35,0.04);
    line-height: 1;
    letter-spacing: -0.06em;
    pointer-events: none;
    user-select: none;
}

/* ── Body text ────────────────────────── */
.tq-p {
    font-size: 15px;
    color: rgba(35,35,35,0.6);
    line-height: 1.72;
    margin-bottom: 16px;
}
.tq-p:last-child { margin-bottom: 0; }

/* ── Sub-headings ─────────────────────── */
.tq-sub {
    display: flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 900; color: #232323;
    margin: 32px 0 14px;
    letter-spacing: -0.02em;
}
.tq-sub-tag {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 22px;
    background: rgba(77,97,244,0.08);
    border-radius: 6px; font-size: 11px; font-weight: 900;
    color: #4d61f4;
    padding: 0 6px;
}

/* ── Callout boxes ────────────────────── */
.tq-callout {
    border-radius: 14px;
    padding: 18px 20px;
    margin-top: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.tq-callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.tq-callout-title { font-size: 13px; font-weight: 800; margin-bottom: 5px; }
.tq-callout p { font-size: 13.5px; color: rgba(35,35,35,0.6); line-height: 1.6; margin: 0; }
.tq-callout-blue   { background: rgba(77,97,244,0.06);   border: 1px solid rgba(77,97,244,0.16); }
.tq-callout-red    { background: rgba(239,68,68,0.05);   border: 1px solid rgba(239,68,68,0.14); }
.tq-callout-amber  { background: rgba(245,158,11,0.06);  border: 1px solid rgba(245,158,11,0.16); }
.tq-callout-lime   { background: rgba(132,204,22,0.06);  border: 1px solid rgba(132,204,22,0.16); }
.tq-callout-purple { background: rgba(203,137,255,0.07); border: 1px solid rgba(203,137,255,0.18); }
.tq-callout-blue   .tq-callout-title { color: #4d61f4; }
.tq-callout-red    .tq-callout-title { color: #dc2626; }
.tq-callout-amber  .tq-callout-title { color: #d97706; }
.tq-callout-lime   .tq-callout-title { color: #65a30d; }
.tq-callout-purple .tq-callout-title { color: #9333ea; }

/* ── Lists ────────────────────────────── */
.tq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tq-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: rgba(35,35,35,0.65); line-height: 1.55; }
.tq-list li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; }

/* ── Grids ────────────────────────────── */
.tq-g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tq-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tq-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 640px) { .tq-g2, .tq-g3, .tq-g4 { grid-template-columns: 1fr; } }
@media (min-width: 641px) and (max-width: 900px) {
    .tq-g3 { grid-template-columns: repeat(2, 1fr); }
    .tq-g4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mini cards ───────────────────────── */
.tq-card {
    background: #f6f5f2;
    border: 1px solid rgba(35,35,35,0.07);
    border-radius: 16px;
    padding: 20px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.tq-card:hover {
    border-color: rgba(77,97,244,0.22);
    box-shadow: 0 4px 16px rgba(35,35,35,0.08);
    transform: translateY(-2px);
}
.tq-card-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.tq-card-icon svg { width: 18px; height: 18px; }
.tq-card-title { font-size: 14px; font-weight: 800; color: #232323; margin-bottom: 5px; letter-spacing: -0.01em; }
.tq-card-text  { font-size: 12.5px; color: rgba(35,35,35,0.5); line-height: 1.55; }

/* ── Payment phases ───────────────────── */
.tq-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
@media (max-width: 640px) { .tq-phases { grid-template-columns: 1fr; } }
.tq-phase {
    border-radius: 18px;
    padding: 26px 22px;
    text-align: center;
    border: 2px solid;
    background: #fff;
    box-shadow: 0 2px 8px rgba(35,35,35,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}
.tq-phase:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(35,35,35,0.1); }
.tq-phase-pct  { font-size: 46px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; margin-bottom: 8px; }
.tq-phase-name { font-size: 13px; font-weight: 800; margin-bottom: 5px; }
.tq-phase-desc { font-size: 12px; color: rgba(35,35,35,0.48); line-height: 1.45; }
.tq-phase-blue   { border-color: rgba(77,97,244,0.25); }
.tq-phase-blue   .tq-phase-pct, .tq-phase-blue   .tq-phase-name { color: #4d61f4; }
.tq-phase-lime   { border-color: rgba(132,204,22,0.3); }
.tq-phase-lime   .tq-phase-pct, .tq-phase-lime   .tq-phase-name { color: #65a30d; }
.tq-phase-purple { border-color: rgba(203,137,255,0.3); }
.tq-phase-purple .tq-phase-pct, .tq-phase-purple .tq-phase-name { color: #9333ea; }

/* ── Duration cards ───────────────────── */
.tq-durs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0; }
@media (max-width: 640px) { .tq-durs { grid-template-columns: repeat(2, 1fr); } }
.tq-dur {
    background: #fff;
    border: 1px solid rgba(35,35,35,0.08);
    border-radius: 16px; padding: 20px 14px; text-align: center;
    box-shadow: 0 2px 6px rgba(35,35,35,0.04);
    transition: all 0.2s;
}
.tq-dur:hover { border-color: rgba(77,97,244,0.25); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(77,97,244,0.1); }
.tq-dur-num   { font-size: 32px; font-weight: 900; letter-spacing: -0.05em; color: #4d61f4; margin-bottom: 5px; }
.tq-dur-label { font-size: 12px; font-weight: 800; color: #232323; margin-bottom: 3px; }
.tq-dur-note  { font-size: 11px; color: rgba(35,35,35,0.38); }

/* ── Provisions ───────────────────────── */
.tq-prov {
    background: #f6f5f2;
    border: 1px solid rgba(35,35,35,0.07);
    border-radius: 14px; padding: 18px;
    transition: border-color 0.2s;
}
.tq-prov:hover { border-color: rgba(77,97,244,0.18); }
.tq-prov-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.tq-prov-code { font-size: 10px; font-weight: 900; color: #4d61f4; letter-spacing: 0.06em; }
.tq-prov-name { font-size: 13px; font-weight: 800; color: #232323; }
.tq-prov p    { font-size: 12.5px; color: rgba(35,35,35,0.52); line-height: 1.55; margin: 0; }

/* ── Contact cards ────────────────────── */
.tq-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
@media (max-width: 640px) { .tq-contact-grid { grid-template-columns: 1fr; } }
.tq-contact-card {
    background: #fff;
    border: 1px solid rgba(35,35,35,0.07);
    border-radius: 20px; padding: 26px 22px;
    text-decoration: none; display: block;
    box-shadow: 0 2px 6px rgba(35,35,35,0.04);
    transition: all 0.25s;
}
.tq-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(35,35,35,0.1);
    border-color: rgba(77,97,244,0.2);
}
.tq-contact-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tq-contact-icon svg { width: 22px; height: 22px; }
.tq-contact-label { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(35,35,35,0.32); margin-bottom: 5px; }
.tq-contact-value { font-size: 15px; font-weight: 800; color: #232323; margin-bottom: 3px; letter-spacing: -0.01em; }
.tq-contact-note  { font-size: 12px; color: rgba(35,35,35,0.42); }

/* ── Key-value rows ───────────────────── */
.tq-kv { margin: 20px 0; display: flex; flex-direction: column; gap: 8px; }
.tq-kv-row {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 14px 18px;
    background: #f6f5f2;
    border: 1px solid rgba(35,35,35,0.07);
    border-radius: 12px;
    font-size: 14px;
}
.tq-kv-row svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.tq-kv-label { font-weight: 800; color: #232323; min-width: 110px; flex-shrink: 0; }
.tq-kv-val   { color: rgba(35,35,35,0.6); line-height: 1.55; }

/* ── Closing acknowledgment ───────────── */
.tq-closing {
    background: #232323;
    border-radius: 22px; padding: 48px 36px; text-align: center; margin-top: 44px;
    position: relative; overflow: hidden;
}
.tq-closing::before {
    content: '';
    position: absolute;
    top: -40%; right: -10%;
    width: 380px; height: 380px;
    background: radial-gradient(ellipse, rgba(77,97,244,0.25) 0%, transparent 65%);
    pointer-events: none;
}
.tq-closing::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -8%;
    width: 300px; height: 300px;
    background: radial-gradient(ellipse, rgba(215,254,124,0.18) 0%, transparent 65%);
    pointer-events: none;
}
.tq-closing-title {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 900; color: #fff;
    letter-spacing: -0.035em; margin-bottom: 12px;
    position: relative; z-index: 1;
}
.tq-closing p {
    font-size: 15px; color: rgba(255,255,255,0.5);
    max-width: 480px; margin: 0 auto 28px; line-height: 1.65;
    position: relative; z-index: 1;
}
.tq-closing-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; position: relative; z-index: 1; }

.tq-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px; background: #4d61f4; color: #fff;
    border: none; border-radius: 999px;
    font-size: 13px; font-weight: 900; font-family: inherit;
    text-decoration: none; cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.tq-btn-primary:hover { background: #3a4edf; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(77,97,244,0.3); }
.tq-btn-primary svg { width: 14px; height: 14px; }

.tq-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
    border: 1.5px solid rgba(255,255,255,0.14); border-radius: 999px;
    font-size: 13px; font-weight: 700; font-family: inherit;
    text-decoration: none; cursor: pointer;
    transition: all 0.2s;
}
.tq-btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); color: #fff; }
.tq-btn-ghost svg { width: 14px; height: 14px; }

/* ── Responsive ───────────────────────── */
@media (max-width: 480px) {
    .tq-sec { padding: 28px 20px; }
    .tq-legal-wrap { padding-left: 16px; padding-right: 16px; }
    .tq-closing { padding: 36px 24px; }
}

@media (max-width: 420px) {
    .tq-kv-row { flex-direction: column; gap: 6px; }
    .tq-kv-label { min-width: unset; }
    .tq-closing-btns { flex-direction: column; }
    .tq-closing-btns .tq-btn-primary,
    .tq-closing-btns .tq-btn-ghost { width: 100%; justify-content: center; }
    .tq-contact-card { padding: 20px 16px; }
    .tq-sec { padding: 24px 16px; }
    .tq-legal-wrap { padding: 0 12px 80px; }
    .tq-phase-pct { font-size: 38px; }
}