:root{
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --card: 0 0% 10%;
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 10%;
  --popover-foreground: 0 0% 100%;
  --primary: 20 90% 54%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 17%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 17%;
  --muted-foreground: 0 0% 65%;
  --accent: 20 90% 54%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 20%;
  --input: 0 0% 20%;
  --ring: 20 90% 54%;
  --radius: 0.5rem;
  --graphite: 0 0% 17%;
  --graphite-foreground: 0 0% 100%;
  --section-light: 0 0% 100%;
  --section-light-foreground: 0 0% 0%;
}

/* Color helper classes used by the markup */
.bg-background{background-color: hsl(var(--background));}
.text-foreground{color: hsl(var(--foreground));}
.bg-section-light{background-color: hsl(var(--section-light));}
.text-section-light-foreground{color: hsl(var(--section-light-foreground));}
.text-muted-foreground{color: hsl(var(--muted-foreground));}
.bg-graphite{background-color: hsl(var(--graphite));}
.text-graphite-foreground{color: hsl(var(--graphite-foreground));}
.text-primary{color: hsl(var(--primary));}
.text-primary-foreground{color: hsl(var(--primary-foreground));}
.border-border{border-color: hsl(var(--border));}
.font-heading{font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
.font-body{font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}

/* Minor utilities */
.animate-fade-in-up{animation: fadeInUp .6s ease both;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* nav scrolled state */
#site-nav.scrolled{background-color: hsl(var(--background)/0.95);backdrop-filter: blur(6px);border-bottom:1px solid hsl(var(--border));}

/* small responsive fixes */
@media (min-width:768px){
  #mobile-menu{display:none!important}
}

/* Button animation */
.btn{display:inline-block;transition:transform .70s cubic-bezier(.2,.9,.3,1),box-shadow .70s cubic-bezier(.2,.9,.3,1),opacity .28s ease;}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 26px rgba(0,0,0,0.12);}

/* Hover ring override: use orange instead of primary blue */
.hover-ring-orange{transition:box-shadow .18s ease,border-color .18s ease}
.hover-ring-orange:hover{box-shadow:0 0 0 4px rgba(255,140,0,0.18);border-color:rgba(255,140,0,0.9)}

/* Slight focus style for accessibility */
.btn:focus{outline:2px solid rgba(255,140,0,0.25);outline-offset:2px}

/* Section reveal animation */
.section-reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease;}
.section-reveal.in-view{opacity:1;transform:none;}

@keyframes pulseHighlight{0%{box-shadow:0 0 0 0 rgba(255,140,0,0.18)}70%{box-shadow:0 0 0 18px rgba(255,140,0,0)}100%{box-shadow:none}}
.section-reveal.in-view{animation:pulseHighlight .9s ease}

/* Card pop on hover: lifts card forward with shadow */
.card-pop{transition:transform .70s cubic-bezier(.16,.8,.24,1), box-shadow .70s cubic-bezier(.16,.8,.24,1);transform:translateY(0);}
.card-pop:hover, .card-pop:focus{transform:translateY(-12px) scale(1.028);box-shadow:0 26px 56px rgba(0,0,0,0.16);z-index:10}
.card-pop:focus{outline:2px solid rgba(255,140,0,0.18);outline-offset:6px}

/* Navigation link animation and active underline */
.nav-link{position:relative;display:inline-block;padding:6px 2px;transition:transform .28s cubic-bezier(.2,.9,.3,1),color .24s ease}
.nav-link:hover{transform:translateY(-3px);}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;background:rgba(255,140,0,0.95);transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(.2,.9,.3,1),opacity .28s ease;opacity:0}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);opacity:1}
.nav-link.active{color:hsl(var(--primary));}