/* Reset e Base */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --primary-color: #2563eb;

    --primary-dark: #1d4ed8;

    --secondary-color: #10b981;

    --accent-color: #f59e0b;

    --text-primary: #1f2937;

    --text-secondary: #6b7280;

    --background: #ffffff;

    --background-light: #f9fafb;

    --border-color: #e5e7eb;

    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 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);

}



body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    line-height: 1.6;

    color: var(--text-primary);

    background: var(--background);

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Header & Navigation */

.header {

    position: fixed;

    top: 0;

    width: 100%;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--border-color);

    z-index: 1000;

    transition: all 0.3s ease;

}



.nav {

    display: flex;

    align-items: center;

justify-content: space-between;

   padding: 1rem 2rem;

   max-width: 1200px;

   margin: 0 auto;

}



.nav-brand h1 {

   font-size: 1.8rem;

   font-weight: 800;

   background: var(--gradient-primary);

   -webkit-background-clip: text;

   -webkit-text-fill-color: transparent;

   background-clip: text;

}



.nav-brand .tagline {

   font-size: 0.8rem;

   color: var(--text-secondary);

   font-weight: 500;

}



.nav-menu {

   display: flex;

   list-style: none;

   gap: 2rem;

}



.nav-menu a {

   text-decoration: none;

   color: var(--text-primary);

   font-weight: 500;

   transition: color 0.3s ease;

   position: relative;

}



.nav-menu a:hover {

   color: var(--primary-color);

}



.nav-menu a::after {

   content: '';

   position: absolute;

   width: 0;

   height: 2px;

   bottom: -5px;

   left: 0;

   background: var(--primary-color);

   transition: width 0.3s ease;

}



.nav-menu a:hover::after {

   width: 100%;

}



.nav-toggle {

   display: none;

   flex-direction: column;

   background: none;

   border: none;

   cursor: pointer;

}



.nav-toggle span {

   width: 25px;

   height: 3px;

   background: var(--text-primary);

   margin: 3px 0;

   transition: 0.3s;

}



/* Hero Section */

.hero {

   min-height: 100vh;

   display: flex;

   align-items: center;

   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

   color: white;

   padding: 6rem 0 2rem;

   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 1000 1000"><polygon fill="rgba(255,255,255,0.05)" points="0,1000 1000,0 1000,1000"/></svg>');

   background-size: cover;

}



.hero-content {

   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 4rem;

   align-items: center;

   max-width: 1200px;

   margin: 0 auto;

   padding: 0 2rem;

   position: relative;

   z-index: 1;

}



.hero-badge {

   display: inline-block;

   background: rgba(255, 255, 255, 0.2);

   padding: 0.5rem 1rem;

   border-radius: 50px;

   font-size: 0.9rem;

   font-weight: 600;

   margin-bottom: 1.5rem;

   backdrop-filter: blur(10px);

   border: 1px solid rgba(255, 255, 255, 0.3);

}



.hero-title {

   font-size: 3.5rem;

   font-weight: 800;

   line-height: 1.1;

   margin-bottom: 1.5rem;

}



