/* ==========================================================================
   STRICT GEOMETRY RESET & BASE UTILITIES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-deep);
    max-width: 100vw;
    overflow-x: hidden;
}

body.theme-okx {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.68;
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

.container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-bright);
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.font-mono, .mono-label, .mono-brand, .mono-sub, .mono-copy {
    font-family: var(--font-mono);
}

.font-bold {
    font-weight: 700;
}

.text-bright { color: var(--text-bright); }
.text-dim { color: var(--text-dim); }
.text-green { color: var(--neon-green); }
.text-pink { color: var(--neon-pink); }
.text-cyan { color: var(--neon-cyan); }
.text-purple { color: #D866FF; }
.text-gold { color: #FFD700; }

.text-center {
    text-align: center;
}

.okx-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

.okx-section, .okx-hero-section {
    padding: 95px 0;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-main);
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 36px 36px;
    overflow: hidden;
}

.section-bg-alt {
    background-color: var(--bg-alt);
}

/* Animations */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.blink {
    animation: blink 1.5s infinite;
}

/* Responsive Reset Utilities */
body.menu-open {
    overflow: hidden !important;
}

/* Touch-friendly input styling to prevent iOS auto-zoom */
input, textarea, select, button {
    font-size: 16px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.25rem;
    }

    .hidden-mobile {
        display: none !important;
    }
    
    .okx-section, .okx-hero-section {
        padding: 55px 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .okx-section, .okx-hero-section {
        padding: 45px 0;
    }

    h1, h2, h3 {
        word-break: break-word;
    }
}