* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Daeojamjil';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil6ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

html, body {
    width: 100%;
    height: 100%;
}

html {
    scroll-snap-type: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

.hero,
.section {
    scroll-snap-align: start;
}

body {
    font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    background: #000;
}

header {
    height: 5%;
    display: flex;
    background-color: #000;
    width: 100%;
    position: fixed;
    z-index: 10;
}

header h1 {
    margin-left: 10%;
    height: 100%;
}

header h1 a {
    text-decoration: none;
    display: flex;
    height: 100%;
    align-items: center;
}

header h1 a img {
    height: 65%;
    width: auto;
}

header h1 a span {
    margin: 10px;
    font-family: 'Daeojamjil';
    color: #FBFCF6;
    line-height: 1;
    font-size: 16px;
}

.header-nav {
    margin-left: auto;
    margin-right: 10%;
    display: flex;
    align-items: center;
    gap: 1.8em;
}

.header-nav a {
    font-family: 'Daeojamjil';
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7d7e7c;
    text-decoration: none;
    transition: color .3s ease;
}

.header-nav a:hover,
.header-nav a:focus-visible {
    color: #FBFCF6;
}

main {
    background: #000;
}

.hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
}

.penrose-triangle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
}

.tagline {
    font-family: 'Daeojamjil';
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    color: #7d7e7c;
}

.tagline-top {
    position: absolute;
    top: 13%;
    left: 10%;
    font-size: clamp(22px, 3.4vw, 48px);
}

.tagline-bottom {
    position: absolute;
    bottom: 13%;
    right: 10%;
    font-size: clamp(18px, 2.4vw, 34px);
}

.hero-intro {
    position: absolute;
    left: 10%;
    bottom: 13%;
    max-width: 18em;
}

.hero-kicker {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7d7e7c;
}

.hero-lead {
    margin-top: .9em;
    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.75;
    color: #a8a9a5;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    margin-top: 1.4em;
    padding-bottom: .4em;
    border-bottom: 1px solid #7d7e7c;
    font-family: 'Daeojamjil';
    font-size: 13px;
    color: #FBFCF6;
    text-decoration: none;
    transition: gap .3s ease, border-color .3s ease;
}

.hero-cta:hover,
.hero-cta:focus-visible {
    gap: 1em;
    border-color: #FBFCF6;
}

.tagline span {
    color: #7d7e7c;
    transition: color .5s ease;
}

.tagline .rest,
.revealed .tagline .reveal {
    color: #FBFCF6;
}

.revealed .tagline .rest {
    color: #7d7e7c;
}

.tagline::after {
    content: '';
    display: inline-block;
    width: .07em;
    height: .9em;
    margin-left: .08em;
    vertical-align: -.1em;
    background: #7d7e7c;
    animation: caret 1.1s step-end infinite;
}

@keyframes caret {
    0% { opacity: 1; }
    50% { opacity: 0; }
}

.eyebrow {
    font-family: 'Daeojamjil';
    font-size: clamp(12px, 1.2vw, 15px);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #7d7e7c;
}

.page-lead {
    margin-top: 1.4em;
    max-width: 32em;
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.8;
    color: #a8a9a5;
}

.products {
    margin-top: 6vh;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: #1f1f1f;
    border: 1px solid #1f1f1f;
}

.product {
    background: #000;
    padding: 2.6em 1.9em 2.8em;
    transition: background .4s ease;
}

.product:hover {
    background: #0b0b0b;
}

.product-no {
    font-family: 'Daeojamjil';
    font-size: 13px;
    letter-spacing: .1em;
    color: #7d7e7c;
}

.product-name {
    margin-top: 1.5em;
    font-family: 'Daeojamjil';
    font-weight: 800;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
    color: #7d7e7c;
    transition: color .4s ease;
}

.product:hover .product-name {
    color: #FBFCF6;
}

.product-desc {
    margin-top: 1em;
    font-size: 14px;
    line-height: 1.8;
    color: #a0a19e;
}

.principles {
    margin-top: 6vh;
    list-style: none;
    border-top: 1px solid #1f1f1f;
}

