:root {
    /* =========================================================
       COLORS
       ========================================================= */

    --color-bg: #f7f8f5;
    --color-bg-soft: #eef1eb;
    --color-bg-strong: #18221d;

    --color-surface: #ffffff;
    --color-surface-soft: #f1f3ef;

    --color-text: #18221d;
    --color-text-soft: #5f6b64;
    --color-text-muted: #7b857f;
    --color-text-inverse: #ffffff;

    --color-border: #dce2dc;
    --color-border-strong: #c8d1ca;

    --color-primary: #376b52;
    --color-primary-strong: #25513c;
    --color-primary-soft: #dce9e1;

    --color-accent: #b6d2bf;
    --color-accent-soft: #e7f0ea;

    --color-shadow: rgba(24, 34, 29, 0.08);
    --color-shadow-strong: rgba(24, 34, 29, 0.14);

    --color-line: rgba(55, 107, 82, 0.24);

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

    --font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-size-base: 16px;

    --line-height-body: 1.65;
    --line-height-heading: 1.08;

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

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

    --section-padding: 112px;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;

    --transition-fast: 180ms ease;
    --transition-base: 280ms ease;
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

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

    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);

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

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

a {
    color: inherit;
}

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


/* =========================================================
   GLOBAL
   ========================================================= */

.container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );
    margin-inline: auto;
}

section {
    position: relative;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    line-height: var(--line-height-heading);
}

h1 {
    margin-bottom: 32px;

    font-size: clamp(3rem, 7vw, 6.8rem);
    font-weight: 650;
    letter-spacing: -0.055em;
}

h2 {
    margin-bottom: 24px;

    font-size: clamp(2.4rem, 5vw, 4.7rem);
    font-weight: 620;
    letter-spacing: -0.045em;
}

h3 {
    margin-bottom: 18px;

    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 620;
    letter-spacing: -0.025em;
}

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

