/* ==============================================
   STEWARDSHIP SOLUTIONS - 3D CIRCUIT BOARD
   Matching Brand Aesthetic Exactly
   ============================================== */

/* ==============================================
   1. CORE DESIGN SYSTEM
   ============================================== */

:root {
    /* Colors - Matching Brand Image */
    --color-primary: #0a0e1a;
    --color-secondary: #00d9ff;
    --color-accent: #0096ff;
    --color-circuit: #4da6c7;
    --color-text-light: #e8f4f8;
    --color-text-muted: #8ba3b8;
    --color-card-bg: rgba(15, 32, 56, 0.85);
    --color-card-border: rgba(0, 217, 255, 0.3);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0a0e1a 0%, #1a2332 100%);
    --gradient-accent: linear-gradient(135deg, #00d9ff 0%, #0096ff 100%);
    --gradient-card: linear-gradient(145deg, rgba(15, 32, 56, 0.95) 0%, rgba(10, 20, 35, 0.98) 100%);
    
    /* Shadows & Effects */
    --shadow-glow: 0 0 20px rgba(0, 217, 255, 0.3);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.6);
    --transition-speed: 0.4s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background: #0a0e1a;
    color: var(--color-text-light);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* ==============================================
   2. 3D CIRCUIT BOARD BACKGROUND (MATCHING IMAGE)
   ============================================== */

.circuit-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #161b22;
    perspective: 1000px;
    transform-style: preserve-3d;
    overflow: hidden;
    z-index: 0;
}

/* Main circuit layer with 3D perspective */
.circuit-background::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        /* Thick horizontal traces with glow */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 60px,
            rgba(77, 166, 199, 0.4) 60px,
            rgba(77, 166, 199, 0.4) 64px,
            rgba(0, 217, 255, 0.6) 64px,
            rgba(0, 217, 255, 0.6) 68px,
            rgba(77, 166, 199, 0.4) 68px,
            rgba(77, 166, 199, 0.4) 72px,
            transparent 72px,
            transparent 140px
        ),
        /* Thick vertical traces with glow */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 80px,
            rgba(77, 166, 199, 0.35) 80px,
            rgba(77, 166, 199, 0.35) 84px,
            rgba(0, 150, 255, 0.5) 84px,
            rgba(0, 150, 255, 0.5) 88px,
            rgba(77, 166, 199, 0.35) 88px,
            rgba(77, 166, 199, 0.35) 92px,
            transparent 92px,
            transparent 160px
        ),
        /* Diagonal traces for depth */
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 100px,
            rgba(77, 166, 199, 0.25) 100px,
            rgba(77, 166, 199, 0.25) 104px,
            transparent 104px,
            transparent 200px
        ),
        /* Connection nodes - glowing points */
        radial-gradient(circle at 25% 30%, rgba(0, 217, 255, 0.6) 0%, transparent 8px),
        radial-gradient(circle at 65% 45%, rgba(77, 166, 199, 0.5) 0%, transparent 6px),
        radial-gradient(circle at 80% 70%, rgba(0, 217, 255, 0.4) 0%, transparent 7px),
        radial-gradient(circle at 35% 85%, rgba(77, 166, 199, 0.45) 0%, transparent 6px),
        radial-gradient(circle at 90% 20%, rgba(0, 217, 255, 0.5) 0%, transparent 8px);
    background-size:
        300px 300px,
        300px 300px,
        400px 400px,
        600px 600px,
        800px 800px,
        500px 500px,
        700px 700px,
        550px 550px;
    transform: rotateX(60deg) translateZ(-100px);
    animation: circuit-flow-3d 40s linear infinite;
    filter: blur(1px);
}

/* Secondary layer for depth effect */
.circuit-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Thinner traces in background */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 120px,
            rgba(77, 166, 199, 0.2) 120px,
            rgba(77, 166, 199, 0.2) 122px,
            transparent 122px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 100px,
            rgba(77, 166, 199, 0.15) 100px,
            rgba(77, 166, 199, 0.15) 102px,
            transparent 102px
        );
    background-size: 400px 400px;
    animation: circuit-flow-3d 60s linear infinite reverse;
    opacity: 0.6;
    filter: blur(2px);
}

