html {
    scroll-behavior: smooth;
}
main{
    margin-top:90px;
}
/*Main page start*/
.hero {
    background: #fff;
    padding: 60px 20px;
}

.hero-container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.hero-title h1 {
    font-size: 42px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 22px;
    margin: 20px 0;
    font-weight: 600;
}

.hero-description {
    max-width: 650px;
    margin: 0 auto 25px;
    color: #555;
}

.hero-button {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
}

.hero-button:hover {
    opacity: 0.9;
}

.accent {
    color: #ff7200;
}

.hero-media {
    margin-top: 40px;
}

.hero-video {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.hero-media.mobile {
    display: none;
}

.hero-media.mobile img {
    width: 100%;
    max-width: 350px;
    margin: 30px auto;
    display: block;
}

.hero-stats {
    display: flex;
    justify-content: space-between;
    max-width: 600px;
    margin: 40px auto 20px;
    gap: 50px;
}

.stat h2 {
    font-size: 32px;
}

.stat p {
    font-weight: 600;
}

.hero-regulated {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.stat{
    border-radius: 10px;
    min-width: 200px;
    padding: 20px;
    text-align: center;
    background-color: #f6f6f6;
}

.hero-regulated img {
    width: 28px;
}

/* MOBILE */

@media (max-width: 768px) {

    .hero-title h1 {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }

    .hero-media.desktop {
        display: none;
    }

    .hero-media.mobile {
        display: block;
    }

}
.info {
    padding: 80px 20px;
    background: #f1f2f3;
}

.info-container {
    max-width: 1200px;
    margin: auto;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.info-row.reverse {
    flex-direction: row-reverse;
}

.info-row.boxed {
    background: #fff;
    padding: 50px;
    border-radius: 10px;
}

.info-image img {
    max-width: 350px;
    width: 100%;
    display: block;
    margin: auto;
}

.info-content {
    flex: 1;
}

.info-content h2 {
    margin-bottom: 10px;
}

.align-right {
    text-align: right;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.info-item img {
    width: 18px;
}

.info-note {
    margin-top: 15px;
    font-weight: 500;
}

.info-link {
    display: inline-block;
    margin: 15px 0;
    color: #ff7200;
    text-decoration: none;
    font-weight: 600;
}

.button {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

/* LIST STYLE */

.commonList {
    list-style: none;
    padding-left: 35px;
    counter-reset: section;
}

.commonList li {
    position: relative;
    margin-bottom: 16px;
    line-height: 1.5;
}

.commonList li span {
    font-weight: 600;
}

.commonList li:before {
    align-items: center;
    background-color: rgba(229, 233, 237, .949);
    border-radius: 50%;
    color: #333;
    counter-increment: section;
    content: counter(section);
    display: flex;
    font-size: 13px;
    font-weight: 800;
    height: 24px;
    justify-content: center;
    left: -35px;
    position: absolute;
    top: 2px;
    width: 24px;
}

/* MOBILE */

@media (max-width: 900px) {

    .info-row {
        flex-direction: column;
        text-align: left;
        gap: 30px;
    }

    .info-row.reverse {
        flex-direction: column;
    }

    .align-right {
        text-align: left;
    }

}
.leaders{
    padding:80px 20px;
    background:#fff;
}

.leaders-container{
    max-width:1200px;
    margin:auto;
}

.leaders-header{
    margin-bottom:40px;
}

.leaders-header h2{
    margin-bottom:10px;
}

.leaders-row{
    display:flex;
    gap:40px;
    align-items:flex-start;
    margin-bottom:40px;
}

.leaders-row.reverse{
    flex-direction:row-reverse;
}

.leaders-info{
    flex:1;
}

.leaders-cards{
    /*flex:3;*/
    /*display:grid;*/
    /*grid-template-columns:repeat(3,1fr);*/
    /*gap:20px;*/
}

.leader-card{
    border:1px solid #eee;
    border-radius:10px;
    padding:20px;
    text-align:center;
    background:#fff;
}
.leader-card h4{
    font-size: 19px;
}

.leader-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.leader-avatar{
    width:70px;
    height:70px;
    border-radius:50%;
}

.leader-placeholder{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#eee;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}

.leader-risk{
    font-size:12px;
    padding:4px 8px;
    border-radius:4px;
    background:#eee;
}

.leader-stats{
    display:flex;
    justify-content:center;
    gap:10px;
    font-size:12px;
    margin:10px 0;
}

.leader-profit{
    color:#1bbf6b;
    font-weight:600;
    margin-bottom:10px;
}

.leader-chart{
    width:100%;
}

.leaders-divider{
    margin:60px 0;
    border:none;
    border-top:1px solid #eee;
}

/* MOBILE */

@media (max-width:900px){

    .leaders-row{
        flex-direction:column;
    }

    .leaders-row.reverse{
        flex-direction:column;
    }

    .leaders-cards{
        width: 100%;
    }

}

@media (max-width:600px){

    .leaders-cards{
        width: 100%;
    }

}


/* GRID */

.awards{
    padding:80px 20px;
    background:#fff;
    text-align:center;
}

.awards-container{
    max-width:1200px;
    margin:auto;
}

.awards-header{
    margin-bottom:40px;
}
.awards-header

.accent{
    color:#ff7200;
}

/* ROWS */

.awards-row{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

/* CARD */

.award-card{
    width:260px; /* фиксированный размер */
    height:260px; /* одинаковая высота */
    padding:25px 15px;
    border:1px solid #eee;
    border-radius:10px;
    background:#fff;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

/* BADGE */

.award-badge{
    position:relative;
    height:170px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-weight:700;
    font-size:14px;
    z-index:1;
}

.award-badge p{
    margin:2px 0;
}

.award-badge::before{
    content:"";
    position:absolute;
    inset:0;
    margin:auto;
    width:190px;
    height:170px;

    background:#e5e9ed;

    -webkit-mask-image:url(/wp-content/themes/theforest/img/awardLeaf.svg);
    mask-image:url(/wp-content/themes/theforest/img/awardLeaf.svg);

    -webkit-mask-position:center;
    mask-position:center;

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-size:cover;
    mask-size:cover;

    z-index:-1;
}

.award-card h6{
    font-size:15px;
    font-weight:600;
}

/* MOBILE */

@media (max-width:768px){
    .award-card{
        width:45%;
    }
}

@media (max-width:500px){
    .award-card{
        width:100%;
    }
}

.benefits{
    padding:80px 20px;
    background:#f1f2f3;;
    color:#fff;
}

.benefits-container{
    max-width:1200px;
    margin:auto;
}

/* TITLE */

.benefits-title{
    text-align:center;
    margin-bottom:50px;
}

.accent{
    color:#ff7200;
}

/* GRID */

.benefits{
    padding:80px 20px;
    background:#f1f2f3;
}

.benefits-container{
    max-width:1200px;
    margin:auto;
}

/* TITLE */

.benefits-title{
    text-align:center;
    margin-bottom:50px;
    color:black;
}

.accent{
    color:#ff7200;
}

/* GRID — строго 3 в ряд */

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* CARD */

.benefit-card{
    background:#fff;
    padding:30px 20px;
    border-radius:10px;
    border:1px solid #e5e5e5;
    transition:0.2s;
}

.benefit-card img{
    width:70px;
    margin-bottom:15px;
}

.benefit-card h4{
    margin-bottom:10px;
    font-weight:600;
    color: black;
}

.benefit-card p{
    font-size:14px;
    line-height:1.5;
    color:#555;
}

/* HOVER */

.benefit-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

/* RESPONSIVE */

@media (max-width:900px){
    .benefits-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:600px){
    .benefits-grid{
        grid-template-columns:1fr;
    }

    .benefits{
        padding:60px 15px;
    }
}

/*Main page end*/

/* Economic Calendar Section Styles */
.calendar-section {
    padding: 80px 20px;
    background: #fff;
}

.calendar-container {
    max-width: 1200px;
    margin: auto;
}

.calendar-header {
    text-align: center;
    margin-bottom: 40px;
}

.calendar-header h2 {
    font-size: 32px;
    margin-bottom: 10px;
    color: #333;
}

.calendar-subtitle {
    font-size: 16px;
    color: #666;
    font-weight: 500;
}

/* Widget Wrapper */
.calendar-widget-wrapper {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow: hidden;
}

.calendar-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.calendar-iframe-container.fixed-height {
    height: 667px;
    padding-bottom: 0;
}

.calendar-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Accent color */
.accent {
    color: #ff7200;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .calendar-section {
        padding: 60px 15px;
    }

    .calendar-header h2 {
        font-size: 24px;
    }

    .calendar-subtitle {
        font-size: 14px;
    }

    .calendar-widget-wrapper {
        padding: 10px;
    }

    .calendar-iframe-container {
        padding-bottom: 120%;
    }
}

@media (max-width: 500px) {
    .calendar-header h2 {
        font-size: 20px;
    }

    .calendar-widget-wrapper {
        padding: 5px;
        border-radius: 6px;
    }

    .calendar-iframe-container {
        padding-bottom: 140%;
    }
}
/* Economic Calendar Section Styles and */
/* FAQ Section Styles */
.faqs-section {
    padding: 80px 20px;
    background: #f1f2f3;
}

.faqs-container {
    max-width: 900px;
    margin: auto;
}

.faqs-header {
    text-align: center;
    margin-bottom: 50px;
}

.faqs-header h2 {
    font-size: 32px;
    color: #333;
    margin-bottom: 10px;
}

.accent {
    color: #ff7200;
}

/* Accordion */
.faqs-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.faq-item:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Question Button */
.faq-question {
    width: 100%;
    padding: 20px 25px;
    background: #fff;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.faq-question:hover {
    background: #fafafa;
}

.faq-question[aria-expanded="true"] {
    background: #fafafa;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

/* Icon */
.faq-icon {
    flex-shrink: 0;
    margin-left: 15px;
    transition: transform 0.3s;
    color: #ff7200;
}

/* Answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-answer.active {
    max-height: 1000px;
}

.faq-answer p,
.faq-answer ul {
    padding: 0 25px 20px;
    margin: 0;
    color: #555;
    line-height: 1.6;
    font-size: 14px;
}

/* List inside answer */
.faq-list {
    list-style: none;
    padding-left: 0;
}

.faq-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.faq-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: #ff7200;
    border-radius: 50%;
}

.faq-link {
    color: #ff7200;
    text-decoration: none;
    font-weight: 600;
}

.faq-link:hover {
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .faqs-section {
        padding: 60px 15px;
    }

    .faqs-header h2 {
        font-size: 24px;
    }

    .faq-question {
        padding: 15px 20px;
        font-size: 15px;
    }

    .faq-answer p,
    .faq-answer ul {
        padding: 0 20px 15px;
    }
}

@media (max-width: 500px) {
    .faqs-header h2 {
        font-size: 20px;
    }

    .faq-question {
        font-size: 14px;
    }
}
/* FAQ Section Styles end */

/* Guide Section Styles */
.guide-section {
    padding: 80px 20px;
    background: #f1f2f3;
}

.guide-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Sidebar */
.guide-sidebar {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
}

.guide-nav {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.guide-link {
    display: block;
    padding: 12px 15px;
    color: #555;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s;
}

.guide-link:hover {
    background: #f6f6f6;
    color: #333;
}

.guide-link.active {
    background: #ff7200;
    color: #fff;
}

/* Main Content */
.guide-content {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.guide-block {
    margin-bottom: 60px;
}

.guide-block:last-child {
    margin-bottom: 0;
}

.guide-title {
    font-size: 28px;
    color: #333;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #ff7200;
}

/* Subsections */
.guide-subsection {
    margin-bottom: 30px;
}

.guide-subsection h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.guide-subsection p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Nested Content */
.guide-nested {
    margin: 20px 0 20px 20px;
    padding-left: 20px;
    border-left: 3px solid #eee;
}

.guide-nested h4 {
    font-size: 17px;
    color: #444;
    margin: 25px 0 12px;
    font-weight: 600;
}

.guide-nested p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* Deep Nested */
.guide-deep-nested {
    margin: 15px 0 15px 15px;
    padding-left: 15px;
    border-left: 2px solid #f0f0f0;
}

.guide-deep-nested h5 {
    font-size: 15px;
    color: #555;
    margin: 20px 0 10px;
    font-weight: 600;
}

/* Lists */
.guide-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.guide-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    color: #555;
    line-height: 1.6;
}

.guide-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: #ff7200;
    border-radius: 50%;
}

.guide-steps {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    counter-reset: step;
}

.guide-steps > li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
    color: #555;
    line-height: 1.7;
}

.guide-steps > li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: #ff7200;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.guide-steps ul {
    margin-top: 15px;
}

/* Links */
.guide-link-text {
    color: #ff7200;
    text-decoration: none;
    font-weight: 600;
}

.guide-link-text:hover {
    text-decoration: underline;
}

/* Special Elements */
.guide-note {
    color: #ff7200;
    font-weight: 600;
    font-size: 16px;
    margin: 20px 0;
}

.guide-hint {
    background: #fff8f3;
    border-left: 4px solid #ff7200;
    padding: 15px 20px;
    margin: 25px 0;
    border-radius: 0 6px 6px 0;
}

.guide-hint em {
    color: #666;
    font-style: italic;
    line-height: 1.6;
}

.guide-highlight {
    color: #333;
    font-weight: 600;
    font-size: 16px;
    margin: 25px 0 10px;
}

/* Mobile Responsive */
@media (max-width: 968px) {
    .guide-container {
        flex-direction: column;
    }

    .guide-sidebar {
        width: 100%;
        position: static;
        order: -1;
    }

    .guide-nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 15px;
    }

    .guide-link {
        padding: 8px 12px;
        font-size: 14px;
    }

    .guide-content {
        padding: 25px;
    }

    .guide-title {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .guide-section {
        padding: 60px 15px;
    }

    .guide-content {
        padding: 20px;
    }

    .guide-title {
        font-size: 20px;
    }

    .guide-nested {
        margin-left: 10px;
        padding-left: 15px;
    }

    .guide-deep-nested {
        margin-left: 10px;
        padding-left: 10px;
    }

    .guide-steps > li {
        padding-left: 35px;
    }
}
/* Guide Section Styles end */
/* ========== Forex ========== */
.forex-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 90px;
}

.forex-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, rgba(255,114,0,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.forex-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.forex-hero-title {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.forex-hero-accent {
    color: #ff7200;
    display: block;
    font-size: 72px;
    font-weight: 900;
}

.forex-hero-subtitle {
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.forex-hero-cta {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 18px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255,114,0,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.forex-hero-cta:hover {
    background: #e66600;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255,114,0,0.5);
}

/* ========== MAIN LAYOUT ========== */
.forex-main {
    background: #f8f9fa;
    padding: 60px 20px;
}

.forex-container {
    max-width: 1400px;
    margin: 0 auto;
}

.forex-layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 40px;
    align-items: start;
}

/* ========== CONTENT CARD ========== */
.forex-content-card {
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.forex-heading-primary {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 24px;
    line-height: 1.2;
}

.forex-heading-secondary {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #ff7200;
    display: inline-block;
}

.forex-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}

/* ========== FEATURE LIST ========== */
.forex-feature-list {
    list-style: none;
    margin: 30px 0;
    padding: 0;
}

.forex-feature-item {
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 1.7;
    color: #4a5568;
}

.forex-feature-item::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    width: 28px;
    height: 28px;
    background: #ff7200;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

/* ========== CURRENCY LIST ========== */
.forex-currency-list {
    list-style: none;
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.forex-currency-item {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a2e;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-radius: 10px;
    border-left: 4px solid #ff7200;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.forex-currency-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.forex-currency-item strong {
    color: #ff7200;
    font-weight: 700;
}

/* ========== CTA BUTTON ========== */
.forex-btn-primary {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(255,114,0,0.3);
}

.forex-btn-primary:hover {
    background: #e66600;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,114,0,0.4);
}

/* ========== SIDEBAR ========== */
.forex-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.forex-sidebar-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
}

.forex-sidebar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.forex-sidebar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.forex-sidebar-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.forex-sidebar-card:hover .forex-sidebar-image {
    transform: scale(1.05);
}

.forex-sidebar-content {
    padding: 24px;
}

.forex-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.forex-sidebar-link {
    color: #ff7200;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.forex-sidebar-link::after {
    content: '→';
    transition: transform 0.2s;
}

.forex-sidebar-card:hover .forex-sidebar-link::after {
    transform: translateX(4px);
}

/* ========== STEPS SECTION ========== */
.forex-steps-section {
    background: #1a1a2e;
    padding: 80px 20px;
    color: #fff;
}

.forex-steps-container {
    max-width: 1200px;
    margin: 0 auto;
}

.forex-steps-header {
    text-align: center;
    margin-bottom: 60px;
}

.forex-steps-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.forex-steps-subtitle {
    font-size: 20px;
    color: rgba(255,255,255,0.7);
}

.forex-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

.forex-steps-grid::before {
    content: '';
    position: absolute;
    top: 66px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, #ff7200 0%, transparent 100%);
    z-index: 0;
}

.forex-step-card {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 30px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.forex-step-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-5px);
}

.forex-step-number {
    width: 70px;
    height: 70px;
    background: #ff7200;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    margin: 0 auto 24px;
    box-shadow: 0 8px 25px rgba(255,114,0,0.3);
}

.forex-step-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.forex-step-text {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
}

/* ========== BENEFITS SECTION ========== */
.forex-benefits-section {
    background: #0f1419;
    padding: 80px 20px;
    color: #fff;
}

.forex-benefits-container {
    max-width: 1200px;
    margin: 0 auto;
}

.forex-benefits-header {
    text-align: center;
    margin-bottom: 60px;
}

.forex-benefits-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.forex-benefits-accent {
    color: #ff7200;
}

.forex-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.forex-benefit-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.3s ease;
}

.forex-benefit-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.forex-benefit-icon {
    width: 60px;
    height: 60px;
    background: #ff7200;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 28px;
}

.forex-benefit-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
}

.forex-benefit-text {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
    .forex-layout {
        grid-template-columns: 1fr;
    }

    .forex-sidebar {
        order: -1;
    }

    .forex-sidebar-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .forex-sidebar-image {
        height: 150px;
    }
}

@media (max-width: 992px) {
    .forex-hero-title {
        font-size: 42px;
    }

    .forex-hero-accent {
        font-size: 56px;
    }

    .forex-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .forex-steps-grid::before {
        display: none;
    }

    .forex-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .forex-currency-list {
        grid-template-columns: 1fr;
    }

    .forex-sidebar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .forex-hero {
        padding: 60px 20px;
    }

    .forex-hero-title {
        font-size: 32px;
    }

    .forex-hero-accent {
        font-size: 40px;
    }

    .forex-hero-subtitle {
        font-size: 18px;
    }

    .forex-content-card {
        padding: 30px 20px;
    }

    .forex-heading-primary {
        font-size: 28px;
    }

    .forex-heading-secondary {
        font-size: 22px;
    }

    .forex-steps-grid {
        grid-template-columns: 1fr;
    }

    .forex-benefits-grid {
        grid-template-columns: 1fr;
    }

    .forex-sidebar-grid {
        grid-template-columns: 1fr;
    }

    .forex-sidebar-image {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .forex-currency-list {
        grid-template-columns: 1fr;
    }

    .forex-currency-item {
        font-size: 16px;
    }
}
/* ========== Forex end ========== */
/* ========== Stocks ========== */
.stocks-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 90px;
}

.stocks-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, rgba(255,114,0,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.stocks-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.stocks-hero-title {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.stocks-hero-accent {
    color: #ff7200;
    display: block;
    font-size: 72px;
    font-weight: 900;
}

.stocks-hero-subtitle {
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.stocks-hero-cta {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 18px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255,114,0,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stocks-hero-cta:hover {
    background: #e66600;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255,114,0,0.5);
}

/* ========== MAIN LAYOUT ========== */
.stocks-main {
    background: #f8f9fa;
    padding: 60px 20px;
}

.stocks-container {
    max-width: 1400px;
    margin: 0 auto;
}

.stocks-layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 40px;
    align-items: start;
}

/* ========== CONTENT CARD ========== */
.stocks-content-card {
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.stocks-heading-primary {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 24px;
    line-height: 1.2;
}

.stocks-heading-secondary {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #ff7200;
    display: inline-block;
}

.stocks-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}

/* ========== MARKETS LIST ========== */
.stocks-markets-list {
    list-style: none;
    margin: 30px 0;
    padding: 0;
}

.stocks-market-item {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
    padding: 18px 24px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-radius: 12px;
    border-left: 5px solid #ff7200;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.stocks-market-item:hover {
    transform: translateX(8px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #fff5eb 0%, #fff 100%);
}

.stocks-market-item::before {
    content: '🌍';
    font-size: 24px;
}

/* ========== CTA BUTTON ========== */
.stocks-btn-primary {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(255,114,0,0.3);
}

.stocks-btn-primary:hover {
    background: #e66600;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,114,0,0.4);
}

/* ========== SIDEBAR ========== */
.stocks-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stocks-sidebar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.stocks-sidebar-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
}

.stocks-sidebar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.stocks-sidebar-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.stocks-sidebar-card:hover .stocks-sidebar-image {
    transform: scale(1.05);
}

.stocks-sidebar-content {
    padding: 24px;
}

.stocks-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.stocks-sidebar-link {
    color: #ff7200;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stocks-sidebar-link::after {
    content: '→';
    transition: transform 0.2s;
}

.stocks-sidebar-card:hover .stocks-sidebar-link::after {
    transform: translateX(4px);
}

/* ========== STEPS SECTION ========== */
.stocks-steps-section {
    background: #1a1a2e;
    padding: 80px 20px;
    color: #fff;
}

.stocks-steps-container {
    max-width: 1200px;
    margin: 0 auto;
}

.stocks-steps-header {
    text-align: center;
    margin-bottom: 60px;
}

.stocks-steps-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.stocks-steps-subtitle {
    font-size: 20px;
    color: rgba(255,255,255,0.7);
}

.stocks-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

.stocks-steps-grid::before {
    content: '';
    position: absolute;
    top: 66px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, #ff7200 0%, transparent 100%);
    z-index: 0;
}

.stocks-step-card {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 30px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.stocks-step-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-5px);
}

.stocks-step-number {
    width: 70px;
    height: 70px;
    background: #ff7200;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    margin: 0 auto 24px;
    box-shadow: 0 8px 25px rgba(255,114,0,0.3);
}

.stocks-step-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.stocks-step-text {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
}

/* ========== BENEFITS SECTION ========== */
.stocks-benefits-section {
    background: #0f1419;
    padding: 80px 20px;
    color: #fff;
}

.stocks-benefits-container {
    max-width: 1200px;
    margin: 0 auto;
}

.stocks-benefits-header {
    text-align: center;
    margin-bottom: 60px;
}

.stocks-benefits-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.stocks-benefits-accent {
    color: #ff7200;
}

.stocks-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.stocks-benefit-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.3s ease;
}

.stocks-benefit-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.stocks-benefit-icon {
    width: 60px;
    height: 60px;
    background: #ff7200;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 28px;
}

.stocks-benefit-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
}

.stocks-benefit-text {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
    .stocks-layout {
        grid-template-columns: 1fr;
    }

    .stocks-sidebar {
        order: -1;
    }

    .stocks-sidebar-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .stocks-sidebar-image {
        height: 150px;
    }
}

@media (max-width: 992px) {
    .stocks-hero-title {
        font-size: 42px;
    }

    .stocks-hero-accent {
        font-size: 56px;
    }

    .stocks-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stocks-steps-grid::before {
        display: none;
    }

    .stocks-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stocks-sidebar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stocks-hero {
        padding: 60px 20px;
    }

    .stocks-hero-title {
        font-size: 32px;
    }

    .stocks-hero-accent {
        font-size: 40px;
    }

    .stocks-hero-subtitle {
        font-size: 18px;
    }

    .stocks-content-card {
        padding: 30px 20px;
    }

    .stocks-heading-primary {
        font-size: 28px;
    }

    .stocks-heading-secondary {
        font-size: 22px;
    }

    .stocks-steps-grid {
        grid-template-columns: 1fr;
    }

    .stocks-benefits-grid {
        grid-template-columns: 1fr;
    }

    .stocks-sidebar-grid {
        grid-template-columns: 1fr;
    }

    .stocks-sidebar-image {
        height: 220px;
    }

    .stocks-market-item {
        font-size: 18px;
        padding: 16px 20px;
    }
}

@media (max-width: 480px) {
    .stocks-market-item {
        font-size: 16px;
    }
}
/* ========== Stocks ========== */

/* ========== Indices ========== */
.indices-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 90px;
}

.indices-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, rgba(255,114,0,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.indices-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.indices-hero-title {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.indices-hero-accent {
    color: #ff7200;
    display: block;
    font-size: 72px;
    font-weight: 900;
}

.indices-hero-subtitle {
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.indices-hero-cta {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 18px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255,114,0,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.indices-hero-cta:hover {
    background: #e66600;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255,114,0,0.5);
}

/* ========== MAIN LAYOUT ========== */
.indices-main {
    background: #f8f9fa;
    padding: 60px 20px;
}

.indices-container {
    max-width: 1400px;
    margin: 0 auto;
}

.indices-layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 40px;
    align-items: start;
}

/* ========== CONTENT CARD ========== */
.indices-content-card {
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.indices-heading-primary {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 24px;
    line-height: 1.2;
}

.indices-heading-secondary {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #ff7200;
    display: inline-block;
}

.indices-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}

/* ========== INDICES LIST ========== */
.indices-list {
    list-style: none;
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.indices-item {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-radius: 10px;
    border-left: 4px solid #ff7200;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    line-height: 1.5;
}

.indices-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #fff5eb 0%, #fff 100%);
}

.indices-item strong {
    color: #ff7200;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.indices-disclaimer {
    font-size: 14px;
    color: #718096;
    font-style: italic;
    margin-top: 20px;
    padding: 16px;
    background: #f7fafc;
    border-radius: 8px;
    border-left: 3px solid #a0aec0;
}

/* ========== CTA BUTTON ========== */
.indices-btn-primary {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(255,114,0,0.3);
}

.indices-btn-primary:hover {
    background: #e66600;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,114,0,0.4);
}

/* ========== SIDEBAR ========== */
.indices-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.indices-sidebar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.indices-sidebar-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
}

.indices-sidebar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.indices-sidebar-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.indices-sidebar-card:hover .indices-sidebar-image {
    transform: scale(1.05);
}

.indices-sidebar-content {
    padding: 24px;
}

.indices-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.indices-sidebar-link {
    color: #ff7200;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.indices-sidebar-link::after {
    content: '→';
    transition: transform 0.2s;
}

.indices-sidebar-card:hover .indices-sidebar-link::after {
    transform: translateX(4px);
}

/* ========== STEPS SECTION ========== */
.indices-steps-section {
    background: #1a1a2e;
    padding: 80px 20px;
    color: #fff;
}

.indices-steps-container {
    max-width: 1200px;
    margin: 0 auto;
}

.indices-steps-header {
    text-align: center;
    margin-bottom: 60px;
}

.indices-steps-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.indices-steps-subtitle {
    font-size: 20px;
    color: rgba(255,255,255,0.7);
}

.indices-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

.indices-steps-grid::before {
    content: '';
    position: absolute;
    top: 66px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, #ff7200 0%, transparent 100%);
    z-index: 0;
}

.indices-step-card {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 30px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.indices-step-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-5px);
}

.indices-step-number {
    width: 70px;
    height: 70px;
    background: #ff7200;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    margin: 0 auto 24px;
    box-shadow: 0 8px 25px rgba(255,114,0,0.3);
}

.indices-step-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.indices-step-text {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
}

/* ========== BENEFITS SECTION ========== */
.indices-benefits-section {
    background: #0f1419;
    padding: 80px 20px;
    color: #fff;
}

.indices-benefits-container {
    max-width: 1200px;
    margin: 0 auto;
}

.indices-benefits-header {
    text-align: center;
    margin-bottom: 60px;
}

.indices-benefits-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.indices-benefits-accent {
    color: #ff7200;
}

.indices-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.indices-benefit-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.3s ease;
}

.indices-benefit-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.indices-benefit-icon {
    width: 60px;
    height: 60px;
    background: #ff7200;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 28px;
}

.indices-benefit-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
}

.indices-benefit-text {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
    .indices-layout {
        grid-template-columns: 1fr;
    }

    .indices-sidebar {
        order: -1;
    }

    .indices-sidebar-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .indices-sidebar-image {
        height: 150px;
    }
}

@media (max-width: 992px) {
    .indices-hero-title {
        font-size: 42px;
    }

    .indices-hero-accent {
        font-size: 56px;
    }

    .indices-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .indices-steps-grid::before {
        display: none;
    }

    .indices-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .indices-sidebar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .indices-hero {
        padding: 60px 20px;
    }

    .indices-hero-title {
        font-size: 32px;
    }

    .indices-hero-accent {
        font-size: 40px;
    }

    .indices-hero-subtitle {
        font-size: 18px;
    }

    .indices-content-card {
        padding: 30px 20px;
    }

    .indices-heading-primary {
        font-size: 28px;
    }

    .indices-heading-secondary {
        font-size: 22px;
    }

    .indices-steps-grid {
        grid-template-columns: 1fr;
    }

    .indices-benefits-grid {
        grid-template-columns: 1fr;
    }

    .indices-sidebar-grid {
        grid-template-columns: 1fr;
    }

    .indices-sidebar-image {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .indices-item {
        font-size: 14px;
        padding: 14px 16px;
    }
}
/* ========== Indices ========== */
/* ========== Commodities ========== */
.commodities-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 90px;
}

.commodities-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, rgba(255,114,0,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.commodities-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.commodities-hero-title {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.commodities-hero-accent {
    color: #ff7200;
    display: block;
    font-size: 72px;
    font-weight: 900;
}

.commodities-hero-subtitle {
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.commodities-hero-cta {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 18px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255,114,0,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.commodities-hero-cta:hover {
    background: #e66600;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255,114,0,0.5);
}

/* ========== MAIN LAYOUT ========== */
.commodities-main {
    background: #f8f9fa;
    padding: 60px 20px;
}

.commodities-container {
    max-width: 1400px;
    margin: 0 auto;
}

.commodities-layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 40px;
    align-items: start;
}

/* ========== CONTENT CARD ========== */
.commodities-content-card {
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.commodities-heading-primary {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 24px;
    line-height: 1.2;
}

.commodities-heading-secondary {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #ff7200;
    display: inline-block;
}

.commodities-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}

/* ========== COMMODITIES GRID ========== */
.commodities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 30px 0;
}

.commodities-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 2px solid transparent;
    border-bottom: 4px solid #ff7200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.commodities-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-color: rgba(255,114,0,0.3);
}

.commodities-item-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.commodities-item-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.commodities-disclaimer {
    font-size: 14px;
    color: #718096;
    font-style: italic;
    margin-top: 30px;
    padding: 20px;
    background: #f7fafc;
    border-radius: 12px;
    border-left: 4px solid #ff7200;
    line-height: 1.7;
}

/* ========== CTA BUTTON ========== */
.commodities-btn-primary {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(255,114,0,0.3);
}

.commodities-btn-primary:hover {
    background: #e66600;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,114,0,0.4);
}

/* ========== SIDEBAR ========== */
.commodities-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.commodities-sidebar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.commodities-sidebar-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
}

.commodities-sidebar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.commodities-sidebar-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.commodities-sidebar-card:hover .commodities-sidebar-image {
    transform: scale(1.05);
}

.commodities-sidebar-content {
    padding: 24px;
}

.commodities-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.commodities-sidebar-link {
    color: #ff7200;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.commodities-sidebar-link::after {
    content: '→';
    transition: transform 0.2s;
}

.commodities-sidebar-card:hover .commodities-sidebar-link::after {
    transform: translateX(4px);
}

/* ========== STEPS SECTION ========== */
.commodities-steps-section {
    background: #1a1a2e;
    padding: 80px 20px;
    color: #fff;
}

.commodities-steps-container {
    max-width: 1200px;
    margin: 0 auto;
}

.commodities-steps-header {
    text-align: center;
    margin-bottom: 60px;
}

.commodities-steps-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.commodities-steps-subtitle {
    font-size: 20px;
    color: rgba(255,255,255,0.7);
}

.commodities-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

.commodities-steps-grid::before {
    content: '';
    position: absolute;
    top: 66px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, #ff7200 0%, transparent 100%);
    z-index: 0;
}

.commodities-step-card {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 30px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.commodities-step-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-5px);
}

.commodities-step-number {
    width: 70px;
    height: 70px;
    background: #ff7200;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    margin: 0 auto 24px;
    box-shadow: 0 8px 25px rgba(255,114,0,0.3);
}

.commodities-step-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.commodities-step-text {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
}

/* ========== BENEFITS SECTION ========== */
.commodities-benefits-section {
    background: #0f1419;
    padding: 80px 20px;
    color: #fff;
}

.commodities-benefits-container {
    max-width: 1200px;
    margin: 0 auto;
}

.commodities-benefits-header {
    text-align: center;
    margin-bottom: 60px;
}

.commodities-benefits-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.commodities-benefits-accent {
    color: #ff7200;
}

.commodities-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.commodities-benefit-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.3s ease;
}

