/*
Theme Name: Ragon Solutions
Theme URI: https://ragonsolutions.com
Author: Ragon Solutions
Author URI: https://ragonsolutions.com
Description: Cinematic Editorial — A high-fidelity dark theme for Ragon Solutions built on glassmorphism and editorial typography.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: ragon
*/

/* ═══════════════════════════════════════════════════════
   GOOGLE FONTS IMPORT
   Epilogue · Manrope · Space Grotesk
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;600;700;800&family=Manrope:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');


/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════ */
:root {

  /* — Surfaces — */
  --surface:                  #111318;
  --surface-dim:              #111318;
  --surface-bright:           #37393e;
  --surface-lowest:           #0c0e12;
  --surface-low:              #1a1c20;
  --surface-container:        #1e2024;
  --surface-high:             #282a2e;
  --surface-highest:          #333539;

  /* — On-Surface — */
  --on-surface:               #e2e2e8;
  --on-surface-variant:       #d4c0d7;
  --inverse-surface:          #e2e2e8;
  --inverse-on-surface:       #2f3035;

  /* — Outline — */
  --outline:                  #9d8ba0;
  --outline-variant:          #514255;

  /* — Primary (Purple/Magenta) — */
  --primary:                  #ecb2ff;
  --on-primary:               #520071;
  --primary-container:        #bd00ff;
  --on-primary-container:     #ffffff;
  --inverse-primary:          #9900cf;
  --primary-fixed:            #f8d8ff;
  --primary-fixed-dim:        #ecb2ff;
  --on-primary-fixed:         #320047;
  --on-primary-fixed-variant: #74009f;

  /* — Secondary (Warm Orange) — */
  --secondary:                #ffb59a;
  --on-secondary:             #5a1b00;
  --secondary-container:      #ff5e07;
  --on-secondary-container:   #531900;
  --secondary-fixed:          #ffdbce;
  --secondary-fixed-dim:      #ffb59a;
  --on-secondary-fixed:       #370e00;
  --on-secondary-fixed-variant: #802a00;

  /* — Tertiary (Violet) — */
  --tertiary:                 #d1bcff;
  --on-tertiary:              #3c0090;
  --tertiary-container:       #884fff;
  --on-tertiary-container:    #ffffff;

  /* — Error — */
  --error:                    #ffb4ab;
  --on-error:                 #690005;
  --error-container:          #93000a;
  --on-error-container:       #ffdad6;

  /* — Background — */
  --background:               #111318;
  --on-background:            #e2e2e8;
  --surface-variant:          #333539;
  --surface-tint:             #ecb2ff;

  /* — Gradients — */
  --gradient-primary:         linear-gradient(135deg, #ecb2ff 0%, #bd00ff 50%, #7c00d4 100%);
  --gradient-glow:            radial-gradient(ellipse at center, rgba(189, 0, 255, 0.2) 0%, transparent 70%);
  --gradient-glass-border:    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 100%);

  /* — Typography — */
  --font-headline:            'Epilogue', sans-serif;
  --font-body:                'Manrope', sans-serif;
  --font-label:               'Space Grotesk', sans-serif;

  /* — Type Scale — */
  --text-xl:   clamp(48px, 7vw, 72px);
  --text-lg:   clamp(32px, 5vw, 48px);
  --text-md:   clamp(24px, 3vw, 32px);
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-label:   14px;

  /* — Spacing (8px unit system) — */
  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   48px;
  --space-8:   64px;
  --space-10:  80px;
  --space-15:  120px;
  --container: 1280px;
  --gutter:    32px;

  /* — Radius — */
  --radius-sm:   0.5rem;
  --radius:      1rem;
  --radius-md:   1.5rem;
  --radius-lg:   2rem;
  --radius-xl:   3rem;
  --radius-full: 9999px;

  /* — Glass — */
  --glass-bg:     rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   20px;

  /* — Transitions — */
  --transition:       0.3s ease;
  --transition-slow:  0.6s ease;
}


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--background);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  min-height: 100vh;
}

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

img, video {
  max-width: 100%;
  display: block;
}

ul, ol { list-style: none; }

button, input, textarea, select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}


/* ═══════════════════════════════════════════════════════
   GLOBAL EFFECTS
═══════════════════════════════════════════════════════ */

/* Film Grain Overlay */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.02;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Custom Cursor */
.custom-cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: var(--radius-full);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width 0.2s ease,
    height 0.2s ease,
    opacity 0.2s ease,
    background 0.2s ease;
  z-index: 9999;
  box-shadow: 0 0 16px rgba(236, 178, 255, 0.6);
}

.custom-cursor.expanded {
  width: 40px;
  height: 40px;
  background: rgba(236, 178, 255, 0.15);
  border: 1px solid rgba(236, 178, 255, 0.4);
  box-shadow: 0 0 30px rgba(236, 178, 255, 0.2);
}


/* ═══════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-15);
}

.section--sm {
  padding-block: var(--space-10);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.site-main {
  padding-top: 80px; /* offset for fixed header */
}


/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM
═══════════════════════════════════════════════════════ */

