:root{
  --bg:#0D0D0D;           /* sfs-black */
  --panel:#3B2F2F;        /* sfs-brown */
  --gold:#FFD700;         /* sfs-gold */
  --gold-hover:#E6C200;   /* sfs-gold-hover */
  --text:#F5F5DC;         /* sfs-beige */
  --muted:rgba(245,245,220,0.55);
  --accent:#FFD700;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{margin:0;padding:0;background:var(--bg)}
body{margin:0;padding:0;background:transparent;color:var(--text);font-family:'Inter','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
a{color:var(--gold);text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1100px,92%);margin:auto}
.section{padding:56px 0}
.section-title{font-size:1.9rem;margin:0 0 18px 0}
.center{text-align:center}

/* hamburger menu sidebar */
.menu-sidebar{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:280px;
  background:linear-gradient(180deg, rgba(13,13,13,.95), rgba(59,47,47,.85));
  backdrop-filter:blur(12px);
  border-right:1px solid rgba(255,215,0,.3);
  box-shadow:8px 0 32px rgba(0,0,0,.6);
  z-index:100;
  transform:translateX(-100%);
  transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding:60px 0 40px 0;
  overflow-y:auto;
}
.menu-sidebar.open{
  transform:translateX(0);
}
.menu-close{
  position:absolute;
  top:14px;
  right:14px;
  background:transparent;
  border:none;
  color:var(--gold);
  font-size:2rem;
  cursor:pointer;
  padding:4px 8px;
  transition:all 0.2s;
}
.menu-close:hover{
  transform:scale(1.2);
}
.menu-links{
  display:flex;
  flex-direction:column;
  gap:0;
}
.menu-links a{
  display:block;
  padding:16px 24px;
  color:var(--text);
  border-left:3px solid transparent;
  transition:all 0.2s;
  font-size:1.05rem;
  text-decoration:none;
}
.menu-links a:hover{
  background:rgba(255,215,0,.1);
  border-left-color:var(--gold);
  color:var(--gold);
  padding-left:32px;
}

/* nav - ultra-realistic glassmorphism */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 4vw;
  background:linear-gradient(135deg, rgba(13,13,13,.8), rgba(59,47,47,.6));
  backdrop-filter:saturate(180%) blur(20px) brightness(1.1);
  border-bottom:1px solid rgba(255,215,0,.4);
  border-top:1px solid rgba(255,255,255,.15);
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.1);
}
.brand{font-weight:700;letter-spacing:.4px;flex:1}
.menu-btn{
  background:transparent;
  border:none;
  color:var(--gold);
  font-size:1.8rem;
  cursor:pointer;
  padding:6px 10px;
  transition:all 0.2s;
  margin-right:14px;
}
.menu-btn:hover{
  transform:scale(1.1);
}

/* overlay when menu is open */
.menu-overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.6);
  z-index:99;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s;
}
.menu-overlay.open{
  opacity:1;
  pointer-events:auto;
}

/* hero */
.hero{display:grid;place-items:center;min-height:72vh;background:
  radial-gradient(1000px 400px at 20% 0%, rgba(255,215,0,.06), transparent),
  linear-gradient(180deg, rgba(255,215,0,.04), transparent 40%)}
.hero-inner{text-align:center;padding:48px 0}
.hero h1{font-size:clamp(2rem,3.4vw,3.4rem);line-height:1.08;margin:0 0 12px}
.hero .gold{color:var(--gold)}
.lead{opacity:.9;max-width:720px;margin:0 auto 18px}
.badges{display:flex;gap:14px;justify-content:center;opacity:.8;font-size:.95rem}

