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

/* ==========================================================
   PLANS HERO
========================================================== */
html,
body{
    overflow-x:hidden;
    max-width:100%;
}


.plans-hero{

    position:relative;

    min-height:620px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(196,155,58,.18),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(196,155,58,.10),
    transparent 40%),

    linear-gradient(
    135deg,
    #0b0b0b 0%,
    #151515 45%,
    #202020 100%);

}

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

.plans-hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(196,155,58,.08);

    filter:blur(120px);

    top:-180px;

    right:-120px;

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

}

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

.plans-hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(196,155,58,.05);

    filter:blur(90px);

    bottom:-100px;

    left:-120px;

    animation:heroGlow 12s ease-in-out infinite reverse;

}

/* ==========================================================
   CONTENT
========================================================== */

.plans-hero .container{

    position:relative;

    z-index:2;

}

.plans-hero-content{

    max-width:760px;

}

.plans-hero-content small{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--accent);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.plans-hero-content h1{

    color:#ffffff;

    margin-bottom:28px;

    line-height:1.1;

}

.plans-hero-content p{

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

    font-size:18px;

    line-height:1.9;

    max-width:650px;

    margin-bottom:45px;

}

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

.plans-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.plans-buttons .btn{

    min-width:190px;

}
.plans-hero .btn-outline{

    color:#ffffff;

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

    background:transparent;

}

.plans-hero .btn-outline:hover{

    background:#ffffff;

    color:#111111;

    border-color:#ffffff;

}

/* ==========================================================
   GRID LINES
========================================================== */

.plans-overlay{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);

    background-size:70px 70px;

    mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.8),
    transparent);

    pointer-events:none;

}

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

@keyframes heroGlow{

    0%{

        transform:translateY(0) scale(1);

    }

    50%{

        transform:translateY(25px) scale(1.12);

    }

    100%{

        transform:translateY(0) scale(1);

    }

}

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

@media(max-width:768px){

    .plans-hero{

        min-height:520px;

        padding:120px 0 80px;

    }

    .plans-hero-content{

        text-align:center;

    }

    .plans-hero-content p{

        font-size:16px;

    }

    .plans-buttons{

        flex-direction:column;

    }

    .plans-buttons .btn{

        width:100%;

    }

}
/* ==========================================================
   INVESTMENT PLANS
========================================================== */

.plans-section{

    padding:100px 0;

    background:var(--surface);

}

.plans-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.plan-card{

    position:relative;

    background:#fff;

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

    border-radius:20px;

    padding:35px 30px;

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

    transition:var(--transition);

    overflow:hidden;

}

.plan-card:hover{

    transform:translateY(-12px);

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

    border-color:var(--accent);

}

/* ==========================================================
   FEATURED PLAN
========================================================== */

.plan-card.featured{

    border:2px solid var(--accent);

    transform:scale(1.03);

}

.plan-card.featured:hover{

    transform:scale(1.03) translateY(-12px);

}

.featured-badge{

    position:absolute;

    top:20px;

    right:-45px;

    background:var(--accent);

    color:#fff;

    font-size:12px;

    font-weight:700;

    padding:8px 55px;

    transform:rotate(45deg);

    letter-spacing:1px;

}

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

.plan-header{

    text-align:center;

    margin-bottom:30px;

}

.plan-header small{

    display:block;

    color:var(--accent);

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}

.plan-header h3{

    font-size:48px;

    color:var(--primary);

    margin-bottom:8px;

}

.plan-header span{

    color:var(--text-secondary);

}

/* ==========================================================
   FEATURES
========================================================== */

.plan-features{

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:35px;

}

.plan-features li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:12px;

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

    color:var(--text-secondary);

    font-size:15px;

}

.plan-features strong{

    color:var(--primary);

}

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

.plan-card .btn{

    width:100%;

}

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

@media(max-width:1200px){

    .plans-grid{

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

    }

}