.hero-title .highlight {

   background: linear-gradient(135deg, #fbbf24, #f59e0b);

   -webkit-background-clip: text;

   -webkit-text-fill-color: transparent;

   background-clip: text;

}



.hero-description {

   font-size: 1.2rem;

   line-height: 1.6;

   margin-bottom: 2rem;

   opacity: 0.9;

}



.hero-stats {

   display: flex;

   gap: 2rem;

   margin-bottom: 2rem;

}



.stat {

   text-align: center;

}



.stat-number {

   font-size: 2.5rem;

   font-weight: 800;

   color: #fbbf24;

}



.stat-label {

   font-size: 0.9rem;

   opacity: 0.8;

}



.hero-buttons {

   display: flex;

   gap: 1rem;

   flex-wrap: wrap;

}



.btn {

   padding: 1rem 2rem;

   border: none;

   border-radius: 8px;

   font-weight: 600;

   text-decoration: none;

   display: inline-flex;

   align-items: center;

   gap: 0.5rem;

   cursor: pointer;

   transition: all 0.3s ease;

   font-size: 1rem;

}



.btn-primary {

   background: var(--secondary-color);

   color: white;

}



.btn-primary:hover {

   background: #059669;

   transform: translateY(-2px);

   box-shadow: var(--shadow-lg);

}



.btn-secondary {

   background: rgba(255, 255, 255, 0.2);

   color: white;

   border: 2px solid rgba(255, 255, 255, 0.3);

   backdrop-filter: blur(10px);

}



.btn-secondary:hover {

   background: rgba(255, 255, 255, 0.3);

   transform: translateY(-2px);

}



.btn-large {

   padding: 1.25rem 2.5rem;

   font-size: 1.1rem;

}



/* Hero Visual - Orchestrator Diagram */

.hero-visual {

   display: flex;

   justify-content: center;

   align-items: center;

}



.orchestrator-diagram {

   position: relative;

   width: 400px;

   height: 400px;

}



.central-node {

   position: absolute;

   top: 50%;

   left: 50%;

   transform: translate(-50%, -50%);

   width: 120px;

   height: 120px;

   background: rgba(255, 255, 255, 0.2);

   border: 2px solid rgba(255, 255, 255, 0.4);

   border-radius: 50%;

   display: flex;

   flex-direction: column;

   align-items: center;

   justify-content: center;

   backdrop-filter: blur(10px);

   animation: pulse 2s infinite;

}



.central-node i {

   font-size: 2rem;

   margin-bottom: 0.5rem;

}



.central-node span {

   font-size: 0.8rem;

   text-align: center;

   font-weight: 600;

}



.agent-nodes {

   position: relative;

   width: 100%;

   height: 100%;

}



.agent-node {

   position: absolute;

   width: 80px;

   height: 80px;

   background: rgba(255, 255, 255, 0.15);

   border: 1px solid rgba(255, 255, 255, 0.3);

   border-radius: 50%;

   display: flex;

   flex-direction: column;

   align-items: center;

   justify-content: center;

   backdrop-filter: blur(5px);

   animation: float 3s ease-in-out infinite;

}



.agent-node:nth-child(1) {

   top: 10px;

   left: 50%;

   transform: translateX(-50%);

   animation-delay: 0s;

}



.agent-node:nth-child(2) {

   top: 50%;

   right: 10px;

   transform: translateY(-50%);

   animation-delay: 0.5s;

}



.agent-node:nth-child(3) {

   bottom: 10px;

   left: 50%;

   transform: translateX(-50%);

   animation-delay: 1s;

}



.agent-node:nth-child(4) {

   top: 50%;

   left: 10px;

   transform: translateY(-50%);

   animation-delay: 1.5s;

}



.agent-node i {

   font-size: 1.2rem;

   margin-bottom: 0.25rem;

}



.agent-node span {

   font-size: 0.6rem;

   text-align: center;

   font-weight: 500;

}



@keyframes pulse {

   0%, 100% { transform: translate(-50%, -50%) scale(1); }

   50% { transform: translate(-50%, -50%) scale(1.05); }

}



@keyframes float {

   0%, 100% { transform: translateY(0); }

   50% { transform: translateY(-10px); }

}



/* Problem Section */

.problem {

   padding: 6rem 0;

   background: var(--background-light);

}



.problem h2 {

   text-align: center;

   font-size: 2.5rem;

   font-weight: 700;

   margin-bottom: 3rem;

   color: var(--text-primary);

}



.problem-grid {

   display: grid;

   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

   gap: 2rem;

}



.problem-item {

   background: white;

   padding: 2rem;

   border-radius: 12px;

   text-align: center;

   box-shadow: var(--shadow-md);

   transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.problem-item:hover {

   transform: translateY(-5px);

   box-shadow: var(--shadow-lg);

}



.problem-item i {

   font-size: 3rem;

   color: #ef4444;

   margin-bottom: 1rem;

}



.problem-item h3 {

   font-size: 1.25rem;

   font-weight: 600;

   margin-bottom: 1rem;

   color: var(--text-primary);

}



.problem-item p {

   color: var(--text-secondary);

   line-height: 1.5;

}



/* Solution Section */

.solution {

   padding: 6rem 0;

   background: white;

}



.solution h2 {

   text-align: center;

   font-size: 2.5rem;

   font-weight: 700;

   margin-bottom: 3rem;

   color: var(--text-primary);

}



.solution-visual {

   display: flex;

   flex-direction: column;

   gap: 1rem;

   max-width: 800px;

   margin: 0 auto;

}



.layer {

   background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));

   color: white;

   padding: 2rem;

   border-radius: 12px;

   text-align: center;

   position: relative;

   overflow: hidden;

}



