/* ==========================================================
   LIFE PLANNER → MDRT PAGE
   Page-specific CSS
   All classes are prefixed with "lp-" to avoid conflicts
   with the existing website stylesheet.
========================================================== */

:root {
    --lp-primary: #25cdc7;
    --lp-secondary: #272c49;
    --lp-dark: #002a5c;
    --lp-text: #4c5367;
    --lp-light: #f6f9fc;
    --lp-border: #e8edf3;
    --lp-white: #ffffff;
}

.lp-section {
    padding: 95px 0;
}

.lp-light {
    background: var(--lp-light);
}

.lp-kicker,
.lp-eyebrow {
    display: inline-block;
    color: var(--lp-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.lp-section-heading {
    max-width: 780px;
    margin: 0 auto 45px;
}

.lp-section-heading h2,
.lp-digital h2,
.lp-mdrt h2,
.lp-final-cta h2 {
    color: var(--lp-secondary);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 18px;
}

.lp-section-heading p,
.lp-digital p,
.lp-mdrt p {
    color: var(--lp-text);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
}


/* HERO */
.lp-hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 95px;
    background:
        radial-gradient(circle at 85% 20%, rgba(37,205,199,.12), transparent 30%),
        linear-gradient(135deg, #f7fbfd 0%, #ffffff 55%, #f3fbfb 100%);
}

.lp-hero:after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -150px;
    bottom: -180px;
    border: 60px solid rgba(37,205,199,.07);
    border-radius: 50%;
}

.lp-eyebrow {
    margin-bottom: 18px;
}

.lp-hero-title {
    color: var(--lp-secondary);
    font-size: clamp(45px, 6vw, 74px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -2px;
    margin: 0 0 25px;
}

.lp-hero-title span {
    color: var(--lp-primary);
}

.lp-hero-lead {
    max-width: 590px;
    color: var(--lp-text);
    font-size: 19px;
    line-height: 1.75;
    margin-bottom: 32px;
}

.lp-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
}

.lp-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 10px 25px;
    color: var(--lp-secondary);
    border: 1px solid rgba(39,44,73,.2);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

.lp-btn-outline:hover {
    color: #fff;
    background: var(--lp-secondary);
    border-color: var(--lp-secondary);
}

.lp-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 35px;
}

.lp-hero-points div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lp-secondary);
    font-size: 13px;
    font-weight: 600;
}

.lp-hero-points i {
    color: var(--lp-primary);
}

.lp-hero-image-wrap {
    position: relative;
    max-width: 600px;
    margin-left: auto;
}

.lp-hero-image {
    width: 100%;
    min-height: 540px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0,42,92,.16);
}

.lp-floating-card {
    position: absolute;
    left: -35px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 230px;
    padding: 17px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 15px 45px rgba(0,42,92,.15);
}

.lp-floating-number {
    color: var(--lp-primary);
    font-size: 27px;
    font-weight: 800;
}

.lp-floating-card strong {
    display: block;
    color: var(--lp-secondary);
    font-size: 14px;
}

.lp-floating-card small {
    display: block;
    color: #7d8494;
    margin-top: 2px;
}


/* PILLARS */
.lp-pillar-card {
    height: 100%;
    padding: 35px 30px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    box-shadow: 0 10px 35px rgba(0,42,92,.04);
    transition: transform .3s ease, box-shadow .3s ease;
}

.lp-pillar-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 45px rgba(0,42,92,.10);
}

.lp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    color: var(--lp-primary);
    background: rgba(37,205,199,.10);
    border-radius: 50%;
    font-size: 21px;
}

.lp-pillar-card h3,
.lp-audience-card h3 {
    color: var(--lp-secondary);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.lp-pillar-card p,
.lp-audience-card p {
    color: var(--lp-text);
    line-height: 1.7;
    margin: 0;
}






/* DIGITAL OFFICE */
.lp-digital {
    background: #f8fbfc;
}

.lp-image-card {
    position: relative;
    padding-right: 20px;
}

.lp-image-card img {
    width: 100%;
    min-height: 520px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,42,92,.13);
}

.lp-image-badge {
    position: absolute;
    right: -5px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    color: #fff;
    background: var(--lp-secondary);
    border-radius: 7px;
    box-shadow: 0 10px 30px rgba(0,42,92,.2);
    font-size: 13px;
    font-weight: 700;
}

.lp-image-badge i {
    color: var(--lp-primary);
}

