/* css/styles.css */
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --primary-color:#8b5cf6;
  --primary-dark:#7c3aed;
  --secondary-color:#a855f7;
  --accent-color:#c084fc;
  --text-primary:#ffffff;
  --text-secondary:#a3a3a3;
  --text-muted:#737373;
  --bg-primary:#000000;
  --bg-secondary:#0a0a0a;
  --bg-card:#111111;
  --bg-card-hover:#1a1a1a;
  --border-color:#262626;
  --gradient-1:linear-gradient(135deg,#8b5cf6 0%,#a855f7 100%);
  --gradient-2:linear-gradient(135deg,#7c3aed 0%,#c084fc 100%);
  --gradient-blur:linear-gradient(135deg,rgba(139,92,246,0.1) 0%,rgba(168,85,247,0.1) 100%);
  --font-primary:'Outfit',sans-serif;
  --font-secondary:'Inter',sans-serif;
  --container-padding:2rem;
  --section-padding:6rem 0;
  --card-padding:2rem;
  --radius-sm:0.5rem;
  --radius-md:1rem;
  --radius-lg:1.5rem;
  --radius-xl:2rem;
  --radius-full:999px;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1);
  --shadow-glow:0 0 40px rgba(139,92,246,0.3);
  --header-h:80px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-secondary);
  line-height:1.6;
  color:var(--text-primary);
  background-color:var(--bg-primary);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.nav-open{overflow:hidden}
img,svg,video,canvas{max-width:100%;height:auto}

.hero,.service-card,.innovative-card,.industry-card,.process-card{transform:translateZ(0);backface-visibility:hidden}
.service-card,.innovative-card,.industry-card{contain:layout style paint}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .network-node,.particle,.node-pulse{animation:none !important}
}

/* Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--font-primary);font-weight:600;line-height:1.2}
h1{font-size:3.5rem;font-weight:700}
h2{font-size:2.5rem;font-weight:600}
h3{font-size:1.75rem;font-weight:600}
h4{font-size:1.25rem;font-weight:500}
p{color:var(--text-secondary);font-size:1.125rem}
a{text-decoration:none;color:inherit;transition:all 0.3s ease}

/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 var(--container-padding)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.875rem 2rem;border-radius:var(--radius-md);
  font-weight:500;font-size:1rem;cursor:pointer;border:none;min-width:140px;
  transition:all 0.3s ease;
}
.btn-primary{background:var(--gradient-1);color:var(--text-primary);box-shadow:var(--shadow-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(139,92,246,0.4)}
.btn-secondary{background:transparent;color:var(--text-primary);border:2px solid var(--primary-color)}
.btn-secondary:hover{background:var(--primary-color);transform:translateY(-2px)}
.btn-full{width:100%}

/* Skip link */
.skip-link{
  position:absolute;top:-40px;left:6px;background:var(--primary-color);
  color:white;padding:8px;border-radius:4px;z-index:1001;transition:top 0.3s;
}
.skip-link:focus{top:6px}

/* Header */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(0,0,0,0.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-color);
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .header{background:rgba(0,0,0,0.95)}
}
.navbar{height:var(--header-h);display:flex;align-items:center}
.nav-container{
  width:100%;
  max-width:1200px;margin:0 auto;padding:0 var(--container-padding);
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{font-family:var(--font-primary);font-size:1.5rem;font-weight:700}
.logo-link{display:flex;align-items:center;gap:0.75rem}
.logo-image{width:48px;height:48px;object-fit:contain}
.logo-text{
  background:var(--gradient-1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.nav-menu{display:flex;align-items:center}
.nav-list{display:flex;list-style:none;gap:2rem}
.nav-link{color:var(--text-secondary);font-weight:500;position:relative;padding:0.5rem 0}
.nav-link:hover{color:var(--text-primary)}
.nav-link::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:2px;
  background:var(--gradient-1);transition:width 0.3s ease;
}
.nav-link:hover::after{width:100%}

/* Bigger touch target */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  cursor:pointer;background:transparent;border:1px solid var(--text-primary);
  border-radius:8px;color:var(--text-primary);
  transition:all 0.3s ease;
  align-items:center;justify-content:center;
  touch-action:manipulation;
}
.nav-toggle:hover{background:var(--text-primary);color:var(--bg-primary)}
.nav-toggle:focus{outline:2px solid var(--primary-color);outline-offset:2px}
.nav-toggle.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}

/* Main */
.main{padding-top:var(--header-h)}

