* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background: #f5f7fb;
    color: #172033;
}

.container {
    max-width: 1180px;
    margin: auto;
    padding: 0 20px;
}


/* =========================================
   NAVBAR
========================================= */

.navbar {
    background: #ffffff;
    border-bottom: 1px solid #e5e9f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-inner {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 25px;
    font-weight: 800;
}

.logo span {
    color: #2864e8;
}

.tagline {
    margin: 3px 0 0;
    color: #7b8598;
    font-size: 12px;
}

.more-link {
    text-decoration: none;
    color: #2864e8;
    font-weight: 700;
}


/* =========================================
   HERO
========================================= */

.hero {
    padding: 45px 0 25px;
}

.eyebrow {
    color: #2864e8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.hero h1 {
    font-size: 44px;
    margin: 10px 0;
}

.hero p {
    color: #68758a;
    max-width: 700px;
    line-height: 1.6;
}


/* =========================================
   TABS
========================================= */

.calculator-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 20px 0;
}

.tab {
    border: 1px solid #dce2ec;
    background: #ffffff;
    border-radius: 12px;
    padding: 11px 15px;
    cursor: pointer;
    font-weight: 700;
    color: #536078;
}

.tab:hover {
    border-color: #2864e8;
}

.tab.active {
    background: #2864e8;
    color: white;
    border-color: #2864e8;
}


/* =========================================
   CALCULATOR PANEL
========================================= */

.calculator-panel {
    display: none;
    background: white;
    border: 1px solid #e1e6ee;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 40px;
    box-shadow: 0 8px 30px rgba(30, 50, 80, 0.05);
}

.calculator-panel.active {
    display: block;
}

.panel-header {
    margin-bottom: 22px;
}

.panel-header h2 {
    margin: 0 0 5px;
}

.panel-header p {
    margin: 0;
    color: #778196;
}


/* =========================================
   GENERAL LAYOUT
========================================= */

.calculator-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 25px;
    align-items: start;
}

.form-box {
    background: #f8faff;
    border: 1px solid #e4e9f2;
    border-radius: 16px;
    padding: 20px;
    min-width: 0;
}

.result-box {
    min-width: 0;
    width: 100%;
}


/* =========================================
   FIELDS
========================================= */

.field {
    margin-bottom: 16px;
}

.field label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
}

.field input,
.field select {
    width: 100%;
    padding: 12px;
    border: 1px solid #d5dce7;
    border-radius: 10px;
    background: white;
    font-size: 15px;
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: #2864e8;
}

.field input[type="range"] {
    padding: 0;
    accent-color: #2864e8;
}


/* =========================================
   RESULTS
========================================= */

.results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.metric {
    padding: 17px;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
    background: #ffffff;
    margin-bottom: 12px;
    min-width: 0;
}

.metric span {
    display: block;
    color: #788398;
    font-size: 12px;
    margin-bottom: 7px;
}

.metric strong {
    font-size: 21px;
    overflow-wrap: anywhere;
}

.metric.primary {
    grid-column: 1 / -1;
    background: #edf3ff;
    border-color: #cfe0ff;
}

.metric.primary strong {
    font-size: 31px;
    color: #1d58d4;
}


/* =========================================
   BREAKDOWN
========================================= */

.breakdown-bar {
    height: 13px;
    background: #e8edf5;
    border-radius: 20px;
    overflow: hidden;
    margin: 18px 0 8px;
}

.breakdown-bar div {
    height: 100%;
    background: #2864e8;
    width: 50%;
}

.breakdown-label {
    display: flex;
    justify-content: space-between;
    color: #68758a;
    font-size: 13px;
}


/* =========================================
   TABLE
========================================= */

.quick {
    margin-top: 20px;
}

.quick h3 {
    font-size: 15px;
}

.quick table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.quick th,
.quick td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #e7ebf1;
}

.quick th {
    color: #6f7a8e;
}


/* =========================================
   NOTE
========================================= */

.note {
    color: #7a8496;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 14px;
}


/* =========================================
   PARALLEL INVESTMENT
========================================= */

.parallel-investment-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e3e8f0;
}

.section-header {
    margin-bottom: 25px;
}

.section-header h3 {
    margin: 0 0 5px;
    font-size: 20px;
    color: #172033;
}

.section-header p {
    margin: 0;
    color: #778196;
    font-size: 14px;
}


/* -----------------------------------------
   IMPORTANT:
   Keep Parallel Investment side-by-side
   ----------------------------------------- */

.parallel-investment-section .calculator-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 25px !important;
    align-items: start !important;
    width: 100% !important;
}

.parallel-investment-section .calculator-layout > .form-box {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.parallel-investment-section .calculator-layout > .result-box {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}


/* =========================================
   STRATEGY BUTTONS
========================================= */

.strategy-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.strategy-btn {
    padding: 10px 16px;
    border: 1px solid #d5dce7;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: #536078;
    transition: all 0.3s ease;
}

.strategy-btn:hover {
    border-color: #2864e8;
    color: #2864e8;
}

.strategy-btn.active {
    background: #27ae60;
    color: white;
    border-color: #27ae60;
}


/* =========================================
   RETURN HINT
========================================= */

.hint-text {
    font-size: 12px;
    color: #7a8496;
    margin-top: 8px;
    line-height: 1.4;
}


/* =========================================
   PARALLEL INVESTMENT IDEA BOX
========================================= */

.parallel-idea-box {
    margin-top: 16px;
    padding: 15px 16px;

    background: linear-gradient(
        135deg,
        #f7f5ff 0%,
        #f4f7ff 100%
    );

    border: 1px solid #dfe4ff;
    border-left: 4px solid #6366f1;
    border-radius: 12px;

    box-shadow: 0 4px 14px rgba(50, 60, 120, 0.05);
}

.parallel-idea-title {
    font-size: 14px;
    font-weight: 800;
    color: #252b48;
    margin-bottom: 8px;
}

.parallel-idea-main {
    margin: 0;
    color: #596276;
    font-size: 12px;
    line-height: 1.55;
}

.parallel-idea-main strong {
    color: #252b48;
}

.parallel-benefits {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.parallel-benefit {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4e586d;
    font-size: 11px;
    line-height: 1.4;
}

.benefit-icon {
    width: 17px;
    height: 17px;
    min-width: 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e2f7e8;
    color: #209653;

    font-size: 10px;
    font-weight: 800;
}

.parallel-strategy-note {
    margin-top: 12px;
    padding: 9px 10px;

    background: rgba(255, 255, 255, 0.85);

    border: 1px solid #e2e6f2;
    border-radius: 9px;

    color: #515b70;
    font-size: 11px;
    line-height: 1.45;
}

.parallel-strategy-note strong {
    color: #252b48;
}


/* =========================================
   SIP RESULT
========================================= */

.sip-metric {
    background: #d4f4dd !important;
    border-color: #a8e6b3 !important;
}

.sip-metric strong {
    color: #27ae60 !important;
    font-size: 28px !important;
}


/* =========================================
   NET COST
========================================= */

.net-cost-section {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 2px solid #e3e8f0;
}

.net-cost-card {
    background: linear-gradient(
        135deg,
        #27ae60 0%,
        #1e8449 100%
    );

    color: white;

    padding: 30px;
    border-radius: 16px;

    margin-bottom: 30px;

    text-align: center;
}

.net-cost-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    opacity: 0.9;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.net-cost-amount {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 12px;
}

.net-cost-description {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.95;
}


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

footer {
    text-align: center;
    color: #7b8597;
    font-size: 12px;
    padding: 35px 20px;
    border-top: 1px solid #e3e7ee;
}


/* =========================================
   TABLET / MOBILE
========================================= */

@media (max-width: 800px) {

    .calculator-layout {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 35px;
    }

    .nav-inner {
        height: auto;
        padding: 15px 0;
    }

    .strategy-buttons {
        flex-direction: column;
    }

    .strategy-btn {
        width: 100%;
    }


    /* Parallel Investment becomes one column */
    .parallel-investment-section .calculator-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .parallel-investment-section .calculator-layout > .form-box {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .parallel-investment-section .calculator-layout > .result-box {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 550px) {

    .calculator-panel {
        padding: 18px;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .metric.primary {
        grid-column: auto;
    }

    .more-link {
        display: none;
    }

    .net-cost-amount {
        font-size: 32px;
    }

    .net-cost-card {
        padding: 20px;
    }

    .parallel-idea-box {
        padding: 13px 14px;
    }

    .parallel-idea-title {
        font-size: 13px;
    }

    .parallel-idea-main {
        font-size: 11px;
        line-height: 1.5;
    }

}

/* =========================================
   SIP CALCULATOR
========================================= */

.sip-total-value {
    background: #edf3ff !important;
    border-color: #cfe0ff !important;
}

.sip-total-value strong {
    color: #2864e8 !important;
}

.sip-profit {
    background: #f0fff4;
    border-color: #ccefd7;
}

.sip-profit strong {
    color: #27ae60;
}


/* =========================================
   SIP INVESTMENT SUMMARY
========================================= */

.sip-summary-section {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 2px solid #e3e8f0;
}

.sip-summary-header {
    margin-bottom: 20px;
}

.sip-summary-header h3 {
    margin: 0 0 5px;
    font-size: 20px;
    color: #172033;
}

.sip-summary-header p {
    margin: 0;
    color: #778196;
    font-size: 13px;
}

.sip-summary-layout {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 1fr);
    gap: 25px;
    align-items: center;
}

.sip-chart-box {
    min-height: 300px;
    background: #f8faff;
    border: 1px solid #e4e9f2;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sip-chart-box canvas {
    max-width: 100%;
    max-height: 280px;
}

.sip-summary-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sip-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    background: white;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
}

.summary-dot {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
    margin-top: 4px;
}

.invested-dot {
    background: #2864e8;
}

.profit-dot {
    background: #27ae60;
}

.sip-summary-item div {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 15px;
    width: 100%;
}

.sip-summary-item small {
    color: #788398;
    font-size: 12px;
}

.sip-summary-item strong {
    font-size: 20px;
    color: #172033;
}

.sip-summary-item span:last-child {
    grid-column: 2;
    color: #68758a;
    font-size: 12px;
}


/* =========================================
   YEAR-WISE SIP TABLE
========================================= */

.sip-yearwise-section {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 2px solid #e3e8f0;
}

.sip-table-wrapper {
    background: white;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
    overflow: hidden;
}

.sip-year-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sip-year-table th,
.sip-year-table td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid #e8edf4;
}

.sip-year-table th {
    background: #f8faff;
    color: #68758a;
    font-size: 12px;
    font-weight: 800;
}

.sip-year-table td {
    color: #172033;
}

.sip-year-table td:nth-child(2) {
    font-weight: 700;
}

.sip-year-table td:nth-child(3) {
    color: #27ae60;
    font-weight: 700;
}

.sip-year-table tr:last-child td {
    border-bottom: none;
}

.sip-year-table tbody tr:hover {
    background: #fafcff;
}


/* =========================================
   MOBILE SIP
========================================= */

@media (max-width: 800px) {

    .sip-summary-layout {
        grid-template-columns: 1fr;
    }

    .sip-chart-box {
        min-height: 260px;
    }

    .sip-table-wrapper {
        overflow-x: auto;
    }

    .sip-year-table {
        min-width: 520px;
    }

}

/* =========================================
   SALARY / CTC CALCULATOR
========================================= */

.salary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 30px;
    align-items: start;
}

.salary-form-box {
    background: #ffffff;
    border: 1px solid #e1e6ee;
    border-radius: 16px;
    padding: 24px;
}

.salary-form-box h3 {
    margin: 0;
    font-size: 21px;
    color: #172033;
}

.salary-divider {
    height: 1px;
    background: #e5e9f0;
    margin: 16px 0 22px;
}

.salary-help {
    margin: 7px 0 0;
    color: #7a8496;
    font-size: 11px;
    line-height: 1.45;
}

.salary-checkbox-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 8px 0 22px;
}