.lp-large-text {
    font-size: 17px !important;
    margin-bottom: 28px !important;
}

.lp-digital-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.lp-digital-list div {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 15px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 6px;
}

.lp-digital-list span {
    color: var(--lp-primary);
    font-size: 12px;
    font-weight: 800;
}

.lp-digital-list strong {
    color: var(--lp-secondary);
    font-size: 14px;
}


/* AUDIENCE */
.lp-audience-card {
    height: 100%;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 8px;
    transition: all .3s ease;
}

.lp-audience-card:hover {
    border-color: rgba(37,205,199,.5);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,42,92,.07);
}

.lp-audience-card > i {
    color: var(--lp-primary);
    font-size: 24px;
    margin-bottom: 18px;
}


/* GROWTH BANNER */
.lp-growth-banner {
    position: relative;
    overflow: hidden;
    padding: 115px 0;
    background-image: url("../images/life-planner/growth-banner.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.lp-growth-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,42,92,.90), rgba(39,44,73,.73));
}

.lp-growth-banner h2 {
    color: #fff;
    font-size: clamp(35px, 5vw, 55px);
    line-height: 1.15;
    margin: 10px 0 18px;
}

.lp-growth-banner p {
    max-width: 700px;
    margin: 0 auto;
    color: rgba(255,255,255,.84);
    font-size: 17px;
    line-height: 1.8;
}

.lp-kicker-light {
    color: var(--lp-primary);
}


/* MDRT */
.lp-mdrt {
    color: #fff;
    background:
        radial-gradient(circle at 80% 20%, rgba(37,205,199,.15), transparent 30%),
        var(--lp-secondary);
}

.lp-mdrt h2 {
    color: #fff;
}

.lp-mdrt p {
    color: rgba(255,255,255,.72);
}

.lp-mdrt-card {
    position: relative;
    padding: 55px 45px;
    text-align: center;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    overflow: hidden;
}

.lp-mdrt-card:before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -120px;
    right: -80px;
    border: 45px solid rgba(37,205,199,.08);
    border-radius: 50%;
}

