/* =========================================================
   CEISAH DESIGN SYSTEM
   AI SOFTWARE CONSULTING + CUSTOM DEVELOPMENT
   ========================================================= */

   :root {

    /* =========================================================
       PRIMARY BRAND COLORS
       ========================================================= */
  
    --primary-950: #041634;
    --primary-900: #072962;
    --primary-800: #0b3d91;
    --primary-700: #0f51c0;
    --primary-600: #2563eb;
    --primary-500: #3b82f6;
  
    /* =========================================================
       ACCENT COLORS
       ========================================================= */
  
    --accent-cyan: #03fff6;
    --accent-green: #00cfc8;
    --accent-blue: #00b5ff;
  
    /* =========================================================
       NEUTRALS
       ========================================================= */
  
    --white: #ffffff;
  
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
  
    /* =========================================================
       BACKGROUNDS
       ========================================================= */
  
    --background-primary: #ffffff;
    --background-secondary: #f8fafc;
    --background-dark: #041634;
    --background-card: rgba(255, 255, 255, 0.7);
  
    /* =========================================================
       TEXT COLORS
       ========================================================= */
  
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-white: #ffffff;
  
    /* =========================================================
       GRADIENTS
       ========================================================= */
  
    --gradient-primary: linear-gradient(
      135deg,
      #0b3d91 0%,
      #0f51c0 45%,
      #00cfc8 100%
    );
  
    --gradient-accent: linear-gradient(
      135deg,
      #03fff6 0%,
      #00cfc8 50%,
      #00b5ff 100%
    );
  
    --gradient-dark: linear-gradient(
      135deg,
      #041634 0%,
      #072962 100%
    );
  
    --gradient-glass: linear-gradient(
      135deg,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.04)
    );
  
    /* =========================================================
       TYPOGRAPHY
       ========================================================= */
  
    --font-primary: "Inter", sans-serif;
  
    /* =========================================================
       FONT SIZES
       ========================================================= */
  
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    --text-5xl: 56px;
    --text-6xl: 72px;
  
    /* =========================================================
       FONT WEIGHTS
       ========================================================= */
  
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
  
    /* =========================================================
       LINE HEIGHTS
       ========================================================= */
  
    --line-tight: 1.1;
    --line-normal: 1.5;
    --line-relaxed: 1.7;
  
    /* =========================================================
       LETTER SPACING
       ========================================================= */
  
    --tracking-tight: -0.04em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
  
    /* =========================================================
       SPACING SYSTEM
       8px GRID
       ========================================================= */
  
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
  
    /* =========================================================
       BORDER RADIUS
       ========================================================= */
  
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;
  
    /* =========================================================
       SHADOWS
       ========================================================= */
  
    --shadow-soft:
      0 10px 30px rgba(2, 6, 23, 0.08);
  
    --shadow-medium:
      0 15px 40px rgba(2, 6, 23, 0.12);
  
    --shadow-premium:
      0 20px 60px rgba(11, 61, 145, 0.18);
  
    --shadow-glow:
      0 0 40px rgba(3, 255, 246, 0.25);
  
    --shadow-button:
      0 10px 30px rgba(15, 81, 192, 0.25);
  
    /* =========================================================
       GLASS EFFECT
       ========================================================= */
  
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: blur(20px);
  
    /* =========================================================
       TRANSITIONS
       ========================================================= */
  
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  
    /* =========================================================
       Z-INDEX SYSTEM
       ========================================================= */
  
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-tooltip: 500;
  
    /* =========================================================
       CONTAINERS
       ========================================================= */
  
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
  
  }
  
  /* =========================================================
     GLOBAL RESET
     ========================================================= */
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    font-family: var(--font-primary);
    background: var(--background-primary);
    color: var(--text-primary);
    line-height: var(--line-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
  }
  
  h1 {
    font-size: var(--text-6xl);
    line-height: var(--line-tight);
  }
  
  h2 {
    font-size: var(--text-5xl);
    line-height: var(--line-tight);
  }
  
  h3 {
    font-size: var(--text-4xl);
  }
  
  h4 {
    font-size: var(--text-3xl);
  }
  
  p {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--line-relaxed);
  }
  
  /* =========================================================
     CONTAINER
     ========================================================= */
  
  .container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-6);
  }
  
  /* =========================================================
     SECTION
     ========================================================= */
  
  .section {
    padding-block: var(--space-24);
  }
  
  /* =========================================================
     BUTTONS
     ========================================================= */
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  
    border: none;
    cursor: pointer;
    text-decoration: none;
  
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
  
    transition: var(--transition-normal);
  
    border-radius: var(--radius-lg);
  
    padding:
      var(--space-4)
      var(--space-8);
  }
  
  .btn-primary {
    background: var(--gradient-primary);
    color: var(--white);
    box-shadow: var(--shadow-button);
  }
  
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
  }
  
  .btn-secondary {
    background: transparent;
    border: 1px solid rgba(11, 61, 145, 0.15);
    color: var(--primary-800);
  }
  
  .btn-secondary:hover {
    background: rgba(11, 61, 145, 0.05);
  }
  
  /* =========================================================
     CARDS
     ========================================================= */
  
  .card {
    background: var(--white);
  
    border-radius: var(--radius-xl);
  
    padding: var(--space-8);
  
    box-shadow: var(--shadow-soft);
  
    transition: var(--transition-normal);
  
    border: 1px solid rgba(255,255,255,0.08);
  }
  
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-premium);
  }
  
  /* =========================================================
     GLASS CARD
     ========================================================= */
  
  .card-glass {
    background: var(--glass-bg);
  
    backdrop-filter: var(--glass-blur);
  
    border: 1px solid var(--glass-border);
  
    border-radius: var(--radius-xl);
  
    box-shadow: var(--shadow-soft);
  }
  
  /* =========================================================
     NAVBAR
     ========================================================= */
  
  .navbar {
    position: sticky;
    top: 0;

    z-index: var(--z-sticky);

    min-height: 80px;

    display: flex;
    align-items: center;
  
    backdrop-filter: blur(20px);
  
    background: rgba(255,255,255,0.7);
  
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  
  /* =========================================================
     HERO SECTION
     ========================================================= */
  
  .hero {
    position: relative;
  
    overflow: hidden;
  
    background: var(--gradient-dark);
  
    color: var(--white);
  
    padding-top: 160px;
    padding-bottom: 120px;
  }
  
  .hero-title {
    color: var(--white);
  
    max-width: 900px;
  }
  
  .hero-description {
    margin-top: var(--space-6);
  
    max-width: 720px;
  
    font-size: var(--text-xl);
  
    color: rgba(255,255,255,0.8);
  }
  
  /* =========================================================
     BADGES
     ========================================================= */
  
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  
    padding:
      var(--space-2)
      var(--space-4);
  
    border-radius: var(--radius-full);
  
    background: rgba(3,255,246,0.12);
  
    color: var(--accent-cyan);
  
    font-size: var(--text-sm);
  
    font-weight: var(--weight-semibold);
  }
  
  /* =========================================================
     INPUTS
     ========================================================= */
  
  .input {
    width: 100%;
  
    border: 1px solid var(--neutral-200);
  
    border-radius: var(--radius-lg);
  
    padding:
      var(--space-4)
      var(--space-5);
  
    font-size: var(--text-md);
  
    transition: var(--transition-fast);
  }
  
  .input:focus {
    outline: none;
  
    border-color: var(--primary-700);
  
    box-shadow:
      0 0 0 4px rgba(15, 81, 192, 0.1);
  }
  
  /* =========================================================
     GRID SYSTEM
     ========================================================= */
  
  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
  
  .grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
  
  /* =========================================================
     AI GLOW EFFECT
     ========================================================= */
  
  .ai-glow {
    position: relative;
  }
  
  .ai-glow::before {
    content: "";
  
    position: absolute;
  
    inset: -2px;
  
    background: var(--gradient-accent);
  
    border-radius: inherit;
  
    filter: blur(20px);
  
    opacity: 0.4;
  
    z-index: -1;
  }
  
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  
  @media (max-width: 1024px) {
  
    h1 {
      font-size: 56px;
    }
  
    h2 {
      font-size: 40px;
    }
  
    .grid-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  
  }
  
  @media (max-width: 768px) {
  
    h1 {
      font-size: 40px;
    }
  
    h2 {
      font-size: 32px;
    }
  
    h3 {
      font-size: 24px;
    }
  
    .hero {
      padding-top: 120px;
      padding-bottom: 80px;
    }
  
    .hero-description {
      font-size: var(--text-lg);
    }
  
    .grid-2,
    .grid-3,
    .grid-4 {
      grid-template-columns: 1fr;
    }
  
    .section {
      padding-block: var(--space-20);
    }
  
  }
  
  @media (max-width: 480px) {
  
    .container {
      padding-inline: var(--space-4);
    }
  
    h1 {
      font-size: 32px;
    }
  
    .btn {
      width: 100%;
    }
  
  }