@import "tailwindcss";

@import url(
    "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap"
);


/* =========================================================
   HUBITBRIDGE
   GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {

    /* -----------------------------------------------------
       BRAND COLORS
       ----------------------------------------------------- */

    --primary: #2563EB;
    --secondary: #7C3AED;
    --accent: #22C55E;
    --dark:#000;


    /* -----------------------------------------------------
       BACKGROUND
       ----------------------------------------------------- */

    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --surface-alt: #F1F5F9;


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    --text: #172033;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;


    /* -----------------------------------------------------
       BORDERS
       ----------------------------------------------------- */

    --border: #E2E8F0;
    --border-strong: #CBD5E1;


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    --header-bg: rgba(255, 255, 255, 0.90);


    /* -----------------------------------------------------
       SHADOWS
       ----------------------------------------------------- */

    --shadow-header:
        0 12px 40px rgba(15, 23, 42, 0.065);

    --shadow-header-scroll:
        0 16px 48px rgba(15, 23, 42, 0.10);

    --shadow-button:
        0 10px 28px rgba(37, 99, 235, 0.18);


    /* -----------------------------------------------------
       LAYOUT
       ----------------------------------------------------- */

    --container-width: 1440px;
    --container-padding: 24px;


    /* -----------------------------------------------------
       RADIUS
       ----------------------------------------------------- */

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;


    /* -----------------------------------------------------
       MOTION
       ----------------------------------------------------- */

    --ease:
        cubic-bezier(0.22, 1, 0.36, 1);
}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


body {
    margin: 0;
    padding: 0;

    background: var(--bg);
    color: var(--text);

    font-family: "Manrope", sans-serif;

    font-size: 16px;
    line-height: 1.6;

    transition:
        background-color 0.35s ease,
        color 0.35s ease;
}


body.menu-open {
    overflow: hidden;
}


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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    color: var(--text);

    font-family: "Manrope", sans-serif;

    font-weight: 800;

    letter-spacing: -0.045em;
}


h1 {
    font-size:
        clamp(3.5rem, 7vw, 7.5rem);

    line-height: 0.94;

    letter-spacing: -0.06em;
}


h2 {
    font-size:
        clamp(2.6rem, 5vw, 5.2rem);

    line-height: 0.98;

    letter-spacing: -0.055em;
}


h3 {
    font-size:
        clamp(1.5rem, 2.5vw, 2.25rem);

    line-height: 1.08;
}


h4 {
    font-size: 1.25rem;

    line-height: 1.2;
}


h5 {
    font-size: 1.05rem;
}


h6 {
    font-size: 0.95rem;
}


p {
    margin: 0;

    color: var(--text-secondary);
}


a {
    color: inherit;

    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   TECHNICAL LABEL
   ========================================================= */

.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--text-secondary);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 0.68rem;

    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.eyebrow::before {

    content: "";

    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--accent);
}


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

.container {

    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

    margin-inline: auto;
}


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

.section {

    position: relative;

    width: 100%;

    padding-block:
        clamp(90px, 10vw, 160px);
}


/* =========================================================
   GRADIENT TEXT
   ========================================================= */

.gradient-text {

    background:
        linear-gradient(
            110deg,
            var(--primary),
            var(--secondary)
        );

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

    -webkit-text-fill-color: transparent;
}


/* =========================================================
   BUTTON
   ========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding-inline: 21px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-pill);

    font-size: 0.86rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.35s var(--ease),
        box-shadow 0.35s ease,
        background-color 0.35s ease;
}


.btn:hover {
    transform:
        translateY(-2px);
}


/* =========================================================
   FOCUS
   ========================================================= */

:focus-visible {

    outline:
        2px solid
        var(--primary);

    outline-offset: 4px;
}


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

::selection {

    background:
        var(--primary);

    color:
        #FFFFFF;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

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


::-webkit-scrollbar-track {
    background:
        var(--bg);
}


::-webkit-scrollbar-thumb {

    background:
        var(--border-strong);

    border-radius:
        999px;
}


::-webkit-scrollbar-thumb:hover {

    background:
        var(--text-muted);
}


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

@media (max-width: 768px) {

    :root {
        --container-padding: 16px;
    }


    body {
        font-size: 15px;
    }


    h1 {

        font-size:
            clamp(3rem, 14vw, 5rem);
    }


    h2 {

        font-size:
            clamp(2.4rem, 11vw, 4rem);
    }


    .section {

        padding-block:
            80px;
    }
}