/* ==========================================================================
   KTK Designed - Base Typography & Layout
   ========================================================================== */

/* Layout Containers */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--space-xl) 0;
    position: relative;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.title-hero {
    font-family: var(--font-heading);
    font-size: clamp(6rem, 15vw, 12rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 0.8;
}

.title-hero-outline {
    font-family: var(--font-heading);
    font-size: clamp(6rem, 15vw, 12rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.8);
}

.title-section {
    font-family: var(--font-section);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
}

.text-meta {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.text-lead {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: var(--color-text-secondary);
    max-width: 800px;
}

/* Background Effects */
.bg-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background: radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.08), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.05), transparent 25%);
}

.scan-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(0, 0, 0, 0.1));
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.4;
}