.lp-mdrt-small {
    color: var(--lp-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.lp-mdrt-title {
    color: #fff;
    font-size: clamp(65px, 10vw, 105px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 5px;
    margin: 20px 0;
}

.lp-mdrt-card p {
    max-width: 420px;
    margin: 0 auto;
    color: rgba(255,255,255,.72);
}

.lp-mdrt-line {
    width: 55px;
    height: 2px;
    margin: 25px auto;
    background: var(--lp-primary);
}

.lp-mdrt-card strong {
    color: #fff;
    font-size: 14px;
}

.lp-question-list {
    margin-top: 28px;
}

.lp-question-list div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    color: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(255,255,255,.09);
    font-size: 14px;
    line-height: 1.6;
}

.lp-question-list i {
    flex: 0 0 auto;
    color: var(--lp-primary);
    margin-top: 4px;
}


/* FINAL CTA */
.lp-final-cta {
    padding: 105px 0;
    background:
        linear-gradient(135deg, rgba(37,205,199,.10), transparent 45%),
        #fff;
}

.lp-final-cta p {
    max-width: 680px;
    margin: 0 auto 28px;
    color: var(--lp-text);
    font-size: 17px;
    line-height: 1.8;
}


/* RESPONSIVE */
@media (max-width: 991px) {
    .lp-section {
        padding: 75px 0;
    }

    .lp-hero {
        padding: 80px 0 70px;
    }

    .lp-hero-title {
        font-size: 54px;
    }

    .lp-hero-image-wrap {
        margin: 20px auto 0;
    }

    .lp-hero-image {
        min-height: 450px;
    }

    .lp-floating-card {
        left: 20px;
    }

    .lp-section-heading h2,
    .lp-digital h2,
    .lp-mdrt h2,
    .lp-final-cta h2 {
        font-size: 36px;
    }

    .lp-image-card {
        padding-right: 0;
    }

    .lp-image-badge {
        right: 15px;
    }
}

@media (max-width: 767px) {
    .lp-section {
        padding: 60px 0;
    }

    .lp-hero {
        padding: 65px 0 55px;
    }

    .lp-hero-title {
        font-size: 43px;
        letter-spacing: -1px;
    }

    .lp-hero-lead {
        font-size: 16px;
    }

    .lp-hero-points {
        display: grid;
        gap: 10px;
    }

    .lp-hero-image {
        min-height: 350px;
        border-radius: 12px;
    }

    .lp-floating-card {
        position: relative;
        left: auto;
        bottom: auto;
        margin: -30px 15px 0;
    }

    .lp-section-heading {
        margin-bottom: 32px;
    }

    .lp-section-heading h2,
    .lp-digital h2,
    .lp-mdrt h2,
    .lp-final-cta h2 {
        font-size: 30px;
    }


    .lp-digital-list {
        grid-template-columns: 1fr;
    }

    .lp-image-card img {
        min-height: 380px;
    }

    .lp-growth-banner {
        padding: 80px 0;
        background-attachment: scroll;
    }

    .lp-growth-banner h2 {
        font-size: 34px;
    }

    .lp-mdrt-card {
        padding: 40px 25px;
    }

    .lp-mdrt-title {
        font-size: 65px;
    }

    .lp-hero-buttons .butn,
    .lp-btn-outline {
        width: 100%;
    }
}


/* EXPANDED CONTENT */
.lp-hero-subtitle {
    color: var(--lp-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    margin: -8px 0 18px;
}
.lp-hero-question {
    color: var(--lp-secondary);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
}
.lp-section-heading h2 span,
.lp-professional h2 span {
    color: var(--lp-primary);
}
.lp-mini-card {
    height: 100%;
    padding: 24px 18px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    text-align: center;
    transition: .3s ease;
}
.lp-mini-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,42,92,.08); }
.lp-mini-card i { display:block; color:var(--lp-primary); font-size:24px; margin-bottom:12px; }
.lp-mini-card strong { display:block; color:var(--lp-secondary); font-size:15px; margin-bottom:5px; }
.lp-mini-card span { display:block; color:var(--lp-text); font-size:13px; line-height:1.5; }
.lp-goal-strip {
    margin-top: 35px;
    padding: 22px;
    border-radius: 10px;
    background: rgba(37,205,199,.08);
    color: var(--lp-secondary);
}
.lp-goal-strip span { margin-right:8px; }
.lp-goal-strip strong { color:var(--lp-primary); }
.lp-mdrt-info-card {
    height:100%;
    padding:40px;
    background:#fff;
    border:1px solid var(--lp-border);
    border-radius:14px;
    box-shadow:0 15px 40px rgba(0,42,92,.06);
}
.lp-mdrt-info-card h3 { color:var(--lp-secondary); font-size:48px; font-weight:800; margin:0 0 15px; }
.lp-mdrt-info-card p { color:var(--lp-text); line-height:1.8; }
.lp-journey-image-card { position:relative; height:100%; overflow:hidden; border-radius:14px; }
.lp-journey-image-card img { width:100%; height:100%; min-height:350px; object-fit:cover; }
.lp-image-caption {
    position:absolute; left:20px; right:20px; bottom:20px; padding:18px 20px;
    background:rgba(39,44,73,.92); border-radius:8px; color:#fff;
}
.lp-image-caption strong { display:block; font-size:20px; margin-bottom:4px; }
.lp-image-caption span { color:rgba(255,255,255,.75); font-size:13px; }
.lp-professional { background:#fff; }
.lp-professional h2 { color:var(--lp-secondary); font-size:42px; line-height:1.2; }
.lp-professional p { color:var(--lp-text); line-height:1.8; }
.lp-professional-image img { width:100%; min-height:500px; object-fit:cover; border-radius:14px; box-shadow:0 20px 50px rgba(0,42,92,.13); }
.lp-growth-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }
.lp-growth-list div {
    display:flex; align-items:center; gap:10px; padding:13px 15px;
    border:1px solid var(--lp-border); border-radius:7px; background:#fff;
}
.lp-growth-list i { color:var(--lp-primary); width:20px; text-align:center; }
.lp-growth-list strong { color:var(--lp-secondary); font-size:14px; }
.lp-digital-detail-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:25px; }
.lp-digital-detail-list > div {
    display:flex; gap:12px; padding:16px; background:#fff;
    border:1px solid var(--lp-border); border-radius:7px;
}
.lp-digital-detail-list > div > span { color:var(--lp-primary); font-weight:800; font-size:12px; }
.lp-digital-detail-list strong { color:var(--lp-secondary); font-size:14px; }
.lp-digital-detail-list p { color:var(--lp-text); font-size:13px; line-height:1.55; margin:5px 0 0; }
.lp-phone-note { margin-top:22px !important; font-size:14px !important; font-weight:600; color:var(--lp-secondary) !important; }
.lp-phone-note i { color:var(--lp-primary); margin-right:7px; }
.lp-growth-banner h3 { color:#fff; font-size:25px; margin:30px 0 15px; }
.lp-growth-lines { font-size:18px !important; }
.lp-answer-yes { margin-top:28px !important; color:var(--lp-primary) !important; }
.lp-cta-line { color:var(--lp-secondary) !important; font-weight:700; }
.lp-final-words { font-size:18px !important; color:var(--lp-secondary) !important; margin-bottom:28px !important; }

@media (max-width: 767px) {
    .lp-hero-subtitle { font-size:17px; }
    .lp-professional h2 { font-size:30px; }
    .lp-mdrt-info-card { padding:28px 22px; }
    .lp-growth-list,
    .lp-digital-detail-list { grid-template-columns:1fr; }
    .lp-professional-image img { min-height:350px; }
    .lp-growth-banner h3 { font-size:21px; }
}

/* EXPANDED SOURCE CONTENT */
.lp-hero-subtitle{color:var(--lp-primary);font-size:20px;font-weight:700;line-height:1.45;margin:-8px 0 18px}
.lp-hero-question{color:var(--lp-secondary);font-size:17px;font-weight:700;margin-bottom:10px}
.lp-source-lead{color:var(--lp-secondary);font-size:17px;line-height:1.7}
.lp-source-list{color:var(--lp-text);line-height:1.8}
.lp-growth-banner h3{color:#fff;font-size:25px;margin:28px 0 15px}
.lp-final-cta h3{color:var(--lp-primary);font-size:24px;margin:25px 0 10px}
@media(max-width:767px){.lp-hero-subtitle{font-size:17px}.lp-growth-banner h3{font-size:21px}}



/* JOURNEY */
.lp-journey {
    background: #fff;
}

.lp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Desktop a 3 te column */
    gap: 30px;
    margin-bottom: 20px; /* Niche SVG-er jonno space */
}

/* === CARD STYLING === */
.lp-card {
    background: #ffffff;
    border: 1px solid rgba(20, 184, 166, 0.15);
    border-radius: 12px;
    padding: 30px 25px;
    box-shadow: 0 4px 20px rgba(0, 42, 92, 0.05);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.lp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--lp-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.lp-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 42, 92, 0.1);
    border-color: transparent;
}

