/*====================================================
  CIBIL CHECKER CSS
  PART 1 - Root Variables + Section + Background
  Theme : Maroon | Gold | White
======================================================*/

:root{

    --primary:#52091f;
    --primary-light:#6f1230;

    --gold:#c89b3c;
    --gold-dark:#a67c22;
    --gold-light:#f8f0dc;

    --white:#ffffff;
    --body:#f8f8fa;
    --card:#ffffff;

    --text:#232323;
    --text-light:#666666;
    --border:#ececec;

    --success:#1d8b4d;
    --warning:#d6a100;
    --danger:#d54b4b;

    --shadow-sm:
        0 8px 24px rgba(0,0,0,.06);

    --shadow-md:
        0 18px 45px rgba(0,0,0,.08);

    --shadow-lg:
        0 30px 70px rgba(0,0,0,.10);

    --radius-sm:14px;
    --radius:20px;
    --radius-lg:30px;

    --transition:.35s ease;

}

/*=====================================
RESET
======================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

.cibil-section *,
.cibil-section *::before,
.cibil-section *::after{

    box-sizing:border-box;

}

.cibil-section img{

    max-width:100%;
    display:block;

}

.cibil-section button,
.cibil-section input{

    font-family:inherit;

}

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

.cibil-section{

    position:relative;

    overflow:hidden;

    background:var(--white);

    padding:120px 0;

}

/*=====================================
BACKGROUND
======================================*/

.cibil-section::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-220px;
    top:-260px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(200,155,60,.18),
    rgba(200,155,60,0));

    pointer-events:none;

}

.cibil-section::after{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:-180px;
    bottom:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(82,9,31,.08),
    rgba(82,9,31,0));

    pointer-events:none;

}

/*=====================================
TOP DECORATION
======================================*/

.cibil-section .bg-line-one{

    position:absolute;

    width:320px;
    height:320px;

    border:1px solid rgba(200,155,60,.12);

    border-radius:50%;

    top:60px;
    right:140px;

}

.cibil-section .bg-line-two{

    position:absolute;

    width:480px;
    height:480px;

    border:1px dashed rgba(82,9,31,.08);

    border-radius:50%;

    left:-240px;
    bottom:-180px;

}

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

.cibil-wrapper{

    position:relative;

    z-index:5;

    width:min(1320px,92%);

    margin:70px auto 0;

    display:grid;

    grid-template-columns:

    430px
    1fr;

    gap:42px;

    align-items:start;

}

/*=====================================
SECTION HEAD
======================================*/

.cibil-section .section-head{

    width:min(900px,92%);

    margin:auto;

    text-align:center;

    position:relative;

    z-index:5;

}

.cibil-section .eyebrow{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:40px;

    background:var(--gold-light);

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:18px;

}

.cibil-section .section-title{

    color:var(--primary);

    font-size:48px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:18px;

}

.cibil-section .section-sub{

    max-width:760px;

    margin:auto;

    color:var(--text-light);

    font-size:17px;

    line-height:1.9;

}

/*=====================================
COMMON CARD
======================================*/

.cibil-card{

    background:var(--card);

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

    border-radius:var(--radius-lg);

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

}

/*=====================================
UTILITY
======================================*/

.text-primary{

    color:var(--primary);

}

.text-gold{

    color:var(--gold);

}

.bg-gold{

    background:var(--gold-light);

}

.radius{

    border-radius:var(--radius);

}

.shadow{

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

}

.transition{

    transition:var(--transition);

}

/*====================================================
  CIBIL CHECKER CSS
  PART 2 - Left Form Card
======================================================*/

/*=====================================
LEFT PANEL
======================================*/

.cibil-form-card{

    position:sticky;

    top:120px;

    background:var(--card);

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

    border-radius:32px;

    padding:40px;

    overflow:hidden;

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

    z-index:5;

}

/* Gold Top Border */

.cibil-form-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:6px;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--gold-dark)
    );

}

/* Decorative Circle */

.cibil-form-card::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-70px;
    top:-70px;

    border-radius:50%;

    background:rgba(200,155,60,.08);

}

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

.cibil-form-card h3{

    position:relative;

    color:var(--primary);

    font-size:30px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:14px;

    z-index:2;

}

.cibil-form-card .tool-sub{

    position:relative;

    color:var(--text-light);

    font-size:15px;

    line-height:1.8;

    margin-bottom:34px;

    z-index:2;

}

/*=====================================
FIELD
======================================*/

.cibil-field{

    position:relative;

    margin-bottom:22px;

}

.cibil-field label{

    display:block;

    margin-bottom:10px;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

}

/*=====================================
INPUT
======================================*/

.cibil-field input{

    width:100%;

    height:58px;

    border-radius:16px;

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

    background:#fff;

    padding:0 18px;

    font-size:15px;

    color:var(--text);

    transition:var(--transition);

}

.cibil-field input::placeholder{

    color:#999;

}

.cibil-field input:hover{

    border-color:var(--gold);

}

.cibil-field input:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:
        0 0 0 4px rgba(200,155,60,.18);

}

/*=====================================
BUTTON
======================================*/

#checkCibilBtn{

    width:100%;

    height:60px;

    border:none;

    cursor:pointer;

    border-radius:18px;

    margin-top:10px;

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold-dark)
    );

    color:#fff;

    font-size:16px;

    font-weight:700;

    transition:var(--transition);

}

#checkCibilBtn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 18px 40px rgba(200,155,60,.35);

}

#checkCibilBtn:active{

    transform:scale(.98);

}

#checkCibilBtn:disabled{

    opacity:.7;

    cursor:not-allowed;

}

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

.cibil-note{

    margin-top:24px;

    padding:18px;

    border-radius:16px;

    background:var(--gold-light);

    border-left:4px solid var(--gold);

    color:#6a5b33;

    font-size:13px;

    line-height:1.8;

}

/*=====================================
SECURE BADGES
======================================*/

.cibil-badges{

    display:grid;

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

    gap:12px;

    margin-top:28px;

}

.cibil-badge{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px;

    border-radius:16px;

    background:#fafafa;

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

}

.cibil-badge svg{

    width:20px;

    height:20px;

    color:var(--gold);

}

.cibil-badge span{

    font-size:13px;

    font-weight:600;

    color:var(--text);

}

/*=====================================
LOADING STATE
======================================*/

#checkCibilBtn.loading{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

}

#checkCibilBtn.loading::after{

    content:"";

    width:18px;

    height:18px;

    margin-left:10px;

    display:inline-block;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    animation:cibilSpin .8s linear infinite;

    vertical-align:middle;

}