.commodities-benefit-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.commodities-benefit-icon {
    width: 60px;
    height: 60px;
    background: #ff7200;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 28px;
}

.commodities-benefit-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
}

.commodities-benefit-text {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
    .commodities-layout {
        grid-template-columns: 1fr;
    }

    .commodities-sidebar {
        order: -1;
    }

    .commodities-sidebar-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .commodities-sidebar-image {
        height: 150px;
    }
}

@media (max-width: 992px) {
    .commodities-hero-title {
        font-size: 42px;
    }

    .commodities-hero-accent {
        font-size: 56px;
    }

    .commodities-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .commodities-steps-grid::before {
        display: none;
    }

    .commodities-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .commodities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .commodities-sidebar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .commodities-hero {
        padding: 60px 20px;
    }

    .commodities-hero-title {
        font-size: 32px;
    }

    .commodities-hero-accent {
        font-size: 40px;
    }

    .commodities-hero-subtitle {
        font-size: 18px;
    }

    .commodities-content-card {
        padding: 30px 20px;
    }

    .commodities-heading-primary {
        font-size: 28px;
    }

    .commodities-heading-secondary {
        font-size: 22px;
    }

    .commodities-steps-grid {
        grid-template-columns: 1fr;
    }

    .commodities-benefits-grid {
        grid-template-columns: 1fr;
    }

    .commodities-sidebar-grid {
        grid-template-columns: 1fr;
    }

    .commodities-sidebar-image {
        height: 220px;
    }

    .commodities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .commodities-grid {
        grid-template-columns: 1fr;
    }

    .commodities-item {
        padding: 16px;
    }
}
/* ========== Commodities end ========== */
/* ========== Crypto ========== */
.crypto-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 90px;
}

