/* ==========================================================
   BASE
   Variables • Reset • Typography • Utilities • Buttons
========================================================== */



/* ==========================================================
   CSS VARIABLES
========================================================== */

:root{

    /* Colors */

    --void:#050507;
    --graphite:#0c0d11;
    --carbon:#15171d;
    --carbon-2:#1b1e26;

    --steel:#6c6c6c;

    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.14);

    --azure:#1e86d6;
    --azure-deep:#1971ad;
    --electric:#3bb8ff;

    --ink:#f5f7fa;
    --muted:#9aa3b2;
    --faint:#5b6472;


    /* Layout */

    --gap:clamp(72px,9vw,150px);
    --pad:clamp(20px,5vw,80px);
    --maxw:1280px;
    --r:18px;


    /* Typography */

    --display:'Satoshi','Inter',system-ui,sans-serif;
    --body:'Inter',system-ui,sans-serif;
    --mono:'Space Mono',ui-monospace,monospace;


    /* Animation */

    --ease:cubic-bezier(.16,1,.3,1);


    /* Assets */

    --logo:url("../images/logo-nobg.png");
}



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

:root{

    --img-hero:url("https://images.unsplash.com/photo-1648235692910-947cb90ddd97?w=1900&q=80&auto=format&fit=crop");

    --img-about:url("https://images.unsplash.com/photo-1637430308606-86576d8fef3c?w=1100&q=80&auto=format&fit=crop");

    --img-why:url("https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?w=1100&q=80&auto=format&fit=crop");

    --img-rehab:url("https://images.unsplash.com/photo-1728486144678-95cb7c5f7463?w=1100&q=80&auto=format&fit=crop");

    --img-tex:url("https://images.unsplash.com/photo-1590487988256-9ed24133863e?w=900&q=70&auto=format&fit=crop");

}



/* ==========================================================
   RESET
========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--body);
    background:var(--void);
    color:var(--ink);

    line-height:1.6;
    letter-spacing:.1px;

    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;

}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    border:none;
    background:none;
    color:inherit;
    cursor:pointer;
    font-family:inherit;
}

section{
    position:relative;
}



/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *{
        animation-duration:.001ms!important;
        transition-duration:.001ms!important;
    }

}

::selection{

    background:var(--azure);
    color:#fff;

}



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

.wrap{

    max-width:var(--maxw);
    margin-inline:auto;
    padding-inline:var(--pad);

}

.bg-photo{

    position:absolute;
    inset:0;

    z-index:0;

    background-size:cover;
    background-position:center;

}



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

.logo-mark{

    display:inline-block;

    background:var(--logo)
    center/contain
    no-repeat;

}

.brand-mark{

    width:64px;
    height:64px;

}

.foot-mark{

    width:54px;
    height:54px;

    margin-bottom:18px;

}



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

h1,
h2,
h3{

    font-family:var(--display);
    font-weight:900;

    line-height:.98;
    letter-spacing:-.02em;

}

.eyebrow{

    display:inline-flex;
    align-items:center;
    gap:12px;

    font-family:var(--mono);
    font-size:12px;

    color:var(--azure);

    letter-spacing:.28em;
    text-transform:uppercase;

}

.eyebrow::before{

    content:"";

    width:26px;
    height:1px;

    background:var(--azure);

}

.sec-head{

    max-width:780px;
    margin-bottom:clamp(40px,5vw,72px);

}

.sec-head h2{

    font-size:clamp(34px,6vw,72px);
    margin:18px 0 16px;

}

.sec-head p{

    max-width:60ch;
    color:var(--muted);
    font-size:clamp(15px,1.6vw,18px);

}

.grad{

    color:transparent;
    background:linear-gradient(
        100deg,
        #fff 0%,
        #cfe6fb 40%,
        var(--electric) 100%
    );

    -webkit-background-clip:text;
    background-clip:text;

}



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

.btn{

    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:15px 28px;
    border-radius:100px;
    font-size:15px;
    font-weight:600;

    transition:
        transform .4s var(--ease),
        background .3s,
        box-shadow .3s;

    will-change:transform;

}

.btn svg{

    width:17px;
    height:17px;

}

.btn-primary{

    color:#fff;
    background:var(--azure);

    box-shadow:
        0 8px 30px -8px
        rgba(30,134,214,.7);

}

.btn-primary:hover{

    background:var(--electric);
    box-shadow:
        0 12px 40px -8px
        rgba(59,184,255,.8);

}

.btn-ghost{

    color:#fff;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-2);
    backdrop-filter:blur(8px);

}

.btn-ghost:hover{

    background:rgba(255,255,255,.09);
    border-color:var(--azure);

}