/* ─── SHARED STYLES — EclipSys Studios™ ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#03050f;--bg2:#060b1a;--bg3:#0a1228;
  --cyan:#00e5ff;--cyan2:#00bcd4;--cyan-dim:rgba(0,229,255,.10);--cyan-glow:rgba(0,229,255,.30);
  --green:#39ff14;--orange:#ff6b35;--gold:#ffd700;--purple:#a855f7;
  --text:#e8f4f8;--muted:#6a8aab;--border:rgba(0,229,255,.15);
  --glass:rgba(6,11,26,.7);
  --font-display:'Orbitron',monospace;--font-body:'Syne',sans-serif;--font-mono:'JetBrains Mono',monospace;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden;cursor:none}

/* CURSOR */
#cursor{position:fixed;width:10px;height:10px;background:var(--cyan);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s;box-shadow:0 0 20px var(--cyan),0 0 40px var(--cyan-glow);mix-blend-mode:screen}
#cursor-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(0,229,255,.6);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:transform .18s cubic-bezier(.25,.46,.45,.94);opacity:.6}
#cursor.hovering{width:0;height:0;opacity:0}
#cursor-ring.hovering{width:52px;height:52px;border-color:var(--cyan);opacity:1}

/* SCROLLBAR */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--purple));border-radius:2px}

/* NOISE */
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");opacity:.4;pointer-events:none;z-index:0;animation:noiseShift 8s steps(2) infinite}
@keyframes noiseShift{0%{transform:translate(0,0)}25%{transform:translate(-2%,-1%)}50%{transform:translate(1%,2%)}75%{transform:translate(-1%,1%)}100%{transform:translate(0,0)}}

/* CANVAS */
#starfield{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.8}

/* NAV */
nav{position:fixed;top:0;width:100%;z-index:1000;padding:1rem 3rem;background:rgba(3,5,15,.5);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgba(0,229,255,.08);display:flex;justify-content:space-between;align-items:center;transition:all .4s cubic-bezier(.25,.46,.45,.94)}
nav.scrolled{padding:.7rem 3rem;background:rgba(3,5,15,.92);border-bottom-color:var(--border);box-shadow:0 1px 60px rgba(0,0,0,.8),0 0 1px var(--cyan) inset}
.logo{font-family:var(--font-display);font-size:1rem;font-weight:900;color:var(--cyan);letter-spacing:4px;text-shadow:0 0 30px var(--cyan-glow);display:flex;align-items:center;gap:.7rem;cursor:pointer;text-decoration:none}
.logo-mark{width:34px;height:34px;border:1.5px solid var(--cyan);border-radius:5px;display:grid;place-items:center;font-size:.75rem;font-weight:900;background:linear-gradient(135deg,rgba(0,229,255,.15),rgba(0,229,255,.02));box-shadow:0 0 15px var(--cyan-glow),inset 0 0 10px rgba(0,229,255,.05);position:relative;overflow:hidden}
.logo-mark::after{content:'';position:absolute;inset:-50%;background:conic-gradient(transparent 0deg,rgba(0,229,255,.4) 60deg,transparent 120deg);animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{font-family:var(--font-display);font-size:.58rem;letter-spacing:2.5px;font-weight:600;color:var(--muted);text-decoration:none;text-transform:uppercase;transition:color .3s;position:relative;padding-bottom:4px}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--cyan);box-shadow:0 0 6px var(--cyan);transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:var(--cyan)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{font-family:var(--font-display);font-size:.58rem;letter-spacing:2px;font-weight:700;padding:.65rem 1.5rem;background:linear-gradient(135deg,rgba(0,229,255,.15),rgba(0,229,255,.05));border:1px solid var(--cyan);color:var(--cyan);border-radius:4px;cursor:pointer;transition:all .3s;text-decoration:none;box-shadow:0 0 20px rgba(0,229,255,.1);text-transform:uppercase}
.nav-cta:hover{background:var(--cyan);color:var(--bg);box-shadow:0 0 40px var(--cyan-glow),0 0 80px rgba(0,229,255,.15)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--cyan);transition:all .3s}

/* SECTION DIVIDER */
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),var(--cyan),transparent);opacity:.3;position:relative;z-index:1}

/* SHARED SECTION */
.section{padding:8rem 3rem;position:relative;z-index:1;max-width:1280px;margin:0 auto}
.section-full{padding:8rem 3rem;position:relative;z-index:1}
.section-inner{max-width:1280px;margin:0 auto}
.section-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:5px;color:var(--cyan);text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:1rem}
.section-label::before{content:'';width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}
.section-title{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:900;letter-spacing:3px;line-height:1.05;margin-bottom:1.2rem}
.section-title span{background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-desc{color:var(--muted);font-size:1rem;max-width:480px;line-height:1.9}
.section-header-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:5rem;flex-wrap:wrap;gap:2rem}

/* SECTION BG */
.section-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.15;z-index:0;pointer-events:none}

