:root {
    --blue:#007aff;
    --blue-active:#0068d8;
    --blue-bright:#0a84ff;
    --cyan:#64d2ff;

    --label:#f5f5f7;
    --label-secondary:rgba(235,235,245,.64);
    --label-tertiary:rgba(235,235,245,.38);
    --label-quaternary:rgba(235,235,245,.22);

    --bg:#000;
    --bg-raised:#0b0b0d;
    --bg-elevated:#111114;
    --bg-solid:#1c1c1e;

    --fill-thick:rgba(120,120,128,.34);
    --fill-medium:rgba(120,120,128,.24);
    --fill-thin:rgba(120,120,128,.16);

    --separator:rgba(255,255,255,.09);
    --separator-strong:rgba(255,255,255,.15);

    --material-nav:rgba(25,25,28,.72);
    --material-nav-strong:rgba(25,25,28,.87);

    --font:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "SF Pro Display",
        "Helvetica Neue",
        "Segoe UI",
        system-ui,
        sans-serif;

    --font-mono:
        "SF Mono",
        ui-monospace,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    --weight-regular:400;
    --weight-medium:500;
    --weight-semibold:600;
    --weight-bold:700;

    --tracking-display:-.048em;
    --tracking-title:-.032em;
    --tracking-heading:-.022em;
    --tracking-ui:-.014em;
    --tracking-body:0;
    --tracking-small:.01em;

    --ease-out:cubic-bezier(.23,1,.32,1);
    --ease-ios:cubic-bezier(.32,.72,0,1);
    --ease-snappy:cubic-bezier(.4,0,.2,1);

    --instant:100ms;
    --fast:200ms;
    --base:300ms;

    --r-small:8px;
    --r-medium:12px;
    --r-large:18px;
    --r-xl:24px;
    --r-2xl:30px;
    --r-pill:999px;

    --shell:74rem;
    --shell-wide:82rem;

    --side:clamp(1.5rem,4vw,4rem);

    --shadow-glass:
        0 1px 2px rgba(0,0,0,.12),
        0 10px 30px rgba(0,0,0,.22),
        0 28px 80px rgba(0,0,0,.28);
}


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


html {
    background:#000;
    color-scheme:dark;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-behavior:smooth;
}


body {
    margin:0;
    min-width:651px;
    min-height:100vh;

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

    font-family:var(--font);
    font-size:1rem;
    line-height:1.45;
    font-weight:var(--weight-regular);
    letter-spacing:var(--tracking-body);

    font-optical-sizing:auto;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

    overflow-x:hidden;
}


body,
button,
input,
textarea,
select { font-family:var(--font); }


button,
a { font:inherit; }


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


button {
    border:0;
    padding:0;
}


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


p,
h1,
h2,
h3,
h4 { margin-block-start:0; }


::selection {
    background:rgba(0,122,255,.28);
    color:#fff;
}


:focus-visible {
    outline:3px solid rgba(10,132,255,.52);
    outline-offset:3px;
}


a,
button {
    -webkit-tap-highlight-color:transparent;
}


main {
    position:relative;
    display:block;
}


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


.eyebrow {
    margin:0;

    color:var(--cyan);
    font-size:.72rem;
    line-height:1.25;
    font-weight:var(--weight-semibold);
    letter-spacing:.06em;
}


.button {
    min-height:48px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;

    padding:0 1.25rem;

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

    font-size:.93rem;
    line-height:1;
    font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-ui);

    cursor:pointer;

    transform:translateZ(0);

    transition:
        transform var(--instant) var(--ease-out),
        filter var(--instant) var(--ease-out),
        background var(--fast) var(--ease-out),
        color var(--fast) var(--ease-out);
}


.button:active {
    transform:scale(.97) translateZ(0);
}


.button-primary {
    background:var(--blue);
    color:#fff;
}


.button-primary:hover { background:var(--blue-bright); }

.button-primary:active {
    background:var(--blue);
    filter:brightness(.91);
}


.button-secondary {
    color:var(--label);

    background:rgba(255,255,255,.095);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 0 0 .5px rgba(255,255,255,.15);
}


.button-secondary:hover {
    background:rgba(255,255,255,.14);
}


.button-secondary:active {
    background:rgba(255,255,255,.10);
    filter:brightness(.9);
}


.button-light {
    background:#f5f5f7;
    color:#111114;
}