.salary-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #fafcff;
    font-size: 12px;
    font-weight: 600;
    color: #33405a;
}

.salary-check input {
    width: auto;
    accent-color: #2864e8;
}

.salary-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.salary-regime-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.salary-regime-btn {
    padding: 11px 12px;
    border: 1px solid #d7deea;
    background: #ffffff;
    border-radius: 10px;
    color: #40506d;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.salary-regime-btn.active {
    background: #2864e8;
    color: #ffffff;
    border-color: #2864e8;
}

.salary-note {
    margin: 18px 0 0;
    color: #7a8496;
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================
   SALARY RESULT
========================================= */

.salary-result-box {
    min-width: 0;
}

.salary-main-result {
    background: linear-gradient(
        135deg,
        #273b99 0%,
        #313e99 100%
    );
    color: white;
    padding: 28px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(35, 48, 115, 0.14);
}

.salary-main-label {
    font-size: 12px;
    letter-spacing: 0.9px;
    font-weight: 700;
    opacity: 0.9;
}

.salary-main-number {
    margin-top: 7px;
    font-size: 46px;
    line-height: 1.05;
    font-weight: 800;
}

.salary-main-subtitle {
    margin-top: 10px;
    font-size: 12px;
    color: #dbe2ff;
}

.salary-main-subtitle strong {
    color: #ffffff;
}

.salary-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

.salary-result-card {
    background: #eef3ff;
    border: 1px solid #d4e0ff;
    border-radius: 14px;
    padding: 18px;
}

.salary-result-card span {
    display: block;
    color: #66738c;
    font-size: 12px;
    margin-bottom: 7px;
}

.salary-result-card strong {
    display: block;
    color: #223f99;
    font-size: 22px;
}

.salary-result-card small {
    display: block;
    margin-top: 7px;
    color: #8090af;
    font-size: 11px;
}

.salary-deduction-box {
    margin-top: 15px;
    padding: 17px;
    border: 1px solid #d6e0fb;
    background: #f3f6ff;
    border-radius: 14px;
}

.salary-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(91, 109, 165, 0.14);
}

.salary-breakdown-row:last-child {
    border-bottom: none;
}

.salary-breakdown-row span {
    color: #56637d;
    font-size: 12px;
}

.salary-breakdown-row strong {
    color: #243e91;
    font-size: 13px;
}


/* =========================================
   SALARY SCHEDULE
========================================= */

.salary-schedule {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 2px solid #e3e8f0;
}

.salary-schedule-header {
    margin-bottom: 18px;
}

.salary-schedule-header h3 {
    margin: 0 0 5px;
    font-size: 20px;
}

.salary-schedule-header p {
    margin: 0;
    color: #778196;
    font-size: 13px;
}

.salary-table-wrapper {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
}

.salary-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
    font-size: 13px;
}

.salary-table th {
    background: #f7f9fc;
    color: #536078;
    font-weight: 800;
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid #e5e9f0;
}

.salary-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #edf0f5;
    color: #172033;
}

.salary-table tr:last-child td {
    border-bottom: none;
}

.salary-table td:nth-child(2) {
    color: #68758a;
    font-size: 12px;
}

.salary-table td:nth-child(3),
.salary-table td:nth-child(4) {
    text-align: right;
    font-weight: 700;
}

.salary-table .deduction-row td {
    color: #dc2626;
    background: #fffafa;
}

.salary-table .total-row td {
    background: #edf3ff;
    color: #1746b7;
    font-weight: 800;
}


/* =========================================
   SALARY MOBILE
========================================= */

@media (max-width: 800px) {

    .salary-layout {
        grid-template-columns: 1fr;
    }

    .salary-checkbox-row {
        grid-template-columns: 1fr;
    }

    .salary-two-column {
        grid-template-columns: 1fr;
    }

    .salary-result-grid {
        grid-template-columns: 1fr;
    }

    .salary-main-number {
        font-size: 38px;
    }

}

@media (max-width: 550px) {

    .salary-form-box {
        padding: 18px;
    }

    .salary-regime-buttons {
        grid-template-columns: 1fr;
    }

    .salary-main-result {
        padding: 22px;
    }

}

/* =========================================
   INCOME TAX CALCULATOR
========================================= */

.tax-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 30px;
    align-items: start;
}


/* =========================================
   TAX INPUT CARD
========================================= */

.tax-input-card {
    background: #ffffff;
    border: 1px solid #e2e7ef;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(30, 50, 80, 0.04);
}

.tax-input-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 10px;
}

.tax-income-input-row input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #d5dce7;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
}

.tax-income-input-row input:focus {
    outline: none;
    border-color: #2864e8;
}

.tax-section-label {
    margin-top: 18px;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 800;
    color: #66738c;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.tax-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tax-preset {
    border: 1px solid #dce2eb;
    background: #ffffff;
    border-radius: 18px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: #40506b;
}

.tax-preset:hover {
    border-color: #2864e8;
    color: #2864e8;
}


/* =========================================
   STANDARD DEDUCTION
========================================= */

.tax-standard-box {
    margin-top: 18px;
    padding: 13px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #effcf5;
    border: 1px solid #b7efd0;
    border-radius: 12px;
}

.tax-standard-left {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #275a43;
    font-size: 13px;
}

.tax-check-circle {
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #30bf78;
    color: #16a05b;
    font-weight: 800;
}

.tax-auto-badge {
    border: 1px solid #74dca8;
    padding: 5px 9px;
    border-radius: 7px;
    color: #159b5a;
    font-weight: 700;
    font-size: 11px;
}


/* =========================================
   NPS
========================================= */

.tax-field {
    margin-top: 20px;
}

.tax-field label {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
}

.tax-field input {
    width: 100%;
    padding: 12px;
    border: 1px solid #d5dce7;
    border-radius: 10px;
}

.tax-field input:focus {
    outline: none;
    border-color: #2864e8;
}

.tax-help {
    margin: 7px 0 0;
    font-size: 11px;
    color: #7a8496;
}


/* =========================================
   BASIC SALARY
========================================= */

.tax-basic-box {
    margin-top: 15px;
    padding: 13px 14px;
    border: 1px solid #dfe5ef;
    border-radius: 11px;
    background: #fafcff;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.tax-basic-box span {
    color: #56637a;
    font-size: 12px;
}

.tax-basic-box strong {
    font-size: 13px;
}

.tax-basic-box small {
    color: #68758a;
    font-size: 11px;
}


/* =========================================
   TAX REGIME
========================================= */

.tax-regime-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tax-regime-btn {
    border: 1px solid #d7deea;
    background: #ffffff;
    color: #43516a;
    border-radius: 10px;
    padding: 11px;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
}

.tax-regime-btn.active {
    color: #ffffff;
    background: #2864e8;
    border-color: #2864e8;
}