/* buttons - glassmorphism enhanced */
.btn{
  display:inline-block;
  border:1px solid var(--gold);
  padding:12px 20px;
  border-radius:999px;
  transition:all .3s ease;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transition:left 0.5s;
}
.btn:hover::before{
  left:100%;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(255,215,0,.3);
}
.btn-primary{
  background:var(--gold);
  color:#0D0D0D;
  font-weight:700;
}
.btn-ghost{
  color:var(--gold);
  background:rgba(255,215,0,.08);
  border:1px solid rgba(255,215,0,.3);
}
.btn-ghost:hover{
  background:rgba(255,215,0,.15);
  border-color:rgba(255,215,0,.5);
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold), #E6C200);
  color:#0D0D0D;
  font-weight:700;
  border:none;
  box-shadow:0 4px 15px rgba(255,215,0,.4);
}
.btn-gold:hover{
  background:linear-gradient(135deg, #E6C200, var(--gold));
  box-shadow:0 8px 25px rgba(255,215,0,.6);
}

/* projects grid - glassmorphism cards */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.project-card{
  background:linear-gradient(145deg, rgba(255,215,0,.08), rgba(59,47,47,.75), rgba(13,13,13,.6));
  backdrop-filter:saturate(180%) blur(18px) brightness(1.05);
  border:1px solid rgba(255,215,0,.4);
  border-top:1px solid rgba(255,255,255,.2);
  border-left:1px solid rgba(255,255,255,.1);
  padding:12px;
  border-radius:12px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 0 0 1px rgba(255,215,0,.2);
  transition:all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.project-card h3{margin:0 0 6px 0;font-size:1.05rem;font-weight:600}
.project-card p{margin:0 0 8px 0;font-size:.8rem;opacity:.85;line-height:1.35}
.project-icon{font-size:1.8rem;margin-bottom:6px}
.project-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.project-tag{font-size:.7rem;background:rgba(255,215,0,.18);padding:3px 8px;border-radius:4px;color:var(--gold);white-space:nowrap;border:1px solid rgba(255,215,0,.25)}
.project-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  opacity:0;
  transition:opacity 0.3s ease;
}
.project-card:hover::before{
  opacity:1;
}
.project-card:hover{
  background:linear-gradient(145deg, rgba(255,215,0,.15), rgba(59,47,47,.9), rgba(13,13,13,.75));
  border-color:rgba(255,215,0,.7);
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    0 0 20px rgba(255,215,0,.4),
    0 12px 40px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.project-card h3{margin-top:0}
.feature-list{margin:0 0 16px 18px}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* latest - glassmorphism cards */
.latest-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.latest-card{
  background:linear-gradient(140deg, rgba(255,215,0,.06), rgba(59,47,47,.7), rgba(13,13,13,.6));
  backdrop-filter:saturate(170%) blur(16px) brightness(1.03);
  border:1px solid rgba(255,215,0,.35);
  border-top:1px solid rgba(255,255,255,.18);
  border-left:1px solid rgba(255,255,255,.1);
  padding:20px;
  border-radius:16px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 0 0 1px rgba(255,215,0,.15);
  transition:all 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
  position:relative;
  overflow:hidden;
}
.latest-card::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transition:left 0.6s ease;
}
.latest-card:hover::after{
  left:100%;
}
.latest-card:hover{
  background:linear-gradient(140deg, rgba(255,215,0,.1), rgba(59,47,47,.85), rgba(13,13,13,.75));
  border-color:rgba(255,215,0,.5);
  border-top-color:rgba(255,221,0,.25);
  transform:translateY(-3px);
  box-shadow:
    0 0 20px rgba(255,215,0,.4),
    0 0 10px rgba(255,221,0,.3),
    0 12px 40px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 0 0 1px rgba(255,215,0,.25);
  animation: sf-golden-pulse 2s ease-in-out infinite alternate;
}
.latest-card time{display:block;color:var(--muted);font-size:.9rem;margin-top:6px}

/* testimonials - ultra-realistic glass */
.testimonials{
  position:relative;
  background:linear-gradient(135deg, rgba(59,47,47,.75), rgba(13,13,13,.6));
  backdrop-filter:saturate(180%) blur(22px) brightness(1.08);
  border:1px solid rgba(255,215,0,.35);
  border-top:1px solid rgba(255,255,255,.25);
  border-left:1px solid rgba(255,255,255,.12);
  padding:28px;
  border-radius:24px;
  box-shadow:
    0 16px 64px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 0 0 1px rgba(255,215,0,.15);
  overflow:hidden;
}
.testimonials::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
  opacity:0.6;
  pointer-events:none;
}
.t-item{display:none;margin:0;font-size:1.05rem}
.t-item.active{display:block}
.t-item cite{display:block;color:var(--muted);margin-top:8px}