@keyframes cibilSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*====================================================
  CIBIL CHECKER CSS
  PART 3 - Premium Inputs + Icons + Validation
======================================================*/

/*=====================================
PREMIUM INPUT WRAPPER
======================================*/

.cibil-input-group{

    position:relative;

    margin-bottom:24px;

}

.cibil-input-group:last-child{

    margin-bottom:0;

}

/*=====================================
INPUT ICON
======================================*/

.cibil-input-icon{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    width:20px;

    height:20px;

    color:var(--gold);

    pointer-events:none;

    transition:var(--transition);

    z-index:3;

}

.cibil-input-group input{

    padding-left:56px;

}

/*=====================================
INPUT HOVER
======================================*/

.cibil-input-group:hover .cibil-input-icon{

    color:var(--primary);

    transform:translateY(-50%) scale(1.08);

}

.cibil-input-group:hover input{

    border-color:var(--gold);

}

/*=====================================
FOCUS EFFECT
======================================*/

.cibil-input-group:focus-within .cibil-input-icon{

    color:var(--primary);

}

.cibil-input-group:focus-within input{

    background:#fff;

    border-color:var(--gold);

    box-shadow:

        0 0 0 5px rgba(200,155,60,.15);

}

/*=====================================
FLOATING LABEL
======================================*/

.cibil-floating-label{

    position:absolute;

    left:56px;

    top:18px;

    background:#fff;

    padding:0 6px;

    color:#9a9a9a;

    font-size:14px;

    pointer-events:none;

    transition:.25s ease;

}

.cibil-input-group.active .cibil-floating-label,

.cibil-input-group:focus-within .cibil-floating-label{

    top:-9px;

    font-size:11px;

    font-weight:700;

    color:var(--primary);

}

/*=====================================
SUCCESS STATE
======================================*/

.cibil-input-group.success input{

    border-color:var(--success);

}

.cibil-input-group.success .cibil-input-icon{

    color:var(--success);

}

.cibil-input-group.success::after{

    content:"✓";

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    color:var(--success);

    font-size:18px;

    font-weight:700;

}

/*=====================================
ERROR STATE
======================================*/

.cibil-input-group.error input{

    border-color:var(--danger);

}

.cibil-input-group.error .cibil-input-icon{

    color:var(--danger);

}

.cibil-input-group.error::after{

    content:"!";

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    color:var(--danger);

    font-size:18px;

    font-weight:700;

}

/*=====================================
ERROR MESSAGE
======================================*/

.cibil-error{

    margin-top:8px;

    font-size:12px;

    color:var(--danger);

    display:none;

}

.cibil-input-group.error .cibil-error{

    display:block;

}

/*=====================================
HELP TEXT
======================================*/

.cibil-help{

    margin-top:8px;

    color:#888;

    font-size:12px;

    line-height:1.6;

}

/*=====================================
INPUT PLACEHOLDER
======================================*/

.cibil-field input::placeholder{

    color:#b2b2b2;

    transition:var(--transition);

}

.cibil-field input:focus::placeholder{

    opacity:.35;

}

/*=====================================
AUTOFILL FIX
======================================*/

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus{

    -webkit-box-shadow:

        0 0 0 1000px #fff inset;

    -webkit-text-fill-color:#222;

    transition:background-color 9999s;

}

/*=====================================
INPUT ACTIVE ANIMATION
======================================*/

.cibil-input-group input{

    transform:translateY(0);

    transition:

        border .3s ease,

        box-shadow .3s ease,

        transform .3s ease;

}

.cibil-input-group input:focus{

    transform:translateY(-2px);

}

/*=====================================
FORM DIVIDER
======================================*/

.cibil-divider{

    display:flex;

    align-items:center;

    gap:15px;

    margin:30px 0;

}

.cibil-divider::before,

.cibil-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:var(--border);

}

.cibil-divider span{

    color:#999;

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

}

/*=====================================
SECURITY INFO
======================================*/

.cibil-security{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:24px;

    padding:18px;

    border-radius:16px;

    background:#fafafa;

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

}

.cibil-security svg{

    width:22px;

    height:22px;

    color:var(--gold);

    flex-shrink:0;

}

.cibil-security h5{

    color:var(--primary);

    font-size:15px;

    margin-bottom:6px;

}

.cibil-security p{

    color:var(--text-light);

    font-size:13px;

    line-height:1.7;

}

/*=====================================
BUTTON RIPPLE EFFECT
======================================*/

#checkCibilBtn{

    position:relative;

    overflow:hidden;

}

#checkCibilBtn::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    left:50%;

    top:50%;

    border-radius:50%;

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

    transform:translate(-50%,-50%);

    transition:.6s;

}

#checkCibilBtn:hover::before{

    width:420px;

    height:420px;

}


/*====================================================
  CIBIL CHECKER CSS
  PART 4 - Premium Result Card + Speedometer Gauge
======================================================*/

/*=====================================
RESULT CARD
======================================*/

.cibil-result-card{

    position:relative;

    background:var(--card);

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

    border-radius:32px;

    padding:45px;

    overflow:hidden;

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

    min-height:760px;

}

.cibil-result-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(200,155,60,.10),
    transparent 42%);

    pointer-events:none;

}

.cibil-result-card::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    right:-120px;

    bottom:-120px;

    background:

    radial-gradient(circle,
    rgba(82,9,31,.06),
    transparent);

}

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

.cibil-result-head{

    position:relative;

    z-index:5;

    text-align:center;

    margin-bottom:40px;

}

.cibil-result-head h3{

    font-size:34px;

    color:var(--primary);

    font-weight:800;

    margin-bottom:12px;

}

.cibil-result-head p{

    max-width:560px;

    margin:auto;

    color:var(--text-light);

    font-size:15px;

    line-height:1.8;

}

/*=====================================
SPEEDOMETER AREA
======================================*/

.cibil-gauge{

    position:relative;

    width:100%;

    max-width:620px;

    height:360px;

    margin:0 auto 40px;

}

/*=====================================
SVG
======================================*/

.gauge-svg{

    width:100%;

    height:100%;

    display:block;

}

/*=====================================
GAUGE STROKES
======================================*/

.gauge-poor,
.gauge-average,
.gauge-good,
.gauge-excellent{

    fill:none;

    stroke-linecap:round;

    stroke-width:22;

}

.gauge-poor{

    stroke:#d9534f;

}

.gauge-average{

    stroke:#f0ad4e;

}

.gauge-good{

    stroke:#7cb342;

}

