/* ══════════════════════════════════════════  
 CAPITAL EQUITY — RESPONSIVE STYLESHEET  
 Mobile-first breakpoints:  
 xs: < 480px  
 sm: 480–767px  
 md: 768–1023px  
 lg: 1024–1279px  
 xl: 1280px+  
══════════════════════════════════════════ */

/* ── Large (1024–1279px) ── */  
@media (max-width: 1279px) {  
 .hero-wrapper { gap: var(--space-10); }  
 .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-8); }  
 .footer-col:last-child { grid-column: 1 / -1; }  
 .instruments-grid { grid-template-columns: repeat(2, 1fr); }  
 .why-grid { grid-template-columns: repeat(2, 1fr); }  
 .trading-layout { grid-template-columns: 1fr 300px; }  
}

/* ── Medium (768–1023px) ── */  
@media (max-width: 1023px) {  
 :root { --nav-height: 64px; }

 /* Navigation */  
 .nav-links,  
 .nav-actions { display: none; }  
 .hamburger { display: flex; }

 /* Hero */  
 .hero-wrapper {  
 grid-template-columns: 1fr;  
 gap: var(--space-10);  
 text-align: center;  
 padding-top: var(--space-12);  
 }  
 .hero-badge { justify-content: center; }  
 .hero-sub { margin: 0 auto var(--space-8); }  
 .hero-cta-group,  
 .hero-auth-row { justify-content: center; }  
 .hero-market-panel { max-width: 560px; margin: 0 auto; }

 /* Slider */  
 .slider-section { height: 420px; }  
 .slide-content {  
 padding: 0 var(--space-8);  
 max-width: 100%;  
 }  
 .slide-headline { font-size: clamp(1.4rem, 4vw, 2rem); }

 /* Markets */  
 .market-table-wrapper { display: none; }  
 .market-cards-grid { display: grid; }

 /* Sections */  
 .why-grid { grid-template-columns: 1fr 1fr; }  
 .trading-layout {  
 grid-template-columns: 1fr;  
 }  
 .trading-sidebar {  
 display: grid;  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-4);  
 }  
 .instruments-grid { grid-template-columns: repeat(2, 1fr); }  
 .partner-layout { grid-template-columns: 1fr; gap: var(--space-10); }  
 .web3-layout { grid-template-columns: 1fr; gap: var(--space-10); }  
 .security-layout { grid-template-columns: 1fr; }  
 .accounts-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }  
 .contact-layout { grid-template-columns: 1fr; gap: var(--space-10); }  
 .stats-grid { grid-template-columns: repeat(2, 1fr); }  
 .insights-grid { grid-template-columns: 1fr 1fr; }

 /* Steps */  
 .steps-row {  
 flex-direction: column;  
 gap: var(--space-4);  
 }  
 .step-connector {  
 width: 2px;  
 height: var(--space-6);  
 align-self: center;  
 background: linear-gradient(180deg, var(--clr-border), rgba(201,168,76,0.3), var(--clr-border));  
 }

 /* Footer */  
 .footer-grid {  
 grid-template-columns: 1fr 1fr;  
 gap: var(--space-8);  
 }  
 .footer-brand { grid-column: 1 / -1; }  
 .footer-bottom-inner { flex-direction: column; text-align: center; }  
 .footer-risk-note { text-align: center; }  
}

/* ── Small (480–767px) ── */  
@media (max-width: 767px) {  
 :root {  
 --nav-height: 60px;  
 --ticker-height: 32px;  
 }

 .section-pad { padding: var(--space-16) 0; }  
 .container { padding: 0 var(--space-4); }

 /* Hero */  
 .hero-section { padding: var(--space-12) 0; min-height: auto; }  
 .hero-pair-cards { grid-template-columns: 1fr 1fr; }  
 .hero-stats-row { grid-template-columns: repeat(3, 1fr); }

 /* Slider */  
 .slider-section { height: 360px; }  
 .slide-desc { display: none; }  
 .premiumSwiper .swiper-button-next,  
 .premiumSwiper .swiper-button-prev { display: none; }

 /* Markets */  
 .market-cards-grid { grid-template-columns: 1fr; }  
 .market-tabs { gap: var(--space-2); }  
 .market-tab { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }

 /* Why grid */  
 .why-grid { grid-template-columns: 1fr; }  
 .why-card { padding: var(--space-6); }

 /* Trading */  
 .pair-selector { flex-wrap: wrap; }  
 .trading-sidebar { grid-template-columns: 1fr; }  
 .chart-area { height: 220px; }

 /* Instruments */  
 .instruments-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }  
 .instrument-card { padding: var(--space-5); }

 /* Insights */  
 .insights-grid { grid-template-columns: 1fr; }

 /* Stats */  
 .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }  
 .stat-card { padding: var(--space-5); }

 /* Partner */  
 .partner-badges { flex-direction: column; gap: var(--space-3); }

 /* Steps */  
 .step-item { padding: var(--space-5); }

 /* Contact form */  
 .form-row-2 { grid-template-columns: 1fr; }  
 .contact-form-box { padding: var(--space-5); }

 /* Risk */  
 .risk-box { flex-direction: column; gap: var(--space-4); }

 /* Footer */  
 .footer-grid { grid-template-columns: 1fr; }  
 .footer-brand { grid-column: auto; }

 /* Toast */  
 .toast-container { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }  
 .toast { min-width: auto; max-width: 100%; }

 /* Back to top */  
 .back-to-top { bottom: var(--space-4); left: var(--space-4); }  
}

/* ── Extra small (< 480px) ── */  
@media (max-width: 479px) {  
 .hero-headline { font-size: 2rem; }  
 .hero-pair-cards { grid-template-columns: 1fr; }  
 .hero-cta-group { flex-direction: column; }  
 .hero-cta-group .btn { width: 100%; justify-content: center; }  
 .hero-auth-row { gap: var(--space-3); font-size: var(--text-xs); }  
 .slider-section { height: 300px; }  
 .slide-headline { font-size: 1.4rem; }  
 .instruments-grid { grid-template-columns: 1fr; }  
 .stats-grid { grid-template-columns: 1fr; }  
 .accounts-grid { grid-template-columns: 1fr; }  
 .how-cta { flex-direction: column; }  
 .how-cta .btn { width: 100%; justify-content: center; }  
 .wallet-badges-row { flex-direction: column; }  
 .hero-stats-row { grid-template-columns: 1fr; }  
 .shield-chip-grid { grid-template-columns: 1fr; }  
}

/* ── 4K / Large screens (1920px+) ── */  
@media (min-width: 1920px) {  
 :root { --nav-height: 80px; }  
 .container { max-width: 1600px; }  
 .hero-headline { font-size: 5rem; }  
 .section-title { font-size: 3rem; }  
}

/* ── Print ── */  
@media print {  
 .ticker-bar,  
 .nav-header,  
 .hamburger,  
 .mobile-menu,  
 .hero-canvas,  
 .hero-scroll-cue,  
 .back-to-top,  
 .toast-container { display: none !important; }  
 body { background: white; color: black; }  
}