.layer::before {

   content: '';

   position: absolute;

   top: 0;

   left: -100%;

   width: 100%;

   height: 100%;

   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

   transition: left 0.5s;

}



.layer:hover::before {

   left: 100%;

}



.layer h3 {

   font-size: 1.5rem;

   font-weight: 600;

   margin-bottom: 0.5rem;

}



.layer p {

   opacity: 0.9;

   font-size: 1rem;

}



/* Features Section */

.features {

   padding: 6rem 0;

   background: var(--background-light);

}



.features h2 {

   text-align: center;

   font-size: 2.5rem;

   font-weight: 700;

   margin-bottom: 3rem;

   color: var(--text-primary);

}



.features-grid {

   display: grid;

   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

   gap: 2rem;

}



.feature-card {

   background: white;

   padding: 2.5rem;

   border-radius: 16px;

   box-shadow: var(--shadow-md);

   transition: all 0.3s ease;

   border: 1px solid var(--border-color);

}



.feature-card:hover {

   transform: translateY(-8px);

   box-shadow: var(--shadow-xl);

   border-color: var(--primary-color);

}



.feature-icon {

   width: 60px;

   height: 60px;

   background: var(--gradient-primary);

   border-radius: 12px;

   display: flex;

   align-items: center;

   justify-content: center;

   margin-bottom: 1.5rem;

}



.feature-icon i {

   font-size: 1.5rem;

   color: white;

}



.feature-card h3 {

   font-size: 1.5rem;

   font-weight: 600;

   margin-bottom: 1rem;

   color: var(--text-primary);

}



.feature-card p {

   color: var(--text-secondary);

   line-height: 1.6;

   margin-bottom: 1.5rem;

}



.feature-benefits {

   display: flex;

   flex-direction: column;

   gap: 0.5rem;

}



.feature-benefits span {

   color: var(--secondary-color);

   font-weight: 500;

   font-size: 0.9rem;

}



/* Architecture Section */

.architecture {

   padding: 6rem 0;

   background: white;

}



.architecture h2 {

   text-align: center;

   font-size: 2.5rem;

   font-weight: 700;

   margin-bottom: 2rem;

   color: var(--text-primary);

}



.architecture-explanation {

   text-align: center;

   max-width: 800px;

   margin: 0 auto 4rem;

   font-size: 1.1rem;

   color: var(--text-secondary);

}



.architecture-diagram {

   max-width: 1000px;

   margin: 0 auto 4rem;

   position: relative;

}



.conductor {

   text-align: center;

   background: var(--gradient-primary);

   color: white;

   padding: 2rem;

   border-radius: 16px;

   margin-bottom: 3rem;

}



.conductor h3 {

   font-size: 1.8rem;

   font-weight: 600;

   margin-bottom: 0.5rem;

}



.musicians {

   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 3rem;

}



.musician-group {

   background: var(--background-light);

   padding: 2rem;

   border-radius: 16px;

   border: 2px solid var(--border-color);

}



.musician-group h4 {

   text-align: center;

   font-size: 1.3rem;

   font-weight: 600;

   margin-bottom: 1.5rem;

   color: var(--text-primary);

}



.agent {

   display: flex;

   align-items: center;

   gap: 1rem;

   padding: 1rem;

   background: white;

   border-radius: 8px;

   margin-bottom: 1rem;

   box-shadow: var(--shadow-sm);

   transition: transform 0.2s ease;

}