.gauge-excellent{

    stroke:var(--gold);

}

/*=====================================
INNER TRACK
======================================*/

.gauge-track{

    fill:none;

    stroke:#efefef;

    stroke-width:10;

    stroke-linecap:round;

}

/*=====================================
TICKS
======================================*/

.gauge-ticks{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.gauge-tick{

    position:absolute;

    width:3px;

    height:16px;

    background:#d8d8d8;

    border-radius:10px;

    transform-origin:center 155px;

}

/*=====================================
CENTER SCORE
======================================*/

.gauge-score{

    position:absolute;

    left:50%;

    top:55%;

    transform:translate(-50%,-50%);

    text-align:center;

    z-index:15;

}

.gauge-score h2{

    font-size:78px;

    font-weight:800;

    color:var(--primary);

    line-height:1;

    letter-spacing:-2px;

    margin-bottom:10px;

}

.gauge-score span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 24px;

    border-radius:999px;

    background:var(--gold-light);

    color:var(--primary);

    font-size:15px;

    font-weight:700;

    min-width:130px;

}

/*=====================================
SCORE LABELS
======================================*/

.gauge-label{

    position:absolute;

    font-size:13px;

    font-weight:700;

    color:#777;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.label-poor{

    left:18px;

    bottom:34px;

}

.label-average{

    left:110px;

    top:88px;

}

.label-good{

    right:112px;

    top:88px;

}

.label-excellent{

    right:18px;

    bottom:34px;

}

/*=====================================
SCORE RANGE BOXES
======================================*/

.score-range-grid{

    display:grid;

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

    gap:16px;

    margin-top:20px;

}

.range-box{

    background:#fafafa;

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

    border-radius:18px;

    text-align:center;

    padding:18px;

    transition:var(--transition);

}

.range-box:hover{

    transform:translateY(-4px);

    border-color:var(--gold);

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

}

.range-box strong{

    display:block;

    font-size:17px;

    color:var(--primary);

    margin-bottom:8px;

}

.range-box span{

    color:#666;

    font-size:13px;

    font-weight:600;

}

/*=====================================
RESULT MESSAGE
======================================*/

.score-message{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:35px;

    padding:22px;

    border-radius:20px;

    background:#fcfcfc;

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

}

.message-icon{

    width:62px;

    height:62px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
    135deg,
    var(--gold),
    var(--gold-dark));

    color:#fff;

    font-size:26px;

    font-weight:700;

    flex-shrink:0;

}

.score-message h4{

    font-size:22px;

    color:var(--primary);

    margin-bottom:6px;

}

.score-message p{

    color:var(--text-light);

    font-size:14px;

    line-height:1.8;

}

/*====================================================
  CIBIL CHECKER CSS
  PART 5 - Premium Animated Needle + Center Hub
======================================================*/

/*=====================================
GAUGE WRAPPER
======================================*/

.cibil-gauge{

    position:relative;

    overflow:visible;

}

/*=====================================
NEEDLE WRAPPER
(JS rotates this element)
======================================*/

.gauge-needle{

    position:absolute;

    left:50%;
    bottom:48px;

    width:12px;
    height:185px;

    transform-origin:
        50%
        calc(100% - 10px);

    transform:
        translateX(-50%)
        rotate(-90deg);

    transition:
        transform
        2.2s
        cubic-bezier(.22,1,.36,1);

    z-index:40;

    pointer-events:none;

}

/*=====================================
NEEDLE BODY
======================================*/

.needle-line{

    position:absolute;

    left:50%;
    bottom:18px;

    transform:translateX(-50%);

    width:6px;
    height:150px;

    border-radius:999px;

    background:
    linear-gradient(
        to top,
        #6f1230 0%,
        var(--primary) 35%,
        var(--gold) 100%
    );

    box-shadow:
        0 0 0 1px rgba(255,255,255,.25),
        0 4px 12px rgba(0,0,0,.18),
        0 10px 24px rgba(200,155,60,.25);

}

/*=====================================
NEEDLE TIP
======================================*/

.needle-line::before{

    content:"";

    position:absolute;

    top:-18px;
    left:50%;

    transform:
        translateX(-50%);

    width:0;
    height:0;

    border-left:9px solid transparent;
    border-right:9px solid transparent;
    border-bottom:24px solid var(--gold);

    filter:drop-shadow(0 3px 5px rgba(0,0,0,.18));

}

/*=====================================
TAIL
======================================*/

.needle-line::after{

    content:"";

    position:absolute;

    bottom:-10px;
    left:50%;

    transform:translateX(-50%);

    width:10px;
    height:18px;

    border-radius:0 0 10px 10px;

    background:var(--primary);

}

/*=====================================
CENTER HUB
======================================*/

.needle-center{

    position:absolute;

    left:50%;
    bottom:0;

    transform:translate(-50%,0);

    width:42px;
    height:42px;

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%,
        #fff,
        var(--gold) 58%,
        var(--gold-dark) 100%);

    border:5px solid var(--white);

    box-shadow:
        0 0 0 5px rgba(82,9,31,.08),
        0 10px 24px rgba(0,0,0,.18);

    z-index:5;

}

/* Inner Metal */

.needle-center::before{

    content:"";

    position:absolute;

    inset:8px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        #fff,
        #ececec);

}

/* Small Center Dot */

.needle-center::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--primary);

}

/*=====================================
REFLECTION
======================================*/

.gauge-needle::before{

    content:"";

    position:absolute;

    left:50%;
    top:18px;

    transform:translateX(-50%);

    width:2px;
    height:115px;

    border-radius:20px;

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

    z-index:3;

}

/*=====================================
GLOW
======================================*/

.gauge-needle::after{

    content:"";

    position:absolute;

    left:50%;
    top:8px;

    transform:translateX(-50%);

    width:12px;
    height:140px;

    border-radius:50px;

    background:rgba(200,155,60,.16);

    filter:blur(10px);

    z-index:-1;

}

/*=====================================
INITIAL STATE
======================================*/

.gauge-needle.loading{

    animation:
        cibilNeedleIdle
        1.3s
        ease-in-out
        infinite alternate;

}

/*=====================================
STOP STATE
(JS removes .loading)
======================================*/

.gauge-needle.finished{

    animation:none;

}

/*=====================================
WAITING ANIMATION
======================================*/

@keyframes cibilNeedleIdle{

    from{

        transform:
        translateX(-50%)
        rotate(-88deg);

    }

    to{

        transform:
        translateX(-50%)
        rotate(-92deg);

    }

}