.principle {
    display: grid;
    grid-template-columns: 4em minmax(0, 1fr) minmax(0, 1.6fr);
    align-items: baseline;
    column-gap: 1.9em;
    padding: 2.2em 0;
    border-bottom: 1px solid #1f1f1f;
}

.principle-no {
    font-family: 'Daeojamjil';
    font-size: 13px;
    letter-spacing: .1em;
    color: #7d7e7c;
}

.principle-name {
    font-family: 'Daeojamjil';
    font-weight: 800;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.2;
    color: #7d7e7c;
    transition: color .4s ease;
}

.principle:hover .principle-name {
    color: #FBFCF6;
}

.principle-desc {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.8;
    color: #a0a19e;
}

@media (max-width: 720px) {
    .principle {
        grid-template-columns: 3em minmax(0, 1fr);
    }

    .principle-desc {
        grid-column: 2;
        margin-top: .6em;
    }
}

.contact-link {
    margin-top: 6vh;
    align-self: flex-start;
    display: flex;
    color: #7d7e7c;
    transition: color .4s ease;
}

.contact-link svg {
    width: clamp(44px, 4.4vw, 64px);
    height: auto;
    fill: currentColor;
}

.contact-link:hover,
.contact-link:focus-visible {
    color: #FBFCF6;
}

.section {
    box-sizing: border-box;
    min-height: 100svh;
    padding: 16vh 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-title {
    margin-top: .35em;
    font-family: 'Daeojamjil';
    font-weight: 800;
    font-size: clamp(28px, 4.4vw, 60px);
    line-height: 1.35;
    color: #FBFCF6;
}

@media (prefers-reduced-motion: reduce) {
    .tagline::after {
        animation: none;
    }
}

.section-code {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.code-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: min(34%, 780px);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(10px, .95vw, 13px);
    line-height: 2;
    color: #7d7e7c;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    pointer-events: auto;
    user-select: none;
}

.code-bg::-webkit-scrollbar {
    display: none;
}

.code-bg code {
    display: block;
    font: inherit;
}

.code-muted {
    -webkit-mask-image: linear-gradient(to left, #000 15%, transparent 85%);
    mask-image: linear-gradient(to left, #000 15%, transparent 85%);
}

.code-interactive {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: transparent;
}

.code-token {
    --token-color: #d4d4d4;
}

.code-token-keyword,
.code-token-preprocessor { --token-color: #c586c0; }
.code-token-literal,
.code-token-declaration,
.code-token-builtin { --token-color: #569cd6; }
.code-token-macro,
.code-token-constant { --token-color: #4fc1ff; }
.code-token-label { --token-color: #c8c8c8; }
.code-token-variable,
.code-token-property { --token-color: #9cdcfe; }
.code-token-function { --token-color: #dcdcaa; }
.code-token-type { --token-color: #4ec9b0; }
.code-token-number { --token-color: #b5cea8; }
.code-token-string { --token-color: #ce9178; }
.code-token-comment { --token-color: #6a9955; }

.code-token.is-pointed {
    color: var(--token-color);
}

.footer {
    scroll-snap-align: end;
    display: flex;
    flex-direction: column;
    gap: 6vh;
    padding: 8vh 10% 5vh;
    border-top: 1px solid #1f1f1f;
    background: #000;
}

.footer-top,
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5em 3em;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.footer-logo img {
    height: 28px;
    width: auto;
}

.footer-logo span {
    font-family: 'Daeojamjil';
    font-size: 20px;
    line-height: 1;
    color: #FBFCF6;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .8em 2.2em;
    list-style: none;
}

.footer-nav a {
    font-family: 'Daeojamjil';
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7d7e7c;
    text-decoration: none;
    transition: color .4s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: #FBFCF6;
}

.footer-bottom {
    padding-top: 2.4em;
    border-top: 1px solid #1f1f1f;
    font-size: 13px;
    color: #7d7e7c;
}

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
    html {
        scroll-snap-type: y mandatory;
    }
}

@media (max-width: 720px) {
    .header-nav {
        display: none;
    }

    .hero-intro {
        left: 8%;
        bottom: 20%;
    }

    .tagline-top {
        left: 8%;
    }

    .tagline-bottom {
        right: 8%;
    }
}