@keyframes circuit-flow-3d {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 300px 300px, -300px -300px, 400px 400px, 600px 600px, 800px 800px, 500px 500px, 700px 700px, 550px 550px;
    }
}

/* Depth of field gradient overlay */
.gradient-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 50% 40%, transparent 15%, rgba(10, 14, 26, 0.4) 40%, rgba(10, 14, 26, 0.8) 100%),
        linear-gradient(180deg, rgba(10, 14, 26, 0.3) 0%, transparent 30%, transparent 70%, rgba(10, 14, 26, 0.5) 100%);
    z-index: 1;
    pointer-events: none;
}

/* ==============================================
   3. ACCESSIBILITY
   ============================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-accent);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px 0;
    display: none;
}

.skip-link:focus {
    top: 0;
}

/* ==============================================
   4. HERO SECTION WITH LOGO
   ============================================== */

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    animation: fadeInUp 1s ease-out;
}

/* Company Logo (Chart/Graph) */
.logo-container {
    margin-bottom: 40px;
    animation: logoFloat 3s ease-in-out infinite;
    display: flex;
    justify-content: center;
}

.hero-logo {
    max-width: 85%;
    width: 85%;
    height: auto;
    filter: drop-shadow(0 0 40px rgba(0, 217, 255, 0.6));
    transition: all var(--transition-speed) ease;
}

.hero-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 50px rgba(0, 217, 255, 0.8));
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

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

/* Company Name */
.hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    margin: 30px 0 20px;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 8px;
    text-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
}

.tech-text {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--color-text-light);
    margin-bottom: 10px;
    font-weight: 500;
}

.hero-tagline {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    font-style: italic;
}

/* Floating Tech Icons */
.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.tech-icon {
    position: absolute;
    font-size: 3rem;
    opacity: 0.2;
    animation: float 20s ease-in-out infinite;
}

.icon-1 { top: 10%; left: 10%; animation-delay: 0s; }
.icon-2 { top: 20%; right: 15%; animation-delay: 5s; }
.icon-3 { bottom: 30%; left: 15%; animation-delay: 10s; }
.icon-4 { bottom: 20%; right: 10%; animation-delay: 15s; }

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(0px) rotate(0deg); }
    75% { transform: translateY(20px) rotate(-5deg); }
}

/* ==============================================
   5. BUTTONS & CTAs
   ============================================== */

.cta-button {
    display: inline-block;
    background: var(--gradient-accent);
    color: white;
    padding: 18px 40px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all var(--transition-speed) ease;
    border: 2px solid var(--color-accent);
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 1px;
    box-shadow: 0 5px 20px rgba(0, 217, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(0, 217, 255, 0.5);
}

.cta-button:active {
    transform: translateY(0);
}

/* ==============================================
   6. SECTION LAYOUTS
   ============================================== */

.content-section {
    position: relative;
    padding: 100px 40px;
    max-width: 1400px;
    margin: 0 auto;
    z-index: 2;
}

.alt-bg {
    background: rgba(15, 32, 56, 0.3);
    backdrop-filter: blur(10px);
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section-subtitle {
    font-size: 1.3rem;
    color: var(--color-text-muted);
    max-width: 700px;
    margin: 0 auto;
}

/* ==============================================
   7. PILLAR CARDS - PREMIUM DESIGN
   ============================================== */

.pillars-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
}

.pillar-card {
    background: var(--gradient-card);
    border: 2px solid var(--color-card-border);
    border-radius: 15px;
    padding: 40px;
    transition: all var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    opacity: 1;
    animation: fadeInUp 0.8s ease-out forwards;
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-accent);
    border-radius: 15px;
    opacity: 0;
    z-index: -1;
    transition: opacity var(--transition-speed) ease;
}

.pillar-card:hover::before {
    opacity: 1;
}

.pillar-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-glow);
    border-color: var(--color-secondary);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.pillar-card h3 {
    color: var(--color-secondary);
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.pillar-card p {
    color: var(--color-text-light);
    line-height: 1.8;
}

.card-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-speed) ease;
}

.pillar-card:hover .card-accent {
    transform: scaleX(1);
}

/* ==============================================
   8. STATS SECTION
   ============================================== */