/* SFS Background Animation Canvas */
#sfs-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Legacy circuit canvas (kept for back-compat) */
#circuit-canvas {
  display: none;
}

/* Enhanced background for animation support */
body {
  position: relative;
  overflow-x: hidden;
}

/* Ensure content stays above animation */
.nav,
.hero,
.section,
.footer {
  position: relative;
  z-index: 1;
}

/* Sparkles canvas */
#sparkles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* Performance optimization for mobile */
@media (max-width: 768px) {
  #circuit-canvas {
    display: none;
  }
  #sparkles-canvas {
    display: none;
  }
}

/* Golden pulse animation for card hover effects - softer glow */
@keyframes sf-golden-pulse {
  0% {
    box-shadow:
      0 0 25px rgba(255,215,0,.4),
      0 0 12px rgba(255,221,0,.3),
      0 20px 60px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.25),
      inset 0 -1px 0 rgba(0,0,0,.15),
      0 0 0 2px rgba(255,215,0,.3);
  }
  100% {
    box-shadow:
      0 0 35px rgba(255,215,0,.6),
      0 0 18px rgba(255,221,0,.4),
      0 20px 60px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.3),
      inset 0 -1px 0 rgba(0,0,0,.15),
      0 0 0 2px rgba(255,215,0,.4);
  }
}

