/* =============================================================================
   app.css — SikkimTech Solutions Custom CSS
   
   Supplements Tailwind CDN with:
   - Custom animations & keyframes
   - Glass effects
   - Swiper pagination overrides
   - Custom scrollbar
   - Typography utilities
   - Page-specific components
   - Print styles
============================================================================= */

/* ===========================================================================
   CUSTOM PROPERTIES
=========================================================================== */
:root {
    --brand:       #10b981;
    --accent:      #06b6d4;
    --dark-900:    #030712;
    --dark-800:    #0a0f1e;
    --dark-700:    #0f1729;
    --brand-glow:  rgba(16, 185, 129, 0.25);
    --accent-glow: rgba(6, 182, 212, 0.2);
}

/* ===========================================================================
   SCROLLBAR
=========================================================================== */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: var(--dark-900); }
::-webkit-scrollbar-thumb  { background: rgba(16, 185, 129, 0.4); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ===========================================================================
   SELECTION
=========================================================================== */
::selection {
    background: rgba(16, 185, 129, 0.35);
    color: #fff;
}

/* ===========================================================================
   TYPOGRAPHY UTILITIES
=========================================================================== */
.font-display  { font-family: 'Outfit', system-ui, sans-serif; }
.font-mono     { font-family: 'JetBrains Mono', monospace; }
.font-800      { font-weight: 800; }
.font-900      { font-weight: 900; }

/* Gradient text shorthand */
.text-gradient {
    background: linear-gradient(135deg, var(--brand), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===========================================================================
   GLASS CARD COMPONENT
=========================================================================== */
.glass-card {
    background:       rgba(15, 23, 42, 0.6);
    backdrop-filter:  blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:           1px solid rgba(255, 255, 255, 0.07);
    border-radius:    1.5rem;
    box-shadow:       0 20px 60px rgba(0, 0, 0, 0.4),
                      inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.glass-card:hover {
    border-color: rgba(16, 185, 129, 0.2);
}

/* ===========================================================================
   GRADIENT BUTTONS
=========================================================================== */
.btn-brand {
    background:    linear-gradient(135deg, var(--brand), var(--accent));
    color:         #030712;
    font-weight:   700;
    border-radius: 0.875rem;
    padding:       0.875rem 2rem;
    display:       inline-flex;
    align-items:   center;
    gap:           0.5rem;
    transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:    0 4px 20px var(--brand-glow);
}

.btn-brand:hover {
    box-shadow:    0 8px 30px var(--brand-glow), 0 0 15px var(--accent-glow);
    transform:     translateY(-2px);
    filter:        brightness(1.08);
}

/* ===========================================================================
   GLOW EFFECTS
=========================================================================== */
.glow-emerald { box-shadow: 0 0 30px rgba(16, 185, 129, 0.3); }
.glow-cyan    { box-shadow: 0 0 30px rgba(6, 182, 212, 0.3); }

.border-glow-emerald { border-color: rgba(16, 185, 129, 0.4); }
.border-glow-cyan    { border-color: rgba(6, 182, 212, 0.4); }

/* ===========================================================================
   ANIMATIONS
=========================================================================== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-18px); }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 15px var(--brand-glow); }
    50%       { box-shadow: 0 0 40px var(--brand-glow), 0 0 60px var(--accent-glow); }
}

@keyframes scanLine {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-float         { animation: float 6s ease-in-out infinite; }
.animate-gradient      { animation: gradientShift 6s ease infinite; background-size: 200% auto; }
.animate-shimmer       { animation: shimmer 2s linear infinite; }
.animate-pulse-glow    { animation: pulseGlow 3s ease-in-out infinite; }
.animate-fade-in-up    { animation: fadeInUp 0.6s ease-out both; }

/* ===========================================================================
   SWIPER CUSTOMIZATIONS
=========================================================================== */
.swiper-pagination-bullet {
    width:            8px !important;
    height:           8px !important;
    background:       rgba(255, 255, 255, 0.2) !important;
    opacity:          1 !important;
    border-radius:    4px !important;
    transition:       all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
    width:            24px !important;
    background:       var(--brand) !important;
    box-shadow:       0 0 8px var(--brand-glow) !important;
}

/* ===========================================================================
   PORTFOLIO OVERLAY
=========================================================================== */
.portfolio-card .overlay {
    opacity:    0;
    transition: opacity 0.35s ease;
}
.portfolio-card:hover .overlay {
    opacity: 1;
}

/* ===========================================================================
   HERO SECTION
=========================================================================== */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ===========================================================================
   SECTION HEADERS
=========================================================================== */
.section-badge {
    display:     inline-flex;
    align-items: center;
    gap:         0.5rem;
    padding:     0.375rem 1rem;
    border-radius: 9999px;
    font-size:   0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.section-title {
    font-family:    'Outfit', sans-serif;
    font-weight:    900;
    letter-spacing: -0.05em;
    line-height:    1.05;
}

/* ===========================================================================
   FORM COMPONENTS
=========================================================================== */
.form-input {
    width:         100%;
    padding:       0.875rem 1rem;
    background:    rgba(255, 255, 255, 0.04);
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    color:         #f1f5f9;
    font-size:     0.9rem;
    transition:    all 0.2s ease;
    outline:       none;
}

.form-input::placeholder   { color: #475569; }
.form-input:focus {
    border-color: rgba(16, 185, 129, 0.5);
    background:   rgba(16, 185, 129, 0.04);
    box-shadow:   0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-label {
    display:       block;
    font-size:     0.85rem;
    font-weight:   600;
    color:         #94a3b8;
    margin-bottom: 0.375rem;
}

/* ===========================================================================
   BADGE / TAG COMPONENTS
=========================================================================== */
.tag {
    display:     inline-flex;
    align-items: center;
    padding:     0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-size:   0.7rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    background:  rgba(255, 255, 255, 0.05);
    border:      1px solid rgba(255, 255, 255, 0.08);
    color:       #94a3b8;
}

.tag.emerald { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2); color: #6ee7b7; }
.tag.cyan    { background: rgba(6,182,212,0.08);  border-color: rgba(6,182,212,0.2);  color: #67e8f9; }
.tag.violet  { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.2); color: #c4b5fd; }
.tag.amber   { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: #fcd34d; }

/* ===========================================================================
   BLOG CARD
=========================================================================== */
.blog-card {
    background:    rgba(15, 23, 42, 0.5);
    border:        1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.5rem;
    overflow:      hidden;
    transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover {
    transform:    translateY(-4px);
    border-color: rgba(16, 185, 129, 0.2);
    box-shadow:   0 20px 50px rgba(0, 0, 0, 0.4);
}

.blog-card img {
    transition: transform 0.5s ease;
}
.blog-card:hover img { transform: scale(1.05); }

/* ===========================================================================
   PRICING CARD FEATURED GLOW
=========================================================================== */
.pricing-featured {
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4),
                0 30px 80px rgba(16, 185, 129, 0.1);
}

/* ===========================================================================
   ACCORDION
=========================================================================== */
.accordion-item {
    border:       1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1rem;
    overflow:     hidden;
    transition:   border-color 0.2s ease;
}

.accordion-item:hover, 
.accordion-item.open {
    border-color: rgba(16, 185, 129, 0.25);
}

/* ===========================================================================
   STAT CARD
=========================================================================== */
.stat-card {
    position: relative;
}

.stat-card::after {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: 1rem;
    background:    radial-gradient(circle at center, rgba(16,185,129,0.05), transparent 70%);
    pointer-events: none;
}

/* ===========================================================================
   RESPONSIVE UTILITIES
=========================================================================== */
@media (max-width: 640px) {
    .section-title { letter-spacing: -0.03em; }
}

/* ===========================================================================
   PRINT STYLES
=========================================================================== */
@media print {
    canvas, #whatsapp-fab, #back-to-top, #scroll-progress,
    #cursor, #cursor-dot, .navbar { display: none !important; }
    body { background: white !important; color: black !important; }
}