.tax-note {
    margin-top: 16px;
    color: #7a8496;
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================
   DARK RESULT PANEL
========================================= */

.tax-result-panel {
    background: linear-gradient(
        135deg,
        #101939 0%,
        #273b91 100%
    );
    color: #ffffff;
    border-radius: 18px;
    padding: 27px;
    min-height: 100%;
    box-shadow: 0 10px 25px rgba(20, 35, 90, 0.15);
}

.tax-result-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.tax-result-regime {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.tax-result-regime span {
    margin-left: 4px;
}

.tax-rate-badge {
    border: 1px solid #3c7bf0;
    background: rgba(46, 108, 232, 0.18);
    padding: 6px 10px;
    border-radius: 16px;
    color: #9fc5ff;
    font-size: 11px;
    font-weight: 700;
}

.tax-result-divider {
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 15px 0 18px;
}

.tax-result-label {
    color: #b6c1e7;
    font-size: 11px;
    letter-spacing: 0.8px;
    font-weight: 700;
}

.tax-result-tax {
    margin-top: 5px;
    font-size: 39px;
    font-weight: 800;
}

.tax-result-subtext {
    margin-top: 7px;
    color: #c4ccec;
    font-size: 11px;
    line-height: 1.45;
}

.tax-result-subtext strong {
    color: #ffffff;
}

.tax-inhand-box {
    margin-top: 20px;
    padding: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
}

.tax-inhand-box span {
    display: block;
    color: #aeb9dd;
    font-size: 12px;
    margin-bottom: 5px;
}

.tax-inhand-box strong {
    color: #16d99c;
    font-size: 31px;
    font-weight: 800;
}

.tax-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
}

.tax-mini-grid span {
    display: block;
    color: #aeb9dd;
    font-size: 11px;
    margin-bottom: 4px;
}

.tax-mini-grid strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
}

.tax-mini-grid div:nth-child(3) strong,
.tax-mini-grid div:nth-child(4) strong {
    color: #16d99c;
}

.tax-result-footer {
    margin-top: 18px;
    color: #9eadd9;
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================
   SUMMARY CARDS
========================================= */

.tax-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 30px;
}

.tax-summary-card {
    background: #ffffff;
    border: 1px solid #e2e7ef;
    border-radius: 17px;
    padding: 25px;
    box-shadow: 0 4px 18px rgba(30, 50, 80, 0.04);
}

.tax-summary-card h3 {
    margin: 0;
    font-size: 16px;
}

.tax-summary-divider {
    height: 1px;
    background: #e8ecf2;
    margin: 17px 0 8px;
}

.tax-summary-row,
.tax-summary-strong,
.tax-total-row,
.tax-monthly-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid #edf0f4;
}

.tax-summary-row span,
.tax-summary-strong span,
.tax-total-row span,
.tax-monthly-row span {
    color: #536079;
    font-size: 13px;
}

.tax-summary-row strong {
    color: #172033;
    font-size: 13px;
}

.tax-green {
    color: #16a765 !important;
}

.tax-summary-strong {
    font-weight: 800;
    padding-top: 16px;
}

.tax-summary-strong strong {
    color: #172033;
}

.tax-total-row {
    margin-top: 6px;
    border-bottom: none;
    padding-top: 18px;
}

.tax-total-row span {
    font-weight: 800;
    color: #172033;
}

.tax-total-row strong {
    font-size: 18px;
    color: #f11d4c;
}

.tax-monthly-row {
    border-bottom: none;
    padding-top: 3px;
}

.tax-monthly-row strong {
    color: #536079;
    font-size: 13px;
}

.tax-slab-breakdown {
    min-height: 220px;
}

.tax-slab-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f4;
    font-size: 13px;
}

.tax-slab-row span {
    color: #30405a;
}

.tax-slab-row strong {
    color: #172033;
}

.tax-rebate-note {
    margin-top: 18px;
    padding: 13px 14px;
    border-radius: 12px;
    background: #f2f8ff;
    color: #35527c;
    font-size: 11px;
    line-height: 1.5;
}

.tax-rebate-note strong {
    display: block;
    color: #2864e8;
    margin-bottom: 4px;
}


/* =========================================
   TAX DISTRIBUTION
========================================= */

.tax-distribution-section {
    margin-top: 30px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e2e7ef;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(30, 50, 80, 0.04);
}

.tax-distribution-header h3 {
    margin: 0 0 5px;
    font-size: 19px;
}

.tax-distribution-header p {
    margin: 0;
    color: #718097;
    font-size: 13px;
}

.tax-distribution-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e8edf3;
}

.tax-chart-box {
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tax-chart-box canvas {
    max-width: 100%;
    max-height: 300px;
}

.tax-distribution-legend {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.tax-legend-card {
    padding: 17px;
    border-radius: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.tax-legend-card.green {
    background: #effcf7;
    border: 1px solid #b9edd8;
}

.tax-legend-card.red {
    background: #fff3f5;
    border: 1px solid #ffd1da;
}

.tax-legend-card.blue {
    background: #f0f6ff;
    border: 1px solid #cbdfff;
}

.tax-legend-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 12px;
}

.tax-legend-title small {
    font-weight: 500;
    font-size: 11px;
}

.tax-legend-card strong {
    font-size: 16px;
}

.tax-legend-card.green strong {
    color: #08a66d;
}

.tax-legend-card.red strong {
    color: #ef214d;
}

.tax-legend-card.blue strong {
    color: #2864e8;
}

.tax-legend-dot {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 50%;
}

.green-dot {
    background: #0bb981;
}

.red-dot {
    background: #f32655;
}

.blue-dot {
    background: #347bf2;
}


/* =========================================
   TAX MOBILE
========================================= */

@media (max-width: 800px) {

    .tax-main-layout {
        grid-template-columns: 1fr;
    }

    .tax-summary-grid {
        grid-template-columns: 1fr;
    }

    .tax-distribution-layout {
        grid-template-columns: 1fr;
    }

    .tax-chart-box {
        height: 280px;
    }

}

@media (max-width: 550px) {

    .tax-input-card,
    .tax-result-panel,
    .tax-summary-card,
    .tax-distribution-section {
        padding: 18px;
    }

    .tax-regime-buttons {
        grid-template-columns: 1fr;
    }

    .tax-result-tax {
        font-size: 32px;
    }

    .tax-mini-grid {
        gap: 12px;
    }

    .tax-summary-row,
    .tax-summary-strong,
    .tax-total-row,
    .tax-monthly-row {
        flex-direction: column;
        gap: 4px;
    }

}

/* =========================================
   CAR STATE / ON-ROAD BREAKDOWN
========================================= */

.car-charge-summary {
    margin-top: 18px;
    padding: 15px;
    background: #f8faff;
    border: 1px solid #e2e7ef;
    border-radius: 13px;
}

.car-charge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 9px 0;
    border-bottom: 1px solid #e8edf3;
    font-size: 12px;
}

.car-charge-row:last-child {
    border-bottom: none;
}

.car-charge-row span {
    color: #68758a;
}

.car-charge-row strong {
    color: #172033;
    font-size: 13px;
}

.car-charge-row:first-child strong {
    color: #2864e8;
}

.car-state-note {
    margin-top: 8px;
    color: #7a8496;
    font-size: 11px;
    line-height: 1.45;
}

.marriage-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 11px 16px;

    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #8b5cf6,
        #ec6c8d
    );

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    border: none;

    cursor: pointer;

    transition: 0.2s ease;
}

.marriage-nav-link:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(139, 92, 246, 0.20);
}

@media (max-width: 600px) {
    .navbar {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* =========================================================
   CALQUBE — PREMIUM HOMEPAGE UPGRADE
========================================================= */

:root {
    --cq-blue: #2864e8;
    --cq-blue-dark: #1748b6;
    --cq-text: #172033;
    --cq-muted: #68758a;
    --cq-bg: #f5f7fb;
    --cq-border: #e1e7f0;
    --cq-green: #27ae60;
    --cq-purple: #8757e8;
    --cq-gold: #e8aa3d;
    --cq-shadow: 0 16px 50px rgba(28, 52, 92, .08);
}


/* =========================================================
   PREMIUM HERO
========================================================= */

.premium-hero {

    position: relative;

    min-height: 350px;

    margin:
        25px 0 18px;

    padding:
        46px 46px;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(240px, .6fr)
        minmax(250px, .65fr);

    gap: 28px;

    align-items: center;

    border:
        1px solid
        #dfe6f0;

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef4ff 55%,
            #f8f5ff 100%
        );

    box-shadow:
        var(--cq-shadow);

}


.premium-hero::before {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    right: 14%;

    top: -180px;

    border-radius: 50%;

    background:
        rgba(40,100,232,.08);

    filter:
        blur(2px);

}


.premium-hero::after {

    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    right: -90px;

    bottom: -110px;

    border-radius: 50%;

    background:
        rgba(135,87,232,.10);

}


.premium-hero-content {

    position: relative;

    z-index: 2;

}


.hero-eyebrow {

    color:
        var(--cq-blue);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .18em;

    margin-bottom:
        13px;

}


.premium-hero h1 {

    margin:
        0;

    color:
        var(--cq-text);

    font-size:
        clamp(42px, 5vw, 68px);

    line-height:
        .98;

    letter-spacing:
        -.045em;

}


.premium-hero h1 span {

    color:
        var(--cq-blue);

}


.premium-hero-content p {

    max-width:
        600px;

    margin:
        18px 0 0;

    color:
        var(--cq-muted);

    font-size:
        15px;

    line-height:
        1.65;

}


.hero-trust-row {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        25px;

}


.hero-trust-item {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #40506a;

    font-size:
        11px;

    font-weight:
        700;

}


.hero-trust-icon {

    width:
        26px;

    height:
        26px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        #bcd0ee;

    border-radius:
        50%;

    color:
        var(--cq-blue);

    background:
        rgba(255,255,255,.75);

}


/* =========================================================
   HERO STATS
========================================================= */

.hero-stats-card {

    position:
        relative;

    z-index:
        3;

    padding:
        24px;

    border:
        1px solid
        rgba(210,220,237,.95);

    border-radius:
        19px;

    background:
        rgba(255,255,255,.86);

    box-shadow:
        0 16px 45px
        rgba(39,73,125,.08);

    backdrop-filter:
        blur(10px);

}


.hero-stat {

    padding:
        11px 0;

    border-bottom:
        1px solid
        #e8edf4;

}


.hero-stat:last-child {

    border-bottom:
        none;
}


.hero-stat strong {

    display:
        inline-block;

    color:
        var(--cq-blue);

    font-size:
        20px;

    margin-right:
        5px;

}


.hero-stat span {

    color:
        var(--cq-text);

    font-size:
        11px;

    font-weight:
        800;

}


.hero-stat small {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--cq-muted);

    font-size:
        9px;

    line-height:
        1.4;

}


