/* ==========================================================
   ACCORD ENGINEERING SOLUTION
   File : base.css
   Version : 1.0
========================================================== */

/* ===============================
   BODY
================================ */

body{
    background:var(--white);
    color:var(--text);
    line-height:1.65;
    font-size:16px;
}

/* ===============================
   CONTAINER
================================ */

.container{

    width:min(92%, var(--container));

    margin-inline:auto;

}

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

h1,h2,h3,h4,h5,h6{

    color:var(--dark);

    font-weight:800;

    line-height:1.15;

}

h1{

    font-size:clamp(42px,6vw,72px);

}

h2{

    font-size:clamp(34px,5vw,52px);

}

h3{

    font-size:28px;

}

p{

    color:var(--text-light);

    font-size:17px;

    line-height:1.8;

}

/* ===============================
   SECTION
================================ */

section{

    padding:110px 0;

}

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

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:16px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary:hover{

    transform:translateY(-4px);

    background:var(--primary-dark);

    box-shadow:var(--shadow);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:16px;

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

    color:#fff;

    font-weight:700;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:#fff;

    color:var(--dark);

}

/* ===============================
   BADGE
================================ */

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:#EFF6FF;

    color:var(--primary);

    font-weight:700;

    margin-bottom:24px;

}

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

.section-title{

    max-width:700px;

    margin-bottom:20px;

}

.section-description{

    max-width:720px;

    margin-bottom:60px;

}

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

.grid{

    display:grid;

    gap:30px;

}

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

.glass{

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    border-radius:24px;

    box-shadow:var(--shadow);

}

/* ===============================
   IMAGE
================================ */

img{

    user-select:none;

}

/* ===============================
   SELECTION
================================ */

::selection{

    background:var(--primary);

    color:#fff;

}
/* ==========================================
   COMPONENT PLACEHOLDER FIX
========================================== */

body:not(.service-page) main > section[id]{
    padding:0;
}

/* ==========================================================
   PREMIUM DARK SCROLLBAR
========================================================== */

html {
    scrollbar-width: thin;
    scrollbar-color: #60A5FA #06101F;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background:
        linear-gradient(180deg, #06101F 0%, #0B1B34 100%);
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 3px solid #06101F;
    background:
        linear-gradient(180deg, #93C5FD 0%, #2563EB 50%, #0B2A65 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 0 20px rgba(96, 165, 250, 0.28);
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, #BFDBFE 0%, #3B82F6 45%, #1D4ED8 100%);
}

::-webkit-scrollbar-corner {
    background: #06101F;
}

/* Component mount reset */
#topbar, #header, #footer { padding: 0; }