/* ===================================================================

   global.css

   Purpose: Defines the core structure, layout, typography, and

   color scheme for the entire website. This file should be

   loaded first.

   =================================================================== */



/* ===================================

   CSS CUSTOM PROPERTIES

   =================================== */

:root {

    /* Primary Colors */

    --primary-cyan: #00bcd4;

    --primary-blue: #007acc;

    --primary-purple: #9c27b0;

    --primary-pink: #ff6b9d;

    --accent-cyan: #00e5ff;



    /* Background Colors */

    --navy-dark: #16213e;

    --navy-deep: #0f3460;

    --purple-deep: #533a7d;

    --purple-rich: #7b1fa2;

    --blue-royal: #1565c0;

    --dark-bg: #1a1a2e;

    --darker-bg: #0f1419;

    --light-bg: #f8f9fa;

    --white: #fff;

    --black: #000;



    /* Text Colors */

    --text-primary: #333;

    --text-secondary: #666;

    --text-light: #ccc;



    /* Border Colors */

    --border-light: rgba(255, 255, 255, 0.1);

    --border-lighter: rgba(255, 255, 255, 0.05);

    --border-color: #e1e8f0;

    --overlay-dark: rgba(0, 0, 0, 0.1);



    /* Status Colors */

    --success-green: #4caf50;

    --error-red: #ef4444;

    --whatsapp-green: #25D366;

    --whatsapp-dark: #128C7E;



    /* Spacing */

    --section-padding: 120px;

    --container-padding: 20px;

    --card-padding: 40px 30px;

    --small-padding: 20px;

    --border-radius: 20px;

    --small-radius: 12px;

    --icon-size: 60px;

    --large-icon: 80px;



    /* Typography */

    --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-size-hero: clamp(3rem, 8vw, 6rem);

    --font-size-h2: 48px;

    --font-size-h3: 24px;

    --font-size-body: 16px;

    --font-size-small: 14px;

    --line-height: 1.6;



    /* Shadows */

    --shadow-soft: 0 15px 35px rgba(0, 0, 0, 0.1);

    --shadow-medium: 0 25px 50px rgba(0, 0, 0, 0.15);

    --shadow-glow: 0 30px 60px rgba(0, 188, 212, 0.2);



    /* Misc */

    --primary-white: #ffffff;

    --logo-opacity: 0.8;

    --ring-glow-intensity: 0.3;



    /* Font Display */

    font-display: swap;

}



/* ===================================

   RESET & BASE STYLES

   =================================== */

*,

*::before,

*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font: var(--font-size-body)/var(--line-height) var(--font-primary);

    color: var(--text-primary);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    background: linear-gradient(135deg, #0a1a2e 0%, #16213e 25%, #0f3460 75%, #533a7d 100%);

    min-height: 100vh;

    font-display: swap;

}



/* ===================================

   CORE TYPOGRAPHY

   =================================== */

h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: var(--font-primary);

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 1rem;

}



h1 {

    font-size: var(--font-size-hero);

}



h2 {

    font-size: var(--font-size-h2);

}



h3 {

    font-size: var(--font-size-h3);

}



p {

    margin-bottom: 1rem;

    line-height: var(--line-height);

}



a {

    color: var(--primary-cyan);

    text-decoration: none;

}



/* ===================================

   UTILITY CLASSES

   =================================== */

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--container-padding);

}



.section {

    padding: var(--section-padding) 0;

}



.text-center {

    text-align: center;

}



.text-left {

    text-align: left;

}



.text-right {

    text-align: right;

}



.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



/* ===================================

   PERFORMANCE OPTIMIZATIONS

   =================================== */

.hero,

.services,

.process,

.roadmap-stream,

.technical,

.industries-section,

.faq-section,

.contact {

    contain: layout style paint;

}



/* ===================================

   RESPONSIVE DESIGN - CORE

   =================================== */

@media (min-width: 1024px) {

    :root {

        --section-padding: 120px;

        --font-size-h2: 48px;

    }

}



@media (max-width: 1024px) {

    :root {

        --section-padding: 80px;

        --font-size-h2: 42px;

    }

}



@media (max-width: 768px) {

    :root {

        --section-padding: 60px;

        --container-padding: 15px;

        --card-padding: 30px 20px;

        --font-size-h2: 36px;

    }

}



@media (max-width: 480px) {

    :root {

        --font-size-h2: 32px;

        --card-padding: 25px 20px;

    }

}