/* ============================================
   CANOPUS — Enterprise AI Platform
   Premium Design with Orbs & Particles
   ============================================ */

:root {
  --blue: #1783f7;
  --coral: #f2644b;
  --purple: #8b5cf6;
  --green: #22c55e;
  --gradient: linear-gradient(135deg, #1783f7 0%, #f2644b 100%);
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg: #050509;
  --bg-elevated: #0d0d14;
  --bg-card: rgba(255,255,255,0.03);
  --bg-glass: rgba(17,17,24,0.65);
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --text: #f0f0f5;
  --text-secondary: #a0a0b5;
  --text-muted: #606078;
}

[data-theme="light"] {
  --bg: #f8f9fc;
  --bg-elevated: #ffffff;
  --bg-card: rgba(0,0,0,0.02);
  --bg-glass: rgba(255,255,255,0.75);
  --border: rgba(0,0,0,0.06);
  --border-hover: rgba(0,0,0,0.12);
  --text: #0a0a14;
  --text-secondary: #505060;
  --text-muted: #888898;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { 
  font-family:var(--font); 
  background:var(--bg); 
  color:var(--text); 
  line-height:1.6; 
  overflow-x:hidden; 
  -webkit-font-smoothing:antialiased;
  background-image: 
    radial-gradient(ellipse at top left, rgba(23,131,247,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(242,100,75,0.04) 0%, transparent 60%);
}

/* PARTICLES */
.particles { position:fixed; inset:0; pointer-events:none; z-index:0; }
.particle { position:absolute; width:3px; height:3px; border-radius:50%; opacity:0; animation:float 10s linear infinite; }
.particle:nth-child(4n) { background:var(--blue); box-shadow:0 0 8px var(--blue); }
.particle:nth-child(4n+1) { background:var(--coral); box-shadow:0 0 8px var(--coral); }
.particle:nth-child(4n+2) { background:var(--purple); box-shadow:0 0 8px var(--purple); }
.particle:nth-child(4n+3) { background:var(--green); box-shadow:0 0 8px var(--green); }
@keyframes float { 0% { transform:translateY(0); opacity:0; } 10% { opacity:0.6; } 100% { transform:translateY(-100vh); opacity:0; } }

/* HEADER */
.navbar { 
  position:fixed; 
  top:0; left:0; right:0; 
  z-index:1000; 
  padding:16px 0; 
  transition:all var(--transition);
  background:rgba(5,5,9,0.5);
  backdrop-filter:blur(20px);
}
.navbar.scrolled { padding:10px 0; background:rgba(5,5,9,0.85); }
.nav-container { display:flex; align-items:center; justify-content:space-between; max-width:1280px; margin:0 auto; padding:0 24px; }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-link { font-size:0.95rem; color:var(--text-secondary); transition:color var(--transition); text-decoration:none; }
.nav-link:hover { color:var(--text); }
.nav-actions { display:flex; gap:16px; align-items:center; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; }
.hamburger span { width:22px; height:2px; background:var(--text); border-radius:2px; }
.theme-toggle { background:var(--bg-card); border:1px solid var(--border); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* HERO */
.hero { position:relative; min-height:90vh; display:flex; align-items:center; padding:140px 0 100px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(120px); opacity:0.2; animation:orbFloat 12s ease-in-out infinite; }
.orb-1 { width:600px; height:600px; background:var(--blue); top:-100px; right:-200px; }
.orb-2 { width:450px; height:450px; background:var(--coral); bottom:-120px; left:-150px; animation-duration:15s; animation-direction:reverse; }
.orb-3 { width:350px; height:350px; background:radial-gradient(circle, var(--blue), var(--coral)); top:45%; left:45%; transform:translate(-50%,-50%); opacity:0.15; animation:none; }
.orb-4 { width:300px; height:300px; background:var(--purple); top:15%; left:10%; opacity:0.12; animation-duration:18s; }
.orb-5 { width:280px; height:280px; background:var(--green); bottom:20%; right:15%; opacity:0.1; animation-duration:20s; }
@keyframes orbFloat { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-40px) scale(1.08); } }

.hero-content { position:relative; z-index:2; max-width:900px; margin:0 auto; text-align:center; }
.badge { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:100px; background:var(--bg-glass); backdrop-filter:blur(16px); border:1px solid var(--border); font-size:0.85rem; font-weight:600; color:var(--text-secondary); margin-bottom:24px; }
.badge-dot { width:10px; height:10px; border-radius:50%; background:var(--coral); display:inline-block; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.hero-title { margin-bottom:28px; font-weight:800; font-size:clamp(2.5rem, 5vw, 3.5rem); line-height:1.2; }
.hero-subtitle { font-size:1.1rem; color:var(--text-secondary); max-width:650px; margin:0 auto 40px; }
.hero-actions { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:60px; }

.hero-metrics { display:flex; align-items:center; justify-content:center; padding:24px 40px; border-radius:var(--radius-xl); background:var(--bg-glass); backdrop-filter:blur(16px); border:1px solid var(--border); max-width:750px; margin:0 auto; }
.metric { padding:0 28px; text-align:center; }
.metric-value { display:block; font-size:1.5rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.metric-label { font-size:0.85rem; color:var(--text-muted); font-weight:500; display:block; margin-top:3px; text-transform:uppercase; }
.metric-divider { width:1px; height:36px; background:var(--border); }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; border-radius:var(--radius-md); font-weight:600; font-size:0.95rem; transition:all var(--transition); cursor:pointer; text-decoration:none; }
.btn-primary { background:var(--gradient); color:#fff; box-shadow:0 4px 20px rgba(23,131,247,0.25); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(23,131,247,0.4), 0 0 20px rgba(23,131,247,0.3); }
.btn-outline { border:1px solid var(--border); color:var(--text); background:transparent; }
.btn-outline:hover { border-color:var(--blue); color:var(--blue); }
.btn-lg { padding:14px 36px; font-size:1rem; }

/* GRID */
.grid { display:grid; gap:28px; }
.grid-3 { grid-template-columns:repeat(3, 1fr); }

/* CARDS */
.glass-card { background:var(--bg-glass); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; transition:all var(--transition); position:relative; }
.glass-card:hover { border-color:var(--border-hover); transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 0 20px rgba(23,131,247,0.3); }
.card-icon { width:52px; height:52px; border-radius:var(--radius-sm); background:var(--bg-card); display:flex; align-items:center; justify-content:center; margin-bottom:20px; border:1px solid var(--border); }
.card-title { margin-bottom:12px; font-size:1.2rem; font-weight:600; }
.card-text { color:var(--text-secondary); font-size:0.95rem; line-height:1.6; margin-bottom:16px; }
.card-link { font-size:0.95rem; font-weight:600; color:var(--blue); display:flex; align-items:center; gap:6px; text-decoration:none; }
.card-link:hover { gap:12px; color:var(--coral); }
.card-badge { position:absolute; top:16px; right:16px; padding:5px 14px; border-radius:100px; font-size:0.75rem; font-weight:600; background:var(--gradient); color:#fff; }

/* SECTION */
.section { padding:100px 0; position:relative; }
.section-header { text-align:center; margin-bottom:56px; }
.eyebrow { display:inline-block; font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:var(--blue); margin-bottom:16px; }
.section-title { margin-bottom:18px; font-size:2.2rem; font-weight:700; }

/* BRANDS */
.clients-strip { padding:50px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-elevated); }
.clients-label { text-align:center; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:24px; }
.clients-logos { display:flex; justify-content:center; gap:40px; flex-wrap:wrap; }
.client-logo { font-size:0.95rem; font-weight:600; color:var(--text-secondary); opacity:0.7; }
.client-logo:hover { opacity:1; color:var(--blue); }

/* REVEAL */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* TESTIMONIALS */
.testimonial-card { padding:32px; }
.testimonial-quote { font-size:1.1rem; color:var(--text); margin-bottom:20px; line-height:1.7; font-style:italic; }
.author-avatar { width:40px; height:40px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:0.9rem; font-weight:700; color:#fff; }
.testimonial-author { display:flex; align-items:center; gap:12px; }

/* FAQ */
.faq-list { display:flex; flex-direction:column; gap:14px; max-width:700px; margin:0 auto; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-glass); overflow:hidden; }
.faq-question { padding:20px 26px; font-weight:600; font-size:0.95rem; cursor:pointer; width:100%; text-align:left; background:none; border:none; display:flex; justify-content:space-between; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.5s ease; }
.faq-answer p { padding:0 26px 20px; color:var(--text-secondary); }
.faq-item.active .faq-answer { max-height:200px; }

/* WHY */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.stat-card { padding:28px; text-align:center; background:var(--bg-glass); border:1px solid var(--border); border-radius:var(--radius-lg); }
.stat-value { font-size:1.8rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:6px; }
.feature-checklist { display:flex; flex-direction:column; gap:14px; }

/* CTA */
.cta-section { padding:100px 0; background:var(--bg-elevated); text-align:center; }
.cta-title { font-size:2.2rem; margin-bottom:20px; }
.cta-text { color:var(--text-secondary); font-size:1.1rem; margin-bottom:32px; max-width:600px; margin-left:auto; margin-right:auto; }

/* FOOTER */
.footer { padding:70px 0 30px; border-top:1px solid var(--border); background:var(--bg); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:50px; margin-bottom:40px; }
.footer-brand { display:flex; flex-direction:column; gap:16px; }
.footer-desc { color:var(--text-muted); font-size:0.95rem; max-width:280px; }
.footer-col h4 { font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text); margin-bottom:20px; font-weight:600; }
.footer-col a { display:block; color:var(--text-muted); font-size:0.95rem; margin:8px 0; transition:color var(--transition); text-decoration:none; }
.footer-col a:hover { color:var(--text); }
.footer-bottom { padding-top:30px; border-top:1px solid var(--border); font-size:0.85rem; color:var(--text-muted); text-align:center; }

/* RESPONSIVE */
@media (max-width:1024px) { 
  .grid-3 { grid-template-columns:repeat(2, 1fr); }
  .why-grid, .footer-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:768px) { 
  .section { padding:80px 0; }
  .hero { padding:120px 0 70px; min-height:75vh; }
  .hero-title { font-size:2.2rem; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .grid-3 { grid-template-columns:1fr; }
  .hero-metrics { flex-wrap:wrap; gap:16px; padding:20px; }
  .metric-divider { display:none; }
}
@media (max-width:480px) { 
  .footer-grid { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; }
}</｜｜DSML｜｜parameter>
<task_progress>
- [x] Restore CSS file
- [ ] Remove stray directory
- [ ] Deploy to Cloudflare
- [ ] Verify site looks correct
</task_progress>
</write_to_file>