/* ============================================================
   RUDRION TECH SOLUTIONS — global.css (Typography Enhanced)
   Shared design tokens + cross-section utilities.
   ============================================================ */

/* Import premium modern clean tech stacks fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@700;800&display=swap');

:root {
  --c-black:        #08080a;
  --c-black-soft:   #0e0e11;
  --c-black-panel:  #131316;
  --c-copper-deep:  #7a4a28;
  --c-copper:       #b8763f;
  --c-copper-light: #d99b6e;
  --c-rose-gold:    #e3ac82;
  --c-metal-hi:     #f3d9b8;
  --c-text-1:       #f2ece4;
  --c-text-2:       #b9b0a6;
  --c-text-3:       #7c766f;
  --c-line:         rgba(216, 173, 128, 0.16);
  --c-glass:        rgba(20, 18, 17, 0.55);

  --grad-copper: linear-gradient(120deg, var(--c-copper-deep), var(--c-copper) 45%, var(--c-rose-gold) 75%, var(--c-metal-hi));
  --grad-copper-soft: linear-gradient(120deg, var(--c-copper) 0%, var(--c-rose-gold) 100%);

  /* Premium tech stack typography pairings */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1500px;
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --nav-h: 84px;

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-fast: 0.25s;
  --dur-med: 0.55s;
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--c-black);
  color: var(--c-text-1);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.6;
  letter-spacing: -0.011em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: var(--font-body); font-size: 0.95rem; }
input::placeholder, textarea::placeholder { font-family: var(--font-body); letter-spacing: -0.01em; }
::selection { background: var(--c-copper); color: #0a0a0a; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ============ SHARED UTILITIES ============ */
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-copper-light); display: inline-block;
  box-shadow: 0 0 10px 2px rgba(217,155,110,0.7);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:0.5; transform:scale(1.4);} }

.glass-panel {
  background: var(--c-glass);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  position: relative;
}
.glass-panel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(243,217,184,0.35), transparent 40%, transparent 60%, rgba(184,118,63,0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

@keyframes auroraFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-30px) scale(1.08); }
  66% { transform: translate(-24px,20px) scale(0.96); }
}

.reveal-fade { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--delay, 0s); }
.reveal-fade.is-visible { opacity: 1; transform: translateY(0); }

.reveal-up {
  opacity: 0; transform: translateY(46px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* Section heading typography enhancements */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-copper-light); font-weight: 600; margin-bottom: 18px;
}
.section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.12;
  color: var(--c-text-1); margin-bottom: 18px; letter-spacing: -0.03em;
}
.section-lead {
  color: var(--c-text-2); font-size: clamp(0.95rem, 1.1vw, 1.15rem); max-width: 560px;
  line-height: 1.65; margin: 0 auto;
}

/* ============ BUTTONS (shared across all sections) ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; position: relative; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.btn__arrow { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform var(--dur-fast); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { background: var(--grad-copper-soft); color: #1a0f06; box-shadow: 0 8px 26px rgba(184,118,63,0.35); }
.btn--primary:hover { box-shadow: 0 10px 34px rgba(217,155,110,0.5); transform: translateY(-2px); }

.btn--ghost { color: var(--c-text-1); border: 1px solid var(--c-line); background: rgba(255,255,255,0.02); }
.btn--ghost:hover { border-color: var(--c-copper-light); background: rgba(217,155,110,0.06); }

.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,0.45); transform: scale(0);
  animation: rippleAnim 0.7s var(--ease-out);
}
@keyframes rippleAnim { to { transform: scale(3.2); opacity: 0; } }