/* ==========================================
   THEME - CSS Variables, Resets, Typography
   ========================================== */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* Primary Colors */
    --primary: #005dd8;
    --primary-light: #00aaff;
    --primary-dark: #004bb7;
    --primary-glow: rgba(0, 93, 216, 0.4);
    --primary-subtle: rgba(0, 93, 216, 0.1);
    --primary-border: rgba(0, 170, 255, 0.3);

    /* Accent Colors */
    --accent-purple: #6B46C1;
    --accent-green: #10B981;
    --accent-pink: #EC4899;
    --accent-orange: #ff6b00;

    /* Semantic */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;

    /* Backgrounds */
    --bg-body: #080808;
    --bg-section: #0f0f0f;
    --bg-section-alt: #0a0a0a;
    --bg-card: #1a1a1a;
    --bg-card-hover: #262626;
    --bg-elevated: #1f1f1f;
    --bg-input: transparent;

    /* Glass */
    --glass-bg: rgba(20, 20, 30, 0.15);
    --glass-bg-heavy: rgba(20, 20, 30, 0.3);
    --glass-blur: blur(30px);
    --glass-blur-heavy: blur(40px);
    --glass-saturate: saturate(150%);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #d9d9d9;
    --text-muted: #ababab;
    --text-dim: #888888;
    --text-faint: #777777;
    --text-placeholder: #999999;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: #333333;
    --border-accent: rgba(0, 170, 255, 0.3);

    /* Shadows */
    --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 8px 32px rgba(0, 93, 216, 0.2);
    --shadow-accent-lg: 0 12px 40px rgba(0, 170, 255, 0.4);
    --shadow-glow: 0 0 20px rgba(0, 170, 255, 0.5);

    /* Border Radius */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-pill: 50px;
    --radius-circle: 50%;

    /* Transitions */
    --ease-fast: 0.2s ease;
    --ease-normal: 0.3s ease;
    --ease-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);

    /* Typography */
    --font-primary: 'Inter', 'Poppins', sans-serif;
    --font-display: 'Poppins', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Header BG */
    --header-bg: url(/images/background2.png);
    --header-bg-mobile: url(/images/phone-background1.png);
}

/* ==========================================
   LIGHT THEME
   ========================================== */
body.light-theme {
    --bg-body: #f5f7fa;
    --bg-section: #e8ecf1;
    --bg-section-alt: #e0e7ef;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --bg-elevated: rgba(255, 255, 255, 0.9);
    --bg-input: rgba(255, 255, 255, 0.9);

    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-heavy: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 93, 216, 0.2);
    --glass-shadow: 0 8px 32px rgba(0, 93, 216, 0.15);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

    --text-primary: #1a1a1a;
    --text-secondary: #444444;
    --text-muted: #4a5568;
    --text-dim: #6b7280;
    --text-faint: #888888;
    --text-placeholder: #6b7280;

    --border-subtle: rgba(0, 93, 216, 0.08);
    --border-light: rgba(0, 93, 216, 0.15);
    --border-medium: rgba(0, 93, 216, 0.2);

    --shadow-sm: 0 5px 15px rgba(0, 93, 216, 0.08);
    --shadow-md: 0 8px 32px rgba(0, 93, 216, 0.12);
    --shadow-lg: 0 10px 30px rgba(0, 93, 216, 0.15);

    --header-bg: url(/images/Light_bg1.png);
    --header-bg-mobile: url(/images/phone-background1_light.png);
}

/* ==========================================
   RESET & BASE
   ========================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background var(--ease-smooth), color var(--ease-smooth);
    overflow-x: hidden;
}

code, pre {
    font-family: var(--font-mono);
}

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

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

ul {
    list-style: none;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    line-height: 1.2;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.section-title span {
    color: var(--primary);
}

.sub-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.sub-title span {
    color: var(--primary);
}

.tagline {
    font-size: 1.2rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

/* ==========================================
   LAYOUT
   ========================================== */
.container {
    padding: 10px 10%;
}

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

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

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

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */
@media only screen and (max-width: 768px) {
    .container,
    .container-a {
        padding: 20px 5%;
        overflow-x: hidden;
    }

    .section-title {
        font-size: 2rem;
    }

    .sub-title {
        font-size: 2rem;
    }
}