/* components.css - buttons, nav, cards, tags, footer */
.btn{display:inline-block;padding:.7rem 1.6rem;border-radius:999px;background:var(--primary);color:#fff;font-weight:600;border:none;cursor:pointer;transition:transform var(--transition), box-shadow var(--transition)}
.btn.small{padding:.45rem .9rem;font-size:.9rem}
.btn-outline{display:inline-block;padding:.6rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);cursor:pointer}
.accent{color:var(--primary)}
.card{background:var(--panel);border-radius:var(--card-radius);box-shadow:var(--shadow);overflow:hidden}
.tag{display:inline-block;padding:.2rem .6rem;border-radius:999px;background:rgba(255,255,255,0.04);font-size:.85rem;margin-right:.5rem}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;position:relative}
.logo{font-weight:700;letter-spacing:.3px}
.nav-links{display:flex;gap:18px;list-style:none;padding:0;margin:0}
.nav-links a{padding:8px 10px;border-radius:8px}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,0.03)}

.hamburger{display:none;border:none;background:transparent;cursor:pointer;padding:8px}
.hamburger span{display:block;width:22px;height:2px;margin:4px 0;background:var(--text);transition:transform .25s,opacity .25s}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:24px 0}
.footer-link{margin-right:12px;color:var(--muted)}
/* ========== THEME SWITCH ========== */
.theme-switch { --w:56px; --h:30px; background:transparent;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center; }
.theme-switch .ts-track { width:var(--w); height:var(--h); background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border-radius:999px; display:flex; align-items:center; padding:4px; transition:background .35s, box-shadow .35s; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.theme-switch .ts-thumb { width: calc(var(--h) - 8px); height: calc(var(--h) - 8px); background:var(--panel); border-radius:50%; display:inline-grid; place-items:center; transform:translateX(0); transition: transform .45s cubic-bezier(.2,.9,.3,1), background .35s; color:var(--primary); box-shadow: 0 8px 28px rgba(0,0,0,0.5); }
.theme-switch .icon-sun{ display:none; }
.theme-switch[data-theme="light"] .ts-track { background: linear-gradient(90deg, #ffefc6, #ffd59a); box-shadow: 0 8px 30px rgba(255,200,100,0.08); }
.theme-switch[data-theme="light"] .ts-thumb { transform: translateX(calc(var(--w) - var(--h))); color: #f5a623; background: #fff; }
.theme-switch[data-theme="light"] .icon-moon{ display:none; }
.theme-switch[data-theme="light"] .icon-sun{ display:inline-block; }
.theme-switch:focus { outline: 2px solid var(--primary); outline-offset:3px; border-radius:999px; }

/* ====== NAV GLASS & AURA ====== */
.nav.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(8px) saturate(110%);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  transition: background .35s, transform .35s, box-shadow .35s;
}
.nav.scrolled { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.5); }

/* ====== LOTTIE ICONS (size helper) ====== */
.lottie-inline { width:36px; height:36px; display:inline-block; vertical-align:middle; }

/* ====== CUSTOM CURSOR (optional) ====== */
.cursor-dot, .cursor-ring {
  position: fixed; pointer-events: none; transform: translate(-50%,-50%); z-index:9999;
  transition: transform 120ms linear, opacity 160ms;
}
.cursor-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 6px 18px rgba(0,212,255,0.12); opacity:.95; }
.cursor-ring { width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.08); opacity:.7; }

/* hide if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .cursor-dot, .cursor-ring { display:none !important; }
  .nav.glass { backdrop-filter:none; }
}