@media(max-width:768px){

    .plans-section{

        padding:70px 0;

    }

    .plans-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .plan-card{

        padding:30px 25px;

    }

    .plan-header h3{

        font-size:40px;

    }

    .featured-badge{

        font-size:10px;

        padding:6px 45px;

        right:-42px;

    }

}


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

.plan-comparison{

    padding:100px 0;

    background:#ffffff;

}

.comparison-wrapper{

    margin-top:60px;

    overflow-x:auto;

    border-radius:20px;

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

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

}

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

.comparison-table{

    width:100%;

    border-collapse:collapse;

    min-width:900px;

    background:#fff;

}

.comparison-table thead{

    background:var(--primary);

}

.comparison-table th{

    color:#fff;

    padding:22px;

    text-align:center;

    font-size:16px;

    font-weight:700;

    white-space:nowrap;

}

.comparison-table th:first-child{

    text-align:left;

}

.comparison-table tbody tr{

    transition:var(--transition);

}

.comparison-table tbody tr:nth-child(even){

    background:#fafafa;

}

.comparison-table tbody tr:hover{

    background:rgba(196,155,58,.08);

}

.comparison-table td{

    padding:20px;

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

    text-align:center;

    color:var(--text-secondary);

    font-size:15px;

}

.comparison-table td:first-child{

    font-weight:700;

    color:var(--primary);

    text-align:left;

}

.comparison-table tbody tr:last-child td{

    border-bottom:none;

}

/* ==========================================================
   HIGHLIGHT PREMIUM COLUMN
========================================================== */

.comparison-table th:nth-child(4){

    background:var(--accent);

    color:#fff;

}

.comparison-table td:nth-child(4){

    background:rgba(196,155,58,.06);

    font-weight:600;

}

/* ==========================================================
   CHECKMARKS
========================================================== */

.comparison-table td{

    vertical-align:middle;

}

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

.comparison-wrapper::-webkit-scrollbar{

    height:8px;

}

.comparison-wrapper::-webkit-scrollbar-thumb{

    background:var(--accent);

    border-radius:50px;

}

.comparison-wrapper::-webkit-scrollbar-track{

    background:#ececec;

}

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

@media(max-width:992px){

    .comparison-wrapper{

        border-radius:16px;

    }

    .comparison-table{

        min-width:850px;

    }

}

@media(max-width:768px){

    .plan-comparison{

        padding:70px 0;

    }

    .comparison-table{

        min-width:750px;

    }

    .comparison-table th{

        padding:18px;

        font-size:14px;

    }

    .comparison-table td{

        padding:18px;

        font-size:14px;

    }

}



/* ==========================================================
   INVESTMENT CALCULATOR
========================================================== */

.calculator{

    padding:100px 0;

    background:#fafafa;

}

.calculator-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    margin-top:60px;

    align-items:start;

}

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

.calculator-form{

    background:#fff;

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

    border-radius:20px;

    padding:40px;

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

}

.input-group{

    margin-bottom:25px;

}

.input-group label{

    display:block;

    font-weight:600;

    color:var(--primary);

    margin-bottom:10px;

}

.input-group input,

.input-group select{

    width:100%;

    height:58px;

    padding:0 18px;

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

    border-radius:12px;

    background:#fff;

    font-size:16px;

    transition:var(--transition);

}

.input-group input:focus,

.input-group select:focus{

    border-color:var(--accent);

    outline:none;

    box-shadow:0 0 0 4px rgba(196,155,58,.15);

}

.calculator-form .btn{

    width:100%;

    margin-top:10px;

}

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

