/* holos.dev - Holographic Developer Platform */

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

:root{
    --void:#08080F;
    --holo-cyan:#00E5FF;
    --holo-violet:#7C4DFF;
    --holo-pink:#FF4081;
    --panel-bg:linear-gradient(135deg,rgba(0,229,255,0.06),rgba(124,77,255,0.06));
    --panel-border:rgba(0,229,255,0.15);
    --text-primary:#E0E8F0;
    --text-dim:#6B7B8D;
}

body{font-family:'Exo 2',sans-serif;font-weight:300;font-size:0.95rem;line-height:1.7;color:var(--text-primary);background:var(--void);overflow-x:hidden}

.scan-lines{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,229,255,0.05) 3px,rgba(0,229,255,0.05) 4px);animation:scan-sweep 8s linear infinite}

@keyframes scan-sweep{0%{transform:translateY(0)}100%{transform:translateY(4px)}}

#hero{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}

.hex-wireframe{position:absolute;width:200px;height:200px;animation:hex-rotate 20s linear infinite;opacity:0;transition:opacity 0.5s ease}
.hex-wireframe.visible{opacity:1}

@keyframes hex-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.hero-content{text-align:center;position:relative;z-index:2}

.holo-title{font-family:'Orbitron',sans-serif;font-weight:600;font-size:clamp(2rem,5vw,4rem);letter-spacing:0.1em;text-transform:uppercase;background:linear-gradient(135deg,var(--holo-cyan),var(--holo-violet),var(--holo-pink));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;opacity:0;animation:prismatic-sweep 0.8s ease forwards 0.6s}

@keyframes prismatic-sweep{0%{opacity:0;background-position:200% 0}100%{opacity:1;background-position:0% 0}}

.hero-sub{font-weight:300;font-size:0.95rem;color:var(--text-dim);margin-top:1rem;opacity:0;transition:opacity 0.5s ease}
.hero-sub.visible{opacity:1}

/* Tool Grid */
#tool-grid{max-width:1120px;margin:0 auto;padding:48px 2rem}

.section-title{font-family:'Orbitron',sans-serif;font-weight:500;font-size:clamp(1rem,2vw,1.4rem);letter-spacing:0.06em;color:var(--holo-cyan);margin-bottom:24px}

.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.holo-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:20px;opacity:0;transform:scale(0.95);transition:opacity 0.3s ease,transform 0.3s ease,border-color 0.2s ease,box-shadow 0.2s ease}

.holo-panel.visible{opacity:1;transform:scale(1)}

.holo-panel:hover{border-color:rgba(0,229,255,0.4);box-shadow:0 0 20px rgba(0,229,255,0.1)}

.tool-icon{width:24px;height:24px;margin-bottom:12px}

.panel-name{font-family:'Orbitron',sans-serif;font-weight:500;font-size:0.85rem;letter-spacing:0.06em;color:var(--text-primary);margin-bottom:6px}

.panel-desc{font-family:'Source Code Pro',monospace;font-size:0.75rem;color:var(--text-dim)}

/* Integration Map */
#integration-map{max-width:1120px;margin:0 auto;padding:48px 2rem}

.network-svg{width:100%;max-height:300px}

/* Footer */
#footer{max-width:1120px;margin:0 auto;padding:48px 2rem;text-align:center}

.prismatic-beam{height:4px;background:linear-gradient(90deg,var(--holo-cyan),var(--holo-violet),var(--holo-pink));margin-bottom:24px;border-radius:2px}

.footer-text{font-family:'Source Code Pro',monospace;font-size:0.8rem;color:var(--text-dim);letter-spacing:0.06em}

@media(max-width:768px){.bento-grid{grid-template-columns:repeat(2,1fr)}}