@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════
   QUANTUM ALPACA INDUSTRIES — UNIFIED CHAOS STYLESHEET
   Covers all 3 nav variants, all page-specific classes, and
   every visual effect requested in the spec.
   ═══════════════════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; min-height:100%; overflow-x:hidden; font-family:'Courier New',Courier,monospace; background:#000; color:#0f0; }
a { color:#0ff; text-decoration:underline wavy; }
img { max-width:100%; display:block; }

/* ── ANIMATIONS ── */
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes spin-reverse { from{transform:rotate(360deg)} to{transform:rotate(0deg)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
@keyframes pulse-glow { 0%,100%{text-shadow:0 0 5px #0f0,0 0 10px #0f0} 50%{text-shadow:0 0 20px #0f0,0 0 40px #0f0,0 0 60px #0f0} }
@keyframes glitch { 0%{transform:translate(0)} 20%{transform:translate(-2px,2px)} 40%{transform:translate(-2px,-2px)} 60%{transform:translate(2px,2px)} 80%{transform:translate(2px,-2px)} 100%{transform:translate(0)} }
@keyframes lightning { 0%,90%,100%{opacity:0} 92%{opacity:1;background:#fff} 93%{opacity:0} 94%{opacity:1;background:#ff0} 96%{opacity:0} }
@keyframes marquee { from{transform:translateX(100%)} to{transform:translateX(-100%)} }
@keyframes matrix-rain { 0%{transform:translateY(-100%)} 100%{transform:translateY(100vh)} }
@keyframes vhs-static { 0%{background-position:0 0} 100%{background-position:100px 100px} }
@keyframes shake { 0%{transform:translate(1px,1px) rotate(0deg)} 10%{transform:translate(-1px,-2px) rotate(-1deg)} 20%{transform:translate(-3px,0px) rotate(1deg)} 30%{transform:translate(3px,2px) rotate(0deg)} 40%{transform:translate(1px,-1px) rotate(1deg)} 50%{transform:translate(-1px,2px) rotate(-1deg)} 60%{transform:translate(-3px,1px) rotate(0deg)} 70%{transform:translate(3px,1px) rotate(-1deg)} 80%{transform:translate(-1px,-1px) rotate(1deg)} 90%{transform:translate(1px,2px) rotate(0deg)} 100%{transform:translate(1px,-2px) rotate(-1deg)} }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes rainbow-text { 0%{color:#f00} 14%{color:#ff7f00} 28%{color:#ff0} 42%{color:#0f0} 57%{color:#00f} 71%{color:#4b0082} 85%{color:#9400d3} 100%{color:#f00} }
@keyframes wobble { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes rotate-earth { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes scanline { 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }

/* ── UTILITY CLASSES ── */
.chaos-spin { animation:spin 8s linear infinite; }
.chaos-spin-fast { animation:spin 2s linear infinite; }
.chaos-float { animation:float 3s ease-in-out infinite; }
.chaos-pulse { animation:pulse-glow 1.5s ease-in-out infinite; }
.chaos-glitch { animation:glitch 0.3s linear infinite; }
.chaos-shake { animation:shake 0.5s linear infinite; }
.chaos-rainbow { animation:rainbow-text 2s linear infinite; }
.chaos-wobble { animation:wobble 1s ease-in-out infinite; }
.chaos-blink { animation:blink 0.8s step-end infinite; }

/* ── OVERLAYS ── */
#matrix-canvas, #matrixRain, #matrix-bg { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:0.25; }
#lightning-overlay, #lightningStorm, #lightning-bg { position:fixed; inset:0; z-index:1; pointer-events:none; animation:lightning 8s infinite; }
#vhs-static, #vhsStatic { position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size:200px 200px; animation:vhs-static 0.2s linear infinite; }
#stock-photo-overlay { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.03; background:url('https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=1920') center/cover; }
.scanline { position:fixed; inset:0; z-index:3; pointer-events:none; background:linear-gradient(to bottom, transparent 50%, rgba(0,255,0,0.02) 50%); background-size:100% 4px; }

/* ── NAVIGATION (3 variants) ── */
/* Variant A: index/volcano/contact — .nav */
.nav { position:sticky; top:0; z-index:999; background:#111; border-bottom:3px dashed #0f0; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.nav-logo, #nav-logo { font-size:1.5rem; font-weight:bold; color:#ff0; animation:rainbow-text 3s linear infinite; cursor:pointer; }
.nav-menu { display:flex; flex-wrap:wrap; gap:12px; list-style:none; }
.nav-menu li a { display:inline-block; padding:6px 14px; border:2px solid #0f0; background:#000; color:#0f0; font-weight:bold; text-transform:uppercase; transition:all 0.2s; text-decoration:none; }
.nav-menu li a:hover { background:#0f0; color:#000; transform:scale(1.15) rotate(-5deg); }

/* Variant B: about/careers — #mainNav */
#mainNav { position:sticky; top:0; z-index:999; background:#111; border-bottom:3px dashed #0f0; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; max-width:1400px; margin:0 auto; flex-wrap:wrap; }
#mainNav .logo, #logo { font-size:1.5rem; font-weight:bold; color:#ff0; text-decoration:none; animation:rainbow-text 3s linear infinite; }
#mainNav .nav-links { display:flex; flex-wrap:wrap; gap:12px; list-style:none; }
#mainNav .nav-links li a { display:inline-block; padding:6px 14px; border:2px solid #0f0; background:#000; color:#0f0; font-weight:bold; text-transform:uppercase; transition:all 0.2s; text-decoration:none; }
#mainNav .nav-links li a:hover { background:#0f0; color:#000; transform:scale(1.15) rotate(-5deg); }
.mobile-toggle { display:none; background:none; border:2px solid #0f0; color:#0f0; font-size:1.5rem; cursor:pointer; }

/* Variant C: timeline/emergency/investor — .navbar */
.navbar { position:sticky; top:0; z-index:999; background:#111; border-bottom:3px dashed #0f0; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.navbar .logo-container { display:flex; align-items:center; gap:10px; }
.navbar .logo-link { display:flex; align-items:center; gap:10px; text-decoration:none; }
.navbar .logo { font-size:2rem; animation:float 3s ease-in-out infinite; }
.navbar .logo-text { font-size:1.2rem; font-weight:bold; color:#ff0; }
.navbar .nav-links { display:flex; flex-wrap:wrap; gap:12px; }
.navbar .nav-links a { display:inline-block; padding:6px 14px; border:2px solid #0f0; background:#000; color:#0f0; font-weight:bold; text-transform:uppercase; transition:all 0.2s; text-decoration:none; }
.navbar .nav-links a:hover, .navbar .nav-links a.active { background:#0f0; color:#000; transform:scale(1.15) rotate(-5deg); }
.mobile-menu-btn { display:none; background:none; border:2px solid #0f0; color:#0f0; font-size:1.5rem; cursor:pointer; }

/* ── HERO (multiple variants) ── */
.hero, .page-hero { position:relative; min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding:40px 20px; }
.hero-bg, #hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-content, .content, .page-header { position:relative; z-index:2; }
.hero-title, .page-title, h1.glitch { font-size:clamp(2rem,6vw,4.5rem); text-transform:uppercase; margin-bottom:15px; line-height:1.1; color:#0f0; text-shadow:0 0 10px #0f0; }
.glitch { position:relative; }
.glitch::before, .glitch::after { content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; }
.glitch::before { left:2px; text-shadow:-2px 0 #f00; clip:rect(24px,550px,90px,0); animation:glitch 2s linear infinite alternate-reverse; }
.glitch::after { left:-2px; text-shadow:-2px 0 #00f; clip:rect(85px,550px,140px,0); animation:glitch 3s linear infinite alternate-reverse; }
.hero-subtitle, .page-subtitle, .page-header p { font-size:clamp(1rem,2.5vw,1.6rem); color:#0ff; margin-bottom:30px; max-width:800px; }

/* ── ALPACA 3D ── */
.alpaca-scene { width:220px; height:220px; margin:0 auto 25px; perspective:800px; }
.alpaca { width:100%; height:100%; position:relative; transform-style:preserve-3d; animation:spin 12s linear infinite; }
.alpaca-body, .alpaca-neck, .alpaca-head, .alpaca-legs, .suit-tie { position:absolute; background:rgba(0,255,0,0.2); border:2px solid #0f0; }
.alpaca-body { width:120px; height:80px; top:60px; left:50px; border-radius:20px; }
.alpaca-neck { width:40px; height:70px; top:10px; left:90px; }
.alpaca-head { width:50px; height:40px; top:0; left:85px; border-radius:50%; }
.alpaca-legs { width:20px; height:50px; top:130px; left:60px; }
.alpaca-legs::before { content:''; position:absolute; width:20px; height:50px; left:40px; background:rgba(0,255,0,0.2); border:2px solid #0f0; }
.suit-tie { width:10px; height:40px; top:70px; left:105px; background:#00f; }

/* ── CTAs ── */
.hero-ctas, .cta-cluster { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:20px; }
.cta, .cta-cluster a, .cta-cluster button, .btn { padding:14px 28px; font-size:1rem; font-weight:bold; border:3px solid; cursor:pointer; text-transform:uppercase; transition:transform 0.15s; font-family:inherit; text-decoration:none; display:inline-block; }
.cta:hover, .cta-cluster a:hover, .cta-cluster button:hover, .btn:hover { transform:scale(1.1) rotate(3deg); }
.cta-red, .btn-danger { background:#f0f; color:#fff; border-color:#fff; }
.cta-green { background:#00f; color:#ff0; border-color:#ff0; }
.cta-purple { background:#f00; color:#fff; border-color:#fff; }
.cta-gold { background:#0f0; color:#000; border-color:#000; }
.cta-panic, .btn-panic, .panic-btn { background:#ff0; color:#f00; border-color:#f00; animation:shake 0.4s linear infinite; }
.btn-primary { background:#0f0; color:#000; border-color:#0f0; }
.btn-invest { background:#f0f; color:#fff; border-color:#fff; }
.btn-time { background:#00f; color:#ff0; border-color:#ff0; }
.btn-sales { background:#f00; color:#fff; border-color:#fff; }
.btn-deploy { background:#0f0; color:#000; border-color:#000; }

/* ── SECTIONS ── */
.section, .features-section, .testimonials-section, .about-intro, .timeline-section, .values-section, .team-section, .perks-section, .jobs-section, .culture-section, .metrics-section, .chart-section, .press-section, .volcano-section, .contact-section, .map-section { padding:60px 20px; max-width:1200px; margin:0 auto; position:relative; }
.section-title { font-size:2rem; margin-bottom:25px; text-align:center; text-transform:uppercase; border-bottom:2px dashed #0f0; padding-bottom:10px; color:#ff0; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ── FEATURES ── */
.features-grid, .feature-grid, .values-grid, .perks-grid, .team-grid, .culture-gallery, .metrics-grid, .alpaca-grid, .volcano-grid, .chart-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.feature-card, .value-card, .perk-card, .team-member, .culture-item, .metric-card, .alpaca-card, .volcano-card, .timeline-content { background:#111; border:2px solid #0f0; padding:20px; text-align:center; transition:transform 0.2s; }
.feature-card:hover, .value-card:hover, .perk-card:hover, .team-member:hover, .culture-item:hover, .metric-card:hover, .alpaca-card:hover, .volcano-card:hover { transform:scale(1.05) rotate(1deg); }
.feature-icon, .value-icon, .perk-icon, .icon { font-size:3rem; margin-bottom:10px; }
.feature-card h3, .value-card h3, .perk-card h3 { color:#ff0; margin-bottom:8px; font-size:1.2rem; }
.feature-card p, .value-card p, .perk-card p { font-size:0.95rem; color:#aaa; }

/* ── TESTIMONIALS ── */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.testimonial-card, .testimonial { background:#1a1a1a; border:2px dashed #0ff; padding:20px; position:relative; }
.testimonial-card p, .testimonial p { font-style:italic; color:#ccc; }
.testimonial-author, .testimonial .author { margin-top:12px; font-weight:bold; color:#ff0; display:block; }
.testimonial .role { font-size:0.8rem; color:#888; }

/* ── TIMELINE ── */
.timeline { position:relative; padding-left:30px; }
.timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:4px; background:#0f0; }
.timeline-item { position:relative; margin-bottom:30px; padding:15px; background:#111; border:1px solid #0f0; }
.timeline-item::before { content:''; position:absolute; left:-26px; top:18px; width:12px; height:12px; background:#0f0; border-radius:50%; }
.timeline-item .year, .timeline-year { color:#ff0; font-weight:bold; font-size:1.2rem; }
.timeline-item.left, .timeline-item.right { text-align:left; }

/* ── JOBS / CAREERS ── */
.jobs-list { display:flex; flex-direction:column; gap:15px; }
.job-card { background:#111; border:2px solid #f0f; padding:18px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.job-card h3 { color:#f0f; font-size:1.1rem; }
.job-header { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.job-badge { padding:4px 10px; font-size:0.75rem; border-radius:4px; font-weight:bold; }
.job-badge.full-time { background:#0f0; color:#000; }
.job-badge.part-time { background:#ff0; color:#000; }
.job-badge.contract { background:#0ff; color:#000; }
.job-badge.leadership { background:#f0f; color:#fff; }
.job-location { color:#888; font-size:0.9rem; margin:8px 0; }
.job-desc { color:#aaa; margin-bottom:10px; }
.job-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tag { padding:3px 8px; background:#222; border:1px solid #0f0; font-size:0.75rem; color:#0f0; }
.apply-btn { padding:8px 18px; background:#f0f; color:#000; border:none; font-weight:bold; cursor:pointer; font-family:inherit; }
.apply-btn:hover { background:#fff; }

/* ── TEAM ── */
.team-photo { font-size:4rem; margin-bottom:10px; }
.team-role { color:#0ff; font-size:0.9rem; margin-bottom:8px; }

/* ── EMERGENCY ── */
.emergency-banner { background:#f00; color:#fff; text-align:center; padding:15px; font-size:1.3rem; font-weight:bold; animation:blink 0.8s step-end infinite; }
.emergency-label { text-transform:uppercase; }
.emergency-value { color:#ff0; }
.alpaca-emoji { font-size:4rem; margin-bottom:10px; }
.price { display:block; color:#ff0; font-size:1.2rem; font-weight:bold; margin:10px 0; }

/* ── INVESTOR ── */
.metric-value { font-size:3rem; font-weight:bold; color:#0f0; }
.metric-label { color:#aaa; font-size:0.9rem; margin:8px 0; }
.metric-change { color:#0ff; font-size:0.85rem; }
.chart-section h2 { text-align:center; color:#ff0; margin-bottom:20px; }
.chart-container { display:flex; align-items:flex-end; justify-content:center; gap:10px; height:300px; padding:20px; background:#111; border:2px solid #0f0; }
.chart-bar { width:40px; background:#0f0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:20px; transition:height 0.5s; }
.chart-bar span { color:#000; font-size:0.7rem; font-weight:bold; margin-bottom:4px; }
.chart-bar:hover { background:#ff0; }

/* ── VOLCANO ── */
.page-volcano .hero { background:linear-gradient(180deg,#1a0000,#ff4500); }
.volcano-card h3 { color:#ff4500; }
.volcano-card .price { color:#ff0; }

/* ── CONTACT ── */
.page-contact .hero { background:linear-gradient(135deg,#000,#1a1a1a); }
#contact-form { display:flex; flex-direction:column; gap:15px; }
#contact-form input, #contact-form select, #contact-form textarea { padding:10px; background:#111; border:1px solid #0f0; color:#fff; font-family:inherit; }
.support-channel { background:#111; border:2px solid #0f0; padding:20px; margin-bottom:15px; }
.support-channel h3 { color:#ff0; margin-bottom:10px; }
.support-channel p { color:#aaa; }

/* ── TICKER ── */
.ticker-row, .ticker-bar, .footer-tickers { background:#000; border-top:2px solid #0f0; border-bottom:2px solid #0f0; overflow:hidden; white-space:nowrap; padding:8px 0; display:flex; justify-content:center; gap:40px; }
.ticker, .ticker-content { display:inline-block; }
.ticker-item { display:inline-block; padding:0 40px; font-weight:bold; }
.ticker-label { color:#ff0; }
.ticker-value { color:#0f0; }

/* ── FOOTER ── */
.footer, .site-footer { background:#050505; border-top:4px double #0f0; padding:40px 20px 20px; margin-top:40px; }
.footer-content { max-width:1200px; margin:0 auto; }
.footer-grid, .footer-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; max-width:1200px; margin:0 auto 30px; }
.footer-col h4 { color:#ff0; margin-bottom:10px; font-size:1rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:4px; font-size:0.85rem; }
.footer-col a { color:#888; text-decoration:none; }
.footer-col a:hover { color:#0f0; text-decoration:underline; }
.footer-extras, .footer-bottom { text-align:center; padding-top:20px; border-top:1px dashed #333; }
.universe-counter, #universeCount { font-size:1.3rem; color:#f0f; margin:10px 0; }
#do-not-press, #doNotPress, .do-not-press { display:inline-block; margin-top:15px; padding:14px 30px; font-size:1.2rem; font-weight:bold; background:#f00; color:#fff; border:4px dashed #ff0; cursor:pointer; animation:pulse-glow 1s infinite; }
#do-not-press:hover, #doNotPress:hover, .do-not-press:hover { background:#900; }

/* ── MODALS ── */
.modal, #panic-modal, #forbidden-modal { position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:2000; display:none; align-items:center; justify-content:center; }
.modal.active, .modal.show, #panic-modal.active, #forbidden-modal.active { display:flex; }
.modal-content, .modal-box { background:#111; border:3px solid #f00; padding:30px; max-width:500px; text-align:center; position:relative; }
.modal-close { position:absolute; top:10px; right:15px; font-size:1.5rem; color:#f00; cursor:pointer; }
.modal-body { padding:20px; }

/* ── SECRET CONSOLE ── */
#secret-console, #consolePanel { position:fixed; bottom:0; left:0; right:0; background:#000; border-top:2px solid #0f0; height:0; overflow:hidden; transition:height 0.3s; z-index:1500; font-family:'Courier New',monospace; }
#secret-console.open, #consolePanel.open { height:200px; }
#console-output, #consoleBody { padding:10px; height:160px; overflow-y:auto; color:#0f0; font-size:0.85rem; }
#console-input, #consoleInput { width:100%; padding:8px; background:#000; color:#0f0; border:none; border-top:1px solid #0f0; font-family:inherit; outline:none; }
.console-header { display:flex; justify-content:space-between; padding:8px 10px; background:#111; border-bottom:1px solid #0f0; color:#ff0; font-weight:bold; }
.console-close { cursor:pointer; color:#f00; }
.console-prompt { color:#ff0; }

/* ── CURSOR TRAIL ── */
.alpaca-cursor { position:fixed; pointer-events:none; font-size:18px; z-index:9999; opacity:0.9; transition:opacity 0.5s; }

/* ── FAKE ALERT ── */
#system-alert, .fake-alert { background:#f00; color:#fff; text-align:center; padding:8px; font-weight:bold; animation:blink 0.6s step-end infinite; position:fixed; bottom:60px; left:0; right:0; z-index:1001; display:none; }
#system-alert.visible, .fake-alert.visible { display:block; }

/* ── MARQUEE ── */
.marquee-text { overflow:hidden; white-space:nowrap; }
.marquee-text span { display:inline-block; animation:marquee 12s linear infinite; }

/* ── EXECUTIVE MODE ── */
body.executive-mode { filter:invert(1) hue-rotate(180deg); }
body.executive-mode .alpaca { animation-duration:0.5s; }

/* ── PAGE BACKGROUNDS ── */
.page-about .hero, .page-hero.about-hero { background:linear-gradient(135deg,#1a001a,#000033); }
.page-careers .hero, .page-hero.careers-hero { background:linear-gradient(135deg,#001a00,#1a1a00); }
.page-timeline .hero, .page-hero.timeline-hero { background:linear-gradient(135deg,#1a0000,#001a1a); }
.page-emergency .hero, .page-hero.emergency-hero { background:#300; }
.page-investor .hero, .page-hero.investor-hero { background:linear-gradient(135deg,#001a00,#001a1a); }
.page-volcano .hero { background:linear-gradient(180deg,#1a0000,#ff4500); }
.page-contact .hero { background:linear-gradient(135deg,#000,#1a1a1a); }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .hero h1, .hero-title, .page-title, h1.glitch { font-size:1.8rem; }
  .nav-menu, .navbar .nav-links, #mainNav .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:#111; flex-direction:column; padding:10px; border-bottom:3px dashed #0f0; }
  .nav-menu.show, .navbar .nav-links.show, #mainNav .nav-links.show { display:flex; }
  .mobile-menu-btn, .mobile-toggle { display:block; }
  .hero-ctas, .cta-cluster { flex-direction:column; align-items:center; }
  .cta, .btn { width:100%; max-width:300px; text-align:center; }
  .features-grid, .feature-grid, .metrics-grid, .alpaca-grid { grid-template-columns:1fr; }
  .chart-container { height:200px; }
  .chart-bar { width:25px; }
  .job-card { flex-direction:column; align-items:flex-start; }
}

/* ── PRINT ── */
@media print {
  body { background:#fff; color:#000; }
  .nav, .navbar, #mainNav, #matrix-canvas, #matrixRain, #matrix-bg, #lightning-overlay, #vhs-static, .scanline, .ticker-row, .do-not-press, #do-not-press { display:none; }
}