.stats-section {
    position: relative;
    padding: 80px 40px;
    background: rgba(0, 217, 255, 0.05);
    backdrop-filter: blur(10px);
    z-index: 2;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.stat-item {
    text-align: center;
    padding: 30px;
    border-radius: 15px;
    background: var(--gradient-card);
    border: 2px solid var(--color-card-border);
    transition: all var(--transition-speed) ease;
    opacity: 1;
    animation: fadeInUp 0.8s ease-out forwards;
}

.stat-item:hover {
    transform: scale(1.05);
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-glow);
}

.stat-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==============================================
   9. RESULTS GRID
   ============================================== */

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.result-card {
    background: var(--gradient-card);
    border: 2px solid var(--color-card-border);
    border-radius: 15px;
    padding: 35px;
    text-align: center;
    transition: all var(--transition-speed) ease;
    opacity: 1;
    animation: fadeInUp 0.8s ease-out forwards;
}

.result-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-glow);
}

.result-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    display: block;
}

.result-card h3 {
    color: var(--color-secondary);
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.result-card p {
    color: var(--color-text-light);
    line-height: 1.7;
}

/* ==============================================
   10. CONTACT FORM - PREMIUM DESIGN
   ============================================== */

.contact-section {
    background: rgba(0, 217, 255, 0.03);
    backdrop-filter: blur(10px);
}

.contact-form {
    max-width: 800px;
    margin: 0 auto 60px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    color: var(--color-text-light);
    font-weight: 500;
    font-size: 1rem;
}

.required {
    color: var(--color-secondary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid var(--color-card-border);
    border-radius: 10px;
    background: rgba(15, 32, 56, 0.6);
    color: var(--color-text-light);
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    transition: all var(--transition-speed) ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-secondary);
    background: rgba(15, 32, 56, 0.8);
    outline: none;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.submit-button {
    width: 100%;
    margin-top: 20px;
    font-size: 1.1rem;
}

/* Contact Info */
.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: var(--gradient-card);
    border: 2px solid var(--color-card-border);
    border-radius: 15px;
    transition: all var(--transition-speed) ease;
}

.contact-method:hover {
    border-color: var(--color-secondary);
    transform: translateX(5px);
}

.contact-icon {
    font-size: 2.5rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
}

.contact-details strong {
    color: var(--color-secondary);
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.contact-details a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.contact-details a:hover {
    color: var(--color-secondary);
}

/* ==============================================
   11. FOOTER
   ============================================== */

footer {
    position: relative;
    background: rgba(10, 14, 26, 0.95);
    text-align: center;
    padding: 60px 20px 30px;
    border-top: 3px solid var(--color-secondary);
    z-index: 2;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-brand h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--color-secondary);
    font-size: 2rem;
    margin-bottom: 10px;
}

.footer-brand p {
    color: var(--color-text-muted);
    margin-bottom: 30px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.social-link {
    padding: 12px 25px;
    background: var(--gradient-card);
    border: 2px solid var(--color-card-border);
    border-radius: 50px;
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-speed) ease;
}

.social-link:hover {
    background: var(--gradient-accent);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 217, 255, 0.2);
}

.copyright,
.location {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 10px 0;
}

/* ==============================================
   12. ANIMATIONS
   ============================================== */

.animate-in {
    animation: fadeInUp 0.8s ease forwards;
}

/* ==============================================
   13. RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 992px) {
    .hero-title {
        font-size: 2.5rem;
        letter-spacing: 4px;
    }
    
    .hero-logo {
        max-width: 90%;
        width: 90%;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .pillars-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .hero-title {
        font-size: 2rem;
        letter-spacing: 2px;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .hero-logo {
        max-width: 95%;
        width: 95%;
    }
    
    .content-section {
        padding: 60px 20px;
    }
    
    .cta-button {
        width: 100%;
        padding: 16px 30px;
    }
    
    .stat-number {
        font-size: 3rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .social-links {
        flex-direction: column;
        align-items: center;
    }
}

/* ==============================================
   14. PRINT STYLES
   ============================================== */

@media print {
    .circuit-background,
    .gradient-overlay,
    .floating-elements,
    .cta-button,
    footer {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
}