/*=====================================
SCORE POP
======================================*/

.gauge-score h2{

    transition:
        transform .45s ease,
        color .35s ease;

}

.gauge-score.show h2{

    transform:scale(1.08);

}

/*=====================================
STATUS BADGE
======================================*/

.gauge-score span{

    transition:
        background .35s,
        color .35s,
        transform .35s;

}

.gauge-score.show span{

    transform:translateY(-2px);

}

/*=====================================
HIGH SCORE EFFECT
======================================*/

.gauge-score.excellent h2{

    color:var(--gold);

}

.gauge-score.excellent span{

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    color:#fff;

}

/*=====================================
REDUCED MOTION
======================================*/

@media (prefers-reduced-motion: reduce){

    .gauge-needle{

        transition:none;

        animation:none !important;

    }

}

/*====================================================
  CIBIL CHECKER CSS
  PART 6 - Score Panel + Score Cards + Result States
======================================================*/

/*=====================================
SCORE DETAILS GRID
======================================*/

.score-details{

    display:grid;

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

    gap:22px;

    margin-top:35px;

}

/*=====================================
SCORE CARD
======================================*/

.score-box{

    position:relative;

    overflow:hidden;

    background:#ffffff;

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

    border-radius:22px;

    padding:24px;

    transition:all .35s ease;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.score-box::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:linear-gradient(
        to bottom,
        var(--gold),
        var(--primary)
    );

}

.score-box:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.score-box h4{

    color:var(--primary);

    font-size:17px;

    font-weight:700;

    margin-bottom:12px;

}

.score-box p{

    color:var(--text-light);

    line-height:1.7;

    font-size:14px;

}

/*=====================================
SUMMARY GRID
======================================*/

.demo-summary{

    display:grid;

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

    gap:18px;

    margin-top:40px;

}

/*=====================================
SUMMARY CARD
======================================*/

.summary-card{

    background:#fff;

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

    border-radius:20px;

    padding:22px;

    text-align:center;

    transition:.35s;

}

.summary-card:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

}

.summary-card h5{

    color:#777;

    font-size:13px;

    font-weight:600;

    margin-bottom:12px;

}

.summary-card strong{

    display:block;

    font-size:20px;

    color:var(--primary);

    font-weight:800;

}

/*=====================================
RESULT STATUS COLORS
======================================*/

.status-excellent{

    background:#edf9f0 !important;

    color:#198754 !important;

}

.status-good{

    background:#eef8ff !important;

    color:#0d6efd !important;

}

.status-average{

    background:#fff8e8 !important;

    color:#d18b00 !important;

}

.status-poor{

    background:#fff1f1 !important;

    color:#dc3545 !important;

}

/*=====================================
ACTIVE RANGE CARD
======================================*/

.range-box.active{

    border-color:var(--gold);

    background:linear-gradient(
        135deg,
        rgba(200,155,60,.12),
        rgba(82,9,31,.05)
    );

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(200,155,60,.18);

}

.range-box.active strong{

    color:var(--gold-dark);

}

.range-box.active span{

    color:var(--primary);

}

/*=====================================
SCORE APPEAR ANIMATION
======================================*/

.score-show{

    animation:scoreFade .8s ease forwards;

}

@keyframes scoreFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=====================================
VALUE COUNTER
======================================*/

#scoreValue{

    transition:.3s;

}

#scoreValue.updating{

    transform:scale(1.08);

}

/*=====================================
STATUS BADGE
======================================*/

#scoreStatus{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:130px;

    padding:10px 20px;

    border-radius:50px;

    font-weight:700;

    letter-spacing:.3px;

}

/*=====================================
MESSAGE BOX
======================================*/

.score-message{

    transition:.35s;

}

.score-message.success{

    border-color:#198754;

}

.score-message.warning{

    border-color:#d18b00;

}

.score-message.danger{

    border-color:#dc3545;

}

/*=====================================
ICON COLORS
======================================*/

.message-icon.success{

    background:#198754;

}

.message-icon.warning{

    background:#d18b00;

}

.message-icon.danger{

    background:#dc3545;

}

/*=====================================
FADE IN
======================================*/

.fade-up{

    opacity:0;

    transform:translateY(25px);

    animation:fadeUp .7s forwards;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=====================================
PULSE EFFECT
======================================*/

.pulse{

    animation:pulseCard 1.8s infinite;

}

@keyframes pulseCard{

    0%{

        box-shadow:0 0 0 0 rgba(200,155,60,.35);

    }

    70%{

        box-shadow:0 0 0 18px rgba(200,155,60,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(200,155,60,0);

    }

}


/*====================================================
  CIBIL CHECKER CSS
  PART 7 - Premium Disclaimer + Information Cards
  + Credit Factors Section
======================================================*/

/*=====================================
DISCLAIMER SECTION
======================================*/

.cibil-disclaimer{

    position:relative;

    margin-top:60px;

    padding:38px;

    background:linear-gradient(
        135deg,
        rgba(248,240,220,.55),
        rgba(255,255,255,1)
    );

    border:1px solid rgba(200,155,60,.25);

    border-left:6px solid var(--gold);

    border-radius:26px;

    overflow:hidden;

    box-shadow:0 18px 40px rgba(0,0,0,.05);

}

.cibil-disclaimer::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:-90px;
    top:-90px;

    border-radius:50%;

    background:rgba(200,155,60,.08);

}

.cibil-disclaimer h4{

    position:relative;

    color:var(--primary);

    font-size:28px;

    font-weight:800;

    margin-bottom:18px;

    z-index:2;

}

.cibil-disclaimer p{

    position:relative;

    color:var(--text-light);

    font-size:15px;

    line-height:1.9;

    margin-bottom:16px;

    z-index:2;

}

.cibil-disclaimer p:last-child{

    margin-bottom:0;

}

/*=====================================
INFO GRID
======================================*/

.cibil-factors{

    display:grid;

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

    gap:28px;

    margin-top:50px;

}

/*=====================================
FACTOR CARD
======================================*/

.factor-card{

    position:relative;

    overflow:hidden;

    background:#fff;

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

    border-radius:24px;

    padding:30px;

    transition:.35s ease;

    box-shadow:0 12px 28px rgba(0,0,0,.05);

}

.factor-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--gold)
    );

}

.factor-card:hover{

    transform:translateY(-8px);

    border-color:rgba(200,155,60,.45);

    box-shadow:0 22px 45px rgba(0,0,0,.10);

}

/*=====================================
ICON CIRCLE
======================================*/

