* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    background-image: var(--radial-glow-1), var(--radial-glow-2);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

section {
    position: relative;
    padding: 80px 0;
}

@media (min-width: 768px) {
    section { padding: 120px 0; }
}

/* Flexible Container Rules preventing squeeze bugs */
.hero, .products-section, .about-section, .footer-grid, 
[class*="content"], [class*="layout"], [class*="flex"] {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Grid Restoration for Tablet/Desktop */
@media (min-width: 768px) {
    .footer-grid {
        display: grid;
        grid-template-columns: 2fr repeat(3, 1fr);
        gap: 48px;
    }

    [class*="flex-row-desktop"] {
        flex-direction: row;
    }
}

/* Safe Word Wrapping and Typography Boundaries */
p, h1, h2, h3, h4, h5, h6, span, a {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

/* Glass Structural Divider */
.divider-glass {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        var(--glass-border) 30%, 
        var(--glass-border) 70%, 
        transparent 100%
    );
    margin: 40px 0;
}

/* Hero Container Relative Anchor */
.hero {
    position: relative !important;
}

/* Floating Ambient Upper-Right Logo Mark */
.hero-logo-wrapper {
    position: absolute !important;
    top: -12px !important;
    right: 8% !important;
    margin: 0 !important;
    z-index: 2;
    pointer-events: auto;
}

.hero-logo-mark {
    width: 56px !important;       /* Scaled up slightly for visual presence */
    height: 56px !important;
    display: block !important;
    opacity: 0.85;
    filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.6));
    animation: floatGlow 4s ease-in-out infinite alternate;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.hero-logo-mark:hover {
    opacity: 1;
    transform: scale(1.12) rotate(4deg);
    filter: drop-shadow(0 0 30px rgba(56, 189, 248, 0.9));
}

/* Subtle Floating Animation */
@keyframes floatGlow {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    100% {
        transform: translateY(-8px) rotate(-3deg);
    }
}