/* Hero */
.hero{
  padding:var(--section-padding);
  min-height:calc(100vh - var(--header-h));
  display:flex;align-items:center;position:relative;overflow:hidden;
}
@supports (height: 100svh){
  .hero{min-height:calc(100svh - var(--header-h))}
}
@supports (height: 100dvh){
  .hero{min-height:calc(100dvh - var(--header-h))}
}
.hero::before{
  content:'';position:absolute;inset:0;background:var(--gradient-blur);z-index:-1;
}
.hero-container{
  max-width:1200px;margin:0 auto;padding:0 var(--container-padding);
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.hero-content{z-index:2}
.hero-title{margin-bottom:1.5rem;line-height:1.1}
.highlight{
  background:var(--gradient-1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-subtitle{margin-bottom:2.5rem;font-size:1.25rem;max-width:500px}
.hero-buttons{display:flex;gap:1.5rem;flex-wrap:wrap}

.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.hero-network{position:relative;width:100%;display:flex;align-items:center;justify-content:center;z-index:2}
.network-container{
  position:relative;
  width:min(500px,100%);
  aspect-ratio:1 / 1;
  overflow:hidden;
}
.network-connections{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.connection-line{filter:drop-shadow(0 0 5px currentColor)}
.network-node{
  position:absolute;display:flex;flex-direction:column;align-items:center;
  cursor:pointer;z-index:10;transition:all 0.3s ease;
}
.network-node:hover{transform:scale(1.08)}
.central-node{top:50%;left:50%;transform:translate(-50%,-50%)}
.ai-node{top:20%;right:15%;animation:nodeFloat 4s ease-in-out infinite}
.design-node{top:50%;right:5%;animation:nodeFloat 4s ease-in-out infinite 1s}
.transform-node{bottom:20%;left:20%;animation:nodeFloat 4s ease-in-out infinite 2s}
.web-node{top:10%;left:10%;animation:nodeFloat 4s ease-in-out infinite 0.5s}
.cloud-node{top:5%;left:50%;transform:translateX(-50%);animation:nodeFloat 4s ease-in-out infinite 1.5s}
.analytics-node{bottom:5%;right:20%;animation:nodeFloat 4s ease-in-out infinite 2.5s}
.mobile-node{bottom:10%;left:10%;animation:nodeFloat 4s ease-in-out infinite 3s}
.consulting-node{top:10%;right:5%;animation:nodeFloat 4s ease-in-out infinite 3.5s}

.node-core{
  width:60px;height:60px;border-radius:50%;
  background:rgba(139,92,246,0.1);
  border:2px solid rgba(139,92,246,0.5);
  display:flex;align-items:center;justify-content:center;
  position:relative;backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(139,92,246,0.2);
}
.central-node .node-core{
  width:80px;height:80px;
  background:radial-gradient(circle,rgba(139,92,246,0.3),rgba(139,92,246,0.1));
  border:3px solid rgba(139,92,246,0.8);
  padding:0.75rem;
}
.central-logo{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px rgba(139,92,246,0.6))}

.ai-node .node-core{border-color:rgba(139,92,246,0.8);background:rgba(139,92,246,0.15)}
.design-node .node-core{border-color:rgba(6,182,212,0.8);background:rgba(6,182,212,0.15)}
.transform-node .node-core{border-color:rgba(16,185,129,0.8);background:rgba(16,185,129,0.15)}
.web-node .node-core{border-color:rgba(245,158,11,0.8);background:rgba(245,158,11,0.15)}
.cloud-node .node-core{border-color:rgba(59,130,246,0.8);background:rgba(59,130,246,0.15)}
.analytics-node .node-core{border-color:rgba(239,68,68,0.8);background:rgba(239,68,68,0.15)}
.mobile-node .node-core{border-color:rgba(236,72,153,0.8);background:rgba(236,72,153,0.15)}
.consulting-node .node-core{border-color:rgba(132,204,22,0.8);background:rgba(132,204,22,0.15)}

.node-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 8px currentColor)}
.node-icon svg{width:100%;height:100%;color:inherit}
.ai-node .node-icon{color:#8b5cf6}
.design-node .node-icon{color:#06b6d4}
.transform-node .node-icon{color:#10b981}
.web-node .node-icon{color:#f59e0b}
.cloud-node .node-icon{color:#3b82f6}
.analytics-node .node-icon{color:#ef4444}
.mobile-node .node-icon{color:#ec4899}
.consulting-node .node-icon{color:#84cc16}

.node-pulse{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;border-radius:50%;
  border:2px solid rgba(139,92,246,0.6);
  animation:pulse 2s ease-out infinite;
}
.design-node .node-pulse{border-color:rgba(6,182,212,0.6)}
.transform-node .node-pulse{border-color:rgba(16,185,129,0.6)}
.web-node .node-pulse{border-color:rgba(245,158,11,0.6)}
.cloud-node .node-pulse{border-color:rgba(59,130,246,0.6)}
.analytics-node .node-pulse{border-color:rgba(239,68,68,0.6)}
.mobile-node .node-pulse{border-color:rgba(236,72,153,0.6)}
.consulting-node .node-pulse{border-color:rgba(132,204,22,0.6)}

.node-label{
  margin-top:0.8rem;font-size:0.8rem;font-weight:600;color:var(--text-primary);
  text-align:center;white-space:nowrap;text-shadow:0 2px 4px rgba(0,0,0,0.5);
}
.central-node .node-label{
  font-size:1rem;font-weight:700;background:var(--gradient-1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.particle-field{position:absolute;inset:0;pointer-events:none;z-index:5}
.particle{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:rgba(139,92,246,0.8);
  box-shadow:0 0 10px rgba(139,92,246,0.8);
}
.particle-1{top:20%;left:30%;animation:particleFloat 8s ease-in-out infinite;background:rgba(139,92,246,0.8)}
.particle-2{top:70%;left:80%;animation:particleFloat 10s ease-in-out infinite 2s;background:rgba(6,182,212,0.8)}
.particle-3{top:40%;left:10%;animation:particleFloat 12s ease-in-out infinite 4s;background:rgba(16,185,129,0.8)}
.particle-4{top:80%;left:40%;animation:particleFloat 9s ease-in-out infinite 1s;background:rgba(139,92,246,0.6)}
.particle-5{top:10%;left:70%;animation:particleFloat 11s ease-in-out infinite 3s;background:rgba(6,182,212,0.6)}
.particle-6{top:60%;left:60%;animation:particleFloat 7s ease-in-out infinite 5s;background:rgba(16,185,129,0.6)}
.particle-7{top:30%;left:80%;animation:particleFloat 9s ease-in-out infinite 1.5s;background:rgba(245,158,11,0.7)}
.particle-8{top:85%;left:70%;animation:particleFloat 11s ease-in-out infinite 3.5s;background:rgba(59,130,246,0.7)}
.particle-9{top:15%;left:40%;animation:particleFloat 8s ease-in-out infinite 2.5s;background:rgba(239,68,68,0.6)}
.particle-10{top:75%;left:20%;animation:particleFloat 10s ease-in-out infinite 4.5s;background:rgba(236,72,153,0.7)}

.hero-gradient{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:400px;height:400px;background:var(--gradient-1);
  border-radius:50%;filter:blur(100px);opacity:0.3;z-index:-1;
  animation:float 6s ease-in-out infinite;
}

.node-pulse,.particle,.network-node{will-change:transform,opacity}

@keyframes float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-20px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes nodeFloat{
  0%,100%{transform:translateY(0) translateX(0)}
  25%{transform:translateY(-10px) translateX(5px)}
  50%{transform:translateY(5px) translateX(-3px)}
  75%{transform:translateY(-5px) translateX(8px)}
}
@keyframes particleFloat{
  0%,100%{transform:translateY(0) translateX(0);opacity:0.8}
  25%{transform:translateY(-20px) translateX(15px);opacity:1}
  50%{transform:translateY(10px) translateX(-10px);opacity:0.6}
  75%{transform:translateY(-15px) translateX(20px);opacity:0.9}
}

/* Sections */
.services,.about,.contact,.faq,.innovative-services,.compliance,.process,.industries{padding:var(--section-padding)}
.section-header{text-align:center;margin-bottom:4rem}
.section-title{margin-bottom:1rem}
.section-subtitle{max-width:600px;margin:0 auto}

/* Innovative Services */
.innovative-services{background:var(--bg-primary)}
.innovative-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem}
.innovative-card{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);overflow:hidden;transition:all 0.3s ease;position:relative;
}
.innovative-card:hover{transform:translateY(-8px);border-color:var(--primary-color);box-shadow:var(--shadow-glow)}
.card-mockup{height:250px;background:#1a1a1a;position:relative;overflow:hidden;border-bottom:1px solid var(--border-color)}
.card-content{padding:1.5rem}
.card-title{color:var(--text-primary);margin-bottom:1rem;font-size:1.25rem;font-weight:600}
.card-description{color:var(--text-secondary);line-height:1.6;font-size:0.95rem}
.card-list{margin-top:0.75rem;padding-left:1.2rem}
.card-list li{margin:0.4rem 0;color:var(--text-secondary);font-size:0.95rem}

/* Chat mockup */
.mockup-chat{padding:1rem;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.chat-messages{display:flex;flex-direction:column;gap:0.75rem}
.chat-bubble{border-radius:12px;padding:0.75rem 1rem;max-width:70%;position:relative}
.chat-bubble.user{background:var(--primary-color);align-self:flex-end;height:20px}
.chat-bubble.bot{background:#333;align-self:flex-start;height:16px}
.chat-input{display:flex;gap:0.5rem;margin-top:1rem}
.chat-input input{flex:1;background:#2a2a2a;border:1px solid #404040;border-radius:8px;padding:0.5rem;color:#999;font-size:0.875rem}
.send-btn{background:var(--primary-color);border:none;border-radius:8px;color:#fff;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* Enhanced AI Agent Card */
.ai-agent-card .card-mockup{height:250px}
.ai-agent-card .mockup-chat{padding:0;height:100%}
.chat-header{background:#1a1a1a;padding:0.75rem 1rem;border-bottom:1px solid #333;display:flex;align-items:center;gap:0.75rem}
.agent-avatar{width:32px;height:32px;background:#2563eb;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem}
.agent-info{flex:1}
.agent-name{font-size:0.875rem;font-weight:600;color:var(--text-primary);margin-bottom:0.125rem}
.agent-status{font-size:0.75rem;color:#10b981;display:flex;align-items:center;gap:0.25rem}
.agent-status::before{content:'●';color:#10b981;font-size:0.5rem}
.ai-agent-card .chat-messages{padding:1rem;height:130px;overflow-y:auto;gap:0.5rem}
.ai-agent-card .chat-bubble{border-radius:12px;padding:0.75rem 1rem;max-width:85%;height:auto;transition:opacity 0.5s ease,visibility 0.5s ease}
.ai-agent-card .chat-bubble.user{background:var(--primary-color);align-self:flex-end;margin-left:auto}
.ai-agent-card .chat-bubble.bot{background:#2a2a2a;align-self:flex-start;border:1px solid #404040}
.message-content{color:var(--text-primary);font-size:0.8rem;line-height:1.4;margin-bottom:0.25rem}
.message-time{font-size:0.7rem;color:var(--text-secondary);opacity:0.7}
.appointment-slots{margin:0.5rem 0;display:flex;flex-direction:column;gap:0.25rem}
.time-slot{background:#1a1a1a;border:1px solid #404040;border-radius:6px;padding:0.375rem 0.5rem;font-size:0.7rem;color:var(--text-primary)}
.ai-agent-card .chat-input{padding:0 1rem 0.75rem;margin-top:0}
.ai-agent-card .chat-input input{padding:0.5rem;font-size:0.875rem}
.ai-agent-card .send-btn{width:36px;height:36px}
.typing-demo .message-content::after{content:'|';animation:blink 1s infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Browser mockup (single definition, no конфликтов) */
.mockup-browser{height:100%;background:#2a2a2a}
.browser-header{height:40px;background:#1e1e1e;display:flex;align-items:center;padding:0 1rem;border-bottom:1px solid #404040}
.browser-dots{display:flex;gap:0.5rem}
.dot{width:12px;height:12px;border-radius:50%}
.dot.red{background:#ff5f56}
.dot.yellow{background:#ffbd2e}
.dot.green{background:#27ca3f}
.browser-content{height:calc(100% - 40px);background:#1a1a1a;padding:1.25rem;display:flex;align-items:center;justify-content:center}

/* Dev dashboard (scoped metrics to avoid collision) */
.dev-dashboard{width:100%;display:flex;flex-direction:column;gap:1rem}
.dev-dashboard .dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}
.dev-dashboard .project-title{font-size:0.85rem;font-weight:600;color:#e2e8f0}
.status-badge{padding:0.25rem 0.75rem;border-radius:12px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.status-badge.live{background:rgba(34,197,94,0.2);color:#22c55e;border:1px solid rgba(34,197,94,0.3)}
.dev-dashboard .dashboard-metrics{display:flex;gap:0.75rem;margin-bottom:1rem}
.dev-dashboard .metric-card{
  background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.2);
  border-radius:6px;padding:0.75rem;flex:1;text-align:center;
}
.dev-dashboard .metric-label{font-size:0.65rem;color:#94a3b8;margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.05em}
.dev-dashboard .metric-value{font-size:1.1rem;font-weight:700;color:#8b5cf6}
.dev-pipeline{display:flex;align-items:center;justify-content:center;gap:0.5rem}
.pipeline-step{padding:0.4rem 0.8rem;border-radius:4px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;transition:all 0.3s ease}
.pipeline-step.completed{background:rgba(34,197,94,0.2);color:#22c55e;border:1px solid rgba(34,197,94,0.3)}
.pipeline-step.active{background:rgba(139,92,246,0.2);color:#8b5cf6;border:1px solid rgba(139,92,246,0.4);box-shadow:0 0 0 2px rgba(139,92,246,0.1)}
.pipeline-arrow{color:#64748b;font-weight:bold;font-size:0.9rem}

/* Terminal mockup */
.mockup-terminal{background:#1e1e1e;padding:1rem;font-family:'Courier New',monospace;height:100%;display:flex;flex-direction:column}
.terminal-header{color:#999;font-size:0.875rem;margin-bottom:1rem;padding:0.5rem;background:#2a2a2a;border-radius:4px}
.terminal-content{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.terminal-line{color:#fff;font-size:0.875rem;margin-bottom:0.5rem}
.terminal-prompt{display:flex;align-items:center;gap:0.5rem;background:#2a2a2a;padding:0.5rem;border-radius:4px;margin-top:1rem}
.prompt-text{color:#999;font-size:0.875rem}
.cursor{color:var(--primary-color);font-weight:bold}

/* Workflow automations mockup (renamed classes to avoid collision) */
.mockup-dashboard{display:grid;grid-template-columns:140px 1fr;height:100%;background:#1a1a1a}
.dashboard-sidebar{background:#2a2a2a;padding:1rem 0.75rem;border-right:1px solid #404040}
.sidebar-item{font-size:0.75rem;color:#999;padding:0.5rem 0;cursor:pointer}
.sidebar-item.active{color:var(--primary-color);font-weight:500}
.sidebar-item:first-child{font-weight:600;color:#ccc;margin-bottom:0.5rem}
.dashboard-main{padding:1rem;display:flex;flex-direction:column;gap:1rem}
.wa-metric-card{background:#2a2a2a;padding:0.75rem;border-radius:6px;border:1px solid #404040}
.wa-metric-label{font-size:0.75rem;color:#999;margin-bottom:0.25rem}
.wa-metric-value{font-size:1rem;color:#4ade80;font-weight:600;margin-bottom:0.5rem}
.wa-metric-chart{display:flex;gap:2px;align-items:end;height:30px}
.wa-chart-bar{background:var(--primary-color);width:8px;border-radius:1px;min-height:4px}
.wa-metric-display{text-align:center;margin-top:0.5rem}
.wa-metric-number{font-size:1.5rem;color:#fff;font-weight:700}
.wa-metric-subtitle{font-size:0.75rem;color:#999}

/* Meeting mockup */
.mockup-meeting{background:#1a1a1a;padding:1rem;height:100%;display:flex;flex-direction:column;gap:0.75rem}
.meeting-controls{display:flex;flex-wrap:wrap;gap:0.5rem}
.control-item{display:flex;align-items:center;gap:0.25rem;background:#2a2a2a;padding:0.25rem 0.5rem;border-radius:4px;font-size:0.75rem;color:#999}
.control-item.present{background:#dc2626;color:white}
.status-dot{width:8px;height:8px;border-radius:50%}
.status-dot.green{background:#4ade80}
.status-dot.gray{background:#6b7280}
.meeting-participants{display:flex;gap:0.75rem;margin-top:0.5rem}
.participant{display:flex;flex-direction:column;align-items:center;gap:0.25rem;font-size:0.75rem;color:#999}
.participant-avatar{width:40px;height:40px;background:var(--primary-color);border-radius:50%;position:relative}
.participant-avatar::after{content:'';position:absolute;bottom:2px;right:2px;width:12px;height:12px;background:#4ade80;border:2px solid #1a1a1a;border-radius:50%}
.meeting-notes{margin-top:auto;background:#2a2a2a;padding:0.75rem;border-radius:6px}
.note-title{font-size:0.75rem;color:#999;margin-bottom:0.5rem}
.note-lines{display:flex;flex-direction:column;gap:0.25rem}
.note-line{height:4px;background:#404040;border-radius:2px}
.note-line:nth-child(1){width:80%}
.note-line:nth-child(2){width:60%}
.note-line:nth-child(3){width:70%}

/* Services */
.services{background:var(--bg-secondary)}
.service-categories{display:flex;flex-direction:column;gap:4rem}
.service-category{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);padding:3rem 2rem;transition:all 0.3s ease;
}
.service-category:hover{border-color:var(--primary-color);box-shadow:var(--shadow-glow)}
.category-header{text-align:center;margin-bottom:3rem}
.category-icon{margin:0 auto 1.5rem;width:fit-content}
.category-title{font-size:1.75rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem;line-height:1.3}
.category-description{color:var(--text-secondary);font-size:1.125rem;max-width:600px;margin:0 auto}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
.service-card{
  background:var(--bg-card);
  padding:var(--card-padding);
  border-radius:var(--radius-lg);
  border:1px solid var(--border-color);
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:'';position:absolute;inset:0;background:var(--gradient-blur);
  opacity:0;transition:opacity 0.3s ease;z-index:1;
}
.service-card:hover::before{opacity:1}
.service-card:hover{transform:translateY(-8px);border-color:var(--primary-color);box-shadow:var(--shadow-glow)}
.service-card>*{position:relative;z-index:2}
.service-title{margin-bottom:1rem;color:var(--text-primary)}
.service-description{line-height:1.7}

/* About */
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-title{margin-bottom:1.5rem}
.about-description{margin-bottom:2rem;line-height:1.7}
.about-features{display:flex;flex-direction:column;gap:1rem}
.feature-item{display:flex;align-items:center;gap:1rem}
.feature-icon{width:24px;height:24px;background:var(--gradient-1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;font-size:0.875rem}
.feature-text{color:var(--text-secondary);font-weight:500}
.about-visual{position:relative;height:400px}
.about-gradient{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:300px;height:300px;background:var(--gradient-2);
  border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
  filter:blur(80px);opacity:0.7;animation:morph 8s ease-in-out infinite;
}
@keyframes morph{0%,100%{border-radius:30% 70% 70% 30% / 30% 30% 70% 70%}50%{border-radius:70% 30% 30% 70% / 70% 70% 30% 30%}}

/* Compliance */
.compliance{background:var(--bg-primary);text-align:center}
.compliance-content{max-width:1000px;margin:0 auto}
.compliance-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:var(--gradient-1);color:var(--text-primary);
  padding:0.5rem 1rem;border-radius:var(--radius-full);
  font-size:0.875rem;font-weight:500;margin-bottom:2rem;
}
.compliance-badge .badge-icon{width:16px;height:16px;color:var(--text-primary)}
.compliance-title{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:600;line-height:1.3;color:var(--text-primary);margin:0}

/* Process */
.process{background:var(--bg-secondary)}
.process-badge{
  display:inline-flex;align-items:center;gap:0.5rem;background:var(--gradient-1);
  color:var(--text-primary);padding:0.5rem 1rem;border-radius:var(--radius-full);
  font-size:0.875rem;font-weight:500;margin-bottom:1rem;
}
.process-badge .badge-icon{width:16px;height:16px;color:var(--text-primary)}
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:3rem}
.process-card{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);overflow:hidden;transition:all 0.3s ease;position:relative;
}
.process-card:hover{transform:translateY(-8px);border-color:var(--primary-color);box-shadow:var(--shadow-glow)}
.process-mockup{height:300px;background:var(--bg-secondary);position:relative;overflow:hidden}

/* Discovery dashboard */
.discovery-dashboard{display:flex;align-items:center;justify-content:space-between;width:100%;gap:2rem}
.chart-container{flex:1}
.chart-bars{display:flex;align-items:end;gap:0.5rem;height:100px}
.chart-bars .bar{
  background:var(--gradient-1);width:20px;border-radius:2px;min-height:20px;
  animation:barGrow 2s ease-out infinite alternate;
}
@keyframes barGrow{0%{transform:scaleY(0.7)}100%{transform:scaleY(1)}}
.target-icon{flex-shrink:0}
.target-circles{position:relative;width:80px;height:80px}
.circle{position:absolute;border:2px solid var(--primary-color);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.circle.outer{width:80px;height:80px;opacity:0.3}
.circle.middle{width:50px;height:50px;opacity:0.6}
.circle.inner{width:25px;height:25px;opacity:0.8}
.center-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:var(--primary-color);border-radius:50%}

/* Development interface */
.development-interface{width:100%;max-width:280px}
.code-lines{display:flex;flex-direction:column;gap:0.75rem}
.code-line{height:12px;background:var(--gradient-1);border-radius:2px;width:100%;opacity:0.8}
.code-line.short{width:60%}
.code-line.medium{width:80%}
.code-line:nth-child(even){background:var(--gradient-2)}

/* Launch dashboard */
.launch-dashboard{width:100%;max-width:280px}
.status-items{display:flex;flex-direction:column;gap:1rem}
.status-item{display:flex;align-items:center;gap:0.75rem;padding:0.5rem;background:rgba(139,92,246,0.1);border-radius:6px;font-size:0.875rem;color:var(--text-secondary)}
.status-icon{width:8px;height:8px;border-radius:50%;background:var(--primary-color);flex-shrink:0}
.status-icon.security{background:#10b981}
.status-icon.efficiency{background:#f59e0b}
.status-icon.speed{background:#ef4444}
.status-icon.accuracy{background:var(--primary-color)}
.status-indicator{margin-left:auto;font-size:0.75rem;color:var(--text-muted)}
.status-loading{margin-left:auto}
.loading-spinner{width:12px;height:12px;border:2px solid rgba(139,92,246,0.2);border-top:2px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.status-text{margin-left:auto;font-size:0.75rem;color:var(--text-muted)}
.process-content{padding:2rem}
.process-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem}
.process-description{color:var(--text-secondary);line-height:1.6;margin:0}

/* Industries */
.industries{background:var(--bg-primary)}
.industries-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}
.industry-card{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);padding:2rem;text-align:center;transition:all 0.3s ease;
  position:relative;overflow:hidden;
}
.industry-card:hover{transform:translateY(-8px);border-color:var(--primary-color);box-shadow:var(--shadow-glow)}
.industry-icon{margin:0 auto 1.5rem;width:fit-content}
.industry-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem}
.industry-description{color:var(--text-secondary);line-height:1.6;margin:0}

/* FAQ */
.faq-container{max-width:800px;margin:0 auto}
.faq-item{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);margin-bottom:1rem;overflow:hidden;transition:all 0.3s ease}
.faq-item:hover{border-color:var(--primary-color)}
.faq-question{
  width:100%;background:none;border:none;padding:1.5rem 2rem;text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;color:var(--text-primary);
  font-size:1.125rem;font-weight:500;transition:all 0.3s ease;
}
.faq-question:hover{color:var(--primary-color)}
.faq-question:focus{outline:2px solid var(--primary-color);outline-offset:2px}
.faq-question span{flex:1;margin-right:1rem}
.faq-icon{color:var(--primary-color);transition:transform 0.3s ease;flex-shrink:0}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.faq-item.active .faq-answer{max-height:800px}
.faq-content{padding:1rem 2rem 1rem}
.faq-content p{color:var(--text-secondary);line-height:1.7;margin:1rem 0}
.faq-item.active{background:var(--bg-card-hover)}
.faq-item.active .faq-question{color:var(--primary-color)}

/* Contact */
.contact{background:var(--bg-primary);text-align:center}
.contact-content{max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.contact-title{font-size:clamp(2.5rem,6vw,4rem);font-weight:600;line-height:1.2;color:var(--text-primary);margin-bottom:1.5rem}
.contact-description{font-size:1.125rem;color:var(--text-secondary);line-height:1.6;margin-bottom:3rem;max-width:600px}
.contact-cta{
  display:inline-flex;align-items:center;gap:0.75rem;background:var(--gradient-1);color:var(--text-primary);
  padding:1rem 2rem;border-radius:var(--radius-full);font-size:1rem;font-weight:500;
  transition:all 0.3s ease;cursor:pointer;
}
.contact-cta:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(139,92,246,0.4)}
.cta-arrow{width:20px;height:20px;transition:transform 0.3s ease}
.contact-cta:hover .cta-arrow{transform:translate(2px,-2px)}

/* Footer */
.footer{background:var(--bg-secondary);padding:4rem 0 2rem;border-top:1px solid var(--border-color)}
.footer-content{display:grid;grid-template-columns:1fr 2fr;gap:4rem;margin-bottom:3rem}
.footer-brand{max-width:400px}
.footer-logo-container{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem}
.footer-logo-image{width:56px;height:56px;object-fit:contain}
.footer-logo{
  font-family:var(--font-primary);font-size:1.5rem;font-weight:700;margin-bottom:0;
  background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.footer-tagline{color:var(--text-muted);line-height:1.6}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer-title{font-weight:600;margin-bottom:1rem;color:var(--text-primary)}
.footer-list{list-style:none;display:flex;flex-direction:column;gap:0.75rem}
.footer-link{color:var(--text-muted);transition:color 0.3s ease}
.footer-link:hover{color:var(--text-primary)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid var(--border-color)}
.footer-copyright{color:var(--text-muted)}

/* Focus */
.nav-link:focus,.btn:focus,.contact-cta:focus{outline:2px solid var(--primary-color);outline-offset:2px}

/* Network responsive */
@media (max-width:1024px){
  .network-container{width:min(400px,100%)}
  .node-core{width:50px;height:50px}
  .central-node .node-core{width:70px;height:70px}
  .node-icon{width:20px;height:20px}
  .node-label{font-size:0.7rem}
  .particle{width:3px;height:3px}
  .consulting-node{top:8%;right:8%}
  .web-node{top:8%;left:8%}
  .analytics-node{bottom:8%;right:15%}
  .mobile-node{bottom:8%;left:8%}
}

@media (max-width:768px){
  :root{--container-padding:1rem;--section-padding:4rem 0;--card-padding:1.5rem;--header-h:72px}

  h1{font-size:2.5rem}
  h2{font-size:2rem}
  h3{font-size:1.5rem}
  p{font-size:1rem}

  .nav-toggle{display:inline-flex}
  .nav-menu{
    position:fixed;
    top:var(--header-h);
    left:-100%;
    width:100%;
    height:calc(100vh - var(--header-h));
    background:rgba(0,0,0,0.95);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:left 0.3s ease;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-top:2rem;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  @supports (height: 100svh){
    .nav-menu{height:calc(100svh - var(--header-h))}
  }
  @supports (height: 100dvh){
    .nav-menu{height:calc(100dvh - var(--header-h))}
  }
  .nav-menu.active{left:0}
  .nav-list{flex-direction:column;gap:2rem;padding:0 2rem}
  .nav-item{width:100%}
  .nav-link{display:block;padding:1rem 0;font-size:1.125rem;border-bottom:1px solid var(--border-color)}

  .hero{padding:4rem 0}
  .hero-container{grid-template-columns:1fr;gap:3rem;text-align:center}
  .hero-title{font-size:2.5rem;margin-bottom:1rem}
  .hero-subtitle{font-size:1.125rem;margin-bottom:2rem;max-width:100%}
  .hero-buttons{justify-content:center;gap:1rem}
  .btn{min-width:120px;padding:0.75rem 1.5rem}
  .hero-visual{order:-1}
  .hero-gradient{width:250px;height:250px;filter:blur(60px)}

  .node-label{white-space:normal;max-width:90px;line-height:1.1;margin-top:0.5rem;font-size:0.62rem}
  .network-container{width:min(320px,100%)}
  .node-core{width:40px;height:40px}
  .central-node .node-core{width:60px;height:60px}
  .node-icon{width:18px;height:18px}
  .central-node .node-label{font-size:0.8rem}
  .ai-node{top:10%;right:5%}
  .design-node{top:60%;right:0%}
  .transform-node{bottom:10%;left:10%}

  .analytics-node,.mobile-node,.consulting-node{display:none}
  .particle{width:2px;height:2px}
  .particle-4,.particle-5,.particle-6,.particle-7,.particle-8,.particle-9,.particle-10{display:none}

  .innovative-grid{grid-template-columns:1fr;gap:1.5rem}
  .card-mockup{height:200px}
  .ai-agent-card .card-mockup{height:200px}
  .ai-agent-card .chat-messages{height:110px;padding:0.75rem}

  .process-grid{grid-template-columns:1fr;gap:1.5rem}
  .process-mockup{height:250px}
  .browser-content{padding:0.75rem}
  .dev-dashboard{gap:0.75rem}
  .dev-dashboard .dashboard-header{flex-wrap:wrap;gap:0.5rem;margin-bottom:0.75rem}
  .dev-dashboard .project-title{font-size:0.75rem;flex:1 1 auto;min-width:0}
  .status-badge{font-size:0.6rem;padding:0.2rem 0.5rem;flex-shrink:0}
  .dev-dashboard .dashboard-metrics{gap:0.5rem;margin-bottom:0.5rem}
  .dev-dashboard .metric-card{padding:0.5rem}
  .dev-dashboard .metric-label{font-size:0.55rem}
  .dev-dashboard .metric-value{font-size:1rem}

  .industries-grid{grid-template-columns:1fr;gap:1.5rem}
  .industry-card{padding:1.5rem}

  .services-grid{grid-template-columns:1fr;gap:1.5rem}
  .service-card{text-align:center}

  .about-content{grid-template-columns:1fr;gap:3rem;text-align:center}
  .about-features{align-items:center;padding:0 1rem}
  .feature-item{text-align:left;max-width:100%;width:100%}
  .about-visual{height:250px;order:-1}
  .about-gradient{width:200px;height:200px;filter:blur(50px)}

  .faq-question{padding:1.25rem 1.5rem;font-size:1rem}
  .faq-content{padding:0 1.5rem 1.25rem}

  .contact-title{font-size:2.5rem;line-height:1.3}
  .contact-description{font-size:1rem;margin-bottom:2rem}
  .contact-cta{padding:0.875rem 1.5rem;font-size:0.9rem}

  .footer-content{grid-template-columns:1fr;gap:3rem;text-align:center}
  .footer-links{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}
}

@media (min-width:810px) and (max-width:1199px){
  :root{--container-padding:1.5rem}
  h1{font-size:3rem}
  h2{font-size:2.25rem}
  .hero-title{font-size:3rem}
  .hero-subtitle{font-size:1.125rem}
  .innovative-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:1200px){
  :root{--section-padding:8rem 0}
  h1{font-size:4rem}
  h2{font-size:3rem}
  .hero-title{font-size:4rem}
  .hero-subtitle{font-size:1.375rem}
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .service-card:hover{transform:translateY(-12px)}
  .process-card:hover,.innovative-card:hover{transform:translateY(-12px)}
}

@media (min-width:1400px){
  .container,.nav-container,.hero-container{max-width:1400px}
  .hero-gradient{width:500px;height:500px;filter:blur(120px)}
  .about-gradient{width:400px;height:400px;filter:blur(100px)}
}

@media (max-width:768px) and (orientation:landscape){
  .hero{padding:2rem 0}
  .hero-container{grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
  .hero-visual{order:1}
  .hero-content{text-align:left}
  .hero-title{font-size:2rem}
  .hero-subtitle{font-size:1rem;margin-bottom:1.5rem}
}

/* Print */
@media print{
  *{background:white !important;color:black !important;box-shadow:none !important;text-shadow:none !important}
  .header,.nav-toggle,.hero-visual,.about-visual,.footer{display:none !important}
  .main{padding-top:0 !important}
  .hero,.services,.about,.contact{padding:1rem 0 !important;background:white !important}
  .btn{border:1px solid black !important;background:white !important;color:black !important}
}