/* =========================================
   INTQUES GLOBAL DESIGN SYSTEM
========================================= */

/* Brand Color Variables */

:root {

    --primary-orange: #ff6a00;
    --primary-orange-hover: #e65f00;

    --secondary-dark: #1a1a1a;

    --light-bg: #f8f9fa;
    --white: #ffffff;

    --text-main: #333333;
    --text-muted: #666666;

    --border-color: #e5e5e5;

    --primary-gradient: linear-gradient(135deg,#ff6a00,#ff8c3a);

    --transition-smooth: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* Design tokens: spacing and animation */
:root{
    --section-padding-lg: 60px;   /* desktop */
    --section-padding-md: 40px;   /* tablet */
    --section-padding-sm: 28px;   /* mobile */
    --site-gradient-start: #fffbf7;
    --site-gradient-end: #ffffff;
    --section-overlay: linear-gradient(180deg, rgba(255,106,0,0.03) 0%, rgba(255,179,71,0.015) 100%);
}


/* =========================================
   RESET + BASE
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

/* Prevent accidental horizontal scroll from wide elements */
html, body { overflow-x: hidden; }

body{

    font-family: 'Inter', sans-serif;
    font-size:16px;

    color:var(--text-main);
    background:var(--white);

    line-height:1.6;
}


/* =========================================
   TYPOGRAPHY
========================================= */

h1,h2,h3,h4,h5,h6{
    font-weight:700;
    color:var(--secondary-dark);
}

h1{
    font-size:3rem;
}

h2{
    font-size:2.2rem;
}

h3{
    font-size:1.5rem;
}

p{
    color:var(--text-muted);
}


/* =========================================
   LAYOUT
========================================= */

section{
    padding: var(--section-padding-lg) 0;
    position: relative;
}

/* subtle decorative overlay for all sections - very low opacity to keep it premium */
section::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--section-overlay);
    opacity: 1;
    z-index: 0;
    mix-blend-mode: screen;
    border-radius: inherit;
}

/* ensure section children sit above overlay */
section > .container, section > .cp-container, section > .curr-container { position: relative; z-index: 1; }

/* Typography rhythm improvements */
h1,h2,h3{ margin-top:0; margin-bottom:0.6rem; }
h1{ line-height:1.05; }
p{ margin-bottom:0.9rem; }

/* entrance animations */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 520ms cubic-bezier(0.2,0.9,0.2,1) both; }

/* subtle float for decorative elements */
@keyframes floatSlow { 0% { transform: translateY(0px);} 50% { transform: translateY(-6px);} 100% { transform: translateY(0px);} }
.float-slow { animation: floatSlow 6s ease-in-out infinite; }

.container{
    max-width:1200px;
}


/* =========================================
   BACKGROUNDS
========================================= */

.bg-light-custom{
    background:var(--light-bg);
}

.bg-dark-custom{
    background:var(--secondary-dark);
    color:white;
}


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

.btn-primary-custom{

    background:var(--primary-orange);
    border:none;

    color:white;

    padding:12px 26px;

    border-radius:8px;

    font-weight:600;

    transition:var(--transition-smooth);
}

.btn-primary-custom:hover{

    background:var(--primary-orange-hover);

    transform:translateY(-2px);

}


.btn-outline-custom{

    border:2px solid var(--primary-orange);
    color:var(--primary-orange);

    padding:10px 24px;

    border-radius:8px;

    font-weight:600;

    transition:var(--transition-smooth);

}

.btn-outline-custom:hover{

    background:var(--primary-orange);
    color:white;

}


/* =========================================
   CARDS
========================================= */

.card-clean{

    border:none;

    border-radius:12px;

    background:white;

    box-shadow:0 8px 24px rgba(0,0,0,0.05);

    transition:var(--transition-smooth);

}

.card-clean:hover{

    transform:translateY(-6px);

    box-shadow:0 14px 40px rgba(0,0,0,0.08);

}


/* =========================================
   UTILITIES
========================================= */

.text-primary-custom{
    color:var(--primary-orange);
}

.text-muted-custom{
    color:var(--text-muted);
}

.border-custom{
    border:1px solid var(--border-color);
}


/* =========================================
   SPACING HELPERS
========================================= */

.mt-40{
    margin-top:40px;
}

.mb-40{
    margin-bottom:40px;
}

.py-100{
    padding-top:100px;
    padding-bottom:100px;
}


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

@media (max-width:768px){

    h1{
        font-size:2.2rem;
    }

    h2{
        font-size:1.8rem;
    }


    section{
        padding: var(--section-padding-md) 0;
    }

}

/* Small screens: further reduce section spacing */
@media (max-width:576px){
    section{ padding: var(--section-padding-sm) 0; }
}

/* Additional breakpoints */
@media (max-width:991px) {
    .container { padding-left: 16px; padding-right: 16px; }
    section { padding: 60px 0; }
}

@media (max-width:576px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    section { padding: 28px 0; }
    .container { padding-left: 12px; padding-right: 12px; }
    .btn-primary-custom, .btn-outline-custom { width: 100%; box-sizing: border-box; }
}