:root{
  --bg:#040305;
  --panel:#0e0e12;
  --muted:#9ea6ad;
  --accent:#00a8ff;
  --accent-2:#00ffd8;
  --pixel-accent:#66f;
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
  --radius:14px;
  --container:1200px;
  --font-cyber: 'Orbitron', sans-serif;
  --font-pixel: 'Press Start 2P', monospace;
  --pixel-mode: 0; /* 1 to enable pixel feel across texts */
}

/* apply pixel mode helper */
body.pixel-mode { font-family: var(--font-pixel); letter-spacing: 0.02em; }
body:not(.pixel-mode) { font-family: var(--font-cyber), Roboto, system-ui; }

*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,var(--bg),#07070b);color:#e6eef8;-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:20px}

/* Header */
.kulikon-header.v4{position:fixed;left:16px;right:16px;top:16px;padding:12px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter: blur(8px);border:1px solid var(--glass-border);z-index:9999}
.kulikon-header-inner{display:flex;align-items:center;justify-content:space-between}
.kulikon-brand img{height:36px}
.kulikon-brand a, .kulikon-brand {color:var(--accent);font-weight:700;text-decoration:none}

/* Mega menu */
.kulikon-primary-menu {position:relative}
.kulikon-nav{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
.kulikon-nav > li {position:relative;padding:6px}
.kulikon-nav > li:hover > .mega-submenu {opacity:1;transform:translateY(0);pointer-events:auto}
.mega-submenu{position:absolute;left:0;top:48px;background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(6,6,6,0.8));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);opacity:0;transform:translateY(-10px);pointer-events:none;transition:all .22s ease}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.mega-grid li a{display:block;padding:8px;border-radius:8px;color:#e8f6ff;text-decoration:none}

/* Hero */
.v4-hero{padding:120px 0 60px;text-align:center}
.hero-title{font-size:28px}
.hero-sub{color:var(--muted)}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);padding:12px;border-radius:12px;min-height:140px;transition:transform .22s}
.card:hover{transform:translateY(-6px)}

/* Embed styles */
.kulikon-embed{position:relative;border-radius:10px;overflow:hidden;background:#05050a;border:1px solid rgba(255,255,255,0.02);min-height:260px;display:flex;align-items:center;justify-content:center}
.kulikon-embed .embed-placeholder{padding:20px;text-align:center;color:var(--muted);cursor:pointer}

/* Pixel accent decorations */
.pixel-badge{display:inline-block;padding:6px 10px;border-radius:6px;background:linear-gradient(90deg,var(--pixel-accent),var(--accent));color:#001; font-weight:700; font-size:11px;}

/* Footer */
.kulikon-footer.v4{padding:48px 20px;text-align:center;color:var(--muted)}

/* Mobile responsiveness */
@media(max-width:900px){
  .mega-grid{grid-template-columns:repeat(1,1fr)}
  .kulikon-nav{overflow:auto;padding-bottom:8px}
  .container{padding:16px}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *{transition:none!important;animation:none!important}
}
/* --- Preloader Styles --- */
#kulikon-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #040305;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.75s ease;
}
#kulikon-preloader.loaded {
    opacity: 0;
    pointer-events: none;
}
.preloader-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: #fff;
    position: relative;
    text-transform: uppercase;
}
/* Glitch Effect */
.preloader-logo::before, .preloader-logo::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #040305;
    overflow: hidden;
    animation: glitch 2s infinite linear alternate-reverse;
}
.preloader-logo::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
}
.preloader-logo::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    clip: rect(85px, 450px, 90px, 0);
}
@keyframes glitch { 0% { clip: rect(42px, 9999px, 44px, 0); } /* ... add more steps */ 100% { clip: rect(90px, 9999px, 92px, 0); }}
.preloader-subtext {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.75rem;
    color: #0F0;
    margin-top: 1rem;
    opacity: 0;
    animation: fadeIn 1s 0.5s forwards;
}

/* --- Animated Background --- */
#kulikon-matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.3; /* Adjust for subtlety */
}

/* --- Scroll Animations --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Interactive Hero Parallax --- */
.interactive-hero {
    --parallax-x: 0px;
    --parallax-y: 0px;
    transition: transform 0.1s ease-out;
    will-change: transform;
}
.interactive-hero .container {
    transform: translate(var(--parallax-x), var(--parallax-y));
}

/* --- Theme Switcher (Basic Styles) --- */
.theme-switcher {
    margin-bottom: 1rem;
}
[data-theme="matrix"] body {
    /* Define matrix theme colors here using CSS variables */
}