/* BASE & SWISS TYPOGRAPHY */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection { background: #FFFFFF; color: #000000; }
/* WEBGL CANVAS */
#webgl-hero {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}
/* TYPOGRAPHY */
.text-h1 { font-size: clamp(3.5rem, 8vw, 8rem); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; }
.text-h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.text-h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.text-body { font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.6; font-weight: 400; color: #A1A1AA; }
/* CUSTOM BUTTON - Asymmetric Cut with Sweep */
.btn-editorial {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2.5rem;
    background: #FFFFFF;
    color: #000000;
    font-family: "Geist Sans", sans-serif;
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 500;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%);
    overflow: hidden;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}
.btn-editorial::before {
    content: '';
    position: absolute;
    top: 100%; left: 0; width: 100%; height: 100%;
    background: #101010;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}
.btn-editorial:hover { color: #FFFFFF; }
.btn-editorial:hover::before { transform: translateY(-100%); }
.btn-editorial .icon-arrow { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-editorial:hover .icon-arrow { transform: translate(4px, -4px); }
/* SECONDARY BUTTON */
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: #FFFFFF;
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 500;
    position: relative;
}
.btn-outline::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 1px;
    background: rgba(255,255,255,0.2);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-outline:hover::after { transform: scaleX(0); transform-origin: left; }
/* BADGES */
.editorial-badge {
    font-family: 'Geist Mono', monospace;
    font-size: clamp(0.65rem, 0.8vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #A1A1AA;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.editorial-badge::before {
    content: '';
    display: block;
    width: 1.5rem;
    height: 1px;
    background: #A1A1AA;
}
/* MICRO-INTERACTIONS & EFFECTS */
.glass-panel {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.hover-lift {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s;
}
.hover-lift:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.03);
}
/* REVEAL ANIMATIONS */
.reveal-up { opacity: 0; transform: translateY(2rem); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 150ms; }
.delay-2 { transition-delay: 300ms; }
/* UTILS */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* GRID BORDERS (Swiss style) */
.swiss-grid {
    display: grid;
    gap: 1px;
    background-color: #27272A; /* borderline color */
    border: 1px solid #27272A;
}
.swiss-grid > * { background-color: #050505; }

/* PROSE EDITORIAL FOR DOCS */
.prose-editorial h1 { @apply text-h1 font-medium mb-6; }
.prose-editorial h2 { @apply text-h2 font-medium mb-6 text-white; }
.prose-editorial h3 { @apply text-h3 font-medium mb-4 text-white; }
.prose-editorial p { @apply text-body mb-6 text-[#A1A1AA] leading-relaxed; }
.prose-editorial a { @apply text-brand border-b border-brand/30 hover:border-brand transition-colors; }
.prose-editorial code { @apply font-mono text-[0.85em] bg-white/10 px-1 py-0.5 rounded text-white; }
.prose-editorial pre { @apply bg-[#141414] border border-white/10 rounded-lg p-6 overflow-x-auto mb-8; }
.prose-editorial pre code { @apply bg-transparent p-0 text-sm; }
.prose-editorial ul { @apply list-disc list-inside mb-6; }
.prose-editorial li::marker { @apply text-brand; }
.prose-editorial table { @apply w-full text-left border-collapse border border-white/10 rounded-lg overflow-hidden mb-8; }
.prose-editorial th { @apply p-4 bg-white/5 border-b border-white/10 font-mono text-xs uppercase tracking-widest text-[#A1A1AA]; }
.prose-editorial td { @apply p-4 border-b border-white/10 text-body text-white; }