.calculator-results{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.result-card{

    background:#fff;

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

    border-left:5px solid var(--accent);

    border-radius:18px;

    padding:30px;

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

    transition:var(--transition);

}

.result-card:hover{

    transform:translateY(-6px);

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

}

.result-card span{

    display:block;

    color:var(--text-secondary);

    margin-bottom:12px;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.result-card h3{

    font-size:36px;

    color:var(--primary);

    margin:0;

    font-weight:700;

}

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

@media(max-width:992px){

    .calculator-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .calculator{

        padding:70px 0;

    }

    .calculator-form{

        padding:25px;

    }

    .result-card{

        padding:25px;

    }

    .result-card h3{

        font-size:30px;

    }

}

@media(max-width:480px){

    .calculator-form{

        padding:20px;

    }

    .input-group input,

    .input-group select{

        height:54px;

        font-size:15px;

    }

    .result-card{

        padding:20px;

    }

    .result-card h3{

        font-size:26px;

    }

}


/* ==========================================================
   WHY INVEST WITH PRIMEVAULT
========================================================== */

.plan-benefits{

    padding:100px 0;

    background:#ffffff;

}

.benefits-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.benefit-card{

    background:#fff;

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

    border-radius:20px;

    padding:35px 30px;

    text-align:center;

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

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.benefit-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--accent);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.benefit-card:hover{

    transform:translateY(-10px);

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

    border-color:var(--accent);

}

.benefit-card:hover::before{

    transform:scaleX(1);

}

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

.benefit-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:rgba(196,155,58,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.4s;

}

.benefit-icon i{

    font-size:34px;

    color:var(--accent);

}

.benefit-card:hover .benefit-icon{

    background:var(--accent);

}

.benefit-card:hover .benefit-icon i{

    color:#fff;

}

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

.benefit-card h3{

    margin-bottom:15px;

    color:var(--primary);

    font-size:22px;

}

.benefit-card p{

    color:var(--text-secondary);

    line-height:1.8;

    font-size:15px;

}

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

@media(max-width:1100px){

    .benefits-grid{

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

    }

}

@media(max-width:768px){

    .plan-benefits{

        padding:70px 0;

    }

    .benefits-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .benefit-card{

        padding:30px 25px;

    }

    .benefit-icon{

        width:70px;

        height:70px;

    }

    .benefit-icon i{

        font-size:30px;

    }

    .benefit-card h3{

        font-size:20px;

    }

}

@media(max-width:480px){

    .benefit-card{

        padding:25px 20px;

    }

    .benefit-card p{

        font-size:14px;

    }

}

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

.investment-timeline{

    padding:100px 0;

    background:#fafafa;

}

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

.timeline{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-top:70px;

    position:relative;

    gap:20px;

}

.timeline-item{

    flex:1;

    text-align:center;

    position:relative;

    z-index:2;

}

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

.timeline-circle{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#fff;

    border:3px solid var(--accent);

    display:flex;

    justify-content:center;

    align-items:center;

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

    transition:var(--transition);

}

.timeline-circle i{

    font-size:34px;

    color:var(--accent);

}

.timeline-item:hover .timeline-circle{

    background:var(--accent);

    transform:translateY(-8px);

}

.timeline-item:hover .timeline-circle i{

    color:#fff;

}

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

.timeline-item h3{

    margin-bottom:12px;

    color:var(--primary);

    font-size:22px;

}

.timeline-item p{

    color:var(--text-secondary);

    line-height:1.8;

    max-width:240px;

    margin:0 auto;

}

/* ==========================================================
   CONNECTING LINE
========================================================== */

.timeline-line{

    flex:0 0 70px;

    height:4px;

    background:linear-gradient(
        to right,
        var(--accent),
        rgba(196,155,58,.3)
    );

    margin-top:45px;

    border-radius:30px;

}

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

@media(max-width:992px){

    .timeline{

        flex-wrap:wrap;

        justify-content:center;

        gap:40px;

    }

    .timeline-line{

        display:none;

    }

    .timeline-item{

        flex:0 0 calc(50% - 20px);

    }

}

@media(max-width:768px){

    .investment-timeline{

        padding:70px 0;

    }

    .timeline{

        flex-direction:column;

        align-items:center;

        gap:30px;

    }

    .timeline-item{

        width:100%;

        max-width:350px;

    }

    .timeline-circle{

        width:80px;

        height:80px;

    }

    .timeline-circle i{

        font-size:30px;

    }

    .timeline-item h3{

        font-size:20px;

    }

    .timeline-item p{

        font-size:15px;

    }

}


/* ==========================================================
   PLANS FAQ
========================================================== */

.plans-faq{

    padding:100px 0;

    background:#ffffff;

}

.plans-faq-wrapper{

    max-width:900px;

    margin:60px auto 0;

}

/* ==========================================================
   FAQ ITEM
========================================================== */

.plans-faq .faq-item{

    background:#fff;

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

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

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

    transition:var(--transition);

}

.plans-faq .faq-item:hover{

    border-color:var(--accent);

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

    transform:translateY(-3px);

}

/* ==========================================================
   QUESTION
========================================================== */

.plans-faq .faq-question{

    width:100%;

    border:none;

    background:#fff;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    text-align:left;

}

.plans-faq .faq-question span{

    font-size:18px;

    font-weight:600;

    color:var(--primary);

}

.plans-faq .faq-question i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(196,155,58,.12);

    color:var(--accent);

    transition:.35s;

    flex-shrink:0;

}

/* ==========================================================
   ANSWER
========================================================== */

.plans-faq .faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.plans-faq .faq-answer p{

    padding:0 30px 25px;

    margin:0;

}

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

.plans-faq .faq-item.active{

    border-color:var(--accent);

}

.plans-faq .faq-item.active .faq-question i{

    background:var(--accent);

    color:#fff;

    transform:rotate(45deg);

}

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

@media(max-width:768px){

    .plans-faq{

        padding:70px 0;

    }

    .plans-faq-wrapper{

        margin-top:40px;

    }

    .plans-faq .faq-question{

        padding:20px;

        gap:15px;

    }

    .plans-faq .faq-question span{

        font-size:16px;

    }

    .plans-faq .faq-question i{

        width:36px;

        height:36px;

        font-size:14px;

    }

    .plans-faq .faq-answer p{

        padding:0 20px 20px;

        font-size:15px;

    }

}


/* ==========================================================
   PLANS CTA
========================================================== */

.plans-cta{

    position:relative;

    padding:110px 0;

    background:linear-gradient(
        135deg,
        #0f0f0f 0%,
        #181818 100%
    );

    overflow:hidden;

}

.plans-cta::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(196,155,58,.08);

}