::selection {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;

    border-bottom: 1px solid var(--color-border);

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

.site-header__inner {
    display: flex;
    min-height: 76px;

    align-items: center;
    justify-content: space-between;

    gap: 32px;
}

.site-brand {
    display: inline-flex;
    align-items: baseline;

    color: var(--color-text);

    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 680;
    letter-spacing: -0.035em;
}

.site-brand__registered {
    margin-left: 1px;

    font-size: 0.58em;
    vertical-align: super;
}

.site-brand__section {
    margin-left: 10px;

    color: var(--color-text-muted);

    font-size: 0.72em;
    font-weight: 500;
    letter-spacing: -0.015em;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.site-nav a {
    color: var(--color-text-soft);

    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 520;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.site-nav a:hover {
    color: var(--color-primary);
}


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

.button {
    display: inline-flex;
    min-height: 52px;
    padding: 0 24px;

    align-items: center;
    justify-content: center;

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    text-decoration: none;
    font-weight: 600;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

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

.button--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.button--primary:hover {
    background: var(--color-primary-strong);
}

.text-link {
    display: inline-flex;
    margin-top: 10px;

    color: var(--color-primary);

    text-decoration: none;
    font-weight: 620;
}

.text-link::after {
    margin-left: 8px;

    content: "→";

    transition: transform var(--transition-fast);
}

.text-link:hover::after {
    transform: translateX(4px);
}


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

.section-heading {
    max-width: 760px;
    margin-bottom: 64px;
}

.section-heading__eyebrow,
.hero__eyebrow,
.final-cta__eyebrow {
    margin-bottom: 18px;

    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-heading p:last-child {
    max-width: 680px;

    font-size: 1.1rem;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    min-height: calc(100vh - 76px);
    padding: 120px 0 110px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.hero::before {
    position: absolute;
    top: -220px;
    right: -160px;

    width: 680px;
    height: 680px;

    border-radius: 50%;

    background: var(--color-primary-soft);

    content: "";

    opacity: 0.55;

    filter: blur(2px);
}

.hero::after {
    position: absolute;
    right: 18%;
    bottom: -220px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: var(--color-accent-soft);

    content: "";

    opacity: 0.8;
}

.hero__inner {
    position: relative;
    z-index: 2;
}

.hero__title {
    max-width: 960px;
}

.hero__description {
    max-width: 720px;
    margin-bottom: 38px;

    font-size: clamp(1.15rem, 2vw, 1.35rem);
}


/* =========================================================
   ECOSYSTEM
   ========================================================= */

.ecosystem {
    padding: var(--section-padding) 0;

    background: var(--color-surface);
}

.ecosystem-map {
    position: relative;

    min-height: 640px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    background:
        radial-gradient(
            circle at center,
            var(--color-accent-soft),
            var(--color-surface) 46%
        );

    overflow: hidden;
}

.ecosystem-map::before,
.ecosystem-map::after {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 62%;
    height: 62%;

    border: 1px solid var(--color-line);
    border-radius: 50%;

    content: "";

    transform: translate(-50%, -50%);
}

.ecosystem-map::after {
    width: 38%;
    height: 38%;
}

.ecosystem-node {
    position: absolute;

    display: flex;
    width: 220px;
    min-height: 126px;
    padding: 24px;

    flex-direction: column;
    justify-content: center;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    box-shadow: 0 18px 50px var(--color-shadow);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.ecosystem-node:hover {
    transform: translateY(-5px);

    box-shadow: 0 24px 60px var(--color-shadow-strong);
}

.ecosystem-node__name {
    margin-bottom: 7px;

    color: var(--color-text);

    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.025em;
}

.ecosystem-node__description {
    color: var(--color-text-muted);

    font-size: 0.88rem;
}

.ecosystem-node--core {
    top: 50%;
    left: 50%;

    width: 250px;
    min-height: 160px;

    border-color: var(--color-primary);

    background: var(--color-primary);
    color: var(--color-text-inverse);

    transform: translate(-50%, -50%);
}

.ecosystem-node--core:hover {
    transform: translate(-50%, calc(-50% - 5px));
}

.ecosystem-node--core .ecosystem-node__name {
    color: var(--color-text-inverse);

    font-size: 1.65rem;
}

.ecosystem-node--core .ecosystem-node__description {
    color: var(--color-primary-soft);
}

.ecosystem-node--taxonomy {
    top: 55px;
    left: 50%;

    transform: translateX(-50%);
}

.ecosystem-node--taxonomy:hover {
    transform: translate(-50%, -5px);
}

.ecosystem-node--database {
    bottom: 55px;
    left: 50%;

    transform: translateX(-50%);
}

.ecosystem-node--database:hover {
    transform: translate(-50%, -5px);
}

.ecosystem-node--catalogue {
    top: 50%;
    left: 70px;

    transform: translateY(-50%);
}

.ecosystem-node--catalogue:hover {
    transform: translateY(calc(-50% - 5px));
}

.ecosystem-node--integrations {
    top: 50%;
    right: 70px;

    transform: translateY(-50%);
}

.ecosystem-node--integrations:hover {
    transform: translateY(calc(-50% - 5px));
}


/* =========================================================
   MENTA
   ========================================================= */

.menta {
    padding: 140px 0;

    background: var(--color-bg-strong);
    color: var(--color-text-inverse);
}

.menta__inner {
    display: grid;
    grid-template-columns: minmax(0, 760px) 1fr;
    gap: 80px;
}

.menta h2 {
    color: var(--color-text-inverse);
}

.menta p {
    color: var(--color-accent);
}

.menta__lead {
    max-width: 680px;

    color: var(--color-text-inverse) !important;

    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.menta .text-link {
    color: var(--color-accent);
}


/* =========================================================
   COMPONENTS
   ========================================================= */

.components {
    padding: var(--section-padding) 0;

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

.component-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.component-card {
    min-height: 290px;
    padding: 38px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.component-card:hover {
    transform: translateY(-5px);

    border-color: var(--color-border-strong);

    box-shadow: 0 24px 60px var(--color-shadow);
}

.component-card__type {
    margin-bottom: 38px;

    color: var(--color-primary);

    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.component-card p:not(.component-card__type) {
    max-width: 480px;
}

.component-card a {
    display: inline-flex;
    margin-top: 8px;

    color: var(--color-primary);

    text-decoration: none;
    font-weight: 620;
}

.component-card a::after {
    margin-left: 8px;

    content: "→";

    transition: transform var(--transition-fast);
}

.component-card a:hover::after {
    transform: translateX(4px);
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta {
    padding: 150px 0;

    background: var(--color-primary-soft);
}

.final-cta__inner {
    max-width: 900px;
}

.final-cta h2 {
    max-width: 760px;
}

.final-cta p:not(.final-cta__eyebrow) {
    max-width: 660px;
    margin-bottom: 34px;

    font-size: 1.15rem;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    border-top: 1px solid var(--color-border);

    background: var(--color-surface);
}

.site-footer__inner {
    display: flex;
    min-height: 90px;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color: var(--color-text-muted);

    font-size: 0.86rem;
}

.site-footer__version {
    font-variant-numeric: tabular-nums;
}


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

@media (max-width: 960px) {

    :root {
        --section-padding: 88px;
    }

    .site-nav {
        display: none;
    }

    .hero {
        min-height: auto;
        padding: 100px 0 90px;
    }

    .ecosystem-map {
        min-height: auto;
        padding: 40px;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;

        background: var(--color-surface-soft);
    }

    .ecosystem-map::before,
    .ecosystem-map::after {
        display: none;
    }

    .ecosystem-node {
        position: static;

        width: auto;
        min-height: 140px;

        transform: none;
    }

    .ecosystem-node:hover {
        transform: translateY(-4px);
    }

    .ecosystem-node--core {
        grid-column: 1 / -1;

        width: auto;
        min-height: 160px;

        transform: none;
    }

    .ecosystem-node--core:hover {
        transform: translateY(-4px);
    }

    .menta__inner {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 720px) {

    :root {
        --container-padding: 18px;
        --section-padding: 72px;
    }

    .site-header__inner {
        min-height: 68px;
    }

    .site-brand {
        font-size: 1.2rem;
    }

    .hero {
        padding: 82px 0 72px;
    }

    .hero::before {
        top: -180px;
        right: -280px;
    }

    .ecosystem-map {
        padding: 20px;

        grid-template-columns: 1fr;
    }

    .ecosystem-node--core {
        grid-column: auto;
    }

    .component-grid {
        grid-template-columns: 1fr;
    }

    .component-card {
        min-height: auto;
        padding: 30px;
    }

    .menta {
        padding: 100px 0;
    }

    .final-cta {
        padding: 100px 0;
    }

    .site-footer__inner {
        min-height: 78px;

        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 4px;
    }
}