@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&family=Space+Grotesk:wght@700&display=swap');

body { 
    background-color: #050505 !important; 
    color: #ffffff; 
    font-family: 'Inter', sans-serif; 
    letter-spacing: 0.05em; 
    margin: 0; 
    -webkit-font-smoothing: antialiased; 
}

/* --- THE WHITE STONE PROTOCOL (CSS OBJECTS) --- */

/* The Container (Holds Stone + Nodes) */
.logo-stack {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* 1. The White Stone (Base) */
.white-stone {
    position: absolute;
    background: linear-gradient(135deg, #e0e0e0 0%, #ffffff 50%, #b0b0b0 100%);
    border-radius: 20%; 
    transform: rotate(45deg); 
    box-shadow: 
        inset 0 0 10px rgba(0,0,0,0.2), 
        0 0 30px rgba(255, 255, 255, 0.05); 
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 2. The Node Grid (Foreground) */
.hec-logo-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform: rotate(45deg); 
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 3. The Individual Nodes */
.hec-node {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: all 0.4s ease;
}

/* NEON COLORS (High Intensity) */
.node-g { background-color: #00ff41; box-shadow: 0 0 15px #00ff41; }
.node-y { background-color: #ffd700; box-shadow: 0 0 15px #ffd700; }
.node-r { background-color: #ff0000; box-shadow: 0 0 15px #ff0000; }
.node-c { background-color: #00ffff; box-shadow: 0 0 15px #00ffff; }

/* --- ANIMATION STATES --- */

/* HOVER: The "Activation" State */
.group:hover .white-stone {
    transform: rotate(45deg) scale(1.15);
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.25);
}
.group:hover .hec-logo-grid {
    transform: rotate(225deg); /* Spin */
    gap: 25% !important; /* Expand Outward */
}
/* HOVER: Nodes Power Up */
.group:hover .node-g { box-shadow: 0 0 40px #00ff41; }
.group:hover .node-y { box-shadow: 0 0 40px #ffd700; }
.group:hover .node-r { box-shadow: 0 0 40px #ff0000; }
.group:hover .node-c { box-shadow: 0 0 40px #00ffff; }


/* --- SIZING CLASSES --- */

/* HERO SIZE (Massive) */
.hero-stack { width: 220px; height: 220px; margin-bottom: 40px; }
.hero-stack .white-stone { width: 180px; height: 180px; border-radius: 35px; }
.hero-stack .hec-logo-grid { width: 110px; height: 110px; gap: 12px; }

/* NAV SIZE (Miniature) */
.nav-stack { width: 40px; height: 40px; margin-right: 12px; }
.nav-stack .white-stone { width: 34px; height: 34px; border-radius: 8px; }
.nav-stack .hec-logo-grid { width: 20px; height: 20px; gap: 3px; }

/* --- TYPOGRAPHY --- */
.hidden-ai { color: #00ffff; text-shadow: 0 0 15px rgba(0, 255, 255, 0.6); font-weight: bold; }

/* --- STANDARD SITE STYLES --- */
.stone-card { background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(10px); padding: 2.5rem; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.08); transition: 0.3s; }
.stone-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.2); }
.risk-red { border: 1px solid rgba(239, 68, 68, 0.4) !important; }
.numeral-tag { background: rgba(255, 255, 255, 0.05); padding: 4px 8px; font-size: 0.6rem; font-weight: 900; font-family: monospace; text-transform: uppercase; }
.lighthouse-container { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 99px; background: rgba(239, 68, 68, 0.05); margin-bottom: 30px; }
.lighthouse-node { width: 8px; height: 8px; background: #ef4444; border-radius: 50%; box-shadow: 0 0 10px #ef4444; animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }

/* --- THE PRISMATIC CHIP PROTOCOL (Final Brand Architecture) --- */

/* CONTAINER: Centers the chip and handles the float/shadow */
.logo-chip-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. THE PRISMATIC EDGE (Rotating Gradient Ring) */
.prism-edge {
    position: absolute;
    border-radius: 22%; /* Squircle curvature */
    
    /* THE BRAND GRADIENT: Red -> Yellow -> Green -> Cyan */
    background: conic-gradient(from 180deg, #ff0000, #ffd700, #00ff41, #00ffff, #ff0000);
    z-index: 0;
    filter: blur(8px); /* Soft glowing aura */
    opacity: 0.8;
    animation: rotate-edge 8s linear infinite;
}

@keyframes rotate-edge { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 2. THE CERAMIC CHIP (White Body) */
.white-chip {
    position: relative;
    border-radius: 20%;
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.4);
}

/* 3. THE INSET DISH (Recessed Area) */
.chip-inset {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8e8e8 0%, #f8f8f8 100%);
    box-shadow: inset 2px 2px 6px rgba(0,0,0,0.15), inset -2px -2px 6px rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. THE NODE GRID */
.hec-logo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform: rotate(45deg); 
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hec-node {
    width: 100%; height: 100%; border-radius: 50%; position: relative;
    background: var(--node-gradient);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 0 3px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.4);
}

/* NODE COLORS */
.node-g { --node-gradient: radial-gradient(circle at 30% 30%, #4ade80, #15803d); }
.node-y { --node-gradient: radial-gradient(circle at 30% 30%, #facc15, #a16207); }
.node-r { --node-gradient: radial-gradient(circle at 30% 30%, #f87171, #b91c1c); }
.node-c { --node-gradient: radial-gradient(circle at 30% 30%, #22d3ee, #0e7490); }

/* --- SIZING VARIANTS --- */

/* HERO SIZE (Massive Centerpiece) */
.chip-hero { width: 260px; height: 260px; margin-bottom: 40px; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6)); }
.chip-hero .prism-edge { width: 270px; height: 270px; }
.chip-hero .white-chip { width: 250px; height: 250px; }
.chip-hero .chip-inset { width: 170px; height: 170px; }
.chip-hero .hec-logo-grid { width: 85px; height: 85px; gap: 12px; }

/* NAV SIZE (Miniature Precision) */
.chip-nav { width: 44px; height: 44px; margin-right: 12px; }
.chip-nav .prism-edge { width: 44px; height: 44px; filter: blur(3px); }
.chip-nav .white-chip { width: 40px; height: 40px; border-radius: 10px; }
.chip-nav .chip-inset { width: 28px; height: 28px; }
.chip-nav .hec-logo-grid { width: 14px; height: 14px; gap: 2px; }

/* --- HOVER EFFECTS (Hero Only) --- */
.group:hover .chip-hero { transform: scale(1.02) translateY(-5px); }
.group:hover .chip-hero .hec-logo-grid { transform: rotate(225deg); gap: 20px; }
.group:hover .chip-hero .node-g { filter: brightness(1.2); box-shadow: 0 0 20px #4ade80; }
.group:hover .chip-hero .node-y { filter: brightness(1.2); box-shadow: 0 0 20px #facc15; }
.group:hover .chip-hero .node-r { filter: brightness(1.2); box-shadow: 0 0 20px #f87171; }
.group:hover .chip-hero .node-c { filter: brightness(1.2); box-shadow: 0 0 20px #22d3ee; }

/* TYPOGRAPHY UPDATES */
.hidden-ai { color: #22d3ee; text-shadow: 0 0 15px rgba(34, 211, 238, 0.4); font-weight: bold; }