.plans-cta::after{

    content:"";

    position:absolute;

    bottom:-150px;

    left:-150px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(196,155,58,.05);

}

/* ==========================================================
   CONTENT
========================================================== */

.plans-cta-content{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.plans-cta-content small{

    display:inline-block;

    margin-bottom:20px;

    letter-spacing:3px;

    font-weight:700;

    text-transform:uppercase;

}

.plans-cta-content h2{

    color:#ffffff;

    margin-bottom:24px;

    font-size:52px;

    line-height:1.2;

}

.plans-cta-content p{

    max-width:760px;

    margin:0 auto 45px;

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

    font-size:18px;

    line-height:1.9;

}

/* ==========================================================
   FEATURES
========================================================== */

.plans-cta-features{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:45px;

}

.plans-cta-features span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 22px;

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

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

    border-radius:999px;

    color:#ffffff;

    font-size:15px;

    transition:.35s ease;

}

.plans-cta-features span:hover{

    transform:translateY(-4px);

    border-color:var(--accent);

    background:rgba(196,155,58,.12);

}

.plans-cta-features i{

    color:var(--accent);

    font-size:16px;

}

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

.plans-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.plans-cta-buttons .btn{

    min-width:220px;

}

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

.plans-cta .btn-outline{

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

    color:#ffffff;

}

.plans-cta .btn-outline:hover{

    background:#ffffff;

    color:#111111;

}

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

@media(max-width:992px){

    .plans-cta-content h2{

        font-size:42px;

    }

}

