/*
Theme Name: CyberFox 3D
Theme URI: https://example.com/cyberfox-3d
Author: NiFan
Author URI: https://example.com
Description: A premium, futuristic, neon-cyan WordPress theme with Three.js 3D hero and glassmorphism.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cyberfox-3d
Tags: one-column, custom-colors, custom-logo, editor-style, featured-images
*/

:root{
  --bg1:#03050a; --bg2:#071224; --cyan:#00fff0; --cyan-2:#00b8ff; --muted:#9fb3c8;
  --glass: rgba(255,255,255,0.03);
  --container:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#e6f7fb;background:linear-gradient(180deg,var(--bg1),var(--bg2));-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--cyan);text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.header{display:flex;align-items:center;justify-content:space-between;padding:22px 0;position:relative;z-index:40}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--cyan),var(--cyan-2));display:flex;align-items:center;justify-content:center;font-weight:800;color:#021018;font-size:18px;box-shadow:0 18px 60px rgba(0,255,240,0.12), inset 0 -6px 20px rgba(0,0,0,0.2)}
.site-title{font-weight:800;font-size:18px;color:#e6fbff;letter-spacing:0.2px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{font-weight:600;color:var(--muted);padding:8px 12px;border-radius:8px}
.cta{background:linear-gradient(90deg,var(--cyan),var(--cyan-2));padding:10px 14px;border-radius:12px;color:#021018;font-weight:800;box-shadow:0 14px 60px rgba(0,255,240,0.12)}

/* Hero */
.hero-wrap{position:relative;overflow:hidden;padding:48px 0 24px}
.hero{display:flex;align-items:center;gap:40px;padding-top:40px;min-height:78vh;position:relative;z-index:30}
.left{flex:1;z-index:50}
.h1{font-size:48px;line-height:1.02;margin:0 0 14px;font-weight:900;color:white;text-shadow:0 6px 30px rgba(0,200,255,0.04)}
.neon{background:linear-gradient(90deg,var(--cyan),var(--cyan-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.flicker{animation:flicker 3.2s infinite steps(2, end)}
@keyframes flicker {
  0%{opacity:1;filter:blur(0px)} 5%{opacity:.8;filter:blur(.2px)} 7%{opacity:1} 10%{opacity:.9}
  100%{opacity:1}
}
.lead{color:var(--muted);max-width:58ch;margin-bottom:20px;font-size:16px}
.buttons{display:flex;gap:12px;align-items:center}
.btn-primary{background:linear-gradient(90deg,var(--cyan),var(--cyan-2));padding:14px 20px;border-radius:14px;color:#021018;font-weight:800;box-shadow:0 20px 80px rgba(0,255,240,0.12);text-decoration:none;transform:translateZ(0)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:12px 16px;border-radius:12px;color:var(--muted);font-weight:700}

/* canvas stage */
.stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:480px;pointer-events:none}
.canvas-wrap{width:720px;height:460px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));backdrop-filter: blur(6px);border:1px solid rgba(0,255,240,0.04);box-shadow:0 60px 140px rgba(0,200,255,0.06);overflow:hidden;pointer-events:auto}
.canvas-overlay{position:absolute;inset:0;border-radius:20px;pointer-events:none;mix-blend-mode:screen}

/* floating UI badges */
.badge{position:absolute;left:18px;top:18px;background:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);backdrop-filter:blur(6px);font-weight:700;color:var(--muted);font-size:13px}

/* particles background for depth */
.bg-canvas{position:absolute;inset:0;z-index:10;pointer-events:none}

/* sections */
.section{padding:72px 0;position:relative;z-index:20}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service{background:linear-gradient(180deg,rgba(0,255,240,0.02),rgba(0,255,240,0.01));padding:22px;border-radius:12px;border:1px solid rgba(0,255,240,0.03);box-shadow:0 24px 80px rgba(0,255,240,0.02);transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s}
.service:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 40px 140px rgba(0,255,240,0.08)}

/* interactive tiles */
.tile{padding:18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.03);transition:transform .18s ease, box-shadow .18s ease}
.tile:hover{transform:translateY(-8px) rotateX(2deg);box-shadow:0 30px 80px rgba(0,0,0,0.5)}

/* footer */
.footer{padding:40px 0;color:var(--muted);text-align:center;border-top:1px solid rgba(255,255,255,0.02)}

/* responsive */
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.h1{font-size:34px}.hero{flex-direction:column}.nav{display:none}.stage{order:-1;padding-bottom:28px}}
@media(max-width:640px){.grid{grid-template-columns:1fr}.canvas-wrap{width:100%;height:320px}}