/* ===========================================
   GLOBAL
=========================================== */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --text: #1f2937;
    --light-text: #6b7280;
    --border: #e5e7eb;
    --bg: #f8fafc;
    --white: #ffffff;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{ font-family:'Inter',sans-serif; color:var(--text); background:#fff; line-height:1.6; }

img{ max-width:100%; }

a{ text-decoration:none; }

h1,h2,h3,h4,h5,h6{ color:#111827; }

/* ===========================================
   HEADER
=========================================== */

.navbar{ background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05); padding:15px 0; }
.navbar-brand{ font-size:26px; font-weight:700; color:#111; }
.navbar-nav .nav-link{ color:#333; font-weight:500; margin-left:20px; }
.navbar-nav .nav-link:hover{ color:var(--primary); }

/* ===========================================
   FORM (TOP SECTION)
=========================================== */

.form-top-section{ padding:50px 0 20px; background:#fff; }

.callback-form{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:12px;
    padding:35px;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
}

.callback-form h3{ font-size:24px; font-weight:700; margin-bottom:6px; }
.callback-form p{ color:var(--light-text); margin-bottom:25px; font-size:14px; }

.form-label{ font-weight:600; margin-bottom:6px; font-size:14px; }

.form-control{ height:48px; border-radius:8px; border:1px solid #ddd; }
.form-control:focus{ border-color:var(--primary); box-shadow:none; }

.phone-input-wrap{ display:flex; align-items:center; border:1px solid #ddd; border-radius:8px; overflow:hidden; background:#fff; }
.phone-input-wrap .phone-prefix{ padding:0 12px; color:var(--light-text); font-weight:600; }
.phone-input-wrap .form-control{ border:none; height:46px; }
.phone-input-wrap .form-control:focus{ box-shadow:none; }

.form-status{ padding:12px 15px; border-radius:8px; margin-bottom:20px; font-weight:600; font-size:14px; }
.form-status.success{ background:#e6f7ec; color:#0f7a3d; border:1px solid #b7e8c7; }
.form-status.error{ background:#fdecec; color:#c62828; border:1px solid #f5b8b8; }

/* Employee options */
.employee-options{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0 20px; }
.employee-options input{ display:none; }
.employee-options label{
    border:1px solid #ddd; padding:10px; border-radius:8px; text-align:center;
    cursor:pointer; transition:.3s; font-weight:600; background:#fff; font-size:14px;
}
.employee-options input:checked + label{ background:var(--primary); color:#fff; border-color:var(--primary); }

.btn-submit{
    width:100%; height:50px; background:var(--primary); color:#fff; border:none;
    border-radius:8px; font-size:16px; font-weight:600; transition:.3s;
}
.btn-submit:hover{ background:var(--primary-dark); }
.btn-submit:disabled{ opacity:.7; cursor:not-allowed; }

/* ===========================================
   HERO INTRO SECTION
=========================================== */

.hero-section{ padding:70px 0; background:#fff; }
.hero-content h1{ font-size:38px; font-weight:700; margin-bottom:16px; }
.hero-content p{ font-size:17px; color:var(--light-text); margin-bottom:24px; max-width:460px; }

.btn-outline-cta{
    display:inline-block; padding:12px 26px; border:2px solid var(--primary);
    color:var(--primary); font-weight:600; border-radius:8px; transition:.3s;
}
.btn-outline-cta:hover{ background:var(--primary); color:#fff; }

.platform-icons{ display:flex; align-items:center; gap:16px; margin-top:30px; color:var(--light-text); }
.platform-icons i{ font-size:22px; color:#374151; }

.hero-image{ text-align:center; }
.hero-image img{ max-width:100%; border-radius:16px; }

/* ===========================================
   STATS BAR
=========================================== */

.stats-bar{ padding:0 0 60px; }

.stats-box{
    background:#fff; border:1px solid var(--border); border-radius:14px; padding:30px 20px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
    display:flex; flex-wrap:wrap; justify-content:space-around; gap:20px;
}

.stat-item{ display:flex; align-items:center; gap:14px; }
.stat-item h4{ font-size:20px; font-weight:700; margin:0; }
.stat-item span{ color:var(--light-text); font-size:14px; }

.stat-icon{
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:18px; flex-shrink:0;
}
.stat-icon-green{ background:#e6f7ec; color:#16a34a; }
.stat-icon-blue{ background:#e8f0fe; color:var(--primary); }
.stat-icon-yellow{ background:#fef6e0; color:#d97706; }

/* ===========================================
   PRODUCTS
=========================================== */

.products-section{ padding:60px 0; background:var(--bg); }

.section-heading{ text-align:center; max-width:600px; margin:0 auto 45px; }
.section-heading h2{ font-size:30px; font-weight:700; margin-bottom:10px; }
.section-heading p{ color:var(--light-text); }

.product-card{ text-align:center; padding:20px 12px; margin-bottom:20px; }

.product-icon{
    width:80px; height:80px; border-radius:50%; margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center; font-size:30px;
}
.icon-yellow{ background:#fef6e0; color:#d97706; }
.icon-blue{ background:#e8f0fe; color:var(--primary); }
.icon-green{ background:#e6f7ec; color:#16a34a; }
.icon-purple{ background:#f2e9fe; color:#7c3aed; }

.product-card h5{ font-weight:700; margin-bottom:10px; font-size:17px; }
.product-card p{ color:var(--light-text); font-size:14px; margin-bottom:12px; min-height:80px; }
.product-card a{ color:var(--primary); font-weight:600; font-size:14px; }

/* ===========================================
   FEATURE ROWS
=========================================== */

.feature-rows{ padding:70px 0; }

.feature-row{ margin-bottom:80px; }
.feature-row:last-child{ margin-bottom:0; }

.feature-row h3{ font-size:26px; font-weight:700; margin-bottom:18px; }
.feature-row ul{ padding-left:20px; }
.feature-row ul li{ color:var(--light-text); margin-bottom:12px; font-size:15px; }

/* Phone mock */
.phone-mock{
    width:260px; max-width:100%; margin:0 auto; background:#fff; border:8px solid #111827;
    border-radius:32px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,.15); position:relative;
}
.phone-notch{
    width:80px; height:18px; background:#111827; border-radius:0 0 12px 12px;
    margin:0 auto; position:relative; top:0;
}
.phone-header{ background:var(--primary); color:#fff; padding:14px 16px; font-weight:600; font-size:15px; }
.phone-body{ padding:14px 16px; min-height:220px; }

.phone-summary{ display:flex; justify-content:space-between; margin-bottom:14px; font-size:12px; color:var(--light-text); text-align:center; }
.phone-summary b{ display:block; font-size:16px; color:#111827; }

.phone-row{
    display:flex; justify-content:space-between; align-items:center; padding:10px 0;
    border-bottom:1px solid var(--border); font-size:13px; color:#374151;
}
.phone-row:last-child{ border-bottom:none; }

.phone-total{ margin-top:12px; background:#16a34a; color:#fff; text-align:center; padding:10px; border-radius:8px; font-weight:600; font-size:14px; }

.pill{ padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.pill-green{ background:#e6f7ec; color:#16a34a; }
.pill-red{ background:#fdecec; color:#c62828; }

.chat-bubble{
    background:var(--bg); border:1px solid var(--border); border-radius:10px;
    padding:10px 14px; margin-bottom:10px; font-size:13px; color:#374151;
}

/* ===========================================
   TESTIMONIAL
=========================================== */

.testimonial-section{ padding:20px 0 70px; background:var(--bg); }

.testimonial-box{
    max-width:700px; margin:0 auto; display:flex; align-items:center; gap:20px;
}

.testimonial-content{ text-align:center; flex:1; }

.testimonial-avatar{
    width:64px; height:64px; border-radius:50%; margin:0 auto 16px; display:block;
    object-fit:cover;
}

.testimonial-quote{ font-size:17px; color:#374151; font-style:italic; margin-bottom:14px; }
.testimonial-author{ font-weight:600; color:#111827; font-size:14px; }

.testimonial-arrow{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
    background:#fff; color:var(--text); flex-shrink:0; transition:.2s;
}
.testimonial-arrow:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ===========================================
   CTA BANNER
=========================================== */

.cta-banner{ padding:0 0 60px; }

.cta-inner{
    background:#e8f0fe; border-radius:14px; padding:30px 35px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
    background-image: radial-gradient(circle, #c9dbfc 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    background-color:#eaf1ff;
}

.cta-inner h4{ font-size:22px; font-weight:700; margin:0; }

.btn-cta{
    background:var(--primary); color:#fff; padding:13px 26px; border-radius:8px;
    font-weight:600; transition:.3s;
}
.btn-cta:hover{ background:var(--primary-dark); }

/* ===========================================
   FEATURED ON
=========================================== */

.featured-on{ padding:0 0 60px; text-align:center; }
.featured-on h6{ color:var(--light-text); text-transform:uppercase; letter-spacing:1px; font-size:13px; margin-bottom:25px; }

.featured-logos{ display:flex; justify-content:center; flex-wrap:wrap; gap:40px; }
.featured-logos span{ font-weight:700; font-size:18px; color:#9ca3af; font-family:Georgia, serif; }

/* ===========================================
   FOOTER
=========================================== */

footer{ background:#111827; color:#d1d5db; padding:50px 0 25px; }
footer a{ color:#d1d5db; }
footer a:hover{ color:#fff; }

.footer-brand{ color:#fff; font-size:22px; font-weight:700; margin-bottom:14px; }
.footer-text{ font-size:14px; color:#9ca3af; }

footer h6{ color:#fff; margin-bottom:14px; font-size:15px; }

.social-icons{ display:flex; gap:12px; }
.social-icons a{
    width:36px; height:36px; border-radius:50%; background:#1f2937;
    display:flex; align-items:center; justify-content:center; transition:.3s;
}
.social-icons a:hover{ background:var(--primary); }

footer hr{ border-color:#374151; margin:30px 0 20px; }

.footer-bottom{ font-size:13px; color:#9ca3af; }
.footer-bottom p{ margin-bottom:8px; }

/* ===========================================
   THANK YOU PAGE
=========================================== */

.thankyou-section{ padding:100px 0; text-align:center; }
.thankyou-icon{
    width:90px; height:90px; border-radius:50%; background:#e6f7ec; color:#16a34a;
    display:flex; align-items:center; justify-content:center; font-size:40px; margin:0 auto 25px;
}
.thankyou-section h1{ font-size:30px; margin-bottom:14px; }
.thankyou-section p{ color:var(--light-text); margin-bottom:30px; }

/* ===========================================
   RESPONSIVE
=========================================== */

@media(max-width:991px){
    .hero-content{ text-align:center; margin-bottom:40px; }
    .hero-content p{ margin-left:auto; margin-right:auto; }
    .platform-icons{ justify-content:center; }
    .feature-row .col-lg-5{ margin-bottom:30px; }
    .feature-row h3, .feature-row ul{ text-align:center; }
    .feature-row ul{ list-style-position:inside; padding-left:0; }
    .testimonial-box{ flex-direction:column; }
    .stats-box{ flex-direction:column; align-items:flex-start; }
}

@media(max-width:768px){
    .hero-content h1{ font-size:30px; }
    .employee-options{ grid-template-columns:repeat(2,1fr); }
    .callback-form{ padding:24px; }
    .cta-inner{ flex-direction:column; text-align:center; }
}

@media(max-width:576px){
    .navbar-brand{ font-size:22px; }
    .employee-options{ grid-template-columns:1fr; }
    .callback-form{ padding:20px; }
}

/* Claim Steps Section */
.claim-steps-section {
    background-color: #f8f9fa; /* Matches Bootstrap bg-light */
    padding: 60px 0;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}
.step-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 30px 20px;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
    text-align: center;
}
.step-card:hover {
    transform: translateY(-5px);
}
.step-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: #e3f2fd; /* Light blue */
    color: #0d6efd; /* Primary blue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 20px auto;
}
.step-card h5 {
    font-weight: 700;
    margin-bottom: 15px;
    color: #2c3e50;
}
.step-card p {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0;
}
.section-title {
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 10px;
}
.section-subtitle {
    color: #6c757d;
    margin-bottom: 40px;
}