/* ============================================================
   base.css — Design tokens, reset, typography, buttons, utils
   ============================================================ */

/* ── Custom Properties ── */
:root {
    --blue:        #037EF3;
    --blue-dark:   #025fc4;
    --blue-light:  #e8f4fd;
    --teal:        #0CB9C1;
    --orange:      #F48924;
    --red:         #F85A40;
    --purple:      #7552CC;
    --green:       #00C16E;
    --yellow:      #FFC845;
    --dark:        #111827;
    --dark-gray:   #52565E;
    --mid-gray:    #9ca3af;
    --light-gray:  #f3f4f6;
    --white:       #ffffff;

    --gradient:      linear-gradient(135deg, #037EF3 0%, #0CB9C1 100%);
    --gradient-warm: linear-gradient(135deg, #F48924 0%, #F85A40 100%);
    --gradient-dark: linear-gradient(135deg, #0a0a1a 0%, #0c3e82 50%, #037EF3 100%);

    --shadow-sm: 0 1px 8px  rgba(0,0,0,0.06);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.14);

    --radius:    18px;
    --radius-sm: 10px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    color: var(--dark);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }

/* ── Layout ── */
.container { max-width: 1200px; margin: 0 auto; }
section { padding: 6rem 2rem; }
@media (max-width: 768px) { section { padding: 3.5rem 1.25rem; } }
@media (max-width: 480px) { section { padding: 2.75rem 1.25rem; } }

/* ── Tag Chips ── */
.tag {
    display: inline-block;
    background: var(--blue-light); color: var(--blue);
    font-size: 0.73rem; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase; padding: 0.35rem 1rem; border-radius: 50px;
    margin-bottom: 0.85rem;
}
.tag-light { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }
.tag-dark  { background: rgba(3,126,243,0.18);   color: var(--teal); }
.tag-green { background: rgba(0,193,110,0.12);   color: var(--green); }
.tag-orange{ background: rgba(244,137,36,0.12);  color: var(--orange); }

/* ── Section Typography ── */
.section-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800; line-height: 1.18; letter-spacing: -0.02em;
    margin-bottom: 0.85rem;
}
.section-sub {
    font-size: 1.05rem; color: var(--dark-gray);
    max-width: 590px; line-height: 1.75;
}
.tc           { text-align: center; }
.tc .section-sub { margin: 0 auto; }

@media (max-width: 480px) {
    .section-title { margin-bottom: 0.6rem; }
    .section-sub   { font-size: 0.95rem; }
}

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.88rem 2rem; border-radius: 50px;
    font-family: var(--font); font-weight: 700; font-size: 0.95rem;
    transition: var(--transition); cursor: pointer; border: none;
    white-space: nowrap;
}
.btn svg { flex-shrink: 0; }
.btn-sm { padding: 0.6rem 1.4rem; font-size: 0.85rem; }

.btn-blue {
    background: var(--gradient); color: white;
    box-shadow: 0 4px 16px rgba(3,126,243,0.35);
}
.btn-blue:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(3,126,243,0.45); }

.btn-white {
    background: white; color: var(--blue);
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
.btn-white:hover { background: var(--yellow); color: var(--dark); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.22); }

.btn-yellow {
    background: var(--yellow); color: var(--dark);
    box-shadow: 0 4px 16px rgba(255,200,69,0.4);
}
.btn-yellow:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(255,200,69,0.5); }

.btn-outline {
    background: transparent; color: var(--blue);
    border: 2px solid var(--blue);
}
.btn-outline:hover { background: var(--blue); color: white; transform: translateY(-3px); }

.btn-outline-white {
    background: transparent; color: white;
    border: 2px solid rgba(255,255,255,0.45);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: white; transform: translateY(-3px); }

.btn-green {
    background: var(--green); color: white;
    box-shadow: 0 4px 16px rgba(0,193,110,0.35);
}
.btn-green:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,193,110,0.45); }

.btn-orange {
    background: var(--gradient-warm); color: white;
    box-shadow: 0 4px 16px rgba(244,137,36,0.35);
}
.btn-orange:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(244,137,36,0.45); }

/* ── Scroll Reveal ── */
.reveal       { opacity: 0; transform: translateY(44px); transition: opacity .75s ease, transform .75s ease; }
.reveal-left  { opacity: 0; transform: translateX(-44px); transition: opacity .75s ease, transform .75s ease; }
.reveal-right { opacity: 0; transform: translateX(44px);  transition: opacity .75s ease, transform .75s ease; }
.reveal.shown,
.reveal-left.shown,
.reveal-right.shown { opacity: 1; transform: none; }

/* Stagger delays */
.d1 { transition-delay: 0.10s !important; }
.d2 { transition-delay: 0.20s !important; }
.d3 { transition-delay: 0.30s !important; }
.d4 { transition-delay: 0.40s !important; }
.d5 { transition-delay: 0.50s !important; }

/* ── Keyframes ── */
@keyframes fadeSlideDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideUp   { from{opacity:0;transform:translateY(32px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn        { from{opacity:0} to{opacity:1} }
@keyframes pulseDot      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.3)} }
@keyframes float         { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-28px) rotate(4deg)} }
@keyframes scrollBounce  { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(18px);opacity:0} }
@keyframes spin          { to { transform: rotate(360deg); } }

/* ── FAQ Accordion (shared across all pages) ── */
.faq-section { background: var(--light-gray); }

.faq-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem; margin-top: 3.5rem;
}

.faq-item {
    background: white; border-radius: var(--radius-sm);
    border: 2px solid #e5e7eb;
    transition: var(--transition);
    cursor: pointer; overflow: hidden;
}
.faq-item:hover { border-color: var(--blue); }
.faq-item.open  { border-color: var(--blue); box-shadow: 0 4px 16px rgba(3,126,243,0.1); }

.faq-q {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1.25rem 1.5rem;
    font-size: 0.95rem; font-weight: 700; color: var(--dark);
    background: white;
}

.faq-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--light-gray); color: var(--dark-gray);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 400; flex-shrink: 0; line-height: 1;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.faq-item.open .faq-icon {
    transform: rotate(45deg); background: var(--blue); color: white;
}

.faq-a {
    font-size: 0.9rem; color: var(--dark-gray); line-height: 1.8;
    max-height: 0; overflow: hidden;
    padding: 0 1.5rem;
    background: var(--blue-light);
    border-top: 2px solid transparent;
    transition: max-height 0.35s ease, padding 0.3s ease, border-color 0.25s ease;
}
.faq-item.open .faq-a {
    max-height: 400px;
    padding: 1.25rem 1.5rem;
    border-top-color: rgba(3,126,243,0.15);
}

@media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .faq-grid { margin-top: 2rem; gap: 0.75rem; } }