.factor-card::after{

    content:"";

    position:absolute;

    right:-35px;
    bottom:-35px;

    width:120px;
    height:120px;

    border-radius:50%;

    background:rgba(200,155,60,.08);

}

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

.factor-card h4{

    position:relative;

    color:var(--primary);

    font-size:21px;

    font-weight:700;

    margin-bottom:14px;

    z-index:2;

}

/*=====================================
TEXT
======================================*/

.factor-card p{

    position:relative;

    color:var(--text-light);

    font-size:15px;

    line-height:1.8;

    z-index:2;

}

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

.cibil-footer-note{

    margin-top:55px;

    padding:28px 34px;

    border-radius:24px;

    background:var(--primary);

    color:#fff;

    position:relative;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(82,9,31,.22);

}

.cibil-footer-note::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-70px;
    top:-70px;

    border-radius:50%;

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

}

.cibil-footer-note p{

    position:relative;

    font-size:14px;

    line-height:1.9;

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

    z-index:2;

}

.cibil-footer-note strong{

    color:var(--gold);

}

/*=====================================
ANIMATION
======================================*/

.factor-card{

    opacity:0;

    transform:translateY(35px);

    animation:factorFade .8s forwards;

}

.factor-card:nth-child(2){

    animation-delay:.15s;

}

.factor-card:nth-child(3){

    animation-delay:.30s;

}

.factor-card:nth-child(4){

    animation-delay:.45s;

}

@keyframes factorFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=====================================
HOVER GLOW
======================================*/

.factor-card:hover h4{

    color:var(--gold-dark);

}

.factor-card:hover::before{

    height:6px;

}

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

@media(max-width:992px){

    .cibil-factors{

        grid-template-columns:1fr;

    }

}


/*====================================================
  CIBIL CHECKER CSS
  PART 8 - Responsive + Final Polish + Micro Animations
======================================================*/

/*=====================================
LARGE DESKTOP
======================================*/

@media (max-width:1400px){

    .cibil-wrapper{

        width:min(1200px,94%);

        gap:34px;

    }

}

/*=====================================
LAPTOP
======================================*/

@media (max-width:1200px){

    .cibil-wrapper{

        grid-template-columns:
        380px
        1fr;

    }

    .cibil-result-card{

        padding:36px;

    }

    .gauge-score h2{

        font-size:64px;

    }

    .score-range-grid{

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

    }

    .demo-summary{

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

    }

}

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

@media (max-width:992px){

    .cibil-section{

        padding:90px 0;

    }

    .cibil-wrapper{

        grid-template-columns:1fr;

        gap:30px;

    }

    .cibil-form-card{

        position:relative;

        top:auto;

    }

    .cibil-result-card{

        min-height:auto;

    }

    .cibil-gauge{

        max-width:520px;

        height:320px;

    }

    .gauge-score{

        top:57%;

    }

    .gauge-score h2{

        font-size:58px;

    }

    .score-details{

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

    }

}

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

@media (max-width:768px){

    .cibil-section{

        padding:70px 0;

    }

    .cibil-section .section-title{

        font-size:34px;

    }

    .cibil-section .section-sub{

        font-size:15px;

        line-height:1.8;

    }

    .cibil-form-card,

    .cibil-result-card{

        padding:24px;

        border-radius:24px;

    }

    .cibil-result-head h3{

        font-size:28px;

    }

    .cibil-gauge{

        max-width:100%;

        height:270px;

    }

    .gauge-score{

        top:58%;

    }

    .gauge-score h2{

        font-size:48px;

    }

    .gauge-score span{

        min-width:110px;

        font-size:13px;

        padding:8px 16px;

    }

    .score-range-grid{

        grid-template-columns:1fr;

        gap:14px;

    }

    .score-details{

        grid-template-columns:1fr;

    }

    .demo-summary{

        grid-template-columns:1fr;

    }

    .cibil-factors{

        grid-template-columns:1fr;

    }

}

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

@media (max-width:480px){

    .cibil-section .section-title{

        font-size:28px;

    }

    .cibil-form-card h3{

        font-size:24px;

    }

    .cibil-result-head h3{

        font-size:24px;

    }

    .gauge-score h2{

        font-size:40px;

    }

    .gauge-needle{

        height:145px;

    }

    .needle-line{

        height:118px;

    }

    .needle-center{

        width:34px;

        height:34px;

    }

    .score-message{

        flex-direction:column;

        text-align:center;

    }

    .message-icon{

        margin-bottom:10px;

    }

}

/*=====================================
CARD HOVER
======================================*/

.score-box,
.factor-card,
.summary-card,
.range-box{

    will-change:transform;

}

/*=====================================
SCROLL ANIMATION
======================================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*=====================================
GOLD SHIMMER
======================================*/

.gold-shimmer{

    position:relative;

    overflow:hidden;

}

.gold-shimmer::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:45%;

    height:100%;

    transform:skewX(-20deg);

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

}

.gold-shimmer:hover::after{

    animation:goldShine 1.2s ease;

}

@keyframes goldShine{

    from{

        left:-130%;

    }

    to{

        left:150%;

    }

}

/*=====================================
BUTTON RIPPLE
======================================*/

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    animation:rippleAnim .6s linear;

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

    pointer-events:none;

}

@keyframes rippleAnim{

    to{

        transform:scale(4);

        opacity:0;

    }

}

/*=====================================
SMOOTH SCROLLING
======================================*/

html{

    scroll-behavior:smooth;

}

/*=====================================
TEXT SELECTION
======================================*/

::selection{

    background:var(--gold);

    color:#fff;

}

::-moz-selection{

    background:var(--gold);

    color:#fff;

}

/*=====================================
CUSTOM SCROLLBAR
======================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f3f3f3;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold-dark);

}

/*=====================================
FINAL POLISH
======================================*/

.cibil-section{

    isolation:isolate;

}

.cibil-wrapper{

    position:relative;

    z-index:5;

}

.cibil-form-card,
.cibil-result-card{

    backdrop-filter:blur(8px);

}

/*====================================================
  CIBIL CHECKER CSS
  PART 9 - Premium Score Themes + Loading Overlay
  + Accessibility + Print Styles
======================================================*/

/*=====================================
LOADING OVERLAY
======================================*/

.cibil-loading{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

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

    backdrop-filter:blur(6px);

    z-index:999;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

}

.cibil-loading.show{

    opacity:1;

    visibility:visible;

}

.cibil-loading h4{

    color:var(--primary);

    margin-top:22px;

    font-size:22px;

    font-weight:700;

}