.button-light:hover { background:#fff; }

.button-light:active { filter:brightness(.9); }


.text-link {
    min-height:44px;

    display:inline-flex;
    align-items:center;
    gap:.42rem;

    margin-top:1.6rem;

    color:var(--label);

    font-size:.95rem;
    line-height:1.3;
    font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-ui);
}


.text-link span {
    display:inline-block;
    color:var(--blue-bright);

    transform:translate3d(0,0,0);

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


.text-link:hover span {
    transform:translate3d(.24rem,0,0);
}


.text-link:active {
    opacity:.72;
}


.site-header {
    position:fixed;
    z-index:1000;

    top:0;
    left:0;
    right:0;

    padding:
        max(.75rem,env(safe-area-inset-top))
        1rem
        0;

    pointer-events:none;
}


.site-header::after {
    content:"";

    position:absolute;
    z-index:-1;

    top:0;
    left:0;
    right:0;

    height:6rem;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.38),
        rgba(0,0,0,.10) 55%,
        transparent
    );

    -webkit-mask-image:linear-gradient(
        to bottom,
        #000 0%,
        rgba(0,0,0,.85) 52%,
        transparent 100%
    );

    mask-image:linear-gradient(
        to bottom,
        #000 0%,
        rgba(0,0,0,.85) 52%,
        transparent 100%
    );

    opacity:0;
    pointer-events:none;

    transition:opacity var(--fast) var(--ease-out);
}


.nav-shell {
    width:min(72rem,calc(100% - 1rem));
    min-height:3.55rem;

    margin-inline:auto;
    padding:.42rem .5rem .42rem 1.15rem;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:1.4rem;

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

    background:var(--material-nav);

    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        inset 0 0 0 .5px rgba(255,255,255,.05),
        0 0 0 .5px rgba(0,0,0,.58),
        var(--shadow-glass);

    -webkit-corner-smoothing:60%;

    pointer-events:auto;

    transform:translate3d(0,0,0);

    transition:
        transform 220ms var(--ease-out),
        background 220ms var(--ease-out),
        box-shadow 220ms var(--ease-out);
}


.site-header.scrolled::after,
.site-header.is-scrolled::after { opacity:1; }


.site-header.scrolled .nav-shell,
.site-header.is-scrolled .nav-shell {
    background:var(--material-nav-strong);

    transform:scale(.975) translate3d(0,0,0);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 0 0 .5px rgba(255,255,255,.055),
        0 0 0 .5px rgba(0,0,0,.64),
        0 10px 34px rgba(0,0,0,.40);
}


.brand {
    min-height:44px;

    display:inline-flex;
    align-items:center;

    color:var(--label);

    font-size:1.05rem;
    line-height:1;
    font-weight:650;
    letter-spacing:-.018em;

    white-space:nowrap;
}


.brand span { color:var(--blue-bright); }


.main-nav {
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(.2rem,1.2vw,.8rem);
}