.agent:hover {

   transform: translateX(5px);

}



.agent i {

   font-size: 1.2rem;

   color: var(--primary-color);

}



.agent span {

   font-weight: 500;

   color: var(--text-primary);

}



.agent small {

   color: var(--text-secondary);

   font-size: 0.8rem;

   margin-left: auto;

}



/* Workflow Example */

.workflow-example {

   background: var(--background-light);

   padding: 3rem;

   border-radius: 16px;

   margin-top: 3rem;

}



.workflow-example h3 {

   text-align: center;

   font-size: 1.5rem;

   font-weight: 600;

   margin-bottom: 2rem;

   color: var(--text-primary);

}



.workflow-steps {

   display: flex;

   align-items: center;

   justify-content: center;

   flex-wrap: wrap;

   gap: 1rem;

}



.step {

   display: flex;

   flex-direction: column;

   align-items: center;

   text-align: center;

   max-width: 120px;

}



.step-number {

   width: 40px;

   height: 40px;

   background: var(--primary-color);

   color: white;

   border-radius: 50%;

   display: flex;

   align-items: center;

   justify-content: center;

   font-weight: 600;

   margin-bottom: 1rem;

}



.step-content h4 {

   font-size: 0.9rem;

   font-weight: 600;

   margin-bottom: 0.5rem;

   color: var(--text-primary);

}



.step-content p {

   font-size: 0.8rem;

   color: var(--text-secondary);

}



.step-arrow {

   font-size: 1.5rem;

   color: var(--primary-color);

   font-weight: bold;

}



/* Use Cases Section */

.use-cases {

   padding: 6rem 0;

   background: var(--background-light);

}



.use-cases h2 {

   text-align: center;

   font-size: 2.5rem;

   font-weight: 700;

   margin-bottom: 3rem;

   color: var(--text-primary);

}



.use-cases-grid {

   display: grid;

   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

   gap: 2rem;

}



.use-case {

   background: white;

   padding: 2.5rem;

   border-radius: 16px;

   box-shadow: var(--shadow-md);

   transition: all 0.3s ease;

}



.use-case:hover {

   transform: translateY(-5px);

   box-shadow: var(--shadow-xl);

}



.use-case-icon {

   width: 60px;

   height: 60px;

   background: var(--gradient-secondary);

   border-radius: 12px;

   display: flex;

   align-items: center;

   justify-content: center;

   margin-bottom: 1.5rem;

}



.use-case-icon i {

   font-size: 1.5rem;

   color: white;

}



.use-case h3 {

   font-size: 1.5rem;

   font-weight: 600;

   margin-bottom: 1rem;

   color: var(--text-primary);

}



.use-case p {

   color: var(--text-secondary);

   line-height: 1.6;

   margin-bottom: 1.5rem;

}



.use-case-industries {

   display: flex;

   flex-wrap: wrap;

   gap: 0.5rem;

   margin-bottom: 1.5rem;

}



.use-case-industries span {

   background: var(--background-light);

   padding: 0.25rem 0.75rem;

   border-radius: 20px;

   font-size: 0.8rem;

   color: var(--primary-color);

   font-weight: 500;

}



.use-case-benefits {

   display: flex;

   flex-direction: column;

   gap: 0.5rem;

}



.benefit {

   display: flex;

   align-items: center;

   gap: 0.5rem;

}



.benefit i {

   color: var(--secondary-color);

   font-size: 0.8rem;

}



.benefit span {

   color: var(--text-secondary);

   font-size: 0.9rem;

   font-weight: 500;

}



/* Benefits Section */

.benefits {

   padding: 6rem 0;

   background: white;

}



.benefits h2 {

   text-align: center;

   font-size: 2.5rem;

   font-weight: 700;

   margin-bottom: 3rem;

   color: var(--text-primary);

}



.comparison-table {

   max-width: 800px;

   margin: 0 auto 4rem;

   overflow-x: auto;

}