.crypto-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, rgba(255,114,0,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.crypto-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.crypto-hero-title {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.crypto-hero-accent {
    color: #ff7200;
    display: block;
    font-size: 72px;
    font-weight: 900;
}

.crypto-hero-subtitle {
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.crypto-hero-cta {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 18px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255,114,0,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.crypto-hero-cta:hover {
    background: #e66600;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255,114,0,0.5);
}

/* ========== MAIN LAYOUT ========== */
.crypto-main {
    background: #f8f9fa;
    padding: 60px 20px;
}

.crypto-container {
    max-width: 1400px;
    margin: 0 auto;
}

.crypto-layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 40px;
    align-items: start;
}

/* ========== CONTENT CARD ========== */
.crypto-content-card {
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.crypto-heading-primary {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 24px;
    line-height: 1.2;
}

.crypto-heading-secondary {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #ff7200;
    display: inline-block;
}

.crypto-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}

/* ========== ADVANTAGES LIST ========== */
.crypto-advantages {
    margin: 30px 0;
    padding: 30px;
    background: linear-gradient(135deg, #fff9f5 0%, #fff 100%);
    border-radius: 16px;
    border-left: 5px solid #ff7200;
}

.crypto-advantages-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 20px;
}

.crypto-advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: #4a5568;
}

.crypto-advantage-item:last-child {
    margin-bottom: 0;
}

.crypto-advantage-icon {
    width: 40px;
    height: 40px;
    background: #ff7200;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

/* ========== CRYPTO LIST ========== */
.crypto-list {
    list-style: none;
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.crypto-item {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d3748 100%);
    border-radius: 12px;
    padding: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.crypto-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-color: #ff7200;
}

.crypto-item-icon {
    width: 50px;
    height: 50px;
    background: #ff7200;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.crypto-item-info {
    flex: 1;
}

.crypto-item-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
}

.crypto-item-symbol {
    font-size: 14px;
    color: #ff7200;
    font-weight: 600;
}

/* ========== CTA BUTTON ========== */
.crypto-btn-primary {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(255,114,0,0.3);
}

.crypto-btn-primary:hover {
    background: #e66600;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,114,0,0.4);
}

/* ========== SIDEBAR ========== */
.crypto-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.crypto-sidebar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.crypto-sidebar-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
}

.crypto-sidebar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.crypto-sidebar-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.crypto-sidebar-card:hover .crypto-sidebar-image {
    transform: scale(1.05);
}

.crypto-sidebar-content {
    padding: 24px;
}

.crypto-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.crypto-sidebar-link {
    color: #ff7200;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crypto-sidebar-link::after {
    content: '→';
    transition: transform 0.2s;
}

.crypto-sidebar-card:hover .crypto-sidebar-link::after {
    transform: translateX(4px);
}

/* ========== STEPS SECTION ========== */
.crypto-steps-section {
    background: #1a1a2e;
    padding: 80px 20px;
    color: #fff;
}

.crypto-steps-container {
    max-width: 1200px;
    margin: 0 auto;
}

.crypto-steps-header {
    text-align: center;
    margin-bottom: 60px;
}

.crypto-steps-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.crypto-steps-subtitle {
    font-size: 20px;
    color: rgba(255,255,255,0.7);
}

.crypto-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

.crypto-steps-grid::before {
    content: '';
    position: absolute;
    top: 66px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, #ff7200 0%, transparent 100%);
    z-index: 0;
}

.crypto-step-card {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 30px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.crypto-step-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-5px);
}