.main-nav a {
    min-height:44px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 .62rem;

    color:rgba(245,245,247,.62);

    font-size:.78rem;
    line-height:1;
    font-weight:var(--weight-medium);
    letter-spacing:var(--tracking-small);

    white-space:nowrap;

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


.main-nav a:hover { color:#fff; }

.main-nav a:active { opacity:.56; }


.nav-right {
    display:flex;
    align-items:center;
    gap:.22rem;
}


.nav-contact,
.nav-login {
    min-height:44px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    white-space:nowrap;

    font-size:.79rem;
    line-height:1;
    font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-ui);

    transition:
        transform var(--instant) var(--ease-out),
        opacity var(--instant) var(--ease-out),
        background var(--fast) var(--ease-out),
        filter var(--instant) var(--ease-out);
}


.nav-contact {
    padding:0 .82rem;
    color:rgba(245,245,247,.70);
}


.nav-contact:hover { color:#fff; }

.nav-contact:active {
    opacity:.58;
    transform:scale(.97);
}


.nav-login {
    padding:0 1rem;

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

    background:var(--blue);
    color:#fff;
}


.nav-login:hover { background:var(--blue-bright); }

.nav-login:active {
    transform:scale(.96);
    filter:brightness(.9);
}


.site-footer {
    width:min(var(--shell),calc(100% - (var(--side) * 2)));

    margin:0 auto;
    padding:5rem 0 max(2rem,env(safe-area-inset-bottom));

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


.footer-top {
    display:grid;
    grid-template-columns:minmax(15rem,.8fr) minmax(28rem,1fr);
    gap:clamp(5rem,10vw,10rem);

    padding-top:2.5rem;

    border-top:.5px solid var(--separator);
}


.footer-brand-block {
    min-width:0;
}


.footer-brand {
    width:fit-content;

    font-size:1.15rem;
}


.footer-brand-block p {
    max-width:19rem;

    margin:1rem 0 0;

    color:var(--label-secondary);

    font-size:.88rem;
    line-height:1.5;
    letter-spacing:var(--tracking-body);
}


.footer-email {
    min-height:44px;

    display:inline-flex;
    align-items:center;

    margin-top:.55rem;

    color:var(--label);

    font-size:.88rem;
    line-height:1.3;
    font-weight:var(--weight-medium);
    letter-spacing:var(--tracking-body);

    transition:opacity var(--instant) var(--ease-out);
}


.footer-email:hover { opacity:.72; }
.footer-email:active { opacity:.5; }


.footer-links {
    display:grid;
    grid-template-columns:repeat(3,minmax(8rem,1fr));
    gap:clamp(2rem,5vw,5rem);
}


.footer-links > div {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}


.footer-links strong {
    margin-bottom:.72rem;

    color:var(--label);

    font-size:.72rem;
    line-height:1.2;
    font-weight:var(--weight-semibold);
    letter-spacing:.025em;
}


.footer-links a {
    min-height:34px;

    display:inline-flex;
    align-items:center;

    color:var(--label-secondary);

    font-size:.8rem;
    line-height:1.3;
    letter-spacing:var(--tracking-small);

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


.footer-links a:hover { color:var(--label); }

.footer-links a:active { opacity:.5; }


.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;

    margin-top:4rem;
    padding-top:1.2rem;

    border-top:.5px solid rgba(255,255,255,.065);

    color:var(--label-tertiary);

    font-size:.7rem;
    line-height:1.4;
    letter-spacing:var(--tracking-small);
}


.footer-bottom p { margin:0; }


@media (max-width:1040px) {
    .nav-shell {
        width:min(56rem,calc(100% - .7rem));
        gap:.65rem;
        padding-left:1rem;
    }

    .main-nav { gap:0; }

    .main-nav a {
        padding-inline:.46rem;
        font-size:.74rem;
    }

    .nav-contact { display:none; }

    .footer-top {
        grid-template-columns:minmax(13rem,.65fr) minmax(26rem,1fr);
        gap:4rem;
    }
}


@media (max-width:800px) {
    :root { --side:1.4rem; }

    .nav-shell {
        width:calc(100% - .5rem);
        grid-template-columns:auto 1fr auto;
    }

    .main-nav a {
        padding-inline:.32rem;
        font-size:.69rem;
    }

    .nav-login {
        padding-inline:.75rem;
        font-size:.72rem;
    }

    .footer-top {
        grid-template-columns:1fr;
        gap:3rem;
    }

    .footer-links {
        max-width:32rem;
    }
}


@supports not (
    (backdrop-filter:blur(1px))
    or
    (-webkit-backdrop-filter:blur(1px))
) {
    .nav-shell {
        background:#1c1c1e;
    }

    .site-header.scrolled .nav-shell,
    .site-header.is-scrolled .nav-shell {
        background:#1c1c1e;
    }
}


@media (prefers-reduced-transparency:reduce) {
    .nav-shell,
    .site-header.scrolled .nav-shell,
    .site-header.is-scrolled .nav-shell {
        background:#1c1c1e;

        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
}


@media (prefers-contrast:more) {
    :root {
        --label-secondary:rgba(245,245,247,.82);
        --label-tertiary:rgba(245,245,247,.62);
    }

    .nav-shell {
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.48),
            0 10px 34px rgba(0,0,0,.45);
    }

    .button-secondary {
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.44);
    }

    .footer-top,
    .footer-bottom {
        border-color:rgba(255,255,255,.30);
    }
}


@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }

    *,
    *::before,
    *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
        transition-delay:0ms !important;

        scroll-behavior:auto !important;
    }

    .button:active,
    .nav-contact:active,
    .nav-login:active,
    .site-header.scrolled .nav-shell,
    .site-header.is-scrolled .nav-shell {
        transform:none;
    }
}