/* BUTTONS */
.btn{font-family:var(--font-display);font-size:.62rem;letter-spacing:2.5px;font-weight:700;padding:1rem 2.2rem;border-radius:4px;cursor:pointer;text-decoration:none;transition:all .35s cubic-bezier(.25,.46,.45,.94);display:inline-block;position:relative;overflow:hidden;text-transform:uppercase}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:translateX(-120%);transition:transform .6s}
.btn:hover::before{transform:translateX(120%)}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:var(--bg);border:none;box-shadow:0 0 30px rgba(0,229,255,.4),0 4px 20px rgba(0,0,0,.3)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 60px rgba(0,229,255,.6),0 8px 30px rgba(0,0,0,.4)}
.btn-glass{background:rgba(255,255,255,.04);color:var(--text);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);transform:translateY(-3px)}
.btn-outline{background:rgba(255,255,255,.03);color:var(--text);border:1px solid rgba(255,255,255,.1)}
.btn-outline:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.btn-green{background:rgba(57,255,20,.06);color:var(--green);border:1px solid rgba(57,255,20,.2)}
.btn-green:hover{background:rgba(57,255,20,.12);box-shadow:0 0 25px rgba(57,255,20,.2);transform:translateY(-2px)}

/* FOOTER */
footer{background:#010208;border-top:1px solid rgba(0,229,255,.08);padding:3rem;text-align:center;position:relative;z-index:1}
.footer-logo{font-family:var(--font-display);font-size:.85rem;letter-spacing:5px;background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}
.footer-sub{font-family:var(--font-mono);font-size:.65rem;letter-spacing:2px;color:var(--muted);margin-bottom:.4rem}
.footer-links{display:flex;gap:2rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}
.footer-links a{font-family:var(--font-mono);font-size:.62rem;letter-spacing:1.5px;color:var(--muted);text-decoration:none;transition:color .3s}
.footer-links a:hover{color:var(--cyan)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .75s ease,transform .75s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .75s ease,transform .75s ease}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* MOBILE NAV */
.mobile-nav{display:none;position:fixed;top:64px;left:0;right:0;background:rgba(3,5,15,.98);backdrop-filter:blur(24px);border-bottom:1px solid rgba(0,229,255,.1);padding:1.5rem 2rem;flex-direction:column;gap:1rem;z-index:999}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--font-display);font-size:.68rem;letter-spacing:3px;color:var(--muted);text-decoration:none;text-transform:uppercase;padding:.6rem 0;border-bottom:1px solid rgba(0,229,255,.05);transition:color .3s}
.mobile-nav a:hover{color:var(--cyan)}

/* PAGE HERO (non-home pages) */
.page-hero{padding:12rem 3rem 6rem;position:relative;overflow:hidden;z-index:1}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.15) saturate(1.5);transform:scale(1.05)}
.page-hero-overlay{position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(0,229,255,.08) 0%,transparent 65%),linear-gradient(to bottom,rgba(3,5,15,.6) 0%,rgba(3,5,15,.2) 50%,rgba(3,5,15,.95) 100%)}
.page-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,229,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.04) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 80% 80% at center,black 0%,transparent 100%);animation:gridBreath 10s ease-in-out infinite}
@keyframes gridBreath{0%,100%{opacity:.4}50%{opacity:.8}}
.page-hero-content{position:relative;z-index:2;max-width:1280px;margin:0 auto}
.page-hero-eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:6px;color:var(--muted);text-transform:uppercase;margin-bottom:1rem;animation:fadeUp .8s ease both}
.page-hero-title{font-family:var(--font-display);font-size:clamp(3rem,7vw,6rem);font-weight:900;line-height:.95;letter-spacing:5px;margin-bottom:1.5rem;animation:fadeUp .8s .1s ease both}
.page-hero-title .line1{display:block;background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.85) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hero-title .line2{display:block;background:linear-gradient(135deg,var(--cyan) 0%,#00bcd4 50%,var(--purple) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 40px rgba(0,229,255,.5))}
.page-hero-desc{font-size:1.1rem;color:rgba(168,199,220,.85);max-width:560px;line-height:2;animation:fadeUp .8s .25s ease both;margin-bottom:2rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* RESPONSIVE */
@media(max-width:768px){
  /* Nav */
  nav .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  nav{padding:.9rem 1.5rem}
  nav.scrolled{padding:.7rem 1.5rem}

  /* Custom cursor off on touch devices */
  #cursor,#cursor-ring{display:none}
  body{cursor:auto}

  /* Sections */
  .section,.section-full{padding:4rem 1.2rem}
  .section-inner{padding:0}
  .section-header-row{margin-bottom:3rem}
  .section-title{letter-spacing:1.5px}
  .section-desc{max-width:100%}

  /* Page hero */
  .page-hero{padding:8rem 1.2rem 3.5rem}
  .page-hero-title{font-size:clamp(2.4rem,11vw,4rem);letter-spacing:2px}
  .page-hero-desc{font-size:.95rem}

  /* Buttons */
  .btn{font-size:.6rem;padding:.9rem 1.6rem;letter-spacing:1.5px}

  /* Footer */
  footer{padding:2.5rem 1.2rem}
  .footer-links{gap:1.2rem}

  /* Mobile nav */
  .mobile-nav{top:56px}
}

/* Extra small phones */
@media(max-width:400px){
  .section,.section-full{padding:3rem 1rem}
  .page-hero{padding:7rem 1rem 3rem}
  .page-hero-title{font-size:clamp(2rem,10vw,3rem);letter-spacing:1px}
  .logo{font-size:.85rem;letter-spacing:2px}
  .logo-mark{width:28px;height:28px;font-size:.65rem}
  .section-title{font-size:clamp(1.8rem,7vw,2.5rem)}
}