/* Headlines */
.headline-xl {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.headline-lg {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.headline-md {
  font-family: var(--font-headline);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Body */
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: 1.6;
}

.body-md {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
}

/* Label / Utility */
.label-caps {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Color utilities */
.text-primary   { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-muted     { color: var(--outline); }
.text-white     { color: #ffffff; }


/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: var(--transition);
  cursor: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Primary — gradient pill with glow */
.btn--primary {
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: 0 0 40px rgba(189, 0, 255, 0.2);
}

.btn--primary:hover {
  box-shadow: 0 0 60px rgba(189, 0, 255, 0.4);
  transform: translateY(-2px);
}

/* CTA alias */
.btn--cta {
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: 0 0 40px rgba(189, 0, 255, 0.2);
}

.btn--cta:hover {
  box-shadow: 0 0 60px rgba(189, 0, 255, 0.4);
  transform: translateY(-2px);
}

/* Glass — dark glass with gradient border */
.btn--glass {
  background: var(--glass-bg);
  color: var(--on-surface);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.btn--glass:hover {
  border-color: rgba(236, 178, 255, 0.3);
  color: var(--primary);
  background: rgba(236, 178, 255, 0.05);
}

/* Secondary — orange accent */
.btn--secondary {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.btn--secondary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════
   GLASS CARDS
═══════════════════════════════════════════════════════ */
.card {
  background: var(--glass-bg);
  border: 1px solid;
  border-image: var(--gradient-glass-border) 1;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: var(--space-4);
  transition: var(--transition);
}

.card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-image: linear-gradient(135deg, rgba(236, 178, 255, 0.2) 0%, rgba(255,255,255,0.02) 100%) 1;
}

/* Simpler glass card without border-image for wider compat */
.card--glass {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--space-4);
  transition: background var(--transition), border-color var(--transition);
}

.card--glass:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(236, 178, 255, 0.2);
}


/* ═══════════════════════════════════════════════════════
   CHIPS / TAGS
═══════════════════════════════════════════════════════ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chip--primary {
  background: rgba(236, 178, 255, 0.12);
  color: var(--primary);
  border: 1px solid rgba(236, 178, 255, 0.2);
}

.chip--secondary {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.chip--glass {
  background: var(--glass-bg);
  color: var(--on-surface-variant);
  border: 1px solid var(--glass-border);
}


/* ═══════════════════════════════════════════════════════
   FLOATING NAVIGATION HEADER
═══════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding-block: 16px;
  background: rgba(17, 19, 24, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Brand / Logo */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: none;
}

.brand-name {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface);
}

/* Primary Nav */
.site-nav {}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-list a {
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--outline);
  letter-spacing: 0.02em;
  transition: color var(--transition);
}

.nav-list a:hover,
.nav-list a.current-menu-item {
  color: var(--on-surface);
}

/* Header CTA */
.header-cta {}


/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.site-footer {
  padding-block: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--surface-lowest);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-brand {
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface);
}

.footer-sub {
  font-size: 13px;
  color: var(--outline);
  margin-top: 4px;
}

.footer-list {
  display: flex;
  gap: var(--space-3);
}

.footer-list a {
  font-family: var(--font-label);
  font-size: 13px;
  color: var(--outline);
  transition: color var(--transition);
}

.footer-list a:hover {
  color: var(--primary);
}

.footer-copy {
  font-size: 13px;
  color: var(--outline-variant);
}


/* ═══════════════════════════════════════════════════════
   INPUT FIELDS
═══════════════════════════════════════════════════════ */
.input {
  width: 100%;
  padding: 14px var(--space-2);
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--text-body);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input::placeholder {
  color: var(--outline);
}

.input:focus {
  border-color: var(--primary-container);
  box-shadow: 0 0 0 3px rgba(189, 0, 255, 0.12), inset 0 0 0 1px rgba(189, 0, 255, 0.1);
}

textarea.input {
  resize: vertical;
  min-height: 120px;
}


/* ═══════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════ */

/* Glow effects */
.glow-primary {
  box-shadow: 0 0 60px rgba(189, 0, 255, 0.2);
}

.glow-text {
  text-shadow: 0 0 40px rgba(236, 178, 255, 0.4);
}

/* Gradient text */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Divider */
.divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  margin-block: var(--space-10);
}

/* Accent line */
.accent-line {
  width: 48px;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

/* Visibility */
.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;
}


/* ═══════════════════════════════════════════════════════
   404 PAGE
═══════════════════════════════════════════════════════ */
.page-title {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-2);
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --space-15: 80px;
    --space-10: 60px;
  }

  .nav-list {
    gap: var(--space-2);
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .grid-12 {
    grid-template-columns: 1fr;
  }

  body {
    cursor: auto; /* restore cursor on mobile */
  }

  .custom-cursor {
    display: none;
  }

  .grain-overlay {
    display: none;
  }
}

@media (max-width: 480px) {
  .nav-list {
    display: none; /* handle with mobile menu via Elementor */
  }

  .btn {
    padding: 12px 20px;
    font-size: 13px;
  }
}