.comparison-table table {

   width: 100%;

   border-collapse: collapse;

   background: white;

   border-radius: 12px;

   overflow: hidden;

   box-shadow: var(--shadow-lg);

}



.comparison-table th,

.comparison-table td {

   padding: 1.5rem;

   text-align: left;

   border-bottom: 1px solid var(--border-color);

}



.comparison-table th {

   background: var(--background-light);

   font-weight: 600;

   color: var(--text-primary);

}



.comparison-table td:nth-child(3) {

   background: rgba(16, 185, 129, 0.05);

}



.roi-metrics {

   max-width: 1000px;

   margin: 0 auto;

}



.roi-metrics h3 {

   text-align: center;

   font-size: 2rem;

   font-weight: 600;

   margin-bottom: 2rem;

   color: var(--text-primary);

}



.metrics-grid {

   display: grid;

   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

   gap: 2rem;

}



.metric {

   text-align: center;

   background: var(--background-light);

   padding: 2rem;

   border-radius: 12px;

}



.metric-value {

   font-size: 3rem;

   font-weight: 800;

   color: var(--primary-color);

   margin-bottom: 0.5rem;

}



.metric-label {

   font-size: 1.1rem;

   font-weight: 600;

   color: var(--text-primary);

   margin-bottom: 0.5rem;

}



.metric-description {

   font-size: 0.9rem;

   color: var(--text-secondary);

}



/* Demo Section */

.demo {

   padding: 6rem 0;

   background: var(--background-light);

}



.demo h2 {

   text-align: center;

   font-size: 2.5rem;

   font-weight: 700;

   margin-bottom: 3rem;

   color: var(--text-primary);

}



.demo-container {

   max-width: 1200px;

   margin: 0 auto;

}



.demo-selector {

   text-align: center;

   margin-bottom: 3rem;

}



.demo-selector h3 {

   font-size: 1.5rem;

   font-weight: 600;

   margin-bottom: 1.5rem;

   color: var(--text-primary);

}



.demo-buttons {

   display: flex;

   justify-content: center;

   gap: 1rem;

   flex-wrap: wrap;

}



.demo-btn {

   display: flex;

   flex-direction: column;

   align-items: center;

   gap: 0.5rem;

   padding: 1.5rem;

   background: white;

   border: 2px solid var(--border-color);

   border-radius: 12px;

   cursor: pointer;

   transition: all 0.3s ease;

   min-width: 150px;

}



.demo-btn:hover,

.demo-btn.active {

   border-color: var(--primary-color);

   background: rgba(37, 99, 235, 0.05);

}



.demo-btn i {

   font-size: 1.5rem;

   color: var(--primary-color);

}



.demo-interface {

   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 2rem;

   margin-bottom: 2rem;

}



.demo-left,

.demo-right {

   background: white;

   padding: 2rem;

   border-radius: 12px;

   box-shadow: var(--shadow-md);

}



.demo-left h4,

.demo-right h4 {

   font-size: 1.3rem;

   font-weight: 600;

   margin-bottom: 1.5rem;

   color: var(--text-primary);

}



.demo-input {

   background: var(--background-light);

   padding: 1.5rem;

   border-radius: 8px;

   margin-bottom: 1.5rem;

   min-height: 200px;

}



.demo-workflow {

   background: var(--background-light);

   padding: 1.5rem;

   border-radius: 8px;

   min-height: 200px;

}



.demo-results {

   background: white;

   padding: 2rem;

   border-radius: 12px;

   box-shadow: var(--shadow-md);

}



.demo-results h4 {

   font-size: 1.3rem;

   font-weight: 600;

   margin-bottom: 1.5rem;

   color: var(--text-primary);

}



.demo-output {

   background: var(--background-light);

   padding: 1.5rem;

   border-radius: 8px;

   min-height: 150px;

}



/* CTA Section */

.cta {

   padding: 6rem 0;

   background: var(--gradient-primary);

   color: white;

   text-align: center;

}



.cta-content h2 {

   font-size: 2.5rem;

   font-weight: 700;

   margin-bottom: 1rem;

}