/* Make cards clearly selected like SmartPart with strong visual effect */
.project-card.selected,
.latest-card.selected,
.price-card.selected {
  background: linear-gradient(135deg, rgba(255,221,0,.15), rgba(255,215,0,.2), rgba(59,47,47,.9)) !important;
  border: 2px solid rgba(255,215,0,.9) !important;
  border-top: 2px solid rgba(255,221,0,.8) !important;
  box-shadow:
    0 0 50px rgba(255,215,0,.8) !important,
    0 0 25px rgba(255,221,0,.6) !important,
    0 20px 60px rgba(0,0,0,.5) !important,
    inset 0 1px 0 rgba(255,255,255,.4) !important,
    inset 0 -1px 0 rgba(0,0,0,.2) !important !important;
  transform: translateY(-4px) scale(1.02) !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Strong golden glow outline */
.project-card.selected::after,
.latest-card.selected::after,
.price-card.selected::after {
  content: '' !important;
  position: absolute !important;
  top: -4px !important;
  left: -4px !important;
  right: -4px !important;
  bottom: -4px !important;
  background: linear-gradient(45deg, 
    rgba(255,215,0,1) 0%, 
    rgba(255,221,0,.8) 25%, 
    rgba(255,215,0,1) 50%, 
    rgba(255,221,0,.8) 75%, 
    rgba(255,215,0,1) 100%) !important;
  border-radius: 28px !important;
  z-index: -1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  filter: blur(2px) !important;
}

/* cta + footer */
.cta{background:linear-gradient(180deg, rgba(255,215,0,.06), transparent 40%)}
.footer{padding:32px 0;border-top:1px solid rgba(255,215,0,.14);text-align:center;color:var(--muted)}

/* Smart Part promo */
.smartpart { margin-top: 8px; }
.smartpart-card{
  background:linear-gradient(135deg, rgba(59,47,47,.8), rgba(13,13,13,.65));
  backdrop-filter:saturate(190%) blur(25px) brightness(1.12);
  border:1px solid rgba(255,215,0,.4);
  border-top:1px solid rgba(255,255,255,.3);
  border-left:1px solid rgba(255,255,255,.15);
  border-radius:24px;
  padding:26px;
  box-shadow:
    0 20px 80px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 0 0 1px rgba(255,215,0,.2);
  outline:none;
  transition:all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  position:relative;
  overflow:hidden;
}
.smartpart-card::before{
  content:'';
  position:absolute;
  top:-2px;
  left:-2px;
  right:-2px;
  bottom:-2px;
  background:linear-gradient(45deg, rgba(255,215,0,.3), transparent, rgba(255,215,0,.3));
  border-radius:26px;
  z-index:-1;
  opacity:0;
  transition:opacity 0.3s ease;
}
.smartpart-card:hover::before{
  opacity:1;
}
.smartpart-card:hover{ 
  background:linear-gradient(135deg, rgba(59,47,47,.95), rgba(13,13,13,.8));
  border-color:rgba(255,215,0,.8);
  border-top-color:rgba(255,221,0,.5);
  transform:translateY(-6px);
  box-shadow:
    0 0 50px rgba(255,215,0,.8),
    0 0 25px rgba(255,221,0,.6),
    0 28px 100px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 0 0 2px rgba(255,215,0,.5);
  animation: sf-golden-pulse 2s ease-in-out infinite alternate;
}
.smartpart-badge{
  display:inline-block;
  font-size:.75rem;
  color:var(--gold);
  border:1px solid rgba(255,215,0,.30);
  background:rgba(255,215,0,.10);
  padding:4px 8px; border-radius:999px; margin-bottom:8px;
}
.smartpart-title{ margin:6px 0 6px; }
.smartpart-sub{ color:var(--muted); margin:0 0 10px; }
.smartpart-list{ margin:6px 0 14px 18px; }

/* Pricing cards - glassmorphism */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin-top:32px;
}
.price-card {
  background:linear-gradient(150deg, rgba(255,215,0,.08), rgba(59,47,47,.8), rgba(13,13,13,.65));
  backdrop-filter:saturate(185%) blur(20px) brightness(1.06);
  border:1px solid rgba(255,215,0,.4);
  border-top:1px solid rgba(255,255,255,.22);
  border-left:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:32px;
  box-shadow:
    0 16px 64px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 0 0 1px rgba(255,215,0,.2);
  transition:all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.price-card::after{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(255,255,255,.03) 0%, transparent 60%);
  opacity:0.8;
  pointer-events:none;
}
.price-card:hover{
  background:linear-gradient(150deg, rgba(255,215,0,.12), rgba(59,47,47,.95), rgba(13,13,13,.8));
  border-color:rgba(255,215,0,.6);
  border-top-color:rgba(255,221,0,.3);
  transform:translateY(-5px);
  box-shadow:
    0 0 25px rgba(255,215,0,.4),
    0 0 12px rgba(255,221,0,.3),
    0 24px 80px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 0 0 2px rgba(255,215,0,.3);
  animation: sf-golden-pulse 2s ease-in-out infinite alternate;
}
.price-card.featured{
  border-color:rgba(255,215,0,.6);
  background:linear-gradient(150deg, rgba(255,215,0,.12), rgba(59,47,47,.8));
  transform:scale(1.05);
  box-shadow:
    0 20px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 0 0 2px rgba(255,215,0,.25);
}
.price-card.featured:hover{
  transform:scale(1.05) translateY(-5px);
  border-color:rgba(255,221,0,.9);
  background:linear-gradient(150deg, rgba(255,215,0,.18), rgba(59,47,47,.9));
  box-shadow:
    0 0 60px rgba(255,215,0,.9),
    0 0 30px rgba(255,221,0,.7),
    0 28px 100px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 2px rgba(255,221,0,.6);
  animation: sf-golden-pulse 1.8s ease-in-out infinite alternate;
}
.price{
  font-size:2.5rem;
  color:var(--gold);
  font-weight:700;
  margin:12px 0;
}.latest-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.latest-item{background:rgba(255,255,255,.03);border:1px solid rgba(230,194,0,.35);backdrop-filter:blur(10px);padding:14px 16px;border-radius:14px}
.latest-item h3{margin:0 0 6px;color:#FFD700;font-size:1rem;line-height:1.2}
.latest-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.85rem;color:#E6C200}
.latest-repo{padding:2px 8px;border:1px solid #E6C200;border-radius:999px;color:#FFD700}
.latest-actions{margin-top:10px;display:flex;gap:10px}
.latest-actions a{font-size:.9rem}
.skeleton{position:relative;min-height:88px;overflow:hidden}
.skeleton:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* === SFS DESIGN KIT CSS PATTERNS === */

/* Glass card utility - can be applied to any element */
.glass-card {
  background: linear-gradient(135deg, rgba(255,215,0,.08), rgba(59,47,47,.75));
  backdrop-filter: saturate(180%) blur(20px) brightness(1.05);
  border: 1px solid rgba(255,215,0,.4);
  border-top: 1px solid rgba(255,255,255,.2);
  border-left: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
  transition: all 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(255,215,0,.6);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(255,215,0,.4), 0 12px 40px rgba(0,0,0,.4);
}

/* Sidebar item styling */
.sidebar-item {
  display: block;
  padding: 12px 16px;
  border-left: 3px solid transparent;
  color: rgba(245,245,220,.8);
  transition: all 0.2s;
  cursor: pointer;
}

.sidebar-item:hover {
  background: rgba(255,215,0,.1);
  border-left-color: var(--gold);
  color: var(--gold);
  padding-left: 20px;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255,215,0,.05);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255,215,0,.3);
  border-radius: 4px;
  transition: background 0.3s;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255,215,0,.5);
}

