/* =========================================
   DEVELOPER LAB
   ========================================= */

:root {

    --bg: #08080a;
    --bg-soft: #101014;
    --surface: #131318;
    --surface-2: #19191f;

    --text: #f5f5f7;
    --text-soft: #a7a7b0;
    --text-muted: #707079;

    --border: rgba(255, 255, 255, 0.10);

    --purple: #a78bfa;
    --blue: #60a5fa;
    --cyan: #22d3ee;
    --green: #4ade80;
    --orange: #fb923c;
    --pink: #f472b6;

    --max-width: 1380px;

    --radius: 28px;

    --ease: cubic-bezier(.22, .61, .36, 1);
}


/* =========================================
   LIGHT THEME
   ========================================= */

html.light {

    --bg: #f6f6f3;
    --bg-soft: #eeeeeb;
    --surface: #ffffff;
    --surface-2: #f0f0ed;

    --text: #111114;
    --text-soft: #55555d;
    --text-muted: #85858c;

    --border: rgba(0, 0, 0, 0.10);
}


html.light .site-header {

    background:
        rgba(255, 255, 255, 0.58);

    border-color:
        rgba(0, 0, 0, 0.08);

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.08);
}


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

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


html {
    scroll-behavior: smooth;
}


body {

    background: var(--bg);

    color: var(--text);

    font-family: "DM Sans", sans-serif;

    line-height: 1.6;

    overflow-x: hidden;

    transition:
        background .35s ease,
        color .35s ease;
}


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


button {
    font: inherit;
}


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


::selection {
    background: var(--purple);
    color: #08080a;
}


/* =========================================
   LOADER
   ========================================= */

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: grid;

    place-items: center;

    background: var(--bg);

    transition:
        opacity .6s ease,
        visibility .6s ease;
}


.page-loader.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.loader-mark {

    display: flex;

    gap: 7px;
}


.loader-mark span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--purple);

    animation:
        loaderPulse 1s infinite;
}


.loader-mark span:nth-child(2) {

    background: var(--cyan);

    animation-delay: .15s;
}


.loader-mark span:nth-child(3) {

    background: var(--orange);

    animation-delay: .3s;
}


@keyframes loaderPulse {

    0%,
    100% {
        transform: translateY(0);
        opacity: .35;
    }

    50% {
        transform: translateY(-8px);
        opacity: 1;
    }
}


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

.site-header {

    position: fixed;

    top: 22px;
    left: 50%;

    transform: translateX(-50%);

    width: min(
        calc(100% - 40px),
        1050px
    );

    height: 64px;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 10px 0 18px;

    background:
        rgba(20, 20, 25, 0.55);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 999px;

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.22);

    overflow: visible;

    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


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

.lab-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: "Space Grotesk", sans-serif;

    font-weight: 700;

    letter-spacing: -0.04em;

    font-size: 17px;

    padding-left: 2px;

    flex-shrink: 0;
}


.logo-symbol {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #08080a;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--cyan)
        );

    font-size: 12px;

    font-weight: 700;
}


.logo-text span {
    color: var(--purple);
}


/* =========================================
   DESKTOP NAVIGATION
   ========================================= */

.main-nav {

    display: flex;

    align-items: center;

    gap: 28px;

    margin-left: auto;

    margin-right: 20px;
}


.main-nav a {

    position: relative;

    color: var(--text-soft);

    font-size: 13px;

    font-weight: 500;

    white-space: nowrap;

    transition:
        color .25s ease;
}


.main-nav a:hover {
    color: var(--text);
}


.main-nav a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: var(--purple);

    transform:
        translateX(-50%);

    transition:
        width .25s ease;
}


.main-nav a:hover::after {
    width: 100%;
}


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

.header-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


.theme-button {

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.04);

    color: var(--text);

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}


.theme-button:hover {

    transform: rotate(20deg);

    background:
        rgba(167, 139, 250, 0.12);

    border-color:
        var(--purple);
}


.theme-button svg {
    width: 17px;
}


.menu-button {

    display: none;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

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

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.04);

    color: var(--text);

    cursor: pointer;
}


.menu-button span {

    display: block;

    width: 15px;
    height: 1px;

    background: var(--text);

    transition:
        transform .3s ease;
}


