/* JHAYCORP - Enhanced Styles for Multi-page Site */
:root{
  --bg:#ffffff;
  --fg:#0b0b0b;
  --muted:#667085;
  --accent:#0b0b0b;
  --card:#fff;
  --glass:rgba(255,255,255,0.6);
  --cyber:#000;
  --cyber-accent:#00ff41;
  --cyber-bg:#0a0a0a;
  --border:#e5e7eb;
  --gradient-1:linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  --gradient-2:linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter,system-ui,Arial,Helvetica,sans-serif;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Header & Navigation */
.site-header{
  background:var(--gradient-2);
  color:#fff;
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(12px);
  transition:all 0.3s ease;
}
.site-header.scrolled{
  box-shadow:var(--shadow-lg);
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0;
}
.brand a{
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:inherit;
}
.brand-logo{width:64px;height:auto;transform:translateY(-2px)}
.brand-title{font-weight:800;letter-spacing:1px;font-size:18px}

.nav{
  display:flex;
  align-items:center;
  gap:24px;
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  opacity:0.95;
  transition:opacity 0.2s ease;
  position:relative;
}
.nav a:hover,.nav a.active{opacity:1}
.nav a.active::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:0;
  right:0;
  height:2px;
  background:#fff;
  border-radius:1px;
}

/* Dropdown Menu */
.dropdown{position:relative}
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  background:#1a1a1a;
  border-radius:8px;
  padding:8px 0;
  min-width:200px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:all 0.3s ease;
  box-shadow:var(--shadow-xl);
  margin-top:8px;
}
.dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown-menu a{
  display:block;
  padding:8px 16px;
  color:#fff;
  text-decoration:none;
  transition:background 0.2s ease;
}
.dropdown-menu a:hover{
  background:rgba(255,255,255,0.1);
}

/* Mobile Menu */
.mobile-toggle{
  display:none;
  flex-direction:column;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:1001;
}
.mobile-toggle span{
  width:25px;
  height:3px;
  background:#fff;
  margin:3px 0;
  transition:0.3s;
  transform-origin:center;
}
.mobile-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(6px, 6px);
}
.mobile-toggle.active span:nth-child(2){
  opacity:0;
}
.mobile-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(6px, -6px);
}

/* Hero Sections */
.hero{
  padding:80px 0;
  background:var(--gradient-1);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23f1f1f1" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity:0.4;
}
.hero-inner{display:flex;gap:40px;align-items:center;position:relative;z-index:2}
.hero-left{flex:1}
.hero-right{width:380px;flex-shrink:0}
.hero-title{font-size:48px;line-height:1.1;margin:0;font-weight:800}
.accent{color:var(--accent)}
.lead{color:var(--muted);margin:16px 0;font-size:18px;line-height:1.6}

/* Service Hero */
.service-hero{
  padding:60px 0;
  background:var(--gradient-1);
  text-align:center;
}
.service-hero-content h1{
  font-size:42px;
  margin:0 0 16px 0;
  font-weight:800;
}
.service-badges{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:20px;
}
.badge{
  background:#f1f1f1;
  color:var(--fg);
  padding:6px 12px;
  border-radius:20px;
  font-size:14px;
  font-weight:600;
}

/* Portfolio Hero */
.portfolio-hero{
  padding:60px 0;
  background:var(--gradient-1);
  text-align:center;
}
.portfolio-filters{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:32px;
}
.filter-btn{
  background:#f1f1f1;
  border:none;
  padding:8px 16px;
  border-radius:20px;
  cursor:pointer;
  transition:all 0.2s ease;
  font-weight:600;
}
.filter-btn.active,.filter-btn:hover{
  background:var(--accent);
  color:#fff;
}

/* Buttons & CTAs */
.actions-hero{margin-top:24px}
.cta{
  display:inline-block;
  background:var(--gradient-2);
  color:#fff;
  padding:14px 24px;
  border-radius:8px;
  text-decoration:none;
  margin-right:12px;
  font-weight:700;
  transition:all 0.3s ease;
  border:none;
  cursor:pointer;
}
.cta:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.ghost{
  display:inline-block;
  color:var(--accent);
  padding:12px 20px;
  border-radius:8px;
  text-decoration:none;
  border:2px solid var(--border);
  transition:all 0.2s ease;
  font-weight:600;
}
.ghost:hover{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}

/* Trust & Stats */
.trust{
  display:flex;
  gap:16px;
  margin-top:20px;
  list-style:none;
  padding:0;
  flex-wrap:wrap;
}
.trust li{color:var(--muted);font-size:14px}