/* === ANIMATION LIBRARY === */

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Slide up */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scale in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-left {
  animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bounce in */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.animate-bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Pulse glow */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(255,215,0,.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255,215,0,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255,215,0,0);
  }
}

.animate-pulse-glow {
  animation: pulseGlow 2s infinite;
}

/* Shimmer effect */
@keyframes shimmerEffect {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.1) 50%, transparent 100%);
  background-size: 1000px 100%;
  animation: shimmerEffect 3s infinite;
}

/* Page transition */
@keyframes pageTransition {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-transition {
  animation: pageTransition 0.4s ease-out;
}

/* Stagger animation for child elements */
.stagger-animation > * {
  animation: slideUp 0.6s ease-out backwards;
}

.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }

/* === HOVER EFFECTS === */

/* Lift on hover */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}

/* Gold glow on hover */
.hover-glow {
  transition: all 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(255,215,0,.5), 0 0 60px rgba(255,215,0,.3);
  border-color: rgba(255,215,0,.8);
}

/* === COLOR UTILITIES === */
.bg-sfs-black { background-color: #0D0D0D; }
.bg-sfs-brown { background-color: #3B2F2F; }
.bg-sfs-gold { background-color: #FFD700; }
.text-sfs-gold { color: #FFD700; }
.text-sfs-beige { color: #F5F5DC; }
.border-sfs-gold { border-color: #FFD700; }

/* === FRIENDLY-UX EXTERNAL STYLES (moved from inline to fix CSP) === */

/* Ripple click effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.30);
  transform: scale(0);
  animation: ripple-animation 0.6s ease-out forwards;
  pointer-events: none;
  width: var(--ripple-size, 100px);
  height: var(--ripple-size, 100px);
}

@keyframes ripple-animation {
  to { transform: scale(2.5); opacity: 0; }
}

/* Scroll-to-top button */
.sfs-scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #E6C200);
  color: #0D0D0D;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.30);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  font-weight: bold;
  line-height: 1;
}
.sfs-scroll-top.visible {
  opacity: 1;
  transform: scale(1);
}

/* Page-load progress bar */
.sfs-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #FFD700, #E6C200);
  z-index: 9999;
  animation: sfs-loader-slide 1s ease-in-out infinite;
}
@keyframes sfs-loader-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Lightning Fast badge */
.sfs-perf-badge {
  position: fixed;
  bottom: 90px;
  right: 30px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.30);
  z-index: 1000;
  animation: sfs-slide-in-right 0.5s ease-out;
}
.sfs-perf-badge.exiting {
  animation: sfs-slide-out-right 0.5s ease-in forwards;
}

@keyframes sfs-slide-in-right {
  from { transform: translateX(400px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes sfs-slide-out-right {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(400px); opacity: 0; }
}

/* Section scroll-reveal (CSS-driven — no opacity:0 set via JS) */
@keyframes sfs-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sfs-revealed {
  animation: sfs-reveal 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Menu active link */
.menu-links a.active {
  background: rgba(255, 215, 0, 0.12);
  border-left-color: #FFD700;
  color: #FFD700;
}

/* ===================================================
   COMPACT SYSTEM CARDS — homepage category layout
   =================================================== */

.sys-category {
  margin-bottom: 52px;
}

.sys-cat-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,215,0,.15);
}
.sys-cat-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; padding-top: 3px; }
.sys-cat-info { flex: 1; }
.sys-cat-info h3 { font-size: 1.1rem; color: #FFD700; margin-bottom: 3px; }
.sys-cat-info p  { font-size: .83rem; color: rgba(245,245,220,.55); line-height: 1.4; max-width: 560px; }
.sys-cat-link {
  font-size: .8rem;
  color: rgba(255,215,0,.65);
  white-space: nowrap;
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 12px;
  padding: 5px 12px;
  transition: all .2s;
  flex-shrink: 0;
  align-self: center;
}
.sys-cat-link:hover { color: #FFD700; border-color: #FFD700; background: rgba(255,215,0,.08); }

/* Compact card row — horizontal scroll on small screens */
.sys-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

/* Compact card */
.sys-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(59,47,47,.4);
  border: 1px solid rgba(255,215,0,.12);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, background .2s, transform .15s;
}
.sys-card:hover {
  border-color: rgba(255,215,0,.5);
  background: rgba(59,47,47,.65);
  transform: translateY(-2px);
}
.sys-card-top { display: flex; align-items: center; gap: 8px; }
.sys-card-icon { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.sys-card-name { font-size: .88rem; font-weight: 600; color: #F5F5DC; }
.sys-card-tagline { font-size: .75rem; color: rgba(245,245,220,.55); line-height: 1.3; }
.sys-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sys-tag {
  padding: 2px 7px;
  border-radius: 8px;
  font-size: .68rem;
  background: rgba(255,215,0,.08);
  color: rgba(255,215,0,.75);
  border: 1px solid rgba(255,215,0,.15);
}

/* ===================================================
   BURGER MENU TREE NAV
   =================================================== */

.menu-sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,215,0,.3) transparent;
}

.menu-group { margin-bottom: 4px; }

.menu-group-toggle,
.menu-cat-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: #F5F5DC;
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  border-radius: 8px;
  transition: background .15s;
}
.menu-group-toggle { font-size: 1rem; color: #FFD700; }
.menu-group-toggle:hover,
.menu-cat-toggle:hover { background: rgba(255,215,0,.08); }

.menu-toggle-arrow {
  margin-left: auto;
  font-size: .75rem;
  color: rgba(255,215,0,.5);
  transition: transform .2s;
}

/* Systems tree — collapsed by default */
.menu-tree { display: none; padding-left: 8px; }
.menu-tree.open { display: block; }

.menu-cat-group { margin-bottom: 2px; }
.menu-cat-toggle { font-size: .88rem; font-weight: 500; padding: 8px 14px; }

.menu-cat-count {
  margin-left: 6px;
  font-size: .7rem;
  background: rgba(255,215,0,.15);
  color: rgba(255,215,0,.8);
  border-radius: 10px;
  padding: 1px 6px;
}

/* Category list — collapsed by default */
.menu-cat-list { display: none; padding-left: 16px; }
.menu-cat-list.open { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }

.menu-cat-viewall {
  font-size: .78rem;
  color: #FFD700;
  padding: 5px 10px;
  border-radius: 6px;
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.menu-cat-viewall:hover { background: rgba(255,215,0,.08); }

.menu-sys-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: .8rem;
  color: rgba(245,245,220,.75);
  transition: background .15s, color .15s;
}
.menu-sys-link:hover { background: rgba(255,215,0,.07); color: #FFD700; }
.menu-sys-icon { font-size: 1rem; flex-shrink: 0; }

.menu-divider {
  height: 1px;
  background: rgba(255,215,0,.12);
  margin: 10px 14px;
}

.menu-static-link {
  display: block;
  padding: 9px 14px;
  font-size: .9rem;
  color: rgba(245,245,220,.8);
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.menu-static-link:hover { background: rgba(255,215,0,.08); color: #FFD700; }

/* ===================================================
   GOLDEN-BROWN EMOJI TINT
   Applies a warm sepia-gold filter to all emoji icons
   =================================================== */
.sys-cat-icon,
.sys-card-icon,
.sys-detail-icon,
.sys-cat-section-icon,
.menu-sys-icon,
.sfs-emoji {
  filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.05);
  display: inline-block;
}

/* Category toggle icons inside buttons */
.menu-cat-toggle > span:first-child,
.menu-group-toggle > span:first-child {
  filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.05);
}