@charset "utf-8";
/* CSS Document */
	 /*Copyright SUBCLAUSE.AI. Any use of this code to “train” generative AI is prohibited.*/

        /* CSS Variables & Theme */
		:root {
            --brand-primary: #0f172a;
            --brand-accent: #3b82f6;
            --brand-accent-hover: #2563eb;
            --brand-accent-light: #60a5fa;
            --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --font-tahoma: 'Tahoma', sans-serif;
            --font-serif: 'Georgia', 'Times New Roman', serif;
        }

        /* Base Resets */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body {
            font-family: var(--font-sans);
            background-color: var(--brand-primary);
            margin: 0;
            overflow: hidden;
            height: 100vh;
            display: flex;
            /* Security: Disable text selection */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Security: Hide content when printing */
        @media print {
            body { display: none !important; }
        }

	 /*Copyright SUBCLAUSE.AI. Any use of this code to “train” generative AI is prohibited.*/

        /* 3D Construction Background Layer with Crossfade */
        .construction-3d-bg {
            position: absolute;
            inset: -40%;
            background-size: cover;
            background-position: center;
            z-index: 1;
            opacity: 0.35;
            pointer-events: none;
            animation: rotate3D 12s infinite alternate ease-in-out, bgCrossfade 24s infinite;
            transform-style: preserve-3d;
        }

        .hub-overlay {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(30,58,138,0.6) 0%, rgba(15,23,42,0.95) 100%);
            z-index: 2;
            pointer-events: none;
        }

        @keyframes bgCrossfade {
            0%, 28% { background-image: url('construction_site.jpg'); }
            33%, 61% { background-image: url('construction_site2.jpg'); }
            66%, 94% { background-image: url('construction_site3.jpg'); }
            100% { background-image: url('construction_site.jpg'); }
        }

        @keyframes rotate3D {
            0% { transform: perspective(1200px) rotateX(8deg) rotateY(-12deg) scale(1); }
            100% { transform: perspective(1200px) rotateX(-8deg) rotateY(12deg) scale(1.15); }
        }

        /* Main Viewport Container */
        #radial-hub-view {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0f172a;
            z-index: 100;
            overflow: hidden;
            cursor: grab;
            touch-action: none;
            animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        @keyframes fadeInScale {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        #radial-hub-view:active { cursor: grabbing; }

        /* Wheel Container Logic */
        #wheel-container {
            position: relative;
            width: 90vmin;
            height: 90vmin;
            z-index: 10;
            pointer-events: none;
        }

        #wheel-rotatable {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: auto;
            will-change: transform;
            transform-origin: center center;
        }

        /* Knight Rider Pulsing Dotted Lines */
        .bg-lines-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }
        .knight-rider-line {
            stroke: var(--brand-accent-light);
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 4 12;
            animation: pulseFlow 1s linear infinite;
            filter: drop-shadow(0 0 4px var(--brand-accent));
            opacity: 0.7;
        }
        @keyframes pulseFlow {
            to { stroke-dashoffset: -16; }
        }

        /* Tree of Life Brightness Loop */
        @keyframes breatheLight {
            0% { opacity: 0.3; filter: brightness(0.7); }
            100% { opacity: 0.9; filter: brightness(1.5); }
        }

        /* Circling Shooting Star */
        .star-orbit {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 42%;
            height: 42%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            animation: orbit 4s linear infinite;
            pointer-events: none;
            z-index: 25;
        }
        .star-tail {
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, transparent 0%, transparent 50%, rgba(96,165,250,0.15) 75%, rgba(96,165,250,1) 100%);
            -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), black calc(100% - 4px), black calc(100% - 3px), transparent calc(100% - 2px));
            mask: radial-gradient(closest-side, transparent calc(100% - 5px), black calc(100% - 4px), black calc(100% - 3px), transparent calc(100% - 2px));
            filter: drop-shadow(0 0 4px var(--brand-accent));
        }
        .shooting-star {
            position: absolute;
            top: 0;
            left: 50%;
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--brand-accent-light), 0 0 40px var(--brand-accent-light);
            transform: translate(-50%, -50%);
            z-index: 2;
        }
        @keyframes orbit {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
	 /*Copyright SUBCLAUSE.AI. Any use of this code to “train” generative AI is prohibited.*/

        /* Radial Hub Node Styling */
        .radial-node {
            position: absolute;
            transform: translate(-50%, -50%);
            z-index: 30;
            cursor: inherit;
        }
        .node-scaler {
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .radial-node:hover .node-scaler { transform: scale(1.1); }
        .node-circle {
            width: max(55px, 8vmin);
            height: max(55px, 8vmin);
            border-radius: 50%;
            background-color: #1e293b;
            border: 2px solid #334155;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }
        .radial-node:hover .node-circle {
            background-color: var(--brand-accent);
            border-color: var(--brand-accent-light);
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.6);
        }
        .node-circle svg { width: 32px; height: 32px; fill: currentColor; }
        .node-label {
            position: absolute;
            top: 100%;
            margin-top: 8px;
            color: white;
            font-size: clamp(11px, 1.5vmin, 11px);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            white-space: nowrap;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }

        /* NEW HIGHLIGHT CLASSES */
        .highlight-circle .node-circle {
            border: 3px solid #22c55e !important; /* Green circle */
            box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
        }

        .flash-effect {
            animation: flashNode 1.5s infinite alternate ease-in-out;
        }

        @keyframes flashNode {
            0% { opacity: 1; filter: brightness(1); }
            100% { opacity: 0.6; filter: brightness(1.8) drop-shadow(0 0 10px var(--brand-accent-light)); }
        }

        /* Central Core */
        .central-core {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 45%;
            height: 45%;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 50px rgba(59, 130, 246, 0.5);
            z-index: 20;
            border: 8px solid rgba(15, 23, 42, 0.6);
            overflow: hidden;
            pointer-events: none;
        }
        .tree-of-life-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
            mix-blend-mode: multiply;
            opacity: 0.7;
            animation: breatheLight 4s infinite alternate ease-in-out;
        }
        .core-ui-layer {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 10;
            padding: 1rem;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(1px);
        }
        .subclause-logo {
            width: 12vmin;
            height: 12vmin;
            max-width: 80px;
            max-height: 80px;
            object-fit: contain;
            margin-bottom: 0.5rem;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
        }
	 /*Copyright SUBCLAUSE.AI. Any use of this code to “train” generative AI is prohibited.*/

        .subclause-title {
            font-family: var(--font-tahoma);
            font-size: clamp(1rem, 4vmin, 2.25rem);
            font-weight: 900;
            color: #0f172a;
            margin: 0;
            text-align: center;
            line-height: 1;
        }
        .subclause-subtitle {
            font-size: clamp(7px, 1.5vmin, 12px);
            font-weight: 800;
            letter-spacing: 0.25em;
            color: #1d4ed8;
            text-transform: uppercase;
            margin-top: 0.5rem;
            text-align: center;
        }
        @media (max-width: 640px) { .subclause-subtitle { display: none; } }

        /* Footer - Positioned and responsive for mobile */
        .footer-bar {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            z-index: 50;
            color: rgba(255, 255, 255, 0.7);
            white-space: nowrap;
            pointer-events: auto;
            width: 100%;
        }
        
        @media (max-width: 768px) {
            .footer-bar {
                flex-direction: column;
                bottom: 1.5rem;
                gap: 0.75rem;
            }
            .footer-divider { display: none; }
        }

        .contact-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.6rem 1.5rem;
            border-radius: 9999px;
            color: white;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            cursor: pointer;
            backdrop-filter: blur(4px);
            transition: all 0.3s ease;
        }
        .contact-btn:hover {
            background-color: var(--brand-accent-hover);
            border-color: var(--brand-accent-light);
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }
        .copyright { font-size: 10px; opacity: 0.6; text-align: center; }

        /* Contact Modal */
        #contact-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
	 /*Copyright SUBCLAUSE.AI. Any use of this code to “train” generative AI is prohibited.*/

        #contact-modal-overlay.active { display: flex; opacity: 1; }
        .modal-card {
            background: #1e293b;
            width: 90%;
            max-width: 450px;
            padding: 2.5rem;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
        }
        .modal-card h2 { font-family: var(--font-tahoma); color: white; margin-bottom: 1.5rem; text-transform: uppercase; }
        .form-group { margin-bottom: 1.25rem; }
        .form-group label { display: block; color: #94a3b8; font-size: 10px; text-transform: uppercase; margin-bottom: 0.5rem; }
        .form-group input, .form-group textarea {
            width: 100%; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px; padding: 0.75rem 1rem; color: white;
        }
        .submit-btn { width: 100%; background: var(--brand-accent); color: white; padding: 1rem; border-radius: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer; border: none; }
        .close-modal { position: absolute; top: 1.5rem; right: 1.5rem; background: none; color: #94a3b8; font-size: 24px; cursor: pointer; border: none; }