/* Terminal & Code */
.terminal-hero{
  background:#1a1a1a;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-xl);
}
.terminal-header,.code-header{
  background:#2a2a2a;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.terminal-buttons,.code-buttons{display:flex;gap:6px}
.btn{width:12px;height:12px;border-radius:50%}
.btn.red{background:#ff5f56}
.btn.yellow{background:#ffbd2e}
.btn.green{background:#27ca3f}
.terminal-title,.code-title{color:#fff;font-size:13px;font-family:monospace}
.terminal-body,.code-body{padding:16px;font-family:monospace;font-size:13px;line-height:1.4}
.terminal-line,.code-line{color:#00ff41;margin-bottom:4px;opacity:0;animation:terminalType 0.8s forwards}
.terminal-line.delay-1{animation-delay:0.8s}
.terminal-line.delay-2{animation-delay:1.6s}
.terminal-line.delay-3{animation-delay:2.4s}
.terminal-line.delay-4{animation-delay:3.2s}
.terminal-line.delay-5{animation-delay:4s}
.accent-terminal{color:#00ff41 !important;font-weight:bold}
.keyword{color:#569cd6}
.function{color:#dcdcaa}
.string{color:#ce9178}
.comment{color:#6a9955}
.cursor{color:#00ff41;animation:blink 1s infinite}

/* Sections */
.section{padding:60px 0}
.section-lead{font-size:18px;color:var(--muted);margin-bottom:40px;text-align:center;max-width:600px;margin-left:auto;margin-right:auto}

/* Grids */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
}
.service-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:40px;
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:24px;
}

/* Breadcrumbs */
.breadcrumbs {
  background: var(--bg-secondary);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.breadcrumbs ol {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--text-secondary);
  align-items: center;
}
.breadcrumbs a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumbs a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Cards */
.card{
  padding:24px;
  border-radius:12px;
  background:var(--card);
  box-shadow:var(--shadow-md);
  transition:all 0.3s ease;
  border:1px solid var(--border);
  position:relative;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-xl);
}
.card-icon{font-size:32px;margin-bottom:12px}
.card h3{margin:0 0 8px 0;font-weight:700}
.card-link{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  margin-top:12px;
  display:inline-block;
  transition:all 0.2s ease;
}
.card-link:hover{
  text-decoration:underline;
  transform:translateX(4px);
}

/* Portfolio Cards */
.portfolio-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:all 0.3s ease;
  border:1px solid var(--border);
}
.portfolio-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-xl);
}
.portfolio-image{
  height:200px;
  overflow:hidden;
}
.placeholder-image{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:24px;
  color:#fff;
}
.erp-bg{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.web-bg{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}
.auto-bg{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}
.security-bg{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%)}
.portfolio-content{padding:20px}
.portfolio-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0;
}
.portfolio-tags span{
  background:#f1f1f1;
  color:var(--fg);
  padding:4px 8px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
}
.portfolio-stats{
  display:flex;
  gap:12px;
  font-size:14px;
  color:var(--muted);
}

/* Service Pages */
.service-content h2{
  font-size:32px;
  margin-bottom:24px;
}
.feature-list{
  margin:32px 0;
}
.feature{
  display:flex;
  gap:16px;
  margin-bottom:24px;
  align-items:flex-start;
}
.feature-icon{
  font-size:24px;
  flex-shrink:0;
  width:40px;
  text-align:center;
}
.feature-content h3{
  margin:0 0 8px 0;
  font-size:18px;
}

.process-steps{
  margin:32px 0;
}
.step{
  display:flex;
  gap:16px;
  margin-bottom:24px;
  align-items:flex-start;
}
.step-number{
  width:32px;
  height:32px;
  background:var(--accent);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  flex-shrink:0;
}
.step-content h4{
  margin:0 0 8px 0;
  font-size:16px;
}

/* Sidebar */
.service-sidebar{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.pricing-card{
  background:#fff;
  border:2px solid var(--border);
  border-radius:12px;
  padding:24px;
  text-align:center;
}
.price{
  font-size:32px;
  font-weight:800;
  color:var(--accent);
  margin:12px 0;
}
.pricing-card ul{
  list-style:none;
  padding:0;
  margin:20px 0;
}
.pricing-card li{
  padding:8px 0;
  border-bottom:1px solid #f1f1f1;
}
.tech-stack{
  background:#f8f9fa;
  padding:20px;
  border-radius:12px;
}
.tech-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.tech-list span{
  background:#fff;
  border:1px solid var(--border);
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
}

/* Cybersecurity Section */
.cyber-section{
  background:var(--gradient-2);
  color:#fff;
  padding:80px 0;
  position:relative;
}
.cyber-section h2{color:#fff;text-align:center;margin-bottom:12px}
.cyber-card{background:#1a1a1a;border:1px solid #333;color:#fff}
.cyber-card:hover{border-color:#00ff41;box-shadow:0 20px 40px rgba(0,255,65,0.1)}

/* Team Section */
.team-section{
  background:var(--gradient-1);
  padding:80px 0;
}
.team-inner{display:flex;gap:60px;align-items:center}
.team-left{flex:1}
.team-right{width:400px;flex-shrink:0}
.team-stats{display:flex;gap:24px;margin-top:24px}
.stat{text-align:center}
.stat-number{font-size:24px;font-weight:800;color:var(--accent)}
.stat-label{font-size:13px;color:var(--muted);margin-top:4px}

/* CTA Section */
.cta-section{
  background:var(--gradient-1);
  text-align:center;
  padding:80px 0;
}
.cta-inner{max-width:600px;margin:0 auto}
.cta-actions{margin:24px 0}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  padding:32px 0;
  text-align:center;
  background:#fafafa;
}

/* Back to top */
.back-to-top{
  position:fixed;
  bottom:24px;
  right:24px;
  width:48px;
  height:48px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:50%;
  cursor:pointer;
  font-size:18px;
  z-index:1000;
  transition:all 0.3s ease;
}
.back-to-top:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

/* WhatsApp floating button */
.whatsapp-float{
  position:fixed;
  bottom:24px;
  left:24px;
  width:56px;
  height:56px;
  background:#25d366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,0.3);
  z-index:1000;
  transition:all 0.3s ease;
  animation:whatsappPulse 2s infinite;
}
.whatsapp-float:hover{
  transform:scale(1.1);
  box-shadow:0 6px 25px rgba(37,211,102,0.5);
}

@keyframes whatsappPulse{
  0%{box-shadow:0 4px 20px rgba(37,211,102,0.3)}
  50%{box-shadow:0 4px 25px rgba(37,211,102,0.5)}
  100%{box-shadow:0 4px 20px rgba(37,211,102,0.3)}
}

/* Contact Section */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.contact-details{
  margin-top:32px;
}
.contact-item{
  display:flex;
  gap:16px;
  margin-bottom:24px;
  align-items:flex-start;
}
.contact-icon{
  font-size:24px;
  width:40px;
  text-align:center;
  flex-shrink:0;
}
.contact-item h4{
  margin:0 0 4px 0;
  font-size:16px;
  font-weight:600;
}
.contact-item a{
  color:var(--accent);
  text-decoration:none;
}
.contact-item a:hover{
  text-decoration:underline;
}

/* Contact Form */
.contact-form-container{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:32px;
  box-shadow:var(--shadow-md);
}
.contact-form h3{
  margin:0 0 24px 0;
  font-size:24px;
  font-weight:700;
}
.form-group{
  margin-bottom:20px;
}
.form-group label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
  color:var(--fg);
  font-size:14px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:12px 16px;
  border:2px solid var(--border);
  border-radius:8px;
  font-size:14px;
  transition:border-color 0.2s ease;
  font-family:inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.form-group textarea{
  resize:vertical;
  min-height:100px;
}
.form-note{
  font-size:12px;
  color:var(--muted);
  margin-top:16px;
  text-align:center;
}
.contact-form .cta{
  width:100%;
  margin-top:8px;
  justify-content:center;
}

/* Form success/error states */
.form-success{
  background:#d4edda;
  color:#155724;
  padding:12px 16px;
  border-radius:8px;
  margin-bottom:20px;
  display:none;
}
.form-error{
  background:#f8d7da;
  color:#721c24;
  padding:12px 16px;
  border-radius:8px;
  margin-bottom:20px;
  display:none;
}

/* Animations */
.animate{
  opacity:0;
  transform:translateY(20px);
  transition:all 0.8s ease;
}
.animate-in,.animate.visible{
  opacity:1;
  transform:translateY(0);
}
.delay-1{transition-delay:0.1s}
.delay-2{transition-delay:0.2s}

@keyframes terminalType{
  0%{opacity:0;transform:translateX(-10px)}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Responsive Design */
@media(max-width:1024px){
  .service-grid{grid-template-columns:1fr;gap:32px}
  .team-inner{flex-direction:column;gap:40px}
  .team-right{width:100%;max-width:400px}
  .hero-inner{gap:32px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
}

@media(max-width:768px){
  .container{padding:0 16px}
  
  .site-header{
    position:relative;
  }
  .header-inner{
    justify-content:space-between;
  }
  
  .mobile-toggle{display:flex}
  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#1a1a1a;
    flex-direction:column;
    padding:20px;
    gap:16px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:all 0.3s ease;
    border-top:1px solid var(--border);
    z-index:1000;
  }
  .nav.nav-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .nav a{
    padding:12px 0;
    border-bottom:1px solid var(--border);
    color:var(--text);
    text-decoration:none;
    font-weight:500;
  }
  .nav a:hover{
    color:var(--accent);
  }
  .dropdown-menu{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    background:transparent;
    margin:8px 0 0 16px;
    padding:0;
    border:none;
  }
  .dropdown-menu a{
    padding:8px 0;
    font-size:14px;
    color:var(--text-secondary);
  }
  
  .hero-inner{flex-direction:column;text-align:center}
  .hero-right{width:100%;max-width:380px}
  .hero-title{font-size:36px}
  .service-hero-content h1{font-size:32px}
  
  .grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  
  .trust{justify-content:center}
  .team-stats{justify-content:center;flex-wrap:wrap}
  .portfolio-filters{justify-content:center}
  .service-badges{justify-content:center}
  
  .brand-logo{width:56px}
  .service-sidebar{margin-top:32px}
  
  .whatsapp-float{
    bottom:20px;
    left:20px;
    width:52px;
    height:52px;
  }
  .back-to-top{
    bottom:20px;
    right:20px;
    width:44px;
    height:44px;
    font-size:16px;
  }
}