/*
    SubmitInMe — shared design system
    Link this file on every page that uses the SIM component classes
    (card, icon-box, icon-list, check-list, icon-heading, badge, buttons,
    hero component, reveal-on-scroll animation, toast, FAQ accordion).

    Requires (loaded before this file, in this order):
      <script src="https://cdn.tailwindcss.com"></script>
      <script src="https://unpkg.com/lucide@1.26.0"></script>
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    Page-specific note: .hero-bg-image has no background-image set here on
    purpose — each page should set its own hero image inline, e.g.
      <div class="hero-bg-image" style="background-image:url('...')"></div>
*/

body {
    font-family: 'Inter', sans-serif !important;
    background: #ffffff;
    color: #1e293b;
}
p {
    max-width: none !important; /* Removes the 65ch restriction */
    width: 100% !important; /* Forces the element to span the full width */
}
.card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.card:hover {
    border-color: #bfdbfe;
    box-shadow: 0 8px 30px rgba(59,130,246,0.08);
    transform: translateY(-2px);
}
.card-static {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.badge { background: #eff6ff; border: 1px solid #bfdbfe; }

.icon-list { list-style: none; padding: 0 0 0 1rem; }
.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}
.icon-list li::before {
    content: "";
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    background-color: #2563eb;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>") center / contain no-repeat;
}

.check-list { list-style: none; padding: 0 0 0 1rem; margin-top: 0.75rem; }
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #64748b;
    margin-bottom: 0.6rem;
}
.check-list li::before {
    content: "";
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    background-color: #059669;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}

.icon-heading {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #0f172a;
}
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, #93c5fd, #60a5fa);
    box-shadow: 0 4px 12px -4px rgba(59,130,246,0.3);
    flex-shrink: 0;
}
.icon-box i {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
}
.icon-box.indigo { background: linear-gradient(135deg, #c7d2fe, #818cf8); box-shadow: 0 4px 12px -4px rgba(99,102,241,0.3); }
.icon-box.amber { background: linear-gradient(135deg, #fde68a, #fbbf24); box-shadow: 0 4px 12px -4px rgba(245,158,11,0.3); }
.icon-box.emerald { background: linear-gradient(135deg, #a7f3d0, #34d399); box-shadow: 0 4px 12px -4px rgba(16,185,129,0.3); }
.icon-box.violet { background: linear-gradient(135deg, #ddd6fe, #a78bfa); box-shadow: 0 4px 12px -4px rgba(139,92,246,0.3); }
.icon-box.teal { background: linear-gradient(135deg, #99f6e4, #2dd4bf); box-shadow: 0 4px 12px -4px rgba(20,184,166,0.3); }
.icon-box.lg { width: 3.75rem; height: 3.75rem; border-radius: 1.125rem; }
.icon-box.lg i { width: 1.75rem; height: 1.75rem; }
.icon-box.sm { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; }
.icon-box.sm i { width: 1.125rem; height: 1.125rem; }

.btn-primary {
    background: linear-gradient(to bottom, #3b82f6, #2563eb);
    box-shadow: 0 4px 14px -2px rgba(37,99,235,0.35);
}
.btn-primary:hover {
    background: linear-gradient(to bottom, #60a5fa, #3b82f6);
    box-shadow: 0 6px 20px -2px rgba(37,99,235,0.45);
}
.btn-outline-light {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
}
.btn-outline-light:hover {
    background: #f8fafc;
    border-color: #93c5fd;
}
.btn-whatsapp {
    background: #25d366;
    box-shadow: 0 4px 14px -2px rgba(37,211,102,0.35);
}
.btn-whatsapp:hover {
    background: #20bd5a;
    box-shadow: 0 6px 20px -2px rgba(37,211,102,0.45);
}

.section-alt { background: #f8fafc; }
.row-hover { transition: background 0.2s; }
.row-hover:hover { background: #f8fafc; }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1);
}
.faq-answer.open { max-height: 2200px; }

.toast {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.toast.show { transform: translateY(0); opacity: 1; }

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(25px);
    transition: all 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* ===== HERO ===== */
.hero-section {
    position: relative;
    min-height: 680px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #0a1628;
}
.hero-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 0;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg,
            rgba(7,14,30,0.94) 0%,
            rgba(7,14,30,0.90) 25%,
            rgba(7,14,30,0.78) 50%,
            rgba(7,14,30,0.45) 70%,
            rgba(7,14,30,0.20) 85%,
            rgba(7,14,30,0.10) 100%
        );
}
.hero-bottom-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 1;
    background: linear-gradient(to top, rgba(7,14,30,0.5) 0%, transparent 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
}
.hero-text-shadow {
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.hero-subtle-shadow {
    text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}

.trust-badge {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    transition: border-color 0.2s;
}
.trust-badge:hover { border-color: #e2e8f0; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

@media (max-width: 1023px) {
    .hero-section { min-height: auto; }
    .hero-bg-image {
        background-position: center center;
        opacity: 0.3;
    }
    .hero-overlay {
        background: linear-gradient(180deg,
            rgba(7,14,30,0.92) 0%,
            rgba(7,14,30,0.88) 60%,
            rgba(7,14,30,0.95) 100%
        );
    }
}