.crypto-step-number {
    width: 70px;
    height: 70px;
    background: #ff7200;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    margin: 0 auto 24px;
    box-shadow: 0 8px 25px rgba(255,114,0,0.3);
}

.crypto-step-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.crypto-step-text {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
}

/* ========== BENEFITS SECTION ========== */
.crypto-benefits-section {
    background: #0f1419;
    padding: 80px 20px;
    color: #fff;
}

.crypto-benefits-container {
    max-width: 1200px;
    margin: 0 auto;
}

.crypto-benefits-header {
    text-align: center;
    margin-bottom: 60px;
}

.crypto-benefits-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.crypto-benefits-accent {
    color: #ff7200;
}

.crypto-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.crypto-benefit-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.3s ease;
}

.crypto-benefit-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.crypto-benefit-icon {
    width: 60px;
    height: 60px;
    background: #ff7200;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 28px;
}

.crypto-benefit-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
}

.crypto-benefit-text {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
    .crypto-layout {
        grid-template-columns: 1fr;
    }

    .crypto-sidebar {
        order: -1;
    }

    .crypto-sidebar-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .crypto-sidebar-image {
        height: 150px;
    }
}

@media (max-width: 992px) {
    .crypto-hero-title {
        font-size: 42px;
    }

    .crypto-hero-accent {
        font-size: 56px;
    }

    .crypto-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .crypto-steps-grid::before {
        display: none;
    }

    .crypto-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .crypto-sidebar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .crypto-hero {
        padding: 60px 20px;
    }

    .crypto-hero-title {
        font-size: 32px;
    }

    .crypto-hero-accent {
        font-size: 40px;
    }

    .crypto-hero-subtitle {
        font-size: 18px;
    }

    .crypto-content-card {
        padding: 30px 20px;
    }

    .crypto-heading-primary {
        font-size: 28px;
    }

    .crypto-heading-secondary {
        font-size: 22px;
    }

    .crypto-advantages {
        padding: 20px;
    }

    .crypto-steps-grid {
        grid-template-columns: 1fr;
    }

    .crypto-benefits-grid {
        grid-template-columns: 1fr;
    }

    .crypto-sidebar-grid {
        grid-template-columns: 1fr;
    }

    .crypto-sidebar-image {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .crypto-item {
        padding: 16px;
    }

    .crypto-item-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* ========== HERO SECTION ========== */
.services-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 90px;
}

.services-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, rgba(255,114,0,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.services-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.services-hero-title {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.services-hero-accent {
    color: #ff7200;
    display: block;
    font-size: 72px;
    font-weight: 900;
}

.services-hero-subtitle {
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ========== SERVICES SECTION ========== */
.services-section {
    background: #f8f9fa;
    padding: 80px 20px;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
}

.services-intro-card {
    background: #fff;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    margin-bottom: 60px;
}

.services-intro-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 24px;
    line-height: 1.2;
}

.services-intro-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}

.services-intro-list {
    list-style: none;
    margin: 20px 0;
    padding-left: 0;
}

.services-intro-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #4a5568;
}

.services-intro-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ff7200;
    font-weight: bold;
    font-size: 18px;
}