.cibil-loading p{

    margin-top:8px;

    color:var(--text-light);

    font-size:14px;

}

/*=====================================
SPINNER
======================================*/

.loading-ring{

    width:78px;

    height:78px;

    border-radius:50%;

    border:5px solid rgba(200,155,60,.18);

    border-top-color:var(--gold);

    animation:cibilRotate .9s linear infinite;

}

@keyframes cibilRotate{

    to{

        transform:rotate(360deg);

    }

}

/*=====================================
SCORE THEMES
======================================*/

.score-theme-excellent{

    border-color:#1d8b4d;

}

.score-theme-excellent .message-icon{

    background:#1d8b4d;

}

.score-theme-excellent .gauge-score span{

    background:#1d8b4d;

    color:#fff;

}

.score-theme-good{

    border-color:#2b7de9;

}

.score-theme-good .message-icon{

    background:#2b7de9;

}

.score-theme-good .gauge-score span{

    background:#2b7de9;

    color:#fff;

}

.score-theme-average{

    border-color:#e2a600;

}

.score-theme-average .message-icon{

    background:#e2a600;

}

.score-theme-average .gauge-score span{

    background:#fff7df;

    color:#946400;

}

.score-theme-poor{

    border-color:#d9534f;

}

.score-theme-poor .message-icon{

    background:#d9534f;

}

.score-theme-poor .gauge-score span{

    background:#ffecec;

    color:#b32222;

}

/*=====================================
SCORE FLASH
======================================*/

.score-highlight{

    animation:scoreGlow 1.1s ease;

}

@keyframes scoreGlow{

    0%{

        transform:scale(.85);

        opacity:.3;

    }

    60%{

        transform:scale(1.08);

        opacity:1;

    }

    100%{

        transform:scale(1);

    }

}

/*=====================================
RESULT SUCCESS BAR
======================================*/

.result-success{

    position:relative;

}

.result-success::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--primary)
    );

}

/*=====================================
ACCESSIBILITY
======================================*/

button:focus-visible,
input:focus-visible{

    outline:3px solid rgba(200,155,60,.45);

    outline-offset:3px;

}

button{

    -webkit-tap-highlight-color:transparent;

}

input{

    caret-color:var(--gold);

}

/*=====================================
DISABLED BUTTON
======================================*/

button:disabled{

    cursor:not-allowed;

    opacity:.65;

    transform:none !important;

}

/*=====================================
PRINT
======================================*/

@media print{

    .cibil-form-card{

        display:none;

    }

    .cibil-result-card{

        width:100%;

        box-shadow:none;

        border:1px solid #ddd;

    }

    .cibil-disclaimer{

        page-break-inside:avoid;

    }

}

/*=====================================
HIGH CONTRAST
======================================*/

@media (prefers-contrast:more){

    .score-box,
    .factor-card,
    .summary-card{

        border-width:2px;

    }

    .gauge-score h2{

        color:#000;

    }

}

/*=====================================
REDUCED MOTION
======================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*====================================================
  CIBIL CHECKER CSS
  PART 10 - Premium Visual Effects & Luxury Finish
======================================================*/

/*=====================================
PREMIUM GLASS EFFECT
======================================*/

.glass-effect{

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.45);

}

/*=====================================
PREMIUM CARD GLOW
======================================*/

.premium-glow{

    position:relative;

    overflow:hidden;

}

.premium-glow::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

    linear-gradient(
        135deg,
        rgba(200,155,60,.35),
        transparent 35%,
        transparent 65%,
        rgba(82,9,31,.25)
    );

    opacity:0;

    transition:.45s;

    z-index:-1;

}

.premium-glow:hover::before{

    opacity:1;

}

/*=====================================
FLOATING GOLD ORBS
======================================*/

.cibil-orb{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(8px);

    opacity:.55;

}

.cibil-orb.one{

    width:90px;

    height:90px;

    left:8%;

    top:10%;

    background:rgba(200,155,60,.18);

    animation:orbFloat1 8s ease-in-out infinite;

}

.cibil-orb.two{

    width:60px;

    height:60px;

    right:12%;

    top:18%;

    background:rgba(82,9,31,.12);

    animation:orbFloat2 10s ease-in-out infinite;

}

.cibil-orb.three{

    width:120px;

    height:120px;

    right:5%;

    bottom:8%;

    background:rgba(200,155,60,.10);

    animation:orbFloat3 12s ease-in-out infinite;

}

/*=====================================
ORB ANIMATIONS
======================================*/

@keyframes orbFloat1{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}

@keyframes orbFloat2{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(18px);

    }

}

@keyframes orbFloat3{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-20px,-18px);

    }

}

/*=====================================
GAUGE GLOW
======================================*/

.cibil-gauge{

    filter:

        drop-shadow(0 10px 25px rgba(82,9,31,.10))

        drop-shadow(0 25px 45px rgba(200,155,60,.12));

}

/*=====================================
CENTER HUB PULSE
======================================*/

.needle-center{

    animation:centerPulse 2.5s ease-in-out infinite;

}

@keyframes centerPulse{

    0%,100%{

        box-shadow:

        0 0 0 5px rgba(82,9,31,.08),

        0 10px 24px rgba(0,0,0,.18);

    }

    50%{

        box-shadow:

        0 0 0 10px rgba(200,155,60,.18),

        0 14px 30px rgba(0,0,0,.22);

    }

}

/*=====================================
SCORE SHINE
======================================*/

.gauge-score h2{

    position:relative;

    overflow:hidden;

}

.gauge-score h2::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    transform:skewX(-20deg);

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

}

.gauge-score.show h2::after{

    animation:scoreShine 1.3s ease;

}

@keyframes scoreShine{

    from{

        left:-120%;

    }

    to{

        left:160%;

    }

}

/*=====================================
RESULT CARD SHADOW
======================================*/

.cibil-result-card:hover{

    transform:translateY(-3px);

    box-shadow:

        0 25px 60px rgba(82,9,31,.12),

        0 15px 30px rgba(200,155,60,.12);

}

/*=====================================
FORM CARD SHADOW
======================================*/

.cibil-form-card:hover{

    transform:translateY(-3px);

    box-shadow:

        0 25px 60px rgba(82,9,31,.10),

        0 15px 35px rgba(200,155,60,.10);

}

/*=====================================
RANGE CARD ACTIVE
======================================*/

.range-box.active{

    position:relative;

    overflow:hidden;

}

.range-box.active::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    animation:rangeShine 2.2s linear infinite;

}

@keyframes rangeShine{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(200%);

    }

}