.lp-card:hover::before {
    transform: scaleX(1);
}

.lp-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.lp-step-number {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--lp-secondary);
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0,42,92,.2);
    transition: background 0.3s ease;
}

.lp-card:hover .lp-step-number {
    background: var(--lp-primary);
}

.lp-card-header span {
    color: var(--lp-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.lp-card h3 {
    color: var(--lp-secondary);
    font-size: 22px;
    margin: 0 0 10px;
}

.lp-card p {
    color: var(--lp-text);
    line-height: 1.6;
    margin: 0;
    font-size: 14px;
}

/* === BOTTOM SVG ANIMATION === */
.lp-bottom-animation {
    width: 100%;
    margin-top: 40px;
    position: relative;
}

.animated-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: drawPath 3s ease-in-out forwards;
}

.flowing-particles {
    stroke-dasharray: 4 26;
    stroke-dashoffset: 0;
    opacity: 0;
    animation: showParticles 0.1s forwards 3s, flowParticles 1s linear infinite 3s;
}

.step-node {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

.node-circle {
    animation: pulseNode 3s infinite alternate ease-in-out;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.7s; }
.delay-3 { animation-delay: 1.2s; }
.delay-4 { animation-delay: 1.7s; }
.delay-5 { animation-delay: 2.2s; }
.delay-6 { animation-delay: 2.7s; }

@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes showParticles { to { opacity: 0.8; } }
@keyframes flowParticles {
    from { stroke-dashoffset: 30; }
    to { stroke-dashoffset: 0; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseNode {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* === RESPONSIVE LAYOUT === */
@media (max-width: 992px) {
    .lp-grid { grid-template-columns: repeat(2, 1fr); } /* Tablet e 2 to column */
    .lp-bottom-animation{
        margin-top:0px;
    }
}

@media (max-width: 768px) {
    .lp-grid { grid-template-columns: 1fr; } /* Mobile e 1 ta column (Lomba hobe) */
    .lp-bottom-animation{
        margin-top:0px;
    }
    .lp-bottom-animation svg { height: 100px; } /* Mobile a SVG ta choto kora holo */
}