.services-intro-logo {
    max-width: 170px;
    margin-top: 30px;
}

/* ========== FEATURE CARDS ========== */
.services-feature-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    margin-bottom: 60px;
}

.services-feature-card.reverse {
    direction: rtl;
}

.services-feature-card.reverse > * {
    direction: ltr;
}

.services-feature-content {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services-feature-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 20px;
}

.services-feature-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}

.services-feature-list {
    list-style: none;
    margin: 20px 0;
    padding-left: 0;
}

.services-feature-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 16px;
    font-size: 16px;
    color: #4a5568;
}

.services-feature-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #ff7200;
    font-weight: bold;
    font-size: 18px;
}

.services-feature-logo {
    max-width: 170px;
    margin-top: 30px;
}

.services-feature-image {
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

/* ========== BENEFITS SECTION ========== */
.services-benefits-section {
    background: #1a1a2e;
    padding: 80px 20px;
    color: #fff;
}

.services-benefits-container {
    max-width: 1200px;
    margin: 0 auto;
}

.services-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.services-benefits-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services-benefits-intro h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.services-benefits-intro span {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    margin-bottom: 30px;
    display: block;
}

.services-benefits-btn {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255,114,0,0.3);
    text-align: center;
    max-width: 200px;
}

.services-benefits-btn:hover {
    background: #e66600;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,114,0,0.4);
}