@media(max-width:768px){

    .plans-cta{

        padding:80px 0;

    }

    .plans-cta-content h2{

        font-size:34px;

    }

    .plans-cta-content p{

        font-size:16px;

        margin-bottom:35px;

    }

    .plans-cta-features{

        flex-direction:column;

        align-items:center;

    }

    .plans-cta-features span{

        width:100%;

        max-width:380px;

        justify-content:center;

    }

    .plans-cta-buttons{

        flex-direction:column;

        align-items:center;

    }

    .plans-cta-buttons .btn{

        width:100%;

        max-width:380px;

    }

}

@media(max-width:480px){

    .plans-cta-content h2{

        font-size:30px;

    }

}




/* ==========================================================
   TRUST & SECURITY
========================================================== */

.plans-trust{

    padding:100px 0;

    background:var(--surface);

}

.trust-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.trust-card{

    background:#fff;

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

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    transition:var(--transition);

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

    position:relative;

    overflow:hidden;

}

.trust-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--accent);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.trust-card:hover{

    transform:translateY(-10px);

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

    border-color:var(--accent);

}

.trust-card:hover::before{

    transform:scaleX(1);

}

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

.trust-card i{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(196,155,58,.12);

    color:var(--accent);

    font-size:34px;

    transition:var(--transition);

}

.trust-card:hover i{

    background:var(--accent);

    color:#fff;

    transform:rotate(8deg) scale(1.08);

}

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

.trust-card h3{

    margin-bottom:15px;

    font-size:24px;

    color:var(--primary);

}

.trust-card p{

    color:var(--text-secondary);

    line-height:1.8;

    font-size:15px;

}

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

@media(max-width:1100px){

    .trust-grid{

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

    }

}

@media(max-width:768px){

    .plans-trust{

        padding:70px 0;

    }

    .trust-grid{

        grid-template-columns:1fr;

        gap:25px;

        margin-top:40px;

    }

    .trust-card{

        padding:30px 25px;

    }

    .trust-card i{

        width:70px;

        height:70px;

        font-size:30px;

    }

    .trust-card h3{

        font-size:21px;

    }

}

@media(max-width:480px){

    .trust-card{

        padding:25px 20px;

    }

    .trust-card p{

        font-size:14px;

    }

}


/* ==========================================================
   INVESTMENT PHILOSOPHY
========================================================== */

.investment-philosophy{

    padding:100px 0;

    background:#ffffff;

}

.philosophy-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.philosophy-content small{

    display:inline-block;

    margin-bottom:18px;

    letter-spacing:2px;

    font-weight:700;

}

.philosophy-content h2{

    margin-bottom:25px;

}

.philosophy-content p{

    margin-bottom:35px;

    line-height:1.9;

}

.philosophy-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.philosophy-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

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

    border-radius:14px;

    transition:var(--transition);

    background:#fff;

}

.philosophy-item:hover{

    border-color:var(--accent);

    transform:translateX(8px);

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

}

.philosophy-item i{

    color:var(--accent);

    font-size:20px;

}

.philosophy-item span{

    font-weight:600;

    color:var(--primary);

}

.philosophy-image{

    position:relative;

}

.philosophy-image img{

    width:100%;

    border-radius:24px;

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

}

@media(max-width:992px){

    .philosophy-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .investment-philosophy{

        padding:70px 0;

    }

    .philosophy-wrapper{

        gap:40px;

    }

}


/* ==========================================================
   INVESTMENT PRINCIPLES
========================================================== */

.investment-principles{

    padding:100px 0;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fafafa 100%
    );

}

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

.principles-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.principle-card{

    position:relative;

    background:#ffffff;

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

    border-radius:22px;

    padding:40px 30px;

    overflow:hidden;

    transition:var(--transition);

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

}

.principle-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--accent);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.principle-card:hover{

    transform:translateY(-10px);

    border-color:var(--accent);

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

}

