/* ==========================================================
 *  ExotElectronics
 *  Global Stylesheet
 *  File: /assets/css/style.css
 *  ========================================================== */


/* ==========================================================
 *  CSS Variables
 *  ========================================================== */

:root{

    --bg:#0f172a;
    --bg-soft:#111827;

    --card:#1e293b;

    --text:#f8fafc;
    --muted:#94a3b8;

    --accent:#38bdf8;
    --accent-dark:#0284c7;

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;

    --line:rgba(255,255,255,.10);

    --radius:16px;

    --shadow:
    0 10px 30px rgba(0,0,0,.25);

    --transition:.20s ease;

}


/* ==========================================================
 *  Reset
 *  ========================================================== */

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


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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

    line-height:1.6;

    font-size:16px;

}


/* ==========================================================
 *  Links
 *  ========================================================== */

a{

    color:var(--accent);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:#6ad1ff;

}


/* ==========================================================
 *  Images
 *  ========================================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}


/* ==========================================================
 *  Typography
 *  ========================================================== */

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

    margin-bottom:.6em;

    line-height:1.2;

    font-weight:700;

    color:var(--text);

}

h1{

    font-size:2.5rem;

}

h2{

    font-size:2rem;

}

h3{

    font-size:1.5rem;

}

h4{

    font-size:1.25rem;

}

p{

    margin-bottom:1rem;

}


/* ==========================================================
 *  Lists
 *  ========================================================== */

ul,
ol{

    margin-left:1.5rem;

    margin-bottom:1rem;

}

li{

    margin-bottom:.4rem;

}


/* ==========================================================
 *  Horizontal Rule
 *  ========================================================== */

hr{

    border:none;

    border-top:1px solid var(--line);

    margin:30px 0;

}


/* ==========================================================
 *  Utility Classes
 *  ========================================================== */

.section-title{

    font-size:22px;

    font-weight:800;

    letter-spacing:-0.01em;

    margin:24px 0 12px;

}

.muted{

    color:var(--muted);

}

.eyebrow{

    display:block;

    margin-bottom:8px;

    color:var(--muted);

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.12em;

}

.tag{

    display:inline-block;

    font-size:12px;

    color:var(--muted);

}


/* ==========================================================
 *  Text Alignment
 *  ========================================================== */

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}


/* ==========================================================
 *  Display Helpers
 *  ========================================================== */

.hidden{

    display:none !important;

}

.block{

    display:block;

}

.inline{

    display:inline;

}

.inline-block{

    display:inline-block;

}


/* ==========================================================
 *  Border Radius Helpers
 *  ========================================================== */

.rounded{

    border-radius:var(--radius);

}

.round{

    border-radius:999px;

}


/* ==========================================================
 *  Shadows
 *  ========================================================== */

.shadow{

    box-shadow:var(--shadow);

}


/* ==========================================================
 *  Dividers
 *  ========================================================== */

.divider{

    border-top:1px solid var(--line);

    margin:24px 0;

}


/* ==========================================================
 *  Selection
 *  ========================================================== */

::selection{

    background:var(--accent);

    color:#fff;

}