.services-benefits-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.services-benefits-card:hover {
    transform: translateY(-8px);
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.services-benefits-card-inner {
    padding: 30px;
}

.services-benefits-badge {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.services-benefits-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.services-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.services-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}

.services-benefits-list li::before {
    content: '✓';
    color: #4FBC9C;
    font-weight: bold;
    flex-shrink: 0;
}

.services-benefits-card-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.services-benefits-card:hover .services-benefits-card-image {
    transform: scale(1.05);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
    .services-feature-card {
        grid-template-columns: 1fr;
    }

    .services-feature-image {
        min-height: 300px;
        order: -1;
    }

    .services-benefits-grid {
        grid-template-columns: 1fr;
    }

    .services-benefits-card {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .services-hero {
        padding: 60px 20px;
    }

    .services-hero-title {
        font-size: 36px;
    }

    .services-hero-accent {
        font-size: 48px;
    }

    .services-intro-card,
    .services-feature-content {
        padding: 30px;
    }

    .services-intro-title,
    .services-feature-title {
        font-size: 24px;
    }

    .services-intro-logo {
        float: none;
        margin: 20px auto 0;
    }
}

/* ========== HERO SECTION ========== */
.support-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 90px;
}

.support-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, rgba(255,114,0,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.support-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.support-hero-title {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.support-hero-accent {
    color: #ff7200;
    display: block;
    font-size: 72px;
    font-weight: 900;
}

.support-hero-subtitle {
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ========== INFO SECTION ========== */
.support-info-section {
    background: #f8f9fa;
    padding: 80px 20px;
}

.support-info-container {
    max-width: 1200px;
    margin: 0 auto;
}

.support-info-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.support-info-content {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.support-info-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 24px;
}

.support-info-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}

.support-info-logo {
    max-width: 170px;
    margin-top: 30px;
}

.support-info-image {
    background-size: cover;
    background-position: center;
    min-height: 500px;
}

/* ========== CONTACT SECTION ========== */
.support-contact-section {
    background: #fff;
    padding: 80px 20px;
}

.support-contact-container {
    max-width: 1200px;
    margin: 0 auto;
}

.support-contact-wrapper {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 476px 1fr;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f1;
}

.support-contact-sidebar {
    background-image: url(/wp-content/themes/theforest/images/c1.jpg);
    background-size: cover;
    background-position: center;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.support-contact-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 46, 0.7);
    border-radius: 24px 0 0 24px;
}

.support-contact-sidebar-content {
    position: relative;
    z-index: 1;
}

.support-contact-sidebar-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.support-contact-sidebar-text {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    margin-bottom: 20px;
}

.support-contact-sidebar-email {
    color: #ff7200;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.support-contact-sidebar-email:hover {
    color: #e66600;
}

.support-contact-sidebar-logo {
    max-width: 200px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.support-contact-form-section {
    padding: 48px;
}

.support-contact-form-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 32px;
    text-align: center;
}

/* ========== FORM STYLES ========== */
.support-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.support-form .form-group {
    margin-bottom: 24px;
}

.support-form label {
    display: block;
    font-weight: 400;
    color: #B0BCCF;
    margin-bottom: 8px;
    font-size: 14px;
}

.support-form input[type="text"],
.support-form input[type="email"],
.support-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e2e8f1;
    border-radius: 8px;
    font-size: 16px;
    color: #1a1a2e;
    background: #fff;
    transition: all 0.3s ease;
    font-family: inherit;
}

.support-form input[type="text"]:focus,
.support-form input[type="email"]:focus,
.support-form textarea:focus {
    outline: none;
    border-color: #ff7200;
    box-shadow: 0 0 0 3px rgba(255,114,0,0.1);
}

.support-form textarea {
    resize: vertical;
    min-height: 120px;
}

.support-form input[type="submit"] {
    background: #ff7200;
    color: #fff;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255,114,0,0.3);
    width: 100%;
}

.support-form input[type="submit"]:hover {
    background: #e66600;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,114,0,0.4);
}

/* CF7 specific overrides */
.wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-spinner {
    display: none;
}

.wpcf7-response-output {
    margin-top: 20px;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
}

.wpcf7-form.sent .wpcf7-response-output {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
    .support-info-card {
        grid-template-columns: 1fr;
    }

    .support-info-image {
        min-height: 300px;
        order: -1;
    }

    .support-contact-wrapper {
        grid-template-columns: 1fr;
    }

    .support-contact-sidebar {
        min-height: 300px;
    }

    .support-contact-sidebar::before {
        border-radius: 24px 24px 0 0;
    }
}

@media (max-width: 768px) {
    .support-hero {
        padding: 60px 20px;
    }

    .support-hero-title {
        font-size: 36px;
    }

    .support-hero-accent {
        font-size: 48px;
    }

    .support-info-content {
        padding: 30px;
    }

    .support-info-title {
        font-size: 28px;
    }

    .support-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .support-contact-form-section {
        padding: 30px;
    }

    .support-contact-sidebar {
        padding: 30px;
    }
}

/* ========== HERO SECTION ========== */
.services-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 100px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 91px;
}

.services-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, rgba(255,114,0,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.services-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.services-hero-title {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.services-hero-accent {
    color: #ff7200;
    display: block;
    font-size: 72px;
    font-weight: 900;
}

.services-hero-subtitle {
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


.markets-section {
    padding: 60px 20px 80px;
    background: var(--light-bg);
}

.markets-container {
    max-width: 1600px;
    margin: 0 auto;
}


.markets-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    align-items: start;
}


.widget-wrapper {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 114, 0, 0.1);
    height: 600px;
}

.widget-wrapper h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    padding: 20px 25px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.widget-wrapper h3 .accent {
    color: var(--accent);
}


.tradingview-widget-container {
    width: 100%;
    height: 700px;
}


@media (max-width: 1200px) {
    .tradingview-widget-container {
        height: 600px;
    }
}

@media (max-width: 1024px) {
    .markets-grid {
        grid-template-columns: 1fr;
    }

    .tradingview-widget-container {
        height: 650px;
    }
}

@media (max-width: 768px) {
    .services-hero {
        padding: 80px 15px;
    }

    .services-hero-title {
        font-size: 36px;
    }

    .services-hero-accent {
        font-size: 48px;
    }

    .services-hero-subtitle {
        font-size: 18px;
    }

    .markets-section {
        padding: 40px 15px 60px;
    }

    .tradingview-widget-container {
        height: 550px;
    }

    .widget-wrapper h3 {
        font-size: 16px;
        padding: 15px 20px 10px;
    }
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.services-hero-content,
.widget-wrapper {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.services-hero-content { animation-delay: 0.1s; }
.widget-wrapper:nth-child(1) { animation-delay: 0.2s; }
.widget-wrapper:nth-child(2) { animation-delay: 0.3s; }

.tabs-section {
    padding: 40px 20px;
    background: var(--bg);
}



.tabs-container {
    max-width: 1200px;
    margin: 0 auto;
}


.tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}


.tabs::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--border);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 0;
}





.tabs-item {
    position: relative;
    z-index: 1;
}


.tab-btn {
    padding: 10px 24px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}


.tab-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}


.tab-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(255, 114, 0, 0.3);
}




.about {
    padding: 80px 20px;
    background: var(--bg);
}


.about-container {
    max-width: 900px;
    margin: 0 auto;
}


.about-card {
    position: relative;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 60px 30px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}


.about-icon {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #f9f9f9;
    border-radius: 50px 50px 0 0;
    padding: 14px;
}

.about-icon img {
    width: 40px;
    height: 56px;
}


.about-title {
    font-size: 32px;
    margin-bottom: 20px;
    color: var(--text);
}

.about-title span {
    color: var(--accent);
}


.about-subtitle {
    margin-top: 20px;
    color: var(--accent);
    font-size: 18px;
}


.about-content p {
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 15px;
}




.mission {
    padding: 80px 20px;
    background: var(--bg);
}


.mission-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}


.mission-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}


.mission-label {
    color: var(--accent);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.mission-title {
    font-size: 34px;
    line-height: 1.3;
    color: var(--text);
    font-weight: 600;
}


.mission-title span {
    color: var(--accent);
}

.brokers {
    padding: 80px 20px;
    background: var(--bg);
}


.brokers-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}


.brokers-title {
    font-size: 32px;
    margin-bottom: 40px;
    color: var(--text);
}


.brokers-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.brokers-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}


.brokers-row.center {
    justify-content: center;
}

.broker-item {
    width: 200px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s ease;
}


.broker-item img {
    max-width: 100px;
    max-height: 50px;
    object-fit: contain;
}


.broker-item:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(255, 114, 0, 0.2);
}


.brokers-footer {
    margin-top: 30px;
}

.brokers-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
}

.brokers-link:hover {
    border-color: var(--accent);
}
.awards-gray{
    background-color: #f9f9f9;
}

.our-offices {
    padding: 80px 20px;
    background: var(--bg);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 60px;
}


.our-offices .container {
    max-width: 900px;
    margin: 0 auto;
}


.offices-info h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: var(--text);
}
.offices-info h2 span {
    color: var(--accent);
}


.offices-info p {
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 15px;
}
.offices-info .bold {
    font-weight: 600;
    color: var(--text);
}


.offices-map img {
    max-width: 100%;
    margin-top: 20px;
    border-radius: 12px;
}


.offices-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background: #f9f9f9;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    position: relative;
    margin-top: 25px;
    justify-content: center;
}


.offices-cta img {
    width: 50px;
    height: 50px;
}


.offices-cta h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

@media (max-width: 500px) {
    .offices-cta {
        flex-direction: column;
    }
}


.btn-primary {
    display: inline-block;
    padding: 12px 30px;
    background: var(--btn-bg);
    color: var(--btn-text);
    text-decoration: none;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #e66300;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(255, 114, 0, 0.3);
}
:root {
    --accent: #ff7200;
    --text: #222;
    --muted: #666;
    --bg: #fff;
    --card-bg: #f9f9f9;
}


.timeline {
    padding: 80px 20px;
    background: var(--bg);
}

.timeline-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}


.timeline-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 60px;
    color: var(--text);
}


.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--accent);
    transform: translateX(-50%);
    border-radius: 2px;
}


.timeline-event {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}


.timeline-event.right {
    left: 50%;
    flex-direction: row;
    text-align: left;
}

.timeline-event.left {
    left: 0;
    flex-direction: row-reverse;
    text-align: right;
}


.timeline-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--bg);
    border: 3px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.timeline-icon img {
    width: 35px;
    height: 35px;
}


.timeline-content {
    background: var(--card-bg);
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    flex: 1;
}

.timeline-content h5.event-year {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--accent);
}

.timeline-content p,
.timeline-content ul {
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
}

.timeline-content ul {
    padding-left: 20px;
}

.timeline-content .highlight {
    color: var(--accent);
    font-weight: 600;
}


@media (max-width: 768px) {
    .timeline-event {
        width: 100%;
        padding-left: 80px;
        padding-right: 40px;
        text-align: left !important;
    }
    .timeline-event.left {
        flex-direction: row !important;
    }
    .timeline-line {
        left: 30px;
    }
    .timeline-icon {
        left: 30px;
    }
}

.timeline-section {
    padding: 80px 20px;
}

.timeline-container {
    max-width: 1200px;
    margin: 0 auto;
}

.timeline-header {
    text-align: center;
    margin-bottom: 60px;
}