.cta-content p {

   font-size: 1.2rem;

   margin-bottom: 2rem;

   opacity: 0.9;

   max-width: 600px;

   margin-left: auto;

   margin-right: auto;

}



.cta-buttons {

   display: flex;

   justify-content: center;

   gap: 1rem;

   margin-bottom: 2rem;

   flex-wrap: wrap;

}



.cta-trust {

   opacity: 0.8;

   font-size: 0.9rem;

}



/* Footer */

.footer {

   background: var(--text-primary);

   color: white;

   padding: 3rem 0 1rem;

}



.footer-content {

   display: grid;

   grid-template-columns: 1fr 3fr;

   gap: 3rem;

   margin-bottom: 2rem;

}



.footer-brand h3 {

   font-size: 1.5rem;

   font-weight: 700;

   margin-bottom: 0.5rem;

}



.footer-brand p {

   opacity: 0.8;

}



.footer-links {

   display: grid;

   grid-template-columns: repeat(3, 1fr);

   gap: 2rem;

}



.footer-column h4 {

   font-size: 1.1rem;

   font-weight: 600;

   margin-bottom: 1rem;

}



.footer-column ul {

   list-style: none;

}



.footer-column li {

   margin-bottom: 0.5rem;

}



.footer-column a {

   color: white;

   text-decoration: none;

   opacity: 0.8;

   transition: opacity 0.3s ease;

}



.footer-column a:hover {

   opacity: 1;

}



.footer-bottom {

   text-align: center;

   padding-top: 2rem;

   border-top: 1px solid rgba(255, 255, 255, 0.2);

   opacity: 0.8;

}



/* Responsive Design */

@media (max-width: 768px) {

   .nav-menu {

       display: none;

   }

   

   .nav-toggle {

       display: flex;

   }

   

   .hero-content {

       grid-template-columns: 1fr;

       text-align: center;

   }

   

   .hero-title {

       font-size: 2.5rem;

   }

   

   .hero-stats {

       justify-content: center;

   }

   

   .musicians {

       grid-template-columns: 1fr;

   }

   

   .workflow-steps {

       flex-direction: column;

   }

   

   .step-arrow {

       transform: rotate(90deg);

   }

   

   .demo-interface {

       grid-template-columns: 1fr;

   }

   

   .footer-content {

       grid-template-columns: 1fr;

   }

   

   .footer-links {

       grid-template-columns: 1fr;

   }

}



@media (max-width: 480px) {

   .container {

       padding: 0 15px;

   }

   

   .hero-title {

       font-size: 2rem;

   }

   

   .features-grid,

   .use-cases-grid {

       grid-template-columns: 1fr;

   }

   

   .demo-buttons {

       flex-direction: column;

       align-items: center;

   }

   

   .cta-buttons {

       flex-direction: column;

       align-items: center;

   }

}



/* Utility Classes */

.text-center { text-align: center; }

.text-left { text-align: left; }

.text-right { text-align: right; }



.mt-1 { margin-top: 0.25rem; }

.mt-2 { margin-top: 0.5rem; }

.mt-3 { margin-top: 1rem; }

.mt-4 { margin-top: 1.5rem; }



.mb-1 { margin-bottom: 0.25rem; }

.mb-2 { margin-bottom: 0.5rem; }

.mb-3 { margin-bottom: 1rem; }

.mb-4 { margin-bottom: 1.5rem; }



.opacity-50 { opacity: 0.5; }

.opacity-75 { opacity: 0.75; }



.transition { transition: all 0.3s ease; }



/* Animation Classes */

.fade-in {

   opacity: 0;

   animation: fadeIn 0.5s ease-in-out forwards;

}



@keyframes fadeIn {

   to { opacity: 1; }

}



.slide-up {

   transform: translateY(30px);

   opacity: 0;

   animation: slideUp 0.6s ease-out forwards;

}



@keyframes slideUp {

   to {

       transform: translateY(0);

       opacity: 1;

   }

}