/* =========================================================
   HERO CALCULATOR VISUAL
========================================================= */

.hero-visual {

    position:
        relative;

    min-height:
        240px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.calculator-illustration {

    width:
        170px;

    padding:
        15px;

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #304ec7,
            #675ce9
        );

    box-shadow:
        0 25px 50px
        rgba(49,64,177,.25);

    transform:
        rotate(-6deg);

    animation:
        calculatorFloat
        5s
        ease-in-out
        infinite;

}


.calc-screen {

    height:
        37px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        12px;

    border-radius:
        8px;

    color:
        #214d39;

    background:
        #bdecb6;

    font-size:
        11px;

    font-weight:
        800;

}


.calc-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        6px;

}


.calc-grid span {

    height:
        27px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        7px;

    background:
        rgba(255,255,255,.92);

    color:
        #344365;

    font-size:
        10px;

    font-weight:
        800;

}


.hero-rupee {

    position:
        absolute;

    right:
        16%;

    bottom:
        7%;

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        #fff;

    background:
        #e9a93d;

    box-shadow:
        0 15px 30px
        rgba(206,139,28,.25);

    font-size:
        22px;

    font-weight:
        900;

    animation:
        softFloat
        4s
        ease-in-out
        infinite;

}


.hero-growth {

    position:
        absolute;

    top:
        8%;

    right:
        4%;

    color:
        #31aa6d;

    font-size:
        50px;

    font-weight:
        900;

    transform:
        rotate(-12deg);

}


@keyframes calculatorFloat {

    0%,100% {
        transform:
            rotate(-6deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-3deg)
            translateY(-9px);
    }

}


@keyframes softFloat {

    0%,100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


/* =========================================================
   SMART INSIGHTS
========================================================= */

.insight-section {

    margin:
        20px 0 35px;

}


.section-heading-modern {

    margin-bottom:
        15px;

}


.modern-kicker {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--cq-blue);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .15em;

}


.section-heading-modern h2 {

    margin:
        0;

    color:
        var(--cq-text);

    font-size:
        24px;

}


.section-heading-modern p {

    margin:
        5px 0 0;

    color:
        var(--cq-muted);

    font-size:
        11px;

}


.insight-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:
        12px;

}


.insight-card {

    min-width:
        0;

    display:
        flex;

    gap:
        12px;

    padding:
        17px;

    border:
        1px solid
        var(--cq-border);

    border-radius:
        17px;

    background:
        #fff;

    box-shadow:
        0 8px 26px
        rgba(36,57,92,.045);

    transition:
        transform .22s ease,
        box-shadow .22s ease;

}


.insight-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 35px
        rgba(36,57,92,.08);

}


.insight-icon {

    width:
        35px;

    height:
        35px;

    flex:
        0 0 35px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    font-size:
        14px;

    font-weight:
        900;

}


.insight-success .insight-icon {

    color:
        #18884d;

    background:
        #e9f8ef;

}


.insight-gold .insight-icon {

    color:
        #a66800;

    background:
        #fff5df;

}


.insight-purple .insight-icon {

    color:
        #6940be;

    background:
        #f1ebff;

}


.insight-blue .insight-icon {

    color:
        #235cc9;

    background:
        #eaf2ff;

}


.insight-label {

    display:
        block;

    color:
        var(--cq-muted);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .12em;

}


.insight-card h3 {

    margin:
        4px 0 5px;

    color:
        var(--cq-text);

    font-size:
        13px;

}


.insight-card p {

    margin:
        0;

    color:
        var(--cq-muted);

    font-size:
        10px;

    line-height:
        1.5;

}


.insight-button {

    margin-top:
        10px;

    padding:
        6px 10px;

    border:
        1px solid
        #cdd9eb;

    border-radius:
        7px;

    color:
        var(--cq-blue);

    background:
        white;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

}


/* =========================================================
   DECISION SECTION
========================================================= */

.decision-section {

    display:
        grid;

    grid-template-columns:
        .8fr 1.35fr .8fr;

    gap:
        13px;

    margin:
        0 0 35px;

}


.decision-card {

    min-width:
        0;

    padding:
        20px;

    border:
        1px solid
        var(--cq-border);

    border-radius:
        19px;

    background:
        white;

    box-shadow:
        0 8px 27px
        rgba(36,57,92,.045);

}


.decision-header h2 {

    margin:
        2px 0 5px;

    font-size:
        20px;

    color:
        var(--cq-text);

}


.decision-header p {

    margin:
        0 0 16px;

    color:
        var(--cq-muted);

    font-size:
        10px;

    line-height:
        1.5;

}


.mini-field {

    margin-bottom:
        10px;

}


.mini-field label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #546176;

    font-size:
        9px;

    font-weight:
        800;

}


.mini-field input {

    width:
        100%;

    height:
        37px;

    padding:
        0 9px;

    border:
        1px solid
        #d8e0eb;

    border-radius:
        8px;

    font-size:
        11px;

}


.afford-result {

    margin-top:
        9px;

    padding:
        11px;

    border:
        1px solid
        #dce6f0;

    border-radius:
        9px;

    background:
        #f8faff;

}


.afford-result span {

    display:
        block;

    color:
        var(--cq-muted);

    font-size:
        8px;

}


.afford-result strong {

    display:
        block;

    margin-top:
        2px;

    color:
        #21834b;

    font-size:
        18px;

}


.decision-button,
.health-button {

    margin-top:
        13px;

    width:
        100%;

    min-height:
        39px;

    border:
        none;

    border-radius:
        9px;

    color:
        white;

    background:
        var(--cq-blue);

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        filter .18s ease;

}


.decision-button:hover,
.health-button:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(.96);

}


/* =========================================================
   COMPARISON
========================================================= */

.comparison-table-wrapper {

    overflow-x:
        auto;

}


.comparison-table {

    width:
        100%;

    border-collapse:
        collapse;

    font-size:
        9px;

}


.comparison-table th,
.comparison-table td {

    padding:
        8px 7px;

    border-bottom:
        1px solid
        #edf0f5;

    text-align:
        center;

    white-space:
        nowrap;

}


.comparison-table th:first-child,
.comparison-table td:first-child {

    text-align:
        left;

    color:
        var(--cq-muted);

}


.comparison-table th {

    color:
        var(--cq-blue);

    font-size:
        8px;

}


.comparison-table td {

    color:
        #45516a;

}


.highlight-row td {

    color:
        var(--cq-text);

    font-weight:
        800;

    background:
        #f7faff;

}


.comparison-winner {

    margin-top:
        11px;

    padding:
        9px 10px;

    border-radius:
        8px;

    color:
        #8a6100;

    background:
        #fff7de;

    font-size:
        9px;

    font-weight:
        800;

}


/* =========================================================
   RECENT
========================================================= */

.recent-list {

    display:
        grid;

    gap:
        8px;

}


.recent-empty {

    padding:
        18px;

    border:
        1px dashed
        #dbe2ed;

    border-radius:
        10px;

    text-align:
        center;

    color:
        var(--cq-muted);

    font-size:
        9px;

}


.recent-item {

    padding:
        11px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        10px;

    background:
        #fafcff;

}


.recent-item strong {

    display:
        block;

    color:
        var(--cq-text);

    font-size:
        10px;

}


.recent-item span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--cq-muted);

    font-size:
        8px;

}


/* =========================================================
   FINANCIAL HEALTH
========================================================= */

.health-section {

    display:
        grid;

    grid-template-columns:
        70px 1.25fr 1fr 160px;

    gap:
        22px;

    align-items:
        center;

    margin:
        0 0 25px;

    padding:
        22px;

    border:
        1px solid
        #d7ebdf;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #f1fbf5,
            #f8fcfa
        );

}


.health-icon {

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        white;

    background:
        #31aa6d;

    font-size:
        23px;

    font-weight:
        900;

}


.health-copy h2 {

    margin:
        1px 0 5px;

    color:
        var(--cq-text);

    font-size:
        21px;

}


