/* ===================== LinkWatch Landing Page ===================== */
/* Design tokens inherited from style.css — no duplication of :root vars */

img { max-width: 100%; display: block; }

/* ---------- Hero ---------- */
.lw-hero-section {
    padding: 70px 0 40px;
    background: linear-gradient(180deg, #FFF7F6 0%, var(--bg-color, #FDFDFD) 65%);
    overflow: hidden;
}
.lw-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 50px;
    align-items: center;
}
.lw-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #EFFCF6;
    color: #004440;
    border-radius: 24px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 22px;
}
.lw-hero-eyebrow .fa-solid { color: #33A853; font-size: 11px; }
.lw-main-hero-text { font-size: 44px; font-weight: 600; line-height: 1.5; margin: 0 0 20px; }
.lw-hero-desc { font-size: 17px; font-weight: 300; color: #716F6F; line-height: 2; margin-bottom: 32px; max-width: 560px; }
.lw-hero-ctas { display: flex; gap: 16px; margin-bottom: 34px; flex-wrap: wrap; }
.lw-hero-trust { display: flex; gap: 28px; flex-wrap: wrap; color: #7d7979; font-size: 14px; }
.lw-hero-trust span { display: flex; align-items: center; gap: 8px; }
.lw-hero-trust i { color: #33A853; }

.lw-hero-visual { position: relative; }
.lw-browser-frame {
    background: #FFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0,0,0,0.05), -4px 4px 25px -4px rgba(0,0,0,0.03);
    border: 1px solid #DBDFE4;
}
.lw-browser-frame .lw-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #F1F3F6;
    border-bottom: 1px solid #DBDFE4;
}
.lw-browser-frame .lw-browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #DBDFE4; }
.lw-browser-frame img { width: 100%; display: block; }
.lw-floating-badge {
    position: absolute;
    background: #FFF;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}
.lw-floating-badge .lw-badge-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #FFF;
}
.lw-floating-badge.lw-health { top: -18px; right: -14px; }
.lw-floating-badge.lw-health .lw-badge-icon { background: #33A853; }
.lw-floating-badge.lw-gap { bottom: 12px; left: -30px; }
.lw-floating-badge.lw-gap .lw-badge-icon { background: #C91D13; }

/* ---------- Stats bar ---------- */
.lw-stats-section {
    padding: 46px 0;
    background: #FFF;
    border-top: 1px solid #F1F3F6;
    border-bottom: 1px solid #F1F3F6;
}
.lw-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.lw-stat-item .lw-stat-num { font-size: 34px; font-weight: 700; color: #C91D13; }
.lw-stat-item .lw-stat-label { font-size: 14px; color: #716F6F; margin-top: 6px; }

/* ---------- Global section spacing ---------- */
section { padding: 80px 0; }

/* ---------- Section subtitle ---------- */
.lw-section-subtitle {
    text-align: center;
    color: #716F6F;
    font-size: 17px;
    font-weight: 300;
    max-width: 720px;
    margin: 0 auto 60px;
    line-height: 1.9;
}

/* ---------- Problems grid ---------- */
.lw-problems-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lw-problem-card {
    background: #FFF;
    border-radius: 10px;
    padding: 30px 24px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0,0,0,0.05);
    text-align: right;
}
.lw-problem-card .lw-p-icon {
    width: 48px; height: 48px; border-radius: 10px;
    background: #FDECEA; color: #C91D13;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 18px;
}
.lw-problem-card h4 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.lw-problem-card p { font-size: 14px; font-weight: 300; color: #716F6F; line-height: 1.9; margin: 0; }

/* ---------- Features grid ---------- */
.lw-features-section { background: #FDFDFD; }
.lw-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lw-feature-card {
    background: #FFF;
    border-radius: 10px;
    padding: 28px 22px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0,0,0,0.05);
    border: 1px solid #F1F3F6;
}
.lw-feature-card .lw-f-icon {
    width: 50px; height: 50px; border-radius: 10px;
    background: linear-gradient(135deg, #C91D13, #e0453a);
    color: #FFF;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 18px;
}
.lw-feature-card h4 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.lw-feature-card p { font-size: 14px; font-weight: 300; color: #716F6F; line-height: 1.9; margin: 0; }

/* ---------- Spotlight sections ---------- */
.lw-spotlight-section .lw-spotlight-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.lw-spotlight-section.lw-reverse .lw-spotlight-grid .lw-spotlight-media { order: 2; }
.lw-spotlight-section.lw-reverse .lw-spotlight-grid .lw-spotlight-text { order: 1; }
.lw-spotlight-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #EFFCF6; color: #004440; border-radius: 24px; padding: 7px 18px;
    font-size: 13px; font-weight: 700; margin-bottom: 18px;
}
.lw-spotlight-text h3 { font-size: 30px; font-weight: 600; margin: 0 0 18px; line-height: 1.5; }
.lw-spotlight-text p { font-size: 16px; font-weight: 300; color: #716F6F; line-height: 2; margin-bottom: 24px; }
.lw-spotlight-list { list-style: none; padding: 0; margin: 0 0 28px; }
.lw-spotlight-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; margin-bottom: 14px; color: #23262F; }
.lw-spotlight-list li i { color: #33A853; margin-top: 4px; }
.lw-spotlight-media img {
    width: 100%;
    /*height: 400px;*/
    object-fit: cover;
    object-position: left top;
    border-radius: 12px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0,0,0,0.05), -4px 4px 25px -4px rgba(0,0,0,0.03);
    border: 1px solid #DBDFE4;
}

/* ---------- Golden feature (Link Gap) ---------- */
.lw-golden-section {
    background: linear-gradient(135deg, #C91D13 0%, #7a0f09 100%);
    border-radius: 20px; padding: 60px; color: #FFF; position: relative; overflow: hidden;
}
.lw-golden-section::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.12), transparent 45%);
}
.lw-golden-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.15); border-radius: 24px;
    padding: 7px 18px; font-size: 13px; font-weight: 700; margin-bottom: 20px;
}
.lw-golden-badge i { color: #FFD700; }
.lw-golden-content h3 { font-size: 32px; font-weight: 700; margin: 0 0 16px; }
.lw-golden-content p { font-size: 16px; font-weight: 300; line-height: 2; opacity: 0.92; max-width: 560px; margin-bottom: 26px; }
.lw-golden-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; position: relative; z-index: 1; }
.lw-golden-media img { width: 100%; height: 380px; object-fit: cover; object-position: left top; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.btn-primary.lw-golden-btn {
    background: #FFF !important; color: #C91D13 !important; border-radius: 6px; padding: 13px 30px;
    font-size: 17px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px;
}
.btn-primary.lw-golden-btn:hover { background: #f2f2f2 !important; }

/* ---------- Button overrides for LinkWatch page (exact from original) ---------- */
/* These load AFTER style.css via @section MyStyle, same specificity wins by cascade order */
.btn-primary {
    background: var(--primary-color);
    border-radius: 6px;
    color: #FFF;
    font-weight: 400;
    font-size: 20px;
    padding: 14px 34px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0px 12px 24px 0px rgba(199, 29, 19, 0.16);
}
.btn-primary:hover {
    background: #A50B00;
    color: #fff !important;
}
.btn-primary-o {
    background: #FFF;
    border-radius: 5px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-size: 16px;
    padding: 13px 33px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.btn-primary-o:hover {
    background: var(--primary-color);
    color: #FFF !important;
}
/* White-outline variant for dark backgrounds (final CTA) */
.lw-btn-white {
    border-color: #FFF;
    color: #FFF !important;
}
.lw-btn-white:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFF !important;
}
.btn-lg-primary { font-size: 20px; padding: 16px 40px; }

/* ---------- Steps grid ---------- */
.lw-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.lw-step-card { text-align: center; padding: 0 10px; }
.lw-step-num {
    width: 56px; height: 56px; border-radius: 50%;
    background: #FFF; border: 2px solid #C91D13;
    color: #C91D13;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; margin: 0 auto 20px;
}
.lw-step-card h4 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.lw-step-card p { font-size: 14px; font-weight: 300; color: #716F6F; line-height: 1.8; margin: 0; }

/* ---------- Comparison table ---------- */
.lw-compare-wrap { overflow-x: auto; border-radius: 12px; box-shadow: 0px 1.5px 20.5px 0px rgba(0,0,0,0.05); }
table.lw-compare-table { width: 100%; border-collapse: collapse; background: #FFF; min-width: 720px; }
table.lw-compare-table th, table.lw-compare-table td {
    padding: 18px 20px; text-align: center; font-size: 15px; border-bottom: 1px solid #F1F3F6;
}
table.lw-compare-table th:first-child, table.lw-compare-table td:first-child { text-align: right; font-weight: 500; }
table.lw-compare-table thead th { background: #FAFAFA; font-weight: 700; font-size: 15px; }
table.lw-compare-table thead th.lw-col { color: #C91D13; background: #FDECEA; }
table.lw-compare-table td.lw-col { background: #FFF7F6; font-weight: 600; color: #33A853; }
table.lw-compare-table i.fa-check { color: #33A853; }
table.lw-compare-table i.fa-xmark { color: #C4C4C4; }

/* ---------- Credit purchase widget ---------- */
.lw-credit-purchase-card {
    background: #FFF; border-radius: 16px; padding: 46px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0,0,0,0.05), -4px 4px 25px -4px rgba(0,0,0,0.03);
    border: 1px solid #F1F3F6;
}
.lw-credit-purchase-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }
.lw-credit-info h3 { font-size: 24px; font-weight: 700; margin: 0 0 16px; }
.lw-credit-info p { font-size: 15px; font-weight: 300; color: #716F6F; line-height: 2; margin-bottom: 22px; }
.lw-credit-perk-note {
    display: flex; align-items: flex-start; gap: 12px;
    background: #EFFCF6; color: #004440;
    border-radius: 10px; padding: 16px 18px;
    font-size: 14px; font-weight: 500; line-height: 1.9;
}
.lw-credit-perk-note i { color: #33A853; margin-top: 3px; }

.lw-credit-widget {
    background: #FAFAFA; border: 1px solid #DBDFE4;
    border-radius: 14px; padding: 30px;
}
.lw-credit-widget-label { font-size: 14px; font-weight: 500; color: #23262F; margin-bottom: 14px; }
.lw-credit-stepper {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin-bottom: 18px;
}
.lw-credit-stepper input {
    width: 100px; text-align: center; font-size: 22px; font-weight: 700; color: #23262F;
    border: none; background: transparent;
}
.lw-stepper-btn {
    width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid #DBDFE4; background: #FFF;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #23262F; cursor: pointer;
}
.lw-stepper-btn:hover { background: #FDECEA; border-color: #C91D13; }
.lw-credit-quick-select { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.lw-credit-quick-select button {
    border: 1px solid #DBDFE4; background: #FFF; border-radius: 8px;
    padding: 8px 16px; font-size: 14px; font-weight: 500; color: #23262F;
    cursor: pointer; font-family: 'Vazirmatn', sans-serif;
}
.lw-credit-quick-select button:hover {
    background: #FDECEA; border-color: #C91D13;
}
.lw-credit-quick-select button.lw-active {
    background: #C91D13; color: #FFF; border-color: #C91D13;
}
.lw-credit-checkout { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.lw-credit-checkout .btn-primary { flex: 1; padding: 12px 20px; font-size: 16px; }
.lw-credit-total { font-size: 18px; font-weight: 700; color: #33A853; white-space: nowrap; }
.lw-credit-per-unit { font-size: 12px; color: #716F6F; text-align: center; }

/* ---------- Testimonials ---------- */
.lw-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lw-testi-card {
    background: #FFF; border-radius: 10px; padding: 28px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0,0,0,0.05);
    display: flex; flex-direction: column; height: 100%;
}
.lw-testi-stars { color: #FAA61B; font-size: 13px; margin-bottom: 14px; }
.lw-testi-card p { font-size: 15px; font-weight: 300; line-height: 1.95; color: #23262F; margin-bottom: 20px; flex: 1 0 auto; }
.lw-testi-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.lw-testi-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: #F1F3F6; display: flex; align-items: center; justify-content: center;
    color: #716F6F; font-size: 15px; font-weight: 700;
    overflow: hidden; flex-shrink: 0;
}
.lw-testi-avatar img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.lw-testi-person span { font-size: 14px; font-weight: 700; display: block; }
.lw-testi-person small { font-size: 12px; color: #716F6F; font-weight: 300; }

/* ---------- FAQ ---------- */
.lw-faq-wrap { max-width: 860px; margin: 0 auto; }
.lw-faq-item {
    background: #FFF; border-radius: 10px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0,0,0,0.05);
    margin-bottom: 14px; overflow: hidden;
}
.lw-faq-question {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; padding: 20px 24px; font-size: 16px; font-weight: 500;
}
.lw-faq-question i { color: #C91D13; transition: transform 0.3s !important; }
.lw-faq-item.lw-open .lw-faq-question i { transform: rotate(180deg); }
.lw-faq-answer { max-height: 0; overflow: hidden; padding: 0 24px; }
.lw-faq-item.lw-open .lw-faq-answer { max-height: 300px; padding: 0 24px 22px; }
.lw-faq-answer p { font-size: 14px; font-weight: 300; color: #716F6F; line-height: 1.95; margin: 0; }

/* ---------- Final CTA ---------- */
.lw-final-cta-section {
    background: #0E243A; border-radius: 20px; text-align: center;
    padding: 70px 40px; color: #FFF;
}
.lw-final-cta-section h3 { font-size: 32px; font-weight: 600; margin: 0 0 16px; }
.lw-final-cta-section p { font-size: 16px; font-weight: 300; opacity: 0.85; max-width: 560px; margin: 0 auto 32px; line-height: 1.9; }
.lw-final-cta-section .lw-hero-ctas { justify-content: center; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1200px) {
    .lw-problems-grid, .lw-features-grid { grid-template-columns: repeat(2, 1fr); }
    .lw-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .lw-testi-grid, .lw-steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
    .lw-hero-grid, .lw-spotlight-grid, .lw-golden-grid, .lw-credit-purchase-grid { grid-template-columns: 1fr; }
    .lw-hero-visual { order: -1; }
    .lw-spotlight-section.lw-reverse .lw-spotlight-grid .lw-spotlight-media,
    .lw-spotlight-section.lw-reverse .lw-spotlight-grid .lw-spotlight-text { order: initial; }
    .lw-main-hero-text { font-size: 34px; }
    .head-section-title { font-size: 32px; }
    .lw-golden-section { padding: 40px 24px; }
}
@media (max-width: 768px) {
    .lw-problems-grid, .lw-features-grid, .lw-stats-grid,
    .lw-testi-grid, .lw-steps-grid { grid-template-columns: 1fr; }
    section { padding: 50px 0; }
    .lw-main-hero-text { font-size: 28px; }
    .lw-hero-desc { font-size: 15px; }
    .head-section-title { font-size: 26px; flex-direction: column; gap: 10px; }
    .lw-hero-ctas, .lw-final-cta-section .lw-hero-ctas { flex-direction: column; align-items: stretch; }
    .btn-primary, .btn-primary-o { justify-content: center; }
    .lw-floating-badge { display: none; }
    .lw-golden-content h3 { font-size: 24px; }
    .lw-credit-purchase-card { padding: 26px; }
    .lw-spotlight-media img,
    .lw-golden-media img { height: 260px; }
}