.principle-card:hover::before{

    transform:scaleX(1);

}

/* ==========================================================
   NUMBER
========================================================== */

.principle-number{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    background:rgba(196,155,58,.12);

    color:var(--accent);

    font-size:26px;

    font-weight:800;

    transition:var(--transition);

}

.principle-card:hover .principle-number{

    background:var(--accent);

    color:#ffffff;

    transform:rotate(10deg) scale(1.08);

}

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

.principle-card h3{

    margin-bottom:18px;

    font-size:24px;

    color:var(--primary);

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.principle-card p{

    color:var(--text-secondary);

    line-height:1.9;

    font-size:15px;

}

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

@media(max-width:1200px){

    .principles-grid{

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

    }

}

@media(max-width:768px){

    .investment-principles{

        padding:70px 0;

    }

    .principles-grid{

        grid-template-columns:1fr;

        gap:24px;

        margin-top:40px;

    }

    .principle-card{

        padding:30px 25px;

    }

    .principle-number{

        width:64px;

        height:64px;

        font-size:22px;

        margin-bottom:22px;

    }

    .principle-card h3{

        font-size:22px;

    }

}

@media(max-width:480px){

    .principle-card{

        padding:25px 20px;

    }

    .principle-card p{

        font-size:14px;

    }

}

/* ==========================================================
   INVESTMENT NOTICE
========================================================== */

.investment-notice{

    padding:100px 0;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8f8f8 100%
    );

}

/* ==========================================================
   NOTICE BOX
========================================================== */

.notice-box{

    display:grid;

    grid-template-columns:120px 1fr;

    gap:40px;

    align-items:flex-start;

    background:#ffffff;

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

    border-radius:24px;

    padding:50px;

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

    transition:var(--transition);

}

.notice-box:hover{

    transform:translateY(-6px);

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

    border-color:var(--accent);

}

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

.notice-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(196,155,58,.12);

    transition:var(--transition);

}

.notice-icon i{

    font-size:38px;

    color:var(--accent);

}

.notice-box:hover .notice-icon{

    background:var(--accent);

    transform:rotate(8deg) scale(1.08);

}

.notice-box:hover .notice-icon i{

    color:#ffffff;

}

/* ==========================================================
   CONTENT
========================================================== */

.notice-content small{

    display:inline-block;

    margin-bottom:15px;

    letter-spacing:2px;

    font-weight:700;

    text-transform:uppercase;

}

.notice-content h2{

    margin-bottom:20px;

    color:var(--primary);

}

.notice-content>p{

    margin-bottom:35px;

    line-height:1.9;

    color:var(--text-secondary);

}

/* ==========================================================
   POINTS
========================================================== */

.notice-points{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.notice-point{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 20px;

    background:var(--surface);

    border-radius:14px;

    border:1px solid transparent;

    transition:var(--transition);

}

.notice-point:hover{

    border-color:var(--accent);

    transform:translateX(8px);

}

.notice-point i{

    color:var(--accent);

    font-size:18px;

}

.notice-point span{

    color:var(--primary);

    font-weight:500;

}

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

@media(max-width:992px){

    .notice-box{

        grid-template-columns:1fr;

        text-align:center;

    }

    .notice-icon{

        margin:0 auto;

    }

    .notice-point{

        justify-content:center;

        text-align:left;

    }

}

@media(max-width:768px){

    .investment-notice{

        padding:70px 0;

    }

    .notice-box{

        padding:30px 25px;

        gap:30px;

    }

    .notice-content h2{

        font-size:32px;

    }

}

@media(max-width:480px){

    .notice-box{

        padding:25px 20px;

    }

    .notice-content h2{

        font-size:28px;

    }

    .notice-point{

        padding:15px;

        gap:12px;

    }

    .notice-point span{

        font-size:14px;

    }

}


/* Prevent iPhone Safari from zooming on form fields */
input,
textarea,
select,
button {
    font-size: 16px;
}