.menu-button.active span:first-child {

    transform:
        translateY(3px)
        rotate(45deg);
}


.menu-button.active span:last-child {

    transform:
        translateY(-3px)
        rotate(-45deg);
}


/* =========================================
   COMMON
   ========================================= */

.section-container {

    width: min(
        calc(100% - 10vw),
        var(--max-width)
    );

    margin-inline: auto;
}


.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.eyebrow::before {

  display: none;
}


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

.hero {

    min-height: 100vh;

    padding:
        160px 5vw
        90px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    align-items: center;

    gap: 7vw;

    max-width: 1600px;

    margin: auto;
}


.hero-title {

    margin-top: 32px;

    max-width: 800px;

    font-family: "Space Grotesk", sans-serif;

    font-size:
        clamp(76px, 11vw, 170px);

    line-height: .86;

    letter-spacing: -.085em;

    font-weight: 600;
}


.hero-title span {

    display: block;

    background:
        linear-gradient(
            100deg,
            var(--purple),
            var(--cyan) 48%,
            var(--orange)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.hero-bottom {

    display: flex;

    align-items: flex-end;

    gap: 50px;

    margin-top: 60px;
}


.hero-description {

    max-width: 470px;

    color: var(--text-soft);

    font-size: 17px;

    line-height: 1.8;
}


.hero-link {

    display: flex;

    align-items: center;

    gap: 13px;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.circle-arrow {

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.hero-link:hover .circle-arrow {

    background: var(--text);

    color: var(--bg);

    transform: translateY(4px);
}


.circle-arrow svg {
    width: 17px;
}


/* =========================================
   TERMINAL
   ========================================= */

.terminal-wrap {

    position: relative;

    width: 100%;

    max-width: 600px;

    justify-self: end;
}


.terminal-glow {

    position: absolute;

    width: 70%;
    height: 70%;

    right: 10%;
    top: 15%;

    background:
        radial-gradient(
            circle,
            rgba(167, 139, 250, .28),
            transparent 70%
        );

    filter: blur(45px);

    pointer-events: none;
}


.terminal {

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background: #0d0d11;

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

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.45);
}


.terminal-top {

    height: 48px;

    display: flex;

    align-items: center;

    padding: 0 17px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    background: #121217;
}


.terminal-controls {

    display: flex;

    gap: 7px;
}


.terminal-dot {

    width: 11px;
    height: 11px;

    border-radius: 50%;
}


.terminal-dot.red {
    background: #ff5f57;
}


.terminal-dot.yellow {
    background: #febc2e;
}


.terminal-dot.green {
    background: #28c840;
}


.terminal-title {

    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    color: #85858e;

    font-family: monospace;

    font-size: 11px;
}


.terminal-body {

    min-height: 380px;

    padding: 32px;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 14px;

    line-height: 2;
}


.terminal-line {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;
}


.terminal-prompt {
    color: #4ade80;
}


.terminal-symbol {
    color: #777783;
}


.terminal-path {
    color: #60a5fa;
}


.terminal-command {
    color: #f5f5f7;
}


.terminal-output {

    margin-top: 25px;

    color: #d4d4d8;
}


.terminal-indent {
    padding-left: 28px;
}


.code-purple {
    color: #c084fc;
}


.code-blue {
    color: #67e8f9;
}


.code-orange {
    color: #fb923c;
}


.code-white {
    color: #f4f4f5;
}


.terminal-status {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 25px;

    color: #71717a;

    font-size: 12px;
}


.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4ade80;

    box-shadow:
        0 0 12px #4ade80;
}


.terminal-last {

    margin-top: 20px;
}


.cursor {

    width: 8px;
    height: 18px;

    background: #a78bfa;

    animation:
        cursorBlink 1s infinite;
}


@keyframes cursorBlink {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }
}


/* =========================================
   WELCOME
   ========================================= */

.welcome-section {

    padding:
        150px 0
        170px;
}


.welcome-label {

    color: var(--purple);

    font-family: "Space Grotesk", sans-serif;

    font-weight: 600;

    font-size: 15px;
}


.welcome-content {

    display: grid;

    grid-template-columns:
        1.3fr
        .7fr;

    gap: 8vw;

    margin-top: 40px;
}


.welcome-content h2 {

    max-width: 800px;

    font-family: "Space Grotesk", sans-serif;

    font-size:
        clamp(46px, 6vw, 90px);

    line-height: .98;

    letter-spacing: -.065em;

    font-weight: 500;
}


.welcome-content h2 em {

    display: block;

    color: var(--text-muted);

    font-style: normal;
}


.welcome-text {

    color: var(--text-soft);

    font-size: 16px;

    line-height: 1.85;
}


.welcome-text p + p {

    margin-top: 22px;
}


/* =========================================
   LANGUAGES
   ========================================= */

.languages-section {

    padding:
        120px 0
        170px;

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


.section-heading {

    display: flex;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 70px;
}


.section-heading h2 {

    margin-top: 18px;

    font-family: "Space Grotesk", sans-serif;

    font-size:
        clamp(50px, 7vw, 100px);

    line-height: .9;

    letter-spacing: -.07em;
}


.section-heading h2 span {
    color: var(--text-muted);
}


.section-heading > p {

    max-width: 330px;

    align-self: flex-end;

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.8;
}


.language-layout {

    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap: 30px;
}


/* =========================================
   FEATURED LANGUAGE
   ========================================= */

.featured-language {

    position: relative;

    min-height: 580px;

    padding: 35px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-radius: var(--radius);

    background:
        linear-gradient(
            145deg,
            #211837,
            #101a2a 55%,
            #102529
        );

    border:
        1px solid
        rgba(167,139,250,.25);

    transition:
        transform .45s var(--ease),
        border-color .45s ease;
}


.featured-language::after {

    content: "C";

    position: absolute;

    right: -30px;
    bottom: -95px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 430px;

    line-height: 1;

    font-weight: 700;

    color:
        rgba(255,255,255,.035);

    pointer-events: none;
}


.featured-language:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(167,139,250,.7);
}


.featured-top {

    display: flex;

    justify-content: space-between;

    color: #b9b0d2;

    font-size: 11px;

    letter-spacing: .14em;

    font-weight: 700;
}


.featured-symbol {

    position: relative;

    z-index: 1;

    font-family: "Space Grotesk", sans-serif;

    font-size: 150px;

    line-height: .8;

    font-weight: 600;

    background:
        linear-gradient(
            135deg,
            #fff,
            #a78bfa 45%,
            #22d3ee
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.featured-info {

    position: relative;

    z-index: 2;
}


.featured-info h3 {

    font-family: "Space Grotesk", sans-serif;

    font-size: 44px;

    letter-spacing: -.05em;
}


.featured-info p {

    max-width: 290px;

    margin-top: 8px;

    color: #bbb7c6;

    line-height: 1.7;
}


.language-arrow {

    position: absolute;

    right: 30px;
    bottom: 30px;

    z-index: 3;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    transition:
        background .3s ease,
        color .3s ease;
}


.featured-language:hover
.language-arrow {

    background: white;

    color: #111;
}


/* =========================================
   LANGUAGE LIST
   ========================================= */

.language-list {

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


.language-item {

    min-height: 82px;

    display: grid;

    grid-template-columns:
        45px
        1fr
        1fr
        42px;

    align-items: center;

    gap: 20px;

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

    transition:
        padding .35s var(--ease),
        background .35s ease;
}


.language-item:hover {

    padding-left: 20px;

    background:
        var(--surface);
}


.language-index {

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 700;
}


.language-name {

    font-family: "Space Grotesk", sans-serif;

    font-size: 22px;

    font-weight: 600;

    letter-spacing: -.03em;
}


.language-description {

    color: var(--text-muted);

    font-size: 13px;
}


.language-arrow-small {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    color: var(--text-muted);

    transition:
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.language-arrow-small svg {
    width: 14px;
}


.language-item:hover
.language-arrow-small {

    color: var(--text);

    border-color:
        var(--purple);

    transform:
        rotate(45deg);
}


/* =========================================
   METHOD
   ========================================= */

.method-section {

    padding:
        170px 0;
}


.method-intro h2 {

    max-width: 850px;

    margin-top: 20px;

    font-family: "Space Grotesk", sans-serif;

    font-size:
        clamp(50px, 7vw, 100px);

    line-height: .9;

    letter-spacing: -.07em;
}


.method-intro h2 span {
    color: var(--text-muted);
}


.method-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 1px;

    margin-top: 90px;

    background:
        var(--border);

    border:
        1px solid
        var(--border);
}


.method-card {

    min-height: 330px;

    padding: 30px;

    background:
        var(--bg);

    transition:
        background .3s ease;
}


.method-card:hover {
    background: var(--surface);
}


.method-number {

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 700;
}


.method-icon {

    margin-top: 60px;

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        var(--surface);

    color: var(--purple);
}


.method-icon svg {
    width: 19px;
}


.method-card h3 {

    margin-top: 25px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 27px;

    letter-spacing: -.04em;
}


.method-card p {

    margin-top: 10px;

    color: var(--text-soft);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================
   ABOUT
   ========================================= */

.about-section {

    padding:
        160px 0;

    background:
        linear-gradient(
            120deg,
            rgba(167,139,250,.08),
            transparent 40%,
            rgba(34,211,238,.06)
        );
}


.about-layout {

    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap: 10vw;
}


.about-heading h2 {

    margin-top: 25px;

    font-family: "Space Grotesk", sans-serif;

    font-size:
        clamp(48px, 6vw, 86px);

    line-height: .93;

    letter-spacing: -.07em;
}


.about-heading h2 span {
    color: var(--purple);
}


.about-content {

    padding-top: 20px;

    color: var(--text-soft);

    font-size: 16px;

    line-height: 1.85;
}


.about-large {

    color: var(--text);

    font-size: 23px;

    line-height: 1.55;

    margin-bottom: 28px;
}


.about-content p + p {
    margin-top: 20px;
}


.about-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 40px;

    padding-bottom: 7px;

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

    color: var(--text);

    font-weight: 600;
}


.about-link svg {
    width: 16px;
}


/* =========================================
   CONTACT
   ========================================= */

.contact-section {

    padding:
        160px 5vw;

    background:
        var(--text);

    color:
        var(--bg);
}


.contact-container {

    width:
        min(
            100%,
            1380px
        );

    margin-inline:
        auto;

    display: grid;

    grid-template-columns:
        1.1fr
        .9fr;

    gap:
        10vw;
}


.contact-section .eyebrow {

    color:
        color-mix(
            in srgb,
            var(--bg) 55%,
            transparent
        );
}


.contact-section
.eyebrow::before {

    background:
        var(--purple);
}


.contact-heading h2 {

    margin-top: 25px;

    max-width: 850px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(60px, 8vw, 120px);

    line-height: .88;

    letter-spacing: -.08em;
}


.contact-heading h2 span {
    color: var(--purple);
}


.contact-content {

    padding-top: 35px;
}


.contact-content p {

    max-width: 390px;

    color:
        color-mix(
            in srgb,
            var(--bg) 65%,
            transparent
        );

    line-height: 1.8;
}


.email-link {

    display: inline-block;

    margin-top: 35px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(22px, 3vw, 38px);

    letter-spacing: -.04em;

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--bg) 25%,
            transparent
        );

    transition:
        color .25s ease;
}


.email-link:hover {
    color: var(--purple);
}


.social-links {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 45px;
}


.social-links a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 13px;

    font-weight: 700;
}


.social-links svg {
    width: 14px;
}


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

.site-footer {

    background:
        var(--bg);

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


.footer-inner {

    width:
        min(
            calc(100% - 10vw),
            var(--max-width)
        );

    min-height: 90px;

    margin-inline:
        auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color:
        var(--text-muted);

    font-size: 12px;
}


.footer-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--text);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-weight: 600;
}


