/*=============================================
   SaintQuant Theme — style.css
   Light crypto trading platform theme
   Based on Figma: SaintQuant Homepage Redesign
   Colors: #00A887 accent, #171A1F text, #FFFFFF bg
==============================================*/

:root {
    --sq-bg-primary:       #FFFFFF;
    --sq-bg-secondary:     #FAFAFB;
    --sq-bg-card:          #FFFFFF;
    --sq-bg-card-hover:    #F4F6F8;
    --sq-accent:           #00A887;
    --sq-accent-dim:       rgba(0,168,135,0.08);
    --sq-accent-glow:      rgba(0,168,135,0.25);
    --sq-text-primary:     #171A1F;
    --sq-text-secondary:   #4B5563;
    --sq-text-muted:       #9CA3AF;
    --sq-border:           #DEE1E6;
    --sq-border-accent:    rgba(0,168,135,0.35);
    --sq-shadow:           0 3px 6px rgba(18,15,40,0.08);
    --sq-shadow-md:        0 8px 24px rgba(18,15,40,0.10);
    --sq-shadow-lg:        0 16px 48px rgba(18,15,40,0.12);
    --sq-radius-sm:        8px;
    --sq-radius-md:        12px;
    --sq-ticker-h:         46px;
    --sq-radius-lg:        20px;
    --sq-transition:       all 0.25s ease;
    --sq-font:             'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --sq-hero-grad-top:    #E0F4F1;
    --sq-hero-grad-mid:    #F2FAF8;
    --sq-hero-grad-bottom: #FFFFFF;
    --sq-header-bg-top:     #ffffff;
    --sq-header-bg-bottom:  #f0f2f5;
    --sq-header-bg-sticky:  #fafbfc;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;background:var(--sq-bg-primary);color:var(--sq-text-primary);font-family:var(--sq-font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@supports (overflow-x:clip){
    html,body{overflow-x:clip}
}
main{overflow-x:clip}
a{color:inherit;text-decoration:none;transition:var(--sq-transition)}
a:hover{color:var(--sq-accent)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{color:var(--sq-text-primary);font-weight:700;line-height:1.2;margin-bottom:0}
p{color:var(--sq-text-secondary);margin-bottom:0}
ul{list-style:none;padding:0;margin:0}

/* ---- Container (Bootstrap-compatible) ---- */
.container{width:100%;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
@media(min-width:576px){.container{max-width:540px}}
@media(min-width:768px){.container{max-width:720px}}
@media(min-width:992px){.container{max-width:960px}}
@media(min-width:1200px){.container{max-width:1140px}}
@media(min-width:1400px){.container{max-width:1320px}}

/* ---- Bootstrap Grid Compat ---- */
.row{display:flex;flex-wrap:wrap;margin-left:-12px;margin-right:-12px}
.row>*{flex-shrink:0;width:100%;max-width:100%;padding-left:12px;padding-right:12px}
.g-4{--bs-gutter-x:1.5rem;--bs-gutter-y:1.5rem}.g-4>*{padding-left:calc(var(--bs-gutter-x) / 2);padding-right:calc(var(--bs-gutter-x) / 2);margin-top:var(--bs-gutter-y)}
.g-5{--bs-gutter-x:3rem;--bs-gutter-y:3rem}.g-5>*{padding-left:calc(var(--bs-gutter-x) / 2);padding-right:calc(var(--bs-gutter-x) / 2);margin-top:var(--bs-gutter-y)}
.row.g-4,.row.g-5{margin-left:calc(var(--bs-gutter-x) / -2);margin-right:calc(var(--bs-gutter-x) / -2);margin-top:calc(var(--bs-gutter-y) * -1)}
.g-3{--bs-gutter-x:1rem;--bs-gutter-y:1rem}.g-3>*{padding-left:calc(var(--bs-gutter-x) / 2);padding-right:calc(var(--bs-gutter-x) / 2);margin-top:var(--bs-gutter-y)}
.row.g-3{margin-left:calc(var(--bs-gutter-x) / -2);margin-right:calc(var(--bs-gutter-x) / -2);margin-top:calc(var(--bs-gutter-y) * -1)}
.col-12{width:100%}
.col-6{width:50%}
@media(min-width:576px){.col-sm-6{width:50%}}
@media(min-width:768px){.col-md-6{width:50%}}
@media(min-width:992px){
    .col-lg-2{width:16.666667%}
    .col-lg-3{width:25%}
    .col-lg-4{width:33.333333%}
    .col-lg-5{width:41.666667%}
    .col-lg-6{width:50%}
    .col-lg-7{width:58.333333%}
    .col-lg-8{width:66.666667%}
    .col-lg-9{width:75%}
}
.gx-5{--bs-gutter-x:3rem}.gx-5>*{padding-left:calc(var(--bs-gutter-x) / 2);padding-right:calc(var(--bs-gutter-x) / 2)}
.row.gx-5{margin-left:calc(var(--bs-gutter-x) / -2);margin-right:calc(var(--bs-gutter-x) / -2)}

/* ---- Bootstrap Display Compat ---- */
.d-flex{display:flex !important}
.d-inline-flex{display:inline-flex !important}
.d-block{display:block !important}
.d-inline-block{display:inline-block !important}
.d-none{display:none !important}
@media(min-width:768px){.d-md-none{display:none !important}.d-md-flex{display:flex !important}.d-md-block{display:block !important}}
@media(min-width:992px){.d-lg-block{display:block !important}.d-lg-inline-flex{display:inline-flex !important}.d-lg-none{display:none !important}.d-lg-flex{display:flex !important}}
.d-none.d-lg-block{display:none !important}
@media(min-width:992px){.d-none.d-lg-block{display:block !important}.d-none.d-lg-inline-flex{display:inline-flex !important}}

/* ---- Bootstrap Flex Compat ---- */
.align-items-center{align-items:center !important}
.align-items-start{align-items:flex-start !important}
.justify-content-between{justify-content:space-between !important}
.justify-content-center{justify-content:center !important}
.justify-content-end{justify-content:flex-end !important}
.flex-wrap{flex-wrap:wrap !important}
.flex-column{flex-direction:column !important}

/* ---- Bootstrap Spacing Compat ---- */
.mb-12{margin-bottom:12px !important}.mb-16{margin-bottom:16px !important}.mb-20{margin-bottom:20px !important}
.mb-24{margin-bottom:24px !important}.mb-28{margin-bottom:28px !important}.mb-32{margin-bottom:32px !important}
.mb-40{margin-bottom:40px !important}.mb-48{margin-bottom:48px !important}.mb-56{margin-bottom:56px !important}
.mt-5{margin-top:3rem !important}.mt-12{margin-top:12px !important}.mt-24{margin-top:24px !important}.mt-48{margin-top:48px !important}
@media(min-width:992px){.mt-lg-0{margin-top:0 !important}}
.ms-1{margin-left:4px !important}.ms-2{margin-left:8px !important}
.me-1{margin-right:4px !important}.me-2{margin-right:8px !important}
.gap-2{gap:0.5rem !important}.gap-3{gap:1rem !important}

/* ---- Form Validation Compat ---- */
.is-invalid{border-color:#ef4444 !important;box-shadow:0 0 0 2px rgba(239,68,68,0.15) !important}

/* ---- Bootstrap Text Compat ---- */
.text-center{text-align:center !important}
.text-start{text-align:left !important}
.w-100{width:100% !important}
.mx-auto{margin-left:auto !important;margin-right:auto !important}


/* Page blocks + responsive: see src/resources/css/saint-quant-tailwind.css (@layer components) */