.scale-in {

   transform: scale(0.9);

   opacity: 0;

   animation: scaleIn 0.4s ease-out forwards;

}



@keyframes scaleIn {

   to {

       transform: scale(1);

       opacity: 1;

   }

}



/* Loading States */

.loading {

   position: relative;

   overflow: hidden;

}



.loading::after {

   content: '';

   position: absolute;

   top: 0;

   left: -100%;

   width: 100%;

   height: 100%;

   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);

   animation: loading 1.5s infinite;

}



@keyframes loading {

   0% { left: -100%; }

   100% { left: 100%; }

}



/* Demo Specific Styles */

.workflow-step {

   display: flex;

   align-items: center;

   padding: 1rem;

   margin-bottom: 0.5rem;

   background: white;

   border-radius: 8px;

   border-left: 4px solid var(--border-color);

   transition: all 0.3s ease;

}



.workflow-step.active {

   border-left-color: var(--primary-color);

   background: rgba(37, 99, 235, 0.05);

}



.workflow-step.completed {

   border-left-color: var(--secondary-color);

   background: rgba(16, 185, 129, 0.05);

}



.workflow-step-icon {

   width: 32px;

   height: 32px;

   border-radius: 50%;

   background: var(--border-color);

   display: flex;

   align-items: center;

   justify-content: center;

   margin-right: 1rem;

   transition: all 0.3s ease;

}



.workflow-step.active .workflow-step-icon {

   background: var(--primary-color);

   color: white;

}



.workflow-step.completed .workflow-step-icon {

   background: var(--secondary-color);

   color: white;

}



.workflow-step-content h5 {

   font-weight: 600;

   margin-bottom: 0.25rem;

   color: var(--text-primary);

}



.workflow-step-content p {

   font-size: 0.9rem;

   color: var(--text-secondary);

   margin: 0;

}



/* Demo Input Styles */

.demo-form {

   display: flex;

   flex-direction: column;

   gap: 1rem;

}



.demo-field {

   display: flex;

   flex-direction: column;

   gap: 0.5rem;

}



.demo-field label {

   font-weight: 500;

   color: var(--text-primary);

   font-size: 0.9rem;

}



.demo-field input,

.demo-field select,

.demo-field textarea {

   padding: 0.75rem;

   border: 1px solid var(--border-color);

   border-radius: 6px;

   font-size: 0.9rem;

   transition: border-color 0.3s ease;

}



.demo-field input:focus,

.demo-field select:focus,

.demo-field textarea:focus {

   outline: none;

   border-color: var(--primary-color);

   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);

}



.demo-field textarea {

   resize: vertical;

   min-height: 80px;

}



/* Result Display */

.result-card {

   background: white;

   border: 1px solid var(--border-color);

   border-radius: 8px;

   padding: 1.5rem;

   margin-bottom: 1rem;

}



.result-header {

   display: flex;

   align-items: center;

   gap: 0.75rem;

   margin-bottom: 1rem;

}



.result-icon {

   width: 32px;

   height: 32px;

   border-radius: 50%;

   display: flex;

   align-items: center;

   justify-content: center;

   color: white;

}



.result-icon.success {

   background: var(--secondary-color);

}



.result-icon.warning {

   background: var(--accent-color);

}



.result-icon.error {

   background: #ef4444;

}



.result-title {

   font-weight: 600;

   color: var(--text-primary);

}



.result-content {

   color: var(--text-secondary);

   line-height: 1.5;

}



.compliance-trail {

   background: var(--background-light);

   border-radius: 6px;

   padding: 1rem;

   margin-top: 1rem;

}



.compliance-trail h6 {

   font-size: 0.9rem;

   font-weight: 600;

   color: var(--text-primary);

   margin-bottom: 0.5rem;

}



.compliance-step {

   font-size: 0.8rem;

   color: var(--text-secondary);

   margin-bottom: 0.25rem;

   padding-left: 1rem;

   position: relative;

}



.compliance-step::before {

   content: '→';

   position: absolute;

   left: 0;

   color: var(--primary-color);

}



/* Notification Styles */