.timeline-header h2 {
    font-size: 42px;
    color: var(--text);
    margin-bottom: 15px;
}

.timeline-header h2 span {
    color: var(--accent);
}

.timeline-header p {
    color: var(--muted);
    font-size: 18px;
}


.timeline {
    position: relative;
    padding: 20px 0;
}


.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent) 0%, #ff9a4d 50%, var(--accent) 100%);
    border-radius: 2px;
    top: 0;
}


.timeline-item {
    position: relative;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-content-wrapper {
    width: 50%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.timeline-item:nth-child(odd) .timeline-content-wrapper {
    justify-content: flex-end;
}

.timeline-item:nth-child(even) .timeline-content-wrapper {
    justify-content: flex-start;
    flex-direction: row-reverse;
}


.timeline-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent) 0%, #ff9a4d 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(255, 114, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-image:hover {
    transform: scale(1.05) rotate(3deg);
    box-shadow: 0 12px 35px rgba(255, 114, 0, 0.35);
}

.timeline-image img {
    width: 45px;
    height: 45px;
    filter: brightness(0) invert(1);
}


.timeline-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 25px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 114, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 400px;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.timeline-year {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 12px;
    display: inline-block;
    position: relative;
}

.timeline-year::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
}

.timeline-description {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.timeline-description ul {
    list-style: none;
    padding: 0;
}

.timeline-description li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.timeline-description li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2;
}


.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: var(--accent);
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px rgba(255, 114, 0, 0.2);
    z-index: 10;
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-dot {
    transform: translateX(-50%) scale(1.3);
    box-shadow: 0 0 0 8px rgba(255, 114, 0, 0.15);
}


.timeline-connector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
    width: 40px;
    opacity: 0.5;
}

.timeline-item:nth-child(odd) .timeline-connector {
    margin-left: 12px;
}

.timeline-item:nth-child(even) .timeline-connector {
    margin-left: -52px;
    background: linear-gradient(270deg, var(--accent) 0%, transparent 100%);
}


@media (max-width: 768px) {
    .timeline::before {
        left: 30px;
    }

    .timeline-item {
        flex-direction: row !important;
    }

    .timeline-content-wrapper {
        width: 100%;
        padding-left: 80px;
        padding-right: 20px;
        justify-content: flex-start !important;
        flex-direction: row !important;
    }

    .timeline-dot {
        left: 30px;
    }

    .timeline-connector {
        display: none;
    }

    .timeline-header h2 {
        font-size: 32px;
    }

    .timeline-card {
        max-width: 100%;
    }
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-item {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-item:nth-child(4) { animation-delay: 0.4s; }
.timeline-item:nth-child(5) { animation-delay: 0.5s; }
.timeline-item:nth-child(6) { animation-delay: 0.6s; }
.timeline-item:nth-child(7) { animation-delay: 0.7s; }
.timeline-item:nth-child(8) { animation-delay: 0.8s; }
.timeline-item:nth-child(9) { animation-delay: 0.9s; }
.timeline-item:nth-child(10) { animation-delay: 1s; }
.timeline-item:nth-child(11) { animation-delay: 1.1s; }
.timeline-item:nth-child(12) { animation-delay: 1.2s; }

.about-banner {
    padding: 100px 20px 80px;
    background: var(--bg);
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}


.about-banner h2:first-child {
    font-size: 56px;
    font-weight: 300;
    margin-bottom: 10px;
}

.about-banner h2:first-child .accent {
    color: var(--accent);
    font-style: italic;
    font-weight: 400;
}


.about-headline {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 40px;
    color: var(--text);
}

.about-headline .accent {
    color: var(--accent);
    font-style: italic;
    position: relative;
}


.about-subheadline {
    font-size: 22px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 25px;
}


.about-text {
    font-size: 17px;
    color: var(--muted);
    max-width: 800px;
    margin: 0 auto 20px;
    line-height: 1.8;
}

.about-closing {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 40px 0 30px;
}


.about-finvasia {
    font-size: 16px;
    color: var(--muted);
    max-width: 850px;
    margin: 0 auto 15px;
    line-height: 1.8;
}


.about-divider {
    width: 60px;
    height: 3px;
    background: var(--accent);
    margin: 35px auto;
    border-radius: 2px;
}


@media (max-width: 768px) {
    .about-banner {
        padding: 60px 20px 50px;
    }

    .about-banner h2:first-child {
        font-size: 40px;
    }

    .about-headline {
        font-size: 26px;
    }

    .about-subheadline {
        font-size: 18px;
    }

    .about-text,
    .about-finvasia {
        font-size: 15px;
    }

    .about-closing {
        font-size: 17px;
    }
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-banner > * {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.about-banner h2:first-child { animation-delay: 0.1s; }
.about-headline { animation-delay: 0.2s; }
.about-subheadline { animation-delay: 0.3s; }
.about-text { animation-delay: 0.4s; }
.about-divider { animation-delay: 0.5s; }
.about-closing { animation-delay: 0.6s; }
.about-finvasia:nth-of-type(1) { animation-delay: 0.7s; }
.about-finvasia:nth-of-type(2) { animation-delay: 0.8s; }


.testimonials-section {
    padding: 80px 20px;
    background: var(--bg);
    overflow: hidden;
}

.testimonials-container {
    max-width: 1400px;
    margin: 0 auto;
}


.testimonials-header {
    text-align: center;
    margin-bottom: 50px;
}

.testimonials-header h2 {
    font-size: 42px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 15px;
}

.testimonials-header h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.testimonials-swiper {
    width: 100%;
    padding: 20px 0 60px;
    overflow: visible;
}

.swiper-slide {
    height: auto;
}


.testimonial-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 114, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.testimonial-text {
    flex: 1;
    margin-bottom: 30px;
}

.testimonial-text p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 15px;
}

.testimonial-text p:last-child {
    margin-bottom: 0;
}


.testimonial-author {
    border-top: 1px solid rgba(255, 114, 0, 0.1);
    padding-top: 25px;
    margin-top: auto;
}

.testimonial-author h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
}

.testimonial-author p {
    font-size: 14px;
    color: var(--accent);
    font-weight: 500;
}


.swiper-button-next,
.swiper-button-prev {
    color: var(--accent);
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--accent);
    color: white;
    transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px;
    font-weight: bold;
}

.swiper-button-prev {
    left: -25px;
}

.swiper-button-next {
    right: -25px;
}


.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ddd;
    opacity: 1;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: var(--accent);
    width: 30px;
    border-radius: 5px;
}


@media (max-width: 768px) {
    .testimonials-section {
        padding: 60px 15px;
    }

    .testimonials-header h2 {
        font-size: 32px;
    }

    .testimonial-card {
        padding: 30px 25px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
}


.features-section {
    padding: 80px 20px;
    background: var(--bg);
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
}


.features-header {
    margin-bottom: 50px;
}

.features-header h2 {
    font-size: 38px;
    font-weight: 700;
    color: var(--text);
}

.features-header h2 .accent {
    color: var(--accent);
}


.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}


.feature-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 35px 25px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 114, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
}


.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--accent) 0%, #ff9a4d 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 25px rgba(255, 114, 0, 0.25);
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}


.feature-card h6 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 15px;
    line-height: 1.4;
}

.feature-card h6 .accent {
    color: var(--accent);
}


.feature-card p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
}


@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .features-section {
        padding: 60px 15px;
    }

    .features-header h2 {
        font-size: 28px;
    }

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

    .feature-card {
        padding: 30px 20px;
    }
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.features-header,
.feature-card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.features-header { animation-delay: 0.1s; }
.feature-card:nth-child(1) { animation-delay: 0.2s; }
.feature-card:nth-child(2) { animation-delay: 0.3s; }
.feature-card:nth-child(3) { animation-delay: 0.4s; }
.feature-card:nth-child(4) { animation-delay: 0.5s; }

.stats-section {
    padding: 100px 20px;
    background: var(--bg);
    text-align: center;
}

.stats-container {
    max-width: 1000px;
    margin: 0 auto;
}


.stats-header {
    margin-bottom: 50px;
}

.stats-header h2 {
    font-size: 42px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 20px;
}

.stats-header h2 .accent {
    color: var(--accent);
}

.stats-header p {
    font-size: 17px;
    color: var(--muted);
    max-width: 600px;
    margin: 0 auto 10px;
}


.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}


.stat-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 114, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}


.stat-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent) 0%, #ff9a4d 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 10px 30px rgba(255, 114, 0, 0.3);
}

.stat-icon svg {
    width: 36px;
    height: 36px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}


.stat-number {
    font-size: 42px;
    font-weight: 800;
    color: var(--accent);
    display: block;
    margin-bottom: 8px;
    line-height: 1;
}


.stat-card h6 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}


.apply-btn {
    display: inline-block;
    background: var(--accent);
    color: white;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding: 16px 50px;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(255, 114, 0, 0.35);
    transition: all 0.3s ease;
    border: 2px solid var(--accent);
}

.apply-btn:hover {
    background: white;
    color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 114, 0, 0.25);
}


