/* =========================================
   1. CORE VARIABLES & SETUP
========================================= */
:root {
    --bg-dark: #050a14;
    --bg-panel: #0a0f20;
    --primary-cyan: #00F0FF;
    --primary-dim: rgba(0, 240, 255, 0.1);
    --text-main: #ffffff;
    --text-muted: #9ab;
    --glass-border: rgba(255,255,255,0.08);
    --glass-bg: rgba(10,15,25,0.6);

    --font-head: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    --container-width: 1200px;
    --section-pad: 100px 0;
}

* { margin:0; padding:0; box-sizing:border-box; cursor:none; }

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-dark);
    line-height: 1.7;
    overflow-x: hidden;
}

/* =========================================
   2. PRELOADER
========================================= */
#preloader {
    position: fixed; top:0; left:0;
    width:100%; height:100%;
    background:#000;
    display:flex; justify-content:center; align-items:center;
    z-index:9999;
}
.spinner { animation: rotate 2s linear infinite; width:50px;height:50px; }
.path { stroke: var(--primary-cyan); stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; }
.loading-text { margin-top:20px; font-family:var(--font-head); color:var(--primary-cyan); letter-spacing:2px; font-size:0.85rem; }
@keyframes rotate{100%{transform:rotate(360deg)}}
@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}

/* =========================================
   3. BACKGROUND & CURSOR
========================================= */
#ocean-canvas {
    position: fixed; top:0; left:0; width:100%; height:100%; z-index:-2;
}
.bubbles-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAA5OTkAAABMTExERERmZmYzMzNmZmZ34+VkAAAACHRSTlMAMwA3MzMzM7O0s1EAAABcSURBVDjLY2AYBaNgKLgCg8EUDwLBFQ4Ggys+DAZXQhgMrkQxGFxJYTC4UsJgcKWMweBKG4PB1TQGg6t5DAZXCxkMrlYxGFytYzC42sZgcLWLPQoGwSgYBaNgwAAAKFw968p0fLgAAAAASUVORK5CYII=');
    opacity:0.03; z-index:-1; pointer-events:none;
}
#cursor, #cursor-blur { position: fixed; pointer-events: none; border-radius:50%; z-index:9999; transition:all 0.2s ease; }
#cursor { width:8px;height:8px; background:var(--primary-cyan); mix-blend-mode:difference; transition:transform 0.1s;}
#cursor-blur { width:40px;height:40px; border:1px solid var(--primary-cyan); transition:all 0.2s; }

/* =========================================
   4. NAVIGATION
========================================= */
.navbar {
    position: fixed; top:0; width:100%; z-index:100; padding:20px 40px;
    display:flex; justify-content:center; backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.05);
}
.nav-container { display:flex; justify-content:space-between; align-items:center; width:100%; max-width:var(--container-width);}
.brand { display:flex; align-items:center; gap:10px; }
.brand-name { font-family:var(--font-head); font-weight:700; font-size:1.5rem; letter-spacing:1px;}
.highlight { color:var(--primary-cyan);}
.nav-links { display:flex; gap:30px;}
.nav-item { text-decoration:none; font-family:var(--font-head); font-size:0.9rem; color:var(--text-muted); position:relative; transition:color 0.3s; }
.nav-item span { color:var(--primary-cyan); opacity:0.5; margin-right:5px; }
.nav-item:hover { color:#fff;}
.nav-item::after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--primary-cyan);opacity:0;transform:translateY(10px);transition:all 0.3s;}
.nav-item:hover::after { opacity:1; transform:translateY(0);}

/* =========================================
   5. HERO
========================================= */
.hero-panel { min-height:100vh; display:flex; align-items:center; justify-content:center; padding-top:70px; position:relative; }
.hero-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:30px; width:90%; max-width:var(--container-width); align-items:center; }
.label-tag { font-family:var(--font-head); font-size:0.8rem; letter-spacing:2px; color:var(--primary-cyan); padding:5px 15px; border:1px solid var(--primary-dim); background:rgba(0,240,255,0.05); display:inline-block; margin-bottom:20px; }
.glitch-header { font-family:var(--font-head); font-size:3rem; line-height:1.1; margin-bottom:20px; }
.hero-desc { font-size:1rem; color:var(--text-muted); margin-bottom:30px; }
.cta-group { display:flex; gap:15px; flex-wrap:wrap;}
.btn-primary, .btn-secondary { padding:12px 25px; font-family:var(--font-head); font-weight:700; border:none; transition:all 0.3s; cursor:none;}
.btn-primary { background:var(--primary-cyan); color:#000;}
.btn-primary:hover{ background:#fff; box-shadow:0 0 15px rgba(0,240,255,0.5);}
.btn-secondary{ background:transparent; border:1px solid var(--primary-cyan); color:var(--primary-cyan);}
.btn-secondary:hover{ background:var(--primary-dim);}

/* Glass Panels */
.glass-panel { background:var(--glass-bg); backdrop-filter:blur(12px); border:1px solid var(--glass-border); padding:25px; overflow:hidden; position:relative; }

/* Hero Stats */
.hero-stats-card { margin-top:20px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-family:var(--font-head);}
.pulse-dot { width:10px;height:10px;border-radius:50%;background:var(--primary-cyan); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{ transform:scale(0.8); opacity:0.5;}50%{transform:scale(1.2); opacity:1;}}

/* =========================================
   6. SERVICES
========================================= */
.services-grid-layout { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; margin-top:40px;}
.service-card { transition:transform 0.3s, border-color 0.3s; }
.service-card:hover { transform:translateY(-10px); border-color:var(--primary-cyan);}
.card-icon { font-size:2rem; margin-bottom:15px;}
.service-card h3{ font-family:var(--font-head); margin-bottom:10px; font-size:1.3rem;}
.service-card p{ font-size:0.95rem; color:var(--text-muted); margin-bottom:10px;}
.read-more { font-size:0.8rem; font-weight:700; text-decoration:none; color:var(--primary-cyan); letter-spacing:1px;}

/* =========================================
   7. CONTACT
========================================= */
.contact-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:40px; margin-top:40px; }
.form-group { margin-bottom:30px; position:relative; }
.form-group label { font-family:var(--font-head); font-size:0.7rem; color:var(--text-muted); margin-bottom:5px; display:block;}
.form-group input, .form-group textarea { width:100%; border:none; border-bottom:1px solid #333; background:transparent; padding:8px 0; color:#fff; font-family:var(--font-body);}
.form-group input:focus, .form-group textarea:focus{outline:none;border-bottom-color:var(--primary-cyan);}
.btn-submit { width:100%; padding:15px; font-family:var(--font-head); font-weight:700; background:var(--primary-cyan); color:#000; border:none; margin-top:10px; }

/* =========================================
   8. RESPONSIVE
========================================= */
@media (max-width:768px){
  .nav-links{display:none;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-stats-card{display:none;}
  .contact-layout{grid-template-columns:1fr;}
  .glitch-header{font-size:2rem;}
  #cursor,#cursor-blur{display:none;}
  *{cursor:auto;}
}