.health-copy p {

    margin:
        0;

    color:
        var(--cq-muted);

    font-size:
        10px;

    line-height:
        1.5;

}


.health-button {

    width:
        auto;

    padding:
        0 16px;

    background:
        #24a862;

}


.health-points {

    display:
        grid;

    gap:
        7px;

    color:
        #507064;

    font-size:
        9px;

    font-weight:
        700;

}


.health-score {

    padding:
        13px;

    text-align:
        center;

    border:
        1px solid
        #d6e8dc;

    border-radius:
        13px;

    background:
        white;

}


.health-score span {

    display:
        block;

    color:
        #82928a;

    font-size:
        8px;

}


.health-score strong {

    color:
        #1b8e52;

    font-size:
        33px;

}


.health-score small {

    color:
        #839188;

    font-size:
        9px;

}


.health-score em {

    display:
        block;

    margin-top:
        2px;

    color:
        #278653;

    font-size:
        9px;

    font-style:
        normal;

    font-weight:
        800;

}


/* =========================================================
   TRUST STRIP
========================================================= */

.trust-strip {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    margin:
        0 0 45px;

    border:
        1px solid
        var(--cq-border);

    border-radius:
        14px;

    background:
        white;

    overflow:
        hidden;

}


.trust-strip > div {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        75px;

    border-right:
        1px solid
        #edf0f5;

}


.trust-strip > div:last-child {

    border-right:
        none;

}


.trust-strip strong {

    color:
        var(--cq-blue);

    font-size:
        18px;

}


.trust-strip span {

    margin-top:
        4px;

    color:
        var(--cq-muted);

    font-size:
        8px;

}


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

@media (max-width: 1000px) {

    .premium-hero {

        grid-template-columns:
            1fr 1fr;

    }

    .hero-visual {

        display:
            none;
    }

    .insight-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

    .decision-section {

        grid-template-columns:
            1fr 1fr;

    }

    .recent-card {

        grid-column:
            1 / -1;

    }

    .health-section {

        grid-template-columns:
            65px 1fr 1fr;

    }

    .health-score {

        grid-column:
            1 / -1;

        justify-self:
            start;

    }

}


@media (max-width: 700px) {

    .premium-hero {

        grid-template-columns:
            1fr;

        padding:
            30px 24px;

    }


    .premium-hero h1 {

        font-size:
            43px;

    }


    .hero-stats-card {

        margin-top:
            4px;

    }


    .hero-trust-row {

        gap:
            12px;

    }


    .insight-grid {

        grid-template-columns:
            1fr;

    }


    .decision-section {

        grid-template-columns:
            1fr;

    }


    .recent-card {

        grid-column:
            auto;

    }


    .health-section {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .health-icon {

        margin:
            0 auto;

    }


    .health-points {

        text-align:
            left;

    }


    .health-score {

        grid-column:
            auto;

        justify-self:
            stretch;

    }


    .trust-strip {

        grid-template-columns:
            repeat(2,1fr);

    }


    .trust-strip > div:nth-child(2) {

        border-right:
            none;

    }


    .trust-strip > div:nth-child(-n+2) {

        border-bottom:
            1px solid
            #edf0f5;

    }

}


@media (max-width: 430px) {

    .premium-hero {

        margin-top:
            15px;

        padding:
            27px 18px;

        border-radius:
            20px;

    }


    .premium-hero h1 {

        font-size:
            39px;

    }


    .premium-hero-content p {

        font-size:
            13px;

    }


    .hero-stat strong {

        font-size:
            17px;

    }


    .section-heading-modern h2 {

        font-size:
            21px;

    }

}

/* =========================================================
   PREMIUM COMPARISON — COMPACT + VERTICAL
========================================================= */

.comparison-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
    overflow: hidden;
}


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

.comparison-card .decision-header {
    margin-bottom: 20px;
}

.comparison-card .decision-header h2 {
    margin: 3px 0 6px;

    font-size: 28px;
    line-height: 1.12;

    letter-spacing: -0.7px;

    font-weight: 800;

    color: #111827;
}

.comparison-card .decision-header p {
    margin: 0;

    color: #64748b;

    font-size: 13px;
    line-height: 1.45;
}


/* =========================================================
   THREE OPTION CARDS
========================================================= */

.comparison-scenario-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 22px;
}

.comparison-scenario {
    position: relative;

    min-width: 0;

    padding: 16px;

    background: #ffffff;

    border: 1px solid #e1e7ef;

    border-radius: 18px;

    box-shadow:
        0 5px 18px rgba(15, 23, 42, 0.04);

    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.comparison-scenario:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(15, 23, 42, .08);
}


/* ---------- TOP COLOR LINE ---------- */

.comparison-scenario::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;
}


/* A */

.comparison-scenario:nth-child(1)::before {
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );
}


/* B */

.comparison-scenario:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #059669,
            #34d399
        );
}


/* C */

.comparison-scenario:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #a78bfa
        );
}


/* =========================================================
   OPTION TOP
========================================================= */

.comparison-scenario-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 8px;

    margin-bottom: 10px;
}

.scenario-label {
    font-size: 10px;

    font-weight: 800;

    letter-spacing: .15em;

    line-height: 1.3;

    color: #64748b;
}


/* =========================================================
   TENURE MOVED UP
========================================================= */

.scenario-tag {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    white-space: nowrap;

    flex-shrink: 0;
}


/* A */

.comparison-scenario:nth-child(1)
.scenario-tag {

    background: #eff6ff;
    color: #2563eb;

}


/* B */

.comparison-scenario:nth-child(2)
.scenario-tag {

    background: #ecfdf5;
    color: #059669;

}


/* C */

.comparison-scenario:nth-child(3)
.scenario-tag {

    background: #f5f3ff;
    color: #7c3aed;

}


/* =========================================================
   TITLE
========================================================= */

.comparison-scenario h3 {
    margin: 0 0 14px;

    min-height: 40px;

    font-size: 16px;

    line-height: 1.25;

    letter-spacing: -.25px;

    font-weight: 750;

    color: #111827;
}


/* =========================================================
   CARD METRICS
   Only Loan + EMI
========================================================= */

.scenario-metrics {

    display: grid;

    grid-template-columns:
        1fr 1.2fr;

    gap: 10px;

    padding-top: 12px;

    border-top:
        1px solid #edf1f5;
}

.scenario-metrics div {
    min-width: 0;
}

.scenario-metrics span {

    display: block;

    margin-bottom: 5px;

    font-size: 10px;

    color: #94a3b8;

    line-height: 1.2;

}


/* ---------- VALUES ---------- */

.scenario-metrics strong {

    display: block;

    font-size: 13px;

    line-height: 1.2;

    font-weight: 800;

    color: #111827;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ---------- EMI BIGGER ---------- */

.scenario-metrics .emi strong {

    font-size: 16px;
}


/* ---------- EMI COLORS ---------- */

.comparison-scenario:nth-child(1)
.scenario-metrics .emi strong {

    color: #2563eb;

}

.comparison-scenario:nth-child(2)
.scenario-metrics .emi strong {

    color: #059669;

}

.comparison-scenario:nth-child(3)
.scenario-metrics .emi strong {

    color: #7c3aed;

}


/* =========================================================
   CHART CONTAINER
========================================================= */

.comparison-chart {

    border-top:
        1px solid #e8edf3;

    padding-top: 20px;

    margin-top: 2px;
}


/* =========================================================
   CHART HEADING
========================================================= */

.chart-heading-row {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 14px;
}

.chart-heading-row strong {

    display: block;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 800;

    color: #111827;
}

.chart-heading-row span {

    display: block;

    margin-top: 4px;

    font-size: 11px;

    line-height: 1.4;

    color: #94a3b8;
}

.chart-scale-label {

    font-size: 10px !important;

    color: #94a3b8 !important;

    white-space: nowrap;
}


/* =========================================================
   VERTICAL BAR AREA
========================================================= */

.comparison-chart .bar-row {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 14px;

    height: 150px;

    margin: 0;

    padding: 8px 12px 0;
}


/* Remove old grid positioning */

.comparison-chart .bar-label {

    order: 3;

    width: auto;

    font-size: 11px;

    font-weight: 800;

    color: #475569;

}


/* =========================================================
   VERTICAL BAR TRACK
========================================================= */

.comparison-chart .bar-track {

    position: relative;

    flex: 1;

    height: 118px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    background: transparent;

    border-radius: 10px;

    overflow: visible;
}


/* =========================================================
   VERTICAL BAR
========================================================= */

.comparison-chart .bar-fill {

    width: 34px;

    height: var(--bar-height, 0%);

    max-height: 100%;

    border-radius:
        10px 10px 5px 5px;

    transition:
        height .5s cubic-bezier(.2,.8,.2,1);

    box-shadow:
        0 6px 14px rgba(37, 99, 235, .14);
}


/* A */

#compareBarEMIA,
#compareBarInterestA {

    background:
        linear-gradient(
            180deg,
            #60a5fa,
            #2563eb
        );
}


/* B */

#compareBarEMIB,
#compareBarInterestB {

    background:
        linear-gradient(
            180deg,
            #34d399,
            #059669
        );
}


/* C */

#compareBarEMIC,
#compareBarInterestC {

    background:
        linear-gradient(
            180deg,
            #a78bfa,
            #7c3aed
        );
}


/* =========================================================
   VALUE BELOW BAR
========================================================= */