.footer-symbol {
    color: var(--purple);
}


/* =========================================
   REVEAL ANIMATION
   ========================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .8s var(--ease),
        transform .8s var(--ease);
}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   LARGE TABLETS / LAPTOPS
   ========================================= */

@media (max-width: 1050px) {

    .hero {

        grid-template-columns:
            1fr;

        padding-top:
            150px;
    }


    .terminal-wrap {

        justify-self:
            start;

        max-width:
            700px;
    }


    .welcome-content,
    .about-layout {

        grid-template-columns:
            1fr;
    }


    .method-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .contact-container {

        grid-template-columns:
            1fr;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 800px) {

    /* -------------------------------------
       FLOATING MOBILE HEADER
       ------------------------------------- */

    .site-header {

        top: 14px;

        left: 50%;

        width:
            calc(100% - 28px);

        height: 60px;

        padding:
            0 8px 0 14px;

        border-radius:
            999px;

        overflow:
            visible;
    }


    /* -------------------------------------
       HIDE DESKTOP NAVIGATION
       ------------------------------------- */

    .main-nav {

        position: absolute;

        top:
            calc(100% + 10px);

        left: 0;

        width: 100%;

        margin: 0;

        padding:
            20px;

        display: flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            4px;

        background:
            rgba(18, 18, 23, 0.82);

        backdrop-filter:
            blur(26px);

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

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

        border-radius:
            22px;

        box-shadow:
            0 20px 55px
            rgba(0, 0, 0, 0.30);

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transform:
            translateY(-10px);

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .35s var(--ease);
    }


    html.light .main-nav {

        background:
            rgba(255, 255, 255, 0.82);
    }


    .main-nav.open {

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            translateY(0);
    }


    .main-nav a {

        width:
            100%;

        padding:
            11px 4px;

        font-size:
            14px;

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


    .main-nav a:hover {

        color:
            var(--text);
    }


    .main-nav a::after {

        display:
            none;
    }


    /* -------------------------------------
       MENU BUTTON
       ------------------------------------- */

    .menu-button {

        display:
            flex;
    }


    /* -------------------------------------
       HERO
       ------------------------------------- */

    .hero {

        padding-inline:
            5vw;

        gap:
            70px;
    }


    .hero-title {

        font-size:
            clamp(
                70px,
                18vw,
                125px
            );
    }


    .hero-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            30px;
    }


    /* -------------------------------------
       TERMINAL
       ------------------------------------- */

    .terminal-body {

        min-height:
            330px;

        padding:
            24px;

        font-size:
            12px;
    }


    .terminal {

        border-radius:
            18px;
    }


    /* -------------------------------------
       SECTION HEADING
       ------------------------------------- */

    .section-heading {

        flex-direction:
            column;

        gap:
            25px;
    }


    /* -------------------------------------
       LANGUAGES
       ------------------------------------- */

    .language-layout {

        grid-template-columns:
            1fr;
    }


    .featured-language {

        min-height:
            470px;
    }


    .language-item {

        grid-template-columns:
            35px
            1fr
            35px;
    }


    .language-description {

        display:
            none;
    }


    /* -------------------------------------
       FOOTER
       ------------------------------------- */

    .footer-inner {

        flex-direction:
            column;

        justify-content:
            center;

        padding:
            30px 0;
    }

}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 560px) {

    .site-header {

        top:
            12px;

        width:
            calc(100% - 24px);

        height:
            58px;
    }


    .lab-logo {

        font-size:
            16px;
    }


    .logo-symbol {

        width:
            32px;

        height:
            32px;
    }


    .theme-button,
    .menu-button {

        width:
            38px;

        height:
            38px;
    }


    .main-nav {

        top:
            calc(100% + 9px);

        padding:
            18px;
    }


    .hero {

        padding-top:
            130px;
    }


    .hero-title {

        font-size:
            clamp(
                64px,
                19vw,
                95px
            );
    }


    .terminal-body {

        min-height:
            300px;

        padding:
            20px 16px;
    }


    .terminal-title {

        display:
            none;
    }


    .welcome-section,
    .languages-section,
    .method-section,
    .about-section {

        padding-top:
            100px;

        padding-bottom:
            110px;
    }


    .section-heading h2,
    .method-intro h2 {

        font-size:
            53px;
    }


    .featured-language {

        min-height:
            400px;

        padding:
            25px;
    }


    .featured-symbol {

        font-size:
            110px;
    }


    .method-grid {

        grid-template-columns:
            1fr;
    }


    .method-card {

        min-height:
            280px;
    }


    .contact-section {

        padding:
            100px 5vw;
    }


    .contact-heading h2 {

        font-size:
            65px;
    }


    .email-link {

        word-break:
            break-word;
    }

}