/*=====================================
PREMIUM BADGE
======================================*/

.premium-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:40px;

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold-dark)
    );

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.05em;

    box-shadow:0 10px 25px rgba(200,155,60,.28);

}

/*=====================================
FINAL PREMIUM EFFECT
======================================*/

.cibil-section{

    background:

    radial-gradient(circle at top right,

    rgba(200,155,60,.05),

    transparent 35%),

    radial-gradient(circle at bottom left,

    rgba(82,9,31,.05),

    transparent 35%),

    #ffffff;

}

/*====================================================
  CIBIL CHECKER CSS
  PART 11 - Banking Dashboard Components
  Statistics • Progress • Timeline • Enterprise UI
======================================================*/

/*=====================================
SCORE INSIGHTS
======================================*/

.score-insights{

    margin-top:50px;

    display:grid;

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

    gap:24px;

}

.insight-card{

    position:relative;

    overflow:hidden;

    background:#fff;

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

    border-radius:24px;

    padding:28px;

    transition:all .35s ease;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.insight-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:0 20px 45px rgba(82,9,31,.10);

}

.insight-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--gold)
    );

}

.insight-card h5{

    font-size:15px;

    color:#777;

    margin-bottom:12px;

    font-weight:600;

}

.insight-card strong{

    display:block;

    font-size:32px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:10px;

}

.insight-card p{

    color:var(--text-light);

    line-height:1.8;

    font-size:14px;

}

/*=====================================
PROGRESS BARS
======================================*/

.progress-list{

    margin-top:45px;

}

.progress-item{

    margin-bottom:28px;

}

.progress-item:last-child{

    margin-bottom:0;

}

.progress-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.progress-head span{

    font-size:14px;

    font-weight:600;

    color:var(--primary);

}

.progress-track{

    width:100%;

    height:10px;

    border-radius:50px;

    background:#ececec;

    overflow:hidden;

}

.progress-fill{

    width:0;

    height:100%;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--gold)
    );

    transition:width 1.8s ease;

}

/*=====================================
TIMELINE
======================================*/

.credit-timeline{

    margin-top:55px;

    position:relative;

    padding-left:36px;

}

.credit-timeline::before{

    content:"";

    position:absolute;

    left:10px;

    top:0;

    bottom:0;

    width:2px;

    background:linear-gradient(
        to bottom,
        var(--gold),
        rgba(200,155,60,.15)
    );

}

.timeline-item{

    position:relative;

    margin-bottom:32px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-31px;

    top:3px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#fff;

    border:4px solid var(--gold);

    box-shadow:0 0 0 5px rgba(200,155,60,.12);

}

.timeline-item h5{

    font-size:17px;

    color:var(--primary);

    margin-bottom:8px;

}

.timeline-item p{

    color:var(--text-light);

    line-height:1.8;

    font-size:14px;

}

/*=====================================
STATISTICS
======================================*/

.stats-grid{

    display:grid;

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

    gap:20px;

    margin-top:50px;

}

.stat-box{

    background:#fff;

    border-radius:22px;

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

    padding:26px;

    text-align:center;

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

}

.stat-number{

    display:block;

    font-size:34px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:8px;

}

.stat-title{

    font-size:14px;

    color:#777;

    font-weight:600;

}

/*=====================================
SUCCESS TAG
======================================*/

.success-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:999px;

    background:#eef9f1;

    color:#198754;

    font-size:13px;

    font-weight:700;

}

.success-tag::before{

    content:"";

    width:9px;

    height:9px;

    border-radius:50%;

    background:#198754;

    animation:statusBlink 2s infinite;

}

@keyframes statusBlink{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.35;

    }

}

/*=====================================
COUNTER EFFECT
======================================*/

.counter-animate{

    animation:counterPop .5s ease;

}

@keyframes counterPop{

    0%{

        transform:scale(.85);

    }

    60%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

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

@media(max-width:992px){

    .score-insights{

        grid-template-columns:1fr;

    }

    .stats-grid{

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

    }

}

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

@media(max-width:576px){

    .stats-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================
   PART 12
   CTA SECTION + TRUST BADGES + FINAL ACTION
========================================== */


/* Main CTA Wrapper */
.cibil-cta-section {
    width: 100%;
    padding: 80px 30px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(200,155,60,0.18), transparent 35%),
        linear-gradient(135deg, #52091f, #2b0612);
}


/* Decorative Glow */
.cibil-cta-section::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -120px;
    right: -100px;
    background: rgba(200,155,60,0.12);
    border-radius: 50%;
    filter: blur(50px);
}


.cibil-cta-container {
    max-width: 1200px;
    margin: auto;
    position: relative;
    z-index: 2;
}


/* CTA Card */
.cibil-cta-card {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.12),
            rgba(255,255,255,0.04)
        );

    border:1px solid rgba(200,155,60,0.35);

    backdrop-filter: blur(18px);

    border-radius:30px;

    padding:50px;

    text-align:center;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.35);

}


/* Heading */

.cibil-cta-card h2 {

    color:#ffffff;

    font-size:42px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:18px;

}


.cibil-cta-card h2 span {

    color:#c89b3c;

}


/* Paragraph */

.cibil-cta-card p {

    max-width:720px;

    margin:0 auto 35px;

    color:rgba(255,255,255,0.75);

    font-size:17px;

    line-height:1.7;

}


/* CTA Button */

.cibil-primary-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 38px;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        #c89b3c,
        #f4d47b
    );

    color:#52091f;

    font-size:17px;

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;

    box-shadow:
    0 12px 35px rgba(200,155,60,.35);

}


.cibil-primary-btn:hover {

    transform:translateY(-5px);

    box-shadow:
    0 20px 45px rgba(200,155,60,.55);

}



/* ==================================
   TRUST BADGES
================================== */


.cibil-trust-wrapper {

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}



.cibil-trust-item {


    min-width:220px;

    padding:18px 25px;

    display:flex;

    align-items:center;

    gap:15px;


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

    border:

    1px solid rgba(255,255,255,.15);


    border-radius:18px;


    transition:.3s ease;


}



.cibil-trust-item:hover {

    transform:translateY(-6px);

    border-color:#c89b3c;

}



.cibil-trust-icon {


    width:48px;

    height:48px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:#c89b3c;

    color:#52091f;


    border-radius:50%;


    font-size:22px;

}



.cibil-trust-text strong {


    display:block;

    color:#fff;

    font-size:16px;


}



.cibil-trust-text span {


    display:block;

    margin-top:3px;

    color:rgba(255,255,255,.65);

    font-size:13px;


}