@media (max-width: 768px) {
    .stats-section {
        padding: 60px 15px;
    }

    .stats-header h2 {
        font-size: 28px;
    }

    .stats-header p {
        font-size: 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stat-card {
        padding: 30px 25px;
    }

    .stat-number {
        font-size: 36px;
    }

    .apply-btn {
        padding: 14px 40px;
        font-size: 15px;
    }
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.stats-header,
.stat-card,
.apply-btn {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.stats-header { animation-delay: 0.1s; }
.stat-card:nth-child(1) { animation-delay: 0.2s; }
.stat-card:nth-child(2) { animation-delay: 0.3s; }
.stat-card:nth-child(3) { animation-delay: 0.4s; }
.apply-btn { animation-delay: 0.6s; }

.stat-number {
    animation: countUp 0.8s ease forwards;
    animation-delay: 0.5s;
    opacity: 0;
}


.benefits-section {
    padding: 80px 20px;
    background: var(--light-bg);
    text-align: center;
}

.benefits-container {
    max-width: 900px;
    margin: 0 auto;
}


.benefits-header {
    margin-bottom: 40px;
}

.benefits-header h2 {
    font-size: 38px;
    font-weight: 700;
    color: var(--text);
}

.benefits-header h2 .accent {
    color: var(--accent);
}


.benefits-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}


.benefit-tag {
    display: inline-block;
    background: white;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 50px;
    border: 2px solid rgba(255, 114, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.benefit-tag:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 114, 0, 0.25);
}

@media (max-width: 768px) {
    .benefits-section {
        padding: 60px 15px;
    }

    .benefits-header h2 {
        font-size: 28px;
    }

    .benefit-tag {
        font-size: 14px;
        padding: 12px 22px;
    }
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.benefits-header,
.benefit-tag {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.benefits-header { animation-delay: 0.1s; }
.benefit-tag:nth-child(1) { animation-delay: 0.2s; }
.benefit-tag:nth-child(2) { animation-delay: 0.3s; }
.benefit-tag:nth-child(3) { animation-delay: 0.4s; }
.benefit-tag:nth-child(4) { animation-delay: 0.5s; }
.benefit-tag:nth-child(5) { animation-delay: 0.6s; }

.forex-page {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.forex-page * {
    box-sizing: border-box;
}

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

.forex-page .fx-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
    margin-top: 60px;
}

.forex-page .fx-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, rgba(255,114,0,0.1) 0%, transparent 70%);
    animation: fx-pulse 4s ease-in-out infinite;
}

@keyframes fx-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.forex-page .fx-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.forex-page .fx-hero-content {
    flex: 1;
}

.forex-page .fx-hero-title {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.forex-page .fx-hero-accent {
    color: #ff7200;
}

.forex-page .fx-hero-subtitle {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin: 0 0 30px 0;
}

.forex-page .fx-hero-cta {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 18px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255,114,0,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.forex-page .fx-hero-cta:hover {
    background: #e66600;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255,114,0,0.5);
}

.forex-page .fx-hero-image {
    flex: 1;
}

.forex-page .fx-hero-image img {
    width: 100%;
    max-width: 650px;
    height: auto;
    border-radius: 12px;
    display: block;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* ============================================
   WHAT IS FOREX SECTION
   ============================================ */

.forex-page .fx-info-section {
    padding: 80px 20px;
    background: #f1f2f3;
}

.forex-page .fx-container {
    max-width: 1200px;
    margin: 0 auto;
}

.forex-page .fx-box {
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    text-align: center;
}

.forex-page .fx-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 20px 0;
}

.forex-page .fx-text {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin: 0;
}

/* ============================================
   FEATURES SECTION (BENEFITS)
   ============================================ */

.forex-page .fx-features {
    padding: 80px 20px;
    background: #fff;
}

.forex-page .fx-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.forex-page .fx-section-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.forex-page .fx-accent {
    color: #ff7200;
}

.forex-page .fx-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.forex-page .fx-feature-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    transition: all 0.3s ease;
    text-align: center;
}

.forex-page .fx-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.forex-page .fx-feature-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
}

.forex-page .fx-feature-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 12px 0;
}

.forex-page .fx-feature-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.forex-page .fx-features-cta {
    text-align: center;
    margin-top: 40px;
}

.forex-page .fx-btn {
    display: inline-block;
    background: #ff7200;
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255,114,0,0.3);
}

.forex-page .fx-btn:hover {
    background: #e66600;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,114,0,0.4);
}

/* ============================================
   SOCIAL INTELLIGENCE SECTION
   ============================================ */

.forex-page .fx-split-section {
    padding: 80px 20px;
    background: #f1f2f3;
}

.forex-page .fx-split-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.forex-page .fx-split-container.reverse {
    flex-direction: row-reverse;
}

.forex-page .fx-split-content {
    flex: 1;
}

.forex-page .fx-split-content h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 20px 0;
}

.forex-page .fx-split-content p {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin: 0 0 25px 0;
}

.forex-page .fx-split-image {
    flex: 1;
}

.forex-page .fx-split-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 12px;
    display: block;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* ============================================
   BROKER NEUTRAL SECTION
   ============================================ */

.forex-page .fx-center-section {
    padding: 80px 20px;
    background: #fff;
}

.forex-page .fx-center-box {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.forex-page .fx-center-box h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 20px 0;
}

.forex-page .fx-center-box p {
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin: 0 0 30px 0;
}

/* ============================================
   TRANSPARENT FOREX SECTION
   ============================================ */

.forex-page .fx-details-section {
    padding: 80px 20px;
    background: #f8f9fa;
}

.forex-page .fx-details-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: start;
}

.forex-page .fx-details-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.forex-page .fx-details-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.forex-page .fx-detail-card {
    background: #fff;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.forex-page .fx-detail-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 12px 0;
}

.forex-page .fx-detail-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

.forex-page .fx-detail-card .fx-accent {
    color: #ff7200;
    font-weight: 600;
}

.forex-page .fx-details-cta {
    margin-top: 10px;
}

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

.forex-page .fx-steps-section {
    background: #1a1a2e;
    padding: 80px 20px;
    color: #fff;
}

.forex-page .fx-steps-container {
    max-width: 1200px;
    margin: 0 auto;
}

.forex-page .fx-steps-header {
    text-align: center;
    margin-bottom: 60px;
}

.forex-page .fx-steps-header h2 {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: #fff;
}

.forex-page .fx-steps-header p {
    font-size: 18px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

.forex-page .fx-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

.forex-page .fx-steps-grid::before {
    content: '';
    position: absolute;
    top: 66px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, #ff7200 0%, transparent 100%);
    z-index: 0;
}

.forex-page .fx-step-card {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 30px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.forex-page .fx-step-card:hover {
    background: rgba(255,114,0,0.1);
    border-color: rgba(255,114,0,0.3);
    transform: translateY(-5px);
}

.forex-page .fx-step-number {
    width: 70px;
    height: 70px;
    background: #ff7200;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    margin: 0 auto 24px;
    box-shadow: 0 8px 25px rgba(255,114,0,0.3);
}

.forex-page .fx-step-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #fff;
}

.forex-page .fx-step-card p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

.forex-page .fx-steps-cta {
    text-align: center;
    margin-top: 50px;
}

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

@media (max-width: 968px) {
    .forex-page .fx-hero-container {
        flex-direction: column;
        text-align: center;
    }

    .forex-page .fx-hero-title {
        font-size: 36px;
    }

    .forex-page .fx-hero-image {
        order: -1;
    }

    .forex-page .fx-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .forex-page .fx-split-container,
    .forex-page .fx-split-container.reverse {
        flex-direction: column;
        gap: 40px;
    }

    .forex-page .fx-details-container {
        grid-template-columns: 1fr;
    }

    .forex-page .fx-details-image {
        order: -1;
        max-width: 500px;
        margin: 0 auto;
    }

    .forex-page .fx-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .forex-page .fx-steps-grid::before {
        display: none;
    }
}

@media (max-width: 600px) {
    .forex-page .fx-hero {
        padding: 60px 20px;
    }

    .forex-page .fx-hero-title {
        font-size: 28px;
    }

    .forex-page .fx-box {
        padding: 30px 20px;
    }

    .forex-page .fx-title,
    .forex-page .fx-section-title,
    .forex-page .fx-split-content h2,
    .forex-page .fx-center-box h2,
    .forex-page .fx-steps-header h2 {
        font-size: 24px;
    }

    .forex-page .fx-features-grid {
        grid-template-columns: 1fr;
    }

    .forex-page .fx-steps-grid {
        grid-template-columns: 1fr;
    }

    .forex-page .fx-step-card {
        padding: 25px 20px;
    }
}


.ec-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.ec-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, rgba(255,114,0,0.1) 0%, transparent 70%);
    animation: ec-pulse 4s ease-in-out infinite;
}

@keyframes ec-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.ec-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.ec-hero-title {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.ec-hero-accent {
    color: #ff7200;
}

.ec-hero-subtitle {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .ec-hero {
        padding: 80px 20px;
    }

    .ec-hero-title {
        font-size: 36px;
    }

    .ec-hero-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .ec-hero {
        padding: 60px 20px;
    }

    .ec-hero-title {
        font-size: 28px;
    }

    .ec-hero-subtitle {
        font-size: 15px;
    }
}