.notification {

   position: fixed;

   top: 100px;

   right: 20px;

   background: white;

   border: 1px solid var(--border-color);

   border-radius: 8px;

   padding: 1rem 1.5rem;

   box-shadow: var(--shadow-lg);

   z-index: 1001;

   transform: translateX(400px);

   transition: transform 0.3s ease;

}



.notification.show {

   transform: translateX(0);

}



.notification.success {

   border-left: 4px solid var(--secondary-color);

}



.notification.error {

   border-left: 4px solid #ef4444;

}



.notification.warning {

   border-left: 4px solid var(--accent-color);

}



/* Mobile Optimizations */

@media (max-width: 640px) {

   .hero-stats {

       flex-direction: column;

       gap: 1rem;

   }

   

   .problem-grid,

   .features-grid,

   .use-cases-grid,

   .metrics-grid {

       grid-template-columns: 1fr;

   }

   

   .comparison-table {

       font-size: 0.9rem;

   }

   

   .comparison-table th,

   .comparison-table td {

       padding: 1rem;

   }

   

   .orchestrator-diagram {

       width: 300px;

       height: 300px;

   }

   

   .central-node {

       width: 100px;

       height: 100px;

   }

   

   .agent-node {

       width: 60px;

       height: 60px;

   }

   

   .agent-node span {

       font-size: 0.5rem;

   }

}



/* High DPI Display Optimizations */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

   .hero::before {

       background-size: 2000px 2000px;

   }

}



/* Dark Mode Support (Optional) */

@media (prefers-color-scheme: dark) {

   :root {

       --text-primary: #f9fafb;

       --text-secondary: #d1d5db;

       --background: #111827;

       --background-light: #1f2937;

       --border-color: #374151;

   }

}



/* Print Styles */

@media print {

   .header,

   .cta,

   .footer,

   .demo {

       display: none;

   }

   

   .hero {

       background: white;

       color: black;

       min-height: auto;

       padding: 2rem 0;

   }

   

   .hero::before {

       display: none;

   }

   

   * {

       box-shadow: none !important;

   }

}



/* Accessibility Improvements */

@media (prefers-reduced-motion: reduce) {

   *,

   *::before,

   *::after {

       animation-duration: 0.01ms !important;

       animation-iteration-count: 1 !important;

       transition-duration: 0.01ms !important;

   }

}



/* Focus Styles for Accessibility */

.btn:focus,

.demo-btn:focus,

input:focus,

select:focus,

textarea:focus {

   outline: 2px solid var(--primary-color);

   outline-offset: 2px;

}



/* Skip to Main Content (for screen readers) */

.skip-link {

   position: absolute;

   top: -40px;

   left: 6px;

   background: var(--primary-color);

   color: white;

   padding: 8px;

   text-decoration: none;

   border-radius: 4px;

   z-index: 1002;

   transition: top 0.3s;

}



.skip-link:focus {

   top: 6px;

}



/* Additional Mobile Optimizations */

@media (max-width: 480px) {

    .hero-title {

        font-size: 1.8rem;

        line-height: 1.2;

    }

    

    .hero-description {

        font-size: 1rem;

    }

    

    .hero-buttons {

        flex-direction: column;

        width: 100%;

    }

    

    .btn {

        width: 100%;

        justify-content: center;

    }

    

    .orchestrator-diagram {

        width: 250px;

        height: 250px;

    }

    

    .central-node {

        width: 80px;

        height: 80px;

    }

    

    .central-node span {

        font-size: 0.7rem;

    }

    

    .agent-node {

        width: 50px;

        height: 50px;

    }

    

    .agent-node span {

        font-size: 0.4rem;

    }

}



/* Touch-Friendly Interactions */

@media (hover: none) and (pointer: coarse) {

    .btn,

    .demo-btn,

    .feature-card,

    .use-case {

        transform: none !important;

    }

    

    .btn:active,

    .demo-btn:active {

        transform: scale(0.98);

    }

    

    .feature-card:active,

    .use-case:active {

        transform: scale(1.02);

    }

}