/* --- CSS VARIABLES & THEME --- */
:root {
    --bg-dark: #070b12;
    --bg-card: rgba(10, 16, 26, 0.88);
    --bg-card-border: rgba(255, 255, 255, 0.12);
    --primary-orange: #FF6B00;
    --primary-orange-hover: #e05e00;
    --teal-accent: #20b2aa;
    --text-main: #f0f4f8;
    --text-muted: #a0aec0;
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Crucial: Prevents horizontal scrollbars from the wide light rays */
    background-image: 
        linear-gradient(180deg, rgba(7, 11, 18, 0.40) 0%, rgba(7, 11, 18, 0.65) 100%),
        url('images_index/heroshot.avif');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


/* Elevate all main content above the light rays */
header, main, footer, .tools-section, .hero {
    position: relative;
    z-index: 2;
}

a {
    color: inherit;
    text-decoration: none;
}

/* --- NAVIGATION --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(7, 11, 18, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bg-card-border);
    position: relative; /* This allows it to scroll away naturally */
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    cursor: pointer;
}

.nav-brand:hover .nav-logo {
    opacity: 0.9; 
}

.nav-brand img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.nav-logo {
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.nav-logo span {
    color: var(--primary-orange);
}

nav ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    align-items: center;
}

nav a {
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

nav a:hover {
    color: var(--text-main);
}

.nav-contact {
    padding: 0.4rem 1rem;
    border: 1px solid var(--primary-orange);
    border-radius: 4px;
    color: var(--primary-orange) !important;
    transition: all 0.2s ease !important;
}

.nav-contact:hover {
    background: var(--primary-orange);
    color: var(--text-main) !important;
}

/* --- LANGUAGE TOGGLE BUTTON --- */
.lang-btn {
    background: rgba(10, 16, 26, 0.88);
    border: 1px solid var(--primary-orange);
    color: var(--primary-orange);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.lang-btn:hover {
    background: var(--primary-orange);
    color: #fff;
}

/* --- HERO SECTION --- */
.hero {
    position: relative; /* Crucial: traps the absolute-positioned rays inside this box */
    text-align: center;
    padding: 4rem 1.5rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* --- CONSTRAINED GOD RAYS (HERO SECTION ONLY) --- */
/* --- HERO SECTION --- */
.hero {
    --show-rays: block; /* TOGGLE SWITCH: Change 'block' to 'none' to turn off rays entirely */
    
    position: relative; 
    /* overflow: hidden; removed so the radial mask can soften the edges naturally */
    text-align: center;
    padding: 4rem 1.5rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* --- RADIATING CONIC GOD RAYS (HERO SECTION ONLY) --- */
.hero::before,
.hero::after {
    content: "";
    display: var(--show-rays); /* Applies the toggle switch */
    position: absolute; 
    top: 0;
    left: -25%; /* Expanded left and right to reach the green lines */
    width: 150%; /* Widens the canvas for the rays */
    height: 100%; /* Stretches a bit deeper */
    pointer-events: none; 
    z-index: 1; 
    will-change: transform, opacity;
    
    /* RADIAL MASK: Acts like a soft spotlight, fading out smoothly at the bottom AND the sides to remove hard lines */
    -webkit-mask-image: radial-gradient(ellipse 65% 80% at 50% 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 80%);
    mask-image: radial-gradient(ellipse 65% 80% at 50% 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 80%);
}

.hero::before {
    /* Origin moved up to -20% and spread widened to match the green lines */
    background: conic-gradient(
        from 115deg at 50% -20%,
        transparent 0deg,
        rgba(255, 255, 255, 0.15) 15deg, transparent 18deg,
        rgba(32, 178, 170, 0.10) 30deg,  transparent 35deg,
        rgba(255, 255, 255, 0.12) 48deg, transparent 52deg,
        rgba(255, 255, 255, 0.20) 65deg, transparent 70deg,
        rgba(32, 178, 170, 0.15) 85deg,  transparent 90deg,
        rgba(255, 255, 255, 0.10) 105deg, transparent 110deg,
        rgba(255, 255, 255, 0.25) 120deg, transparent 125deg,
        rgba(32, 178, 170, 0.10) 135deg, transparent 140deg,
        transparent 145deg
    );
    animation: shimmerPulse 6s infinite alternate ease-in-out;
}

.hero::after {
    background: conic-gradient(
        from 120deg at 50% -20%,
        transparent 0deg,
        rgba(32, 178, 170, 0.10) 10deg,  transparent 14deg,
        rgba(255, 255, 255, 0.20) 25deg, transparent 30deg,
        rgba(32, 178, 170, 0.15) 42deg,  transparent 46deg,
        rgba(255, 255, 255, 0.10) 58deg, transparent 63deg,
        rgba(255, 255, 255, 0.20) 75deg, transparent 80deg,
        rgba(32, 178, 170, 0.10) 92deg,  transparent 96deg,
        rgba(255, 255, 255, 0.12) 110deg, transparent 114deg,
        rgba(255, 255, 255, 0.25) 125deg, transparent 130deg,
        rgba(32, 178, 170, 0.15) 138deg, transparent 142deg,
        transparent 148deg
    );
    animation: shimmerPulseAlt 8s infinite alternate ease-in-out;
}

/* --- PULSING ANIMATIONS --- */
/* Instead of sliding, the light gently swells and sways */
@keyframes shimmerPulse {
    0% { 
        transform: scale(1.02) rotate(-1deg); 
        opacity: 0.6; 
    }
    100% { 
        transform: scale(1.08) rotate(1deg); 
        opacity: 1; 
    }
}

@keyframes shimmerPulseAlt {
    0% { 
        transform: scale(1.08) rotate(1deg); 
        opacity: 1; 
    }
    100% { 
        transform: scale(1.02) rotate(-1deg); 
        opacity: 0.5; 
    }
}
/* Stop rays here
/* Elevate hero content over the rays */
.hero-logo, 
.hero h1 {
    position: relative;
    z-index: 2;
}

.hero-logo {
    width: 50%;
    height: auto;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.7));
}

.hero h1 {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* --- HERO SPECIFIC ANIMATIONS --- */
@keyframes shimmerHeroRays {
    0% { 
        transform: translateY(-2%) rotate(5deg) scale(1); 
        opacity: 0.6; 
    }
    100% { 
        transform: translateY(0%) rotate(12deg) scale(1.1); 
        opacity: 1; 
    }
}

@keyframes shimmerHeroRaysAlt {
    0% { 
        transform: translateY(0%) rotate(-5deg) scale(1.1); 
        opacity: 1; 
    }
    100% { 
        transform: translateY(-2%) rotate(-12deg) scale(1); 
        opacity: 0.5; 
    }
}

/* --- TOOLS SECTION HEADER --- */
.tools-section {
    max-width: 1100px;
    margin: 2rem auto 5rem;
    padding: 0 1.5rem;
    width: 100%;
}

.section-header {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
}

.section-header h2 {
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-orange);
    display: inline-block;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-orange);
}

/* --- TOOL CARDS --- */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.tool-card {
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(12px);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tool-card:hover {
    border-color: rgba(255, 107, 0, 0.6);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.tool-card h3 {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.tool-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.tool-btn {
    display: block;
    text-align: center;
    background: transparent;
    border: 1px solid var(--primary-orange);
    color: var(--primary-orange);
    padding: 0.7rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.tool-card:hover .tool-btn {
    background: var(--primary-orange);
    color: #fff;
}

/* --- FOOTER --- */
footer {
    margin-top: auto;
    background: rgba(5, 8, 13, 0.95);
    border-top: 1px solid var(--bg-card-border);
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

footer p {
    margin-bottom: 0.5rem;
}

.disclaimer {
    font-size: 0.75rem;
    color: #64748b;
    max-width: 650px;
    margin: 0.5rem auto 0;
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 1rem;
    }
    
    nav ul {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero h1 {
        font-size: 1.15rem;
    }
}