/* CySoftSolutions - Main Stylesheet */

/* ===========================
   Custom Properties
   =========================== */
:root {
    --primary: #2563eb;
    --cyan: #06b6d4;
    --navy-900: #0a1628;
    --navy-950: #060d1a;
}

/* ===========================
   Base
   =========================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ===========================
   Typography
   =========================== */
.font-heading { font-family: 'Space Grotesk', sans-serif; }

/* ===========================
   Navy colors (Tailwind extend)
   =========================== */
.bg-navy-800 { background-color: #0f2040; }
.bg-navy-900 { background-color: #0a1628; }
.bg-navy-950 { background-color: #060d1a; }
.dark .dark\:bg-navy-950 { background-color: #060d1a; }
.dark .dark\:bg-navy-900 { background-color: #0a1628; }
.dark .dark\:bg-navy-800 { background-color: #0f2040; }
.text-navy-950 { color: #060d1a; }
.border-navy-900 { border-color: #0a1628; }

/* ===========================
   Header Scroll Effect
   =========================== */
#site-header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===========================
   Hero Section
   =========================== */
.hero-bg {
    background: linear-gradient(135deg, var(--navy-950) 0%, #0d1f40 50%, var(--navy-950) 100%);
}

/* ===========================
   Gradient Text
   =========================== */
.gradient-text {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===========================
   Glassmorphism
   =========================== */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===========================
   Line Clamp
   =========================== */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===========================
   Prose overrides
   =========================== */
.prose {
    max-width: none;
    color: inherit;
}
.prose h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.prose h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.prose p { margin-bottom: 1rem; line-height: 1.75; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose code {
    background: rgba(37, 99, 235, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.875em;
}
.prose pre {
    background: #0f172a;
    padding: 1rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.prose pre code { background: transparent; padding: 0; }
.dark .prose { color: #d1d5db; }
.dark .prose h2, .dark .prose h3, .dark .prose h4 { color: #f9fafb; }
.dark .prose code { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }

/* ===========================
   Back to Top Button
   =========================== */
#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* ===========================
   AOS overrides
   =========================== */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

/* ===========================
   Scrollbar
   =========================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2563eb; }

/* ===========================
   Focus
   =========================== */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===========================
   Selection
   =========================== */
::selection {
    background: rgba(37, 99, 235, 0.3);
    color: inherit;
}

/* ===========================
   Animation
   =========================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-20px); }
}
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
.animate-float { animation: float 6s ease-in-out infinite; }

/* ===========================
   Transition utilities
   =========================== */
.transition-300 { transition: all 0.3s ease; }

/* ===========================
   Responsive
   =========================== */
@media (max-width: 640px) {
    .hero-title { font-size: 2.5rem; }
}