/* ==================================
   FINAL DISCLAIMER BOX
================================== */


.cibil-final-note {


    margin-top:50px;

    padding:25px 30px;


    background:#ffffff;


    border-radius:22px;


    color:#52091f;


    box-shadow:

    0 15px 40px rgba(0,0,0,.15);


}


.cibil-final-note h4 {


    margin-bottom:10px;


    color:#52091f;


    font-size:20px;

}



.cibil-final-note p {


    margin:0;

    color:#555;

    line-height:1.7;

    font-size:15px;

}




/* ==================================
   FLOATING GOLD DOT ANIMATION
================================== */


.cibil-floating-dot {


    position:absolute;


    width:12px;

    height:12px;


    background:#c89b3c;


    border-radius:50%;


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


}



.cibil-floating-dot.one {

    top:25%;

    left:10%;

}


.cibil-floating-dot.two {

    bottom:20%;

    right:12%;

    animation-delay:2s;

}



@keyframes cibilFloat {


    0%,100% {

        transform:translateY(0);

        opacity:.5;

    }


    50% {

        transform:translateY(-25px);

        opacity:1;

    }


}




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


@media(max-width:768px){


.cibil-cta-section {

    padding:50px 18px;

}



.cibil-cta-card {

    padding:35px 22px;

    border-radius:22px;

}



.cibil-cta-card h2 {

    font-size:30px;

}



.cibil-cta-card p {

    font-size:15px;

}



.cibil-primary-btn {

    width:100%;

}



.cibil-trust-item {

    width:100%;

}



.cibil-final-note {

    padding:22px;

}



}




@media(max-width:480px){


.cibil-cta-card h2 {

    font-size:26px;

}


.cibil-trust-icon {

    width:42px;

    height:42px;

    font-size:18px;

}


}/* ==========================================
   PART 13
   PREMIUM FOOTER + LOADER + FINAL POLISH
========================================== */


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

.cibil-footer {

    width:100%;

    background:
    linear-gradient(
        135deg,
        #2b0612,
        #52091f
    );

    padding:70px 30px 25px;

    position:relative;

    overflow:hidden;

}



.cibil-footer::before {

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    left:-180px;

    bottom:-180px;

    background:

    radial-gradient(
        circle,
        rgba(200,155,60,.18),
        transparent 65%
    );

    border-radius:50%;

}




.cibil-footer-container {

    max-width:1200px;

    margin:auto;

    position:relative;

    z-index:2;

}


/* Footer Grid */

.cibil-footer-grid {

    display:grid;

    grid-template-columns:

    1.5fr 1fr 1fr 1fr;

    gap:40px;

}


/* Footer Brand */


.cibil-footer-brand h3 {

    font-size:28px;

    color:#ffffff;

    margin-bottom:15px;

}



.cibil-footer-brand h3 span {

    color:#c89b3c;

}



.cibil-footer-brand p {

    color:rgba(255,255,255,.65);

    line-height:1.7;

    font-size:15px;

    max-width:330px;

}




/* Footer Heading */


.cibil-footer-title {

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    margin-bottom:20px;

    position:relative;

}



.cibil-footer-title::after {

    content:"";

    width:45px;

    height:3px;

    background:#c89b3c;

    position:absolute;

    left:0;

    bottom:-8px;

    border-radius:5px;

}



/* Footer Links */


.cibil-footer-links {

    list-style:none;

    padding:0;

    margin:0;

}



.cibil-footer-links li {

    margin-bottom:12px;

}



.cibil-footer-links a {


    color:rgba(255,255,255,.65);

    text-decoration:none;

    font-size:15px;

    transition:.3s ease;

}



.cibil-footer-links a:hover {

    color:#c89b3c;

    padding-left:6px;

}



/* Footer Contact */


.cibil-footer-contact {

    display:flex;

    flex-direction:column;

    gap:14px;

}



.cibil-contact-item {


    display:flex;

    gap:12px;

    align-items:center;

    color:rgba(255,255,255,.7);

    font-size:14px;


}



.cibil-contact-item i {


    width:36px;

    height:36px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#c89b3c;

    color:#52091f;

    border-radius:50%;


}



/* Bottom Bar */


.cibil-footer-bottom {


    margin-top:50px;

    padding-top:25px;

    border-top:

    1px solid rgba(255,255,255,.15);


    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}



.cibil-footer-bottom p {


    margin:0;

    color:rgba(255,255,255,.55);

    font-size:14px;

}




.cibil-footer-social {


    display:flex;

    gap:12px;

}



.cibil-footer-social a {


    width:40px;

    height:40px;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:50%;


    background:

    rgba(255,255,255,.1);


    color:#fff;


    transition:.3s ease;

}



.cibil-footer-social a:hover {


    background:#c89b3c;

    color:#52091f;

    transform:translateY(-5px);

}




/* ==========================================
   PAGE LOADER
========================================== */


.cibil-page-loader {


    position:fixed;

    inset:0;

    background:#52091f;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

}



.cibil-loader-circle {


    width:90px;

    height:90px;


    border-radius:50%;


    border:

    5px solid rgba(255,255,255,.15);


    border-top-color:#c89b3c;


    animation:

    cibilRotate 1s linear infinite;

}



@keyframes cibilRotate {


    from {

        transform:rotate(0deg);

    }


    to {

        transform:rotate(360deg);

    }

}




/* ==========================================
   SCROLL REVEAL SUPPORT
========================================== */


.cibil-reveal {


    opacity:0;

    transform:

    translateY(40px);


    transition:

    all .8s ease;

}



.cibil-reveal.active {


    opacity:1;

    transform:

    translateY(0);

}




/* ==========================================
   SMOOTH SCROLL
========================================== */


html {

    scroll-behavior:smooth;

}



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


@media(max-width:992px){


.cibil-footer-grid {


    grid-template-columns:

    repeat(2,1fr);

}



}




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


@media(max-width:600px){


.cibil-footer {


    padding:

    50px 18px 20px;

}



.cibil-footer-grid {


    grid-template-columns:

    1fr;

    gap:30px;

}



.cibil-footer-brand h3 {

    font-size:24px;

}



.cibil-footer-bottom {


    justify-content:center;

    text-align:center;

}



.cibil-footer-social {


    justify-content:center;

}


}


/* ==========================================
   ACCESSIBILITY + PERFORMANCE
========================================== */


button,
a {

    -webkit-tap-highlight-color:transparent;

}



img {

    max-width:100%;

    height:auto;

}



* {

    box-sizing:border-box;

}