:root {
  --bg:#080a0d;--bg2:#0c0f14;--surf:#141a24;--border:#1e2a3a;--border2:#263347;
  --accent:#00c2ff;--green:#00e5a0;--text:#dde6f0;--text2:#7a90a8;--text3:#3d5068;
  --display:'Bebas Neue',sans-serif;--body:'Outfit',sans-serif;--mono:'JetBrains Mono',monospace;--r:4px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--body);overflow:hidden;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;background:rgba(8,10,13,0.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
.nav-logo{font-family:var(--display);font-size:22px;letter-spacing:.05em;color:var(--text);text-decoration:none;}
.nav-logo em{color:var(--accent);font-style:normal;}
.nav-links{display:flex;gap:4px;list-style:none;}
.nav-links a{font-family:var(--mono);font-size:11px;color:var(--text2);text-decoration:none;letter-spacing:.1em;padding:6px 14px;border-radius:var(--r);transition:all .2s;}
.nav-links a:hover{color:var(--accent);background:rgba(0,194,255,.06);}
.nav-links .nav-cta,.nav-cta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#0a1628;background:var(--accent);border:none;padding:8px 20px;border-radius:var(--r);text-decoration:none;font-weight:500;transition:background .2s;}
.nav-cta:hover{background:#00aadd;}

/* BREADCRUMB */
.breadcrumb{position:fixed;top:60px;left:0;right:0;z-index:100;height:36px;padding:0 48px;display:flex;align-items:center;gap:8px;background:var(--bg2);border-bottom:1px solid var(--border);}
.bc-item{font-family:var(--mono);font-size:10px;color:var(--text3);text-decoration:none;letter-spacing:.08em;transition:color .2s;}
.bc-item:hover{color:var(--accent);}
.bc-sep{font-size:10px;color:var(--text3);}
.bc-current{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.08em;}

/* DEMO META BAR */
.demo-meta{position:fixed;top:96px;left:0;right:0;z-index:100;height:48px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;background:var(--bg);border-bottom:1px solid var(--border);}
.demo-title-wrap{display:flex;align-items:center;gap:16px;}
.demo-badge{font-family:var(--mono);font-size:9px;letter-spacing:.15em;color:var(--green);background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.2);padding:4px 10px;border-radius:2px;}
.demo-title{font-size:14px;font-weight:600;color:var(--text);}
.demo-subtitle{font-size:12px;color:var(--text3);margin-left:4px;}
.demo-actions{display:flex;align-items:center;gap:12px;}
.demo-action-btn{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--text2);background:transparent;border:1px solid var(--border2);padding:5px 14px;border-radius:var(--r);text-decoration:none;cursor:pointer;transition:all .2s;}
.demo-action-btn:hover{border-color:var(--accent);color:var(--accent);}
.demo-action-btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:500;}
.demo-action-btn.primary:hover{background:#00aadd;}

/* DEMO FRAME */
.demo-frame-wrap{position:fixed;top:144px;left:0;right:0;bottom:0;display:flex;flex-direction:column;}
.demo-frame{flex:1;width:100%;border:none;background:var(--bg3);}

/* PLACEHOLDER STATE */
.demo-placeholder{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;background:var(--bg);position:relative;overflow:hidden;}
.demo-placeholder-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,194,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,194,255,.02) 1px,transparent 1px);background-size:60px 60px;}
.demo-placeholder-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;}
.demo-placeholder-icon{width:80px;height:80px;border-radius:50%;border:1px solid var(--border2);background:var(--surf);display:flex;align-items:center;justify-content:center;font-size:28px;}
.demo-placeholder-label{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.2em;}
.demo-placeholder-title{font-family:var(--display);font-size:48px;letter-spacing:.03em;color:var(--text);}
.demo-placeholder-desc{font-size:14px;color:var(--text2);max-width:440px;line-height:1.7;font-weight:300;text-align:center;}
.demo-drop-zone{width:320px;padding:28px;border:1px dashed var(--border2);border-radius:8px;text-align:center;margin-top:8px;transition:border-color .2s;}
.demo-drop-zone:hover{border-color:var(--accent);}
.demo-drop-label{font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:.12em;margin-bottom:8px;}
.demo-drop-formats{font-size:12px;color:var(--text3);font-weight:300;}

/* STATUS BAR */
.status-bar{height:24px;background:var(--bg2);border-top:1px solid var(--border);padding:0 48px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.sb-left,.sb-right{display:flex;align-items:center;gap:20px;}
.sb-item{font-family:var(--mono);font-size:9px;color:var(--text3);letter-spacing:.08em;display:flex;align-items:center;gap:6px;}
.sb-dot{width:5px;height:5px;border-radius:50%;background:var(--green);}

/* FULLSCREEN TOGGLE */
.fs-btn{font-family:var(--mono);font-size:9px;color:var(--text3);letter-spacing:.08em;background:transparent;border:none;cursor:pointer;transition:color .2s;padding:0;}
.fs-btn:hover{color:var(--accent);}

/* BURGER BUTTON */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:transparent;border:none;cursor:pointer;padding:4px;border-radius:var(--r);}
.nav-burger span{display:block;width:22px;height:2px;background:var(--text2);border-radius:2px;transition:transform .25s,opacity .25s,background .2s;}
.nav-burger:hover span{background:var(--text);}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* MOBILE NAV DRAWER */
.mobile-nav{position:fixed;top:60px;left:0;right:0;bottom:0;z-index:190;background:rgba(8,10,13,.97);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.mobile-nav.open{opacity:1;pointer-events:all;}
.mobile-nav-links{list-style:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:0 32px;}
.mobile-nav-links a{font-family:var(--mono);font-size:14px;color:var(--text2);text-decoration:none;letter-spacing:.12em;padding:14px 0;display:block;text-align:center;width:100%;border-bottom:1px solid var(--border);transition:color .2s;}
.mobile-nav-links a:hover{color:var(--accent);}
.mobile-nav-links li:last-child a{border-bottom:none;}
.mobile-nav-cta{font-family:var(--mono);font-size:13px !important;color:#0a1628 !important;background:var(--accent);border-radius:var(--r);padding:14px 32px !important;margin-top:16px;border-bottom:none !important;letter-spacing:.1em;font-weight:500;transition:background .2s !important;}
.mobile-nav-cta:hover{background:#00aadd !important;color:#0a1628 !important;}
/* MOBILE STICKY HIRE BUTTON */
.mobile-hire-btn{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--accent);color:#0a1628;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.1em;text-align:center;text-decoration:none;padding:16px;transition:background .2s;}
.mobile-hire-btn:hover{background:#00aadd;}

@media(max-width:960px){nav,breadcrumb{padding:0 20px;}.nav-links{display:none;}.nav-burger{display:flex;}.breadcrumb,.demo-meta{padding:0 20px;}.status-bar{padding:0 20px;}.mobile-hire-btn{display:block;}footer{padding-bottom:72px;}}