/* ==========================================================================
   MURALWORKSAI — ORANGE & WHITE DESIGN SYSTEM
   Inspired by Crescendo Overseas layout
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* Brand Palette */
  --orange:         #E85D04;
  --orange-dark:    #C44D00;
  --orange-light:   #FF7A2F;
  --orange-glow:    rgba(232, 93, 4, 0.25);
  --orange-pale:    #FFF1E6;
  --orange-mid:     #FFD6B0;

  /* Backgrounds */
  --bg-white:       #ffffff;
  --bg-cream:       #FFF8F3;
  --bg-cream-2:     #FFF1E6;
  --bg-dark:        #0F0500;
  --bg-dark-card:   #1A0A00;

  /* Text */
  --text-primary:   #0F0500;
  --text-body:      #2D1200;
  --text-muted:     #6B3A1F;
  --text-faint:     #9A6040;

  /* Borders */
  --border:         #FFD6B0;
  --border-light:   #FFE8D4;
  --border-strong:  #E85D04;

  /* Typography */
  --font:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:   'JetBrains Mono', monospace;

  /* Radius */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-full:9999px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(232,93,4,0.08);
  --shadow-md: 0 6px 24px rgba(232,93,4,0.14);
  --shadow-lg: 0 16px 48px rgba(232,93,4,0.20);

  /* Transitions */
  --t-fast:   0.18s cubic-bezier(0.16,1,0.3,1);
  --t-smooth: 0.35s cubic-bezier(0.16,1,0.3,1);
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--font); background: var(--bg-white); color: var(--text-primary);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { background: var(--bg-white); color: var(--text-primary); overflow-x: hidden; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── Gradient Text ──────────────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Badge ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: var(--r-full);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--orange-pale); border: 1px solid var(--orange-mid); color: var(--orange-dark);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 24px; border-radius: var(--r-full);
  font-size: 0.9rem; font-weight: 700;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  color: #fff; border: none;
  box-shadow: 0 4px 16px var(--orange-glow);
  transition: all var(--t-fast);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--orange-dark) 0%, var(--orange) 100%);
  box-shadow: 0 6px 22px rgba(232,93,4,0.4); transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 24px; border-radius: var(--r-full);
  font-size: 0.9rem; font-weight: 700;
  background: #fff; color: var(--orange);
  border: 2px solid var(--orange);
  transition: all var(--t-fast);
}
.btn-secondary:hover { background: var(--orange-pale); transform: translateY(-1px); }

/* ── Layout ─────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-pad { padding: 88px 0; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-white); border: 1px solid var(--border-light);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: all var(--t-smooth); position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  opacity: 0; transition: opacity var(--t-fast);
}
.card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card:hover::before { opacity: 1; }

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg-cream); }
::-webkit-scrollbar-thumb { background: var(--orange-mid); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes pulse-ring { 0%,100%{box-shadow:0 0 0 0 var(--orange-glow);} 50%{box-shadow:0 0 0 10px transparent;} }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes scrollPulse {
  0%,100%{opacity:0.3;transform:scaleY(0.7);}
  50%{opacity:1;transform:scaleY(1);}
}

/* Aliases for CaseStudies.jsx imported from CWW AI Website */
:root {
  --canvas: var(--bg-cream);
  --surface: var(--bg-white);
  --surface-2: var(--bg-cream-2);
  --text: var(--text-primary);
  --violet-light: var(--orange);
  --violet: var(--orange);
  --border-strong: var(--border-strong);
}