.comparison-chart .bar-row > strong {

    min-width: 0;

    width: 88px;

    font-size: 11px;

    line-height: 1.2;

    text-align: center;

    color: #111827;

    white-space: nowrap;
}


/* =========================================================
   LABEL + VALUE LAYOUT
========================================================= */

.comparison-chart .bar-row {

    position: relative;
}


/*
   We turn each track into a vertical
   mini-column with its value beneath it.
*/

.comparison-chart .bar-row {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    align-items: end;

    gap: 18px;

    height: 168px;

}


/*
   Your current HTML has one label,
   one track and one value per row.
   So transform the row into one
   vertical bar composition.
*/

.comparison-chart .bar-label {

    position: absolute;

    bottom: -25px;

    z-index: 4;

    font-size: 11px;

    font-weight: 800;
}

.comparison-chart .bar-track {

    grid-column: 2;

}


/* =========================================================
   INTEREST SECTION
========================================================= */

.comparison-chart + .comparison-chart {

    margin-top: 20px;

}


/* =========================================================
   INSIGHT
========================================================= */

.comparison-insight {

    margin-top: 18px;

    padding: 13px 15px;

    border-radius: 14px;

    border:
        1px solid #f2df9f;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fff6d8
        );

    color: #795b08;

    font-size: 12px;

    line-height: 1.55;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .comparison-scenario-grid {

        grid-template-columns:
            1fr;

    }


    .comparison-scenario h3 {

        min-height: auto;

    }

}
/* =========================================================
   MARRIAGE EXPENSE — LUXURY PREMIUM TAB
========================================================= */

.marriage-tab-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 40px;
    padding: 0 17px;

    border: 1px solid rgba(184, 132, 61, 0.55);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #651b34 0%,
            #8d2948 48%,
            #6e1f3b 100%
        );

    color: #fff9f3 !important;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none !important;

    white-space: nowrap;

    overflow: visible;

    transform-style: preserve-3d;

    perspective: 700px;

    box-shadow:
        0 5px 0 #4d1328,
        0 8px 18px rgba(101, 27, 52, 0.20),
        inset 0 1px 0 rgba(255,255,255,0.18);

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        border-color .3s ease,
        filter .3s ease;
}


/* =========================================================
   GOLD RING BEHIND THE BUTTON
========================================================= */

.marriage-tab-link::before {

    content: "";

    position: absolute;

    width: 24px;
    height: 24px;

    left: -7px;
    top: -8px;

    border: 2px solid #d9ae67;

    border-radius: 50%;

    opacity: 0;

    transform:
        scale(.35)
        rotate(-35deg);

    transform-origin: center;

    z-index: -1;

    box-shadow:
        0 0 0 1px rgba(217,174,103,.18),
        0 4px 10px rgba(144, 91, 28, .18);

    transition:
        opacity .28s ease,
        transform .38s cubic-bezier(.2,.85,.25,1);

}


/* =========================================================
   SECOND RING / GEM DETAIL
========================================================= */

.marriage-tab-link::after {

    content: "✦";

    position: absolute;

    top: -12px;
    right: -7px;

    color: #e6c27a;

    font-size: 9px;

    opacity: 0;

    transform:
        scale(.3)
        translateY(5px)
        rotate(-20deg);

    text-shadow:
        0 0 8px rgba(230,194,122,.55);

    transition:
        opacity .25s ease,
        transform .35s cubic-bezier(.2,.85,.25,1);

}


/* =========================================================
   RING ICON
========================================================= */

.marriage-ring {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 15px;

    transform: translateZ(10px);

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   GOLD LIGHT SWEEP
========================================================= */

.marriage-tab-link span:last-child {
    position: relative;
    z-index: 2;
}

.marriage-tab-link span:last-child::after {

    content: "";

    position: absolute;

    left: -28px;
    top: 50%;

    width: 15px;
    height: 70px;

    transform:
        translateY(-50%)
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,226,165,.30),
            transparent
        );

    filter: blur(2px);

    opacity: 0;

    pointer-events: none;

}


/* =========================================================
   HOVER — MAIN 3D POP
========================================================= */

.marriage-tab-link:hover {

    transform:
        translateY(-4px)
        scale(1.035)
        rotateX(2deg);

    border-color:
        rgba(230, 194, 122, .95);

    filter:
        saturate(1.08)
        brightness(1.05);

    box-shadow:

        0 7px 0 #4d1328,

        0 13px 28px
        rgba(101, 27, 52, .27),

        0 0 0 1px
        rgba(217,174,103,.18),

        0 0 22px
        rgba(217,174,103,.18),

        inset 0 1px 0
        rgba(255,255,255,.23);

}


/* =========================================================
   HOVER — RING POPS OUT
========================================================= */

.marriage-tab-link:hover::before {

    opacity: 1;

    transform:
        scale(1)
        rotate(25deg);

}


.marriage-tab-link:hover::after {

    opacity: 1;

    transform:
        scale(1)
        translateY(0)
        rotate(0deg);

}


/* =========================================================
   HOVER — ICON POP
========================================================= */

.marriage-tab-link:hover
.marriage-ring {

    transform:
        translateZ(24px)
        scale(1.15)
        rotate(-8deg);

}


/* =========================================================
   HOVER — LIGHT SWEEP
========================================================= */

.marriage-tab-link:hover
span:last-child::after {

    opacity: 1;

    animation:
        marriageShine .75s ease forwards;

}


@keyframes marriageShine {

    from {
        left: -28px;
    }

    to {
        left: calc(100% + 28px);
    }

}


/* =========================================================
   ACTIVE / CLICK
========================================================= */

.marriage-tab-link:active {

    transform:
        translateY(-1px)
        scale(.985);

    box-shadow:

        0 3px 0 #4d1328,

        0 6px 12px
        rgba(101,27,52,.20);

}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.marriage-tab-link:focus-visible {

    outline:
        3px solid
        rgba(217,174,103,.28);

    outline-offset: 3px;

}


/* =========================================================
   SUBTLE IDLE ANIMATION
   Very slow — barely noticeable
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .marriage-tab-link {

        animation:
            marriageIdle 4.5s ease-in-out infinite;

    }

    .marriage-tab-link:hover {

        animation: none;

    }

}


@keyframes marriageIdle {

    0%,
    100% {

        box-shadow:

            0 5px 0 #4d1328,

            0 8px 18px
            rgba(101,27,52,.20),

            inset 0 1px 0
            rgba(255,255,255,.18);

    }

    50% {

        box-shadow:

            0 5px 0 #4d1328,

            0 10px 21px
            rgba(101,27,52,.25),

            0 0 13px
            rgba(217,174,103,.08),

            inset 0 1px 0
            rgba(255,255,255,.20);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .marriage-tab-link {

        min-height: 38px;

        padding: 0 13px;

        font-size: 12px;

    }

    .marriage-ring {

        font-size: 14px;

    }

}

/* =========================================================
   AFFORDABILITY — POLISHED TYPOGRAPHY
========================================================= */

.affordability-card {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ---------- RESULT BOX GRID ---------- */

.affordability-card .decision-results,
.affordability-card .afford-results,
.affordability-card .results-grid {
    min-width: 0;
}


/* ---------- EVERY RESULT VALUE SAME SYSTEM ---------- */

.affordability-card
[id^="afford"] {

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


/* ---------- MAIN RESULT VALUES ---------- */

#affordLoanAmount,
#affordNewEMI,
#affordTotalEMI,
#affordRatio {

    font-size: 18px !important;
    line-height: 1.15 !important;

    font-weight: 800 !important;

    letter-spacing: -0.15px;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;

}


/* ---------- PERCENTAGE ---------- */

#affordRatio {

    font-size: 18px !important;

}


/* ---------- RESULT LABELS ---------- */

.affordability-card
.result-label,
.affordability-card
.metric-label {

    font-size: 9px;
    line-height: 1.25;

    font-weight: 600;

    color: #64748b;

}


/* ---------- SECONDARY RESULT DESCRIPTION ---------- */

#affordAssessment {

    margin-top: 4px;

    font-size: 9px !important;

    line-height: 1.3 !important;

    font-weight: 700 !important;

    color: #475569;

}


/* =========================================================
   AFFORDABILITY GUIDE
========================================================= */

.affordability-guide {

    margin-top: 18px;

    padding-top: 17px;

    border-top:
        1px solid #e7edf3;
}


.affordability-guide-title {

    margin-bottom: 13px;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 800;

    color: #111827;

}


.affordability-guide-item {

    display: grid;

    grid-template-columns: 8px minmax(0, 1fr);

    gap: 10px;

    align-items: start;

    margin-bottom: 13px;

}


.affordability-guide-item:last-child {

    margin-bottom: 0;

}


.guide-dot {

    width: 7px;
    height: 7px;

    margin-top: 4px;

    border-radius: 50%;

}


.guide-blue {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #60a5fa
        );

}


.guide-green {

    background:
        linear-gradient(
            135deg,
            #059669,
            #34d399
        );

}


.guide-purple {

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #a78bfa
        );

}


.affordability-guide-item strong {

    display: block;

    margin-bottom: 2px;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 800;

    color: #334155;

}


.affordability-guide-item p {

    margin: 0;

    font-size: 9px;

    line-height: 1.45;

    color: #7b8794;

}


/* =========================================================
   MAKE RESULT BOXES LOOK CONSISTENT
========================================================= */

