/* ── Reset & Base ────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { overflow-x: hidden; }
  img { display: block; max-width: 100%; }

  /* ── Navbar ──────────────────────────────────────── */
  #navbar {
    background: transparent;
    transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  }
  #navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  }
  #navbar.scrolled .nav-line { background: #3b0764; }

  /* ── Mobile Menu ─────────────────────────────────── */
  .nav-line { transition: transform 0.3s ease, opacity 0.3s ease; }
  #menuToggle[aria-expanded="true"] .nav-line:first-child {
    transform: rotate(45deg) translate(3px, 3px);
  }
  #menuToggle[aria-expanded="true"] .nav-line:last-child {
    transform: rotate(-45deg) translate(3px, -3px);
    opacity: 0;
  }
  #mobileMenu.open { transform: translateX(0); }

  /* ── Hero Lines ──────────────────────────────────── */
  .hero-line {
    position: absolute;
    background: rgba(255,255,255,0.04);
  }
  .hero-line-1 {
    top: 0; left: 15%; width: 1px; height: 100%;
    transform: skewX(-12deg);
  }
  .hero-line-2 {
    top: 0; right: 25%; width: 1px; height: 100%;
    transform: skewX(8deg);
  }
  .hero-line-3 {
    bottom: 20%; left: 0; width: 100%; height: 1px;
    transform: skewY(2deg);
  }

  /* ── Floating Card Animations ────────────────────── */
  .fade-up {
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp 0.8s ease forwards;
  }
  .fade-up:nth-child(2) { animation-delay: 0.15s; }
  .fade-up:nth-child(3) { animation-delay: 0.3s; }
  .fade-up:nth-child(4) { animation-delay: 0.45s; }

  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── Scroll Reveal ───────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Menu Hover ──────────────────────────────────── */
  #menu li {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 1rem;
  }
  #menu li:last-child { border-bottom: none; }

  /* ── Form ────────────────────────────────────────── */
  input:focus, textarea:focus {
    border-bottom-color: #7e22ce !important;
  }

  /* ── Smooth scroll offset for fixed nav ──────────── */
  section[id] {
    scroll-margin-top: 80px;
  }

  /* ── Selection ───────────────────────────────────── */
  ::selection {
    background: rgba(126, 34, 206, 0.15);
    color: #3b0764;
  }