/* ==========================================================================
   TUNEUPX MASTER DESIGN SYSTEM & BASE CONFIGURATIONS (main.css)
   ========================================================================== */

/* --- Custom Variables & Tokens --- */
:root {
    /* Base Obsidian & Charcoal Gradients */
    --bg-black: #0A0A0A;
    --bg-charcoal: #111318;
    --bg-card: rgba(17, 19, 24, 0.7);
    --bg-card-hover: rgba(26, 29, 36, 0.85);
    
    /* Branding Accent Colors */
    --accent-orange: #E8610A;
    --accent-amber: #FF8C00;
    --accent-gold: #C8962A;
    
    /* Neon Glow Coordinates */
    --glow-orange: rgba(232, 97, 10, 0.35);
    --glow-gold: rgba(200, 150, 42, 0.25);
    --glow-ambient: rgba(255, 255, 255, 0.02);

    /* Text Layering */
    --text-primary: #FFFFFF;
    --text-secondary: #E2E8F0;
    --text-muted: #94A3B8;
    --text-muted-dark: #64748B;
    --border-color: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(232, 97, 10, 0.3);

    /* Typography Coordinates */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Cairo', sans-serif;

    /* Global Transitions & Easings */
    --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.2s ease;
    --border-radius: 12px;
}

/* --- Base Standard Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-black);
    color: var(--text-primary);
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--bg-black);
    -webkit-font-smoothing: antialiased;
}

/* --- Scrollbar Customization --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-black);
}

::-webkit-scrollbar-thumb {
    background: #222530;
    border-radius: 4px;
    border: 2px solid var(--bg-black);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-orange);
}

/* --- Semantic Elements Styles --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.2;
}

p {
    color: var(--text-secondary);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

ul {
    list-style: none;
}

/* --- Custom Typographic Helpers --- */
.gradient-text {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-amber) 50%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glow-text {
    text-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
}

.uppercase-label {
    font-family: var(--font-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
}

.gold-text { color: var(--accent-gold) !important; }
.orange-text { color: var(--accent-orange) !important; }
.amber-text { color: var(--accent-amber) !important; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted) !important; }
.w-full { width: 100%; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.hidden { display: none !important; }

/* --- Shared Layout Containers --- */
.section-padding {
    padding: 6.25rem 0;
}

.section-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    margin-bottom: 4rem;
    max-width: 700px;
}

.section-header.text-center {
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: 2.75rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1.15;
}

.section-desc {
    font-size: 1.125rem;
    color: var(--text-muted);
}

.subsection-title {
    font-size: 1.5rem;
    margin-top: 3rem;
}

/* Grid Frameworks */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

/* Split Column Standard Layout */
.split-hero-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

/* Background watermarks for Islamic patterns */
.islamic-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.opacity-3 { opacity: 0.03; }
.opacity-5 { opacity: 0.05; }

/* --- Geometric SVG Background Pattern Encoded --- */
.pattern-arabesque {
    /* Sophisticated repeating octagonal stars */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L38.8 8.8 L45 0 L51.2 8.8 L60 0 L51.2 11.2 L60 20 L51.2 28.8 L60 30 L51.2 31.2 L60 40 L51.2 48.8 L60 60 L48.8 51.2 L40 60 L31.2 51.2 L30 60 L28.8 51.2 L20 60 L11.2 51.2 L0 60 L8.8 48.8 L0 40 L8.8 31.2 L0 30 L8.8 28.8 L0 20 L8.8 11.2 L0 0 L11.2 8.8 L20 0 L28.8 8.8 Z' fill='none' stroke='%23C8962A' stroke-width='0.4' opacity='0.25'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.pattern-mashrabiya {
    /* Interconnected wood carving mesh */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M 0 40 L 40 0 L 80 40 L 40 80 Z M 40 0 L 40 80 M 0 40 L 80 40' fill='none' stroke='%23E8610A' stroke-width='0.4' opacity='0.25'/%3E%3Ccircle cx='40' cy='40' r='6' fill='none' stroke='%23E8610A' stroke-width='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* --- Global Transition Overlay System --- */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.transition-overlay.active {
    transform: translateY(0);
}

.transition-overlay.fade-out {
    transform: translateY(-100%);
}

.transition-pattern {
    width: 100%;
    height: 100%;
}

.pattern-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawPattern 2s infinite linear;
}

@keyframes drawPattern {
    0% { stroke-dashoffset: 200; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

/* --- Master Keyframe Library --- */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes pulseGlow {
    0% { transform: scale(0.92); opacity: 0.4; }
    50% { transform: scale(1.05); opacity: 0.95; }
    100% { transform: scale(0.92); opacity: 0.4; }
}

@keyframes floatIndicator {
    0% { transform: translateY(0); }
    50% { transform: translateY(8px); }
    100% { transform: translateY(0); }
}

@keyframes dashFlow {
    to { stroke-dashoffset: -20; }
}

/* --- RTL (Right-to-Left Layout Engine) --- */
body.rtl, [dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-accent), var(--font-body);
}

/* Mirrored Alignments using Logical Properties natively */
.rtl .text-center { text-align: center; }
.rtl .desktop-nav { margin-right: auto; margin-left: 0; }
.rtl .header-actions { margin-left: 0; margin-right: auto; }
.rtl .card-link i { transform: scaleX(-1); margin-right: 0.5rem; margin-left: 0; }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .split-hero-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .grid-4, .grid-3, .grid-2, .grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .section-padding {
        padding: 4rem 0;
    }
    
    .grid-4, .grid-3, .grid-2, .grid-5 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
}