.affordability-card .decision-result,
.affordability-card .result-mini,
.affordability-card .metric {

    min-width: 0;

}


.affordability-card .decision-result strong,
.affordability-card .result-mini strong,
.affordability-card .metric strong {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-variant-numeric:
        tabular-nums;

}


/* =========================================================
   SMALLER SCREENS
========================================================= */

@media (max-width: 900px) {

    .affordability-guide {

        margin-top: 16px;

    }

}

.affordability-card {

    min-height: 100%;

    display: flex;
    flex-direction: column;

}

.affordability-card .affordability-guide {

    margin-top: auto;

}
/* =========================================================
   CALQUBE
   HOME-LOAN-ONLY SMART SECTIONS
========================================================= */

/*
   When Home Loan is NOT active:
   - Smart Insights hidden
   - Decision Tools hidden

   Financial Health is NOT affected.
*/

body.cq-not-home .insight-section,
body.cq-not-home .decision-section {

    display: none !important;

}


/*
   Financial Health always remains visible.
*/

body.cq-not-home .health-section {

    display: grid !important;

}

/* =========================================================
   PARALLEL INVESTMENT — TOP RIGHT INSIGHT
========================================================= */

.parallel-insight-box {

    margin-top: 14px;

    padding: 15px 16px;

    border-radius: 14px;

    border: 1px solid #dbe5ff;

    background:
        linear-gradient(
            135deg,
            #f6f8ff,
            #ffffff
        );

    box-shadow:
        0 5px 16px rgba(37, 99, 235, 0.05);

}


.parallel-insight-title {

    margin-bottom: 6px;

    color: #172033;

    font-size: 12px;

    line-height: 1.25;

    font-weight: 800;

}


.parallel-insight-box p {

    margin: 0;

    color: #5f6c7d;

    font-size: 11px;

    line-height: 1.55;

}


/* Make sure the old green banner
   cannot appear anymore */

.net-cost-card {

    display: none !important;

}

.mobile-nav-group {
    border-radius: 10px;
    overflow: hidden;
}

.mobile-nav-group summary {
    list-style: none;
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 10px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.mobile-nav-group summary::-webkit-details-marker {
    display: none;
}

.mobile-nav-group summary::after {
    content: "⌄";
    margin-left: auto;
    color: #7a8797;
}

.mobile-nav-group[open] summary {
    color: #2563eb;
    background: #f3f7fd;
}

.mobile-nav-group button {
    width: 100%;
    min-height: 40px;
    padding: 0 12px 0 26px;
    border: 0;
    background: #fbfdff;
    color: #334155;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}


/* =========================================================
   KUNDALI CALCULATOR TAB — NEW
   Sits directly beside Marriage Expense.
========================================================= */

.kundali-tab-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 40px;
    padding: 0 15px;

    border: 1px solid #7652d9;
    border-radius: 12px;

    background: linear-gradient(135deg, #5d3fc0 0%, #7b59e3 52%, #5435ac 100%);
    color: #fff !important;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;

    text-decoration: none !important;
    white-space: nowrap;

    box-shadow:
        0 5px 0 #402b8e,
        0 8px 18px rgba(84, 53, 172, .18),
        inset 0 1px 0 rgba(255,255,255,.22);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.kundali-tab-link:hover {
    transform: translateY(-3px);
    filter: brightness(1.04);
    box-shadow:
        0 7px 0 #402b8e,
        0 12px 24px rgba(84, 53, 172, .25),
        0 0 18px rgba(118, 82, 217, .16),
        inset 0 1px 0 rgba(255,255,255,.25);
}

.kundali-tab-link:active {
    transform: translateY(-1px);
    box-shadow:
        0 3px 0 #402b8e,
        0 6px 14px rgba(84, 53, 172, .18);
}

.kundali-tab-link:focus-visible {
    outline: 3px solid rgba(118, 82, 217, .22);
    outline-offset: 3px;
}

.new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 30px;
    height: 17px;
    padding: 0 6px;

    border-radius: 999px;

    background: #ffcf3f;
    color: #593c00;

    font-size: 8px;
    font-weight: 950;
    letter-spacing: .06em;
    line-height: 1;
}

/* Keep Marriage Expense + Kundali aligned as a pair. */
.calculator-tabs .marriage-tab-link,
.calculator-tabs .kundali-tab-link {
    flex: 0 0 auto;
    align-self: center;
}

/* Tablet */
@media (max-width: 900px) {
    .calculator-tabs {
        align-items: center;
    }

    .calculator-tabs .marriage-tab-link,
    .calculator-tabs .kundali-tab-link {
        min-height: 39px;
        padding-left: 13px;
        padding-right: 13px;
        font-size: 12px;
    }
}

/* Mobile */
@media (max-width: 650px) {
    .calculator-tabs {
        gap: 8px;
    }

    .calculator-tabs .marriage-tab-link,
    .calculator-tabs .kundali-tab-link {
        min-height: 38px;
        padding: 0 11px;
        font-size: 11px;
        border-radius: 11px;
    }

    .kundali-tab-link .new-badge {
        min-width: 27px;
        height: 16px;
        padding: 0 5px;
        font-size: 7px;
    }
}

/* Very small phones — prevent clipping while keeping the
   two special buttons visually consistent. */
@media (max-width: 420px) {
    .calculator-tabs .marriage-tab-link,
    .calculator-tabs .kundali-tab-link {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 10.5px;
    }

    .kundali-tab-link {
        gap: 5px;
    }

    .new-badge {
        flex: 0 0 auto;
    }
}

/* =========================================================
   COST OF LIVING BUTTON
========================================================= */

.cost-living-tab-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 40px;
    padding: 0 16px;

    border: 1px solid #14966c;
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #18a874 0%,
        #0f9f73 50%,
        #087f5b 100%
    );

    color: #ffffff !important;
    text-decoration: none !important;

    font-size: 13px;
    font-weight: 850;
    line-height: 1;

    white-space: nowrap;

    box-shadow:
        0 5px 0 #086345,
        0 9px 20px rgba(15, 159, 115, 0.20),
        inset 0 1px 0 rgba(255,255,255,0.24);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

/* Small home icon */
.cost-living-tab-link::first-letter {
    font-size: 16px;
}

/* Hover */
.cost-living-tab-link:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);

    box-shadow:
        0 7px 0 #086345,
        0 13px 26px rgba(15, 159, 115, 0.28),
        0 0 18px rgba(24, 168, 116, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.28);
}

/* Click */
.cost-living-tab-link:active {
    transform: translateY(-1px);

    box-shadow:
        0 3px 0 #086345,
        0 6px 14px rgba(15, 159, 115, 0.18);
}

/* Keyboard accessibility */
.cost-living-tab-link:focus-visible {
    outline: 3px solid rgba(24, 168, 116, 0.22);
    outline-offset: 3px;
}

/* Keep it aligned with other special calculator buttons */
.calculator-tabs .cost-living-tab-link {
    flex: 0 0 auto;
    align-self: center;
}

/* Tablet */
@media (max-width: 900px) {
    .calculator-tabs .cost-living-tab-link {
        min-height: 39px;
        padding-left: 13px;
        padding-right: 13px;
        font-size: 12px;
    }
}

/* Mobile */
@media (max-width: 650px) {
    .calculator-tabs .cost-living-tab-link {
        min-height: 38px;
        padding: 0 11px;
        font-size: 11px;
        border-radius: 11px;
    }
}

/* Small phones */
@media (max-width: 420px) {
    .calculator-tabs .cost-living-tab-link {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 10.5px;
    }
}

/* =========================
   LOVE & COMPATIBILITY TAB
   ========================= */

.love-tab-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 42px;
  padding: 0 18px;

  border-radius: 12px;
  text-decoration: none;

  color: #fff;
  font-weight: 800;
  font-size: 14px;

  background: linear-gradient(135deg, #e83e74, #b92d68);
  border: 1px solid rgba(150, 25, 75, 0.5);

  box-shadow:
    0 7px 18px rgba(190, 45, 105, 0.20),
    inset 0 -2px 0 rgba(90, 0, 40, 0.22);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.love-tab-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);

  box-shadow:
    0 11px 24px rgba(190, 45, 105, 0.28),
    inset 0 -2px 0 rgba(90, 0, 40, 0.18);
}

.love-tab-link:active {
  transform: translateY(0);
}

/* NEW badge */
.love-tab-link .new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 7px;
  border-radius: 999px;

  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.35);

  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.4px;
}

/* ==================================================
   CALCULATOR NAVIGATION
   ================================================== */

.calculator-tabs-wrapper {
  width: 100%;
  margin-top: 20px;
}


/* Main calculator buttons */

.calculator-tabs-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  width: 100%;
}


/* Keep existing .tab styling, only improve consistency */

.calculator-tabs-main .tab {
  min-height: 42px;
  padding: 0 17px;

  border-radius: 12px;

  white-space: nowrap;

  font-size: 14px;
  font-weight: 700;
}


/* ==================================================
   FEATURED CALCULATORS
   ================================================== */

.featured-calculators {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 12px;
  padding: 0;
}


.featured-tab {
  min-height: 42px;
  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  border-radius: 12px;

  text-decoration: none;
  white-space: nowrap;

  font-size: 14px;
  font-weight: 800;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}


/* Marriage */

.featured-tab.marriage-tab-link {
  background: linear-gradient(135deg, #7b2638, #642030);
  color: #fff;

  border: 1px solid rgba(100, 25, 45, 0.5);

  box-shadow:
    0 7px 18px rgba(105, 35, 55, 0.18),
    inset 0 -2px 0 rgba(55, 0, 15, 0.28);
}


/* Cost of Living */

.featured-tab.cost-living-tab-link {
  background: linear-gradient(135deg, #2f9d70, #21875f);
  color: #fff;

  border: 1px solid rgba(20, 110, 75, 0.45);

  box-shadow:
    0 7px 18px rgba(35, 135, 95, 0.18),
    inset 0 -2px 0 rgba(0, 70, 40, 0.22);
}


/* Love */

.featured-tab.love-tab-link {
  background: linear-gradient(135deg, #e83e74, #c42f68);
  color: #fff;

  border: 1px solid rgba(160, 30, 85, 0.48);

  box-shadow:
    0 7px 18px rgba(190, 45, 105, 0.20),
    inset 0 -2px 0 rgba(90, 0, 40, 0.22);
}


/* Hover */

.featured-tab:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.featured-tab.marriage-tab-link:hover {
  box-shadow:
    0 11px 24px rgba(105, 35, 55, 0.27),
    inset 0 -2px 0 rgba(55, 0, 15, 0.18);
}

.featured-tab.cost-living-tab-link:hover {
  box-shadow:
    0 11px 24px rgba(35, 135, 95, 0.27),
    inset 0 -2px 0 rgba(0, 70, 40, 0.18);
}

.featured-tab.love-tab-link:hover {
  box-shadow:
    0 11px 24px rgba(190, 45, 105, 0.29),
    inset 0 -2px 0 rgba(90, 0, 40, 0.18);
}


/* NEW badge */

.featured-tab .new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 7px;

  border-radius: 999px;

  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.38);

  color: #fff;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.35px;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 900px) {

  .calculator-tabs-wrapper {
    margin-top: 14px;
  }

  .calculator-tabs-main {
    gap: 8px;
  }

  .calculator-tabs-main .tab {
    min-height: 40px;
    padding: 0 13px;
    font-size: 13px;
  }

  .featured-calculators {
    gap: 8px;
  }

  .featured-tab {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }
}


@media (max-width: 560px) {

  .calculator-tabs-main {
    justify-content: flex-start;
  }

  .featured-calculators {
    justify-content: flex-start;
  }

}

/* =========================================================
   CALQUBE — FINAL PREMIUM NAVIGATION
   Keep this block LAST.
========================================================= */

/* ---------- Desktop top navigation: one clean row ---------- */

@media (min-width: 1051px) {
    .navbar .nav-inner {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .navbar .brand-lockup {
        flex: 0 0 auto;
        min-width: 210px;
    }

    .navbar .top-nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap !important;
        gap: 3px;
        min-width: 0;
        margin-left: auto;
        margin-right: 12px;
        white-space: nowrap;
    }

    .navbar .top-nav-link,
    .navbar .nav-dropdown,
    .navbar .nav-dropdown-trigger {
        flex: 0 0 auto;
        white-space: nowrap !important;
    }

    .navbar .nav-actions {
        flex: 0 0 auto;
        white-space: nowrap;
        gap: 6px;
    }

    .navbar .top-nav-link {
        padding: 8px 8px;
        font-size: 10.5px;
    }

    .navbar .nav-login-btn,
    .navbar .nav-signup-btn {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ---------- Calculator navigation ---------- */

.calculator-tabs-premium {
    width: 100%;
    margin: 20px 0 26px;
}

.calculator-tabs-main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    width: 100%;
}

.calculator-tabs-main .tab {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 750;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.calculator-tabs-main .tab:hover {
    transform: translateY(-1px);
}

.featured-calculators {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e7edf4;
}

.featured-tab {
    position: relative;
    min-height: 44px;
    padding: 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 13px;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: -.1px;
    border: 1px solid transparent !important;

    box-shadow:
        0 7px 18px rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255, 255, 255, .15),
        inset 0 -2px 0 rgba(0, 0, 0, .14);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.featured-tab:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
}

.featured-tab:active {
    transform: translateY(0);
}

.featured-icon {
    font-size: 14px;
    line-height: 1;
}

/* =========================================================
   OPTION 5 — PREMIUM COLOR SYSTEM
========================================================= */

/* Marriage Expense — premium blue */
.calculator-tabs-premium .featured-marriage,
.calculator-tabs-premium .marriage-tab-link {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;

    box-shadow:
        0 8px 18px rgba(37, 99, 235, .20),
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -2px 0 rgba(15, 57, 150, .22) !important;
}

.calculator-tabs-premium .featured-marriage:hover,
.calculator-tabs-premium .marriage-tab-link:hover {
    box-shadow:
        0 12px 24px rgba(37, 99, 235, .27),
        inset 0 1px 0 rgba(255,255,255,.17),
        inset 0 -2px 0 rgba(15, 57, 150, .18) !important;
}

/* Cost of Living — sophisticated teal */
.calculator-tabs-premium .featured-cost,
.calculator-tabs-premium .cost-living-tab-link {
    background: linear-gradient(135deg, #219ebc 0%, #087f8c 100%) !important;
    border-color: #087f8c !important;
    color: #fff !important;

    box-shadow:
        0 8px 18px rgba(8, 127, 140, .20),
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -2px 0 rgba(0, 73, 82, .22) !important;
}

.calculator-tabs-premium .featured-cost:hover,
.calculator-tabs-premium .cost-living-tab-link:hover {
    box-shadow:
        0 12px 24px rgba(8, 127, 140, .27),
        inset 0 1px 0 rgba(255,255,255,.17),
        inset 0 -2px 0 rgba(0, 73, 82, .18) !important;
}

/* Love & Compatibility — deep plum */
.calculator-tabs-premium .featured-love,
.calculator-tabs-premium .love-tab-link {
    background: linear-gradient(135deg, #a8328d 0%, #8b2378 100%) !important;
    border-color: #8b2378 !important;
    color: #fff !important;

    box-shadow:
        0 8px 18px rgba(139, 35, 120, .22),
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -2px 0 rgba(74, 15, 64, .22) !important;
}

.calculator-tabs-premium .featured-love:hover,
.calculator-tabs-premium .love-tab-link:hover {
    box-shadow:
        0 12px 24px rgba(139, 35, 120, .29),
        inset 0 1px 0 rgba(255,255,255,.17),
        inset 0 -2px 0 rgba(74, 15, 64, .18) !important;
}

/* ---------- NEW badge ---------- */

.featured-new,
.featured-tab .new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 18px;
    padding: 0 7px;

    border-radius: 999px;

    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.38) !important;

    color: #fff !important;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .05em;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
    .calculator-tabs-premium {
        margin-top: 15px;
    }

    .calculator-tabs-main {
        justify-content: flex-start;
        gap: 7px;
    }

    .calculator-tabs-main .tab {
        min-height: 40px;
        padding: 0 13px;
        font-size: 12px;
    }

    .featured-calculators {
        justify-content: flex-start;
        gap: 8px;
    }

    .featured-tab {
        min-height: 40px;
        padding: 0 14px;
        font-size: 12px;
    }
}

@media (max-width: 560px) {
    .calculator-tabs-main,
    .featured-calculators {
        justify-content: flex-start;
    }

    .calculator-tabs-main .tab {
        padding: 0 11px;
        font-size: 11px;
    }

    .featured-tab {
        padding: 0 12px;
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    .featured-kundali {
        grid-column: auto !important;
        justify-self: auto !important;
        width: auto !important;
        grid-column: 1 / 3;
        justify-self: center !important;
        width: 162px !important;
    }
}


/* CalQube Child – Premium Baby Button */
.featured-tab.featuredd-kundali {
    background: linear-gradient(135deg, #F04478 0%, #D71960 55%, #A90849 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #C91657 !important;
    box-shadow: 0 5px 0 #85083B,
                0 9px 20px rgba(190, 15, 78, 0.28) !important;
    font-weight: 800;
    border-radius: 15px;
    transition: all 0.25s ease;
}

/* Icon */
.featured-tab.featuredd-kundali .featured-icon {
    background: linear-gradient(135deg, #FF7FA4, #C20D50) !important;
    color: #FFFFFF !important;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(80, 0, 30, 0.2);
}

/* NEW badge */
.featured-tab.featuredd-kundali .featured-new {
    background: rgba(255,255,255,0.2) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 20px;
}

/* Hover */
.featured-tab.featuredd-kundali:hover {
    background: linear-gradient(135deg, #FF5688, #C60050 65%, #900039) !important;
    transform: translateY(-3px);
    box-shadow: 0 7px 0 #85083B,
                0 13px 25px rgba(190, 15, 78, 0.35) !important;
}

/* Click */
.featured-tab.featuredd-kundali:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #85083B !important;
}

.featuredd-kundali {
    background: linear-gradient(135deg, #F04478, #D71960, #A90849) !important;
    color: #fff !important;
    border: 1px solid #C91657;
    box-shadow: 0 5px 0 #85083B,
                0 9px 20px rgba(190,15,78,.25);
}

.featuredd-kundali .featured-icon {
    background: #C20D50;
    border-radius: 10px;
    padding: 8px;
}

.featuredd-kundali .featured-new {
    background: rgba(255,255,255,.2);
    color: white;
    border: 1px solid rgba(255,255,255,.6);
}